@charset "UTF-8";

html,body{width: 100%;height: 100%;color:#1E1E1C;}
body{
		background-color:#101D2C;
		background-image:  url(../img/oddtaxi_bg.jpg),url(../img/oddtaxi_bg2.jpg);
		background-repeat: no-repeat,repeat-x;
		background-position: left top,left top;
		background-size: 1200px auto,160px auto;
}
a:link, a:visited{text-decoration:none; color:#B1B9EF;}

h1{font-weight:100;font-size: 1.4rem;}

html{min-height: 900px;}
body{
	overflow: hidden;
}
#main{
	width: 100%; height: 100%;
	position: relative;
	max-width: 1350px;

}




/*menu */
#title{
	width: 10.5rem;
	height: 2.1rem;
	background:url(../img/index_logo.svg) 0 0/100% auto no-repeat;
	text-indent: -9999px;
	filter: drop-shadow(1px 0px 5px #021);
	z-index: 22;
	position: relative;
}


#menu{
	position: absolute;
	top:calc(600px + 12vh + 3vw);
	margin:0 0 0 0;
	left:calc(0px + 6vw);
	z-index: 120;white-space: nowrap;

}


	ul{padding:0rem 0.2rem 1rem;z-index: 13;position: relative;}
	#menu div{
		position: relative;z-index: 10;
	}
	#menu ul li{
		display: inline-block;
		padding:0 0rem 0 0rem;
		
		filter: drop-shadow(0px 0px 4px #021);
	
		line-height: 1rem;
		position: relative;
	
	}
	#menu ul li::before{
		content:'/';
		display: inline-block;
		padding:0.2rem 0rem 0 0.2rem;
		position: relative;
		vertical-align: middle;
		text-shadow: 0px 0px 11px rgba(11, 11, 11, 0.5);
		color:#ddd;
		filter: drop-shadow(1px 0px 3px #ccc);
		}
	
	#menu ul li a{
		display: inline-block;
		border: 1px solid rgba(255, 0, 0, 0);
		border-radius: 10rem;
		padding:0.2rem 0.5rem 0.2rem;
		font-size: 1rem;
		line-height: 1rem;	
		position: relative;
		overflow: hidden;
		vertical-align: middle;
	}
	
	#menu ul li a::before{
		content: '';transition: all .4s;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background:#F6A197;
		z-index: -1;
		opacity: 0.14;
	}
	#menu ul li a:hover{
		color:#F6EB2E;
	}
	#menu ul li a:hover:before{
		width: 100%;
		background:#F95437;
		border-radius: 10rem;
		opacity: 1;
	}
	
	#menu div {
		color:#eee;
	}
/*graphic*/



	#girl{ 
		position: absolute;
		width: calc(680px + 16vw);
		top:calc(100px - 5vh);
		right:2vw;
		
	}
	
	#taxi{ 
		position: absolute;
		width: calc(800px + 11vw);
		top:calc(280px + 5vw);
		left:-2%;
		
	}
	



@media screen and (max-width: 1200px) {
	
	#ghost{
	bottom:-22vw;
	left:calc(44vw);
		}
}
	
@media screen and (max-width: 840px) {
	body{
		background-size: 850px auto,0px auto;
		background-position: 0px top,left top;
				}
	#girl{ 
		left:inherit;
		left:-1%;
		}
		
	#taxi{ 
		width: calc(600px + 10vw);
		top:250px;
		left:-8%;
	}	

	#menu{
		right: inherit;
	
		}
		

	#main{
		max-width: none;
	}
		
}
	
		
@media screen and (max-width: 640px) {
	html{
		min-height: 720px;}
	body{
		overflow: inherit;
		background-size:120vw auto,0px auto;
	}
	
	#main{
		overflow: hidden;
	}
	#taxi{ 
		width: calc(100vw);
		top:calc(38vw);}

	#girl{ 

		width: calc(110%);
	}
	#menu{
		top:calc(480px + 18vw);
	
	

	}
	#menu div{
		color:#DDD;
		text-shadow: none;
		}
}