.background-split-vertical, .campaign-Cityscape.size-300x600 {
  background: linear-gradient(0deg, #162b48 50%, #23a5dd 50%);
}
.background-split-vertical-reverse, .campaign-Cityscape.size-300x600 .divider {
  background: linear-gradient(0deg, #23a5dd 50%, #162b48 50%);
}
.absolute-position, .campaign-Cityscape.size-300x600 .divider {
  position: absolute;
  top: 0px;
  left: 0px;
}
.graphic-element {
  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 {
  
}
.campaign-Cityscape.size-300x600 .headline {
  z-index: 11;
}
.campaign-Cityscape.size-300x600 .divider {
  width: 100%;
  height: 10px;
  top: 297px;
  left: 0;
  z-index: 19;
}
.campaign-Cityscape.size-300x600 .slide-1 {
  bottom: 130.5px !important;
  left: 52.7215909091px !important;
}
.campaign-Cityscape.size-300x600 .slide-2 {
  top: 130.5px !important;
  left: 34.7727272727px !important;
}
.campaign-Cityscape.size-300x600 .slide-1 .line, .campaign-Cityscape.size-300x600 .slide-2 .line {
  background: #162b48;
}
.campaign-Cityscape.size-300x600 .slide-1 .line.line-1 .svg-text, .campaign-Cityscape.size-300x600 .slide-2 .line.line-1 .svg-text {
  margin-top: 0 !important;
  height: 39px !important;
  width: 194.5568181818px !important;
  background-image: url(DoubleLineCentered_CityAd-01.png);
}
.campaign-Cityscape.size-300x600 .slide-1 .line.line-3 .svg-text, .campaign-Cityscape.size-300x600 .slide-2 .line.line-3 .svg-text {
  background-color: transparent !important;
  height: 39px !important;
  width: 230.4545454545px !important;
  background-image: url(DoubleLineCentered_CityAd-02.png);
}









@keyframes city-timeline-pan-300x600 {
  0% {
    left: 0;
  }
  58% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes city-timeline-text1-position-300x600 {
  
  0% {
    bottom: 130.5px;
    top: auto;
  }
  31% {
    
    bottom: 130.5px;
    top: auto;
  }
  32% {
    
    bottom: auto;
    top: 428.5px;
  }
  90% {
    bottom: 130.5px;
    top: auto;
  }
  100% {
    bottom: 130.5px;
    top: auto;
  }
}
@keyframes bigWaves-animation-300x600 {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(68px) translateY(0px);
  }
  100% {
    transform: translateX(136px) translateY(0px);
  }
}
@keyframes car-animation-300x600 {
  0% {
    left: 243px;
  }
  42% {
    left: -140px;
  }
  98% {
    left: -140px;
  }
  99% {
    left: 243px;
  }
  100% {
    left: 243px;
  }
}
@keyframes car-below-animation-300x600 {
  0% {
    left: -140px;
  }
  20% {
    left: -140px;
  }
  75% {
    left: 243px;
  }
  76% {
    left: -140px;
  }
  100% {
    left: -140px;
  }
}

.size-300x600 {
  width: 300px;
  height: 600px;
}
.size-300x600.campaign-Cityscape .line-1 .svg-text {
  height: 44px;
  width: 154px;
}
.size-300x600.campaign-Cityscape .line-3 .svg-text {
  height: 44px;
  width: 208px;
}
.size-300x600.campaign-Cityscape .headline {
  top: 0;
  left: 0;
}
.size-300x600.campaign-Cityscape .headline .slide-1 {
  top: auto;
  bottom: 47px;
  left: 27px;
  animation-name: city-timeline-text1-position-300x600 !important;
}
.size-300x600.campaign-Cityscape .headline .slide-2 {
  top: 42px;
  left: 25px;
}
.size-300x600.campaign-Boat .line-1 .svg-text {
  margin-top: 5px;
  height: 50px;
  width: 250px;
}
.size-300x600.campaign-Boat .line-3 .svg-text {
  height: 63px;
  width: 226.118907px;
}
.size-300x600.campaign-Boat .line-5 .svg-text {
  margin-top: 1px;
  height: 30px;
  width: 191.48148px;
}
.size-300x600.campaign-Boat .line-1 {
  padding: 2px 0 5px 0;
}
.size-300x600 .headline {
  top: 34px;
  left: 16px;
  font-size: 20px;
  letter-spacing: 0.14em;
  line-height: 22px;
}
.size-300x600 .logo {
  height: 32.7352297851px;
  width: 220px;
  top: 260px;
  left: 40px;
}
.size-300x600 .cta {
  height: 79.38px;
  width: 140px;
  top: 340px;
  left: 80px;
}
.size-300x600 .stormcloud {
  height: 50px;
  width: 48px;
  top: 215px;
  left: 48px;
}
.size-300x600 .cloud {
  height: 27.8019918969px;
  width: 48px;
  top: 0;
  left: 0;
}
.size-300x600 .lightning {
  height: 24px;
  width: 16.1860465128px;
  top: 24px;
  left: auto;
  right: 3px;
}
.size-300x600 .boat {
  height: 211.068702303px;
  width: 140px;
  top: 230px;
  left: 80px;
}
.size-300x600 .anchor {
  height: 36.2500000003px;
  width: 27px;
  top: 97px;
  left: auto;
  right: 25px;
}
.size-300x600 .bigWaves {
  height: 176.3039014377px;
  width: 1641.3664028781px;
  top: 320px;
  left: -235px;
  z-index: 10;
  animation-name: bigWaves-animation-300x600 !important;
}
.size-300x600 .sun {
  height: 53.9223799446px;
  width: 53.9223799446px;
  top: 215px;
  left: 205px;
}
.size-300x600 .smallWaves {
  height: 73.193181832px;
  width: 960.7954547254px;
  top: 403px;
  left: -235px;
  z-index: 22;
}
.size-300x600 .city {
  height: 215px;
  width: 189.0013586957px;
  top: 89px;
  left: 55.4993206522px;
  background-position-y: 0px;
  animation-name: none !important;
  background-image: url(Dark_Building_Tall.png);
}
.size-300x600 .city.city-below {
  top: auto;
  bottom: 84px;
  background-position-y: 0px;
  background-image: url(Light_Building_Tall.png);
}
.size-300x600 .birds {
  height: 24.0005052738px;
  width: 38px;
  top: 38px;
  left: auto;
  right: 165px;
}
.size-300x600 .city-below .birds {
  top: 154px;
}
.size-300x600 .city-below .birds .bird {
  transform-origin: 50% 10%;
}
.size-300x600 .bird {
  height: 10px;
  width: 14px;
  top: 14px;
  left: 12px;
  z-index: 10;
  transform-origin: 50% 90%;
}
.size-300x600 .bird.bird-2 {
  top: 3px;
  left: 0px;
}
.size-300x600 .bird.bird-3 {
  top: 3px;
  left: 24px;
}
.size-300x600 .smoke {
  display: none;
}
.size-300x600 .car {
  width: 74.6447058824px;
  height: 44px;
  top: 164px;
  left: 243px;
  animation-name: car-animation-300x600;
}
.size-300x600 .city-below .car {
  top: 8px;
  left: 243px;
  animation-name: car-below-animation-300x600;
}