/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-jul-2019, 10:34:49
    Author     : Tatiana

web:Jobe
*/


@mixin cabecera_cuatro(){
    header{
        overflow: hidden;
        min-height: 50px;
        @media (max-width: 767px){
            position: fixed;
            width: 100%;
            top:0;
            z-index: 1;
            background: $blanco;
        }
        .box-logo-redes {
            display: inline-block;
            .telef_fech{
                margin-top:5px;
                padding: 0 0 0 10px;
                .Ttienda{
                    color:$grisTexto;
                    &:before{
                        content: "\f3f2";
                        font-family: $fuente_iconos;
                        color:$primario;
                    } 
                }
                .fecha{
                    float:right;
                    font-family: $fuente2;
                    font-size:15px;
                    color:$terciario2;
                    font-weight: bold;
                }
            }
            @media(min-width:1200px){

                // max-width: 66%;

            }
        }
        img{
            max-width: 100%;
        }
        .name_tienda {
            display: inline-block;
            color: $primario;
            font-size: 2.5em;
            text-align: center;
            position: relative;
            overflow: hidden;
            font-family: $fuente2;
            padding: 0 15px;
            @media (max-width:992px){
                font-size: 1.1em;
                padding: 0;
            }
            spam{
                position: absolute;
                color:$negro;
                font-size: 0.5em;
                right: 1%;
                top:4px;
                font-family:$fuente2;
            }
            .medium{
                margin-top: 3px;
                margin-bottom: 0;
                display: flex;
                justify-content: space-between;
                display: -webkit-flex;
                -webkit-justify-content:space-between;

                @media(min-width:992px){
                    font-size: 0.7em;
                    line-height: 1.2em;
                    margin-top: 0px;
                }
                @media (min-width:1200px){
                    font-size: 0.7em;
                }
                @media (max-width:992px){
                    font-size: 1.1em;
                }
                @media(max-width:767px){
                    font-size: 0.7em;
                    margin-top:1px;
                }
            }
            p.big {
                font-size: 1.5em;
                font-weight: 600;
                line-height: 0.5em;
                margin-bottom: 0;
                @media(max-width:397px){
                    font-size: 1.8em;
                    line-height: 0.8em;
                }
                @media(max-width:767px){
                    img{
                        max-height: 35px;
                    }
                }
                @media (min-width:1200px){
                    img{
                        max-height: 70px;
                    }
                }

            }
        }
        .nav_redes_sociales{
            display: inline-block;
            float: right;

            a{
                display: inline-block;
                vertical-align:middle;
                margin: 0px;
                background: $gris;
                margin-right: 5px;
                margin-right: 5px;
                font-size: 20px;

                float: right;
                i{
                    color: $colorDelDemonio;
                    padding: 6px 10px;
                    display: inline-block;
                }
                &:hover{
                    i{
                        color:$blanco;
                        &.mdi-{
                            &facebook {
                                background: $facebook;
                            }
                            &instagram {
                                background: $instagram;
                            }
                            &google {
                                background: $google;
                            }
                            &twitter {
                                background: $twitter;
                            }
                            &youtube-play {
                                background: $youtube;
                            }
                        }
                    }
                }
            }
            @media all and(min-width:922px){

                display: block;
                text-align: center;


            }
            @media all and(max-width:767px){
                float: none;
                display: none;;
                text-align: left;
                margin-top: 6px;
            }
        }
        
        .buscador-layer{
            float: left;
            padding-left: 142px;
            border: 1px solid $gris;
            @media (min-width: 1200px){
                margin-left: 70px;
            }
        }
        .box-login-cesta{
            margin-top: 3px;
            .header_links li{
                list-style: none;
            }
            @media(min-width:767px){
                margin-top: 0;
            }
            div{
                float:right;
                li{
                    list-style: none;
                }
                i{
                    color:$primario;
                }
                &.virgulilla{
                    i{
                        line-height: 2.1em;
                        color:$grisTexto;
                        font-size:1.4em;
                    }

                    padding: 0px 14px;
                }
            }
        }
        .linea_roja{
            height: 1px;
            display: block;
            background: $primario;
        }
        #sticky_top{

            .logo_p{
                display: none;
                a{
                    padding: 5px;
                    display: block;
                    max-height: 100%;
                    img {
                        max-height: 25px;
                        width: auto;
                    }
                }
            }
            #searchbox{
                text-align: left;
                .search_filter{
                    vertical-align: middle;
                    display: inline-block;
                    a{
                        font-size: 36px;

                        vertical-align: middle;
                        line-height: 1em;
                        color:$grisTexto;
                        background: $gris;	
                        padding: 3px 3px;
                        &:hover{
                            color:$primario;
                        }
                    }
                }
                input.search_query{
                    width: auto;
                    display: inline-block;
                    vertical-align: middle;
                    @media(min-width:1200px){
                        width: 80%;
                    }
                    @media(min-width:767px){
                        width: 70%;
                    }
                }
                button.boton.button-search {
                    padding: 0;
                    overflow: hidden;
                    vertical-align: middle;
                    display: inline-block;
                    span.mdi.mdi-magnify {
                        font-size: 36px;
                        padding: 3px 4px;
                        line-height: 1em;
                        display: block;
                        color:$grisTexto;
                        background: $gris;
                    }
                    &:hover{
                        span, span.mdi.mdi-magnify{
                            color:$primario;
                        }
                    }
                }
                @media (min-width:992px){
                    text-align: left;
                }
            }
            #search_block_top{
                margin-top:8px;
                @media (min-width:992px){
                    margin-top:8px;
                }
                @media (max-width:414px){
                    input.form-control{
                        width:50%;
                    }
                }
            }
            #header_links{
                a{
                    font-size: 23.5px;
                    line-height: 1.6em;
                    overflow: hidden;
                    display: inline-block;
                    @media (min-width:767px){
                        background: $gris;
                        padding: 0 14px 1px;
                        margin-right: 5px;
                    }
                    span{
                        font-size: 0.8em;
                        @media (max-width:767px){
                            display:none;
                        }
                    }
                    .icono_cuenta{

                        display: none;
                    }
                }
                .logout{
                    float:right;
                    padding:2px 12px 1px;
                    margin-left: -5px;
                }
                a.account {
                    max-width: 300px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    @media all and (max-width: 991px){
                        max-width: 90px;
                    }
                    @media all and (max-width: 882px){
                        span{
                            display:none;
                        }
                        i{
                            display: block;
                            padding: 1px 0;
                        }
                    }
                }
                @media (max-width: 767px){
                    .account{
                        font-size: 0px;
                        .icono_cuenta{
                            font-size: 42px;
                            display: inline-block;
                        }
                    }
                }

            }
            .shopping_cart_menu{
                .lanzador_widget{
                    font-size: 24px;
                    line-height: 1.6em;
                    overflow: hidden;
                    display: inline-block;
                    @media (min-width:767px){
                        background: $gris;
                    }
                    a{
                        display: block;
                        padding: 0 3px;
                    }
                    .btn_comprar_minicest{
                        // padding:1px  10px 2px;
                        .ajax_cart_no_product{
                            font-size: 0.8em;
                        }
                    }
                }
                .webStoreDropDown{
                    float:none;
                    left: auto !important;
                    right: 0 !important;
                    max-height: 500px;
                    overflow-y: auto;
                    scrollbar-width: thin;

                    &::-webkit-scrollbar {
                        width: 6px;     /* Tamaño del scroll en vertical */
                        height: 6px;    /* Tamaño del scroll en horizontal */

                    }
                    &::-webkit-scrollbar-thumb{
                        background: #ccc;
                        border-radius: 2px;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: #b3b3b3;
                        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
                    }
                    &::-webkit-scrollbar-thumb:active{
                        background-color: #999999;
                    }
                    &::-webkit-scrollbar-track{
                        background: #e1e1e1;
                        border-radius: 4px;
                    }
                    &::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:active{
                        background: #d4d4d4;
                    }
					.contenedor_totales_cesta{
						position: absolute;
						bottom: 0;
						width: 100%;
						background: $blanco;
					}
                    @media all and (max-width:991px){
                        display:none;
                    }
                    .contenedor_cesta_desplegable{
                        width: 350px;
                    }
                    div{
                        float:none;

                        .contenedor_totales_cesta{

                            div{
                                display: flex;
                                justify-content: space-between;
                                display: -webkit-flex;
                                -webkit-justify-content: space-between;
                                a{
                                    -webkit-flex:1 1 ;
                                    text-align: center;
                                    i{
                                        font-size: 1.2em;
                                    }
                                    &:first-child{
                                        border-right: 1px solid $gris_bordes;
                                        display: flex;
                                        align-content: center;
                                        align-items: center;
                                        justify-content: center;
                                        display: -webkit-flex;
                                        -webkit-align-content: center;
                                        -webkit-align-items: center;
                                        -webkit-justify-content: center;
                                    }
                                }
                                &.cart-prices{
                                    border-top: 1px solid $gris;
                                    span{
                                        padding: 10px;
                                        &.cart_block_total{
                                            font-weight: 600;
                                        }
                                    }
                                }
                            }
                        }
                        .lineas_cesta_linea_mini_cesta {


                        }
                        .contenedor_linea_cesta{
                            border-top:1px solid $gris;
                            .first_item{
                                display:flex;
                                align-content: center;
                                align-items:center;
                                display:-webkit-flex;
                                -webkit-align-content: center;
                                -webkit-align-items:center;
                                padding: 5px 8px;
                                .cantidad{
                                    i{
                                        padding: 2px;
                                        display:block;
                                    }
                                    input{
                                        background: $blanco;
                                    }
                                }

                            }
                            .cart-images{
                                width: 60px;
                                display:block;
                                flex:1 1 60px;
                                -webkit-flex:1 1 60px;
                                max-width: 60px;
                                img{
                                    width: 100%;
                                    height: auto;

                                }
                            }
                            .cart-info{
                                flex: 1 1;
                                -webkit-flex: 1 1;
                                text-align: left;
                                .linea_cesta_importe{
                                    position:absolute;
                                    right: 13px;
                                }
                                .cart_block_product_name, .product-atributes{
                                    display: block;
                                    text-align: left;
                                    padding: 3px 8px;
                                }
                                .quantity-formated{
                                    color:$primario;
                                    .quantity{
                                        color:$grisTexto;
                                    }
                                }
                                .cantidad{
                                    display: -webkit-inline-box;
                                    width: 85px;
                                    margin-left: 10px;
                                    .menos, .mas{
                                        a{
                                            padding:0px;
                                        }
                                    }
                                    .cantidad_articulos{
                                        input {
                                            padding: 0px;
                                            height: 24px;
                                            width: 45px;
                                            text-align: center;
                                        }
                                    }
                                }

                            }
                            .eliminar{
                                .mdi-delete{
                                    font-size:20px;
                                }
                            }
                        }
                    }
                    .texto_cabecera {
                        text-align: left;
                        padding: 8px 8px;
                        background: $secundario;
                    }
                    .cabecera_lote{
                        border-top:2px solid $blanco;
                    }
                    .totales_lote{
                        strong {
                            float: right;
                            margin-right: 2px;
                        }
                    }
                    .texto_cabecera.cabecera_lote p {
                        color: $primario;
                        padding: 0;
                        margin: 0;
                    }
                    .linea_lote {
                        border-left: 10px solid $secundario;
                        background: $grisCesta;
                    }
                }
            }

            // @media only screen and (min-width: 992px){
            padding-right: 0;
            &.sticky-fixed-top {
                padding: 0;
                position: fixed;

                top: 0;
                width: 100%;

                z-index: 5003;
                background: $blanco;
                right: 0;
                left:0;
                border-bottom:1px solid $primario;
                .logo_p{
                    display:block;
                    font-size:0.6em;
                    float: left;
                    margin: 6px 3%;
                    max-height: 30px;
                    p{
                        display:inline-block;

                    }
                }
                #header_links{
                    float:right;
                    width: auto;
                    margin:0px 0px 0 5px;
                }
                .telefonos{
                    display: none;
                }
                .sticky-fixed-top #search_block_top {
                    padding: 0;
                    width: auto;
                    margin: 5px 0 0;
                }
                #search_block_top {
                    padding: 0;
                    width: auto;
                    margin: 7px 0 12px;
                    @media all and (max-width:991px){
                        margin: -2px 0 12px;
                    }
                    #search_query_top {
                        width: 280px;
                        height: 37px;
                        line-height: 37px;
                    }
                    #searchbox .search_filter:before{
                        height: 23px;
                    }

                }
                #searchbox{
                    margin-top: 5px;
                    button.boton.button-search{
                        span.mdi.mdi-magnify{
                            font-size: 28px;
                        }
                    }
                    .b_avanzada {
                        font-size: 28px;
                    }
                }
                .search_filter{
                    .b_avanzada{

                    }
                    .b_avanzada_ico{
                        display: block;
                        background: transparent none repeat scroll 0 0;
                        border: 0 none;
                        color: $bt_bAvanzada_fuente;
                        font-size: 24px;
                        font-weight: 700 !important;
                        height: 37px;
                        line-height: 43px;
                        width: 60px;
                        z-index: 1024;
                        text-align: center;
                        &:hover{
                            //color:$bt_bAvanzada_fuente_hover;
                            background: $bt_bAvanzada_fondo_hover;
                            color: $bt_bAvanzada_fuente_hover;
                        }
                    }

                }
                .login_menu{
                    display: inline-block;
                    height: 39px;
                    line-height: 39px;
                    margin: 5px 0 0 5px;
                }

                .shopping_cart_menu {
                    margin: 0px 59px 0 5px;
                    padding: 0;
                    width: auto;
                    float: right;

                    .cesta_desplegableV2 {

                        &:hover{
                            background: $fondo_cesta_desp_hover !important;
                        }
                        .webStoreDropDown{
                            right:60px !important; 
                        }
                    }
                }
            }
            text-align: right;

            // }
            @media only screen and (max-width: 767px){               
                float: none;
                padding: 0;                
                right: auto !important;
                position: static;
                width: 100%;
                margin-top: 13px!important;
                #searchbox{
                    text-align: left;
                }
                #header_links, .shopping_cart_menu{
                    position: relative;
                    // margin-left: 8px;
                    a{
                        font-size: 1em;
                        text-align: center; 
                        // max-width: 60px;
                        &.logout{
                            // position: absolute;
                            top: 0;
                        }
                    }
                    i{
                        line-height: 1em;
                        font-size: 3em;
                        &.mdi-close{
                            font-size: 1em;
                        }
                    }
                }
                .shopping_cart_menu{
                    text-align: center;
                    .lanzador_widget{
                        font-size:1em;
                        .mdi{
                            display: block;
                            &:before{
                                line-height: 1em;
                                font-size: 1em;
                            }
                        }
                        .cantidad_lanzador{
                            font-size: 0px;
                            display:none;
                        }
                    }
                }
                .virgulilla{
                    display: none;
                }
                #search_block_top{
                    margin-bottom: 7px;
                    background:$secundario;
                }
            }
            @media only screen and (min-width: 1200px){
                &.sticky-fixed-top .search_filter .b_avanzada {
                    font-size: 28px;
                }
            }
        }

        .navbar-toggle{
            font-size: 38px;
            padding: 1px 6px;
            line-height: 1em;
            margin: 0 15px 0 0;
            position: absolute;
            right: 0;
            top: 66px;
            .collapse.in{
                background: $grisClaro;
                li{
                    padding: 5px 12px;
                    border-bottom: 1px solid $gris;
                }
            }
            @media(min-width:768px) and (max-width:992px){
                display:block;
                top: 96px;
                right: 0;
                margin: 0;
                background:$gris;
                border-radius: 0;
                border: none;
                color:$grisTexto;
                z-index: 1;
            }
        }
        .telefonos{
            text-align: right;
            float: right;
            margin-top: 15px;
            margin-bottom: 5px;
            .Ttienda, .Talmacen{
                font-family: $fuente2;
                color:$grisTexto;
                &:before{
                    content: "\f3f2";
                    font-family: $fuente_iconos;
                    color:$primario;
                }
            }
            .aclaracion{
                font-weight: 600;
            }
            .Redirec-almacen{
                &:before{
                    content: "\f59f";
                    font-family: $fuente_iconos;
                    color:$primario;
                }
            }
            @media(min-width:768px) and (max-width:992px){
                margin-right: 38px;
            }
            @media (min-width:992px){
                margin-top:17px;
            }

            @media (min-width:1200px){
                margin-top:22px;
            }

        }
        @media(min-width:992px){
            overflow:visible;
        }
        @media(max-width:992px){
            .logo-redes{
                margin-bottom: 6px;
            }
        }

    }
    /* Querys a o bruto*/
    @media only screen and (min-width:1200px){
        .sticky-fixed-top{
            padding:0;position:fixed;right:90px;top:0;width:auto;margin:0}
        #sticky_top.sticky-fixed-top{
            margin:0!important}
        .shopping_cart.sticky-fixed-top,#search_block_top.sticky-fixed-top{
            margin:7px 0 0;padding:0;width:auto}
        #search_block_top.sticky-fixed-top{
            margin-right:36px}
        .sticky-fixed-top #search_block_top,.sticky-fixed-top .shopping_cart_menu{
            padding:0;width:auto;margin:5px 0 0}
        .sticky-fixed-top .shopping_cart_menu{
            margin:5px 0 0 5px}
        .sticky-fixed-top #search_block_top .boton.button-search,#search_block_top.sticky-fixed-top .boton.button-search{
            box-shadow:none}
        #search_block_top.sticky-fixed-top .field-search,.sticky-fixed-top #search_block_top .field-search,.sticky-fixed-top #cart_block_top.shopping_cart{
            margin:0}
        #header .sticky-fixed-top .cart_block{
            top:39px;right:0}
        .sticky-fixed-top #search_block_top #search_query_top{
            width:280px}
        .sticky-fixed-top #search_block_top #search_query_top:hover,.sticky-fixed-top #search_block_top #search_query_top:focus,.sticky-fixed-top #search_block_top #search_query_top:active{
            width:410px;transition:all 0.4s ease-in-out 0s;-webkit-transition:all 0.4s ease-in-out 0s;-ms-transition:all 0.4s ease-in-out 0s}
        .sticky-fixed-top .shopping_cart:hover > a:first-child{
            color:$blanco}
        .sticky-fixed-top #search_block_top.sticky-fixed-top{
            display:none}
        .sticky-fixed-top .shopping_cart_menu.sticky-fixed-top{
            display:none}
    }
    /**/
    @media (min-width: 1200px){
        #sticky_top:not(.sticky-fixed-top) #search_block_top {
            /*margin-left: 130px;*/
        }
        #product .content-top-br {
            height: 49px;
            padding: 14px 20px;
        }
    }

    @media (max-width: 1199px) and (min-width: 992px){
        #sticky_top:not(.sticky-fixed-top) #search_block_top {
            /*margin-left: 60px;*/
        }
    }


}