section#home-banner {
  background: #006687;
  padding: 30px 0 50px;
  position: relative;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(280px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes earthZoom {
  0% {
    opacity: 0;
    max-width: 70%;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    max-width: 80%;
  }
}

@keyframes earthShadowZoom {
  0% {
    opacity: 0;
    width: 438px;
    height: 438px;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    width: 500px;
    height: 500px;
  }
}


#home-banner h2 {
  text-shadow: 0 2px 5px #000;
}

#home-cta {
  position: relative;
  background-color: #000d11;
  overflow: hidden;
  height: 310px;
  padding: 20px 0;


  .cta-text {
    width: 40%;
    color: #fff;
    position: absolute;
    right: 20px;
    z-index: 1;
    opacity: 0;
    transform: translate(280px);
    animation: fadeInLeft 1.5s ease forwards;

    &.slideleft {
      opacity: 1;
      transform: translateX(0);
    }

    p {
      font-size: 1.2em;
    }


    ul {
      font-size: 1.5em;

      li {
        display: none;
        line-height: 1.6em;
      }
    }
  }

  .home-cta-inner {
    margin: auto;
    position: relative;
    height: 290px;
    pointer-events: none;
  }

  .cta-earth {
    max-width: 80%;
    height: auto;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translate(-25%, -50%);
    opacity: 0;
    animation: earthZoom 4s ease forwards;
  }

  .cta-earth-shadow {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;

    border-radius: 50%;
    background-color: rgba(0, 0, 0);
    transform: translate(2.5%, -49%);
    animation: earthShadowZoom 4s ease forwards;
  }
}





@media (max-width: 767px) {
  #home-cta {
    height: 290px;
  }

  .cta-earth {
    display: none;
  }

  #home-cta .cta-text {
    width: 90%;
    position: absolute;
    opacity: 1;
    transform: translateX(0);
  }

  #home-cta .cta-text ul li {
    display: block;
  }
}


.bg-drk-blue {
  background-color: #00435f;
  color: #fff;

  .btn-link {
    color: #42d9ff;
  }
}
