/* ==========================================================================
   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-family: "Roboto",sans-serif;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;font-style:italic}
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-green {color:#00a160}
.text-yellow {color:#ffdf00;}
p, small {font-weight:300;}
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;font-family: "Roboto",sans-serif;text-transform: none; display:block}

/* Links */
a {color: #185487;text-decoration:underline;}
.content p a:not(.btn):not(.arrow-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 {font-size: 18px;font-family: "Roboto Condensed",sans-serif;position: relative;text-decoration:none;color: #4d4d4f;font-weight:700;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:hover::after, .arrow-link:focus::after {animation-name: arrow-link;animation-duration: 1s;animation-timing-function: ease-in-out;animation-iteration-count: 1}
@-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)}
 }
 
/* 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;}
	.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}

/* 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-30 {height: 30px}

/* 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: 35px; margin-bottom: 35px;}

/* Grid */
.row:not(.no-gutters) {margin-left: -30px; margin-right: -30px;}
.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}

/* 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;}
 	.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;font-family: "Roboto",sans-serif;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 */
.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:1}
	.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 Citi Promo */
	.home .cms-slideshow .citi-promo {background: #fff;height: 100%}
	.home .cms-slideshow .citi-promo picture, .home .cms-slideshow .citi-promo img {max-width: 100%; width: unset; height: unset; position:relative; left: unset; top: unset; object-fit:unset; object-position: unset;}
	.home .cms-slideshow .citi-promo-inner {position: absolute; left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
	 
/* 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; position: absolute; left: 15px; padding-right: 30px; z-index:1;color:#fff}
	.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}

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

/* Grocery rewards */
.grocery-rewards {}
     .grocery-rewards .btn-toggle-visibility {position: relative;font-size: 14px; padding: 0px}
     .grocery-rewards .btn-toggle-visibility p {margin: 0px}
	.grocery-rewards .btn-toggle-visibility span {color: #999}
	.grocery-rewards .btn-toggle-visibility.active::after {content: "";position: relative;;width: 0;height: 0;border: 45px solid transparent;border-bottom-color: #4d4d4f;border-top: 0;display:block;margin: -15px auto -1px auto}
	.grocery-rewards .btn-toggle-visibility.active span {color: #fff}
	.grocery-rewards .btn-toggle-visibility.active img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
	.grocery-rewards .more-info {max-width:none; flex:none; color:#fff; background-color: #4d4d4f;  padding: 50px 50px 30px 50px;position:relative;}
	.grocery-rewards .more-info::before {content: "";background: #4d4d4f;width: 100vw;position: absolute;top: 0px;left: -999px;height: 100%;width: 9999px;}
	.grocery-rewards .more-info h3, .grocery-rewards .more-info a, .grocery-rewards .more-info a:hover, .grocery-rewards .more-info a:focus {color: #fff}
	.grocery-rewards .more-info .btn-close {height:30px;width:30px;position:absolute;top: 15px;right: 30px;}
	.grocery-rewards .more-info .btn-close::before, .grocery-rewards .more-info .btn-close::after {content:"";position:absolute;height:1px;width:100%;top:50%;left:0px;margin-top:1px;background:#fff}
	.grocery-rewards .more-info .btn-close::before {-webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
	.grocery-rewards .more-info .btn-close::after {-webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}

/* 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: 5px 0px 0px 10px;}
	.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 {opacity: .5; pointer-events:none}
     
/* Contact us */
.contact-us .masthead-wrapper img {object-position: center calc(100% + 50px);}

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

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

/* 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 .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%}
.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 20px; top: 16px;position: relative;z-index: 1; font-size: 12px; padding: 0px 10px}
	.locator select { -webkit-appearance: none;-moz-appearance: none;appearance: none;background: url(/img/caret-grey.png) no-repeat 90% center; max-width: 350px}
	.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: 130px;}
	.locator .filters-wrapper .custom-control-inline {float:left}
	.locator .form-control.error {border: 1px solid #e32e3d; box-shadow:none}
	/* Map */
	.locator #map {background:#f1f1f1}
	.locator .marker-label {color: white; font-size: 16px;font-family: "Roboto",sans-serif;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}
	.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: 0px; left: 0px;}
	.locator .locations .location address a {display:none}
	.locator .no-results {max-width: 400px; margin:60px auto}
	.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 {width: 400px; margin:auto; position:relative;padding: 20px}
	.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; top: 10px; 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:400;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;position:relative;}
	.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%);}

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

   .alert-wrapper {background: #185487; color: #fff; font-size: 15px;line-height: 1.2; position: fixed; top: 0px; left: 0px; width: 100%; text-align:center;z-index:99;}
   .alert-wrapper .alert-slideshow {position: absolute; left: 50px; right: 50px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)}
   .alert-wrapper .slick-controls {left: 0px; right: 0px; margin: auto; width: 100%; position: absolute; top: 50%; margin-top: -18px;}
   .alert-wrapper .slick-slide {height:auto;margin: 0px}  /* Removes margin on cms-slideshow slides */
   .alert-wrapper .slick-prev, .alert-wrapper .slick-next {background:none;border:none;font-size: 25px;position: absolute; top: 0px}
   .alert-wrapper .slick-prev {left: 45px;}
   .alert-wrapper .slick-next {right: 45px;}  
   .alert-wrapper .btn-closealert {padding: 2px; font-size: 20px;  right: 5px;position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);color: #fff;background:none;border:none} 
   .alert-wrapper .btn-closealert:hover, .alert-wrapper .btn-closealert:focus {color: #fff}
   .alert-wrapper .badge {background: #fff; color: #4d4d4f; font-size: 12px; left: 10px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
   .alert-wrapper .item *:first-child {margin: 0px;}
   .alert-wrapper a {color:#fff; text-decoration: none;}

/* ==========================================================================
   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}
	h2 {font-size: 30px}
	h3.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 */
	.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 Citi Promo */
	.home .cms-slideshow .citi-promo-inner {text-align:center; top: 50%;left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; text-align:center}
	.home .cms-slideshow .citi-promo-inner img {width:65%;margin:auto;}
     
	/* 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 {width: calc(100% - 30px);top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}

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

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

	/* Grocery Rewards */
	.grocery-rewards .more-info {margin: 0px 0px 15px -10px;width: calc(100vw - 15px);}

	/* 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: 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 .loading { margin:100px auto;display:block}

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

	/* Alert */
	.alert-open {padding-top: 70px}
	.alert-wrapper {height: 70px; }

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

@media (min-width: 360px) {	
     /* Homepage Citi Promo */
     .home .cms-slideshow .citi-promo-inner img {width:75%;max-width: 500px}
}

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

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

      /* Homepage Citi Promo */
      .home .cms-slideshow .citi-promo-inner {top: 55%}
      .home .cms-slideshow .citi-promo-inner img {width: 45vh}
}

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

@media (min-width: 500px) {	
	/* Homepage */
	.home .cms-slideshow .caption {max-width: 90%;}
	

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

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

@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}
	h2 {font-size: 48px}
	h3.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 */
	.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;";}
     
     /* Homepage Citi Promo */
     .home .cms-slideshow .citi-promo-inner {text-align:left; margin: auto; width: 90%;max-width: 1400px; top: 50%}
     .home .cms-slideshow .citi-promo-inner img {margin: 0px; width: 100%;max-width: 100%}

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

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

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

	/* Racing */
	.img-partner {max-width: 100%}

	/* Grocery Rewards */
	.grocery-rewards .more-info {margin: 0px 0px 0px -15px;}

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

	/* Alert */
	.alert-open {padding-top: 50px}
	.alert-wrapper {height: 50px; }

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

@media (min-width: 768px) and (max-height: 768px) and (orientation: landscape) {	
     /* Homepage Citi Promo */
     .home .cms-slideshow .citi-promo-inner img {max-height: 60vh; width: auto}
}

@media (min-width: 992px) {	
	/* About Elements */
	.about-us .caption {top: 55%;}
	.about-us .img-slanted {height: 600px}

	/* Grocery Rewards */
	.grocery-rewards .more-info {margin: 0px 0px 0px -25px;width: calc(100vw - 10px);}

	/* 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; 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: -75px;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: cover;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 */
	.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%);}

	/* Homepage Citi Promo */
     .home .cms-slideshow .citi-promo-inner {padding-left: 300px;}
     
	/* Masthead */
	.masthead-wrapper {margin-bottom:0px}
	.masthead-wrapper::after {top: calc(100% - 199px);border-width: 200px 100vw 0 0;}
	.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 {margin-left: 320px }

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

	/* Grocery Rewards */
	.grocery-rewards .more-info {margin: 0px 0px 0px -60px;width: calc(100vw - 290px);}

	/* 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 .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: 40px 90px 40px 80px}
	.locator .row, .locator div[class*="col-"] {padding: 0px}
	.locator .row {margin-left: -75px;margin-top: 40px}
	.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;box-shadow:5px 0 14px 1px rgba(99,100,102,.25);}
	.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: 60px;}
	.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: 40px}
	.locator .filters-wrapper .custom-control-inline {margin: 0px 5px;width:auto;float:none}
	.locator form .form-group:nth-child(1), .locator form .form-group:nth-child(2) {width: 50%;float:left;padding:0px 20px;}
	.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:140px 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}

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

}

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

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

	/* Homepage */
	.home .cms-slideshow .caption, .home .cms-slideshow .btn-video {left: 400px;}
     .home .cms-slideshow .caption {max-width: calc(100% - 435px); }
     
	/* Homepage Citi Promo */
     .home .cms-slideshow .citi-promo-inner {padding-left: 400px;}
     
	/* Masthead */
	.masthead-wrapper h1 {margin: 0px 0px 0px 435px;width: calc(100% - 435px); }

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

	/* Grocery Rewards */
	.grocery-rewards .more-info {margin:0px;width:100%}

	/* 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}
	.locator .btn-close-details {right: -51px;}
	.locator nav {width: 410px}

	/* Admin */
	.admin .home .cms-contentmenu {margin-left: 400px}
	.admin .cms-tool, .admin .cms-history, .admin .cms-history-detail {margin-left: 375px}
}

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