/* HEADER =====================================
============================================= */

.main-header {
    z-index: 999;
    position: relative;    
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 21%);
    margin-bottom: -1px;
    background-color: #000;
    
} 

.main-logo-link{transition: transform .1ms ease-in-out;}
.main-logo-link:hover{transform: scale(1.05) rotate(-3deg);}


.main-header  .row{display:flex; align-items: center; justify-content: flex-start;}


@media screen and (max-width:768px){
    
    .main-header  {height: 76px;}


    .main-header .center-bar {
    padding            : 0;
    background-image   : url(/u/plantillas/p/la-sabrosita/imgs/header-bg--m.jpg);
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    height: 60px;
    }

    .main-header .container,
    .main-header .row    {height: 100%;}

    .col-hamburger {margin-left: auto;}


    .m-radio-bar{background-color: var(--rojo); height: 16px; position: relative;z-index: 0;}
    .m-radio-bar a{display: block; position: absolute; right: 0; top: -9px; }


}

@media screen and (min-width:768px){
    .main-logo-img { width:320px; margin-bottom: -10px; } 
    .main-menu > li > a { color: rgba(255, 255, 255, 1); font-weight: 800; text-transform: uppercase; padding: 10px; font-size: 18px; line-height: 1em; display: block; } 

    .main-menu > li > a:hover { background-color: #000; } 
    .main-menu > li {display: flex; height: 100%; align-items: center;} 
    
    .fixed    .main-menu  {margin-left: auto; margin-right: 10px;} 
    .fixed    .main-menu > li > a { font-size: 14px; height: 100%; display: flex; height: 100%; align-items: center; padding-top: 13px;} 


    .fixed  .radio--en-fixed{display: flex; align-items: center; height: 100%;}

    .main-header a { transition:.2s ease-in-out } 
    .main-header a:focus { text-decoration:none } 
    .main-header .center-bar { padding: 15px 0; background-image: url(/u/plantillas/p/la-sabrosita/imgs/header-bg--consola.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } 
    .main-header .center-bar [class*="col-"] { width:33.33%; display: flex; align-items: center; } 
    .main-header .center-bar .col-banner { justify-content: flex-end; } 
    .main-header .col-logo { justify-content: center; } 
    .main-header .col-hamburger { display:none } 
   }
   



   .show-en-fixed{display: none;}



@media screen and (min-width:768px){
    .main-header.fixed  .sub-header{display: block;}
    .sub-header{background-color: var(--rojo);}
    .sub-header .container{display: flex; justify-content: center; position: relative;}
    .fixed .sub-header{
       background-image: url(/u/plantillas/p/la-sabrosita/imgs/header-bg--consola.jpg);
       background-color: #000;
       
    }

   .fixed  .sub-header .container{justify-content: flex-start;}   
   .fixed  .show-en-fixed{display: block;}    
   .fixed  a.main-logo--en-fixed  {padding: 5px 0; display: block;}
   .fixed  a.main-logo--en-fixed img {    width: 78px;}
    

}





.btn-buscador,
.btn-contacto {
    display       : flex;
    align-items   : center;
    border-radius : 2px;
    color         : #fff;
    padding       : 0 7px;
    text-transform: uppercase;
    font-size     : 11px;
    line-height   : 12px;
    padding       : .5rem;    
    font-weight: 600;
    margin-right: 15px;
    background    : linear-gradient(0deg, rgb(28 28 28) 0%, rgb(66 66 66) 100%);
    border: solid 1px #000;
    
}



.btn-contacto svg {
    fill        : #fff;
    margin-right: 4px;
}


.btn-buscador i.icon{margin-right: 5px;}

.btn-contacto:hover,
.btn-buscador:hover{    
    color: #fff;
    background: linear-gradient(0deg, rgba(255,116,31,1) 0%, rgba(255,209,46,1) 100%);    
}




.cursor-pointer{cursor: pointer;}

/* menu */
.main-menu{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;justify-content:center}

/* ===================== */
/*   SLIDING BUSCADOR    */
/* ===================== */


.header-search{ transition: .15s ease-in-out; z-index: 0; }

/* ===================== */
/*   SLIDING BUSCADOR    */
/* ===================== */

.sliding-buscador{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,0.85);z-index:999}
.sliding-buscador .container{padding:30px;justify-content:center;align-items:center;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%); display: flex; flex-direction: column;}

.sliding-buscador form{width:50%;display:block}
.sliding-buscador .search-group{height:50px;position:relative}
.sliding-buscador .input-buscar,
.sliding-buscador .btn-submit{background-color:#fff;border:none;padding-left:15px;padding-right:15px}
.sliding-buscador .input-buscar{border-top-left-radius:5px;border-bottom-left-radius:5px;flex:1 1 90%}
.sliding-buscador .btn-submit{border-top-right-radius:5px;border-bottom-right-radius:5px;font-size:1.8em;line-height:1em;flex:1 1 10%;text-align:right}

.sliding-buscador .search-group button.btn{background-color:transparent}

.titulo-buscar{
    text-align: left;
    color: var(--celeste-brand);
    font-size: 2.5em;
    font-weight: 100;
}


.sliding-buscador .input-buscar::-webkit-input-placeholder {color: #000;}  
.sliding-buscador .input-buscar:-ms-input-placeholder {color: #000;}
.sliding-buscador .input-buscar::placeholder {color: #000;}
.sliding-buscador .input-buscar:focus{outline:none;color:#000}



/* boton cerrar */

#x-sliding-buscador{cursor:pointer;cursor:hand;position:absolute;right:15px;top:15px;opacity:.85}
#x-sliding-buscador img{filter: invert(1); width: 35px;}
#x-sliding-buscador:hover{opacity:1}






/* ===================== */
/* SLIDING MENU VERTICAL */
/* ===================== */
.sliding-menu {
    height: 100vh;
    width: 50vw;
    max-width: 330px;    
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;    
    transform: translateX(-100%);
    transition: all .4s ease-out ; /* que, cuanto, como, cuando */
    z-index: 999;    
    background: #000;
    background-image: url(/u/plantillas/p/la-sabrosita/imgs/slidebar-deco-bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;

}
@media screen and (min-width:768px){.sliding-menu{display: none;}}

.sliding-menu.muestra-menu {
    opacity: 1;
    transform: translateX(0);
}

.sliding-menu--header,
.sliding-menu--body {    padding: 20px;}


.sliding-menu--body {padding-top: 0;}

.sliding-menu a {
    color: #fff;
}

.sliding-menu--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
}

.sliding-menu--header .form-control{background-color: var(--amarillo);}


.sliding-menu .close-menu {
    color: #fff;
    cursor: pointer;
    font-size: 23px;
    margin-left: auto;
}


.sliding-menu .form-control::-webkit-input-placeholder {color: #000;}  
.sliding-menu .form-control:-ms-input-placeholder {color: #000;}
.sliding-menu .form-control::placeholder {color: #000;}
.sliding-menu .form-control:focus{outline:none;color:#000}



/* ================================ */



/* ================================= */
/* MOBILE ========================== */

@media only screen and (max-width: 768px) {
    
    
    /* Al body, acl clickear toggle anulo el scroll Y (ver js)*/
    
    body {transition: background-color .3s ease-in-out;}
    body #main-content {transition: filter .3s ease-in-out;}

    body.body-noscroll-m {overflow-y: hidden; background-color: #000;}
    body.body-noscroll-m #main-content {filter: blur(10px); opacity: .7;}


    /* doy un padding top por que fijo el menu arriba*/
    
    .main-header,
    .m-radio-bar{position: fixed; top: 0; width: 100%;}
    .m-radio-bar    {top: 60px;}
    

    body{padding-top: 76px;}
    



    .main-header .item.toggle{justify-content: flex-end; display: flex; }
    .main-header:not(.fixed) .item.toggle .c-hamburger{margin-top: -8px;}

    .main-logo-img {
        width: 180px;
        z-index: 99;
        position: relative;
        max-width: none;
        top: 8px;
    }
    
    .main-header .sliding-menu{overflow:scroll;max-height:100vh;padding-top:45px}

    .main-header .col-logo{display: flex; justify-content: flex-start; align-items: center;padding: 0;  }
    

    .sub-header{display: none;}
    .main-header .col-hamburger{display: block;}



    .c-hamburger span::before{top:-10px}
    .c-hamburger span{left:0;width:30px}
    .c-hamburger span::after{bottom:-10px}
    .main-zone .container{padding-top:7.5px;padding-bottom:7.5px}
    .header-tools a{padding:0;font-size:20px;margin-left:10px}
    .main-logo{text-align:center}
    .img-main-logo{width:180px}
    






    /*Menu*/
  
    

    .sliding-menu {
    width: calc(100% - 118px) ;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .sliding-menu .container{padding:30px 0;justify-content:center;flex-wrap:wrap;flex-direction:column}
 


    .sliding-menu--body{display: flex; flex-direction: column;}
    
    .sliding-menu--body .main-nav {
        flex-direction: column;
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
    
    
    
    .sliding-menu--body .main-nav li a{
    display: block;
    border-bottom: solid 1px rgb(240 210 50 / 20%);
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 7.5px;
    padding-top: 7.5px;
    }


    .sliding-menu--body .main-nav li     a.link-mosaico{background-color: var(--naranja); margin-top: -1px;}
    .sliding-menu--body .main-nav li     a.link-ttopic{background-color: var(--celeste);}
    .sliding-menu--body .main-nav li     a.link-suplementos{background-color: var(--verde);}
    
    .sliding-menu--body .main-nav li     a.link-mosaico,
    .sliding-menu--body .main-nav li     a.link-ttopic,
    .sliding-menu--body .main-nav li     a.link-suplementos{
        padding-left: 20px;
        padding-right: 20px;
        border-bottom-color: rgba(0, 0, 0, 0.25);
        margin-left: -20px;
        margin-right: -20px;
    }
    
    



    
    
    #x-sliding-buscador{top:3px;right:10px}

    /* SLIDING FOOTER */
    .sliding-menu--footer{margin-top: auto; padding:15px; background-color: rgb(0 0 0 / 20%); border-top: solid 1px rgb(0 0 0 / 20%);}
    
    .sliding-menu--footer .form-control{border-radius: 0;}
    

    .sliding-menu--redes     {display: flex; align-items: center; color: #fff; line-height: 1em;}
    

    .sliding-menu ul.redes-sociales{margin-left: auto; margin-right: 0; margin-bottom: 15px;}
    .sliding-menu ul.redes-sociales{margin-bottom: 0; justify-content: flex-start;}
    
    .sliding-menu ul.redes-sociales a{color: #fff; margin:0; padding: 7px; }
    .sliding-menu ul.redes-sociales li:last-child a{padding-right: 0;}
    
    .sliding-menu ul.redes-sociales svg{fill: #fff;}
 
    /* form */
    .sliding-menu .form-control{border: 0; border-radius: 3px}
    .sliding-menu .form-control-submit{border-bottom-right-radius: 3px!important; border-top-right-radius: 3px!important;}
    
    
    
}


/* Animacion Toggle ===================================== */


/*genericos */

.c-hamburger:focus{outline:none}
.c-hamburger{background-color:transparent;display:block;position:relative;overflow:hidden;margin:0;padding:0;width:30px;height:30px;font-size:0;text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border-radius:none;border:none;cursor:pointer;-webkit-transition:background .3s;transition:background .3s}
.c-hamburger span{display:block;position:absolute;top:13px;left:0;right:0;height:4px;width:100%;border-radius:10px}
.c-hamburger span::before,.c-hamburger span::after{position:absolute;display:block;left:0;width:100%;height:4px;border-radius:10px;content:""}
.c-hamburger span::before{top:-10px}
.c-hamburger span::after{bottom:-10px}

/* animacion y efectos */
.c-hamburger span{-webkit-transition:background 0;transition:background 0}
.c-hamburger span::before,.c-hamburger span::after{-webkit-transition-duration:0.3s,.3s;transition-duration:0.3s,.3s;-webkit-transition-delay:0.3s,0;transition-delay:0.3s,0}
.c-hamburger span::before{-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}
.c-hamburger span::after{-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}
.c-hamburger.is-active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.c-hamburger.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.c-hamburger.is-active span::before,.c-hamburger.is-active span::after{-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s;}

/*declaro los colores del toggle por que tenia problemas de color al agregar/remover clase fixed*/

.c-hamburger.is-active span::before,.c-hamburger.is-active span::after{background-color: var(--amarillo)}
.c-hamburger span,.c-hamburger span::before,.c-hamburger span::after{background-color: #fff}
.c-hamburger.is-active span{background-color:transparent}


@media screen and (min-width:768px){

/* AL HACER SCROLL*/
/* =============== */
/* El script agrega la clase fixed, entonces, la animo y oculto/modifico propiedades internas */
.main-header.fixed{position:fixed;top:0;left:0;right:0;z-index:999;height:auto;}
.main-header.fixed .top-bar,
.main-header.fixed .center-bar{display:none}
.main-header.fixed .main-logo-color{display:none}
.main-header.fixed .main-logo-blanco{display:block}
.main-header.fixed .main-zone .container{padding-top:15px;padding-bottom:15px}
.main-header.fixed .header-tools a{font-size:1.6em}
.main-header.fixed .main-zone a{color:#fff}
@-webkit-keyframes silde_to_top {
0%{transform:translateY(-100%);opacity:0}
100%{transform:translateY(0);z-index:999;opacity:1}
}
.main-header.fixed{-webkit-animation-name:silde_to_top;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-delay:0;-webkit-animation-play-state:running;-webkit-animation-fill-mode:forwards}
.main-header.fixed .img-main-logo{max-width:200px}

}






@media screen and (max-width:768px){
    
    .main-header [class*="col-"]{width: auto;}
}