/*----CSS / RAY WEED ----*/

/*----colors-----
Top bar (red): cc3a21

Buttons (gold): dca44d
Box (purplish): 515b79
Logo pillars: eda446
medium blue: 898989
dark blue: 4f4f4f
background light: f5f5f5
light blue text and social media: d8d6dd
*/

/*----google fonts----
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/

body {
  background: #fff;
  color: #4f4f4f;
  font-family: "Open Sans", sans-serif;


}

* {box-sizing: border-box;}

a {
  color: #898989;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #726b6b;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 25px 0;
  /*font-family: "Montserrat", sans-serif;*/

}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans Condensed', sans-serif;
  margin: 0 0 20px 0;
  padding: 0;
}

h5, h6  {
  text-transform: uppercase;
}

.slick-viewport  {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
}

/*-- SPINNER LOADER CSS --*/
#loading  {
  position: absolute;
  z-index: 9999;
  left: 50%; /*-- center spinner on page horizontally --*/
  top: 50%; /*-- verticle position on page --*/
  height: 100%;
  width: 100%;
  margin-left: -10px; /*-- accounts for size of spinner --*/

}
ion-spinner  {
  transform: scale(4); /*-- size of spinner --*/
  color: white!important; /*-- color of spinner --*/
}
@media screen and (max-width: 768px)  {
  #loading  {
    position: absolute;
    z-index: 9999;
    left: 50%; /*-- center spinner on page horizontally --*/
    top: 45%; /*-- verticle position on page --*/
    height: 100%;
    width: 100%;
    margin-left: -10px; /*-- accounts for size of spinner --*/
  }
  ion-spinner  {
    transform: scale(3); /*-- size of spinner --*/
    color: white!important;
  }
}
/*-- END SPINNER --*/


/*----- TOP-HEADER -----*/
#top-header  {
  background-color: #000;
  padding: 15px 70px!important;
  height: 50px;
}
@media screen and (min-width: 768px) and (max-width: 1024px)  {
#top-header  {
  margin-bottom: 0;
}
}
@media screen and (max-width: 768px)  {
#top-header  {
  padding: 18px 20px!important;
  height: 50px;
}
}
.social-media ul li ion-icon  {
  color: #fff;
  font-size: 20px;
  margin: 0px;
  padding: 0px;
}
.social-media ion-icon:hover  {
  opacity: .7;
}

#top-header .social-media  {
  padding: 0;
  margin: 0;

  padding-left: 700px;
}
#top-header .social-media ul  {
  list-style-type: none;
  display: inline;
  margin: 0;
  padding: 0;
  float: left;
  width: 220px;

}

#top-header .social-media ul li  {
  display: inline;
  margin: 0;
  padding: 0;
  padding-right: 30px;
}
@media screen and (min-width: 768px) and (max-width: 1024px)  {
  #top-header .social-media  {
    padding: 0;
    margin: 0;
    padding-left: 0px!important;
  }
  #top-header .social-media ul  {
    padding-bottom: 0!important;
  }
  #top-header .social-media ul li  {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px)  {
  #top-header .social-media  {
    padding-left: 0px;
    margin-left: 0px;
    background-color: blue!important;
}
#top-header .social-media ul  {
  padding: 0;
  margin-left: 0px;
  margin-bottom: 0px;
  width: 125px;
}
#top-header .social-media ul li  {
  padding-right: 10px;
  margin-bottom: 10px;
}
.social-media ul li ion-icon  {
  color: #fff;
  font-size: 18px;
  margin: 0px;
  padding: 0px;
}
}

#top-header .text-right  {
  color: #d8d6dd;
  margin: 0px;
  padding: 0;

  text-transform: uppercase;
  font-size: .8em;
}
#top-header .text-right a  {
  color: white;
}
#top-header .text-right a:hover,
#top-header .text-right a:active,
#top-header .text-right a:focus {
  color: #f2f2f2;
  outline: none;
  text-decoration: none;
  transition: 0.5s;
}


/*--ADJUSTS CONTACT ANCHOR (DUMMY DIV) FOR CAROUSEL BUTTONS--*/
/*#anchor {
    display: block;
    position: relative;
    top: 210px;
    visibility: hidden;
}*/



/*----NAVBAR----*/
.navbar  {
  background-color: #f5f5f5;
  border-top: 1px solid #d6d2d2;
  border-bottom: 1px solid #d6d2d2;
  padding: 0 120px;
  /*margin-top: -20px;*/
}
/*@media screen and (min-width: 768px) and (max-width: 1024px)  {
.navbar  {

}
}*/

.dropdown-menu .main-li.active  {
  background-color: black!important;
}
.nav-item-1  {
  padding-right: 10px;
}

@media screen and (max-width: 768px)  {
.navbar  {
  padding: 5px 20px!important;
}
.navbar-nav  {
  padding-left: 10px;
  margin-left: 0px;
}
}

.navbar img  {
  width: 220px;
  height: auto;
}
@media screen and (max-width: 768px)  {
.navbar img  {
  width: 190px!important;
}
.navbar-toggler  {
  border: none;
}
.navbar-toggler-icon  {
  font-size: 1.5em;
}
}

.navbar .nav-item a  {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
}

.nav-link ion-icon  {
  color: #cc3a21;
  size: 32px!important;
  margin-bottom: -2px;
  margin-right: 5px;
}


/*-- CAROUSEL --*/
.carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(116,117,120,0.8);
}

.carousel-caption {
    top: 120px;
    bottom: auto;
}
.carousel-caption h5  {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
}
.carousel-caption h3  {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 4em;
  color: white;
  text-transform: uppercase;
  font-style: none;
  letter-spacing: 3px;
}
.carousel-caption p  {
  font-size: 1.5em;
  color: white;

}
@media screen and (max-width: 768px)  {
  .carousel-caption {
      top: -10px!important;
      bottom: auto;
  }
  .carousel-caption h5  {
    font-size: 1em;
    color: #f2f2f2;
    text-transform: uppercase;
    /*font-weight: bolder;*/
  }
  .carousel-caption h3  {
    font-size: 1.8em;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .carousel-caption p  {
    font-size: .9em;
    color: white;
  }
}

.col-mobile-top .text-left .btn-custom, .carousel-caption .btn-custom  {
  color: black;
  background-color: #ffff00;
  border: 0 solid #e6e1e1;
  border-radius: 3px;
}
.btn-custom:hover, .btn-custom:active, .btn-custom:focus  {
  background-color: #e6e600;
  color: black;
  outline: none !important;
  box-shadow: none !important;
}

/*-- COMMON STYLES --*/

/*----- CSS FOR 4 WIDE IMAGE GALLERY WITH MODAL POP UP -----*/
.gallery-container  {
  padding-top:  70px;
}
@media screen and (max-width: 768px)  {
.gallery-container  {
  padding-top:  45px;
}
}

.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  box-shadow: none !important;
}

#image-gallery .modal-footer{
  display: block;
}

.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}
#image-gallery button ion-icon  {
  font-size: 32px;
  color: #ffff00;
  margin: 3px 3px -1px 3px!important;
}

.modal-body  {
  width:75%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.modal-title  {
  padding-left: 100px!important;
}
@media screen and (max-width: 768px)  {
  .modal-body  {
    width:100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .thumb  {
    margin-bottom: 30px!important;
  }
  .modal-title  {
    padding-left: 10px!important;
  }
}

.modal-gallery  {
  margin-bottom: 70px;
}
@media screen and (max-width: 768px)  {
.modal-gallery  {
  margin-top: 30px;
}
}

.gallery-heading h5  {
  padding-bottom: 0px!important;
  margin-bottom: 0px!important;
}
.gallery-heading small  {
  padding-top: 10px!important;
  margin-top: 0px!important;
}

.gallery-container h5 ion-icon  {
  color: #cc3a21;
  font-size: 24px;
  margin-right: 5px;
  padding: 0px;
  margin-bottom: -3px;
}
/*--CSS GALLERY END --*/

.section-wrapper  {
  /*padding-top: 150px!important;*/
  margin-top: 80px!important;
}
@media screen and (max-width: 768px)  {
.section-wrapper {
  margin-top: 40px!important;
}
}

@media screen and (max-width: 768px)  {
.section-wrapper .btn-custom  {
  margin-top: 0px;
  margin-bottom: 20px;
  width: 100%;
}
}

/*#contact-anchor  {
  padding-top: 50px;
  margin-top: -50px;
}
@media screen and (max-width: 768px)  {
#contact-anchor  {
  padding-top: 50px;
  margin-top: -50px;
}
}*/

.col-image-top  {
  padding-top: 50px;
}
@media screen and (max-width: 768px)  {
  .col-image-top  {
    padding-top: 0px;
  }
}
.col-image-bottom  {
  padding-top: 10px;
}
@media screen and (max-width: 768px)  {
  .col-image-bottom  {
    padding-top: 0px;
  }
}


.col-mobile-top img  {
  /*margin-top: -50px!important;*/
  margin-top: -50px!important;
  margin-bottom: 20px;
}
.section-wrapper h2  {
  font-size: 1.7em;
}
.section-wrapper .section-container .section-article  {
  margin-bottom: 0px!important;
  padding-bottom: 0px!important;
}

.section-article h1  {
  font-family: 'Playfair Display', serif;
  font-size: 2.0em;
  text-transform: uppercase;
  color: black;
  /*font-weight: bolder;*/
  /*letter-spacing: 1px;*/
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/*-- SMALL PIECE OF UNDERLINE UNDER HEADING --*/
.section-article h1:after {content: ""; /* This is necessary for the pseudo element to work. */
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 8%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #cc3a21; /* This creates the border. Replace black with whatever color you want. */
}
@media screen and (max-width: 768px)  {
  .section-article h1:after {content: ""; /* This is necessary for the pseudo element to work. */
      display: block; /* This will put the pseudo element on its own line. */
      margin: 0 auto; /* This will center the border. */
      width: 25%; /* Change this to whatever width you want. */
      padding-top: 10px; /* This creates some space between the element and the border. */
      border-bottom: 2px solid #cc3a21; /* This creates the border. Replace black with whatever color you want. */
  }
}

.section-article  {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.section-wrapper .row  {
  margin-top: 0px!important;
  padding-top: 0px!important;
}

.section-wrapper ion-icon  {
  color: #cc3a21;
  font-size: 30px;
  margin-right: 15px;
  padding: 0px;
  margin-bottom: -3px;
}

/*--- PSEUDO CSS FOR NAV TARGETS TO COMPENSATE FOR FIXED NAV --*/
#about::before, #mankspond::before, #work::before  {
  display: block;
  content: " ";
  margin-top: -120px!important;
  height: 120px!important;
  visibility: hidden;
  pointer-events: none;
}
#about-anchor::before, #mankspond-anchor::before, #homes-anchor::before, #additions-anchor::before, #decks-anchor::before, #basements-anchor::before, #roofing-anchor::before, #kitchens-anchor::before, #work-anchor::before, #contact-anchor::before  {
  display: block;
  content: " ";
  margin-top: -20px!important;
  height: 30px!important;
  visibility: hidden;
  pointer-events: none;
}
@media screen and (max-width: 768px)  {
  #about::before, #mankspond::before, #work::before   {
    display: block;
    content: " ";
    margin-top: -350px!important;
    height: 350px!important;
    visibility: hidden;
    pointer-events: none;
}

  #about-anchor::before, #mankspond-anchor::before, #homes-anchor::before, #additions-anchor::before, #decks-anchor::before, #basements-anchor::before, #roofing-anchor::before, #kitchens-anchor::before, #work-anchor::before  {
    display: block;
    content: " ";
    margin-top: -20px!important;
    height: 50px!important;
    visibility: hidden;
    pointer-events: none;
  }
}

#contact-anchor::before  {
  display: block;
  content: " ";
  margin-top: -20px!important;
  height: 5px!important;
  visibility: hidden;
  pointer-events: none;
}
}

#homes::before, #additions::before, #decks::before, #basements::before, #roofing::before, #kitchens::before/*, #septic::before*/  {
display: block;
content: " ";
margin-top: -115px!important;
height: 115px!important;
visibility: hidden;
pointer-events: none;
}
@media screen and (max-width: 768px)  {
  #homes::before, #additions::before, #decks::before, #basements::before, #roofing::before, #kitchens::before/*, #septic::before*/  {
  display: block;
  content: " ";
  margin-top: -595px!important;
  height: 560px!important;
  visibility: hidden;
  pointer-events: none;
}
/*--THIS SETS Z-INDEX SO SECTION-WRAPPERS DON'T COVER BUTTONS ON MOBILE. EACH SERVICES SECTION HAS A CONTAINER WHICH ORDERS STARTING AT BOTTOM OF SERVICES AND WORKS UP. IT MOVES THE PSEUDO ELEMENTS UNDER THE SECTIONS SO EACH BUTTON IS NOT COVERED BY THE PSEUDO LAYER BELOW IT.--*/
.septic-section-container  {
  position: relative;
  z-index: 1;
}
#septic::before  {
  position: relative;
  z-index: -1;
}
.kitchens-section-container  {
  position: relative;
  z-index: 2;
}
#kitchens::before  {
  position: relative;
  z-index: 1;
}
.roofing-section-container  {
  position: relative;
  z-index: 3;
}
#roofing::before  {
  position: relative;
  z-index: 2;
}
.basements-section-container  {
  position: relative;
  z-index: 4;
}
#basements::before  {
  position: relative;
  z-index: 3;
}
.decks-section-container  {
  position: relative;
  z-index: 5;
}
#decks::before  {
  position: relative;
  z-index: 4;
}
.additions-section-container  {
  position: relative;
  z-index: 6;
}
#additions::before  {
  position: relative;
  z-index: 5;
}
.homes-section-container  {
  position: relative;
  z-index: 7;
}
#homes::before  {
  position: relative;
  z-index: 6;
}
}

#contact::before {
display: block;
content: " ";
margin-top: -120px!important;
height: 120px!important;
visibility: hidden;
pointer-events: none;
}
@media screen and (max-width: 768px)  {
  #contact::before {
  display: block;
  content: " ";
  margin-top: -350px!important;
  height: 350px!important;
  visibility: hidden;
  pointer-events: none;
}
}
/*#contact-anchor-newpage::before {
  display: block;
  content: " ";
  margin-top: -15px!important;
  height: 15px!important;
  visibility: hidden;
  pointer-events: none;
}*/


/*-- EXTRA SECTIONS --*/
.extra a {
  color: #e6e1e1;
  transition: 0.5s;
}

.extraa:hover,
.extraa:active,
.extraa:focus {
  color: #7c7878;
  outline: none;
  text-decoration: none;
}

.extra  {
  padding: 40px 120px;
}
@media screen and (max-width: 768px)  {
  .extra  {
    padding: 20px 15px;
  }
}
section img {
    width: 100%;
    /*border-radius: 6px;*/
    outline: 1px solid white;
    outline-offset: -8px;
}
@media screen and (max-width: 768px)  {
  .extra img  {
    margin-top: 10px;
  }
  .extra-1 .col-mobile-top  {
    padding-top: 40px;
  }
  section .col-mobile-top h2  {
    margin-top: -50px;
    padding-top: 0;
  }
}

.extra h2 ion-icon  {
  color: #ffff00;
  margin-bottom: -3px;
}

.extra-1  {
  background-color: #666666;
  /*border-top: 2px solid black;
  border-bottom: 2px solid #dca44d;*/
  margin-top: 0px;
  margin-bottom: 150px;
}

@media screen and (max-width: 768px)  {
  .extra-1  {
    padding-top: 0px;
    }
}
.extra-1 p {
  color: white;
}
.extra-1 h2  {
  color: #f5f5f5;
}

.extra-1 .phone  {
  color: #dbd8b8!important;
}
.extra-1 .phone:hover  {
  color: #d8d6dd!important;
}

h2 ion-icon  {
  font-size: .9em;
  color: #dca44d;
  padding-right: 12px;
}
@media screen and (max-width: 768px)  {
h2 ion-icon  {
  font-size: .9em;
}
}

/*-- ABOUT SECTION --*/

/*-- MANKS POND SECTION --*/
.col-map  {
  margin-top: 30px;
}
@media screen and (max-width: 768px)  {
.col-map  {
  margin-top: 20px;
  position: relative;
}
}

@media screen and (max-width: 768px)  {
/*#homes  {
  position: relative;
  z-index: 1;
}*/
#mankspond  {
  position: relative;
  z-index: 2;
}
.col-map iframe  {
  position: relative;
  z-index: 3;
}
}

.row-lot-status .col-md-12  {
  margin-top: 20px;
}

/*-- SERVICES SECTION --*/


/*-- CONTACT SECTION --*/
/*@media screen and (max-width: 768px)  {
  #contact-anchor  {
    margin-top: -100px;
    padding-top: 0!important;
    margin-bottom: 0!important;
  }
}*/

#contact .section-article  {
  padding-bottom: 30px;
}
#contact .contact-head  {
  padding-bottom: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (max-width: 768px)  {
#contact .contact-head h5  {
  text-align: center;
}
#contact .card-body h5  {
  text-align: center;
}
}

#contact .card-container  {
  padding: 0px;
}
#contact .card-container .card-body  {
  padding: 0px;
}

@media screen and (max-width: 768px)  {
#contact .mt-5  {
  margin-top: 0px!important;
}
}

#contact ion-icon  {
  /*margin-left: 30px;*/
  margin-right: 15px;
  color: #cc3a21;
  font-size: 32px;
  margin-bottom: -3px;
}
@media screen and (max-width: 768px)  {
#contact ion-icon  {
  font-size: .9em;
  margin-right: 5px!important;
}
.contact-head h2  {
  padding-right: 0;
  margin-right: 0;
}
}

.section-wrapper .btn-custom, #contact .btn-custom  {
  color: black;
  background-color: #ffff00;
  border: 0 solid #e6e1e1;
  border-radius: 3px;
}
#contact .btn-custom:hover, #contact .btn-custom:active, #contact .btn-custom:focus  {
  background-color: #e6e600;
  color: black;
  outline: none !important;
  box-shadow: none !important;
}


/* ===== FOOTER =====*/
footer  {
  margin-top: 40px!important;
  width: 100%;
}
footer .copyright  {
  bottom: 0;
  background-color: black;
  padding: 20px!important;
  text-align: center;
  width: 100%;
  font-size: .9em;
  letter-spacing: 2px;
  color: #dcdcdc;
}
@media only screen and (max-width:768px) {
footer  {
  width: 100%;
  margin-top: 0px;
}

  footer .copyright  {
  background-color: #333333;
  padding: 20px 10px!important;
  text-align: center;
  width: 100%;
  /*font-family: 'Open Sans', sans-serif;*/
  font-size: .8em;
  letter-spacing: 1px;
  color: #dcdcdc;
}
}

footer ion-icon  {
  color: #fff;
  font-size: 16px;
  margin: 20px 20px 0 20px;
  padding: 0px;
  margin: 10px;
}
@media screen and (max-width: 768px)  {
footer ion-icon  {
  font-size: 24px;
}
}
footer ion-icon:hover  {
  opacity: .7;
}

/*-----CWD Link in footer-----*/
footer .cwd  {
  color: #c0c0c0;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
}
footer .cwd a  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:link  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:visited  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:hover  {
  color: #c0c0c0!important;
  text-decoration: none;
  opacity: .7;
}
footer .cwd a:active  {
  color: #c0c0c0!important;
  text-decoration: none;
}

/*-----PRIVACY POLICY-----*/
.privacy-policy  {
  padding: 70px 200px!important;
}
@media screen and (max-width: 768px)  {
  .privacy-policy  {
    padding: 40px 20px!important;
  }
}

.privacy-logo img  {
  width: 200px;
  height: auto;
  border: 0px!important;
}