www/src/static/css/homepage.css

/* General/Utilities */

@media only screen and (min-width: 1200px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 2.2vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 8.371vw 4.185vw 8.371vw;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 2.2vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 8.371vw 4.185vw 8.371vw;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 5vw;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 8.371vw 4.185vw 8.371vw;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 6.65vw !important;
  }

  .container{
    max-width: 1920px;
    padding: 4.185vw 8.371vw 4.185vw 8.371vw;
  }
}

@media only screen and (max-width: 576px) {

  html,body{
    background-color: #1a1a1a;
    max-width: 1920px;
    overflow-x: hidden;
    margin-top: 5.5vw !important;
  }

  .container{
    max-width: 1920px;
    padding: 5.4vw 3vw;
  }
}

@media only screen and (min-width: 1200px) {

  /* M5 Spacers (Bootstrap Utilities)*/

  .m-5{
    margin: 12.556vw !important;
  }
  .mb-5{
    margin-bottom: 12.556vw !important;
  }
  .mt-5{
    margin-top: 12.556vw !important;
  }
  .ms-5{
    margin-left: 12.556vw !important;
  }
  .me-5{
    margin-right: 12.556vw !important;
  }
}

/* Brand Colors */

.teal{color:#00ffd0;}
.black{color:#1a1a1a;}
.dark-gray{color:#4d4d4d;}
.grid-gray{color:#949494;}
.light-gray{color: #e1e1e1;}
.white{color:#ffffff;}
.purple{color: #8000ff;}
.orange{color: #ff4100;}

/* Background Colors */

.teal-bg{background-color:#00ffd0;}
.black-bg{background-color: #1a1a1a;}
.dark-gray-bg{background-color: #4d4d4d;}
.grid-gray-bg{background-color: #949494;}
.light-gray-bg{background-color: #e1e1e1;}
.white-bg{background-color: #ffffff;}
.purple-bg{background-color: #8000ff;}
.orange-bg{background-color: #ff4100;}

/* Spacers & Dividers */

hr{
  border-bottom: 2px solid #949494 !important;
  opacity: 1;
  margin: 0px !important;
}

/* Homepage */
@media only screen and (min-width: 1200px) {

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

}

@media only screen and (min-width: 768px) and (max-width: 992px) {

}

@media only screen and (min-width: 576px) and (max-width: 768px){

}

@media only screen and (max-width: 576px) {

  .hero-subhead{
    width: 100%;
  }

}

@media only screen and (min-width: 1200px) {

  .hero-section{
    background-image: url("/Images/x-large-grid-hero.svg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: repeat;
    background-size: contain;
  }

  .hero-bottom{
    background-image: url("/Images/x-large-grid-hero.svg");
    background-attachment: fixed;
    background-position: center-top;
    background-repeat: repeat;
    background-size: contain;
    height: 75px;
  }

  .impact-section{
    background-image: url("/Images/impact-section-grid.svg");
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-size: contain;
    padding-top: 3.5vw;
    opacity: 1;
  }

  .package_before{
    background-image: url("/Images/xl-grid-half-right.svg");
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: right;
    background-size: cover;
    padding-top: 12.556vw;
    padding-bottom: 12.556vw;
  }

  .package-grid-header{
    padding-top:0.5vw;
    padding-bottom: 2.9vw;
  }

  .package-cta{
    background-image: url("/Images/x-large-grid.svg");
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-size: cover;
  }

  .statistics{
    background-image: url("/Images/x-large-stats-grid.svg");
    background-attachment: fixed;
    background-position: top;
    background-repeat: repeat-y;
    background-size: cover;
  }

  .metric-block{
    padding: 4.185vw;
    border: 2px solid #949494;
    max-width: 41.741vw;
    background-color: #1a1a1a;
    position: relative;
    z-index:2;
  }

  .stat-head{
    font-size: 1.339vw;
  }

  .stat-number{
    font-family: "pp-neue-machina", sans-serif;
    font-size: 6.696vw;
    margin-top: -2.232vw;
    margin-bottom: -2.232vw;
  }

  .partners{
    background-image: url("/Images/x-large-grid.svg");
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-size: cover;
  }

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

}

@media only screen and (min-width: 768px) and (max-width: 992px) {

}

@media only screen and (min-width: 576px) and (max-width: 768px) {

}

@media only screen and (max-width: 576px) {

  .hero-section{
    padding: 4vw !important;
  }

  .hero-container{
    background-image: url("/Images/small-grid.svg");
    background-position: top;
    background-repeat: repeat-y;
    background-size: cover;
    padding-bottom: 15vw;
    border: 1px solid #949494;
  }

  .hero-float{
    float: none !important;
  }

  .hero-bottom{
    height:10vw;
  }

  .package-before-section{
    padding: 4vw !important;
  }

  .package_before{

  }

}