*{
    box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     -ms-box-sizing:border-box;
}
body{
    margin:0;
    font-size:62.5%;
    font-weight: 400;
}

a{
    text-decoration: none;
    font-family: 'Lato', sans-serif;
}

#content a{color:#589c4d;}
#content a:hover{color:#223e7f;}

h1, h2, h3, h4, li, blockquote, form{font-family: 'Lato', sans-serif;}

p, #content li{font-size: 1.55em;font-family: 'Lato', sans-serif;color: #636363;}

header{
    display:flex;
    align-items: center;
    padding:40px 5%;
    justify-content:space-between;
    gap:20px;
}

.handle{display:none;}

/*#navContainer{
    -webkit-box-flex:2;
    -ms-flex:2;
    flex:2;
}*/

#mainNav{
    display: table;
    table-layout: fixed;
    font-size: 1.6em;
    font-weight: bold;
}

#mainNav nav{
    display: table-cell;
    vertical-align: middle;
    width: auto;
    text-align: center;
}

#mainNav nav ul{
    display: table;
    width: 100%;
    padding-left: 0;
    list-style-type: none;
    white-space: nowrap;
}

#mainNav nav ul li{
    display: table-cell;
    text-align: center;
	padding-right:40px;
}

#mainNav nav ul li a{
    color:#1E3C7F;
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

#mainNav nav ul li:hover a{
    color:#4F9843;
}

#mainNav nav ul li.active a{padding-bottom: 3px; border-bottom:2.4px solid #4F9843;}

a.logo{display: block;-webkit-box-flex:1;-ms-flex:1;flex:1;}
a.logo img{max-width:270px;width: 270px;}
a.logo:hover{opacity:.7;}

.btnBox{width:140px;padding:.75em 1em !important;border:2px solid #4F9843;border-radius: 6px;background-color: transparent; -webkit-transition: all 0.25s ease-in;transition: all 0.25s ease-in;}
.btnBox:hover{background-color:#4F9843;}
.btnBox:hover a{color:#FFF !important;}
.hero{position:relative;overflow: hidden;height:800px;display:flex;align-items:center;justify-content:center;background-image: url(/images/uploads/hero/janitorial-services-el-paso.jpg);background-size: cover;}
.hero::before{position:absolute;display:block;content:"";top:0;right:0;bottom:0;left:0;width:100%;height:auto;background-color:rgba(0,0,0,.45);}
.heroText{
    color:#FFF;
    margin:0 5%;
    text-align:center;
    position:relative;
}

.heroText h2{margin-top:0;margin-bottom: 5px; font-size: 5vw;font-weight: 900; color:#FFF;text-transform: uppercase;}

.heroText p{margin-top: 0; font-size: 1.3rem;font-weight: 400; color:#FFF;}

.heroText a{display: inline-block;font-size: 1.2rem;color:#FFF; padding:15px 25px; border: 3px solid #4F9843; border-radius: 6px; background-color:#4F9843;-webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;}

.heroText a:hover{background-color:#1E3C7F;border-color:#1E3C7F;}

#homeWrapper{
    display: block;
    position: relative;
    width:100%;
    height:100%;
    content: "";
    background-image: url(images/uploads/site/carpet-bck.png);
    padding-bottom: 50px;
}

.clear{clear:both;content:"";display: block;width: 100%;}

#homeWrapper::after{content:"";display: block;width: 100%;clear:both;}

.homeText{position: relative;width: 100%; z-index: 998; top:0;bottom: 0;padding:0 2%;}

.homeText h2{text-align: center;text-transform: uppercase;font-size: 2.3vw;font-weight: 900; margin:0;color:#4f9843;padding-top:30px;}

.homeText h3.hometag{display: block; text-align: center;font-size: 2.5em;font-weight: 400;margin-top:5px;margin-bottom: 40px;color:#223e7f;font-weight: 700;}

.cleaner{position: absolute;z-index: 990; top: 0;bottom: 0;right: 0;left: 0; width:400px;max-width:500px;height:auto;margin: 0 auto;}

#cleanerContainer{position: relative; z-index: 2;}
#cleanerContainer img{max-width: 500px;}

#whiteBck{position: absolute;z-index: 1;top:0; background-color:rgba(255,255,255,.3);content: "";display: block;width: 100%;height:100%;}

.loveMC{margin-top:10%;;text-align: center;position: absolute;right: 0; left: 0;width:33.333%;margin: 0 auto;}
.loveMC img{max-width: 350px;}

.fade{opacity: 0;-webkit-transition: all 1s ease-out;transition: all 1s ease-out;}
.fadeIn{opacity: 1 !important;}

.feature{width:30%;}

.featureLeft{
    clear:right;
    float:left;
    text-align: left;
}

.featureRight{
    clear:left;
    float:right;
}

.feature img{
    max-width:80px;
}

.feature h3{
    color: #223e7f;	
    font-size: 3em;
    padding-bottom: 5px;
    margin:0;
}

.feature p{
    color:#272727;
    line-height: 20px;
    font-weight: 700;
    font-size: 1.7em;
    margin:0 auto;
}

.parallax {
    /* The image used */
    background-image: url(images/uploads/site/clean-office.jpg);
    background-color: #000;
    /* Set a specific height */
    min-height: 200px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 998;
}

.text h2{font-size:4em;}
.text h3{font-size:3.75em;}
.text p{font-size:1.75em;}
.textImage{margin:80px 6%;display: flex;justify-content: center;align-items: center;}
.textImage div:first-of-type{margin-right:80px;}
.textImage .image img{border-radius: 20px; max-width:100%;}
.textImage .text{flex:1;}
.textImage .text h2:first-of-type{margin-top: 0;}
.textImage .text h2, .textImage .text h3{margin-bottom: 0;}

#preFooter div{
	position:relative;
    text-align: center;
    height: 100%;
    padding:40px 5%;
}

#preFooter::before{
	position:absolute;
    width:100%;
    height:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
    content:"";
    background-color:rgba(0,0,0,.45);
}

#preFooter h3{
    color:#FFF;
    font-size: 3.5em;
    margin-top:10px;
    margin-bottom: 5px;
}

#preFooter p{
    color:#FFF;
    font-size: 2.4em;
    margin: 0 0 15px; 0;
}

#preFooter a{display: inline-block;font-size: 1.2rem;font-weight: bold;color:#FFF; padding:10px 25px; border: 3px solid #4F9843; border-radius: 6px; background-color: rgba(79,152,67,.75);-webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;}

#preFooter a:hover{background-color:#1E3C7F;border-color:#1E3C7F;}

#internalBck{
    max-height: 380px;
    overflow: hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 5%;
}

.internalParallax {
    /* The image used */
    background-image: url(images/uplaods/site/internal1.jpg);
    background-color: #000;
    /* Set a specific height */
    min-height: 380px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 998;
}

#internalBck h1{
    color:#FFF;
    font-family: 'Work Sans', sans-serif;
    font-size: 3.3rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 5px #000;
}

#content{padding:0 2%;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}

#content h2, .beforeAfter h2{
    color: #589c4d;
    font-size: 3.5em;
    margin-bottom:0;
}

#content h3{
    color:#223e7f;
    font-size: 2.8em;
    margin-bottom:0;
}

#content li{padding:3px 0;}

.col1{width:100%;}
.col2 {-webkit-box-flex: 1;-ms-flex: 1;flex: 1; width: 50%;}
.col2:nth-child(even) {padding-left: 4%;}

.noWrap{display:block !important;}

.ytVideo{float:right;}

.estimateTop{text-align:center;}
.formWrap h2, .formWrap p{text-align:center;}

form{width:100%;padding:0 20%;}
form fieldset{display:block; margin-top:30px;border: 0;}
form fieldset div{display: inline-block;width:45%;}
form fieldset div:nth-of-type(odd){margin-right:30px;}

label, form legend{
	color:#454545;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	display:block;
	margin-bottom:3px;
    font-size:1.5em;
    margin-top:20px;
}

input[type="submit"]{
	background-color:#4F9843;
	margin-top: 10px;
    color: white;
    text-transform: uppercase;
    font-size:1.5em;
    cursor:pointer;
    width:20%;
}

input[type="submit"]:hover{
	background-color:#223e7f;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    -o-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
    }

input{
	padding:10px;
    font-size:1.4em;
    width:100%;
}

textarea{	padding:10px;
    font-size:1.4em;
    width:72%;}

select{width:auto;height:30px;}

.thankYou{
  color: #fff;
  font-weight: bold;
  background-color: #223e7f;
  padding: 10px;
  text-align: center;
}

.divTable{display:table;margin-top:10px;}
.divTableRow{display:table-row;}
.divTableCell{display:table-cell;vertical-align:middle;}
.greenText{font-weight:bold;font-size:18px;color:#589c4d;}

figure img {width:100%;}
figcaption{display:none;}

.social a i{
  color:#1E3C7F;
  font-size:35px;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  -o-transition: color 0.25s ease-in;
  transition: color 0.25s ease-in;
}
.social a:nth-child(n+2){margin-left:15px;}
.social a i:hover{color:#589c4d;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.beforeAfter{padding:0 2%;}

.btn{display:inline-block;font-size: 1.2rem;color:#FFF !important; padding:15px 25px; border: 3px solid #4F9843; border-radius: 6px; background-color: rgba(79,152,67);-webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;}

.btn:hover{background-color:#1E3C7F;border-color:#1E3C7F;}


#footer{margin-top:40px;}

footer{
    clear:both;
    display: table;
    table-layout:fixed;
    width: 100%;
    background-color: #223e7f;
    padding:80px 5% 40px 5%;
    position: relative;
    z-index: 998;
    white-space: nowrap;
}

footer #fRight, footer #fMid, footer #fLeft{
    display: table-cell;
    color:#FFF;
    width:33.333%;
    vertical-align: middle;
}

footer h4{
    color: #FFF;
    font-size: 2.5em;
    font-weight: 600;
    margin-bottom: 5px;
}

#fLeft p{color:#FFF;}
#fLeft img{display: inline-block;margin-right: 10px;}
#fRight{text-align: right;}

#fMid{color:#FFF;text-align: center;}
#fMid h4{margin: 0;}
#fMid p{font-size: 20px;color:#FFF;margin: 0;}

#fRight p{
    color:#FFF;
}

#fLeft p:first-of-type{
    margin-top:0;
}

footer i{margin-left:20px;font-size: 3.3em;}
footer a{color:#FFF;}
footer a:hover{opacity: .7;}

@media only screen and (max-width: 990px) {
    #mainNav{display: none;}
    
     #mainNav .responsive{
        display: block;
        width:100%;
        height:100%;
        opacity: 1;
      }
    
    #mainNav{
        display: block;
        float: none;
        top:180px;
        left: 0;
        width:100%;
        position: absolute;
        z-index: 999;
        
    }

     #mainNav nav{
        opacity: 0;
    -webkit-transition: all 0.30s ease-in;
    transition: all 0.30s ease-in;
     }
    
    #mainNav nav ul{
        display: none;
    }
    
       #mainNav nav.responsive ul{
        float:none;
        display: block;
        width:100%;
        text-align:center;
        margin:0 auto;
        padding:40px 5%;
         position: relative;
         z-index: 999;
         display: block;
         background-color:#223e7f;
     }

     #mainNav nav ul li{
        display: block;
        padding:20px 0;
        border-bottom: 1px solid  rgba(245, 245, 245, 0.3);
        width:100%;
        margin:0 auto;
     }
    #mainNav nav ul li:nth-last-of-type(1){border-bottom:0;border:0;background-color:  #4F9843;}
    #mainNav nav ul li:hover:nth-last-of-type(1) a{color:#223e7f;}
    #mainNav nav ul li a{color:#FFF;font-weight: normal;font-size: 18px;}
    #mainNav nav ul li.active a{padding-bottom:0; border-bottom:0;}
    #handler{
        width: 35px;
        height: 30px;
        display: block;
        cursor: pointer; 
        float:right;
        padding: 10px 35px 16px 0px; 
    }
    #handler i{
        color:#223e7f;
        font-size: 3em;
    }
    #handler.active i{
        color:#4F9843 !important; 
    }
    .heroText h2{font-size:10vw;}
    .textImage, .imageText{flex-direction: column;}
    .textImage div:first-of-type{margin-right: 0;margin-bottom: 20px;}
    .textImage > .image:first-child{order:2;}
    footer{display: block;padding: 2%;}
    footer #fRight, footer #fMid, footer #fLeft{
        display: block;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        margin-top: 35px;
    }
}

@media only screen and (max-width: 800px) { 
    .homeText h2{font-size: 5vw;}
    .loveMC{display: none;}
    .feature{
        float: none;
        display: block;
        height: auto;
        width: 100%;
        text-align: center;
        margin-bottom:40px;
    }
    #internalBck h1{font-size: 10vw;}
    .contentImg img{width: 100%;}
    #content, .contentImg, .col1, .col2{display: block;width:100%;text-align: center;flex: none;}
    #content ul{list-style: none;padding-left: 0;}
    figure img{width:100%;}
}

@media only screen and (max-width: 750px) { 
figure{float:none !important;margin:10px auto;}
    form{padding:0;text-align:left !important;}
    form fieldset div{width:100%;}
}

@media only screen and (max-width: 410px) {
    header{height:108px;}
.cleaner{left:-200px;}
    #logo img{width: 250px}
    .internalParallax{background-attachment:scroll;}
}