/* ==========================================================================
   Project:     Sunoco
   Date:        04/29/2024 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

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

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

:root {
	--body: #444;
	--light-red: #f0969d;
	--red: #E22E3E;
	--dark-red: #ac0313;
	--citi-red: #EF373E;
	--blue: #185487;
	--lighest-blue-grey: #F8F9FA;
	--light-blue-grey: #dee2e6;
	--blue-grey: #565658;
	--dark-blue: #0d3f69;
	--citi-blue: #033572;
	--green: #00a160;
	--stake-green: #95F363;
	--yellow: #ffdf00;
	--dark-yellow: #e1c500;
	--black: #000;
	--white: #fff;
	--grey: #999;
	--light-grey: #939393;
	--lighter-grey: #ddd;
	--lightest-grey: #f1f1f1;
	--dark-grey: #666;
	--darker-grey: #444;
	--darkest-grey: #2A2A2A;
}

/* Main Wrapper */
.page-wrapper {overflow:hidden}

/* Text */
body {color: var(--body);}
h1, .h1, h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6 {font-family: "Roboto Condensed",sans-serif;color: var(--darkest-grey); font-weight: 700; line-height: 1.2; }
.h3-with-date {font-weight: 700;color: var(--blue);}
.h3-with-date {text-transform: uppercase;margin-bottom: 15px;}
.h3-date {line-height: .71;letter-spacing: -2.3px;color: var(--light-grey);font-weight: 700;font-style: italic; text-transform: none; display:block}

.text-red {color: var(--red)}
.text-blue {color: var(--blue)}
.text-citi-blue {color: var(--citi-blue)}
.text-green {color:var(--green)}
.text-yellow {color:var(--yellow);}
.text-dark {color: var(--body) !important}
.text-default {font-size: 1rem; font-weight: normal; line-height: 1.5rem; text-transform: none}
.text-body {color: var(--body)}
.text-transform-none {text-transform: none;}

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

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

.arrow-link, .directions-link {font-size: 18px;font-family: "Roboto Condensed",sans-serif;position: relative;text-decoration:none;color: var(--body);font-weight:700 !important;white-space:nowrap; transition-duration: .3s;}
.arrow-link::after {content: "";height: 18px;width: 55px;background: url(/img/icon-arrow.png) no-repeat;background-size: cover;margin-left: 10px;top: 3px;display:inline-block; position:relative;}
.arrow-link.text-white::after {background: url(/img/icon-arrow-yellow.png) no-repeat;background-size: cover}
.arrow-link:hover::after, .arrow-link:focus::after {animation-name: arrow-link;animation-duration: 1s;animation-timing-function: ease;animation-iteration-count: 1}
.directions-link::before {content: '\f3c5'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 7px;color: var(--red)}

@-webkit-keyframes arrow-link {
	16.65%	{transform: translateX(6px)}
	33.3%	{transform: translateX(-5px)}
	49.95% 	{transform: translateX(4px)}
	66.6% 	{transform: translateX(-2px)}
	83.25% 	{transform: translateX(1px)}
	to 		{transform: translateX(0)}
 }
 @-ms-keyframes arrow-link {
	16.65%	{transform: translateX(6px)}
	33.3%	{transform: translateX(-5px)}
	49.95% 	{transform: translateX(4px)}
	66.6% 	{transform: translateX(-2px)}
	83.25% 	{transform: translateX(1px)}
	to 		{transform: translateX(0)}
 }
 @keyframes arrow-link {
	16.65%	{transform: translateX(6px)}
	33.3%	{transform: translateX(-5px)}
	49.95% 	{transform: translateX(4px)}
	66.6% 	{transform: translateX(-2px)}
	83.25% 	{transform: translateX(1px)}
	to 		{transform: translateX(0)}
 }

 .muted-link, .dark-link {color: var(--light-grey); text-decoration: none;position: relative; font-family: "Roboto Condensed",sans-serif; font-weight: 700;}
.muted-link::after, .dark-link::after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 7px;}

.muted-link {color: var(--light-grey);text-transform: uppercase;}
.dark-link {color: var(--blue-grey);}

.lines-on-sides {position: relative;} /* This class is placed on the parent <p> */
.lines-on-sides::before,  .lines-on-sides::after {content:""; width: 100%; z-index: 0; height: 3px; background: var(--red);position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.lines-on-sides.disabled::before, .lines-on-sides.disabled::after {background:var(--light-red)}
.lines-on-sides::before {left: 0px;}
.lines-on-sides::after {right: 0px}
.lines-on-sides a {position: relative; z-index:1; outline: 15px solid var(--white)}

/* Buttons */
.btn-red, .btn-yellow, .btn-blue, .btn-blue-border, .btn-white, .btn-white-border, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn), .btn-darkest-grey, form[name="frmSearch"] .btn-primary {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-blue-border {background: var(--white); border: 1.5px solid var(--blue); color: var(--blue)}
.btn-blue-border:hover, .btn-blue-border:focus {background: none; border-color: var(--red); color: var(--red)}

.btn-darkest-grey {background: var(--darkest-grey); color: var(--white);}
.btn-darkest-grey:hover, .btn-darkest-grey:focus {background: var(--black); 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-link {color: var(--blue); padding:0px;line-height:1.1;font-weight:500;}
.btn-link:hover, .btn-link:focus {text-decoration: none;}

.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}

.arrow-icon {height: 12px;width: 12px;margin-top: 5px; clear: both; border-style: solid;border-color: var(--blue);border-width: 0 2px 2px 0;position: relative;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg); transition: transform 150ms ease 250ms; left: 50%; margin-left: -6px;}
.btn-animate-arrow.active .arrow-icon {-webkit-transform: rotate(225deg); -ms-transform: rotate(225deg);transform: rotate(225deg);margin-top: 10px}

/* Backgrounds */
.bg-yellow {background: var(--yellow);}
.bg-blue {background: var(--blue)}
.bg-citi-blue {background: var(--citi-blue)}
.bg-dark-blue {background: var(--dark-blue)}
.bg-black {background: var(--black)}
.bg-citi-red {background: var(--citi-red)}
.bg-light-grey {background: var(--lighest-blue-grey)}
.bg-dark-grey {background: var(--dark-grey)}
.bg-darkest-grey {background: var(--darkest-grey)}
.bg-darker-grey {background: var(--body)}
.bg-lightest-blue-grey {background: var(--lighest-blue-grey)}
.bg-white-80 {background: rgba(255,255,255,.8)}

.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}

/* 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%);}

/* Images */
img {max-width: 100%; height: auto;}

.img-80 {width: 80px;}
.img-100 {width: 100px;}
.img-130 {width: 130px;}
.img-180 {width: 180px;}
.img-230 {width: 230px}
.img-280 {width: 280px}
.img-380 {width: 100%; max-width: 380px}

.img-height-20 {height: 20px}
.img-height-30 {height: 30px}
.img-height-60 {height: 60px}
.img-height-70 {height: 70px}
.img-height-80 {height: 80px}

.img-width-75p {width: 75%}

.object-fit-image {min-height: 200px}
.object-fit-image img {object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute;top: 0px; left: 0px;z-index:0;}
.object-fit-top-left img {object-position: top left; }
.object-fit-center-center img {object-position: center center; }

.img-fit img {width: 100%; height: 100%; object-fit:cover;}
.img-fit:not(.img-fit-absolute) p {margin: 0px; display:inline}
.img-fit-absolute {position: relative}
.img-fit-absolute img {position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%;}
.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;}

/* Spacing */
.mb-6 {margin-bottom: 3.5rem}
.mt-6 {margin-top: 3.5rem}
.my-6 {margin-top: 3.5rem;margin-bottom: 3.5rem}
.mb-7 {margin-bottom: 5rem}
.mt-7 {margin-top: 5rem}
.my-7 {margin-top: 5rem;margin-bottom: 5rem}

/* Scaling */
.scale-05 {transform: scale(.5)}
.scale-06 {transform: scale(.6)}
.scale-07 {transform: scale(.7)}
.scale-08 {transform: scale(.8)}
.scale-09 {transform: scale(.9)}
.scale-top-left {transform-origin: top left}
.scale-center-center {transform-origin: center 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}

/* Rules */
hr.blue-stripe {border-top:none; height: 10px; background: url(/img/bg-stripe-blue.svg) repeat-x; background-size: contain;width: 100%;}

/* Accordions */
.cms-accordion {}
     .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 {}
	.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.1; letter-spacing: 4px}
.hero sup {font-size: .2em; vertical-align: top; top: .9em;}
.hero-80vh {position: relative;}
.hero-80vh::before, .hero-80vh::after {content:""; position: absolute; top: 0px; left: 0px; width: 100%;}
.hero-80vh::before {height: 70%; z-index: 1; background: linear-gradient(180deg, rgba(24,84,135) 0%, rgba(19,67,108,0.8) 20%, rgba(0,0,0,0) 100%);}
.hero-80vh.has-overlay-grid::after { height: 100%; z-index: 0; background: url(/img/overlay-grid.png)}
.hero-80vh .container {z-index: 2;}
.hero-80vh video, .hero-80vh .hero-img {position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; object-fit:cover}

.hero-lg .container, .hero-md .container { display:flex; flex-direction: column; align-items: center;justify-content: center;}
.hero-lg ul {display: flex; justify-content:space-between;max-width: 700px; margin: auto; position: absolute; bottom:10px; left: 0px; right: 0px; list-style:none; padding: 0px; color: var(--white); font-style: italic; font-weight: bold; font-family: "Roboto Condensed",sans-serif; text-transform: uppercase; font-size: .813rem;text-align:left}
.hero-lg li {display: flex; align-items:center}
.hero-lg li .rounded-circle {background: rgba(0,0,0,.25); width: 40px; height: 40px; display: inline-flex; align-items:center; justify-content:center}
.hero-lg .hero-img, .hero-md .hero-img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -1;}
.hero-lg .hero-badge {position: absolute; bottom: -50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%)}

.hero .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;}
.hero .btn-toggle-video:hover, .hero .btn-toggle-video:focus {opacity: 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: 50px; 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%;}

/* Interstitials */
.interstitial-wrapper {position: relative;z-index: 0; filter: drop-shadow(0 0 1rem rgba(0,0,0,.2));}
.interstitial-slanted {clip-path: polygon(0 11%, 100% 0%, 100% 89%, 0% 100%);}
.interstitial-wrapper .container {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0}
.interstitial-wrapper h3, .interstitial-wrapper a:not(.btn) {color: var(--white)}
.interstitial-wrapper img {object-fit: cover;width: 100%;height: 100%; min-height: 350px;}

/* 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)}

/* Borders */
.border-bottom-stake-green {border-bottom: 4px solid var(--stake-green)}

/* Scroll Margins */
.scrollmargin-top-90 {scroll-margin-top: 90px}
.scrollmargin-top-120 {scroll-margin-top: 120px}
.scrollmargin-top-140 {scroll-margin-top: 140px}

/* ==========================================================================
     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] {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, footer hr {border-top: 1.5px solid var(--lighter-grey);}
footer li:not(:last-child) {margin-bottom: 5px;}
footer a {font-family: "Roboto Condensed",sans-serif;font-weight: 700;text-decoration: none;}
footer sup {font-size: .5rem; top: -8px;margin-left: 2px}
footer .bg-darker-grey a {color: var(--white);}

/* About Us */
.about-us .h3 {font-weight: 700;color: var(--blue);}
.about-us .h3 {text-transform:none;line-height: 1.6}
.about-us div[class*="-wrapper"] {flex:none}
.about-us .caption {position: absolute; left:20px; right:20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index:1;margin:auto;max-width: 760px}
.about-us .caption p {font-weight:400}
.about-us .caption .date {color: hsla(0,0%,80%,.6)}
.about-us .img-slanted {max-width:none; position: relative;left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);z-index:0}
.about-us .history-wrapper p:last-child {position: relative;}
.about-us .motorsports-wrapper .bg-red {background: rgba(167,8,13,.87); margin-bottom: 25px;}
.about-us .company-wrapper img {max-width: 280px}
.about-us .giving-wrapper .cms-slideshow {text-align:center; width: auto;background-size: contain;margin: 0px auto 15px auto;border-style: solid;border-width: 27px;-o-border-image: url(/img/bg-border-stripe-blue.png) 27 round stretch;border-image: url(/img/bg-border-stripe-blue.png) 27 fill round stretch;max-width: 370px;max-height: 370px; padding: 20px}
.about-us .giving-wrapper .cms-slideshow .slick-list {height: auto !important} /* Removes adaptiveHeight on cms-slideshow plugin */
.about-us .giving-wrapper .cms-slideshow .slick-slide {margin: 0px} /* Removes margin on cms-slideshow slides */
.about-us .giving-wrapper .cms-slideshow img {margin: 0px auto 15px auto;position: relative;}
.about-us .giving-wrapper .cms-slideshow h4 {font-size: 48px;line-height: 45px;font-weight: 700;color: var(--blue)}
.about-us .giving-wrapper .cms-slideshow p {font-size: 17px; font-weight:500}
.about-us .giving-wrapper .slick-controls {position: absolute; bottom: -65px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);z-index:1;}
.about-us .giving-wrapper .slick-controls .slick-dots {text-align: center;list-style:none; padding:0px; opacity:.7; position: relative;}
.about-us .giving-wrapper .slick-controls .slick-dots li {display:inline-block}
.about-us .giving-wrapper .slick-controls .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px}
.about-us .giving-wrapper .slick-controls .slick-dots button {background:none; border: 1px solid var(--grey) ;border-radius: 50%;width: 18px;height: 18px; transition: background 250ms ease; opacity: 1; }
.about-us .giving-wrapper .slick-controls .slick-dots .slick-active button, .about-us .giving-wrapper .slick-controls .slick-dots button:focus {background: var(--grey) }
.about-us .health-wrapper hr {border-top: 1px solid var(--light-grey);}
.about-us .health-wrapper h3 {margin-bottom: 15px}

/* Credit cards */
.consumer-credit-cards .custom-control {padding: 0px; margin:0px 0px 5px 30px}
.consumer-credit-cards .custom-control a {font-weight:500}
.consumer-credit-cards .custom-control-label {font-size: 14px; padding: 4px 0px 0px 5px;}
.consumer-credit-cards .custom-control-label::before {border-radius: .2rem; width: 1.4rem; height: 1.4rem;border: 1px solid var(--body)}
.consumer-credit-cards .custom-control-label::after {width: 1.4rem; height: 1.4rem}
.consumer-credit-cards .custom-control-input:checked~.custom-control-label::before {border-color: var(--green); background-color: var(--green)}
.consumer-credit-cards a.disabled {background: var(--light-red); pointer-events:none; }
     
/* Contact us */
.contact-us .form-text {line-height: 1.4}
.contact-us .search-site {position: relative}
.contact-us .search-dropdown {font-size: .75rem; padding: 10px; color:var(--body); position: absolute; z-index:2; top: calc(100% - 15px); left: 30px; width: calc(100% - 85px); opacity: 0; visibility: hidden;transition: all 500ms ease-out;-webkit-transform: translateY(-15px); -ms-transform: translateY(-15px);transform: translateY(-15px);}
.contact-us .search-dropdown.active {opacity: 1; visibility: visible;-webkit-transform: translateY(0px); -ms-transform: translateY(0px);transform: translateY(0px);}
.contact-us .search-dropdown li {border-bottom: 1px solid var(--lighter-grey);width: calc(100% - 5px);}
.contact-us .search-dropdown li:last-child {border-bottom:none}
.contact-us .search-dropdown li button {border: none; background: none; padding: 2.5px 5px; width: 100%; text-align:left; line-height: 1.4}
.contact-us .search-dropdown li button:hover, .contact-us .search-dropdown li button:focus {background:var(--blue); color: var(--white)}
.contact-us .search-dropdown a {color: var(--blue);display:block; padding: 10px; text-decoration: none;}
.contact-us .search-dropdown a:hover, .contact-us .search-dropdown a:focus {background: var(--lightest-grey)}
.contact-us .search-dropdown ul {max-height: 185px; overflow-y:auto;}
.contact-us .search-dropdown ul::-webkit-scrollbar {-webkit-appearance: none;width:5px;background: var(--lightest-grey);}
.contact-us .search-dropdown ul::-webkit-scrollbar-thumb {border-radius: 4px;background-color: var(--blue)}
.contact-us .btn-close-search {  position: absolute;top: 0px;right: -25px;background: var(--red);padding: 0px;width: 25px;height: 25px;border-radius: 0px;display:flex; align-items:center;justify-content: center;}
.contact-us .btn-close-search span {color: var(--white); font-size: .875rem; -webkit-text-stroke: 1px var(--red)}
.contact-us .btn-close-search:hover, .contact-us .btn-close-search:focus {background: var(--dark-red)}
.contact-us .btn-close-search:hover span, .contact-us .btn-close-search:focus span {-webkit-text-stroke: 1px var(--dark-red)}
.contact-us .datepicker {font-size: .8125rem}
.contact-us .datepicker td {padding: 2px 10px}
.contact-us .datepicker table tr td.active, .contact-us .datepicker table tr td.active.disabled, .contact-us .datepicker table tr td.active.disabled:hover, .contact-us .datepicker table tr td.active:hover {background:var(--blue)}

/* App */
.app .app-promo .caption {color: var(--blue);font-weight: 700}
.app .app-promo .caption p {margin: 0px;}
.app .app-promo ul {padding: 0px;margin-left: 20px}
.app .app-promo li:not(:last-child) {margin-bottom: 5px}
.app h3 sup {top: -1rem; margin-left: -10px; font-size: 30%}

/* Go Rewards */
.go-rewards .app-promo {position: relative;}
.go-rewards .app-promo::before {content:""; position: absolute; top: 0px; left: 0px; width: 100%;}
.go-rewards .app-promo a img {max-width: 80%}
.go-rewards h3 sup {top: -.75rem; margin-left: 3px; font-size: 50%}
.go-rewards p sup {top: -.25rem; font-size: 50%}
.go-rewards .qr-code {position: fixed; z-index: 1; line-height: 1.2}

.go-rewards .video-wrapper {margin: auto; }
.go-rewards .btn-video {font-size: .875rem; opacity: .5; color: var(--lighter-grey); border: none; padding: 5px; background: none; position: absolute; bottom: 0px; z-index: 1}
.go-rewards .btn-video:hover, .go-rewards .btn-video:focus {opacity: 1}

.go-rewards blockquote footer {border:none}

/* Rewards */
.rewards h3 sup {top: -1rem; margin-left: 3px; font-size: 35%}

/* Go Rewards FAQ */
.faq p sup {top: -.2rem; font-size: 50%;margin-left: 1px;}
.faq .btn sup {top: .45rem;font-size: 50%;margin: 0px 5px 0px 1px;}

/* Partner with Us */
.partner-form .ss-main{position:relative;display:inline-block;user-select:none;color:var(--dark-grey);width:100%;font-size: 16px;}.partner-form .ss-main .ss-single-selected{display:flex;cursor:pointer;width:100%;height:38px;padding:6px;border:1px solid var(--light-blue-grey);border-radius:0px;background-color:var(--white);outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-single-selected.ss-disabled{background-color:var(--light-blue-grey);cursor:not-allowed}.partner-form .ss-main .ss-single-selected.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.partner-form .ss-main .ss-single-selected.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.partner-form .ss-main .ss-single-selected .placeholder{flex:1 1 100%;text-align:left;width:calc(100% - 38px);line-height:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.partner-form .ss-main .ss-single-selected .placeholder,.partner-form .ss-main .ss-single-selected .placeholder *{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.partner-form .ss-main .ss-single-selected .placeholder *{width:auto}.partner-form .ss-main .ss-single-selected .placeholder .ss-disabled{color:var(--lighter-grey)}.partner-form .ss-main .ss-single-selected .ss-deselect{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px;font-weight:700}.partner-form .ss-main .ss-single-selected .ss-deselect.ss-hide{display:none}.partner-form .ss-main .ss-single-selected .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px}.partner-form .ss-main .ss-single-selected .ss-arrow span{border:solid var(--dark-grey);border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s,margin .2s}.partner-form .ss-main .ss-single-selected .ss-arrow span.arrow-up{transform:rotate(-135deg);margin:3px 0 0}.partner-form .ss-main .ss-single-selected .ss-arrow span.arrow-down{transform:rotate(45deg);margin:-3px 0 0}.partner-form .ss-main .ss-multi-selected{display:flex;flex-direction:row;cursor:pointer;min-height:38px;width:100%;padding:0 0 0 3px;border:1px solid var(--light-blue-grey);background-color:var(--white);outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-multi-selected.ss-disabled{background-color:var(--light-blue-grey);cursor:not-allowed}.partner-form .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:var(--dark-grey)}.partner-form .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.partner-form .ss-main .ss-multi-selected.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.partner-form .ss-main .ss-multi-selected.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.partner-form .ss-main .ss-multi-selected .ss-values{display:flex;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;width:calc(100% - 38px)}.partner-form .ss-main .ss-multi-selected .ss-values .ss-disabled{display:flex;padding:4px 5px;margin:2px 0;line-height:1em;align-items:center;width:100%;color:var(--dark-grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value{display:flex;user-select:none;align-items:center;font-size:12px;padding:3px 5px;margin:3px 5px 3px 0;color:var(--white);background-color:var(--blue);animation-name:scaleIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value.ss-out{animation-name:scaleOut;animation-duration:.2s;animation-timing-function:ease-out}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{margin:0 0 0 5px;cursor:pointer}.partner-form .ss-main .ss-multi-selected .ss-add{display:flex;flex:0 1 3px;margin:13px 12px 0 5px}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus{display:flex;justify-content:center;align-items:center;background:var(--dark-grey);position:relative;height:10px;width:2px;transition:transform .2s}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus:after{background:var(--dark-grey);content:"";position:absolute;height:2px;width:10px;left:-4px;top:4px}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{transform:rotate(45deg)}.partner-form .ss-content{position:absolute;width:100%;margin:-1px 0 0;box-sizing:border-box;border:1px solid var(--light-blue-grey);z-index:1010;background-color:var(--white);transform-origin:center top;transition:transform .2s,opacity .2s;opacity:0;transform:scaleY(0)}.partner-form .ss-content.ss-open{display:block;opacity:1;transform:scaleY(1)}.partner-form .ss-content .ss-search{display:flex;flex-direction:row;padding:8px 8px 6px}.partner-form .ss-content .ss-search.ss-hide,.partner-form .ss-content .ss-search.ss-hide input{height:0;opacity:0;padding:0;margin:0}.partner-form .ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0;height:38px;padding:6px 8px;margin:0;border:1px solid var(--light-blue-grey);border-radius:0;background-color:var(--white);outline:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-appearance:textfield}.partner-form .ss-content .ss-search input::placeholder{color:var(--grey);vertical-align:middle}.partner-form .ss-content .ss-search input:focus{box-shadow:0 0 5px var(--blue)}.partner-form .ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px;font-weight:700;flex:0 0 38px;height:38px;margin:0 0 0 8px;border:1px solid var(--light-blue-grey);border-radius:4px;box-sizing:border-box}.partner-form .ss-content .ss-addable{padding-top:0}.partner-form .ss-content .ss-list{max-height:200px;overflow-x:hidden;overflow-y:auto;text-align:left}.partner-form .ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:6px 10px;font-weight:700}.partner-form .ss-content .ss-list .ss-optgroup .ss-option{padding:6px 6px 6px 25px}.partner-form .ss-content .ss-list .ss-optgroup-label-selectable{cursor:pointer}.partner-form .ss-content .ss-list .ss-optgroup-label-selectable:hover{color:var(--white);background-color:var(--blue)}.partner-form .ss-content .ss-list .ss-option{padding:6px 10px;cursor:pointer;user-select:none}.partner-form .ss-content .ss-list .ss-option *{display:inline-block}.partner-form .ss-content .ss-list .ss-option.ss-highlighted,.partner-form .ss-content .ss-list .ss-option:hover{color:var(--white);background-color:var(--red)}.partner-form .ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--lighter-grey);background-color:var(--white)}.partner-form .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:var(--dark-grey);background-color:rgba(88,151,251,.1)}.partner-form .ss-content .ss-list .ss-option.ss-hide{display:none}.partner-form .ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--white)}
.partner-form .form-control, .partner-form .custom-select {border-radius: 0px}

/* Hiring Form */
.hiring-form .form-check label.active {color: var(--body)}
.hiring-hero {position: relative; z-index:1}
.hiring-hero img {position: relative; z-index:0;}
.hiring-hero .bonus {position: absolute; z-index:1}
.hiring-hero button {border: none; background:none; padding: 0px}

/* Email & MSDS Modal Forms */
.modal-form {}
.modal-form .modal-content {background: var(--blue-grey); width: 100%; overflow-x:hidden; color: var(--white);}
.modal-form .btn-close-modal {position: absolute; z-index:1; right: 30px; top: 30px}
.modal-form .btn-close-modal::before, .modal-form .btn-close-modal::after {content: "";position: absolute;height: 1px;width: 100%;top: 50%;left: 0;margin-top: -1px;background: var(--white);}
.modal-form .btn-close-modal::before {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);}
.modal-form .btn-close-modal::after {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.modal-form form {margin:auto; max-width: 768px;width: 90%}
.modal-form .form-control {background-color:var(--blue-grey); border-radius:0px; border: 1px solid var(--white); color: var(--white); font-size: 14px;}
.modal-form input, .modal-form select {height: 40px}
.modal-form textarea {height:100px}
.modal-form select { -webkit-appearance: none;-moz-appearance: none;appearance: none;background: url(/img/caret-white.png) no-repeat 90% center; max-width: 350px}
.modal-form select[multiple] {max-width: 100%;height:200px;background:none; padding: 20px}
.modal-form .form-control:focus, .modal-form option, .modal-form textarea {background-color: var(--blue-grey);color: var(--white);}
.modal-form label {background-color: var(--blue-grey);color: var(--white);display: inline-block;margin: -6px 0px 6px 20px; top: 16px;position: relative;z-index: 1; font-size: 12px; padding: 0px 10px}
.modal-form label.error {height: 0px; position: absolute; overflow:hidden;}
.modal-form .custom-radio label {font-size:16px; font-family: "Roboto Condensed",sans-serif; padding: 0px}
.modal-form .custom-radio .custom-control-label::before {top: .19rem; background: none; border: 2px solid var(--white)}
.modal-form .custom-radio .custom-control-label::after {top: .2rem}
.modal-form .btn-link {text-decoration: underline;font-size: 16px;}
.modal-form address {font-weight:300}
.modal-form .form-control.error {border: 1px solid var(--red); box-shadow:none}
.modal-form .custom-radio .error + .custom-control-label::before {border: 2px solid var(--red)}
.modal-form .datepicker {padding-left: 10px}

/* Locator */
.find-a-station .content-inner {max-width: 990px;margin: auto}

/* Form */
.locator form {margin:auto}
.locator form .form-control {border: 1px solid var(--dark-grey); border-radius: 0px}
.locator form input, .locator form select {height: 40px}
.locator form .btn-red {max-width: 280px;margin:auto}
.locator form label {background-color: var(--white); color: var(--body);display: inline-block;margin: -6px 0px 6px 13px; top: 16px;position: relative;z-index: 1; font-size: 12px; padding: 0px 10px 0px 5px}
.locator select.form-control { -webkit-appearance: none;-moz-appearance: none;appearance: none;background: url(/img/caret-grey.png) no-repeat 95% center; }
.locator select.form-control-custom {font-size: .875rem;}
.locator .custom-control {padding: 0px; margin:0px 0px 5px 5px}
.locator .custom-control-label {font-size: 14px; padding-top: 5px;}
.locator .custom-control-label::before {border-radius: .2rem; width: 1.4rem; height: 1.4rem}
.locator .custom-control-label::after {width: 1.4rem; height: 1.4rem}
.locator .custom-control-input:checked~.custom-control-label::before {border-color: var(--green); background-color: var(--green)}
.locator hr {border-top: 1px solid var(--body)}
.locator .btn-toggle-filters {background:none; border:none; border-radius: 0px; position: relative;height:30px; width:30px}
.locator .btn-toggle-filters::before, .locator .btn-toggle-filters::after {-webkit-transition: all 250ms ease;-ms-transition: all 250ms ease;transition: all 250ms ease; content:""; background: var(--dark-grey); position: absolute; }
.locator .btn-toggle-filters::before {height:2px; width: 100%;left: 50%; top: 50%;margin-left: -15px; margin-top: -1px;}
.locator .btn-toggle-filters::after {width: 2px; height: 100%; left: 50%; top: 50%;margin-left: -1px; margin-top: -15px; }
.locator .btn-toggle-filters.active::before, .locator .btn-toggle-filters.active::after {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);transform: rotate(90deg);}
.locator .btn-toggle-filters.active::before {opacity: 0}
.locator .filters-wrapper.active {height: 210px;}
.locator .filters-wrapper .custom-control-inline {float:left}
.locator .form-control.error {border: 1px solid var(--red); box-shadow:none}

/* Form over Blue */
.locator-over-blue {margin: 0px}
.locator-over-blue form label {background: var(--blue); color: var(--white)}
.locator-over-blue form input.form-control {background: var(--blue); border: 1px solid var(--white); color: var(--white)}
.locator-over-blue form select.form-control {background: url(/img/caret-white.png) no-repeat 90% center; border: 1px solid var(--white)}
.locator-over-blue form select.form-control option { color: var(--body)}

/* Form over Black */
.locator-over-black {margin: 0px}
.locator-over-black form label {background: var(--black); color: var(--white)}
.locator-over-black form input.form-control {background: var(--black); border: 1px solid var(--white); color: var(--white)}
.locator-over-black form select.form-control {background: url(/img/caret-white.png) no-repeat 90% center; border: 1px solid var(--white)}
.locator-over-black form select.form-control option { color: var(--black)}
		
/* Form over Light Gray */
.locator-over-gray {margin: 0px}
.locator-over-gray form label {background: var(--lightest-grey); color: var(--black)}
.locator-over-gray form input.form-control {background: var(--white); border: 1px solid var(--black); color: var(--black)}
.locator-over-gray form select.form-control {background: url(/img/caret-grey.png) no-repeat 90% center var(--white); border: 1px solid var(--black)}
.locator-over-gray form select.form-control option { color: var(--black)}

/* Map */
.locator #map {background:var(--lightest-grey)}
.locator .marker-label {color: var(--white); font-size: 16px; font-weight:500;z-index: 0; line-height: 1; text-align:center; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow:hidden}

/* 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 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;}

/* Details */
.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 .btn-close-details {background:none; border:none; border-radius: 0px; position: absolute; height:20px; width:20px}
.locator .btn-close-details::before, .locator .btn-close-details::after { content:""; background: var(--dark-grey); position: absolute; width: 2px; height: 100%;top: 0px;left:10px}
.locator .btn-close-details::before {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.locator .btn-close-details::after {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); }

/* Shared in list & details */
.locator .location p:first-child {font-family: "Roboto Condensed",sans-serif;font-size: 18px;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;}

/* 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::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%);}

/* Bg */
.locator .locator-row .col-12:first-child { position: relative;}
.locator .locator-row .col-12:first-child::before {content:""; background: url(/img/bg-map.png) top center no-repeat var(--lightest-grey); position: absolute; left: 0px; width: 100%; z-index: 1}
.locator.has-results .locator-row .col-12:first-child::before {content:none}

/* Locator Detail */
.locator-detail #map.map-unavailable img {position: absolute; top: 0px; left: 30px; width: calc(100% - 60px); height: 100%; object-position: center center;  object-fit: cover;}
.locator-detail .cta-wrapper {background: url(/img/bg-gorewards-gradient-2.png) center center; background-size: 100% 100%;max-width: 990px;margin-left: auto !important;margin-right: auto !important;}
.locator-detail .amenities-wrapper {line-height:1.3}
.locator-detail .amenities-wrapper .d-table-cell {width: 45px;text-align:center;vertical-align:middle}
.locator-detail .fuel-slideshow .slick-list, .locator-detail .nearby-slideshow .slick-list {overflow:visible}
.locator-detail .nearby-slideshow .slick-track {display: flex; align-items:stretch}
.locator-detail .nearby-slideshow .slick-slide {height:inherit}
.locator-detail .nearby-slideshow a:not(.btn) {color: var(--body);}
.locator-detail .text-default a, .locator-detail .nearby-slideshow h3 a {color: var(--body); pointer-events: none; text-decoration: none;}
.locator-detail .btn[data-toggle] span {transition: transform 150ms ease;margin-left: 3px;}
.locator-detail .btn[data-toggle].active span {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.locator-detail .slick-dots {list-style:none;padding: 0px; margin: 15px auto 0px auto; text-align:center}
.locator-detail .slick-dots li {display:inline-block;margin: 0px 3px;padding: 0px;}
.locator-detail .slick-dots button {background:var(--black);border: none; padding: 0px; opacity: .25; width: 6px; height: 6px; border-radius:50%;}
.locator-detail .slick-dots .slick-active button {opacity: .5}
.locator-detail .card a {text-decoration: none;}

/* Locator Cities & Locations */
.locator-list  .bg-light form, .locator-locations .bg-light form {width: 100%; max-width: 400px}
.locator-list .row li:first-letter, .locator-location .row li:first-letter {text-transform: capitalize;}

/* Content Hub */
.nav-contenthub {font-family: "Roboto Condensed",sans-serif; font-weight: 700; height: 50px;position: relative; line-height: 1.2; overflow-x:auto; overflow-y: hidden; background: var(--blue);}
.nav-contenthub::-webkit-scrollbar {-webkit-appearance: none;height: 5px; }
.nav-contenthub::-webkit-scrollbar-track {margin: 0px;background: var(--black); border-radius: 0px;}
.nav-contenthub::-webkit-scrollbar-thumb {background: var(--light-blue-grey);border-radius: 0px;}
.nav-contenthub::-webkit-scrollbar-thumb:hover {background: var(--red)}
.nav-contenthub li:not(:last-child) {margin-right: -4px}
.nav-contenthub a {	padding: 0 1.5rem; color: var(--white);  transition: background 250ms ease; text-decoration: none; height: 50px; display:block;display:flex; align-items:center}
.nav-contenthub a:hover, .nav-contenthub a:focus {background: var(--dark-blue);}

.nav-contenthub-fixedtop .nav-contenthub {position: fixed; left: 0px; width: 100%;z-index: 1; -webkit-animation: moveNav 300ms ease-out; animation: moveNav 300ms ease-out;}

@-webkit-keyframes moveNav {
     0% { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); }
     100% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes moveNav {
     0% { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); }
     100% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
}

.article-logo {position: absolute;top: -15px;left: 25px;max-width: 100px;max-height: 50px;background: var(--white);box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .25);padding: 5px;}
.article-teaser {transition: box-shadow 250ms ease;text-decoration: none;}
.article-teaser:hover, .article-teaser:focus {box-shadow: 0 0 1rem rgba(0,0,0,.15)}
.article-img {aspect-ratio: 16 / 9; object-fit: cover;}

/* Card Pages */
.sunoco-business-fleet-card .row.justify-content-center, .sunoco-fleet-universal-card .row.justify-content-center {max-width: 810px; margin-left: auto !important;margin-right:auto !important}

/* Reviews Slideshow */
.reviews-slideshow .slick-track {padding: 1rem 0; display: -ms-flexbox; display: flex; align-items: stretch;}
.reviews-slideshow .slick-slide {height: auto;flex: 1; margin: 0 .4rem;}
.reviews-slideshow .slick-dots {text-align: center;list-style:none; padding:0px; opacity:.7; position: relative; display: -ms-flexbox; display: flex; align-items:center; justify-content: center;}
.reviews-slideshow .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px}
.reviews-slideshow .slick-dots button {background:none; border: 1px solid var(--grey); padding: 0px; border-radius: 50%;width: 9px;height: 9px; transition: background 250ms ease; opacity: 1; }
.reviews-slideshow .slick-dots .slick-active button, .reviews-slideshow .slick-dots button:focus {background: var(--grey); width: 15px; height: 15px;margin: 8px 0px -8px 0px}

/* Overview Slideshow */
.overview-slideshow {position: relative;}
.overview-slideshow .slick-track {padding: 30px 0px;display: flex; align-items: stretch;}
.overview-slideshow .slide {-webkit-transform: none; transform: none;height: inherit; transition: filter 250ms ease, margin 250ms ease;filter: drop-shadow(0 0 5px rgba(0,0,0,.15));}
.overview-slideshow .slick-dots {position: absolute; bottom: -30px; left: 0px; right: 0px; text-align: center;list-style:none; padding:0px; }
.overview-slideshow .slick-dots li { display: inline-block;}
.overview-slideshow .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px}
.overview-slideshow .slick-dots button {background: var(--light-grey); border: none;  padding: 0px; border-radius: 50%;width: 6px;height: 6px; transition: background 250ms ease;}
.overview-slideshow .slick-dots .slick-active button, .overview-slideshow .slick-dots button:focus {outline: none; background: var(--body); height: 8px; width: 8px; -webkit-transform: translateY(1px); transform: translateY(1px)}

.overview-slideshow .slide-inner {transition: background 250ms ease;}
.overview-slideshow .slide-clip {transition: clip-path 250ms ease;}

.overview-slideshow .slide:not(.slick-center) .slide-inner {background: var(--lighest-blue-grey)}
.overview-slideshow .slide:not(.slick-center) .slide-inner p {opacity: 0; transition: opacity 250ms ease;}

.overview-slideshow .slick-center .slide-inner {background: var(--white)}
.overview-slideshow .slick-center {filter: drop-shadow(0 0 15px rgba(0,0,0,.2))}
.overview-slideshow .slick-center .slide-clip {clip-path: inset(0px 0px 0px 0px);}
.overview-slideshow .slick-center .slide-inner p {opacity: 1}

/* Find a Station Wrapper */
.find-a-station-wrapper .container {position: relative;z-index: 1}
.find-a-station-wrapper .jarallax {height: 300px; margin-top: -200px}
.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}

/* 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}

/* Octane Calc Wrapper */
.octane-calculator-wrapper input, .octane-calculator-wrapper select {border-radius: 0px}
.octane-calculator-wrapper .btn-red {width: 100%; max-width: 265px;}
.octane-calculator-wrapper input, .octane-calculator-wrapper select, .octane-calculator-wrapper option { border: none; font-weight: 700;font-size: .75rem}
.octane-calculator-wrapper input::-webkit-inner-spin-button {opacity: 1}
.octane-calculator-wrapper .form-control::-webkit-input-placeholder {color:var(--body);}
.octane-calculator-wrapper .form-control::-msplaceholder {color:var(--body);}
.octane-calculator-wrapper .form -control::-placeholder {color:var(--body);}

/* 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); border: 1.5px solid var(--lighter-grey); text-decoration: none; background: var(--white); border-radius: 50%; width: 30px; height: 30px; font-size: .75rem}
.socials a:hover, .socials a:focus {border-color: var(--blue)}

/* Survey Form */
.survey-form .step .active .badge {background: var(--blue) !important}
.survey-form .step .badge {border-color: var(--blue) !important}
.survey-form .has-errors.active .badge {background: var(--red) !important}
.survey-form .has-errors .badge:empty {border-color: var(--red) !important}
.survey-form .step {width: auto;display:inline-flex}
.survey-form .step.disabled {pointer-events:none; opacity: .5}
.survey-form {max-width: 600px}
.survey-form input, .survey-form p, .survey-form select {max-width: 420px}
.survey-form .frm-required {color: var(--red)}
.survey-form input, .survey-form select {border-radius: 0px}
.survey-form label {font-weight: bold;display:block}
.survey-form .custom-radio label {font-weight: normal}
.survey-form div[class*="col"] {padding: 0px 15px !important}
.survey-form .row {margin-left: -15px !important; margin-right: -15px !important;}
.survey-form .max-w-100 {max-width: 100px;}
.survey-form .invalid-feedback {font-size: 90%}

/* 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; width: 100%; background: var(--darker-grey); color: var(--white); font-size: 14px; z-index: 3}
.cookie-wrapper a {color: var(--white)}

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

/* ==========================================================================
     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;}
	.h3-with-date {padding-left: 15px}
	.h3-with-date {font-size: 1.625rem;}
	.h3-date {margin-left:-15px;font-size: 4.688rem;}

	/* About Shared */
	.about-us .img-slanted {height: 550px}
	.about-us .caption {top: 52%;}
	.about-us main p {padding-left: 15px}
	.about-us main .h3 {font-size: 18px;line-height: 1.33}

	/* About Wrappers */
	.about-us .history-wrapper, .about-us .station-wrapper {margin-bottom: 30px}
	.about-us .ship-wrapper {margin: -30px 0px -10px 0px}
	.about-us .mining-wrapper {margin: -20px 0px 0px 0px}
	.about-us .refining-wrapper {margin-bottom: 10px}
	.about-us .states-wrapper {margin:0px 0px 70px 0px}
	.about-us .motorsports-wrapper {margin: -30px 0px 260px 0px}
	.about-us .company-wrapper, .about-us .new-wrapper, .about-us .racing-wrapper, .about-us .joining-wrapper, .about-us .app-wrapper, .about-us .health-wrapper hr, .about-us .strong-wrapper, .about-us .rewards-wrapper {margin-bottom: 50px}
	.about-us .ultra-wrapper {margin-bottom: 70px}
	
	/* About Elements */
	.about-us .states-wrapper img {max-width: 75%}
	.about-us .pump-wrapper img {height:310px}
	.about-us .motorsports-wrapper .caption {max-width: 300px;right: 0px; top: 550px}
	.about-us .motorsports-wrapper .caption .date {font-size: 60px;}
	.about-us .motorsports-wrapper .bg-red { padding: 30px 15px; }
	.about-us .racing-wrapper [class*="col-"]:first-child {padding-top: 200px}
	.about-us .racing-wrapper .img-slanted {margin-bottom: -220px;height:450px}
	.about-us .joining-wrapper img, .about-us .ultra-wrapper img, .new-wrapper img {max-width: 280px}
	.about-us .refining-wrapper img {max-width: 200px}
	.about-us .app-wrapper img {max-width:220px}
	.about-us .health-wrapper h2+p {font-size: 18px;margin-bottom: 30px}
	.about-us .health-wrapper h3 {font-size: 26px; padding-left: 15px;}
     .about-us .rewards-wrapper img {max-width: 230px}

	/* Racing */
	.img-partner {width: 160px}

	/* Grocery Rewards */
     .grocery-rewards sup {font-size: 50%; top: -1rem;}

	/* Locator */
	.locator form {max-width: 280px;}
	.locator #map {height: 300px; margin: 40px 0px 20px 0px;box-shadow: 5px 0 14px 1px rgba(99,100,102,.25); }
     .locator .locator-row .col-12:first-child::before { top: 40px; height: calc(100% - 60px); background-size: cover;}
	.locator .locations {margin-bottom: 30px;max-width: 450px;}
	.locator .location {padding: 20px 25px}
	.locator nav {padding: 0px 15px; max-width: 260px; margin: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);}
	.locator .location-details-wrapper.active {height: 500px}
	.locator .btn-close-details {right: 25px;top: 0px; }
	.locator .filters-title {display:flex; justify-content: space-between; align-items: center;}
	.locator .filters-wrapper {height:0px; transition: all 250ms ease;overflow:hidden}
	.locator .filters-wrapper .custom-control-inline {width: 130px}
     .locator .filters-wrapper .custom-control-inline:last-child {width: calc(100% - 5px)}
	.locator .loading { margin:100px auto;display:block}
     .locator .location-details-wrapper .location {width: 90%;}

     /* Locator detail */
     .locator-detail .nearby-slideshow {margin-left: -25px; margin-right: -25px;}

	/* Go Rewards */
	.go-rewards .app-promo::before {height: 50px; background: url(/img/sunoco-go-rewards.svg) center center no-repeat, url(/img/bg-gorewards-gradient.png) center top repeat-x; background-size:auto 35%, 100% 100%;}
     .go-rewards .qr-code { top: 100px; width: 140px; right: 0px;border-radius:  10px 0px 0px 10px;}
     .go-rewards .qr-code img {width: 75px}

	.go-rewards .video-wrapper { max-width: 300px}
	.go-rewards .btn-video { right: 0px;}

     /* CMS Slideshow */
     .cms-slideshow .img-md {display:none}

     /* Hiring Form */
     .hiring-hero .bonus {top: 46%; left: 1%; width: 44%}

	/* Heros */
	.hero { box-shadow: rgba(0,0,0,.4) 0px 0 7.5px;}
	.hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: min(12vw,5rem);}
	.hero-80vh {margin: 15px 15px 15px 15px;height: calc(80vh - 85px);}
	.hero-lg, .hero-lg .container {height: 550px;}
	.hero-md, .hero-md .container {height: 275px;}
	.hero-lg ul {flex-direction: column;}

	.sunoco-diesel .hero-img {object-position: 70% bottom;}
	.stake-f1-team-kick-sauber .hero-img {object-position: 20% bottom;}
	.find-a-station .hero img {object-position: right bottom}
	.go-rewards .hero-img {object-position: left bottom}

	/* 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 .img-scroll-panel-2 {left: -90%}
	.img-scroll-wrapper .container-small .img-scroll {left: -110%; }
	.img-scroll-wrapper .img-scroll + .img-smoke {left:calc(100% - 100vw);}
	.img-scroll-wrapper .img-scroll + .img-map {left:calc(100% - 20vw); }
	.img-scroll-wrapper .img-tiremarks {background: url(/img/bg-tiremarks.webp) right center no-repeat; background-size: contain; }
	.img-scroll-wrapper .img-raceflag {background: url(/img/bg-raceflag.webp) right center no-repeat; background-size: contain; opacity: .5}
	.img-scroll-wrapper .img-smoke {background: url(/img/bg-smoke.webp) right center no-repeat; background-size: contain; }
	.img-scroll-wrapper .img-map {background: url(/img/bg-map.webp) right center no-repeat; background-size: cover; }
	.img-scroll-wrapper .img-waves {background: url(/img/bg-waves.webp) right center no-repeat; background-size: 90% 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)}
	
	/* Overview Slideshow */
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 190px 0px);}
	.overview-slideshow .slide {width: 290px; margin: 90px 7.5px -90px 7.5px}
	.overview-slideshow .slick-center {margin: 0px 7.5px}
	
	/* Containers */
	.container-xsmall {max-width: 600px}
	.container-small {max-width: 700px}
	.container-medium {max-width: 800px}

	/* Overlays & Gradients */
	.gradient-dark-left::after {width: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);}

	/* Backgrounds */
	.bg-img-offset {height: 80%}

	/* Survey Form */
	.survey-form .cms-stepper {flex-direction: row;}
	.survey-form .step {margin: 0px 5px 10px 0px}
	.survey-form .step a {width: auto}

	/* Locator Cities & Locations */
	.locator-list ul {columns: 2}

	/* Locator Detail */
	.locator-detail #map {height: 350px;}

}

@media (min-width: 430px) {
     .locator .btn-close-details {right: auto; left: 380px }
}

@media (min-width: 500px) {	
	/* Locator */
     .locator .location-details-wrapper .location {width: 400px;}
}	

@media (min-width: 576px) {
	/* Go Rewards */
	.go-rewards .app-promo .img-app-promo {position: absolute; top: 0px; left: 30px; z-index:0; width: 50%;}
	.go-rewards .app-promo::before {height: 97px; background: url(/img/sunoco-go-rewards.svg) calc(100% - 50px) center no-repeat, url(/img/bg-gorewards-gradient.png) center top repeat-x;background-size:auto 40%, auto auto;}

	.arrow-row .col-sm-4 {position: relative;}
	.arrow-row .col-sm-4:not(:last-child)::after {content:""; height: 18px;width: 45px;background: url(/img/icon-arrow.png) no-repeat;background-size: contain;position: absolute; right: -20px; position: absolute; top: 50px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
	
     /* Spacing */
     .mb-sm-7 {margin-bottom: 5rem !important}
     .mt-sm-7 {margin-top: 5rem !important}

     /* Locator Detail */
     .locator-detail .cta-wrapper .col-sm-5  {position: absolute; bottom: 0px; right: 0px; padding:0px}
     .locator-detail .cta-wrapper .col-sm-5 img {max-height: 290px}

	/* Spacing */
	.pb-sm-6 {padding-bottom: 3.5rem!important}
	.pt-sm-6 {padding-top: 3.5rem!important}
	.py-sm-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important}
	.pb-sm-7 {padding-bottom: 5rem!important}
	.pt-sm-7 {padding-top: 5rem!important}
	.py-sm-7 {padding-top: 5rem!important;padding-bottom: 5rem!important}

	.mb-sm-6 {margin-bottom: 3.5rem!important}
	.mt-sm-6 {margin-top: 3.5rem!important}
	.my-sm-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important}
	.mb-sm-7 {margin-bottom: 5rem!important}
	.mt-sm-7 {margin-top: 5rem!important}
	.my-sm-7 {margin-top: 5rem!important;margin-bottom: 5rem!important}

	/* Heros */
	.hero-lg ul {flex-direction: row;}

	/* Locator Cities & Locations */
	.locator-list ul {columns: 4}
}

@media (min-width: 641px) {
	/* Hiring Form */
     .hiring-hero .bonus {top: 46%; left: 8%; width: 29%}
}

@media (max-width: 767px) {
	/* 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 {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 {color: var(--body); font-size: 1rem;}
	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-shadow-md-lg {text-shadow: rgba(0,0,0,.75) 0px 0 30px;}
	.text-md-nowrap {white-space: nowrap;}
	.text-md-white {color: var(--white)}
	.h3-with-date {padding-left: 30px}
	.h3-with-date {font-size: 30px;}
	.h3-date {margin-left: -30px;font-size: 90px;}

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

	header li {position: relative;display: inline-block;font-size: .913rem}
	header li button {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 {text-decoration: none; color:var(--white)}
	header .quicklinks a:hover, header .quicklinks a: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 {font-weight: 700; color: var(--white)}
	header .mainmenu button:focus {outline: none}

	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-hero80vh header {top: 0px; left: 0px; right: 0px; width: 100%;}
	.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 {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: 20px; 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-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)}

	/* About Shared */
	.about-us main p {padding-left: 30px}
	.about-us .h3 {font-size: 24px;line-height: 1.6}
	.history-wrapper p:last-child::after {content:none}

	/* About Wrappers */
	.about-us .roots-wrapper {margin-bottom: 20px}
	.about-us .history-wrapper,.about-us .ultra-wrapper,.about-us .ship-wrapper, .about-us .station-wrapper {margin-bottom: 70px}
	.about-us .mining-wrapper {margin: -20px 0px 100px 0px}
	.about-us .refining-wrapper {margin-bottom: 10px}
	.about-us .states-wrapper {margin:0px 0px 150px 0px}
	.about-us .motorsports-wrapper {margin: 0px 0px 300px 0px}
	.about-us .company-wrapper,.about-us .app-wrapper,.about-us .new-wrapper,.about-us .racing-wrapper, .about-us .strong-wrapper, .about-us .rewards-wrapper {margin-bottom: 90px}
	.about-us .joining-wrapper {margin-bottom: 200px}

	/* About Elements */
	.about-us .station-wrapper img {margin-top: 50px}
	.about-us .states-wrapper img {margin-top: -130px;max-width:100%}
	.about-us .pump-wrapper img {width: 85%; height:auto; max-width: 240px;margin-top: -110px}
	.about-us .motorsports-wrapper .caption {left:auto;right: 0px; max-width: 430px;top:auto; bottom: -520px}
	.about-us .motorsports-wrapper .bg-red { padding: 50px; }
	.about-us .motorsports-wrapper .caption .date {font-size: 90px;}
	.about-us .racing-wrapper [class*="col-"]:first-child {padding-top: 250px}
	.about-us .racing-wrapper .img-slanted {margin-bottom: -180px;height:370px}
	.about-us .joining-wrapper img {max-width: 100%}
	.about-us .ultra-wrapper img {width: 85%}
	.about-us .refining-wrapper img {max-width: 270px}
	.about-us .app-wrapper img {margin-top: 0px;max-width:250px}
	.about-us .health-wrapper hr {margin: 0px 0px 80px 0px}
	.about-us .health-wrapper h2+p {margin-bottom: 100px}
	.about-us .health-wrapper h3 {font-size: 30px; padding-left: 30px;}
     .about-us .strong-wrapper img {width: 80%;}
     .about-us .rewards-wrapper img {width: 70%; max-width: 100%}
     
	/* Racing */
	.img-partner {max-width: 100%}

	/* App */
	.app .app-promo {position: relative;}
	.app .app-promo .caption { z-index:1; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 80px; width: 60%;}
	.app .app-promo .caption img {max-width: 65%}

	.go-rewards .video-wrapper { max-width: 100%}
	.go-rewards .btn-video { right: -10px;}

     /* Locator Detail */
     .locator-detail .nearby-slideshow {margin-left: 0px; margin-right: 0px}
	.locator-detail #map {height: 500px;}

     /* Borders */
     .border-md-right {border-right: 1px solid var(--light-blue-grey)!important}
     .border-bottom-md-none {border-bottom: none !important}

     /* Hiring Form */
     .hiring-hero .bonus {top: 42%; left: 19%; width: 23%}

     /* Card Pages */
     .sunoco-corporate-card .corporate-cc-hero, .wex-hero {position: relative;}
     .sunoco-corporate-card .corporate-cc-hero p.text-md-left {position: absolute; top: 82%; left: 70px; max-width: 48%; }
     .wex-hero p.text-md-left {position: absolute; top: 78%;  max-width:52%; right:55px}

	/* Image Scroll Wrapper */
	.img-scroll-wrapper {position: relative; }
	.img-scroll-wrapper .h-full {min-height: 400px}
	.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)}

	/* Heros */
	.hero { box-shadow: rgba(0,0,0,.4) 0px 0 15px}
	.hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 6rem;}
	.hero-80vh {margin: 20px;height: calc(80vh - 40px);}
	.hero-md h1, .hero-md .h1 {font-size: 3.5rem}

	.sunoco-diesel .hero-img {object-position: right bottom;}
	.stake-f1-team-kick-sauber .hero-img,
	.find-a-station .hero img,
	.go-rewards .hero-img {object-position: center center}

	/* Spacing */
	.pb-md-6 {padding-bottom: 3.5rem!important}
	.pt-md-6 {padding-top: 3.5rem!important}
	.py-md-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important}
	.pb-md-7 {padding-bottom: 5rem!important}
	.pt-md-7 {padding-top: 5rem!important}
	.py-md-7 {padding-top: 5rem!important;padding-bottom: 5rem!important}

	.mb-md-6 {margin-bottom: 3.5rem!important}
	.mt-md-6 {margin-top: 3.5rem!important}
	.my-md-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important}
	.mb-md-7 {margin-bottom: 5rem!important}
	.mt-md-7 {margin-top: 5rem!important}
	.my-md-7 {margin-top: 5rem!important;margin-bottom: 5rem!important}

	/* Overview Slideshow */
	.overview-slideshow .slide {width: 400px}
	.overview-slideshow .h3 {font-size: 1.5rem}

	/* Gradients */
	.gradient-dark-left-md {position: relative;}
	.gradient-dark-left-md::after {content:""; display:block; z-index: -1; position: absolute; top: 0px; left: 0px; height: 100%; width: 70%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);}

	/* Shadows */
	.box-shadow-sm-md-none, box-shadow-md-md-none, .box-shadow-lg-md-none {box-shadow: none;}

	/* Overview Slideshow */
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 160px 0px);}
	.overview-slideshow .slide { margin: 80px 7.5px -80px 7.5px}
	.overview-slideshow .slick-center {margin: 0px 7.5px}

	/* Backgrounds */
	.bg-md-none {background: none !important}
	.bg-img-offset {height: 60%}

	/* Content Hub */
	.article-more {position: absolute; top: 50%; right: 0px; transform: translateY(-50%)}
	.nav-contenthub-fixedtop {padding-top: 50px}

	/* Overlays & Gradients */
	.gradient-dark-left::after {width: 70%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);}

	/* Octane Calculator */
	.octane-calculator-wrapper .btn-submit {height: 35px}

	/* Survey Form */
	.survey-form .step {margin: 0px 15px 0px 0px;}
}

@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;}

	/* About Elements */
	.about-us .caption {top: 55%;}
	.about-us .img-slanted {height: 600px}

	/* App */
	.app .app-promo p {font-size: 18px;line-height: 1.57}

	/* Locator */
	.locator form {max-width: 760px;}
	.locator #map {height: 460px;margin:0px; box-shadow:none;}
     .locator .locator-row {box-shadow: 0 0 2rem rgba(0,0,0,.2)}
     .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:hover {background: var(--lightest-grey)}
	.locator .location-details-wrapper .location {padding: 30px 10px 30px 60px; width: 300px}
	.locator .row {margin-top: 40px;}
	.locator .row .col-12:nth-child(1) {order: 2;}
	.locator .row .col-12:nth-child(2) {display:none; order: 1; max-width: 350px;}
	.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}
	.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 .location-details-wrapper.active {height: 460px}
	.locator .btn-close-details {right: -20px;top: 10px; left:auto}
	.locator hr, .locator .btn-toggle-filters {display:none}
	.locator .filters-title {display:block;text-align:center; margin: 20px auto 10px auto}
	.locator .filters-wrapper {height:auto; overflow:visible; text-align:center;margin-bottom: 30px}
	.locator .filters-wrapper .custom-control-inline {margin: 0px 7px;width:auto;float:none}
     .locator .filters-wrapper .custom-control-inline:last-child {width: 290px; display:block; margin-left: auto;margin-right:auto; }
	.locator form .form-group:nth-child(1), .locator form .form-group:nth-child(2) {width: 50%;float:left;padding:0px 20px;}
	.locator-over-blue form .form-group:nth-child(1) {padding: 0px 10px 0px 0px}
     .locator-over-blue form .form-group:nth-child(2) {padding: 0px 0px 0px 10px}
     .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 select.form-control-custom {width: 290px}
     .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; }

     /* Go Rewards */
     .go-rewards .qr-code {top: calc(50% - 82.5px)}

	/* Spacing */
	.pb-lg-6 {padding-bottom: 3.5rem!important}
	.pt-lg-6 {padding-top: 3.5rem!important}
	.py-lg-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important}
	.pb-lg-7 {padding-bottom: 5rem!important}
	.pt-lg-7 {padding-top: 5rem!important}
	.py-lg-7 {padding-top: 5rem!important;padding-bottom: 5rem!important}

	.mb-lg-6 {margin-bottom: 3.5rem!important}
	.mt-lg-6 {margin-top: 3.5rem!important}
	.my-lg-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important}
	.mb-lg-7 {margin-bottom: 5rem!important}
	.mt-lg-7 {margin-top: 5rem!important}
	.my-lg-7 {margin-top: 5rem!important;margin-bottom: 5rem!important}

	/* Overview Slideshow */
	.overview-slideshow .slick-list {width: calc(100% + 30px)}
	.overview-slideshow .slide {width: 305px;margin: 90px 7.5px -90px 7.5px}
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 185px 0px);}
	.overview-slideshow .slick-center {margin: 0px 7.5px}

     /* Card Pages */
     .wex-hero p.text-md-left {right:75px}
}

@media (min-width: 1100px) {	
	.locator .filters-wrapper .custom-control-inline {margin: 0px 10px;width:auto;float:none}
}

@media (min-width: 1200px) {	
	/* 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 .row .col-12:nth-child(2) {max-width: 520px;}
	.locator .location-details-wrapper .location {padding: 50px 0px 40px 60px; width: 450px}
	.locator .btn-close-details {right: -20px; top: 20px;}
	.locator nav {width: 410px}
	.locator .no-results {margin:130px 30px 0px 80px}

	/* Heros */
	.hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 7rem;}

	/* Overview Slideshow */
	.overview-slideshow .slick-list {width: 100%}
	.overview-slideshow .slide {width: 355px}
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 160px 0px);}
}

@media (min-width: 1500px) {
	/* About */
	.about-us .img-slanted {min-width: 100vw;height:auto;min-height:550px}

	/* About Elements */
	.about-us .motorsports-wrapper .caption {bottom: -350px}

	/* Heros */
	.hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 9rem;}
	.hero-md h1, .hero-md .h1 {font-size: 4.5rem}
	.hero-lg .container {max-width: 1600px}

	/* Overview Slideshow */
	.overview-slideshow .slide {width:355px;margin: 80px 7.5px -80px 7.5px}
	.overview-slideshow .slick-center {margin: 0px 7.5px}

	/* Go Rewards */
	.go-rewards .qr-code {width: 200px; right: 2vw; border-radius: 10px; font-size: 1.063rem}
	.go-rewards .qr-code img {width: 115px}

	/* 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}

	/* Interstitials */
	.interstitial-slanted {clip-path: polygon(0 31%, 100% 20%, 100% 89%, 0% 100%);margin-top: -9rem}
	.interstitial-slanted .container {top: 57.5%; transform: translate(-50%, -57.5%) }

	/* Overview Slideshow */
	.overview-slideshow .slide {width:475px;margin: 100px 7.5px -100px 7.5px}
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 140px 0px);}
	.overview-slideshow .slick-center {margin: 0px 7.5px}
}

@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-blue-border, .btn-white, .btn-white-border, .btn-darkest-grey, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {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;}

	/* Overview Slideshow */
	.overview-slideshow .h3 {font-size: 2.25rem}
	.overview-slideshow .slide-clip {clip-path: inset(0px 0px 200px 0px);}

	/* Socials */
	.socials a {width: 50px; height: 50px; font-size: 1.15rem}

	/* Heros */
	.hero-lg, .hero-lg .container {min-height: 700px}
	.hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 12rem;}
	.hero-md, .hero-md .container {height: 500px;}
	.hero-md h1, .hero-md .h1 {font-size: 6rem;}

	/* Image Scroll Wrapper */
	.img-scroll-wrapper .img-tiremarks {left:calc(-100% - 150px); }
	.img-scroll-wrapper .img-raceflag {left:-100%; }
	.img-scroll-wrapper .img-smoke {left:calc(-100% + 400px); }
	.img-scroll-wrapper .img-scroll-panel-2 { left:-600px; width: 650px; background-size: 100% 100%}
}

@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
	/* Heros */
	.hero-lg, .hero-lg .container {height: auto}
	.hero-lg h1, .hero-lg .h1 {padding: 100px 0px; font-size: 15vh}
	
	.hero-80vh h1 {margin-top: 7.5vh;font-size: 17vh}
	.hero-80vh .btn-find-a-station {display:none }
}

@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}
}