.wrapper {
  perspective: 2000px;
  perspective-origin: 50% 30vh;
  position: relative;
  overflow: hidden;
  /*width: 100vw;*/
  height: 100vh;
}

.cube {
  transform: rotateY(0deg) translateX(0vw) translatez(0vw);
  position: relative;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}

.cube div {
  font-size: 5em;
  font-family: 'Fira Sans', sans-serif;
  color: #fff;
  text-shadow: 0px 1px 5px rgba(10,10,10,0.85);
  letter-spacing: 2px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(200, 200, 200, 0.6);
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.nav1 {
  background: red;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(225,225,225,0.3);
  font-size: 3rem;
  font-family: arial;
  cursor: pointer;
  z-index: 999;
  height: 100vh;
  width: 90px;
  &:hover {
    color: rgba(225,225,225,0.6);  
  }
}  
  
.prev {
  background: linear-gradient(to right, rgba(10,10,10,0.35), rgba(10,10,10,0.01));
  &:hover {
    background: linear-gradient(to right, rgba(10,10,10,0.65), rgba(10,10,10,0.01));  
  }
} 
 
.next {
  right: 0;
  background: linear-gradient(to left, rgba(10,10,10,0.35), rgba(10,10,10,0.01));
  &:hover {
    background: linear-gradient(to left, rgba(10,10,10,0.65), rgba(10,10,10,0.01));  
  }
}  

.back {
  transform: translateZ(-100vw) rotateY(180deg);
  background: url("../images/17.jpg");
  background-size: cover;
}

.right {
  transform: rotateY(-270deg) translateX(100vw);
  transform-origin: top right;
  background: url("../images/7.jpg");
  background-size: cover;
}

.left {
  transform: rotateY(270deg) translateX(-100vw);
  transform-origin: center left;
  background: url("../images/17.jpg");
  background-size: cover;
}

.front {
  transform: translateZ(0);
  background: url("../images/7.jpg");
  background-size: cover;
}

label {
  font-family: 'Fira Sans', sans-serif;
  color: #fff;
  text-shadow: 0px 1px 5px rgba(10,10,10,1);
  letter-spacing: 2px;
  position: fixed;
  z-index: 999;
  color: rgba(255,255,255,0.8);
  bottom: 5px;
  left: 50%;
  transform: translate(-50%);
}

 @media only screen and (max-width: 600px){
 
 .wrapper {
  perspective: 2000px;
  perspective-origin: 50% 30vh;
  position: relative;
  overflow: hidden;
  /*width: 100vw;*/
  height: 50vh;
  }
  .cube div{
    height: 50vh;
  }
  .nav1{
    height: 50vh;
  }

  }