html {overflow-x: hidden;}
body {font-family: 'Poppins'; font-weight: 300; font-size: 1.1rem; line-height: 1.3; background: #fff; color: #111;}
a {outline: none; text-decoration: none;}
header {border-top: solid 20px #58585a;}
h1,h2,h3,h4,h5,h6 {color: #222; font-weight: 400 !important; }
h1 {font-size: 3.5rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2.5rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.75rem;}
img {transition: all 0.15s ease-in-out;}
strong, .fw-bold {font-weight: 500 !important;}
p {line-height: 1.5;}
.form label {font-size: 0.9rem;}
.font-normal {font-weight: 300;}
.font-bold {font-weight: 400;}

header #logo {}
.navbar-expand-lg .navbar-nav .nav-link {padding: 0 1rem;}
.nav-item {color: #111; font-size: 1.3rem; border-top: solid 8px #fff; transition: all 0.3s ease-in-out;}
.nav-link {color: #111; border-top: solid 8px #fff;}
#home-page #home-link, #about-page #about-link, #commercial-page #commercial-link, #residential-page #residential-link, #areas-page #areas-link, #gallery-page #gallery-link, #contact-page #contact-link {border-top: solid 8px #2f439b;}
.nav-link:hover, .nav-link.active {text-decoration: none; color: #2f439b !important; border-top-color:#d0d8fb;}

.hero {height: 35vh; background: url('images/herron-banner-1.jpg') no-repeat center center / 100% auto fixed;}
#about-page .hero {background: url('images/residential-lighting.jpg') no-repeat center center / 100% auto fixed;}
#commercial-page .hero {background: url('images/gallery/lightpole-repair.jpg') no-repeat center center / 100% auto fixed;}
#residential-page .hero {background: url('images/gallery/kitchen.jpg') no-repeat center center / 100% auto fixed;}
#areas-page .hero {background: url('images/landscape.jpg') no-repeat center bottom / 100% auto fixed;}
#gallery-page .hero {background: url('images/gallery/home-kitchen.jpg') no-repeat center center / 100% auto fixed;}
#contact-page .hero {background: url('images/gallery/herron-vans-fleet.jpg') no-repeat center center / 100% auto fixed;}
.hero-gradient {background-image: linear-gradient(to bottom right, rgba(0,0,0,0.75), rgba(0,0,0,0));}
.hr-herron-blue {height: 3px; background: #2f439b; color: #2f439b; opacity: 1;}
.hr-black {height: 3px; background: #000; color: #000; opacity: 1;}

.aspect-1 {aspect-ratio: 1;}
.flex-1 {flex: 1;}
.bg-wood {background: url('images/bg-wood.jpg') no-repeat center center / 100% auto; color: #fff;}
.bg-green-wood {background-color: #0c551d; color: #fff;}

.bg-herron-blue {background-color: #2f439b; color: #fff;}
.bg-black {background-color: #000; color: #fff;}
.bg-black-alpha {background-color: rgba(0,0,0,0.8); color: #fff;}
.bg-green {background-color: #0c551d;}
.bg-lightgray {background-color: #f3f3f3; }
.bg-gray {background-color: #e3e3e3; }
.bg-darkgray {background-color: #333; }
.bg-gray-grad {background-color: rgb(185,181,181); background-image: linear-gradient(180deg, rgba(185,181,181,1) 0%, rgba(231,231,231,1) 100%); color: #1e395b;}
.bg-lightblue {background-color: #9bbdd5;}
.btn {}
.btn-herron-blue {background-color: #2f439b; color:#fff; transition: all 0.25s ease-in-out;}
.btn-herron-blue:hover {background-color: #3e57c7; color:#fff; transition: all 0.25s ease-in-out;}
.btn-lightblue {background-color: #9bbdd5; transition: all 0.25s ease-in-out;}
.btn-lightblue:hover {background-color: #45525c; color:#fff; transition: all 0.25s ease-in-out;}
.btn-green {background-color: #0c561d; color: #fff; transition: all 0.25s ease-in-out;}
.btn-green:hover {background-color: #12822c; color: #fff; transition: all 0.25s ease-in-out;}
.btn-red {background-color: #640810; color: #fff; transition: all 0.25s ease-in-out;}
.btn-red:hover {background-color: #830b15; color: #fff; transition: all 0.25s ease-in-out;}
.btn-white {background-color: #fff; color: #cd8f50;}
.btn-white:hover {color: #000;}
.btn-gray {background-color: #8a8989; color: #333;}
.btn-gray:hover {background-color: #a0a0a0; color: #fff;}
.btn-lightgray {background-color: #e5e4e7; color: #333;}
.btn-lightgray:hover {background-color: #d0d0d0; color: #333;}
.border-red {border: solid 1px #c70102 !important;}
.clear {clear: both;}
.hover-opacity:hover {opacity: 0.8;}
.text-herron-blue {color: #2f439b;}
.text-red {color: #c70102;}
.text-gray {color: #979797;}
.text-gold {color: #c39a44;}
.text-yellow {color: #f8c21b;}
.text-green {color: #0c551d;}
.note {padding:1.5rem 1rem; border-left:6px solid; border-radius:5px}
.note strong {font-weight:600}
.note-primary {background-color:#dfeefd;border-color:#176ac4}
.note-secondary {background-color:#e2e3e5;border-color:#58595a}
.note-success {background-color:#e2f0e5;border-color:#49a75f}
.note-danger {background-color:#fae7e8;border-color:#e45460}
.note-warning {background-color:#faf4e0;border-color:#c2a442}.note-info{background-color:#e4f2f5;border-color:#2492a5}
.error {color: red;}
.spinner-border {display: none;}
.rotate-20 {transform: rotate(20deg);}
.z-1 {z-index: 1;}
.z-5 {z-index: 5;}
.z-10 {z-index: 10;}

.gold-list {list-style: none;}
.gold-list li::before {  content: "\25A0";  color: #c39a44;  font-weight: bold;  display: inline-block;  width: 1em;  margin-left: -1em;}
.gold-list li {margin-bottom: 0.75rem;}
.font-white, .font-white a {color: #fff;}

footer {background: #45525c;}

@keyframes fadeInLeftSmall { from {opacity: 0; transform: translate3d(-5%, 0, 0);} to {opacity: 1; transform: translate3d(0, 0, 0);} }
.animate__fadeInLeftSmall {animation-name: fadeInLeftSmall;}
@keyframes fadeInRightSmall { from {opacity: 0; transform: translate3d(5%, 0, 0);} to {opacity: 1; transform: translate3d(0, 0, 0);} }
.animate__fadeInRightSmall {animation-name: fadeInRightSmall;}
:root {--animate-delay: 0.5s;}

@media screen and (min-width : 2000px) {
  .container {max-width: 1500px;}
}
@media screen and (max-width : 1440px) {
  .nav-item {font-size: 1.1rem;
}
@media screen and (max-width : 1199px) {
  a.nav-link:after, a.nav-link.active:after, a.nav-link:hover:after {border: none !important;}
  .nav-link {color: #111; border-left: solid 8px #fff; border-top: none;}
  #home-page #home-link, #about-page #about-link, #commercial-page #commercial-link, #residential-page #residential-link, #areas-page #areas-link, #gallery-page #gallery-link, #contact-page #contact-link {border-left: solid 8px #2f439b; border-top: none;}
}
@media screen and (max-width : 768px) {
  h1 {font-size: 3rem;}
  h2 {font-size: 2.5rem;}
  h3 {font-size: 2.25rem;}
  h4 {font-size: 1.75rem;}
  h5 {font-size: 1.5rem;}
  .hero {background-size: auto 100% !important; background-position: center center !important;}
  #about-page .hero {background-position: center center !important;}
  #commercial-page .hero {background-position: center center !important;}
  #residential-page .hero {background-position: center center !important;}
  #areas-page .hero {background-position: center center !important;}
  #gallery-page .hero {background-position: center bottom !important;}
  #contact-page .hero {background-position: center center !important;}
}
@media screen and (max-width : 768px) {
  header #logo {width: 100%; height: auto;}
}