@charset "UTF-8";
/* CSS Document */
 *{
	 margin:0;
	 padding:0;
	 box-sizing:border-box;
}

h2{
	text-align:center;
	font-size:36px;
	font-family:Arial, Helvetica, sans-serif;
	color:aquq;
	text-shadow: 0px 0px 6px black;
	}
.content-all{
	width:210px;
	perspective:900px;
	margin:auto;
	position:relative;
	margin-top:50px;
	 display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	
}

.content li {
    margin: 5px;
}
.content-carroulsel{
	width:100%;
	position:absolute;
	animation: rotar 50s infinite linear;
	transform-style:preserve-3d;
}
	.content-carroulsel:hover{
	animation-play-state:paused;
	cursor: pointer;
	
}
.content-carroulsel figure{
	width:100%;
	height:200px;
	overflow:hidden;
	position:absolute;
	box-shadow: 0px 0px 20px 0px black;
	transition:all 360ms;
	
}
.content-carroulsel figure:hover{
	box-shadow: 0px 0px 20px 0px black;
	transition: all 360ms;
	
}

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

.content-carroulsel figure:nth-child(2){transform:rotateY(40deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(3){transform:rotateY(80deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(4){transform:rotateY(120deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(5){transform: rotateY(160deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(6){transform: rotateY(200deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(7){transform: rotateY(240deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(8){transform:rotateY(280deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(9){transform: rotateY(320deg)translateZ(300px);}
	
	.content-carroulsel figure:nth-child(10){transform: rotateY(360deg)translateZ(300px);}
	
	
	
.content-carroulsel img{
	width:100%;
	transition:all 360ms;
	
}
.content-carroulsel img:hover{
	transform:scale(1.2);
	transition:all 360ms;
	
	
}

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