/* Fonts */ 
body, .avenir {
   font-family: "avenir-lt-pro", sans-serif;
   font-weight: 400;
   font-style: normal;
   color: #454545;
}
.avenir-bold { font-weight: 700; }
.avenir-black { font-weight: 800; }

/* Font Size CSS */
h1, h2, h3, h4, h5 { margin-bottom: 0px}
p { font-size: 18px; }
.p14 { font-size: 14px; }
.p16 { font-size: 16px; }
.p20 { font-size: 20px; }
.p24 { font-size: 24px; }
.p28 { font-size: 28px; }
.p48 { font-size: 48px; }
.boldest { font-weight: 900 !important;}

/* General CSS */
a { text-decoration: none; }
.hidden {display: none; }
.entry-content { background-color: #FFF !important; }
.container { max-width: 1200px; }
.container-wide { max-width: 2110px; }
.w100 { width: 100%;  }
.py-6 { padding: 3.5rem 0 !important; }
.py-7 { padding: 4rem 0 !important; }
.py-8 { padding: 4.5rem 0 !important; }

.white { color: #FFF; }
.white-back { background-color: #FFF; }
.dk-gray { color: #121212; }
.dk-gray-back { background-color: #121212; }
.lt-gray { color: #F2F2F2; }
.lt-gray-back { background-color: #F2F2F2; }
.black { color: #000; }
.black-back { background-color: #000; }
.green { color: #4AAB57; }
.green-back { background-color: #4AAB57; }
.shadowed { text-shadow: 3px 3px 2px rgba(0,0,0,0.9); }
footer div { border-color: #838383 !important; }


/* BUTTONS CSS */
.spg-button, #gform_submit_button_2  {
   padding: 10px 25px;
   background-color: #4AAB57;
   border: 2px solid #4AAB57 !important;
   color: #FFF;
   font-weight: 700;
   box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.6);
   border-radius: 12px;
}

.spg-button:hover {
   background-color: transparent !important;
   color: #454545;
}

.green-back .spg-button {
   background-color: #FFF;
   border: 2px solid #FFF !important;
   color: #4AAB57;
}

.black-back .spg-button:hover, .dk-gray-back .spg-button:hover { color: #FFF; }

#gform_submit_button_2:hover {
   background-color: #FFF;
   color: #454545;
}

/* NAVIGATION CSS */
header { 
   z-index: 100;
   background-color: rgb(0,0,0,1); 
}
.logo { 
   width: 100%;
   max-width: 160px;
}

header ul li a {  text-transform: uppercase;  } 
.nav-link { color: #FFF; }
.nav-link:hover, .nav-link.active { color: #4aab57 !important; }

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color: #FFF; }
.navbar-expand-lg .navbar-nav .dropdown-menu { 
   background-color: transparent;
   color: #FFF;
   text-align: center;
}
.dropdown-item { color: #FFF; }
.dropdown-item.active, .dropdown-item:active { 
   background-color: transparent; 
   color: #4AAB57;
}
.dropdown-item:hover, .dropdown-item:focus {
   background-color: transparent;
   color: #4AAB57;
}

/* MOBILE MENU */
.offcanvas {
   background-color: rgb(0,0,0,.66);
   width: 100% !important;
   color: #FFF !important;
}

.menu-close button.btn-close { color: #FFF !important; }




/* TOP BANNER CSS */
.banner-left { padding-top: 38%; }
.banner-right { background-color: #000; }

.banner-headline { font-size: 27px; }
.form-container { background-color: rgb(0,0,0, .66); }
.form-headline { font-size: 19px;  }
 
.gform-footer  { padding-bottom: 0 !important; }
#gform_submit_button_2 { margin-bottom: 0 !important;  }

.banner-bottom { background-color: #000; }

/* CARDS CSS */
.card-top { border-radius: 20px 20px 0 0; }
.card-top .btn { 
   z-index: 100;
   position: relative;
   top: 24px; 
}
.card-top .btn:hover {
   color: #454545;
   background-color: #FFF !important;
}
.card-bottom { border-radius: 0 0 20px 20px; }
.card-image {
   border-top: 4px solid #FFF;
   border-bottom: 4px solid #FFF;
}


#contact-form { display: none; }
.thank-you .form-container { display: none; }
.thank-you .banner-bottom { padding-top: 3rem!important; }

/* Side by Side CSS */
.side-by-side-bkg { 
   background-size: cover;
   background-position: center;
   height: 400px; 
}



/* Footer CSS */
footer a { color: #FFF; }
footer a:hover { color: #4aab57; }
.footer-logo {  max-width: 200px; }
.footer-link {  display: block; }
p.icon { padding-left: 25px; }

p.icon .bi { 
   margin-left: -25px; 
   margin-right: 5px;
}


/* Work Gallery CSS */
.grid-square-content { 
   border-radius:5px;
   padding-top: 100%;
   transition: background-size 500ms linear;
}
 
.grid-square-content:hover {  background-size: auto 110% !important;  }


/* Responsive CSS */
@media screen and (min-width: 450px) {
}

/* Small and up */
@media screen and (min-width: 576px) {
   .banner-headline { font-size: 40px; }
   .side-by-side-bkg { height: 550px; }
   .form-headline { font-size: 24px;  }
   .footer-contact { border-bottom: 0 !important; } 
}

/* Med and up */
@media screen and (min-width: 768px) {
   .thank-you .form-container { display: block; }

   .our-team .form-container, .thank-you .form-container, .contact .form-container { visibility: hidden; }
   #contact-form { display: block; }
   section.top-banner { background-size: cover !important; background-position: center center !important; }
   .banner-left { padding-top: 120px; }
   .banner-right, .banner-bottom { background-color: transparent; }
   .banner-headline { font-size: 48px; }
   .form-headline { font-size: 19px;  }
   .side-by-side-bkg { height: 480px; }
   .footer-first { border-bottom: 0 !important; }
   .footer-contact, .footer-nav { border-left: 1px solid !important;  }
}

/* Large and up */
@media screen and (min-width: 992px) {
   header { background-color: rgb(0,0,0,.66);  }
   .navbar-expand-lg .navbar-nav .dropdown-menu { 
      width: 100%;  
      background-color: #393D40;
   }
   .top-banner {
      position: relative;
      top: -163px;
      padding-top: 163px;
      margin-bottom: -163px;
   }

   .form-headline { font-size: 22px;  }
   .side-by-side-bkg { height: 450px; }
   .head-start, .cont-start { text-align: left; }
   .button-start { float: left; }
   .banner-left { padding-right: 3rem; }
   .footer-logo {  max-width: 240px; }
}

@media screen and (min-width: 1050px) {
   .form-headline { font-size: 24px;  }
}

@media screen and (min-width: 1200px) {
   .left-side-text { padding-left: calc(50% - 570px); }
   .right-side-text { padding-right: calc(50% - 570px); }
   .side-by-side-bkg { height: 550px; }
}

/* X-Large and up */
@media screen and (min-width: 1600px) {
   .container-wide .side-by-side-bkg, .container-fluid .side-by-side-bkg { height: 650px; }
}

@media screen and (min-width: 1800px) {
   .container-wide .side-by-side-bkg, .container-fluid .side-by-side-bkg { height: 750px; }
}

@media screen and (min-width: 2300px) {
   .container-wide .side-by-side-bkg, .container-fluid .side-by-side-bkg { height: 850px; }
}