@import url('https://fonts.googleapis.com/css?family=Barrio');
	* {
	margin:0;
	padding:0;
	font-family:'Barrio',cursive;
	font-size:30px;
}
body {
	background:#000;
}
img {
	display:block;
	border-radius:20px;
}
.square img {
	width:160px;
	height:160px;
	opacity:0.5;
}
#container {
	-webkit-perspective:1500px;
	-moz-perspective:1500px;
	-ms-perspective:1500px;
	perspective:1500px;
	margin:20px auto;
	width:80%;
	height:90%;
}
#imga {
	perspective-origin:50% 50%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	animation:imga 12s linear infinite;
}
#imgb {
	perspective-origin:50% 50%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	animation:imgb 6s linear infinite;
}
#imgc {
	perspective-origin:50% 50%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	animation:imgc 6s linear infinite;
}
#imgd {
	perspective-origin:50% 50%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	animation:imgd 4s linear infinite;
}
#imge {
	perspective-origin:50% 50%;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
	animation:imge 4s linear infinite;
}
#container>div {
	position:absolute;
	left:50%;
	top:200px;
	width:160px;
	height:160px;
	margin-left:-80px;
	margin-top:-80px;
	cursor:pointer;
}
div.square>div {
	position:absolute;
	width:160px;
	height:160px;
	background:rgba(192,192,192,0.5);
	border-radius:20px;
}
div.triangle>div {
	position:absolute;
	width:0px;
	height:0px;
	border-left:solid 80px transparent;
	border-right:solid 80px	transparent;
}
div.top>div {
	top:-276px;
	border-bottom:solid 138.56px	rgba(192,192,192,0.5);
	border-top:solid 138.56px	transparent;
}
div.bottom>div {
	top:138px;
	border-top:solid 138.56px	rgba(192,192,192,0.5);
	border-bottom:solid 138.56px	transparent;
}
#ia0 {
	transform:rotatey(0deg) translatez(299px);
}
#ia1 {
	transform:rotatey(30deg) translatez(299px);
}
#ia2 {
	transform:rotatey(60deg) translatez(299px);
}
#ia3 {
	transform:rotatey(90deg) translatez(299px);
}
#ia4 {
	transform:rotatey(120deg) translatez(299px);
}
#ia5 {
	transform:rotatey(150deg) translatez(299px);
}
#ia6 {
	transform:rotatey(180deg) translatez(299px);
}
#ia7 {
	transform:rotatey(210deg) translatez(299px);
}
#ia8 {
	transform:rotatey(240deg) translatez(299px);
}
#ia9 {
	transform:rotatey(270deg) translatez(299px);
}
#iaa {
	transform:rotatey(300deg) translatez(299px);
}
#iab {
	transform:rotatey(330deg) translatez(299px);
}
#ib0 {
	transform:rotatey(15deg) translatez(139px);
}
#ib1 {
	transform:rotatey(75deg) translatez(139px);
}
#ib2 {
	transform:rotatey(135deg) translatez(139px);
}
#ib3 {
	transform:rotatey(195deg) translatez(139px);
}
#ib4 {
	transform:rotatey(255deg) translatez(139px);
}
#ib5 {
	transform:rotatey(315deg) translatez(139px);
}
#ic0 {
	transform:rotatey(-15deg) translatez(139px);
}
#ic1 {
	transform:rotatey(45deg) translatez(139px);
}
#ic2 {
	transform:rotatey(105deg) translatez(139px);
}
#ic3 {
	transform:rotatey(165deg) translatez(139px);
}
#ic4 {
	transform:rotatey(225deg) translatez(139px);
}
#ic5 {
	transform:rotatey(285deg) translatez(139px);
}
#id0 {
	transform:rotatey(-30deg) rotatex(35.26deg);
}
#id1 {
	transform:rotatey(60deg) rotatex(35.26deg);
}
#id2 {
	transform:rotatey(150deg) rotatex(35.26deg);
}
#id3 {
	transform:rotatey(240deg) rotatex(35.26deg);
}
#ie0 {
	transform:rotatey(30deg) rotatex(35.26deg);
}
#ie1 {
	transform:rotatey(120deg) rotatex(35.26deg);
}
#ie2 {
	transform:rotatey(210deg) rotatex(35.26deg);
}
#ie3 {
	transform:rotatey(300deg) rotatex(35.26deg);
}
@keyframes imgb {
	0% {
	transform:rotatey(0deg) rotatex(20deg);
}
50% {
	transform:rotatey(180deg) rotatex(-20deg);
}
100% {
	transform:rotatey(360deg) rotatex(20deg);
}
}@keyframes imga {
	0% {
	transform:rotatey(0deg)
}
50% {
	transform:rotatey(180deg)
}
100% {
	transform:rotatey(360deg)
}
}@keyframes imgc {
	0% {
	transform:rotatey(0deg) rotatex(-20deg);
}
50% {
	transform:rotatey(180deg) rotatex(20deg);
}
100% {
	transform:rotatey(360deg) rotatex(-20deg);
}
}@keyframes imgd {
	0% {
	transform:rotatey(0deg)
}
50% {
	transform:rotatey(180deg)
}
100% {
	transform:rotatey(360deg)
}
}@keyframes imge {
	0% {
	transform:rotatey(0deg)
}
50% {
	transform:rotatey(180deg)
}
100% {
	transform:rotatey(360deg)
}
}#container>div:hover {
	animation-play-state:paused;
}
div#container div.square div:hover img {
	width:200px;
	height:200px;
	opacity:1;
}
#button {
	position:fixed;
	left:80%;
	top:80%;
}
#button input {
	border-radius:5px;
	cursor:pointer;
}
#container #display {
	display:none;
	top:150%;
	left:50%;
	width:300px;
	height:400px;
	margin-left:-150px;
	margin-top:-200px;
}
#container #display img {
	width:300px;
	height:400px;
}
#container #display #close {
	position:absolute;
	top:2%;
	right:2%;
	width:60px;
	height:20px;
	font-size:18px;
	border:solid 1px black;
	border-radius:5px;
}