/** ================================================================== **/
/** ==================== 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;
	}
*/


	#productTable td.rating {
		font-size: 1.1em !important;
	}

}



/** ================================================================== **/
/** ============== Desktop 4:3 screen / iPad Landscape =============== **/
/** ================================================================== **/
@media (max-width: 999px)
{
/*
	#keyvisual {
		 background-size: auto 100% !important;
		 height: 240px;
	}
*/
	#productTable td {
/* 		font-size: 0.8em !important; */
	}
	
	/*  Product Table  */
	#productTableWrapper {
		width: 100% !important;
		overflow-x: scroll;
	}
	#productTable {
		width: 1200px !important;
	}
}

/** ================================================================== **/
/** ================== Phone Size / Portrait Tablet ================== **/
/** ================================================================== **/
@media (max-width: 767px)
{
	#keyvisual-xs img {
		width: 100%;
	}
	

	/* Intro box */

	#introductionBox {
		width: auto !important;
		height: 500px !important;
		padding: 25px 15px !important;
	}
	
	#introductionBox .info.row
	{
		margin-top: 0px !important;
	}
	
	#introductionBox p {
		font-size: 12px !important;
		line-height: 18px !important;
	}
	
	#introductionBox p .highlighted {
		font-size: 15px !important;
		color: #005c97;
	}
	
	#introductionBox h2 {
		font-size: 16px !important;
		line-height: 20px !important;
		padding-top: 0px !important;
	}
	
	#introductionBox h2 .small {
		font-size: 10px !important;
		line-height: 13px;
	}
	
	#introductionBox p.body {
		font-size: 12px;
		line-height: 22px;
	}

	/* Legend */
	#legend {
		width: 800px;
		float: left !important;
		padding-left: 20px;
	}
	
	/*  Product Table  */
	#productTableWrapper {
		overflow-x: scroll;
	}
	#productTable {
		width: 1200px !important;
	}

	.filter-menu table {
		font-size: 12px !important;
	}
	
	#financialPlanFilter table{
		width: 150px !important; 
	}

}

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

@media (max-width: 500px)
{

}

@media (max-width: 450px)
{

}

@media (max-width: 400px)
{

}





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

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

	#pageTitle {
		margin: 40px auto 10px auto;		
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		color: #005c97;
	}
	
	
	#pageDescription {
		margin-top: 20px;
		text-align: center;
		color: #6b6b6b;
		font-size: 14px;
		margin-bottom: 40px;
		line-height: 22px;
	}
	
*/

	#legend {
		float: right;
	    margin-top: 35px;
	}

	#productTable {
	    width: 100%;
	    border-spacing: 1px;
	    border-collapse: separate;
	    background: #f6efe7;
	    
	    margin: 10px auto 30px auto;
	}
	#productTable th {
		background: #d0ae89;
		color: #ffffff;
		height: 32px;
		text-align: center;
	}	

	#productTable tbody tr:nth-child(even) {
		background: #f6efe7;
	}
	#productTable tbody tr:nth-child(odd) {
		background: #ffffff;
	}




	#productTable td {
		color: #000000;
		height: 36px;
		text-align: center;
		margin-left: 1px;
	}
	#productTable td.name {
/*
		text-align: left;
*/
	}
	#productTable td.rating {
		color: #d0ae89;
		font-size: 1.3em;
	}
	
	.btn-contact {
		padding: 5px 10px;
		background: #d0ae89;
		color: #ffffff;
		text-decoration: none;
	}

	.btn-contact:hover {
		background: #e5cbaf;
		color: #666666;
		text-decoration: underline;
	}
	
	.btn-contact .glyphicon {
		font-size: 0.8em;
	}
	
	
	.btn-filter, btn-filter {
		color: #ffffff;
		text-decoration: none;
	}
	.btn-filter:hover {
		color: #ffffff;
		text-decoration: underline;
	}
	.btn-filter .glyphicon {
		font-size: 0.7em;
	}
	
	.filter-menu {
		position: absolute;
		display: none;
		top: 0px;
		left: 0px;
	}
	.filter-menu table {
		border: 2px #d0ae89 solid;
		border-collapse: collapse;
		background: #ffffff;
	}
	.filter-menu table td {
		border: 1px #e0e0e0 solid;
		padding: 7px 13px 3px 13px;
	}
	.filter-menu table td input[type=checkbox] {
		margin-right: 7px;
	}
	.filter-menu table td label {
		font-weight: normal;
	}
	.filter-menu table td:hover {
		background: #f6efe7;
	}
	

/* Intro box */

#introductionBox {
	display: none;
	width: 910px;
	height: 400px;
	padding: 40px 50px;
}
#introductionBox .info.row
{
	margin-top: 40px;
}

#introductionBox p {
	font-size: 14px;
	color: #6b6b6b;
	line-height: 30px;
}

#introductionBox p .highlighted {
	font-size: 18px;
	color: #005c97;
}

#introductionBox h2 {
	font-size: 22px;
	color: #005c97;
	line-height: 27px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	text-align: center;
}

#introductionBox h2 .small {
	font-size: 14px;
	color: #e0b577;
	line-height: 13px;
}

#introductionBox p.body {
	font-size: 12px;
	color: #6b6b6b;
	line-height: 22px;
}

.middle-cell {
	border-left: 1px #a0a0a0 solid;
	border-right: 1px #a0a0a0 solid;
	border-image: linear-gradient(to bottom, #fff, #a0a0a0, #fff) 0 100% 0 100% stretch !important;
}