#wrapper {
  /*padding-top: 10%; */
}

.cube_perspective {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective-origin: 50% 200px;
  -ms-perspective-origin: 50% 200px;
  -o-perspective-origin: 50% 200px;
  perspective-origin: 50% 200px;
  -webkit-transform: scale(0.8, 0.8);
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  -o-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);
  -webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1))); 
  padding-bottom: 10%;
}

#cube {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(136deg) rotateY(1122deg);
  -moz-transform: rotateX(136deg) rotateY(1122deg);
  -ms-transform: rotateX(136deg) rotateY(1122deg);
  -o-transform: rotateX(136deg) rotateY(1122deg);
  transform: rotateX(136deg) rotateY(1122deg); }

#cube > div{
	-webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  -o-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.cube > div {
  overflow: hidden;
  position: absolute;
  opacity: 0.9;
  height: 250px;
  width: 250px;
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  -o-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

#cube > div:hover {
  cursor: pointer; }

#cube > div:active {
  cursor: pointer; }

.cube > div:first-child {
  -webkit-transform: rotateX(90deg) translateZ(125px);
  -moz-transform: rotateX(90deg) translateZ(125px);
  -ms-transform: rotateX(90deg) translateZ(125px);
  -o-transform: rotateX(90deg) translateZ(125px);
  transform: rotateX(90deg) translateZ(98px);
  outline: 1px solid transparent;
  }

.cube > div:nth-child(2) {
  -webkit-transform: translateZ(125px);
  -moz-transform: translateZ(125px);
  -ms-transform: translateZ(125px);
  -o-transform: translateZ(125px);
  transform: translateZ(99px);
  outline: 1px solid transparent;
  }

.cube > div:nth-child(3) {
  -webkit-transform: rotateY(90deg) translateZ(125px);
  -moz-transform: rotateY(90deg) translateZ(125px);
  -ms-transform: rotateY(90deg) translateZ(125px);
  -o-transform: rotateY(90deg) translateZ(125px);
  transform: rotateY(90deg) translateZ(376px);
  outline: 1px solid transparent;
  }

.cube > div:nth-child(4) {
  -webkit-transform: rotateY(180deg) translateZ(125px);
  -moz-transform: rotateY(180deg) translateZ(125px);
  -ms-transform: rotateY(180deg) translateZ(125px);
  -o-transform: rotateY(180deg) translateZ(125px);
  transform: rotateY(180deg) translateZ(99px);
  outline: 1px solid transparent;
  }

.cube > div:nth-child(5) {
  -webkit-transform: rotateY(-90deg) translateZ(125px);
  -moz-transform: rotateY(-90deg) translateZ(125px);
  -ms-transform: rotateY(-90deg) translateZ(125px);
  -o-transform: rotateY(-90deg) translateZ(125px);
  transform: rotateY(-90deg) translateZ(99px);
  outline: 1px solid transparent;
  }

.cube > div:nth-child(6) {
  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
  -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
  -ms-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
  -o-transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
  transform: rotateX(-90deg) rotate(180deg) translateZ(207px);
  outline: 1px solid transparent;
  }
object {
  opacity: 0.5; }

object:hover {
  opacity: 1; }
  *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }






/*.cube_perspective{
	width: 100%;
	height: 200px;
	perspective: 1000px;
	margin: 100px auto 0;
}*/
.cube1 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.face {
  opacity: 0.9;
	position: absolute;
	width: fit-content;
	height: fit-content;
	/*background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));*/
}
.cube1 .top {
  transform: rotateX(90deg) translateZ(150px);
}
.cube1 .bottom {
  transform: rotateX(-90deg) translateZ(32px);
}

.cube1 .right {
  transform: rotateY(90deg) translateZ(304px);
}
.cube1 .left {
  transform: rotateY(-90deg) translateZ(153px);
}

.cube1 .front {
  transform: rotateX(0deg) translateZ(153px);
}
.cube1 .back {
  transform: rotateX(-180deg) translateZ(153px);
}

/*cube 2*/
.cube2 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube2 .top {
  transform: rotateX(90deg) translateZ(188px);
}
.cube2 .bottom {
  transform: rotateX(-90deg) translateZ(-1px);
}

.cube2 .right {
  transform: rotateY(90deg) translateZ(373px);
}
.cube2 .left {
  transform: rotateY(-90deg) translateZ(188px);
}

.cube2 .front {
  transform: rotateX(0deg) translateZ(188px);
}
.cube2 .back {
  transform: rotateX(-180deg) translateZ(188px);
}

/* cube 3*/
.cube3 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube3 .top {
  transform: rotateX(90deg) translateZ(185px);
}
.cube3 .bottom {
  transform: rotateX(-90deg) translateZ(-51px);
}

.cube3 .right {
  transform: rotateY(90deg) translateZ(373px);
}
.cube3 .left {
  transform: rotateY(-90deg) translateZ(185px);
}

.cube3 .front {
  transform: rotateX(0deg) translateZ(185px);
}
.cube3 .back {
  transform: rotateX(-180deg) translateZ(185px);
}
/*cube 4*/
.cube4 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube4 .top {
  transform: rotateX(90deg) translateZ(122px);
}
.cube4 .bottom {
  transform: rotateX(-90deg) translateZ(63px);
}

.cube4 .right {
  transform: rotateY(90deg) translateZ(268px);
}
.cube4 .left {
  transform: rotateY(-90deg) translateZ(122px);
}

.cube4 .front {
  transform: rotateX(0deg) translateZ(122px);
}
.cube4 .back {
  transform: rotateX(-180deg) translateZ(122px);
}
/*cube 5*/
.cube5 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube5 .top {
  transform: rotateX(90deg) translateZ(115px);
}
.cube5 .bottom {
  transform: rotateX(-90deg) translateZ(60px);
}

.cube5 .right {
  transform: rotateY(90deg) translateZ(388px);
}
.cube5 .left {
  transform: rotateY(-90deg) translateZ(115px);
}

.cube5 .front {
  transform: rotateX(0deg) translateZ(115px);
}
.cube5 .back {
  transform: rotateX(-180deg) translateZ(115px);
}
/*cube 6*/
.cube6 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube6 .top {
  transform: rotateX(90deg) translateZ(150px);
}
.cube6 .bottom {
  transform: rotateX(-90deg) translateZ(43px);
}

.cube6 .right {
  transform: rotateY(90deg) translateZ(321px);
}
.cube6 .left {
  transform: rotateY(-90deg) translateZ(153px);
}

.cube6 .front {
  transform: rotateX(0deg) translateZ(153px);
}
.cube6 .back {
  transform: rotateX(-180deg) translateZ(153px);
}
/*cube 7*/
.prod12{
	margin-bottom: 110px;
}
.cube7 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube7 .top, .cube7 .bottom , .cube7 .front, .cube7 .back{
	width: 206px;
}
.cube7 .right, .cube7 .left {
	width: 178px;
}
.cube7 img{
	width: inherit;
	height: inherit;
}
.cube7 .top {
	/*width: 552px;
	height: 479px;*/
  transform: rotateX(90deg) translateZ(8px);
}
.cube7 .bottom {
	/*width: 552px;
	height: 479px;*/
  transform: rotateX(-90deg) translateZ(212px);
}

.cube7 .right {
	/*width: 479px;
	height: 565px;*/
  transform: rotateY(90deg) translateZ(112px);
}
.cube7 .left {
	/*width: 479px;
	height: 565px;*/
  transform: rotateY(-90deg) translateZ(88px);
}

.cube7 .front {
	/*width: 552px;
	height: 565px;*/
  transform: rotateX(0deg) translateZ(88px);
}
.cube7 .back {
	/*width: 552px;
	height: 565px;*/
  transform: rotateX(-180deg) translateZ(88px);
}
/*cube 8*/
.cube8 {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	/*animation: rotate 10s infinite linear;*/
}
.cube8 .top {
  transform: rotateX(90deg) translateZ(140px);
}
.cube8 .bottom {
  transform: rotateX(-90deg) translateZ(-37px);
}

.cube8 .right {
  transform: rotateY(90deg) translateZ(307px);
}
.cube8 .left {
  transform: rotateY(-90deg) translateZ(157px);
}

.cube8 .front {
  transform: rotateX(0deg) translateZ(157px);
}
.cube8 .back {
  transform: rotateX(-180deg) translateZ(157px);
}
@keyframes rotate {
  0% { transform: rotateX(0)}
  12.5% { 
  	transform: rotateY(90deg);
  	/*transform: scale3d(1.2, 0.8, 1) rotateX(6deg) rotateY(-34deg) rotateZ(-20deg) translate3d(0px, 0px, 0px) skew(1deg, 0deg);*/
  }
  25% { transform: rotateY(270deg)}
  37.5% { transform: rotateY(270deg)}
  50% { transform: rotateY(360deg)}
  62.5% { transform: rotateX(90deg)}
  75% { transform: rotateX(180deg)}
  87.5% { transform: rotateX(270deg)}
  100% { transform: rotateX(360deg)}
}



@media (max-width: 575.98px) {  
	.viewport {
    -webkit-transform: scale(0.6, 0.6);
    -moz-transform: scale(0.6, 0.6);
    -ms-transform: scale(0.6, 0.6);
    -o-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6); 
}

	.cube1 img, .cube2 img, .cube3 img, .cube4 img, .cube5 img, .cube6 img, .cube8 img{
		width: inherit;
		height: inherit;
	}
	.cube1 .top, .cube1 .bottom , .cube1 .front, .cube1 .back{
		width: 250px;
	}
	.cube1 .right, .cube1 .left {
		width: 167px;
	}

	.cube1 .top {
	  transform: rotateX(90deg) translateZ(83px);
	}
	.cube1 .bottom {
	  transform: rotateX(-90deg) translateZ(18px);
	}
	.cube1 .right {
	  transform: rotateY(90deg) translateZ(166px);
	}
	.cube1 .left {
	  transform: rotateY(-90deg) translateZ(83px);
	}

	.cube1 .front {
	  transform: rotateX(0deg) translateZ(83px);
	}
	.cube1 .back {
	  transform: rotateX(-180deg) translateZ(83px);
	}

	.cube2 .top, .cube2 .bottom , .cube2 .front, .cube2 .back{
		width: 250px;
	}
	.cube2 .right, .cube2 .left {
		width: 167px;
	}

	.cube2 .top {
	  transform: rotateX(90deg) translateZ(83px);
	}
	.cube2 .bottom {
	  transform: rotateX(-90deg) translateZ(-1px);
	}

	.cube2 .right {
	  transform: rotateY(90deg) translateZ(166px);
	}
	.cube2 .left {
	  transform: rotateY(-90deg) translateZ(83px);
	}

	.cube2 .front {
	  transform: rotateX(0deg) translateZ(83px);
	}
	.cube2 .back {
	  transform: rotateX(-180deg) translateZ(83px);
	}

	.cube3 .top, .cube3 .bottom , .cube3 .front, .cube3 .back{
		width: 250px;
	}
	.cube3 .right, .cube3 .left {
		width: 167px;
	}

	.cube3 .top {
	  transform: rotateX(90deg) translateZ(80px);
	}
	.cube3 .bottom {
	  transform: rotateX(-90deg) translateZ(-23px);
	}

	.cube3 .right {
	  transform: rotateY(90deg) translateZ(166px);
	}
	.cube3 .left {
	  transform: rotateY(-90deg) translateZ(83px);
	}

	.cube3 .front {
	  transform: rotateX(0deg) translateZ(83px);
	}
	.cube3 .back {
	  transform: rotateX(-180deg) translateZ(83px);
	}

	.cube4 .top, .cube4 .bottom , .cube4 .front, .cube4 .back{
		width: 250px;
	}
	.cube4 .right, .cube4 .left {
		width: 157px;
	}
	.cube4 .top {
	  transform: rotateX(90deg) translateZ(78px);
	}
	.cube4 .bottom {
	  transform: rotateX(-90deg) translateZ(39px);
	}

	.cube4 .right {
	  transform: rotateY(90deg) translateZ(172px);
	}
	.cube4 .left {
	  transform: rotateY(-90deg) translateZ(78px);
	}

	.cube4 .front {
	  transform: rotateX(0deg) translateZ(78px);
	}
	.cube4 .back {
	  transform: rotateX(-180deg) translateZ(78px);
	}

	.cube5 .top, .cube5 .bottom , .cube5 .front, .cube5 .back{
		width: 250px;
	}
	.cube5 .right, .cube5 .left {
		width: 114px;
	}

	.cube5 .top {
	  transform: rotateX(90deg) translateZ(57px);
	}
	.cube5 .bottom {
	  transform: rotateX(-90deg) translateZ(30px);
	}

	.cube5 .right {
	  transform: rotateY(90deg) translateZ(193px);
	}
	.cube5 .left {
	  transform: rotateY(-90deg) translateZ(57px);
	}

	.cube5 .front {
	  transform: rotateX(0deg) translateZ(57px);
	}
	.cube5 .back {
	  transform: rotateX(-180deg) translateZ(57px);
	}

	.cube6 .top, .cube6 .bottom , .cube6 .front, .cube6 .back{
		width: 250px;
	}
	.cube6 .right, .cube6 .left {
		width: 162px;
	}

	.cube6 .top {
	  transform: rotateX(90deg) translateZ(80px);
	}
	.cube6 .bottom {
	  transform: rotateX(-90deg) translateZ(23px);
	}

	.cube6 .right {
	  transform: rotateY(90deg) translateZ(169px);
	}
	.cube6 .left {
	  transform: rotateY(-90deg) translateZ(80px);
	}

	.cube6 .front {
	  transform: rotateX(0deg) translateZ(80px);
	}
	.cube6 .back {
	  transform: rotateX(-180deg) translateZ(80px);
	}

	.cube8 .top, .cube8 .bottom , .cube8 .front, .cube8 .back{
		width: 250px;
	}
	.cube8 .right, .cube8 .left {
		width: 167px;
	}

	.cube8 .top {
	  transform: rotateX(90deg) translateZ(70px);
	}
	.cube8 .bottom {
	  transform: rotateX(-90deg) translateZ(-21px);
	}

	.cube8 .right {
	  transform: rotateY(90deg) translateZ(166px);
	}
	.cube8 .left {
	  transform: rotateY(-90deg) translateZ(83px);
	}

	.cube8 .front {
	  transform: rotateX(0deg) translateZ(83px);
	}
	.cube8 .back {
	  transform: rotateX(-180deg) translateZ(83px);
	}
}