/* css addons */
@import url("normalize.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,500,700');
@import url('https://fonts.googleapis.com/css?family=Abhaya+Libre:500,700');
@import url("fonts.css");
/* @import url("caldera-forms-front.css"); */
/* @import url("animate.css"); */

html a {outline:0;}
body {padding:0; margin:0; font-family: 'Montserrat', Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑",sans-serif; font-size:80%; color:#555; font-weight:normal; min-height:100%; background:url(../../images/bg-tone.jpg)}
body.loading {background-image: url(images/loader.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center 200px;}
h1,h2,h3,h4,h5,h6 {margin :0; font-weight:400;}
h1{font-size:1.7em;}
.heading {font-family: 'Abhaya Libre', serif;}
a {outline:0; text-decoration:none; color:#333; transition: all 200ms;}
a:hover {color:#666;}
p{margin:0 0 15px 0;}
p:last-child{margin:0 0 0 0;}
.lower {text-transform:lowercase;}
.ellipsis {white-space: nowrap; overflow: hidden;}
.ellipsis.multiline {white-space: normal;}
.hentry {line-height:150%}
.alignleft {float:left; margin: 4px 15px 15px 0;}
.alignright {float:right; margin: 4px 0 15px 15px;}
.cursor,
.clickable,
.clickload {cursor:pointer;}
.color-orange {color:rgb(215,91,28);}
.color-orange a {background-color:rgb(220,91,28); color: #fff; border-radius: 8px; padding: 10px 15px; display:inline-block; margin-top:10px; }
.color-orange a:hover {background-color:rgb(240,80,15)}
.color-lightgray {color:rgb(163,159,159);}

/* 
 * General
 */
#universe {box-sizing: border-box; max-width:2000px; position:relative; margin:0 auto; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    background: #fff; /* Old browsers */
	/*background: linear-gradient(135deg, #eee 0%, #d9d9cd 100%);*/
}
.language-content {display:none;}

body.content-loading,
body.mobile-menu-open {
	overflow: hidden;
}

body.content-loading:before {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	visibility:visible;
	opacity: 0;
	transition: opacity .4s;
	content: url(loading.svg);
	opacity: 0.75;
	z-index: 9;
	box-sizing: border-box;
	line-height:100%;
	padding-top: 50vh;
	text-align: center;
}

/* Header
----------------------------*/
#branding {max-width:2000px; margin: 0 auto; position:relative; z-index:100; float:none; border-width:0 0 0 0;  border-color:rgb(220,220,220); border-style: solid; background:#f6f6f6; transition: all 200ms; max-height:200px; box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.3); box-sizing:border-box;} 
#branding h1 {margin:0 3%; padding:0; vertical-align: text-top; position: relative; font-size: 0; /*background: #1d1d1b; border-radius: 0 0 5px 0;*/}
#branding h1 a {outline:0; filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));}

#branding.min {position: fixed; width:inherit; width:100%; /* background: #231f20; */}
#branding.min h1 {top: 0; height:100%; position: absolute; margin: 0 0;}
#branding.min h1 .brand-logo {height:100%; background: #231f20;}
#branding.min h1 a {filter:none;}
#branding.min #primary-menu-list {padding:7px 0 7px 0; font-size:100%;}

/* Menus / Navigation
----------------------------*/
#primary-menu{text-align: right;}
#primary-menu-list{display:inline-block; margin:0 3% 0 3%; padding:20px 0 20px 0; vertical-align: middle; line-height:26px;}
#primary-menu-list li {background-repeat: no-repeat; display:inline-block; margin-right:30px; text-transform: uppercase; vertical-align:middle; height:26px;}
#primary-menu-list li:last-child {margin-right:0;}
#primary-menu-list li a.active {color:rgb(0,0,0);}
#primary-menu-list li a:hover {color:rgb(0,0,0);}
#primary-menu-list li a {color:rgb(120,120,120);}
#primary-menu-list li.social-icons {}
#primary-menu-list .social-links a {width: 24px; height: 24px; line-height: 24px; margin: 0 0 0 10px;}
#primary-menu-list .social-links a:first-child{margin-left:0;}
#primary-menu-list .social-links a:before {font-size: 12px;}

#branding.min #primary-menu-list li a.active {}
#branding.min #primary-menu-list li a:hover {}
#branding.min #primary-menu-list li a {vertical-align: middle;}

#secondary-menu{box-sizing: border-box; padding:20px 3% 0; display: none;}
#language-selector {display:none; float:right;}
#language-selector span {cursor: pointer;}
#language-selector span:hover {color:#333;}
#language-selector .active {font-weight:bold; color:#333;}
.fb-like {vertical-align: top;}
#secondary-menu .social-icon {height: 20px;}
#secondary-menu .social-link {margin-right: 15px; vertical-align: middle;}
#secondary-menu a.social-link:hover {opacity: 0.8;}

#primary-menu:before {
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
	content: none;
	z-index: 9;
}

.mobile-menu-open #primary-menu:before {
	content: "";
	opacity: 0.75;
	visibility: hidden;
}

.mobile-menu-open #primary-menu {
	left: 0;
}

.mobile-menu-open #primary-menu * {}

.mobile-menu-toggle {
	position: absolute;
	right: 10px;
	top: 0;
	margin: 0;
	width: 40px;
	height: 40px;
	text-decoration: none;
	z-index: 5;
	display:none;
}

.mobile-menu-toggle:hover {
	text-decoration: none;
}

.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
	outline: 0;	
}

.button-toggle {
	display: block;
    background-color: #231f20;
    content: "";
    height: 2px;
    opacity: 1;
    position: absolute;
    transition: opacity 0.3s ease 0s, background 0.3s ease 0s;
    width: 20px;
    z-index: 20;
    left: 10px;
    top: 20px;
}

.button-toggle:before {
    background-color: #231f20;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: -6px;
    transform-origin: center center 0;
    transition: transform 0.3s ease 0s, background 0.3s ease 0s;
    width: 20px;
}

.button-toggle:after {
    background-color: #231f20;
    bottom: -6px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transform-origin: center center 0;
    transition: transform 0.3s ease 0s, background 0.3s ease 0s;
    width: 20px;
}

.mobile-menu-open .button-toggle {
	background-color: transparent !important;
}

.mobile-menu-open .button-toggle:before {
    opacity: 1;
    transform: translate(0px, 6px) rotate(-45deg);
}

.mobile-menu-open .button-toggle:after {
    opacity: 1;
    transform: translate(0px, -6px) rotate(45deg);
}


/* Main Content
----------------------------*/
#main-content {
    position: relative;
    /*padding:30px 3% 30px;
    -webkit-column-count: 2; 
     -moz-column-count: 2; 
          column-count: 2;
    -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;*/
	padding: 3% 3%;
    clear: both;
}
#main-content.story {background: #dadada;}
#main-content .inner-wrapper {background: #fff; margin: 30px 0 0; padding: 0 0 30px 0;}
#main-content #banner {margin: 0 0 30px;}
#main-content .article-header {text-align: center;}
#main-content .article-header .meta-tag{font-size: 80%;}
#main-content .article-header .title{font-size: 360%; font-weight: 700; margin: 15px auto;}
#main-content .article-header .sub-title{}
#main-content h3 {margin: 25px 0 10px 0; font-weight: 500; font-size: 150%;}
#main-content ul {margin:0; padding:0;}
#main-content li {list-style: none; padding-left:16px; background-image:url(../../images/bullet.png); background-repeat: no-repeat; background-position: 0 3px; margin-bottom: 5px;}
#main-content .col-1 {position:relative; box-sizing: border-box; width:20%; padding:0 0 0 3%; float:left; color:#444;}
#main-content .col-2 {position:relative; box-sizing: border-box; width:60%; padding:0 3% 0 3%; float:left; color:#444;}
#main-content .col-3 {position:relative; box-sizing: border-box; width:20%; padding:0 3% 0 0; float:left; clear:right; color:#444;}
#main-content .col-full {position:relative; box-sizing: border-box; width:80%; padding:0 3% 0 3%; float:left; clear:right; color:#444;}
#main-content img.content {width:100%;}
#main-content img.content.left-col-image {position:absolute; width:28%; margin-left:-33%;}
#main-content img.content.right-col-image {position:absolute; width:28%; margin-left:95%;}
#main-content h2 {margin-bottom: 25px;}
#main-content .col-2 h3:nth-of-type(n+2) {margin-top:30px;}

#main-content .address h4 {margin-bottom:6px;}
#main-content .address p {line-height:130%;}
#main-content a {color:#ff6600;}
#main-content a:hover, #main-content a:focus, #main-content a:active {
	opacity: 0.8;
}

.main-content p:first-of-type:first-letter {
	font-family: 'Abhaya Libre', serif; 
	font-size: 400%;
	display: block;
	float:left;
	padding:8px 2px 0 0;
	margin-top:0;
	margin-right:0;
	margin-left:-2px;
	line-height: 1;
}

.quoted {
	padding: 5%;
	position: relative;
	margin-bottom: 4vw;
}
.quoted * {
	position: relative;
	z-index: 1;
}
.quoted h3 {
	text-align: right;
}
.quoted h3 span {
	font-size: 75%;
	font-style: italic;
	display: block;
}
.quoted:before {
	content: '';
	position: absolute;
	max-width: 10%;
	z-index:0;
	left:0;
	top:0;
	background-image: url(../../images/quote-open.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:left top;
	opacity: 0.4;
}

.quoted:after {
	content: '';
	position: absolute;
	max-width: 10%;
	z-index:0;
	right:0;
	bottom:0;
	background-image: url(../../images/quote-close.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:right bottom;
	opacity: 0.4;
}

.resource {}

.resource .item {
	padding: 5%;
	background-color: rgba(255, 255, 255, 0.2);
	margin-bottom: 15px;
}

/* Content / Articles Menu
----------------------------*/
#main-content #content-menu {border: 1px solid #ccc; padding: 8px 16px 4px; transition: all 200ms ease-in;}
#content-menu h5 {text-align: center; margin: -15px 0 0 0; font-weight:500; font-size: 70%; }
#content-menu h5 span {background: #fff; padding: 0 5px;}
#main-content #content-menu li {background: none; padding-left: 0; margin: 8px 0 12px;}
#main-content #content-menu li a {background: #f0f0f0; display: block; padding: 8px; color: #333; font-size: 70%; text-align: center;}
#main-content #content-menu li.active a {font-style: italic;}

.content-menu-toggle {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	width: 100%;
	height: 30px;
	text-decoration: none;
	z-index: 5;
	display:none;
}

.content-menu-toggle:hover {
	text-decoration: none;
}

.content-menu-toggle:active,
.content-menu-toggle:focus {
	outline: 0;	
}

.content-toggle {
	box-sizing: border-box;
  	height: 10px;
  	width: 10px;
  	border-style: solid;
  	border-color: #231f20;
  	border-width: 0px 1px 1px 0px;
  	transform: rotate(45deg);
	display: block;
	float: right;
	margin-top: 7px;
	margin-right: 22px;
}

.content-toggle.opened {
	margin-top: 12px;
	transform: rotate(225deg);
}

.content-menu-open .content-toggle {
	background-color: transparent !important;
}

/* Sidebar Quotations
----------------------------*/
#main-content .quotation {border: 1px solid #ccc; padding: 8px 16px 4px; transition: all 500ms;}
.quotation h5 {text-align: center; margin: -15px 0 0 0; font-weight:500; font-size: 70%; }
.quotation h5 span {background: #fff; padding: 0 5px;}
.quotation .inner {font-family: 'Abhaya Libre', serif; font-size: 140%; font-weight:700; line-height: 1; text-align: center; padding: 5% 0;}
.quotation .inner:before {
	content:''; 
	width: 1.2vw;
	height: 1.2vw;
	max-width:18px;
	max-height:18px;
	min-width:12px;
	min-height:12px;
	position:relative;
	display: inline-block;
	vertical-align: middle;
	background-image: url(../../images/quote-open.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
.quotation .inner:after {
	content:''; 
	width: 1.2vw;
	height: 1.2vw;
	max-width:18px;
	max-height:18px;
	min-width:12px;
	min-height:12px;
	position:relative;
	display: inline-block;
	vertical-align: middle;
	background-image: url(../../images/quote-close.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.rating {
	font-family:monospace;
  unicode-bidi: bidi-override;
  direction: rtl;
	font-size: 130%;
	text-align: center;
	padding: 4% 0;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}
.rating > span.selected:before,
.rating > span.selected ~ span:before {
   content: "\2605";
   position: absolute;
}

/* Sidebar Actions
----------------------------*/
#main-content .action {border: 1px solid #ccc; padding: 8px 10px 8px; transition: all 500ms;}
.action h5 {text-align: center; margin: -15px 0 0 0; font-weight:500; font-size: 70%; }
.action h5 span {background: #fff; padding: 0 5px;}
.action .inner {font-family: 'Abhaya Libre', serif; font-size: 130%; font-weight:700; line-height: 1; text-align: center; margin-top: 8px; margin-bottom: 8px; padding: 3%; background-color: #f9f9f9; background-size: cover; background-position: center;}
.action .inner.padding-medium{padding:18% 8%;}
.inner.light {color: #fff; background-color: #ddd;}
.action .link {text-align: center; font-size: 65%;}
#main-content .action .link a {color: #000;}

/* Logo Bar
----------------------------*/
#logo-bar {max-width:1180px; display: block; margin: 40px auto;}
#logo-bar img {display: block; float:left; transition: opacity 200ms;}
#logo-bar:hover img {opacity:1;}
#logo-bar .logo-title {width:15%;}
#logo-bar .logo-list-01 {width:38%; opacity: 0.7;}
#logo-bar .logo-list-02 {width:47%; opacity: 0.7;}

/* Secondary Content
----------------------------*/
#secondary-content.session-images img {width:25%; display: block; float:left;}

/* Social Sharing
----------------------------*/
#social-sharing {clear:both; float:none; box-sizing: border-box; text-align: center; padding: 30px 3% 0; }

#social-sharing h5 {margin-bottom: 10px;}

.social-links {
	list-style-type: none;
	font-size: 0;
}

.social-links li {
	list-style-type: none;
	display: inline-block;
	margin: 0 0 20px 10px;
	background-image: none !important;
	padding-left:0 !important;
}

.social-links li:first-child {
	margin-left: 0;
}

.social-links a {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    line-height: 32px;
	margin: 0;
	background-color: #333;
	color: #fff;
	text-align: center;
	-webkit-border-radius: 32px;
    border-radius: 32px;
}

.social-links a:hover {
	text-decoration: none;
	color: #fff;
	opacity: 0.9;
}

.social-links a .screen-reader-text {
	position: absolute;
	top: -9999em;
	left: -9999em;
}

.social-links a:before {
	font-family: 'socicon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	font-size: 16px;
	vertical-align: middle;
	color: #fff;
}

.social-links a::before { content: "\e05a"; }
.social-links a[href*="mailto:"]::before { content: "\e050"; }
.social-links a[href*="dribbble.com"]::before { content: "\e021"; }
.social-links a[href*="facebook.com"]::before { content: "\e028"; }
.social-links a[href*="instagram.com"]::before { content: "\e044"; }
.social-links a[href*="linkedin.com"]::before { content: "\e04c"; }
.social-links a[href*="pinterest.com"]::before { content: "\e063"; }
.social-links a[href*="plus.google.com"]::before { content: "\e034"; }
.social-links a[href*="medium.com"]::before { content: "\e051"; }
.social-links a[href*="stumbleupon.com"]::before { content: "\e082"; }
.social-links a[href*="tumblr.com"]::before { content: "\e08b"; }
.social-links a[href*="twitter.com"]::before { content: "\e08d"; }
.social-links a[href*="youtube.com"]::before { content: "\e0a5"; }

/* Banner + Carousel
----------------------------*/
#banner{border-width:0 0 0 0;  border-color:rgb(220,220,220); border-style: solid;}
#banner img {width:100%;}
#banner.single img {display:block;}
.carousel {}
.owl-carousel .owl-stage {cursor: -webkit-grab; cursor: grab;}
.owl-carousel .owl-stage:active {cursor: -webkit-grabbing; cursor: grabbing;}

/* Audio
----------------------------*/
.audio-graph {
  overflow: hidden;
	height: 22px;
  width: 33px;
  margin: 0 0 0 40px;
  position: relative;
  cursor: pointer;
	display:inline-block;
	line-height:19px;
	vertical-align: middle;
}
.bar {
  height: 10px;
  width: 3px;
  display: inline-block;
  background-color: #555;
  bottom: 5px;
  position: absolute;
  animation-duration: 500ms;
  animation-play-state: running;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.buffering .bar:nth-of-type(odd) {
  animation-name: danceHeightBuffer;
	background-color: #ccc;
	animation-delay: 0ms;
}
.buffering .bar:nth-of-type(even) {
  animation-name: danceHeightBuffer;
	background-color: #ccc;
	animation-delay: 300ms;
}
.noAnim .bar {
  animation-play-state: paused;
  animation-name: none;
	background-color: #ccc;
}
.bar:nth-of-type(1) {
  height:12px;
	left: 0;
  animation-name: danceHeight1;
  animation-delay: 0ms;
}
.bar:nth-of-type(2) {
  height:5px;
	left: 6px;
  animation-name: danceHeight2;
  animation-delay: 300ms;
}
.bar:nth-of-type(3) {
	height:8px;
	left: 12px;
  animation-name: danceHeight3;
  animation-delay: 600ms;
}
.bar:nth-of-type(4) {
  height:3px;
	left: 18px;
  animation-name: danceHeight4;
  animation-delay: 900ms;
}
.bar:nth-of-type(5) {
  height:5px;
	left: 24px;
  animation-name: danceHeight5;
  animation-delay: 1200ms;
}
.bar:nth-of-type(6) {
  height:9px;
	left: 30px;
  animation-name: danceHeight6;
  animation-delay: 1500ms;
}
@keyframes danceHeight1 {
  from {
    height: 14px;
  }
  to {
    height: 1px;
  }
}
@keyframes danceHeight2 {
  from {
    height: 1px;
  }
  to {
    height: 10px;
  }
}
@keyframes danceHeight3 {
  from {
    height: 1px;
  }
  to {
    height: 18px;
  }
}
@keyframes danceHeight4 {
  from {
    height: 1px;
  }
  to {
    height: 15px;
  }
}
@keyframes danceHeight5 {
  from {
    height: 1px;
  }
  to {
    height: 12px;
  }
}
@keyframes danceHeight6 {
  from {
    height: 1px;
  }
  to {
    height: 12px;
  }
}
@keyframes danceHeightBuffer {
  from {
    height: 3px;
  }
  to {
    height: 5px;
  }
}

/* Footer
----------------------------*/
#footer {z-index: 2; width: 100%; background-color: rgb(255,255,255); text-align: center; padding:15px 10px; color: rgb(25,25,25);
     -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow:hidden; clear:both; font-size: 90%;
}

/* Responsive
----------------------------*/
@media
/*screen and (min-device-width: 1600px), */
screen and (min-width: 1600px) {
    #branding h1 {top:0;}
	#branding h1 .brand-logo {width:250px; height:auto;}
	#branding.min h1 .brand-logo {width:auto;}
	#primary-menu-list {padding:14px 0 14px 0; font-size:120%; line-height:24px;}
	#primary-menu-list li,
	#primary-menu-list .social-icon {height: 24px;}
	#branding.min #primary-menu-list {padding:8px 0 8px 0;}
    #main-content {font-size:130%;}
    #main-content h2 {font-size:180%; line-height:105%;}
    #main-content p {line-height:160%;}
	#main-content .chinese .page-title {font-size: 220%;}
		
	.quoted {
		padding: 3%;
	}
	
	.quoted:before, .quoted:after {
		width:3vw;
		height:3vw;
	}
}

@media
/*screen and (max-device-width: 1599px), */
screen and (max-width: 1599px) {
    #branding h1 {}
	#branding h1 .brand-logo {width:220px; height:auto;}
	#branding.min h1 .brand-logo {width:auto;}
	#primary-menu-list {padding:12px 0 12px 0; font-size:115%;}
	#branding.min #primary-menu-list {padding:9px 0 8px 0;}
    #branding.min #primary-menu-list .social-links a {width: 22px; height: 22px; line-height: 22px;}
	#branding.min #primary-menu-list .social-links a:before {font-size: 11px;}
	#main-content {font-size:120%;}
    #main-content h2 {font-size:155%; line-height:105%;}
    #main-content p {line-height:160%;}
	#main-content .chinese .page-title {font-size: 210%;}
	
	.quoted:before, .quoted:after {
		width:3.5vw;
		height:3.5vw;
	}
}

@media
/*screen and (max-device-width: 1400px), */
screen and (max-width: 1400px) {
	#branding h1 .brand-logo {width:200px; height:auto;}
	#branding.min h1 .brand-logo {width:auto;}
	#primary-menu-list {font-size:110%; line-height:23px;}
	#primary-menu-list li,
	#primary-menu-list .social-icon {height: 23px;}
	#main-content .chinese .page-title {font-size: 200%;}
	
	.main-content p:first-of-type:first-letter {
		padding:5px 2px 0 0;
	}
}

@media
/*screen and (max-device-width: 1300px), */
screen and (max-width: 1300px) {
	#main-content {font-size:110%;}
	#main-content .chinese .page-title {font-size: 180%;}
}

@media
/*screen and (max-device-width: 1200px), */
screen and (max-width:1200px) {
    #branding h1 {}
	#branding h1 .brand-logo {width:180px; height:auto;}
	#branding.min h1 .brand-logo {width:auto;}
	#primary-menu-list {padding:10px 0 10px 0; font-size:105%;}
    #main-content h2 {font-size:220%; line-height:105%;}
    #main-content p {line-height:160%;}
	#main-content .chinese .page-title {font-size: 180%;}
	#logo-bar {margin: 20px 3%;}
	
	.quoted:before, .quoted:after {
		width:5vw;
		height:5vw;
	}
}

@media
/*screen and (max-device-width: 1100px), */
screen and (max-width:1100px) {
	#branding.min h1 {display:none;}
}

@media
/*screen and (max-device-width: 1000px), */
screen and (max-width:1000px) {
    #branding {border-width:0 0 1px 0;}
    #branding h1 {}
	#primary-menu-list {padding:10px 0 10px 0; font-size:100%;}
    #main-content .col-1 {box-sizing: border-box; width:100%; padding:0 3% 0 3%; min-height:30px; float:none; clear: both; z-index: 1; background:#fff; position: relative;}
    #main-content .col-2 {box-sizing: border-box; width:100%; padding:3% 3% 0 3%; float:none; clear: both; z-index:0; position: relative;}
	#main-content .col-3 {box-sizing: border-box; width:100%; padding:0 3% 0 3%; margin: 30px 0 0 0; float:none; clear: both;}
	#main-content .col-full {box-sizing: border-box; width:100%; padding:0 3% 0 3%; float:none; clear: both;}
	#main-content {font-size:110%;}
    #main-content h2 {font-size:210%; line-height:105%;}
    #main-content p {line-height:160%;}
	#main-content .chinese .page-title {font-size: 170%;}
	
	.main-content p:first-of-type:first-letter {
		padding:3px 2px 0 0;
	}
    
    #banner{border-width:0 0 0 0;}
	#main-content #banner {margin-bottom:0;}
	
	.content-menu-toggle {display:block;}
	#main-content #content-menu {border-width: 0 0 1px 0; border-color: #ccc; border-style: dotted; padding: 8px 16px 4px; margin-left: -3%; margin-right:-3%; overflow:visible; max-height:200px; overflow: visible; background:#fff; transition: max-height 200ms;}
	#main-content #content-menu.closed {max-height:18px; overflow: hidden; background:none;}
	#main-content #content-menu h5 {margin: 0 0 0 0; font-size:80%;}
	#main-content #content-menu h5 span {padding: 0 5px; color: #666; letter-spacing: 1px;}
	
	.respond-menu.fixed {
		position: fixed;
		width:100%;
		left:0;
		top:40px;
		z-index:4;
		background: #fff;
		box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.3);
		padding: 0 3%;
		box-sizing: border-box;
		transition: background 500ms, max-height 200ms;
	}
	
	.rating {
		padding: 0 0 2% 0;
	}
	
	.action .inner {font-size: 140%;}
	.action .inner.padding-medium{padding:3% 3%;}
}

@media
/*screen and (max-device-width: 900px) One Column Content*/
screen and (max-width:800px) {
    #secondary-menu{padding:20px 3% 0;}
	
	#main-content {padding: 30px 0 3%;}
	#main-content .article-header {padding: 0 3%;}
	#main-content .article-header .title {font-size: 250%;}
	
	#main-content .col-2.margined {margin-top:25px;}
    #main-content img.content {width:100%;}
    #main-content img.content.left-col-image,
	#main-content img.content.right-col-image {position:relative; width:100%; margin:10px 0 10px 0;}
	
	#logo-bar .logo-title {width:28%;}
	#logo-bar .logo-list-01 {width:72%;}
	#logo-bar .logo-list-02 {float:none; width:88%;}
	
	.quoted:before, .quoted:after {
		width:10vw !important;
		height:10vw !important;
	}
}

@media
/*screen and (max-device-width: 960px), */
screen and (max-width:960px) {    
	body {margin-top:41px;}
	#branding {padding-top: 0; border-width:0 0 1px 0; min-height:40px; position: fixed; width: 100%; left:0; top:0;}
	#branding h1 {margin:0 0; 
		/*
		left: 50%; position:absolute;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		*/
	}
    #branding h1 a {filter:none;}
	#branding h1 .brand-logo {height:40px; width:auto; background: #231f20;}
	#primary-menu-list,
	#branding.min #primary-menu-list {display:block; padding:0; font-size:100%; background-image:none; width:100%; margin:0; text-align: center; position: relative; height: auto;}
	#primary-menu-list li {display: block; margin:0; border-bottom: 1px solid #ddd; padding: 0 0; height:auto;}
	#primary-menu-list li a {display:block; padding: 11px 0;}
	#primary-menu-list li.social-icons {padding: 12px 0;}
	#primary-menu-list li.social-icons a {display:inline-block; padding: 0 0;}
	
	.audio-graph {margin:0; display:block; margin: 10px auto;}
	
    #branding.min {position: fixed; padding-top: 0; width:inherit; width:100%}
    #branding.min h1 {height:40px; margin-top: 0; display:block;}
	#branding.min .mobile-menu-toggle {top:0;}
	
	#branding #primary-menu-list .social-links a,
	#branding.min #primary-menu-list .social-links a {width: 24px; height: 24px; line-height: 24px;}
	#branding #primary-menu-list .social-links a:before,
	#branding.min #primary-menu-list .social-links a:before{font-size: 11px;}
	
    #banner{border-width:0 0 1px 0;}
    
    #main-content {font-size:110%;}
    #main-content h2 {font-size:180%; line-height:105%;}
    #main-content p {line-height:160%;}
	.main-content p:first-of-type:first-letter {
		font-size: 350%;
		padding:3px 2px 0 0;
		line-height: 0.8;
	}
	
	.mobile-menu-toggle {display: block;}
	
	#primary-menu {
		display: block;
		float: none;
		margin: 0;
		padding: 0;
		position: fixed;
		height: -webkit-calc(100% - 41px);
		height: calc(100% - 41px);
		width: 100%;
		left: -100%;
		top: 41px;
		overflow: auto;
		-webkit-transition: left 200ms;
		transition: left 200ms;
		background-color: #eee;
		text-align: left;
		z-index: 10;
	}
	
	#branding.min #primary-menu-list li a.active {color:rgb(0,0,0);}
	#branding.min #primary-menu-list li a:hover {color:rgb(0,0,0);}
	#branding.min #primary-menu-list li a {color:rgb(100,100,100);}
	
	#branding.min #primary-menu {
		height: -webkit-calc(100% - 40px);
		height: calc(100% - 40px);
		top: 40px;
	}
	
	.quoted:before, .quoted:after {
		width:6vw;
		height:6vw;
	}
}