/* -----------------------------
  image paragraph component
-------------------------------*/
.home-intro {
  padding: 5vh;
}
.home-intro img {
  width: 80%;
  max-width: 6400px;
  box-shadow: rgba(121, 139, 64, 0.8) 5px 5px, rgba(121, 139, 64, 0.4) 10px 10px, rgba(121, 139, 64, 0.2) 15px 15px, rgba(121, 139, 64, 0.1) 20px 20px, rgba(121, 139, 64, 0.05) 25px 25px;
}
.home-intro .flex-container {
  justify-content: end;
}

/*-------------------------------
  services preview component
---------------------------------*/
.services-preview {
  position: relative;
  padding: 50px 15px;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 100%), url(/imageserver/UserMedia/bnwinstall/xhero_background.jpg.pagespeed.ic.A_aWknuBFF.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}
.services-preview h2 {
  color: var(--secondary-color);
  font-size: 1.8rem;
}
.services-preview .services-wrapper {
  max-width: 1450px;
  margin: 0px auto;
}
.services-preview .services-card {
  margin: 15px;
  padding: 15px;
  background: #222;
}
.services-preview i {
  color: #fff;
  padding: 15px;
  border: 4px solid #fff;
  font-size: 2.5em !important;
  border-radius: 50%;
}
.services-preview h2.big-h {
  color: #fff;
  border-bottom: 1px solid #888;
  padding-bottom: 10px;
  font-size: 1.8rem;
}

/* -------------------
  reviews component
----------------------*/
.reviews {
  position: relative;
  padding: 70px 0px;
  min-height: 32rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(/imageserver/UserMedia/lasloroofing/gallery/41.jpg);
}
.reviews .content-wrapper {
  text-align: center;
}
.reviews .content-wrapper #quote-carousel {
  padding: 0 10px;
  margin-top: 40px;
}
.reviews .content-wrapper #quote-carousel .carousel-inner {
  min-height: 220px;
}
.reviews .content-wrapper #quote-carousel .carousel-inner .item blockquote {
  border-left: none;
  margin: 0;
}
.reviews .content-wrapper #quote-carousel .carousel-inner .item blockquote i {
  font-size: 30px;
  color: var(--primary-color);
}
.reviews .content-wrapper #quote-carousel .carousel-inner .item blockquote p {
  height: auto;
}
.reviews .content-wrapper #quote-carousel .carousel-control {
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
.reviews .content-wrapper #quote-carousel .carousel-indicators {
  position: relative;
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-top: 20px;
  margin-right: -19px;
}
.reviews .content-wrapper #quote-carousel .carousel-indicators li {
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0.4;
  overflow: hidden;
  transition: all 0.4s ease-in;
  vertical-align: middle;
  background: transparent;
  border: none;
}
.reviews .content-wrapper #quote-carousel .carousel-indicators .active {
  width: 128px;
  height: 128px;
  opacity: 1;
  transition: all 0.2s;
}

@media (max-width: 981px) {
  .content-wrapper {
    text-align: center;
    width: 95%;
    max-width: 100%;
  }

  #quote-carousel {
    margin-top: 30px !important;
  }
  #quote-carousel .carousel-indicators .active {
    width: 60px !important;
    height: 60px !important;
  }

  .item blockquote p {
    font-size: 0.9rem !important;
    text-align: left;
    padding: 20px;
    height: auto;
  }
}
/* ---------
  GAF Cert
-------------*/
.cert-wrapper {
  position: relative;
  padding: 70px 0px;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.85) 100%), url(/imageserver/UserMedia/cooley/asphalt-bg.jpg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cert-wrapper .cert-content {
  max-width: 90%;
  color: #ffffff;
  text-align: center;
}
.cert-wrapper h2 {
  color: var(--primary-color);
}
.cert-wrapper p {
  padding: 20px;
}

/* -----------------
   GAF for troops
-------------------*/
.troops-wrapper {
  position: relative;
  padding: 70px 0;
  background-image: linear-gradient(180deg, rgba(28, 28, 28, 0.85) 0%, rgba(28, 28, 28, 0.85) 100%), url(/imageserver/Textures/xroof4troopsflag.jpg.pagespeed.ic.hbl10fpb2-.webp);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troops-wrapper .troops-content {
  max-width: 90%;
  color: #ffffff;
  text-align: center;
}
.troops-wrapper h2.colored {
  color: var(--primary-color);
}

.maincontent {
max-width:100%;
width:100%;
padding:0;
border:0;
}


.box-gallery {
  display: flex;

  padding: 0;
  width: 100%;
  position: relative;
}
.box-gallery h3 {
  position: absolute;
  top: -55px;
}
.box-gallery .box-gallery-item {
  position: relative;
  height: 250px;
  margin: 0.5%;
  overflow: hidden;
  flex: 1 1 15em;
  transition: all 0.2s ease-in-out;

  border-radius: 5px;
}
.box-gallery .box-gallery-item svg {
  position: absolute;
  bottom: 40%;
  left: 50%;
  margin: 0 0 -28px -28px;
  font-size: 2em !important;
  border-radius: 50%;
  padding: 10px;
  background: var(--primary-color);
  color: #ffffff;
  opacity: 0;
  transition: all 0.25s;
}
.box-gallery .box-gallery-item:hover {
  filter: drop-shadow(4px 4px 6px gray);
  transform: scale(1.05);
}
.box-gallery .box-gallery-item:hover svg {
  bottom: 50%;
  opacity: 1;
}
.box-gallery .box-gallery-item:hover figure {
  opacity: 0.6;
}
.box-gallery .box-gallery-item figure {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background-size: cover;
}
.box-gallery .box-gallery-item figure:hover {
  filter: drop-shadow(4px 4px 6px gray);
  transform: scale(1.05);
}/*# sourceMappingURL=Untitled-1.css.map */

@media (max-width:981px) {
.box-gallery {
flex-wrap:wrap;
}
}