@charset "UTF-8";

@font-face {
    font-family: 'latoblack';
    src: url('font/lato/lato-bla-webfont.eot');
    src: url('font/lato/lato-bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato/lato-bla-webfont.woff') format('woff'),
         url('font/lato/lato-bla-webfont.ttf') format('truetype'),
         url('font/lato/lato-bla-webfont.svg#latoblack') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latobold';
    src: url('font/lato/lato-bol-webfont.eot');
    src: url('font/lato/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato/lato-bol-webfont.woff') format('woff'),
         url('font/lato/lato-bol-webfont.ttf') format('truetype'),
         url('font/lato/lato-bol-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latohairline';
    src: url('font/lato/lato-hai-webfont.eot');
    src: url('font/lato/lato-hai-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato/lato-hai-webfont.woff') format('woff'),
         url('font/lato/lato-hai-webfont.ttf') format('truetype'),
         url('font/lato/lato-hai-webfont.svg#latohairline') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'latolight';
    src: url('font/lato/lato-lig-webfont.eot');
    src: url('font/lato/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato/lato-lig-webfont.woff') format('woff'),
         url('font/lato/lato-lig-webfont.ttf') format('truetype'),
         url('font/lato/lato-lig-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoregular';
    src: url('font/lato/lato-reg-webfont.eot');
    src: url('font/lato/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lato/lato-reg-webfont.woff') format('woff'),
         url('font/lato/lato-reg-webfont.ttf') format('truetype'),
         url('font/lato/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

::-webkit-scrollbar-track
{
	background-color:#000;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color:#000;

}

::-webkit-scrollbar-thumb
{
	background-color: #9c9c9c;
}


html body {
	margin:0;
	padding:0;
}


#page {
	width:100%;
	height:1280px;
	background-color:#9c9c9c;
 	 position:relative;
 	 overflow:hidden;
}

#menubar {
	width:100%;
	height:120px;
	background-color:#fff;
	border-bottom:1px solid #000;
}

#navOuter {
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background-color:#000;
	opacity:0;
	display:none;
	z-index:101;
	   -webkit-transition: all 0.3s ease-in-out;  /* Chrome 1-25, Safari 3.2+ */
   -moz-transition: all 0.3s ease-in-out;  /* Firefox 4-15 */
      -o-transition: all 0.3s ease-in-out;  /* Opera 10.50–12.00 */
       transition: all 0.3s ease-in-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}	

.account {
	background-image:url('images/avatar.png');
	background-repeat:no-repeat;
	background-position:0px center;
	height:120px;
	width:120px;
	line-height:70px;
	font-family:'latolight';
	font-size:18px;
	color:#000;
	display:inline-block;
	text-align:center;
}

.logo {
	height:120px;
	width:120px;
	background-image:url('images/logo.png');
	background-position:center center;
	background-size:72px 70px;
	background-repeat:no-repeat;
	display:inline-block;
}

#map {
	width:100%;
	height:780px;
}

#carList {
	width:100%;
	margin:0;
	padding:0;
}

.carListItem {
	width:100%;
	height:90px;
	background-color:#e3e3e3;
	border-left:1% solid #00aeef;
	margin:0;
	padding:0;
	margin-bottom:5px;
}

.carSilhouette {
	margin-left:1%;
	width:100px;
	height:90px;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
}

.smartcar {
	background-image:url('images/smartcar.png');
}

.chevyvolt {
	background-image:url('images/chevyvolt.png');
}

.mapicon {
	width:32px;
	height:70px;
	display:inline-block;
	content:" ";
	background-image:url('images/mapicon.png');
	background-repeat:no-repeat;
	background-position:center center;
}

.infocon {
	width:32px;
	height:70px;
	display:inline-block;
	content:" ";
	background-image:url('images/infocon.png');
	background-repeat:no-repeat;
	background-position:center center;
}


.avataricon {
	width:32px;
	height:70px;
	display:inline-block;
	content:" ";
	background-image:url('images/abouticon.png');
	background-repeat:no-repeat;
	background-position:center center;
}

.accounticon {
	width:32px;
	height:70px;
	display:inline-block;
	content:" ";
	background-image:url('images/accounticon.png');
	background-repeat:no-repeat;
	background-position:center center;
}

.fareicon {
	width:32px;
	height:70px;
	display:inline-block;
	content:" ";
	background-image:url('images/fareicon.png');
	background-repeat:no-repeat;
	background-position:center center;
}

.reserved {
	background-color:#b30000 !important;
	color:#fff !important;
}

#fare {
	font-family:'latoregular';
	color:#2b2b2b;
	font-size:28px;
	display:inline-block;
	margin-top:46px;
	margin-left:15%;
	vertical-align:top;
}

.carInfo {
	font-family:'latolight';
	font-size:23px;
	color:#656565;
	line-height:23px;
	display:inline-block;
	vertical-align:top;
	height:90px;
	width:220px;
	margin-left:1%;
}

.linkfix {
	margin-left:40px;
	vertical-align:top;
}

.full {
	color:#00a904 !important;
}

.halfFull {
	color:#ffba00 !important;
}

.low {
	color:#b30000 !important;
}

.empty {
	color:#b6b6b6 !important;
}

.reserveNow {
	cursor:pointer;
	display:inline-block;
	vertical-align:top;
	margin-top:30px;
	background-color:#00a651;
	height:30px;
	width:15%;
	border:0;
	color:#fff;
	font-family:'latoregular';
	font-weight:bolder;
	font-size:15px;
	outline:0;
}

.offline {
	background-color:#b9b9b9 !important;
	color:#000 !important;
}

.carInfo p {
	margin-top:20px;
}

.mpg {
	font-family:'latoregular';
	font-weight:bolder;
}

.mapArea {
	position:relative;
}

.burger-box {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  display: block;

 
  -webkit-transform: scale3d(1,1,1);
}

#navigationMenu {
  z-index:101;
  position:absolute;
  right:-300px;
  top:0;
  bottom:0;
  width:300px;
  background-color:#1b1b1b;
   -webkit-transition: all 0.3s ease-in-out;  /* Chrome 1-25, Safari 3.2+ */
   -moz-transition: all 0.3s ease-in-out;  /* Firefox 4-15 */
      -o-transition: all 0.3s ease-in-out;  /* Opera 10.50–12.00 */
       transition: all 0.3s ease-in-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

#navigationMenu ul {
  margin:0;
  padding:0;
  text-align:left;
  width:100%;
  margin-top:120px;
}

#navigationMenu a {
  text-decoration:none;
}

#navigationMenu li {
  list-style-type:none;
  color:#fff;
  font-family:'latoregular',arial;
  font-size:30px;
  line-height:70px;
  vertical-align:middle;
  width:275px;
  height:70px;
  padding:5px;
  padding-left:20px;
    -webkit-transition:all 0.3s linear;
  -moz-transition:all 0.3s linear;
  -o-transition:all 0.3s linear;
  transition:all 0.3s linear;
  
}

#navigationMenu li:hover {
  background-color:#00a651;
  color:#fff;
  width:275px;
}

#navicon {
  position:absolute;
  right:32px;
  z-index:102;
  vertical-align:top;
  margin-top:30px;
  -webkit-transition: all 0.3s ease-in-out;  /* Chrome 1-25, Safari 3.2+ */
   -moz-transition: all 0.3s ease-in-out;  /* Firefox 4-15 */
     -o-transition: all 0.3s ease-in-out;  /* Opera 10.50–12.00 */
     transition: all 0.3s ease-in-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */  
  display:inline-block;
  cursor:pointer;
}



.burger,
.burger:before,
.burger:after {
  position: absolute;
  top: 28px;
  left: 10px;
  width: 38px;
  height: 4px;
  background: #999;
  
  -webkit-transition: background 0.3s, -webkit-transform 0.3s, top 0.3s;
}

.burger:before {
  top: -15px;
  left: 0;
  content: "";
}

.burger:after {
  top: 15px;
  left: 0;
  content: "";
}

.open .burger {
  background: transparent;
}

.open .burger:before {
  top: 0;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
}

.open .burger:after {
  top: 0;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
}