html,body{overflow-x: hidden;font-size: 16px;}
section{margin-top: 50px;}
header{margin-top: 0px;z-index: 1;}
:root {
  --primary-color: #c42d2d;  /* rgba(196, 45, 45, 1) */
  --secondary-color: #9D1616;  /* rgba(157, 22, 22, 1) */
  --tertiary-color: #DB5454;  /* rgba(219, 84, 84, 1) */
  --quarternary-color: #740000;  /* rgba(116, 0, 0, 1) */
  --quinary-color: #290000;  /* rgba(41, 0, 0, 1) */
  --black: #1d1c1c;
  --lt-gray: #f3f3f3;
}
.container-wide{margin-right: 20px;margin-left: 20px;}

h2, h3, h4, h5, p{ color:  var(--black); }

img{max-width: 100%;}

html, body {
  font-family:sans-serif, luminari;
}
h1{font-size: 3rem; font-weight: 700;}
h2{font-size: 2.5rem; font-weight: 700;}
h3{font-size: 2.25rem; font-weight: 700;}
h4{font-size: 1.75rem; font-weight: 700;}
h5{font-size: 1.5rem; font-weight: 700;}
h6{font-size: 1.25rem; font-weight: 700;}

a:focus, button:focus {
  box-shadow: none !important;
  background-color: unset;
}

.hidden{display: none;}

.text-primary{color: var(--primary-color) !important;}
.text-primary-bold{color: var(--primary-color) !important;font-weight: bold;}



/************************************************************************
***                     Display Visibility Styles                     ***
************************************************************************/
.d-sm-md-only{
  display: block !important;
}
.d-lg-only{
  display: none !important;
}
.d-md-lg-only{display: none !important;}
.d-flex-md-lg-only { display: block;}

@media only screen and (min-width:600px){
  .d-flex-md-lg-only { display: flex;}
}
@media only screen and (min-width:768px){
  .d-md-lg-only{display: block !important;}
}
@media only screen and (min-width:992px){
  .d-sm-md-only{
    display: none !important;
  }
  .d-lg-only{
    display: block !important;
  }
}



/************************************************************************
***                           Navbar Styles                           ***
************************************************************************/

#navigation {
  background-color: var(--primary-color);
}
#navigation:after{ 
position: absolute;   
content: '';
top: 0;
height: 115px;
width: 100%;
background-color: transparent;
opacity: .4;
} 
#navigation.sticky, #navigation.open {
  background-color: var(--primary-color);
  z-index: 900;
}
#navigation.sticky .logo-img-webp{
  margin: 0;
}
.navbar{padding: 0;}
.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link a, .dropdown-item, .dropdown-item a {
  color: rgba(255,255,255,1);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link a:hover, .dropdown-item:hover, .dropdown-item a:hover {
  color: rgba(255,255,255,.8);
}
.navbar{z-index: 1000;}
.navbar-nav{margin-right: 20px;}
.navbar-brand img{max-height: 60px;}
.logo-img-webp{
  position: relative;
  height: 80px;
  width: 80px;
  float: left;
  margin: 5px 0 10px;
}
#logo-img {
  content: '';
  background-image: url(/assets/images/logo2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 60px;
  padding-left: 60px;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  right: 6px;
  top: .8em;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
.dropdown-submenu .dropdown-menu a {
  padding: .25rem 2.5rem;
}
.dropdown-submenu .dropdown-menu .dropdown-submenu .dropdown-menu a {
  padding: .25rem 3.5rem;
}
.navbar-side-button a {
  display: block;
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  padding: 10px 25px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.navbar-side-button a:hover {
  color: var(--quinary-color);
  background-color: #fff;
}

/************************************************************************
***                           Banner Styles                           ***
************************************************************************/
.banner {
  position: relative;
  height: max-content;
  width: 100%;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}  
.banner:after{ 
  position: absolute;   
  content: '';
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: .4;
} 
.banner-caption{
  position: relative;
  padding: 30px 20px;
  z-index: 1;
  right: unset;
  left: unset;
  top: unset;
  bottom: unset;
}
.banner-caption h2{
  color: #fff;
  margin-bottom: 30px;
}
.banner-caption .lead{
  color: #fff;
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 30px;
}
.banner-caption a{
  display: inline-block;
  color: #fff;
  margin: 30px 0px;
  padding: 25px 40px;
  outline: none;/*
  border: 2px solid var(--primary-color);
  background-color: transparent;  */
}
.banner-caption a:hover{
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}



/************************************************************************
***                         Jumbotron Styles                          ***
************************************************************************/
.jumbotron {
  position: relative;
  overflow: hidden;
  background-color:black;
  padding: 0;
}
.jumbotron video {
  position: absolute;
  z-index: 1;
  top: -55px;
  width:100%;
  height:100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity:0.65;
  height: 450px;
}
.jumbotron .container {
  z-index: 2;
  position: relative;
}



/************************************************************************
***                         Page Header Styles                        ***
************************************************************************/
.banner-top{margin-top: 100px;}
.cracked-pavement{
  /*   rgba sets the dark overlay    */
  background: linear-gradient(0deg,
  rgba(0,0,0,0.5),
  rgba(0,0,0,0.5)),
  url("/assets/images/banner-cracked-pavement.webp");
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*   these set the focus point on the background image    */
  background-position-x: 70%;
  background-position-y: 40%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cracked-pavement h4{
  background-color: rgba(256,256,256,0.7);
  padding: 10px 20px;
  margin-top: 50px;
}
.page-header{
  width: 100%;
  padding: 50px 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page-header, 
.page-header h1, 
.page-header h2, 
.page-header h3, 
.page-header p, 
.page-header a{color: #fff;}

.page-header-caption.position1{
  right: 15%;
  top: 20%;
  left: 15%;
}






/************************************************************************
***                         Background Styles                         ***
************************************************************************/
/* Primary Background Colors */
.bg-primary{
  background-color: var(--primary-color) !important;
  color: #fff;
}
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary p,
.bg-primary a {
  color: #fff;
}
.bg-primary a:hover {
  opacity: 80%;
}
/* Secondary Background Colors */
.bg-secondary{
  background-color: var(--secondary-color) !important;
  color: #fff;
}
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6,
.bg-secondary p,
.bg-secondary a {
  color: #fff;
}
.bg-secondary a:hover {
  color: var(--tertiary-color);
}
/* Tertiary Background Colors */
.bg-tertiary{
  background-color: var(--tertiary-color) !important;
  color: #fff;
}
.bg-tertiary h2,
.bg-tertiary h3,
.bg-tertiary h4,
.bg-tertiary h5,
.bg-tertiary h6,
.bg-tertiary p,
.bg-tertiary a {
  color: var(--quinary-color);;
}
.bg-tertiary a:hover {
  color: var(--quinary-color);
  opacity: 80%;
}
/* Quarternary Background Colors */
.bg-quarternary{
  background-color: var(--quarternary-color) !important;
  color: #fff;
}
.bg-quarternary h2,
.bg-quarternary h3,
.bg-quarternary h4,
.bg-quarternary h5,
.bg-quarternary h6,
.bg-quarternary p,
.bg-quarternary a {
  color: #fff;
}
.bg-quarternary a:hover {
  color: var(--tertiary-color);
}
/* Quinary Background Colors */
.bg-quinary{
  background-color: var(--quinary-color) !important;
  color: #fff;
}
.bg-quinary h2,
.bg-quinary h3,
.bg-quinary h4,
.bg-quinary h5,
.bg-quinary h6,
.bg-quinary p,
.bg-quinary a {
  color: #fff;
}
.bg-quinary a:hover {
  color: var(--tertiary-color);
}
/* Light Gray Background Colors */
.bg-lt-gray{
  background-color: #f5f1f1;
  color: #1d1c1c;
}
.bg-lt-gray h2,
.bg-lt-gray h3,
.bg-lt-gray h4,
.bg-lt-gray h5,
.bg-lt-gray h6,
.bg-lt-gray p,
.bg-lt-gray a {
  color: #1d1c1c;
}
.bg-lt-gray a:hover {
  color: var(--tertiary-color);
}
/* Black Background Colors */
.bg-black{
  background-color: #1d1c1c;
  color: #f5f1f1;
}
.bg-black h2,
.bg-black h3,
.bg-black h4,
.bg-black h5,
.bg-black h6,
.bg-black p,
.bg-black a {
  color: #f5f1f1;
}
.bg-lt-gray a:hover {
  color: var(--tertiary-color);
}
.bg-black i{
  color: var(--primary-color);
}
.bg-contract-shield {
  /*   rgba sets the dark overlay    */
  background: linear-gradient(0deg,
  rgba(0,0,0,0.0),
  rgba(0,0,0,0.0)),
  url("/assets/images/contract-shield.png");
  /*   these set the focus point on the background image    */
  background-position-x: 50%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  position: relative;
  height: max-content;
  width: 100%;
  -webkit-background-size: contain;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: contain;
  display: flex;
  flex-direction: column;
  height: auto;
  padding-bottom: 190px;
}  




/************************************************************************
***                          Overlay Styles                           ***
************************************************************************/
.overlay-black-4{
  position: relative;
}
.overlay-black-4:after{ 
position: absolute;   
content: '';
top: 0;
height: 100%;
width: 100%;
background-color: #000;
opacity: .4;
} 




/************************************************************************
***                           Button Styles                           ***
************************************************************************/
.btn {
  display: block;
  position: relative;
  padding: 10px 25px;
  margin: 20px 0;
  border: 1px solid;
  border-radius: 0;
  font-weight: 700;
}
.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus  {
  color: var(--primary-color);
  background-color: transparent;
  border-color: var(--primary-color);
}
.btn-white{
  color: var(--primary-color) !important;
  background-color: #fff;
  border: 2px solid #fff;
  text-decoration: none;
}
.btn-white:hover{
  color: #fff !important;
  background-color: transparent;
  border: 2px solid #fff;
  opacity: 1 !important;
}
.btn-white-transparent{
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  text-decoration: none;
}
.btn-white-transparent:hover{
  color: var(--primary-color);
  background-color: #fff;
  border: 2px solid #fff;
  opacity: 1 !important;
}
.side-menu-button,
.filter-button{
    font-size: 15px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;

}
.side-menu-button.active,
.filter-button:hover{
    font-size: 18px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: var(--secondary-color);

}
.btn-default:active .filter-button:active{
    background-color: var(--secondary-color);
    color: white;
}
.cntr-btn{
  display: flex;
}
.cntr-btn button{margin: auto;}

/************************************************************************
***                           Spacing Styles                           ***
************************************************************************/
.mb-0{margin-bottom: 0px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}
.mb-75{margin-bottom: 75px;}
.mb-100{margin-bottom: 100px;}
.mb-150{margin-bottom: 150px;}
.mb-175{margin-bottom: 175px;}
.mt-0{margin-top: 0px;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}
.mt-40{margin-top: 40px;}
.mt-50{margin-top: 50px;}
.mt-75{margin-top: 75px;}
.mt-100{margin-top: 100px;}
.mt-150{margin-top: 150px;}
.mt-neg-100{margin-top: -100px;}
.mt-neg-150{margin-top: -150px;}

.p-0{padding: 0px;}
.p-20{padding: 20px;}
.p-30{padding: 30px;}
.p-40{padding: 40px;}
.p-50{padding: 50px;}
.p-75{padding: 75px;}
.p-100{padding: 100px;}
.pb-0{padding-bottom: 0px;}
.pb-20{padding-bottom: 20px;}
.pb-30{padding-bottom: 30px;}
.pb-40{padding-bottom: 40px;}
.pb-50{padding-bottom: 50px;}
.pb-75{padding-bottom: 75px;}
.pb-100{padding-bottom: 100px;}
.pt-0{padding-top: 0px;}
.pt-20{padding-top: 20px;}
.pt-30{padding-top: 30px;}
.pt-40{padding-top: 40px;}
.pt-50{padding-top: 50px;}
.pt-75{padding-top: 75px;}
.pt-100{padding-top: 100px;}
.pt-150{padding-top: 150px;}
.pr-30{padding-right: 30px;}


.w-150{width:100%;max-width:150px;}
.w-200{width:100%;max-width:200px;}
.w-300{width:100%;max-width:300px;}
.w-400{width:100%;max-width:400px;}
.w-500{width:100%;max-width:400px;}
@media only screen and (min-width: 1200px){
  .w-500{max-width:500px;}
}


.my-3{border-top: 1px solid rgba(0,0,0,.0);}


.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.flex-col-top {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  text-align: left;
}


/************************************************************************
***                         As Seen On Styles                         ***
************************************************************************/
.as-seen-on{
  margin-top: 0;
  padding: 20px;
}
.as-seen-on .row{
  padding: 20px 0;
}
.as-seen-on img{
  height: 50px;
  width: auto !important;
  margin: auto !important;
  filter: grayscale(100%);
}
.as-seen-on a:hover img{
  height: 50px;
  width: auto !important;
  margin: auto !important;
  filter: none;
}
.as-seen-on button.slick-arrow{display: none;}

/************************************************************************
***                            Card Styles                            ***
************************************************************************/
.cards [class*="col-"] {
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}
.cards .card{ 
  height: 100%; 
  padding-bottom: 50px;
  transition: 1s all ease;
}
.cards .card:hover{
  transform: translateY(-20px);
  transition: 1s all ease;
}
.card a { 
  position: absolute;
  bottom: 20px;
  /* centered horizontally */
  left: 50%;
  transform: translate(-50%, 0%); 
  /* end centering */
}
.card-icon-bg-spin{
  position: relative;
  display: block;
  text-align: center;
  padding: 38px 0;
}
.card-icon-bg-spin:before {
  position: absolute;
  content: "";
  width: 55px;
  height: 55px;
  left: 0;
  top: 43px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(45deg);
  z-index: 2;
  transition: 1s all ease;
}
.card-icon-bg-spin:after {
  position: absolute;
  content: "";
  width: 55px;
  height: 55px;
  left: 0;
  top: 30px;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(45deg);
  z-index: 1;
  transition: 1s all ease;
}
.card:hover .card-icon-bg-spin:before {
    transform: rotate(135deg);
    transition: 1s all ease;
}
.card:hover .card-icon-bg-spin:after {
  transform: rotate(-45deg);
  transition: 1s all ease;
}
.card-icon-bg-spin i{
  position: relative;
  font-size: 50px;
  z-index: 5;
}

/* Black Card Styles */
.black-cards .card{
  background-color: #1d1c1c;
  color: #fff;
  text-align: center;
}
.black-cards .card:hover{
  background-color: var(--primary-color);
}
.black-cards .card h2,
.black-cards .card h3,
.black-cards .card h4,
.black-cards .card h5,
.black-cards .card h6,
.black-cards .card p,
.black-cards .card a {
  color: #fff;
}
.black-cards .card .card-icon-bg-spin:before {
  background-color: #4c4b4b;
}
.black-cards .card .card-icon-bg-spin:after {
  background-color: #2d2c2c;
}
.black-cards .card:hover .card-icon-bg-spin:before {
    background-color: var(--secondary-color);
}
.black-cards .card:hover .card-icon-bg-spin:after {
  background-color: var(--tertiary-color);
}
.black-cards .card-icon-bg-spin i{color: var(--primary-color);}
.black-cards .card:hover i{color: #fff;}
.black-cards h5{
  display: flex;
  min-height: 75px;
  justify-content: center;
  align-items: center;
}
.black-cards .card p{
  margin-bottom: 35px;
}
.black-cards .card a {
  border: 2px solid #fff;
}
.black-cards .card a:hover {
  color: var(--primary-color);
}

.black-cards .card a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  opacity: 0;
  z-index: -1;
  transition: .5s all ease;
  background-color: #fff;
}
.black-cards .card a:hover:before {
  width: 50%;
  opacity: 1;
}
.black-cards .card a:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  opacity: 0;
  z-index: -1;
  transition: .5s all ease;
  background-color: #fff;
}
.black-cards a:hover:after {
  width: 51%;
  opacity: 1;
}



/************************************************************************
***                        Slick Slide Styles                         ***
************************************************************************/
.items {
  width: 100%;
  margin: 0px auto;
  margin-top: 0;
}
.slick-slide {
  margin: 10px 0;
}
.slick-slide img {
  width: 100%;
  border: 0px solid #fff;
}
















.align-items-cntr{align-items: center;}
.projects .nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
  width: 50%;
}







/************************************************************************
***                          Animated Styles                          ***
************************************************************************/
a.btn-call {
  display: flex;
  background-color: #0975c2;
  color: #fff;
  padding: 10px 20px;
  max-width: 100px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #115b98; -webkit-box-shadow: 0 0 3px#115b98; }
  50% { background-color: #0975c2; -webkit-box-shadow: 0 0 40px#0975c2; }
  100% { background-color: #115b98; -webkit-box-shadow: 0 0 3px#115b98; }
}

@-moz-keyframes glowing {
  0% { background-color:#115b98; -moz-box-shadow: 0 0 3px #115b98; }
  50% { background-color:#0975c2; -moz-box-shadow: 0 0 40px#0975c2; }
  100% { background-color:#115b98; -moz-box-shadow: 0 0 3px #115b98; }
}

@-o-keyframes glowing {
  0% { background-color: #115b98; box-shadow: 0 0 3px #115b98; }
  50% { background-color: #0975c2; box-shadow: 0 0 40px#0975c2; }
  100% { background-color: #115b98; box-shadow: 0 0 3px #115b98; }
}

@keyframes glowing {
  0% { background-color: #115b98; box-shadow: 0 0 3px #115b98; }
  50% { background-color: #0975c2; box-shadow: 0 0 40px #0975c2; }
  100% { background-color:#115b98; box-shadow: 0 0 3px #115b98; }
}





.bg-blue{
  background-color: #0975c2;
}
.dropdown-menu,.dropdown-submenu{background: transparent;border: none;}
/* Page content */
.content {
padding: 16px;
}
.dropdown-item:focus, .dropdown-item:hover {
    text-decoration: none;
    background-color: transparent;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky, .open {
position: fixed;
top: 0;
width: 100%;
}

#error-msg, #thanks,
#error-msg1, #thanks1,
#error-msg2, #thanks2{margin-top:20px;display: none;}
.error{border: 2px solid red;}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}




section.full-width{margin-top:50px;margin-bottom:50px;display: flex;}
.full-width .container{margin-top:50px;margin-bottom:50px;}

.signature{font-family: 'Brush Script MT', cursive;font-size: 2rem;}




/************************************************************************
***                          Sidebar Styles                          ***
************************************************************************/
#sidebar {
  z-index: 1000;
  overflow-y: auto;
  background: transparent;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#sidebar .sidebar-header {
  background-color:  transparent;
  font-size: 28px;
  font-weight: 800;
  line-height: 52px;
  text-align: center;
  border-bottom: 1px solid transparent;
  color: var(--black);
  display: block;
  text-decoration: none;
}

#sidebar .sidebar-header a:hover {
  color: #fff;
}

#sidebar .nav{
  
}

#sidebar .nav li {
  display: block;
  position: relative;
  background: none;
  width: 100%;
  padding: 16px 24px;
  border-bottom: 1px solid var(--lt-gray);
  overflow: hidden;
}
#sidebar .nav li:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 97%;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  transition: all 0.25s ease-in-out;
}
#sidebar .nav li.active::after,
#sidebar .nav li:hover::after {
  left: 0;
}
#sidebar .nav li.active,
#sidebar .nav li:hover {
  position: relative;
  background: transparent;
  width: 100%;
  right: 0;
  padding: 16px 24px;
}
#sidebar .nav li.active a,
#sidebar .nav li:hover a {
  color: #fff;
  text-decoration: none;
}
#sidebar .nav a {
  display: block;
  position: relative;
  z-index: 2;
  background: none;
  color: var(--primary-color);
  font-size: 14px;
  text-decoration: none;
}
#sidebar .nav a:hover {
  text-decoration: none;
}
#sidebar .nav a i{
  margin-right: 16px;
}
#sidebar-block{
  background-color: var(--quarternary-color);
  margin: 30px 0;
}
#sidebar-block .content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
#sidebar-block .content p{color: #fff;}










/************************************************************************/
/***                           List Styles                            ***/
/************************************************************************/
ul.fa-icon li {
  display: block;
  position: relative;
}
ul.fa-icon li i {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}
.icon-secondary i{color: var(--secondary-color);}









.bg-aerial-red{
  position: relative;
  /*   rgba sets the dark overlay    */
  background: linear-gradient(0deg,
  rgba(41, 0, 0, .9),
  rgba(41, 0, 0, .9)),
  url("/assets/images/banner-neighborhood.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*   these set the focus point on the background image    */
  background-position-x: 70%;
  background-position-y: 40%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.floater-box{
  padding: 50px 30px 20px;
  margin: -150px 10px 100px;
}
.floater-box:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: -120px;
  width: 78%;
  max-width: 1000px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--tertiary-color);
}

.bg-aerial-red h2, .bg-aerial-red h3,
 .bg-aerial-red p, .bg-aerial-red a, 
 .bg-aerial-red h4{
  color: #fff;
}
.bg-aerial-red .btn{
  display: block;
  position: relative;
  background-color: #fff;
  border: 2px solid #fff;
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 30px;
  padding: 15px 30px;
}
.bg-aerial-red .btn:before{
  position: absolute;
  left: 0;
  width: 51%;
  transition: 0.5s all ease;
}
.bg-aerial-red .form-group{
  padding: 0 10px 20px;
}
.bg-aerial-red .form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #fff;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bg-aerial-red .form-control::placeholder{
  color: #fff;
  opacity: .65;
}

.firepit-sun-blue-webp{
  /*   rgba sets the dark overlay    */
  background: linear-gradient(0deg,
  rgba(9,117,194,0.9),
  rgba(9,117,194,0.9)),
  url("/assets/images/firepit-sun.webp");
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*   these set the focus point on the background image    */
  background-position-x: 70%;
  background-position-y: 40%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.firepit-sun-blue-webp h2, .firepit-sun-blue-webp h3,
 .firepit-sun-blue-webp p, .firepit-sun-blue-webp a, 
 .firepit-sun-blue-webp h4{
  color: #fff;
}


.firepit-sun-blue-webp .container,
.firepit-sun-blue .container{
  margin-top: 20px;
  margin-bottom: -10px;
}





/************************************************************************/
/***                      Call-to-Action Styles                       ***/
/************************************************************************/
.cta-small{
  text-align: center;
  padding: 30px;
  margin: auto;
}
.cta-btns { display: inline-flex; width: 100%;}
.cta-btn { margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 30px;}
.cta-logo{
  display: flex;
  width: 100%;
}
.cta-logo img{
  margin: 0 auto 30px;
}

/************************************************************************/
/***                           Image Styles                           ***/
/************************************************************************/
.img-rt{display:flex;padding-bottom: 30px;margin-left: auto;margin-right: auto;}
.img-lt{display:flex;padding-bottom: 30px;margin-left: auto;margin-right: auto;}
.round{border-radius: 50%;}



/************************************************************************/
/***                           Footer Styles                          ***/
/************************************************************************/
#footer a{
    color: #fff;
    text-decoration: none;
    transition: 0.5s all ease;
}
#footer a:hover{
  color: var(--primary-color);
  text-decoration: none;
  letter-spacing: 1px;
  transition: 0.5s all ease;
}
#footer .head1 {
  text-align: center;
  font-size: 1.5rem;
}
#footer ul {
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0;
}
#footer ul li {
  margin-bottom: 15px;
}
#footer-bottom .footer-bottom-content{
  border-top: 1px solid rgba(256,256,256,0.3);
  padding: 30px 0 40px;
}
#footer-bottom .social, #footer-bottom .copyright{
    float: none;
    text-align: center;
}
#footer .head {
  margin-bottom: 25px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
}
#footer .contact-info .info {
  width: 200px;
}
#footer .contact-info .info li {
  margin-bottom: 25px;
}
#footer .contact-info .info a {
  display: flex;
  line-height: 25px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: left;
}
#footer .contact-info .info a:hover {
  color: var(--primary-color);
  letter-spacing: 1px;
}
#footer .contact-info .info a i {
  font-size: 25px;
  margin-right: 15px;
  width: 25px;
  text-align: right;
}
#footer ul.fa-icon{ width: 200px;}
#footer ul.fa-icon i{ font-weight: 600;}




/************************************************************************/
/***                           Form Styles                           ***/
/************************************************************************/
.form-row {
  display: flex;
  flex-wrap: wrap;
}
.form-group{
  padding: 5px;
}
.form-group .form-control{
  width: 100%;
}
.form-top{
  margin-top: 0;
  padding: 10px 0;
}
#contact-top{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#contact-top button{
  margin: auto;
}
#contact-top .form-group{
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}









/************************************************************************/
/***                          Gallery Styles                          ***/
/************************************************************************/
.gallery-title{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.port-image{
    width: 100%;
}

.gallery_product{
    margin-bottom: 30px;
}
.gallery-title{
    font-size: 36px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.port-image{
    width: 100%;
}

.gallery_product{
    position: relative;
    margin-bottom: 30px;
    height: 200px;
    vertical-align: middle;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}

.gallery_product img{
  position: absolute;
  top:-100%; left:0; right: 0; bottom:-100%;
  min-height: 200px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: 20px;
}




/************************************************************************/
/***                         Icon Note Styles                         ***/
/************************************************************************/
.icon-notes .icon-note{
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.icon-notes .icon-note .icon-note-icon{
  position: relative;
}
.icon-notes .icon-note .icon-note-icon i{
  font-size: 55px;
  margin-right: 65px;
  position: relative;
  z-index: 1;
}
.icon-notes .icon-note .icon-note-icon img{
  position: absolute;
  left: -17px;
  bottom: -17px;
}
.floater-box.icon-notes .icon-note .icon-note-icon img{
  position: absolute;
  left: -33px;
  bottom: -30px;
}
.floater-box.icon-notes .icon-note .icon-note-icon i{
  font-size: 50px;
}



/************************************************************************/
/***                           Modal Styles                           ***/
/************************************************************************/
#modal-quote .modal-header {
  flex-direction: column;
}
  #modal-quote .modal-content {
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  background-color: rgba(157, 22, 22, 0.9);
}
.modal-colors .modal-content {
  padding: 50px 15px;
  border: 2px solid #2a3a4a;
  border-radius: 5px;
  background-color: rgba(256,256,256, 0.8);
}
.modal-title{margin-top: 50px;}
.modal-message{margin-bottom: 50px;}
.modal-title h3 {
  font-size: 35px;
  line-height: 50px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 47px;
}
.modal-message p, #contact-main label {
  font-size: 1rem;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: .1rem;
  color: #ffffff;
  margin-top: 10px;
}
#thanks, #error-msg,
#thanks1, #error-msg1 {
  font-size: 1rem;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: .1rem;
  color: #ffffff;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  margin: 20px 0;
  display: none;
}
#modal-close{
  color: #fff;
  margin-right: auto;
  background-color: transparent;
  border: 1px solid #fff;
}

input.error,
input.form-control.error,
textarea.form-control.error { border: #ff0000 solid 3px; }

#contact-modal label {
  margin-top: 20px;
  color: #fff;
  font-weight: 400;
}

.quote-qs{display: none;}

ul#paverstyles, ul#copingstyles { margin-top: 50px;}
ul#paverstyles a, ul#copingstyles a { color: #0975c2; font-size: .85rem; font-weight: 500; padding-left: .6rem; padding-right: .6rem;}
ul#paverstyles a:hover, ul#paverstyles a.active, ul#copingstyles a:hover, ul#copingstyles a.active { color: #fff; background-color: #0975c2;}
.paver-style h3, .paver-style h5 {
  margin: 30px 0px 30px;
}
.paver-style .main-img {
  width: 100%;
  margin-bottom: 30px;
}
.paver-style .block-img {
  display: block;
  width: 90%;
  margin: 0 auto 25px;
}
.paver-style .sizes{
  display: flex;
  flex-direction: column;
  margin: auto;
}
.paver-colors div { margin: auto;}
.paver-colors img { margin: 0 auto 30px !important;}





/************************************************************************/
/***                        Info-Block Styles                         ***/
/************************************************************************/
.info-block {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-block h3{
  font-size: 1.5rem;
}
.info-block p{
  font-size: 1rem;
}
.info-block ul{
  padding-left: 3rem;
}





/************************************************************************/
/***                        Quick Links Styles                        ***/
/************************************************************************/
.quick-links{
  background-color: var(--baby-blue);
  padding: 50px 0;
}
#q-link svg path#icon-bg{
  background: var(--quinary-color);
  fill: var(--quinary-color);
}








@media only screen and (min-width: 768px){
  ul#paverstyles, ul#copingstyles { margin-top: 50px;}
  ul#paverstyles a, ul#copingstyles a { color: #0975c2; font-size: 1rem; font-weight: 500; padding-left: 1rem; padding-right: 1rem;}
  ul#paverstyles a:hover, ul#paverstyles a.active, ul#copingstyles a:hover, ul#copingstyles a.active { color: #fff; background-color: #0975c2;}
  .paver-style h3, .paver-style h5 {
    margin: 30px 0px 30px;
  }
  .paver-style .main-img {
    width: 100%;
    margin-bottom: 30px;
  }
  .paver-style .block-img {
    display: block;
    width: 90%;
    margin: 0 auto 25px;
  }
  .paver-style .sizes{
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  .paver-colors div { margin: auto;}
  .paver-colors img { margin: 0 auto 30px !important;}
}

@media only screen and (min-width: 600px){
  header{margin-top: 0px;z-index: 1;}
  .carousel-item {
  }
  #logo-img {
    background-image: url(/assets/images/logo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-left: 105px;
  }
  #navigation.sticky .logo-img-webp{
    background-image: url(/assets/images/logo2.png);
    height: 100px;
    width: 105px;
    margin: 5px 0 10px;
  }
  #navigation.sticky #logo-img {
    background-image: url(/assets/images/logo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-left: 105px;
    margin: 5px 0 10px;
  }
  .jumbotron {
    height: 400px;
  }
  .jumbotron video {
    height: 550px;
  }
  .banner-top{margin-top: 150px;}
  div.modal-dialog { max-width: 900px; }
}

@media only screen and (min-width: 768px){
  .img-rt{
      display:flex;
      padding-bottom: 30px;
      margin-left: 30px;
      margin-right: 0;
      float: right;
  }
  .img-lt{
      display:flex;
      padding-bottom: 30px;
      margin-left: 0;
      margin-right: 30px;
      float: left;
  } 
  .projects .nav-justified .nav-item {
    flex-basis: 0;
  }
  .banner-side-img img{ 
    width: 100%;
    max-width: 600px;
    padding: 50px 0px 70px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 992px){
  .dropdown-item, .dropdown-item a {
    color: rgba(9,117,194,.7);
  }
  .dropdown-item:hover, .dropdown-item:hover a {
    color: rgba(9,117,194,1);
  }
  .carousel-item {  
  } 
  .carousel-caption {
    position: relative;
    z-index: 10;
    padding: 70px 40px;
    color: #fff;
    text-align: Left;
  }
  .carousel-caption h2{color: #fff;margin-bottom: 30px;}
  .carousel-caption .lead{
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 30px;
  }
  .banner-side-img img{ 
    width: 100%;
    max-width: 600px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -70px;
    margin-top: 30px;
  }
  .container-wide{margin-right: 50px;margin-left: 50px;}
  .img-rt{
    display:flex;
    padding-bottom: 30px;
    margin-left: 30px;
    margin-right: 0;
    float: right;
  }
  .img-lt{
      display:flex;
      padding-bottom: 30px;
      margin-left: 0;
      margin-right: 30px;
      margin-top: 0;
      margin-bottom: -50px;
      float: left;
  } 
  #footer-bottom .copyright{
      float: left;
      text-align: center;
  }
  #footer-bottom .social{
      float: right;
      text-align: center;
  } 
  #footer-bottom .social a{
    min-width: 227px;
    display: inline-flex;
    position: relative;
  }
  .dropdown-menu, .dropdown-submenu {
      background: var(--secondary-color);
      color: #fff;
  }
  .dropdown-menu a, .dropdown-submenu a{
      color: #fff;
  }
  .dropdown-menu a:hover, .dropdown-submenu a:hover{
      color: #fff;
      background-color: var(--quarternary-color);
  }
  .jumbotron {
    height: 500px;
  }
  .jumbotron video {
    height: 650px;
  }
  .banner-top{margin-top: 200px;}
  div.modal-dialog { max-width: 1000px; }
  #logo-img {
    background-image: url(/assets/images/logo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-left: 150px;
  }
}

@media only screen and (min-width: 1200px){
  #logo-img {
    background-image: url(/assets/images/logo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    padding-left: 105px;
  }
}

.balanced-blocks .bal-block{
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
}