/*******import font family*******/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Kalam');
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush');

/*chinese fonts for content*/
/*@import url('https://fonts.googleapis.com/earlyaccess/notosanssc.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');*/

/*******Chinese TC font*******/
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
* For Lincense doc http://www.whs.gov.hk/libs/fonts/NotoSansTC/OFL.txt (SIL Open Font License, 1.1)
*/
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 100;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Thin.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 300;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Light.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 500;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 700;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 900;
	src: url('../libs/fonts/NotoSansTC/NotoSansTC-Black.woff') format('woff');
}

/*******Chinese SC font*******/
/*
* Noto Sans SC (Chinese Simplified) http://www.google.com/fonts/earlyaccess
* For Lincense doc http://www.whs.gov.hk/libs/fonts/NotoSansSC/OFL.txt (SIL Open Font License, 1.1)
*/
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 100;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Thin.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 300;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Light.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 400;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 500;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 700;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans SC';
	font-style: normal;
	font-weight: 900;
	src: url('../libs/fonts/NotoSansSC/NotoSansSC-Black.woff') format('woff');
}


/*@font-face{
	font-family: 'Noto Sans TC','Noto Sans SC';
	src: url('../libs/fonts/Hei/cwTeXHei-zhonly.woff2');
	}*/

/*
*	File flow
*
*	1. Header css
*		a. content style
*		b. language area
*		c. search area
*		d. navbar @PC View
*		e. header navbar @mobile View
*
*	2. Footer css
*		a. content style
*		b. sticky footer
*
*	3. Global css
*		a. font classes
*		b. breadcrumb
*		c. txt tag (h1h2h3h4)
*		d. some common style (eg. read more / img-thumnails / memo)
*		e. submenu
*		f. nav-tabs (@partners.php and hk-working-holiday-guide.php)
*
*	4. Print css
*/

/*
*	1. Header CSS Style
*	START
*	last edit: 2016/08/23
*/

.header {
	color: white;
}

.navbar{
	border-radius: 0px;
	border: 0px;
	background-color: white;
	margin-bottom: 0;
}

nav.toolbar > .container{
	padding-left: 15px;
	padding-right: 15px; 
}

@media (min-width: 991px){
	nav.toolbar > .container{
		padding: 0px;
	}
}

.header_menu{
	width: 28%;
	background-color: rgba(255,255,255,.75);
	padding: 5px;
	float: right;
	align-items: center;
	display: block;
}

.header_menu ul{
	align-items: center;
	display: flex;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.header_menu{
		width: auto;
		display: flex;
	}
}

/******* HEADER CONTENT STYLE *******/
#logo {
	background-color: transparent;
}
#logo > a > img {
	color: white;
	width: 100%;
}

.active-font-size,.active-font-size:hover{
	text-decoration: underline !important;
}
.sm-font-size {
	font-size: 1em;
}
.md-font-size {
	font-size: 1.5em;
}
.lg-font-size {
	font-size: 1.75em;
}

ul.lang a{
	/*font-size: 1.4em;*/
}

/*******border-right for each language*******/
header .lang li:first-child:after{
	background: none;
}

header .lang li:after{
	content: "";
	background: #333;
	position: absolute;
	bottom: 25%;
	left: 0;
	height: 50%;
	width: 1px;
}

/* GOVHK SEARCH */ 
input.input-sm.form-control.hkSearchInput,span#btn_search,#btn_search_mobile {
	border-radius: 0px;
	border: none;
}

input.input-sm.form-control.hkSearchInput {
	border-right: 0px;
}

span#btn_search,#btn_search_mobile {
	cursor: pointer;
	border-left: 0px;
}

#btn_search > button,#btn_search_mobile > button{
	border: 0;
	background-color: transparent;
	padding: 5px 24px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MHB4Ig0KCSBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IuWcluWxpF8yIj4NCgk8Zz4NCgkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC44ODksMS4wNjJjMTIuMjQ5LDAuMDQ1LDIxLjU3NiwxMC4zMTMsMjAuNDk2LDIxLjk3NA0KCQkJYy0wLjI4NSwzLjEwMi0xLjE2Niw1Ljk4Ni0yLjgyLDguNjE3Yy0wLjQyMSwwLjY2OC0wLjM1NiwxLjA1NSwwLjIwNywxLjYwN2MyLjk3MywyLjkxNiw1LjkwNiw1Ljg3OSw4Ljg1MSw4LjgzMg0KCQkJYzEuMTU1LDEuMTU4LDEuNTI5LDIuNTcyLDEuMDMxLDQuMTAyYy0wLjQ5OSwxLjUyOS0xLjY1LDIuNDU3LTMuMjYsMi43MDFjLTEuNDcsMC4yMjUtMi42MzMtMC40MjQtMy42NDEtMS40MzgNCgkJCWMtMi43OTUtMi43OTctNS42MjItNS41NjQtOC4zNzItOC40MDRjLTAuNzE5LTAuNzQ2LTEuMjAzLTAuODIyLTIuMTI1LTAuMjg1QzE5LjA4MSw0NS44ODUsMy4xMDEsMzgsMS4zMDMsMjQuMDIxDQoJCQlDLTAuMDk2LDEzLjE1OCw3LjEyNywzLjMyNSwxNy45NjksMS4zNzFDMTkuMDkyLDEuMTY4LDIwLjI0OCwxLjEyNywyMC44ODksMS4wNjJ6IE01Ljk3LDIxLjI2MQ0KCQkJYy0wLjAxMyw4LjQzOCw2LjgyMSwxNS4yODIsMTUuMjk5LDE1LjMxN2M4LjQ0LDAuMDM3LDE1LjMzNy02Ljc4NSwxNS40MDQtMTUuMjM1YzAuMDY3LTguNDE2LTYuOTQxLTE1LjQ0Ny0xNS4zODItMTUuNDI5DQoJCQlDMTIuODc1LDUuOTMxLDUuOTgzLDEyLjgzNCw1Ljk3LDIxLjI2MXoiLz4NCgk8L2c+DQo8L2c+DQo8ZyBpZD0i5ZyW5bGkXzMiIGRpc3BsYXk9Im5vbmUiPg0KCTxnIGRpc3BsYXk9ImlubGluZSI+DQoJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjOTE5NDlCIiBkPSJNNDYuMDM1LDQ5LjQ2Yy0wLjY1MSwwLTEuMzA0LDAtMS45NTYsMA0KCQkJYzAuMDIzLTAuMDIyLDAuMDg2LTAuMDI5LDAuMDM5LTAuMDhjLTAuMDI1LTAuMDI4LTAuMDYyLTAuMDU2LTAuMDk4LTAuMDYzYy0wLjktMC4yMTgtMS42MTItMC43MzQtMi4yNjUtMS4zNzMNCgkJCWMtMi4wNzctMi4wMzQtNC4xNjktNC4wNTUtNi4yNTUtNi4wNzljLTIuMDQ3LTEuOTg3LTQuMDk3LTMuOTczLTYuMTM2LTUuOTY4Yy0wLjE5OS0wLjE5NS0wLjMzOS0wLjIzOS0wLjU4NS0wLjA4Mw0KCQkJYy0wLjM1NCwwLjIyNS0wLjcyOSwwLjQxOC0xLjEwOSwwLjU5N2MtMy43OTgsMS43OTUtNy43NzQsMi4zMjktMTEuODkzLDEuNTNjLTMuODAyLTAuNzM3LTcuMDkxLTIuNTAyLTkuODAzLTUuMjc3DQoJCQljLTIuOTYtMy4wMy00LjY4OS02LjY2Ny01LjIwMi0xMC44NzZjLTAuMDEtMC4wODQsMC4wNDMtMC4yNDYtMC4xNTEtMC4yMTFjMC0xLjM1OSwwLTIuNzE4LDAtNC4wNzcNCgkJCWMwLjE4NywwLjAxOSwwLjE0LTAuMTM5LDAuMTQ4LTAuMjI0YzAuMDY0LTAuNjQ4LDAuMTkzLTEuMjg0LDAuMzI4LTEuOTE5QzIuNzIsNy43MDcsOS4zNTYsMS43MTMsMTcuMTU1LDAuODU1DQoJCQljMC4wOTQtMC4wMSwwLjI3NCwwLjA2NiwwLjI2My0wLjE1MWMxLjM1OSwwLDIuNzE4LDAsNC4wNzcsMGMtMC4wMTcsMC4wMTktMC4wMzUsMC4wMzctMC4wNDksMC4wNTkNCgkJCWMtMC4wMDIsMC4wMDIsMC4wMTUsMC4wMjQsMC4wMjYsMC4wMjdjMC4wODksMC4wMjYsMC4xNzgsMC4wNiwwLjI2OSwwLjA3YzEuMzkyLDAuMTU4LDIuNzQ4LDAuNDc2LDQuMDYzLDAuOTU3DQoJCQljNC42MjcsMS42OTQsOC4wODQsNC43MzQsMTAuMzUsOS4xMDNjMS43MzksMy4zNTUsMi4zNDksNi45MzcsMS45NDgsMTAuNjg1Yy0wLjI4LDIuNjE5LTEuMDg3LDUuMDc5LTIuNDI4LDcuMzUxDQoJCQljLTAuMTgxLDAuMzA1LTAuMTg1LDAuNDc5LDAuMDksMC43NDNjNC4wNDEsMy44OTIsOC4wNjYsNy44MDIsMTIuMTA0LDExLjY5OGMwLjcwOCwwLjY4NCwxLjI3OCwxLjQzNywxLjUyLDIuNDA3DQoJCQljMC4wMTgsMC4wNywwLjAxNiwwLjE5NywwLjE1NCwwLjExMWMwLDAuNjUyLDAsMS4zMDUsMCwxLjk1N2MtMC4wMS0wLjAwOS0wLjAyLTAuMDE5LTAuMDMxLTAuMDI1DQoJCQljLTAuMDA5LTAuMDA1LTAuMDI3LTAuMDA4LTAuMDI4LTAuMDA2Yy0wLjAzLDAuMDYtMC4wNjksMC4xMTctMC4wODcsMC4xODFjLTAuNDY0LDEuNjkxLTEuNTIxLDIuOC0zLjIxNiwzLjI4Nw0KCQkJQzQ2LjExMSw0OS4zMjgsNDUuOTgzLDQ5LjMxNiw0Ni4wMzUsNDkuNDZ6IE0xOS40NTcsMzAuNzQ1YzYuMjIzLTAuMDUzLDExLjI0OC01LjA4OCwxMS4yMjYtMTEuMjc1DQoJCQlDMzAuNjYsMTMuMTMyLDI1LjQ3Miw4LjIxNCwxOS40MDcsOC4yNThDMTMuMTY1LDguMzAzLDguMTQzLDEzLjM4Myw4LjE4NiwxOS41MjFDOC4yMywyNS43MTUsMTMuMzQzLDMwLjgwNywxOS40NTcsMzAuNzQ1eiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K);
	background-size: contain;
	background-position: center;

}


.input-group-addon
{
	padding: 0px 15px;
}
/* END OF GOVHK SEARCH */ 
/* END OF HEADER CONTENT STYLE */


/* NAVBAR STYLE */
#main_menu{
	padding: 0px 15px;
}

#main_menu>ul.nav.navbar-nav{
	overflow-y: scroll;
	max-height: 60vh;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px){
	#main_menu>ul.nav.navbar-nav{
		height: 370px;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px){
	#main_menu>ul.nav.navbar-nav{
		overflow: hidden;
		height: auto;
	}
}

/*******font @ header navbar*******/
.navbar-default .navbar-nav>li>a{
	color: black !important;
}

.navbar-default .navbar-nav>li>a#overseas_desktop_menu_en{
	width: 178px;
}

.affix{
	top:0;
	border-radius: 0px;
	width: 100%;
	z-index: 99 !important;
}

.affix + div.nav_wrapper{
	/*navbar height*/
	/*xs version*/
	height: 54px;
}

@media (min-width: 768px){
	.affix + div.nav_wrapper{
		/*navbar height*/
		/*sm version*/
		height: 50px;
	}
}

@media (min-width: 992px){
	.affix + div.nav_wrapper{
		/*navbar height*/
		/*md version*/
		height: 72px;
	}
}

@media (min-width: 1200px){
	.affix + div.nav_wrapper{
		/*navbar height*/
		/*md version*/
		height: 52px;
	}
}

.nav > li > a {
	color: #333333;
	padding: 16px 14px;
}

.header .nav > li > a {
	color: #333;
	padding: 10px;
}

.header_menu .nav > li > a:hover,
.header_menu .nav > li > a:focus {
	color: #333333 !important;
	background-color: rgba(255,255,255,.8) !important;
	transition: color .5s,background-color .5s;
}

.nav > li > a:hover,
.nav > li > a:focus {
	color: #333333 !important;
	background-color: #e5e5e5 !important;
	transition: color .5s,background-color .5s;
}

#desktopsearch{
	max-width: 200px;
}

/*******mobile hamburger*******/
/*override navbar color*/
.navbar-default .navbar-default:focus,.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
	background-color: transparent;
}

button.navbar-toggle{
	border: 0px;
}

.navbar-header{
	display: flex;
}

button.navbar-toggle{
	padding: 16px;
	padding-right: 20px;
	margin: 0;
	margin-left: auto;
	vertical-align: middle;
}

button.navbar-toggle span.hamburger span{
	border-bottom: 2px solid black;
	width: 16px;
	display: block;
	position: relative;
	transform-origin: left center;
	transition: transform .2s ease-in-out,border .1s ease;
}

button.navbar-toggle span.hamburger span:nth-child(1){
	transform: rotate(45deg) translateY(-7px);
}

button.navbar-toggle span.hamburger span:nth-child(2){
	border: none;
}

button.navbar-toggle span.hamburger span:nth-child(3){
	transform: rotate(-45deg) translateY(6px);
}


button.navbar-toggle.collapsed span.hamburger span{
	border-bottom: 2px solid black;
	width: 16px;
	display: block;
	position: relative;
	transform: rotate(0);
}

button.navbar-toggle.collapsed span.hamburger span:nth-child(1){
	top: 0;
}

button.navbar-toggle.collapsed span.hamburger span:nth-child(2){
	top: 3px;
}

button.navbar-toggle.collapsed span.hamburger span:nth-child(3){
	top: 6px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

	/*******keep hamburger*******/
	#main_menu{
		padding: 0;
	}

	.navbar-toggle{
		display: block;
	}

	.toolbar .navbar-header{
		float: none;
	}

	.toolbar .navbar-collapse.collapse{
		display: none !important;
	}

	.toolbar .navbar-collapse.collapse.in{
		display: block !important;
	}

	.toolbar .navbar-nav,.toolbar  .navbar-nav>li{
		float: none;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#main_menu > ul.nav.navbar-nav{
		width: 100%;
		vertical-align: middle;
		padding: 0;
		margin: 0;
		list-style: none;
		-ms-box-orient: horizontal;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -moz-flex;
		display: -webkit-flex;
		display: flex;
	}

	#main_menu > ul.nav.navbar-nav>li{
		text-align: center;
		align-items: stretch !important;
	}

	html:lang(tc) #main_menu > ul.nav.navbar-nav>li,
	html:lang(sc) #main_menu > ul.nav.navbar-nav>li{
		margin: 0px .20em; /* default: margin: 0px .75em; */
	}

	html:lang(en) #main_menu > ul.nav.navbar-nav>li{
		margin: 0px 0.5em; /* default: margin: 0px .75em; */
	}

	/*bootstrap navbar default*/
	/*******change hamburger to desktop navbar*******/
	.toolbar .navbar-toggle{
		display: none !important;
	}

	.toolbar .navbar-collapse.collapse{
		display: block !important;
	}

	.toolbar .navbar-nav,.toolbar  .navbar-nav>li{
		float: left;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	html:lang(tc) #main_menu > ul.nav.navbar-nav>li,
	html:lang(sc) #main_menu > ul.nav.navbar-nav>li{
		margin: 0px 1.0em; /* default: margin: 0px 1.5em; */
	}
	html:lang(en) #main_menu > ul.nav.navbar-nav>li{
		margin: 0px 0.5em; /* default: margin: 0px 1.5em; */
	}
}
/* END OF NAVBAR STYLE */

/*
*	2. Footer CSS Style
*	START
*	last edit: 2016/08/23
*/

.footer {
	background-color: #333333;
	color: white;
}

.footer .navbar-nav {
	margin: 0; 
}

.footer .nav > li > a{
	color: white !important;
}

.footer  .row  div{
	padding:0;
}

.footerUI > li:after{
	width: 0px;
}

.footerUI > li > a:hover,
.footerUI > li > a:focus {
	color: black !important;
	background-color: #e5e5e5 !important;
	transition: color .5s,background-color .5s;
	text-decoration: underline;
}

.footerIcon{
	margin-top: 15px;
}

.footerLogo {
	text-decoration: none;
}

/*******STICKY FOOTER*******/
#content{
	min-height:  82vh !important;
	margin-bottom: -90px;
}

#content:after{
	content: "";
	display: block;
}

footer{
	margin-top: 1em;
}

footer, #content:after{
	height: 90px;
}
/*******END OF STICKY FOOTER*******/

/******* Small devices (tablets, 768px and up) *******/
@media (min-width: 768px) {
	.footer .navbar-nav>li{
		float: none !important;
	}
}

/******* Medium devices (desktops, 992px and up) *******/
@media (min-width: 992px) {
	.footer .navbar-nav>li{
		float: left !important;
	}

	.footer  .row  div{
		padding: 0px 15px;
	}

	/* FOOTER SEPARATOR */
	.footerUI > li:after {
		content: "";
		background: white;
		position: absolute;
		bottom: 25%;
		left: 0;
		height: 50%;
		width: 1px;
	}

	.footerUI > li:first-child:after {
		background: none;
	}
	/* END OF FOOTER SEPARATOR */
}

/******* Large devices (large desktops, 1200px and up) *******/
@media (min-width: 1200px) {
}

/*******Scroll Top button*******/
footer .scrolltop{
	height: 2em;
	width: 2em;
	position: fixed;
	background-color: white;
	bottom: .5em;
	right: .5em;
	border: 1px solid rgba(0,0,0,.5);
	border-radius: 2.5em;
	box-shadow: 1px 1px .25em rgba(0,0,0,.25);
	cursor: pointer;
	z-index: 50;
	opacity: .75;
	display: none;
}

footer .scrolltop:hover,
footer .scrolltop:focus{
	opacity: 1;
}

footer .scrolltop >span{
	display: block;
	width: .8em;
	height: .8em;
	border-right: 0.2em solid #333;
	border-top: 0.2em solid #333;
	transform: translate(.5em,.7em) rotate(-45deg);
}

/******* Small devices (tablets, 768px and up) *******/
@media (min-width: 768px) {
	footer .scrolltop{
		/*750px is the default width of the container*/
		right: calc(((100% - 750px) / 2) + .5em);
	}
}

/******* Medium devices (desktops, 992px and up) *******/
@media (min-width: 992px) {
	footer .scrolltop{
		/*970px is the default width of the container*/
		right: calc(((100% - 970px) / 2) + .5em);
	}
}

/******* Large devices (large desktops, 1200px and up) *******/
@media (min-width: 1200px) {
	footer .scrolltop{
		/*1170px is the default width of the container*/
		right: calc(((100% - 1170px) / 2) + .5em);
	}
}



/*
*	3. Global CSS Style for all web pages
*	START
*	last edit:2016/08/23
*/
*{
	font-family: 'Noto Sans TC','Noto Sans SC','Lato', sans-serif !important;
	font-weight: 300;
	outline: 0px !important;
	word-wrap: break-word;
	line-height: 1.5em;
}

body{
	font-size: 150%;
	color: #333333;
	background-color: white; 
}

html:lang(en) body{
	background-color: white;
}

#content{
	background-color: white;
}

/*******FONT CLASSES*******/
.nunito{
	font-family: 'Nunito' !important;
}

.kalam{
	font-family: 'Kalam' !important;
}

.CaveatBrush{
	font-family: 'Caveat Brush' !important;
}
/*******END OF FONT CLASSES*******/


/*******BREADCRUMB*******/
/*******Using bootstrap default icon font*******/
.glyphicon{
	font-family: 'Glyphicons Halflings' !important;
}

.glyphicon-home{
	color: #01639B !important;
}

ol.breadcrumb li{
	font-family: 'Noto Sans TC','Noto Sans SC','Lato', sans-serif !important;
}

ol.breadcrumb{
	padding-left: 0;
	padding-right: 0;
	margin-top: 1vh;
	background-color:transparent;
}

ol.breadcrumb li.active {
	color: #01639B;
}

ol.breadcrumb li a{
	color:black;
}

/******* Small devices (tablets, 768px and up) *******/
@media (min-width: 768px){
}

/******* Medium devices (desktops, 992px and up) *******/
@media (min-width: 992px) {
	ol.breadcrumb li{
		display: inline-block;
	}

	.breadcrumb>li+li:before {
		padding: 0 5px;
		color: #ccc;
		content: "/\00a0";
	}
}

/******* Large devices (large desktops, 1200px and up) *******/
@media (min-width: 1200px) {
}
/*******END OF BREADCRUMB*******/


/*******OVERRIDE SIZE OF TXT TAG*******/
h1{
	font-size: 3em;
}

h2{
	font-size: 2.5em;
}

h3{
	font-size: 2em;
}

h3.title{
	color: #A62B60;
	font-weight: bold;
}

h4{
	font-size: 1.5em;
}

h5{
	font-size: 1.2em;
}
/*******END OF OVERRIDE SIZE OF TXT TAG*******/

p,p + p,
article,article + article{
	margin-bottom: 1.5em;
}


/*******COMMON STYLE*******/
.nopadding,.col-xs-nopadding,.col-sm-nopadding {
	padding: 0 !important;
	margin: 0 !important;
}


/******* Small devices (tablets, 768px and up) *******/
@media (min-width: 768px) {
	.col-xs-nopadding{
		padding: 0px 15px !important;
		margin: initial !important;
	}
}

/******* Medium devices (desktops, 992px and up) *******/
@media (min-width: 992px) {
	.col-sm-nopadding{
		padding: 0px 15px !important;
		margin: initial !important;
	}
}

/******* Large devices (large desktops, 1200px and up) *******/
@media (min-width: 1200px) {
}

.subpagebanner{
	margin-left: -15px !important;
	margin-right: -15px !important;
	margin-bottom: .5em !important;
}

.subpagebanner > img{
	border: none;
}

@media (min-width: 768px) {
	.subpagebanner{
		margin-left: inherit !important;
		margin-right: inherit !important;
	}

	.subpagebanner > img{
		border: 1px solid #ddd;
	}
}


.squareitem{
	padding: 50% 0px !important;
}

#content ul.list-group>li:first-child{
	background-color: #009EB3;
	color: white;
}

/*override bootstrap list-item color*/
a.list-group-item, button.list-group-item,a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover{
	color: #333;
}

/******* remarks *******/
html:lang(en) .remarks{
	background-image: url('../res/img/reminder_en.svg');
	width: calc(300px / 3);
	height: calc(80px / 3);
	display: inline-block;
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

html:lang(tc) .remarks,
html:lang(sc) .remarks{
	background-image: url('../res/img/reminder_tc.svg');
	width: calc(300px / 3);
	height: calc(80px / 3);
	display: inline-block;
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	vertical-align: bottom;
}

/******* read more *******/
.readmore{
	background-color:#E20185;
	color:white !important;
	margin-top: 1em;
	padding:0 20px;
	display:inline-block;
	font-weight:bold;
}

/******* btn-backto *******/
.btn-backto,.btn-backto:hover,.btn-backto:focus{
	color: white;
	background-color: #E20185;
	border: none;
	white-space: normal;
}

.btn-backto:hover,.btn-backto:focus{
	box-shadow: inset 100px 100px 5px rgba(20%,20%,40%,0.1);
}

/*******memo style*******/
.memo{
	padding-top: 0px !important;
	max-width: 350px;
	margin: auto;
	font-size: .8em;
}

.memo *{
	line-height: 1.1em !important;
}

html:lang(tc) .memo *,
html:lang(sc) .memo *{
	line-height: 1.3em !important;
}

.memo ul{
	padding-left: 1.5em;
}

.memo.red{
	padding-top: 5.5% !important;
}

.memo > div{
	background-size: 100% 100%;
	padding: 50% 0px;
	height: 0;
	box-shadow: none;
	background-color: transparent;
	border: 0;
}

.memo.red > div{
	padding: 44.5% 0%;
}

.memo > div > .content{
	position: absolute;
	max-height: 75%;
}

.memo > div > .by{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 15px;
	padding-right: 45px;
	text-align: right;
}


.memo.yellow > div.tipsimg{
	background-image: url('../res/img/tips1.png');
}

.memo.green > div.tipsimg{
	background-image: url('../res/img/tips2.png');
}

.memo.red > div.tipsimg{
	background-image: url('../res/img/tips3.png');
}

.memo.blue > div.tipsimg{
	background-image: url('../res/img/tips4.png');
}

.memo.yellow > div > .content{
	top: calc(10% + 15px);
	left: 9%;
	width: 68%;
}

.memo.green > div > .content{
	top: calc(10% + 15px);
	left: 10%;
	width: 68%;
}

.memo.red > div > .content{
	top: calc(20% + 15px);
	left: 10%;
	width: 80%;
	max-height: 70%;
}

.memo.blue > div > .content{
	top: calc(30% + 15px);
	left: 10%;
	width: 80%;
	max-height: 55%;
}

.memo.yellow > div *,
.memo.blue > div *{
	font-family: 'Kalam','Noto Sans TC','Noto Sans SC' !important;
}

.memo.green > div *,
.memo.red > div *{
	font-family: 'Caveat Brush','Noto Sans TC','Noto Sans SC' !important;
}

/* Special (large screen mobile, 384px and up) */
@media (min-width: 384px) {
	.memo{
		font-size: 1.2em;
	}

	html:lang(en) .memo *
	{
		line-height: 1em !important;
	}

	html:lang(tc) .memo *,
	html:lang(sc) .memo *{
		line-height: 1.2em !important;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.memo{
		font-size: 1em;
	}

	html:lang(en) .memo *{
		line-height: 1.3em !important;
	}

	html:lang(tc) .memo *,
	html:lang(sc) .memo *{
		line-height: 1.3em !important;
	}

	.memo.yellow > div > .content{
		top: 10%;
	}

	.memo.green > div > .content{
		top: 10%;
	}

	.memo.red > div > .content{
		top: 20%;
	}

	.memo.blue > div > .content{
		top: 30%;
	}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px){
	.memo{
		max-width: none;
		font-size: .9em;
	}

	html:lang(en) .memo *{
		line-height: 1.1em !important;
	}

	html:lang(tc) .memo *,
	html:lang(sc) .memo *{
		line-height: 1.3em !important;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.memo{
		font-size: 1.1em;
	}

	html:lang(en) .memo *{
		line-height: 1.5em !important;
	}

	html:lang(tc) .memo *,
	html:lang(sc) .memo *{
		line-height: 1.5em !important;
	}
}

#useful_tips .col-lg-6.col-md-6 + .col-lg-6.col-md-6{
	padding-top: 15px !important;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#useful_tips .col-lg-6.col-md-6 + .col-lg-6.col-md-6{
		padding-top: 0px !important;
	}
}


/******* table middle *******/
.table td{
	vertical-align: middle !important;
}

/*******override bootstrap style*******/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
	background-color: #e5e5e5 ;
}

/******* override bootstrap img-thumbnail *******/
.img-thumbnail{
	border: 0px !important;
	border-radius: 0px !important;
}

.img-thumbnail >div{
	background-size: cover;
	background-position: center;
}

.well{
	margin-top: 1vh;
	border: 50px;
	padding: 0px;
	background-color: transparent;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.well > div,
.well > h5{
	margin: 0 -9px;
	padding: .25em 0;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.well{
		/*bootstrap default*/
		padding: 19px;
		padding-top: 0;
		padding-bottom: 0;
	}
}
/*******submenu class or style*******/
.selected{
	font-weight: bold;
	background-color: #f5f5f5;
}

.list-group-item{
	padding: 10px 10px;
	text-align: initial;
	border-left: 0px !important;
	border-right: 0px !important;
}

a.list-group-item.sub-item{
	border-radius: 0px;
}

.padding-control{
	padding-left: 0;
	padding-right: 0;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.padding-control{
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/*override bootstrap nav-tabs style @partners.php?location=? and hk-working-holiday-guide.php*/	
.scrollable_nav-tabs{
	overflow-x: scroll;
	overflow-y: hidden;
	border-bottom: none;
}

.nav-tabs{
	border-bottom: 0px;
	margin-top: 1em;
	padding-bottom: 1em;
	display: table;
}

.nav-tabs>li{
	float: none;
	display: table-cell;
	white-space: nowrap !important;
}

.nav-tabs > li > a,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus{
	padding: 5px 16px !important;
	margin: 0px 5.333px;
	color: white !important;
	background-color: #00ACC1;
	border: 2px solid #00ACC1;
	border-radius: 100px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus{
	color: #333333 !important;
	background-color: white !important;
	cursor: pointer;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.scrollable_nav-tabs{
		overflow: visible;
		border-bottom: 1px solid #ddd;
	}

	/*******bootstrap default*******/
	.nav-tabs{
		/*border not default*/
		border-bottom: none;
		height: auto;
		overflow: visible !important;
		margin: inherit;
		padding: inherit;
		display: block;
	}

	.nav-tabs>li{
		float: left;
		display: block;
	}

	.nav-tabs > li > a,
	.nav-tabs>li.active>a,
	.nav-tabs>li.active>a:focus,
	.nav-tabs>li.active>a:hover,
	.nav-tabs>li>a:hover,
	.nav-tabs>li>a:focus{
		background-color: transparent;
		margin: 0px;
		margin-right: 2px;
		line-height: 1.42857143;
		border: 1px solid transparent !important;
		border-radius: 4px 4px 0 0;
		color: #333333 !important;
		padding: 16px 10px !important;
	}

	.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus{
		background-color: #e3e3e3 !important;
		border: 1px solid #ddd !important; 
	}
}


/*TextAlternative*/
.skipTextAlternative{
	position: absolute;
	left: -9999px;
	overflow: hidden;
}


/*
*	Print style
*	START
*	last edit: 2016/08/23
*/

@media print{
	#theme_carousel,.simpleslider{
		display: none;
	}
	a[href]:after {
		content: none !important;
	}
}

.minimumWageTable table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
	min-width: 250px;
}

.minimumWageTable th{
	font-weight: bold;
}

.minimumWageTable th:first-child {
	padding-left: 1%;
}

.minimumWageTable th:nth-child(2){
	text-align: center;
}

.minimumWageTable td:first-child {
	padding-left: 1%;
}

.minimumWageTable td:nth-child(2) {
	text-align: center;
}