/*----------------Font------------------*/

@import url(https://fonts.googleapis.com/css?family=Lato);
* {
	font-family: 'Lato';
}
.reset-link{
    border: 0;
	color: #4D4D4D;
	display: inline-block;
	margin-left: 10px;
}
.article-content-list img{
	max-width: 100% !important;
}
.listing-table{
	width: 100%;
}
.listing-table td{
	padding: 10px 0;
}
.listing-table td:first-child{
	width: 220px;	
}
.contactus.listing-table td:first-child{
	width: 120px;
}
.contactus.listing-table td{
	padding-left: 10px;
	padding-right: 10px;
}
.contactus.listing-table td:last-child{
	font-weight: bold;
}
.embbed-image {
	overflow: hidden;
}
.embbed-image-container{
	margin-bottom: 30px;
}
.embbed-image img{
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	bottom: 0;
	margin: auto;
	width: 100%;
}
.image-slide{
	margin-bottom: 40px;
}
.gallery-date{
	text-align: center;
}
.gallery-type{
	text-align: center;
}
.promote-img-container{
	width: 70%;
}
#search-extend-box{
	margin-left: 38px;
}
.header-search{
	/* position: relative; */
}
.header-search-container{
	position: relative;
	display: inline-block;
}
.header-search-block{
	position: absolute;
	right: 40px;
	height: 38px;
	width: 300px;
	display: none;
}
#search-close{
	background: #fff;
	width: 38px;
	height: 38px;
	float: left;
	border-right: 1px solid grey;
	color: grey;
	text-align: center;
	line-height: 38px;
}
#search-box{
	border: 0;
	height: 38px;
	width: 100%;
	padding: 3px 5px;
}
#search:focus,#search:hover{
	outline: 0;
}
#search-box:focus{
	outline: 0;
}
.header-search i{
	cursor: pointer;
}
#header{
	/* background:black; */
	padding: 15px;
}
.header-menu,.header-search{
	width: 50px;
	text-align: center;
}
.header-menu i{
	cursor: pointer;
}
.header-search i{
	color: #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
     background: rgba(255,255,255,0.5);
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    display: block;
    width: 20px;
    height: 20px;
    outline: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 8px 8px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
	position: absolute;
	top:0;
	padding:0;
	right: 0;
	height: 100%;
	width: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
a.read-more{
	font-size: 13px !important;
	color: #fff;
	transition: all 1s ease;
	display: inline-block;
	padding: 5px;
}
.slider-caption{
	position:absolute !important;
	left: 0;
	right: 0;
	bottom:0;
	bottom: 0;
	z-index: 1000000000;
	background: #000;
	color: #fff;
	width: 100%;
	font-size: 35px;
	padding: 30px 15px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.placeholder-img-container{
	background: #8B8B8B;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.placeholder-img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	padding: 15px;
}
.post-item{
	margin-bottom: 15px;
}
.section-title{
	margin-top: 25px;
	text-align: center;
    font-size: 36px;
    list-style-type: none;
	padding-bottom: 10px;
	color: #8b8b8b;
}
.bx-wrapper {
	border: 0;
	-moz-box-shadow: none;
    -webkit-box-shadow: none;
 	box-shadow: none;
}
.embed-slider::before {
	padding-bottom: 38%;
}
.embbed-item{
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.embbed-post-cover::before{
	padding-bottom: 65%;
}
.preview-post-content{
	height: 60px;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}
.preview-post-content-container{
	padding: 15px;
	font-size: 13px;
	color: #fff;
}

/* .preview-post-content-container.newsletter{
	background: #4D4D4D;
} */
.preview-post-title{
	margin-bottom: 15px;
}
.preview-more {
	margin-top: 10px;
}
.preview-more a {
	transition: all 1s ease;
	color: #fff;
}
.slider-caption-animate {
    background: linear-gradient(-45deg, #FFD800 50%, rgba(35,133,183,0.5) 50%);
    background-size: 400% 100%;
    background-position: left;
    transition: all 1s ease;
}
.news-animate{
	background: linear-gradient(-45deg, #FFD800 50%, #067FBF 50%);
}
.newsletter-animate{
	background: linear-gradient(-45deg, #FFD800 50%, #666666 50%);
}
.triangle-animate{
    background-size: 400% 100%;
    background-position: left;
	transition: all 1s ease;
	position: relative;
}
.triangle-animate:after {
    content: "";
    width: 0;
    height: 0;
    z-index: 15;
    border-style: solid;
    border-width: 0 0 15px 15px;
    border-color: transparent transparent #FFD800 transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
.triangle-animate:hover{
    background-position: right;
    color: black;
}
.triangle-animate:hover .preview-more a,.slider-caption:hover a.read-more{
	color: black;
}
/*----------------header------------------*/

header{
	overflow: hidden;
	background-color:#2d8ee3;
	width: 100%;
	height:auto;
	color:white;
}

a:hover{
	text-decoration: none;
}
.container2{
	max-width: 950px;
	padding: 0 15px;
	margin: 0 auto;
}
.header-con{
	height: 24.333%!important;
	width: 52%;
	margin: 0 auto!important;

}
header .nav-link i{
	font-size: 18px !important;
}
/*.fa-bars{
	margin-left: -20% !important;
}
.fa-search{
	margin-right: -20% !important;
	}*/
	/*----------------action------------------*/

	.cYellow a{
		text-decoration: none;
		color: #1CA2F5 !important;
	}
	.cYellow a:hover{
		color:#FFD800 !important;
	}



	.logo-size{
		width : 15%!important;
		height: auto;
	}
	/*----------------menu------------------*/


	.mobile-logo{
		display: none;
	}
	.link{
		display: flex;
		padding-bottom: 40px;
		padding-top: 20px;
	}

	.bar{
		width: 100%;
		height: 10px;
		background-color:#248FC7;
	}
	.nav-link{
		color: #ffffff !important;

	}
	.nav-link:hover{
		color:#FFD800  !important;

	}

	.article-img{
		margin-bottom: 20px;
		display: block;
		overflow: hidden;
		padding: 0 !important;
	}
	.article-preview{
		height: 300px;
		width: 240px;
		color:#8b8b8b;
		margin-left:10px;
		margin-right:10px;
	}

	.navbar-brand{
		margin-right:inherit!important;
		margin: 0 auto!important;
		max-width: 150px;
		height: 100%;
	}
/*
	header .container .nav-item{
		margin-left: 20px;
		margin-right: 20px;

	}

*/
	.menu-left{
		margin: 0 20px 0 0 !important;
		width: 5%!important;
	}

	.menu-left1{
		    margin: 0px 20px 0px 20px;
		width: 30%!important;
	}

	.menu-center{
    	text-align: center;
		width: 30%!important;
	}

	.menu-right1{
		margin: 0px 20px 0px 20px !important;
		width: 30%;
	}

	.menu-right{
		width: 5%!important;
		margin: 0 0 0 20px !important;
	}



	header .container .logo-m {
		width: 100%;
		height: 100%;
		display: block;
	}

	header #search-form {
		display: none;
		position: relative;

	}

	header #search-form .btn{
		position: absolute;
		top: -6px;
		right: 1px;

	}
	header #search-form i{
		color:#1DA2F2;

	}

	header #search-form input{
		border:0;
		padding-left: 10px;
	}


	header a , header i{
		font-size:18px;
	}

	/*----------------Menu------------------*/
	.sub-menu{
		list-style: none;
		 display: none;
		/* position: absolute;
		left: 300px; */
	}
	.overlay {
		height: 100%;
		width: 0;
		/* width: 100%; */
		position: fixed;
		z-index: 99;
		top: 0;
		background-image:url("/img/menu_background.jpg");
		left: 0;
		overflow-x: hidden;
		display: flex;
		background-color: black;
		transition: 0.5s;
	}

	.overlay-content {
		position: relative;
		margin: 20px;
		top: 10%;
		left: 20%;
		font-weight: bold;
		width: 300px;
		text-align: left;

	}

	.overlay-subcontent {
		position: relative;
		margin: 20px;
		top: 10%;
		left: 25%;
		width: 450px;
		font-size: 12px;
		text-align: left;

	}

	.subcontent{
		display: none;
	}

	.subcontent span{

	}


	.overlay-content span , .overlay-content a {
		padding: 8px;
		text-decoration: none;
		font-size: 20px;
		color: #FFFFFF;
		display: block;
		transition: 0.3s;
	}


	.overlay-subcontent span , .overlay-subcontent a {
		padding: 6px;
		text-decoration: none;
		font-size: 21px;
		color: #FFFFFF;
		display: block;
		transition: 0.3s;
	}

	.overlay span:hover, .overlay span:focus {
		color: #FFDB02;
	}
	.overlay a:hover, .overlay a:focus {
		color: #FFDB02;
	}

	.overlay .closebtn {
		position: absolute;
		top: 10px;
		right: 8px;
		color:#fff;
		font-size: 21px;
	}


	/*----------------COP------------------*/
	.menu{
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align:left !important;
	}

	.cop-content{
		width: 80%;
		margin: 0 auto;
	}
	/*----------------public------------------*/

	.triangles{
		position: relative;
	}

	.triangles:after{
		content: "";
		width: 0;
		height: 0;
		z-index: 15;
		border-style: solid;
		border-width: 0 0 25px 25px;
		border-color: transparent transparent #FFD800 transparent;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.search-triangles{
		position: relative;
	}

	.search-triangles:after{
		content: "";
		width: 0;
		height: 0;
		z-index: 15;
		border-style: solid;

		border-width: 0 0 25px 25px;
		border-color: transparent transparent #FFD800 transparent;
		position: absolute;
		top: 36%;
		right: 5.7%;
	}


	.search-input-triangles{
		position: relative;
	}

	.search-input-triangles:after{
		content: "";
		width: 0;
		height: 0;
		z-index: 15;
		border-style: solid;
		border-width: 0 0 30px 30px;
		border-color: transparent transparent #FFD800 transparent;
		position: absolute;
		top: 27%;
		right: 5.8%;
	}




	.search-gallery-triangles{
		position: relative;
	}

	.search-gallery-triangles:after{
		content: "";
		width: 0;
		height: 0;
		z-index: 15;
		border-style: solid;
		border-width: 0 0 30px 30px;
		border-color: transparent transparent #FFD800 transparent;
		position: absolute;
		top: 23%;
		right: 5.8%;
	}

	.search-button{
		padding-bottom: 20px;

	}
	.search-button input{
		margin-left: 10px;
		margin-right: 10px;
	}


	#next{
		text-align: center;
		margin-top: 50px;
		color :#8b8b8b;
	}

	.form-size{
		border:0;
		max-width: 300px;
		height:50px;
		background-color:#8B8B8B;
		color:#FFF;
		margin-top: 0px;
		margin-bottom: 20px;
		-webkit-appearance: none;
		-webkit-border-radius: 0px;
		padding-left: 30px;
	}
	.form-input-size{

		border:1px solid #8b8b8b;
		width: 250px;
		height:40px;
		background-color:#fff !important;
		color:#000;
		-webkit-appearance: none;
		-webkit-border-radius: 0px;
		padding-left: 30px;
	}


	.gallery-flex{
		margin: 0px auto;
		display: flex;
		flex-wrap: wrap;

	}
	.gallery-flex div{
		margin: 19px;
		display: block;
	}
	/*----------------slider------------------*/

	.slider{
		background-color: #248FC7;
		height: 41.625%;
		max-width: 100%;

		overflow: hidden;
	}

	.slider .carousel-item img{
		min-height: 300px;
		max-height: 500px;
		object-fit: cover;
	}

	.golink{
		padding-bottom: 20px;
		width: 100%;
	}
	.golink a{
		margin-left: 5px;
		font-size: 8px;
	}
	.golink span{
		font-size: 20px;
	}
	.golink span a{
		font-size: 12px;
	}

	.carousel-indicators{
		display: block;
		top:40%;
		bottom: 0%;
		left: 80%
	}
	.carousel-indicators li{
		width: 30px;
		height: 30px;
		margin: 0;

		border-radius: 50%;
	}


	.carousel-caption {
		left: 0;	
		right: 0;
		bottom: 0;
		background: linear-gradient(-45deg, #FFD800 50%, rgba(35,133,183,0.5) 50%);
		background-size: 400% 100%;
		background-position:left ;
		transition:all 1s ease;
	}

	.carousel-caption:hover ,.carousel-caption:hover a{
		background-position:right;
		color:black !important;
	}


	.carousel-caption a{
		color:#fff;
		transition:all 1s ease;
		text-decoration: none;

	}

	.topic{
		color:#1CA2F5 ;
	}

	.news .topic, .newsletter .topic , .showmore a{
		color:#8b8b8b;
	}


	.showmore {
		margin-top: 15px;
		font-size: 12px;
	}


	.link-name{
		width: 200px;
		word-wrap: break-word;
		margin-right: 30px;
	}
	.link-name a {
		color: #1CA2F5;
	}
	.link-icon{
		width: 100px;
		overflow: hidden;
		height: auto;
	}
	.link-content{
		height: 100px;
	}
	/*----------------content------------------*/
	.header-image{
		max-height: 100%; 
		min-height: 340px;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}



	.description{
		height: auto;
	}

	body{
		background-image: url("../img/CAHK-Web-Home-02.png");
		background-repeat: repeat;
		/* width: 100%;
		height: 100%; */
	}

	.body .container {
		padding-top: 20px;
		padding-bottom: 50px;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	section p{
		text-align: center;
		margin:0px;
		list-style-type:none;

	}
	.topic{
		text-align: center;
		font-size: 36px;
		list-style-type:none;
		padding-bottom: 10px;
	}

	.sponsor{
		width: 100%;
		height: 100%;
		color: #8b8b8b;
		display: flex;
		justify-content: center;
		line-height: 2;
	}
	.sponsor ul{
		padding: 0;
	}
	.acknowledgements p{
		color:#1CA2F5 !important;
	}

	.acknowledgements ul{
		list-style-type:none;
	}

	.body .container section {
		width:100%;
		height: 100%;
		padding-top: 30px;
		flex-direction: row;
	}
	.body .preview img{
		width: 100%;
		min-height: 180px;
	}
	.body .preview{
		height: 180px;
		width: 100%;
		overflow: hidden;
	}

	.triangle{
		position: relative;
	}

	.triangle:after{
		content: "";
		width: 0;
		height: 0;
		z-index: 15;
		border-style: solid;
		border-width: 0 0 15px 15px;
		border-color: transparent transparent #FFD800 transparent;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.col-sm-3{
		padding: 0 0 10px 0;
		color:#ffffff;
		background-color: #067FBF;
		text-overflow: ellipsis;
	}

	.newsside {
		background: linear-gradient(-45deg, #FFD800 50%, #067FBF 50%);
		background-size: 400% 100%;
		background-position:left ;
		transition:all 1s ease;
	}

	.newletterside{
		background: linear-gradient(-45deg, #FFD800 50%, #666666 50%);
		background-size: 400% 100%;
		background-position:left ;
		transition:all 1s ease;

	}

	.newletterside:hover,.newsside:hover ,.newletterside:hover a,.newsside:hover a{
		background-position:right;
		color:black;

	}

	.newletterside a,.newsside a{
		color:#fff;
		transition:all 1s ease;
		text-decoration: none;

	}
	.search-size{
		margin-bottom: 10px;
	}
	.search-animation {
		background: linear-gradient(-45deg, #FFD800 50%, #8B8B8B 50%) ;
		background-size: 400% 100%;
		background-position:left ;
		transition:all 1s ease;

	}
	.search-animation  a{
		color: #fff !important;
	}

	.search-animation:hover,.search-animation:hover ,.search-animation:hover .label {
		background-position:right;
		color:black;
		transition:all 1s ease;
	}

	.aboutbtn{
		font-size: 20px;
		/* height: 50px; */
		margin-top: 30px;
		margin-bottom: 50px;

	}
	.aboutbtn button{
		min-width: 200px;
		width: auto;
		color: #fff;
		padding: 10px 20px;
	}
	.functional-content .descripition{
		font-size: 16px;
	}
	.about-content{
		padding-top:30px;
		width:80%;
		margin: 0 auto;
		height: auto;
		font-size: 16px;
	}
	.note-content{
		height: auto;
	}
	.title{
		height: auto;
		max-height: 60px;
		margin: 10px 10px 10px 10px;	
		font-size: 13px;
	}

	.col-sm-3 .content{
		height: 60px;
		font-size: 8px;
		margin: 10px 20px 0px 20px;	
	}

	.readmore{
		font-size: 12px;
		margin-right: 10px;
		position: absolute;
		margin-left: 10px;
		bottom: 1px;
	}

	.readmore a{
		color:#ffffff;
	}


	.path {
		text-align: center;
		margin-bottom: 20px;
		margin-top: 15px;
		font-size: 13px;
	}
	.path a{
		color: black;
	}
	/*----------------CONTACTUS------------------*/
	.map{
		margin: 0;
		padding: 0;
	}
	.container .content{
		margin: 20px 15% 0px 15%;
		/* max-height: 300px; */
		width: 80%;
	}
	.container .content p{
		text-align: left;
		margin: 10px;
	}

	.container .content label{
		width: 100px;
	}

	.container .content span{
		font-weight: bold;	
	}

	.container .map iframe{
		max-width: 1920px;
		max-height: 340px;

	}
	.article-content{
		font-size: 13px;
		height: auto!important;
		/* word-break: break-all; */
		margin:0;
		height: 100%;
		background-color: #fff;
		padding: 20px;
		display: block;
		width: 100%;

	}

	.article-content-list{
		font-size: 13px;
		height: auto!important;
		/* word-break: break-all; */
		margin:0;
		padding-left: 10px;
		padding-right: 10px;
		display: block;
		width: 100%;

	}

	.data-content{
		width: 100%;
		border:1px solid #FFD800;
		background-color: #fff;
/*	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top:20px;*/
}

.data-content-item{
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top:20px;
}
#member-data{
	width: 80%;
	margin: 0 auto;
	padding:0;
}

#member-data *{
	margin: 10px;
}
#member-data a:hover{
	color:#FFD800;
}


.app-form{
	width: auto;
	margin: 0 auto;
	padding-top: 20px;
	text-align: left;
	color: #1CA2F5;
}
.app-form *{
	color: #1CA2F5;
}
.app-form a:hover{
	color:#FFD800;
}
.app-form span{
	padding-bottom: 30px;
}
.app-form p{
	margin-top: 10px !important;
}
.fee{
	width: auto;
	margin: 0 auto;
	padding-top: 10px;

}

.fee  .fee-type{
	margin-top: 10px;
	width:280px;
	display: inline-flex;
	justify-content: space-between;
}

.fee  .fee-price{
	width: 50px;
}

.member-content{
	/* width: 80%; */
	margin: 0 auto;
	display: block;
	padding-top: 20px;
}
.member-detail {
	width:100%;
	display: block;
}

.member-detail span{
	width: 200px !important;
	display: inline-block;
	margin-right: 20px;
	margin-top: 20px;
}

/*----------------footer------------------*/

footer {
	height: auto;
	background-color: #8B8B8B;
	color:#FFFFFF;
	font-size:12px !important;
	margin-top: 50px;
}


.sub-link{
	margin-right: -5px;
	font-size: 12px;
	margin-left: -5px;
}

footer #Subscribe-form {
	position: absolute;
	bottom: 0;

}

footer #Subscribe-form #Subscribe-email{
	background-color: #808080;
	border:0;
	color: #BEBEBE;
	display: block;


}
footer #Subscribe-form #Subscribe-btn{
	background-color: #8B8B8B;
	color:#ffffff;
	margin-top: 5px;
	margin-bottom: 5px;
	display: block;
}

footer .qrcode{
	left: 50%;
	right: 50%;
	height: 150px;
	width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;

}

footer #social{
	position: absolute;
	bottom: 0;
	right: 50%;
}

footer a {
	margin: 30px 15px 20px 15px;
}
footer a , footer a:link ,footer a:active , footer a:visited{
	color:#FFFFFF;
}

footer a:hover {
	text-decoration: none;
	color:#FCD800;
}
#copyright{
	padding: 15px 0;
}
#copyright span{
	font-size: 12px;
}

footer i{
	margin: 5px;	
}
.header-image{
	overflow:hidden;
}
.header-image img {
	max-width: 100%;
	height: 340px;
	width: 100%;
}

/*-----------------------------------------*/
/*-----------------------------------------*/
/*-----------------------------------------*/
/*-------------IN-Article------------------*/


.article{
	width: 100%;
	height: 100%;	
	display: flex;
	border:2px solid #FFD800;
}


/*----------------left side------------------*/
.item:hover{
	background-color: #FFD800;
}
.item{
	height: 80px;
	margin-top:inherit;
	position: relative;
	margin-bottom:inherit;
}
.item a{
	top: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	color: #1CA2F5;
	font-weight: bold;
	font-size: 18px;
}


.sidebar{
	max-width: 300px;
	min-width: 200px;
	background-color: #fff;
	border-right:2px solid #FFD800;
}


/*----------------Article PDF PAGE------------------*/

.file{
	margin:0 auto;
	width: 50%;
	display: block;
	padding-bottom: 20px;
}
.file a:hover{
	color: #FFD800;
}




.image a{
	color: #8b8b8b;
	margin: 10px;
	display: block;
}


input[type='submit'],input[type='reset']{
	background-color:inherit;
	border :0;
	color:#4D4D4D;
}

.search-item{
	display: block;
}
.gallery-content{height: 100%;margin-bottom:20px;margin-top: 20px;}
.video{
	margin-top: 20px;
}