/* Start Globle Reules */

body{
    box-sizing: border-box;
    height: 3000px
}

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

/* End Globle Reules */


/* Start Header */

  .header{
   background: url("../images/car.jpg") no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-size:cover;
	min-height: 630px;
  }
  
  
    
    .header .mobile{
      display: none;
      margin: auto;
      width: 100%;
      height: 630px;
      position: absolute;
      top: 0px
    }
    
    
  @media(max-width:767px){/*Phones  and tablets screen media*/
    .header .brand {float:right;font-size: 50px}
    
    .header .brand span{display: none}
    
    .header .side-menu{
      background: #774545;
      display: none;
      width:350px;
      height: 100%;
      color:#fff;
      position: fixed;
      top:0;
      left:0%;
      z-index: 2;
    }
    
    .header .side-menu .account-info{
      width:100%;
      padding: 20px;
    }
    
    
    .header .side-menu .account-info img{
      width:150px;
      height: 150px;
      border-radius: 50%;
      margin: auto;
      background: #ccc;
      padding: 2px;
      box-shadow: 1px 1px 3px 1px #ccc, -1px -1px 3px 1px #ccc
    }
    
    .header .side-menu .account-info h3{margin: 10px;color: #999}
    
   .header .side-menu .account-info ul{list-style: none}
    
    .header .side-menu .account-info ul li{padding: 10px;font-size: 20px}
    
    .header .side-menu .account-info ul li a{text-decoration: none;color:#fff }
  
    .header .side-menu .account-info ul li a:hover{color:#999}
    
    .header .side-menu .account-info .rights {
      margin-top: 100px;
      padding:10px;
      
    }
  
      .header .mobile{
    display: block;
    margin-top: 150px;
    padding-top: 30px;
    height: 200px;
    position: absolute;
    z-index: 1
    }
    
    
     .header .mobile h2{color: #ef664d;font-size: 30px}
    
      .header .mobile button{
    display: block;
    background: none;
    border: 1px solid #fff;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px
      }
      
      .header .mobile button:hover{color: #ef664d}
    
    .header .brand h5{
      display: none !important;
    }
    
    .header .brand .menu{
      display: block;
      color: #888
    }
    
    
    
    
    .header .container {
      width: 100%;
    }
    
    .header .links {display: none}
    
    .header .overlay{display: block}
    
    .header .header-content{display: none}
  
  }
  
  
  @media(min-width:768px){/*small screen media*/
    .header .brand {float:right;font-size: 50px}
    
    .header .brand h5{display: none}
    
    .header .side-menu{
      background: #774545;
      display: none;
      width:350px;
      height: 100%;
      color:#fff;
      position: fixed;
      top:0;
      left:0%;
      z-index: 2;
    }
    
    .header .side-menu .account-info{
      width:100%;
      padding: 20px;
    }
    
    
    .header .side-menu .account-info img{
      width:150px;
      height: 150px;
      border-radius: 50%;
      margin: auto;
      background: #ccc;
      padding: 2px;
      box-shadow: 1px 1px 3px 1px #ccc, -1px -1px 3px 1px #ccc
    }
    
    .header .side-menu .account-info h3{margin: 10px;color: #999}
    
    .header .side-menu .account-info ul{list-style: none}
    
    .header .side-menu .account-info ul li{padding: 10px;font-size: 20px}
    
    .header .side-menu .account-info ul li a{text-decoration: none;color:#fff }
  
    .header .side-menu .account-info ul li a:hover{color:#999}
    
    .header .side-menu .account-info .rights {
      margin-top: 100px;
      padding:10px;
      
    }
  
  
      .header .mobile{
    display: block;
    margin-top: 150px;
    padding-top: 30px;
    height: 200px;
    position: absolute;
    z-index: 1
    }
    
    
     .header .mobile h2{color: #ef664d;font-size: 30px}
    
      .header .mobile button{
    display: block;
    background: none;
    border: 1px solid #fff;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px
      }
      
      .header .mobile button:hover{color: #ef664d}
    
    .header .brand h5{
      display: none !important;
    }
    
    .header .brand .menu{
      display: block;
      color: #888
    }
    
    
    
    
    .header .container {
      width: 100%;
    }
    
    .header .links {display: none}
    
    .header .overlay{display: block}
    
    .header .header-content{display: none}
  
    
  }
  
  
  @media(min-width:991px){/*meduim screen media*/
    
   .header .brand {width:30%;float:left;font-size: 50px;display: block;}
   
   .header .brand .menu{display: none}
   
   .header .brand h5{
    display: block !important;
    width:35%;
    padding: 5px;
    display:block;
    color: #fff;
    background: #ef664d;
    border-radius: 5px}
   
   .header .links{display: block;width:70%;text-align: center;padding-top: 20px}
    
   
   
   .header .links ul{list-style: none}
   
   .header .links ul li{font-weight: bold;display: inline-block;margin-left: 20px;padding: 10px;border-radius: 3px}
   
   .header .links ul li:hover{background-color: #ef664d;color: #fff}
   
   .header .links ul li a{text-decoration: none;color: #fff;font-size: 22px}
   
   .header .mobile{display: none}
   
   .header .header-content{
    background: black;
    width:500px;
    height: 400px;
    color: #fff;
    margin-left: 10px;
    margin-top: 20px;
    opacity: .7
    }
    
    .header .header-content p{
      line-height: 2;
      font-size: 18px;
      color: #999
    }
    
    .header .header-content h2{color:#ef664d;font-size: 30px }
   
  .header .header-content{display: block}
  
  .header .header-content button{background:#ccc;font-size: 18px }
  
  .header .header-content button a{text-decoration:none;color: #444;}
  
    
  }
/* End Header */


/* Start Our features */

.our-features {
  background: #eaeaea;
  padding-bottom: 30px;
  padding-top: 30px
}

.our-features .feat{
  width: 33.333333%;
  background: #eaeaea
}

.our-features .feat{
  font-size:50px;
  color: #ababab;
}

.our-features h4{
  font-size: 40px;
  color: #989898;
  margin-top:20px;
  margin-bottom: 40px
}

.our-features .feat p{
  font-size: 22px;
  line-height: 30px;
  padding: 10px
  
}

@media(max-width:767px){/*phones and Tablets screen */
  
  .our-features .container{width: 100%}
  
  .our-features .feat{
    float: none;
    margin: auto;
    width: 100%
  }
  
  .our-features h4{font-size: 25px}
  .our-features .feat p{font-size: 16px}
  
  
}

@media(min-width:768px){/*small screen media*/
    .our-features .container{width: 80%}
  
  .our-features .feat{
    float: none;
    margin: auto;
    width: 100%
  }
  
  .our-features h4{font-size: 30px}
  .our-features .feat p{font-size: 22px}
  
}



@media(min-width:991px){/*meduim screen media*/
    .our-features .container{width: 80%}
  
  .our-features .feat{
    float: left;
    margin: auto;
    width: 33.3333%
  }
  
  .our-features h4{font-size: 30px}
  .our-features .feat p{font-size: 22px}
  
}


@media(min-width:992px){/*large screen media*/
    .our-features .container{width: 80%}
  
  .our-features .feat{
    float: left;
    margin: auto;
    width: 33.3333%
  }
  
  .our-features h4{font-size: 30px}
  .our-features .feat p{font-size: 22px}
  
}

/* End Our features */

/* Start Our Terms */

  .our-terms{
    background: url("../images/fleet1.jpg") no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-size:cover;
	height: 650px;
  color: #fff;
  
  }

  
  .our-terms h4{
  color: #ef664d;
  font-size: 50px;
}

.our-terms p{
  line-height: 1.7em;
  margin-top: 30px;

}
  
  
@media(max-width:767px){/*phones  and Tablets screen*/
  
.our-terms .container{width: 80%}

.our-terms{overflow: hidden}

.our-terms h4{
  color: red;
  font-size: 25px;
}

.our-terms p{
  line-height: 1.5em;
  margin-top: 10px;
  font-size: 16px

}

.our-terms p:last-of-type{display: none}

}



  
@media(min-width:768px){/*small screen media*/
  
.our-terms .container{width: 80%}

.our-terms{overflow: hidden}

.our-terms h4{
  color: red;
  font-size: 25px;
}

.our-terms p{
  line-height: 1.5em;
  margin-top: 10px;
  font-size: 16px

}

}

  


/* End Our Terms */


/* Start images */

  .content .rleases{
    color: #777;
    font-size: 16px
  }

  .content .rleases .images{
    width: 25%;
    height: 290px;
    float:left;
    padding: 10px;
  }
  
   .content .rleases .images img{
    height:60%;
    width:100%
   }
   
   .content .rleases .images span{
    display: inline-block;
    color: #fff;
    background-color: #ef664d;
    width: 100%;
    padding: 10px;
    font-size: 20px
   }
   
   .content .rleases h3{
    color: #333;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 10px
    
   }
   
   @media(max-width:767px){/*phones and tablets media*/
  
.content .container{width: 80%}

.content .rleases .images{width:50%;font-size: 14px}

.content .rleases .images span{font-size: 15px;}
}

@media(min-width:768px){/*small screen media*/
  
.content .container{width: 80%}

.content .rleases .images{width:33.3333%;font-size: 14px}

.content .rleases .images span{font-size: 15px;}

.content .rleases h3{color: #111}
}

/* End images */



/* End Content */


/* Start Footer*/

  .footer{
    background: url("../images/footer.jpg") no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-size:cover;
	height: 650px;
  color: #fff
  }
  

  .footer h4{
  color: #ef664d;
  font-size: 50px;}
  

  
  .footer .info{width:100%;height: 30%;color:#fff;margin-top: 10px;padding: 20px;font-weight: bold;}
  
  .footer .contact{width:100%;height: 60%;}
  
  .footer .contact input,button{
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #333;
    padding: 10px;
    color: #fff
  }
  
  .footer .info{padding: 10px;padding-top: 50px}
  
  .footer .contact label{font-size: 16px;margin-top: 25px;display: inline-block}
  
@media(max-width:767px){/*All screen media*/
  
.footer .container{width: 80%}


.footer h4{
  color: #ef664d;
  font-size: 25px;
}

.footer .contact label a{text-decoration: none;color:#fff}
}



@media(min-width:768px){/*small screen media*/
  
.footer .container{width: 80%}


.footer h4{
  color: #ef664d;
  font-size: 25px;
}


.footer .contact label a{text-decoration: none;color:#fff}


}

/* End Footer */


/* Start My Framework */

  .overlay{
    background-color: #000;
    opacity: .5;
    height: 100%;
  }
  

.container{
  margin: auto;
  width: 1100px;
  padding:10px
}

.text-center{
   text-align: center
}


.text-l{
   text-align:left
}

.text-r{
   text-align:right
}

.float-l{
   float:left
}

.float-r{
   float:right
}


.clearfix{
   clear: both
}

.h2{
  font-size: 1.6em
}

/* End My Framework */