/** ================================================================== **/
/** ==================== 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;
	}
*/
	#financialPlanFooter .text
	{
		top: -43px !important;
	}
	#contentWrapper table.calc.investment td.col-1
	{
		width: 120px !important;
	}
	#contentWrapper table.calc.investment td.col-2
	{
		width: 160px !important;
	}
	#contentWrapper table.calc.investment .spacing-block
	{
		width: 170px !important;
	}
	#contentWrapper table.calc.investment .textfield-input
	{
		width: 100px !important;
	}
	#btnAction {
		margin-left: 40px !important;
		margin-top: -10px;
	}

	#contentWrapper table.calc.stock-investment .spacing-block
	{
		width: 100px !important;
/* 		border: 1px red solid; */
	}
	#contentWrapper table.calc.stock-investment td.col-1.short
	{
		width: 140px !important;
	}
	#contentWrapper table.calc.stock-investment td.col-2
	{
		width: 110px !important;
	}
	#contentWrapper table.calc.stock-investment .textfield-input
	{
		width: 70px !important;
	}
	#contentWrapper table.calc.stock-investment .output
	{
		width: 80px !important;
	}
}

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



	#financialPlanFooter .text
	{
		top: -43px !important;
	}
}



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

/*
	#financialPlanFooter .bg
	{
		height: 65px !important;
	}
*/
	
	#financialPlanFooter .text
	{
		top: -43px !important;
	}
	#contentWrapper table.calc.investment td.col-1
	{
		width: 120px !important;
	}
	#contentWrapper table.calc.investment td.col-2
	{
		width: 160px !important;
	}
	#contentWrapper table.calc.investment .spacing-block
	{
		width: 100px !important;
	}
	#contentWrapper table.calc.stock-investment .spacing-block
	{
		width: 100px !important;
	}
	#btnAction {
		margin-left: 2px !important;
		margin-top: -10px;
	}
/*
	#contentWrapper table.calc .spacing-block
	{
		width: 14px !important;
	}
*/
	#contentWrapper table.calc .textfield-input
	{
		width: 100px !important;
	}

}

/** ================================================================== **/
/** ================== Phone Size / Portrait Tablet ================== **/
/** ================================================================== **/
@media (max-width: 767px)
{
	#keyvisual-xs img {
		width: 100%;
	}
	
	#pageNavContainer {
		width: 100%;
		overflow-x: scroll;
	}
	#pageNavWrapper {
		width: 1200px;
	}
	
	
	/* Page Nav */
	.page-nav {
		margin: 20px 5px !important;
	}
	
	.page-nav span {
		font-weight: bold;
		font-size: 11px !important;
		padding: 8px 16px 7px 16px !important;
		border-radius: 8px !important;
		text-align: center;
	}


	#contentWrapper 
	{
		padding: 0px 10px;
	}
	#contentWrapper p 
	{
		font-size: 12px;
	}

	/* Pension specific */
	#contentWrapper table.calc.pension > tbody td
	{
		border: 1px #ffffff solid;
		padding-left: 10px;
		font-size: 11px !important;
	}
	#contentWrapper table.calc.pension > tbody td input
	{
		width: 70px !important;
	}
	#caseStudy {
		font-size: 11px !important;
	}
	#caseStudy .highlight {
		font-size: 11px !important;
	}



	/* Education specific */
	#contentWrapper table.calc.education > tbody td
	{
		font-size: 11px !important;
	}
	#contentWrapper table.calc.education > tbody td input
	{
		padding-left: 10px;
		width: 50px !important;
	}

	/* Investment specific */
	#contentWrapper table.calc.investment
	{
		font-size: 11px !important;
		margin-left: 15px;
	}
	#contentWrapper table.calc.investment .textfield-input
	{
		width: 70px !important;
	}
	#contentWrapper table.calc.investment.table-1 td.col-1
	{
		width: 100px !important;
	}
	#contentWrapper table.calc.investment.table-1 td.col-2
	{
		width: 120px !important;
	}

	#contentWrapper table.calc.investment.table-2 td.col-1
	{
		width: 100px !important;
	}
	#contentWrapper table.calc.investment.table-2 td.col-2
	{
		width: 120px !important;
	}
	#contentWrapper table.calc.investment .spacing-block
	{
		width: 100px !important;
	}
	#btnAction {
		margin-left: 2px !important;
		margin-top: -10px;
	}
	#comparisonWrapper
	{
		width: 100%;
		overflow-x: scroll;
	}
	#comparisonWrapper table
	{
		width: 700px;
	}

	/* Stock-Investment specific */
	#contentWrapper table.calc.stock-investment
	{
		font-size: 11px !important;
		margin-left: 25px;
	}
	#contentWrapper table.calc.stock-investment.table-1 select
	{
		width: 100px !important;
	}
	#contentWrapper table.calc.stock-investment.table-1 td.col-1
	{
		width: 175px !important;
	}
	#contentWrapper table.calc.stock-investment.table-1 td.col-2
	{
		width: 120px !important;
	}

	#contentWrapper table.calc.stock-investment.table-2 td.col-1
	{
		width: 175px !important;
	}
	#contentWrapper table.calc.stock-investment.table-2 td.col-2
	{
		width: 120px !important;
	}
	#contentWrapper table.calc.stock-investment.table-3 td.col-1
	{
		width: 110px !important;
		padding-left: 5px !important;
	}
	#contentWrapper table.calc.stock-investment.table-3 td.col-2
	{
		width: 100px !important;
	}
	#contentWrapper table.calc.stock-investment .spacing-block
	{
		width: 85px !important;
	}
	#contentWrapper table.calc.stock-investment .output
	{
		width: 65px !important;
	}
	#contentWrapper table.calc.stock-investment #btnAction img
	{
		width: 70px !important;
		margin-left: 6px;
	}
	#contentWrapper table.calc.stock-investment #btnAction
	{
		margin-top: 10px;
	}
}

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

@media (max-width: 500px)
{

}

@media (max-width: 450px)
{

}

@media (max-width: 320px)
{
	/* Stock-Investment specific */
	#contentWrapper table.calc.stock-investment
	{
		margin-left: 0px !important;
	}

	/* Investment specific */
	#contentWrapper table.calc.investment
	{
		margin-left: 0px !important;
	}
	#contentWrapper table.calc.investment.table-1 td.col-1
	{
		width: 90px !important;
	}
	#contentWrapper table.calc.investment.table-1 td.col-2
	{
		width: 110px !important;
	}

	#contentWrapper table.calc.investment.table-2 td.col-1
	{
		width: 90px !important;
	}
	#contentWrapper table.calc.investment.table-2 td.col-2
	{
		width: 110px !important;
	}
}





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

	#keyvisual {
/* 		 background-size: auto 100% !important; */
 		 background-size: 100%;
		 height: 394px;
/* 		 margin-bottom: 40px; */
	}
	
	.responsive-content
	{
		width: 100%;
		max-width: 1200px;
		margin-bottom: 20px;
	}
	
	.nonresponsive-content
	{
		margin-bottom: 40px;
	}
	
/*
	#pageTitle {
		margin: 40px auto;		
		text-align: center;
	}
	
	#pageTitle span {
		background-color: #005c97;
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		padding: 12px 25px 10px 25px;
		border-radius: 12px;
		text-align: center;
	}
	
	#pageDescription {
		text-align: center;
		color: #6b6b6b;
		font-size: 16px;
		margin-bottom: 40px;
		line-height: 22px;
	}
	
*/
	
/* 	Nav */
	#pageNavWrapper {
		
		margin: 0px auto;
	}
	
	.page-nav {
		margin: 40px 5px;		
		text-align: center;
		float: left;
	}
	
	.page-nav span {
		background-color: #bbbbbb;
		color: #ffffff;
		font-weight: bold;
		font-size: 14px;
		padding: 10px 20px 8px 20px;
		border-radius: 12px;
		text-align: center;
	}
	.page-nav.active span, .page-nav span:hover {
		background-color: #005c97 !important;
	}
	
	
	/* 	Content */
	#contentWrapper {
		margin: 0px auto 30px auto;
	}
	
	#contentWrapper h1 {
		color: #005c97;
		font-size: 18px;
	}
	#contentWrapper strong {
		color: #005c97;
		font-weight: bold;
	}
	#contentWrapper input[type=text]
	{
		background: #ffffff;
		border: 0px;
		border-radius: 10px;
		padding-left: 10px;
	}
	

	#contentWrapper table.calc
	{
		background: #f7f2e8 !important;
	}
	#contentWrapper table.calc > tbody > tr:nth-of-type(odd)
	{
		background: #fbf7f2 !important;
	}
	#contentWrapper span.required
	{
		color: #ff0000;
		padding-right: 6px;
		font-size: 1.2em;
	}
	.no-bg {
		background: #ffffff !important;
	}

	/* Pension specific */
	#contentWrapper table.calc.pension > tbody td
	{
		border: 1px #ffffff solid;
		padding-left: 10px;
		font-size: 13px;
	}
	#contentWrapper table.calc.pension > tbody td input
	{
		width: 100px;
	}

	/* Education specific */
	#contentWrapper table.calc.education > tbody td
	{
		border: 1px #ffffff solid;
		padding-left: 10px;
		font-size: 13px;
	}
	#contentWrapper table.calc.education > tbody td input
	{
		padding-left: 10px;
		width: 100px;
	}
	
	#caseStudy img {
		margin-top: 15px;
		margin-bottom: 10px;
	}
	
	#caseStudy p, #caseStudy table td {
/* 		letter-spacing: 1px; */
		font-size: 12px;
		line-height: 23px;
	}
	#caseStudy table td {
		vertical-align: top;
		padding-top: 3px;
		padding-bottom: 3px;
	}
	#caseStudy .highlight {
		font-size: 13px;
		color: #e60000;
		margin-bottom: 5px;
	}


	/* 	INVESTMENT specific */
	#contentWrapper table.calc.investment
	{
		padding: 0px;
		float: left;
	}
	#contentWrapper table.calc.investment tr
	{
		height: 35px;
	}
	#contentWrapper table.calc.investment td
	{
		padding: 0px;
		vertical-align: middle;
	}

	#contentWrapper table.calc.investment td.col-1
	{
		width: 160px;
	}
	#contentWrapper table.calc.investment td.col-2
	{
		width: 220px;
	}
	#contentWrapper table.calc.investment .spacing-block
	{
		width: 200px;
	}
	#contentWrapper table.calc.investment .textfield-input
	{
		width: 160px;
	}
	#btnAction {
		position: absolute;
		margin-left: 50px;
		margin-top: -10px;
	}
	


	/* 	STOCK-INVESTMENT specific */
	#contentWrapper table.calc.stock-investment
	{
		padding: 0px;
		float: left;
		font-size: 12px;
	}
	#contentWrapper table.calc.stock-investment tr
	{
		height: 35px;
	}
	#contentWrapper table.calc.stock-investment td
	{
		padding: 0px;
		vertical-align: middle;
	}

	#contentWrapper table.calc.stock-investment td.col-1
	{
		width: 180px;
		padding-left: 15px;
	}
	#contentWrapper table.calc.stock-investment td.col-2
	{
		width: 150px;
	}
	#contentWrapper table.calc.stock-investment .spacing-block
	{
		width: 160px;
	}
	#contentWrapper table.calc.stock-investment .textfield-input
	{
		width: 100px;
	}
	#contentWrapper table.calc.stock-investment .output
	{
		width: 100px;
	}



	
	/* 	Data Table */
	table.data-table {
		width: 100%;
		text-align: center;
		border-collapse: collapse;

	}
	table.data-table thead {
		background: #f7f2e8;
	}
	table.data-table th {
		height: 32px;
		text-align: center;
		vertical-align: middle;
		border: 1px #e9cea5 solid;
	}
	table.data-table td {
		height: 36px;
		text-align: center;
		vertical-align: middle;
		border: 1px #e9cea5 solid;
	}
	table.data-table tr.highlight td {

		color: #b28857;
		font-weight: bold;
		font-size: 14px;
		background: #fbf7f2;
	}
	
	
	
		
	
	/* Footer Bar */
	#financialPlanFooter 
	{
		margin-top: 40px;
	}
	
	#financialPlanFooter .bg
	{
		width: 100%;
		height: 45px;
	}
	
	#financialPlanFooter .icon
	{
		position: relative;
		top: -55px;
	}
	
	#financialPlanFooter .text
	{
		position: relative;
		float: left;
		top: -25px;
		margin-left: 0px;
		color: #ffffff;
	}
	
	#financialPlanFooter .btn-top
	{
		position: relative;
/* 		float: right; */
/* 		margin-right: 100px; */
		top: -60px;
	}
	

	
	
	
	
	