/* INITIAL FOUND. RULES */

html, body {
  height: 100%;
}
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 150%;
  line-height: 1.4;
}
body {
  margin: 0;
}

nav.top{margin-top:8px;float:right;}
nav.top a{text-decoration:none;color:rgba(100,50,0,1);margin-right:20px;display:inline-block;font-size:13px!important;font-weight:500;}
nav.top a:hover{color:rgba(200,100,0,1);}
nav.top a:active{color:rgba(255,128,0,1)}
div.navmobile{display:none;float:right;padding-right:20px;padding-top:12px;}
div.navmobile a{text-decoration:none;margin-right:20px;color:rgba(255,128,0,1);padding:3px; border-radius:2px;}
div.navmobile a i{font-style:normal}
div.navmobile a i:before{font-family: "Font Awesome 5 Pro";
font-weight: 300;
content:"\f0c9"}


div.clr{clear:both;}

ul.feat{margin:12px auto 10px;padding-left:20px;list-style:none!important;}
ul.feat li{list-style:none!important;font-size:14px;font-weight:200;margin-top:7px;}
ul.feat li::before{padding-right:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f058";}

a.base{letter-spacing: 0.325vw;text-decoration:none;text-transform:uppercase;display:inline-block;font-size:12px;padding:12px 14px;border-radius:3px;border:1px solid rgba(20,20,20,0.3);background-color:none transparent!important;color:rgba(35,35,35,1);}
a.base:hover{text-decoration:none;background:rgba(35,35,35,0.2);border:1px solid rgba(35,35,35,0.2);color:rgba(0,0,0,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
a.base.arrow::after {
    padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";
}

a.base2{letter-spacing: 0.325vw;text-decoration:none;text-transform:uppercase;display:inline-block;font-size:12px;padding:12px 14px;border-radius:3px;border:1px solid rgba(255,128,0,1);background-color:rgba(255,128,0,1)!important;color:rgba(255,255,255,1);}
a.base2:hover{text-decoration:none;background:rgba(225,114,0,0.5);border:1px solid rgba(225,114,0,0.5);color:rgba(0,0,0,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
a.base2.arrow::after {
    padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";
}

a.link{text-decoration:none;}
a.link:hover{text-decoration:none;}
a.link.plain{text-decoration:none!important;color:inherit!important;}
a.link.plain{text-decoration:none!important;color:inherit!important;}

a.base3{letter-spacing: 0.1vw;text-decoration:none;text-transform:none;display:inline-block;font-size:11px;padding:8px 9px;border-radius:6px;border:1px solid rgba(20,20,20,0.3);background-color:none transparent!important;color:rgba(35,35,35,1);}
a.base3:hover{text-decoration:none;background:rgba(35,35,35,0.2);border:1px solid rgba(35,35,35,0.2);color:rgba(0,0,0,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
a.base3.arrow::after {
    padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";
}

a.base4{letter-spacing: 0.325vw;text-decoration:none;text-transform:uppercase;display:inline-block;font-size:12px;padding:12px 14px;border-radius:3px;border:1px solid rgba(255,128,0,1);background-color:rgba(255,128,0,1)!important;color:rgba(255,255,255,1);}
a.base4:hover{text-decoration:none;background:rgba(225,114,0,0.6);border:1px solid rgba(225,114,0,0.6);color:rgba(0,0,0,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
a.base4.arrow::after {
    padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";
}

a.base5{letter-spacing: 0.125vw;text-decoration:none;text-transform:uppercase;display:inline-block;font-size:13px;padding:10px 14px;border-radius:3px;border:1px solid rgba(0,0,0,0.3);background-color:none transparent!important;color:rgba(30,30,30,0.8);}
a.base5:hover{text-decoration:none;background:rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.8);color:rgba(0,0,0,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
a.base5::before {
    padding-right:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f144";
}
a.base6{letter-spacing: 0.125vw;text-decoration:none;text-transform:uppercase;display:inline-block;font-size:13px;padding:10px 14px;border-radius:3px;color:rgba(255,255,255,1);border:1px solid rgba(255,255,255,0.8);background-color:none transparent!important;color:transparent;}
a.base6:hover{text-decoration:none;background:transparent;border:1px solid rgba(255,255,255,0.8);color:rgba(255,255,255,1);-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
  a.base6::after {
    padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";
}

header p.cta-section{margin-top:20px;}
header p.cta-section a.cta{display:inline-block;font-size:13px;padding:10px 13px;border-radius:4px;border:1px solid rgba(255,140,0,0.5);background-color:rgba(255,140,0,0.9);color:#ffffff;text-transform:uppercase;text-decoration:none;}
header p.cta-section a.cta:hover{background-color:rgba(200,120,0,0.7);color:#ffffff;
    -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  transition: background-color 1s ease;}
  header p.cta-section a.cta::before{
    font-family:"Font Awesome 5 Pro";
    content:"\f14a";
    padding-right:11px;
  }
header p.cta-section a.cta2{display:inline-block;font-weight:100!important;font-size:13px;padding:10px 13px;border-radius:4px;background-color:rgba(0,0,0,0.0);border:1px solid rgba(255,255,255,0.5);color:#ffffff;text-transform:uppercase;text-decoration:none;}
header p.cta-section a.cta2:hover{background-color:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.9);color:rgba(255,140,9,0.9);
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;}
  header p.cta-section a.cta2::before{font-family:"Font Awesome 5 Pro";
    content:"\f00e";
    padding-right:11px;
  }

header p.social-section{margin-top:20px;}
header p.social-section img.social-section-image{float:left;margin-right:20px;}
header p.social-section span{font-size:10px;}
header p.social-section span strong{font-size:17px;font-weight:500;line-height:15px;}

/* VIDEO HEADER RULES */
.video-container {
    height: 30vw;/* 400px */
    min-height:400px;
    width: 100%;
    position: relative;
    background:none!important;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: left;
  padding-left:14.25vw!important;
  color: #ffffff;
  padding: 10px;
}

.video-container .caption h1 {
  font-family: 'Syncopate', sans-serif;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 3vw;
  line-height: 1.2;
  font-size: 3vw;
  text-align: left;
  margin-top:110px;
  span {
    display: block;
    font-size: 6vw;
    letter-spacing: -0.40vw;
	line-height:4.5vw;
    margin-left:-0.3vw;
  }
}

/* SECTIONS */
section{margin:100px auto;width:100%;padding:0;min-height:500px;}
section div.section-content{width:1300px;margin:0 auto;}
section div.section-content div.l{float:left;width:48%;margin-right:3.95%}
section div.section-content div.r{float:right;width:47.95%;}
section div.section-content div.l.w40{float:left;width:38%;}
section div.section-content div.r.w60{float:right;width:57.95%;}
section div.section-content div.l.w60{float:left;width:58%;}
section div.section-content div.r.w40{float:right;width:37.95%;}
section div.section-content div.l p,section div.section-content div.r p{font-size:0.65em;font-weight:200;color:rgba(20,20,20,1)}

section div.section-content div h2{margin:0 auto 0;padding:0;font-size:28px;font-weight:600;color:rgba(0,0,0,1);line-height:26px;}

section div.section-content div h4{margin:0 auto;padding:0;font-size:11px;font-weight:300;color:rgba(255,130,0,1);text-transform:uppercase;}

section.topnav{max-height:60px!important;min-height:40px!important;background:rgba(255,255,255,1);width:100%;padding:0;margin:0;}

section.aboutus{background-color:none transparent!important;}
section.ourservices{background-color:none transparent!important;}



section.ourportfolio{
    background-color: none transparent!important;
    background-image: linear-gradient(to right, rgba(40,40,40,1), rgba(40,40,40,1));
    background-size: 100% 220px;
    background-position: center top;
    background-repeat: no-repeat;
}
section.whychooseus{background-color:none transparent!important;}
div.whych-container{margin-top:30px;display: flex;
    flex-direction: row;/*align-items: center;*/

  flex-wrap: wrap;
  justify-content: center;}
div.whych-container div.whych-elem-4{display:inline-block;width:22%;min-height:200px;background-color:transparent;margin:10px 1.499%;}
div.whych-container div.whych-elem-4:hover{background-color:rgb(145,235,145,0.4);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}
  div.whych-container div.whych-elem-4 div.whych-elem-icon{width:92%;margin:18px auto 10px!important;height:30px;padding-top:10px}
div.whych-container div.whych-elem-4 h2.whych-elem-title{width:92%;margin:20px auto 16px;font-weight:300;font-size:21px;}
div.whych-container div.whych-elem-4 p.whych-elem-desc{width:92%;margin:10px auto;font-size:14px!important;line-height:18px!important;color:rgba(36,36,36,0.9)!important;}
div.whych-container div.whych-elem-4 p.whych-elem-readmore{width:92%;font-size:13px!important;margin:20px auto 30px!important;}

div.service-group{margin:10px auto;width:99%;border-bottom:3px solid rgba(255,255,255,0.0);}
div.service-group h2.service-group-title{font-size:20px!important;color:rgba(35,35,35,1);}
div.service-group h2.service-group-title::after{padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "";}
div.service-group p.service-group-desc{font-size:13px!important;line-height:18px;color:rgba(35,35,35,1);}
div.service-group:hover{border-bottom:3px solid rgba(200,130,50,1.0)!important;-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}
div.service-group:hover h2.service-group-title{font-size:20px!important;color:rgba(200,130,50,1);-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}
  div.service-group:hover h2.service-group-title::after{padding-left:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f343";}
div.service-group:hover p.service-group-desc{font-size:13px!important;line-height:18px;color:rgba(60,30,0,1);-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}



section.trustmarkers{
  background-color: none transparent!important;
    background-image: linear-gradient(to top, rgba(20,20,20,1), rgba(40,40,50,1));
    /*background-size: 100% 220px;*/
    background-position: center top;
    background-repeat: no-repeat;
  margin: 0 auto!important;
  min-height:200px!important;
}

section.trustmarkers *{color:rgba(255,255,255,1)!important;}


section.contactus{background: url('/imgs/contact-bg.jpg') center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    padding-top:50px;padding-bottom:50px;
  }
  section.contactus div.contactus-form{padding:20px;background:rgba(255,255,255,0.1435);width:91%;min-height:400px;}
  
  section.meetus{background-color:none transparent!important;}

/* footer */
footer{width:100%;margin:0 auto 0;padding:30px 0;background:#222222;min-height:400px;}
footer div.section-content{width:1300px;margin:0 auto;}
footer div.section-content *{color:rgba(255,255,255,1)!important}
footer div.section-content div.flex-group{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}
/*footer div.section-content div.flex-group div.port-elem{width:21.995%;min-height:400px; margin:10px 1.4995%;}*/
footer div.section-content div.flex-group div.port-elem{width:29.995%;min-height:400px; margin:10px 1.4995%;}
footer div.section-content div.flex-group div.port-elem.double{width:46.995%;min-height:400px; margin:10px 1.4995%;}
footer div.section-content h4{margin:0 auto 14px;padding:0;font-size:13px;font-weight:500;color:rgba(255,130,0,1)!important;text-transform:uppercase;}

footer div.section-content div.flex-group div.port-elem p{font-size:14px!important;line-height:18px!important;font-weight:300;}

footer div.section-content ul.list{list-style:none;margin-left:0;padding-left:0;}
footer div.section-content ul.list li{margin:8px 0;color:rgba(255,255,255,1)!important;font-size:13px;}
footer div.section-content ul.list li a{color:rgba(235,235,235,1)!important;text-decoration:none;}
footer div.section-content ul.list li a:hover{color:rgba(255,230,210,1)!important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}
  footer div.section-content ul.list li a.phone:before{padding-right:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f095";}
  footer div.section-content ul.list li a.email:before{padding-right:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f0e0";}
  footer div.section-content ul.list li a.address:before{padding-right:14px;
  font-family: "Font Awesome 5 Pro";
  content: "\f041";}

footer div.section-content ul.resources{list-style:none;margin-left:0;padding-left:0;}
footer div.section-content ul.resources li{margin:8px 0;color:rgba(255,255,255,1)!important;font-size:13px;}
footer div.section-content ul.resources li a{color:rgba(255,220,180,1)!important;text-decoration:none;}
footer div.section-content hr{height: 1px;
    color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.3);
    font-size: 0;
    border: 0;
    margin: 33px 0 33px 13px;
    width: 75%;
    text-align: left;}

img.fluid{
  max-width: 100%;
  height: auto;
}

div.flex-grid{display: flex;
    flex-direction: row;align-items: center;

  flex-wrap: wrap;
  justify-content: center;}
div.flex-grid div.port-elem{min-width:30.33%;min-height:400px; margin:10px 1.4995%;}
div.flex-grid div.port-elem.port1{
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.95) 100%), url('/imgs/port1.jpg');
  background-size: cover;}
  div.flex-grid div.port-elem.port2{
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.95) 100%), url('/imgs/port1.jpg');
  background-size: cover;}
  div.flex-grid div.port-elem.port3{
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.95) 100%), url('/imgs/port1.jpg');
  background-size: cover;}
  div.flex-grid div.port-elem:first-child{margin-left:0!important;}
  div.flex-grid div.port-elem:last-child{margin-right:0!important;} 

div.port-elem-group{position:relative;top:260px;margin:0 auto 0;width:90%;}
h4.port-elem-title{margin-top:0!important;color:rgba(255,255,255,1)!important;font-size:22px!important;}
div.port-elem-links{margin-top:12px;}
div.port-elem-links a{display:inline-block!important;font-size:11px!important;text-decoration:none!important;padding:4px 8px;border-radius:10px;background:rgba(255,255,255,0);border:1px solid rgba(255,255,255,0.3)!important;color:rgba(255,255,255,0.7);margin-right:15px;}

div.form{margin:10px auto;padding:0}
div.form label{display:inline-block;width:99%;color:rgba(225,225,225,1);margin-top:14px;font-size:14px;}
div.form input{display:inline-block;width:99%;border-radius:3px;font-size:13px;padding:6px 11px!important;color:rgba(0,0,0,1);background:rgba(255,255,255,1);border:0 solid transparent!important;}


div.navmobiledd{position:absolute;z-index:10;top:58px;left:0px;display:none;background:rgba(255,255,255,0.8)!important;width:100%;padding-bottom:75px}
div.navmobiledd nav.navmobiletop{width:100%;}
div.navmobiledd nav.navmobiletop a{display:block;text-decoration:none;text-align:left;padding-left:12px!important;margin:0 auto;border-bottom:1px solid rgba(0,0,0,0.12);color:rgba(255,128,0,1);font-weight:500;font-size:13px;padding:13px 0;}
div.navmobiledd nav.navmobiletop a:hover{background:rgba(255,128,0.6);color:rgba(255,255,255,1);}

/* responsive rules */
@media (max-width:1350px){
    section{margin:100px auto;}
    section div.section-content,
    footer div.section-content{width:1070px;}
}
@media (max-width:1100px){
    section{margin:90px auto;}
    section div.section-content,
    footer div.section-content{width:770px;}
    /*switch whych area*/
    div.whych-container div.whych-elem-4{min-width:46%!important;}
    div.navmobiledd{display:none}
}
@media (max-width:800px){  
    section{margin:50px auto;}
    section div.section-content,
    footer div.section-content{width:600px;}
    .video-container{ background-image:url('/imgs/roofing-header-2.jpg')!important;}
    .video-container video { display: none}
    div.flex-grid{display: block;}
    div.flex-grid div.port-elem{margin:20px auto!important;width:80%;}
    div.flex-grid div.port-elem:first-child{margin-left:auto!important;}
  div.flex-grid div.port-elem:last-child{margin-right:auto!important;}
  nav.top{display:none;}
  div.navmobile{display:inline-block}

}
@media (max-width:625px){
    section{margin:40px auto;}
    section div.section-content,
    footer div.section-content{width:94%;}
    section div.section-content div.l,
    section div.section-content div.l.w40,
    section div.section-content div.l.w60{float:none;width:94%!important;margin:12px auto!important;}
section div.section-content div.r,
section div.section-content div.r.w40,
section div.section-content div.r.w60{float:none;width:96%;margin:12px auto 20px!important;}
footer div.section-content div.flex-group{display:block!important;}
footer div.section-content div.flex-group div.port-elem{width:94%!important;margin:18px auto!important;}
}
@media (max-width:500px){
  
  div.whych-container div.whych-elem-4{min-width:95%!important;}
}
@media (max-width:300px){
    section{margin:30px auto;}
    section div.section-content,
    footer div.section-content{width:98%;}
}
@media (min-width:801px){
  div.navmobiledd{display:none}
}
h2.light,p.light{color:rgba(255,255,255,1)!important;}