FarmBot/Farmbot-Web-App

.perspective-container {
  margin-top: 5rem;
  perspective: 1500px;
}

.laptop {
  width: 80%;
  margin-left: 0px;
  transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg);
  transform-style: preserve-3d;
  transition-duration: 6s;
}

@media only screen and (max-width: 600px) {
  .laptop,
  .laptop:hover {
    transform: rotateX(6deg) rotateY(30deg) rotateZ(-6deg) scale3D(.4, .4, .4) translateX(-75%) !important;
    margin-top: -60%;
    margin-bottom: -80%;
  }
  span.laptop-shine {
    opacity: 0;
  }
}

.laptop:hover {
  transform: rotateX(6deg) rotateY(25deg) rotateZ(-5deg) translateY(-5px) scale3D(1.03, 1.03, 1.03);
  transform-style: preserve-3d;
}

.laptop-screen {
  padding: 13px 10px 20px;
  width: 100%;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), -16px 20px 40px 0px rgba(0, 0, 0, .15);
  border-left: 2px solid #ddd;
}

.laptop-screen video {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 2px #eee;
}

span.laptop-shine {
  display: none;
  position: absolute;
  top: 10px;
  left: 12px;
  bottom: 200px;
  right: 160px;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 250, .3) 77%, rgba(255, 255, 255, 0) 90%);
  transition-duration: 6s;
}

.laptop:hover span.laptop-shine {
  opacity: 0;
}

.laptop-keyboard {
  border-left: 1px solid #ddd;
  border-top: 2px solid #eee;
  border-bottom: 12px solid #eee;
  border-right: 21px solid white;
  padding-left: 10px;
  padding-top: 15px;
  border-radius: 30px;
  margin-top: -15px;
  width: 100%;
  height: 220px;
  background: white;
  transform: perspective(1500px) rotateX(70deg);
  transform-origin: 50% 0;
  box-shadow: -20px 30px 40px 0px rgba(0, 0, 0, .1);
}

.laptop-keys {
  background: linear-gradient(45deg, #cfd7e1, #dce3eb);
  width: 92%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
}

.laptop-trackpad {
  background: linear-gradient(45deg, #cfd7e1, #dce3eb);
  width: 200px;
  height: 70px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
}