@font-face { font-family: Open Sans;
src:url('fonts/OpenSans-Regular-webfont.woff');
}



@font-face {
  font-family: 'anton';
  src: url("font/anton-v9-latin-regular.woff");
  
}



body, html { overflow-x:hidden; }
body{
    overflow-x: hidden;
	/*font-family: "Open Sans",Sans-Serif ;*/
	color:#000000;
    font-size: 1.1rem;
    font-weight: 300;

}


*{	margin: 0;
	padding: 0;
	}

.narrow{
    width: 75%;
    margin: 1.5rem auto;
    padding-top:2rem;
}


.narrow h1{
    border-width: medium;
    border-radius: 0;
    padding: .6rem 1.2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin: 1rem;   
    color: white;
}


.btn-secondary:hover,
.btn-secondary:forcus{
    border-color: #189582;
    background-color: #189582;
    color: white;
}





.navbar{
	
    text-transform: uppercase;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .1rem;
    background-color: #ffffff!important;
}


/*--.navbar-brand img{
    height: 2rem;
} --*/



.navbar-nav li {
   padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link{  color: #4d4d4d;    padding-top: .8rem;}

.navbar-dark .navbar-nav .nav-link:active{   color: #008080;  }
.navbar-dark .navbar-nav .nav-link:hover{   color: #008080;  }

.navbar-light .navbar-toggler {
     border:none; 
}

.page-header{
    width: 100%;
    margin: 0 0 25px 0;
    padding: 0px;
    float: left;
    font-size: 48px;
    color: #4d4d4d;  
    font-weight: 700;
    text-transform: uppercase;
    line-height: 48px;
}

.page-header-white{
    width: 100%;    
    padding: 0px;
    float: left;
    font-size: 46px;
    color: #fff;
    text-transform: uppercase;
    line-height: 48px;
    font-weight: 700;
}


.page-header-blue{   
    width: 100%;
    margin: 0 0 25px 0;
    padding: 0px;
    float: left;
    font-size: 46px;
    color: #51b2ed;
    text-transform: uppercase;
    line-height: 48px;
    font-weight: 700;
}

/*------ landing page  -------*/

.home-inner{
    background-image: url(../images/hero-image.png);
    height: 800px;
    background-size: cover;
    background-attachment: fixed;
}


.caption{
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 20%;
    z-index: 1;
    color: white;
    text-transform: uppercase;   
   
}

.text-banner{
     margin: 0 auto;
    padding: 50px 0;
    display: table;
    background: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
}


.text-banner span{
    font-weight: 100;
}

.caption h1{
    font-size: 2.8rem;
    font-weight: 700;   
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;

}


.caption h3{
    font-size: 1rem;   
    text-shadow: 0.1rem 0.1rem 0.5rem black;
    padding-bottom: 1.6rem;
    }






.contact-button{
  
    border-radius: 5px;
    width: 200px;
    color: #fff;   
    background-color: #51b2ed;
    padding: 10px 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 700;
}

#navbarResponsive{
    z-index: 2;
}

#myBtn {
 position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    color:  #51b2ed;
    cursor: pointer;
    padding: 10px 15px;
    font-size: 18px;
    border: 1px  #51b2ed solid;
    border-radius: 0;
    background: none;
}

#myBtn:hover {
  border: 1px #4a4a4a solid; /* Add a dark-grey background on hover */
  text-decoration: none;
	    color: #4a4a4a;
}

.tag{      
   letter-spacing: 2px;
    color: #f8f9fa;
    font: normal normal 500 0.9em/3em national-extra-bold,sans-serif;
    background-color: #333;
}

.tag p{padding-top: 10px;}

.parallax {
    background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../images/hero-image.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
    color: #fff;
}

.parallax-strata {
    background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../images/strata-cleaning-hero.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
    color: #fff;
}

.parallax-high-pressure {
    background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../images/high-pressure-hero.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
    color: #fff;
}

.parallax-commercial {
    background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(../images/commercial-cleaning.jpg) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
    color: #fff;
}







.myline{
        height: 2px;
        background-color: #333;
}

.bg-colour {
    background-color: #f1f1f1;
}


.product-text {
    font-family: "merriweather",Arial,Helvetica,Sans-Serif;
    letter-spacing: 2px;
    font-size: 35px;
    margin-top: 0px;
}
.padding-t60 {
    padding-top: 80px;
}

.padding-b20 {
    padding-bottom: : 20px;
}


.stext{
    
   color: #4d4d4d;
    padding-top: 10px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;

}



#products li{
    padding-bottom: 5px;
}
 

.con li{
        display: inline-block;       
        color:  #00365C;  
        margin: 0 5px;
}

.con img{
    padding-right: 5px;
}

.con a{
    color:  #00365C;
    /* font: normal normal 900 1em/1.3em national-extra-bold,sans-serif; */
    font-size: 25px;
    letter-spacing: -0.2px;
    font-weight: bold;
}

.con {
    font-size: 25px;
    letter-spacing: -0.2px;
    font-weight: bold;
    text-align: right;
}


.left-menu li{
        display: inline-block;
}


.aboutus-p{font: normal normal 800 0.8em/1.5em national-extra-bold,sans-serif;}

.padding-5{padding: 5px;}

.padding-l30{padding-left:30px;}

#aboutus{background-image: url(../images/bg.jpg); 
         background-size: cover; color: #fff;}
#aboutus h4{color: #b4d0e5;}


#founder{background-image: url(../images/bg.jpg); 
         background-size: cover; color: #fff;}

#founder span{
    font-weight: 100;
}

#values{
    background-image: url(../images/bg.jpg);
    background-size: cover;
    color: #fff;

}

#values span{
    font-weight: 100;
}
#contactus{
    background: #2a2a2a;    
    color: #fff;

}

/*.form-control {
     background-color: #595959;
    border: none;
    color: #fff;
}

.form-control:focus {
    color: #f8f9fa;
    background-color: #595959;
    border-color: #80bdff;
    
}
*/
#products .col-md-3 {
    border: 10px solid #fff;
    color: #fff;
    font-size: 12px;
    padding: 30px 15px;
    
}

#products .col-md-3 a{
    text-decoration: none!important;
    }

#products ul{text-align: left;}


.mycol-1{   background: #6c757d12; padding-top: 20px;}
.mycol-2{    background: #333333;}
.mycol-3{    background: #f3b01b;}
.mycol-4{    background-color: #00d2bb;}



.clean{
    padding-top: 180px;
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
}

.clean li{

    list-style: none;
}


.clean ul{
    margin-left: 0;
}

.form-group {
    margin-bottom: 10px;
}


.hero-banner{
    background: rgba(0, 0, 0, 0.7);
    padding: 50px;
    margin-top: 180px;
}

.hero-banner p{
font-size: 14px;
}



.values-img{
    background-image: url(../images/values.jpg);   
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
        height: 600px;
}


.founder-img{
    background-image: url(../images/founder.jpg);   
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
        height: 600px;
}


.myselcton{   
    padding: 17px 0;
    border-top: #555555 1px solid;
}

.padding-5{
    padding-bottom: 0 5%;
}