@media only screen and (max-width: 400px){
.banner{
margin-top:50px;
margin-bottom: 50px;
}
.perspective{
  position:relative;
  -webkit-perspective: 350px; /* Safari 4-8  */
  perspective: 300px;
  margin-left: 2%;
  margin-top: 3%;
  width: 96%;
  height: 49vh;
  /* border: 2px solid orange; */
  z-index: 0;
}

.object1{
  position: absolute;
  /* margin-top:-100%; */
  top:8.1%;
  left:3.5%;
  height: 75.1%;
  width: 43.7%;
  /* border: 2px solid orange; */
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(24deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateY(24deg);
  z-index:10;
}
.object2{
  position: absolute;
  /* margin-top:-100%; */
  top:15%;
  left:46.1%;
  height: 60%;
  width: 34.25%;
  /* border: 2px solid orange; */
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(25deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateY(25deg);
  z-index:10;
}
.object3{
  position: absolute;
  /* margin-top:-100%; */
  top:20.1%;
  left:75%;
  height: 50%;
  width: 27.5%;
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(24deg); /* Safari 3-8  */
  /* border: 2px solid orange; */
  transform-style: preserve-3d;
  transform: rotateY(24deg);
  z-index:10;
}

.frame{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
}

@media only screen and (min-width: 401px){
.banner{
margin-top:50px;
margin-bottom: 50px;
}
.perspective{
  position:relative;
  -webkit-perspective: 1000px; /* Safari 4-8  */
  perspective: 1000px;
  margin-left: 2%;
  margin-top: 3%;
  width: 96%;
  height: 49vh;
  /* border: 2px solid orange; */
  z-index: 0;
}

.object1{
  position: absolute;
  /* margin-top:-100%; */
  top:8.1%;
  left:3.5%;
  height: 75.1%;
  width: 43.7%;
  /* border: 2px solid orange; */
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(24deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateY(24deg);
  z-index:10;
}
.object2{
  position: absolute;
  /* margin-top:-100%; */
  top:15%;
  left:46.1%;
  height: 60%;
  width: 34.25%;
  /* border: 2px solid orange; */
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(25deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateY(25deg);
  z-index:10;
}
.object3{
  position: absolute;
  /* margin-top:-100%; */
  top:20.1%;
  left:75%;
  height: 50%;
  width: 27.5%;
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */    
    -webkit-transform: rotateY(24deg); /* Safari 3-8  */
  /* border: 2px solid orange; */
  transform-style: preserve-3d;
  transform: rotateY(24deg);
  z-index:10;
}

.frame{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
}

.fade{
  animation: test 1s forwards;
}
@keyframes test{
  from {opacity:.2;}
  to {opacity:1;}
}