a[href^=tel] {
   text-decoration: inherit;
   color: inherit;
}
.bluebg a {
	border-color: rgba(255,255,255,.5);
}
	.bluebg a:hover {
		border-color: #fff;
	}
.bluebg a.button {
	border: none;
}
	.bluebg a.button:hover {
		border: none;
	}
img.inlinetext {
	height: 1em;
	width: auto;
	margin-bottom: -3px;
}

.bluebg.lightblue {
	background-color: #09549c;
}

.box.dark {
	background-color: rgba(0,0,0,.125);
}
	.box.dark h3, .box.dark h4, .box.dark p {
		color: #fff;
	}
		.box h3.spacing, .box h4.spacing {
			padding: .25em 0;
		}
	.box.dark a {
		text-decoration-color: rgba(255,255,255,.5);
		color: #fff;
	}
		.box.dark a:hover {
			text-decoration-color: #fff;
		}

.number {
	float: none;
	display: inline-block;
	margin-right: .25em;
}

p.extra {
	font-size: 20px;
}
@media only screen and (min-width: 768px) { /* sm screens and up */
	p.extra {
		font-size: 21px;
	}
}






/**************** HOW TO RIDE ****************/


/***** HOW IT WORKS *****/
@media only screen and (min-width: 1750px) {
	.howitworks  {
		margin-top: 7em;
	}
}

.howitworks  {
	padding-bottom: .5em;
	padding-top: 0;
}
.howitworks h2.big {
	padding-bottom: .5em;
	padding-top: 0;
}

.howitworks a.subnav {
	display: inline-block;
	padding: 1em 1em .5em;
	border: none;
	border-radius: 5px;
}
	.howitworks a.subnav:hover {
		background-color: rgba( 255,255,255, 0.2);
	}
	.howitworks a.subnav h3 {
	}
	.howitworks a.subnav img.img {
		margin: 0 auto;
		width: 50px;
	}

.box.transitmodes {
	text-align: center;
}

.mask p.big {
	margin-top: 1em;
}
@media only screen and (min-width: 768px) { /* sm screens and up */
	.box.transitmodes {
		margin-top: 2em;
	}
	.mask p.big {
		margin-top: 2em;
	}
}
@media only screen and (min-width: 992px) {
	.mask p.big {
		margin-top: 1em;
	}
}
@media only screen and (min-width: 1200px) {
}






/***** HOW TO PAY *****/
.howtopay h3 {
	padding-top: .5em;
	font-size: 28px;
}
p.cardtype {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .8em;
	margin-top: -.5em;
	padding-bottom: 0;
}
p.cardtype span {
	display: inline-block;
	margin-right: 1em;
}
	p.cardtype span::before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		margin: 0 .35em -2px 0;
		width: 1em;
		height: 1em;
	}
	p.cardtype span.adult::before {
		background-color:  #240485;
	}
	p.cardtype span.honored::before {
		background-color: #6aa04e;
	}
	p.cardtype span.youth::before {
		background-color: #eb6a00;
	}

.tapandgo {
	position: relative;
}
	.tapandgo iframe {
		aspect-ratio: 1500 / 800;
		height: 100%;
		width: 100%;
	}
.tapandgo img.mobile {
	display: block;
}
.tapandgo img.desktop {
	display: none;
}
@media only screen and (min-width: 768px) { /* sm screens and up */
	.tapandgo img.mobile {
		display: none;
	}
	.tapandgo img.desktop {
		display: block;
	}
	.howtopay h3 {
		padding-top: 1em;
	}
	.tapandgo p {
		text-align: left;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1000;
		padding: 10% 40% 0 8%;
	}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.tapandgo p {
		padding: 15% 40% 0 8%;
	}
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
	.tapandgo p {
		padding-top: 18%;
		padding-right: 45%;
	}
}



/***** FREQUENT SERVICE *****/
.frequentservice {
	background-color: #6cb33e;
}
	.frequentservice.alt {
		background-color: #333333;
	}
.frequentservice .contentcontainer {
	padding-bottom: 0;
}
	.frequentservice h2 {
		padding: 0;
	}
	.frequentservice h2,
	.frequentservice p {
		color: #fff;
	}
	.frequentservice a {
		color: #fff;
	}
		.frequentservice a:hover {
			text-decoration-color: #fff;
		}
.frequentservice a.button.secondary {
	color: #fff;
	border-color: #fff;
}
	.frequentservice a.button.secondary:hover {
		border: 1px solid #fff;
	}




/***** MEET THE FLEET *****/
a.modes {
	display: block;
	border-radius: 5px;
	margin-bottom: 10px;
	border: none;
	transition-property: all;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
	padding-top: 1em;
}
	a.modes:hover {
		background-color: #d3e9ff;
		border: none;
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
	}
	a.modes .img {
		margin-bottom: 0;
	}





/***** STAY IN TOUCH *****/
.contact .contacticons {
}
	.contacticons img {
		display: inline-block;
		margin: 0 .25em -1em;
		width: 48px;
		height: 48px;
	}
@media only screen and (min-width: 768px) { /* sm screens and up */
	.contacticons img {
		width: 70px;
		height: 70px;
	}
}

form.getemailupdates label {
	color: #fff;
	display: block;
	text-align: left;
}
form.getemailupdates input.submit{
	vertical-align: baseline;
}

/*
MOVED TO SEPARATE FILE

.box.ridersclub {
	background-color: #efecde;
	border: none;
	border-radius: 15px;
}
	.box.ridersclub h3.big {
		padding-bottom: .25em;
	}
	.box.ridersclub a {
		color: #fc671a;
		text-decoration-color: rgba(252,103,26, .35);
	}
		.box.ridersclub a:hover {
			color: #fc671a;
			text-decoration-color: rgba(252,103,26, 1);
		}
		.box.ridersclub p.small a {
			color: #111;
			text-decoration-color: #999;
		}
			.box.ridersclub p.small a:hover {
				color: #fc671a;
				text-decoration-color: rgba(252,103,26, 1);
			}
	.box.ridersclub form.getemailupdates {
		text-align: center;
		width: 100%;
	}
		.box.ridersclub form.getemailupdates input.email {
			width: 100%;
			max-width: 400px;
		}
		.box.ridersclub form.getemailupdates .submit {
			background-color: #fc671a;
			border-color: #fc671a;
		}
			.box.ridersclub form.getemailupdates .submit:hover {
				background-color: #d1441d;
				border-color: #d1441d;
			}
*/




.flexicons {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}
	.flexicons p {
		flex: 0 0 160px;
		height: auto;
		display: block;
		text-align: center;
		line-height: 1.25;
	}
		.flexicons a {
			display: block;
			width: 100%;
			height: 100%;
			border: none;
			padding: 0 1em 1em;
			color: #fff;
		}
		.flexicons a:hover {
			background-color: rgba(255,255,255,.2);
			border-radius: 5px;
		}
		.flexicons img {
/*			margin-bottom: 0;*/
		}

@media only screen and (min-width: 768px) { /* sm screens and up */
	.flexicons p {
		flex: 0 0 200px;
	}
}



/**************** HOW TO RIDE THE BUS ****************/

.modeimage.padding {
	margin-top: 250px;
}
.modeimage img.img {
	margin-top: -250px;
}
.thebus h2.big {
	padding-top: 0;
	padding-bottom: 0;
}
.thebus .box h3 {
	padding-bottom: .125em;
}
.thebus .box p {
	padding-bottom: 1.5em;
}


a.iconbutton {
	display: block;
	text-align: center;
	padding: 0 1em;
	border: none;
}
	a.iconbutton:hover {
		background-color: rgba(255,255,255,.2);
		border-radius: 5px;
	}

.howitworks {
	
}
	.howitworks .step {
		padding: 1em;
	}
	.howitworks .step img.img {
		margin: 0;
	}

@media only screen and (min-width: 768px) { /* sm screens and up */
	.howitworks .step {
		padding-left: 2em;
	}
		.howitworks .step h3 {
			margin-top: 2em;
		}
}

ul.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}
	ul.flex li {
		flex: 0 1 500px;
		height: auto;
		display: block;
		background-color: #fff;
		border-radius: 5px;
		padding: 1em;
		margin: .5em 0;
	}





/**************** FARES ****************/

/***** FARE CHARTS *****/
.farechart {
	border: 3px solid #240485;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 1em;
	padding: 1em 1em 0;
}
	.box.adult {
	}
	.farechart.honored {
		border-color: #6aa04e;
	}
	.farechart.youth {
		border-color: #eb6a00;
	}
	.farechart h4, .farechart h5 {
		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	}
	.farechart {
		margin-bottom: 2em;
	}
		.farechart h3 {
			font-size: 2em;
			padding-top: 0;
			padding-bottom: 0;
		}

		.farechart .idrequired {
			background: url(/fares/img/id-required.png) 0 0 no-repeat;
			background-size: 40px auto;
			padding: .125em .5em 1.5em 50px;
			margin-left: 1em;
			display: inline-block;
		}
		.farechart h4 {
			font-weight: 500;
			font-size: 1.5em;
			padding-top: .5em;
			padding-bottom: .5em;
			line-height: 1;
		}
			.farechart h4.big {
				font-weight: 600;
				font-size: 4em;
				padding-top: 0;
				padding-bottom: 0;
				line-height: 1.25;
			}
		.farechart h5.big {
			font-weight: 500;
			font-size: 1.75em;
			padding-bottom: 0;
		}
			.farechart .box h5.big {
				padding-top: .25em;
				line-height: 1;
			}
		.farechart h5.reduced {
			color: #4da94f;
			font-size: 1.25;
		}
		.farechart p.faretime {
			line-height: 1;
			padding-bottom: 1em;
		}
		.farechart h5.big span.timespan {
			display: block;
			font-size: 18px;
			padding-bottom: .5em;
		}
		.farechart .divider {
			border-right: 1px solid #aaa;
		}
		.farechart .pass {
			color: #46a147;
			padding-left: 1.125em;
			background: url("/fares/img/pass-check-green.png") 0 .0625em no-repeat;
			background-size: 1em 1em;
			display: inline-block;
			line-height: 1;
			font-weight: 500;
		}
	.farechart .footnote p {
		padding: 0 0 12px 0;
	}
	.farechart a.button.secondary {
		margin-bottom: 0;
	}
	
@media only screen and (min-width: 768px) { /* sm screens and up */
	.farechart.adult,
	.farechart.honored,
	.farechart.youth
	{
		border-width: 4px;
		border-radius: 10px;
	}
	.farechart .idrequired {
		margin-top: .25em;
	}
}
/* Styles for /testing/fares.htm <dl> */
dl.max-spend {
	margin-bottom: 1em;
}
dt.big {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1.75em;
	padding-bottom: 0;
}
dt span.timespan {
	display: block;
	font-size: 18px;
	padding-bottom: .5em;
}


.fares .img {
	margin-bottom: 0;
}


.howhopworks h2.big {
	padding-top: 0;
}


.sidebyside h3 {
	padding-bottom: .25em;
}
@media only screen and (min-width: 768px) {
	.sidebyside h3 {
		padding-top: 0;
	}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.sidebyside h3 {
		padding-top: .125em;
	}
	.sidebyside .row {
		padding: 1.25em 0;
	}
	.sidebyside .row:nth-child(even) {
		background-color: #f6f6f6;
	}
}