/*
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:25:47
    Author     : Tatiana
*/



$banner_fondo_texto:$secundario;
$bammer_color_texto: $grisTexto;
$bammer_color_texto_hover: $grisPesado;
$fuente_banner:$fuente3;

@mixin bannersMultiples(){
    .bannersMultiples{
        margin-top:18px;
        margin-bottom: 38px;

        /* Lo que viene ahora es para que los banners cuadren */
        @media (min-width: 992px){
            & > .row{
                position:relative;
                .bp2_right{
                    position:initial;
                    .row{
                        position:absolute;
                        height:100%;
                        width:50%;
                        .banner23{
                            position: absolute;
                            bottom: 0px;
                        }
                    }
                }
            }
        }
        @media (max-width: 993px){
            .bp2_left{
                margin-bottom: 30px;
            }
        }
        figcaption {
            position: absolute;
            bottom: 0px;
            background: $primario;
            color: $banner_fondo_texto;
            width: 100%;
            font-size: 2em;
            font-family: $fuente_banner;
            letter-spacing: 0em;
            padding: 10px 20px;
            opacity: 0.8;
        }
    }

    .hover_banner_img1 {
        display: block;
        position: relative;
        a{
            color: $color_gris_oscuro;
            text-decoration: none;
            transition: all 0.3s ease-in-out 0s;
            -webkit-transition: all 0.3s ease-in-out 0s;
            -ms-transition: all 0.3s ease-in-out 0s;
            img{
                width:100%;
            }
            &::before {
                height: 100%;
                border-style: solid;
                border-width: 10px;
                border-color: rgba(228, 228, 228, 0.43);
                background: rgba(255,255,255,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::before {
                transform: scale(1);
                z-index: 1;
            }
        }
    }
    .banner23 {
        margin-top: 30px;
    }
}