bottom margin (add 4-9-2024 by Mark Bilodeau)
38) Metro video (updated 4-16-2024 by Mark Bilodeau)
39) Boxed shadow 1 (added 4-9-2024 by Mark Bilodeau)
40) Links piped using children (added 4-13-2024 by Mark Bilodeau)
41) Adding an video play icon at the end a video link (added 4-22-2024 by Mark Bilodeau)
42) Metro alert box style (added 4-29-2024 by Mark Bilodeau)
43) 4-column, 3-column, 2-column and 1-column css grid container (added 5-3-2024 by Mark Bilodeau)
44) Overriding the KC button styles (added 8-8-2024 by Mark Bilodeau)
45) Hiding empty elements with certain classes (added 8-27-2024 by Mark Bilodeau)
46) Adjusting color of bottom margin */
.page-heading .summary-text p {
margin-bottom:.625rem
}
/* Styles for Metro videos */
.metro-video {
/*position: relative;*/
background: none;
/*border-radius: 10px;
overflow: hidden;*/
}
.metro-video a {
border-radius: 10px;
display: block;
overflow: hidden;
position: relative;
aspect-ratio: 16 / 9;
}
.metro-video img {
width: 100%;
object-fit: cover;
}
.metro-video .video-meta {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
font-family: "Roboto Condensed", sans-serif;
color: #fff;
padding: 0.9rem 4.125rem 0.9rem 1.2rem;
box-sizing: border-box;
}
.metro-video .video-meta .video-title {
font-size: 1.3rem;
line-height: 1.2;
/* Clamp to 2 lines */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
/* For non-WebKit browsers */
max-height: 3rem; /* 2 lines * line-height */
}
.metro-video .video-meta .video-caption {
margin-top: 0.5rem;
font-size: 0.9rem;
display: none;
}
.metro-video .video-caption {
font-size: 0.8rem;
color: #333;
margin-block-start: 10px;
display: block;
}
.metro-video .video-meta .video-length {
position: absolute;
bottom: 0.9rem;
right: 1.2rem;
}
/* play button */
.metro-video a::before {
content: "play_circle_filled";
font-family: "Material Icons";
font-size: 80px;
color: #fff;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
transition: font-size 0.3s ease, opacity 0.3s ease, font-size 0.3s ease,
left 0.3s ease-in-out;
}
@media (min-width: 992px) {
.metro-video a::before {
opacity: 0.8;
}
.metro-video a:hover::before {
opacity: 1;
font-size: 90px;
}
.metro-video a:hover::before {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}
}
@media (max-width: 767.98px) {
.video-title {
font-size: 1.75rem;
}
}
/*@media (min-width: 577px) {
.metro-video img {
height: auto;
}
}*/
@media (max-width: 576px) {
/* play button */
.metro-video a::before {
font-size: 55px;
transition: font-size 0.3s ease /*, left 0.3s ease-in-out*/; /* Add transition for opacity property */
/*top: 50%;
left: 87%;*/
}
.video-title {
font-size: 1.5rem;
}
}
/* Boxed shadow 1 */
.boxed-shadow1 {
box-shadow: 0 6px 11px rgba(0, 0, 0, 0.16);
border: transparent !important;
}
/* Links piped using children */
.links-piped > span {
display: inline-flex;
align-items: center; /* Optional: Align items vertically in the center */
}
.links-piped > span:not(:first-child) {
border-left: 2px solid #999;
padding-left: 12px;
margin-left: 10px;
}
/* Adding an video play icon at the end a video link */
.link-icon-video-play::after {
content: " play_circle"
}
/* Metro alert box style */
.metro-alert {
position: relative;
margin: 0;
padding: 2rem 2.75rem;
background-color: #fff3cd;
border-color: #fff3cd;
color: #856404;
border-radius: 0;
width: 100%;
max-width: 960px;
}
.multilingual-alert {
padding-top: 3.75rem;
}
@media screen and (max-width: 500px) {
.metro-alert {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.metro-alert p:last-child {
margin-bottom: 0;
}
/* 4-column, 3-column, 2-column and 1-column css grid container */
.grid-container {
display: grid;
grid-gap: 30px;
}
/* 4 column layout */
.grid-4-column {
grid-template-columns: repeat(4, 1fr);
}
/* 3 column layout */
.grid-3-column {
grid-template-columns: repeat(3, 1fr);
}
/* 2 column layout */
.grid-2-column {
grid-template-columns: repeat(2, 1fr);
}
/* Style for grid items */
.grid-item-boxed {
/* Adjust as needed */
border: 1px solid var(--primary-ghost);
padding: 2.75rem;
background-color: #fff;
}
/* removing underline on buttons inside grid containers by default */
.grid-container .btn {
text-decoration: none!important;
}
/* For smaller screens, stack items */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
.grid-item-boxed {
padding: 2rem;
}
}
/* Overriding the KC button styles */
.btn-outline-primary {
color: #0056F5!important;
border-color: #0056F5!important;
}
.btn-outline-primary:hover {
color: #212529!important;
background-color: #b5d3f7!important;
border-color: var(--primary)!important;
}
/* Hiding empty elements with certain classes */
.sr-only:empty,
.hero-title:empty,
.hero-text:empty {
display: none!important;
}
/* Adjusting color of
when used with a background of 'overcast' (added 8-31-2024 by Mark Bilodeau)
47) Increasing the touch target width of the index links (added 3-19-2025 by Mark Bilodeau)
48) Night owl route table (added 3-26-2025 by Mark Bilodeau)
49) Timeline badges (added 6-4-2025 by Mark Bilodeau)
50) Global header relative positioning (added 7-17-2025 by Mark Bilodeau)
51) Hide schedule preview button by default
*/
/* Styles for pricing blocks */
.pricing-block-wrapper {
margin-left: 10px;
}
.pricing-block {
position: relative;
display: block;
width: 100%;
border-bottom: 0;
margin: 0;
padding: 0 0 0 23px;
line-height: 1.4;
}
.pricing-block + .pricing-block {
margin-top: 40px;
}
.pricing-block .title,
.pricing-block .price {
font-size: 1.6rem;
font-weight: bold;
}
.pricing-block-title {
font-family: "Roboto Condensed", sans-serif;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.2;
margin: 0;
padding: 0;
}
.pricing-block-title .normal {
font-size: 1.2rem;
font-weight: normal;
}
.pricing-block-price {
text-align: right;
/*font-weight: bold;*/
}
.pricing-with-description {
position: relative;
cursor: pointer;
/*color: #427839;*/
}
.pricing-with-description::before {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 1.1rem;
content: "add";
position: absolute;
left: -32px;
top: 3px;
background-color: var(--primary);
/*background-color: var(--secondary);
background-color: var(--info);*/
color: var(--light);
/*border: 1px solid #ccc;*/
border-radius: 100%;
height: 1.25rem;
width: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
}
.pricing-block-item {
display: flex;
justify-content: space-between;
margin: 0.4rem 0 0;
padding: 0 0 0.5rem;
border-bottom: 1px solid #ccc;
}
.pricing-block-item + .pricing-block-item {
margin-top: 0 0 0.5rem;
}
.pricing-block-item span {
margin-left: 30px;
}
.pricing-block-description {
padding: 0.75rem 0;
}
/* Toggling the appearance of a hidden div */
.pricing-toggle .pricing-toggle-head {
position: relative;
display: block;
cursor: pointer;
}
.pricing-toggle .pricing-toggle-head::before {
position: absolute;
transition: transform 0.3s ease;
}
.pricing-toggle.pricing-toggle--open label.pricing-toggle-head::before,
.pricing-toggle input[id*="toggle"]:checked + label.pricing-toggle-head::before,
.pricing-toggle
input[type="checkbox"]:checked
+ label.pricing-toggle-head:before {
transform: rotate(45deg);
font-size: 1.2rem;
}
.pricing-toggle.pricing-toggle--open label + .pricing-toggle-inner,
.pricing-toggle input[id*="toggle"]:checked + label + .pricing-toggle-inner,
.pricing-toggle input[type="checkbox"]:checked + label + .pricing-toggle-inner {
display: block;
max-height: 500px;
transition: max-height 1s ease;
}
.pricing-toggle input[id*="toggle"],
.no-toggle input[id*="toggle"] {
display: none;
}
.pricing-toggle .pricing-toggle-inner {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease;
}
.pricing-toggle .pricing-toggle-inner p {
margin: 0;
}
/* end Pricing blocks */
/* Flex media boxes */
.flex-grid {
text-align: left;
display: flex;
justify-content: flex-start;
width: calc(100% + 2rem);
margin: 0 -1rem;
/*background: red;*/
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-media-box {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 20rem;
background: #f4f4f4;
/*border-radius: 0.5rem;*/
overflow: hidden;
margin: 1rem;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
position: relative;
}
.flex-media-box-dark {
background: #333;
}
.flex-media-box:empty {
height: 0 !important;
max-height: 0 !important;
background: none !important;
}
.flex-media-box-image {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
.flex-media-box-image img {
width: 100%;
max-width: 100%;
max-height: 100%;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
/*object-fit: cover;
object-position: center center;*/
}
.flex-media-box-image a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.flex-media-box-image a .fa-play {
background: var(--white);
color: var(--primary);
font-size: calc(var(--spacer) * 1.3);
width: calc(var(--spacer) * 3);
height: calc(var(--spacer) * 3);
border-radius: 100%;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.flex-media-box-image img a:hover {
opacity: 0.2;
}
.flex-media-box-image a:hover .fa-play {
opacity: 1;
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
.flex-media-box-content {
padding: 1rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1 0 auto;
justify-content: space-between;
}
.flex-media-box-title {
font-family: "Roboto Condensed", sans-serif;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.938rem;
color: #333333;
}
.flex-media-box-text {
font-size: 1.3rem;
margin-bottom: auto;
}
.flex-media-box-date,
.flex-media-box-subhead {
font-family: 'Roboto Condensed', sans-serif;
font-size: 0.91rem;
font-weight: normal;
color: #666;
margin: 0.2rem 0 0.9rem;
}
.flex-media-box-title + .flex-media-box-text {
margin-top: 1rem;
}
.flex-media-box-text + .flex-media-box-more {
margin-top: 1.5rem;
}
.flex-media-box-text p,
.flex-media-box-text ul {
font-family: "Cabin", sans-serif;
margin-bottom: 1em !important;
}
.flex-media-box-text p,
.flex-media-box-text ul li {
font-size: 16px;
line-height: 1.5;
}
.flex-media-box-text p + p,
.flex-media-box-text li + li {
margin-top: 10px;
}
.flex-media-box-more a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/*border-radius: 500px;*/
width: 100%;
text-align: center;
margin: auto 0 0;
padding: 0.6em 1em;
font-weight: 700;
font-size: 1em;
text-decoration: none;
background-color: #aaa;
border: none;
color: #fff;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.flex-media-box-more a:hover {
background-color: #6baa49;
}
/* buttons inside flex media box */
.flex-media-box-content .btn {
font-size: 1.13rem;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 10px !important;
text-decoration: none !important;
}
.flex-media-box-content .btn-label {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flex-media-box-content .btn-group {
display: flex;
justify-content: space-between;
gap: 2px;
}
.flex-media-box-content .btn-group .btn {
flex: 1 0;
}
.btn.btn-shadow {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
/* end buttons inside flex media box */
/* Box content styles */
.box {
padding: 2.75rem;
}
/* end Box content styles */
/* Centering with flexbox */
.center--flexbox {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 12px;
}
/* end Centering with flexbox */
/* Flexpill used on route schedules */
.flex-pills {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
margin: auto !important;
padding: auto !important;
width: 100%;
}
.flex-pills,
.flex-pills > li {
list-style: none !important;
}
.flex-pills > li {
color: #ddd;
flex: 1;
margin: 0 0 28px !important;
padding: 0 !important;
text-align: center;
text-transform: uppercase;
width: 18% !important;
}
.flex-pills > .hidden {
display: none !important;
}
.flex-pills > li > a {
align-self: center;
background-color: transparent;
border: 1px solid transparent;
border-color: var(--primary);
box-sizing: border-box;
color: var(--gray);
display: block;
padding: 14px 1px !important;
text-decoration: none !important;
text-shadow: none;
}
@media screen and (min-width: 990px) {
.flex-pills > li > a {
transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
}
.flex-pills > li > a:focus,
.flex-pills > li > a:hover {
background-color: #b5d3f7;
box-shadow: 0 0 0 1px var(--primary);
color: #212529;
}
.flex-pills > li.active a,
.flex-pills > li.active a:focus,
.flex-pills > li.active a:hover {
background-color: var(--primary);
border-color: var(--primary);
border-radius: 0;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.flex-pills a {
font-size: 1.13rem !important;
margin: 0 !important;
}
@media screen and (max-width: 990px) {
.flex-pills {
gap: 18px;
}
.flex-pills a {
font-size: 1.1rem !important;
}
}
@media screen and (max-width: 767px) {
.flex-pills {
gap: 10px;
}
.flex-pills a {
font-size: 1rem !important;
padding: 0 20px !important;
}
}
@media screen and (max-width: 420px) {
.flex-pills {
gap: 5px;
}
.flex-pills a {
font-size: 0.9rem !important;
}
}
/* end Flexpills used on route schedules
/* Task buttons */
.task-btns {
display: grid;
/*grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;*/
/*grid-template-columns: repeat(2, minmax(70px, 1fr));*/
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
align-items: center;
justify-content: center;
}
.task-btn {
text-align: center;
border: 1px solid var(--primary);
border-radius: 0;
}
.task-btn a {
display: flex;
justify-content: center;
text-transform: uppercase;
font-size: 1.1rem;
padding: 18px 1%;
text-decoration: none !important;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
@media screen and (max-width: 991px) {
.task-btn a {
padding: 14px 40%;
font-size: 1rem;
}
.task-btn.route-btn a {
padding: 14px 6px !important;
font-size: 1rem;
}
}
@media screen and (max-width: 767px) {
.task-btn a {
font-size: 0.85rem;
}
}
.task-btn a:focus,
.task-btn a:hover {
background-color: #b5d3f7;
box-shadow: 0 0 0 1px var(--primary);
color: #212529;
}
/* end Task buttons */
/* Hiding footer social icons */
@media screen and (min-width: 767.99px) {
.footer-nav .row .col-md-3:first-child {
display: none !important;
}
}
@media screen and (max-width: 767.98px) {
.footer .footer-social-links {
display: block !important;
margin-bottom: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
/*end hiding footer social icons */
/* Metro social icon links */
.metro-social-links a img {
max-width: 44px;
height: auto;
}
/* end Metro social icon links */
/* Tighter letter spacing on h1 to h4 tags */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
letter-spacing: -0.02em !important;
}
/* end Tighter letter spacing on h1 to h4 tags */
/* TOC spacing adjustment */
.toc-links {
margin-left: 10px;
margin-top: 2.6rem!important;
}
.toc-links .toc-links-link {
margin-top:0!important;
}
@media screen and (max-width: 991px) {
.toc-links .toc-links-link {
position: relative !important;
}
.toc-links .toc-links-link svg {
top: -3px;
left: -32px;
}
}
@media screen and (min-width: 992px) {
.toc-links {
margin-top: 1rem;
}
}
/* end TOC spacing adjustment */
/* Hiding KC footer social icons */
@media screen and (min-width: 767.99px) {
.footer-nav .row .col-md-3:first-child {
display: none !important;
}
}
@media screen and (max-width: 767.98px) {
.footer .footer-social-links {
display: block !important;
margin-bottom: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
/*end Hiding KC footer social icons */
/* Metro social icon links */
.metro-social-links a img {
max-width: 44px;
height: auto;
}
/* end Metro social icon links */
/* Adjustment of the "data-toc-anchor" and anchored ID position */
[data-toc-anchor] {
/*padding-top: 20px;
margin-top: -20px;*/
scroll-margin-top: 20px;
}
@media screen and (max-width: 991px) {
[data-toc-anchor] {
/*padding-top: 80px;
margin-top: -80px;*/
scroll-margin-top: 80px;
}
.update-info-card[id] {
scroll-margin-top: 80px;
}
}
/* end Adjustment of the "data-toc-anchor" and anchored ID position */
/* Local nav margin at the top to adjust for the Metro breadcrumbs */
/*.local-nav {
margin-top: 2.6rem;
}
.metro-crumbs {
margin: 0 0 1.188rem!important;
padding: 0;
}*/
/* end Local nav margin at the top to adjust for the Metro breadcrumbs */
/* Advanced alert positioning */
main .alert-advanced {
margin-top: -82px;
margin-bottom: 0;
}
@media screen and (max-width: 991px) {
main .alert-advanced {
margin-top: 0;
z-index: 8;
}
}
/* end Advanced alert positioning */
/* Tabs margin adjustment to align better */
/*.tabs {
width: calc(100% + 30px);
margin: 0 -15px;
}*/
.bg-colorway.tab-section,
.bg-overcast.tab-section {
padding-left: 22px;
padding-right: 22px;
}
.bg-colorway.tab-section hr {
border-top: 1px solid rgba(0, 0, 0, 0.4);
}
.bg-overcast.tab-section hr {
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
/* end Tabs margin adjustment to align better */
/* Custom update info card */
@media (max-width: 767px) {
.update-info-card-custom {
margin-top: -12px;
}
}
/* end Custom update info card */
/* Multi-column list */
@media (min-width: 768px) {
ul.multi-column {
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
break-inside: avoid;
}
}
@media (max-width: 767px) {
ul.multi-column {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
break-inside: avoid;
}
}
@media (max-width: 500px) {
ul.multi-column {
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
}
/* end Multi-column list */
/* Link with emphasis in update card component */
.update-info-card-body .rich-text a,
.update-info-card-body .rich-text a.link-emphasis {
color: #1a6cff !important;
}
.update-info-card-body .rich-text a.link-emphasis {
text-decoration: none !important;
}
.update-info-card-body .rich-text a.link-emphasis:hover {
color: #0056b3 !important;
}
/* end Link with emphasis in update card component */
/* Setting margin bottom for hero image at the top of the page */
@media (min-width: 992px) {
#mainBody .hero:first-of-type {
margin-bottom: 2rem;
}
}
/* end Setting margin bottom for hero image at the top of the page */
/* Centering basic image component */
.basic-image.text-center {
margin: 0 auto;
}
/* end Centering basic image component */
/* Hiding the KC hamburger menu */
/*.global-header .navbar {
display: none !important;
}*/
/* end Hiding the KC hamburger menu */
/* Increasing width of search button on mobile devices */
/*@media (max-width: 767.98px) {
.global-header .search button {
width: 64px !important;
}
}*/
/* end Increasing width of search button on mobile devices */
/* Button tooltip style that displays the data attribute of the link */
.btn-tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.btn-tooltip::after {
font-size: 0.8rem;
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s;
}
/*.btn-tooltip::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}*/
.btn-tooltip:hover::after {
opacity: 1;
}
/* end Button tooltip style that displays the data attribute of the link */
/* Image card collection ver 1 */
/*.image-card-collection {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.image-card {
position: relative;
overflow: hidden;
}
.image-card-background img {
display: block;
width: 100%;
height: auto;
}
.image-card-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
}
.image-card-text, .image-card-label {
color: white;
margin: 0;
padding: 1rem 1.2rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image-card-label {
text-transform: uppercase;
}
/* Media queries for responsive layout */
/*@media (max-width: 767px) {
.image-card-collection {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.image-card-collection {
grid-template-columns: repeat(2, 1fr);
}
}*/
/* end Image card collection */
/* Image card collection ver 2 */
.image-card-collection {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.image-card {
position: relative;
overflow: hidden;
}
.image-card-background {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
.image-card-background img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
min-height: 100%;
}
.image-card-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.9)
);
}
.image-card-text,
.image-card-label {
color: white;
margin: 0;
padding: 1rem 1.2rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image-card-label {
text-transform: uppercase;
}
/* Media queries for responsive layout */
@media (max-width: 767px) {
.image-card-collection {
grid-template-columns: 1fr;
}
.image-card-background {
height: 200px;
}
.image-card-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.9)
);
}
}
@media (max-width: 669px) {
.image-card-background {
height: 150px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.image-card-collection {
grid-template-columns: repeat(2, 1fr);
}
}
/* end Image card collection */
/* Metro accordion title */
@media (min-width: 768px) {
.metro-accordion-title {
margin-bottom: -2.25rem !important;
}
}
@media (max-width: 767px) {
.metro-accordion-title {
margin-bottom: -1rem !important;
}
}
/* end Metro accordion title */
/* Repositioning KC alerts to stack at the bottom */
/*.alert-wrapper {
position: fixed;
z-index: 1000;
left: 0;
right: 0;
bottom: 0;
background: #fff;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.alert-wrapper .alert-title {
font-size: 1.1rem !important;
font-weight: bold;
margin: 0;
padding: 0;
}
.alert-wrapper .alert-text {
font-size: 0.9rem;
margin: 0;
padding: 0;
line-height: 1.4;
}
.alert-wrapper .alert-title + .alert-text {
margin-top: 10px;
}*/
/* end Repositioning KC alerts to stack at the bottom */
/* Repositioning KC alerts to stack at the bottom */
.alert-wrapper {
display: inline-block!important;
position: fixed;
z-index: 1000;
left: auto;
right: 15px;
bottom: 0;
margin-right: auto;
/*box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);*/
max-width: 400px;
transition: transform 0.6s ease-out;
}
.alert-wrapper .alert {
margin: 0 0 15px;
padding: 15px 0 15px 15px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
/*box-shadow: 0 10px 25px rgba(124, 130, 141, 0.2);*/
border-color: #b8daff;
}
.alert-wrapper .container,
.alert-wrapper .row,
.alert-wrapper .col,
.alert-wrapper .col-11 {
padding: 0 !important;
margin: 0 !important;
position: static;
}
.alert-wrapper .close {
margin-top: -3rem!important;
margin-right: 3px!important;
padding: 0;
font-size: 2.2rem !important;
}
.alert-wrapper .alert-primary {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.alert-wrapper .alert-title {
font-size: 1.1rem !important;
font-weight: bold;
margin: 0;
padding: 0;
}
.alert-wrapper .alert-text {
font-size: 0.9rem;
margin: 0;
padding: 0;
line-height: 1.4;
}
.alert-text p + p {
margin: 12px 0 0;
}
.alert-wrapper .alert-title + .alert-text {
margin-top: 10px;
}
/* end Repositioning KC alerts to stack at the bottom */
/* Tooltips that work on mobile and with screenreaders */
abbr {
text-decoration: underline;
}
.metro-tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.metro-tooltip .metro-tooltip-text {
visibility: hidden;
min-width: 100px;
max-width: 200px;
padding: 0.25rem 0.5rem;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 0.25rem;
position: absolute;
z-index: 1;
bottom: 115%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-family: "Cabin", sans-serif;
font-size: 1rem;
font-weight: 400;
}
.metro-tooltip:hover .metro-tooltip-text {
visibility: visible;
opacity: 1;
}
.metro-tooltip .metro-tooltip-text::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.5rem;
border-width: 0.5rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
/* Additional styles for small viewports */
@media screen and (max-width: 600px) {
.metro-tooltip .metro-tooltip-text::before {
display: none;
}
/* Move the tooltip to the right side for ".tooltip-on-right" */
.metro-tooltip.tooltip-on-right .metro-tooltip-text {
left: 100%;
right: auto;
bottom: 0;
transform: translateX(
0.5rem
); /* Adjust this value to control the distance between the tooltip and the text */
}
.metro-tooltip.tooltip-on-right .metro-tooltip-text::after {
content: "";
position: absolute;
top: 50%;
right: 100%; /* Pointer comes out from the left side */
margin-top: -0.5rem; /* Adjust this value to vertically center the pointer */
border-width: 0.5rem;
border-style: solid;
border-color: transparent #000 transparent transparent; /* Flipped the order of the border-color values */
transform: translateX(
0
); /* Reset the translation to center the pointer horizontally */
}
/* Move the tooltip to the left side for ".tooltip-on-left" */
.metro-tooltip.tooltip-on-left .metro-tooltip-text {
left: auto;
right: 100%;
bottom: 0;
transform: translateX(
-0.5rem
); /* Adjust this value to control the distance between the tooltip and the text */
}
.metro-tooltip.tooltip-on-left .metro-tooltip-text::after {
content: "";
position: absolute;
top: 50%;
left: 100%; /* Pointer comes out from the right side */
margin-top: -0.5rem; /* Adjust this value to vertically center the pointer */
border-width: 0.5rem;
border-style: solid;
border-color: transparent transparent transparent #000; /* Flipped the order of the border-color values */
transform: translateX(
0
); /* Reset the translation to center the pointer horizontally */
}
}
/* end Tooltips that work on mobile and with screenreaders */
/* Boxed card grid */
.boxed-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2rem;
}
.boxed-card-grid-item {
position: relative !important;
}
/*.boxed-card-grid-item a {
text-decoration: none !important;
}*/
.boxed-card-grid-item.with-cta-btn {
padding-bottom: 6.2rem !important;
}
.with-cta-btn .btn {
text-decoration: none !important;
margin-left: 0;
position: absolute;
bottom: 2rem;
}
@media (min-width: 768px) {
.boxed-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.boxed-card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* end Boxed card grid */
/* No wrap class to keep text from wrapping to the next line */
.nowrap {
white-space: nowrap;
}
/* end No wrap class to keep text from wrapping to the next line */
/* Overriding the H1, H2, H3 and H4 sizes on smaller viewports */
@media screen and (max-width: 767px) {
h1 {
font-size: 2.5rem !important;
}
h2 {
font-size: 2rem !important;
}
h3 {
font-size: 1.5 !important;
}
h4 {
font-size: 1.2rem !important;
}
}
h2.accordion-title {
font-size: 1rem !important;
}
/* end Overriding the H1, H2, H3 and H4 sizes on smaller viewports */
/* Metro leadership profile card */
.metro-profile-card {
display: grid;
grid-template-columns: auto 1fr; /* Left column for the image, right column for content */
gap: 20px; /* Gap between photo and content */
border-bottom: 1px solid #dee2e6; /* Border on the bottom */
padding-bottom: 40px; /* Add some padding to space out the content from the border */
margin-bottom: 10px; /* Add margin to space out the cards */
}
/* Style for the image */
.leadership-photo {
width: 200px; /* Set max width for the image */
height: auto; /* Maintain aspect ratio */
}
.leadership-name {
padding-top: 0 !important;
margin-bottom: 5px;
}
@media (max-width: 768px) {
.metro-profile-card {
margin-bottom: 30px;
}
}
/* Media query for viewport width 576px and below */
@media (max-width: 576px) {
/* Stack the image above the content */
.metro-profile-card {
grid-template-columns: 1fr; /* Single column layout */
padding-bottom: 30px;
margin-bottom: 20px;
}
/* Adjust the image width to 350px */
.leadership-photo {
width: 350px;
max-width: 350px;
}
}
/* end Metro leadership profile card */
/* Image gallery styles */
.gallery-wrapper {
padding: 0;
margin: 0;
max-width: 100%;
width: 100%;
}
.image-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem 2rem;
}
.image-gallery figure {
display: block;
position: relative;
width: 100%;
}
.image-gallery figure img {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
color: #333333;
border-radius: 2px;
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
}
.image-gallery figure figcaption {
margin-top: 10px;
/*margin-bottom: -1rem;*/
font-style: italic;
font-size: 13px;
}
@media only screen and (max-width: 992px) {
.image-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 576px) {
.image-gallery {
grid-template-columns: 1fr;
grid-gap: 2rem;
}
}
/* end Image gallery styles */
/* Padding and margin for viewports smaller than 576px */
@media (max-width: 575px) {
.m-xs-0 {
margin: 0 !important;
}
.mt-xs-0,
.my-xs-0 {
margin-top: 0 !important;
}
.mr-xs-0,
.mx-xs-0 {
margin-right: 0 !important;
}
.mb-xs-0,
.my-xs-0 {
margin-bottom: 0 !important;
}
.ml-xs-0,
.mx-xs-0 {
margin-left: 0 !important;
}
.m-xs-1 {
margin: 0.25rem !important;
}
.mt-xs-1,
.my-xs-1 {
margin-top: 0.25rem !important;
}
.mr-xs-1,
.mx-xs-1 {
margin-right: 0.25rem !important;
}
.mb-xs-1,
.my-xs-1 {
margin-bottom: 0.25rem !important;
}
.ml-xs-1,
.mx-xs-1 {
margin-left: 0.25rem !important;
}
.m-xs-2 {
margin: 0.5rem !important;
}
.mt-xs-2,
.my-xs-2 {
margin-top: 0.5rem !important;
}
.mr-xs-2,
.mx-xs-2 {
margin-right: 0.5rem !important;
}
.mb-xs-2,
.my-xs-2 {
margin-bottom: 0.5rem !important;
}
.ml-xs-2,
.mx-xs-2 {
margin-left: 0.5rem !important;
}
.m-xs-3 {
margin: 1rem !important;
}
.mt-xs-3,
.my-xs-3 {
margin-top: 1rem !important;
}
.mr-xs-3,
.mx-xs-3 {
margin-right: 1rem !important;
}
.mb-xs-3,
.my-xs-3 {
margin-bottom: 1rem !important;
}
.ml-xs-3,
.mx-xs-3 {
margin-left: 1rem !important;
}
.m-xs-4 {
margin: 1.5rem !important;
}
.mt-xs-4,
.my-xs-4 {
margin-top: 1.5rem !important;
}
.mr-xs-4,
.mx-xs-4 {
margin-right: 1.5rem !important;
}
.mb-xs-4,
.my-xs-4 {
margin-bottom: 1.5rem !important;
}
.ml-xs-4,
.mx-xs-4 {
margin-left: 1.5rem !important;
}
.m-xs-5 {
margin: 3rem !important;
}
.mt-xs-5,
.my-xs-5 {
margin-top: 3rem !important;
}
.mr-xs-5,
.mx-xs-5 {
margin-right: 3rem !important;
}
.mb-xs-5,
.my-xs-5 {
margin-bottom: 3rem !important;
}
.ml-xs-5,
.mx-xs-5 {
margin-left: 3rem !important;
}
.p-xs-0 {
padding: 0 !important;
}
.pt-xs-0,
.py-xs-0 {
padding-top: 0 !important;
}
.pr-xs-0,
.px-xs-0 {
padding-right: 0 !important;
}
.pb-xs-0,
.py-xs-0 {
padding-bottom: 0 !important;
}
.pl-xs-0,
.px-xs-0 {
padding-left: 0 !important;
}
.p-xs-1 {
padding: 0.25rem !important;
}
.pt-xs-1,
.py-xs-1 {
padding-top: 0.25rem !important;
}
.pr-xs-1,
.px-xs-1 {
padding-right: 0.25rem !important;
}
.pb-xs-1,
.py-xs-1 {
padding-bottom: 0.25rem !important;
}
.pl-xs-1,
.px-xs-1 {
padding-left: 0.25rem !important;
}
.p-xs-2 {
padding: 0.5rem !important;
}
.pt-xs-2,
.py-xs-2 {
padding-top: 0.5rem !important;
}
.pr-xs-2,
.px-xs-2 {
padding-right: 0.5rem !important;
}
.pb-xs-2,
.py-xs-2 {
padding-bottom: 0.5rem !important;
}
.pl-xs-2,
.px-xs-2 {
padding-left: 0.5rem !important;
}
.p-xs-3 {
padding: 1rem !important;
}
.pt-xs-3,
.py-xs-3 {
padding-top: 1rem !important;
}
.pr-xs-3,
.px-xs-3 {
padding-right: 1rem !important;
}
.pb-xs-3,
.py-xs-3 {
padding-bottom: 1rem !important;
}
.pl-xs-3,
.px-xs-3 {
padding-left: 1rem !important;
}
.p-xs-4 {
padding: 1.5rem !important;
}
.pt-xs-4,
.py-xs-4 {
padding-top: 1.5rem !important;
}
.pr-xs-4,
.px-xs-4 {
padding-right: 1.5rem !important;
}
.pb-xs-4,
.py-xs-4 {
padding-bottom: 1.5rem !important;
}
.pl-xs-4,
.px-xs-4 {
padding-left: 1.5rem !important;
}
.p-xs-5 {
padding: 3rem !important;
}
.pt-xs-5,
.py-xs-5 {
padding-top: 3rem !important;
}
.pr-xs-5,
.px-xs-5 {
padding-right: 3rem !important;
}
.pb-xs-5,
.py-xs-5 {
padding-bottom: 3rem !important;
}
.pl-xs-5,
.px-xs-5 {
padding-left: 3rem !important;
}
.m-xs-n1 {
margin: -0.25rem !important;
}
.mt-xs-n1,
.my-xs-n1 {
margin-top: -0.25rem !important;
}
.mr-xs-n1,
.mx-xs-n1 {
margin-right: -0.25rem !important;
}
.mb-xs-n1,
.my-xs-n1 {
margin-bottom: -0.25rem !important;
}
.ml-xs-n1,
.mx-xs-n1 {
margin-left: -0.25rem !important;
}
.m-xs-n2 {
margin: -0.5rem !important;
}
.mt-xs-n2,
.my-xs-n2 {
margin-top: -0.5rem !important;
}
.mr-xs-n2,
.mx-xs-n2 {
margin-right: -0.5rem !important;
}
.mb-xs-n2,
.my-xs-n2 {
margin-bottom: -0.5rem !important;
}
.ml-xs-n2,
.mx-xs-n2 {
margin-left: -0.5rem !important;
}
.m-xs-n3 {
margin: -1rem !important;
}
.mt-xs-n3,
.my-xs-n3 {
margin-top: -1rem !important;
}
.mr-xs-n3,
.mx-xs-n3 {
margin-right: -1rem !important;
}
.mb-xs-n3,
.my-xs-n3 {
margin-bottom: -1rem !important;
}
.ml-xs-n3,
.mx-xs-n3 {
margin-left: -1rem !important;
}
.m-xs-n4 {
margin: -1.5rem !important;
}
.mt-xs-n4,
.my-xs-n4 {
margin-top: -1.5rem !important;
}
.mr-xs-n4,
.mx-xs-n4 {
margin-right: -1.5rem !important;
}
.mb-xs-n4,
.my-xs-n4 {
margin-bottom: -1.5rem !important;
}
.ml-xs-n4,
.mx-xs-n4 {
margin-left: -1.5rem !important;
}
.m-xs-n5 {
margin: -3rem !important;
}
.mt-xs-n5,
.my-xs-n5 {
margin-top: -3rem !important;
}
.mr-xs-n5,
.mx-xs-n5 {
margin-right: -3rem !important;
}
.mb-xs-n5,
.my-xs-n5 {
margin-bottom: -3rem !important;
}
.ml-xs-n5,
.mx-xs-n5 {
margin-left: -3rem !important;
}
.m-xs-auto {
margin: auto !important;
}
.mt-xs-auto,
.my-xs-auto {
margin-top: auto !important;
}
.mr-xs-auto,
.mx-xs-auto {
margin-right: auto !important;
}
.mb-xs-auto,
.my-xs-auto {
margin-bottom: auto !important;
}
.ml-xs-auto,
.mx-xs-auto {
margin-left: auto !important;
}
}
/* end Padding and margin for viewports smaller than 576px */
/*z-index for #langList close button to fix click on mobile devices */
@media (max-width: 767.98px) {
#langList.modal .close {
z-index: 1;
}
}
/* end z-index for #langList close button to fix click on mobile devices */
/* Top margin adjustment for the direct child right rail element in the primary container */
@media screen and (min-width: 992px) {
#maincontent > div:nth-child(2) .two-col-container .right-rail {
padding-top: 2.6rem;
}
/* background container colors for testing purposes only */
/*#maincontent .two-col-container .row .right-rail > .local-nav,
#maincontent .two-col-container .row .right-rail > .vital-info-one-col {
background: red;
}
#maincontent .two-col-container .row .right-rail > .vital-info-one-col {
background: yellow;
}
#maincontent .two-col-container .row .right-rail > .local-nav + .vital-info-one-col {
background: orange;
}*/
}
/*@media(max-width: 991px) {
#maincontent > div:nth-child(2) .two-col-container .right-rail {
margin: 0 0 30px!important;
}
}*/
/* end Top margin adjustment for the direct child right rail element in the primary container */
/* Card image enlarge icon */
.card-image-enlarge {
position: relative;
display: inline-block; /* Use inline-block to make sure the container wraps around the content */
}
.card-image-enlarge::after {
content: "";
background-image: url(/en/~/media/king-county/depts/metro/icons/png/zoom_out_map_FILL0_wght400_GRAD0_opsz48_white);
background-color: var(--primary);
background-position: center center;
background-size: 75% 75%;
background-repeat: no-repeat;
height: 44px;
width: 44px;
opacity: 1;
position: absolute;
top: 1px; /* Offset from the top */
right: 1px; /*Offset from the right */
}
.card-image-enlarge img {
border: 6px solid var(--primary) !important;
}
/* Page summary
when used with a background of 'overcast' */
.bg-overcast .rich-text hr {
border-color:#ccc!important;
}
/* Increasing the touch target of index links */
.index-strip {
background-color: #000;
padding-top: 10px;
padding-bottom: 10px;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 21px;
}
.index-strip ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
list-style: none;
}
.index-strip ul li {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
min-width: 24px; /* Ensure each link has enough tappable area */
text-align: center;
}
.index-strip ul li a {
display: inline-block;
width: 100%;
min-width: 24px; /* min-width for link area meets accessibility guidelines */
padding: 5px; /* Adds spacing inside links */
color: #fff;
text-decoration: none;
box-sizing: border-box;
}
.index-strip ul li a:hover,
.index-strip ul li a:focus {
color: var(--primary);
}
@media (max-width: 992px) {
.slick-slide:first-child {
display: none!important;
}
}
/* Night owl route table */
.night-owl-table th,
.night-owl-table td {
padding: 12px!important;
}
.night-owl-table td:has(a) {
padding: 0!important;
}
.night-owl-table td:first-child {
white-space: nowrap!important;
text-align: right!important;
}
.night-owl-table td a {
text-decoration: none!important;
font-weight: bold;
padding: 12px!important;
display: block;
}
.night-owl-table td a:hover {
text-decoration: underline!important;
text-decoration-skip-ink: auto;
}
/* Timeline badges */
.timeline-card {
position: relative;
}
.timeline-card .timeline-badge {
position: absolute;
top: 12px;
right: 0;
padding: 4px 10px;
text-transform: uppercase;
font-size: 0.8125rem;
}
.timeline-card .timeline-complete {
background-color: #ddd;
color: #333;
}
@media(max-width: 991px){
.timeline-card .timeline-badge {
top: -43px;
right: -15px;
}
}
.timeline-card .timeline-current {
background-color: var(--primary);
color: #fff;
}
/* Global header relative positioning */
.global-header {
position: relative!important;
}
/* Hide schedule preview button by default */
#effective-date .btn {
display: none;
}