/* ==========================================================================
   Project:     Sunoco
   Date:        02/14/20 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */


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

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

/* Typography */
body {color: #4d4d4f; font-size: 14px; line-height: 22px;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Roboto Condensed",sans-serif;font-weight:300;color: #4d4d4f}
h1,h2,h3,h4,h5,h6 {text-transform: uppercase;}
h1 {margin:0px;font-weight:700;}
h2 {font-weight:700;margin-bottom: 30px}
h3, .h3 {font-size: 24px;}
h3.text-large {line-height:1.1}
.text-red {color: #e32e3d}
.text-blue {color: #185487}
.text-citi-blue {color: #033572}
.text-green {color:#00a160}
.text-yellow {color:#ffdf00;}
p.text-large {line-height: 1.57}
small {font-size: 13px;}
strong {font-weight:700}
.text-muted {color: #999 !important}
.text-dark {color: #4d4d4f !important}
.text-weight-500 {font-weight:500!important}
.h3-with-date {font-weight: 700;color: #185487;}
.h3-with-date {text-transform: uppercase;margin-bottom: 15px;}
.h3-date {line-height: .71;letter-spacing: -2.3px;color: #939393;font-weight: 700;font-style: italic; text-transform: none; display:block}
.text-default {font-size: 14px; font-weight: normal; line-height: 22px; text-transform: none}

/* Links */
a {color: #185487;text-decoration:underline;}
.content p a:not(.btn):not(.arrow-link):not(.directions-link):not(.muted-link):not(.dark-link), .content ul a:not(.btn) {font-weight:500}
.content a:not(.btn):hover, .content a:not(.btn):focus {text-decoration:none;color: #185487}
.arrow-link, .directions-link {font-size: 18px;font-family: "Roboto Condensed",sans-serif;position: relative;text-decoration:none;color: #4d4d4f;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-in-out;animation-iteration-count: 1}
.directions-link::before {content: '\f3c5'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 7px;color: #e32e3d}

@-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: #858585; 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: #858585;text-transform: uppercase;}
.dark-link {color: #64647c;}

.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: #E22C3B;position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .lines-on-sides.disabled::before, .lines-on-sides.disabled::after {background:#f0969d}
     .lines-on-sides::before {left: 0px;}
     .lines-on-sides::after {right: 0px}
     .lines-on-sides a {position: relative; z-index:1; border-left: 15px solid #fff; border-right: 15px solid #fff}
 
/* Buttons */
.btn-red, .btn-yellow {font-family: "Roboto Condensed",sans-serif; font-weight: 700; font-size: 19px; white-space: normal; line-height: 1; padding:13px 25px; border-radius: 0px; letter-spacing: 1px; text-transform: uppercase; color: #fff;text-decoration:none; transition: background 300ms ease-in-out}
	.btn-red {background: #E22C3B; color: #fff; } /* Red darkened slightlty for WCAG AA Contrast Compliance */
	.btn-yellow {background: #ffdf00; color: #185487}
	.btn-red:hover, .btn-red:focus {background:#ac0313; color: #fff !important;}
	.btn-yellow:hover, .btn-yellow:focus {background: #e1c500; color:#185487}

.btn-link {color: #185487; padding:0px;line-height:1.1;font-weight:500;font-size:14px}
.btn-link:hover, .btn-link:focus {text-decoration: none;}

.btn-sm {font-size: 14px; padding: 7px 15px}

.arrow-icon {height: 12px;width: 12px;margin-top: 5px; clear: both; border-style: solid;border-color: #155289;border-width: 0 2px 2px 0;position: relative;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg); transition: transform 150ms ease-in-out 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: #ffdf00;}
.bg-blue {background: #002c77}
.bg-black {background: #000}
.bg-citi-red {background: #EF373E}

/* 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-height-20 {height: 20px}
.img-height-30 {height: 30px}
.img-height-60 {height: 60px}
.img-height-70 {height: 70px}
.img-height-80 {height: 80px}
.object-fit-image {min-height: 200px}
.object-fit-image img {object-fit: cover; object-position: center center;font-family: "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;font-family: "object-fit: cover; object-position: top left;"; }

/* 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;font-weight:300}
.arrow-list li {position:relative;display:table-row}
.arrow-list li::before {content: "> ";font-size: 14px;color: #e32e3d;font-weight: 500; padding-right: 15px;display:table-cell}

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

/* Rulers */
hr.blue-stripe {border-top:none; height: 12px; background: url(/img/bg-stripe-blue.png);width: 100%; margin-top: 2rem; margin-bottom: 2rem;}

/* Grid */
.row:not(.no-gutters):not(.quality-fuels-row):not(.locator-row):not(.ultra-94-locations):not(.contact-row) {margin-left: -30px; margin-right: -30px;}
.cke_editable .row {margin-left: -15px !important; margin-right: -15px !important;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {padding-left: 30px; padding-right: 30px}
.col-narrow {max-width: 700px; margin-left: auto; margin-right: auto;}

/* Accordions */
.cms-accordion .card-header[aria-expanded=false] {border-color: transparent;display:table}
.cms-accordion .card-header strong {font-weight: 500}
.cms-accordion .card-header::before {content:""; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f106";transition: transform 250ms ease;color:#e32e3d;width: 30px; margin-left: -5px; text-align:center}
.cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.cms-accordion .card-body p:last-child {margin-bottom:0px}
.cms-accordion .card:not(:last-of-type), .cms-accordion >.card:not(:first-of-type) {border-bottom: 1px solid rgba(0,0,0,.125); border-radius: .25rem}

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

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:#E22C3B; /* Background darked slightly for wcag */ width:auto;height:auto;overflow:visible;padding:10px;color:#fff;font-weight:700;font-size:14px;z-index:9999;text-decoration:underline}
	.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: #fff; background:#ac0313}

/* Header */
.header-wrapper {z-index:2; }
 	.header-wrapper .logo {display:block}
 	.header-wrapper .logo img {width: 100%}
	.header-wrapper nav {background: #fff;z-index:0}
	.header-wrapper ul a {text-decoration: none;color: #4d4d4f;transition: all .35s cubic-bezier(.645,.045,.355,1);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(90deg,#e32e3d,#e32e3d 50%,#4d4d4f 0);background-size: 200% 100%;background-position: 100%;}
	_:-ms-input-placeholder, .header-wrapper ul a {background-image:none} /* IE 10 */
	.header-wrapper ul a:hover {background-position: 0}
	.header-wrapper .station {position: absolute; right: 70px; top: 15px;z-index:2}
	.header-wrapper .station img {width: 20px;}
	.header-wrapper .mainmenu, .header-wrapper .submenu {position: relative; z-index:1;}
	.header-wrapper .mainmenu {font-family: "Roboto Condensed",sans-serif;text-transform: uppercase;font-size: 24px;line-height: 1.21;font-weight: 300;}
	.header-wrapper .submenu {font-weight: 500;font-size: 14px;}
	.hamburger {position: absolute;width: 33px;height: 33px;z-index: 2;right: 15px;top: 12px; background:none; border:none;padding:0px}
	.hamburger .line {width: 33px;height: 2px;background-color: #e32e3d;display: block;margin: 8px auto;transition: all .3s ease-in-out}
	.hamburger:hover {cursor: pointer}
	.hamburger.hamburger.active .line:nth-child(2) {opacity: 0;background-color: #414141}
	.hamburger.hamburger.active .line:first-child {-webkit-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg);transform: translateY(10px) rotate(45deg);background-color: #414141}
	.hamburger.hamburger.active .line:nth-child(3) {-webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg);transform: translateY(-10px) rotate(-45deg);background-color: #414141}

/* Content */
.content-wrapper {padding-bottom: 50px}

/* Footer */
.footer-wrapper {background: url(/img/bg-stripe-black.png) #fff;overflow:hidden;}
 	.footer-wrapper .container-fluid {max-width: 1050px}
	.footer-wrapper .bg-white {padding: 30px}
	.footer-wrapper h4 {font-size: 24px;margin: 0px 0px 25px 0px}
	.footer-wrapper h5 {font-size: 13px; font-weight: 700;color:#4d4d4f;text-transform:none;margin-bottom: 15px}
	.footer-wrapper li {font-size: 14px;font-weight:700;letter-spacing:.7px }
	.footer-wrapper .list-unstyled li {margin-bottom: 20px;}
	.footer-wrapper .list-inline img {width: 25px; }
	.footer-wrapper .col-sm-4 {margin-bottom: 10px}
	.footer-wrapper .col-sm-4 .list-inline {margin-bottom: 20px}
	.footer-wrapper .col-sm-4 .list-inline-item:not(:last-child) {margin-right: 17px;}
	.footer-wrapper hr {border-top: 1px solid #939393;margin: 30px 0px}
	.footer-wrapper p {font-size: 16px;line-height:1.1}
	.footer-wrapper .col-12 ul {margin-bottom: 15px;list-style:none;padding:0px}
	.footer-wrapper sup {font-size: 50%; margin-left: 5px; top: -.5rem}

/* Homepage Promos */
.home .hero-wrapper {z-index:1;position: relative;}
.home .cms-slideshow {}
	.home .cms-slideshow .slick-list {height: auto !important} /* Removes adaptiveHeight on cms-slideshow plugin */
	.home .cms-slideshow .slick-slide {margin: 0px}
	.home .cms-slideshow .item {position: relative;z-index:0;overflow: hidden;}
	.home .cms-slideshow .caption {width: 90%; position: absolute; z-index:99;}
     .home .cms-slideshow .caption * {-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);}
	.home .cms-slideshow .caption img {width: auto; height: auto}
	.home .cms-slideshow h2 {color: #fff;text-shadow:0.7px 5px 13.5px rgba(99,100,102,.75);}
	.home .cms-slideshow sup {vertical-align:super; font-size:30%;margin-left: -.5rem}
	.home .cms-slideshow p {line-height: 1.1}
	.home .cms-slideshow small {font-size: 75%}
	.home .cms-slideshow .caption + img, .home .cms-slideshow .caption + p img {object-fit: cover; width: 100%; height: 100%; position: absolute;top: 0px; left: 0px;z-index:0;max-width:none}
	.home .cms-slideshow video {bottom: 0px; min-width: 100%; min-height: calc(100% + 1px); width:auto; height:auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
	.home .cms-slideshow .btn-video {position: absolute; bottom: 20px; z-index:2; border:none; background: url(/img/bg-pause.png); width: 28px; height: 28px;}
	.home .cms-slideshow .btn-video.paused {background: url(/img/bg-play.png); }
	.home .slick-controls {position: absolute;background: rgba(0,0,0,.5);right: 20px;bottom: 20px;  padding: 2px 2px 2px 35px;z-index:2}
	.home .slick-controls button {background:none;border:none; padding: 5px;display:flex}
	.home .slick-controls .btn-slideshow {position: absolute; top: 0px; left: 0px; width: 25px; height: 25px;}
	.home .slick-controls .btn-slideshow:hover, .home .slick-controls .btn-slideshow:focus {outline: 1px solid #e32e3d}
	.home .slick-controls .btn-slideshow::before {content:""; position: absolute; left: 8px; top: 8px; width: 2px; height: 10px; background:#fff}
	.home .slick-controls .btn-slideshow::after {content:""; position: absolute; right: 8px; top: 8px; width: 2px; height: 10px; background:#fff}
	.home .slick-controls .btn-slideshow.paused:before {background:none; }
	.home .slick-controls .btn-slideshow.paused:after {content:"";position: absolute; top:6px; left:8px;width: 0;height: 0;background:none; border-top: 6px solid transparent;border-left: 10px solid #fff;border-bottom: 6px solid transparent;}
	.home .slick-controls .slick-dots {list-style:none;padding: 0px; margin:0px;position: relative; bottom: auto; left: auto; right: auto;}
	.home .slick-controls .slick-dots li {display:inline-block;margin: 0px 3px;padding: 0px;}
	.home .slick-controls .slick-dots button {background:#fff; border: 1px solid #fff;opacity:1; width: 12px; height: 12px; border-radius:0;}
	.home .slick-controls .slick-dots .slick-active button {background: none;}
     
/* Homepage Promos */
.home .cms-slideshow .citi-promo {background: url(/img/bg-citi-promo.jpg) center center no-repeat; background-size: cover;height: 100%}
.home .cms-slideshow .citi-promo p {line-height: 20px;}

.home .cms-slideshow .gorewards-promo, .home .cms-slideshow .ultratech-promo, .home .cms-slideshow .locator-promo {height: 100%; background: url(/img/bg-gradient-blue-top-bottom.png) center top repeat-x;background-size:contain;overflow:hidden;position: relative;}
.home .cms-slideshow .gorewards-promo-inner .phone {position: absolute; bottom: 0px; z-index:0}
.home .cms-slideshow .gorewards-promo-inner .phone + p {position: relative; z-index: 1}
	
.home .cms-slideshow .ultratech-promo-inner .pump {position: absolute;z-index:0}

.home .cms-slideshow .locator-promo .sign {position: absolute; bottom: 0px;}

.home .cms-slideshow .nascar-promo {background-color: #033572; position: relative;}
.home .cms-slideshow .nascar-promo-inner {position: relative; z-index: 1}
.home .cms-slideshow .nascar-promo .small {opacity: .75}	
.home .cms-slideshow .nascar-promo-bg {position: absolute; top: 0px; object-fit: cover; object-position: top center; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 100%;} 


/* Masthead */
.masthead-wrapper {position: relative;background:#fff}
	.masthead-wrapper::after {content: "";display: block;position: absolute;right: 0;width: 0;height: 0;border-style: solid;border-color: transparent #fff;z-index: 1}
	.masthead-wrapper h1 {line-height: .92; padding-right: 30px;color:#fff;font-style:italic}
     .masthead-wrapper p {width: 100%; max-width: 550px;font-weight:400;line-height: 1.4;font-size: 1rem; margin-top: 10px}
	.masthead-wrapper img {object-fit: cover; object-position: center center;font-family: "object-fit: cover; object-position: center center;"; width: 100%; height: 100%; position: absolute;top: 0px; left: 0px;z-index:0;max-width:none}
     .quality-fuels-hub-home .masthead-wrapper::after {border-color: transparent #f8f9fa;}
     
/* Content */
.content {max-width: 990px;margin-left:auto;margin-right:auto;background:#fff}

/* About Us */
.about-us {}
	.about-us .content .h3 {font-weight: 700;color: #185487;}
	.about-us .content .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%); -ms-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: #185487}
	.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 #999 ;border-radius: 50%;width: 18px;height: 18px; transition: background 250ms ease-in-out; opacity: 1; }
	.about-us .giving-wrapper .slick-controls .slick-dots .slick-active button, .about-us .giving-wrapper .slick-controls .slick-dots button:focus {background: #999 }
	.about-us .health-wrapper hr {border-top: 1px solid #939393;}
	.about-us .health-wrapper h3 {margin-bottom: 15px}

/* Credit cards */
.consumer-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 #4d4d4f}
	.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: #00a160; background-color: #00a160}
     .consumer-credit-cards a.disabled {background: #f0969d; pointer-events:none; }
     .consumer-credit-cards .small {line-height: 1.4;}
     
/* Contact us */
.contact-us .masthead-wrapper img {object-position: center calc(100% + 50px);}
.contact-us .form-text {line-height: 1.4}
.contact-us .search-site {position: relative}
.contact-us .search-dropdown {font-size: .75rem; padding: 10px; color:#4d4d4f; 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 #ccc;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:#0056b3; color: #fff}
.contact-us .search-dropdown a {color: #0056b3;display:block; padding: 10px; text-decoration: none;}
.contact-us .search-dropdown a:hover, .contact-us .search-dropdown a:focus {background: #f9f9f9}
.contact-us .search-dropdown ul {max-height: 185px; overflow-y:auto;}
.contact-us .search-dropdown ul::-webkit-scrollbar {-webkit-appearance: none;width:5px;background: #f1f1f1;}
.contact-us .search-dropdown ul::-webkit-scrollbar-thumb {border-radius: 4px;background-color: #0056b3}
.contact-us .btn-close-search {  position: absolute;top: 0px;right: -25px;background: #E22C3B;padding: 0px;width: 25px;height: 25px;border-radius: 0px;}
.contact-us .btn-close-search span {color: #fff; font-size: .875rem; -webkit-text-stroke: 1px #E22C3B}
.contact-us .btn-close-search:hover, .contact-us .btn-close-search:focus {background: #ac0313}
.contact-us .btn-close-search:hover span, .contact-us .btn-close-search:focus span {-webkit-text-stroke: 1px #ac0313}
.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:#185487}


/* App */
.app {}
 .app .app-promo .caption {color: #22356f;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 {}
	.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 .small {line-height: 1.4}
	.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: #ccc; 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}

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

/* Go Rewards FAQ */
.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 {}
     .partner-form .ss-main{position:relative;display:inline-block;user-select:none;color:#666;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 #ced4da;border-radius:0px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-single-selected.ss-disabled{background-color:#ced4da;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:#dedede}.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 #666;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 #ced4da;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-multi-selected.ss-disabled{background-color:#ced4da;cursor:not-allowed}.partner-form .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:#666}.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:#666;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:#fff;background-color:#185487;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:#666;position:relative;height:10px;width:2px;transition:transform .2s}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus:after{background:#666;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 #ced4da;z-index:1010;background-color:#fff;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 #ced4da;border-radius:0;background-color:#fff;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:#8a8a8a;vertical-align:middle}.partner-form .ss-content .ss-search input:focus{box-shadow:0 0 5px #185487}.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 #ced4da;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:#fff;background-color:#185487}.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:#fff;background-color:#e32e3d}.partner-form .ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:#dedede;background-color:#fff}.partner-form .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:#666;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:#fffb8c}
     .partner-form .form-control, .partner-form .custom-select {border-radius: 0px}

/* Hiring Form */
.hiring-form .form-check label.active {color: #4d4d4f}
     .hiring-hero {position: relative; z-index:1}
     .admin-edit .hiring-hero {z-index:0}
     .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}

/* Form modal */
.modal-form { width: 100%; -webkit-transition: transform 250ms ease-in-out;-ms-transition: transform 250ms ease-in-out;transition: transform 250ms ease-in-out;}
 	.modal-form-open .modal-form {}
	.modal-form-body {background: #565658; width: 100%; overflow-x:hidden; color: #fff;}
	.modal-form .btn-close-modal {position: absolute; z-index:1}
	.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: #fff;}
	.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:#565658; border-radius:0px; border: 1px solid #fff; color: #fff; 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: #565658;color: #fff;}
	.modal-form label {background-color: #565658;color: #fff;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 #fff}
	.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 #e32e3d; box-shadow:none}
	.modal-form .custom-radio .error + .custom-control-label::before {border: 2px solid #e32e3d}

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

     .locator {margin-left: -30px; margin-right: -30px}

	/* Form */
	.locator form {margin:auto}
	.locator form .form-control {border: 1px solid #666; 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: #fff; color: #4d4d4f;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; max-width: 350px}
	.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: #00a160; background-color: #00a160}
	.locator hr {border-top: 1px solid #4d4d4f}
	.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-in-out;-ms-transition: all 250ms ease-in-out;transition: all 250ms ease-in-out; content:""; background: #666; 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: 170px;}
	.locator .filters-wrapper .custom-control-inline {float:left}
	.locator .form-control.error {border: 1px solid #e32e3d; box-shadow:none}
     /* Form over Blue */
     .locator-over-blue {margin: 0px}
     .locator-over-blue form label {background: #002c77; color: #fff}
     .locator-over-blue form input.form-control {background: #002c77; border: 1px solid #fff; color: #fff}
     .locator-over-blue form select.form-control {background: url(/img/caret-white.png) no-repeat 90% center; border: 1px solid #fff}
     .locator-over-blue form select.form-control option { color: #4d4d4f}
     /* Form over Black */
     .locator-over-black {margin: 0px}
     .locator-over-black form label {background: #000; color: #fff}
     .locator-over-black form input.form-control {background: #000; border: 1px solid #fff; color: #fff}
     .locator-over-black form select.form-control {background: url(/img/caret-white.png) no-repeat 90% center; border: 1px solid #fff}
     .locator-over-black form select.form-control option { color: #000}
			/* Form over Light Gray */
				.locator-over-gray {margin: 0px}
				.locator-over-gray form label {background: #f8f9fa; color: #000}
				.locator-over-gray form input.form-control {background: #fff; border: 1px solid #000; color: #000}
				.locator-over-gray form select.form-control {background: url(/img/caret-grey.png) no-repeat 90% center #fff; border: 1px solid #000}
				.locator-over-gray form select.form-control option { color: #000}

	/* Map */
	.locator #map {background:#f1f1f1}
	.locator .marker-label {color: 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 #d7d7d7; background:#fff; 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: #fff; 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-in-out;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: #666; 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: #4d4d4f}
	.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 #e32e3d; background-size: cover;}
	/* Nav */
	.locator nav {text-align:center;background:#fff}
	.locator nav p {font-size: 14px; color: #4d4d4f;font-weight: 400;}
	.locator nav .locations-prev, .locator nav .locations-next {background:none;border:none;position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-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%);}

/* Locator Detail */
.locator-detail {}
     .locator-detail #map {height: 350px;}
     .locator-detail #map.map-unavailable img {position: absolute; top: 0px; left: 30px; width: calc(100% - 60px); height: 100%; object-position: center center; font-family: "object-fit: cover; 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 .col-md-4, .locator-detail .fuel-slideshow .col-md-4 {margin-left: 0px;margin-right: 0px; }
     .locator-detail .nearby-slideshow a:not(.btn) {color: #4d4d4f;}
     .locator-detail .text-default a, .locator-detail .nearby-slideshow h3 a {color: #4d4d4f; 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);}
     .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:#000;border: none; padding: 0px; opacity: .25; width: 6px; height: 6px; border-radius:50%;}
	.locator-detail .slick-dots .slick-active button {opacity: .5}
     .locator-detail .small {line-height: 1.4;}
     .locator-detail .card a {text-decoration: none;}
     

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

/* Quality Fuels */
.quality-fuels-hub-home .masthead-wrapper + .content-wrapper {background: #f8f9fa;padding-bottom: 0px;margin-bottom: 70px}
.quality-fuels-hub-nav {box-shadow: 0px 0px 15px 0px rgba(0,0,0,.2);height: 50px;position: relative; margin-top:30px; line-height: 1.2; overflow-x:auto; overflow-y: hidden;padding: 0px 5px; border-left: 4px solid #fff; border-right: 4px solid #fff}
.quality-fuels-hub-nav::-webkit-scrollbar {-webkit-appearance: none;height: 6px}
.quality-fuels-hub-nav::-webkit-scrollbar-track {margin: 0px;background: #ccc; border-radius: 4px;}
.quality-fuels-hub-nav::-webkit-scrollbar-thumb {background: rgba(0,0,0,.4);border-radius: 4px;}
.quality-fuels-hub-nav::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,.6);}
.quality-fuels-hub-nav ul {max-width: 930px;}
.quality-fuels-nav-fixed-top body {padding-top: 70px}
.quality-fuels-nav-fixed-top .quality-fuels-hub-nav {margin-top: 0px; position: fixed; top: 0px; width: 100%;z-index: 1; -webkit-animation: moveNav 300ms ease-out; animation: moveNav 300ms ease-out;}

.quality-fuels-hub-cta-02 {background: url(/img/94-octane-bg.webp) center 60% no-repeat; background-size: cover;}
.quality-fuels-hub-cta-02 .container {max-width: 990px; margin-left: auto; margin-right:auto;padding-left: 30px; padding-right: 30px}
.quality-fuels-hub-cta-02 .slogan {width: 100%; max-width: 550px}

@-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); }
}
.quality-fuels-logo {position: absolute; top: -16px; left: 25px; max-width: 100px; max-height: 50px;background: #fff;box-shadow: 0px 0px 3px 0px rgba(0,0,0,.25); padding: 5px;}
.quality-fuels-article-logo { max-height: 50px;background: #fff;box-shadow: 0px 0px 3px 0px rgba(0,0,0,.25); padding: 5px;}
.qulaity-fuels-row {margin-left: 10px; margin-right: 10px}
.quality-fuels-row>.col, .quality-fuels-row>[class*=col-] {padding-left: 10px; padding-right: 10px}

/* Card Pages */
.sunoco-corporate-card h1, .sunoco-corporate-card h2, .sunoco-corporate-card h3, .sunoco-business-fleet-card h1, .sunoco-business-fleet-card h2, .sunoco-business-fleet-card h3, .sunoco-fleet-universal-card h1, .sunoco-fleet-universal-card h2, .sunoco-fleet-universal-card h3 {text-transform:none}
.sunoco-business-fleet-card .small, .sunoco-fleet-universal-card .small {line-height: 1.6}
.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-list {}
.reviews-slideshow .slick-track {padding: 1rem 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; 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: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center; justify-content: center;}
.reviews-slideshow .slick-dots li {}
.reviews-slideshow .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px}
.reviews-slideshow .slick-dots button {background:none; border: 1px solid #999; padding: 0px; border-radius: 50%;width: 9px;height: 9px; transition: background 250ms ease-in-out; opacity: 1; }
.reviews-slideshow .slick-dots .slick-active button, .reviews-slideshow .slick-dots button:focus {background: #999; width: 15px; height: 15px;margin: 8px 0px -8px 0px}


/* ==========================================================================
   Alert
   ========================================================================== */

.alert-wrapper {z-index:3;}
     .alert-wrapper .alert {text-align:center; background: #185487; color: #fff; position: relative;width: 100%;font-size: 15px; line-height: 1.2; padding: 12px 40px 12px 15px; margin: 0px; border-radius: 0px}
     .alert-wrapper .alert + .alert {border-top: 1px solid rgba(255,255,255,.2);}
     .alert-wrapper a {color: #fff; text-decoration: none;}
     .alert-wrapper button {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);right: 15px; padding: 0px; background:none; border:none; color: #fff; -webkit-text-stroke: 1px #185487}
     .alert-wrapper button:hover, .alert-wrapper button:focus {color: #fff}

/* ==========================================================================
   Cookie Notification
   ========================================================================== */
   
   .cookie-wrapper {position: fixed; bottom: 0px; left: 0px; width: 100%; background: #444; color: #fff; font-size: 14px;line-height: 1.2; z-index: 3}
	   .cookie-wrapper a {color: #fff}

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

@media (min-width: 0px) {	
	/* Typography */
	.text-large {font-size:15px;}
	.text-x-large {font-size: 16px; line-height:26px;}
	h1 {font-size: 42px; line-height: 42px}
     h1.text-xlong, h1.text-x-large {font-size:40px;line-height: 42px}
	h2 {font-size: 30px}
	h3.text-large, h2.text-large, h1.text-large {font-size: 28px; }
	.h3-with-date {padding-left: 15px}
	.h3-with-date {font-size: 26px;}
	.h3-date {margin-left:-15px;font-size: 75px;}

	/* Header */
	.header-wrapper {position:relative; width: 100%; height: 60px;}
	.header-wrapper::before {content:""; background: #fff; width: 100%; height: 60px; position: absolute; top: 0px; left: 0px;z-index:1}
	.header-wrapper nav::after {content: ""; display: block;position: absolute;width: 0;height: 0;border-style: solid;top: 100%;left: 0;border-width: 5vw 100vw 0 0;border-color: #fff transparent transparent;-webkit-filter: drop-shadow(0 7px 4px rgba(0,0,0,.25));-moz-filter: drop-shadow(0 7px 4px rgba(0,0,0,.25));-ms-filter: drop-shadow(0 7px 4px rgba(0,0,0,.25));-o-filter: drop-shadow(0 7px 4px rgba(0,0,0,.25));filter: drop-shadow(0 7px 4px rgba(0,0,0,.25));}
	.header-wrapper .logo {min-width: 90px; width: 13vw; position: absolute; top: 10px; left: 10px;z-index:2}
	.header-wrapper .mainmenu li {height: 65px}
	.header-wrapper .mainmenu li:first-child {display:none;}
	.header-wrapper .submenu {margin-top: -25px}

	/* Offcanvas */
	.header-wrapper nav {transition: transform .5s ease}
	.header-wrapper nav {position: absolute; left: 0px; top: -500px; height: 570px; width: 100%; padding: 150px 0px 0px 50px;}
	.offcanvas-open .header-wrapper nav {-webkit-transform: translateY(450px); -ms-transform: translateY(450px);transform: translateY(450px);}

	/* Homepage Promos */
	.home .cms-slideshow .caption {max-width: 300px;top: calc(50% + 35px);left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	.home .cms-slideshow h2 {font-size:55px;line-height: 58px;margin-bottom: 25px}
	.home .cms-slideshow .btn-video {left: 20px; }
	.home .cms-slideshow .caption img {max-height: 300px}
	.home .cms-slideshow .caption + img, .home .cms-slideshow .caption + p img {object-position: 85% center; font-family: "object-fit: cover; object-position: 85% center;";}
     
     /* Homepage Promos */
		 .home .cms-slideshow .gorewards-promo-inner {padding: 5vw 0 0 5vw; margin-bottom: 100px;max-width: 850px;}
		 .home .cms-slideshow .gorewards-promo-inner .slogan {max-height: 50vh; padding-right: 10px}
		 .home .cms-slideshow .gorewards-promo-inner .phone { right:3px;width: 30vh}

     .home .cms-slideshow .ultratech-promo-inner {padding: 7.5vw;}
     .home .cms-slideshow .ultratech-promo-inner .slogan {max-height: 50vh}
     .home .cms-slideshow .ultratech-promo-inner .pump { bottom: 0px; right: -50px; width: 35vh; }
     .home .cms-slideshow .ultratech-promo-inner .logos {margin: 30px auto}

     .home .cms-slideshow .locator-promo-inner {margin-left: 25px}
     .home .cms-slideshow .locator-promo .slogan {max-width: 78%}
     .home .cms-slideshow .locator-promo .sign {width: 50%; right: 0px;}

		 .home .cms-slideshow .citi-header {width: 100%; padding: 0px 15px 0px 15px; position: relative;}
		 .home .cms-slideshow .citi-card {width: 120px; position: absolute; left: calc(50% - 10px); top: 50px}
		 .home .cms-slideshow .citi-slogan {width: 150px;margin-left:auto;margin-right:auto;margin-top: 120px}
		 .home .cms-slideshow .col-auto {width: 100%}
		 .home .cms-slideshow .citi-promo-bottom {padding: 0px 30px 0px 30px;max-width:600px;margin:auto;text-align:center;}
		 .home .cms-slideshow .citi-phone {display:none}

		 .home .cms-slideshow .nascar-promo-logos {max-width: 150px;}
		 .home .cms-slideshow .nascar-promo-bg {left: 50%;}

		 
	/* Footer */
	.footer-wrapper {padding: 10px 5px}
	.footer-wrapper [class*="col-"] {padding-left: 5px; padding-right: 5px}
	.footer-wrapper .col-12 ul li {margin: 0px 0px 20px 0px}

	/* Masthead */
	.masthead-wrapper {height:250px;margin-bottom:30px; overflow:hidden}
	.masthead-wrapper::after {border-width: 5vw 105vw 0 0;top: calc(100% - 5vw + 1px);}
	.masthead-wrapper > h1, .masthead-wrapper .caption {position: absolute;  z-index:1; left: 15px; width: calc(100% - 30px);top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .masthead-wrapper p {display:none}
     .quality-fuels-hub-home .masthead-wrapper {margin-bottom: 0px}

	/* Content */
	.content { padding: 0px 25px}

	/* About Shared */
	.about-us .img-slanted {height: 550px}
	.about-us .caption {top: 52%;}
	.about-us .content p {padding-left: 15px}
	.about-us .content .h3 {font-size: 18px;line-height: 1.33}
	.history-wrapper p:last-child::after {content:""; height:20px;width:20px;border-style: solid;border-color: #999; border-width: 0 2px 2px 0;position: relative;left: 50%;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);display:block; margin: 20px 0px 0px -10px}
	
	/* 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;}
     .admin-edit .embed-responsive {overflow:visible}

	/* Form Modal */
	.modal-form {position: absolute; z-index:2;top: 0px; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%);}
	.modal-form-open .modal-form {-webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);}
	.modal-form-open .modal-form-body {box-shadow:0 5px 14px 0px rgba(0,0,0, 0.5);}
	.modal-form .btn-close-modal {right: 15px; top: 15px; height: 30px; width: 30px; }

	/* 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 .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-in-out;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;}
     .locator-detail .nearby-slideshow .col-md-4, .locator-detail .fuel-slideshow .col-md-4 {padding-left: 10px; padding-right: 10px;}

	/* 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 h1 sup {top: -1.45rem; margin-left: 5px; font-size: 25%}
     .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;}

	/* Admin */
	.admin .home .cms-contentmenu:first-child {margin-top: 80px !important; margin-right: 1.5rem}
	.admin .home .cms-contentmenu {margin-left: 1.5rem; margin-right: 1.5rem}

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

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

     /* Quality Fuels */
     .quality-fuels-hub-home .masthead-wrapper + .content-wrapper {padding-top: 50px}

     /* Alerts */
     .alert-wrapper {position: relative;}

     /* Card Pages */
     .admin .sunoco-corporate-card main, .admin .sunoco-business-fleet-card main, .admin .sunoco-fleet-universal-card main {margin-top: 80px;}
}

@media (min-height: 900px) {
	/* Homepage Promos */
	.home .cms-slideshow .citi-promo-top {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 50vh; align-items: center;}
}

@media (min-width:321px) {	
     /* Homepage Promos */
     .home .cms-slideshow .ultratech-promo-inner .pump {right: 0px;}
}

@media (min-width: 0px) and (orientation: portrait) {
	/* Homepage Promos */
     .home .cms-slideshow, .home .cms-slideshow .slick-track {height:calc(100vh - 160px)}
}

@media (min-width: 0px) and (orientation: landscape) {
	/* Homepage Promos */
	.home .cms-slideshow, .home .cms-slideshow .slick-track {height: calc(100vh - 60px)}
}

@media (min-width: 487px) and (orientation: portrait) {
	.home .cms-slideshow, .home .cms-slideshow .slick-track {height:calc(100vh - 140px)}
}

@media (min-width: 350px) {
	/* Homepage Promos */
	.home .cms-slideshow .nascar-promo-heading {max-width: 300px}
}

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

@media (min-width: 500px) {	
	/* Homepage Promos */
	.home .cms-slideshow .caption {max-width: 90%;}
	
     /* Locator */
     .locator .location-details-wrapper .location {width: 400px;}

	/* Footer */
	.footer-wrapper .col-12 ul li {display:inline-block}
	.footer-wrapper .col-12 ul li:not(:last-child) {margin: 0px 50px 0px 0px}
}	

@media (min-width: 576px) {
	/* Footer */
	.footer-wrapper .col-sm-4 {-ms-flex: none; flex: none;max-width: none;width: 100%}

	/* Go Rewards */
	.go-rewards .content .col-sm-4:nth-child(1)::before, .go-rewards .content .col-sm-4:nth-child(2)::before {content: "";height: 18px;width: 55px;background: url(/img/icon-arrow.png) no-repeat;background-size: cover;position: absolute; top: 50px; left: calc(100% - 30px);}
	.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;}

	/* Site Map */
	.site-map .content ul {columns: 2; -webkit-columns: 2; -moz-columns: 2}

     /* Masthead */
     .masthead-wrapper p {display:block}

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

     /* Homepage Promos */
		 .home .cms-slideshow .gorewards-promo-inner {margin-bottom: 180px;}
		 .home .cms-slideshow .gorewards-promo-inner .phone {right: 50px}

     .home .cms-slideshow .ultratech-promo-inner .slogan {max-width: 48vw}
     .home .cms-slideshow .ultratech-promo-inner .pump { bottom: 50%; right: 0px; width: 40vw }

     .home .cms-slideshow .locator-promo .slogan {max-width:65%}
     .home .cms-slideshow .locator-promo .sign {width: 55%;}

		 .home .cms-slideshow .nascar-promo-heading {max-width: 400px;}
		 .home .cms-slideshow .nascar-promo-logos {max-width: 175px}
		 .home .cms-slideshow .nascar-promo-bg {left: 70%;}
		 .home .cms-slideshow .nascar-promo::before {content:""; top: 0px; left: 0px; position: absolute; width: 50%; height: 100%;z-index: 1; background:linear-gradient(90deg, rgba(3,53,113,1) 0%, rgba(3,53,113,1) 40%, rgba(3,53,113,0) 100%);}

		 
     /* Rows */
     .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: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}

}

@media (min-width: 641px) {
	/* Footer */
	.footer-wrapper {padding: 25px 10px}
	.footer-wrapper [class*="col-"] {padding-left: 10px; padding-right: 10px}
	.footer-wrapper .col-sm-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}

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

@media (min-width: 768px) {	
	/* Typography */
	.text-large {font-size: 18px;}
	.text-x-large {font-size: 20px; line-height: 33px;}
	h1 {font-size: 96px}
	h1.text-long {font-size: 70px}
     h1.text-xlong {font-size: 60px; line-height: 62px;}
	h2, h1.text-x-large {font-size: 48px}
	h3.text-large, h2.text-large, h1.text-large {font-size: 36px;}
	.h3-with-date {padding-left: 30px}
	.h3-with-date {font-size: 30px;}
	.h3-date {margin-left: -30px;font-size: 90px;}
	
	/* Homepage Promos */
	.home .cms-slideshow, .home .cms-slideshow .slick-track {height: calc(100vh - 60px)}
	.home .cms-slideshow h2 {font-size:120px; line-height: .94; margin-bottom: 50px;}
	.home .cms-slideshow .caption img {max-height: none}
	.home .cms-slideshow .caption + img, .home .cms-slideshow .caption + p img {object-position: center center; font-family: "object-fit: cover; object-position: center center;";}

	.home .cms-slideshow .nascar-promo-heading {max-width: 500px;}

	.home .cms-slideshow .locator-promo .slogan {max-width:65%}
	.home .cms-slideshow .locator-promo .sign {width: 55%;}

	.home .cms-slideshow .gorewards-promo-inner .phone {width: 30vh}

	/* Masthead */
	.masthead-wrapper {height: 420px;margin-bottom:60px}
	.masthead-wrapper::after {border-width: 5vw 100vw 0 0;}
     .quality-fuels-hub-home .masthead-wrapper {margin-bottom: 0px}

	/* Content */
	.content { padding: 0px 30px}

	/* About Shared */
	.about-us .content p {padding-left: 30px}
	.about-us .content .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, .about-us .new-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%}
     
	/* Quality Fuels */
	.img-qualityfuels {max-width:350px; width: 150%;position:absolute;left: 50%; z-index:0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
     .quality-fuels-hub-nav {padding: 0px 30px}
     .quality-fuels-nav-fixed-top .quality-fuels-hub-nav {left: 0px; width: 100%; }
     .quality-fuels-hub-nav li:not(:last-child) {margin: 0}
     .quality-fuels-hub-nav li {padding: 0 1.5rem}

	/* 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%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 80px; width: 60%;}
	.app .app-promo .caption img {max-width: 65%}

	/* Go Rewards */
	.go-rewards h1 sup {top: -3.4rem; margin-left: 10px; font-size:18%}
	.go-rewards .video-wrapper { max-width: 100%}
	.go-rewards .btn-video { right: -10px;}

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

     /* Locator Detail */
     .locator-detail .nearby-slideshow {margin-left: 0px; margin-right: 0px}
     .locator-detail .nearby-slideshow .col-md-4, .locator-detail .fuel-slideshow .col-md-4 {padding-left: 30px; padding-right: 30px;}
     
     /* Borders */
     .border-md-right {border-right: 1px solid #dee2e6!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:51%; right: 65px}

}

@media (min-width: 360px) and (max-height: 740px) and (orientation:portrait) {
	/* Homepage Promos */
	.home .cms-slideshow .nascar-promo {padding-bottom: 0px !important;}
	.home .cms-slideshow .nascar-promo-inner {-webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center;}
}

@media (min-width: 768px) and (min-height: 1024px) and (max-width: 1000px) and (orientation:portrait) {
	.home .citi-header {-webkit-transform: scale(1.5); -ms-transform: scale(1.5);transform: scale(1.5);}
}

@media (max-width: 900px) and (max-height: 450px) and (orientation: landscape)  {
	/* Homepage Promos */
	.home .cms-slideshow h2 {font-size:60px;line-height: .95; margin-bottom: 10px}

	.home .cms-slideshow .gorewards-promo-inner .slogan {max-height: 40vh; margin-top: 80px}
	.home .cms-slideshow .gorewards-promo-inner .phone {width: 60vh; right: 2.5vw}

     .home .cms-slideshow .ultratech-promo-inner .slogan {max-height: 20vh; width:auto; margin-top: 50px}
     .home .cms-slideshow .ultratech-promo-inner .pump { bottom: 45%; right: -30px; width: 40%}
     .home .cms-slideshow .ultratech-promo-inner .logos {margin: 10px auto}

     .home .cms-slideshow .locator-promo .slogan {max-width:25%;margin-top: 50px}
     .home .cms-slideshow .locator-promo .sign {width: 30%;}

		 .home .citi-header, .home .citi-promo-bottom {-webkit-transform: scale(.5); -ms-transform: scale(.5);transform: scale(.5);}
		 .home .citi-promo-bottom {-webkit-transform: scale(.5) translateY(-150px); -ms-transform: scale(.5) translateY(-150px);transform: scale(.5) translateY(-150px);}
		 .home .cms-slideshow .citi-promo-top {height: 40vh}
		 .home .cms-slideshow .citi-slogan {margin: 0px}
		 .home .cms-slideshow .citi-card {position: relative; left: auto; width:150px;float:right}
		 .home .cms-slideshow .citi-header .col-auto {width: 50%}

		 .home .cms-slideshow .nascar-promo-inner {-webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left;margin-bottom: -40px;}
}

@media (max-width: 900px) and (max-height: 400px) and (orientation: landscape)  {
	/* Homepage Promos */
	.home .cms-slideshow h2 {font-size:40px;}
}

@media (min-width: 992px) {	
	/* 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}
}

@media (min-width: 1026px) {	
	/* Header */
	.header-wrapper {position: fixed; width:245px; height: 100vh; top: 0px; left: 0px; padding: 30px 0px 0px 40px; background: #fff}
	.header-wrapper::before, .header-wrapper nav::after {content:none}
	.header-wrapper::after {content: ""; display: block;position: absolute;width: 0;height: 0;border-style: solid;top: 0;left:auto; right: -81px;border-width: 1200px 100px 0 0;border-color: #fff transparent transparent;z-index: -1;-webkit-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-moz-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-ms-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-o-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));}
	.header-wrapper .logo {margin: 0px 0px 60px 0px; width: 220px; position: relative; top: auto; left: auto}
	.header-wrapper .station, .header-wrapper .hamburger {display:none;}
	.header-wrapper li {transition: opacity .4s ease,height .6s ease; max-height: 500px; opacity:1; overflow:hidden;}
	.header-wrapper li.closed {max-height:0; opacity:0}
	.header-wrapper .mainmenu li:first-child {display:block;}
	.header-wrapper .mainmenu {margin: 10px 0px 30px 0px}
	.header-wrapper .mainmenu li {position: relative;height: 50px}
	.header-wrapper .mainmenu li:first-child::before { content: ""; display: inline-block;height: 22px;width: 15px;background-image: url(/img/icon-mappin.png);background-repeat: no-repeat;background-size: 100% 100%;position: relative;margin-right: 10px;top: 2px;}
	.header-wrapper .mainmenu li:first-child {transition-delay: .25s}
	.header-wrapper .mainmenu li:nth-child(2) {transition-delay: .31s}
	.header-wrapper .mainmenu li:nth-child(3) {transition-delay: .37s}
	.header-wrapper .mainmenu li:nth-child(4) {transition-delay: .43s}
	.header-wrapper .mainmenu li:nth-child(5) {transition-delay: .49s}
	.header-wrapper .mainmenu li:nth-child(6) {transition-delay: .55s}
	.header-wrapper .mainmenu li:nth-child(7) {transition-delay: .61s}
	.header-wrapper .submenu {margin-top: 0px}
	.header-wrapper .submenu li {transition-delay: .61s}

	/* Offcanvas */
	.header-wrapper nav, .header-wrapper::after {transition: none}
	.header-wrapper nav {position: relative; left: auto; top: auto; height: auto; width: auto; padding: 0px;}
	.offcanvas-open .header-wrapper nav {-webkit-transform: none; -ms-transform: none;transform: none;}
	.offcanvas-open .header-wrapper::after {-webkit-transform: none; -ms-transform: none;transform: none;}

	/* Homepage Promos */
	.home .cms-slideshow .caption, .home .cms-slideshow .btn-video {left: 335px;}
	.home .cms-slideshow .caption {max-width: calc(100% - 345px);right: 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}

	.home .cms-slideshow .gorewards-promo-inner {margin-left: 300px; padding: 5vw 3vw 0 5vw; max-width: 1000px}

     .home .cms-slideshow .ultratech-promo-inner {margin-left: 300px; padding: 5vw }
     .home .cms-slideshow .ultratech-promo-inner .slogan {max-width: calc(46vw - 160px)}
     .home .cms-slideshow .ultratech-promo-inner .pump {width: 33vw}

     .home .cms-slideshow .locator-promo-inner {margin-left: 350px}
     .home .cms-slideshow .locator-promo .slogan {max-width:60%}
     .home .cms-slideshow .locator-promo .sign {width: 35%;}

		 .home .cms-slideshow .citi-promo-top, .home .cms-slideshow .citi-promo-bottom {padding-left: 340px;}
		 .home .cms-slideshow .citi-header {max-width: 980px; padding:100px 0px 0px 110px; position: relative;margin:auto;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:end; }
		 .home .cms-slideshow .citi-header .col-auto {width: 50%}
		 .home .cms-slideshow .citi-card {width: 100%; position: relative; left: auto; top: auto}
		 .home .cms-slideshow .citi-slogan {width: 69%;margin: 0px;}
		 .home .cms-slideshow .citi-promo-bottom {padding-top: 0px; padding-right: 0px; padding-bottom: 0px;max-width:1600px;text-align:left}
		 .home .cms-slideshow .citi-promo-bottom .row {width: 60%; max-width:1000px;margin:auto; text-align:left;}
		 .home .cms-slideshow .citi-promo-bottom .row .col-auto:nth-child(1) {width: 80%}
		 .home .cms-slideshow .citi-promo-bottom .row .col-auto:nth-child(2) {width: 25%}
		 .home .cms-slideshow .citi-credit {width: 100%;max-width:none}
		 .home .cms-slideshow .citi-phone {display:block;margin: 0px -80px 0px 20px;}
		 .home .cms-slideshow .citi-promo p {max-width: 480px}

		 .home .cms-slideshow .nascar-promo-inner {padding-left: 340px}
		 .home .cms-slideshow .nascar-promo-bg {left: 80%;}

	/* Masthead */
	.masthead-wrapper {margin-bottom:0px}
	.masthead-wrapper::after {top: calc(100% - 199px);border-width: 200px 100vw 0 0;}
	.masthead-wrapper h1 {-webkit-transform: none; -ms-transform: none; transform: none;}
     .masthead-wrapper .caption, .masthead-wrapper > h1 {margin: 0px 0px 0px 335px;width: calc(100% - 335px); top: 70px; -webkit-transform: none; -ms-transform: none; transform: none;}

	/* Content */
	.content-wrapper {padding-left: 320px }

	/* Footer */
	.footer-wrapper {padding: 55px 45px 20px 380px}

     /* Quality Fuels */
     .quality-fuels-hub-nav {margin-left: -80px; padding: 0px 30px 0px 110px}
     .quality-fuels-hub-home .masthead-wrapper + .content-wrapper {padding-top: 0px; position: relative; z-index: 1}
     .quality-fuels-nav-fixed-top .quality-fuels-hub-nav {left: 390px; width:calc(100% - 310px); padding: 0px}
     .quality-fuels-hub-cta {margin-left: 240px;}
		 .quality-fuels-hub-cta-02 {padding-left: 380px}
		 
	/* Form Modal */
	.modal-form {position:fixed; z-index:1;height: 100%; top: 0px; -webkit-transform: translateX(calc(-100% - 100px)); -ms-transform: translateX(calc(-100% - 100px)); transform: translateX(calc(-100% - 100px));}
	.modal-form::after { content: ""; position: absolute;top: 0;left:100%;width: 0;height: 0;border-style: solid;border-width: 1200px 100px 0 0;border-color: #565658 transparent transparent;z-index:0;-webkit-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-moz-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-ms-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));-o-filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));filter: drop-shadow(7px 0 4px rgba(0,0,0,.25));}
	.modal-form-open {overflow:hidden}
	.modal-form-open .modal-form {-webkit-transform: translateX(calc(0% - 120px)); -ms-transform: translateX(calc(0% - 120px)); transform: translateX(calc(0% - 120px));}
	.modal-form .btn-close-modal {right: -50px;  top: 30px;  height: 50px; width: 50px; }
	.modal-form-body {padding-left: 450px;height: 100vh; overflow-y:scroll;overflow: -moz-scrollbars-none;-ms-overflow-style: none;}
	.modal-form-body::-webkit-scrollbar { width: 0 !important }

	/* Locator */
	.locator form {max-width: 680px;}
	.locator #map {height: 460px;margin:0px; box-shadow:none;}
     .locator .locator-row {box-shadow:5px 0 14px 1px rgba(99,100,102,.25);}
     .locator .locations {margin:0px;max-width: 100%}
	.locator .locations li {height: 415px}
	.locator .locations .location {padding: 0px 20px 0px 90px; height: 33.333%}
	.locator .locations .location:hover {background: #eee}
	.locator .location-details-wrapper .location {padding: 30px 10px 30px 60px; width: 300px}
	.locator .row, .locator div[class*="col-"] {padding: 0px}
	.locator .row {margin-left: -75px;margin-top: 40px; margin-right: -30px;}
	.locator .row .col-12:nth-child(1) {order: 2; max-width: calc(100% - 15px);margin-left: -15px}
	.locator .row .col-12:nth-child(2) {display:none; order: 1; max-width: 350px;}
	.locator nav {padding: 10px;margin: 0px 20px 0px 90px; position: absolute; max-width:none; width:240px; left: 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 {width: 750px;margin-left: -35px}
	.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:90px 30px 0px 80px}
	.locator.show-details .row .col-12:nth-child(2) {display:block;}
	.locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 380px);margin:0px}
	.locator select.form-control-custom {width: 290px}
     .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; }

	/* Admin */
	.admin .home .cms-contentmenu:first-child {margin-top: 20px !important;}
	.admin .home .cms-contentmenu {margin-left: 340px;}

     /* Become a Sunoco Fuel Parnter, Partner with Sunoco, Locator Detail */
     .become-a-fuel-partner .masthead-wrapper img, .partner-with-sunoco .masthead-wrapper img, .find-a-station .masthead-wrapper img {object-position: center bottom}

     /* Alert Wrapper */
     .alert-wrapper {position: fixed; top: 0px; left: 0px; width: 100%; }

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

@media (min-width:1026px) and (min-height: 980px) {
     .header-wrapper::after {border-width: 125vh 100px 0 0;border-color: #fff transparent transparent;}
}

@media (min-width: 1026px) and (min-height:850px) {	
	.header-wrapper .mainmenu li {height: 75px}
	.header-wrapper .submenu {position: fixed; bottom: 55px; }
}

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

@media (min-width: 1251px) {	
	/* Header */
	.header-wrapper {width: 280px; padding: 30px 0px 0px 80px}
	.header-wrapper::after {right: -100px}

	/* Homepage Promos */
	.home .cms-slideshow .caption, .home .cms-slideshow .btn-video {left: 400px;}
     .home .cms-slideshow .caption {max-width: calc(100% - 435px); }

		 .home .cms-slideshow .gorewards-promo-inner, .home .cms-slideshow .ultratech-promo-inner {margin-left: 350px}
		 .home .cms-slideshow .ultratech-promo-inner .pump {width: 30vw}

     .home .cms-slideshow .locator-promo-inner {margin-left: 450px}

		 .home .cms-slideshow .citi-header {padding:25px 0px 0px 110px;}

	/* Masthead */
	.masthead-wrapper .caption, .masthead-wrapper > h1 {margin: 0px 0px 0px 435px;width: calc(100% - 435px); }
    .masthead-wrapper .p {display:block}

	/* Content */
	.content-wrapper {padding-left: 380px;}

	/* Form Modal */
	.modal-form-body {padding-left: 550px}
	.modal-form-open .modal-form {-webkit-transform: translateX(calc(0% - 150px)); -ms-transform: translateX(calc(0% - 150px)); transform: translateX(calc(0% - 150px));}

	/* Locator */
	.locator .row .col-12:nth-child(1) { max-width: calc(100% - 15px);margin-left: -15px;}
	.locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 550px);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}

     /* Quality Fuels */
     .quality-fuels-nav-fixed-top .quality-fuels-hub-nav {left: 450px; width:calc(100% - 370px)}
     .quality-fuels-hub-cta {margin-left: 300px;}
}

@media (min-width: 1400px) {
     /* Become a Sunoco Fuel Parnter, Partner with Sunoco, Locator Detail */
     .become-a-fuel-partner .masthead-wrapper img, .partner-with-sunoco .masthead-wrapper img, .find-a-station .masthead-wrapper img {object-position: center 90%}
     
     /* Homepage Promos */
     .home .cms-slideshow .locator-promo .slogan {max-width:70%}
     .home .cms-slideshow .locator-promo .sign {width: 35%;}
}

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

@media (min-width: 1600px) {
     /* Become a Sunoco Fuel Parnter, Partner with Sunoco, Locator Detail */
     .become-a-fuel-partner .masthead-wrapper img, .partner-with-sunoco .masthead-wrapper img, .find-a-station .masthead-wrapper img {object-position: center 70%}

     /* Quality Fuels */
     .quality-fuels-hub-cta {min-height: 400px}
  
     /* Homepage Promos */
     .home .cms-slideshow .ultratech-promo-inner {max-width: 1200px}
     .home .cms-slideshow .ultratech-promo-inner .slogan {max-width: 35vw}
     .home .cms-slideshow .ultratech-promo-inner .pump {bottom: 45%; width: 33vw}
     .home .cms-slideshow .gorewards-promo-inner {max-width: 1100px;}
    
     .home .cms-slideshow .locator-promo .slogan {max-width:80%}
     .home .cms-slideshow .locator-promo .sign {width: 35%;}

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

@media (min-width: 1900px) {
     /* Homepage Promos */
     .home .cms-slideshow .gorewards-promo-inner .phone {right: 150px; width: 45vh}
}

@media (min-width: 2160px) {
     /* Homepage Promos */
     .home .cms-slideshow .ultratech-promo-inner {max-width: 1400px}
     .home .cms-slideshow .gorewards-promo-inner {max-width: none;}
     .home .cms-slideshow .gorewards-promo-inner .phone {right: 100px; width: 38vh}

     .home .cms-slideshow .locator-promo .slogan {max-width:none}
     .home .cms-slideshow .locator-promo-inner {margin-left: 500px}
     .home .cms-slideshow .locator-promo .sign {width:70%;max-width:850px; right: 75px}
}

@media (min-width: 992px) and (max-height:650px) {	
	/* Homepage Promos */
	.home .cms-slideshow .locator-promo .slogan {max-width:none; max-height:50vh}
	.home .cms-slideshow .locator-promo .sign {width: auto; max-height: 70vh}

	.home .cms-slideshow .gorewards-promo-inner {padding: 7.5vw 10vw 0 5vw}
}

@media (min-width: 992px) and (max-height:730px) {	
	/* Homepage Promos */
.home .cms-slideshow .citi-header {max-width: 600px; padding: 40px 0px 0px 0px;}
.home .cms-slideshow .citi-promo {display:flex;align-items: center;justify-content: center;}
}

@media (min-width: 992px) and (max-height:630px) {	
	/* Homepage Promos */
.home .cms-slideshow .citi-header {max-width: 400px; }
}

@media (min-width: 992px) and (max-height:530px) {	
	/* Homepage Promos */
.home .cms-slideshow .citi-header {max-width: 300px; }
}

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