@charset "utf-8";
/* CSS Document */

* { box-si75ng: border-box; }

body { font-family: sans-serif; }

.scene3d {
	top:-9%;
  position: relative;
  width: 54vw;
  height: 70vh;
  margin: 5% auto;
	left: 22vw;
  animation: up-and-down 2s ease-in-out forwards infinite alternate 1s;
  perspective: 1200px;
}

.carousel {
  width: 50%;
  height: 50%;	
  top:12.5%;
  left: 25%;
  cursor: pointer;
  position: absolute;
  transform: translateZ(-88px);
  transform-style: preserve-3d;
  transition : transform 1s;
  display: flex;
  justify-content: center;
  align-content: space-around;
}

@keyframes up-and-down {
	0%{
	transform:translateY(15%);
	}
	100%{
	transform:translateY(10%);
	}
}

.carousel.show-face0-cw  { transform : translateZ(-88px) rotateY(0deg);}
.carousel.show-face1-cw  { transform : translateZ(-88px) rotateY(-72deg);}
.carousel.show-face2-cw   { transform : translateZ(-88px) rotateY(-144deg);}
.carousel.show-face3-cw   { transform : translateZ(-88px) rotateY(-216deg);}
.carousel.show-face4-cw    { transform : translateZ(-88px) rotateY(-288deg);}
.carousel.show-face0-ccw  { transform : translateZ(-88px) rotateY(360deg);}
.carousel.show-face1-ccw  { transform : translateZ(-88px) rotateY(288deg);}
.carousel.show-face2-ccw   { transform : translateZ(-88px) rotateY(216deg);}
.carousel.show-face3-ccw   { transform : translateZ(-88px) rotateY(144deg);}
.carousel.show-face4-ccw    { transform : translateZ(-88px) rotateY(72deg);}
.carousel.show-face0-cw-reset  
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(0deg);
}
.carousel.show-face1-cw-reset  
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(-72deg);
}
.carousel.show-face2-cw-reset   
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(-144deg);
}
.carousel.show-face3-cw-reset   
{ 
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(-216deg);
}
.carousel.show-face4-cw-reset    
{ 
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(-288deg);
}
.carousel.show-face0-ccw-reset  
{ 
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(360deg);
}
.carousel.show-face1-ccw-reset  
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(288deg);
}
.carousel.show-face2-ccw-reset   
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(216deg);
}
.carousel.show-face3-ccw-reset   
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(144deg);
}
.carousel.show-face4-ccw-reset    
{
transition: transform 0s !important;
transform : translateZ(-288px) rotateY(72deg);
}

.carousel__cell {
  position: absolute;
  width: 100%;
  height: 0%;
  border: 0px solid white;
  line-height: 1.16%x;
  font-size: 80px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  text-align: center;
  /* box-shadow: 0px 4px 20px 2px black; */
}

/*.carousel__cell:nth-child(1) { background: hsla(  0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(5) { background: hsla(160, 100%, 50%, 0.8); }*/

.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(350px); }
.carousel__cell:nth-child(2) { transform: rotateY( 72deg) translateZ(350px); }
.carousel__cell:nth-child(3) { transform: rotateY( 144deg) translateZ(350px); }
.carousel__cell:nth-child(4) { transform: rotateY(216deg) translateZ(350px); }
.carousel__cell:nth-child(5) { transform: rotateY(288deg) translateZ(350px); }

.carousel img
{
justify-content: center;
  align-content: space-around;
box-shadow: 0px 4px 20px 2px black;
}
/* Mobile-View */
@media only screen and (max-width:426px) 
{
  .scene3d {
  top:-18%;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 5% auto;
  left: -5vw;
  perspective: 900px;}
  .carousel {
	 transform: translateZ(100px);
  height: 25%;
  width: 100%;
  top:33%;	
  left: 6%;}
	.carousel__cell {
		width:40%;
		height:110%;
	}
	.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(135px); }
.carousel__cell:nth-child(2) { transform: rotateY( 72deg) translateZ(135px); }
.carousel__cell:nth-child(3) { transform: rotateY( 144deg) translateZ(135px); }
.carousel__cell:nth-child(4) { transform: rotateY(216deg) translateZ(135px); }
.carousel__cell:nth-child(5) { transform: rotateY(288deg) translateZ(135px); }
	
  .carousel.show-face0-cw  { transform : translateZ(135px) rotateY(0deg);}
.carousel.show-face1-cw  { transform : translateZ(135px) rotateY(-72deg);}
.carousel.show-face2-cw   { transform : translateZ(135px) rotateY(-144deg);}
.carousel.show-face3-cw   { transform : translateZ(135px) rotateY(-216deg);}
.carousel.show-face4-cw    { transform : translateZ(135px) rotateY(-288deg);}
.carousel.show-face0-ccw  { transform : translateZ(135px) rotateY(360deg);}
.carousel.show-face1-ccw  { transform : translateZ(135px) rotateY(288deg);}
.carousel.show-face2-ccw   { transform : translateZ(135px) rotateY(216deg);}
.carousel.show-face3-ccw   { transform : translateZ(135px) rotateY(144deg);}
.carousel.show-face4-ccw    { transform : translateZ(135px) rotateY(72deg);}
}
/* MobileMini-View */
@media only screen and (max-width:361px) 
{
  .scene3d {
  top:-30%;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 5% auto;
  left: -1vw;
  perspective: 900px;}
  .carousel {
	 transform: translateZ(100px);
  height: 25%;
  width: 100%;
  top:33%;	
  left: 6%;}
	.carousel img{
	width:100%;
		 }
	.carousel__cell {
		width:50%;
		height:0%;
	}
	.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(135px); }
.carousel__cell:nth-child(2) { transform: rotateY( 72deg) translateZ(135px); }
.carousel__cell:nth-child(3) { transform: rotateY( 144deg) translateZ(135px); }
.carousel__cell:nth-child(4) { transform: rotateY(216deg) translateZ(135px); }
.carousel__cell:nth-child(5) { transform: rotateY(288deg) translateZ(135px); }
	
  .carousel.show-face0-cw  { transform : translateZ(135px) rotateY(0deg);}
.carousel.show-face1-cw  { transform : translateZ(135px) rotateY(-72deg);}
.carousel.show-face2-cw   { transform : translateZ(135px) rotateY(-144deg);}
.carousel.show-face3-cw   { transform : translateZ(135px) rotateY(-216deg);}
.carousel.show-face4-cw    { transform : translateZ(135px) rotateY(-288deg);}
.carousel.show-face0-ccw  { transform : translateZ(135px) rotateY(360deg);}
.carousel.show-face1-ccw  { transform : translateZ(135px) rotateY(288deg);}
.carousel.show-face2-ccw   { transform : translateZ(135px) rotateY(216deg);}
.carousel.show-face3-ccw   { transform : translateZ(135px) rotateY(144deg);}
.carousel.show-face4-ccw    { transform : translateZ(135px) rotateY(72deg);}
}/* MobileMicro-View */
@media only screen and (max-width:321px) 
{
	  .scene3d {
  top:-18%;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 5% auto;
  left: -3vw;
  perspective: 900px;}
  .carousel {
	 transform: translateZ(100px);
  height: 25%;
  width: 100%;
  top:33%;	
  left: 6%;}
	.carousel img{
	width:100%;
		 }
	.carousel__cell {
		width:45%;
	}
	.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(135px); }
.carousel__cell:nth-child(2) { transform: rotateY( 72deg) translateZ(135px); }
.carousel__cell:nth-child(3) { transform: rotateY( 144deg) translateZ(135px); }
.carousel__cell:nth-child(4) { transform: rotateY(216deg) translateZ(135px); }
.carousel__cell:nth-child(5) { transform: rotateY(288deg) translateZ(135px); }
	
  .carousel.show-face0-cw  { transform : translateZ(135px) rotateY(0deg);}
.carousel.show-face1-cw  { transform : translateZ(135px) rotateY(-72deg);}
.carousel.show-face2-cw   { transform : translateZ(135px) rotateY(-144deg);}
.carousel.show-face3-cw   { transform : translateZ(135px) rotateY(-216deg);}
.carousel.show-face4-cw    { transform : translateZ(135px) rotateY(-288deg);}
.carousel.show-face0-ccw  { transform : translateZ(135px) rotateY(360deg);}
.carousel.show-face1-ccw  { transform : translateZ(135px) rotateY(288deg);}
.carousel.show-face2-ccw   { transform : translateZ(135px) rotateY(216deg);}
.carousel.show-face3-ccw   { transform : translateZ(135px) rotateY(144deg);}
.carousel.show-face4-ccw    { transform : translateZ(135px) rotateY(72deg);}
}