/* --------------------------------

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

/* --------------------------------

Main Components

-------------------------------- */
.cd-background-wrapper {
  background-color: #001426;
  position: relative;
  overflow: hidden;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  height: 100vh;
}

.cd-floating-background {
  position: relative;
  top: 0;
  left: 50%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateX(-50%) translateZ(0);
  -ms-transform: translateX(-50%) translateZ(0);
  transform: translateX(-50%) translateZ(0);
}
.cd-background-wrapper .position-bottom {
    -webkit-transform: translateZ(250px);
    transform: translateZ(250px);
    bottom: 50px;
}
.cd-floating-background.is-absolute {
  position: absolute;
}
.cd-floating-background img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* fixes a Firefox bug - images not correctly rendered*/
  background-color: rgba(255, 255, 255, 0.01);
}
.no-preserve-3d .cd-floating-background {
  /* we target browsers that don't support preserve-3d and show just a standard image - no effect visible */
  position: relative;
}

@keyframes background {
    0% {
        transform: rotateY(0);
    }
    25% {
        transform: rotateY(-8deg);
    }
    75% {
        transform: rotateY(5deg);
    }
    100% {
        transform: rotateY(0);
    }
}
@-webkit-keyframes background {
    0% {
        -webkit-transform: rotateY(0);
    }
    25% {
        -webkit-transform: rotateY(-8deg);
    }
    75% {
        -webkit-transform: rotateY(5deg);
    }
    100% {
        -webkit-transform: rotateY(0);
    }
}
@keyframes tornado {
    0% {
        transform: translateX(0) translateZ(100px);
    }
    35% {
        transform: translateX(10px) rotateZ(1deg) translateZ(100px) scale(1.05);
    }
    70% {
        transform: translateX(-5px) rotateZ(-2deg) translateZ(100px) scale(0.98);
    }
    100% {
        transform: translateX(0) translateZ(100px);
    }
}
@-webkit-keyframes tornado {
    0% {
        -webkit-transform: translateX(0) translateZ(100px);
    }
    35% {
        -webkit-transform: translateX(10px) rotateZ(1deg) translateZ(100px) scale(1.05);
    }
    70% {
        -webkit-transform: translateX(-5px) rotateZ(-2deg) translateZ(100px) scale(0.98);
    }
    100% {
        -webkit-transform: translateX(0) translateZ(100px);
    }
}
@keyframes sharks {
    0% {
        transform: translateX(0) translateZ(200px);
    }
    20% {
        transform: translateX(-30px) translateY(10px) rotateZ(1deg) rotateY(5deg) translateZ(200px);
    }
    40% {
        transform: translateX(25px) translateY(15px) translateZ(200px) scale(1.03);
    }
    60% {
        transform: translateX(15px) translateY(0) rotateZ(-2deg) translateZ(200px);
    }
    80% {
        transform: translateX(-10px) translateY(-10px) translateZ(200px);
    }
    100% {
        transform: translateX(0) translateZ(200px);
    }
}
@-webkit-keyframes sharks {
    0% {
        -webkit-transform: translateX(0) translateZ(200px);
    }
    20% {
        -webkit-transform: translateX(-30px) translateY(10px) rotateZ(1deg) rotateY(5deg) translateZ(200px);
    }
    40% {
        -webkit-transform: translateX(25px) translateY(15px) translateZ(200px) scale(1.03);
    }
    60% {
        -webkit-transform: translateX(15px) translateY(0) rotateZ(-2deg) translateZ(200px);
    }
    80% {
        -webkit-transform: translateX(-10px) translateY(-10px) translateZ(200px);
    }
    100% {
        -webkit-transform: translateX(0) translateZ(200px);
    }
}
.cd-floating-background img:nth-child(1) {
    animation: background 7s linear infinite;
    -webkit-animation: background 7s linear infinite;
}
.cd-floating-background img:nth-child(2) {
    animation: tornado 6s linear infinite;
    -webkit-animation: tornado 6s linear infinite;
}
.cd-floating-background img:nth-child(3) {
    animation: sharks 6s linear infinite;
    -webkit-animation: sharks 6s linear infinite;
}
.cd-background-wrapper h1 {
    font-size: 40px;
}