/* - - - - - - - - - - - - - - - - - - - - - - - 
GLOBAL FIXES
- - - - - - - - - - - - - - - - - - - - - - - - */

* {
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   box-sizing: border-box;
}

.group:before,
.group:after {
   content:"";
   display:table;
}
.group:after {
   clear:both;
}
.group {
   zoom:1;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.clearfix:after {
   content: "";
  display: table;
  clear: both;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      GENERAL CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@font-face {
  font-family: 'Avenir-Light';
  src: url('Avenir-Light.ttf');
}

@font-face {
  font-family: 'Avenir-Bold';
  src: url('Avenir-Bold.ttf');
}

body {
   font-family: Avenir-Light, sans-serif;
   font-size: 100%;
   line-height: 1.5;
   height: 100%;
   background: none;
}

a { text-decoration: none; cursor: pointer; color: black; }

h1.h1home { font-size: 0.1em; color: #c3c3c3; }

h2 { font-family: Avenir-Bold, sans-serif; font-size: 2em; margin: 0; width: 100%; text-align: center; padding-top: 0.5em; padding-bottom: 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      MOBILE CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* -----------------------------------------------------------------
      PAGE
----------------------------------------------------------------- */

/* .content { width: 100%; height: auto; margin: 0 auto; background-color: white; font-size: 0.9em; padding-left: 1em; padding-right: 1em; padding-bottom: 10em; } */

.welcome { 
  width: 100%;
  height: 22em;
  background: url(../images/welcome.jpg) center no-repeat;
  background-size: cover;
}

.welcometext { width: 100%; height: auto; font-family: Avenir-Bold, sans-serif; font-size: 2em; font-weight: normal; text-align: center; color: white; padding-top: 3em; text-shadow: 2px 2px black; line-height: 1em; }
.welcomebutton { width: 18em; height: 4em; font-family: Avenir-Bold,sans-serif; font-size: 1em; font-weight: normal; text-align: center; color: white; background-color: #348B6C; text-align: center; line-height: 4em; margin: 0 auto; margin-top: 2em; transition: all .2s ease-in-out; }
.welcomebutton:hover { background-color: white; color: #348B6C; }

.grow { ransform: scale(1.1); }
.grow:hover { transform: scale(1.3); }

#aboutlogo { width: 80%; }

p { padding-left: 0.5em; padding-right: 0.5em; text-align: justify; }

/* -----------------------------------------------------------------
      ARAMA
----------------------------------------------------------------- */

.front-search-inside { width: 100%; height: 240px; float: left; padding: 1em }


.front-search-form-header { width: 100%; height: 60px; line-height: 60px; font-family: Avenir-Bold, sans-serif; font-size: 16px; }
.front-search-date { width: 65%; height: 40px; line-height: 40px; padding: 5px; padding-left: 50px; font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; background-image: url('../images/various/calendar-icon.png'); background-position: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.front-search-time { width: 15%; height: 40px; line-height: 40px; background-color: white; padding: 5px; font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; }
.front-search-location { width: 100%; height: 40px; padding: 5px; background-color: white;  font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; background-image: url('../images/various/location-icon.png'); background-position: 5px 5px; background-repeat: no-repeat; }
.front-search-button { width: 100%; height: 4em; font-family: Avenir-Bold, sans-serif; font-size: 16px; color: white; background-color: #DC9500; border: none; cursor: pointer; }
.front-search-button:hover { background-color: #996800; }

/* -----------------------------------------------------------------
      PAGE
----------------------------------------------------------------- */

.ourfleet { width: 100%; height: 22em; background-color: #F0F0F0; }
.ourfleet-inside { width: 100%; } 
img#ourfleet { width: 100%; height: auto; }

.rentnow { width: 100%; height: auto; background-color: white; margin-bottom: 1em; }
.rentnow-inside { width: 100%; } 

.aboutus { width: 100%; height: auto; background-color: #C3C3C3; }
.aboutus-inside { width: 100%;  } 

.rentalterms { width: 100%; height: auto; background-color: #F0F0F0; }
.rentalterms-inside { width: 100%; font-size: 80%; padding: 1em;} 

.contactus { width: 100%; height:15em; background-color: white; }
.contactus-inside { width: 100%; } 

.contactus-box { width: 100%; height: auto; margin-right: none; float: none; text-align: center; margin-bottom: 1em; }
.contactus-box:last-child { margin-right: 0em; }

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */

.top-bg { width: 100%; height: 3.7em; }

/* header */

.header {
  background-color: #fff;
  width: 100%;
  z-index: 3;
  font-family: Avenir-Bold, sans-serif;
  font-size: 1.1em;
  position: fixed;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 0.8em 1em;
  text-decoration: none;
  color: #000000;
  z-index: 3;
  border-bottom: solid 0.1em #F2F2F2;
  transition: all .3s ease-in-out;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: none;
  border-bottom: none;
}

.header {
  display: block;
  float: left;
}

.logo {
   display: block;
   float: left;
   margin-top: 0.8em;
   margin-left: 1em;
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 400px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      DESKTOP CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media screen and (min-width: 800px) {

.welcometext { font-size: 3em;  }

.welcome { 
  height: 30em;
}

.top-bg { width: 1000px; height: 5em; background-color: white; padding-top: 0.7em; margin: 0 auto; }

.top {
   width: 1000px;
   height: 3.7em ;
   margin: 0 auto;
   
}

.ourfleet-inside { width: 1000px; margin: 0 auto; }
.rentnow-inside { width: 1000px; margin: 0 auto; }
.aboutus-inside { width: 1000px; margin: 0 auto; }
.contactus-inside { width: 1000px; margin: 0 auto; }

.rentalterms { width: 1000px; height: auto; background-color: #F0F0F0; margin: 0 auto;}
.rentalterms-inside { width: 1000px;  font-size: 80%; } 

#aboutlogo { width: 250px; }

.contactus-box { width: 244px; height: auto; margin-right: 0.5em; float: left; margin-bottom: none; }

p { padding-left: 0; padding-right: 0; }

/* -----------------------------------------------------------------
      ARAMA
----------------------------------------------------------------- */

.front-search { width: 900px; height: auto; margin: 0 auto; }
.front-search-inside { width: 450px; height: 240px; float: left; }

.front-search-form-header { width: 300px; height: 60px; line-height: 60px; font-family: Avenir-Bold, sans-serif; font-size: 16px; }
.front-search-date { width: 300px; height: 40px; line-height: 40px; padding: 5px; padding-left: 50px; font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; background-image: url('../images/various/calendar-icon.png'); background-position: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.front-search-time { width: 50px; height: 40px; line-height: 40px; background-color: white; padding: 5px; font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; }
.front-search-location { width: 410px; height: 40px; padding: 5px; background-color: white;  font-family: Avenir-Light, sans-serif; font-size: 16px; border: 1px solid #D1D1D1; background-image: url('../images/various/location-icon.png'); background-position: 5px 5px; background-repeat: no-repeat; }
.front-search-button { width: 50%; height: 4em; font-family: Avenir-Bold, sans-serif; font-size: 16px; color: white; background-color: #DC9500; border: none; cursor: pointer; margin-left: 25%; margin-right: 25%; }
.front-search-button:hover { background-color: #996800; }

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */

.header { width: 1000px; position: absolute; }
.header img { margin-left: 1em; margin-top: 0.5em; }
.header li { float: left; }
.header li a { padding: 20px 12px; border-bottom: none; font-size: 0.9em; }
.header li:last-child > a {  color: red; }
.header .menu { clear: none; float: right; max-height: none; }
.header .menu-icon { display: none; }
.logo { display: block; float: left; margin-top: 0; margin-left: 0; }
.section { overflow: hidden; margin: auto; max-width: 1400px; }
.section a { position: relative; float: left; width: 100%; }
.section a img { width: 100%; display: block; }
.section a span { color: #fff; position: absolute; left: 5%; bottom: 5%; font-size: 2em; }
.section-split a span { display: none; }
.section-split a:hover span { display: block; }
.section-split a { width: 50%; }
.header li a:hover, .header .menu-btn:hover { background-color: none; background-color: #348b6c; color: white;  }




} /* END OF THE CSS */