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


@media all and (min-width: 1200px) {

.bgimg-2 {background-image: url(../img/roofer.jpg);height: 700px!important;}

.bgimg-3 {background-image: url(../img/integrity.jpg);height: 700px!important;}

.excellenll_text .excellenll_inner h3{font-size: 16vw;}

.excellenll_text .excellenll_inner h4{font-size: 4vw;}

.excellenll_content{margin-left: -87px!important;}

.mobilenav_text {margin-left: -233px;}

}

@media (min-width: 979px) and (max-width: 1024px){

  .mobilenav{width: 78%; }

  figure.effect-julia {margin-top: 20px;}

  .excellenll_content{width: 100%!important;}

  .excellenll_content .excellenll_content_inner p{font-size: 20px !important;line-height: 28px;}

  .bgimg-2 {background-image: url(../img/roofer.jpg);height: 500px;}

.bgimg-3 {background-image: url(../img/integrity.jpg);height: 500px;}

}

@media (min-width: 770px) and (max-width: 990px){


}

@media (min-width: 737px) and (max-width: 768px){

.get_started_text{display: none;}

figure.effect-julia {margin-top: 0px;}

.mobilenav{left: 98px;}

.Purlins_text{left: 0%;}
.grid figure figcaption{width: 100%;}

}

@media (min-width: 596px) and (max-width: 680px){

.get_started_text{display: none;}

figure.effect-julia {margin-top: 0px;}

.Purlins_text{left: 0%;}

.grid figure figcaption{width: 100%;}


}

@media (min-width: 667px) and (max-width: 768px){

.get_started_text{display: none;}

.about_head .about_head_text p{font-size: 16px;}

figure.effect-julia {margin-top: 0px !important;}

.Purlins_text{left: 0%;}

.grid figure figcaption{width: 100%;}

.menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 247px;
    height: 67px;z-index: 99999999999}


.about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 357px;}

.excellenll_content_1{padding-top: 185px;}

.about_content_2 .about_inner{max-width: 660px !important;}

.caption_text p{font-size: 17px;}

.caption_text h4.border{font-size: 50px;}

.about_content .about_content_text .core_value .core_value_heading{padding: 120px 0px; padding-bottom: 60px;}

.excellenll_content{line-height: 1.3em;
    background-color: #30953c;
    padding-top: 6vw!important;
    padding-right: 4vw!important;
    padding-bottom: 6vw!important;
    padding-left: 4vw!important;
    margin-top: -123px!important;
    margin-bottom: 0px!important;
    margin-left: -80px!important;
    z-index: 9!important;
    -webkit-transform: skew(-36.6deg);
     transform: skew(-36.6deg); 
    width: 95%!important;
    /* max-width: 1038px; */}  
}

.excellenll_content .excellenll_content_inner p{font-size: 20px!important;line-height: 28px;}

.bgimg-2 {background-image: url(../img/moto.jpg);height: 450px!important;}

.bgimg-3 {background-image: url(../img/mission.jpg);height: 450px!important;}

}
@media (min-width: 575px) and (max-width: 736px){
    .main_logo{left: 233px;}

    figure.effect-julia {margin-top: 20px;}

    .about_head .about_head_text p{font-size: 16px;}

    .mobilenav{overflow-y:scroll;}

    .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 80px;
    height: 67px;z-index: 99999999999}

    .grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-julia h2{font-size: 29px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;}

    .bgimg-2 {background-image: url(../img/roofer.jpg);height: 450px;}

    .bgimg-3{height: 450px;}

    .excellenll_content .excellenll_content_inner p{font-size: 16px !important;line-height: 28px;}

    .header-text{display: none;}

}

@media (min-width: 510px) and (max-width: 667px){

    .industry_text h4{font-size: 26px;}

    .excellenll_content_1{padding-top: 120px;}

    .about_content .about_content_text .core_value .core_value_heading {
    padding: 165px 0px;
    padding-bottom: 60px;}

    .about_content .about_content_text .core_value .core_value_heading h4{font-size: 45px;}

    .about_content .about_content_text .core_value .core_value_heading .line{line-height: 4px;left: 40%;}

    .caption h4.border{font-size: 46px;}

    .caption .line{height: 3px;}

}


@media (min-width: 520px) and (max-width: 684px){

    .industry_text h4{font-size: 26px;}

    .about_content .about_content_text .core_value .core_value_heading h4{font-size: 45px;}

    .about_content .about_content_text .core_value .core_value_heading .line{height: 4px;left: 40%;}

    .caption h4.border{font-size: 46px;}

    .caption .line{height: 3px;}

    .about_content .about_content_text .core_value .core_value_heading{margin-top: 40px;}

    .excellenll_content_1 {
    padding-top: 110px;
}

  .get_started_text{display: none;}

  figure.effect-julia {margin-top: 20px;}

   .main_logo{left: 200px;}


   .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 66px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 80px;
    height: 67px;z-index: 99999999999}

    .grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-julia h2{font-size: 29px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;}

    .bgimg-2 {
    background-image: url(../img/roofer.jpg);
    height: 400px;
}

.bgimg-3{height: 400px;}

.Purlins_text{left: 0px!important;}

    
}

@media (min-width: 413px) and (max-width: 520px){

    .industry_text h4{font-size: 26px;}
  .get_started_text{display: none;}

  figure.effect-julia {margin-top: 0px;}

  .about_head .about_head_text p{font-size: 16px;}


  .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 80px;
    height: 67px;z-index: 99999999999}

    .grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

    .Purlins_text{left: 0px!important;}
}

figure.effect-julia h2{font-size: 29px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;}

}



@media (min-width: 376px) and (max-width: 414px){
  .get_started_text{display: none;}

  .industry_text h4{font-size: 26px;}

  figure.effect-julia {margin-top: 20px;}

  .about_head .about_head_text p{font-size: 16px;}

  .metal_steel .metal_steel_text .metal_steel_img img{width: 100%;}

  .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 80px;
    height: 67px;z-index: 99999999999}

    .grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-julia h2{font-size: 29px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;}


/*.excellenll_content_1{padding-top: 230px;}*/

.about_inner{font-size:15px; }

.about_content .about_content_text .core_value .core_value_heading{padding: 275px 0px;padding-bottom: 60px; }

.bgimg-2 {background-image: url(../img/roofer.jpg);height: 300px;}

.bgimg-3 {height: 300px;}

.excellenll_content{width: 100%!important;  margin-left: -62px!important;}

.excellenll_content .excellenll_content_inner p {font-size: 13px!important;line-height: 20px;}

.excellenll_content_1{padding-top: 70px;}

.about_content .about_content_text .core_value .core_value_heading .line{height: 3px; left: 35%;}

.caption h4.border{font-size: 40px;}

.caption .line{height: 3px; left: 38%;}

.about_content .about_content_text .core_value .core_value_heading h4{font-size: 36px;}

.header-text h2{display: none;}

.Purlins_text{left: 0px!important;}

}

@media (min-width: 376px) and (max-width: 414px){

    .industry_text h4{font-size: 26px;}
  .get_started_text{display: none;}

  figure.effect-julia {margin-top: 0px;}

  .about_head .about_head_text p{font-size: 16px;}

  .metal_steel .metal_steel_text .metal_steel_img img{width: 100%;}

  .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: 100%; 
    float: left;
    text-align: center;
    position: absolute;
    top: 0;
    left: 80px;
    height: 67px;z-index: 99999999999}

    .grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-julia h2{font-size: 22px;}

figcaption .line{top: 19%;}
.grid figure p{font-size: 13px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;}


/*.excellenll_content_1{padding-top: 230px;}*/

.about_inner{font-size:15px; }

.about_content .about_content_text .core_value .core_value_heading{padding: 275px 0px;padding-bottom: 60px; }

.bgimg-2 {background-image: url(../img/roofer.jpg);height: 300px;}

.bgimg-3 {height: 300px;}

.excellenll_content{width: 100%!important;  margin-left: -62px!important;}

.excellenll_content .excellenll_content_inner p {font-size: 13px!important;line-height: 20px;}

.excellenll_content_1{padding-top: 70px;}

.about_content .about_content_text .core_value .core_value_heading .line{height: 3px; left: 35%;}

.caption h4.border{font-size: 40px;}

.caption .line{height: 3px; left: 38%;}

.about_content .about_content_text .core_value .core_value_heading h4{font-size: 36px;}

.header-text{display: none;}

.Purlins_text{left: 0px!important;}

}


@media (min-width: 240px) and (max-width: 375px){.industry_text h4{font-size: 26px;}
    .get_started_text{display: none;}

    figure.effect-julia {margin-top: 20px;}

    .about_head .about_head_text p{font-size: 14px;}

    .metal_steel .metal_steel_text .metal_steel_img img{width: 100%;}


    .menui {
    background: #fff;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    margin-top: 10px;
    position: absolute;
}

.icon {
    z-index: 999;
    position: fixed;
/*    background: rgba(0, 0, 0, 0.21);*/
    display: block;
    padding: 9px;
   height: 65px;
    width: 135px;
    margin: 0px;
    top: 0;
    left:-25px;
}

.mobilenav {
    /*    top: 47px !important;*/
    font-family: inherit;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(48, 149, 60);
    padding:0;
    margin:0;
   -ms-transform: skew(0deg,0deg);
   -webkit-transform: skew(0deg,0deg);
   transform: skew(0deg,0deg);
}

.mobilenav li {
    list-style-type: none;
    text-align: left;
    padding-left: 40px;padding-right: 40px; padding-top: 0px; padding-bottom:0px;
    width: 100%;float: left;
    -webkit-transform: skew(0deg)!important;
   transform: skew(0deg)!important;
}

.mobilenav li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    width: 100%;
}
.mobilenav li:first-child {
    margin-top: 60px;padding-top: 60px;
}
.hvr-underline-from-left:before{display: none;}

[class^="hvr-"]{margin: 0px;}

.main_logo {
    width: auto;
    float: none;
    text-align: center;
    position: absolute;
    top: 0;
    left: 110px;
    height: 67px;z-index: 99999999999}

.grid figure figcaption, .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-julia h2{font-size: 29px;}

.caption_text h4.border{font-size: 35px;}

.caption_text .line {
    display: block;
    height: 3px;
    position: absolute;
    top: 26%;
    padding: 0px;
    width: 92px;
    float: left;
    left: 40%;
    text-align: center;}

    .caption_text p{font-size: 16px; padding: 10px 10px;margin: 0px !important;}

    .about_content_2 .about_head_text {
    width: 100%;
    float: left;
    position: absolute;
    top: 35%;
}

/*.excellenll_content_1{padding-top: 230px;}*/

.about_inner{font-size:15px; }

.about_content .about_content_text .core_value .core_value_heading{padding: 275px 0px;padding-bottom: 60px; }

.bgimg-2 {background-image: url(../img/roofer.jpg);height: 300px;}

.bgimg-3 {height: 300px;}

.excellenll_content{width: 100%!important;  margin-left: -62px!important;}

.excellenll_content .excellenll_content_inner p {font-size: 13px!important;line-height: 20px;}

.excellenll_content_1{padding-top: 70px;}

.excellenll{width: 85%;}

.about_content .about_content_text .core_value .core_value_heading h4 {
    width: 100%;
    text-align: center;
    font-size: 35px;
    margin: 0;}

.about_content .about_content_text .core_value .core_value_heading .line{height: 3px; left: 35%;}

.about_content .about_content_text .core_value{margin-top: 25px;}

.caption h4.border{font-size: 40px;}

.caption .line{height: 3px; left: 38%;}

.header-text{display: none;}

.Purlins_text{left: 0px!important;}


}