body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

#bg{
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(to bottom, #FFFFFF, #85adad); 
  width: 100%;
  height: 100%;  
}
.wrapper{

  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  /* background: red; */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.spinner{
  position: absolute;
  width: 500px;
  height: 500px;
  top: -50%;
  left: -50%;
 /*  background: blue;
  opacity: 0.3; */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
    perspective: 1700px;
	perspective-origin: 50% 50%;
  -webkit-perspective: 1700px;
  -webkit-perspective-origin: 50% 50%;
}

.phoneContainer{
  position: absolute;
  width: 145px;
  height: 293px;
  left: 50%;
  top: 50%;
 /* transform: translateY(-100%);  */
  transform-style: preserve-3d;
 /*  -webkit-transform: translateY(-100%);  */
  -webkit-transform-style: preserve-3d;
}
.phone{
  position: absolute;
  width: 145px;
  height: 293px;
  top: -180%;
  left: -50%;
  transform-style: preserve-3d;
  transform-origin: center center;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: center center;
}

.phoneBack{
  /* background-color: #e6fff2; */
  position: absolute;
  width: 145px;
  height: 293px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(to bottom, #fdf9b3, #ffd9b3); 
}
.phoneSideL{
  background-color: #ffb6c1;
  position: absolute;
  left: -21px;
  width: 21px;
  height: 293px;
  transform: rotateY(-90deg);
  transform-origin: right center;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-90deg);
  -webkit-transform-origin: right center;
  -webkit-backface-visibility: hidden;
}
.phoneSideR{
  background-color: #ffb6c1;
  position: absolute;
  right: -21px;
  width: 21px;
  height: 293px;
  transform: rotateY(90deg);
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-transform: rotateY(90deg);
  -webkit-transform-origin: left center;
  -webkit-backface-visibility: hidden;
}
.phoneTop{
  background-color: #ffb6c1;
  position: absolute;
  top: -21px;
  width: 145px;
  height: 21px;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  backface-visibility: hidden;
  -webkit-transform: rotateX(90deg);
  -webkit-transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
}
.phoneBottom{
  background-color: #ffb6c1;
  position: absolute;
  bottom: -21px;
  width: 145px;
  height: 21px;
  transform: rotateX(-90deg);
  transform-origin: center top;
  backface-visibility: hidden;
  -webkit-transform: rotateX(-90deg);
  -webkit-transform-origin: center top;
  -webkit-backface-visibility: hidden;
}
.phoneFace{
  background: linear-gradient(to top, #e6fff2, #b6fff2); 
  position: absolute;
  width: 145px;
  height: 293px;
  transform: translateZ(-21px);
  backface-visibility: visible;
  -webkit-transform: translateZ(-21px);
  -webkit-backface-visibility: visible;
}