/********************************************************
This file is specifically for header div#hero_text_box
********************************************************/

/***
  TYPOGRAPHY VARS
***/
:root {
  /* 'default' sizes & heights (homepage, and practice pages) */
  --default-h2-font-size: 71px;
  --default-h2-line-height: 75px;
  --default-h3-font-size: 57px;
  --default-h3-line-height: 70px;
  --default-p-font-size: 28px;
  --default-p-line-height: 33px;
  --default-li-font-size: 22px;
  --default-li-line-height: 1.455;
  /* 'page' sizes & heights (about, reviews, contact) */
  --page-h2-font-size: 71px;
  --page-h2-line-height: 75px;
  --page-p-font-size: 23px;
  --page-p-line-height: 30px;
}

/***
  MAIN (HOMEPAGE) HEADER STYLING
***/
#hero_text_box {
  margin-top: 50px;
  display: block !important;
  text-align: left;
  margin-left: 10px;
}


.homepage-hero-module #hero_text_box h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.31);
}
.homepage-hero-module #hero_text_box h3 {
  text-shadow: 0.07px 1.499px 4px rgba(140, 74, 74, 0.74);
}

.debt-hero-module #hero_text_box h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.33);
}
.debt-hero-module #hero_text_box h3 {
  text-shadow: 0.07px 1.499px 3px rgba(140, 74, 74, 0.69);
}


.foreclosure-hero-module #hero_text_box h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.37);
}
.foreclosure-hero-module #hero_text_box p {
  text-shadow: 0.292px 0.956px 8px rgba(0, 0, 0, 0.52);
}



.homepage-hero-module #hero_text_box h2 {
  margin-bottom: 0;
}
.debt-hero-module #hero_text_box h2 {
  margin-bottom: 0;
}

#hero_text_box h2 {
  color: #fff !important;
  font-size: var(--default-h2-font-size) !important;
  line-height: var(--default-h2-line-height) !important;
  color: rgb(255, 255, 255) !important;
  font-family: 'AvenirNext-Bold' !important;
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.31);
  margin-bottom: 17px;
}


.homepage-hero-module #hero_text_box h3 {
  margin-bottom: 15px;
}
.debt-hero-module #hero_text_box h3 {
  margin-bottom: 21px;
}

#hero_text_box h3 {
  font-size: var(--default-h3-font-size) !important;
  line-height: var(--default-h3-line-height) !important;
  font-family: 'Avenir-Heavy' !important;
  color: rgb(253, 154, 39) !important;
  text-shadow: 0.07px 1.999px 2px rgba(140, 74, 74, 0.62);
  margin-top: 0;
  margin-bottom: 15px;
}

/* any p tag directly after an h2 */
#hero_text_box h2 + p {
  margin-top: 10px;
}

#hero_text_box ul {
  list-style: none;
}

/* this creates the different colored li dot */
#hero_text_box ul li::before {
  content: "•";
  color: rgb(253, 154, 39);
  display: block;
  width: 18px;
  height: 22px;
  top: 1px;
  left: 2px;
  position: absolute;
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.31);
}

#hero_text_box ul li {
  padding-left: 22px;
  position: relative;
  font-size: var(--default-li-font-size);
  line-height: var(--default-li-line-height);
  font-family: "Avenir-Heavy";
  color: rgb(255, 255, 255);
  text-shadow: 0.777px 0.629px 8px rgba(0, 0, 0, 0.37);
  -moz-transform: scale(1, 0.95);
  -webkit-transform: scale(1, 0.95);
  -ms-transform: scale(1, 0.95);
}

#hero_text_box ul li strong {
  font-family: Avenir-Black !important;
}

#hero_text_box p em {
  color: #ff7800 !important;
  font-family: Avenir-Black !important;
  font-style: normal !important;
}

#hero_text_box p {
  font-size: var(--default-p-font-size) !important;
  line-height: var(--default-p-line-height) !important;
  font-family: "Avenir-Heavy" !important;
  color: rgb(255, 255, 255) !important;
  text-shadow: 0.292px 0.956px 7px rgba(0, 0, 0, 0.37);
  -moz-transform: scale(1, 0.95);
  -webkit-transform: scale(1, 0.95);
  -ms-transform: scale(1, 0.95);
  margin-bottom: 5px;
  padding-left:3px;
}


.about-hero-module #hero_text_box.page h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.31);
}
.about-hero-module #hero_text_box.page p {
  text-shadow: 0.292px 0.956px 4px rgba(0, 0, 0, 0.37);
}

.test-hero-module #hero_text_box.page h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.38);
}
.test-hero-module #hero_text_box.page p {
  text-shadow: 0.292px 0.956px 6px rgba(0, 0, 0, 0.55);
}

.contact-hero-module #hero_text_box.page h2 {
  text-shadow: 0.292px 0.956px 2px rgba(0, 0, 0, 0.31);
}
.contact-hero-module #hero_text_box.page p {
  text-shadow: 0.292px 0.956px 5px rgba(0, 0, 0, 0.37);
}
		

#hero_text_box.page h2 {
  text-shadow: 0.292px 0.956px 3px rgba(0, 0, 0, 0.31);
  font-size: var(--page-h2-font-size) !important;
  line-height: var(--page-h2-line-height) !important;
}
#hero_text_box.page p {
  text-shadow: 0.292px 0.956px 7px rgba(0, 0, 0, 0.39);
  font-size: var(--page-p-font-size) !important;
  line-height: var(--page-p-line-height) !important;
}

/***
  MOBILE MEDIA QUERIES
***/

@media (max-width: 530px) {
  #hero_text_box {
    margin-left: 2px;
    margin-top: 55px;
  }
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .80) !important;
    line-height: calc(var(--default-h2-line-height) * .80) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .80) !important;
    line-height: calc(var(--default-h3-line-height) * .80) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .99) !important;
    line-height: calc(var(--default-li-line-height) * .99) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .90) !important;
    line-height: calc(var(--default-p-line-height) * .90) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .80) !important;
    line-height: calc(var(--page-h2-line-height) * .80) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .99) !important;
    line-height: calc(var(--page-p-line-height) * .99) !important;
  }	
}

/* Largest phones and down  */
@media (max-width: 480px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .74) !important;
    line-height: calc(var(--default-h2-line-height) * .74) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .74) !important;
    line-height: calc(var(--default-h3-line-height) * .74) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .97) !important;
    line-height: calc(var(--default-li-line-height) * .97) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .87) !important;
    line-height: calc(var(--default-p-line-height) * .87) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .74) !important;
    line-height: calc(var(--page-h2-line-height) * .74) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .97) !important;
    line-height: calc(var(--page-p-line-height) * .97) !important;
  }	
}

@media (max-width: 435px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .68) !important;
    line-height: calc(var(--default-h2-line-height) * .68) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .68) !important;
    line-height: calc(var(--default-h3-line-height) * .68) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .95) !important;
    line-height: calc(var(--default-li-line-height) * .95) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .86) !important;
    line-height: calc(var(--default-p-line-height) * .86) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .68) !important;
    line-height: calc(var(--page-h2-line-height) * .68) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .95) !important;
    line-height: calc(var(--page-p-line-height) * .95) !important;
  }	
}

@media (max-width: 400px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .65) !important;
    line-height: calc(var(--default-h2-line-height) * .65) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .65) !important;
    line-height: calc(var(--default-h3-line-height) * .65) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .92) !important;
    line-height: calc(var(--default-li-line-height) * .92) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .84) !important;
    line-height: calc(var(--default-p-line-height) * .84) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .65) !important;
    line-height: calc(var(--page-h2-line-height) * .65) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .92) !important;
    line-height: calc(var(--page-p-line-height) * .92) !important;
  }
}

@media (max-width: 385px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .64) !important;
    line-height: calc(var(--default-h2-line-height) * .64) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .64) !important;
    line-height: calc(var(--default-h3-line-height) * .64) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .91) !important;
    line-height: calc(var(--default-li-line-height) * .91) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .83) !important;
    line-height: calc(var(--default-p-line-height) * .83) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .64) !important;
    line-height: calc(var(--page-h2-line-height) * .64) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .91) !important;
    line-height: calc(var(--page-p-line-height) * .91) !important;
  }
}

@media (max-width: 375px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .63) !important;
    line-height: calc(var(--default-h2-line-height) * .63) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .63) !important;
    line-height: calc(var(--default-h3-line-height) * .63) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .90) !important;
    line-height: calc(var(--default-li-line-height) * .90) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .82) !important;
    line-height: calc(var(--default-p-line-height) * .82) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .63) !important;
    line-height: calc(var(--page-h2-line-height) * .63) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .90) !important;
    line-height: calc(var(--page-p-line-height) * .90) !important;
  }
}

@media (max-width: 350px) {
  #hero_text_box h2 {
    font-size: calc(var(--default-h2-font-size) * .54) !important;
    line-height: calc(var(--default-h2-line-height) * .54) !important;
  }
  #hero_text_box h3 {
    font-size: calc(var(--default-h3-font-size) * .54) !important;
    line-height: calc(var(--default-h3-line-height) * .54) !important;
  }
  #hero_text_box ul li {
    font-size: calc(var(--default-li-font-size) * .82) !important;
    line-height: calc(var(--default-li-line-height) * .82) !important;
  }
  #hero_text_box p {
    font-size: calc(var(--default-p-font-size) * .73) !important;
    line-height: calc(var(--default-p-line-height) * .73) !important;
  }  
  #hero_text_box.page h2 {
    font-size: calc(var(--page-h2-font-size) * .56) !important;
    line-height: calc(var(--page-h2-line-height) * .56) !important;
  }
  #hero_text_box.page p {
    font-size: calc(var(--page-p-font-size) * .82) !important;
    line-height: calc(var(--page-p-line-height) * .82) !important;
  }
}