@charset "utf-8";
/* CSS Document */

img { display:inline-block }

/* Nav bar shadow on top of slider*/
.header-container{
	position:relative; 
	z-index:10;
}

.ugc-icon-list { position: absolute;  left: 8px;  z-index: 9;  width: 66px; height: 25px; color: #ffffff; font-size: 13px; line-height: 23px; text-align: center; margin-top: 0px; background-color:rgba(0, 0, 0, 0.3); border-radius: 5px;}
/*
==============================================
carousel
==============================================
*/	
.video-icon-home {position: absolute; bottom: 133px;  right: 8px; z-index: 9; width: 28px;  height: 25px;} 
.video-icon-list { position: absolute;  bottom: 105px; right: 8px;  z-index: 9;  width: 28px; height: 25px;}  
.video-icon-list-tag { position: absolute;  bottom: 131px; right: 8px;  z-index: 9;  width: 28px; height: 25px;}  
.carousel-indicators { bottom: 0 }
.carousel-control.right,
.carousel-control.left { background-image: none }
.carousel-control { color: #28a838!important }
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right { margin-top: -45px }
.carousel .item {
	min-height: 181px; 
	height: 100%;
	max-height:470px;
	width:100%;
	background-color: rgba(236, 151, 41, 1) ;
}

/* crop the banner pic in desktop view*/	
@media (min-width:875px) {
.carousel .item {
		min-height: 470px; 
}
.carousel .item img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
}
/* crop the banner pic in desktop view*/


.carousel-caption {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 0;
	z-index: 5;  /*To be updated to UHK*/
	padding-top: 20px;
	padding-bottom: 20px;
	color: #ffffff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel .icon-container {
	background-color: rgba(236, 151, 41, 0.85);
	border-left:8px solid #f9d400;
	padding:10px 0;
}
.carousel-caption a {
	color:#ffffff;
	padding:10px 15px;
	display:inline-block;
	text-decoration:none;
}
.carousel-caption a:hover { text-decoration:none }
.carousel .icon-container {
	display: inline-block;
	font-size: 25px;
	line-height: 25px;
	padding: 1em;
	text-align: center;
	border-radius: 50%;
}
.carousel-caption button {
	border-color: #00bfff;
	margin-top: 1em; 
}

/* Animation delays */
.carousel-caption h3:first-child {
	animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
	animation-delay: 2s;
}
.carousel-caption button {
	animation-delay: 3s;
}
.carousel-caption h1 {
	text-align: center;  
	font-size: 19px;
	font-weight: 500;
}
.carousel-caption h3 {
	color:#ffffff;
}
.carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 5; /*To be updated to UHK*/
	width: 60%;
	padding-left: 0;
	margin-left: -30%;
	text-align: center;
	list-style: none;
}
.carousel-indicators li {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 1px;
	text-indent: -999px;
	cursor: pointer;
	background-color: #197cbc \9;
	background-color: rgba(236, 151, 41, 1);
	border: none;
	border-radius: 10px;
}
.carousel-indicators .active {
	width: 12px;
	height: 12px;
	margin: 0;
	background-color: #28a838;
}
.p {
	padding-top: 125px;
	text-align: center;
}
.p a {
	text-decoration: underline;
}

/*To be updated to UHK*/
@media (max-width:1239px) {
#ul-slider-container
{
	padding:0px;	
}
}


@media (max-width:800px) {
/*
==============================================
carousel
==============================================
*/
	.carousel-caption h1 {
		font-size: 24px;
	}
}

@media (max-width:767px) {
/*
==============================================
carousel
==============================================
*/
	.carousel .item { min-height: auto; }
	#carousel-example-generic ol { display:none; }
	.carousel-caption { 
		position:inherit;	
		left:0;
		width:100%;
		height:50px; /*To be updated to UHK*/
		padding:0!important; 
		display:table;
		border:none;
		
	}
	.carousel-caption.uf {
		background-color: rgba(252, 178, 83, 1); /*To be updated to UHK*/
		border-left: 6px solid #28a838; /*To be updated to UHK*/
	}
	.carousel-caption h1 {
		font-size: 23px;
		display:table-cell;
		border:none;
		width:100%;
		vertical-align:middle
	}
	.carousel-caption a {
		width:100%;
		display:inherit;
		padding:0 20px;
		line-height:27px
	}
	.carousel-indicators {
		display:none;
	}
	
}

@media (max-width:640px) {
/*
==============================================
carousel
==============================================
*/
	.carousel-caption h1 {
		font-size: 21px;
	}
	
	#theme-tabs{ display:none }
	
	#new-article .nav-tabs > li > a {
		font-size:15px;
	}
	
	.nav > li > a {
		padding: 10px 0px;
	}



}


@media (max-width:480px) {
/*
==============================================
carousel
==============================================
*/
	.carousel-caption h1 {
		font-size: 19px;
		line-height:23px;
	}
	.carousel-caption a { line-height:22px; }
	
	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next { left: 0px; }
	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev { right: 0px; }
}

@media (max-width:375px) {
	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next { left: 10px; }
	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev { right: 10px; }
}

@media (max-width:320px) {
	.carousel .item { min-height: auto }
	
	.carousel-caption h1 {
		margin-bottom:0
	}
}

@media (min-width:768px) {
/*
==============================================
carousel
==============================================
*/
	.carousel-caption { 
		bottom:15%; 
	}
	.carousel-control .icon-prev,
	.carousel-control .icon-next,
	.carousel-control .glyphicon-chevron-left,
	.carousel-control .glyphicon-chevron-right {
	  margin-top: -20px;
	}
	.carousel-caption a {
		border-left:8px solid #28a838;
	}
	.carousel-caption.uf a {
		background-color: rgba(236, 151, 41, 0.85);
	}
	.carousel-caption.uf a:hover {
		background-color: rgba(236, 151, 41, 0.95);
	}

}


@media (min-width:801px) {
/*
==============================================
carousel
==============================================
*/	
	.carousel-caption h1 {
		font-size: 24px;
	}
}

@media (min-width:1024px) {
/*
==============================================
carousel
==============================================
*/	
	.carousel-control .icon-prev,
	.carousel-control .icon-next,
	.carousel-control .glyphicon-chevron-left,
	.carousel-control .glyphicon-chevron-right {
	  margin-top: -10px;
	}
	.carousel-caption h1 {
		font-size: 26px;
	}
}

@media (min-width:1240px) {
/*
==============================================
carousel
==============================================
*/	
	.carousel-caption h1 {
		font-size: 28px;
	}
	
}

/*
==============================================
Member's Zone
==============================================
*/
.index-member h2{font-size:15px!important;	}
.member-card-img{padding:10px;}
.member-card-info{padding:7px 10px 7px 0px;}
.member-card-info table{width:100%}
.member-card-info .info{font-size:12px; color:#28A838;}
.member-card-info .right{text-align:right;}

@media (min-width:960px) {
.index-member .member-title
{
	min-height:52px!important;
}

.index-member h2
{
	max-height:50px!important;
	overflow: hidden!important;
	line-height: 1.2!important;
	font-size: 14px!important;
}
}

@media (max-width:959px) {
	.index-member .member-title
{
	min-height:66px!important;
}

.index-member h2
{
	max-height:66px!important;
	overflow: hidden!important;
}
}

@media (max-width:374px) {
	.index-member .member-title
{
	min-height:initial!important;
}

.index-member h2
{
	max-height:initial!important;
}
}

/*
==============================================
Food Blog
==============================================
*/
.food-blog-highlight{padding:0px!important;}
@media (min-width:1248px) {
.food-blog-highlight .card{min-height:237px; height:auto; max-height:237px;}
#food-blog .title{max-height:48px; overflow:hidden;}
#food-blog .info{max-height:18px; overflow:hidden;}
.food-blog-highlight{margin-bottom:10px;}
}

@media (max-width:1247px) {
#food-blog .title{max-height:57px;  overflow:hidden;}
#food-blog .info{max-height:18px; overflow:hidden; margin-bottom:5px;}
.no-top-margin{margin-top:0px!important; margin-bottom:10px;}
#food-blog h2 {font-size:15px!important;}
}

@media (max-width:992px) {
.no-top-margin{margin-bottom:0px;}
}


#food-blog .info-1 a {
	color:#ec9729;	
}

#food-blog .info-1 a:hover {
	color:#c67516;	
}

#food-blog .blog-icon img
{
	padding-left:10px;
	padding-top:11px;
	padding-bottom:11px;
}

#food-blog h2 { font-size:17px; font-weight:500; }
#food-blog .card { position:relative; margin-top:10px;	margin:7px; 	overflow:hidden;  }
#food-blog .card img { border-radius:4px }
#food-blog .card .caption { 
	position:absolute; 
	z-index:1; 
	left:0; 
	right:20%; 
	bottom:10%; 
	width:auto; 
	padding:0;
	color:#fff 
}
#food-blog .card .caption > div {
	background-color:#ec9729; 
	opacity:0.9; 
	padding:5px;
	border-left: 6px solid #28A838;
}
#food-blog .card .caption > div:hover {
	opacity: 1; 
			-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;
}
#food-blog .card .caption a:link,
#food-blog .card .caption a:active,
#food-blog .card .caption a:visited,
#food-blog .card .caption a:hover {
	color:#ffffff;
}

.blog-wrapper{height:50%;}
#blog-upper{border-bottom:1px solid #f2f2f2; border-right:1px solid #f2f2f2;}

.UF-big4{padding:0px!important; border-top:1px solid #eaeaea; margin-top:10px;}
.UF-big4 .col-xs-6, .UF-big4 .col-sm-6, .UF-big4 .col-md-3, .UF-big4 .col-lg-3{padding:0px!important}
@media (max-width:767px) {
.UF-big4 .col-xs-6, .UF-big4 .col-sm-6{width:50%!important;}}
@media (min-width:768px) {
.UF-big4 .col-md-3, .UF-big4 .col-lg-3{width:25%!important;}}