/* LIGHTS */
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:400;
}
.left {
-webkit-animation: left 3s ease-in-out infinite;
animation: left 3s ease-in-out infinite;
background: -webkit-radial-gradient(at bottom left, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
background: radial-gradient(at bottom left, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
.right {
-webkit-animation: right 4.98s ease-in-out alternate infinite;
animation: right 4.98s ease-in-out alternate infinite;
background: -webkit-radial-gradient(at bottom right, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
background: radial-gradient(at bottom right, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}

@-webkit-keyframes left {
from, to {
-webkit-clip-path: polygon(20% 0, 5% 100%, 0 100%, 0 95%, 0 0);
clip-path: polygon(20% 0, 5% 100%, 0 100%, 0 95%, 0 0);
}
50% {
-webkit-clip-path: polygon(100% 0, 5% 100%, 0 100%, 0 95%, 80% 0);
clip-path: polygon(100% 0, 5% 100%, 0 100%, 0 95%, 80% 0);
}
}
@keyframes left {
from, to {
-webkit-clip-path: polygon(20% 0, 5% 100%, 0 100%, 0 95%, 0 0);
clip-path: polygon(20% 0, 5% 100%, 0 100%, 0 95%, 0 0);
}
50% {
-webkit-clip-path: polygon(100% 0, 5% 100%, 0 100%, 0 95%, 80% 0);
clip-path: polygon(100% 0, 5% 100%, 0 100%, 0 95%, 80% 0);
}
}
@-webkit-keyframes right {
from, to {
-webkit-clip-path: polygon(100% 0, 100% 95%, 100% 100%, 95% 100%, 80% 0);
clip-path: polygon(100% 0, 100% 95%, 100% 100%, 95% 100%, 80% 0);
}
50% {
-webkit-clip-path: polygon(20% 0, 100% 95%, 100% 100%, 95% 100%, 0 0);
clip-path: polygon(20% 0, 100% 95%, 100% 100%, 95% 100%, 0 0);
}
}
@keyframes right {
from, to {
-webkit-clip-path: polygon(100% 0, 100% 95%, 100% 100%, 95% 100%, 80% 0);
clip-path: polygon(100% 0, 100% 95%, 100% 100%, 95% 100%, 80% 0);
}
50% {
-webkit-clip-path: polygon(20% 0, 100% 95%, 100% 100%, 95% 100%, 0 0);
clip-path: polygon(20% 0, 100% 95%, 100% 100%, 95% 100%, 0 0);
}
}
.light{
  position: relative;
  top: calc(0% - 100px);
  margin-left:50%;
  width: 0px;
  height: 0px;
  box-shadow: 0 0 180px 80px #fff;
}


@keyframes light {
  0% {
    transform: translateX(-310px);
  }
  50% {
    transform: translateX(310px);
  }
  100% {
    transform: translateX(-310px);
  }
}

@keyframes shadow-perspective {
  0% {
    perspective-origin: 0% 0%;
    transform: translateX(176px);
  }
  50% {
    perspective-origin: 100% 0%;
    transform: translateX(-176px);
  }
  100% {
    perspective-origin: 0% 0%;
    transform: translateX(176px);
  }
}