@charset "utf-8";
/* CSS Document */

body {
font-family: "Spectral", serif;
color: #777777;
background-color: #000000;
}

.spectral-extralight {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-style: normal;
}

.spectral-light {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: normal;
}

.spectral-regular {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
}

.spectral-medium {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: normal;
}

.spectral-semibold {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: normal;
}

.spectral-bold {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
}

.spectral-extrabold {
  font-family: "Spectral", serif;
  font-weight: 800;
  font-style: normal;
}

.spectral-extralight-italic {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-style: italic;
}

.spectral-light-italic {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: italic;
}

.spectral-regular-italic {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: italic;
}

.spectral-medium-italic {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: italic;
}

.spectral-semibold-italic {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: italic;
}

.spectral-bold-italic {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: italic;
}

.spectral-extrabold-italic {
  font-family: "Spectral", serif;
  font-weight: 800;
  font-style: italic;
}

.whisper-regular {
  font-family: "Whisper", cursive;
  font-weight: 400;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.banner-font-lg {
  font-size: 8vw;
  line-height: 1;
}
.banner-font-md {
  font-size: 6vw;
  line-height: .5;
}

.sm-footer-txt {
  font-size: .75em;
}

.md-whisper-txt {
  font-size: 3em;
}

/* Scale Images */
img {max-width:100%; height:auto;}

/* Color Scheme */
.primary {color: #858585;}
.secondary {color: #313131;}
.alternate {color: #9f0003;}
.alternate2 {color: #dfdfdf;}

.primarybg {background-color: #858585;}
.secondarybg {background-color: #313131;}
.alternatebg {background-color: #9f0003;}
.alternatebg2 {background-color: #dfdfdf;}

a {
  color: #313131;
}
a.nounderline:link {text-decoration:none;}
a.nounderline:visited {text-decoration:none;}
a.nounderline:hover {text-decoration:none;}
a.nounderline:active {text-decoration:none;}

.video-bg {
background-image: url("structure/video-placeholder.jpg");
background-size: cover; 
background-position: center top;
}

.ourteam-bg {
background-image: url("structure/short-page-header-placeholder.jpg");
background-size: cover; 
background-position: center top;
}

.transparent-black {
background-image: url("structure/transparent-black-block.png");
}

.explore {
background-position: center top; 
background-repeat: no-repeat; 
background-size: cover; 
height:150px;
}
.explore-designer {
background-image: url('structure/designer.jpg'); 
}
.explore-barndo {
background-image: url('structure/barndo.jpg'); 
}
.explore-spec {
background-image: url('structure/spec.jpg'); 
}
.explore-outbuildings {
background-image: url('structure/outbuildings.jpg'); 
}
.explore-tiny {
background-image: url('structure/tiny.jpg'); 
}
.explore-commercial {
background-image: url('structure/commercial.jpg'); 
}

.build-journey-bg {
background-image: url('structure/build-journey-bg.jpg');
background-position: center top; 
background-repeat: no-repeat; 
background-size: cover;
padding-top: 90px;
padding-bottom:90px;
}

.meet-crawfords-bg {
background-image: url('structure/meet-crawfords-bg.jpg');
background-position: center top; 
background-repeat: no-repeat; 
background-size: cover;
padding-top:90px;
padding-bottom:90px;
}

.plumbing-bg {
background-image: url('structure/plumbing-placeholder.jpg');
background-position: center top; 
background-repeat: no-repeat; 
background-size: cover;
}

.excavation-bg {
background-image: url('structure/excavation-placeholder.jpg');
background-position: center top; 
background-repeat: no-repeat; 
background-size: cover;
}

.red-button {
	background-color:#9f0003;
	padding:5px;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
}

.transparent-black-button {
  background-image: url('structure/transparent-black-block.png');
	padding:5px;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  border: solid 1px #ffffff;
}

.arc-top {
background-image: url('structure/grey-arc.jpg'); 
background-position: center bottom; 
background-repeat: no-repeat; 
background-size: cover; 
height:50px;
}

/* hide recaptcha badge */
.grecaptcha-badge { visibility: hidden; }

/* BREAKPOINTS */
@media (min-width: 992px){


  #header-compact {
      display: none !important;
    }
  
  
  #footer-compact {
      display: none !important;
    }

  #subdomains-compact {
      display: none !important;
    }
  
  #ourwork-compact {
      display: none !important;
    }
   
  }
  @media (max-width: 992px){
  
  #header-full {
      display: none !important;
    }
   
  #footer-full {
      display: none !important;
    }
   
  #subdomains-full {
      display: none !important;
    }
  
  #ourwork-full {
      display: none !important;
    }
  }
  /* END BREAKPOINTS */


  /* accordian tweaks */
  .accordion-button:not(.collapsed) {
      background-color: transparent !important;
      color: inherit;
    }

button.accordion-button:focus{
      box-shadow: inherit;
}

.inter-menu {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}


.hr-solid {
  border-top: 1px solid #bbb;
}

.menu-bg {
  background-color: #ffffff;
}

.menu-button {
background-color: #9f0003;
padding: 10px 20px 10px 20px;
color: #ffffff;
margin-bottom: 4px;;
}

/* VIDEO */
#videoDiv2 {
width:100%;
margin:auto;
display:block;
position: relative;
}

#video2 {
width:100vw;
object-fit: cover
}

#videoMessage2 {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column; 
width: 100%;
}

.compact-subdomain-menu {
  font-size: 2.5vw;
}

.arc-bottom {
  background-image: url('structure/grey-arc-lower.jpg'); 
  background-position: center bottom; 
  background-repeat: no-repeat; 
  background-size: cover;
}

/* VIDEO 3 */
#video-container {
width:100%;
margin-bottom: -6px;
display:block;
position: relative;
}

#video-source {
width:100vw;
height: 500px;
object-fit: cover;
}

#video-message-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 380px;
}

.video-message-table {
height: 95%;
}

.bg-color-override {
background-color: transparent !important;
}

.explore-work {
  font-size: 4.5em;
}

.banner-font-lg2 {
  font-size: 8.5vw;
  line-height: 1;
}
.banner-font-md2 {
  font-size: 6.5vw;
  line-height: .5;
}

.plumber-headshot {
  outline: 1px solid #9f0003; 
  outline-offset: 5px;
  width: 250px;
}