@import url(https://fonts.googleapis.com/css?family=Signika:400);
/*--- Mobile, <= 480px ---*/
body {
	overflow: auto;
}
h1{
    font-size:30px;
}
.table-container table{
    margin:0 0 1.625em;
    width:100%;
    border-collapse:separate;
}
#mobile, #mobile_wrap {
	position:absolute;
	top:65px;
	bottom:0;
	left:0;
	width:100%;
	margin: 0;
	padding: 0;
}
#mobile {top:0;}
#mobileframe, #table_wrap {
	width: 100%;
	height: 100%;
	overflow-y: auto !important;
	padding: 0;
	margin: 0;
	border: none;
}
#mapDiv {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1%;
	right: 1%;
	font: 0/0 a;
	text-align: center;
	display: none;
}

/*--- CREATE A FULL-HEIGHT INLINE BLOCK PSEUDO-ELEMENT - src=http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height ---*/
#mapDiv:before {
	content: ' ';
	display: inline-block;
	vertical-align: middle;  /* vertical alignment of the inline element */
	height: 100%;
}
svg {
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	max-height: 98vh;
}

/*--- SVG DEFAULT STYLING ---*/
.st0{fill:#F2F2F2;} /* WATERMARK */
.st1{opacity:0.01;} /* WATER & POP-BUTTON BACKGROUNDS */
.st2{fill:#916D85;} /* B GRADES */
.st3{fill:#E4DAE1;} /* C GRADES */
.st4{fill:#C8B6C2;} /* C+ GRADES */
.st5{opacity:0.5;fill:#FFFFFF;} /* TITLE BACKGROUND */
.st6{fill:#C5C7C9;} /* LOGO BACKGROUND */
.st7{fill:#B1B3B5;} /* LOGO COMPASS ROSE*/
.st8{fill:#145B93;} /* LOGO INITIALS */
.st9{fill:#EC1C24;} /* LOGO */
.st10{opacity:0.01;} /* BUTTON BACKGROUNDS */
.st11{fill:#808080;} /* BUTTON & POP-BUTTON TEXT */
.st12{opacity:0.85;} /* POP BACKGROUNDS */
.st13{fill:#FFFFFF;} /* POP TEXT */

/*--- CUSTOM STYLING/BEHAVIOUR ---*/
.pop-bubble {display: none;}
.button:hover {cursor:pointer;}
.button:hover .st11 {fill:#035AA7;}
.pop-button:hover {cursor:pointer;}
.pop-button:hover .st11 {fill:#FFFF00;}
.pop-trigger:hover, #BTN-CC:hover {cursor:context-menu;}
#TXT-CC {display:none;}
#BTN-CC:hover #TXT-CC { display:inline; }
#scroll_notice { display: none; position:absolute; top:4px; left:6px; z-index:9999; }
#scroll_notice p { text-transform:uppercase !important; font-family: 'Signika', sans-serif; margin:0; }

/*--- TABLE STYLES ---*/
html { margin: 0 !important; }
#table_wrap { max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; }
body.custom-background { background-color: #ffffff; }
h1 { text-transform: uppercase; }
#mobile_header { margin: 1%; width:100%; }
#mh-logo { float: left; width: 20%; height: 64px; }
#mh-title { float:left; width: 78%; text-align: right; }
table + h1 { margin-top: 60px; }
table { border: none !important; }
td { padding: 0.5em !important; font-family: 'Signika', sans-serif; border: none !important; }
.thead { color: #ffffff; }
.thead td, .overview .overall td { text-transform: uppercase; font-weight: bold; }
td:nth-child(even), td:nth-child(3) { text-align: center; vertical-align: middle !important; border-left: 1px solid #000 !important; width: 70px; }
.thead td { font-weight: bold; border-left: none !important; }
.overview .thead, .overview .thead:hover,  .overview .thead:hover td, .overview .overall { background-color: #808285 !important; color: #ffffff; }
.overview tr { background: #d1d3d4; }
.overview td:nth-child(even), .overview td:nth-child(3), .overview .thead:hover td:nth-child(even), .overview .thead:hover td:nth-child(3) { border-left: none !important; }
.overview tr:hover, .overview tr:hover td { background: #a7a9ac; color: #FFFFFF; }
.overview { border-spacing: 1px; }
.safety .thead, .safety .thead:hover { background-color: #6a793b; }
.safety tr:nth-child(even) { background: #d4d7c7; }
.safety tr:hover { background-color: #a8af8e; }
.support .thead, .support .thead:hover { background-color: #764867; }
.support tr:nth-child(even) { background: #d4cad2; }
.support tr:hover { background-color: #a993a3; }
.cost .thead, .cost .thead:hover { background-color: #2e4f74; }
.cost tr:nth-child(even) { background: #c3cbd5; }
.cost tr:hover { background-color: #8695aa; }
.fairness .thead, .fairness .thead:hover { background-color: #d1a10d; }
.fairness tr:nth-child(even) { background: #f0e3c4 }
.fairness tr:hover { background-color: #dfc888; }
.efficiency .thead, .efficiency .thead:hover { background-color: #9a6a5f; }
.efficiency tr:nth-child(even) { background: #dfd4d0;}
.efficiency tr:hover { background-color: #bea7a0; }

/* NAV */
.topnav {
	overflow: hidden;
	background-color: #1c1c1c;
	font-family: 'Signika', sans-serif;
}
.topnav a {
	float: left;
	display: block;
	color: #fff;
	text-align: center;
	padding: .5em;
	text-decoration: none;
	font-size: 17px;
	font-size:15px;
	line-height: 18px;
}
.topnav a:hover {
	background-color: #ee3224;
}
.topnav a {display: none;}
.topnav a.icon {
	float: right;
	display: block;
	font-size: 40px;
}
.topnav.responsive {
	position: relative;
	padding-top: 48px;
}
.topnav.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
}

@media screen and (min-width: 768px) {
	#mobile, #myTopnav {
		display: none;
	}
	
	#mapDiv {
		display: block;
	}
	body {
		overflow: hidden;
	}
	#mobile_wrap {
	top: 0;
	padding-top: 0.5em;
	}
}