.clear { clear: both;}
body.no-top { 
    padding-top: 32px;  
}
#main-bots-form {
    display: none;
}
/* MAIN NAV */
#main-nav-menustate,
.main-nav-menustate-label  {
    position: fixed;
    top: -100%;
}
nav.main-nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 102px;
    display: block;
    color: #eee;
    z-index: 999;
}
nav.main-nav:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 100%;
    transform: translateY(0);
    opacity: 1;
    
    background-color: rgba(255,255,255,1);
    
   /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
}
@media (min-width: 961px){
    body.no-top nav.main-nav:before {
        width: 50%;
    }
}
nav .main-nav-wp {
    position: relative;
    width: 100%;
    height: 70px;
    max-width: 1366px;
    margin: 0 auto;
}
nav.main-nav .main-nav-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    pointer-events: auto;
    overflow: auto;
    visibility: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 1;
}
@media (max-width: 960px){
    nav.main-nav .main-nav-body  {
        visibility: hidden;
    }
    #main-nav-menustate:checked ~ #main-nav .main-nav-wp, 
    #main-nav-menustate:target ~ #main-nav .main-nav-wp {
        height: 100%;
    }
    #main-nav-menustate:checked ~ #main-nav .main-nav-body, 
    #main-nav-menustate:target ~ #main-nav .main-nav-body {
        visibility: visible;
        padding-top: 80px;
    }
    #main-nav-menustate:checked ~ #main-nav .main-nav-wp:after,
    #main-nav-menustate:target ~ #main-nav .main-nav-wp:after {
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 102px;
        display: block;
        background-color: #fff;
        /*background: linear-gradient(90deg,#a6bbc5, #80abc0);*/
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        z-index: 2;
    }
    body.no-top { 
        padding-top: 102px;  
    }
}
body.w-top-slider nav.main-nav.nv-bg:before,
body.w-top-logo nav.main-nav:before,
body nav.main-nav.nv-bg:before {
    transform: translateY(0);
    width: 100%;
    opacity: 1;
}

/* TOP BAR */
.top-bar {
    position: relative;
    z-index: 3;
    background-color: #000519;
    height: 32px;
    line-height: 32px;

}
.top-bar-body {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    -webkit-justify-content: flex-end; /* Safari */
    justify-content:  flex-end;
}
.top-bar .tel a {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 2px 10px 2px 24px;
    background-image: url('../grp/tel-white.svg');
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 2px 5px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.top-bar .wa a {
    background-image: url('../grp/wa.svg');
}


/* LOGO */
.main-nav .logo {
    position: absolute;
    top: 13px;
    left: 15px;
    text-align: left;
    z-index: 3;
}
.main-nav .logo .img {
    width: 180px;
    height: 54px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../grp/logo.svg);
}
@media (max-width: 1066px){
    /* LOGO */
    .main-nav .logo {
        top: 19px;
    }

    .main-nav .logo .img {
        width: 130px;
        height: 38px;
    }
    
}
@media (max-width: 960px){
    /* LOGO */
    .main-nav .logo {
        position: absolute;
        text-align: left;
        z-index: 3;
    }
    
}

/* NAV SHOW */
.nav-show {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 42px;
    height: 42px; 
    overflow: hidden;
    color: #fff;
    text-decoration: none;    
    z-index: 4;
    border-radius: 50%;
    display: none;
}
.nav-show label {
    display: flex; 
    padding: 7px; 
}
#main-nav-menustate-open {
    display: none;
}
#main-nav-menustate-close {
    display: none;
}
@media (max-width: 960px){
    #main-nav-menustate-open {
        display: block;
    }
    #main-nav-menustate-close {
        display: block;
    }
    .nav-show  {
        display: block;
    }
}
.nav-show .icon span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 21px;
    height: 3px;
    background-color: #b8b8b8;
    transition: transform .3s ease, top .1s ease, left .1s ease;
    border-radius: 3px;
}
.nav-show .icon {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 100ms ease;
}
.nav-show .icon .shape-1 {
    top: 6px;
    left: 4px;
}
.nav-show .icon .shape-2 {
    top: 13px;
    left: 4px;
}
.nav-show .icon .shape-3 {
    top: 20px;
    left: 4px;
}

/* MAIN BOTS */
nav ul.main-bots {
    width: 100%;
    height: auto;
    padding: 0px 15px;   
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-end;
}
nav .main-bots > li {
    z-index: 2;
    display: block;
    margin: 0;
    padding: 0;
    transition: opacity .0s linear .0s; 
    text-align: center;
}
nav.main-nav:not(.show) > li {
    transition-delay: 0s !important;
}



nav .header-right {
    width: 100%;
}
@media (min-width: 961px){

    nav .main-bots > li.nav-registro,
    nav .main-bots > li.nav-logout {
        margin-left: 5px;
    }
    nav .main-bots > li.nav-registro a,
    nav .main-bots > li.nav-logout a {
        border: solid 1px #ddd;
        border-radius: 4px;
    }
    
    nav ul.main-bots {
      
    }
    nav .main-bots > li.only-mobile {
        display: none;
    }
    nav .header-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 50%;
        padding-right: 10px;
    }
}
nav .main-bots > li > a {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
    color: #8b8b8b;
    z-index: 2;
    padding: 2px 6px;
    width: 100%;
    transition: color 100ms linear;
    text-transform: uppercase;
}
@media (max-width: 1140px){
    nav .main-bots > li > a {
        font-size: 12px;
        padding: 2px 4px;
    }
}

a > label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
@media (max-width: 960px){
    nav .main-bots > li:last-child > a {
        border-bottom: none;
    }
}

/* LIMPIAR */
nav .main-bots li > input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: .01;
    z-index: -20;
    -webkit-appearance: none;
}
a > input[type="reset"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:0;
    background:rgba(100,100,100,.0);
    border-radius: 0;
    border:none;
    display: none;
    -webkit-appearance: none;
    cursor: pointer;
}
input:checked ~ a > input[type="reset"] {
    display: block;
}

@media (max-width: 960px){
    nav ul.main-bots {
        position: relative;
        top: 0px;
        -webkit-flex-direction: column;
        flex-direction: column;
        right: auto;
    }
    nav .main-bots > li {
        position: relative;
        text-align: left;
        padding: 0 6px 0 6px;
    }
    nav .main-bots > li:not(:last-child) {
        border-bottom: solid 1px rgba(0,0,0,.1);
    }
    nav .main-bots > li > a {
        position: relative;
        padding: 6px 0 6px 10px; 
        font-size: 14px;
    }   
    nav .main-bots > li > a:before {
        content: '+';
        position: absolute;
        top: 4px;
        right: 10px;
        font-size: 18px;
        transition: transform 200ms ease-in-out;
        text-decoration: none !important;
    }
    input:checked ~ a:before {
        transform: rotate(135deg);
    }   
}


/* NIVEL 1 PRODUCTOS */
.main-bots-products-cats-1 {
    position: absolute;
    background-color: rgba(255,255,255,1);
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
    border-radius: 4px;
    border: solid #a3a3a3 1px;
    color: #659dac;
    font-size: 15px;
    line-height: 20px;
    visibility: hidden;
    transform: translateY(-5px);
    opacity: 0;
    transition: transform 200ms ease-out 50ms,
                opacity 200ms linear 50ms;
    text-align: left;
    width: 100%;
    max-width: 260px;
}

/* NIVEL 1 PRODUCTOS TOGGLE */
@media (min-width: 960px){
    input:checked ~ .main-bots-level-1 {
        visibility: visible;
        transform: translateY(0);
        opacity: 1;
    }
}
@media (max-width: 960px){
    .main-bots-products-cats-1 {
        position: relative;
        top: 0;
        height: 0;
        overflow:hidden;
    }
    input:checked ~ .main-nav input:checked ~ .main-bots-level-1 {
        height: auto;
        visibility: visible;
        transform: translateY(0);
        opacity: 1;
        max-width: none;
    }
}
.main-bots-products-cats-1 > ul {    
    padding: 10px;
}

.main-bots-products-cats-1 > ul > li:not(:last-child) {
    border-bottom: solid 1px rgba(0,0,0,.1);
}
@media (max-width: 960px){
    .main-bots-products-cats-1 > ul > li {
        position: relative;
    }
    
    input:checked ~ .main-nav input:checked ~ div {
        margin-bottom: 6px;
    }
}
.main-bots-products-cats-1 > ul > li > a {
    position: relative;
    display: block;
    padding: 5px 10px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color 100ms linear;
    font-size: 14px;
    color: #444;
}
.main-bots-products-cats-1 > ul > li > a:hover {
    color: #003646;
    text-decoration: underline;
}
@media (max-width: 960px){
    .main-bots-products-cats-1 > ul {
        position: relative;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .main-bots-products-cats-1 > ul > li > a {
        padding: 6px 10px;
    }
}

nav .main-nav-body {
    pointer-events: none;   
    display: block;
}
/* SHOW */

#main-nav-menustate:checked ~ #main-nav .nav-show .shape-1,
#main-nav-menustate:target ~ #main-nav .nav-show .shape-1 {
    top: 13px;
    left: 4px;
    transform: rotate(45deg);
}
#main-nav-menustate:checked ~ #main-nav .nav-show .shape-2,
#main-nav-menustate:target ~ #main-nav .nav-show .shape-2 {
    top: 13px;
    left: 4px;
    transform: rotate(-45deg);
}
#main-nav-menustate:checked ~ #main-nav .nav-show .shape-3,
#main-nav-menustate:target ~ #main-nav .nav-show .shape-3 {
    top: 13px;
    left: 4px;
    transform: rotate(45deg);
}
#main-nav-menustate:checked ~ #main-nav,
#main-nav-menustate:target ~ #main-nav {
    /*height: 100%;*/
    padding: 0;
}
@media (max-width: 960px) {
    #main-nav-menustate:checked ~ #main-nav,
    #main-nav-menustate:target ~ #main-nav {
        height: 100%;
    }
}

body.w-top-slider #main-nav-menustate:checked ~ #main-nav:before,
#main-nav-menustate:checked ~ #main-nav:before,
body.w-top-slider #main-nav-menustate:target ~ #main-nav:before,
#main-nav-menustate:target ~ #main-nav:before {
    position: fixed;    
    height: 102px;
}
@media (max-width: 960px) {
    body.w-top-slider #main-nav-menustate:checked ~ #main-nav:before,
    #main-nav-menustate:checked ~ #main-nav:before,
    body.w-top-slider #main-nav-menustate:target ~ #main-nav:before,
    #main-nav-menustate:target ~ #main-nav:before {
        transform: translateY(0);
        opacity: 1;
        /*background: rgba(0,192,240,1);*/
        height: 100%;
    }

    #main-nav-menustate:checked ~ #main-nav .main-nav-body,
    #main-nav-menustate:target ~ #main-nav .main-nav-body {
        display: block;
        height: 100%;
        pointer-events: auto;
        overflow: auto;
    }
    #main-nav-menustate:checked ~ #main-nav .main-bots > li,
    #main-nav-menustate:target ~ #main-nav .main-bots > li {
        opacity: 1;
        transition-duration: .3s;
        /*transition: opacity .5s linear .2s;*/
    }
}

/* SEARCH */
.search {
    position: relative;
    display: flex;
    justify-content:flex-start;
    align-items:flex-start;
    z-index: 99999;
    padding: 10px;
    width: 100%;
}
.search input[type="search"],
nav.main-nav.nv-bg .search input[type="search"] {
    background-color: #8b8b8b;
    color: #fff;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    line-height: 16px;
    display: block;
    width: 100%;
    padding: 6px;
}
.search button,
nav.main-nav.nv-bg .search button {
    width: 24px;
    height: 24px;
    background: none;
    background-image: url('../grp/search-grey.svg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    border: none;
    margin: 3px 15px;
}
@media (min-width: 961px){
    .search {
        padding: 0 0 0 20px;
    }
    .home .search input[type="search"] {
        background-color: #fff;
        color: #8b8b8b;
    }
    .home .search button {
        background-image: url('../grp/search-w.svg');
    }
}

@media (max-width: 960px) {
    .search {
        left: auto;
        right: auto;
    }
}
/* HOT SALE */
.social-networks .hot-sale {
    width: auto;
    margin-top:-10px;
    margin-right: 10px;
}

/* SOCIAL NETWORKS */
.social-networks {
    position: relative;
    display: flex;
    justify-content: center;
    margin-right: 10px;
}
.social-networks a {
    display: block;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: center;
}

.social-networks a.twitter,
nav.main-nav.nv-bg .social-networks a.twitter {
    background-image: url(../grp/twitter-grey.svg);
}
.social-networks a.facebook,
nav.main-nav.nv-bg .social-networks a.facebook {
    background-image: url(../grp/facebook-grey.svg);
}
.social-networks a.instagram,
nav.main-nav.nv-bg .social-networks a.instagram {
    background-image: url(../grp/instagram-grey.svg);
}
.social-networks a.linkedin,
nav.main-nav.nv-bg .social-networks a.linkedin {
    background-image: url(../grp/linkedin-grey.svg);
}
.social-networks a.tiktok,
nav.main-nav.nv-bg .social-networks a.tiktok {
    background-image: url(../grp/tiktok-grey.svg);
}
.social-networks a.pinterest,
nav.main-nav.nv-bg .social-networks a.pinterest {
    background-image: url(../grp/pinterest-grey.svg);
}
.social-networks a.youtube,
nav.main-nav.nv-bg .social-networks a.youtube {
    background-image: url(../grp/youtube-grey.svg);
}

@media (min-width: 961px){
    .social-networks {
      
    }
    .home .social-networks a.twitter {
        background-image: url(../grp/twitter.svg);
    }
    .home .social-networks a.facebook {
        background-image: url(../grp/facebook.svg);
    }
    .home .social-networks a.instagram {
        background-image: url(../grp/instagram.svg);
    }
    .home .social-networks a.linkedin {
        background-image: url(../grp/linkedin.svg);
    }
    .home .social-networks a.tiktok {
        background-image: url(../grp/tiktok.svg);
    }
    .home .social-networks a.pinterest {
        background-image: url(../grp/pinterest.svg);
    }
    .home .social-networks a.youtube {
        background-image: url(../grp/youtube.svg);
    }
}
/* LANGUAGE */
.language {    
    padding: 10px;
    display: flex;
    justify-content: flex-end;
   
}
.language select,
nav.main-nav.nv-bg .language select {
    background: none;
    border: none;
    color: #8b8b8b;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    width: 100%;
    border: solid 1px #0000001a;
    padding: 5px 5px;
    border-radius: 6px;
}
.language select option {
    color: #333;
    text-align:right;
}
@media (min-width: 961px){

    .language select,
    nav.main-nav.nv-bg .language select {
        border: solid 1px #eee;
    }
    .home .language select {
        background: none;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }
}