/*================================================

	VARIABLES

=================================================*/
/*============================================

	GLOBALS

=============================================*/
body {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  padding: 0;
  background: #F5F5F5;
  font-family: "forma-djr-micro", sans-serif;
  font-weight: 400;
  font-style: normal; }

em {
  font-style: italic; }

p {
  font-size: 1.2em;
  line-height: 1.5em; }

p strong {
  font-weight: 500; }

p a {
  font-weight: 500; }

h1, h2, h3, h4 {
  font-family: "jubilat", serif;
  font-weight: 900;
  font-style: normal; }

h1 {
  line-height: 1.1em; }

h2 {
  font-size: 3em;
  line-height: 1.1em; }

h5, h6 {
  font-weight: 500; }

figure {
  padding: 0;
  margin: 0; }

/*==============================================

	HEADER

===============================================*/
header {
  background: #000;
  display: flex;
  padding: 20px 4vw;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 1023px) {
    header {
      flex-direction: column; } }
  header figure {
    flex-basis: 20%; }
    @media (max-width: 1023px) {
      header figure {
        flex-basis: 50%;
        width: 50%; } }
    header figure img {
      width: 100%; }
  header nav {
    flex-basis: 80%; }
    header nav ul {
      list-style-type: none;
      display: flex;
      justify-content: flex-end; }
      @media (max-width: 1023px) {
        header nav ul {
          padding: 0;
          justify-content: space-between; } }
      header nav ul a {
        color: #F5F5F5;
        margin-right: 25px;
        font-family: "jubilat", serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.5em;
        cursor: pointer;
        transition: all .6s; }
        @media (max-width: 1023px) {
          header nav ul a {
            font-size: 1em; } }
      header nav ul a:hover {
        color: #66493D; }
      header nav ul li:nth-child(3) a {
        margin-right: 0; }

   /*==========================================

		HOME

==============================================*/
.Hero {
  display: grid;
  overflow: hidden; }
  .Hero figure {
    grid-column: 1/1;
    grid-row: 1/1;
    z-index: 1; }
    .Hero figure img {
      width: 100%;
      height: auto; }
  .Hero div {
    grid-column: 1/1;
    grid-row: 1/1;
    z-index: 2;
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 0 4vw;
    flex-direction: column;
    align-items: flex-start; }
    .Hero div a {
      display: block;
      background: #3D4D42;
      border: none;
      box-shadow: none;
      border-radius: 20px;
      font-size: 2em;
      padding: 10px 25px;
      color: #F5F5F5;
      font-family: "jubilat", serif;
      font-weight: 900;
      font-style: normal;
      cursor: pointer;
      transition: all .6s;
      animation-duration: 3s;
      animation-name: fadein; }
      @media (max-width: 1023px) {
        .Hero div a {
          font-size: 1em;
          margin-top: 12px; } }
    .Hero div a:hover {
      background: #66493D; }
@keyframes fadein {
  from {
    opacity: 0; }
  75% {
    opacity: 0; }
  to {
    opacity: 1; } }
  .Hero h1 {
    color: #F5F5F5;
    font-size: 5em;
    font-style: italic;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 50px 0 30px 0;
    margin: 0; }
    @media (max-width: 1023px) {
      .Hero h1 {
        font-size: 2em;
        padding: 0; } }
    .Hero h1 span {
      animation-duration: 3s;
      animation-name: slidein;
      overflow: hidden; }
    .Hero h1 span:nth-child(1) {
      padding-left: 5px; }
@keyframes slidein {
  from {
    margin-left: -100%;
    opacity: 0; }
  to {
    margin-right: 0%;
    opacity: 1; } }
/* HOME ABOUT */
.Home-section {
  display: flex;
  align-items: center; }
  @media (max-width: 1023px) {
    .Home-section {
      flex-direction: column; } }

.Home-section div {
  flex: 1;
  padding: 30px 4vw; }

.Home-section div h2 {
  margin: 0;
  color: #000; }

.Home-section div p {
  color: #000;
  margin: 20px 0 0 0;
  line-height: 1.5em;
  font-size: 1.2em; }

.Home-section figure {
  flex-basis: 50%;
  padding: 30px 4vw 0 0; }
  @media (max-width: 1023px) {
    .Home-section figure {
      width: 100%;
      padding: 0; } }

.Home-section figure img {
  width: 100%;
  border-radius: 8px; }

/* PROGRAMS */
#programs {
  padding: 30px 4vw; }

#programs h2 {
  margin: 0;
  text-align: center; }

#programs p {
  text-align: center;
  margin-top: 0; }

.HomePrograms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 20px; }
  @media (max-width: 1023px) {
    .HomePrograms {
      grid-template-columns: 1fr; } }

.HomePrograms figure {
  grid-column: span 1; }

.HomePrograms figure img {
  width: 100%;
  border-radius: 8px; }

.HomePrograms-type {
  padding: 0 0 0 4vw; }
  @media (max-width: 1023px) {
    .HomePrograms-type {
      padding: 20px 0; } }

.HomePrograms-typeSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 25px; }
  @media (max-width: 1023px) {
    .HomePrograms-typeSplit {
      grid-template-columns: 1fr; } }

.HomePrograms-typeSplit div {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 1px #000;
  border-radius: 10px;
  padding: 12px; }

.HomePrograms-typeSplit div img {
  height: 50px;
  width: auto;
  margin: 0;
  padding: 0; }

.HomePrograms-typeSplit div h3 {
  font-size: 2em;
  margin: 0;
  padding-top: 10px; }

.HomePrograms-typeSplit div p {
  margin: 0; }

.HomePrograms-cards {
  display: flex;
  justify-content: space-between;
  padding-top: 25px; }
  @media (max-width: 1023px) {
    .HomePrograms-cards {
      flex-direction: column;
      align-items: center; } }

.HomePrograms-cards div {
  flex-basis: 180px;
  border: solid 1px #000;
  border-radius: 90px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  @media (max-width: 1023px) {
    .HomePrograms-cards div {
      width: 180px;
      margin-top: 10px; } }

.HomePrograms-cards div img {
  width: 80px;
  margin: 0;
  text-align: center; }

.HomePrograms-cards div h4 {
  margin: 0;
  text-align: center;
  text-transform: uppercase; }
  
  
  /*================================================
  
            WATCH
            
==================================================*/

#media {
    padding:30px 0;
}

#media h2 {
    text-align:center;
    padding-left:6vw;
    padding-right:6vw;
}

.Media {
    display:block;
    width:100%;
}


.MediaVideo {
    margin:0 auto;
    width: 320px;
    height: 180px;
}

.MediaVideo iframe {
        width: 320px;
        height: 180px;
    }
    
    .Media div:nth-child(1) {
    margin-bottom:25px;
}


@media (min-width:825px) {
    #media {
        padding:30px 6vw;
    }
    
    #media h2 {
    padding-left:0;
    padding-right:0;
}
    
    .Media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px;
    }
    
    .MediaVideo {
        width: 380px;
        height: 214px;
    }
    
    .MediaVideo iframe {
        width: 380px;
        height: 214px;
    }
    
    
     .Media div:nth-child(1) {
    margin-bottom:0px;
}
    
    
}

@media (min-width:1300px) {
    .MediaVideo {
        width: 600px;
        height: 338px;
    }
    
    .MediaVideo iframe {
        width: 600px;
        height: 338px;
    }
}

@media (min-width:1900px) {
    
    .MediaVideo {
        width: 800px;
        height: 450px;
    }
    .MediaVideo iframe {
        width: 800px;
        height: 450px;
    }
}

/*==================================================


	MARKETING LANDING TEMPLATE 

=================================================== */
.LandingIntro {
  display: flex;
  padding: 30px 4vw; }
  @media (max-width: 800px) {
    .LandingIntro {
      flex-direction: column; } }
  .LandingIntro figure {
    flex-basis: 50%; }
    @media (max-width: 800px) {
      .LandingIntro figure {
        width: 100%; } }
    .LandingIntro figure img {
      width: 100%;
      border-radius: 10px; }
  .LandingIntro-desc {
    padding-left: 4vw;
    flex: 1; }
    .LandingIntro-desc h1 {
      font-size: 3em;
      margin-bottom: 0; }
    .LandingIntro-descPayment {
      display: flex;
      align-items: flex-start;
      flex-direction: column; }
      .LandingIntro-descPayment p {
        margin: 0;
        color: #332F2E;
        font-size: .9em;
        order: 2;
        padding: 5px 0 0 5px; }
      .LandingIntro-descPayment a {
        display: block;
        background: #3D4D42;
        border: none;
        box-shadow: none;
        border-radius: 20px;
        font-size: 1.2em;
        padding: 10px 25px;
        color: #F5F5F5;
        font-family: "jubilat", serif;
        font-weight: 900;
        font-style: normal;
        cursor: pointer;
        transition: all .6s; }
      .LandingIntro-descPayment a:hover {
        background: #66493D; }

.LandingDetails {
  padding: 0 4vw; }
  .LandingDetails h2 {
    margin: 0; }
  .LandingDetails .Disclaimer {
    font-size: 1em;
    font-style: italic; }