.appmockup-outside-container {
  position: relative;
}
.appmockup-grid-container {
  position: relative;
  padding: 0;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  border: none;
  outline: none;
}
.appmockup-grid {
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.appmockup-grid:hover{
  -webkit-transform: rotateX(0deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateZ(0deg);
}

.appmockup-grid li {
  cursor: pointer;
  float: left;
  margin: 20px;
  list-style-type: none;
  /*Hide the lighting gradient from the front face*/
  background-size: 0, cover;
  /*Preserve 3D style for children(pseudo elements)*/
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}
.appmockup-grid li:hover {
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
}

/*Left and Bottom Sides*/
.appmockup-grid li:before,
.appmockup-grid li:after {
  content: '';
  position: absolute;
  /*100% height and width*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-size: cover;
}

/*Left Side*/
.appmockup-grid li.l2r:before {
  -webkit-transform-origin: center right;
  transform-origin: center right;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  /*Reducing the width of the left side for a flat feel*/
  width: 5px;
  left: auto;
  right: 0;
  background-position: right center;
}


/*Bottom Side*/
.appmockup-grid li.l2r:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  /*Reducing the height*/
  height: 5px;
  top: auto;
  bottom: 0;
  /*Background fix - start the background from the bottom*/
  background-position: bottom center;
}


/*Left Side*/
.appmockup-grid li.r2l:before {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  width: 5px;
}

/*Bottom Side*/
.appmockup-grid li.r2l:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  /*Reducing the height*/
  height: 5px;
  top: auto;
  bottom: 0;
  /*Background fix - start the background from the bottom*/
  background-position: bottom center;
}



.appmockup-shadow {
  position: absolute;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.4);
  /*Pushing down the shadow to give an elevated feel*/
  -webkit-transform: translateZ(-50px);
  transform: translateZ(-50px);
}