/*--------------------------------------------------------------
#Services
--------------------------------------------------------------*/
#services {
    background-color: #FFF;
}

#servicios {
    padding: 0 1em;
    width: 100%;
    height: 35em;
}

#servicios .titulo-establecimientos {
    text-align: center;
    color: #000000;
}

.container2 {
    position: relative;
    width: 320px;
    margin: 0 auto;
    perspective: 1000px;
}

.carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate360 25s infinite forwards linear;

}

.carousel__face {
    position: absolute;
    width: 300px;
    height: 187px;
    top: 20px;
    left: 10px;
    right: 10px;
    background-size: cover;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
    display: flex;
}

.carousel__face:hover {
    box-shadow: inset 0 0 0 2000px #ddddd444;
}

span {
    text-align: center;
    margin: auto;
    font-size: 2rem;
    color: #ffffff;
}

.carousel__face:nth-child(1) {
    background-image: url("../assets/images/services/comida.jpg");
    transform: rotateY(0deg) translateZ(200px);
}

.carousel__face:nth-child(2) {
    background-image: url("../assets/images/services/equipaje.jpg");
    transform: rotateY(120deg) translateZ(200px);
}

.carousel__face:nth-child(3) {
    background-image: url("../assets/images/services/cajero.jpg");
    transform: rotateY(240deg) translateZ(200px);
}



@keyframes rotate360 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-360deg);
    }
}




@media screen and (max-width: 736px) {
    #services {
        padding: 80px 0 0 0;
    }

    #servicios {
        margin-top: 15em;
        height: 25em;
    }

    .form-control {
        width: 100%;
    }

    .call-to-action h3 {
        font-size: 1.8rem;
    }

    .select {
        font-size: 1rem;
        width: 80%;
        height: auto;
    }

    .call-to-action .cta-btn {

        font-size: 1rem;
        padding: 15px 35px;
    }

    .container2 {
        perspective: 1000px;
    }

    .carousel {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: rotate360 20s infinite forwards linear;

    }

    .carousel__face {
        margin: auto;
        position: absolute;
        width: 80%;
        height: 120px;

    }

    span {

        font-size: 1rem;
    }

    .carousel__face:nth-child(1) {
        transform: rotateX(0deg) translateZ(120px);
    }

    .carousel__face:nth-child(2) {
        transform: rotateX(120deg) translateZ(120px);
    }

    .carousel__face:nth-child(3) {
        transform: rotateX(240deg) translateZ(120px);
    }



    @keyframes rotate360 {
        0% {
            transform: rotateX(0deg);
        }

        100% {
            transform: rotateX(-360deg);
        }
    }


}