/* 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;
}

/* ---- Reusable Components ----*/

.row {
    max-width: 1200px;
    margin: 0 auto;
}
h1 {  
    color: #048bcf;
     margin: 0;
     margin-bottom: 20px; 
     font-size: 400%;
     word-spacing: 3px;
     letter-spacing: 1px;
     display: inline-block;
     }
.africa {
    color: #53af40;
 }
h2 {
  color: #53af40;
    margin: 15px; 
     font-size: 200%;
     word-spacing: 3px;
     letter-spacing: 1px;
}
h2 p{
    display: inline-block;
    color: #d6d6d6;
    font-size: 90%;
    margin-left: 10px;
    font-weight: 400;
}
.about-us{
    color: #d6d6d6;
    text-align: center;
    font-size: 150%;
    font-weight: 300;
    margin-top: 50px;
}
.about-us:after {
    display: block;
    height: 2px;
    background-color: #29b7ff;
    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: center;
    color: #bab9b9;
    margin-bottom: 20px;
}
/* ---- Header ----*/
header {
    background-image: url(img/hero.png);
    height: 100vh;
    background-size: cover;
    background-position: center;
}  
.vert {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(7, 16, 54)), to(rgba(4, 102, 255, 0.46))), url(img/jKgay9.jpg);
    background-image: linear-gradient(rgb(7, 16, 54), rgba(4, 102, 255, 0.46)), url(img/jKgay9.jpg); 
}
.hero-text-box {
    position: absolute;
   width: 1200px;
    margin: 0 auto;
    margin-left: 20%;
    margin-top: 8%;
}
.logo {
    height: 150px;
    width: auto;
    float: left;
  }
.main-nav{
    float: right;
    list-style: none;
    margin-top: 70px;
} 
.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 ----*/
input[type=submit],
.submit-btn {
    display: inline-block;
    padding: 10px 0;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
     background-color: #5dc549;
    border: 1px solid #5dc549;
    color: #fff;
    width: 30%;
    margin: 0 35%;
}


input[type=submit]:hover,
input[type=submit]:active,
.submit-btn:hover,
.submit-btn:active {
    border: 1px solid #53af40;
    background-color: #53af40;
    }



/* ---- 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;
}

.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: 10px;
}
.footer-contact{text-align: center;
    list-style: none;
    color: #aaaaaa;}
.footer-logo{width: 40%;    
    margin-left: 30%;
}
/*__________Flex Items__________*/
.item {
    margin-top: 50px;
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 600px;
    height: 250px;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
   border: 2px solid #7fdb89;
   
}

.item__hero {-webkit-box-flex: 0;-ms-flex: 0 1 45%;flex: 0 1 45%;}

.item__content {
background-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 35px 30px;
    font-size: 18px;
}


.item__price {
  background-color: #fff;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 50px;
    flex: 0 1 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }

.item__img {
    width: 70%;
    display: block;
    float: left;
    
}

.item__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
   
}

.item__heading {
    font-size: 30px;
    margin-right: auto;
    color: #a5a5a5;
}

.item__tag {
    font-size: 17px;
    text-transform: uppercase;
    color: white;
    padding: 5px 5px;
    border-radius: 100px;
    margin-left: 25px;
    margin-top: -20px;
    font-weight: 100
}

.item__tag--1 {background-color: #a5a5a5;}


.item__content ul,
.item__price ul{
    list-style: none;
}
.item__price ul li {
    font-size: 30px;
    padding: 0;
}
.drop1{color: #dabd87;}
.drop2{color: #9b8c79;}
.drop3{color: #747a52;}
.drop4{color: #48554d;}
.drop5{color: #68686a;}
.drop6{color: #106b58;}


.ten-year{
   margin-top: 30px;
}
.dropa{color: #4f337d;}
.dropb{color: #005cab;}
.dropc{color: #8fccf0;}
.dropd{color: #d41721;}
.drope{color: #f26921;}
.dropf{color: #fad60d;}
.dropg{color: #000000;}
.droph{color: #593d30;}
.dropi{color: #a66129;}
.dropj{color: #f8f8f8;}
.dropk{color: #f2f2f3;}
.dropl{color: #bdbfbf;}
.dropm{color: #cbc5bd;}


.color-block{max-width: 800px;}
.color-drops{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}



/*-----Blocks------*/
.catagories{margin: 1.2%;}
.catagories img{width: 100%;}


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

/* ---- Contact Form ----*/

.contact-form {
    width: 80%;
    margin: 0 auto;
}

input[type=text],
input[type=email],
select,
textarea {
    color: #fff;
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.57);
}

textarea {height: 100px;}

*:focus {
    outline: none;

}
.form-messages{
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-align: center;
}
.success {
    background-color: #10cb3c;
}
.error {background-color: #e69909;}

/*-----Brands------*/
.brands-img img{width: 100%; background-color: #102b4e;}

/*-----Big Red------*/
video{margin: 0 15%;}



/*--------Queries---------*/


/* big tablets- 1200px 1024-1200px*/
@media only screen and (max-width: 1200px){
    video{width: 50%; margin: 0 10%;}
    .logo {height: 150px;}
    .main-nav li {margin-left: 5px; margin-right: 5px; font-size: 85%;}
    .about-us{margin-top: 20px;}
    .blocks{margin-left: 15px; margin-top: 0; margin-bottom: 20px;}
    .home-standard{margin: 20px; height: 30vh;}
    .hero-text-box {
    position: absolute;
    width: 1000px;}
}

/*small tablets to big tablets 768-1023px*/
@media only screen and (max-width: 1023px){
    .logo {height: 100px;}
    .main-nav li {margin-left: 5px; margin-right: 7px;}
    .main-nav li a:link,
    .main-nav li a:visited {
    font-size: 90%;
    font-weight: 400;}
    .main-nav{margin-top: 50px;}  
    header {height: 80vh;}  
    .blocks img{width: 60%; float: left;}
    h1 {margin-bottom: 5px; 
    font-size: 300%;}
    h2 {margin: 5px; 
     font-size: 200%;}
    h2 p{font-size: 80%;
    margin-left: 10px;
    font-weight: 400;}
    .item__price ul li{font-size: 15px;}
    .item {margin-top: 20px;
    margin-left: 10px;
    height: 150px;}
    .item__content {
    padding: 25px 20px;
    font-size: 16px;}   
    .item__heading {font-size: 25px;}   
    .item__tag {font-size: 15px;
    padding: 5px 5px;
    margin-top: -5px;}
    .item__img {width: 50%;}
    h4{margin-top: 35px;}
    .color-block{max-width: 500px; margin-top: 60px; margin-left: 50px;}
    .EcoVIP{width: 70%;}
    footer p {margin-top: 7px; font-size: 90%;}
    .about-us p{font-size: 70%;}
}

/*small tablets 481-767px*/
@media only screen and (max-width: 767px){
    .span-4-of-6{width: 100%;}
    .logo {height: 70px;}
    .main-nav li {margin-left: 1px; margin-right: 2px;}
    .main-nav li a:link,
    .main-nav li a:visited {
    font-size: 60%;
    font-weight: 300;}
    .main-nav{margin-top: 30px;}  
    header {height: 60vh;} 
    h2 {margin: 10px; 
    font-size: 100%;}
    h2 p{font-size: 80%;}
    .vertical-blocks{height: 35vh; }
    .horizontal-blocks{height: 15vh; }
    .purple{height: 20vh; }
    .more {height: 20vh; }
    .green{height: 20vh; }
    h3{margin: 5px auto;
    font-weight: 400; text-align: center;}
    .blocks {margin-top: 50px;}
    .brands-img img{width: 90%; }
    .form-box{margin-bottom: 50px;height: 50vh;}
    footer {padding: 5px;font-size: 70%;}
    footer p {font-size: 80%;}  
    .hero-text-box {width: 700px;}
    h1 {margin: 0;
     margin-bottom: 0; 
     font-size: 200%;
     word-spacing: 2px;}
    .item__content {
    padding: 15px 10px;
    font-size: 14px;}   
    .item__heading {font-size: 20px;}   
    .item__tag {font-size: 10px;
    padding: 5px 5px;
    margin-top: -2px;}
    .item__img {width: 60%;}
    h4{margin-top: 40px; font-weight: 300;}
    .color-block{max-width: 500px; margin-top: 30px; margin-left: 15px; margin-right: 30px;}
    .EcoVIP{width: 90%;}
    .item {margin-left: 0;height: 130px;}
    .long-tank{width: 50%;}
}

/*small phones 0-480px*/
@media only screen and (max-width: 480px){
    .logo {height: 70px; margin: 0 0 4% 0;}
    .main-nav {display: none;}
    .mobile-nav-icon {display: inline-block; margin-right: 20px; font-size: 80%; margin-top: 15px;}    
    .main-nav {float: right; margin-top: 15px; margin-right: 15px;}
    .main-nav li {display: block;}
    .main-nav li a:link,
    .main-nav li a:visited {display: block; border: 0; padding: 5px 0; font-size: 70%;}
    header {height: 100vh;} 
    .home-standard{height: 60vh; margin: 5px;margin-bottom: 15%}
    .about-us{font-size: 90%;}
    .about-us:after {height: 1.5px; width: 50px;}
    p{font-size: 70%; padding: 10px;}
    .vertical-blocks{height: 47vh; display: block; margin: 0; width: 100%;}
    .horizontal-blocks{height: 15vh; display: block; margin: 0; width: 100%; margin-bottom: 50px;}
    .purple{height: 20vh; display: inline-block; width: 50%; margin: 0;}
    .more {height: 20vh; display: block; margin: 0; width: 100%;}
    .green{height: 20vh; display: inline-block; width: 50%; margin: 0;}
    .blocks {margin-top: 5px; margin-right: 15px;}
    .section-form{margin-left: 5px; font-size: 90%;}
    .contact-form {width: 100%; margin: 0 ;}
    input[type=text],
    input[type=email],
    select,
    textarea {width: 100%; padding: 5px; }
    textarea {height: 100px;}
    .form-messages{width: 90%; margin: 0 auto;}
    input[type=submit],
    .submit-btn {padding: 5px 15px;font-weight: 300; text-decoration: none; border-radius: 150px;width: 100px; margin-left: 35%;}
    .sticky .main-nav {margin-top: 5px; font-size: 70%;}
    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited {padding: 5px 0;}
    .sticky .mobile-nav-icon {margin-top: 20px;}
    .sticky .mobile-nav-icon i {color: #fff;}
    .sticky .logo {display: block;  height: 80px;}
    .brands-img{width: 14%; margin-top: 50px;}
    footer {padding: 10px;font-size: 60%;}
    .social-links {margin-left: 0; display: inline-block;}
    .footer-nav li,
    .social-links li {margin-right: 0;}
    .social-links li a:link,
    .social-links li a:visited {font-size: 180%;}
    footer p {text-align: left;margin-top: 0; margin-bottom: 0; padding: 0}
    h1 {font-size: 90%; margin-top: 5px;}
    .notImportant{display: none;}
    h2 {margin: -5px;font-size: 80%;}
    h2 p{font-size: 70%;
    margin-left: 0;
    font-weight: 300;
    padding: 0;}
    .hero-text-box {width: 400px; }
     .EcoVIP{width: 60%;}
    .ten-year{margin: 10px; width: 50%}
    .vertical-images,
    .long-tank{width: 40%; margin-top: 5px;}
    .color-block{display: none;}
    footer .col:after {display: block;
    height: 2px;
    background-color: #e3e3e3;
    content: " ";
    width: 200px;
    margin: 0 auto;
    margin-top: 1px;}
}
    
}