#header-container{
  height: 80vh;
  background-image: url("../img/SFA-Wallpaper.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
}

#header-container .wrapper{
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width:100%;
}

#header-container #text-container{
  margin-top: 130px;
  color:#FFF;
}

#header-container .header-text{
  font-size: 100px;
  line-height: 80px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

#header-container .sub-text{
  font-size: 15px;
  text-transform: uppercase;
  margin:0px;
}

#header-container .par-text{
  font-size: 13.5px;
  margin:0px;
  width:60%;
  text-transform: uppercase;
}

#header-container #main-btn{
  padding:15px;
  padding-left: 40px;
  padding-right: 40px;
  background: #FFF;
  color:#000;
  text-decoration: none;
  margin-right: 30px;
  margin-top: 20px;
  text-transform: uppercase;
  font-size: 13px;
  display: inline-block;
}

#header-container #download-btn{
  padding:15px;
  padding-left: 40px;
  padding-right: 40px;
  background: rgba(255,255,255,0.4);
  color:#000;
  text-decoration: none;
  margin-right: 30px;
  margin-top: 20px;
  text-transform: uppercase;
  font-size: 13px;
  display: inline-block;
}

#nefarious-container{
  background: #f1f0ea;
  padding:30px;
}

#nefarious-container .main-text{
  font-size: 35px;
}

#nefarious-container #main-box{
  background: #000;
  border:10px solid #f1f0ea;
  padding:20px;
  margin-bottom: 20px;
}

#nefarious-container #main-box .header-text{
  color:#FFF;
  margin-bottom: 50px;
  font-size: 20px;
}

#nefarious-container #main-box .keep-text{
  color:#FFF;
  font-size: 27.5px;
  margin-top:30px;
}

#nefarious-container #main-box hr{
  opacity: 1;
  color:#FFF;
}

#nefarious-container #main-box .sub-text{
  font-size: 12px;
  color:#FFF;
  margin:0px;
  text-align: justify;
}

#nefarious-container .major-text{
  font-size: 70px;
  color:#FFF;
}

#nefarious-container #border-text{
  border-top:1px solid #000;
  margin-top: 30px;
  padding:30px;
}

#nefarious-container #border-text .key-text{
  font-weight: bolder;
  font-size: 70px;
}

#field-container{
  padding:100px;
  background: #000;
  color:#FFF;
}

#field-container .main-image{
  width:100%;
  object-fit: cover;
}

#field-container .header-text{
  color:#FFF;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
}

#field-container .sub-text{
  color:#FFF;
  width:60%;
  margin-top:5px;
  font-size: 15px;
}

#field-container .sub-text-100{
  color:rgba(255,255,255,.6);
  width:90%;
  margin-top:5px;
  font-size: 15px;
}

#field-container li{
  margin-left: 10px;
  margin-bottom: 10px;
  list-style-type: square;
  font-weight: bold;
}

#field-container #main-btn{
  padding:10px;
  padding-left:30px;
  padding-right: 30px;
  color:#FFF;
  border:1px solid #FFF;
  text-decoration: none;
  display: inline-block;
}

#serving{
  padding:30px;
}

#serving .main-text{
  margin-bottom: 30px;
}

#serving .header-text{
  font-size: 20px;
  margin-top:20px;
  font-weight: bold;
}

#serving .sub-text{
  font-size: 13px;
}

#serving #main-image{
  width:100%;
  height: 300px;
  object-fit: cover;
}

#serving .num{

}

#showcase-portal{
  background: #000;
  padding:30px;
}

#showcase-portal #main-container{
  background: #FFF;
  border:10px solid #000;
  clip-path: polygon(
    0 0,
    90% 0,
    100% 60px,
    100% 100%,
    0 100%
  );
  min-height: 400px;
  padding:30px;
}

#showcase-portal .main-image{
  height: 400px;
  width:100%;
  object-fit: cover;
}

#showcase-portal hr{
  color:#000;
  opacity: 1;
  height: 0.3px;
}

#showcase-portal .main-text{
  padding:0px;
  margin:0px;
}

#showcase-portal .description-text{
  color:#a6a5a1;
}

#critical-header{
  background:#000;
  padding:50px;
  color:#FFF!important;
  font-size: 13px;
}

#critical-header .header-text{
  font-size:80px;
}

#critical-header .sub-text{
  text-transform: uppercase;
  font-size: 13px;
}

#cta{
  padding:60px;
  background: #505544;
  color:#FFF;
}

#cta .header-text{
  color:#FFF;
}

#cta .main-btn{
  background: #FFF;
  color:#000;
  padding:12px;
  padding-left: 40px;
  padding-right: 40px;
  float:right;
  text-decoration: none;
  border-radius: 50px;
  display: inline-block;
}

#cta #main-icon{
  margin-left: 20px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Large tablets / small laptops: max-width 1024px
   Tablets (portrait): max-width 768px
   Mobile: max-width 480px
   ========================================================================== */

/* ---------- Large tablets / small desktops (<=1024px) ---------- */
@media (max-width: 1024px) {

  #header-container{
    height: 70vh;
    background-attachment: scroll; /* fixed backgrounds are unreliable on mobile/tablet browsers */
  }

  #header-container .header-text{
    font-size: 70px;
    line-height: 60px;
  }

  #header-container .par-text{
    width: 80%;
  }

  #nefarious-container .main-text{
    font-size: 28px;
  }

  #nefarious-container .major-text{
    font-size: 55px;
  }

  #nefarious-container #border-text .key-text{
    font-size: 55px;
  }

  #field-container{
    padding: 60px 40px;
  }

  #field-container .sub-text{
    width: 80%;
  }

  #critical-header .header-text{
    font-size: 55px;
  }

  #showcase-portal #main-container{
    min-height: 320px;
  }
}

/* ---------- Tablets (portrait) (<=768px) ---------- */
@media (max-width: 768px) {

  #header-container{
    height: 60vh;
  }

  #header-container #text-container{
    margin-top: 80px;
    text-align: center;
  }

  #header-container .header-text{
    font-size: 48px;
    line-height: 44px;
  }

  #header-container .par-text{
    width: 100%;
    margin: 0 auto;
  }

  #header-container #main-btn,
  #header-container #download-btn{
    padding: 12px 25px;
    margin-right: 15px;
    margin-bottom: 10px;
  }

  #nefarious-container{
    padding: 20px;
  }

  #nefarious-container .main-text{
    font-size: 24px;
    text-align: center;
  }

  #nefarious-container #main-box{
    padding: 15px;
    text-align: center;
  }

  #nefarious-container #main-box .keep-text{
    font-size: 22px;
  }

  #nefarious-container .major-text{
    font-size: 42px;
    text-align: center;
  }

  #nefarious-container #border-text{
    padding: 15px;
    text-align: center;
  }

  #nefarious-container #border-text .key-text{
    font-size: 42px;
  }

  #field-container{
    padding: 40px 20px;
    text-align: center;
  }

  #field-container .row{
    flex-direction: column;
  }

  #field-container .sub-text,
  #field-container .sub-text-100{
    width: 100%;
  }

  #field-container li{
    margin-left: 0;
    list-style-position: inside;
  }

  #serving #main-image{
    height: 220px;
  }

  #showcase-portal{
    padding: 20px;
  }

  #showcase-portal #main-container{
    clip-path: none; /* angled clip reads awkwardly on narrow screens */
    min-height: auto;
    padding: 20px;
  }

  #showcase-portal .main-image{
    height: 260px;
  }

  #critical-header{
    padding: 30px 20px;
    text-align: center;
  }

  #critical-header .header-text{
    font-size: 36px;
  }

  #cta{
    padding: 30px 20px;
    text-align: center;
  }

  #cta .main-btn{
    float: none;
    display: inline-block;
    margin-top: 15px;
  }
}

/* ---------- Mobile (<=480px) ---------- */
@media (max-width: 480px) {

  #header-container{
    height: 55vh;
  }

  #header-container .header-text{
    font-size: 34px;
    line-height: 32px;
  }

  #header-container .sub-text{
    font-size: 12px;
  }

  #header-container #main-btn,
  #header-container #download-btn{
    display: block;
    width: 100%;
    margin-right: 0;
    text-align: center;
    box-sizing: border-box;
  }

  #nefarious-container .main-text{
    font-size: 20px;
  }

  #nefarious-container .major-text{
    font-size: 32px;
  }

  #nefarious-container #border-text .key-text{
    font-size: 32px;
  }

  #field-container{
    padding: 30px 15px;
  }

  #field-container .header-text{
    font-size: 24px;
  }

  #serving #main-image{
    height: 180px;
  }

  #showcase-portal .main-image{
    height: 200px;
  }

  #critical-header .header-text{
    font-size: 26px;
  }

  #cta{
    padding: 25px 15px;
  }
}