/* ==========================================================================
   General
   ========================================================================== */
main { width: 100vw; overflow: hidden;}
.wrapper{ max-width: 1366px; width: 96vw; margin: 0 auto;}
#my-content { overflow-x: hidden;}
/* ==========================================================================
   RESPONSIVE EMBEDED IFRAME
   ========================================================================== */
.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: contain; display: block;}
.videoWrapper video {position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover; display: block;}
.videoWrapper img {position: absolute;top: 0;left: 0;width: 100%;height: 100%; object-fit: cover; display: block;}
.mapWrapper {position: relative;padding-bottom: 56.25%;}
.mapWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* ==========================================================================
   MMENU
   ========================================================================== */
@media only screen and (max-width: 1200px) {

    #headerBottom,#headerTop .topMenu,#headerTop .socialMenu  { display: none !important;}
    #showMenu { display: inline-block !important; position: relative; z-index: 1; font-size: 18px; color: #0088ce; background: rgb(247, 247, 247);border-radius: 20px;padding: 2px 8px;}
    #headerTop .flex:nth-of-type(2) { margin-left: auto;}
    #headerTop { gap: 20px;}
    #my-header { padding: 20px 2vw;}

    .mm-panels>.mm-panel, .mm-navbar__title, .mm-panels,.mm-menu_offcanvas, .mm-navbar { background: #ffffff !important;}
    .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { color: #000000;}
    .mm-menu a.active { color: #0088ce;}
    .mm-listitem, .mm-navbar { border-color: #ffffff;}
    .mm-listitem i { display: none;}
}
@media only screen and (max-width: 540px) {
    .txtAnim { display: none;}
}

@media only screen and (min-width: 1201px) {
    #showMenu { display: none !important;}
    #mm-my-menu { display: none !important;}
}

/* ==========================================================================
   GENERAL
   ========================================================================== */
@media only screen and (max-width: 1000px) {
    #search-input { width: 98vw; top: 100px;}
    #boxSearchContainer:after { right: 2vw;top:25px;}
    #boxSearchContainer INPUT { padding-left: 15px;}
}
@media only screen and (max-width: 800px) {
    h1, h2, h3, h4 {word-break: break-word;}

    .pageBanner { min-height: 120px;}
    .generalPadding { padding: 40px 0;}
    .sectionTitle { font-size: 24px;}
}

/* ==========================================================================
   SLIDER
   ========================================================================== */
@media only screen and (max-width: 1500px) {
    .sliderContainer .bx-wrapper .bx-prev { left: 10px;}
    .sliderContainer .bx-wrapper .bx-next { right: 10px;}
    .sliderContainer .wrapper { width: calc(100% - 120px);}
    .sliderContainer .pageTitle { width: 60%;}
}
@media only screen and (max-width: 1000px) {
    .sliderContainer { margin: 0 2vw;}
    .sliderContainer .pageTitle { width: 100%;}
}
@media only screen and (max-width: 800px) {
    .sliderContainer .title {font-size: 24px;}
    .tag{font-size: 10px; padding: 5px 11px;}
}
@media only screen and (max-width: 640px) {
    .sliderContainer .bx-wrapper .bx-prev { left: 5px;}
    .sliderContainer .bx-wrapper .bx-next { right: 5px;}
    .sliderContainer .wrapper { width: 96%;}
    .sliderContainer { margin:0; }
    .sliderContainer article { border-radius: 0;}
}
@media only screen and (max-width: 480px) {
    .sliderContainer article { min-height: 400px;}
    .sliderContainer .wrapper { width: 100%;}
    .sliderContainer .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(189, 187, 187, 0.6);}
}
/* ==========================================================================
   VIDEO PAGE
   ========================================================================== */
@media only screen and (max-width: 1000px) {
    .pageVideoTitle svg { width: 100px;}
}
@media only screen and (max-width: 800px) {
    .pageVideoTitle { padding: 40px 2vw; min-height: 300px;}
    .pageVideoTitle .title.videoTitle {font-size: 24px;}
    .pageVideoTitle .intro.videoIntro {font-size: 18px;}
}
/* ==========================================================================
   ARTICLES
   ========================================================================== */
@media only screen and (max-width: 1000px) {
    .bannerPage .tags { margin-top:20px;}
    .gridArticole { grid-template-columns: repeat(3,1fr);}
}
@media only screen and (max-width: 800px) {
    .gridArticole { grid-template-columns: repeat(2,1fr);}
    .bannerPage .titlu { font-size: 24px;}
    .bannerPage .descriere { margin: 0;}
}
@media only screen and (max-width: 640px) {
    .gridArticole { grid-template-columns: 1fr;}
}
/* ==========================================================================
   ASIDE PAGES
   ========================================================================== */
@media only screen and (max-width: 1200px) {
    .pageBlog { display: block;}
    .pageBlogAside { display: none;}

    /*fix*/
    .mm-wrapper,.mm-slideout { transform: initial !important;}
    .mm-wrapper_opening .mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-440px, 0, 0);
        transform: translate3d(-440px, 0, 0) !important;
    }
}

/* ==========================================================================
   CATALOG
   ========================================================================== */
@media only screen and (max-width: 800px) {
    .zigzagBoxes .row { grid-template-columns: 1fr;}
    .zigzagBoxes .row div:last-of-type { min-height: 267px; padding: 60px 5%;}
    .zigzagBoxes .row div:first-of-type { min-height: 500px;}

    .formStyle.halfBox { width: 100%;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
@media only screen and (max-width: 1200px) {
    #pageFooter .top { padding: 0 2vw 30px;}
    #pageFooter .links { display: grid; grid-template-columns: repeat(2,1fr); gap: 36px 20px;}
}
@media only screen and (max-width: 800px) {
    #pageFooter .top { display: block;}
    #pageFooter .address-info { text-align: center;}
    #pageFooter .socialMenu {display: inline-flex; margin-bottom: 30px;}
}