@font-face {
    font-family: f1;
    src: url('../font/hwxk.ttf');
}
body{font-family: Varela; font-size: 1.2em; line-height: inherit; text-align: justify;}
.grey{background: #e0e0e0;}
	#wrapper
	{
		width: 80%;
		margin: 0 auto;
		background: white;
		padding: 2%;
	}	
	p, h2, h3, li{margin-bottom: 20px;}	
	h2.right-par{font-size:20pt; font-weight:700;}	
 	ul.left, ul.left li{display: inline-block;}
	
/*nav*/
	nav img{
			display: none;
			position: fixed;
			width: 150px;
			left: 11%;
			top: -21px;
		}
		nav{
			text-align: center;
			width: 80%;
			margin: auto auto;
			top: 0px;
			left: 0px;
			padding-top: 26px;
			padding-bottom: 26px;
			font-size: 1vw;
			position: fixed;
			background-color: white;
			margin-left: 10%;
			z-index: 3;
			border-bottom: #e0e0e0 1px solid;
		}

		nav a{
			margin-left: 5%;
			margin-right: 5%;
			font-size: 1.3vw;
			color: #22154d;
			text-decoration: none;
			padding-bottom: 20px;
		}
		
		.firstMenu{
					padding-left: 0%;
					margin-left:0px;
				}

			.lastMenu{
				padding-right: 0%;
			
			}
			nav a:hover{
						border-bottom-color: #ffe279;
						border-bottom-style: solid;
						border-bottom-width: 3px;
					}

			.language{
				float: right;
				position: fixed;
				top: 20px;
				right: 11%;
				font-family: f1;
			}
			
			.language{
				text-decoration: none;
				color: #f9b406;
				/* border: 2px solid rgb(237, 210, 210); */
				border: 1px solid #f9b406;
				padding: 5px;
				/* font-weight: 100; */
				cursor: pointer;
				z-index: 2;
				/* margin-top: -1px; */
				font-weight: lighter;
			}
			.engFont{font-family: Varela;}
			.chineseFont{font-family: f1;}
/*end of nav*/

/*Start Raymond*/				
	#raymond-nav
	{
		width: 100%;
		float: left;
		margin-bottom: 30px;
		margin-top: 10%;	
		/*border: red 1px solid;*/
	}
	ul.left-nav{float: left;}	
			ul.left-nav li
			{
				width: 200px;
				height: 50px;
				padding: 5px;
				background: -webkit-linear-gradient(#388da9, #8de2fe); /* For Safari 5.1 to 6.0 */
  				background: -o-linear-gradient(#388da9, #8de2fe); /* For Opera 11.1 to 12.0 */
  				background: -moz-linear-gradient(#388da9, #8de2fe); /* For Firefox 3.6 to 15 */
  				background: linear-gradient(#388da9, #8de2fe); 
			}
		
				ul.left-nav li a
				{
					text-decoration: none;
					color: black;
					font-size: 1em;
					font-weight: 400;
					line-height: 50px;
					transition: color 0.5s,font-size 0.5s;
				}
				
				ul.left-nav li a:hover
				{
					font-size: 1.3em;
					color: white;
					line-height: 50px;
				}
			
			.raymond-right{float: right;}

			h1
			{
				font-size: 1.5em;
				line-height: 50px;
				text-indent: 40px;
			}
			h2{margin-top: 2%;}
				.green_graident
				{
					background: -webkit-linear-gradient(left, #72b7bc, #ffffff);
					background: -o-linear-gradient(right, #72b7bc, #ffffff);
					background: -moz-linear-gradient(left, #72b7bc, #ffffff);
					background: linear-gradient(right, #72b7bc, #ffffff);
					width: 100%;
					height: 50px;
					margin-top: 9%;
					position: relative;
					z-index: 1;
					/*float: left;*/
				}
					.house
					{
						margin-left: 97%;
						position: absolute;
						top: 25%;
						right: 0;
						z-index: 2;
					}
			#people, #transport, #building, #event
			{
				float: left;
				width: 100%;
			}
								
					.left-img
					{
						float: left;
						width: 20%;
					}
					.right-par
					{
						float: right;
						display: inline-block;
						width: 72%;
					}

				#subwaymap
				{
					height: auto;
					width: 100%;
					display: inline-block;
				}					
/*End of Raymond*/
	
/*Start Pencil*/
	#one, #two, #three, #four
	{
		float: left;
		width: 100%;
		margin-bottom: 0.5%;
		/*border: blue 1px solid;*/	
	}
	#big_image
	{
		width: 100%; 
		height: 50%;
		margin-top: 10%;
	}
		h2.blue_bar 
		{
			display: block;
			width: 100%;
			background: #52d4ff;
			height: 50px;
			line-height: 50px;
			text-indent: 10px;
			font-size: 1.5em;
			font-weight: 500;
			margin-top: 10px;		
		}
			.l-img{float: left;}
			p.r-par
			{
				float: right;
				width: 70%;
			}
/*End Pencil*/
	
/*Start Cailea*/

header
{
	
	float: left; 
	width: 100%;
	background: url('../images/humbernorth.jpg') no-repeat 100% 100%;
	margin-bottom: 2%;
}
.black{background: rgba(0,0,0,0.50); padding-left: 1%; padding-top: 1%;}
.l-imgs{vertical-align: baseline; display: inline-block; width: 40%; }
.r-pars
{
	vertical-align: baseline;
	display: inline-block;
	width: 55%;
	margin-left: 2%;
	
}
	.par
	{
		vertical-align: baseline;
		display: inline-block;
		width: 35%;
		margin-left: 2%;
	}
	#cailea-left
	{
		position: relative;
		width: 60%;
		float: left;
	}
		#caileaway:hover
		{
			opacity: 0.85;
			filter: alpha(opacity=85);
		}
		#bigTitle
		{
			position: absolute;
			top: 43%;
			left: 10%;
			z-index: 2;
			font-size: 1.5em;
		}		
		#title-right
		{
			margin-top: 10%;
			float: right;
			width: 40%;
		}
			.vid
			{
				font-size:1.5em;   
				text-shadow: 2px 2px #AAAAAA;
				background: rgba(224, 224, 224, 0.8);
				padding: 5%;
			}
				.title
				{
					font-size: 1.2em;
					font-weight: 600; 
					padding: 1%;
					background: -webkit-linear-gradient(left, #E0E0E0, #ffffff);
					background: -o-linear-gradient(right, #E0E0E0, #ffffff);
					background: -moz-linear-gradient(left, #E0E0E0, #ffffff);
					background: linear-gradient(right, #E0E0E0, #ffffff);
				}
					.move
					{
						font-size:1.5em;
						text-shadow: 2px 2px #AAAAAA;
					}
				video
				{
					width: 60%;
					height: auto;
				}
/*End Cailea*/
/*media Queries*/

			@media screen and (max-width: 760px) {
				
			}

			/* Adjust font size to keep line length roughly between 50-75 characters */

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

			}

			@media screen and (min-width: 760px) and (max-width: 900px) {
			
			}

			@media screen and (max-width: 480px) {

			}
			
			@media screen and (max-width: 640px) {

			
			}