/*------------------------------------------------------------------
hero_band.css
Last edited: 8/24/22
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1400px and up)

[Notes]

PHP file: inc/banded_content/hero_band.php

-------------------------------------------------------------------*/

.band-hero {
  border-bottom: 40px solid #00669A;
  overflow: hidden;
  position: relative;
}
.band-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  z-index: 1;
}
.band-hero .tint {
  align-items: center;
  background: rgba(0, 0, 0, 0);
  display: flex;
  position: relative;
  z-index: 2;
  height: 400px;
}
.band-hero .hero-text {
  text-align: center;
}
.band-hero h1,
.band-hero h2 {
  color: #ffffff;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1em;
  /*text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);*/
  text-transform: uppercase;
}
.band-hero p {
  color: #ffffff;
  font-size: 23px;
  line-height: 1.2;
}
.band-hero .overtitle {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.band-hero .btn,
.band-hero a.btn {
  background-color: #fff;
  color: #00669A;
}
.band-hero .btn:hover,
.band-hero a.btn:hover {
  background-color: #C52227;
  color: #fff;
}
/* Text Under Image Variation */
.band-hero.text-under {
  padding-bottom: 25px;
}
.band-hero.text-under img {
  height: 300px;
  margin: 0 0 30px;
  position: relative;
}
.band-hero.text-under .hero-text {
  text-align: left;
}
.band-hero.text-under h1, 
.band-hero.text-under h2 {
  color: #333;
  margin: 0;
  text-shadow: none;
  text-transform: none;
}

/* HOME HERO */
.band-hero.home-hero .tint {
  height: 600px;
}
.band-hero.home-hero h1,
.band-hero.home-hero h2 {
  font-size: 60px;
}
.band-hero.home-hero .overtitle {
  font-size: 32px;
}

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
  .band-hero .tint {
    height: 400px;
  }
  .band-hero h1,
  .band-hero h2 {
    font-size: 70px;
  }
  .band-hero p {
    font-size: 26px;
  }

/* Text Under Image Variation */
.band-hero.text-under {
  padding-bottom: 50px;
}
.band-hero.text-under h1,
.band-hero.text-under h2 {
  font-size: 40px;
}
/* HOME HERO */
.band-hero.home-hero .tint {
  height: 800px;
}
.band-hero.home-hero h1,
.band-hero.home-hero h2 {
  font-size: 80px;
}
.band-hero.home-hero .overtitle {
  font-size: 36px;
}


}
/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
  .band-hero .tint {
    height: 450px;
  }
/* HOME HERO */
.band-hero.home-hero .tint {
  height: 850px;
}  
}
/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
  .band-hero .tint {
    height: 475px;
  }
  .band-hero h1,
  .band-hero h2 {
    font-size: 75px;
  }
/* HOME HERO */
.band-hero.home-hero .tint {
  height: 875px;
}
.band-hero.home-hero h1,
.band-hero.home-hero h2 {
  font-size: 90px;
}
.band-hero.home-hero .overtitle {
  font-size: 40px;
}  
}
/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1400px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
.band-hero.home-hero h1,
.band-hero.home-hero h2 {
  font-size: 100px;
}    
}