h1 {
  margin-bottom: 1rem;
  padding-top: 3rem;
}


.logo {
  height: 3.5rem;
}

@media (min-width: 768px) {
  .logo {
    margin: 0 1rem;
  }
}

.main-nav {
    height: 7.5rem;
}

.btn-icon {
  height: 2rem;
  margin-right: .4rem;
}

.website-main-container{
    margin-top: 7.5rem;
}

#home-animation-container {
  height: 100vh;
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
 
}

#payoff-SVG {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-13%, 0%);
  transition-duration: 1s;
  height: 95vh;
  min-width: 100%; 
}


#payoff > h1 {
  transition-duration: 1s;
}

div#payoff-container {
  color: var(--white);
}

#payoff {
  min-height: 275px;
  height: 40vh;
}



@media (min-width: 576px) {
  #payoff {
    min-height: 500px;
    height:50vh;    

  }
  #payoff-SVG {
    transform: translate(0%, 0%);
    min-height: 95vh;
    height:auto;
  }
}

@media (min-width: 992px) {

  #payoff-SVG {
    transform: translate(-15%, 0%);

  }
}



@media (min-width: 1300px) {

  #payoff-SVG {
    transform: translate(0%, 0%);


  }
}




#payoff-container span {
  opacity: 0;
}

span.keyword {
  opacity: 1;
  display: block;
}

span.keyword::after {
  content: '';
  width: 150%;
  -webkit-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  -moz-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
}

.flicker {
  animation: flicker 5s linear reverse infinite;
}

#animated-compass-home {
  animation-iteration-count: infinite;
  animation-name: shake;
  animation-duration: 3s;
  transform-origin: 25% 72%;
}

.fadeinout-1 {
  animation: fadeinout-1 12s ease-in-out infinite;
}

.fadeinout-2 {
  animation: fadeinout-2 12s ease-in-out infinite;
}

#payoffContainer {
}

div#payoff span {
  opacity: 0;
}

div#payoff span.keyword {
  opacity: 1;
  display: block;
}

.keyword::after {
  content: '';
  width: 150%;
  -webkit-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  -moz-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
}

.fadeinout-1 {
  animation: fadeinout-1 12s ease-in-out infinite;
}

.fadeinout-2 {
  animation: fadeinout-2 12s ease-in-out infinite;
}

.parallax-main-contents {
  margin-top: 2.5rem;
}




/* Parallax */
.parallax-content-block {
  width: 100vw;
}

@media (min-width: 768px) {
  .parallax-content-block {
    min-height: 85vh;
  }

}



.fullscreen-svg {
  min-height: 100vh;
  min-width: 100vw;
}