/*
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 : 25-ene-2018, 18:20:50
    Author     : Tatiana
*/

@mixin product_carousel($height, $numberOfSlides, $numberOfSlides1, $numberOfSlides2, $numberOfSlides3){
    .slider-productos{
        margin-top:18px;
        .carousel-inner .item.active{
            overflow: hidden;
            height: $height;
        }
        .carousel-indicators{
            bottom: -12px;
            .active {
                width: 12px;
                height: 12px;
                margin: 0;
                background-color: $primarioHover;
            }
            li {
                display: inline-block;
                width: 10px;
                height: 10px;
                margin: 1px;
                text-indent: -999px;
                cursor: pointer;
                background-color: #000\9;
                background-color: rgba(0,0,0,0);
                border: 1px solid $primarioHover;
                border-radius: 10px;
            }
            @media (max-width:600px){
                width:80%;
                margin-left: -40%;
            }
            @media (max-width:362px){
                width:120%;
                margin-left: -60%;
            }
        }

        .item{
            height:$altura_slider-productos;
            background: $blanco;
        }
        .carousel{
            @media (max-width:992px){
                width: 77%;
                margin: auto;
            }
            .carousel-control {
                background-image:none;
                width: 5%;
                span {
                    margin-top: $altura_flechas_slider-productos;
                    font-size: 2.5em;
                }
                .right, .left{
                    background: none;
                    color:$color_flechas-productos;
                }
                &:hover, &:focus {
                    color: $color_flechas_hover-productos;
                    text-decoration: none;
                    filter: alpha(opacity=90);
                    outline: 0;
                    opacity: .9;
                }
            }
            a{
                color:$color_enlaces_slider-productos;
                text-shadow: none;
            }
        }
        .carousel-control.right{
            right: -50px;
            @media (max-width:992px){
                right: -25px;
            }
        }
        .carousel-control.left{
            left:-50px;
        }
        figure{
            text-align: center;
            padding: 18px 18px;
            min-height: 292px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                @include sombraPortada();
                max-width: 100%;
                height: auto;

            }
        }
        @media (max-width: 767px) {
            article{
                height: auto;
            }
            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 0;
                -webkit-transform: translate3d(100% / $numberOfSlides3, 0, 0);
                transform: translate3d(100% / $numberOfSlides3, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-100% / $numberOfSlides3, 0, 0);
                transform: translate3d(-100% / $numberOfSlides3, 0, 0);
            }

        }
        @media (min-width: 767px) and (max-width: 992px ) {
            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 0;
                -webkit-transform: translate3d(100% / $numberOfSlides2, 0, 0);
                transform: translate3d(100% / $numberOfSlides2, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-100% / $numberOfSlides2, 0, 0);
                transform: translate3d(-100% / $numberOfSlides2, 0, 0);
            }
        }
        @media (min-width: 992px ) and (max-width: 1200px) {

            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 0;
                -webkit-transform: translate3d( 100% / $numberOfSlides1, 0, 0);
                transform: translate3d( 100% / $numberOfSlides1, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-100% / $numberOfSlides1, 0, 0);
                transform: translate3d(-100% / $numberOfSlides1, 0, 0);
            }

        }
        @media (min-width: 1200px ) {

            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                left: 0;
                -webkit-transform: translate3d( 100% / $numberOfSlides, 0, 0);
                transform: translate3d( 100% / $numberOfSlides, 0, 0);
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                left: 0;
                -webkit-transform: translate3d(-100% / $numberOfSlides, 0, 0);
                transform: translate3d(-100% / $numberOfSlides, 0, 0);
            }

        }
        @media not all, (-webkit-transform-3d){
            .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
                left: 0;
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
            }
        }
        .diapositiva {
            margin-bottom: 37px;
            @include fichaBoing();
        }
    }
}
@mixin imagen_carousel($altura_slider){
    .slider {
        margin: 0px 0px 50px;
        .carousel-indicators{
            bottom: -10px; 
            margin-bottom: 0;
            .active {
                width: 12px;
                height: 12px;
                margin: 0;
                background-color: $primarioHover;
            }
            li {
                display: inline-block;
                width: 10px;
                height: 10px;
                margin: 1px;
                text-indent: -999px;
                cursor: pointer;
                background-color: #000\9;
                background-color: rgba(0,0,0,0);
                border: 1px solid $primarioHover;
                border-radius: 10px;
            }
            @media (max-width:600px){
                width:80%;
                margin-left: -40%;
            }
            @media (max-width:362px){
                width:120%;
                margin-left: -60%;
            }
        }
        .item{
            height:$altura_slider;
            /* position:relative; */
            .container-fluid{
                padding:0px;
                margin:0px;
                position:relative;
            }
            & > div{
                height:100%;
            }
            .izquierda, .derecha{
                height:100%;
                /*-webkit-box-shadow: inset 0px 0px 70px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: inset 0px 0px 70px 0px rgba(0,0,0,0.75);
                box-shadow: inset 0px 0px 70px 0px rgba(0,0,0,0.75);*/
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                -moz-background-size: contain;
                -webkit-background-size: contain;
                -o-background-size: contain;
                //background-attachment: fixed;
                width: 100%;
            }
            .derecha{
                position:absolute;
                top:0;
                display: flex;
                display: -webkit-flex;

                a {
                    width: 100%;
                    height: 100%;
                    color: $color_titulos_slider;                    
                    font-size: 2.3em;
                    font-family: $fuente_slider;                   
                    display: inline-block;
                    text-align: center;
                    opacity: 0.8;
                    display: flex;
                    align-items: flex-end;
                    align-self: end;
                    display: -webkit-flex;
                    -webkit-align-items: flex-end;
                    -webkit-align-self: end;
                    span{
                        background: $bg_titulos_slider;
                        padding: 10px 25px;
                        display: block;
                        flex: 1 1;
                        -webkit-flex: 1 1;
                    }

                }

            }
        }
    }
}
@mixin carousel_control(){
    .carousel{

        .carousel-control {
            background-image:none;
            width: 5%;
            span {
                margin-top: $altura_flechas_slider;
                font-size: 4.1em;
                display: inline-block;
            }
            .right, .left{
                background: none;
                color:$color_flechas;
            }
            &:hover, &:focus {
                color: $color_flechas_hover;
                text-decoration: none;
                filter: alpha(opacity=90);
                outline: 0;
                opacity: .9;
            }
        }
        a{
            color:$color_enlaces_slider;
            /*text-shadow: 0px 0px 5px rgba(150, 150, 150, 1);*/
        }
    }
}