/* Our wrapper1 */
.wrapper1{
  width: 735px;
  height: 470px;
  position: relative;
  left:50%;
  top:30%;
  transform:translate3d(-50%,-50%,0);
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */
.before1,
.after1 {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
/* Our wrapper1 */
.wrapper1{
  width: 100%;
  height: 470px;
  position: relative;
  left:50%;
  top:30%;
  transform:translate3d(-50%,-50%,0);
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */
.before1,
.after1 {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow: hidden;
}

.img1{

  height:100%;
}
}

.after1{
  background-color:#29B6F6;
}
.before1{
  background-color:#FFA726;
}

.img1{
  height:100%;
}