/* CSS Document */


@import url("https://use.typekit.net/wzv5sqn.css");

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;700&display=swap');
</style>


html {
    font-size: 100%;
}


* { margin:0; padding:0; line-height:1em; }


 html, body { height: 100%; background: #eeebeb;}

body > .footer {
  position: sticky;
  top: 100vh;
}


body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size:16px;
    }  


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', sans-serif;
    margin: 0;
}
h1 {
    font-size: 3.875em;
    line-height: 1.125em;
    margin-bottom: .5em;
    font-family: 'clarendon-text-pro', serif;
}
.redbox h1{color: #ffffff; margin-bottom: 0; text-transform: uppercase;}




h2 {
    font-size: 3.125em;
    line-height: 1.125em;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: 900;

}

.redbox h2{ color: #e9bb39; }

h3 {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 5px;
}
h4 {
    font-size: 24px; /* 21 */
    line-height: 1.142857142; /* 24 / 21 */
    margin-bottom: 1.142857142em; /* 24 / 21 */
}
h5 {
    font-size: 1.125em; /* 18 */
    line-height: 1.333333333; /* 24 / 18 */
    margin-bottom: 1.333333333em; /* 24 / 18 */
}
h6 {
    font-size: 1em; /* 16 */
    line-height: 1.5; /* 24 / 16 */
    margin-bottom: 1.5em; /* 24 / 16 */
}
p{
    font-size: 18px;
    margin: 0 0 1em;
    line-height: 1.35;
    font-family: 'Lato', sans-serif;
}
p a:link,a:link,  a:visited, a:hover, a:focus, a:active, a:visited
{

       text-decoration: none;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
				 color: #74c043;

}


.redbox p{ color: #d4d4d4; }
.bluebox p{ color: #d4d4d4; }

a, a[href^="tel:"]{ text-decoration:none!important; }




a.btn{
    padding: 10px 20px;
    background: rgb(204,50,58);
    border-radius: 20px;
    color: #ffffff;
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    border:1px solid rgb(226,57,62);
    display: inline-block;
    margin-bottom: 10%;
}

a.btn:hover{
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 20px;
    color: rgb(204,50,58);
    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    border:1px solid rgb(226,57,62);
}



/* 
=========================================================================

Responsive Needs 

=========================================================================
*/

img{
    max-width:100%;
    height:auto;

}

.header-logo{ display: block;}
.mobile-logo, li.mobile-contact{display: none;}


.slicknav_menu {display:none;}.mobile-logo{ display:none;}

@media (max-width: 860px) {

.slicknav_menu {display:block;}
.primary-nav{display: none;}
}





.responsive-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.responsive-frame iframe,  
.responsive-frame object,  
.responsive-frame embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}





/* 
=========================================================================
ToTop 
=========================================================================
*/

#toTop p{ 
line-height:.9em;
padding-top:22px;
font-weight:bold;
/* width:60%; */
margin:0 auto;
font-size:11px;
float:left;
padding-left:7px;
}
    
#toTop {
    z-index:1000;
        background: url(../images/back-to-top.png) no-repeat #8dcf01;
        text-align:center;
        line-height:1em;
        position:fixed;
bottom: 20px;
right: -12px;
        cursor:pointer;
        display:none;
        height: 40px;
width: 45px;
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px; /* future proofing */
        -khtml-border-radius: 5px 0 0 5px;


    -webkit-transition: all 500ms ease-in;
    -moz-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;

    -webkit-box-shadow: -1px 0px 7px 2px rgba(0,0,0,0.55);
-moz-box-shadow: -1px 0px 7px 2px rgba(0,0,0,0.55);
box-shadow: -1px 0px 7px 2px rgba(0,0,0,0.55);


}

#toTop:hover {
         background: url(../images/back-to-top.png) no-repeat #8dcf01;
         color:#ffffff;
         font-weight:bold;
         right: 0;

 -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;

         }


/* 
=========================================================================
Padding 
=========================================================================
*/
    .padtop{ padding-top:20px;}
    .padbottom{ padding-bottom:20px;}

    .padtop40{ padding-top:40px!important;}
    .padbottom40{ padding-bottom:40px!important;}

    .padtop10{ padding-top:10%!important;}
    .padbottom60{ padding-bottom:60px!important;}

    .nomargin{margin:0!important;}

    .nopad{padding:0!important;}

    .nopadtop{padding-top:0!important;}

    .aligncenter{text-align:center;}

    .sticky{position:fixed; top:0;}

    .nopad.columns{ width:33.33333%; margin:0; }


/* 
=========================================================================
Lists
=========================================================================
*/

ul {
    font-family: 'Lato', sans-serif;
    list-style-position: inside;

}

li {list-style: none;}



/* 
=========================================================================
Header 
=========================================================================
*/


#header{ 
    background:#ffffff; 
    z-index:500; 
    width:100%;
    box-shadow: -1px -64px 27px 65px rgba(0,0,0,0.75);
    -webkit-box-shadow: -1px -64px 27px 65px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px -64px 27px 65px rgba(0,0,0,0.75);
    position: relative;

}

.header-logo{  
    max-width:360px; 
    z-index:2;
    padding: 30px 0;



}
.header-phone{  
    width:auto; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:20px;
    z-index: 900;
}

.header-phone p{margin-bottom:0; color:#333333; display:inline-block;}
.header-phone span.tel{font-size:24px; font-family:'Lato', sans-serif; padding-left:20px; color:#000000}


.header-topbar{position:relative;}


.header-contact{  
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    text-align: center;
}

p.tel, p.email{ display:block; margin-bottom: 0; font-weight: bold; color: #000000; padding: 5px 0;}

.header-contact i. {
    font-size: 1em;
    color: #666666;
    margin-right: 5px;
}

.header-contact p a{color: #000000;}

.header-contact p.email a{color: #74c043;}
.header-contact p a:hover{color: #e9bb39;}

.header-contact h3{color: #6d6e71; padding: 10px 0; margin: 0; font-size: 1.5em; font-weight: 900;}
.header-contact p{font-size: 1.5em;}


.fas{ color:#666666; }



/* 
=========================================================================
Navigation 
=========================================================================
*/


.primary-nav{ 
    text-align:center; 
    background: #063171;
    font-size: 21px;
    text-transform: uppercase;

    width: 100%;
}

.primary-nav a{ color:#ffffff; letter-spacing: .05em;}

.primary-nav li a:hover{ color:#e9bb39; }


.primary-nav ul.sub li a:hover{ color:e9bb39; }

.primary-nav nav.header__menu li{ 

    padding-bottom: 0;
}

.primary-nav nav.header__menu li a{ 

    -webkit-transition: color 250ms ease-in;
    -moz-transition: color 250ms ease-in;
    -o-transition: color 250ms ease-in;
    transition: color 250ms ease-in;
    color:#ffffff;
    display: inline-block;
    padding: 30px 30%;
    margin: 0;

}






/* Link Highlights ========================= */

body#index .primary-nav .nav-index,
body#doc .primary-nav .nav-doc,
body#hd .primary-nav .nav-hd,
body#ewaste .primary-nav .nav-ewaste,
body#why .primary-nav .nav-why,
body#contact .primary-nav .nav-contact 
{
    background: #e9bb39;
    color:#000000;
}




/* 
=========================================================================
Hero 
=========================================================================
*/

.hero.index{ background:#000000; }

.hero-pic {background: url(../images/project-hero-1.jpg); background-position: top; background-size: cover; min-height: 600px;}

.hero h2{ font-size: 2em;
text-transform: none;
font-weight: 400;
padding-bottom: 10px;}





/* 
=========================================================================
Banners 
=========================================================================
*/


.title-banner{ 
    border-bottom: 20px solid #74c043; 
    padding: 7% 0 2% 0; 
    -webkit-box-shadow: 0px -38px 47px 28px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -38px 47px 28px rgba(0,0,0,0.75);
    box-shadow: 0px -38px 47px 28px rgba(0,0,0,0.75);
    z-index: 400;
    position: relative;
    background-size:cover!important;

}

.title-banner h1{
    color: #063171;
    margin-bottom: 5px;
    padding-top: 43px;
    background: url(../images/logo-hat.png) no-repeat;
    background-position: 0 0;
}



.title-banner h2{color: #ffffff;
text-transform: none;
font-size: 2em;}

.title-banner.siding{ background:url(../images/banner-siding.jpg) no-repeat; }
.title-banner.portfolio{ background:url(../images/banner-portfolio.jpg) no-repeat; }
.title-banner.contact{ background:url(../images/banner-contact.jpg) no-repeat; }


.title-banner.header1{ background:url(../images/Bannister-Roofing-Siding-header-1.jpg) no-repeat; }
.title-banner.header2{ background:url(../images/Bannister-Roofing-Siding-header-2.jpg) no-repeat; }
.title-banner.header3{ background:url(../images/Bannister-Roofing-Siding-header-3.jpg) no-repeat; }
.title-banner.header4{ background:url(../images/Bannister-Roofing-Siding-header-4.jpg) no-repeat; }
.title-banner.header5{ background:url(../images/Bannister-Roofing-Siding-header-6.jpg) no-repeat; }
.title-banner.header6{ background:url(../images/Bannister-Roofing-Siding-header-5.jpg) no-repeat; }
.title-banner.header7{ background:url(../images/Bannister-Roofing-Siding-header-7.jpg) no-repeat; }
.title-banner.header8{ background:url(../images/Bannister-Roofing-Siding-header-8.jpg) no-repeat; }
.title-banner.header9{ background:url(../images/Bannister-Roofing-Siding-header-9.jpg) no-repeat; }
.title-banner.header10{ background:url(../images/Bannister-Roofing-Siding-header-10.jpg) no-repeat; }

.title-banner.headercontact{ background:url(../images/Bannister-Roofing-Siding-header-contact.jpg) no-repeat; }
.title-banner.header11{ background:url(../images/Bannister-Roofing-Siding-header-11.jpg) no-repeat; }
.title-banner.header12{ background:url(../images/Bannister-Roofing-Siding-header-12.jpg) no-repeat; }
.title-banner.header13{ background:url(../images/Bannister-Roofing-Siding-header-13.jpg) no-repeat; }
.title-banner.header14{ background:url(../images/Bannister-Roofing-Siding-header-14.jpg) no-repeat; }
.title-banner.header15{ background:url(../images/Bannister-Roofing-Siding-header-15.jpg) no-repeat; }
.title-banner.header16{ background:url(../images/Bannister-Roofing-Siding-header-16.jpg) no-repeat; }
.title-banner.header17{ background:url(../images/Bannister-Roofing-Siding-header-17.jpg) no-repeat; }
.title-banner.header18{ background:url(../images/Bannister-Roofing-Siding-header-18.jpg) no-repeat; }



/* 
=========================================================================
Content
=========================================================================
*/

.content img{ padding-bottom: 5%; }

.content li{ 
  padding-left: 14px;
  text-indent: -16px;
  line-height: 1.35em;
  font-size: 16px; 
}

.content li::marker{ color:rgb(226,57,62); }

.content h2{ padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid #cccccc; }

.redbox{ background:#74c043; padding: 5% 0; text-align: center;}
.redbox h2{ color:#ffffff; }
.redbox a{ color:#000000!important; }


.redbox  a
{

				 color: #e9bb39!important;

}


.bluebox h1{
    color: #ffffff;
    margin-bottom: 5px;
    padding-top: 20px;
 font-size: 35px; 
}

.bluebox{ background:#063171;}


.bluebox p a
{

				 color: #000000!important;

}

.redfoot{ border-bottom:25px solid #74c043; }

.yellowfoot{ border-bottom:25px solid #e9bb39; }
.bluefoot{ border-bottom:25px solid #4e88bc; }

.navyfoot{ border-bottom:25px solid #021d44; }

 .scrollbox{ overflow-y:auto; max-height:600px;}

.text-pad{ padding:20px; }


.panel{ padding-top: 4%; padding-bottom: 4px;}

.panel-title { text-align:center; padding: 50px 0;}

.panel-title.dark{ color:#ffffff; }
.panel-title.red{ color:#74c043; }


.shadow{
    -webkit-box-shadow: -20px 0px 44px -21px rgba(0,0,0,0.75);
-moz-box-shadow: -20px 0px 44px -21px rgba(0,0,0,0.75);
box-shadow: -20px 0px 44px -21px rgba(0,0,0,0.75);
}

.inner-shadow-top{-webkit-box-shadow: inset 0px 116px 34px -81px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 116px 34px -81px rgba(0,0,0,0.75);
box-shadow: inset 0px 116px 34px -81px rgba(0,0,0,0.75);}

.inner-shadow-bottom{-webkit-box-shadow: inset 0px -116px 39px -121px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -116px 39px -121px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px -116px 39px -121px rgba(0,0,0,0.75);}

.ctr-v{  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 40px;

}

.main-content{ background:#eeebeb; z-index: 300; position: relative; padding: 5% 0;}


/* 
=========================================================================
Family Owned Panel
=========================================================================
*/


.family-owned{ padding:50px 0; }


.family-owned h3{
    font-size: 2.75em;
line-height: 1.25;
margin-bottom: 10px;
color: #063171;
text-transform: uppercase;
font-weight: 900;
}


/* 
=========================================================================
Services
=========================================================================
*/

.services {
    background: #021d44;
}

.services .columns{ 
    width: 50%;
    margin-left: 0;
    }

.services .service-box{ color:#ffffff; }

.service-box{ text-align:center; display:block; position:relative; }

.service-box p{ font-size:18px; }

.service-box h2{font-family: 'clarendon-text-pro', serif; text-transform: none;}


.service-box h3{ 
    font-family: 'clarendon-text-pro', serif;
    font-size: 2.125em;
    padding-bottom: 20px;
 }

 .service-box h4{ 
    color: #74c043;
 }

.service-box p{
margin: 0 0 1em;
line-height: 1.35;
font-family: 'Lato', sans-serif;
width: 90%;
margin: 0 auto;
}

.service-box:hover h3{color: #e9bb39;}



.service-box img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
	
}

/* Disable grayscale on hover */
.service-box:hover img {
  -webkit-filter: grayscale(0);
  filter: none;
  -webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
}






/* 
=========================================================================
Testimonials
=========================================================================
*/

.testimonials{
   padding: 40px 0;
  padding: 40px 10%;
 }


.testimonial{ display:inline-block; padding: 3% 0 0 0; margin: 3% 0 0 0; border-top: 1px solid #cccccc;}

.testimonial:first-child{ padding-top:0; margin-top:0; border-top:none; }

.testimonial:last-of-type{ padding-bottom:0; }

.testimonial img{ width:20%; float:left; }
.testimonial-text{ width:100%; float:right; }

.testimonials strong{ font-family:'Lato', sans-serif; color:#74c043;  font-size: 20px; padding-top: 15px; padding-bottom: 10px;
display: block;}

.testimonial p{
font-size: 18px;
margin: 0 0 1em;
line-height: 1.5;
}

/* Works on Firefox */
.testimonials * {
  scrollbar-width: auto;
  scrollbar-color: #4e88bc #021d44;
}

/* Works on Chrome, Edge, and Safari */
.testimonials *::-webkit-scrollbar {
  width: 15px;
}

.testimonials *::-webkit-scrollbar-track {
  background: #021d44;

}

.testimonials *::-webkit-scrollbar-thumb {
  background-color: #4e88bc;
  border-radius: 20px;
  border: 3px solid #021d44;
}


/* 
=========================================================================
SHEET METAL
=========================================================================
*/

.we-make{}


.we-make h2{color: #052d68; font-family: 'clarendon-text-pro', serif; text-transform: initial; text-align: center; }

.we-make h3{ text-transform:uppercase; padding-bottom: 10px; font-size: 17px;}
.we-make h3 i{ text-transform:none; }

.we-make ul{
font-size: 17px;
padding-bottom: 15px;

}


.we-make li {
    list-style-type: disc;
list-style-position: inside;
padding-bottom: 15px;
text-indent: -34px;
margin-left: 49px;}


/* 
=========================================================================
OVERLAP TEXT/PHOTO
=========================================================================
*/

.hiring{background: #74c043;
color: #ffffff;}
.hiring h3{color: #000000;}

.hiring hr {height: 1px;  color: #ffffff; background-color: #74c043; margin-top:20px; margin-bottom:20px;
}

.overlap-text h3{ font-size:3em; font-family: 'clarendon-text-pro', serif; color:#ffffff }
.overlap-text p{ font-size:1.875em; font-weight: bold; line-height: 1.1em; padding-top: 10px; width: 90%; color: #ffffff}

.overlap-text a{color:#e9bb39;}


.cover {
  object-fit: cover;
}






.questions-photo{ 
    background: url(../images/questions-pic.jpg) bottom no-repeat;
    width: 50%;
    position: absolute;
    height: 100%;
    background-size: cover;
    right: 0;
}






.overlap-text{width: 50%;
box-sizing: border-box;
padding: 5% 2%;
height: 100%;
float: left;
}

.overlap-text.red{background: #74c043;}

.overlap-text.blue{background: #063171;}

.overlap-text.red a, .overlap-text.blue a{color: #e9bb39!important;}



.hiring-pic{
    background: url(../images/hiring-photo.jpg) left bottom no-repeat;
    background-size: auto 100%;
}


.questions-pic{
    background: url(../images/questions-pic.jpg) center bottom no-repeat;
    background-size: auto 100%;
}


.sheetmetal-pic{
    background: url(../images/sheetmetal-pic.jpg) center bottom no-repeat;
    background-size: auto 100%;
}


.overlap-photo{
    width: 47%; float: right; display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden}

.overlap-photo img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}


/* 
=========================================================================
Portfolio
=========================================================================
*/

    .portfolio-link{line-height: 0; }
    .portfolio-link a{ padding:30px 20px; background:#74c043; font-size: 16px; text-align:center; line-height:1em; display: block; 
        font-family: 'Lato', sans-serif; font-weight: 900; color: #ffffff; text-transform: uppercase;

    }


/* Portfolio detail
============================================= */ 

.main-content.detail{padding-top: 0;}
.main-content.detail h1{color: #063171; font-size: 3.25em;}

.detail-photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 2;
  -webkit-column-gap:   7px;
  -moz-column-count:    2;
  -moz-column-gap:      7px;
  column-count:         2;
  column-gap:           7px;  
}

.detail-photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  padding-bottom: 7px;
}


/* PORTFOLIO / GRID
============================================= */ 

#grid{ display:inline-block; width:100%; }

#grid h4{margin-bottom: 12px;}

.grid-pic { 
padding: 10px;
box-sizing: border-box;
position: relative;
}

.grid-pic img, .grid-box img{ width:100%; height:auto; overflow:hidden;}


.grid-text{ padding:20px 10px; box-sizing:border-box; background:#74c043;}

.grid-pic:nth-child(even) .grid-text{ background:#b2181e;}


.grid-text{
font-family: 'Lato', sans-serif;
color: #ffffff!important;
font-weight: bold;
}


.grid-text h3{ text-transform:uppercase; font-size:1.25em; }

.grid-text h4{ margin: 0!important; font-size:1em; }




.grid-pic:hover a.link{
    position: absolute;
    z-index: 9999999999;
    height:100%;
    width:100%;

}


li.mixitup-control-active a {
color: #74c043!important;
font-weight: bold;

}

/* Grid filter
---------------------------------------------------------------------- */


.grid-filter{ padding-bottom:20px; }

.grid-filter li a{ font-size:20px;  color: #000000; display:block; }
.grid-filter li a:hover{ color: #74c043;}


li.filter{ 
    display:inline-block;
    padding-left: 5%;
}

li.filter:first-child{ 
    padding-left: 0!important;
}


a.link{
    position: absolute;
    height: 0%;
    width: 0%;
    text-indent:-1000px;
    overflow:hidden;
    z-index: 1;
}


/* Container
---------------------------------------------------------------------- */



.tiles:after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

/*
.mix {
    visibility: hidden;
}
*/

.mixitup-ready .mix {
    visibility: visible;
}






/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 3 Columns */

.mix,
.gap {
   width: calc(100%/3 - (((3 - 1) * 1em) / 3));
}

/* 2 Columns */

@media screen and (max-width: 860px) {
    .mix,
    .gap {
        width: calc(100%/2 - (((2 - 1) * 1em) / 2));
    }
}


/* 
=========================================================================
Footer
=========================================================================
*/


.footer{ 
    padding: 30px 0;
    border-top: #021d44 25px solid;
    -webkit-box-shadow: 0px 32px 50px 27px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 32px 50px 27px rgba(0,0,0,0.75);
    box-shadow: 0px 34px 50px 27px rgba(0,0,0,0.75);
    z-index: 999;
    position: relative;

}

.footer-logo{ width:20%; float:left; height:100%; position:relative; 

 }

.footer-address{ padding-top:10px; text-align:right; }
.footer-address p{ 
    display: inline-block;
margin: 0;
padding-left: 20px;

 }

.footer-nav{
    padding-bottom: 10ppx;
    text-align: right;
}

.footer-nav li{ display:inline-block;  
    font-size:1.2em; font-family: 'clarendon-text-pro', serif;
    padding-left: 30px;

}

.footer-nav li a{ color:#000000; }
.footer-nav li a:hover{ color:#e9bb39; }



.fa-facebook-square{

position: absolute;
font-size: 60px;
left: -8%;
}





/*
=========================================================================
FORMS
=========================================================================
*/

li .form-field{ width:33%!important; float:left; }








/*
=========================================================================
Media Queries
=========================================================================
*/


@media (max-width: 1024px) {

    .footer-nav li{
        display: inline-block;
        font-size: 1.1em;
        
    }

    .footer-address p{
        font-size: 14px;
        padding-left: 18px;
    }


}/*1024*/


@media (max-width: 920px) {

   



}/*1024*/


@media (max-width: 860px) {

body {
    font-size:12.5px;
    }  

.ctr-v{position: relative;
top: 0;
transform: none;}



#header{background: #e9bb39;}

.header-logo{ display: none;}
.mobile-logo{
    display: block;
    position: absolute;
    top: 5px;
    left: 13px;
    width: 15%;
    min-width: 100px;
    z-index: 950;
}



.hero-pic{ min-height:300px; }

.header-contact{
    display: none;
}


li.mobile-contact{ display:block;  }

.mobile-contact p{ border-bottom:1px solid #e9bb39;}

.mobile-contact p a{color: #ffffff!important;}
.mobile-contact p a:hover{color: #e9bb39!important;}

.mobile-contact h3{display: none;}

.mobile-contact .fas{color: #e9bb39!important; padding-right: 4px;}

.testimonials{
    padding: 40px 82px 40px 0;
}







.hiring-text{
   padding: 15% 2%;
}

.hiring-text p {
    font-size: 19px;
    width: 100%;
    line-height: 1.35em;
}



.footer-logo{
width: 100%;
text-align: center;
}

.footer-nav{display: none;}
.footer-address{text-align: center;}
.footer-address p{display: block;}

.footer-address {text-align: right;}
.fa-facebook-square{
    left: 0;
top: 17px;
}

.ctr-v {right: auto;
left: auto; }


.footer-address{
    padding-top: 20px;
}

} /*860*/



@media (max-width: 540px) {


body {
    font-size:10px;
    } 




.testimonials{padding: 40px 50px 40px 0;}

.testimonial{ padding-top:30px; margin-top:30px; }
.testimonial-text{width: 100%;}
.testimonial img{width: 100%; padding-bottom: 15px;}

.hiring-text{width: 100%;}
.hiring-photo{display: none;}

.testimonials .panel-title{padding-left: 40px;}


.service-box h3{ 
    font-size: 3em;
    padding-top: 15px;
    padding-bottom: 10px;
 }

.fa-facebook-square{top: 24px; font-size: 50px;}


.grid-filter li.filter{ 
   font-size: 16px; padding: 0 20px 10px 0!important;
}

.mix, .gap{
width: calc(100%/1 - (((1 - 1) * 1em) / 1));
}

.grid-text h3{ font-size:2.25em; }
.grid-text h4{ font-size:1.75em; }


.questions-photo{display: none;}


} /*540*/




@media (max-width: 480px) {

    body {font-size:8px; } 

    h1{font-size: 3.5em;}

    .fa-facebook-square{
    top: 22px;
    font-size: 32px;
}

} /*480*/