/*Reset*/
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  padding: 0; margin: 0; background: #040000 url(images/mainbg_repeat.png) top left repeat-x; position:relative;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body, td, th { font-family:  Verdana, Helvetica, arial, sans-serif; font-size: 12px; color: #e6dad3; }

a, a:link, a:visited { color: #eb1900; text-decoration: underline; }
a:active { }
a:hover { color: #f45200; text-decoration: underline; }

#backgroundWrapper {
  height: 420px; background: transparent url(images/mainbg_frame.webp) top left no-repeat;

}
#backgroundWrapper span { display:none; margin: 0; padding: 0; }
#backgroundWrapper img { position: absolute; opacity: 0; height: 0; width: 0;}
@media (max-width: 639px) {
  #backgroundWrapper {
    margin-bottom: -160px;
    background-position: -50px 0px;
    opacity: 1 !important;
  }
  #backgroundWrapper img { }
}
@media (min-width: 640px) and (max-width: 979px) {
  #backgroundWrapper {
    margin-bottom: -160px;
    opacity: 1 !important;
  }
}
@media (min-width: 980px) {
  #backgroundWrapper {
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  position: relative;
  z-index: -1;
  transform: translateZ(0); }
}

#logo { position: absolute; top: 152px; left: 80px; height: 54px; width: 245px; z-index: 100; }
#logo h1 { margin: 0; padding: 0; font-size: 30px; }
#logo a { display: block; }

#contentSplash { position: absolute; top: 0px; left: 300px; width: 370px; z-index: 12; overflow: hidden; white-space: nowrap; }
#contentSplash span { display: block; margin-top: -100px; }
#contentImg { position: absolute; top: 184px; left: 300px; width: 370px; z-index: 11; }
.contact-icon { vertical-align: middle; }
.contact-row { font-size: 13px; }

@media (max-width: 639px) {
  #logo { left: 20px; }
  #contentText { padding: 0 8%; font-size: 14px; transform: translateZ(0); }
}
@media (min-width: 640px) and (max-width: 979px) {
  #logo { left: 7%; }
  #contentText { padding: 0 37% 0 7%; font-size: 13px;  transform: translateZ(0);}
}
@media (min-width: 980px) {
  #contentText { position: absolute; top: 240px; left: 240px; width: 410px; z-index: 10; line-height: 1.6; }
}
#contentText { line-height: 1.6; }
#contentText .splash { margin-bottom: 25px; }
#contentText b { color: #fff; }
#contentText p { margin-bottom: 14px; }
#contentText ul { margin-bottom: 14px; padding-left: 16px; }
#contentText h1 { font-family: "Oswald", Helvetica, arial, sans-serif; color: #E6DCCD; font-weight: 400; font-size: 36px; margin:0 0 20px; padding:0; text-transform: uppercase; letter-spacing: 0.03em; }
#contentText h2 { font-family: "Oswald", Helvetica, arial, sans-serif; font-weight: 300; font-size: 24px; margin:0 0 15px 0; padding:0; line-height: 1.2; }
#contentText h3 { color: #7F6F66; font-size: 16px; }
#contentText hr { background-color:#7F6F66; color:#7F6F66; height: 1px; border:none; margin: 16px 0px; }
#contentText li { margin-bottom: 10px; }

/* NAV */
@media (max-width: 639px) {
  #nav-toggle { position: absolute;
    top: 20px;
    right: 20px;
    background: #000;
    padding: 5px 10px 5px 25px;
    border: 1px solid #FD4D01;
    color: #FD4D01;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    z-index: 1001;
     outline: 0;
  }
  #nav-toggle:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 12px;
    height: 2px;
    background: #FD4D01;
    box-shadow: 0 5px 0 0 #FD4D01, 0 10px 0 0 #FD4D01
  }
  #nav { display: none; position: absolute; top: 20px; right: 20px; width: 50%; background: rgba(0,0,0,0.8); z-index: 1000; padding: 50px 10px 10px 10px;     border: 1px solid #FD4D01; box-sizing: border-box; }
  #nav.is-on { display: block; }
  #nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0,0,0,0.3);
  }
  #nav.is-on + #nav-overlay {
    display: block;
  }
}


@media (min-width: 640px) and (max-width: 979px) {
  #nav { position: absolute; top: 220px; right: 0px; width: 30%; }
  #nav-toggle { display: none; }

}
@media (min-width: 980px) {
  #nav { position: absolute; top: 250px; left: 75px; width: 110px; }
  #nav-toggle { display: none; }

}
#nav { font-size: 16px; font-weight: 300; line-height: 1.4;   font-family: "Oswald", Helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing: 0.09em; }


#nav a { padding: 4px 10px; color: #FD4D01; display:block; margin: 0px 0px 5px;  }
#nav a:link.selected, #nav a:visited.selected { color: #fee; }
#nav a:link, #nav a:visited { color: #FD4D01; text-decoration: none; }
#nav a:active { color: #eee;  text-decoration: none; }
#nav a:hover { color: #fee;  text-decoration: none; background: transparent url(images/navbg.png) right center no-repeat; background-size: cover; }

@media (max-width: 639px) {
  #sidebar { padding: 40px 20px 80px;}
}
@media (min-width: 640px) and (max-width: 979px) {
  #sidebar { position: absolute; top: 440px; right: 0px; width: 32%; }
}
@media (min-width: 980px) {
  #sidebar { position: absolute; top: 230px; left: 690px; width: 260px; }
}

#sidebar ul { margin-bottom: 14px; padding-left: 16px; }
#sidebar li { padding-bottom: 6px; }
#sidebar h3 { color: #E6DCCD; font-size: 13px; padding-bottom: 6px;}
#sidebar p { line-height: 1.5; margin: 0 0 10px 0; padding: 0; }

#sidebar .contact-module { text-align: center; margin-bottom: 40px;   text-shadow: -1px -1px rgba(255, 255, 255, 0.2); }
#sidebar .contact-module h3 { font-size: 16px; font-weight: 300; color: #C4BEBC; }
#sidebar .contact-module span { font-size: 12px; font-weight: 300; color: #C4BEBC; display:block; margin: -5px 0 5px; }
#sidebar .contact-module a {
  font-family: "Oswald", Helvetica, arial, sans-serif;
  color: #E41200;
  display: block;
  font-size: 32px;
  font-weight: 400;
  text-decoration: none;
}
#sidebar .contact-module a:hover {
  text-decoration: underline;
}

#sidebar .years-module {
  position: relative;
  width: 260px;
  height: 110px;
  font-family: "Oswald", Helvetica, arial, sans-serif;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.2);
  background: #000;
  margin: 0 auto;
}
#sidebar .years-module:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:radial-gradient(
      circle at top center,
      #ffe1d1,
      #999
    );
  mix-blend-mode: multiply;
}
#sidebar .years-module .num { font-size: 90px; position: absolute; top: 0; left: 0; width: 100px; text-align: right; color: #fff; line-height: 1; }
#sidebar .years-module .yearsof { font-size: 18px; position: absolute; bottom: 0; left: 0; width: 100px; text-align: right; color: #fff; font-weight: 300; }
#sidebar .years-module ul { position: absolute; top: 0; left: 110px; width: 150px; font-size: 24px; color: #EC1B00; list-style: none; padding: 0; margin: 0; line-height: 1; }
#sidebar .years-module li { padding: 0px 0px 5px; list-style-type: none; margin: 0; }


.footer { color: #544; font-size: 11px; text-align: center; padding: 50px 0px 10px; }
.footer a:link,.footer a:visited { color: #655; text-decoration:none; }
.footer a:active,.footer a:hover { text-decoration:underline; color: #655;}
@media (max-width: 639px) {
  #contentText .footer { display:none;}
  body > .footer { margin: 20px auto; padding: 0 15px; }
}
@media (min-width: 639px) {
  #contentText .footer { margin: 50px auto 20px; padding: 0 15px; }
  body > .footer { display:none; }
}

/* crossfade slideshow (scripts/slideshow.js) */
.slideshow { position: relative; width: 100%; max-width: 420px; overflow: hidden; }
.slideshow::before { content: ""; display: block; padding-top: 59.52%; } /* 420x250 */
.slideshow img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .5s ease;
}
.slideshow img.is-showing { opacity: 1; }

/*** SERVICES ***/



/*** PROJECTS ****/
#projectMenu { position: relative;  }


#projectMenu div { display:inline-block; height: 32px; cursor: pointer; margin-right: 5px; }
#projectMenu div span {   font-family: "Oswald", Helvetica, arial, sans-serif; color: #E91600; text-transform: uppercase; font-size: 16px; display:inline-block; padding: 3px 10px; }
#projectMenu div.selected { background: #FB4400; }
#projectMenu div.selected span { color: #000; }
@media (max-width: 639px) {
  #projectMenu div { display:block; margin-right: 0px; }
}
@media (min-width: 640px) {
  #projectMenu {  white-space: nowrap; }
  #projectMenu div span { padding: 3px 5px; }
}
@media (min-width: 980px) {
  #projectMenu div span { padding: 3px 6px; }
}


#projectBody { background: #920000 url(images/projects_redbg.png) top left repeat-x; padding: 11px; margin-bottom: 50px; zoom:1; clear:both; border:1px solid #FB4500;}
img.projectSplash { border: 1px solid #f94400; margin-bottom: 11px; max-width:383px; width: 100%; }

#residentialBody { }
#commercialBody { }
#industrialBody { }
#educationalBody { }

.areas-served {
  background: #222;
  padding: 10px;
  margin: 10px 0;
}
@media (min-width: 640px) {
  .areas-served {
    overflow: auto;
    height: 300px;
  }
}
.areas-served td {
  border: 1px solid #666;
  padding: 3px 6px;
}
.areas-served td:first-child {
  width: 40%;
  text-align: center;
}

/*** MOBILE POLISH (phones only -- desktop/tablet untouched) ***/
@media (max-width: 639px) {
  body { font-size: 14px; }
  #contentText { font-size: 15px; }

  /* comfortable tap targets in the dropdown menu */
  #nav { width: 70%; max-width: 280px; }
  #nav a { padding: 12px 14px; margin: 0; font-size: 18px; }

  /* bigger menu button (~44px tap height), hamburger icon re-centered */
  #nav-toggle { padding: 10px 14px 10px 34px; font-size: 16px; }
  #nav-toggle:before { left: 10px; top: 15px; }

  /* phone/email rows are the site's main action -- make them easy to hit */
  .contact-row { font-size: 16px; }
  .contact-row a { display: inline-block; padding: 4px 0; }

  .footer { font-size: 13px; color: #766; }
}