@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");

body{
  background:#111111;
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/41114/plan1.png');
  background-size:cover;
}

.frame{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/41114/plan1.png');
  border-radius:3px;
  box-shadow:0 0 50px black;
  height:698px;
  left:50%;
  margin-bottom:300px;
  overflow:hidden;
  position:relative;
  top:100px;
  transform:translateX(-50%);
  width:550px;
}


.heading {
  font-size:48px;
  color:white;
  position:absolute;
  z-index:2;
  opacity: 0.9;
  top:15%;
  left:37%;
  font-family: "Poppins";
}

.ex span {
    opacity: 0;
    transition: opacity 1300ms
}

.ex span:nth-child(1)  { transition-delay:  200ms }
.ex span:nth-child(2)  { transition-delay: 1200ms }
.ex span:nth-child(3)  { transition-delay:  800ms }
.ex span:nth-child(4)  { transition-delay:  300ms }
.ex span:nth-child(5)  { transition-delay:  700ms }
.ex span:nth-child(6)  { transition-delay:  600ms }
.ex span:nth-child(7)  { transition-delay:  400ms }
.ex span:nth-child(8)  { transition-delay:  900ms }
.ex span:nth-child(9)  { transition-delay:  700ms }
.ex span:nth-child(10) { transition-delay:   650ms }
.ex span:nth-child(11) { transition-delay:   550ms }
.ex span:nth-child(12) { transition-delay:   950ms }
.ex span:nth-child(13) { transition-delay:   150ms }
.ex span:nth-child(14) { transition-delay:   1050ms }
.ex span:nth-child(15) { transition-delay:   250ms }
.ex span:nth-child(16) { transition-delay:   120ms }
/*.ex span:nth-child(20) { transition-delay:   500ms }
.ex span:nth-child(21) { transition-delay:   2000ms }
.ex span:nth-child(22) { transition-delay:   1950ms }
.ex span:nth-child(23) { transition-delay:   1650ms }
.ex span:nth-child(24) { transition-delay:   1750ms }
.ex span:nth-child(25) { transition-delay:   1650ms }
.ex span:nth-child(26) { transition-delay:   1750ms }
.ex span:nth-child(27) { transition-delay:   1350ms }
.ex span:nth-child(28) { transition-delay:   1650ms }
.ex span:nth-child(29) { transition-delay:   1300ms }
.ex span:nth-child(30) { transition-delay:   1650ms }
.ex span:nth-child(31) { transition-delay:   1450ms }
.ex span:nth-child(32) { transition-delay:   900ms }
.ex span:nth-child(33) { transition-delay:   1150ms }
.ex span:nth-child(34) { transition-delay:   1050ms }
.ex span:nth-child(35) { transition-delay:   1850ms }
.ex span:nth-child(36) { transition-delay:   1650ms }*/

.ex:hover span {
    opacity: 1;
}


@keyframes slideUp {
  0% {
    transform: translateY(500px);
  }
  100% {
    transform: translateY(0px);
  }
}



img{
  position:absolute;
  transform-origin:50%;
  width:100%;
  transition:2s ease;
}

.frame:hover .pic1{
    transform:scale(1.2);
    -webkit-filter:blur(4px);
  }
  .frame:hover .pic2{
    transform:scale(1.4);
    -webkit-filter:blur(2px);
  }
  .frame:hover .pic3{
    transform:scale(1.6);
    -webkit-filter:blur(1px);
  }
  .frame:hover .pic4{
    transform:scale(1.8);
  }
  .frame:hover .pic5{
    transform:scale(2);
  }
  .frame:hover .mist{
    transform:translateX(-100%);
  }
  .frame:hover .mist2{
    transform:translateX(100%);
  }

.mist{
  height:200px;
  position:absolute;
  top:500px;
  width:2000px;
  -webkit-filter:blur(2px);
  transition:60s linear;
}

.mist2{
  height:200px;
  position:absolute;
  top:300px;
  left:-100%;
  width:2000px;
  -webkit-filter:blur(2px);
  transition:60s linear;
}

.btn {
  left:49%;
  top:85%;
  position:absolute;
  border:2px solid black;
  border-radius:4px;
  font-weight:bold;
  font-size:16px;
  padding:8px;
  text-decoration:none;
  color:black;
  font-family:"Poppins";
}

.btn:hover {
  transform: scale(1.2);
  transition: .25s ease;
}