/** ================================================================== **/
/** ==================== Desktop Very Wide Screen ==================== **/
/** ================================================================== **/
@media (min-width: 1171px)
{
/*
	#keyvisual {
		 background-size: auto 100% !important;
		 height: 400px;
	}
*/
	
}

/** ================================================================== **/
/** ====================== Desktop Wide Screen ======================= **/
/** ================================================================== **/
@media (max-width: 1200px)
{
/*
	#keyvisual {
		 background-size: auto 100% !important;
		 height: 340px;
	}
*/

}

@media (max-width: 1170px)
{
/*
	#keyvisual {
		 background-size: auto 100% !important;
		 height: 340px;
	}
*/


}



/** ================================================================== **/
/** ============== Desktop 4:3 screen / iPad Landscape =============== **/
/** ================================================================== **/
@media (max-width: 999px)
{
/*
	#keyvisual {
		 background-size: auto 100% !important;
		 height: 240px;
	}
*/

	#financialPlanNav div.icon {
		width: 80px !important;
	}
	#financialPlanNav div.icon img {
		width: 90px !important;
		height: 90px !important;
		margin-bottom: 5px;
	}
	#financialPlanNav div.icon a {
		font-size: 10px !important;
		font-weight: normal !important;
	}
	#financialPlanNav div.icon {
		line-height: 11px !important;
	}

}

/** ================================================================== **/
/** ================== Phone Size / Portrait Tablet ================== **/
/** ================================================================== **/
@media (max-width: 767px)
{
	#keyvisual {
		 background-size: auto 100% !important;
/*  		 background-size: 100%; */
		 height: 200px !important;
/* 		 margin-bottom: 40px; */
	}
	
	/* Slide */

	.keyvisual-content {
		margin-top: 20px !important;
	}

	.keyvisual-content h1.english {
		font-size: 12px !important;
		margin-left: 20px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}
	
	.keyvisual-content h1.chinese {
		font-size: 14px !important;
		letter-spacing: 2px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}

	.keyvisual-content img {
		width: 180px !important;
	}

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

	.keyvisual-content a:link, .keyvisual-content a:visited {
		font-size: 10px !important;
		text-shadow: 1px 1px 2px #ffffff !important;
	}


	/* 	Indicator */
	#financialPlanNav {
		top: 20px !important;
	}
	
	#financialPlanNav div.icon {
		width: 55px !important;
	}
	#financialPlanNav div.icon img {
		width: 60px !important;
		height: 60px !important;
	}
	#financialPlanNavContainerOuter
	{
		padding: 0px 0px !important; 
	}
	
}

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

@media (max-width: 500px)
{

}

@media (max-width: 450px)
{

}

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


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



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

	#keyvisual {
/* 		 background-size: auto 100% !important; */
 		 background-size: 100%;
		 height: 550px;
/* 		 margin-bottom: 40px; */
	}
	
	.responsive-content
	{
		width: 100%;
		max-width: 1200px;
		margin-bottom: 20px;
	}
	
	.nonresponsive-content
	{
		margin-bottom: 40px;
	}
	

	
	
	/* 	Keyvisual Content */
	
	.keyvisual-content {
		margin-top: 80px;
	}
		
	.keyvisual-content h1 {
		color: #005c97;
		font-size: 20px;
	}
	
	.keyvisual-content h1.english {
		font-family: 'GillSans-Light';
		font-size: 37px;
		margin-left: 70px;
		margin-top: 15px;
		margin-bottom: 0px;
	}
	
	.keyvisual-content h1.chinese {
		font-size: 28px;
		font-weight: bold;
		letter-spacing: 4px;
		margin-left: 0px;
		margin-top: 5px;
		margin-bottom: 0px;
	}
	
	.keyvisual-content p {
		color: #6b6b6b;
		font-size: 24px;
		font-weight: bold;
		margin-left: 70px;
		margin-top:  20px;
		text-shadow: 1px 1px 3px #ffffff;
	}
	
	.keyvisual-content a:link, .keyvisual-content a:visited {
		color: #005c97;
		font-size: 14px;
		font-weight: bold;
	}
	
	.keyvisual-content a:hover {
		color: #005c97;
		font-size: 14px;
		font-weight: bold;
		text-decoration: underline;
	}	
	
	/* 	Nav Icons (Under Keyvisual) */
	
	#financialPlanNav {
		position: relative;
		height: 130px;
		margin: 0px auto;
		top: -35px;
		left: auto;
		text-align: center;
	}
	
	#financialPlanNav div.icon {
		float: left;
		width: 110px;
		text-align: center;
	}
	
	#financialPlanNav div.icon a:link, #financialPlanNav div.icon a:visited{
		color: #666666;
		font-weight: bold;
		font-size: 12px;
	}
	#financialPlanNav div.icon a:hover {
		text-decoration: underline;
	}

	
	#financialPlanNav div.icon a.caption {
		position: relative;
		top: -10px;
/* 		text-shadow: 1px 1px 1px #666666; */
	}
	
	#financialPlanNav div.icon img {
		width: 110px;
		height: 110px;
	}