@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Source+Sans+Pro:400,600,700,900');

*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body,html{font-size:100%;padding:0;margin:0;}
html,body,.container000{position:relative;width:100%;height:100%;}

.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both; }

body{background:#f7f7f7;overflow-y:scroll;margin:0;padding:0;border:0;font:16px Source Sans Pro,"Hiragino Sans GB","WenQuanYi Micro Hei","Heiti SC","冬青黑","Microsoft YaHei","微软正黑体",'Microsoft JhengHei','微软雅黑',"宋体",Open Sans,sans-serif,arial;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;color:#333;text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;position:relative;transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;position:relative;overflow-x:hidden;overflow-y:scroll;height:100%;position:relative;}

a{color:#ccc;text-decoration:none;}
a:hover{color:#000;}
h1,h2,h3{font-weight:700!important;}

.en{font-family:Source Sans Pro;}
.en h1,.en h2,.en h3{font-family:Noto Serif;}
.cn{font-family:"Hiragino Sans GB","WenQuanYi Micro Hei","Heiti SC","冬青黑","Microsoft YaHei","微软正黑体",'Microsoft JhengHei','微软雅黑',"宋体",Open Sans,sans-serif,arial;}

.query{float:right;}


.splitlayout{position:relative;overflow-x:hidden;min-height:100%;width:100%;}
.side{position:fixed;top:0;z-index:100;width:50%;height:100%;text-align:center;-webkit-backface-visibility:hidden;}
.open-left .side,.open-right .side{cursor:default;}
.overlay{position:absolute;top:0;left:0;z-index:499;visibility:hidden;width:100%;height:100%;opacity:0;}
.side-left .overlay{background:rgba(0,0,0,0.7);}
.side-right .overlay{background:rgba(0,0,0,0.3);}
.side-left{left:0;background:#47a3da;outline:none; /* avoid gap */}
.side-right{right:0;background:#fff;color:#47a3da;outline:none; /* avoid gap */}

.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);}

.profile{margin:0 auto;padding:0;}
.profile img{width:100px;height:100px;border-radius:50%;opacity:1;padding:6px;border:1px solid #fff;transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-webkit-transition:0.4s ease-in-out;}
.profile img:hover{opacity:0.8;border:none;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
.open-left img,.open-right img{padding:0;border:none;}


@media (min-width:200px) and (max-width:600px){
.profile img{width:60px;height:60px;}
}

.intro-content h1 > span{display:block;white-space:nowrap;}
.intro-content h1 > span:first-child{font-weight:300;font-size:2em;}
.intro-content h1 > span:nth-child(2){position:relative;margin-top:0.5em;padding:0.8em;text-transform:uppercase;letter-spacing:1px;font-size:0.8em;}
.intro-content h1 > span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#fff;content:'';}

.side-right .intro-content h1 > span:nth-child(2):before{background:#47a3da;}
.back{position:fixed;top:6em;z-index:500;display:block;visibility:hidden;width:14%;height:100%;text-align:center;opacity:0;pointer-events:none;}
.back em{font-size:24px;opacity:1;pointer-events:none;z-index:501;display:block;000background:#f8296c;color:#fff;padding-top:0.2em;margin:auto;000width:30px;000height:30px;000border-radius:50%;}
.back:hover em{color:#000;}
.mobile-layout .back{position:absolute;}
.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);}
.open-right .back-left,.open-left .back-right{visibility:visible;opacity:1;-webkit-transition-delay:0.3s;transition-delay:0.3s;pointer-events:auto;}

.facebook-comments{background:#fff;}
.facebook-comments h3.cn{font-size:1em!important;line-height:1.4;margin-bottom:0;}
.facebook-comments h3.en{font-size:0.9em!important;line-height:1.4;margin-top:10px;font-weight:normal!important;}
.fb_iframe_widget,.fb-comments.fb_iframe_widget span,.fb-comments.fb_iframe_widget iframe{width:100%!important}


@media screen and (min-width:800px){
.back em{font-size:50px;}
}

.page{position:relative;top:0;overflow:auto;min-height:100%;width:75%;height:auto;font-size:1.4em;-webkit-backface-visibility:hidden;}
.page-right{left:25%;background:#f8f8f8;-webkit-transform:translateX(100%);transform:translateX(100%);}
.splitlayout.open-right{background:#f8f8f8;}
.page-left{left:0;outline:none;background:#34495e;text-align:left;-webkit-transform:translateX(-100%);transform:translateX(-100%);}
.splitlayout.open-left{background:#f8f8f8;}

.page-inner,.facebook-comments{padding:2em;font-weight:300;font-size:0.85em;}
.page-inner section{padding-bottom:1em;}
.page-inner h2{margin:0 0 1em 0;font-weight:300;font-size:2.4em;}

.side,.page{-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;}
.overlay{-webkit-transition:opacity 0.6s,visibility 0.1s 0.6s;transition:opacity 0.6s,visibility 0.1s 0.6s;}
.intro-content{-webkit-transition:-webkit-transform 0.6s,top 0.6s;transition:transform 0.6s,top 0.6s;}
.intro-content h1,.back{-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}

.reset-layout .page,.splitlayout.open-right .page-left,.splitlayout.open-left .page-right,.splitlayout.close-right .page-left,.splitlayout.close-left .page-right{position:absolute;overflow:hidden;height:100%;}
.splitlayout.open-right .page-right,.splitlayout.open-left .page-left{position:relative;overflow:auto;height:auto;}
.open-right .side-left .overlay,.open-left .side-right .overlay{visibility:visible;opacity:1;-webkit-transition:opacity 0.6s;transition:opacity 0.6s;}

.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%);}
.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%);}
.close-right .side-right{z-index:200;}
.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0%) scale(0.6);transform:translateY(-50%) translateX(0%) scale(0.6);}
.open-right .page-right{-webkit-transform:translateX(0%);transform:translateX(0%);}

.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%);}
.open-left .side-left{z-index:200;-webkit-transform:translateX(150%);transform:translateX(150%);}
.close-left .side-left{z-index:200;}
.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(0.6);transform:translateY(-50%) translateX(-100%) scale(0.6);}
.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s,visibility 0.1s 0.3s;transition:opacity 0.3s,visibility 0.1s 0.3s;}
.open-left .page-left{-webkit-transform:translateX(0%);transform:translateX(0%);}

@media screen and (max-width:49.4375em){
	.open-right .side-right{-webkit-transform:translateX(-175%);transform:translateX(-175%);}
	.open-right .side-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}
	.open-left .side-right{-webkit-transform:translateX(100%);transform:translateX(100%);}
	.open-left .side-left{-webkit-transform:translateX(175%);transform:translateX(175%);}
	.page{width:100%;}
	.page-right{left:0;padding-left:15%;}
	.page-left{padding-right:15%;}
	.intro-content{width:100%;}
	.open-left .side-left .intro-content{left:38%;}
	.open-left .side-left .profile img,.open-right .side-right .profile img{width:60%;height:auto;opacity:1;}
	.open-right .side-right .intro-content{left:62%;}

/*
	.open-right .side-right .intro-content{top:100%;-webkit-transform:translateY(-150px) translateX(-12.5%) scale(0.5);transform:translateY(-150px) translateX(-12.5%) scale(0.5);}
	.open-left .side-left .intro-content{top:100%;-webkit-transform:translateY(-150px) translateX(-87.5%) scale(0.5);transform:translateY(-150px) translateX(-87.5%) scale(0.5);} 
*/
	.open-right .intro-content h1,.open-left .intro-content h1{opacity:0;}
	.back-left{left:6.25%;}
	.back-right{right:6.25%;}
}

/*
@media screen and (max-width:83em){
.intro-content{font-size:60%;}
}

@media screen and (max-width:58em){
body{font-size:90%; }
}

@media screen and (max-width:42.5em){
	body{font-size:80%;}
	.intro-content{font-size:50%;}
}

@media screen and (max-width:320px){
	body {font-size:70%;}
}


@media screen and (max-height:41.125em){
	.intro-content{-webkit-transform:translateY(-25%) translateX(-50%);transform:translateY(-25%) translateX(-50%);}
}

@media screen and (max-width:39.375em){
	.intro-content .profile{-webkit-transform:scale(0.5);transform:scale(0.5);}
}

*/

.exchange-here{width:100%;}
h1 br{display:none;}

.profile-name{font-weight:bold;}
.tab-pane{border-bottom:2px solid #f8296c;padding-bottom:3em;margin-bottom:3em;}

.splitlayout.open-left .side .profile-desc,.splitlayout.open-right .side .profile-desc{display:none;}
.splitlayout.open-left .profile-detail,.splitlayout.open-right .profile-detail{padding:1em 0;text-align:center;}
.splitlayout.open-left .profile,.splitlayout.open-left .profile,.splitlayout.open-right .profile,.splitlayout.open-right .profile{display:block;}
.splitlayout.open-left .profile-name,.splitlayout.open-left .profile-title,.splitlayout.open-right .profile-name,.splitlayout.open-right .profile-title{font-size:1.2em;}
.splitlayout.open-left .side-left,.splitlayout.open-right .side-right{background-image:none!important;}
.splitlayout.open-left .side-left .intro-content,.splitlayout.open-right .side-right .intro-content{text-align:center;}

.side-left .intro-content{text-align:right;}
.side-right .intro-content{text-align:left;}
.side-left .profile-detail{color:#fff;padding:1em 0 0 8em;font-size:1.4em;}
.side-right .profile-detail{color:#999;padding:1em 10em 0 0;font-size:1.3em;}
.side h1{font-weight:bold;}
.side .profile-detail{width:100%;}
.side .profile img{000border:5px solid #fff;margin-bottom:10px;}
.side .profile-desc{font-size:1.1em;margin:1em auto;}
.side .profile-name,.side .profile-title{font-size:0.9em;}

.profile{display:none;margin:0 auto;}

@media screen and (min-width:1200px){
.side .intro-content{width:80%;}
.page-inner,.facebook-comments{padding:3em 12em;line-height:1.6;}
h1 br{display:block;}
.en h1{font-size:2.8em;}
.cn h1{font-size:3.2em;}
}

@media screen and (max-width:1199px){
.side .intro-content{width:80%;}
.side-left .profile-detail{padding:1em 0 0 8em;font-size:1.2em;}
.side-right .profile-detail{padding:1em 10em 0 0;font-size:1.1em;}
.page-inner,.facebook-comments{padding:3em;font-size:0.8em;line-height:1.8;}
h1 br{display:block;}
.en h1{font-size:2.2em;}
.cn h1{font-size:2.8em;}
}

@media screen and (max-width:1050px){
.side .intro-content{width:80%;top:45%;}
.side-left .profile-detail{padding:0 0 0 6em;font-size:1.2em;}
.side-right .profile-detail{padding:0 8em 0 0;font-size:1.1em;}
.page-inner,.facebook-comments{padding:3em;font-size:0.8em;line-height:1.8;}
h1 br{display:block;}
.en h1{font-size:2.2em;}
.cn h1{font-size:2.2em;line-height:1.2;}
}

@media screen and (max-width:1023px){
.side .intro-content{width:90%;top:32%;}
.side-left .profile-detail{padding:1em 0 0 0;font-size:1.2em;}
.side-right .profile-detail{padding:1em 0 0 0;font-size:1.1em;}
.page-inner,.facebook-comments{padding:3em 2.4em;font-size:0.8em;line-height:1.8;}
h1 br{display:none;}
.en h1{font-size:1.8em;}
.cn h1{font-size:2em;}
}

@media screen and (min-width:700px) and (max-width:900px){
.side .intro-content{height:450px;}
}

.splitlayout.open-left .side .intro-content,.splitlayout.open-right .side .intro-content{width:50%;}

@media screen and (max-width:767px){
.splitlayout.open-left .side .intro-content,.splitlayout.open-right .side .intro-content{width:50%;padding:0;top:60%;}
.side .intro-content{width:100%;top:58%;text-align:center;height:100%;vertical-align:top;}
.side-left .profile-detail{padding:1em 0 0 0;}
.side-right .profile-detail{padding:1em 0 0 0;}
.page-inner,.facebook-comments{padding:3em 1em;font-size:0.7em;line-height:1.6;}
h1 br{display:none;}
.en h1{font-size:1.2em;}
.cn h1{font-size:1.4em;}

.splitlayout.open-left .topic-title,.splitlayout.open-left .profile-desc,.splitlayout.open-left .profile-name,.splitlayout.open-left .profile-title,
.splitlayout.open-right .topic-title,.splitlayout.open-right .profile-desc,.splitlayout.open-right .profile-name,.splitlayout.open-right .profile-title{display:none;}
.splitlayout.open-left,.splitlayout.open-right{background:#f8f8f8;}
.side-left,.side-right{background-image:none!important;}
.side .profile-name,.side .profile-title{font-size:0.8em;}
.topic-title{min-height:26px;margin:10px auto 0 auto;}
.profile-detail{padding:0!important;}
.profile-desc{min-height:auto;}
.en .topic-title{font-size:1em;line-height:1.3;}
.cn .topic-title{font-size:1.1em;line-height:1.4;}
.side-left.en .profile-desc,.side-right.en .profile-desc{font-size:0.85em;line-height:1.25;}
.side-right.en .profile-desc{font-size:0.9em;}
.en .profile-title{line-height:1.2;}
.cn .profile-desc{font-size:0.8em;line-height:1.6;}
.side-right.cn .profile-desc{font-size:0.85em;line-height:1.6;}
.profile{display:block!important;}
}

.side-left,.side-right{-webkit-background-size:auto 55%;-moz-background-size:auto 55%;-o-background-size:auto 55%;background-size:auto 55%;background-repeat:no-repeat;background-attachment:fixed;}
.side-left{background-position:left bottom;}
.side-right{background-position:right bottom;}
.page-left,.page-right{outline:none;background:#f8f8f8;}
.side-left h1,.open-right .side-right h1,.open-right .side-right .profile-detail{color:#fff;}

#topic1 .side-left{background-color:#99c57b;background-image:url('../img/yuen-sin-01.png');}
#topic1 .side-right{background-color:#f8f8f8;background-image:url('../img/wai-mun-01.png');}
#topic1 .side-right h1,#topic1 .side-right{color:#99c57b;}
#topic1 .open-right .side-right h1{color:#fff;}
#topic1 .side-right .intro-content h1 > span:nth-child(2):before,#topic1 .open-right .side-right,#topic1 .splitlayout.open-left{background:#99c57b;}
#topic1 .side-right .profile img{border-color:#99c57b;}

#topic2 .side-left{background-color:#74c2cd;background-image:url('../img/wai-mun-02.png');}
#topic2 .side-right{background-color:#f8f8f8;background-image:url('../img/yuen-sin-02.png');}
#topic2 .side-right h1,#topic2 .side-right{color:#74c2cd;}
#topic2 .open-right .side-right h1{color:#fff;}
#topic2 .side-right .intro-content h1 > span:nth-child(2):before,#topic2 .open-right .side-right,#topic2 .splitlayout.open-left{background:#74c2cd;}
#topic2 .side-right .profile img{border-color:#74c2cd;}

#topic3 .side-left{background-color:#ffc041;background-image:url('../img/yuen-sin-03.png');}
#topic3 .side-right{background-color:#f8f8f8;background-image:url('../img/wai-mun-03.png');}
#topic3 .side-right h1,#topic3 .side-right{color:#ffc041;}
#topic3 .open-right .side-right h1{color:#fff;}
#topic3 .side-right .intro-content h1 > span:nth-child(2):before,#topic3 .open-right .side-right,#topic3 .splitlayout.open-left{background:#ffc041;}
#topic3 .side-right .profile img{border-color:#ffc041;}

@media screen and (max-width:1000px){
.side-left,.side-right{-webkit-background-size:auto 45%;-moz-background-size:auto 45%;-o-background-size:auto 45%;background-size:auto 50%;}
}

@media screen and (max-width:1000px){
.open-left .side-left h1,.open-right .side-right h1{display:none;}
}