.full-width-content .site-inner > .wrap {
    position: relative;
}

.content {
  z-index:3;
  position: relative;
}

#top-banner-slider-wrap {
    max-height: 798px;
    height: 798px;
  }
  
.top-banner-wrapper {
    max-height: 798px;
    height: 798px;
  }

  .top-banner-delta-teal {
    top: 71%;
    right: 0;
    left:auto;
    transform: rotateY(180deg);
}

.top-banner-image {
  background-size:cover;
}

.top-banner-delta-gold {
    position: absolute;
    bottom: -7px;
    left: 0;
    width:180px;
}

.top-banner-container {
   height:100%;
   max-height:100%;
   padding: 0;
}

@media only screen and (max-width: 1240px) {
  .top-banner-wrapper {
    max-height: 628px;
    height: 628px;
  }
}

@media only screen and (max-width: 1140px) {
  .top-banner-wrapper {
    max-height: 528px;
    height: 528px;
  }
}


@media only screen and (max-width: 960px) {
  .top-banner-wrapper {
    max-height: 468px;
    height: 468px;
  }

  .top-banner-delta-teal svg,
  .top-banner-delta-gold svg {
    width:100%;
  }   

  .top-banner-delta-teal {
    top: 71%;
    right: 0;
    transform: rotateY(180deg);
  }

  .top-banner-delta-gold {
      width:82px;
      bottom: -7px;
      left: 0;
  }

}
@media only screen and (max-width: 800px) {
  .top-banner-wrapper {
    max-height: 560px;
    height: 560px;
  }
}

#home-deltas {
  position: absolute;
  width: 400px;
  height: 589px;
  left:0;
}

#triangle-half {
    position: absolute;
    z-index: 2;
    opacity: 0.9;
    top:100px;
    left:0;
    width:100%;
    height:100%;
    /* width:300px;
    height:589px; */
    background-image: url('../svg/bg-triangle-blue-home.svg');
    background-repeat: no-repeat;
}


#triangle-full {
    position: absolute;
    z-index: 1;
    top:170px;
    left:0;
    width:100%;
    height:100%;
    /* width:400px;
    height:589px; */
    background-image: url('../svg/bg-triangle-teal-home.svg');
    background-repeat: no-repeat;
}

@media only screen and (max-width: 800px) {
  #home-deltas {
    display: none;
  }
}

.min-w-button {
  min-width:12.5em;
}

.animate-container {
    position: relative;
    display:block;
    width:525px;
    height:426px;
    margin-left:100px;
}

@media only screen and (max-width: 1240px) {
  #home-deltas {
    left: -10%;
  }
  .animate-container {
    margin-left:40px;
  }
}

@media only screen and (max-width: 1140px) {
  #home-deltas {
    left: -15%;
  }
  .animate-container {
    margin-left:40px;
    width: 412px;
    height: 314px;
  }
}


/*  #region brave */

#animate-brave #delta-text {
    color:#fff;
    font-size:118px;
    font-weight: 300;
    position: absolute;
    top: 187px;
    left: 142px;  
    width:100%;
	-webkit-animation: brave-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: brave-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

  @keyframes brave-text {
    0% {
      letter-spacing: 1em;
      opacity: 0;
      font-size:0px;
    }

    3.4% {
      opacity: 0.6;
    }

    30% {
      letter-spacing: normal;
      opacity: 1;
    font-size:118px;

    }
  }


  #animate-brave #large-delta {
    position: absolute;
    transform: rotate(0);
    left:0;
    top:89px;

	animation-name: brave-large-delta;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes brave-large-delta {
	0% {
        transform: scale(0) rotate(57deg);
        left:60px;
	}
	20% {
        transform: scale(1) rotate(0deg);
    }
	95% {
        left:0;
	}
}



#animate-brave #small-delta {
    position: absolute;

    left: -43px;
    top:111px;
	animation-name: brave-small-delta;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes brave-small-delta {
	0% {
        transform: scale(0) rotate(57deg);
        left:-100px;
	}
	22% {
        transform: scale(1) rotate(0deg);
    }
	100% {
        left: -43px;
	}
}
/*  #endregion */


/*  #region bold */

#animate-bold #large-delta { 
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    left: 0;
	animation-name: bold-large-delta;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes bold-large-delta {
	0% {
        transform: scale(0) rotate(244deg);
	}
	20% {
        transform: scale(1) rotate(180deg);
        top: 0;
    }
	100% {
        top:-20px;
	}
}

#animate-bold #small-delta {
    position: absolute;
    top: 93px;
    right: 32px;
    left: auto;
    transform: rotate(180deg);
	animation-name: bold-delta-small;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes bold-delta-small {
	0% {
        transform: scale(0) rotate(128deg);
        top:30px;
    }

	22% {
        transform: scale(1) rotate(180deg);
    }
	100% {
        top: 93px;
  
	}
}

#animate-bold #delta-text {
    color:#fff;
    font-size:118px;
    font-weight: 300;
    position: absolute;
    top: 213px;
    left: 159px;
    width:100%;
	-webkit-animation: bold-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: bold-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

  @keyframes bold-text {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    3.4% {
      opacity: 0.6;
    }
    30% {
      opacity: 1;
      transform: scale(1);

    }
  }


/*  #endregion */



/*  #region kind */

#animate-kind #large-delta { 
    transform: rotate(180deg);
    position: absolute;
    top: 0;
    left: 0;
	animation-name: kind-large-delta;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes kind-large-delta {
	0% {
        transform: scale(0) rotate(132deg);
        left:40px;
	}
	20% {
        transform: scale(1) rotate(180deg);
        left:40px;
    }
	100% {
        left:0px;
	}
}

#animate-kind #small-delta {
    position: absolute;
    top: 141px;
    left: -52px;
    transform: rotate(0);
	animation-name: kind-delta-small;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes kind-delta-small {
	0% {
        transform: scale(0) rotate(128deg);
        left: -82px;
    }

	22% {
        transform: scale(1) rotate(0);
        left: -82px;
    }
	100% {
        left: -52px;
  
	}
}

#animate-kind #delta-text {
    color:#fff;
    font-size:118px;
    font-weight: 300;
    position: absolute;
    top: 213px;
    left: 159px;
    width:100%;
	-webkit-animation: kind-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: kind-text 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

  @keyframes kind-text {
    0% {
      letter-spacing: 1em;
      opacity: 0;
      transform: scale(0);
    }
    3.4% {
      opacity: 0.6;
    }
    30% {
      letter-spacing: normal;
      opacity: 1;
      transform: scale(1);

    }
  }


  @media only screen and (max-width: 800px) {
    #animate-brave #delta-text,
    #animate-bold #delta-text,
    #animate-kind #delta-text {
      font-size: 100px;
      left: 72px;
      /* animation: none;
      -webkit-animation: none; */
    }
  }


/*  #endregion */

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }