@font-face {
 font-family:"BrandonGrotesque-Bold";
 src: url(./Brandon-bld.otf);
}


@font-face {
 font-family:"BrandonGrotesque-Light";
 src: url(./BrandonGrotesque-Light.woff);
}

.blue-text-outline {
  color: white;
  text-shadow:
    -3px -3px 0 #124573,
    3px -3px 0 #124573,
    -3px 3px 0 #124573,
    3px 3px 0 #124573
}

.marketing-page {
 background-color: white; 
}

.marketing-page-container {
 background-color: white; 
 max-width: 1080px;
 margin: auto;
}

.marketing-jumbotron {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.jumbotron-text {
 max-height: 492px;
 max-width: 663px;
}

.jumbotron-text-img {
  height: 100%;
  width: 100%;
}

/*JOIN CLUB CHILL*/
.join-chill {
 display: flex; 
 width:90%;
 margin: 3rem auto auto auto;
}

.join-text {
 width: 60%;
 height: auto;
 margin: auto;
}

.join-images {
 width: 35%;
 height: 100%;
 position: relative;
}

.join-image {
 height: 100%;
 width: 100%;
}

.join-image-1 {
 margin-top: 1.5rem;
}

.join-image-2 {
 height: auto;
 width: 55%;
 position: absolute;
 top: 88%;
 left: 47%;
}

.join-text-header {
 font-size: 3.5rem;
 font-family: "SuisseWorks", "serif";
 color: #ff786b;
 font-weight: 200;
   font-weight: 200;
}

.join-text-paragraph {
 font-family: "BrandonGrotesque-Light", "serif";
 margin-top: 2rem;
  font-size: 2.25rem;
 font-weight: 600;
}



@media(min-width: 769px) and (max-width:1017px) {
  .join-text-header {
   font-size: 3.3rem; 
  }
  
  .join-text-paragraph {
   font-size: 1.65rem; 
  }
}



@media (min-width: 768px) and (max-width: 1024px) {
  .marketing-jumbotron {
 	height: 90vh;
  }
   
  .join-chill {
 flex-direction: column;
 margin-top: 3rem;
 width: 100%;
 position: relative;
}

  .jumbotron-text {
 max-height: 348px;
 max-width: 470px;
}
  
.join-text {
 width: 100%;
 margin-top: -1rem;
}
  
  .join-text-header {
   font-size: 3.19rem; 
   margin: auto;
  }
  
 .join-text-paragraph {
  font-size: 1.56rem; 
   text-align: center;
   width: 90%;
   margin: 1rem auto 2rem auto;
 }

  
.join-images {
 position: absolute;
 left:63%;
 top: 96%;
}

.join-image-1 {
 height: auto;
 top: 0;
 left: 50%;
 width: 85%;
}

.join-image-2 {
 height: auto;
 width: 25%;
 position: absolute;
 top: 9%;
 left:-33%;
}

.join-text-header {
 text-align: center;
 width: 90%;
}

} 
 



@media (min-width: 425px) and (max-width: 767px) {
   .marketing-jumbotron {
 	height: 80vh;
  }
  
   .jumbotron-text {
 max-height: 226px;
 max-width: 305px;
}
  
  .join-chill {
 flex-direction: column;
 margin-top: 3rem;
 width: 100%;
 position: relative;
}

.join-text {
 width: 100%;
 margin-top: -1rem;
}
  
  .join-text-header {
   font-size: 31px; 
   margin: auto;
  }
  
 .join-text-paragraph {
  font-size: 18px;
   text-align: center;
   width: 90%;
   margin: 1rem auto 1rem auto;
 }

  
.join-images {
 position: absolute;
 left:63%;
 top: 96%;
}

.join-image-1 {
 height: auto;
 left: 44%;
 width: 80%;
}

.join-image-2 {
 height: auto;
 width: 23%;
 position: absolute;
 top: 10%;
 left:-33%;
}

.join-text-header {
 text-align: center;
 width: 90%;
}

}








@media (min-width: 320px) and (max-width: 424px) {
  .marketing-jumbotron {
 height: 60vh;
  }
  
  .join-chill {
 flex-direction: column;
 margin-top: 3rem;
 width: 100%;
 position: relative;
}

.join-text {
 width: 100%;
 margin-top: -1rem;
}
  
   .jumbotron-text {
 max-height: 226px;
 max-width: 305px;
}
  
  .join-text-header {
   font-size: 31px; 
   margin: auto;
  }
  
 .join-text-paragraph {
  font-size: 18px;
   text-align: center;
   width: 90%;
   margin: 1rem auto 1rem auto;
 }

  
.join-images {
 position: absolute;
 left:63%;
 top: 96%;
}

.join-image-1 {
 height: auto;
 left: 44%;
 width: 80%;
}

.join-image-2 {
 height: auto;
 width: 23%;
 position: absolute;
 top: 8%;
 left:-33%;
}

.join-text-header {
 text-align: center;
 width: 90%;
}
  
}