@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


body {
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

video {
  width:100%;
}

/* canvas {
    /* left: calc(50vw);
    transform: translateX(-50%); */
  } */

.filter {
  position: absolute;
  top: 20vh;
  width: 51vw;
  height: 69vh;
  background-color: #4498A7;
  opacity: 0.2;
  left: 50vw;
  transform: translateX(-50%);
}

.frame {
  position: absolute;
  top: 19vh;
  left: 23.5vw;
  height: 40vw;
}

.textanim {
  position: absolute;
  width: 70vw;
  top: 79vh;
  left: 15vw;
}

.background {
  position: absolute;
  width: 100vw;
  top: 0vh;
  display: grid;
  place-items: center;
}

.lights {
  position: absolute;
  width: 94vw;
  top: 0vh;
  left: 3vw;
}

.header {
  position: absolute;
  width: 34vw;
  top: 90px;
  left: 33vw;
}

.subhead {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}

.bodytext {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: #333333;
}

.position {
  position: absolute;
  display: grid;
  justify-content: center;
  top: 20vh;
  height: 38vw;
  left: 50vw;
  transform: translateX(-50%);
}

.brow {
  position: absolute;
  width: 450px;
  right: 135px;
  top:265px;
  opacity: 0;
  animation-name: turnontext;
  animation-delay:11s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.browbox {
  position: absolute;
  right: 127px;
  top: 263px;
  border-radius: 20px;
  background: #FBFDFF;
  opacity: 0.5;
  padding: 20px;
  width: 440px;
  height: 133px;
  opacity: 0;
  animation-name: turnonbox;
  animation-delay:11s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.blepheroplasty {
  position: absolute;
  width: 330px;
  left: 110px;
  top: 300px;
  opacity: 0;
  animation-name: turnontext;
  animation-delay:12s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.blephbox {
  position: absolute;
  left: 87px;
  top: 297px;
  border-radius: 20px;
  background: #FBFDFF;
  opacity: 0.5;
  padding: 12px;
  width: 345px;
  height: 135px;
  opacity: 0;
  animation-name: turnonbox;
  animation-delay:12s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.nose {
  position: absolute;
  width: 400px;
  right: 115px;
  top: 480px;
  opacity: 0;
  animation-name: turnontext;
  animation-delay:13s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.nosebox {
  position: absolute;
  right: 118px;
  top: 477px;
  border-radius: 20px;
  background: #FBFDFF;
  opacity: 0.5;
  padding: 20px;
  width: 380px;
  height: 133px;
  opacity: 0;
  animation-name: turnonbox;
  animation-delay:13s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.filler {
  position: absolute;
  width: 375px;
  left: 160px;
  top: 500px;
  opacity: 0;
  animation-name: turnontext;
  animation-delay:14s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.fillerbox {
  position: absolute;
  left: 137px;
  top: 498px;
  border-radius: 20px;
  background: #FBFDFF;
  opacity: 0.5;
  padding: 20px;
  width: 375px;
  height: 152px;
  opacity: 0;
  animation-name: turnonbox;
  animation-delay:14s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.chin {
  position: absolute;
  width: 425px;
  right: 135px;
  top: 700px;
  opacity: 0;
  animation-name: turnontext;
  animation-delay:15s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.chinbox {
  position: absolute;
  right: 120px;
  top: 698px;
  border-radius: 20px;
  background: #FBFDFF;
  opacity: 0.5;
  padding: 20px;
  width: 425px;
  height: 155px;
  opacity: 0;
  animation-name: turnonbox;
  animation-delay:15s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.receipt {
  position: absolute;
  left: 100px;
  top: 1120px;
  width: 323px;
  animation-name: receiptup;
  animation-delay: 24s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: receiptup;
  animation-delay: 16s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes turnonbox {

    0% {
      opacity: 0;
    }

    100% {
      opacity: 0.65;
    }
}

@keyframes turnontext {

    0% {
      opacity: 0;
    }

    100% {
      opacity: 100;
    }
}

@keyframes receiptup {
  0% {
    transform: translate(0px, 0px);
  }

  100% {
    transform: translate(0px, -350px);
  }
}