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

h2 {
  text-align: center;
    margin-top: 50px; 
     font-size: 250%;
     word-spacing: 3px;
     letter-spacing: 1px;
    font-weight: 300;
    color: #0598e2;
  }
h3:after {
    display: block;
    height: 2px;
    background-color: #29b7ff;
    content: " ";
    width: 150px;
    margin: 0 auto;
    margin-top: 10px;
}

h3{text-align: center;
    margin: 20px; 
    font-size: 150%;
    font-weight: 300;
    color: #c1c1c1;
    margin-top: 50px;}
h4{
   font-weight: 300;
    font-size: 130%;
    text-align: center;
    margin-right: 25px;
}
.icon-big{
    margin-bottom: -7px;
    width: 60px;
}
/* ---- Header ----*/
nav{background-color: #0c0a2f;}
.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;
}
/* ---- Mobile Nav ----*/
.mobile-nav-icon {
    float: right;
    margin-top: 40px;
    cursor: pointer;
    display: none;
    
}
.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}
/* ---- 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: #888;
    -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: #888;
    text-align: center;
    margin-top: 10px;
}
.footer-contact{
    list-style: none;
    color: #888;}
.footer-logo{width: 40%;    
    margin-left: 30%;
}
/*__________Flex Items__________*/
.item {
    margin-top: 20px;
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 400px;
    height: 100px;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
   border: 2px solid #7fdb89;
   
}
.item__hero {-webkit-box-flex: 0;-ms-flex: 0 1 25%;flex: 0 1 25%;}
.item__heading {
    font-size: 30px;
    margin-right: auto;
    color: #a5a5a5;
    font-weight: 400;
}
.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-drops{
display: inline-block;
}
.swatch{margin-left: 40px;}


.iconify{
    font-size: 400%;
    margin-top: 7px;
}

.colors{ margin-bottom: 50px;}

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


/* big tablets- 1200px 1024-1200px*/
@media only screen and (max-width: 1200px){
     
    .logo {height: 150px;}
    .main-nav li {margin-left: 10px; margin-right: 10px;}
}



/*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;}  
    .colors{margin-right: 15px;}
    .swatch{width: 80%;}
    footer p {margin-top: 7px; font-size: 90%;}
}

/*small tablets 481-767px*/
@media only screen and (max-width: 767px){
    .logo {height: 80px;}
    .main-nav li {margin-left: 5px; margin-right: 7px;}
    .main-nav li a:link,
    .main-nav li a:visited {
    font-size: 70%;
    font-weight: 300;}
    .main-nav{margin-top: 30px;}  
    h2 {font-size: 200%;}
    h3:after {height: 2px;
    width: 100px;
    margin: 0 auto;
    margin-top: 5px;}
    h3{text-align: center;
    margin: 10px; 
    font-size: 100%;
    font-weight: 200;}
    .brands-img img{width: 90%; }
    footer {padding: 5px;font-size: 70%;}
    footer p {font-size: 80%;}  
   
    .item {margin-top: 20px;
    margin-left: 10px;
    height: 50px;}
    .iconify{font-size: 150%;
    margin-top: 7px;}
    .item__heading {font-size: 20px;
    font-weight: 300;
        margin-top: 10px;}
    
}

/*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%;}
    .sticky .main-nav {margin-top: 5px;}
    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited {
    padding: 5px 0;
    color: #5dc549;
    float: left;}
    .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}
   
    h2 {font-size: 110%; margin: 0;}
    h3:after {height: 1px;
    width: 100px;
    margin: 0 auto;
    margin-top: 5px;}
    h3{text-align: center;
    margin: 0; 
    font-size: 90%;
    font-weight: 200;}
    .colors{margin: 10px 0;}
    .swatch{width: 60%; margin: 2% 20%;}
    h4{
  
    font-size: 100%;
    text-align: center;
    margin-right: 0;}
    footer .col:after {display: block;
    height: 2px;
    background-color: #e3e3e3;
    content: " ";
    width: 200px;
    margin: 0 auto;
    margin-top: 1px;}
}