body {
	background-image: url(../hand-hg.png) ;
	background-size: cover;
	height: 100%;
	width: 100%;
	background-position:;
  background-color:;
	overflow: hidden;
}


#box-over{
  width: 40%;
  height: 60%;
  margin-top: 5%;
	margin-left: 18%;
	display: flex;
  align-items: center;
  justify-content: center;
	background-color: ;
	
  position: absolute;
	
  
}


.box3d {
  width: 100%;
  height: 100%;
  position:relative;
	margin-right:auto;
	margin-left:auto;
	transform: scale(0.4);
  padding-left:auto;
	  padding-top:auto;
  -webkit-transform-style: preserve-3d;
	background: ;
}

@media only screen and (min-height: 270px) {
	.box3d{
		transform: scale(0.7);
		}
	}

@media only screen and (min-height: 160px) and (max-height: 209px){
.box3d{
		transform: scale(0.4);
	background: ;
		}
	#box-over{
  margin-top: 3%;
	margin-left: 7%;
}
	}


@media only screen and (min-height: 210px) and (max-height: 249px){
.box3d{
		transform: scale(0.45);
	background: ;
		}
	#box-over{
  margin-top: 4%;
	margin-left: 9%;
}
	}
@media only screen and (min-height: 250px) and (max-height: 299px){
.box3d{
		transform: scale(0.54);
	background: ;
		}
	#box-over{
  margin-top: 6%;
	margin-left: 11%;
}
	}


@media only screen and (min-height: 300px) and (max-height: 329px){
.box3d{
		transform: scale(0.63);
	background: ;
		}
	#box-over{
  margin-top: 8%;
	margin-left: 12%;
}
	}


@media only screen and (min-height: 330px) and (max-height: 350px){
.box3d{
		transform: scale(0.7);
	background: ;
		}
	#box-over{
  margin-top: 9%;
	margin-left: 14%;
}
	}
@media only screen and (min-height: 351px) and (max-height: 409px){
.box3d{
		transform: scale(0.75);
	background: ;
		}
	#box-over{
  margin-top: 11%;
	margin-left: 14%;
}
	}


@media only screen and (min-height: 410px) and (max-height: 420px){
.box3d{
		transform: scale(0.87);
	background: ;
		}
	#box-over{
  margin-top: 13%;
	margin-left: 17%;
}
	}
@media only screen and (min-height: 421px) and (max-height: 450px){
.box3d{
		transform: scale(0.87);
	background: ;
		}
	#box-over{
  margin-top: 13%;
	margin-left: 17%;
}
	}

@media only screen and (min-height: 451px) and (max-height: 529px){
.box3d{
		transform: scale(1);
	background: ;
		}
	#box-over{
  margin-top: 15%;
	margin-left: 21%;
}
	}


@media only screen and (min-height: 530px) and (max-height: 620px){
.box3d{
		transform: scale(1.1);
	background: ;
		}
	#box-over{
  margin-top: 17%;
	margin-left: 21%;
}
	}




.box3d div {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
	
  opacity: 1;
  transform-origin: 50% 50% -100px;
}

.p1 {
  background-image: url(../ba-2.png);
	background-size: cover;
  transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  animation: spin1 10s infinite linear;
}

.p2 {
  background-image: url(../ba-2.png);
	background-size: cover;
  animation: spin2 10s infinite linear;
}

.p3 {
  
  animation: spin3 10s infinite linear;
}

.p4 {
   background-image: url(../b-8.png);
	background-size: cover;
  animation: spin4 10s infinite linear;
}

.p5 {
  background-image: url(../ba-1.png);
	background-size: cover;
  animation: spin5 10s infinite linear;
}

.p6 {
  background-image: url(../ba-1.png);
	background-size: cover;
  animation: spin6 10s infinite linear;
}

/* for Safari and Chrome */
/* for IE10 and Firefox */
@keyframes spin1 {
  to {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@keyframes spin2 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@keyframes spin3 {
  0% {
    transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@keyframes spin4 {
  0% {
    transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@keyframes spin5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@keyframes spin6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}