.wrapper-1 {
  margin-top: 0;
  perspective: 1000px;  
}
.cub {
  position: relative;
  margin: auto;  
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
  animation: rotate 12s infinite linear;  
}
.cub-1 {
  position: absolute;  
  height: 100%;
  width: 100%;  
  border: solid 1px #FF8000;   
}
.size1 {
  transform: translateZ(50px);
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size2 {
  transform: translateZ(-50px) rotateY(180deg);
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size3 {
  transform: rotateY(-270deg) translateX(50px);
  transform-origin: top right;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size4 {
  transform: rotateY(270deg) translateX(-50px);
  transform-origin: center left;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size5 {
  transform: rotateX(-270deg) translateY(-50px);
  transform-origin: top center;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size6 {
  transform: rotateX(270deg) translateY(50px);
  transform-origin: bottom center;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.cub:hover{
animation-play-state: paused;
}
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }  
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}


@media (max-width: 767px) {
.wrapper-1 {
  perspective: 1000px;  
}
.cub {
  position: relative;
  margin-bottom: 20px;
  margin: auto;  
  height: 50px;
  width: 50px;
  transform-style: preserve-3d;
  animation: rotate 12s infinite linear;  
}
.cub-1 {
  position: absolute;  
  height: 100%;
  width: 100%;  
  border: solid 1px #FF8000;   
}
.size1 {
  transform: translateZ(25px);
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size2 {
  transform: translateZ(-25px) rotateY(180deg);
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size3 {
  transform: rotateY(-270deg) translateX(25px);
  transform-origin: top right;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size4 {
  transform: rotateY(270deg) translateX(-25px);
  transform-origin: center left;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size5 {
  transform: rotateX(-270deg) translateY(-25px);
  transform-origin: top center;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
.size6 {
  transform: rotateX(270deg) translateY(25px);
  transform-origin: bottom center;
  background: rgba(98,98,98,0.7) url(img/sss.jpg) no-repeat;
  background-blend-mode: color;
}
}
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }  
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.service-phon {
    font-size: 3em;
    color: #FF8000;
    text-shadow: 1px 1px 1px #000;
    margin-top: 40px;
    margin-bottom: -40px;
}
.service-phon-2 {
    font-size: 3em;
    color: #FF8000;
    text-shadow: 1px 1px 1px #000;
    margin-top: 40px;
}