/* COLOURS*/
/* blue #6BCADC */
/* red #BF1E2E */
/* dark gray #343434 */
/* ---- BASIC SETUP ---- */
*{margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    }
section{margin-top: 20px;}    
    html,
    body {
        color: #555;
        font-family: 'Lato', Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: 300;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
        background-color: #fff;
    }
 .clearfix {zoom: 1}
.clearfix:after {
    content: '';
    clear: both;
    display: block;
    height: 1px;
    background-color: #ccc;
    width: 300px;
    margin: 0 auto;
}   

/* ---- Reusable Components ----*/
header{height: 20vh; background-color: #343434; border-bottom: 2.5px solid #BF1E2E;}
.row {
    max-width: 1200px;
    margin: 0 auto;
}
.js--section-form{border-top: 2.5px solid #6BCADC;}
h1{ color: #fff; margin: 25px auto; text-align: center; font-size: 250%; font-weight: 300; text-transform: uppercase;}

h2 {
  color: #343434;
    margin: 80px 0 20px 0; 
     font-size: 150%;
    font-weight: 400;
    height: 20px;
    text-align: center;
    text-transform: uppercase;
}
h2:after{
    display: block;
    height: 2px;
    background-color: #6BCADC;
    content: " ";
    width: 150px;
    margin: 0 auto;
    margin-top: 10px;
}

h3{margin-top: 40px;
    margin-bottom: 15px;
margin-left: 0;
color: #eb1e32;}
h4{margin-top: 10px;
margin-left: 5%;
color: #eb1e32;
}
h5{ color: #818181; text-align: center; margin: 3%; font-weight: 400;}
.icon-big{
    margin-bottom: -7px;
    width: 60px;
}
p {
    text-align: left;
    color: #575757;
    margin-bottom: 5px;
    font-size: 90%;
}

/* ---- Header ----*/
.logo {
    height: 180px;
    width: auto;
    float: left;
    margin-left: 37px;
  }
.main-nav{
    float: right;
    list-style: none;
    margin-top: 80px;
     margin-right: 20px;
} 
.main-nav li {
    display: inline-block;
    margin-left: 20px;
}
.main-nav li a:link,
.main-nav li a:visited {
    padding: 3px 0;
    color: #6BCADC ;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 110%;
    font-weight: 500;
    border-bottom: 2.5px solid transparent;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2.5px solid #6BCADC;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(52, 52, 52, 0.87);
   z-index: 9999;
}
.sticky .main-nav {margin-top: 35px;}
.sticky .main-nav li a:link, 
.sticky .main-nav li a:visited {
    padding: 10px 0;
    color: #6BCADC;
     }
.sticky .logo {display: block;  height: 100px;}




/* ---- Mobile Nav ----*/
.mobile-nav-icon {
    float: right;
    margin-top: 40px;
    cursor: pointer;
    display: none;
    
}
.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}

/* ---- Buttons ----*/





/* ---- Footer ----*/
footer { 
    background-color: #343434;
    padding: 10px;
    font-size: 80%;
}
.footer-nav {
    list-style: none;
  
}
.social-links {
    list-style: none;
margin-left: 15%;
}
.footer-nav li,
.social-links li {
    display: inline-block;
    margin-right: 15px;
}
.footer-nav li:last-child,
.social-links li:last-child {
    display: inline-block;
    margin-right: 0;
    margin-top: 5px;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited{
    text-decoration: none;
    border: 0;
    color: #aaaaaa;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.footer-nav li a:hover,
.footer-nav li a:active{
    color: #ddd;
}
.social-links li a:link,
.social-links li a:visited {
    font-size: 170%;
}
.ion-social-facebook{-webkit-transition: color 0.2s;transition: color 0.2s;}
.ion-social-facebook:hover {
    color: #3b5998;
}
.ion-social-instagram{-webkit-transition: color 0.2s;transition: color 0.2s;transition: color 0.2s;}
.ion-social-instagram:hover {
    color: #E1306C;
}
.ion-social-linkedin{-webkit-transition: color 0.2s;transition: color 0.2s;}
.ion-social-linkedin:hover {
    color: #0e76a8;}
.ion-social-whatsapp{-webkit-transition: color 0.2s;transition: color 0.2s;}
.ion-social-whatsapp:hover {
    color: #25D366;}
footer p {
    color: #aaaaaa;
    text-align: center;
    margin-top: 0;
}
.footer-contact{text-align: right; list-style: none;color: #aaaaaa;}
.business-hours{float: left;text-align: left; list-style: none; color: #aaa;}
.footer-logo{
    width: 40%;
    margin-left: 30%; margin-top: 10px;
}
/*__________Flex Items__________*/
.brand{width: 70%; float: right; margin-right: 10%;}

/*-----Standard home sections------*/
.home-standard{
    margin: 50px;
    height: 50vh;
}
/*Testimonials*/
/* --------------------*/
.section-testimonials {
        
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(107, 202, 220, 0.65)), to(rgba(107, 202, 220, 0.65))), url(img/back-customers.jpg);
        
        background-image: linear-gradient(rgba(107, 202, 220, 0.65), rgba(107, 202, 220, 0.65)), url(img/back-customers.jpg);
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

blockquote {
    padding: 0;
    font-style: italic;
    line-height: 145%;
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 35%;
    margin-right: 35%;
    
}
blockquote:before,
{
    content:"";
    font-size: 500%;
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    
}

cite {
    font-size: 90%;
    margin-top: 25px;
    display: block;
}


cite img{
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    
}
/*------------------------Contact Form-----------------------------*/
.contact-form{
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 3% 10%;
    width: 100%;
    text-align: center;
    background: transparent;
  }

input[type=text],
input[type=email],
select{
display: block;
width: 100%;
margin: 10px auto;
padding: 10px;
background: rgba(255, 255, 255, 0.8);
text-align: center;
  border: solid 2px #F05929;
    border-radius: 20px;
    color: #555;
    font-weight: 300;}

textarea{
  width: 100%;
    margin: 5px auto;
    padding: 10px;
    height: 100px;
    background:  rgba(255, 255, 255, 0.8);
    text-align: center;
   border: solid 2px #F05929;
    border-radius: 20px;
    font-weight: 300;
    color: #555;
}
.submit-btn{
    cursor: pointer;
    width: 150px !important;
    margin: 1% 40%;
    color: #555;
    font-weight: 400;
    display: block;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    border: solid 2px #F05929;
    border-radius: 20px;
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
.submit-btn:hover{background-color: #F05929; }  

.brochure__form__captcha{margin:0 21%;}
*:focus {outline: none;}



/*-----About Us------*/
.section-about-us{background-image: -webkit-gradient(linear , left top, left bottom , from(rgba(52, 52, 52, 0.95)) , to(rgba(255, 255, 255, 0.40))), url(img/hero.png);background-image: linear-gradient(rgba(52, 52, 52, 0.95) , rgba(255, 255, 255, 0.40)), url(img/hero.png);height: 90vh; background-position: center; background-size: cover;margin-top: 0;}
.section-about-us p{margin: 3% 15% 0 15%; color: #fff; text-align: center; font-size: 100%;}

/*--------Map---------*/

.map-box{border-radius: 20px; margin: 2% 10%;}
.whatsapp-image{margin:2% 30%;width: 40%;-webkit-transition: margin 2s;transition: margin 2s;}
.quick-message a img:hover{margin:2% 25%;}
/*--------Queries---------*/


/*-- big tablets- 1200px 1024-1200px --*/
@media only screen and (max-width: 1200px){

}

/*small tablets to big tablets 768-1023px*/
@media only screen and (max-width: 1023px){
    .contact-form{max-width: 800px;}
    input[type=text],
    input[type=email],
    select{width: 80%;margin-left: 10%}
    textarea{width: 80%;}

}

/*small tablets 481-767px*/
@media only screen and (max-width: 767px){
    .logo {height: 80px;}
    .main-nav li {margin-left: 20px; font-size: 70%;}
    .about-us:after {margin-top: 5px; margin-bottom: 5px;}
    .fittings .row{margin-top: 5%;}
    .sticky .logo {height: 80px;}
    header{height: 12vh;}
    footer {font-size: 70%;}
    footer p {margin-top: 5px; padding: 0;}
    .social-links {margin-top: 0;}
    .sidenav a, .dropdown-btn{font-size: 16px;}
    .subtablinks{font-size: 14px;}
}

/*small phones 0-480px*/
@media only screen and (max-width: 480px){
    body{font-size: 80%;}
    .col {width: 100%;
    margin: 0 0 4% 0;}
    .main-nav {display: none; height: auto;float: right;margin-top: 5px;margin-right: 15px;}
    .mobile-nav-icon {display: inline-block; margin-top: 15px; margin-right: 10px;}    
    .main-nav li {display: block; font-size: 70%;}
    .main-nav li a:link,
    .main-nav li a:visited {display: block;border: 0;padding: 2px 0;font-size: 100%;}
    .sticky .main-nav {margin-top: 2px;}
    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited {padding: 2px 0;}
    .sticky .mobile-nav-icon {margin-top: 15px; margin-right: 10px;}
    .about-us{font-size: 120%;} 
    .about-us:after {width: 70px;}
    .fittings{background-color: #f2f2f2; padding: 5%}
    .brands-img img{width: 50%; margin: 2% 25%; border-radius: 15px;}
    .brands-img p{text-align: center; margin-top: 2%; color: #aaaaaa;}
    .brand-links img{margin: 5% 25%; width: 50%; border-radius: 10px;}
    .brochure__form__captcha{margin: 1% 16%;}
    .brand-name{font-size: 150%; margin-left: 10%;}
    h1{font-size: 150%;}
 .contact-form{margin: 0 5%;    width: 90%;}
input[type=text],
input[type=email],
select{width: 100%;margin: 0;}
textarea{width: 100%; margin: 0;}
.submit-btn{margin: 0 26%;}
.brochure__form__captcha{margin: 1% 15%;}
header{height: 20vh;}
.section-about-us{height: 100vh;}
.section-about-us p{margin: 0 5%; color: #fff; text-align: center; font-size: 100%;}
blockquote {margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5%;
    margin-right: 5%;}
    .map-box{height: 50vh}


   
}