/**----------------------------------------------------------------------------
* ESTILOS COLUMNA ASIDE
-----------------------------------------------------------------------------*/
@import "bootstrap-slider";

@mixin aside(){

    .subEsca{
        margin-top:25px;
        li{
            display: inline-block;
            width: 17%;
            min-width: 100px;
            margin: 2px 5px;
            padding: 8px 12px;
            vertical-align:top;
            font-size:1.2em;
            a{
                font-weight: bold;
                &:hover{
                    color:$secundario;
                }
            }
        }
    }
    div#left_column1, #center_column1, #left_column2, #center_column2, #center_column3{
        h4{
            margin: 30px 0 9px;
            padding: 0;
            font-weight: bold;
            text-align: left;
            font-size: 18px;
            font-family: $fuente3;
            //background: $primario;
            line-height: 1em;
            letter-spacing: 0em;
            color:$secundario;
            border-bottom: 1px solid $secundario;
            a{
                color: $secundario;
                position:relative;
                padding:9px 20px;
                display:inline-block;
                border:none;
                i{
                    font-size: 1.2em;
                    font-style: normal;
                    &:before{
                        transform: rotate(20deg);
                        text-shadow: 1px 1px #a7a7a7;
                        color:$secundario;
                    }
                }
            } 
            &:hover{
                background: $primarioHover;
            }
            &:first-child{
                margin:0px;
            }
        }
        .banner_aside {
            margin-bottom: 15px;
            margin-top: 20px;
            float: left;
            figcaption{
                display: none;
                padding:  8px 12px; 
                font-size: 18px;
                font-family: $fuente3;
            }
            figure{
                padding: 0px;
                img{
                    box-shadow: none;
                    -webkit-box-shadow:none;
                }
            }
            a{
                background: $primario;
                opacity: 0.8;
                color: $secundario;
                display: block;  
                position:relative;
                &:before {
                    height: 100%;
                    border-style: solid;
                    border-width: 10px;
                    border-color: rgba(204, 225, 230, 0.5);
                    background: rgba(204, 225, 230, 0.15);
                    content: "";
                    position: absolute;
                    transform: scale(0);
                    transition-duration: 0.3s;
                    transition-property: transform;
                    width: 100%;
                    transition-timing-function: ease-out;
                    z-index: -1;

                }
                &:hover{
                    color:$secundario;
                    &:before{
                        transform: scale(1);
                        z-index: 1;
                    }
                }
            }  
            img {
                max-width: 100%;
            }
            @media(max-width:1199px){
                margin-right: 0;
                text-align: -webkit-center;
                width: 100%;
                a{
                    width: 62%;
                    figure{
                        padding: 0px;
                    }
                }
            }
        }
    }
    #left_column1, #left_column2{
        padding-left: 0;
        .lista_articulos{
            //padding: 0 15px 0 0;
        }
        @include FichaRelacionadosAside();
    }

    @media (max-width: 1199px) {
        .column{
            margin-top: 8px;
        }
    }

    .escaparate1, .banner_aside, .escaparate2{
        float:left;
        width: 100%;
        padding: 0;
        @media(max-width: 991px) and (min-width: 651px){
            margin-top:30px;
        }
    }


    h4.title_block{
        margin:0px;
        padding: 10px;
        text-transform: uppercase;
    }

    div#left_column1 .columna-escaparate h4{
        font-weight: 300;
        margin: 15px 0px;
    }


    //Marina(04/10/19) estilos de los filtrados 
    #left_column1{
        .columna-filtrado{
            .filtros_web{
                margin: 71px 15px 0;
                h3{
                    margin: 54px -15px 0 -15px;
                    padding: 10px 0;
                    font-weight: bold;
                    text-align: left;
                    font-weight: 300;
                    font-size: 18px;
                    font-family: $fuente3;
                    //background: $primario;
                    line-height: 1em;
                    letter-spacing: 0em;
                    color:$secundario;
                    border-bottom: 1px solid $secundario;
                    padding:9px 20px;
                }
                .v-megamenu-container{
                    .boton_filtro{
                        @media(min-width: 1200px){
                            display:none;
                        }
                    }
                }

                .filtro_subtitulo{
                    font-weight: 600;
                    font-size: 16px;
                    color: $primario;
                    display: inline-block;
                    margin-top: 18px;
                }

                .quitar_filtros{
                    color: $blanco;
                    display: inline-block;
                    float: right;
                    margin-top: -34px;
                    font-weight: 300;
                    padding: 5px 10px;
                    font-size: 14px;
                }
                .contenedor_principal_filtrados{
                    margin: 5px 0 15px;
                    .selector0,.selector1{
                        margin-bottom: 10px;
                        display: none;
                    }
                    & > label:nth-child(2){
                        width: 40px;
                        height: 40px;
                        background-color: $secundario;
                        content: "";
                        background: url(../images/order_cantidad.svg) center center no-repeat $secundario;
                        color: $primario;
                        background-size: 54%;
                        border: 1px solid $secundario;
                        float: right;
                        margin-top: -40px;
                        display: inline-block;
                        margin-right: 45px;
                        margin-bottom: 0px !important;
                        &:hover{
                            border: 1px solid $primario;
                            border-bottom: 1px solid transparent;
                            cursor: pointer;
                            background: url(../images/order_cantidad_hover.svg) center center no-repeat $primario;
                            background-size: 54%;
                        }
                    }
                    &>label:nth-child(4){
                        width: 40px;
                        height: 40px;
                        background-color: $secundario;
                        content: "";
                        background: url(../images/order_az.svg) center center no-repeat $secundario;
                        color: $primario;
                        background-size: 54%;
                        border: 1px solid $secundario;
                        float: right;
                        margin-top: -40px;
                        display: inline-block;
                        margin-bottom: 0px !important;
                        &:hover{
                            border: 1px solid $primario;
                            border-bottom: 1px solid transparent;
                            cursor: pointer;
                            background: url(../images/order_az_hover.svg) center center no-repeat $primario;
                            background-size: 54%;
                        }
                    }    
                    .contenedor_filtrados{
                        max-height: 165px;
                        overflow: hidden;
                        border-top: 1px solid $primario;
                        border-bottom: 1px solid $primario;
                        padding: 10px 0;
                        margin-top: 0px;
                        //overflow-y: scroll;
                        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;
                        }
                        @media(max-width: 1199px){
                            max-height: 130px;
                        }
                    }
                    .formularios_filtrado{
                        overflow-x: hidden;
                        width: 200%;
                        transition: margin 0.5s;
                        transition-timing-function: ease-out;
                        input{
                            display: inline-block;
                            vertical-align:top;
                        }
                        label{
                            font-size: 14px;
                            font-weight: 300;
                            display: inline-block;
                            width: 74%;
                            font-weight: 400;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            cursor: pointer;
                            overflow: hidden;
                        }
                        span.cantidad{
                            font-weight: 600;
                            color: $primario;
                            display: inline-block;
                            vertical-align: top;
                            width: 12%;
                            text-align: right;
                        }
                        .filtrado_stock{
                            width: 51%;
                        }
                    }

                }
            }
            @media(max-width: 1199px){
                //display: none;
                position: absolute;
                top: 0px;
                left:-100%;
                width: 80%;
                height: 100%;
                z-index:17;
                background-color: $blanco;
                border: 1px solid $primario;

                -webkit-transition: left 0.5s; /* For Safari 3.1 to 6.0 */
                transition: left 0.5s;
                .filtrado_productos{
                    height: 100%;
                    .filtros_web{
                        margin: 90px 15px 0;
                        height: 85%;
                        overflow-y: scroll;
                        .v-megamenu-container{
                            position: fixed;
                            top: 0px;
                            left:-100%;
                            width: 80%;
                            height: 10%;
                            -webkit-transition: left 0.5s; /* For Safari 3.1 to 6.0 */
                            transition: left 0.5s;
                            .boton_filtro{
                                .cerrar_filtrado{
                                    width: 100%;
                                    margin-top:0px;
                                    text-transform: uppercase;
                                    span{
                                        display: inline-block;
                                        line-height: 1;
                                        vertical-align: middle;
                                    }
                                    i{
                                        font-size: 30px;
                                        display: inline-block;
                                        line-height: 1;
                                        vertical-align: middle;
                                    }
                                }
                            }
                            .v-megamenu-title{
                                h3{
                                    margin-top:2px;
                                    padding: 10px 15px;
                                    width: 100%;
                                    margin: 0px;
                                }
                                .quitar_filtros{
                                    margin-right: 3%;
                                }
                            }
                        }
                        .contenedor_filtrados{
                            //max-height: initial;
                            fieldset{
                                padding: 5px;
                            }
                            .formularios_filtrado{
                                label{
                                    display: inline;
                                }
                                span.cantidad{
                                    display: inline;
                                }
                            }
                        }
                    }
                }
                &.filtrado_visible{
                    -webkit-box-shadow: 84px 0px 123px 200px rgba(0,0,0,0.48);
                    -moz-box-shadow: 84px 0px 123px 200px rgba(0,0,0,0.48);
                    box-shadow: 84px 0px 123px 200px rgba(0,0,0,0.48);

                    // -webkit-animation-name: desplegador; /* Safari 4.0 - 8.0 */
                    // -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
                    // animation-name: desplegador;
                    // animation-duration: 4s;
                    // @keyframes desplegador {
                    //   from {left: 100%;}
                    //   to {left: 0%;}
                    // }
                    left:0%;

                    .filtrado_productos .filtros_web .v-megamenu-container{
                        left:0%;
                    }
                }
            }
            @media(max-width: 650px){
                .filtrado_productos{
                    height: 100%;
                    .filtros_web{
                        margin: 90px 15px 0;
                    }
                }
            }
            @media(max-width: 340px){
                width:90%;
                .filtrado_productos .filtros_web .v-megamenu-container{
                    width: 90%;
                }
            }
        }
        .columna-blog{
            .smart-blog-home-post{
                .noticia{
                    border: 1px solid $gris;
                    padding: 15px;
                    margin-top: 20px;
                }
                @media(max-width: 1199px){
                    #smart-blog-custom{
                        display: flex;
                        .noticia{
                            margin: 0px 10px;
                            width: 49%;
                            display: inline-block;
                        }
                    }
                }
            }
        }
        .contenedor_principal_filtrados input[type=radio].selector1:checked ~ div.contenedor_filtrados div.formularios_filtrado {
            margin-left: -100%;
        }
        .contenedor_principal_filtrados input[type=radio].selector0:checked ~ div.contenedor_filtrados div.formularios_filtrado {
            margin-left: 0%;
        }
        .contenedor_principal_filtrados input[type=radio] ~ div.contenedor_filtrados div.formularios_filtrado form {
            width: 50%;
            float: left;
        }
        @media(min-width:1201px){
            .right-content{
                width: 67%;
            }
        }
        @media(min-width:1200px)and(max-width:1599px){
            .right-content{
                width: 62%;
            }
        }
        @media(max-width: 767px)and(min-width: 575px){
            .right-content{
                width: 55%;
            }
        }
        @media(max-width: 574px)and(min-width: 525px){
            .right-content{
                width: 51%;
            }
        }
        @media(max-width: 1199px){
            position: initial;
        }
    }

    @media (max-width: 1199px) {
        .column{
            margin-top: 20px;
        }
    }
    @media all and (min-width: 992px){
       .columna-filtrado {
            padding:0;
        }
    }
    .columna-categorias, .columna-filtrado, .columna-blog, .columna-banner{
        @media(max-width: 991px) and (min-width: 651px){
            //margin-top:30px;
            h4.title_block, .blog{
                margin-top:0px;
            }
        }
        @media (min-width: 992px) {
            width: 100%;
        }
        @media(max-width: 650px){
            width: 100%;
        }
    }
    .columna-blog, .columna-banner{
        @media(max-width: 991px){
            float:right;

        }
    }

}