body { text-rendering: optimizeLegibility;}
.center-text { text-align: center; }
.centered { display:block; margin: 0 auto;}

.services { padding: 11rem 0; }
.services-list h1, .services-list h2, .services-list h3, .services-list h4, .services-list h5, .services-list h6 { text-transform: none;  }

.services-list { padding-top: 0rem; } 
@media (min-width: 550px) { .services-list { padding-top: 8rem; } }

.nav { min-height: 13rem; background: #359567; color: white; text-align: center; }
.nav img { margin: 2rem auto 0 auto; height: 50px; }
ul.nav-list { list-style: none; margin: 2rem 0;  }
ul.nav-list li { display: block; margin-left: 0; font-size: 1.6rem; font-weight: 700; }
.nav a:link, .nav a:visited { color:white; text-decoration: none; }
.nav a:hover { color: rgba(255,255,255,0.8); text-decoration: none; }
@media (min-width: 800px) {
  .nav img { margin-top: 2rem; float:left; height: 100%; }
  ul.nav-list { list-style: none; margin: 5rem 0; float:right; }
  ul.nav-list li { display: inline-block; margin-left: 3rem; }
  .hero { padding: 11rem 0 !important; }

  }

.hero { padding: 5rem 0 11rem 0 ; box-sizing: border-box; text-align: center; font-size: 1.9rem; background:  url('../../images/watershot.jpg') center center  ;background-size: cover; background-repeat: no-repeat; }
.hero p { margin-top: 4rem; text-shadow: 1px 1px 1px black; color: white; }
.hero .button { color: white; border: white 4px solid; border-radius: 0px; height: 6rem; width: 28rem; margin-top: 3rem; font-size: 2.2rem; font-weight: 400; padding-top: 0.7rem; }
.hero .button:hover { background: rgba(255,255,255,0.3); }
.mascot { display:block; margin: 0 auto 3rem auto; max-height: 200px;}
@media (min-width: 800px) { .mascot { display:block; margin: 0 auto 3rem auto;  max-height: 100%;} }
.fast-n-easy { text-transform: none; color: white; font-weight: 700; font-size: 3.5rem; text-align: center; text-shadow: 2px 2px 1px black; }
.fast-n-easy .big { font-size: 7rem; line-height: .8; }

.green { background: #359567; color: white; }
.green h1, .green h2, .green h3, .green h4, .green h5, .green h6 { color: white; }

.containers { padding: 8rem 0; height: 370px; box-sizing: border-box; overflow: hidden; background: url('../../images/containers.png') no-repeat 1rem 17rem;  }

#depotlogo { margin-bottom: 2rem; }

.map { height:400px; }

.footer { background: #204760; color: rgba(255,255,255,0.85) !important; padding: 5rem 0;}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: white; }

.fa { margin-right: 1.5rem;}
.fa-truck { padding-top: 1.8rem !important; }
.fa-tachometer { padding-top: 1.5rem !important; }
.green-circle { background-color: #6AC2B3; color:white; height: 8.5rem; width:8.5rem; border-radius: 100%; padding-top: 2.2rem; box-sizing: border-box; text-align: center; margin-bottom: 30px; }
.custom-icon { display: block; background-color: #6AC2B3; color:white; height: 8.5rem; width:8.5rem; border-radius: 100%; padding-top: 1.1rem; box-sizing: border-box; text-align: center; margin: 0 auto 30px auto; }


.inner-hero { text-align: center; background-size: 100% contain !important; min-height: 300px; }
@media (max-width: 800px) { .community { height: 200px !important; background-position: center center !important; background-size: 200% !important; background-repeat: no-repeat;  } }


.content { padding: 11rem 0; }
.content h1 { max-width: 40rem; margin: 0 auto; line-height: 1; }
.subhead { font-weight: 100; font-size: 3.5rem; margin-top: 2rem; margin-bottom: 3rem; text-transform: none; letter-spacing: -1px; }
.subhead-content { font-weight: 100; font-size: 3.5rem; margin-top: 2rem; margin-bottom: 1rem; text-transform: none; letter-spacing: -1px; }

ul { list-style: disc;}
ul li { margin-left: 5rem; }

.testimonial {
  font-size:2rem;
  margin: 4rem;
}
.good-containers { 
  display:block;
  border: 1px solid rgb(51, 195, 240);
  padding:3rem;
  border-radius:2rem;
  margin-top:4rem;
  text-align: center; }