/* HEADER */


#lang-controls {
    position: absolute;
    top: 0px;
    right: 10px;
    z-index: 22;
    /*background-color: rgba(0,0,0,0.9);*/
    padding-right: 10px;
}
#lang-controls ul {padding-left: 15px}
#lang-controls ul li {float: left; padding: 20px 5px 0}




[data-toggle="collapse"] .caret {
    -webkit-transform: rotate(0deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
    -ms-transform: rotate(0deg); /* IE 9 */
    transform: rotate(0deg); /* IE 10, Fx 16+, Op 12.1+ */
}

[data-toggle="collapse"].collapsed .caret {
    -webkit-transform: rotate(-90deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
    -ms-transform: rotate(-90deg); /* IE 9 */
    transform: rotate(-90deg); /* IE 10, Fx 16+, Op 12.1+ */
}

ul.nav {
    font-size: 12px;
    text-transform: uppercase;
}



.overflow-h{overflow:hidden!important}



/*new*/

#main-menu-btn{float: right;margin-right: 10px !important;}
#main-menu-btn span{font-size:20px}


.card {color: #000}

#header{position: relative;z-index: 999;height: 80px;}
nav#nav{  padding: 0px; max-width: 100%; transform: scaleY(0); transition: all 0.2s;transform-origin:top;}
nav#nav.active{transform: scaleY(1)}
nav#nav a,#main-menu-btn a{color: inherit}


nav#nav > div{padding-top: 90px;padding-bottom: 60px; background-color: #fff}
#main-logo{position: absolute;top: 0px; left: 30px; z-index: 99999}
#main-logo  img {width: 200px; display: block;}

body.dark #header #main-logo{/*filter: invert(1);*/ background-image: url(../img/logo_w.png);
    background-size: 100%;
    background-position: top left;
    background-repeat: no-repeat;
    content: '';
    height: 50px;
    width: 200px;
    margin: 15px 0 0;
}
body.dark #header #main-logo img {display: none;}


.close-main-menu-btn{display: block;position: absolute; right: 35px;top:20px;color: #fff;font-size: 22px}
@media(max-width: 1200px){
    #nav {background-color: #000}
    nav .m-c{height: auto !important;}

    body.mob-menu-active{position: fixed}
    nav#nav{  height: 100vh; /*font-size: 1.2rem;*/ position: fixed !important;overflow-y: auto}
}

.nav-controls{position: absolute; top:15px; right: 20px}
@media(min-width: 768px){
    #main-logo  img {max-width: 200px;}
}
.menu-tag-btn.active,
.cat-tag-btn.active{font-weight: bold; text-decoration: underline;}
.submenu-cont,.submenu-cont-m{height:0px;overflow:hidden;transform: scaleY(0); transition: all 0.2s;transform-origin:top;}


#subheader-main .slick-models .label {margin: -40px 0 30px; color: #fff; font-size: 0.85rem; text-transform: uppercase;}
#subheader-main .slick-models img{height: 100px; width: 100px;}

.text_menu {font-size: 22px; font-weight: 700; line-height: 30px; }
ul.options li{ padding: 20px 10px}

#cat-tag-wrapper >.cat-tag-contet{display: none}
#cat-tag-wrapper >.cat-tag-contet.active{display: flex}
.submenu-cont-m > li:first-child{border-top: 1px solid #000}
.submenu-cont-m > li:last-child{border-bottom: 1px solid #000}
.submenu-cont-m.active{transform: scaleY(1);height: auto}

nav#nav a.active::after{content: "\25bc"; font-size: 8px; margin-left: 10px; position: absolute;top: 2px }


@media(max-width:767px) {
    #main-logo img {width: 170px; margin-top: 15px;}
    body.dark #header #main-logo{
        width: 170px;
        margin: 15px 0 0;
    }
    #header{margin-bottom: 20px;}
    body.dark #header{margin-bottom: 0px;}
    
}
@media(max-width:1200px) {
    nav#nav > div {background-color: rgba(0,0,0,0.98);}
    nav#nav a, #main-menu-btn a {margin: 5px 0 0; display: block; color: #fff}
    nav#nav .submenu-cont-m > li a {margin: 0.65rem 0; display: block;}
    .submenu-cont-m > li:first-child {border-top: 1px solid #fff;}
    .submenu-cont-m > li:last-child {border-bottom: 1px solid #fff;}
    nav#nav a.active::after {top: auto;}
}

@media(min-width: 1200px){
    nav#nav a:hover,nav#nav a.active{border-bottom: 1px solid; text-decoration: none}
    nav#nav{height: 80px !important;border-bottom: 2px solid #fff;max-width: 800px;transform: scaleY(1) !important;margin-bottom: 10px}
    .nav-controls{display: none}
    nav#nav > div{padding-top:0px;padding-bottom: 0px; background-color: transparent}
    /*nav#nav .collapse,nav#nav .collapsing{position: absolute; width: 100vw; left: 0px}*/


    .submenu-cont.active{transform: scaleY(1);height: auto}
}
@media(min-width: 1280px){
    #main-logo  img {max-width: 220px; margin: 15px 0}
}





#m-menu img{display: none}
#m-menu #main-logo img {display: block;}

#m-menu{position: fixed;z-index:-20 ;height: 100%;background-color: #fff; left: 0px; transition: all 0.2s; width: 100%;opacity: 0}
body.mob-menu-active #m-menu{display: block; width: 100%;z-index: 9999999999;opacity: 1; overflow: auto;}
body.mob-menu-active {overflow:hidden}


#m-menu ul:first-child {padding-left: 20px;}
#m-menu ul {padding-left: 25px;}

#m-menu .m-menu-l1 a{color: #222;
    font-size: 15px;
    line-height: 25px;
    padding-bottom: 10px; /*text-transform: lowercase;*/}
#m-menu .m-menu-l1 > a{text-transform: uppercase; font-size: 20px; line-height: 35px; font-weight: 200}
#m-menu .m-menu-l1 a:hover,#m-menu .m-menu-l1 a.active{opacity: 1; font-weight: 300 }
#m-menu .m-menu-l1 a[aria-expanded="true"]{opacity: 1; font-weight: 300 }
#m-menu .m-menu-l1 a.collapse {opacity: 1; }
#m-menu .m-menu-l1 .collapse a[aria-expanded="true"] {text-decoration: underline;}
#m-menu-products-sub {padding-top: 10px; padding-bottom: 20px}

#m-menu .border-right {border-right: 0 !important;}

.l-footer {color: #222; }
.l-footer .c-black {font-size: 12px; font-weight: 700}
.l-footer a{padding-right: 5px; font-size: 12px; opacity: 0.55;}
.l-footer a.active{font-weight: bold; opacity: 1;}
.l-footer a:hover{opacity: 1;}

.l-footer .social ul {width: auto; padding-right: 0px}

    .pl-40 {padding-left: 60px}
    .pr-40 {padding-right: 40px}


/*
*/
@media(max-width: 767px){
    /* .menu-up {height: 20vh !important}
    .menu-in {height: 75vh !important}*/
    .l-footer ul.lang {margin-bottom: 0}
    .l-footer .social {display: none;}
}

@media(min-width: 768px){
    .col-md-4, .col-md-8 {padding: 7px}

    ul {padding: 0}

    #m-menu .border-right {border-right: 1px solid #000 !important}
    #m-menu img{display: block}
    #m-menu .m-menu-l1 > a{
        opacity: 0.65;
        font-size: 25px;
        line-height: 35px;
        font-weight: 200;
        letter-spacing: 0.15rem;
        text-transform: uppercase;
        /*font-size: 3rem;*/}
    #m-menu-products-sub {padding-left: 40px}
    #m-menu .m-menu-l1 > a.menu-tag-btn {    text-transform: lowercase; letter-spacing: 0.05rem; font-size: 20px;}
    .menu-data{position: absolute; left: 36vw;top: 50%;transform: translateY(-50%); width: 100%; width: 60vw;transition: all 0.3s}
    .menu-data.collapsing{opacity:0}
    .menu-data.collapse{opacity: 1}
    .menu-data.collapse a {font-weight: 700}
    .menu-data.collapse a:hover {font-weight: 700 !important; text-decoration: underline;}

    .pl-40 {padding-left: 0px}
    .pr-40 {padding-right: 0px}
}

@media(min-width: 992px){
    .col-md-4, .col-md-8 {padding: 15px}

    ul {padding: revert}

    #m-menu .border-right {border-right: 1px solid #000 !important}
    #m-menu img{display: block}
    #m-menu .m-menu-l1 > a{
        opacity: 0.65;
        font-size: 30px;
        line-height: 40px;
        font-weight: 200;
        letter-spacing: 0.15rem;
        text-transform: uppercase;
        /*font-size: 3rem;*/}
    #m-menu .m-menu-l1 > a.menu-tag-btn {    text-transform: lowercase; letter-spacing: 0.05rem; font-size: 20px;}
    .menu-data{position: absolute;left: 30vw;top: 50%;transform: translateY(-50%); width: 100%; width: 45vw; max-width: 750px; transition: all 0.3s}
    .menu-data.collapsing{opacity:0}
    .menu-data.collapse{opacity: 1}
    .menu-data.collapse a {font-weight: 700}
    .menu-data.collapse a:hover {font-weight: 700 !important; text-decoration: underline;}

    .pl-40 {padding-left: 60px}
    .pr-40 {padding-right: 40px}
}