/* ==========================================================================
   Project:     Sunoco PR
   Date:        10/09/2025 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     CMS Site 
========================================================================== */

html {scroll-behavior: smooth;overflow-x:hidden}

:root {
	--body: #444;
	--red: #E22E3E;
	--dark-red: #ac0313;
	--light-blue: #1999c1;
	--blue: #185487;
	--pr-blue: #20396F;
	--dark-blue: #0d3f69;
	--yellow: #ffdf00;
	--dark-yellow: #e1c500;
	--white: #fff;
	--lightest-grey: #f1f1f1;
	--lighter-grey: #ddd;
	--grey: #5F5F5F;
	--dark-grey: #666;
	--darker-grey: #444;
	--darkest-grey: #2A2A2A;
}

/* Text */
body {color: var(--body);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Roboto Condensed",sans-serif;color: var(--body); font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem }
p {margin-bottom: 1.25rem}

.text-red {color: var(--red)}
.text-blue {color: var(--blue)}
.text-yellow {color:var(--yellow);}
.text-grey {color: var(--grey)}
.text-darkest-grey {color: var(--darkest-grey)}

.font-weight-medium {font-weight: 600}
.font-roboto-condensed {font-family: "Roboto Condensed",sans-serif;}

.line-left, .line-right {position: relative;}
.line-left::after, .line-right::after {content:""; background: var(--yellow); width: 3px; position: absolute; top: 10px;height: calc(100% - 20px);}
.line-left::after {left: 0px}
.line-right::after {right: 0px}
.line-left {padding-left: 15px}
.line-right {padding-right: 15px}

/* Links */
a {color: var(--blue);text-decoration: underline;}
a:hover, a:focus {text-decoration:none;color: var(--dark-blue)}

/* Buttons */
.btn-red, .btn-yellow, .btn-blue, .btn-white, .btn-white-border, form[name="frmSearch"] .btn-primary, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {font-family: "Roboto Condensed",sans-serif; font-weight: 700; font-size: .813rem; white-space: normal; line-height: 1; padding:10px 25px; border-radius: 30px; text-transform: uppercase; color: var(--white);text-decoration:none; transition: all 250ms ease;}

.btn-red,form[name="frmSearch"] .btn-primary {background: var(--red); color: var(--white); border:none }
.btn-red:hover, .btn-red:focus,form[name="frmSearch"] .btn-primary:hover,form[name="frmSearch"] .btn-primary:focus {background:var(--dark-red); color: var(--white)}

.btn-yellow {background: var(--yellow); color: var(--blue)}
.btn-yellow:hover, .btn-yellow:focus {background: var(--dark-yellow); color:var(--blue)}

.btn-blue {background: var(--blue); color: var(--white);border: 1.5px solid var(--blue);}
.btn-blue:hover, .btn-blue:focus {background: var(--dark-blue); color: var(--white)}

.btn-white {background: var(--white); color: var(--blue);box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,.3);}
.btn-white:hover, .btn-white:focus {background: var(--white); color: var(--red)}

.btn-white-border {background: none; border: 1.5px solid var(--white); color: var(--white)}
.btn-white-border:hover, .btn-white-border:focus {background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white)}

.btn-sm {font-size: .75rem; padding: 7px 15px}
.btn-md {font-size: .875rem; padding: 10px 20px}
.btn-lg {font-size: 1.125rem; padding: 10px 40px}

.btn-toggle-video {position: absolute;color: var(--white);  z-index: 1; bottom: 15px; right: 15px; background: rgba(0,0,0,.9);border-radius: 50%; width: 25px; height: 25px; font-size: .625rem;opacity: .5; transition: 200ms opacity ease; display:flex; align-items: center; justify-content: center;}
.btn-toggle-video:hover, .btn-toggle-video:focus {opacity: 1; text-decoration: none; color: var(--white)}

.link-arrow {position:relative;text-decoration: none; display:flex; align-items:center; font-weight: 600}
.link-arrow::before {font-family: "Font Awesome 5 Free"; transition: color 250ms ease; content: "\f5eb"; font-size: 1.25rem; font-weight: 900; width: 45px; height: 45px; border: 2px solid var(--lighter-grey); border-radius: 50%; display:flex; align-items:center; justify-content: center;margin-right: 10px}
.link-arrow:hover::before, .link-arrow:focus::before {color: var(--red)}

/* Backgrounds */
.bg-yellow {background: var(--yellow);}
.bg-blue {background: var(--blue)}
.bg-pr-blue {background: var(--pr-blue)}
.bg-red {background: var(--red)}
.bg-dark-grey {background: var(--dark-grey)}
.bg-darkest-grey {background: var(--darkest-grey)}
.bg-darker-grey {background: var(--body)}
.bg-slanted {position: relative;margin-top: -1px}
.bg-slanted .container {position: relative; z-index: 1;}
.bg-slanted::before {content:""; position: absolute; bottom: 0px; left: 0px; width: 100%; height:400px; background: url(/img/bg-waves.webp) no-repeat; background-size: contain; z-index: 0; opacity: .1}
.bg-slanted::after {content:""; z-index: 0; position: absolute; bottom: -1px; left: 0px; width: 100%; height: 400px;  background: var(--white)}
.bg-tread {position: relative; }
.bg-tread::before, .bg-tread::after {content:""; position: absolute; z-index: -1; width: 600px; height: 600px; background: url(/img/bg-tread.svg); background-size:cover}
.bg-tread::before {top: 0px; left: -100px;}
.bg-tread::after {bottom: 0px; right: -100px;}
.bg-halftone {position: relative;background: var(--blue); z-index: 2}
.bg-halftone::after {content:""; position: absolute; right: -50px; top: 0px; width: 100%; height: 100%; background: url(/img/bg-halftone.svg) no-repeat; background-size: cover; opacity: .15; z-index: -0}
.bg-wave {position: relative;}
.bg-wave::after {top: 50%; left: 0px; content:""; position: absolute; z-index: -1; width: 100%; opacity: .5; height: 400px; margin-top: -200px; background: url(/img/bg-wave-dark.webp); background-size:contain}
.bg-bluelines-horizontal {background: url(/img/bg-bluelines-horizontal.webp); background-size: cover}
.bg-bluelines-slanted {background: url(/img/bg-bluelines-slanted.webp); background-size: cover}
.bg-img-offset {position: absolute; top: 50%; transform: translateY(-50%); left: 0px; width: 100%; z-index: -1; height: 60%}
.bg-img-offset::after {content:""; display:block;background: rgba(24,84,135,.8); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0}
.bg-img-offset img {width: 100%; height: 100%; object-fit: cover; position: relative; z-index: -1}
.bg-blue-checkered-flag {background: url(/img/bg-blue-checkered-flag.webp) top right no-repeat var(--blue); background-size: cover}

/* Indices */
.z-0 {z-index: 0}
.z-1 {z-index: 1}

/* Overlays & Gradients */
.gradient-dark-left {position: relative;}
.gradient-dark-left::after {content:""; display:block; z-index: -1; position: absolute; top: 0px; left: 0px; height: 100%;}
.gradient-dark-left-md p:not(.bg-white p) {margin: 0px}

.gradient-blue {position: relative;}
.gradient-blue::after {content:""; position: absolute; left: 0px; right: 0px; height: 50%; z-index: -1;}
.gradient-blue-top::after {top: 0px; background: linear-gradient(180deg, rgba(24,84,135) 0%, rgba(19,67,108,0.8) 20%, rgba(0,0,0,0) 100%);}
.gradient-blue-bottom::after {bottom: 0px; background: linear-gradient(0deg, rgba(24,84,135,1) 0%, rgba(19,67,108,0.08) 80%, rgba(255,255,255,0) 100%);}

.overlay-blue {position: relative; overflow:hidden;}
 	.overlay-blue::after {content:""; background: rgba(24,84,135,.9); position: absolute; z-index: 0; left: 0px; right: 0px; top: 0px; bottom: 0px;}
 	.overlay-blue [class*="container"] {position: relative; z-index: 1;}


/* Images */
img {max-width: 100%; height: auto;}
p:has(img:only-child) {margin:0px; width: 100%}
.aspect-ratio-16-10 {aspect-ratio: 16 / 10; object-fit: cover; height: auto; width: 100%; display:block}
.obj-center-top {object-position: center top;}
.obj-center-center {object-position: center center;}
.obj-center-bottom {object-position: center bottom;}

.img-fit img {width: 100%; height: 100%; object-fit:cover;}
.img-fit-top-center img {object-position: top center}
.img-fit-bottom-center img {object-position: bottom center;}
.img-fit-center-center img {object-position: center center;}
.img-fit-right-center img {object-position: right center;}

/* Lists */
.arrow-list {list-style:none;padding-left: 20px;}
.arrow-list li {position:relative;display:table-row}
.arrow-list li::before {content: "> ";font-size: 14px;color: var(--red);font-weight: 500; padding-right: 15px;display:table-cell}

.bullet-list {list-style:none}
.bullet-list li::before {content: "\2022"; color: var(--red); display:inline-block; width: 1rem; margin-left: -1rem}

.list-redchecks, .list-redchecks-square {list-style:none; padding: 0px;}
.list-redchecks li, .list-redchecks-square li {position: relative; padding-left: 25px;margin-bottom: 15px;}
.list-redchecks li::before, .list-redchecks-square li::before {font-family: "Font Awesome 5 Free";color: var(--red);position: absolute; top: 2px; left: 0px}
.list-redchecks-square li::before {content: "\f14a";font-weight: 400; }
.list-redchecks li::before {content: "\f00c";font-weight: 900; }

/* Radii */
.rounded-xl {border-radius: 20px}

/* Borders */
.border-grey-2 {border: 2px solid var(--lighter-grey)}

/* Accordions */
.cms-accordion .card {background:none; border-radius: 0px; border: none;}
.cms-accordion .card-header {transition: color 250ms ease; border-left: 3px solid var(--red);position: relative;border-radius: 0px; background:none;border:none; padding: 20px 50px 20px 15px!important;color: var(--body); font-weight: 700;position: relative;}
.cms-accordion .card-header::before {content:""; background: var(--red); width: 3px; height: 20px; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; display:block}
.cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none; cursor: pointer}
.cms-accordion .card-header::after {transition: transform 250ms ease; background: url(/img/icon-plus-red.svg) center center no-repeat;background-size: 100% 100%; width: 20px; height: 20px; content:""; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.cms-accordion .card-header[aria-expanded=true] { color: var(--red); border-bottom: none}
.cms-accordion .card-header[aria-expanded=true]::after {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
.cms-accordion .card-body {padding: 0px; margin: 15px 0px}
.cms-accordion .card-body *:last-child {margin-bottom: 0px}
.cms-accordion .collapsing {transition-duration: 250ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs .nav {margin-bottom: 0px !important}
.cms-tabs .nav p:hover {cursor: pointer}
.cms-tabs .nav-pills .nav-link {background: var(--blue); color: var(--white); font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px}
.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--red);color: var(--body); }
.cms-tabs .tab-content {background: var(--lightest-grey); padding: 1.5rem;}
.cms-tabs .tab-content *:last-child {margin-bottom: 0px}
	
/* Heros */
.hero {position: relative;z-index: 0; display: flex; align-items:center; text-align:center; flex-direction: row; align-items:center}
.hero h1, .hero .h1 {font-family: "Anton"; font-weight: 400; text-transform: uppercase;line-height: 1.3; letter-spacing: 4px}
.hero sup {font-size: .2em; vertical-align: top; top: .9em;}
.hero video, .hero .hero-img {position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; object-fit:cover; object-position: center bottom}
.hero::after {position: absolute; content:""; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background: rgba(0,0,0,.30)}

.hero-sm {min-height: 175px;}
.hero-md {min-height: 375px;}
.hero-lg::before {position: absolute; content:""; top:-20px; left: -20px; background: var(--pr-blue); width: calc(100% + 40px); height: calc(100% + 40px); z-index: -1}

.hero .btn-find-a-station {text-shadow: rgba(0,0,0,1) 0px 0 15px;font-family: "Roboto Condensed",sans-serif; letter-spacing: .25px; text-transform: uppercase; position: absolute; z-index: 1;  bottom: 30px; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
.hero .btn-find-a-station::after {content:"";transition: width 250ms ease; position: absolute; bottom: -5px; left: 0px; right: 0px; margin: auto; height: 2.5px; width: 30px; background: var(--red)}
.hero .btn-find-a-station a {color: var(--white); text-decoration: none; font-weight: 700;}
.hero .btn-find-a-station:hover::after {width: 100%;}

/* Shadows */
.text-shadow-lg {text-shadow: rgba(0,0,0,.75) 0px 0 30px;}
.box-shadow-offset .container:first-child {position: relative;}
.box-shadow-offset .container:first-child::after {content:""; display:block; position: absolute; z-index: -1; bottom: 0px; left: 50px; right: 50px; height: 50px; box-shadow: 0px 20px 20px 0px rgba(0,0,0,.25);}
.box-shadow-sm {box-shadow: 0 0 .5rem rgba(0,0,0,.15)}
.box-shadow-md {box-shadow: 0 0 1rem rgba(0,0,0,.2)}
.box-shadow-lg {box-shadow: 0 0 2rem rgba(0,0,0,.2)}

/* Cards */
.animated-cards {color: var(--white)}
.animated-card .img-bg {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 0; object-fit: cover;opacity: 0}

/* Breadcrums */
.breadcrumb {font-size: .875rem}

/* Image Scroll Wrapper */
.img-scroll-wrapper {position: relative;}
.img-scroll-wrapper h2.text-md-white { position: relative; padding-left: 20px;}
.img-scroll-wrapper h2.text-md-white::before {content:""; width: 3px; display:block; background: var(--yellow);position: absolute; left: 0px; top: 7.5px; bottom: 7.5px}

/* ==========================================================================
     Main Layout
========================================================================== */

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--red); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:700;font-size:14px;z-index:9999;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white); background:var(--dark-red)}

/* Header */
header { z-index: 99; text-transform: uppercase;font-family: "Roboto Condensed",sans-serif; position: fixed; top: 0px; left: 0px; width: 100%}
header button[aria-expanded] {outline:none; font-family: "Roboto Condensed",sans-serif;background:none; border:none; padding: 2px 3.5px;text-transform: uppercase;}
header a {text-decoration: none;}

.btn-toggle-offcanvas {border-radius: 0px; height: 36px;margin:0;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity;text-transform:none;color:inherit;border:0;}
.hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3.5px;background-color:var(--body); right: 0px}
.hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
.hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;}
.hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.685,.19); bottom:-8px;}

.btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
.btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0; width: 100%;}
.btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg);width: 100%;}

/* Footer */
footer {position: relative; z-index: 0; background: url(/img/bg-footer.webp) right top;background-size: cover; color: var(--white)}
footer::after { content: "";position: absolute;inset: 0;z-index: 0;background: linear-gradient(to left, rgba(32, 57, 111, .8) 0%, rgba(32, 57, 111, 1) 100%);}
footer .container {position: relative; z-index: 1}
footer li:not(:last-child) {margin-bottom: 5px;}
footer a {text-decoration: none;color: var(--white);font-family: "Roboto Condensed",sans-serif;}
footer li a:hover, footer li a:focus {color: var(--white); text-decoration: underline;}
footer .bg-darker-grey a {color: var(--white);}

/* Socials */
.socials li:not(:last-child) {margin-right: 3px}
.socials a {display:flex; justify-content:center; align-items:center; transition: all 250ms ease; background: var(--white); color: var(--pr-blue); text-decoration: none;border-radius: 50%; width: 30px; height: 30px; font-size: .75rem}
.socials a:hover, .socials a:focus {color: var(--red); text-decoration: none;}

/* Alert */
.alert-wrapper {text-transform: none; font-size: .813rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
.alert-wrapper .alert {text-align:center; background: var(--blue); color: var(--white); position: relative;width: 100%;padding: 10px 20px 10px 0px; margin: 0px; border-radius: 0px}
.alert-wrapper .alert + .alert {border-top: 1px solid rgba(255,255,255,.2);}
.alert-wrapper a {color: var(--white); text-decoration: none;font-weight: 400; }
.alert-wrapper button {position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);right: 15px; padding: 0px; background:none; border:none; color: var(--white); -webkit-text-stroke: 1px var(--blue)}
.alert-wrapper button:hover, .alert-wrapper button:focus {color: var(--yellow)}

/* Cookie Noti */
.cookie-wrapper {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; max-width: 100%; background: var(--darker-grey); color: var(--white); font-size: 14px; z-index: 100; line-height: 1.4;}
.cookie-wrapper a {color: var(--white)}
.cookie-wrapper .cookie-choice .list-inline-item, .cookie-choice-expand .list-inline-item {margin-right: 0px !important;}
.cookie-wrapper .cookie-choice-expand {max-height: 575px; overflow-x:hidden;}
.cookie-wrapper .cookie-choice-expand.show {overflow-y: auto; }
.cookie-wrapper .form-check-input[disabled]~.form-check-label {color:#E0E0E0}

/* Search */
form[name="frmSearch"] .btn-primary, form[name="frmSearch"] input {border-radius: 0px}

/* Find a Station Wrapper */
article section.find-a-station-wrapper:last-child {margin-bottom: -65px}
.find-a-station-wrapper .container {position: relative;z-index: 1; padding: 0px;margin-bottom: 5rem;}
.find-a-station-wrapper .jarallax {height: 800px; margin-top: -800px;clip-path: polygon(0 82%, 100% 57%, 100% 100%, 0% 100%);}
.find-a-station-wrapper form {max-width: 400px}
.find-a-station-wrapper .form-control, .find-a-station-wrapper .custom-select {border-radius: 30px; background-color: var(--white); color: var(--dark-blue);font-weight: 500;}
.find-a-station-wrapper .form-control::-webkit-input-placeholder {color:var(--dark-blue); }
.find-a-station-wrapper .form-control::-msplaceholder {color:var(--dark-blue)}
.find-a-station-wrapper .form-control::-placeholder {color:var(--dark-blue)}
.find-a-station-wrapper .form-group-icon {position: relative;}
.find-a-station-wrapper .form-group-icon input {padding-right: 30px}
.find-a-station-wrapper .form-group-icon img {position: absolute; top: 50%; height: 18px; margin-top: -9px; right: 10px; z-index: 2}

/* Default Template */
article .container p:last-child {margin-bottom: 0px}

/* Main Locator - Form */
.locator form {max-width: 360px; position: relative;margin:auto;}
.locator form input {color: var(--body); border: 2px solid transparent; font-size:1rem; border: none; border-radius: 60px;height: 60px; padding: 0px 50px 0px 25px; background: var(--lightest-grey)}
.locator form input::placeholder {color: var(--grey)}
.locator form input.error {border: 2px solid var(--red);}
.locator form .btn-search {position: relative; padding: 0px; background:none; position: absolute; top: 50%; transform:translateY(-50%); right: 20px;}
.locator .radius-info {display: inline-flex; justify-content: center; font-size: .875rem;align-items: center; border-radius: 50px; background: var(--lightest-grey); padding: 0px 15px; line-height: 1.2;margin-top: 2rem;margin-bottom: 0px}
.locator .radius-info .btn {margin: -1px 0px 1px 0px}

/* Main Locator - Map */
.locator #map {background:var(--lightest-grey)}
.locator .marker-label {color: var(--white); font-size: .8125rem; font-weight:500;z-index: 0; line-height: 1; text-align:center; margin-top: -5px; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow:hidden}
.locator .jarallax {height: 300px;margin-top: -200px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);width: 100vw; z-index: -1}

/* Main Locator - List */
.locator .locations {margin:auto}
.locator .locations .location {border-bottom: 1px solid var(--lighter-grey); background:var(--white); border-left:none; border-right:none; border-top:none; width: 100%; transition: background .5s; text-align:left; position: relative;}
.locator .locations .location.active {background: var(--yellow)}
.locator .locations .location div {margin-right: 20px;}
.locator .locations .location div+a {padding-top: 45px;white-space: nowrap}
.locator .locations .location div+a::before { width: 40px; height: 40px;border-radius: 20px;position:absolute;top: 28px; right: 40px}
.locator .locations .location address a {display:none}
.locator .no-results {max-width: 400px; margin:60px auto; padding: 30px}
.locator .loading {width: 50px;}

/* Main Locator - Locations */
.locator .location-details-wrapper {background: var(--white); box-shadow: 0px 14px 14px 0px rgba(99,100,102,.15); z-index: 1; width: 100%; position: absolute; top: 0px; left: 0px; height:0px; transition: all 250ms ease;overflow:hidden;}
.locator .location-details-wrapper .location { margin:auto; position:relative;padding: 30px}
.locator .location-details-wrapper .location div+a {margin-top: 10px;display:block; padding: 5px 0px 0px 40px}
.locator .location-details-wrapper .location div+a::before { width: 30px; height: 30px;border-radius: 20px;position:absolute;top: 0px; left: 0px;}
.locator .location-details-wrapper .location address a {margin: 5px 0px}
.locator .location-details-wrapper .location p span {display:none}
.locator .locator-row {box-shadow: 0 0 2rem rgba(0,0,0,.2)}

/* Main Locator - Shared in list & details */
.locator .location p:first-child {font-family: "Roboto Condensed",sans-serif;font-size: 18px;line-height: 1.3; font-weight:700;margin-bottom: 5px; }
.locator .location address {line-height: 1.3;font-size: 14px; color: var(--body)}
.locator .location p:last-child {font-weight:500}
.locator .location div+a {font-weight:500;}
.locator .location div+a::before {content:""; background:url(/img/location-arrow.png) -2px -2px no-repeat var(--red); background-size: cover;}

/* Main Locator - Nav */
.locator nav {text-align:center;background:var(--white); }
.locator nav p {font-size: 14px; color: var(--body);font-weight: 400;}
.locator nav .locations-prev, .locator nav .locations-next {background:none;border:none;position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.locator nav .locations-prev {left: 0px;}
.locator nav .locations-next {right:0px}
.locator nav .locations-prev:focus, .locator nav .locations-next:focus {outline:none}
.locator nav .locations-prev::before, .locator nav .locations-next::before {content:"";position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

/* Locator Detail - Map */
.locator-detail #map {height: 250px}

/* History */
.history {height: 770px; overflow-x: auto;overflow-y: hidden; cursor: grab; padding-bottom: 15px; background: url(/img/bg-history.webp)  no-repeat}
.history:active {cursor: grabbing}
.history .history-row {display: flex; flex-wrap: nowrap; gap: 300px;}
.history .history-item {flex: 0 0 auto; position:relative }
.history .history-item:nth-child(odd) {padding-top: 3rem}
.history .history-item:nth-child(even) {position: relative;color: var(--white); padding-bottom: 3rem}
.history .history-item:nth-child(even) * {position: relative; z-index: 1;}
.history .history-item:nth-child(even) h2 {color: var(--white)}
.history .history-item:nth-child(even)::before {content:""; background: var(--grey); position: absolute; z-index: 0; left: -50%; top: 0px; bottom: 0px; width: 200%; clip-path: polygon(0 0, 80% 0%, 100% 100%, 20% 100%);}
.history .year {display: flex; align-items: center; font-size: 6rem; font-family: "Anton",sans-serif; letter-spacing: 2px;}

/* Google Translate */
html.translated-ltr header {top: 40px}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
	/* Text */
	body {font-size: 1rem}
     h1, .h1 {font-size: 2.25rem}
     h2, .h2 {font-size: 2rem}
     h3, .h3 {font-size: 1.75rem}
	h4, .h4 {font-size: 1.5rem}
	h5, .h5 {font-size: 1.25rem}
	h6, .h6 {font-size: 1.15rem}
	.text-xs {font-size: .75rem;}
	.text-sm {font-size: .875rem}
	.text-large {font-size:0.938rem;}
	.text-x-large {font-size: 1rem;}

	/* Heros */
	.hero-lg {margin: 15px;height: 500px}
	.hero-lg h1, .hero-md h1 {font-size: min(12vw,4rem);}

	/* Backgrounds */
	.bg-slanted::after {clip-path: polygon(0 100%, 100% 60%, 100% 100%, 0% 100%);}

	/* Images */
	.img-row-callout {margin: -30px 0px;}

	/* Containers */
	.container-xsmall {max-width: 600px}
	.container-small {max-width: 700px}
	.container-medium {max-width: 800px}

	/* Image Scroll Wrapper */
	.img-scroll-wrapper .img-scroll {transition: transform 250ms ease; z-index: -101; content:""; position: absolute;left: -100%; height: 100%; top: 0px; width: 100%; }
	.img-scroll-wrapper .jarallax-img {height: 250px; width: 100%; object-fit:cover;}
	.img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {background: none; border: 1.5px solid var(--blue); color: var(--blue)}
	.img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):hover, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):focus {background: none; border-color: var(--dark-blue); color: var(--dark-blue)}

	/* Main Locator - Form */
	.locator .filters-wrapper {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: center; justify-items: start;}
	.locator .filters-wrapper .custom-control:first-child {grid-column: 1 / -1;}

	/* Main Locator - Map */
	.locator #map {height: 300px;}

	/* Main Locator - Locations */
     .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; background-size: cover;}
	.locator .locations {max-width: 450px;}
	.locator .location {padding: 20px 25px}
	.locator .location-details-wrapper.active {height: 500px}
	.locator .loading { margin:100px auto;display:block}
     .locator .location-details-wrapper .location {width: 90%;}

	/* Main Locator - Nav */
	.locator nav {padding: 0px 15px; max-width: 260px; margin:15px auto 15px auto; position: relative;}
	.locator nav .locations-prev, .locator nav .locations-next {width: 26px; height: 26px;}
	.locator nav .locations-prev::before {border-top: 13px solid transparent;border-bottom: 13px solid transparent;border-right: 13px solid rgb(158, 160, 163);}
	.locator nav .locations-next::before { border-top: 13px solid transparent;border-bottom: 13px solid transparent;border-left: 13px solid rgb(158, 160, 163);}

	/* History */
	.history {background-position: calc(100% - 15px) 445px}
	.history .history-item {width: 280px;}
	.history .history-text {height: 365px}
}

@media (min-width: 576px) {
	/* History */
	.history {background-position: calc(100% - 15px) 355px}
	.history .history-item {width: 400px;}
	.history .history-text {height: 275px}
}

@media (max-width: 767.9px) {
	/* Header */
	header {background: var(--white);border-bottom: 1.5px solid var(--lightest-grey);top: 0px; left: 0px; width: 100%;}
	header .logo {width: 70px;height: 53px; padding: 5px 0px; }
	header .offcanvasmenu {background: var(--white); transition: opacity 250ms ease; overflow-y:auto; position: absolute; top: -999px; width: 100%; height: calc(100vh - 40px); padding: 20px 0px 0px 0px; opacity: 0; visibility:hidden; pointer-events: none;}
	.offcanvas-open .offcanvasmenu {opacity: 1; visibility: visible; pointer-events:all; top: 100%}
	.offcanvas-open {overflow:hidden;}
	header .mainmenu li {margin-bottom: 35px}
	header .mainmenu button, header .mainmenu > li > a {font-weight: 700; color: var(--blue); font-size: 1.125rem; width: 100%}
	header .mainmenu button span {font-size: 2.25rem; width: 20px; height: 30px; line-height: 1;-webkit-text-stroke: 3.5px white;margin: -2px 0px 2px 0px}
	header .mainmenu button:focus {outline: 0; box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
	header .quicklinks {border-top: 1.5px solid var(--lighter-grey); padding-top: 40px}
	header .quicklinks li {margin-bottom: 15px}
	header .quicklinks a, header .quicklinks button {color: var(--body); font-size: 1rem;}
	header .quicklinks button { padding: 0px; text-transform: uppercase;}
	header .dropdown {opacity: 0; visibility:hidden;transition: opacity 250ms ease; pointer-events: none;position: absolute; top: -999px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
	header .dropdown li {margin-bottom: 15px}
	header li.active .dropdown {opacity: 1; visibility: visible; pointer-events: all;position: relative; top: 0px; width: 100%}
	header .dropdown a {color:var(--body); text-transform: none; font-weight: 400;font-size: .913rem}
	header .dropdown .btn-back {font-size: .913rem}
	header .dropdown .btn-back span {-webkit-text-stroke: 2.5px white; font-size: 2rem}
	header .dropdown p {font-size: 1.125rem;font-family: "Roboto Condensed",sans-serif;}
}

@media (min-width: 768px) {	
	/* Text */
     h1, .h1 {font-size: 2.75rem}
     h2, .h2 {font-size: 2.5rem}
     h3, .h3 {font-size: 2rem}
	h4, .h4 {font-size: 1.75rem}
	h5, .h5 {font-size: 1.5rem}
	h6, .h6 {font-size: 1.25rem}
	.text-xs {font-size: .75rem;}
	.text-large {font-size: 1.125rem;}
	.text-x-large {font-size: 1.25rem;}
	.text-md-white {color: var(--white)}

	/* Header */
	.has-hero-lg header {top: 20px; left: 20px; width: calc(100% - 40px);}
	.translated-ltr .has-hero-lg header {top: 60px}
	header .logo {width: 130px; height: 80px}

	header li {position: relative;display: inline-block;font-size: .913rem}
	header li button, header .mainmenu > li > a  {color: var(--white);padding: 2px 3.5px}
	header li button:hover, header ul li button:focus {color: var(--white)}

	header .quicklinks {margin: 15px 0px 20px 0px;}
	header .quicklinks li {margin-left: 25px; }
	header .quicklinks a, header .quicklinks button {text-decoration: none; color:var(--white);height: 25px; display: flex; align-items:center}
	header .quicklinks button {text-transform: uppercase; font-weight: 400; font-size: .913rem; padding: 0px}
	header .quicklinks a:hover, header .quicklinks a:focus, header .quicklinks button:hover, header .quicklinks button:focus {text-decoration: underline;color: var(--white); }

	header .mainmenu > li {margin-left: 45px; padding-bottom: 10px;}
	header .mainmenu > li:last-child .dropdown {right: 0px}
	header .mainmenu > li::after {content:""; height: 2px; width: calc(100% - 15px); position: absolute; bottom: 10px; left: 0px; right: 0px; margin: auto; display:block; background: var(--red); opacity: 0; transition: all 250ms ease;}
	header .mainmenu > li.show::after, body:not(.has-touch) header .mainmenu > li:hover::after {opacity: 1; bottom: 5px;}
	header .mainmenu > li:last-child {display:none}

	header .mainmenu > li.show .dropdown {opacity: 1; visibility: visible; top: calc(100% - 5px); pointer-events:all}
	header .mainmenu > li:nth-child(1) .dropdown {margin-left: -246px;}
	header .mainmenu > li:nth-child(2) .dropdown {margin-left: -398px}
	header .mainmenu > li:nth-child(3) .dropdown {right: 0px; left: auto; margin: 0px}

	header .mainmenu button, header .mainmenu > li > a  {font-weight: 700; color: var(--white)}

	header .mainmenu .angle {margin: -4px 0px 4px 6px; transition: transform 250ms ease; transform-origin: 50% 70%; border: 1px solid var(--white);width: 8px; height: 8px;border-width: 0px 0px 1.5px 1.5px;display:block; }
	header .mainmenu .angle-down {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);}
	header .mainmenu .show .angle { -ms-transform: rotate(-225deg);-wekbit-transform: rotate(-225deg);transform: rotate(-225deg);}

	header .dropdown {opacity: 0; transition: all 250ms ease; visibility: hidden; position: absolute; left: 50%; top: 100%; pointer-events:none;background: var(--white); padding: 1.5rem; width:600px; font-size: .875rem;font-weight: 400;line-height: 1.6; text-transform: none;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
	header .dropdown a {color:var(--body); padding: 0px;font-weight: 400}
	header .dropdown a:hover, header .dropdown a:focus {color:var(--body); text-decoration: underline; }
	header .dropdown li {display:block;margin: 0px 0px 10px 0px; padding: 0px}
	header .dropdown li:hover::after {content:none}
	header .dropdown p {line-height: 1.5; font-size: .875rem}
	header .dropdown .h5 {font-size: 1.15rem;}

	.header-compact header {background: var(--white);box-shadow: 0 0 .5rem rgba(0,0,0,.15);}
	.header-compact.has-hero-lg header {top: 0px; left: 0px; right: 0px; width: 100%;}
	.translated-ltr .header-compact.has-hero-lg header {top: 40px}
	.header-compact header .mainmenu button {color: var(--blue)}
	.header-compact header .mainmenu > li {margin-top: -30px; margin-bottom: -30px}
	.header-compact header .mainmenu li:last-child {display:inline-block;}
	.header-compact header .quicklinks {display:none}
	.header-compact header li button:hover, .header-compact header li button:focus, .header-compact header .mainmenu > li > a {color: var(--blue)}
	.header-compact header li .angle {border-color: var(--blue)}
	.header-compact header .logo {width: 75px; height: 52px; padding: 5px 0px; position: relative; z-index: 1}
	.header-compact header .mainmenu li:last-child::after {content:none}
	.header-compact header .mainmenu li.show .dropdown {top: 100%; }

	.dropdown-open::after {content:""; display:block; pointer-events:none; transition: opacity 250ms ease, backdrop-filter 250ms ease; opacity: 0;background: rgba(0,0,0,.5); backdrop-filter: blur(5px); z-index: 1; position: fixed; top:0px; left: 0px; right: 0px; height: 100%}
	.has-hero80vh.dropdown-open::after {left: 20px; right: 20px; height: calc(80vh - 40px)}
	.header-compact::after, .has-hero80vh.header-compact::after {top: 0px; left: 0px; width: 100%; height: 100%}
	.dropdown-open::after {opacity: 1}

	.header-hover header, .header-white {transition: background 250ms ease, border 250ms ease;background: var(--white);box-shadow: 0 0 .5rem rgba(0,0,0,.15);}
	.header-hover header li button, .header-white li button {color: var(--blue)}
	.header-hover header li button:hover, 
	.header-hover header li button:focus, 
	.header-white li button:hover, 
	.header-white li button:focus, 
	.header-white .quicklinks a, 
	.header-hover header .quicklinks a,
	.header-white .quicklinks a:hover,
	.header-white .quicklinks a:focus, 
	.header-hover header .quicklinks a:focus, 
	.header-hover .mainmenu > li > a,
	.header-white .mainmenu > li > a,
	.header-white .quicklinks a:hover {color: var(--blue)}
	.header-hover header li .angle, .header-white li .angle {border-color: var(--blue)}

	.header-white {background: var(--white)}

	/* Heros */
	.hero-lg {margin: 20px}
	.hero-lg h1, .hero-md h1 {font-size: min(12vw,5rem);}

	/* Backgrounds */
	.bg-pr-blue-md {background: var(--pr-blue)}
	.find-a-station-wrapper .bg-halftone {width: 150%}
	.bg-md-none {background: none !important}

	/* Cards */
	.animated-cards {gap: 15px;display:flex; }
	.animated-card {width: 25%;transition: width 450ms ease; display:flex; position: relative;min-height: 620px}
	.animated-card .card-content {position: relative; z-index: 1; flex-grow: 1}

	.animated-card.active {width: 50%}
	.animated-card.active::before {content:""; position: absolute; inset: 0; z-index: 0}
	.animated-card.active:has(.bg-pr-blue)::before {background: rgba(32,57,111,.9)}
	.animated-card.active:has(.bg-red)::before {background: rgba(226,46,62,.9)}
	.animated-card.active img[class*="obj-"] {display:none}
	.animated-card.active div[class*="bg-"] {justify-content: flex-end;}
	.animated-card.active .img-bg {opacity: .3}
	.animated-card.active .card-content {flex-grow: 0}

	/* Images */
	.img-row-callout {margin: 0px; position: absolute; top: 50%; transform: translateY(-50%); left: 15px; width: 400px; max-width:none}

	/* Image Scroll Wrapper */
	.img-scroll-wrapper {position: relative; }
	.img-scroll-wrapper .h-full {min-height: 400px}
	.img-scroll-wrapper-xs .h-full {min-height: 250px}
	.img-scroll-wrapper-video .container, .img-scroll-wrapper-video .d-flex {min-height: 0px}
	.img-scroll-wrapper .jarallax-img {position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1;}
	.img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {background: var(--white); color: var(--blue);box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,.3);border:none}
	.img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):hover, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):focus {background: var(--white); color: var(--red)}
	.img-scroll-wrapper p, .img-scroll-wrapper h2 {text-shadow: 0px 0px 15px rgba(0,0,0,0.9);}
}

@media (min-width: 992px) {	
	/* Header */
	header .mainmenu > li:nth-child(1) .dropdown {margin-left: -345px;}
	header .mainmenu > li:nth-child(2) .dropdown {margin-left: -377px;}
	header .mainmenu > li {margin-left: 70px;}

	/* Backgrounds */
	.bg-slanted::after {clip-path: polygon(0 100%, 100% 40%, 100% 100%, 0% 100%);}
	.find-a-station-wrapper .bg-halftone {width: 200%}

	/* Images */
	.img-row-callout {width: 500px;left: 30px}

	/* Main Locator - Map */
	.locator #map {height: 460px;}

	/* Main Locator - List */
     .locator .locations {margin:0px;max-width: 100%}
	.locator .locations li {height: 415px}
	.locator .locations .location {padding: 0px 20px 0px 20px; height: 33.333%}
	.locator .locations .location:not(.active):hover {background: var(--lightest-grey)}
	.locator .location-details-wrapper .location {padding: 30px 10px 30px 60px; width: 300px}
	.locator .locator-row .col-12:nth-child(1) {order: 2;}
	.locator .locator-row .col-12:nth-child(2) {display:none; order: 1; max-width: 350px;}
	.locator .location-details-wrapper.active {height: 460px}
     .locator .loading { margin:0px;position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.locator .no-results {margin:20px}
	.locator.show-details .row .col-12:nth-child(2) {display:block;}
	.locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 350px);margin:0px}
     .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; }

	/* Main Locator - Nav */
	.locator nav {padding: 10px;margin: 0px auto; position: absolute; max-width:none; width:240px; left: 0px; right: 0px; bottom: 0px}
	.locator nav .locations-prev::before, .locator nav .locations-next::before { margin-left: 0px; transition: all 250ms ease;}
	.locator nav .locations-prev::before {border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid rgb(158, 160, 163);}
	.locator nav .locations-next::before { border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgb(158, 160, 163);}
	.locator nav .locations-prev:hover::before {border-right:8px solid var(--grey);}
	.locator nav .locations-next:hover::before {border-left:8px solid var(--grey);}
}

@media (min-width: 1200px) {	
	/* Heros */
	.hero-lg {height: 700px}
	.hero-lg h1, .hero-md h1 {font-size: 7rem;}

	/* Images */
	.img-row-callout {left: 100px}

	/* Main Locator - List */
	.locator .locator-row .col-12:nth-child(1) { max-width: 100%}
	.locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 520px);margin:0px}
	.locator .locator-row .col-12:nth-child(2) {max-width: 520px;}
	.locator .location-details-wrapper .location {padding: 50px 0px 40px 60px; width: 450px}
	.locator .no-results {margin:130px 30px 0px 80px}

	/* Main Locator - Nav */
	.locator nav {width: 410px}
}

@media (min-width: 1500px) {
	/* Heros */
	.hero-lg h1, .hero-md h1 {font-size: 9rem;}
	.hero-lg .container {max-width: 1300px}

	/* Containers */
	.container {max-width: 1500px}
	.container-xsmall {max-width: 800px}
	.container-small {max-width: 900px}
	.container-medium {max-width: 1100px}
	.container-fluid {max-width: 1800px}
}

@media (min-width: 2500px) {
	/* Text */
	body {font-size: 1.25rem}
	h1, .h1 {font-size: 3rem}
	h2, .h2 {font-size: 2.75rem}
	h3, .h3 {font-size: 2.25rem}
	h4, .h4 {font-size: 2rem}
	h5, .h5 {font-size: 1.75rem}
	h6, .h6 {font-size: 1.5rem}
	.text-xs {font-size: 1rem}
	.text-sm {font-size: 1.063rem}
	.text-large {font-size: 1.25rem;}
	.text-x-large {font-size: 1.5rem;}
	.btn-red, .btn-yellow, .btn-blue, .btn-white {font-size: 1.15rem; padding: 15px 30px}

	/* Header */
	header li {font-size: 1.25rem}
	header .dropdown .h5 {font-size: 1.5rem}
	header .dropdown p {font-size: 1.15rem}
	.alert-wrapper {font-size: 1rem}
	header .mainmenu > li:nth-child(1) .dropdown {margin-left: -357px;}
	header .mainmenu > li:nth-child(2) .dropdown {margin-left: -400px;}

	/* Heros */
	.hero-lg h1, .hero-md h1 {font-size: 10rem;}

	/* Cookie Banner */
	.cookie-wrapper .cookie-choice a {font-size: 1.25rem;}

	/* History */
	.history {height: 800px; background-position: 0px 455px;}
	.history .history-text {height: 375px}
}

@media (prefers-reduced-motion: reduce) {
     * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}