.background-split-vertical {
  background: linear-gradient(0deg, #162b48 50%, #23a5dd 50%);
}
.background-split-vertical-reverse {
  background: linear-gradient(0deg, #23a5dd 50%, #162b48 50%);
}
.absolute-position, .stormcloud, .cloud, .lightning, .boat, .anchor, .bigWaves, .chaos, .calm, .sun, .smallWaves, .campaign-Boat .slide-1, .campaign-Boat .slide-2, .campaign-Boat .slide-3 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.graphic-element, .cloud, .lightning, .boat, .anchor, .bigWaves, .sun, .smallWaves, .campaign-Boat .line-1 .svg-text, .campaign-Boat .line-3 .svg-text, .campaign-Boat .line-5 .svg-text {
  display: block;
  color: transparent;
  background-repeat: no-repeat;
  font-size: 0;
  background-size: 100% 100%;
  object-fit: fill;
}
@keyframes wipe-right-to-nothing-animation {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes birds-animation {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  50% {
    transform: scaleX(1.2) scaleY(0.7);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@keyframes smoke-animation {
  0% {
    transform: rotateZ(-5deg) translateY(0);
  }
  50% {
    transform: rotateZ(5deg) translateY(-3px);
  }
  100% {
    transform: rotateZ(-5deg) translateY(0);
  }
}
@keyframes smoke-below-animation {
  0% {
    transform: rotateZ(5deg) translateY(0);
  }
  50% {
    transform: rotateZ(-5deg) translateY(3px);
  }
  100% {
    transform: rotateZ(5deg) translateY(0);
  }
}
@keyframes size-specific-animation {
  
}
@keyframes boat-calm-animation {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
@keyframes boat-chaos-animation {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes anchor-calm-animation {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}
@keyframes anchor-chaos-animation {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
@keyframes sun-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes smallWaves-animation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(64px);
  }
}
@keyframes smallWaves-animation-superWide {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(144px);
  }
}
@keyframes lightning-animation {
  0% {
    opacity: 0;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  46% {
    opacity: 0.8;
  }
  48% {
    opacity: 0;
  }
  71% {
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0.3;
  }
  78% {
    opacity: 0;
  }
  82% {
    opacity: 0;
  }
  83% {
    opacity: 1;
  }
  86% {
    opacity: 0.8;
  }
  89% {
    opacity: 0;
  }
  93% {
    opacity: 0;
  }
  94% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes boat-timeline-chaos-scene {
  0% {
    width: 100%;
  }
  34% {
    width: 100%;
  }
  45% {
    width: 0;
  }
  90% {
    width: 0;
  }
  91% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes boat-timeline-logo-normal {
  0% {
    width: 0;
    height: 0;
  }
  58% {
    width: 0;
    height: 0%;
  }
  59% {
    width: 0;
    height: 100%;
  }
  75% {
    width: 100%;
  }
  98% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 0%;
  }
}
@keyframes boat-timeline-logo-end-normal {
  0% {
    opacity: 0;
    display: none;
  }
  98% {
    opacity: 0;
    display: block;
  }
  99% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes boat-timeline-logo-1repetition {
  0% {
    width: 0;
    height: 0;
  }
  58% {
    width: 0;
    height: 0%;
  }
  59% {
    width: 0;
    height: 100%;
  }
  75% {
    width: 100%;
    height: 100%;
  }
  98% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes boat-timeline-logo-end-1repetition {
  0% {
    opacity: 0;
    display: none;
  }
  90% {
    opacity: 0;
    display: block;
  }
  91% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes boat-timeline-text-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  19% {
    width: 100%;
  }
  25% {
    width: 0;
  }
  90% {
    width: 0%;
    opacity: 1;
  }
  91% {
    width: 100%;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}
@keyframes boat-timeline-text-1-half-width {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  19% {
    width: 50%;
  }
  25% {
    width: 0;
  }
  90% {
    width: 0%;
    opacity: 1;
  }
  91% {
    width: 50%;
    opacity: 0;
  }
  100% {
    width: 50%;
    opacity: 0;
  }
}
@keyframes boat-timeline-text-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.cloud {
  background-image: url(DisplayAdParts_Cloud.png);
}
.lightning {
  background-image: url(DisplayAdParts_Lightening_Bolt.svg);
  animation: lightning-animation 1s infinite linear;
}
.boat {
  background-image: url(DisplayAdParts_Light_Blue_Boat_Taller.png);
  animation: boat-chaos-animation 3s 7.5 alternate ease-in-out;
  transform-origin: 50% 90%;
}
.boat.boat-dark {
  background-image: url(DisplayAdParts_Dark_Blue_Boat_Taller.png);
  animation: boat-calm-animation 3s infinite alternate ease-in-out;
}
.anchor {
  background-image: url(DisplayAdParts_Light_Blue_Anchor.svg);
  animation: anchor-chaos-animation 3s infinite alternate ease-in-out;
  transform-origin: 50% 5%;
}
.boat-dark .anchor {
  background-image: url(DisplayAdParts_Dark_Blue_Anchor.svg);
  animation: anchor-calm-animation 3s infinite alternate ease-in-out;
}
.bigWaves {
  background-image: url(DisplayAdParts_Big_Waves_Taller.svg);
  animation: size-specific-animation 3s 7.5 linear;
}
.chaos {
  z-index: 23;
  width: 100%;
  height: 100%;
  background-color: #162b48;
  overflow: hidden;
}
.calm {
  background: #23a5dd;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.calm * {
  z-index: 21;
}
.sun {
  background-image: url(DisplayAdParts_Sun.svg);
  animation: sun-animation 8s infinite linear;
}
.smallWaves {
  background-image: url(DisplayAdParts_Small_Waves_Taller.svg);
  animation: smallWaves-animation 5.4s infinite linear;
}
.campaign-Boat .logo {
  background-image: url(CMEGroupLogo_LightBlue.png);
}
.campaign-Boat .cta {
  background-image: url(LearnMoreButtons-LightBlue.svg);
}
.campaign-Boat .logo-screen {
  animation: boat-timeline-logo-normal 7.5s 3 linear forwards;
}
.campaign-Boat .logo-screen.logo-screen-end {
  animation: boat-timeline-logo-end-normal 22.5s 1 linear forwards;
  z-index: 100;
}
.campaign-Boat .chaos {
  animation: boat-timeline-chaos-scene 7.5s 3 linear forwards;
}
.campaign-Boat .slide-1 {
  z-index: 9;
}
.campaign-Boat .slide-2 {
  z-index: 8;
}
.campaign-Boat .slide-3 {
  z-index: 7;
}
.campaign-Boat .line-1, .campaign-Boat .line-2 {
  animation: boat-timeline-text-1 7.5s 3 linear forwards;
}
.campaign-Boat .line-1 .svg-text {
  background-image: url(DoubleLineLeftEllipsis_CityAd-01.png);
}
.campaign-Boat .line-3 .svg-text {
  background-image: url(THROUGH_BOTH_CHAOS.svg);
}
.campaign-Boat .line-5 .svg-text {
  background-image: url(AND_CALM.svg);
}
.campaign-Boat .line-3, .campaign-Boat .line-4 {
  animation: boat-timeline-text-2 7.5s 3 linear forwards;
}
.campaign-Boat .slide-1, .campaign-Boat .slide-2, .campaign-Boat .slide-3 {
  opacity: 0;
  animation: fade-in-animation 0.2s linear 0.2s 1 normal forwards;
}
.campaign-Boat .slide-2, .campaign-Boat .slide-3 {
  opacity: 0;
  animation: fade-in-animation 0.2s linear 1s 1 normal forwards;
}
.campaign-Boat .slide-1, .campaign-Boat .slide-2 {
  display: block;
  width: 100%;
  overflow: hidden;
}
.campaign-Boat .slide-1 .line, .campaign-Boat .slide-2 .line {
  background: #162b48;
  width: 100%;
}