/*Yellow: #ffdd21
  Dark Yellow: #f9b433
  Light Orange: #f9b433
  Orange: #f6a12a
  Dark Orange: #f5881f  */
/* ---- Basic Setup ----*/

*{ margin: 0;
   padding: 0;
   box-sizing: border-box;    
 }

html,
body { 
    color: #333333;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 22px;
    font-weight: 300;
    text-rendering: optimizeLegibility;    
}
/* ---- Reusable Components ----*/

.row {
    max-width: 1140px;
    margin: 0 auto;
    }
a{text-decoration: none;}
section {
    padding: 80px 0;
    }
header {
    background-image: linear-gradient(rgba(3, 5, 70, 0.7), rgba(255, 255, 255, 0.01)), url(Resources/css/hero.jpg);
    background-size: cover;
    height: 100vh;
}

.hero-text-box{
    position: absolute;
    width: 65%;
    top: 20%;
    left: 10%;   
    color: #ffffff;
}
.hero-text-box h1{
    text-align: left;
   
}
.hero-text-box h1:after{
    display: none;
}
.hero-text-box p{text-align: left; padding: 0; color: #fff;}
.scroll-ind{margin: 25% 0; width: 50%;}
.logoHome {
  height: 100px;
  margin-top: 10px;
    float: left;
    transition: height 0.5s;
}
.logoHome:hover {
  height: 105px;
 }
.main-nav{ margin-right: 20px;}
.main-nav li{
  display: inline-block;
  float: right;
  list-style: none;
  margin-right: 30px;
    margin-top: 50px;
}
.main-nav li a:link,
.main-nav li a:visited {
  padding: 5px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  fontsize: 110%;
  transition: color 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
  border-bottom: 2px solid #f9b433;
}
/*Sticky-nav*/
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 14, 70, 0.9);
   height: 100px;
    z-index: 9999;
}
.sticky .main-nav {margin-top: 20px;}
.sticky .main-nav li a:link, 
.sticky .main-nav li a:visited {
    padding: 10px 5px;
    color: #fff;
   
     }
.sticky .logo {display: block; height: 90px;}



/* ---- Mobile Nav ----*/
.mobile-nav-icon {
    float: right;
    margin-top: 40px;
    cursor: pointer;
    display: none;
    
}
.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}
/* ---- Headings ----*/
h1{text-align: center; font-size: 150%; color: #a0a0a0; font-weight: 400; text-transform: uppercase;}
h1:after{display: block;
    height: 2px; background-color: #f9b433;
    content: " ";
    width: 150px;
    margin: 0 auto;
    margin-top: 15px}
h2{
    color: #fff;
    text-align: center;
    font-weight: 400;
}
h3,
h4 {
    color: #9d9c9c;
    text-align: center;
    font-size: 80%;
    font-weight: 300;
}
h5{font-size: 100%;
font-weight:400;}
p {text-align: center; padding: 2% 5%; line-height: 1.3; color: #696969;}
/* ---- Buttons ----*/

.button {
   background-color: rgb(255, 221, 33);
   padding: 5px;
   margin: 5% 40%;
    width: 20%;
    text-align: center;
   border-radius: 150px;
   display: inline-block;
   color: #fff;
   text-decoration: none;
    transition: color 0.2s;
   
    font-weight: 300;
    font-size: 120%;
}
.button:hover{color: #f6a12a;}

.button-textured{border: 3px solid #f6a12a;
    text-transform: uppercase;
    font-size: 300%;
    font-weight: 500;
   padding: 7px;
   margin: 5% 2%;
   border-radius: 150px;
   display: inline-block;
   color: #fff;
   text-decoration: none;
    transition: background 1s;
    font-size: 90%;
}
.button-textured:hover{
    background-color: #f6a12a;
    background-image: none;
}
.spec-button{
    text-decoration: none;
    font-size: 80%;
    color: #f9b433;
    margin: 2% 25%;
}
.spec-button3{
    text-decoration: none;
    font-size: 80%;
    color: #f9b433;
    margin: 2% 31%;
}
.spec-button4{
    text-decoration: none;
    font-size: 80%;
    color: #f9b433;
    margin: 5% 32%;
}
.spec-button2{
    text-decoration: none;
    font-size: 80%;
    color: #f9b433;
    margin: 2% 37%;
    
}
.toolbox{text-decoration: none; color: #555;transition: color 0.2s;}
.toolbox:hover,
.toolbox:active{color: #f9b433;}
.textlink{text-decoration: none; color: #f9b433; }
.textlink:hover{color: #f9b433; }
/*--- Icons ---*/
.small-icon{
display: inline-block; 
margin: 1%;
color: #ffdd21;
}
ul{list-style: none; margin: 1% 15%;}
.servlist{margin: 1% 1%; border: 1px solid #9f9f9f; border-radius: 20px;font-size: 90%;}
.servlist li{padding: 1%;}
/*--- Footer ---*/
footer {
    background: linear-gradient(#ffdd21, #f5881f);
    padding: 0;
    font-size: 80%;
}
.social-links {
    list-style: none;
    float: left;
    text-align: center;
    margin: 0 37%;
}
.social-links li {
    display: inline-block;
}

.social-links li a:link,
.social-links li a:visited{
    text-decoration: none;
    border: 0;
    color: #fff;
    transition: color 0.2s;
}
.social-links li a:link,
.social-links li a:visited {
    font-size: 250%;
 }

.facebook:hover {
    color: #3b5998;
}

.twitter:hover {
    color: #1da1f2;}

footer p {
    color: #fff;
    text-align: center;
    
}
.footer-contact{
    list-style: none;
    color: #fff;}

.footer-logo{
    height: 80px;
    float: right;.
   }

/*--- Tabs ---*/
.new-forklifts{margin-bottom: 3%; margin-top: 1%; padding: 0;}
.w3-bar{
    max-width: 1140px;
    margin: 0 auto;
}
.w3-bar-item{
    width: 33%;
    border: none;
    background-image: url(images/texture8.jpg);
    background-size: cover;
    height: 50px;
    color: #fff;
    font-weight: 400;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.w3-red{
    background-image: none;
    color: #ffdd21;
    background-color: white;
    border: 2px solid #ffdd21;
    border-bottom: none;
}
.w2-bar-item{
    width: 24.7%;
    border: none;
    background: transparent;
    color: #fff;
    height: 40px;
    border-radius: 5px;}
.w3-container{background-image: url(Resources/css/prodImg.jpg);
    max-width: 1140px;
    margin: 0 auto;
    border: 2px solid #ffdd21;
    padding: 5px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: none;
    background-position: center;
    background-size: cover;
}
.w3-container h2{
    color: #b5b5b5;
    font-size: 90%
}

/*Product Cards*/
.product-card1,
.product-card2,
.product-card4,
.product-card5,
.product-card3{
    border: 2px solid #ffdd21;
    border-radius: 20px;
    box-shadow: none;
    margin: 1% 0.6%;
    background-color: #fff;
}

.product-card1{height: 400px;}
.product-card2{height: 520px;}
.product-card3{height: 450px;}
.product-card4{height: 320px;}
.product-card5{height: 350px;}

.long-forklift-img{
    width: 60%;
    height: 60%;
    margin: 3.5% 20%;
}
.small-forklift-img {
    height: 40%;
    margin-top: 50%;
    margin-left: 6%;
}
.new-forklift-img{ width: 70%; margin: 2% 15%;}

.product-card1 p,
.product-card3 p,
.product-card4 p,
.product-card5 p,
.product-card2 p{text-align: center; font-size: 70%; margin: 1%; color: #696969;padding: 0;}

.product-card4 h4{
    margin-bottom: 10%;
}

/*Home Cards*/
.services a div{max-width: 30%; margin: 3%; height: 60vh;}
.home-card2{
    background-image: url(images/texture8.jpg);
    background-size: cover;
    box-shadow: none;
    border-radius: 20px;
    
}
.home-card2 img{
    width: 70%;
    margin: 5% 15%;
}
.home-card2 p{
    color: #cecece;
    text-align: center;
    margin-top: 0;
    font-size: 90%;
    padding: 5%;
}


.maintips{padding: 1% 20%; color: #909090;}
.maintips p{text-align: center;}

.used-forklifts{background-color: #fdfdfd; }
.used-forklifts p{text-align: center; }
.used-forklifts ul{font-size: 90%; margin: 2% 15%;}

.tyreimg{width: 30%; margin: 0 35%;}

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

.contact-form h2{
    background: transparent;
    margin-top: 0;
    padding: 10px;
    text-transform: uppercase;
}

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

.contact-form textarea{
  width: 100%;
    margin: 5px auto;
    padding: 10px;
    height: 100px;
    background: transparent;
    text-align: center;
   border: solid 2px #ffdd21;
    border-radius: 20px;
    color: #fff;
}

.submit-btn{
    cursor: pointer;
    width: 150px !important;
    margin: 1% auto;
    color: #fff;
    font-weight: 400;
    
}
.contact-display{margin: 10px 0;}
.brochure__form__captcha{margin: 1% 35% }
*:focus {outline: none;}
/*-----Map Tabs-----*/
.maps .w3-bar-item{
    color: #fff;
    background-color: #f9b433;
    width: 49.8%;
    }
.maps ul{
    margin: 20% 20%;
    color: #fff;
}

/*-----Place Holder color-----*/
::placeholder {
  color: #f2f2f2;
  opacity: 1; /* Firefox */
    font-weight: 300;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #f2f2f2;
    font-weight: 300;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #f2f2f2;
    font-weight: 300;
}



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


/* big tablets- 1200px 1024-1200px*/
@media only screen and (max-width: 1200px){
 h2{font-weight: 400; font-size: 110%;}
.w3-bar-item{width: 33%; height: 50px;}  
.maps .w3-bar-item{width: 49.7%;}
}

/*small tablets to big tablets 768-1023px*/
@media only screen and (max-width: 1023px){
.w3-bar-item{width: 33%; height: 40px;} 
p{font-size: 90%;}
.product-card1{height: 350px;}
.product-card2{height: 450px;}
.product-card3{height: 340px;}
.product-card4{height: 270px;}
.product-card5{height: 280px;}
.long-forklift-img{width: 60%; height: 50%; margin: 3.5% 20%;}
.small-forklift-img {height: 30%; margin-top: 55%; margin-left: 10%;}
.new-forklift-img{ width: 70%; margin: 2% 15%;}
.product-card1 p,
.product-card3 p,
.product-card4 p,
.product-card5 p,
.product-card2 p{font-size: 60%;}
.w3-container h2{font-size: 70%}
h3,
h4 {font-size: 70%;}
.spec-button{font-size: 70%; margin: 2% 15%;}
.spec-button4{font-size: 70%; margin: 5% 24%;}
.w2-bar-item{width: 23%; margin-left: 1%;font-size: 80%;}
.hero-text-box p{font-size: 85%;}
.logoHome {height: 80px;}
.logoHome:hover {height: 85px;}
.main-nav{ margin-right: 2%;}
.main-nav li{margin-right: 15px; margin-top: 30px;}
.main-nav li a:link,
.main-nav li a:visited {font-size: 90%;}
.home-card2 p{font-size: 80%;}
footer {font-size: 70%;}
.social-links li a:link,
.social-links li a:visited {font-size: 200%;}
.footer-logo{height: 60px; margin-top: 20px;}
.used-forklifts ul{margin: 2% 2%; font-size: 80%;} 
h1{font-size: 120%;font-weight: 400;}
ul{margin: 1% 2%; font-size: 80%;}
.maintips{padding: 1% 5%;}
.button {font-size: 100%;}
.contact-form{margin: 20px auto; max-width: 600px;font-size: 80%;}
.contact-form input{padding: 5px;}
.contact-display{margin: 10px 0;}
.brochure__form__captcha{margin: 1% 25%;}
.maps .w3-bar-item{width: 49.5%;}
iframe{width: 350px; height: 350px;}
}

/*small tablets 481-767px*/
@media only screen and (max-width: 767px){
.sticky .main-nav {margin-top: 5px;}
.sticky .main-nav li a:link, 
.sticky .main-nav li a:visited {padding: 5px 0; float: left;}
.sticky .mobile-nav-icon {margin-top: 10px;}
.sticky .mobile-nav-icon i {color: #fff;}
h1 {font-size: 150%;}
h2 {font-size: 120%;}
.long-copy {width: 100%; margin:20px 0;}
.hero-text-box{padding: 0 5%;}  

}

/*small phones 0-480px*/
@media only screen and (max-width: 480px){
    body {font-size: 14px;}
    .contact-form{max-width: 400px;font-size: 100%;}
    .contact-display{margin: 10px 0;}
    .brochure__form__captcha{margin: 1% 25%;}
    .maps .w3-bar-item{width: 49.5%;}
    iframe{width: 350px; height: 350px;}
    .maps ul{margin: 5% 30%;}
    .social-links{display: block;
    float: left;}
    .sticky .mobile-nav-icon, .mobile-nav-icon {display: inline-block; margin: 25px 10px;}    
    .col {width: 100%; margin: 0 0 2% 0;}
    .main-nav {display: none;} 
    .main-nav li {display: block; float: right; margin: 3px 30px;}
    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited,
    .main-nav li a:link,
    .main-nav li a:visited {display: block; border: 0; padding: 0; font-size: 100%; margin: 0; float: left;}
    .logoHome {height: 80px;}
    .logoHome:hover {height: 75px;}
    footer {font-size: 80%;}
    footer .col {width: 50%; margin: 0 0 2% 0;}
    .footer-contact{padding: 10px; text-align: center; font-size: 90%;}
    .social-links{margin-top: 12px;}
    .footer-logo{width: 50%; margin: 5% 75%;}
/*--- Tabs ---*/
.w3-bar-item{width: 32.7%; height: 30px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.w2-bar-item{width: 23.5%;}
.w3-container h2{color: #555; font-size: 110%;}
.product-card1,
.product-card2,
.product-card4,
.product-card5,
.product-card3{margin: 1% 15%; width: 70%; float: right;}

.product-card1{height: 300px;}
.product-card2{height: 380px;}
.product-card3{height: 350px;}
.product-card4{height: 300px;}
.product-card5{height: 300px;}

.long-forklift-img{
    width: auto;
    height: 65%;
    margin: 3% 32%;
}
.small-forklift-img {width: 50%; margin: 5% 25%; height: auto;}
.new-forklift-img{ width: 50%; margin: 2% 25%;}

.product-card1 p,
.product-card3 p,
.product-card4 p,
.product-card5 p,
.product-card2 p{text-align: center; font-size: 70%; margin: 1%; color: #555; padding: 0;}

.product-card4 h4{color: #555;}
h3,
h4 {color: #555; font-size: 100%;}
.spec-button,
.spec-button2,
.spec-button3,
.spec-button4{font-size: 100%; color: #f5881f;margin: 2% 36%;}
    
/*Home Cards*/
.services a div{height: 30vh;}
    
header {
    background-image: linear-gradient(rgba(3, 5, 70, 0.7), rgba(255, 255, 255, 0.01)), url(Resources/css/hero.jpg);
    background-size: cover;
    height: 70vh;
}
    

}