@charset "utf-8";

/*
Theme Name: Metro
Author: Dovetail
Version: 1
*/

/*******************************************************************************

	UNIVERSAL

*******************************************************************************/

html {
	margin: 0;
	padding: 0;
	
	/*
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	*/
}

body {
	font-family: 'Montserrat', sans-serif;
	color: #303b41;
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

* {
	box-sizing: border-box;
}

.clear {
	clear: both;
}

.floatleft, .alignleft {
	float: left;
}
.floatright, .alignright {
	float: right;
}

.strong {
	font-weight: bold;
}

a {
	color: #00adee;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	color: #0091c7;
}

a img {
	border: none;
}

hr {
	margin: 0;
	padding: 0;
	border: none;
	background-color: #00adee;
	height: 1px;
}

.button {
	background-color: #00adee;
	color: #fff;
	border-radius: 500px;
	padding: 12px 16px;
	font-size: 11pt;
	border: none;
}
.button:hover {
	background-color: #0091c7;
	color: #fff;
}

.gray-button {
	background-color: #e0e4e5;
	color: #303b41;
}
.gray-button:hover {
	background-color: #ccc;
	color: #303b41;
}

/*******************************************************************************

	HEADER ALERTS

*******************************************************************************/

div#header-alerts div.alert-container {
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	padding: 14px 68px 14px 44px;
	/*padding: 1.37% 4.30%;*/
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	position: relative;
}

div#header-alerts strong {
	font-weight: bold;
}

div#header-alerts div.alert-container a {
	color: #fff;
	text-decoration: underline;
}
div#header-alerts div.alert-container a.alert-dismiss {
	text-decoration: none;
}

div#header-alerts div.alert-container a.alert-dismiss {
	color: #fff;
	font-weight: bold;
	font-size: 20pt;
	position: absolute;
	top: 4px;
	right: 44px;
}

/*
div#header-alerts div.alert-body {
	background-color: #e1e4e5;
}
div#header-alerts div.alert-body div.alert-container {
	color: #303b41;
}
div#header-alerts div.alert-body div.alert-container a {
	color: #303b41;
	text-decoration: underline;
}
*/

/*******************************************************************************

	HEADER

*******************************************************************************/

header {
	width: 1024px;
	height: 76px;
	margin: 0 auto;
	position: relative;
}

div.header-mobile {
	display: none;
}

.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

header img.metro-logo {
	position: absolute;
	top: 18px;
	left: 42px;
}

header nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0px;
	left: 215.447px;
	height: 76px;
}

header nav ul li {
	margin: 0;
	padding: 0;
	float: left;
	height: 76px;
}

header nav ul li.active a {
	background-color: #e1e4e5;
	color: #00adee;
}

header nav ul li a {
	color: #303b41;
	display: block;
	height: 76px;
	padding: 30px 10px 0 10px;
}

div.search-container {
	position: absolute;
	top: 24px;
	right: 24px;
}

input.s {
	border: solid 1px #93a8ad;
	background-color: #fff;
	border-radius: 500px;
	padding: 6px 30px 6px 10px;
	width: 144px;
	height: 30px;
	-webkit-appearance: none;
}

input.search-submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;

	background-color: transparent;
	background-image: url(images/icon-search.svg);
	background-size: 19px 19px;
	background-repeat: no-repeat;
	background-position: center center;
	
	text-indent:-9999px;
}

div.submenus {
	background-color: #e1e4e5;
	list-style: none;
	margin: 0;
	padding: 0;
}

div.submenus > a {
	display: none;
}

div.submenus > a > img {
	display: none;
}

div.submenus > div {
	display: none;
}

div.submenus > div.search-container-mobile {
	background-color: #00adee;
	position: relative;
	padding: 14px 26px;
	display: none;
}

div.submenus > div.search-container-mobile input.s {
	border: none;
	width: 100%;
	font-size: 16pt;
	padding: 10px 14px;
	color: #303b41;
	height: 46px;
}

div.submenus > div.search-container-mobile input.search-submit {
	right: 30px;
	top: 14px;
	width: 46px;
	height: 46px;
	background-size: 38px 38px;
}

div.submenus ul {
	margin: 0 auto;
	width: 1024px;
	padding: 27px 0 20px 225px;
	list-style: none;
}

div.submenus ul li {
	margin: 0 0 16px 0;
	padding: 0;
	display: inline-block;
	/*width: 196px;*/
	height: 21px;
}

div.submenus ul li a {
	/*color: #00adee;*/
	padding-right: 46px;
}

/*
MEDIUM HEADER
*/

/*
@media screen and (max-width : 1023px) and (min-width : 801px) {
	
	header {
		width: 100%;
		padding-top: 7.3%;
		height: 0;
	}
	
	header nav ul {
		left: 21%;
		height: auto;
	}
	
	header nav ul li {
		font-size: 1.5vw;
		height: auto;
	}
	
	header nav ul li a {
		padding: 2.63vw 0.976vw 0 0.976vw;
	}
	
	div.search-container {
		left: 83.5%;
		right: auto;
		width: 13.1%;
		top: 0;
		margin-top: 2.34%;
	}
	
	input.s {
		width: 100%;
	}
	
}
*/

/*@media screen and (max-width : 800px) {*/
@media screen and (max-width : 1023px) {
	header {
		width: 100%;
		height: 65px;
		overflow: hidden;
	}

	div.header-standard {
		display: none;
	}
	
	div.header-mobile {
		display: block;
		width: 100%;
	}
	
	a#mobile-logo {
		float: left;
		width: 50%;
		max-width: 182px;
		margin: 10px 10px 10px 5%;
	}
	a#mobile-logo img {
		width: 100%;
		max-width: 182px;
		height: auto;
	}
	
	a#tools-button-mobile,
	a#menu-button-mobile {
		float: right;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 80px;
	}
	a#tools-button-mobile {
		margin-right: 14px;
		background-color: #00adee;
		color: #fff;
		border-radius: 500px;
		padding: 12px 16px;
		font-size: 11pt;
	}
	a#menu-button-mobile {
		margin-right: 30px;
		position: relative;
		top: 3px;
		width: 50px;
	}
	
	a#tools-button-mobile-x,
	a#menu-button-mobile-x {
		display: none;
		float: right;
		background-color: #00adee;
		color: #fff;
		border-radius: 0;
		margin: 0;
		font-size: 25pt;
		height: 65px;
		padding: 12px 16px;
		top: 0;
		text-align: center;
		width: 80px;
	}
	a#tools-button-mobile-x {
		margin-right: 14px;
	}
	a#menu-button-mobile-x {
		margin-right: 0;
	}
}

@media screen and (max-width : 400px) {
	
	html {
		height: auto;
	}
	body {
		height: auto;
	}

	header {
		height: 25%;
	}
	
	a#mobile-logo {
		width: 45%;
		max-width: 182px;
		margin: 2.5% 2.5% 2.5% 5%;
	}
	
	a#tools-button-mobile,
	a#menu-button-mobile {
		margin-top: 2.5%;
		margin-bottom: 2.5%;
		width: 20%;
	}
	a#tools-button-mobile {
		margin-right: 3.5%;
		padding: 3% 3%;
		font-size: 4vw;
	}
	a#menu-button-mobile {
		margin-right: 7.5%;
		top: auto;
		margin-top: 3%;
		width: 12.5%;
	}
	
	a#tools-button-mobile-x,
	a#menu-button-mobile-x {
		font-size: 9vw;
		height: 16.25%;
		padding: 3% 4%;
		width: 20%;
	}
	a#tools-button-mobile-x {
		margin-right: 3.5%;
	}
	a#menu-button-mobile-x {
		margin-right: 0;
	}
}

/*
MOBILE HEADER
*/

/*@media screen and (max-width : 800px) {*/
@media screen and (max-width : 1023px) {
	div.submenus-holder {
		height: 0px;
		overflow: hidden;
	}

	div.submenus {
	}
	
	div.submenus > a {
		display: block;
		background-color: #00adee;
		color: #fff;
		border-bottom: solid 1px #1b75bb;
		padding: 20px 20px 20px 30px;
		font-size: 18pt;
		font-weight: bold;
	}
	div.submenus > a:last-child {
		border-bottom: none;
	}
	
	div.submenus > a > img {
		display: inline-block;
		width: 22px;
		height: 14px;
		margin-left: 2px;
	}

	div.submenus ul {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	div.submenus ul li {
		width: 100%;
		height: auto;
		display: block;
		margin: 0;
	}
	
	div.submenus ul li a {
		display: block;
		width: auto;
		height: auto;
		border-bottom: solid 1px #00adee;
		padding: 20px 20px 20px 50px;
		background-color: #005cb9;
		color: #fff;
		font-size: 18pt;
	}
	div.submenus ul li:last-child a {
		border-bottom: none;
	}
	
	div.submenus > div.search-container-mobile {
		display: block;
	}
}

/*******************************************************************************

	TOOLS

*******************************************************************************/

div#tools {
	position: relative;
	height: 8px;
	overflow: hidden;
	background-color: #00adee;
}

div#tools div.tools-inner {
	position: relative;
	/*top: -46px;*/
}

div#tools nav {
	position: relative;
	text-align: center;
	padding: 12px 0;
}

div#tools nav ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

div#tools nav ul li {
	margin: 0 0 0 50px;
	padding: 0;
	display: inline;
}
div#tools nav ul li:first-child {
	margin: 0 0 0 0;
}

div#tools nav ul li a {
	color: #fff;
}

div#tools nav ul li img {
	margin-right: 10px;
	vertical-align: middle;
}

div#tools nav ul li span {
	position: relative;
	top: 2px;
}

div.tools-button-holder {
	margin: 0 auto;
	width: 1024px;
	position: relative;
	z-index: 3;
}

/*
@media screen and (max-width : 1023px) and (min-width : 801px) {
	div.tools-button-holder {
		width: 100%;
	}
}
*/

/*@media screen and (max-width : 800px) {*/
@media screen and (max-width : 1023px) {
	div.tools-button-holder {
		display: none;
	}

	div#tools {
		width: 100%;
	}
	
	div#tools div.tools-inner {
		top: 0px;
	}
	
	div#tools nav {
		padding: 0;
	}
	
	div#tools nav ul li {
		display: block;
		margin: 0;
		text-align: left;
		border-bottom: solid 1px #1b75bb;
		padding: 20px 20px 20px 30px;
		font-size: 18pt;
	}
	div#tools nav ul li:last-child {
		border-bottom: none;
	}
}

a#tools-button {
	color: #fff;
	background-image: url(images/tools-bg.svg);
	background-size: 154px 122px;
	background-position: bottom;
	width: 154px;
	height: 50px;
	display: block;
	text-align: center;
	/*font-size: 16pt;*/
        font-size: 12pt;
	position: absolute;
	right: 70px;
	background-repeat: no-repeat;
        letter-spacing: .1em;
}
a#tools-button span {
	position: relative;
	/*top: 4px;*/
        top: -3px;
        padding-left: 4px;
}

img.tools-icon {
    max-height: 20px;
    max-width: 20px;
    display: inline-block;
    margin-top: 8px;
    margin-left: 3px;
}


/*******************************************************************************

	BANNERS

*******************************************************************************/

div.banner-interior {
	margin: 0 auto;
	text-align: center;
	position: relative;
	height: 166px;
	border-bottom: solid 8px #00adee;
	overflow: visible;
	background-color: #666;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

div.banner-interior.no-bottom-border {
	border-bottom: none;
	height: 158px;
}

div.banner-overlay-holder {
	margin: 0 auto;
	width: 1024px;
	position: relative;
	z-index: 2;
}

div.banner-overlay {
	position: absolute;
	top: 42px;
	left: 116px;
	width: 1024px;
	color: #fff;
	font-size: 26pt;
	font-weight: bold;
	text-align: left;
}

div.banner-overlay.banner-overlay-no-icon {
	top: 52px;
	left: 106px;
}

div.banner-overlay img {
	margin-right: 20px;
	max-width: 66px;
	max-height: 66px;
	vertical-align: middle;
}

div.banner-overlay h1 {
	display: inline-block;
	margin: 0;
	font-size: 26pt;
}

div.banner-homepage {
	margin: 0 auto;
	text-align: center;
	position: relative;
	height: 418px;
	border-bottom: solid 8px #00adee;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

div.banner-homepage.no-bottom-border {
	border-bottom: none;
	height: 410px;
}

@media screen and (max-width : 1023px) {
	div.banner-homepage {
		height: 300px;
	}
}

@media screen and (max-width : 800px) {
	
	div.banner-interior.no-bottom-border {
		height: auto;
	}
	
	div.banner-overlay-holder {
		width: 100%;
	}
	
	div.banner-overlay {
		width: 90%;
		position: inherit;
		margin: 0 auto;
		padding: 6.5% 0;
		top: auto;
		left: auto;
	}
	
	div.banner-overlay.banner-overlay-no-icon {
		top: auto;
		left: auto;
	}
	
	div.banner-homepage {
		height: auto;
	}
}

@media screen and (max-width : 568px) {
	div.banner-interior {
		background-image: none !important;
		background-color: #000a8b;
	}
	
	div.banner-interior.no-bottom-border {
		height: auto;
	}
	
	div.banner-overlay-holder {
		width: 100%;
	}
	
	div.banner-overlay {
		position: inherit;
		width: 100%;
		top: auto;
		left: auto;
		text-align: center;
		padding: 20px;
		font-size: 8vw;
	}
	
	div.banner-overlay.banner-overlay-no-icon {
		top: auto;
		left: auto;
	}
	
	div.banner-overlay > h1 {
		margin-top: 20px;
		margin-right: 10px;
		margin-left: 10px;
		font-size: 7vw;
	}

	div.banner-overlay.banner-overlay-no-icon > h1 {
		margin-top: 0;
	}

	div.banner-overlay img {
		margin-right: 10px;
		margin-left: 10px;
	}

}

div.banner-button-interior {
	margin: 0 auto;
	text-align: center;
	position: relative;
	height: 190px;
}

div.banner-buttons {
	margin: 0 auto;
	position: relative;
	width: 1024px;
	z-index: 2;
}

div.banner-buttons a {
	position: absolute;
	
	left: 0;
	top: 0;
	margin-top: 10.2%;
	width: 18.55%;
	height: 18.55%;
}

div.banner-buttons a img {
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	div.banner-buttons a img {
		width: 190px;
		height: 190px;
	}
}
@media all and (max-width : 900px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	div.banner-buttons a img {
		width: 170px;
		height: 170px;
	}
}

div.banner-button-interior div.banner-buttons a {
	margin-top: 0;
}

div.banner-button-interior div.banner-buttons a:nth-child(1) {
	margin-left: 17.58%;
}
div.banner-button-interior div.banner-buttons a:nth-child(2) {
	margin-left: 41.02%;
}
div.banner-button-interior div.banner-buttons a:nth-child(3) {
	margin-left: 64.06%;
}

div.banner-homepage div.banner-buttons a:nth-child(1) {
	margin-left: 17.58%;
}
div.banner-homepage div.banner-buttons a:nth-child(2) {
	margin-left: 17.58%;
}
div.banner-homepage div.banner-buttons a:nth-child(3) {
	margin-left: 41.02%;
}
div.banner-homepage div.banner-buttons a:nth-child(4) {
	margin-left: 64.06%;
}

div.banner-buttons a .desktop {
	display: block;
}
div.banner-buttons a .mobile {
	display: none;
}

@media screen and (max-width : 1023px) and (min-width : 400px) {
	div.banner-homepage div.banner-buttons a, div.banner-buttons a {
		font-size: 20pt !important;
	}
}

@media screen and (max-width : 1023px) {
	div.banner-buttons {
		width: 100%;
	}
	
	div.banner-buttons a {
		margin-top: 6.8%;
	}
}

@media screen and (max-width : 799px) {
	
	div.banner-buttons {
		width: 100%;
		padding: 30px 0 10px 0;

		position: inherit;
		z-index: auto;
	}
	
	div.banner-homepage div.banner-buttons a,
	div.banner-buttons a {
		position: relative;
		top: auto;
		display: block;
		margin: 0 auto 20px auto;
		width: 90%;
		height: auto;
		border-radius: 500px;
		padding: 10px;
		font-size: 7vw;
		
		background-color: #e1e4e5;
		border: solid 5px #00adee;
		color: #303b41;
		text-align: center;
		font-weight: bold;
		
		max-width: 300px;
	}
	
	div.banner-homepage div.banner-buttons a:nth-child(1),
	div.banner-homepage div.banner-buttons a:nth-child(2),
	div.banner-homepage div.banner-buttons a:nth-child(3),
        div.banner-homepage div.banner-buttons a:nth-child(4),
	div.banner-button-interior div.banner-buttons a:nth-child(1),
	div.banner-button-interior div.banner-buttons a:nth-child(2),
	div.banner-button-interior div.banner-buttons a:nth-child(3) {
		margin-left: auto;
	}
	
	div.banner-button-interior {
		height: auto;
	}
	
	div.banner-buttons a .desktop {
		display: none;
	}
	div.banner-buttons a .mobile {
		display: block;
	}
	
	div.banner-buttons a img {
		display: inline;
		vertical-align: middle;
		margin: 0 10px 0 auto;
	}
	
	div.banner-button-interior div.banner-buttons a:nth-child(1) img {
		width: 21.1%;
		height: 19.3%;
	}
	div.banner-button-interior div.banner-buttons a:nth-child(2) img {
		width: 20.7%;
		height: 19.3%;
	}
	div.banner-button-interior div.banner-buttons a:nth-child(3) img {
		width: 20.7%;
		height: 18.9%;
	}

	div.banner-homepage div.banner-buttons a:nth-child(1) img {
		width: 21.1%;
		height: 19.3%;
	}
	div.banner-homepage div.banner-buttons a:nth-child(2) img {
		width: 21.1%;
		height: 19.3%;
	}
	div.banner-homepage div.banner-buttons a:nth-child(3) img {
		width: 20.7%;
		height: 19.3%;
	}
	div.banner-homepage div.banner-buttons a:nth-child(4) img {
		width: 20.7%;
		height: 18.9%;
	}
	
	div.banner-buttons a div {
		position: inherit;
		bottom: auto;
		width: auto;
		text-align: center;
	}
}

/*******************************************************************************

	HOMEPAGE CONTENT

*******************************************************************************/

div.homepage-content {
	width: 724px;
	margin: 0 auto;
	text-align: center;
}

div.homepage-content h1 {
	color: #005cb9;
	font-weight: bold;
	font-size: 20pt;
	margin-top: 40px;
	margin-bottom: 40px;
	line-height: 1.4em;
}

div.x-factor {
	margin: 40px auto;
	border-top: solid 1px #93a8ad;
	border-bottom: solid 1px #93a8ad;
	padding: 20px 0;
	text-align: center;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.4em;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	div.homepage-content {
		width: 80%;
	}
}

@media screen and (max-width : 568px) {
	div.homepage-content {
		width: 90%;
		max-width: 380px;
	}
}

@media screen and (max-width : 400px) {
	div.homepage-content h1 {
		font-size: 7vw;
	}
}

/*******************************************************************************

	HOMEPAGE CALLOUTS

*******************************************************************************/

div.homepage-callouts {
	width: 724px;
	margin: 0 auto 70px auto;
}

div.homepage-callouts a {
	float: left;
	width: 220px;
	color: #303b41;
	text-align: center;
	margin-left: 32px;
}
div.homepage-callouts a:first-child {
	margin-left: 0;
}

div.homepage-callouts a img {
	width: 80px;
	height: 80px;
}

div.homepage-callouts h2 {
	font-size: 18pt;
	margin-top: 4px;
	margin-bottom: 6px;
}

div.homepage-callouts p {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.6;
}

div.homepage-callouts a div.button {
	width: 180px;
	background-color: #00adee;
	text-align: center;
	color: #fff;
	border-radius: 15px;
	padding: 5px 0;
	margin: 0 auto;
}

div.homepage-callouts a:hover div.button {
	background-color: #0091c7;
}

@media screen and (max-width : 800px) and (min-width : 400px) {
	div.homepage-callouts h2 {
		font-size: 20pt !important;
	}
}

@media screen and (max-width : 800px) {
	
	div.homepage-callouts {
		width: 80%;
	}
	
	div.homepage-callouts h2 {
		font-size: 7vw;
	}
	
	div.homepage-callouts a {
		float: none;
		display: block;
		width: 100%;
		max-width: 350px;
		margin: 0 auto 36px auto;
	}
	div.homepage-callouts a:first-child {
		margin-left: auto;
	}

}

/*******************************************************************************

	INTERIOR CONTENT

*******************************************************************************/

div.interior-content {
	width: 812px;
	margin: 0 auto 70px auto;
}

div.interior-content p {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.4em;
}

div.interior-left-content {
	width: 544px;
	float: left;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
}
div.interior-content-blog-post {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
}

div.interior-left-content a img {
	border: solid 1px #00adee;
}

div.interior-left-content p,
div.interior-left-content li,
div.interior-content-blog-post p,
div.interior-content-blog-post li {
	line-height: 1.5em !important;
}

div.interior-left-content > p:first-child {
	margin-top: 32px;
}

div.interior-content h2 {
	color: #005cb9;
	font-weight: bold;
	font-size: 20pt;
	margin-top: 30px;
	margin-bottom: 16px;
	font-family: 'Montserrat', sans-serif;
}

div.interior-content h3 {
	color: #005cb9;
	margin-top: 30px;
	margin-bottom: 16px;
	font-size: 16pt;
	font-family: 'Montserrat', sans-serif;
}

div.interior-content h3.dark {
	color: #303b41;
}

div.interior-content h3 img {
	vertical-align: middle;
	margin-right: 8px;
}

div.interior-content h4 {
	margin-top: 20px;
	margin-bottom: 12px;
	font-size: 16pt;
	color: #005cb9;
}

div.interior-callouts {
	float: right;
	width: 196px;
	margin: 30px 0 0 0;
	position: relative;
}

div.interior-callouts-blog {
	width: 242px;
}

div.interior-callouts a.callout {
	display: table;
	width: 196px;
	height: 62px;
	border-radius: 500px;
	background-color: #00adee;
	margin: 0 0 18px 0;
}

div.interior-callouts a.callout:hover {
	background-color: #0091c7;
}

div.interior-callouts a.callout div.callout-image {
	display: table-cell;
	vertical-align: middle;
	width: 64px;
	text-align: center;
}

div.interior-callouts a.callout div.callout-image img {
}

div.interior-callouts a.callout div.callout-text {
	display: table-cell;
	vertical-align: middle;
	width: 132px;
	color: #fff;
	font-size: 14pt;
	font-weight: bold;
	text-align: left;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	
	div.interior-content {
		width: 100%;
	}
	
	div.interior-left-content {
		width: 60%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	div.interior-callouts {
		width: 25%;
		margin-right: 5%;
	}
	
	div.interior-callouts a.callout {
		width: 100%;
		height: auto;
		padding: 5% 5%;
	}
	
	div.interior-callouts a.callout div.callout-text {
		font-size: 2.1vw;
	}
	
	div.interior-callouts a.callout div.callout-image {
		width: 26%;
		padding-left: 3%;
		padding-right: 3%;
	}
	
	div.interior-callouts a div.callout-image img {
		width: 100%;
	}
	
	div.interior-content-blog-post {
		width: 90%;
		margin: 0 auto;
	}
	
    div.interior-no-callouts {
		margin-left: 5%;
		margin-right: 5%;
	}
}

@media screen and (max-width : 800px) and (min-width : 569px) {

	/*
	OVERRIDING SOME STUFF IN ABOVE MEDIA QUERY FOR HOLIDAY SCHEDULE PAGE
	*/

	body#page-91 div.interior-callouts a.callout div.callout-image {
		width: 16%;
	}
	body#page-91 div.interior-callouts a.callout {
		padding: 3% 3%;
	}
	
	/*
	REPEATING SOME STUFF IN BELOW MEDIA QUERY FOR HOLIDAY SCHEDULE PAGE
	*/
	
	body#page-91 div.interior-content {
		width: 100%;
	}
	
	body#page-91 div.interior-content img {
		max-width: 100%;
		height: auto;
	}
	
	body#page-91 div.interior-left-content {
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	body#page-91 div.interior-left-content h2 {
		text-align: center;
	}
	
	body#page-91 a.pop-header > div > div:nth-child(3) {
		display: none;
	}
	
	body#page-91 div.interior-callouts {
		float: none;
		width: 100%;
	}
	
	body#page-91 div.interior-callouts a.callout {
		margin: 0 auto 18px auto;
		width: 90%;
		padding-right: 20px;
		
		/* CHANGED */
		max-width: 400px;
	}
	
	body#page-91 div.interior-callouts a.callout div.callout-text {
		
		/* CHANGED */
		font-size: 4vw;
	}
	
}

@media screen and (max-width : 568px) {
	
	div.interior-content {
		width: 100%;
	}
	
	div.interior-content h2 {
		font-size: 6.5vw;
	}
	
	div.interior-content h3 {
		font-size: 6vw;
	}
	
	div.interior-content h4 {
		font-size: 5vw;
	}
	
	div.interior-content img {
		max-width: 100%;
		height: auto;
	}
	
	div.interior-left-content {
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	div.interior-left-content h2 {
		text-align: center;
	}
	
	a.pop-header > div > div:nth-child(3) {
		display: none;
	}
	
	div.interior-callouts {
		float: none;
		width: 100%;
	}
	
	div.interior-callouts a.callout {
		margin: 0 auto 18px auto;
		width: 90%;
		padding-right: 20px;
	}
	
	div.interior-callouts a.callout div.callout-text {
		font-size: 5vw;
	}
	
	div.interior-content-blog-post {
		width: 90%;
		margin: 0 auto;
	}
	
	div.interior-content iframe {
		width: 100%;
	}
	
    div.interior-no-callouts {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

/*******************************************************************************

	FOOTER

*******************************************************************************/

footer {
	background-color: #5a636b;
	color: #fff;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	
}

div.footer-inner {
	width: 1024px;
	margin: 0 auto;
	padding: 36px 28px 30px 28px;
}

footer nav {
	display: inline;
}

div.footer-menu {
	float: left;
	margin: 0 56px 0 0;
}

div.breaker {
	display: none;
}

footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

footer ul li {
	margin: 0;
	padding: 0;
}

footer div.footer-subheader {
	margin: 0 0 6px 0;
	font-size: 11pt;
	color: #b1bcc4;
	font-weight: bold;
}

footer ul li a {
	color: #fff;
	font-size: 10pt;
}

div.footer-info {
	float: right;
	border-left: solid 1px #99a4ad;
	padding: 0 0 0 36px;
	width: 200px;
}

div.footer-info img.metro-logo {
}

div.footer-info p {
	color: #fff;
	font-size: 10pt;
	line-height: 1.4;
	margin-top: 10px;
	margin-bottom: 14px;
}

div.footer-info div.footer-social a {
	margin: 0 5px 0 0;
	float: left;
}

div.footer-info div.footer-social a img {
}

footer div.sub-footer {
	background-color: #303b41;
}

footer div.sub-footer div.footer-inner {
	width: 1024px;
	margin: 0 auto;
	padding: 10px 28px;
}

/*
footer div.sub-footer a {
	color: #303b41;
	background-color: #fff;
	border: solid 1px #99a4ad;
	border-radius: 4px;
	padding: 6px 14px;
	float: left;
	font-size: 11pt;
}
*/

footer div.sub-footer div#google_translate_element {
	width: 443px;
	float: left;
}

footer div.sub-footer div#google_translate_element div.goog-te-gadget {
	color: #99a4ad;
}

footer div.sub-footer div#google_translate_element a.goog-logo-link {
	color: #99a4ad;
}

footer div.sub-footer div.copyright {
	float: right;
	color: #99a4ad;
	font-size: 11pt;
	margin-top: 5px;
}

footer div.sub-footer div.privacy {
        line-height: 2.1;
        font-size: 10pt;
        display: inline-block;
}

footer div.sub-footer div.privacy a {
        color: #99a4ad;
}

/* MOBILE FOOTER */


@media screen and (max-width : 1023px) {
	footer {
		text-align: center;
	}

	div.footer-inner {
		width: 100%;
		margin: 0 auto;
		padding: 36px 28px 30px 28px;
		text-align: center;
	}
	
	div.footer-inner nav {
		text-align: center;
	}
	
	div.footer-menu {
		float: none;
		display: inline-block;
		text-align: center;
		margin-bottom: 30px;
		vertical-align: top;
	}
	
	div.footer-menu:nth-child(3),
	div.footer-menu:nth-child(6) {
		margin-right: 0;
	}
	
	div.breaker {
		display: block;
	}
	
	footer div.footer-subheader {
		font-size: 13pt;
	}

	div.footer-info {
		float: none;
		border-left: none;
		padding-left: 0;
		margin: 0 auto;
	}
	
	div.footer-info div.footer-social a {
		float: none;
	}
	
	div.footer-info div.footer-social a img {
		width: 32px;
		height: 32px;
	}
	
	footer div.sub-footer div.footer-inner {
		width: 100%;
		padding: 30px 20px;
	}
	
	footer div.sub-footer a {
		float: none;
		display: inline-block;
	}
	
	footer div.sub-footer div.copyright {
		float: none;
		margin-top: 16px;
	}

	footer div.sub-footer div#google_translate_element {
		float: none;
		width: auto;
	}
	
	footer div.sub-footer div#google_translate_element div.goog-te-gadget div:first-child {
		display: block !important;
	}
}

@media screen and (max-width : 568px) {
	div.footer-menu {
		float: none;
		display: block;
		margin: 0 0 32px 0;
	}
	
	footer ul li {
		margin: 0 0 4px 0;
	}
	
	footer ul li a {
		font-size: 12pt;
	}
}

/*******************************************************************************

	SLIDES

*******************************************************************************/

div.carousel {
	position: relative;
}

div.carousel-headline {
	background-color: #303b41;
}

div.carousel-headline-inner {
	width: 1024px;
	margin: 0 auto;
	padding: 20px 128px;
	font-size: 18pt;
	color: #fff;
}

div.carousel-text {
	background-color: #ffff01;
	min-height: 136px;
}

div.carousel-text-inner {
	width: 1024px;
	margin: 0 auto;
	padding: 20px 128px 36px 128px;
	color: #231f20;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.6;
}

div.carousel-text-inner p {
	margin: 0;
}

div.carousel-text a {
	color: #00adee;
	font-weight: bold;
}

div.carousel-headline div.carousel-headline-inner > div {
	display: none;
}

div.carousel-text div.carousel-text-inner > div {
	display: none;
}

div.carousel-headline div.carousel-headline-inner > div:first-child {
	display: block;
}

div.carousel-text div.carousel-text-inner > div:first-child {
	display: block;
}


.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}

.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
}

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}

.rslides1_nav {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	top: 173px;
	left: 40px;
	z-index: 99;
	text-indent: -9999px;
	overflow: hidden;
	height: 63.688px;
	width: 63.688px;
	background-image: url("images/carousel-left-1.svg");
}

.rslides1_nav:active {
	opacity: 1.0;
}

.rslides1_nav.next {
	left: auto;
	background-image: url("images/carousel-right-1.svg");
	right: 40px;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	div.carousel-text-inner {
		width: 100%;
		padding: 1.95% 12.5%;
	}
	
	div.carousel-headline-inner {
		width: 100%;
		padding: 1.95% 12.5%;
	}
}

@media screen and (max-width : 568px) {
	.rslides1_nav {
		height: 40px;
		width: 40px;
		left: 20px;
	}
	.rslides1_nav.next {
		right: 20px;
	}
	
	div.carousel-headline-inner {
		width: 80%;
		padding: 20px 0;
		text-align: center;
		font-size: 6vw;
	}
	div.carousel-text-inner {
		width: 80%;
		padding: 20px 0;
		text-align: center;
	}
}

/*******************************************************************************

	RIDER ALERTS PAGE

*******************************************************************************/

div.alert-pop {
	margin: 0 0 12px 0;
}

a.pop-header {
	border: solid 1px #00adee;
	vertical-align: middle;
	font-size: 14pt;
	display: table;
	color: #303b41;
	width: 100%;
}

a.pop-header > div {
	display: table-row;
}

a.pop-header > div > div {
	display: table-cell;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
}

a.pop-header > div > div:nth-child(1) {
	background-color: #303b41;
	color: #fff;
	width: 48px;
	text-align: center;
}

div.alert-Emergency,
a.pop-header > div > div.alert-Emergency {
	background-color: #ca161c;
	color: #fff;
}
div.alert-Systemwide,
a.pop-header > div > div.alert-Systemwide {
	background-color: #ca161c;
	color: #fff;
}
div.alert-MetroLink,
a.pop-header > div > div.alert-MetroLink {
	background-color: #ca161c;
	color: #fff;
}
div.alert-MetroBus,
a.pop-header > div > div.alert-MetroBus {
	background-color: #ca161c;
	color: #fff;
}
div.alert-Elevator,
a.pop-header > div > div.alert-Elevator {
	background-color: #ca161c;
	color: #fff;
}

a.pop-header > div > div:nth-child(2) {
	padding-left: 18px;
	font-weight: bold;
	text-align: left;
}

a.pop-header > div > div:nth-child(3) {
	text-align: right;
	color: #005cb9;
}

a.pop-header > div > div:nth-child(4) {
	width: 44px;
	padding: 0 10px 0 12px;
}
a.pop-header > div > div:nth-child(4) img {
	width: 22px;
	height: 14px;
	border: none;
}

div.pop-body {
	padding: 24px 60px;
	background-color: #e1e4e5;
	border-left: solid 1px #00adee;
	border-right: solid 1px #00adee;
	border-bottom: solid 1px #00adee;
	display: none;
}

div.pop-body > div {
	border-top: solid 1px #303b41;
}
div.pop-body > div:first-child {
	border-top: 0;
}

div.interior-top-holder {
	background-color: #303b41;
}

div.alert-top-holder {
	/*
	background-color: #ca161c;
	*/
	background-color: #303b41;
}

div.interior-top-holder > div,
div.alert-top-holder > div {
	margin: 0 auto;
	/*
	padding: 20px 0 40px 0;
	*/
	padding: 20px 0 30px 0;
	width: 812px;
	color: #fff;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.5em;
}

img.alert-icon {
	width: 42px;
	height: auto;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	div.interior-top-holder > div,
	div.alert-top-holder > div {
		width: 90%;
	}
}

@media screen and (max-width : 568px) {
	
	div.interior-top-holder {
		text-align: center;
	}
	
	div.interior-top-holder > div,
	div.alert-top-holder > div {
		width: 90%;
	}
}



/*******************************************************************************

	FARE DETAILS

*******************************************************************************/

div.fare-details {
	border-top: solid 1px #00adee;
	border-right: solid 1px #00adee;
	display: table;
	width: 100%;
}

div.fare-details > div {
	display: table-row;
}

div.fare-details > div:first-child > div {
	background-color: #005cb9;
	color: #fff;
	font-weight: bold;
	font-size: 16pt;
	border-top: none;
}

div.fare-details > div > div {
	border-bottom: solid 1px #00adee;
	border-left: solid 1px #00adee;
	display: table-cell;
	padding: 12px 12px;
	font-size: 11pt;
	text-align: left;
	background-color: #f0f1f3;
}

div.fare-details > div:nth-child(even) > div {
	background-color: #e4f7fd;
}

div.fare-details > div > div:nth-child(1),
div.fare-details > div > div:nth-child(3) {
	font-weight: bold;
}

div.fare-details > div > div:nth-child(2),
div.fare-details > div > div:nth-child(3) {
	text-align: center;
}

div.fare-details-footer {
	display: table;
	margin-top: 20px;
}

div.fare-details-footer > div {
	padding-top: 8px;
	text-align: left;
	display: table-row;
}

div.fare-details-footer > div > div {
	font-size: 11pt;
	padding: 3px 2px;
	display: table-cell;
}

div.fare-details-footer > div > div:first-child {
	text-align: right;
	padding-left: 20px;
}

@media screen and (max-width : 568px) {
	
	/*
	body#page-41 div.interior-left-content {
		text-align: center;
	}
	*/
	
	div.fare-details > div:first-child > div {
		font-size: 12pt;
	}
	
	div.fare-details > div:first-child > div > span {
		display: none;
	}
	
	div.fare-details > div > div {
	}

}

/*******************************************************************************

	FAQs

*******************************************************************************/

a.faq-category-button {
	background-color: #e1e4e5;
	border-radius: 500px;
	margin: 0 14px 14px 0; 
	color: #303b41;
	padding: 10px 24px;
	display: inline-block;
	font-size: 14pt;
}
a.faq-category-button:hover {
	background-color: #c3c7c8
}

a.faq-category-button.active {
	background-color: #005cb9;
	color: #fff;
}
a.faq-category-button.active:hover {
}

div.faq {
	/*
	display: none;
	*/
	margin: 0 0 20px 0;
	position: relative;
}

div.faq a.faq-question {
	display: block;
	font-size: 14pt;
	color: #303b41;
	line-height: 1.4em;
}

div.faq a.faq-question img {
	width: 13.241px;
	height: 22.434px;
	float: left;
	border: none;
}

div.faq a.faq-question div {
	margin-left: 28px;
}

div.faq a.faq-answer {
	display: none;
	background-color: #e1e4e5;
	color: #303b41;
	padding: 12px 38px 12px 28px;
	margin: 8px 0 0 0;
	position: relative;
	font-size: 12pt;
	line-height: 1.4em;
}

div.faq a.faq-answer div.faq-x {
	position: absolute;
	bottom: 10px;
	right: 18px;
	font-weight: bold;
}

div.faq-footer {
	margin-top: 32px;
}

@media screen and (max-width : 568px) {
	a.faq-category-button {
		text-align: center;
		display: block;
		width: 100%;
		margin: 0 0 10px 0; 
		padding: 14px 24px;
	}

	div.faq a.faq-question div {
	}
	
	div.faq a.faq-answer {
		padding: 12px 38px 22px 28px;
	}
	
	div.faq-footer {
	}
}

/*******************************************************************************

	SYSTEM MAPS

*******************************************************************************/

a.system-map {
	display: block;
	float: left;
	color: #303b41;
	width: 257px;
	margin-bottom: 40px;
	font-weight: bold;
}
a.system-map:nth-child(even) {
	margin-right: 30px;
}

a.system-map img {
	border: solid 1px #00adee;
	margin-bottom: 12px;
	width: 255px;
	height: 144px;
}

a.system-map p {
	margin: 0;
}

@media screen and (max-width : 1023px) {
	body#page-85 div.interior-content > h2 {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	
	a.system-map {
		width: 47%;
		margin-bottom: 6%;
		font-size: 2vw;
	}
	a.system-map:nth-child(even) {
		margin-right: 6%;
	}
	
	a.system-map img {
		margin-bottom: 4%;
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width : 568px) {
	
	body#page-85 div.interior-content {
		text-align: center;
	}
	
	a.system-map {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	a.system-map:last-child {
		margin-bottom: 0;
	}
	
	a.system-map:nth-child(even) {
		margin-right: 0;
	}
	
	a.system-map img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: auto;
		margin-bottom: 4px;
	}
}

/*******************************************************************************

	MetroBus Schedule

*******************************************************************************/

div.header-tagalong {
	float: right;
	margin-top: 30px;
}

div.header-tagalong span {
	position: relative;
	top: 5px;
	font-size: 10pt;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
}

div.alert-key {
	background-color: #ca161c;
	border: solid 1px #00adee;
	width: 36px;
	height: 32px;
	float: left;
	margin-right: 10px;
}

div.metrobus-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	
	-webkit-column-gap: 18px;
    -moz-column-gap: 18px;
    column-gap: 18px;
		
	line-height: 1.6em;
}

/*
div.route-list {
	margin-top: 10px;
}
*/

/*div.route-list > a {*/
div.metrobus-columns-item {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

div.metrobus-columns-item > a {
	display: block;
	border: solid 1px #00adee;
	margin: 0 0 0 0;
	width: 100%;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
}
div.metrobus-columns-item > div.spacer {
	height: 10px;
}
/*
div.route-list > a:nth-child(3n+3) {
	margin-right: 0;
}
*/

/*div.route-list > */
div.metrobus-columns-item > a > div.route-number {
	color: #fff;
	background-color: #303b41;
	display: table-cell;
	width: 36px;
	padding: 10px 2px;
	text-align: center;
}
/*div.route-list > */
div.metrobus-columns-item > a > div.route-number.alert {
	background-color: #ca161c;
}

/*div.route-list > */
div.metrobus-columns-item > a > div.route-name {
	display: table-cell;
	color: #303b41;
	padding: 10px;
	text-align: left;
}

span.route-state-anchor {
	display: block;	
	margin-top: 40px;
	margin-left: 10px;
	float: left;
}
	
div.route-state-anchor-separate-line{
	display: none;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	
	/*
	page id 87 = Metrobus
	page id 89 = Metrobus
	*/
	
	body#page-87 div.interior-content,
	body#page-89 div.interior-content {
		text-align: center;
		width: 90%;
	}
	
	/*
	div.route-list > a {
		width: 48%;
		font-size: 14pt;
	}

	div.route-list > a:nth-child(even) {
		margin-right: 0;
	}
	
	div.route-list > a:nth-child(odd) {
		margin-right: 4%;
	}
	*/
	
	div.metrobus-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
	
	span.route-state-anchor {
		display: none;	
	}
	
	div.route-state-anchor-separate-line{
		display: inline;
		float: left;
		margin-bottom: 10px;
	}

}

@media screen and (max-width : 568px) {
	
	body#page-87 div.interior-content,
	body#page-89 div.interior-content {
		text-align: center;
		width: 90%;
	}
	
	/*
	div.route-list {
	}
	
	div.route-list > a {
		float: none;
		width: 100%;
		font-size: 14pt;
	}
	
	div.route-list > a.route-number {
		width: 50px;
	}
	div.route-list > a.route-name {
	}
	*/

	div.metrobus-columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	
	div.header-tagalong {
		float: none;
	}
	div.header-tagalong span {
		top: 2px;
		font-weight: bold;
		font-size: 14pt;
	}
	
	div.alert-key {
		float: none;
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		height: 42px;
	}
	
	span.route-state-anchor {
		margin: 0;
		float: none;
	}
	
	div.route-state-anchor-separate-line {
		display: none;
	}
}

/*******************************************************************************

	Metrolink Schedule

*******************************************************************************/

body#page-89 div.interior-content h2 {
	margin-bottom: 16px;
	float: left;
}

div.metrolink-pdf-buttons {
	float: left;
        margin: 0 0 12px 0;
}

div.metrolink-pdf-buttons a {
	/*margin-left: 12px;
	margin-top: 26px;*/
	display: inline-block;
}

/*div.route-list > */
div.metrobus-columns-item > a > div.station-alert-box {
	background-color: #303b41;
        display: table-cell;
	width: 12px;
	padding: 10px 2px;
}

/*div.route-list > */
div.metrobus-columns-item > a > div.station-name {
	display: table-cell;
	color: #303b41;
        padding-top: 10px;
        padding-bottom: 10px;
	padding-right: 10px;
        padding-left: 5px;
	text-align: left;
}

/*div.route-list > */
div.metrobus-columns-item > a > div.station-alert-box.alert {
	background-color: #ca161c;
}

@media screen and (max-width : 780px) {
	body#page-89 div.interior-content h2 {
		margin-bottom: 20px;
	}
	
	div.metrolink-pdf-buttons {
		float: none;
		clear: both;
		text-align: left;
		margin-bottom: 28px;
	}
	
	div.metrolink-pdf-buttons a {
		margin-top: 0;
		margin-left: 0;
		margin-right: 12px;
	}
}

@media screen and (max-width : 568px) {
	
	body#page-89 div.interior-content h2 {
		float: none;
	}
	
	div.metrolink-pdf-buttons a {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0 auto 10px auto;
		float: none;
	}
	
}

/*******************************************************************************

	Single Route

*******************************************************************************/

div.route_header {
	float: left;
	margin: 0 18px 0 0;
}

div.route_header h3,
div.schedule_header h3,
div.route_header div.h3,
div.schedule_header div.h3 {
	margin: 0 0 12px 0;
	/*
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	*/
	font-size: 14pt;
}
div.schedule_header h3,
div.schedule_header div.h3 {
	margin: 40px 0 20px 0;
}

div.schedule_header h3.floatleft div,
div.schedule_header div.h3.floatleft div {
	display: inline;
	margin-right: 10px;
}

div.route_header a {
	border-radius: 500px;
	padding: 12px 17px;
	background-color: #e1e4e5;
	color: #303b41;
	margin: 0 7px 0 0;
	display: inline-block;
	font-weight: normal;
	font-size: 11pt;
}
div.route_header a:hover {
	background-color: #c3c7c8
}
div.route_header a.active {
	background-color: #005cb9;
	color: #fff;
}

div.route_header span {
	display: inline-block;
	margin-right: 12px;
}

div.route_header.alerts-mobile {
	display: none;
}

div.route_header.alerts-desktop {
	margin-right: 16px;
	position: relative;
	z-index: 2;
	float: right;
}

div.route_header.alerts-desktop a,
div.route_header.alerts-mobile a {
	background-color: #ca161c;
	color: #fff;
	margin-right: 0;
	text-align: center;
}
div.route_header.alerts-desktop a {
	width: 136px;
}
div.route_header.alerts-desktop a:hover,
div.route_header.alerts-mobile a:hover {
	background-color: #9a1318;
}

div.route_header.alerts-desktop a {
}

div.top-scroll-wrapper {
	height: 20px;
	width: 812px;
	overflow-x: scroll;
	overflow-y:hidden;
}

div.schedule-table {
	width: 812px;
	overflow-x: auto;
	border-left: solid 1px #00adee;
	border-right: solid 1px #00adee;
}

table.schedule-table {
	border-collapse: collapse;
	min-width: 812px;
}

table.schedule-table-metrolink-system {
        table-layout: fixed;
	border-collapse: collapse;
	min-width: 812px;
}

.schedule-table-loading {
        opacity: 0.5;
}

div.route-comments {
	margin: 10px 0 30px 0;
	line-height: 1.2;
}

.hidden {
	display: none !important;
}

table.schedule-table td {
	border-top: solid 1px #00adee;
	border-bottom: solid 1px #00adee;
	border-left: solid 1px #00adee;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 10pt;
	padding: 10px;
	vertical-align: top;
}

table.schedule-table td:first-child {
	border-left: none;
}

table.schedule-table thead tr td {
	background-color: #e1e4e5;
	font-weight: bold;
}

.table-metrolink-system-time-span {
        display: inline-block;
	width: 70%;
}

.table-metrolink-system-td {
	border-top: solid 1px #00adee;
	border-bottom: solid 1px #00adee;
	border-left: solid 1px #00adee;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 10pt;
	padding: 3px 10px;
	vertical-align: top;
        min-width: 110px;
}

.table-metrolink-system-td:first-child {
	border-left: none;
}

.table-metrolink-system-thead-td {
	background-color: #e1e4e5;
	font-weight: bold;
        padding: 10px !important;
}

div.route-buttons-desktop {
	font-size: 11pt;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 40px;
}
div.route-buttons-mobile {
	display: none;
}

div.route-buttons-desktop-metrolink {
	font-size: 11pt;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 30px;
}

div.route-buttons-desktop img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 4px 0 8px;
}
div.route-buttons-desktop a:first-child img {
	margin-left: 0;
}

div.scroller-mobile {
	margin: 8px auto 18px auto;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	width: 528px;
}

div.scroller-mobile a {
	display: inline-block;
}

div.scroller-mobile a img {
	width: 64px;
	height: 64px;
}
div.scroller-mobile a.left {
	float: left;
}
div.scroller-mobile a.right {
	float: right;
}
div.scroller-mobile a.disabled {
	cursor: default;
	opacity: 0.5;
}

div.scroller-mobile span {
	width: 400px;
	float: left;
	font-size: 12pt;
	text-align: center;
	position: relative;
	top: 20px;
}

div.alerts-popup-desktop,
div.alerts-popup-mobile {
	display: none;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	margin-top: 20px;
	background-color: #e1e4e5;
	padding: 17px;
	position: relative;
	z-index: 1;
	line-height: 1.4em;
}

div.alerts-popup-desktop,
div.alerts-popup-mobile,
div.alerts-popup-desktop p,
div.alerts-popup-mobile p,
div.alerts-popup-desktop strong,
div.alerts-popup-mobile strong,
div.alerts-popup-desktop span,
div.alerts-popup-mobile span {
	text-decoration: none !important;
}

div.alerts-popup-bg {
	background-color: #e1e4e5;
	height: 80px;
	width: 162px;
	position: absolute;
	top: -80px;
	right: 0;
	display: none;
}

a.alerts-popup-x {
	color: #303b41;
	float: right;
	font-weight: bold;
}

div.red-line-blue-line {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	margin: 0 0 30px 0;
	font-weight: bold;
	line-height: 1.4;
        background-color: #e1e4e5;
        padding: 20px;
}
div.red-line-blue-line span {
	display: inline-block;
	//margin-right: 14px;
        margin-right: 7px;
}

div.columns {
	-webkit-column-count: 5;
	-moz-column-count: 5;
	column-count: 5;
	
	-webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
		
	line-height: 1.6em;

	border-top: solid 1px #00adee;
	border-left: solid 1px #00adee;
	
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
}

div.columns-print {
	border-top: solid 1px #000;
	border-left: solid 1px #000;
	width: auto;
	max-width: 90%;
	margin: 0 auto;
}

div.columns div {
	border-right: solid 1px #00adee;
	border-bottom: solid 1px #00adee;
	width: 100%;
	padding-left: 20px;
	
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

div.columns-print div {
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}

div.columns div span {
	display: inline-block;
}
div.columns div span:nth-child(1) {
	width: 60%;
}
div.columns div span:nth-child(2) {
	width: 20%;
}
div.columns div span:nth-child(3) {
	width: 20%;
}

.red-line {
	//color: #ca161c;
        color: #CC0033;  /* official metro red */
}
.blue-line {
	//color: #005cb9;
        color: #333399;  /* official metro blue */
}

.red-line-bold {
	//color: #ca161c;
        color: #CC0033;  /* official metro red */
	font-weight: bold;
}
.blue-line-bold {
	//color: #005cb9;
        color: #333399;  /* official metro blue */
	font-weight: bold;
}

.line-indicator {
	color: #ffffff;
	border-radius: 20px;
	border: solid;
	border-width: 1px;
        display: inline-block;
        min-width: 20px;
	max-width: 20px;
	line-height: 20px;
	margin-top: 2px;
	margin-right: 5px;
	text-align: center;
        font-size: .90em;
	opacity: .75;
}

.comment-indicator {
	border-radius: 10px;
	border: solid;
	border-width: 1px;
        min-width: 20px;
	max-width: 20px;
	line-height: 20px;
	margin-top: 2px;
	text-align: center;
        font-size: .90em;
}

.red-line-background {
	background-color: #CC0033;
        border-color: #CC0033;
}

.blue-line-background {
	background-color: #333399;
        border-color: #333399;
}

div.comments {
        margin-top: 10px;
}

div.single-comment {
        display: inline-block;
}

@media screen and (max-width : 1023px) {
	div.interior-content-single-route {
		width: 90%;
	}
	
	div.schedule_header h3 {
		float: none;
		margin: 30px 0 30px 0;
	}
	div.route-buttons-desktop {
		float: none;
		margin: 20px 0 30px 0;
	}
	div.route-buttons-desktop a:first-child img {
		margin-left: 0;
	}
	
	div.top-scroll-wrapper {
		width: 100%;
	}
	
	div.schedule-table {
		width: 100%;
		overflow-x: hidden;
	}
}

@media screen and (max-width : 800px) {
	div.columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

@media screen and (max-width : 568px) {
	div.interior-content-single-route {
		text-align: center;
	}
	
	div.schedule_header h3.floatleft {
		float: none;
		margin-top: 24px;
		font-size: 16pt;
	}
	div.schedule_header h3.floatleft div {
		display: block;
	}
	
	div.route_header {
		float: none;
		margin-right: 0;
		margin-top: 10px;
	}
	
	div.route_header h3 {
	}
	
	div.route_header a {
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
		font-size: 16pt;
	}
	
	div.route_header span {
		display: block;
		margin-right: 0;
		margin-bottom: 10px;
	}
	
	div.route-buttons-desktop {
		display: none;
	}
	div.route-buttons-mobile {
		display: block;
		margin-top: 32px;
	}

	div.route-buttons-mobile a {
		display: block;
		border-radius: 500px;
		background-color: #00adee;
		color: #fff;
		width: 100%;
		font-size: 17pt;
		margin: 0 auto 18px auto;
		padding: 20px;
	}
	
	div.route-buttons-mobile a img {
		vertical-align: middle;
		margin-right: 16px;
	}
	
	div.route-buttons-mobile a span {
	}
	
	div.alerts-popup-bg {
		display: none !important;
	}
	
	div.route_header.alerts-mobile {
		display: block;
		margin: 24px 0 0 0;
	}
	div.route_header.alerts-mobile a {
		margin-bottom: 0;
	}
	
	div.route_header.alerts-desktop {
		display: none;
	}
	
	div.top-scroll-wrapper {
		display: none !important;
	}
	
	div.alerts-popup-mobile {
		text-align: left;
	}
	
	div.scroller-mobile {
		width: 100%;
	}
	
	div.scroller-mobile span {
		width: 50%;
		top: 0;
	}
	
	div.scroller-mobile a {
		width: 25%;
	}
	
	div.columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		
		line-height: 1.4em;
                text-align: left;
	}

        div.red-line-blue-line {
	        font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	        margin: 0 0 30px 0;
	        font-weight: bold;
	        line-height: 1.4;
                background-color: #e1e4e5;
                padding: 20px;
                text-align: left;
        }
}

/*******************************************************************************

	News

*******************************************************************************/

div.news-release {
	border-bottom: solid 1px #00adee;
	padding: 0 0 32px 0;
	margin: 0 0 32px 0;
	display: block;
}
div.news-release:first-child {
	margin-top: 32px;
}

div.news-release div.news-release-date {
	color: #005cb9;
}

div.news-release img {
	width: 280px;
	height: auto;
	float: left;
	margin: 0 20px 0 0;
	border: solid 1px #00adee;
}

div.news-release h2 {
	font-weight: normal;
	color: #303b41;
	margin: 2px 0 6px 0;
}

div.news-release h2 a {
	color: #303b41;
}

div.news-release p {
	margin: 0;
}

div.news-release a.pill {
	background-color: #00adee;
	color: #fff;
	border-radius: 500px;
	padding: 16px;
	display: inline-block;
	margin: 16px 0 0 0;
	font-family: 'Montserrat', sans-serif;
}
div.news-release a.pill:hover {
	background-color: #0091c7;
}

.right-return-button {
	display: inline-block;
	margin: 30px 0 12px 0;
}

hr.blog-column-divider {
	margin: 20px 0;
}

ul.archive-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
}

ul.archive-list li {
	margin: 0 0 6px 0;
	padding: 0;
}

ul.archive-list li a {
	display: inline;
}

button.alm-load-more-btn.more,
button.alm-load-more-btn.more:hover {
	background-color: inherit;
	color: #00adee;
	float: left;
	font-size: 14pt;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	background-image: url(images/arrow-left.svg);
	background-size: 13px 22px;
	background-repeat: no-repeat;
	background-position: 0px center;
}

button.alm-load-more-btn.more.done {
	background-color: inherit;
	color: #00adee;
}

div.interior-content h2.archives-header {
	font-size: 16pt;
}

ul.social-follow {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.social-follow-mobile {
	display: none;
}

ul.social-follow li {
	margin: 0;
	padding: 0;
	float: left;
	margin-right: 8px;
}

ul.social-follow li:last-child {
	margin-right: 0;
}

ul.social-follow li a {
	background-color: inherit;
	border-radius: 0;
	display: inline;
}

ul.social-follow li a img {
}

@media screen and (max-width : 800px) {
	div.news-release img {
		width: 100%;
		height: auto;
		float: none;
		margin-right: 0;
	}
}

@media screen and (max-width : 568px) {
	div.news-release h2 {
		text-align: left;
	}
	
	div.news-release a.pill {
		width: 100%;
		text-align: center;
	}
	
	button.alm-load-more-btn.more,
	button.alm-load-more-btn.more:hover {
		background-color: #e1e4e5;
		border-radius: 500px;
		padding: 16px;
		width: 100%;
		background-image: none;
		float: none;
		height: auto;
		line-height: normal;
		color: #303b41;
	}
	
	button.alm-load-more-btn.more.done {
	}

	div.alm-btn-wrap {
		padding: 0;
	}
	
	div.interior-content h2.archives-header {
		background-color: #00adee;
		color: #fff;
		text-align: center;
		padding: 12px;
		margin-bottom: 0;
	}

	ul.archive-list li {
		margin-bottom: 0;
		border-bottom: solid 1px #00adee;
		
		/* Added to make # of posts work */
		background-color: #005cb9;
		color: #fff;
		text-align: center;
		display: block;
		width: 100%;
		height: auto;
		font-family: 'Montserrat', sans-serif;
		padding: 12px;
	}
	
	ul.archive-list li a {
		/* Added to make # of posts work */
		color: #fff;
		margin: 0;
		padding: 0;
		
		/* Removed to make # of posts work */
		/*
		background-color: #005cb9;
		color: #fff;
		text-align: center;
		display: block;
		margin-bottom: 0;
		width: 100%;
		height: auto;
		font-family: 'Montserrat', sans-serif;
		padding: 12px;
		*/
	}
	
	ul.social-follow-desktop {
		display: none;
	}
	ul.social-follow-mobile {
		display: block;
	}
	
	ul.social-follow {
		text-align: center;
		margin-top: 32px;
	}
	
	ul.social-follow li {
		float: none;
		display: inline-block;
		width: 39px;
	}
	
	ul.social-follow li a {
		margin: 0;
		padding: 0;
	}
}

/*******************************************************************************

	Single News Release & Blog Post

*******************************************************************************/

div.news-article,
div.blog-article {
	margin: 32px 0 0 0;
}

div.news-article div.news-date,
div.blog-article div.blog-date {
	color: #005cb9;
}

div.blog-article-header {
	float: left;
	width: 80%;
}

div.news-article h2,
div.blog-article h2 {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
	color: #303b41;
	margin: 4px 0 20px 0;
	font-size: 30pt;
}

div.blog-article h2 {
	margin-bottom: 4px;
}
div.blog-article div.blog-author {
	margin-bottom: 20px;
}

div.blog-author-link {
	margin-top: 32px;
}

div.blog-author-link a img {
	vertical-align: middle;
	display: inline-block;
	margin-left: 10px;
	border: none;
}

div.share-container {
	width: 70%;
	float: left;
}

div.share {
	margin-top: 32px;
}

a.share-return-button {
	margin-top: 20px;
	display: inline-block;
}

div.share div.intro {
	font-weight: bold;
	float: left;
	margin-right: 12px;
	font-family: 'Montserrat', sans-serif;
}

div.share div.addthis_sharing_toolbox {
	float: left;
}

div.blog-categories {
	margin-top: 32px;
	padding-top: 32px;
	border-top: solid 1px #00adee;
}

div.blog-categories > div.blog-section-header {
	font-weight: bold;
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
}

div.blog-categories > div.blog-section-header img {
	vertical-align: middle;
	display: inline-block;
	margin-right: 10px;
}

div.interior-content h2.comments-title,
div.interior-content h3#reply-title {
	height: 28px;
	color: #303b41;
	font-size: 12pt;
	font-family: 'Montserrat', sans-serif;
	background-image: url(images/icon-comments.svg);
	background-size: 28px 28px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 38px;
	margin-top: 0;
}

ol.comment-list {
	list-style: none;
	margin: 0 0 32px 0;
	padding: 0;
}

ol.comment-list li {
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: solid 1px #ccc;
}

div.previous-next-links {
	margin-top: 32px;
	padding-top: 32px;
	border-top: solid 1px #00adee;
}

div.previous-next-links a {
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

div.previous-next-links a.previous-link {
	float: left;
	background-image: url(images/arrow-left.svg);
	background-size: 13px 22px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 24px;
}

div.previous-next-links a.next-link {
	float: right;
	background-image: url(images/arrow-right-2.svg);
	background-size: 13px 22px;
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 24px;
}

div.blog-comments {
	margin-top: 32px;
	padding-top: 32px;
	border-top: solid 1px #00adee;
}

div.news-article img,
div.blog-article img {
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	font-style: italic;
	margin-top: 10px;
}

p.form-submit input#submit {
	background-color: #00adee;
	color: #fff;
	border-radius: 500px;
	padding: 12px 16px;
	font-size: 11pt;
	border: none;
}

img.alignleft {
	margin-right: 20px;
}
img.alignright {
	margin-left: 20px;
}

p.comment-form-comment label {
	display: block;
}

@media screen and (max-width : 800px) {
	div.news-article h2,
	div.blog-article h2 {
		font-size: 5vw;
	}
	
	div.share div.intro {
		float: none;
		margin-bottom: 10px;
	}
	
	div.share div.addthis_sharing_toolbox {
		float: none;
	}

	div.blog-article-header {
		width: 100%;
	}

	div.news-article img, div.blog-article img {
		width: 100%;
	}
	
	div.news-article .floatright,
	div.news-article .alignright,
	div.blog-article .floatright,
	div.blog-article .alignright,
	div.news-article .floatleft,
	div.news-article .alignleft,
	div.blog-article .floatleft,
	div.blog-article .alignleft {
		float: none;
		width: 100% !important;
	}
	
	textarea#comment {
		width: 100%;
	}
}

@media screen and (max-width : 568px) {
	div.news-article h2,
	div.blog-article h2 {
		text-align: left;
		font-size: 8vw;
	}
	
	div.share div.intro {
		float: none;
		top: auto;
		margin-bottom: 2px;
	}
	
	div.previous-next-links a.previous-link,
	div.previous-next-links a.next-link {
		background-color: #e1e4e5;
		color: #303b41;
		border-radius: 500px;
		float: none;
		background-image: none;
		padding: 16px;
		width: 100%;
		display: block;
		text-align: center;
		font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
		margin: 0 0 20px 0;
		font-weight: normal;
	}
	
	div.blog-categories > div.blog-section-header {
		display: block;
		margin: 0 0 16px 0;
	}
	
	div.blog-author-link a span {
		float: left;
	}
	div.blog-author-link a img {
		float: left;
	}
	
}

/*******************************************************************************

	NextStop Blog

*******************************************************************************/

div.blog-carousel-wrapper {
	background-color: #e1e4e5;
}

div.blog-carousel {
	max-width: 1024px;
	margin: 0 auto;
	padding: 20px 0 20px 0;
	position: relative;
}

div.blog-carousel div.blog-carousel-holder {
	position: relative;
	top: 0;
	left: 80px;
	overflow: hidden;
	height: 240px;
	width: 864px;
	z-index: 10;
}

div.blog-carousel div.blog-carousel-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 3000px;
}

div.blog-carousel a.featured-blog-post {
	width: 284px;
	height: 240px;
	overflow: hidden;
	display: block;
	float: left;
	margin: 0 6px 0 0;
	border: solid 1px #00adee;
	position: relative;
}

div.blog-carousel a.featured-blog-post > img {
	display: block;
	position: relative;
}

div.blog-carousel a.featured-blog-post > div {
	background-color: #005cb9;
	color: #fff;
	border-top: solid 1px #00adee;
	padding: 10px 30px;
	width: 284px;
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 10pt;
	height: 80px;
	overflow: hidden;
	
	position: absolute;
	bottom: 0;
}

div.blog-carousel > a.blog-left,
div.blog-carousel > a.blog-right {
	position: absolute;
	top: 88px;
	z-index: 20;
}
div.blog-carousel > a.blog-left {
	left: 2px;
}
div.blog-carousel > a.blog-right {
	right: 2px;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	div.blog-carousel {
		width: 100%;
	}
	
	div.blog-carousel div.blog-carousel-holder {
		width: 574px;
		margin: 0 auto;
		top: auto;
		left: auto;
	}

	div.blog-carousel > a.blog-left {
		left: 20px;
	}
	div.blog-carousel > a.blog-right {
		right: 20px;
	}
}

@media screen and (max-width : 568px) {
	div.blog-carousel {
		width: 100%;
	}
	
	div.blog-carousel div.blog-carousel-holder {
		width: 284px;
		margin: 0 auto;
		top: auto;
		left: auto;
	}
	
	div.blog-carousel > a.blog-left {
		left: 16px;
	}
	div.blog-carousel > a.blog-right {
		right: 16px;
	}
}

/*******************************************************************************

	Blog & News Archives

*******************************************************************************/

div.interior-top-holder.archive > div {
	font-family: 'Montserrat', sans-serif;
	font-size: 26pt;
}

/*******************************************************************************

	Customer Care

*******************************************************************************/

body#page-57 div.interior-content h3 {
	margin-top: 20px;
	margin-bottom: 6px;
}

div.information-blocks {
}

div.information-blocks > div {
	margin-top: 24px;
	margin-bottom: 24px;
}

div.information-blocks-left {
	float: left;
	width: 380px;
}
div.information-blocks-right {
	float: right;
	width: 380px;
}
div.information-blocks-full {
}

div.information-blocks > div > div:nth-child(1) {
	font-weight: bold;
	color: #005cb9;
	font-size: 16pt;
}
div.information-blocks > div > div:nth-child(2) {
	font-weight: bold;
	margin-bottom: 12px;
	
}
div.information-blocks > div > div:nth-child(3) {
	font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.4em;
}

div#gform_wrapper_1 div.gform_body {
	background-color: #e4f7fd;
	border: solid 1px #00adee;
	padding: 20px;
}

div#gform_wrapper_1 label.gfield_label {
	font-weight: normal !important;
	margin-bottom: 0px !important;
}

div.gform_footer.top_label {
	margin-top: 0 !important;
	padding-top: 20px !important;
	text-align: right;
	clear: both;
}

div#gform_wrapper_5 div.gform_footer.top_label {
	text-align: left;
}

select#input_1_1 {
	margin-bottom: 40px !important;
}

li#field_1_15 {
	display: none !important;
}

.gform_wrapper textarea.medium {
	height: 348px !important;
}

@media screen and (max-width : 1023px) {
	body#page-57 div.interior-content {
		width: 90%;
		margin: 0 auto;
	}
	
	select#input_1_1 {
		margin-bottom: 0px !important;
	}
}

@media screen and (max-width : 900px) {
	div.information-blocks-left,
	div.information-blocks-right {
		width: 100%;
		float: none;
	}
	
	hr.information-block-divider {
		display: none;
	}
}

/* form multi-column styling starts here */

/*
div.form-section {
	background-color: #e4f7fd;
	border: solid 1px #00adee;
}
*/

div.form-subheader {
	font-weight: bold;
	color: #005cb9;
	font-size: 16pt;
}

.gform_wrapper.two-column_wrapper {
	max-width: 100%;
}

.gform_wrapper.two-column_wrapper ul.gform_fields,
.gform_wrapper.two-column_wrapper ul.gform_column li.gsection:first-child {
	display: none;
}

.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {
	display: block;
	float: left;
}

.gform_wrapper.two-column_wrapper ul.one-half {
	margin-left: 6% !important;
	width: 47%;
}
.gform_wrapper.two-column_wrapper ul.one-half.first {
	margin-left: 0 !important;
}

.gform_wrapper textarea.medium,
.gform_wrapper .top_label input.medium,
.gform_wrapper .top_label select.medium {
    width: 100% !important;
}

#input_3_2,
#input_3_3,
#input_3_4 {
	width: 100%;
}

.gform_wrapper .gsection {
	border-bottom: none !important;
}

.gform_wrapper .top_label li.gfield.gf_right_half+li.gsection {
	padding: 0 !important;
}

/* form multi-column styling ends here */

div#gform_wrapper_1 input.gform_button,
div#gform_wrapper_5 input.gform_button {
	background-color: #00adee;
	border-radius: 500px;
	color: #fff;
	border: none;
	font-family: 'Montserrat', sans-serif;
	padding: 12px;
	cursor: pointer;
	width: 168px;
	-webkit-appearance: none;
}
div#gform_wrapper_1 input.gform_button:hover,
div#gform_wrapper_5 input.gform_button:hover {
	background-color: #0091c7;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {
	.gform_wrapper .ginput_complex .ginput_left {
		width: 100%;
	}
}

@media screen and (max-width : 900px) {
	.gform_wrapper.two-column_wrapper ul.one-half {
		margin-left: 0 !important;
		width: 100%;
	}
}

@media screen and (max-width : 568px) {
	div#gform_wrapper_1 input.gform_button,
	div#gform_wrapper_5 input.gform_button {
		width: 90%;
		margin: 0 auto;
		display: block;
	}
}

div#gform_confirmation_wrapper_5 {
	margin-top: 30px;
}

/*******************************************************************************

	How to Ride Page

*******************************************************************************/

div.how-to-ride-sections {
	margin-top: 32px;
}

div.how-to-ride-section {
	float: left;
	width: 254px;
	margin-bottom: 32px;
}

div.how-to-ride-section:nth-child(odd) {
	margin-right: 26px;
}

div.how-to-ride-section h2 {
	color: #005cb9;
	margin-top: 0;
	margin-bottom: 8px;
}

div.how-to-ride-section h2 a {
	color: #005cb9;
}

div.how-to-ride-section p {
	margin: 10px 0 0 0;
}

div.how-to-ride-section img {
	width: 100%;
	height: auto;
}

@media screen and (max-width : 1023px) and (min-width : 569px) {

	div.how-to-ride-section {
		width: 47%;
		margin-bottom: 6%;
		font-size: 2vw;
	}
	div.how-to-ride-section:nth-child(2n+1) {
		margin-right: 6%;
	}
	
	div.how-to-ride-section h2 {
		font-size: 3vw;
	}
	
	div.how-to-ride-section img {
		margin-bottom: 4%;
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width : 568px) {
	
	div.how-to-ride-section {
		float: none;
		width: 100%;
	}
	
	div.how-to-ride-section img {
	}
}

/*******************************************************************************

	Park & Ride Page

*******************************************************************************/

body#page-81 div.interior-left-content h4 {
	margin-bottom: 0px;
	color: #303b41;
	font-size: 14pt;
}

div.park-and-ride {
	line-height: 1.4em;
}

div#map-canvas {
	width: 544px;
	height: 400px;
	max-width: 100%;
}

div#mapLegend {
	width: 544px;
	max-width: 100%;
	white-space:normal;
	line-height: 1.4em;
}

div#mapLegend strong {
	display: inline-block;
	margin-top: 6px;
}

/*******************************************************************************

	Print Layout

*******************************************************************************/

div.print-content {
	width: 930px;
	margin: 0 auto;
}

div.print-content hr {
	background-color: #000;
}

table.schedule-table-print {
	width: auto;
	margin: 0 auto 40px auto;
}

table.schedule-table-print td {
	border: solid 1px #000;
}
table.schedule-table-print td:first-child {
	border-left: solid 1px #000;
}

table.schedule-table-print thead tr td {
	background-color: #fff;
}

@media screen and (max-width : 1023px) {
	div.print-content {
		width: 90%;
	}
	
	table.schedule-table-print {
		margin: 0 5%;
	}
}

@media screen and (max-width : 568px) {
}

/*******************************************************************************

	Videos

*******************************************************************************/

span.embed-youtube {
	text-align: left;
	
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 60%;
}

span.embed-youtube iframe {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*******************************************************************************

	Bike & Ride

*******************************************************************************/

@media screen and (max-width : 568px) {
	body#page-83 div.banner-overlay {
		position: relative;
		top: -10px;
	}
}

/*******************************************************************************

	Trip Planner iFrame

*******************************************************************************/
/*
body#page-22210 iframe {
	display: block;
	width: 1000px;
	height: 110%;
	overflow:hidden;
	margin: 0 auto;
	border: none;
}*/

/*******************************************************************************

	Trip Planner iFrame (08/23/2016 supercedes above) - Added by Steve Zoller

*******************************************************************************/

.tripplanner-iframe-container {
  position: relative;
  height: 660px; 
  overflow-y: scroll;
  overflow-x: scroll;
}
 
.tripplanner-iframe-container iframe {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  min-width: 1000px;
  height: 1300px;
  margin-top: -35px; /* clip top of tripplanner page to remove extra header space */
  border: none;
}

/*******************************************************************************

	Display appropriate tripplanner link based on screen size - SMZ

*******************************************************************************/

@media screen and (max-width : 568px) {
	a[href="http://www.metrostlouis.org/trip-planner/"] {
	  	display: none !important;
	}
	a[href="https://www.metrostlouis.org/trip-planner/"] {
	  	display: none !important;
	}
	div#tools nav ul li:nth-child(2) {
		display: none !important;
	}
}

@media screen and (min-width : 567px) {
	a[href="http://tripplanner.metrostlouis.org/"] {
	  	display: none !important;
	}
	a[href="https://tripplanner.metrostlouis.org/"] {
	  	display: none !important;
	}
	div#tools nav ul li:nth-child(1) {
		display: none !important;
	}
}

footer div.sub-footer div.copyright a { 
	color: #99a4ad;
	text-decoration: none;
}