.wrapper{
  perspective:1000px;
width: 162px;
height: 154px;
  margin-top:8px;
  position:absolute; 
z-index:10;
top:110px; left:10px;
}

.front{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
 
}
.root{
  -webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

}
  
.front, .root{
  width: 150px;
  height: 150px;
  backface-visibility: hidden;
 display: block;
 position:absolute;
 left: 3%;
 top: 0%;
  
}

.front{
	-webkit-animation: front-rotation 15s infinite; 
    animation: front-rotation 15s infinite;
	
  }
  
.root{
	-webkit-animation: root-rotation 15s infinite; 
    animation: root-rotation 15s infinite;
	 
  }

  
@keyframes front-rotation{
  from {
	-webkit-transform: rotateY(0deg);  
    transform: rotateY(0deg);
	
  }
  to {
	-webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
	
  }
}
@keyframes root-rotation{
  from {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	
  }
  to {
	-webkit-transform: rotateY(540deg); 
    transform: rotateY(540deg);
	
  }
}

@media screen and (max-width:1200px){
.wrapper{
width: 162px;
height: 154px;
}}

@media screen and (max-width: 768px){
.wrapper {
    width: 121px;
    height: 116px;
    }

.front, .root{
  width: 121px;
 height: 116px;

}}
@media screen and (max-width: 600px){
.wrapper {
    width: 100px;
    height: 100px;
    }

.front, .root{
  width: 100px;
 height: 100px;

}}	
@media screen and (max-width: 500px){
.wrapper {
    width: 70px;
    height: 70px;
    }

.front, .root{
  width: 70px;
 height: 70px;

}}

@media screen and (max-width: 400px){
.wrapper {
    width: 60px;
    height: 60px;
	top:80px; left:10px;
    }

.front, .root{
  width: 60px;
 height: 60px;

}}

@media screen and (max-width: 280px){
.wrapper {
    width: 50px;
    height: 50px;
	top:80px; left:10px;
    }

.front, .root{
  width: 50px;
 height: 50px;

}}