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

.cf:before, .cf:after {content:""; display:table;}
.cf:after, .clear {clear:both;}
.cf {*zoom:1;}
	
	body {font: normal 1em 'Source Sans Pro', arial; color: #1e1e1e; padding: 0; margin: 0;  }
	.sys-single {width: 100%; background-color: #fff;}
	
	
	body, html {-webkit-overflow-scrolling: touch;}
	
		img {max-width: 100%; height: auto;}
	
	.padding {padding: 1em;}
	
	.media-wrap {background-color: #e1e1e1; text-align: center;}
	.media-wrap img {max-width: 100%; height: auto;  margin: 0 auto !important; display:block;}
	.video-wrap {position: relative; padding-bottom: 56.25%; margin-bottom: 1em;}
	.video-wrap	iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
	
	header h2 {margin: 0; font-size:1.2em; font-weight: 500; color: #<?php echo $buttonColor; ?>; text-transform: uppercase;}
	header h3 {margin: 0 0 .5em 0; color: #777; font-size: .8em; font-weight: normal; text-transform: uppercase;}
	
	
	.head-left {float: left; width: 49%; margin-right: 3%;}
	.head-right {float: left; width: 48%; text-align: right;}
	
	
	.entry-content {font-size: 1em; line-height: 1.3em; margin: .5em 0;}
	.entry-content p {margin: 0 0 1em 0;}
	
		
	.screen-reader-text {display: none;} 
	
	.sys-map-it-label {background-color: #eee; color: #1e1e1e; padding: .5em; float: left; display: inline-block; border: 1px solid #ccc; border-bottom: 0px; font-size: .9em;}

.map-caption {background-color: #fff; padding: .5em;   font-size: .7em; text-align: right;}	
.map-caption i {color: #777;}	
.map-caption span {display: block; text-align: right;}	
#sys-map-canvas {height: 250px; width: 100%;}
#sys-map-canvas img {max-width: none;}
	
	.chinese-meta {text-transform: uppercase; color: #777; font-size: .8em; margin: .3em 0;}

    .transit-mode {color: #666; font-weight: 700;  text-transform: uppercase; margin: .3em 0;}

	
	h4 {margin: 0 0 1em 0;}
	
	
@media only screen and (min-width: 641px) {
	.media-wrap.vertical {float: left; width: 40%;}	
	.media-wrap.vertical img {width: 100%; height: auto;}
	.story-content.vertical {float: left; width: 60%;}
	
	
	
	
}		


@media screen and ( max-width: 480px ) {
.head-left, .head-right {width: 100%; margin: 0 0 1em 0;}
	.head-right {text-align: left;}
}