@charset "UTF-8";
/* CSS Document */
/* @import url(https://fonts.googleapis.com/css?family=Merriweather);*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html, body { 
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}

body { 
	font-family:  'Roboto', 'Noto Sans HK', sans-serif;
	color: #645447;
	font-size: 19px;
	line-height: 1.8em;
	background-color: #c9e7ff;
    letter-spacing: .05em;
}

body.eng{ 
	font-family:  'Roboto', 'Noto Sans HK', sans-serif;
	font-size: 18px;
    letter-spacing: .03em;
}

.container {padding: 1em 2em;}

h1,h2,h3,h4,h5,h6,h7 {
	font-weight: bold;	
	margin-top: 2em;
	margin-bottom: .5em;
	line-height: 1.6em;
}

h2 { font-size: 1.3em; font-weight: 400!important; color: #1464b9;}
h3 { font-size: 1.1em; color: #645447; }

p { margin: 0 0 1em 0; }
#wrapper {
	width: inherit;
	height: inherit;
}
#rthklogo {
	width: 120px;
	position:absolute;
	top: 30px;
	left:40px;
	z-index:99;
}
#r4logo {
	width: 70px;
	position:absolute;
	top: 25px;
	left:200px;
	z-index:99;
}
#ymmlogo {
	width: 110px;
	position:absolute;
	top: 30px;
	left:300px;
	z-index:99;
}
.banner { position:relative; }
#banner {
	width: 100%;
	height: auto;
	position:relative;
	background-size: cover;
    background-image: url(../images/top-banner.jpg);
	background-position: center center;
}
#series {
	position: absolute;
	right: 80px;
	top: 20px;
	width: 10%;
	text-align: right;
	z-index: 100;
}
#series img { float: right; }
#lang { display: block; position: absolute; top: 30px; right: 40px; } 
#lang a { text-align: right; font-size: 1em; font-weight: bold; border-radius: 5px; padding: 5px 10px; background-color: rgba(255,255,255,0.6); border-radius: 3px; color: #2b6ea8;}
#lang:hover, #lang:active, #lang:visited, #lang:focus {color: #2b6ea8; display: block; }
#actBtn {
	position: absolute;
	right: 0px;
	top: 35%;
	width: 25%;
	text-align: right;
	z-index: 100;
}
#actBtn img { float: right; }
.container.wide {
    margin: 0 !important;
    padding: 0 0 2em 0 !important;
    width: 100%;
}
header {
	/* background: url('../images/header.jpg'); */
	background-size: 100% 100%;
	position: relative;
}
footer {
	font-size: 13px;
	text-align: center; 
	padding: 15px;
	margin-top: 30px;
}
section#about .nav-container,
section#apply .nav-container {
	background: url('../images/subpage_pic2.png') 0px 40px no-repeat; 
	padding-left: 160px;
	min-height: 200px;
}

#about {}
.about-bg { background: url('../images/bg_about.jpg') 0px 0px no-repeat; background-size: cover; }

.btn {
	padding: 10px 20px;
	color: white;
	background-color: #7ea84c;
	min-width: 200px;
	transition: background-color 0.3s ease;
	border-radius: 2px;
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 0.5em;
}
.btn:hover,
.btn:active,
.btn:focus {
	background-color: #598426;
	color: #e7f78d;
}

.timetable tr { border-bottom: solid 1px #acbca7; line-height: 2.2em; }
.timetable td { vertical-align:text-top;}
.nav-container {
	padding-right: 15px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
	max-width: 1110px;
	width: 100%;
}
.navbar { margin: 0; border-radius: 0;}
.navbar-collapse {
	/* padding-right: 0; */
}
.navbar-inverse {
    background-color: #7ea84c;
	border: none;
	text-align: left;
	font-size: 1em;
}

nav.eng {
	font-size: .9em;
}

.navbar-inverse .navbar-brand {
    color: #e7f78d;
    font-weight: bold;
	font-size: 1.1em;
	margin-right: 30px;
}

.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover {
    /*color: #fff;*/
    color: #f2f5de;
    background-color: transparent;
}

.navbar-inverse .navbar-text {
    color: white;
    /*color: #00BDFF;*/
}

.navbar-nav > li {
	margin: 0px 10px;
}

.navbar-nav > li.eng {
	margin: 0px 5px; letter-spacing: 0em; font-size: 1.1em; height: 45px;
}

.navbar-inverse .navbar-nav > li > a {
    color: white;
    font-weight: bold;
	transition: background-color 0.3s ease; 
	min-width: 145px;
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover {
    color: #e7f78d;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: #7EA84C;
    background-color: #ffffff;
}

.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:focus,
.navbar-inverse .navbar-nav > .disabled > a:hover {
    opacity: 0.5;]
	pointer-events: none;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    /*border-color: #101010;*/
    border-color: white;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: transparent;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
    color: #0065FF;
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
    background-color: transparent;
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
    background-color: #2ec7cc;
}

.navbar-nav > li {
    display: inline-block;
}

.navbar-nav {
    text-align: center;
}



@media only screen and (min-width: 992px) {
    .navbar-brand {
        display: none;
    }
	
}


.main { width: inherit; height: inherit; background: #c9e7ff; }

/* Candidate */
ul.list-candidate { list-style: none; margin:0 auto; padding: 0; text-align: center; line-height: 1em; font-size: 0; width: 1110px; }
ul.list-candidate li { display: block; float: left; background: #574830; margin: 1px; font-size: 15px; }
ul.list-candidate li a { position: relative; display: block; width: 220px; height: 220px; overflow: hidden; color: #FFF; }
ul.list-candidate li a span { }
ul.list-candidate li a img { transition: opacity 0.3s ease; display: block; height: inherit; width: inherit; opacity: 1; }
ul.list-candidate li a:hover img { opacity: 0.4; }
ul.list-candidate li a:hover { color: #FFFFFF; }
ul.list-candidate li a:hover span.name { top: 100px; }
ul.list-candidate li span.name { font-size: 1.8em; line-height: 1em; font-weight: normal; display: block; width: inherit; position: absolute; z-index: 10; text-align: center; top: 250px; transition: top 0.3s ease; margin-top: -0.5em; padding: 0 10px; }
ul.list-candidate li span.instrument { position: relative; font-size: .6em; display: block; font-weight: bold; }

/*.icon-leaf { text-align: left; color: #ed6820; background: url('../images/icon_leave.svg') left center no-repeat; padding-left: 28px; background-size: 1em; } */
.repsonsive-img { width: 100%; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
h2.float-head { position: absolute; z-index: 10; left: 5%; top: 2%; }
h2 a { color: #e12f92; }
.small { font-size: 1.1em; }
.leftTop { position: absolute; left: 5%; top: 2%; }
.leftBottom { position: absolute; left: 5%; bottom: -10%; color: #e12f92; font-weight: bold; display: none; }
.leftBottom { background-color: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 5px; }
.leftBottom a { color: #e12f92; }
.clip { 
clip-path: url("#clip");
-webkit-clip-path: url("#clip");
clip-path: polygon(0% 0%, 100%  0%, 100% 90%, 0% 100%); 
-webkit-clip-path: polygon(0% 0%, 100%  0%, 100% 90%, 0% 100%); 
}
.clip.mobile { display: none;}

#candidate { background-color: #e3f8e9; }
.candidate-banner img { width: 100%; height: auto; }
.candidate-banner { position: relative; text-align: center; max-width: 1500px; margin: 0 auto; }

.candidate-media { position: absolute; top: 150px; right: 70px; width: 15%; display: table; z-index: 10; }
.candidate-media .btn { background-color: ##16a3a2; vertical-align: middle; margin: .5em 0; }
.candidate-media .btn:hover, .candidate-media .btn:focus { background-color: #268382; color: #e7f78d; vertical-align: middle; }

.candidate-info { color: #7f6c4e; overflow: hidden; height: 100%; width: 25%; display: table; position: absolute; top: 0; left: 32%; z-index: 10; }
.group { display: table-cell; vertical-align: middle; }
.group-btn { vertical-align: middle; }
.candidate-info .name { font-weight: normal; font-size: 3.1em; line-height: 1.2em; text-align: center; transform: skew(-10deg);  }
.candidate-info.dark { color: #a95f38; }
.candidate-info .instrument { font-weight: bold; font-size: 1.5em; line-height: 2em; text-align: center; transform: skew(-10deg); }

.candidate-profile { background: url('../images/bg_pattern.png') top center no-repeat; margin-top: -5em; padding-top: 5em; }
.candidate-album { padding-top: 2em; max-width: 1500px; margin: 0 auto; }
ul.list-photo { list-style: none; margin: 0; padding: 0; width: 100%; /* max-width: 930px;*/ margin: 0 auto; }
ul.list-photo li { float: left; padding-left: 5px; padding-top: 5px; width: 33.3%; }
ul.list-photo li a { display: block; }
ul.list-photo li a:hover img { transform: scale(1);}
ul.list-photo li a img { width: 100%; height: auto; transition: all .2s ease;; z-index: 10; transform: scale(0.97); }
ul.list-photo li p {text-align: center;}
ul.list-photo.col2 li { width: 50%; }

.subhead { color: ##16a3a2; text-align: center; }
.leave { background: url('../images/icon_leave.svg') no-repeat left center; padding-left: 40px; background-size: 30px 30px; } 
.responsive-table { width: 75%; margin: 0 auto; max-width: 1170px; line-height: 1.5em; }
.responsive-table div.clabel { float: left; clear: both; display: block; text-align: left; width: 30%; margin-bottom: 0.8em; }
.responsive-table div.clabel span { background-color: #ffffff; font-size: 16px; font-weight: bold; display: inline-block; padding: 2px 10px; color: #16a3a2; font-style: italic; padding-right: 10%; white-space: default; }
.responsive-table div.ctext { float: left; display: block; text-align: left; color: ##415f57; width: 70%; padding: 2px 10px; padding-left: 2em; margin-bottom: 0.8em; }

.pre-candidate-album { }
.pre-cand-name { font-weight: bold; margin-bottom: 0em; color: #1464b9; font-size: 1.1em; margin-top: 0.3em;}
.pre-cand-caption { text-align:justify; margin-top: 0em; padding: 0 10px; font-size: 15px; line-height: 1.6;}
.pre-cand-captioneng { text-align:justify; margin-top: 0em; font-size: 13px; line-height: 1.6;}

/* English Style */
.eng ul.list-candidate li span.name { font-size: 1.2em; line-height: 1.3em; }
.eng .candidate-info { font-size: 0.7em; left: 34%; }
.eng .candidate-info .instrument { font-size: 2em; }
.eng .responsive-table { font-size: 0.95em; }
.eng .container { font-size: 0.95em; }


/*----------------Sharing Function Block-----------------*/
#shareBlock{
	 position:fixed;
	 top:50%;
	 left: 0;
	 width: 40px;
	 height:auto;
	 z-index: 1300;
	 margin-top: -60px;
 }
 #shareBlock a { cursor: pointer; }
 #shadowBlock{ display: none; }
 .shareIcon{
	 float: left;
	 width: 40px;
	 height: 40px;
	 background:#fff;
	 text-align:center;
 }
 .shareIcon.dark{ background: #9ad250; }
 
/* CUSTOM RESPONSIVE STYLES */
@media screen and (max-width:  1200px) {
	.navbar-nav > li {margin: 15px 0px;}
	/* #actBtn {top: 160px; width: 25%;} */
	.nav-container {
		 padding-left: 40px;
		 padding-right: 0px;
    }
	ul.list-candidate { width: 888px; }
}

@media screen and (max-width:  999px) {
	.nav-container { width: 100%; }
}

@media screen and (max-width:  999px) {
	/* #actBtn {top: 220px; width: 25%;} */
	.back-to-top { bottom: 55px; }
	/*----------------Sharing Function Block-----------------*/
	.shareIcon { width:32%; height: 40px; margin: 0; }
	.share { height:inherit; }
	#shareBlock{ bottom:0; left:2%; top:auto; width: 100%; }
	 #shadowBlock{
		 position:absolute;
		 top: -30px;
		 display: block;
		 width: 32%; 
		 height: 40px; 
		/* background: url(../img/diviShd_Up.png) no-repeat; */
		 background-position: center top;
		 background-size: cover;
		 pointer-events: none;
	 }
	 /* #actBtn {top: 140px; width: 25%;} */
	 .nav-container {
		 padding-left: 0px;
		 padding-right: 0px;
    }
	
	.responsive-table { width: 80%;}
	.candidate-media {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0 auto;
    height: auto !important;
	}
	.candidate-info, .eng .candidate-info {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    padding-top: 2em;
    height: auto !important;
    font-size: 0.8em;
    z-index: 0;
	}
	.candidate-profile { background: none}
	.candidate-banner { background: url('../images/bg_pattern.png') bottom center no-repeat;}

}

@media (max-width: 992px) {
	ul.list-candidate { width: 666px; }
		.candidate-info .name,
	.candidate-info .instrument { color: #16a3a2; }
}

@media screen and (max-width : 800px) {
	 .version{ float: none; width:auto; }
	 footer { margin-bottom: 30px; margin-top: 0px; }
	 .back-to-top { bottom: 55px; }
	 /* #actBtn {top: 100px; width: 25%;} */
	#banner {
		/* height: 250px; */
	}
	.clip.desktop { display: block;}
	.clip.mobile { display: none;}
	.responsive-table { width: 100%;}
	.candidate-media {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0 auto;
    height: auto !important;
	}
	ul.list-precand-photo { width: 100%; }
}
@media screen and (max-width: 768px) {
	#rthklogo {width: 70px; top: 20px; left: 10px;}
	#r4logo {width: 40px; top: 10px; left: 100px;}
	#ymmlogo {width: 60px; top: 15px; left:160px;}
		
	#lang { top: 20px; right: 10px; }
	/* #actBtn {top: 100px; width: 25%;} */
	
    section#about .container,
	section#apply .container {
		padding: 0em 2em;		
		background: none;
    }
		
	.navbar-inverse {
		text-align: left;
		margin: 0px;
	}
	
	.navbar-nav > li {
		display: block;
		/* width: 250px; */
		height: 35px;
		padding: 10px 20px;
	}
	
	.navbar-nav > li a {
		display: table-row;
		color: #ffffff;
		opacity: 1;
		margin: 0px;
		height: auto;
	}
	
	#banner {
		/* height: 150px; */
	}

	.navbar-inverse .navbar-nav > .active > a,
	.navbar-inverse .navbar-nav > .active > a:focus,
	.navbar-inverse .navbar-nav > .active > a:hover {
	color: #ffffff;
	background-color: transparent;
	}

	.navbar-nav > li#about.active { 
    background-size: contain;
    border-left: 5px solid #e7f78d;
	}

	.navbar-nav > li#apply.active { 
    background-size: contain;
    border-left: 5px solid #e7f78d;
	}
	
	.navbar-nav > li#candidate.active { 
    background-size: contain;
    border-left: 5px solid #e7f78d;
	}


	.navbar-nav > li#schedule.active { 
    background-size: contain;
    border-left: 5px solid #e7f78d;
	}

	.navbar-nav > li#concert.active { 
    background-size: contain;
    border-left: 5px solid #e7f78d;
	}

	ul.list-candidate { width: 444px; }
	.candidate-info, .eng .candidate-info {
		position: relative;
		width: 100%;
		left: 0;
		top: 0;
		padding-top: 2em;
		height: auto !important;
		font-size: 0.8em;
		z-index: 0;
		
	}
	.candidate-media {
		position: relative;
		width: 100%;
		left: 0;
		top: 0;
		margin: 0 auto;
		height: auto !important;
	}
	.candidate-profile { background: none}
	.candidate-banner { background: url('../images/bg_pattern.png') bottom center no-repeat;}
	
	ul.list-precand-photo { width: 100%; }
}

@media screen and (max-width: 767px) {
	#banner {
		/* height: 250px; */
	}

	.nav-container {
		 width: 100%;
		 padding-left: 0px;
		 padding-right: 0px;
    }
	.responsive-table div.clabel, .responsive-table div.ctext { width: 100%; float: none; }
}

@media screen and (max-width: 660px) {
	/* #actBtn {top: 85px; width: 25%;} */
	#banner {
		/* height: 200px; */
	}
	.nav-container {
     width: 100%;
	 padding-left: 0px;
	 padding-right: 0px;
    }
	.clip.desktop { display: none;}
	.clip.mobile { display: block;}
	ul.list-photo { width: 100%; }
	ul.list-photo li, ul.list-photo.col2 li { width: 100%; float: none; padding: 5px 5px 0 5px; margin: 0 !important; }

}

@media screen and (max-width: 590px) {
	/* #actBtn {top: 80px; width: 25%;} */
	.nav-container {
     width: 100%;
	 padding-left: 0px;
	 padding-right: 0px;
    }
	
	#lang { top: 20px; right: 10px; }
	#series { right: 100px; top: 20px; width: 13%;}
}

@media screen and (max-width: 500px) {
	/* #actBtn {top: 60px; width: 25%;} */
	#lang { top: 10px; right: 10px; }
	#series { right: 70px; top: 10px; width: 13%;}
	#banner {
		/* height: 150px; */
	}

	.nav-container {
		 width: 100%;
		 padding-left: 0px;
		 padding-right:0px;
    }
}

@media (max-width: 480px) {
	ul.list-candidate { width: 222px; }
}
@media (max-width: 400px) {
	.eng .candidate-info { font-size: .7em; }
	ul.list-photo { width: 100%; }
	ul.list-photo li, ul.list-photo.col2 li { width: 100%; float: none; padding: 5px 5px 0 5px; margin: 0 !important; }
}


.remarks {font-size: .9em; color: #83776c; font-style: italic; line-height: normal; padding-top: 10px;}