/* *********************************** */
/*            HOMEPAGE HEADER          */
/* *********************************** */
.homepage .heading {
   color: var(--dark-content);
   background-position: bottom center;
   background-size: cover;
   background-color: var(--dark-01);
   min-height: 24rem;
   height: calc(100vh - 3rem);
   position: relative;
   overflow: hidden;
}
.homepage .heading video {
   margin: -.75rem;
   filter: grayscale(1.5);
   position: absolute;
   top: 50%;
   left: 50%;
   height: 100%;
   transform: translate(-50%, -50%);
}
.homepage .heading .wrapper {
   position: absolute;
   padding: .75rem;
   width: 100vw;
   top: 0;
   left: 0;
   bottom: .75rem;
   right:0;
   background: linear-gradient(rgba(61, 69, 155, 0.75), rgba(61, 69, 155, 0.75));
   z-index: 1;
   display: flex;
   align-items: center;
}
.homepage .heading h1 {
   color: var(--dark-content);
   font-size: var(--text-7xl);
   line-height: 1.3;
   padding-bottom: .75rem;
}
.homepage .heading p {
   font-weight: 600;
   font-size: var(--text-2xl);
   padding-bottom: 1.5rem;
   line-height: 1.5;
   color: var(--base-emphasis);
}
.homepage .heading .buttons {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}
.homepage .heading .buttons a {
   text-decoration: none;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 3rem;
   font-weight: 600;
   font-size: var(--text-base);
}
.homepage .heading .buttons .primary {
   background-color: var(--base-01);
   border: 1px solid transparent;
   color: var(--primary);
}
.homepage .heading .buttons .primary:hover {
   background-color: var(--base-03);
   color: var(--primary-focus);
}
.homepage .heading .buttons .secondary {
   padding-top: 1rem;
   background-color: transparent;
   border: none;
   color: var(--dark-content);
   border-bottom: 1px solid transparent;
   width: fit-content;
   margin: 0 auto;
   padding-bottom: .25rem;
   height:fit-content;
}
.homepage .heading .buttons .secondary:hover {
   color: var(--base-02);
   border-bottom: 1px solid var(--dark-content)
}
.homepage .heading .buttons .secondary i {
   padding-right: .5rem;
}
.homepage .heading .buttons .secondary:hover i {
   animation: bounce 1s infinite;
}
@keyframes bounce {
   0%, 100% {
      transform: translateX(0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  
  50% {
      transform: translateX(-25%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@media only screen and (min-width: 500px) {
   /* *********************************** */
   /*            HOMEPAGE HEADER          */
   /* *********************************** */
   .homepage .heading .wrapper {
      padding: 1.25rem .75rem;
   }
   .homepage .heading .buttons {
      flex-direction: row;
      gap: .5rem;
   }
   .homepage .heading .buttons a {
      text-wrap: nowrap;
   }
}
@media only screen and (min-width: 640px) {
   /* *********************************** */
   /*            HOMEPAGE HEADER          */
   /* *********************************** */
   .homepage .heading {
      padding: 1.25rem;
      height: calc(100vh - 12rem);
   }
   .homepage .heading .wrapper {
      padding: 1.25rem;
   }
}
@media only screen and (min-width: 768px) {
   /* *********************************** */
   /*            HOMEPAGE HEADER          */
   /* *********************************** */
   .homepage .heading .buttons {
      gap: 2rem;
      align-items: center;
   }
   .homepage .heading .buttons .primary  {
      width: unset;
      padding: 0 2rem;
      height: 3rem;
   }
   .homepage .heading .buttons .secondary {
      margin: 0;
      padding-top: .25rem;
   }
}
@media only screen and (min-width: 1024px) {
   /* *********************************** */
   /*            HOMEPAGE HEADER          */
   /* *********************************** */
   .homepage .heading {
      padding: 1.25rem;
      height: calc(100vh - 19rem);
   }
   .homepage .heading video {
      transform: translate(-50%, -50%) scale(1.4);
   }
   .homepage .heading .wrapper {
      padding: 2rem 2.5rem;
      text-align: center;
      justify-content: center;
      margin-bottom: -.75rem;
   }
   .homepage .heading .buttons {
      justify-content: center;
   }
   .homepage .heading h2 {
      font-size: var(--text-xl);
      padding-bottom: .5rem;
   }
   .homepage .heading h1 {
      font-size: 3.75rem;
      padding-bottom: 1.5rem;
   }
   .homepage .heading p {
      font-size: var(--text-5xl);
      padding-bottom: 2.25rem;
   }
   .homepage .heading .buttons {
      gap: 1rem;
   }
   .homepage .heading .buttons a {
      width: unset;
      height: 3.5rem;
      font-size: var(--text-xl);
   }
   .homepage .four-columns {
      column-gap: 2rem;
   }
   .homepage .four-columns .column {
      width: calc((100% - 6rem) / 4);
   }
}
@media only screen and (min-width: 1280px) {
   /* *********************************** */
   /*            HOMEPAGE HEADER          */
   /* *********************************** */
   .homepage .heading {
      background-position: right center;
      padding: 0;
      align-items: unset;
      height: calc(100vh - 17rem);
   }
   .homepage .heading .wrapper {
      align-items: center;
      display: flex;
      text-align: left;
   }
   .homepage .heading .buttons {
      justify-content: start;
   }
   .homepage .intro .cta-container p,
   .homepage .intro .cta-container p a {
      font-size: var(--text-lg);
      text-wrap: balance;
   }
   .homepage .intro .cta-container>a {
      font-size: var(--text-xl);
   }
   .homepage .intro .cta-container p {
      padding-bottom: 1.5rem;
   }
   .homepage .intro .sub-heading {
      padding-bottom: 3rem;
   }
}
@media only screen and (min-width: 1536px) {
   .homepage .full-width .wrapper {
      padding: 1rem 0;
   }
   .homepage .heading video {
      transform: translate(-50%, -50%) scale(1.57);
   }
   .heading.full-width .wrapper {
      max-width: 100%;
   }
   .homepage .heading {
      background-position: right center;
      padding: 0;
      align-items: unset;
      height: calc(100vh - 19rem);
   }
   .homepage .intro .sub-heading,
   .homepage .four-columns  {
      padding-bottom: 4rem;
      margin-bottom: 0;
   }
   .heading.full-width .content {
      max-width: 90rem;
      width: 100%;
      margin: 0 auto;
   }
   .homepage .schedule header  {
      padding-bottom: 1rem;
   }
}