#shuttle-tab.selected > .recommended
{
	color: white;
	background-color: rgba(255,255,255,0.25);
	display: inline;
	padding: 1px 5px;
}

#shuttle-tab:not(.selected) > .recommended
{
	display: none;
}

.section2-shuttle-top-pick-grid
{
	display: flex;
	gap: 20px;
	margin: 20px 0;
	background-color: #E0E7EF;
	border: solid 1px #C5D1DE;
	padding: 20px 24px;
}



.section2-shuttle-pickup-header
{
	font-size: 22px;
	font-weight: bold;
	color: #101923;
	border-left: solid 3px #101923;
	padding-left: 5px;
}

.section2-shuttle-pickup-text
{
	font-size: 14px;
	color: #595959;
	margin: 20px 0;
}

.section2-shuttle-fares-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
	padding: 20px 0;
}

.section2-shuttle-fares-grid2
{
	background-color: #DCE4ED;
	border: solid 1px #C5D1DE;
	padding: 20px;
	height: 400px;
}

.section2-shuttle-pickup-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	overflow: hidden;
}

	.section2-shuttle-pickup-grid > div
	{
		outline: 1px solid #ccc;
		padding: 20px;
	}

.section2-shuttle-pickup-griditem-title
{
	font-size: 10px;
	font-weight: bold;
	color: #326BAE;
}

.section2-shuttle-pickup-griditem-name
{
	font-size: 15px;
	font-weight: bold;
	color: #101923;
}

.section2-shuttle-pickup-griditem-parking
{
	font-size: 13px;
	color: #444444;
}

.section2-shuttle-pickup-griditem-spothero
{
	display: inline-block;
	background-color: #E0E7EF;
	font-size: 10px;
	font-weight: bold;
	color: #213D66;
	text-decoration: none;
	padding: 2px 7px;
}

.section2-shuttle-pickup-griditem-comingsoon {
	display: inline-block;
	background-color: #FFF8E1;
	font-size: 10px;
	font-weight: bold;
	color: #7A5F00;
	text-decoration: none;
	padding: 2px 7px;
}

.section2-shuttle-howitworks
{
}

.section2-shuttle-howitworks-header
{
	font-size: 22px;
	font-weight: bold;
	color: #101923;
	border-left: solid 3px #101923;
	padding-left: 5px;
	margin-top: 20px;
}

.section2-shuttle-howitworks-grid
{
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 20px;
	border: solid 1px #C5D1DE;
	padding: 20px;
}

.section2-shuttle-howitworks-grid-number{
	color: #DCE4ED;
	font-size: 24px;
	font-weight: bold;
}

.section2-shuttle-howitworks-grid-title{
	font-size: 16px;
	font-weight: bold;
	color: #101923;
}

.section2-shuttle-howitworks-grid-text
{
	font-size: 14px;
	color: #595959;
}

.section2-shuttle-howitworks-grid-list {
	background-color: #E0E7EF;
	border-color: #213D66;
	border-left: solid 2px #213D66;
	margin-top: 10px;
	padding: 16px;
}

.section2-shuttle-footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	background-color: #101923;
	padding: 20px;
	margin-top: 40px;
}

.section2-shuttle-footer-header
{
	color: white;
	font-size: 17px;
	font-weight: bold;
}

.section2-shuttle-footer-text
{
	color: rgba(255,255,255,0.6);
	font-size: 14px;
}

.section2-shuttle-footer-reserve-pr
{
	display: inline-block;
	background-color: #F6C746;
	padding: 5px 10px;
	color: black;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	margin-right: 15px;
}

.section2-shuttle-footer-wcinfo
{
	display: inline-block;
	padding: 5px 10px;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border: solid 1px #555;
}

.section4 {
	background-color: #213D66;
	padding: 50px;
	text-align: center;
}

.section4-heading {
	font-size: 11px;
	font-weight: bold;
	color: rgba(255,255,255, 0.55);
}

.section4-title {
	font-size: 51px;
	color: white;
	font-family: "Interstate-compressed", serif;
	font-weight: 700;
}

.section4-text {
	font-size: 16px;
	color: rgba(255,255,255,0.65);
}

.section4-button {
	color: #101923;
	font-weight: bold;
	background-color: #F6C746;
	display: inline-block;
	padding: 10px;
	margin-top: 20px;
	text-decoration: none;
}

#map-shuttle {
	height: 500px;
	width: 100%;
}

@media (max-width: 767px)
{
	#map-shuttle
	{
		height: 350px;
		width: 100%;
	}
}

<!-- -->

.layout {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 20px;
	/* padding: 20px; */
	padding-top: 20px;
	padding-bottom: 20px;
	color: #333333;
}



.left-col {
	width: 100%;
}



.right-col {
	width: 100%;
}



/* Left column */

/*.left-col

{

        display: flex;

        flex-direction: column;

        gap: 15px;

}*/



.main-image {
	width: 100%;
	height: auto;
	border: 1px solid #C5D1DE;
}

.main-image-descr {
	background-color: #F0F4F8;
	color: #595959;
	border: 1px solid #C5D1DE;
	padding: 16px;
}



/* Light blue box */

.info-box {
	background: #D9ECFF;
	padding: 15px;
	border: 1px solid #C5D1DE;
}



/* Table */

.info-table {
	width: 100%;
	border-collapse: collapse;
	background: #FFFFFF;
	font-size: 15px;
	border: 1px solid #C5D1DE;
}



	.info-table th {
		background: #F3F3F3;
		padding: 10px;
		text-align: left;
		font-weight: bold;
	}



	.info-table td {
		padding: 10px;
		border-bottom: 1px solid #DDDDDD;
	}

	.info-table tr {
		/* border-inline: 1px solid #C5D1DE ; */
		color: #444444;
	}

	.info-table thead {
		background-color: #F0F4F8;
		color: #213D66;
	}

		.info-table thead th {
			background-color: #F0F4F8;
			color: #213D66;
		}



.section {
	background: #213D66;
	color: #FFFFFF;
	font-weight: bold;
	padding: 8px;
}

.station-name {
	font-weight: bold;
	color: #101923;
}

.station-stats {
	color: #444444;
}

mark {
	color: #7A5F00;
	background-color: #FFF831;
}

#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

	#myImg:hover {
		opacity: 0.7;
	}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Sit on top of everything */
	padding: 0; /* Remove padding to allow full scrolling */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
	margin: 20px auto; /* Add some margin from edges */
	display: block;
	width: auto; /* Let image use its natural width */
	max-width: none; /* Remove any width restrictions */
	height: auto; /* Let image use its natural height */
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

/* The Close Button */
.close {
	position: fixed; /* Fixed to viewport, stays visible while scrolling */
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	z-index: 10000; /* Ensure it's above the modal */
	cursor: pointer;
}

	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
	.modal-content {
		width: 100%;
	}




	/* Mobile */

	@media (max-width: 900px) {

		.layout {
			grid-template-columns: 1fr;
		}



		.info-table th,
		.info-table td {
			font-size: 14px;
			padding: 8px;
		}
	}
}