body,html{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: black;
}


#main{
	background-image: url(../img/end2.jpg);
	background-repeat: no-repeat;
	perspective: 1000px;
	height: 100%;
}



#wrap{
	width: 400px;
	height: 300px;
	position: relative;
	transform-style: preserve-3d;
	top:350px;
	animation: row 40s linear infinite;
	margin: 0 auto;
	

	


}

#wrap:hover{
	animation-play-state: paused;
	cursor: pointer;
}


#wrap img{
	width: 400px;
	height: 225px;
	position: absolute;
	border-radius: 5px;
}

#wrap img:hover{

box-shadow: 0px 0px 5px rgba(255,255,255,0.8);

}



img:first-child{
	transform: rotate(0deg) translateZ(300px);
}



img:nth-child(2){
	transform: rotateY(72deg) translateZ(300px);

}

img:nth-child(3){
	transform: rotateY(144deg) translateZ(300px);

}

img:nth-child(4){
	transform: rotateY(216deg) translateZ(300px);

}

img:nth-child(5){
	transform: rotateY(288deg) translateZ(300px);

}

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

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


#light {
	position: absolute;
	top: 0;
	right: 250px;
}

#menu {
	/*color: #fff;*/
	position: absolute;
	right: 220px;
	top:300px;
}


#menu ul li {

	height: 70px;
	list-style: none;
	font-size: 25px;
	font-weight: lighter;
	cursor: pointer;

}


#light::before{
	content: "";
	width: 50px;
	height:50px;
	position: absolute;
	top:45px;
	right:50px;
	/*z-index: 2;*/
	border-radius: 25px;
	/*cursor: pointer;*/
	display: block;
}

#light:hover::before {
	border:5px dashed #fff;
}

#light{
	transition: transform linear 2s;
	transform-origin:top right;
}