@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@700&display=swap");
:root {
  --white: #FFFFFF;
  --blue:#302F63;
  --red: #EA504C;
  --cyan:#68C3CD;
  --yellow: #FFC952;
}

@-webkit-keyframes shrink {
  0% {
    transform: scale3d(1, 1, 1);
  }
  65% {
    transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    transform: scale3d(0, 0, 0);
  }
}

@keyframes shrink {
  0% {
    transform: scale3d(1, 1, 1);
  }
  65% {
    transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    transform: scale3d(0, 0, 0);
  }
}
@-webkit-keyframes bounce {
  to {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes bounce {
  to {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@-webkit-keyframes ballOpacity {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ballOpacity {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes impactOpacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes impactOpacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes smallWave {
  to {
    transform: scale(2, 2);
    opacity: 0;
    border-width: 0;
  }
}
@keyframes smallWave {
  to {
    transform: scale(2, 2);
    opacity: 0;
    border-width: 0;
  }
}
@-webkit-keyframes underlineWave {
  to {
    background-position-x: 300px;
  }
}
@keyframes underlineWave {
  to {
    background-position-x: 300px;
  }
}
body {
  margin: 0;
  font-family: "Mulish", sans-serif;
}

#mockbackground {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#loader {
  width: 100%;
  height: 100vh;
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  /*Shrinking for mobile*/
}
#loader.load #loader_anchor {
  transform: translate3d(0, -15vh, 0);
}
#loader.unload #loader_scene.show #skimming, #loader.unload #loader_scene.show h3 {
  opacity: 0;
}
#loader.unload #loader_anchor {
  transform: translate3d(0, 100vh, 0);
}
#loader #loader_anchor {
  transform: translate3d(0, 100vh, 0);
  transition: transform 1.5s cubic-bezier(0.46, 0.12, 0.36, 0.95);
  will-change: transform;
}
#loader #loader_scene {
  width: 100%;
  height: 115vh;
  background: var(--cyan);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
}
#loader #loader_scene.animate #skimming {
  -webkit-animation-name: shrink;
          animation-name: shrink;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  will-change: transform, opacity;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
#loader #loader_scene.animate #skimming .ball_anchor {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  will-change: transform, opacity;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
#loader #loader_scene.animate #skimming .ball_anchor:nth-of-type(2), #loader #loader_scene.animate #skimming .ball_anchor:nth-of-type(2) > img {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#loader #loader_scene.animate #skimming .ball_anchor:nth-of-type(3), #loader #loader_scene.animate #skimming .ball_anchor:nth-of-type(3) > img {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
#loader #loader_scene.animate #skimming .ball_anchor img {
  -webkit-animation-name: ballOpacity;
          animation-name: ballOpacity;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  will-change: transform, opacity;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
#loader #loader_scene.animate #skimming .impact {
  -webkit-animation-name: impactOpacity;
          animation-name: impactOpacity;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0, 0.77, 1, 0.27);
          animation-timing-function: cubic-bezier(0, 0.77, 1, 0.27);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
#loader #loader_scene.animate #skimming .impact:nth-of-type(2) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
#loader #loader_scene.show #skimming, #loader #loader_scene.show h3, #loader #loader_scene.show #ladder {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
#loader #loader_scene #ladder {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 25vw;
  top: 50vh;
  transition: opacity 1s cubic-bezier(0, 0.77, 0.39, 0.98);
  opacity: 0;
}
#loader #loader_scene #skimming {
  transition: opacity 0.3s cubic-bezier(0, 0.63, 0.26, 0.99), transform 0.5s cubic-bezier(0, 0.63, 0.26, 0.99);
  opacity: 0;
  transform: translate3d(0px, 100px, 0px);
  transform-origin: right;
  display: flex;
}
#loader #loader_scene #skimming .ball_anchor {
  position: relative;
  width: 240px;
  height: 100%;
  transform: rotate3d(0, 0, 1, 0deg);
}
#loader #loader_scene #skimming .ball_anchor:not(:first-of-type) {
  margin-left: -80px;
}
#loader #loader_scene #skimming .ball_anchor:nth-of-type(2) img {
  transform: rotate(180deg);
}
#loader #loader_scene #skimming .ball_anchor img {
  opacity: 0;
  width: 80px;
  height: 80px;
}
#loader #loader_scene #skimming .impact {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 26.6666666667px;
  opacity: 0;
}
#loader #loader_scene #skimming .impact:first-of-type {
  left: 160px;
}
#loader #loader_scene #skimming .impact:last-of-type {
  left: 320px;
}
#loader #loader_scene #skimming .impact span {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10em;
  border-left: solid 8px var(--white);
  border-right: solid 8px var(--white);
  transform: scale(0, 0);
  opacity: 1;
  -webkit-animation-name: smallWave;
          animation-name: smallWave;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
#loader #loader_scene #skimming .impact span:nth-of-type(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
#loader #loader_scene #skimming .impact span:nth-of-type(3) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
#loader #loader_scene h3 {
  margin: 50px 0px;
  transition: opacity 1s cubic-bezier(0, 0.77, 0.39, 0.98), transform 1s cubic-bezier(0, 0.77, 0.39, 0.98);
  color: var(--blue);
  opacity: 0;
  transform: translate3d(0, 100px, 0);
}
#loader #loader_scene h3::after {
  content: "";
  width: 100%;
  height: 6px;
  display: block;
  margin-top: 8px;
  background-image: url(../assets/curve.svg);
  background-repeat: repeat-x;
  -webkit-animation-name: underlineWave;
          animation-name: underlineWave;
  will-change: transform, opacity;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
#loader .waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}
#loader .parallax > use {
  -webkit-animation: move-forever 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
          animation: move-forever 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
#loader .parallax > use:nth-child(1) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
#loader .parallax > use:nth-child(2) {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
#loader .parallax > use:nth-child(3) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
#loader .parallax > use:nth-child(4) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  -webkit-animation-duration: -1s;
          animation-duration: -1s;
}
@-webkit-keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
@media (max-width: 768px) {
  #loader .waves {
    height: 40px;
    min-height: 40px;
  }
  #loader .content {
    height: 30vh;
  }
  #loader h1 {
    font-size: 24px;
  }
}/*# sourceMappingURL=sheet.css.map */