/* COLOURS*/
/* blue #048bcf */
/* green #53af40 */
/* ---- BASIC SETUP ---- */
*{margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    }
    
    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: #0c0a2f;
    }
 .clearfix {zoom: 1}
.clearfix:after {
    content: '';
    clear: both;
    display: block;
    height: 1px;
    background-color: #ccc;
    width: 300px;
    margin: 0 auto;
}   

/* Style the tab */
/* Fixed sidenav, full height */
.sidenav{
  height: 65vh;
  width: 22%;
  position: fixed;
  z-index: 1;
  margin-top: -7%;
  left: 0;
  background-color: #0c0a2f;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn, .subtablinks {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.sidenav a, .dropdown-btn{font-size: 20px;}
.subtablinks{font-size: 18px;}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover, .subtablinks:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 22%; /* Same as the width of the sidenav */
  font-size: 18px; /* Increased text to enable scrolling */
  padding: 0px 8px;
}
.main a{text-decoration: none;}
/* Add an active class to the active dropdown button */
.active {
  background-color: #53af40;
  color: white;
    border-top: 1px solid #0c0a2f;
}
.specials-block{background-color: #fff;}
.pool-ad{width: 100%; margin:1% auto;}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #100e3e;
  padding-left: 0;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* ---- Reusable Components ----*/
header{height: 15vh; background-color: #0c0a2f;}
.row {
    max-width: 1200px;
    margin: 0 auto;
}
h1{
    font-size: 100%;
    color: #0c0a2f;
    height: 20px;
    margin-bottom: 20px;
}
.brand-name{color: #fff;
font-size: 230%;
text-align: center;
font-weight: 300;
margin-bottom: 5%}

h2 {
  color: #b4b4b4;
    margin: 5px 0; 
     font-size: 90%;
    font-weight: 400;
    height: 20px;
 
}
h2 p{
    display: inline-block;
    color: #d6d6d6;
    font-size: 90%;
    margin-left: 10px;
    font-weight: 400;
}
.about-us{
    color: #b5b5b5;
    text-align: center;
    font-size: 150%;
    font-weight: 300;
    margin-top: 2%;
    text-transform: uppercase
}
.about-us:after {
    display: block;
    height: 2px;
    background-color: #0c0a2f;
    content: " ";
    width: 150px;
    margin: 0 auto;
    margin-top: 10px;
}
h3{margin-top: 10px;
margin-left: 15px;
color: #5dc549;}
h4{
    margin-top: 70px;
    font-size: 130%;
}
.icon-big{
    margin-bottom: -7px;
    width: 60px;
}
p {
    text-align: left;
    color: #cecdcd;
    margin-bottom: 5px;
    font-size: 90%;
}
h5{ color: #818181; text-align: center; margin: 3%; font-weight: 400;}
/* ---- Header ----*/
.logo {
    height: 100px;
    width: auto;
    float: left;
  }
.main-nav{
    float: right;
    list-style: none;
    margin-top: 30px;
     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: #5dc549;
    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 #5dc549;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(12, 10, 47, 0.92);
   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: #5dc549;
     }
.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: #0c0a2f;
    padding: 10px;
    font-size: 80%;
}
.footer-nav {
    list-style: none;
  
}
.social-links {
    list-style: none;
margin-left: 50%;
}
.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-linkedin{-webkit-transition: color 0.2s;transition: color 0.2s}
.ion-social-linkedin:hover {
    color: #0e76a8;}

footer p {
    color: #aaaaaa;
    text-align: center;
    margin-top: 0;
}
.footer-contact{text-align: center;
    list-style: none;
    color: #aaaaaa;}

.footer-logo{
    width: 40%;
    margin-left: 30%;
}
/*__________Flex Items__________*/
.item {
    width: 100%;
   border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
   border: 2px solid #7fdb89;
   background-color: #fff;
    text-align: center;
    margin-top: 5px;
  
}

.item__img{
    height: 140px;
}

/*-----Standard home sections------*/
.home-standard{
    margin: 50px;
    height: 50vh;
}

/*------------------------Contact Form-----------------------------*/
.contact-form{
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 3% auto;
    max-width: 1000px;
    text-align: center;
    background: transparent;
  }

.contact-display{
display: block;
width: 100%;
margin: 10px auto;
padding: 10px;
background: transparent;
text-align: center;
  border: solid 2px #5dc549;
    border-radius: 20px;
    color: #aaa;
    font-weight: 300;}

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



.brochure__form__captcha{margin: 1% 35% }
*:focus {outline: none;}
/*-----About Us------*/
.section-about-us{background-image: -webkit-gradient(linear , left top, left bottom , from(rgba(255, 255, 255, 0.80)) , to(rgba(255, 255, 255, 0.30))), url(img/jKgay9.jpg);background-image: linear-gradient(rgba(255, 255, 255, 0.80) , rgba(255, 255, 255, 0.30)), url(img/jKgay9.jpg);height: 90vh; background-position: center; background-size: cover;}
.section-about-us p{margin: 3% 15% 0 15%; color: #818181; text-align: center; font-size: 100%;}
/*-----Brands------*/
.fittings{background-color: #f2f2f2; padding: 5%}
.brands-img img{width: 30%; margin: 2% 35%; border-radius: 15px;}
.brands-img p{text-align: center; margin-top: 2%; color: #aaaaaa;}
.brand-links img{margin: 5% ; width: 90%; border-radius: 15px;}

/*-----Tables------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 80%
}

th, td {
  text-align: center;
  padding: 3px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

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

.map-box{border-radius: 20px; margin: 2% 10%;}
.maps:after
{
    display: block;
    height: 1px;
    background-color: #4a4a4a;
    content: " ";
    width: 300px;
    margin: 0 auto;
    margin-top: 10px;
}
/*--------Video---------*/
video{margin: 5% 15%;}
/*--------Queries---------*/


/*-- big tablets- 1200px 1024-1200px --*/
@media only screen and (max-width: 1200px){
video{margin-left: 15%;}
}

/*small tablets to big tablets 768-1023px*/
@media only screen and (max-width: 1023px){
    video{margin-left: 15%;width: 70%; height: 70vh;}
  .sidenav{margin-top: -10%;} 
  .contact-form{max-width: 800px;}
  .contact-display{width: 80%;margin-left: 10%}
  .contact-form textarea{width: 80%;}

}

/*small tablets 481-767px*/
@media only screen and (max-width: 767px){
     video{margin-left: 20%;width: 60%; height: 50vh;}
    .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%;}
    .item {width: 95%; margin-right: 0;}
    .item__img{height: 140px;}
    .main {margin-left: 40%; padding: 0;margin-right: 0;} 
    .sidenav{width: 40%;}
}