body{
    margin: 0;
    padding: 0;
    overflow-x:hidden;

}

*{
    box-sizing: border-box;
}


/*///////////////////// carrusel styles///////////////// */
.carrusel-container{
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* estilos de la caja grande */
.large{
    width: 100%;
    height: 100%;
}
/* estilos de la caja mediana */
.medium{
 width: 87vw;
 height: 174vh; 
 position: absolute;
 border-radius:50%;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 z-index: 8;

}

.medium::after{
    content: "";
    width: inherit;
    height: inherit;
    border-radius: inherit;
    top: 0;
    left: 0;
    background-image: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    position: absolute;
    z-index: 9;
}

/* estilos de la caja pequeña */

.small{
    width: 40vw;
    height: 80vh;
    position: absolute;
    border-radius: 50%;
    z-index: 10;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.img{
    width: 100vw;
    height: 100vh;
}

.img-container{
    animation-delay: .2s;
    position: absolute;
    opacity: 0;
}


.img-container-2{
    position: absolute;
    opacity: 0;
}

.img-container-3{
    animation-delay: .3ms;
    position: absolute;
    opacity: 0;
}


.activate{
    animation-name:escala;
    animation-duration: 1.2s;
    opacity: 1;
    z-index: 5;
    animation-fill-mode: both;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease-in-out;
}

.index{
    opacity: 1;

}


@keyframes escala{
    0%{
        transform: scale(1);
        opacity: 0;
    }

    50%{
        transform: scale(2);
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}


/* @keyframes rotateA {
    0%{
        transform:rotate(0deg);
        opacity: 0;

    }

    100%{
        transform: rotate(360deg);
        opacity: 1;
    }
} */