/*

Black #414141
Red #E82727
Light Background Red #FFF7F7
Navy Blue #062A4D
Input Light Blue #F8FAFC

*/
*{
  font-family: 'Avenir', sans-serif;
  color: #414141;
}
h1, h2{
  font-family: Georgia, serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  letter-spacing: 0.04em;
}
h3{
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h4{
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11pt;
}
p{
  line-height: 1.7em;
}
img{
  width: 100%;
}
.img-300{
  max-width: 300px;
}
.red{
  color: #E82727;
}
.grey{
  color: #9B9B9B;
}
.navy{
  color: #062A4D;
}
.white{
  color: #FFFFFF;
}
.serif, a.serif{
  font-family: Georgia, serif;
}
.background-red{
  background-color: #E82727;
}
.background-light-red{
  background-color: #FFF7F7;
}
.background-navy{
  background-color: #062A4D;
}
.background-light-blue{
  background-color: #F8FAFC;
}
.background-white{
  background-color: #FFFFFF;
}
.background-grey{
  background-color: #F8F8F8;
}
.italic{
  font-family: inherit;
  font-style: italic;
}
.bold{
  font-weight: 700;
}
.inline-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.inline-list li{
  margin-bottom: 20px;
}
.inline-list li .fal{
  margin-right: 10px;
}
.page-numbers{
    margin: 50px 0 0;
    border-top: 1px solid #dddddd;
    padding-top: 20px;
    text-align: left;
}
/* ================= HEADER ======= */
#logo img{
  max-width: 85px;
  float: left;
  margin-right: 10px;
}
#logo a{
    text-decoration: none;
}
#logo-text-wrapper{
  padding-top: 10px;
}
#logo-text a{
  font-size: 18pt;
  font-weight: 700;
  display: block;
  line-height: 1em;
  font-family: 'Open Sans', sans-serif;
  color: #AB2C3C;
}
#logo-subtext{
  display: block;
  font-size: 8pt;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}
.header-contact-icon{
  height: 100%;
  padding-top: 22px;
  text-align: center;
}
.header-contact-text{
  padding: 15px 0 0 0;
  font-size: 10pt;
  font-weight: 300;
}
.header-contact-text .italic{
  font-style: italic;
  letter-spacing: .05em;
  display: block;
}
#social-media{
  padding-top: 10px;
}
#social-media i{
  padding: 15px 17px 15px 17px;
  border-radius: 25px;
}
#show-contact-button, #show-menu-button{
  padding: 15px 0;
  margin: 10px auto 0;
  text-align: center;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: none;
  cursor: pointer;
}
#show-menu-button span,
#show-menu-button i,
#show-contact-button span,
#show-contact-button i{
  color: white;
}
@media(min-width: 49em){
  .desktop-hide{
    display: none;
  }
}
@media(max-width: 49em){
  #logo-text-wrapper{
    padding-top: 15px;
  }
  #logo img{
    max-width: 70px;
    float: left;
    margin-top: 0;
    margin-right: 10px;
  }
  .desktop-hide{
    display: block;
  }
  #show-contact-button, #show-menu-button{
    display: block;
  }
  .header-contact-mobile{
    display: none;
  }
  #social-media{
    padding-top: 20px;
    padding-left: 20px;
  }
  #header-quote{
    padding-bottom: 10px;
  }

}
/* ============ HEADER MENU ========== */
#header-bottom{
  background-color: #062A4D;
  margin-top: -15px;
}
#header-bottom ul{
  margin: 0 0 0 80px;
  padding: 0;
}
#header-bottom a li{
  color: white;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 9pt;
  margin: 0;
  padding: 0;
  letter-spacing: 0.2em;
}
#header-bottom a{
  padding: 10px 15px;
  display: inline-block;
}
#header-quote{
  text-align: center;
  transition: background-color ease 0.3s;
}
#header-quote a{
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: 0.2em;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 13px 0 0 0;

}
#header-quote:hover{
  background-color: #FF0000;
}

@media(max-width: 49em){
  /* hide menu on mobile */
  #header-bottom{
    display: none;
  }
  #header-bottom a{
    display: block;
  }
  #header-bottom{
    background-color: #062A4D;
    margin-top: 0;
  }
  #header-bottom ul{
    margin: 0 0 0 0;
    padding: 0;
  }
}
/*============ HERO ================ */
.hero-text{
  color: white;
  padding: 15px 0 15px 0;
  font-size: 20pt;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}
.hero-arrow{
  background-color: white;
  padding-top: 25px;
  text-align: center;
  font-size: 20pt;
}
@media(max-width:48em){
  .hero-text{
    font-size: 16pt;
  }
}


/* ============ QUOTE ========== */

#hp-quote{
  text-align: left;
  background-image: url(../images/repeated-square@2x.png);
  background-size: 120px;
  padding: 50px 0;
}
@media(max-width:48em){
  #hp-quote{
    padding: 20px 0;
    }
}
/* ============ LOCATIONS ========== */
#locations{
  padding: 100px 0;
  text-align: left;
}
#location-map{
  background-image: url(../images/location-map@2x.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border: 1px solid #C3E1FF;
  background-position: left top;
}
#location-text{
  padding: 20px 50px;
  border: 1px solid #C3E1FF;
}
#location-map a{
  display: block;
  width: 100%;
  height: 100%;
}
@media(max-width: 48em){
  #locations{
    padding: 50px 0;
  }
  #locations .inline-list{
    padding: 0 0 0 20px;
  }
  #location-map{
    min-height: 400px;
  }
}
/* ============ REVIEWS ========== */
.slide{
  text-align: left;
  border-bottom: 3px solid #E82727;
  background-color: #F5F5F5;
  padding: 30px 50px;
  margin: 20px;
}
.slide .fa-quote-left{
  font-size: 12pt;
}
.slide .fa-star{
  font-size: 9pt;
}
.slide p{
  font-size: 10pt;
}
@media(max-width:48em){

}
/* ======== FOOTER ======= */
footer{
  padding-top: 20px;
  padding-bottom: 60px;
}
#footer-top{
    background: url(../images/footer-top@2x.png) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 190px;
    margin-bottom: -15px;
}
footer p{
    color: white;
    font-size: 10pt;
    letter-spacing: 0.05em;
}
footer .bold{
  padding: 0;
  margin: 0;
}
footer .italic{
  padding: 0;
  margin: 0;
}
footer .small{
  padding: 0;
  margin: 0;
  font-size: 9pt;
  font-weight: 300;
}
footer .fas{
  color: white;
  font-size: 15pt;
}
#footer-icons .fab, #footer-icons .fal, #footer-icons .fas{
  color: white;
}
#footer-icons, #footer-license{
  padding-bottom: 50px;
}
#footer-license p {
    font-size: 11pt;
    font-style: italic;
}
#bbb-logo-footer{
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 0;
}
#bbb-logo-footer img{
  width: 100%;
  max-width: 140px;
}
#footer-dumpster{
  background-color: #416E9A;
  padding: 20px 0 0px;
}
#footer-dumpster img{
  width: 100px;
  display: inline-block;
  padding: 0 20px 0 100px;
}
#footer-dumpster p{
  display: inline-block;
  color: white;
  text-align: left;
}
#footer-dumpster .bold{
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10pt;

}
#footer-dumpster .italic{
  color: white;
  letter-spacing: 0.1em;
  font-size: 10pt;
}
@media(max-width:48em){
  footer{
    padding-bottom: 30px;
  }
  .footer-icon{
    padding-left: 20px;
  }
  .footer-3{
    margin-top: 10px;
    margin-bottom: 20px;
  }
  #footer-dumpster img{
    padding-left: 0;
  }
}
/* ========== MOBILE ======= */
@media(max-width: 800px){
  .col-xs-hide, .col-sm-hide{
    display: none;
  }

  #location-map{
    height: 300px;
  }
}