/** ================================================================== **/
/** ==================== Desktop Very Wide Screen ==================== **/
/** ================================================================== **/

@media (min-width: 1171px)
{
}

/** ================================================================== **/
/** ====================== Desktop Wide Screen ======================= **/
/** ================================================================== **/
@media (max-width: 1200px)
{

}

@media (max-width: 1170px)
{
}
/** ================================================================== **/
/** ============== Desktop 4:3 screen / iPad Landscape =============== **/
/** ================================================================== **/
@media (max-width: 999px)
{
	#indicator div.icon {
		width: 80px !important;
	}
	#indicator div.icon img {
		width: 90px !important;
		height: 90px !important;
		margin-bottom: 5px;
	}
	#indicator div.icon a {
		font-size: 10px !important;
		font-weight: normal !important;
	}
	#indicator div.icon {
		line-height: 11px !important;
	}
	.slide .slide-content {
		margin-left: 20px;
	}
}

@media (min-width: 768px)
{
	#bottomBar {
		height: 40px;
	}
}



/** ================================================================== **/
/** ================== Phone Size / Portrait Tablet ================== **/
/** ================================================================== **/
@media (max-width: 767px)
{
	/* Slide */
	.slide h1.english {
		font-size: 14px !important;
		margin-left: 20px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}
	
	.slide h1.chinese {
		font-size: 16px !important;
		letter-spacing: 2px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}

	.slide img {
		width: 180px !important;
	}

	.slide p {
		font-size: 12px !important;
		margin-left: 0px !important;
		margin-top:  10px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}

	.slide a:link, .slide a:visited {
		font-size: 10px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}
	
	/* 	Indicator */
	#indicator div.icon {
		width: 55px !important;
	}
	#indicator div.icon img {
		width: 60px !important;
		height: 60px !important;
	}
	#indicatorContainerOuter
	{
		padding: 0px 0px !important; 
	}
	#indicator {
		top: -125px !important;
	}
	
	/* 	Bottom Bar */
	#bottomBar
	{
		height: 30px;
	}
	#bottomBar #btnOtherServices
	{
		top: -6px !important;
	}
	#bottomBar #btnOtherServices img
	{
		height: 36px !important;
		padding: 0px !important;
	}
	
	#bottomBar #bottomBarItems .item img 
	{
		width: 90% !important;
	}



}

/** ================================================================== **/
/** ======================= Smaller Phone Size ======================= **/
/** ================================================================== **/
@media (max-width: 640px)
{	
}

@media (max-width: 500px)
{

}

@media (max-width: 450px)
{

}

@media (max-width: 400px)
{
	#indicator div.icon {
		width: 50px !important;
	}
	#indicator div.icon img {
		width: 55px !important;
		height: 55px !important;
	}	
}


@media (max-width: 320px)
{
	#indicator div.icon {
		width: 40px !important;
	}
	#indicator div.icon img {
		width: 45px !important;
		height: 45px !important;
	}
	#indicator div.icon a {
		font-size: 8px !important;
		font-weight: normal !important;
	}
}

/** ================================================================== **/
/** =========================== All Sizes ============================ **/
/** ================================================================== **/


/************ Carousel Banner ************/

#kvCarouselWrapper {
	
	height: 625px;
	background: #666666;
	z-index: 98;
	overflow-x: hidden;
}

#scroller {
	height: 625px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
	position: relative;
}

.slide {
	float:left;
	height: 625px;	
/* 	background-size: auto 100% !important; */
	cursor: pointer;
}

.slide h1 {
	color: #005c97;
	font-size: 20px;
}

.slide h1.english {
	font-family: 'GillSans-Light';
	font-size: 37px;
	margin-left: 70px;
	margin-top: 15px;
	margin-bottom: 0px;
}

.slide h1.chinese {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 4px;
	margin-left: 0px;
	margin-top: 5px;
	margin-bottom: 0px;
}

.slide p {
	color: #6b6b6b;
	font-size: 24px;
	font-weight: bold;
	margin-left: 70px;
	margin-top:  20px;
	text-shadow: 1px 1px 3px #ffffff;
}

.slide a:link, .slide a:visited {
	color: #005c97;
	font-size: 14px;
	font-weight: bold;
}

.slide a:hover {
	color: #005c97;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
}


/************ Carousel Banner - Indicator ************/

#indicatorContainerOuter
{
	position: relative;
}
#indicatorContainerInner
{
	position: absolute;
	width: 100%;
}
#indicator {
	position: relative;
	height: 10px;
	margin: 0px auto;
	top: -200px;
	z-index: 101;
}

#indicator div.icon {
	float: left;
	width: 110px;
	text-align: center;
}

#indicator div.icon img {
	width: 110px;
	height: 110px;
}

#indicator div.icon a:link, #indicator div.icon a:visited{
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
}
#indicator div.icon a:hover {
	text-decoration: underline;
}


#indicator div.icon a.caption {
	position: relative;
	top: -10px;
	text-shadow: 1px 1px 1px #666666;
}


#kvCarouselLeftArrow, #kvCarouselRightArrow  {
	position: relative;
	height: 1px;
	margin-top: -1px;
}
#kvCarouselLeftArrow img {
	position: absolute;
	width:  50px;
	height: 80px;
	left: 80px;
	float: left;
	opacity: 0.5;
}
#kvCarouselRightArrow img {
	position: absolute;
	width:  50px;
	height: 80px;
	right: 80px;
	float: right;
	opacity: 0.5;
}
#kvCarouselLeftArrow img:hover, #kvCarouselRightArrow img:hover {
	opacity: 1.0;
}


/************ Bottom Bar ************/

#bottomBar {
	position: absolute;
	z-index: 101;
	width: 100%;	
	bottom: 0px;
	background: url('../images/home/bottombar-bg.png');
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#bottomBar #btnOtherServices {
	position: relative;
	top: -8px;
}
#bottomBar #btnHide {
	display: none;
}
#bottomBar #btnHide img {
	padding: 11px 200px;
}
#bottomBar #bottomBarContent
{
	height: 20px;
	display: none;
}

#bottomBar #bottomBarItems
{
	display: none;
}
#bottomBar #bottomBarItems .item
{
	padding: 11px 15px;
	float: left;
}

#bottomBar #bottomBarItems .item img
{
	padding: 0px;
}

#bottomBar #bottomBarItems .item p
{
	color: #b9f0f6;
	text-align: center;
	margin-top: 5px;
}

#bottomBar #btnOtherServices img
{
	height: 48px;
	padding: 0px 150px;
}