*{

margin:0;
padding: 0;
box-sizing: border-box;
}

body{
background-image: url(images/fondo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 330vh;
}
h2{
text-align:center;
text-decoration: underline;
font-size: 40px;
font-family: Arial;
margin-top: 40px;
color: #6F080A;
text-shadow: 0px 0px 4px black;
}

.content-all{
width: 276px;
margin: auto;
perspective: 1000px;
postion:relative;
margin-top: 50px;
}

.content-carrousel{
width:100% ;
position: absolute;
animation: rotar 15s infinite linear;
transform-style: preserve-3d;
}

.content-carrousel:hover{
animation-play-state: paused;
cursor:pointer;
}

.content-carrousel figure{
width:100%;
height: 192px;
overflow: hidden;
position: absolute;
box-shadow: 0px 0px 10px 0px black;
transition: all 300ms;
}

.content-carrousel figure:hover{
box-shadow: 0px 0px 0px 0px black;
transition: all 300ms;

}
.content-carrousel figure:nth-child(0){transform: rotateY(0deg) translateZ(300px)}
.content-carrousel figure:nth-child(1){transform: rotateY(51deg) translateZ(300px)}

.content-carrousel figure:nth-child(2){transform: rotateY(102deg)

translateZ(300px)}
.content-carrousel figure:nth-child(3){transform: rotateY(153deg)
translateZ(300px)}
.content-carrousel figure:nth-child(4){transform: rotateY(206deg)
translateZ(300px)}
.content-carrousel figure:nth-child(5){transform: rotateY(259deg)
translateZ(300px)}
.content-carrousel figure:nth-child(6){transform: rotateY(310deg)
translateZ(300px)}
.content-carrousel figure:nth-child(7){transform: rotateY(360deg)
translateZ(300px)}

.content-carrousel img{
width:100%;
transition: all 300ms;
}

.content-carrousel img:hover{
transform: scale(1.2);
transition: all 300ms;
}

@keyframes rotar{
from{
transform: rotateY(0deg);
}to{
transform: rotateY(360deg);
}