/*
Theme Name: 	HTML5 Blank
Theme URI: 	http://html5blank.com
Description: 	HTML5 Blank WordPress Theme
Version: 	1.2.5
Author: 	Todd Motto (@toddmotto)
Author URI: 	http://www.toddmotto.com
Tags: 		Blank, HTML5, CSS3

License:	MIT
License URI:	http://opensource.org/licenses/mit-license.php
*/

/* =============================================================================
   HTML5 Reset
   ========================================================================== */

	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block;}
	audio, canvas, video {display:inline-block;*display:inline;*zoom:1;}
	audio:not([controls]) {display:none;}
	[hidden] {display:none;}
	
	html {font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
	html, button, input, select, textarea {font-family:sans-serif;color:#222;}
	body {margin:0;font-size:1em;line-height:1;}
	p {padding:0 0 0 0;}
	
	h1,h2,h3,h4,h5,h6 {text-decoration:none;padding:0;color:#666;margin:0;font-family: "Gill Sans", "Gill Sans MT", Calibri, "KaiTi", "楷体", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif; font-weight:700;text-transform: uppercase;letter-spacing:0.2em;}
	
	a {color:#FF5700;text-decoration:none;}
	a:focus {outline:0;}
	a:hover, a:active {outline:0;}
	
	abbr[title] {border-bottom:1px dotted;}
	b, strong {font-weight:bold;}
	.clear {clear:both;}
	dfn {font-style:italic;}
	hr {display:block;height:1px;border:0;border-top:1px solid #CCC;margin:1em 0;padding:0;}
	ins {background:#FF9;color:#000;text-decoration:none;}
	mark {background:#FF0;color:#000;font-style:italic;font-weight:bold;}
	pre, code, kbd, samp {font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}
	pre {white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
	q {quotes:none;}
	q:before, q:after {content:"";content:none;}
	small {font-size:90%;}
	blockquote {background-color:#EEE;border:1px solid #DDD;margin:10px 0;padding:10px 30px;border-radius:3px;}
	
	sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
	sup {top:-0.5em;}
	sub {bottom:-0.25em;}
	
	ul {margin:0;padding:0;list-style:none;}
	ol {margin:15px;}
	
	dd {margin:0 0 0 40px;}
	nav ul, nav ol {list-style:none;list-style-image:none;margin:0;padding:0;}
	
	img {border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
	
	svg:not(:root) {overflow:hidden;}
	
	figure {margin:0;}
	
	form {margin:0;}
	fieldset {border:0;margin:0;padding:0;}
	label {cursor:pointer;}
	legend {border:0;*margin-left:-7px;padding:0;white-space:normal;}
	button, input, select, textarea {font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
	button, input {line-height:normal;}
	button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:none;*overflow:visible;}
	button[disabled], input[disabled] { cursor: default; }
	input[type="checkbox"], input[type="radio"] {box-sizing:border-box;padding:0;*width:13px;*height:13px;}
	input[type="search"] {-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
	input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:none;}
	button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;}
	textarea {overflow:auto;vertical-align:top;resize:vertical;}
	input:valid, textarea:valid {}
	input:invalid, textarea:invalid {background-color:#F0DDDD;}
	
	table {border-collapse:collapse;border-spacing:0;}
	td {vertical-align:top;}

/* =============================================================================
   General Styles
   ========================================================================== */
   
   	/* Font Face Setup, add fonts to /fonts/ folder and link up below with filenames */
	@font-face {
		font-family: "TheanoDidotRegular";
		src: url('fonts/theanodidot-regular-webfont.eot');
		src: url('fonts/theanodidot-regular-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/theanodidot-regular-webfont.woff') format('woff'),
			 url('fonts/theanodidot-regular-webfont.ttf') format('truetype'),
			 url('fonts/theanodidot-regular-webfont.svg#') format('svg');
		font-weight: normal;
		font-style: normal;

	}

   	body {
		font-family: Didot, "Didot LT Std", "TheanoDidotRegular", Garamond, "Times New Roman", "KaiTi", "楷体", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
		font-size:11px;
		font-weight:300; /* Better supported than 'lighter' attribute */
		line-height:18px;
		-webkit-font-smoothing:antialiased; /* Antialiased font for great smoothing */
		-moz-font-smoothing:antialiased;
		-o-font-smoothing:antialiased;
		font-smoothing:antialiased;
		text-rendering:optimizeLegibility; /* Optimise legibility for some CSS3 kerning */
		color:#444; /* Lighter on the eyes than #000 Black */

	}
	

	
	ul, ol { margin: 0 0; padding: 0 0 0 0; }
	dd { margin: 0 0 0 40px; }
	nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
	
	h1 a, h2 a {
		color: #666;
	}
	
	h1 {
		font-size: 2.2em;
		line-height: 100%;
	}
	
	h2,h4 {
		font-size: 1.25em;
		line-height: 100%;
		font-family: Didot, "Didot LT Std", "TheanoDidotRegular", Garamond, "Times New Roman", "KaiTi", "楷体", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
		text-transform: none;
		font-style: italic;
		font-weight: normal;
		padding-top: 1em;
		
	}
	
	h3{
		padding-top: 1.1em;
		font-size: 1em;
		line-height: 100%;
		font-weight: bold;
	}
	
	h4{
		font-size: 1.1em;
		line-height: 100%;
		font-family: Didot, "Didot LT Std", "TheanoDidotRegular", Garamond, "Times New Roman", "KaiTi", "楷体", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
		text-transform: none;
		font-style: italic;
		font-weight: normal;
	}
	
	article {
		padding-bottom: 25px;
	}
	
	.year {
		width: 20%;
		height: auto;
		float: left;
		clear: both;
	}
	.accom {
		float: left;
		width: 80%;
	}
	.left-half {
		float: left;
		width: 49%;
		padding-right: 1%;

	}
	.right-half {
		float: left;
		width: 49%;
		padding-left: 1%;

	}
	.fit-width {
		width:100%;
	}
	.cv-list {
		list-style: square;
		padding: 20px 0 20px 20%;
	}
	
	.clear {
		clear:both;
	}
	
/* 	#names {
		column-count: 4;  
		column-gap: 5px;  
	} */
	
	#names {
		padding: 15px 0 50px 0;
	}
	
	.name {
		width: 33%;
		height: inherit;
		overflow: hidden;
		float: left;
		padding-top:0.5em;
	}
	

	
	video {
		width:100%;
		height:auto;
	}
	
	.no-js video {
		width:640px;
		height:auto;
	}
	
	.chinese {
		font-size: 1.5em;
	}
	
/* =============================================================================
   Contact Details
   ========================================================================== */
   /* http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs */
   
   /* To fix strange bug with scrolling in iOS https://github.com/Simbul/baker/issues/504 */
   @font-face {
		font-family: "FixFont";
		src: url();
	}


 
   footer {
		position: fixed;
		bottom: -10px;
		left: 40px;
		right: 40px;
		border-top: solid 1px #666;
		z-index: 2000;
		font-family: "FixFont"; /* bug fix */
   }
   

   
   #contact-details {
		width:100%;
		text-align: justify;
		-ms-text-justify: distribute-all-lines;
		text-justify: distribute-all-lines;
		padding-top: 5px;
		clear:both;
		background-color: #fff;
		background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
		background: rgba(255, 255, 255, 1);

	}

	.contact-item {
		vertical-align: top;
		display: inline-block;
		*display: inline;
		zoom: 1;
		letter-spacing:0.25em;
		font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		height: 11px;
		padding-bottom: 5px;
	}
	.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0px;
	line-height:0px;
    height: 0px;
	padding:0;
	margin:0;
}
	
	@media screen and (max-width:850px) {
		.contact-item {
			letter-spacing:0.10em;
		}
	}
	
	@media screen and (max-width:660px) {
		.contact-item {
			letter-spacing:0.3em;
			display: block;
		}
		.item-1, .item-3 {
			float: left;
			clear: left;
		}
		.item-2, .item-4 {
			float: right;
			clear: right;
		}
	}
	
	@media screen and (max-width:450px) {
		.contact-item {
			letter-spacing:0.07em;
		}
		.item-3, .item-4 {
			letter-spacing:0.12em;
		}
	}
	
	@media screen and (max-width:315px) {
		.contact-item {
			letter-spacing:0.2em;
		}
		.item-1, .item-3, .item-2, .item-4 {
			clear: both;
			float: left;
		}
		#article {
			padding-bottom: 50px;
		}
	}
	
	@media screen and (min-width:1000px) {
		.contact-item {
			letter-spacing:0.4em;
		}
	}
	
	@media screen and (min-width:1400px) {
		.contact-item {
			letter-spacing:0.6em;
		}
	}

	
/* =============================================================================
   Structure
   ========================================================================== */

	.wrapper {
		max-width: 1600px;
		margin: 0 auto;
	}
   
/* =============================================================================
   Menu
   ========================================================================== */   
	
	.home #logo a{
	  background-image:url("img/logo.png");
	  background-image:url("img/logowhite.svg");
	  background-repeat:no-repeat;
	  display:block;
	  height:25px;
	  width:269px;
	  color:#FFF;
	}
	
	#logo a{
	  background-image:url("img/logoblack.png");
	  background-image:url("img/logoblack.svg");
	  background-repeat:no-repeat;
	  display:block;
	  height:25px;
	  width:269px;
	  font-size:25px;
	  color:#000;
	  letter-spacing:0.25em;
	  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	  font-weight: bold;
	}
	
	.swap{
		display:none;
	}
	
	.menu{
		padding-left:0;
		padding-top: 30px;
	}
	.menu ul{
		width:100%;
		list-style-type: none;
		margin:0px;
		padding:0px;
	}

	.menu ul li{
		font-size:150%;
		text-decoration: none;
		
		border-style: none;
		margin:0 0 20px 0;
		float: left;
		padding-right: 15px;
	}
	
	li.current_page_item a {
		color: #000;
	}
	
 	.menu a{
		color: #444;
		font-style: italic;
		display: block;
		padding:10px 0 10px 0;
	}
	
	.menu a:hover {
		color: #000;
	}
	
	.home a{
		color: #fff;
		text-shadow: 1px 1px 1px #000;
	}
	
	.home a:hover{
		color: #fff;
	}
	
	.home .menu-header ul li{
		border-bottom:1px dotted #fff;
	}
	
	#c {
		position: absolute;
		right: 125px;
		top: 40px;
		background-image:url("img/c.png");
		background-image:url("img/c.svg");
		background-repeat:no-repeat;
		background-size:35px 35px;
		display:block;
		height:35px;
		width: 35px;
	}

	@media screen and (max-width:510px) {
		.menu ul li{
			float: none;
			border-bottom-color:#666;
			border-bottom-width:1px;
			border-bottom-style: dotted;
			margin-bottom:0px;
			padding-right: 0px;
		}

		.menu ul li:first-child{
			border-top-color:#666;
			border-top-width:1px;
			border-top-style: dotted;
		}
		
		#c {
			display: none;
		}
	}
	
	header {
			max-width: 1600px;
			padding: 40px 40px 47px 40px;
			width:100%;
			position: fixed;
			top:0;
			z-index: 1000;
			background-color: #FFF;
		}
		

	
	
	.content {
			padding: 200px 40px 50px 40px;
	}	
	footer{
			left: 40px;
			right:40px;
		}
	
	.home header{
		background-color: transparent;
	}
	

	
	/* Wider Margin */
	@media screen and (max-width:660px) {
		.content {
			padding: 170px 10px 90px 10px;
		}
		footer{
			left: 10px;
			right:10px;
		}
		header {
			padding-top:10px;
			padding-left: 10px;
			padding-right:10px;
		}
		#c {
			top: 5px;
			right: 30px;
		}
	}
	
	@media screen and (max-width:585px) {
		
		header {
			position: relative;
			width: auto;
			padding-bottom: 0px;
		}
		.content {
			padding-top: 20px;
			padding-bottom: 70px;
		}
	}
	
	@media screen and (max-width:510px) {
		
		.content {
			padding-left: 5px;
			padding-right: 5px;
		}
		footer{
			left: 5px;
			right:5px;
		}
		header {
			position: relative;
			width: auto;
			padding-bottom: 0px;
		}
	}

	
/* =============================================================================
   Project Index
   ========================================================================== */  
	

	
	.project-wrapper{
		width:100%;
		height:100%;
		position: absolute;
	}
	
	.project-rollover {
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #fff;
		opacity: 0;
		position: absolute;
		-webkit-transition: opacity 0.2s ease-in-out;
		-moz-transition: opacity 0.2s ease-in-out;
		-o-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}
	
	.lt-ie9 .project-rollover {
		display: none;
	}
	
	.project-rollover:hover {
	  opacity: 0.5;
	}
	
	.project-title p {
		position: absolute;
		bottom: 0px;
		right: 5px;
		color: #fff;
		font-size: 0.8em;
		text-shadow: 1px 1px 1px #000;
		
		text-transform: uppercase;
		text-align: right;
		/* font-weight: bold; */
		margin: 0px;
		font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
		letter-spacing: 0.18em;
	}
	
	/* Default Three Column */
	#project-container {
		margin-right:-5px;
	}
	
	.project-thumb{
		display: block;
		float: left;
		position: relative;
		top: 0;
		overflow: hidden;
		
		width: 32%;
		margin: 0 1% 1% 0;
		padding-bottom: 32%;
	}
	
	.project-thumb img{
		width: 100%;
		height: auto;
	}
	
	/* Four Column */
	@media screen and (min-width:1200px) {
		.project-thumb{
			width: 24.4%;
			margin: 0 0.6% 0.6% 0;
			padding-bottom: 24.4%;
		}
		
	}
	
	/* Two Column */
	@media screen and (max-width:800px) {
		.project-thumb{
			width: 48.7%;
			margin: 0 1.3% 1.3% 0;
			padding-bottom: 48.7%;
		}
	}
	
	/* One Column */
	@media screen and (max-width:475px) {
		#project-container {
			margin-right:0px;
		}
		.project-thumb{
			width: 100%;
			margin: 0 0 5px 0;
			padding-bottom: 100%;
		}
		
	}

/* =============================================================================
   Project Single
   ========================================================================== */  

	
	ul #project-gallery {
		margin-left: 0px;
		clear:both;
	}
	
	#project-gallery li {
		margin-bottom: 8px;
		padding-left: 0px;
		max-width: 640px;
	}
	
	#project-gallery li img{

		width: 100%;
	}
	
	div#text-container {
		width:100%;
		padding: 15px 0 15px 0;
	}
	
	div .col1 {
		max-width: 640px;
	}
	
	
	div .col2 {
		max-width: 640px;
	}
	
	/* Two Column */
	@media screen and (min-width:1070px) {

		div .col1 {
			max-width: 640px;
			float: left;
			padding-right: 30px;
			padding-bottom: 15px;
		}
		
		div .col2 {
			float: left;
			max-width:300px;
			padding-bottom: 15px;
		}
	}
	
/* =============================================================================
   Team
   ========================================================================== */  
	
	#staff-list {
		margin-top: 30px;
	}
	#staff-list li {
	display: inline-block; 
	vertical-align: top;

	
	width: 31.5%;

	margin: 0px 1% 2% 0px;
		/* margin-bottom: 15px;
		border-bottom: 1px solid #666;
		border-top: 1px solid #666; */
	}
	
	#staff-list h4 {
		height: 2em;
	
	}
	
	#staff-list li img {
		width: 100%;
	}
	#staff-list .descripition {
		height: 150px;
	overflow: none;
	}
	.portrait {
		float: left;
		width: 30%;
		height: auto;
		
	}
	.description {
		float: left;
	}
	
	/* One Column */
	@media screen and (max-width:500px) {
		.left-half, .right-half {
			clear: both;
			width: 100%;
			padding-left: 0;
			padding-right: 0;
		}
		.left-half {
			padding-bottom: 25px;
			}
		#staff-list li {
			width: 48.5%;

			margin: 0 1% 2% 0;
		}
	}
	
	

	
/* =============================================================================
   Single Page with Children
   ========================================================================== */  
   
	#maincol {
		width: 100%;
		max-width: 640px;
	}
	
	#maincol img, .fit {
		width:100%;
		height: auto;
	}
	
	#subnav {
		display: none;
		padding-bottom:20px;
	}
	
	#subnav ul li{
		padding-top:5px;
		padding-bottom:5px;
		border-bottom-color:#666;
		border-bottom-width:1px;
		border-bottom-style: dotted;
		list-style-type:none;
	}
	
	#subnav:first-child{
		border-top-color:#666;
		border-top-width:1px;
		border-top-style: dotted;
	}
	
	#subnav ul a li{
		color: #444;
		font-style: italic;
		font-size:120%;
	}
	
	#subnav a li:hover{
		color: #000;
	}
	
	/* Two Column */
	@media screen and (min-width:500px) and (min-height:420px) {
			.offset-anchor {
				display: block; 
				position: relative; 
				top: -165px; 
				visibility: hidden;
			}
			
			#subnav {
				display: block;
			}

			#sidecol {
				position:fixed;
				top: 170px;
				right: 5px;
				width:30%;
			}
			#maincol {
				width: 65%;
				
		}
	}
	
	/* Wider Margin */
	@media screen and (min-width:720px) {
		
		#sidecol {
			top: 200px;
			right: 40px;
		}
		.offset-anchor {
			top: -200px; 
		}
	}
	
	/* 1600+ */
	@media screen and (min-width:1600px) {
		#inflow {
			margin-right: 400px;
			position: relative;
		}
		#sideposition {
			position: absolute; right: 0;
		}
		#sidecol {
			width: 400px;
			right:auto;
		}
	}
	
/* =============================================================================
   Mobile First Media Queries
   ========================================================================== */

   /* 320px and greater */
   @media only screen and (min-width: 320px) {
	/* Styles here */
   }
   
   /* 480px and greater */
   @media only screen and (min-width: 480px) {
	/* Styles here */
   }
   
   /* 768px and greater */
   @media only screen and (min-width: 768px) {
	/* Styles here */
   }
   
   /* 1024px and greater */
   @media only screen and (min-width: 1024px) {
	/* Styles here */
   }
   
   /* Retina screens */
   @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
	/* Style adjustments for high resolution devices */
}

/* =============================================================================
   Non-Semantic Classes
   ========================================================================== */
   
   /* Custom Selection Styles */
   ::selection {background:#FF5700;color:#FFF;text-shadow:none;}
   ::-webkit-selection {background:#FF5700;color:#FFF;text-shadow:none;}
   ::-moz-selection {background:#FF5700;color:#FFF;text-shadow:none;}
   
   /* Input focus styles */
   input:focus {outline:0;border:1px solid #FF5700;} /* Gets rid of blue glow on field focus, adds border color instead */
   
/* =============================================================================
   WordPress Core CSS Styles
   ========================================================================== */
   
   .alignnone {margin:5px 20px 20px 0;}
   .aligncenter,div.aligncenter {display:block;margin:5px auto 5px auto;}
   .alignright {float:right;margin:5px 0 20px 20px;}
   .alignleft {float:left;margin:5px 20px 20px 0;}
   .aligncenter {display:block;margin:5px auto 5px auto;}
   a img.alignright {float:right;margin:5px 0 20px 20px;}
   a img.alignnone {margin:5px 20px 20px 0;}
   a img.alignleft {float:left;margin:5px 20px 20px 0;}
   a img.aligncenter {display:block;margin-left:auto;margin-right:auto;}
   .wp-caption {background:#FFF;border:1px solid #F0F0F0;max-width:96%;padding:5px 3px 10px;text-align:center;}
   .wp-caption.alignnone {margin:5px 20px 20px 0;}
   .wp-caption.alignleft {margin:5px 20px 20px 0;}
   .wp-caption.alignright {margin:5px 0 20px 20px;}
   .wp-caption img {border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto;}
   .wp-caption p.wp-caption-text,.gallery-caption {font-size:11px;line-height:17px;margin:0;padding:0 4px 5px;}
   .sticky {}
   .bypostauthor {}

/* ==========================================================================
   Print styles
   ========================================================================== */

   @media print {
	* {background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;}
	a,a:visited {text-decoration:underline;}
	a[href]:after {content:" (" attr(href) ")";}
	abbr[title]:after {content:" (" attr(title) ")";}
	.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content:"";}
	pre,blockquote {border:1px solid #999;page-break-inside:avoid;}
	thead {display:table-header-group;}
	tr,img {page-break-inside:avoid;}
	img {max-width:100% !important;}
	@page {margin:0.5cm;}
	p,h2,h3 {orphans:3;widows:3;}
	h2,h3 {page-break-after:avoid;}
   }