/* ========================================================================== Project: Sunoco Date: 04/29/2024 - File created Created by: Third Wave Digital (www.thirdwavedigital.com) ========================================================================== */ /* ========================================================================== CMS Site ========================================================================== */ html {scroll-behavior: smooth;overflow-x:hidden} :root { --body: #444; --light-red: #f0969d; --red: #E22E3E; --dark-red: #ac0313; --citi-red: #EF373E; --blue: #185487; --lighest-blue-grey: #F8F9FA; --light-blue-grey: #dee2e6; --blue-grey: #565658; --dark-blue: #0d3f69; --citi-blue: #033572; --green: #00a160; --stake-green: #95F363; --yellow: #ffdf00; --dark-yellow: #e1c500; --black: #000; --white: #fff; --grey: #999; --basic-grey: #ccc; --light-grey: #939393; --lighter-grey: #ddd; --lightest-grey: #f1f1f1; --dark-grey: #666; --darker-grey: #444; --darkest-grey: #2A2A2A; } /* Main Wrapper */ .page-wrapper {overflow:hidden} /* Text */ body {color: var(--body);} h1, .h1, h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6 {font-family: "Roboto Condensed",sans-serif;color: var(--darkest-grey); font-weight: 700; line-height: 1.2; } .h3-with-date {font-weight: 700;color: var(--blue);} .h3-with-date {text-transform: uppercase;margin-bottom: 15px;} .h3-date {line-height: .71;letter-spacing: -2.3px;color: var(--light-grey);font-weight: 700;font-style: italic; text-transform: none; display:block} .text-red {color: var(--red)} .text-blue {color: var(--blue)} .text-citi-blue {color: var(--citi-blue)} .text-green {color:var(--green)} .text-yellow {color:var(--yellow);} .text-dark {color: var(--body) !important} .text-default {font-size: 1rem; font-weight: normal; line-height: 1.5rem; text-transform: none} .text-body {color: var(--body)} .text-transform-none {text-transform: none;} .font-weight-medium {font-weight: 600} .font-roboto-condensed {font-family: "Roboto Condensed",sans-serif;} .text-clamp-1 {text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .text-clamp-2 {text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .leading-tight {line-height: 1.3} /* Links */ a {color: var(--blue);text-decoration: underline;} a:hover, a:focus {text-decoration:none;color: var(--dark-blue)} .arrow-link, .directions-link {font-size: 18px;font-family: "Roboto Condensed",sans-serif;position: relative;text-decoration:none;color: var(--body);font-weight:700 !important;white-space:nowrap; transition-duration: .3s;} .arrow-link::after {content: "";height: 18px;width: 55px;background: url(/img/icon-arrow.png) no-repeat;background-size: cover;margin-left: 10px;top: 3px;display:inline-block; position:relative;} .arrow-link.text-white::after {background: url(/img/icon-arrow-yellow.png) no-repeat;background-size: cover} .arrow-link:hover::after, .arrow-link:focus::after {animation-name: arrow-link;animation-duration: 1s;animation-timing-function: ease;animation-iteration-count: 1} .directions-link::before {content: '\f3c5'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 7px;color: var(--red)} @-webkit-keyframes arrow-link { 16.65% {transform: translateX(6px)} 33.3% {transform: translateX(-5px)} 49.95% {transform: translateX(4px)} 66.6% {transform: translateX(-2px)} 83.25% {transform: translateX(1px)} to {transform: translateX(0)} } @-ms-keyframes arrow-link { 16.65% {transform: translateX(6px)} 33.3% {transform: translateX(-5px)} 49.95% {transform: translateX(4px)} 66.6% {transform: translateX(-2px)} 83.25% {transform: translateX(1px)} to {transform: translateX(0)} } @keyframes arrow-link { 16.65% {transform: translateX(6px)} 33.3% {transform: translateX(-5px)} 49.95% {transform: translateX(4px)} 66.6% {transform: translateX(-2px)} 83.25% {transform: translateX(1px)} to {transform: translateX(0)} } .muted-link, .dark-link {color: var(--light-grey); text-decoration: none;position: relative; font-family: "Roboto Condensed",sans-serif; font-weight: 700;} .muted-link::after, .dark-link::after {content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 7px;} .muted-link {color: var(--light-grey);text-transform: uppercase;} .dark-link {color: var(--blue-grey);} .lines-on-sides {position: relative;} /* This class is placed on the parent

*/ .lines-on-sides::before, .lines-on-sides::after {content:""; width: 100%; z-index: 0; height: 3px; background: var(--red);position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .lines-on-sides.disabled::before, .lines-on-sides.disabled::after {background:var(--light-red)} .lines-on-sides::before {left: 0px;} .lines-on-sides::after {right: 0px} .lines-on-sides a {position: relative; z-index:1; outline: 15px solid var(--white)} /* Buttons */ .btn-red, .btn-yellow, .btn-blue, .btn-blue-border, .btn-white, .btn-white-border, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn), .btn-darkest-grey, form[name="frmSearch"] .btn-primary {font-family: "Roboto Condensed",sans-serif; font-weight: 700; font-size: .813rem; white-space: normal; line-height: 1; padding:10px 25px; border-radius: 30px; text-transform: uppercase; color: var(--white);text-decoration:none; transition: all 250ms ease;} .btn-red,form[name="frmSearch"] .btn-primary {background: var(--red); color: var(--white); border:none } .btn-red:hover, .btn-red:focus,form[name="frmSearch"] .btn-primary:hover,form[name="frmSearch"] .btn-primary:focus {background:var(--dark-red); color: var(--white)} .btn-yellow {background: var(--yellow); color: var(--blue)} .btn-yellow:hover, .btn-yellow:focus {background: var(--dark-yellow); color:var(--blue)} .btn-blue {background: var(--blue); color: var(--white);border: 1.5px solid var(--blue);} .btn-blue:hover, .btn-blue:focus {background: var(--dark-blue); color: var(--white)} .btn-blue-border {background: var(--white); border: 1.5px solid var(--blue); color: var(--blue)} .btn-blue-border:hover, .btn-blue-border:focus {background: none; border-color: var(--red); color: var(--red)} .btn-darkest-grey {background: var(--darkest-grey); color: var(--white);} .btn-darkest-grey:hover, .btn-darkest-grey:focus {background: var(--black); color: var(--white)} .btn-white {background: var(--white); color: var(--blue);box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,.3);} .btn-white:hover, .btn-white:focus {background: var(--white); color: var(--red)} .btn-white-border {background: none; border: 1.5px solid var(--white); color: var(--white)} .btn-white-border:hover, .btn-white-border:focus {background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white)} .btn-link {color: var(--blue); padding:0px;line-height:1.1;font-weight:500;} .btn-link:hover, .btn-link:focus {text-decoration: none;} .btn-link-showmore {color: var(--blue); font-weight: 700; display: block; position: relative;} .btn-link-showmore::after {content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin-left: 2.5px; transition: transform .25s;} .btn-link-showmore[aria-expanded="true"]::after {transform: rotate(180deg);} .btn-link-showmore:hover, .btn-link-showmore:focus {text-decoration: none;} .btn-sm {font-size: .75rem; padding: 7px 15px} .btn-md {font-size: .875rem; padding: 10px 20px} .btn-lg {font-size: 1.125rem; padding: 10px 40px} .arrow-icon {height: 12px;width: 12px;margin-top: 5px; clear: both; border-style: solid;border-color: var(--blue);border-width: 0 2px 2px 0;position: relative;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg); transition: transform 150ms ease 250ms; left: 50%; margin-left: -6px;} .btn-toggle-video {position: absolute;color: var(--white); z-index: 1; bottom: 15px; right: 15px; background: rgba(0,0,0,.9);border-radius: 50%; width: 25px; height: 25px; font-size: .625rem;opacity: .5; transition: 200ms opacity ease;} .btn-toggle-video:hover, .btn-toggle-video:focus {opacity: 1} /* Backgrounds */ .bg-yellow {background: var(--yellow);} .bg-blue {background: var(--blue)} .bg-citi-blue {background: var(--citi-blue)} .bg-dark-blue {background: var(--dark-blue)} .bg-black {background: var(--black)} .bg-citi-red {background: var(--citi-red)} .bg-light-grey {background: var(--lighest-blue-grey)} .bg-dark-grey {background: var(--dark-grey)} .bg-darkest-grey {background: var(--darkest-grey)} .bg-darker-grey {background: var(--body)} .bg-lightest-blue-grey {background: var(--lighest-blue-grey)} .bg-white-80 {background: rgba(255,255,255,.8)} .bg-blue-90 {background:rgba(24,84,135,.9)} .bg-bluelines-horizontal {background: url(/img/bg-bluelines-horizontal.webp); background-size: cover} .bg-bluelines-slanted {background: url(/img/bg-bluelines-slanted.webp); background-size: cover} .bg-img-offset {position: absolute; top: 50%; transform: translateY(-50%); left: 0px; width: 100%; z-index: -1; height: 60%} .bg-img-offset::after {content:""; display:block;background: rgba(24,84,135,.8); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0} .bg-img-offset img {width: 100%; height: 100%; object-fit: cover; position: relative; z-index: -1} .bg-blue-checkered-flag {background: url(/img/bg-blue-checkered-flag.webp) top right no-repeat var(--blue); background-size: cover} /* Indices */ .z-0 {z-index: 0} .z-1 {z-index: 1} /* Overlays & Gradients */ .gradient-dark-left {position: relative;} .gradient-dark-left::after {content:""; display:block; z-index: -1; position: absolute; top: 0px; left: 0px; height: 100%;} .gradient-dark-left-md p:not(.bg-white p) {margin: 0px} .gradient-blue {position: relative;} .gradient-blue::after {content:""; position: absolute; left: 0px; right: 0px; height: 50%; z-index: -1;} .gradient-blue-top::after {top: 0px; background: linear-gradient(180deg, rgba(24,84,135) 0%, rgba(19,67,108,0.8) 20%, rgba(0,0,0,0) 100%);} .gradient-blue-bottom::after {bottom: 0px; background: linear-gradient(0deg, rgba(24,84,135,1) 0%, rgba(19,67,108,0.08) 80%, rgba(255,255,255,0) 100%);} .overlay-blue {position: relative; overflow:hidden;} .overlay-blue::after {content:""; background: rgba(24,84,135,.9); position: absolute; z-index: 0; left: 0px; right: 0px; top: 0px; bottom: 0px;} .overlay-blue [class*="container"] {position: relative; z-index: 1;} /* Images */ img {max-width: 100%; height: auto;} p:has(img:only-child) {margin:0px} .img-80 {width: 80px;} .img-100 {width: 100px;} .img-130 {width: 130px;} .img-180 {width: 180px;} .img-230 {width: 230px} .img-280 {width: 280px} .img-380 {width: 100%; max-width: 380px} .img-height-20 {height: 20px} .img-height-30 {height: 30px} .img-height-40 {height: 40px} .img-height-50 {height: 50px} .img-height-60 {height: 60px} .img-height-70 {height: 70px} .img-height-80 {height: 80px} .img-width-75p {width: 75%} .object-fit-image {min-height: 200px} .object-fit-image img {object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute;top: 0px; left: 0px;z-index:0;} .object-fit-top-left img {object-position: top left; } .object-fit-center-center img {object-position: center center; } .img-fit img {width: 100%; height: 100%; object-fit:cover;} .img-fit video {object-fit: cover; height: 100%; width: 100%;position: relative; z-index: 0} .img-fit:not(.img-fit-absolute) p {margin: 0px; display:inline} .img-fit-absolute {position: relative} .img-fit-absolute img {position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%;} .img-fit-top-center img {object-position: top center} .img-fit-bottom-center img {object-position: bottom center;} .img-fit-center-center img {object-position: center center;} .img-fit-right-center img {object-position: right center;} .img-bg {position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover;} .aspect-ratio-1-1 {object-fit: cover; aspect-ratio: 1 / 1} /* Spacing */ .mb-6 {margin-bottom: 3.5rem} .mt-6 {margin-top: 3.5rem} .my-6 {margin-top: 3.5rem;margin-bottom: 3.5rem} .mb-7 {margin-bottom: 5rem} .mt-7 {margin-top: 5rem} .my-7 {margin-top: 5rem;margin-bottom: 5rem} /* Scaling */ .scale-05 {transform: scale(.5)} .scale-06 {transform: scale(.6)} .scale-07 {transform: scale(.7)} .scale-08 {transform: scale(.8)} .scale-09 {transform: scale(.9)} .scale-top-left {transform-origin: top left} .scale-center-center {transform-origin: center center;} /* Lists */ .arrow-list {list-style:none;padding-left: 20px;} .arrow-list li {position:relative;display:table-row} .arrow-list li::before {content: "> ";font-size: 14px;color: var(--red);font-weight: 500; padding-right: 15px;display:table-cell} .bullet-list {list-style:none} .bullet-list li::before {content: "\2022"; color: var(--red); display:inline-block; width: 1rem; margin-left: -1rem} .list-redchecks, .list-redchecks-square {list-style:none; padding: 0px;} .list-redchecks li, .list-redchecks-square li {position: relative; padding-left: 25px;margin-bottom: 15px;} .list-redchecks li::before, .list-redchecks-square li::before {font-family: "Font Awesome 5 Free";color: var(--red);position: absolute; top: 2px; left: 0px} .list-redchecks-square li::before {content: "\f14a";font-weight: 400; } .list-redchecks li::before {content: "\f00c";font-weight: 900; } /* Rules */ hr.blue-stripe {border-top:none; height: 10px; background: url(/img/bg-stripe-blue.svg) repeat-x; background-size: contain;width: 100%;} hr.grey-rounded {width: 80px; margin-left: auto; margin-right: auto; height: 4px; border-radius:4px; background: var(--grey)} /* Accordions */ .cms-accordion .card {background:none; border-radius: 0px; border: none;} .cms-accordion .card-header {transition: color 250ms ease; border-left: 3px solid var(--red);position: relative;border-radius: 0px; background:none;border:none; padding: 20px 50px 20px 15px!important;color: var(--body); font-weight: 700;position: relative;} .cms-accordion .card-header::before {content:""; background: var(--red); width: 3px; height: 20px; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; display:block} .cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none; cursor: pointer} .cms-accordion .card-header::after {transition: transform 250ms ease; background: url(/img/icon-plus-red.svg) center center no-repeat;background-size: 100% 100%; width: 20px; height: 20px; content:""; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);} .cms-accordion .card-header[aria-expanded=true] { color: var(--red); border-bottom: none} .cms-accordion .card-header[aria-expanded=true]::after {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); } .cms-accordion .card-body {padding: 0px; margin: 15px 0px} .cms-accordion .card-body *:last-child {margin-bottom: 0px} .cms-accordion .collapsing {transition-duration: 250ms; transition-timing-function: ease-in-out;} /* Tabs */ .cms-tabs .nav {margin-bottom: 0px !important} .cms-tabs .nav p:hover {cursor: pointer} .cms-tabs .nav-pills .nav-link {background: var(--blue); color: var(--white); font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px} .cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: var(--red);color: var(--body); } .cms-tabs .tab-content {background: var(--lightest-grey); padding: 1.5rem;} .cms-tabs .tab-content *:last-child {margin-bottom: 0px} /* Heros */ .hero {position: relative; z-index: 0; display: flex; align-items:center; text-align:center; flex-direction: row; align-items:center} .hero h1, .hero .h1 {font-family: "Anton"; font-weight: 400; text-transform: uppercase;line-height: 1.1; letter-spacing: 4px} .hero sup {font-size: .2em; vertical-align: top; top: .9em;} .hero-80vh {position: relative;} .hero-80vh::before, .hero-80vh::after {content:""; position: absolute; top: 0px; left: 0px; width: 100%;} .hero-80vh::before {height: 70%; z-index: 1; background: linear-gradient(180deg, rgba(24,84,135) 0%, rgba(19,67,108,0.8) 20%, rgba(0,0,0,0) 100%);} .hero-80vh.has-overlay-grid::after { height: 100%; z-index: 0; background: url(/img/overlay-grid.png)} .hero-80vh .container {z-index: 2;} .hero-80vh video, .hero-80vh .hero-img, .hero video {position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; object-fit:cover} .hero-lg .container, .hero-md .container { display:flex; flex-direction: column; align-items: center;justify-content: center;} .hero-lg ul {display: flex; justify-content:space-between;max-width: 700px; margin: auto; position: absolute; bottom:10px; left: 0px; right: 0px; list-style:none; padding: 0px; color: var(--white); font-style: italic; font-weight: bold; font-family: "Roboto Condensed",sans-serif; text-transform: uppercase; font-size: .813rem;text-align:left} .hero-lg li {display: flex; align-items:center} .hero-lg li .rounded-circle {background: rgba(0,0,0,.25); width: 40px; height: 40px; display: inline-flex; align-items:center; justify-content:center} .hero-lg .hero-img, .hero-md .hero-img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -1;} .hero-lg .hero-badge {position: absolute; bottom: -50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%)} .hero .btn-find-a-station {text-shadow: rgba(0,0,0,1) 0px 0 15px;font-family: "Roboto Condensed",sans-serif; letter-spacing: .25px; text-transform: uppercase; position: absolute; z-index: 1; bottom: 50px; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);} .hero .btn-find-a-station::after {content:"";transition: width 250ms ease; position: absolute; bottom: -5px; left: 0px; right: 0px; margin: auto; height: 2.5px; width: 30px; background: var(--red)} .hero .btn-find-a-station a {color: var(--white); text-decoration: none; font-weight: 700;} .hero .btn-find-a-station:hover::after {width: 100%;} /* Interstitials */ .interstitial-wrapper {position: relative;z-index: 0; filter: drop-shadow(0 0 1rem rgba(0,0,0,.2));} .interstitial-slanted {clip-path: polygon(0 11%, 100% 0%, 100% 89%, 0% 100%);} .interstitial-slanted img {width: 100%} .interstitial-wrapper .container {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0} .interstitial-wrapper h3, .interstitial-wrapper a:not(.btn) {color: var(--white)} .interstitial-wrapper img {object-fit: cover;width: 100%;height: 100%; min-height: 350px;} /* Shadows */ .text-shadow-lg {text-shadow: rgba(0,0,0,.75) 0px 0 30px;} .box-shadow-offset .container:first-child {position: relative;} .box-shadow-offset .container:first-child::after {content:""; display:block; position: absolute; z-index: -1; bottom: 0px; left: 50px; right: 50px; height: 50px; box-shadow: 0px 20px 20px 0px rgba(0,0,0,.25);} .box-shadow-sm {box-shadow: 0 0 .5rem rgba(0,0,0,.15)} .box-shadow-md {box-shadow: 0 0 1rem rgba(0,0,0,.2)} .box-shadow-lg {box-shadow: 0 0 2rem rgba(0,0,0,.2)} /* Borders */ .border-bottom-stake-green {border-bottom: 4px solid var(--stake-green)} /* Scroll Margins */ .scrollmargin-top-90 {scroll-margin-top: 90px} .scrollmargin-top-120 {scroll-margin-top: 120px} .scrollmargin-top-140 {scroll-margin-top: 140px} /* ========================================================================== Main Layout ========================================================================== */ /* Skip */ .skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--red); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:700;font-size:14px;z-index:9999;text-decoration:underline} .skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white); background:var(--dark-red)} /* Header */ header { z-index: 99; text-transform: uppercase;font-family: "Roboto Condensed",sans-serif; position: fixed; top: 0px; left: 0px; width: 100%} header button[aria-expanded] {font-family: "Roboto Condensed",sans-serif;background:none; border:none; padding: 2px 3.5px;text-transform: uppercase;} header a {text-decoration: none;} .btn-toggle-offcanvas {border-radius: 0px; height: 36px;margin:0;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity;text-transform:none;color:inherit;border:0;} .hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;} .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3.5px;background-color:var(--body); right: 0px} .hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;} .hamburger-inner:after,.hamburger-inner:before{display:block;content:"";} .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;} .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.685,.19); bottom:-8px;} .btn-toggle-offcanvas.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)} .btn-toggle-offcanvas.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0; width: 100%;} .btn-toggle-offcanvas.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg);width: 100%;} /* Footer */ footer, footer hr {border-top: 1.5px solid var(--lighter-grey);} footer li:not(:last-child) {margin-bottom: 5px;} footer a {font-family: "Roboto Condensed",sans-serif;font-weight: 700;text-decoration: none;} footer sup {font-size: .5rem; top: -8px;margin-left: 2px} footer .bg-darker-grey a {color: var(--white);} /* About Us */ .about-us .h3 {font-weight: 700;color: var(--blue);} .about-us .h3 {text-transform:none;line-height: 1.6} .about-us div[class*="-wrapper"] {flex:none} .about-us .caption {position: absolute; left:20px; right:20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index:1;margin:auto;max-width: 760px} .about-us .caption p {font-weight:400} .about-us .caption .date {color: hsla(0,0%,80%,.6)} .about-us .img-slanted {max-width:none; position: relative;left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);z-index:0} .about-us .history-wrapper p:last-child {position: relative;} .about-us .motorsports-wrapper .bg-red {background: rgba(167,8,13,.87); margin-bottom: 25px;} .about-us .company-wrapper img {max-width: 280px} .about-us .giving-wrapper .cms-slideshow {text-align:center; width: auto;background-size: contain;margin: 0px auto 15px auto;border-style: solid;border-width: 27px;-o-border-image: url(/img/bg-border-stripe-blue.png) 27 round stretch;border-image: url(/img/bg-border-stripe-blue.png) 27 fill round stretch;max-width: 370px;max-height: 370px; padding: 20px} .about-us .giving-wrapper .cms-slideshow .slick-list {height: auto !important} /* Removes adaptiveHeight on cms-slideshow plugin */ .about-us .giving-wrapper .cms-slideshow .slick-slide {margin: 0px} /* Removes margin on cms-slideshow slides */ .about-us .giving-wrapper .cms-slideshow img {margin: 0px auto 15px auto;position: relative;} .about-us .giving-wrapper .cms-slideshow h4 {font-size: 48px;line-height: 45px;font-weight: 700;color: var(--blue)} .about-us .giving-wrapper .cms-slideshow p {font-size: 17px; font-weight:500} .about-us .giving-wrapper .slick-controls {position: absolute; bottom: -65px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);z-index:1;} .about-us .giving-wrapper .slick-controls .slick-dots {text-align: center;list-style:none; padding:0px; opacity:.7; position: relative;} .about-us .giving-wrapper .slick-controls .slick-dots li {display:inline-block} .about-us .giving-wrapper .slick-controls .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px} .about-us .giving-wrapper .slick-controls .slick-dots button {background:none; border: 1px solid var(--grey) ;border-radius: 50%;width: 18px;height: 18px; transition: background 250ms ease; opacity: 1; } .about-us .giving-wrapper .slick-controls .slick-dots .slick-active button, .about-us .giving-wrapper .slick-controls .slick-dots button:focus {background: var(--grey) } .about-us .health-wrapper hr {border-top: 1px solid var(--light-grey);} .about-us .health-wrapper h3 {margin-bottom: 15px} /* Credit cards */ .consumer-credit-cards .custom-control {padding: 0px; margin:0px 0px 5px 30px} .consumer-credit-cards .custom-control a {font-weight:500} .consumer-credit-cards .custom-control-label {font-size: 14px; padding: 4px 0px 0px 5px;} .consumer-credit-cards .custom-control-label::before {border-radius: .2rem; width: 1.4rem; height: 1.4rem;border: 1px solid var(--body)} .consumer-credit-cards .custom-control-label::after {width: 1.4rem; height: 1.4rem} .consumer-credit-cards .custom-control-input:checked~.custom-control-label::before {border-color: var(--green); background-color: var(--green)} .consumer-credit-cards a.disabled {background: var(--light-red); pointer-events:none; } /* Contact us */ .contact-us .form-text {line-height: 1.4} .contact-us .search-site {position: relative} .contact-us .search-dropdown {font-size: .75rem; padding: 10px; color:var(--body); position: absolute; z-index:2; top: calc(100% - 15px); left: 30px; width: calc(100% - 85px); opacity: 0; visibility: hidden;transition: all 500ms ease-out;-webkit-transform: translateY(-15px); -ms-transform: translateY(-15px);transform: translateY(-15px);} .contact-us .search-dropdown.active {opacity: 1; visibility: visible;-webkit-transform: translateY(0px); -ms-transform: translateY(0px);transform: translateY(0px);} .contact-us .search-dropdown li {border-bottom: 1px solid var(--lighter-grey);width: calc(100% - 5px);} .contact-us .search-dropdown li:last-child {border-bottom:none} .contact-us .search-dropdown li button {border: none; background: none; padding: 2.5px 5px; width: 100%; text-align:left; line-height: 1.4} .contact-us .search-dropdown li button:hover, .contact-us .search-dropdown li button:focus {background:var(--blue); color: var(--white)} .contact-us .search-dropdown a {color: var(--blue);display:block; padding: 10px; text-decoration: none;} .contact-us .search-dropdown a:hover, .contact-us .search-dropdown a:focus {background: var(--lightest-grey)} .contact-us .search-dropdown ul {max-height: 185px; overflow-y:auto;} .contact-us .search-dropdown ul::-webkit-scrollbar {-webkit-appearance: none;width:5px;background: var(--lightest-grey);} .contact-us .search-dropdown ul::-webkit-scrollbar-thumb {border-radius: 4px;background-color: var(--blue)} .contact-us .btn-close-search { position: absolute;top: 0px;right: -25px;background: var(--red);padding: 0px;width: 25px;height: 25px;border-radius: 0px;display:flex; align-items:center;justify-content: center;} .contact-us .btn-close-search span {color: var(--white); font-size: .875rem; -webkit-text-stroke: 1px var(--red)} .contact-us .btn-close-search:hover, .contact-us .btn-close-search:focus {background: var(--dark-red)} .contact-us .btn-close-search:hover span, .contact-us .btn-close-search:focus span {-webkit-text-stroke: 1px var(--dark-red)} .contact-us .datepicker {font-size: .8125rem} .contact-us .datepicker td {padding: 2px 10px} .contact-us .datepicker table tr td.active, .contact-us .datepicker table tr td.active.disabled, .contact-us .datepicker table tr td.active.disabled:hover, .contact-us .datepicker table tr td.active:hover {background:var(--blue)} /* Go Rewards */ .go-rewards h3 sup {top: -.75rem; margin-left: 3px; font-size: 50%} .go-rewards p sup {top: -.25rem; font-size: 50%} .go-rewards .qr-code {position: fixed; z-index: 1; line-height: 1.2} .go-rewards .video-wrapper {margin: auto; } .go-rewards .btn-video {font-size: .875rem; opacity: .5; color: var(--lighter-grey); border: none; padding: 5px; background: none; position: absolute; bottom: 0px; z-index: 1} .go-rewards .btn-video:hover, .go-rewards .btn-video:focus {opacity: 1} .go-rewards blockquote footer {border:none} /* Rewards */ .rewards h3 sup {top: -1rem; margin-left: 3px; font-size: 35%} /* Go Rewards FAQ */ .faq p sup {top: -.2rem; font-size: 50%;margin-left: 1px;} .faq .btn sup {top: .45rem;font-size: 50%;margin: 0px 5px 0px 1px;} /* Partner with Us */ .partner-form .ss-main{position:relative;display:inline-block;user-select:none;color:var(--dark-grey);width:100%;font-size: 16px;}.partner-form .ss-main .ss-single-selected{display:flex;cursor:pointer;width:100%;height:38px;padding:6px;border:1px solid var(--light-blue-grey);border-radius:0px;background-color:var(--white);outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-single-selected.ss-disabled{background-color:var(--light-blue-grey);cursor:not-allowed}.partner-form .ss-main .ss-single-selected.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.partner-form .ss-main .ss-single-selected.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.partner-form .ss-main .ss-single-selected .placeholder{flex:1 1 100%;text-align:left;width:calc(100% - 38px);line-height:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.partner-form .ss-main .ss-single-selected .placeholder,.partner-form .ss-main .ss-single-selected .placeholder *{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.partner-form .ss-main .ss-single-selected .placeholder *{width:auto}.partner-form .ss-main .ss-single-selected .placeholder .ss-disabled{color:var(--lighter-grey)}.partner-form .ss-main .ss-single-selected .ss-deselect{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px;font-weight:700}.partner-form .ss-main .ss-single-selected .ss-deselect.ss-hide{display:none}.partner-form .ss-main .ss-single-selected .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px}.partner-form .ss-main .ss-single-selected .ss-arrow span{border:solid var(--dark-grey);border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s,margin .2s}.partner-form .ss-main .ss-single-selected .ss-arrow span.arrow-up{transform:rotate(-135deg);margin:3px 0 0}.partner-form .ss-main .ss-single-selected .ss-arrow span.arrow-down{transform:rotate(45deg);margin:-3px 0 0}.partner-form .ss-main .ss-multi-selected{display:flex;flex-direction:row;cursor:pointer;min-height:38px;width:100%;padding:0 0 0 3px;border:1px solid var(--light-blue-grey);background-color:var(--white);outline:0;box-sizing:border-box;transition:background-color .2s}.partner-form .ss-main .ss-multi-selected.ss-disabled{background-color:var(--light-blue-grey);cursor:not-allowed}.partner-form .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:var(--dark-grey)}.partner-form .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.partner-form .ss-main .ss-multi-selected.ss-open-above{border-top-left-radius:0;border-top-right-radius:0}.partner-form .ss-main .ss-multi-selected.ss-open-below{border-bottom-left-radius:0;border-bottom-right-radius:0}.partner-form .ss-main .ss-multi-selected .ss-values{display:flex;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;width:calc(100% - 38px)}.partner-form .ss-main .ss-multi-selected .ss-values .ss-disabled{display:flex;padding:4px 5px;margin:2px 0;line-height:1em;align-items:center;width:100%;color:var(--dark-grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:0}}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value{display:flex;user-select:none;align-items:center;font-size:12px;padding:3px 5px;margin:3px 5px 3px 0;color:var(--white);background-color:var(--blue);animation-name:scaleIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value.ss-out{animation-name:scaleOut;animation-duration:.2s;animation-timing-function:ease-out}.partner-form .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{margin:0 0 0 5px;cursor:pointer}.partner-form .ss-main .ss-multi-selected .ss-add{display:flex;flex:0 1 3px;margin:13px 12px 0 5px}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus{display:flex;justify-content:center;align-items:center;background:var(--dark-grey);position:relative;height:10px;width:2px;transition:transform .2s}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus:after{background:var(--dark-grey);content:"";position:absolute;height:2px;width:10px;left:-4px;top:4px}.partner-form .ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{transform:rotate(45deg)}.partner-form .ss-content{position:absolute;width:100%;margin:-1px 0 0;box-sizing:border-box;border:1px solid var(--light-blue-grey);z-index:1010;background-color:var(--white);transform-origin:center top;transition:transform .2s,opacity .2s;opacity:0;transform:scaleY(0)}.partner-form .ss-content.ss-open{display:block;opacity:1;transform:scaleY(1)}.partner-form .ss-content .ss-search{display:flex;flex-direction:row;padding:8px 8px 6px}.partner-form .ss-content .ss-search.ss-hide,.partner-form .ss-content .ss-search.ss-hide input{height:0;opacity:0;padding:0;margin:0}.partner-form .ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0;height:38px;padding:6px 8px;margin:0;border:1px solid var(--light-blue-grey);border-radius:0;background-color:var(--white);outline:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-appearance:textfield}.partner-form .ss-content .ss-search input::placeholder{color:var(--grey);vertical-align:middle}.partner-form .ss-content .ss-search input:focus{box-shadow:0 0 5px var(--blue)}.partner-form .ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px;font-weight:700;flex:0 0 38px;height:38px;margin:0 0 0 8px;border:1px solid var(--light-blue-grey);border-radius:4px;box-sizing:border-box}.partner-form .ss-content .ss-addable{padding-top:0}.partner-form .ss-content .ss-list{max-height:200px;overflow-x:hidden;overflow-y:auto;text-align:left}.partner-form .ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:6px 10px;font-weight:700}.partner-form .ss-content .ss-list .ss-optgroup .ss-option{padding:6px 6px 6px 25px}.partner-form .ss-content .ss-list .ss-optgroup-label-selectable{cursor:pointer}.partner-form .ss-content .ss-list .ss-optgroup-label-selectable:hover{color:var(--white);background-color:var(--blue)}.partner-form .ss-content .ss-list .ss-option{padding:6px 10px;cursor:pointer;user-select:none}.partner-form .ss-content .ss-list .ss-option *{display:inline-block}.partner-form .ss-content .ss-list .ss-option.ss-highlighted,.partner-form .ss-content .ss-list .ss-option:hover{color:var(--white);background-color:var(--red)}.partner-form .ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:var(--lighter-grey);background-color:var(--white)}.partner-form .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:var(--dark-grey);background-color:rgba(88,151,251,.1)}.partner-form .ss-content .ss-list .ss-option.ss-hide{display:none}.partner-form .ss-content .ss-list .ss-option .ss-search-highlight{background-color:var(--white)} .partner-form .form-control, .partner-form .custom-select {border-radius: 0px} /* Hiring Form */ .hiring-form .form-check label.active {color: var(--body)} .hiring-hero {position: relative; z-index:1} .hiring-hero img {position: relative; z-index:0;} .hiring-hero .bonus {position: absolute; z-index:1} .hiring-hero button {border: none; background:none; padding: 0px} /* Email & MSDS Modal Forms */ .modal-form .modal-content {background: var(--blue-grey); width: 100%; overflow-x:hidden; color: var(--white);} .modal-form .btn-close-modal {position: absolute; z-index:1; right: 30px; top: 30px} .modal-form .btn-close-modal::before, .modal-form .btn-close-modal::after {content: "";position: absolute;height: 1px;width: 100%;top: 50%;left: 0;margin-top: -1px;background: var(--white);} .modal-form .btn-close-modal::before {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);} .modal-form .btn-close-modal::after {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);} .modal-form form {margin:auto; max-width: 768px;width: 90%} .modal-form .form-control {background-color:var(--blue-grey); border-radius:0px; border: 1px solid var(--white); color: var(--white); font-size: 14px;} .modal-form input, .modal-form select {height: 40px} .modal-form textarea {height:100px} .modal-form select { -webkit-appearance: none;-moz-appearance: none;appearance: none;background: url(/img/caret-white.png) no-repeat 90% center; max-width: 350px} .modal-form select[multiple] {max-width: 100%;height:200px;background:none; padding: 20px} .modal-form .form-control:focus, .modal-form option, .modal-form textarea {background-color: var(--blue-grey);color: var(--white);} .modal-form label {background-color: var(--blue-grey);color: var(--white);display: inline-block;margin: -6px 0px 6px 20px; top: 16px;position: relative;z-index: 1; font-size: 12px; padding: 0px 10px} .modal-form label.error {height: 0px; position: absolute; overflow:hidden;} .modal-form .custom-radio label {font-size:16px; font-family: "Roboto Condensed",sans-serif; padding: 0px} .modal-form .custom-radio .custom-control-label::before {top: .19rem; background: none; border: 2px solid var(--white)} .modal-form .custom-radio .custom-control-label::after {top: .2rem} .modal-form .btn-link {text-decoration: underline;font-size: 16px;} .modal-form address {font-weight:300} .modal-form .form-control.error {border: 1px solid var(--red); box-shadow:none} .modal-form .custom-radio .error + .custom-control-label::before {border: 2px solid var(--red)} .modal-form .datepicker {padding-left: 10px} /* Main Locator - Form */ .locator .input-group input { border: 1.5px solid var(--basic-grey); border-radius: 42.5px 0px 0px 42.5px; height: 42.5px;} .locator .input-group input::placeholder {color: var(--dark-grey)} .locator .input-group .btn {position: relative; padding: 0px 20px} .locator input, .locator select {font-family: "Roboto Condensed",sans-serif;font-weight:700; color: var(--blue); font-size:.913rem;} .locator .filters-row {max-width: 800px} .locator label { color: var(--blue); font-family: "Roboto Condensed",sans-serif;} .locator .custom-control-input:checked~.custom-control-label::before {border-color: var(--blue); background-color: var(--blue)} .locator .custom-switch .custom-control-label::after {background-color: var(--blue)} /* Main Locator - Form Selects */ .custom-select-container {position: relative; height: 42.5px; border: none;} .custom-select-container select {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 100%; padding: 0 42.5px 0 20px; background-color: transparent; border: 1.5px solid var(--basic-grey); border-radius: 45px; outline: none;cursor: pointer; color: var(--dark-grey);} .custom-select-container select::-ms-expand {display: none;} .custom-select-container::after {content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 20px; color: var(--basic-grey); position: absolute; top: 50%; right: 25px; transform: translateY(-50%); pointer-events: none;-webkit-text-stroke: 1px var(--white);} .custom-select-container option {color: var(--blue); background-color: var(--white);} /* Main Locator - Map */ .locator #map {background:var(--lightest-grey)} .locator .marker-label {color: var(--white); font-size: .8125rem; font-weight:500;z-index: 0; line-height: 1; text-align:center; margin-top: -5px; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow:hidden} .locator .jarallax {height: 300px;margin-top: -200px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);width: 100vw; z-index: -1} /* Main Locator - List */ .locator .locations {margin:auto} .locator .locations .location {border-bottom: 1px solid var(--lighter-grey); background:var(--white); border-left:none; border-right:none; border-top:none; width: 100%; transition: background .5s; text-align:left; position: relative;} .locator .locations .location 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;} .locator .locator-row .col-12:first-child { position: relative;} .locator .locator-row .col-12:first-child::before {content:""; background: url(/img/bg-map.png) top center no-repeat var(--lightest-grey); position: absolute; left: 0px; width: 100%; z-index: 1} .locator.has-results .locator-row .col-12:first-child::before {content:none} /* Main Locator - Locations */ .locator .location-details-wrapper {background: var(--white); box-shadow: 0px 14px 14px 0px rgba(99,100,102,.15); z-index: 1; width: 100%; position: absolute; top: 0px; left: 0px; height:0px; transition: all 250ms ease;overflow:hidden;} .locator .location-details-wrapper .location { margin:auto; position:relative;padding: 30px} .locator .location-details-wrapper .location div+a {margin-top: 10px;display:block; padding: 5px 0px 0px 40px} .locator .location-details-wrapper .location div+a::before { width: 30px; height: 30px;border-radius: 20px;position:absolute;top: 0px; left: 0px;} .locator .location-details-wrapper .location address a {margin: 5px 0px} .locator .location-details-wrapper .location p span {display:none} .locator .btn-close-details {background:none; border:none; border-radius: 0px; position: absolute; height:20px; width:20px} .locator .btn-close-details::before, .locator .btn-close-details::after { content:""; background: var(--dark-grey); position: absolute; width: 2px; height: 100%;top: 0px;left:10px} .locator .btn-close-details::before {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);} .locator .btn-close-details::after {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg); } /* Main Locator - Shared in list & details */ .locator .location p:first-child {font-family: "Roboto Condensed",sans-serif;font-size: 18px;font-weight:700;margin-bottom: 5px; } .locator .location address {line-height: 1.3;font-size: 14px; color: var(--body)} .locator .location p:last-child {font-weight:500} .locator .location div+a {font-weight:500;} .locator .location div+a::before {content:""; background:url(/img/location-arrow.png) -2px -2px no-repeat var(--red); background-size: cover;} /* Main Locator - Nav */ .locator nav {text-align:center;background:var(--white)} .locator nav p {font-size: 14px; color: var(--body);font-weight: 400;} .locator nav .locations-prev, .locator nav .locations-next {background:none;border:none;position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .locator nav .locations-prev {left: 0px;} .locator nav .locations-next {right:0px} .locator nav .locations-prev::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%);} /* Main Locator - Locator Detail */ .locator-detail #map.map-unavailable img {position: absolute; top: 0px; left: 30px; width: calc(100% - 60px); height: 100%; object-position: center center; object-fit: cover;} .locator-detail .cta-wrapper {background: url(/img/bg-gorewards-gradient-2.png) center center; background-size: 100% 100%;max-width: 990px;margin-left: auto !important;margin-right: auto !important;} .locator-detail .fuel-slideshow .slick-list, .locator-detail .nearby-slideshow .slick-list {overflow:visible} .locator-detail .nearby-slideshow .slick-track {display: flex; align-items:stretch} .locator-detail .nearby-slideshow .slick-slide {height:inherit} .locator-detail .nearby-slideshow a:not(.btn) {color: var(--body);} .locator-detail .text-default a, .locator-detail .nearby-slideshow h3 a {color: var(--body); pointer-events: none; text-decoration: none;} .locator-detail .btn[data-toggle] span {transition: transform 150ms ease;margin-left: 3px;} .locator-detail .btn[data-toggle].active span {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);} .locator-detail .slick-dots {list-style:none;padding: 0px; margin: 15px auto 0px auto; text-align:center} .locator-detail .slick-dots li {display:inline-block;margin: 0px 3px;padding: 0px;} .locator-detail .slick-dots button {background:var(--black);border: none; padding: 0px; opacity: .25; width: 6px; height: 6px; border-radius:50%;} .locator-detail .slick-dots .slick-active button {opacity: .5} .locator-detail .card a {text-decoration: none;} /* Main Locator - Cities & Locations */ .locator-list .bg-light form, .locator-locations .bg-light form {width: 100%; max-width: 400px} .locator-list .row li:first-letter, .locator-location .row li:first-letter {text-transform: capitalize;} .locator-city-state-zip .input-group {width: 100%; max-width: 300px;margin:auto} .locator-city-state-zip input {font-family: "Roboto Condensed",sans-serif;font-weight:700; color: var(--blue); font-size:.913rem;border: 1.5px solid var(--basic-grey); border-radius: 42.5px 0px 0px 42.5px; height: 42.5px;} .locator-city-state-zip input::placeholder {color: var(--dark-grey)} /* Content Hub */ .nav-contenthub {font-family: "Roboto Condensed",sans-serif; font-weight: 700; height: 50px;position: relative; line-height: 1.2; overflow-x:auto; overflow-y: hidden; background: var(--blue);} .nav-contenthub::-webkit-scrollbar {-webkit-appearance: none;height: 5px; } .nav-contenthub::-webkit-scrollbar-track {margin: 0px;background: var(--black); border-radius: 0px;} .nav-contenthub::-webkit-scrollbar-thumb {background: var(--light-blue-grey);border-radius: 0px;} .nav-contenthub::-webkit-scrollbar-thumb:hover {background: var(--red)} .nav-contenthub li:not(:last-child) {margin-right: -4px} .nav-contenthub a { padding: 0 1.5rem; color: var(--white); transition: background 250ms ease; text-decoration: none; height: 50px; display:block;display:flex; align-items:center} .nav-contenthub a:hover, .nav-contenthub a:focus {background: var(--dark-blue);} .nav-contenthub-fixedtop .nav-contenthub {position: fixed; left: 0px; width: 100%;z-index: 1; -webkit-animation: moveNav 300ms ease-out; animation: moveNav 300ms ease-out;} @-webkit-keyframes moveNav { 0% { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); } 100% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes moveNav { 0% { -webkit-transform: translateY(-60px); -ms-transform: translateY(-60px); transform: translateY(-60px); } 100% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } .article-logo {position: absolute;top: -15px;left: 25px;max-width: 100px;max-height: 50px;background: var(--white);box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .25);padding: 5px;} .article-teaser {transition: box-shadow 250ms ease;text-decoration: none;} .article-teaser:hover, .article-teaser:focus {box-shadow: 0 0 1rem rgba(0,0,0,.15)} .article-img {aspect-ratio: 16 / 9; object-fit: cover;} /* Card Pages */ .sunoco-business-fleet-card .row.justify-content-center, .sunoco-fleet-universal-card .row.justify-content-center {max-width: 810px; margin-left: auto !important;margin-right:auto !important} /* Custom Slideshow - Currently used on Go Rewards */ .custom-slideshow .slick-track {padding: 1rem 0; display: flex; align-items: stretch;} .custom-slideshow .slick-slide {height: auto;flex: 1; margin: 0 .4rem;} .custom-slideshow .slick-dots {text-align: center;list-style:none; padding:0px; opacity:.7; position: relative; display: flex; align-items:center; justify-content: center;} .custom-slideshow .slick-dots li {margin: 0px 3px;display: flex; align-items:center;} .custom-slideshow .slick-dots button {background: var(--grey); border:none; padding: 0px; border-radius: 50%;width:7px;height:7px; transition: background 250ms ease; opacity: 1; } .custom-slideshow .slick-dots .slick-active button {background: var(--darkest-grey); width: 10px; height: 10px;} .custom-slideshow .slick-dots button:focus, .custom-slideshow .slick-dots button:hover {background: var(--darkest-grey)} .custom-slideshow .slick-prev, .custom-slideshow .slick-next {position: absolute; z-index: 1; top: 50%; margin-top: -35px; background:none; border: none; padding:0px; width: 45px; height: 45px;} .custom-slideshow .slick-prev::after, .custom-slideshow .slick-next::after {content:""; opacity: .5; transition: opacity 250ms ease; display:block;border: 1px solid var(--darkest-grey);border-width: 0px 0px 2px 2px;width: 15px; height:15px; } .custom-slideshow .slick-prev::after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 18px;} .custom-slideshow .slick-next::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 11px;} /* Overview Slideshow */ .overview-slideshow {position: relative;} .overview-slideshow .slick-track {padding: 30px 0px;display: flex; align-items: stretch;} .overview-slideshow .slide {-webkit-transform: none; transform: none;height: inherit; transition: filter 250ms ease, margin 250ms ease;filter: drop-shadow(0 0 5px rgba(0,0,0,.15));} .overview-slideshow .slick-dots {position: absolute; bottom: -30px; left: 0px; right: 0px; text-align: center;list-style:none; padding:0px; } .overview-slideshow .slick-dots li { display: inline-block;} .overview-slideshow .slick-dots li:not(:last-child) {margin: 0px 5px 0px 0px} .overview-slideshow .slick-dots button {background: var(--light-grey); border: none; padding: 0px; border-radius: 50%;width: 6px;height: 6px; transition: background 250ms ease;} .overview-slideshow .slick-dots .slick-active button, .overview-slideshow .slick-dots button:focus {outline: none; background: var(--body); height: 8px; width: 8px; -webkit-transform: translateY(1px); transform: translateY(1px)} .overview-slideshow .slide-inner {transition: background 250ms ease;} .overview-slideshow .slide-clip {transition: clip-path 250ms ease;} .overview-slideshow .slide:not(.slick-center) .slide-inner {background: var(--lighest-blue-grey)} .overview-slideshow .slide:not(.slick-center) .slide-inner p {opacity: 0; transition: opacity 250ms ease;} .overview-slideshow .slick-center .slide-inner {background: var(--white)} .overview-slideshow .slick-center {filter: drop-shadow(0 0 15px rgba(0,0,0,.2))} .overview-slideshow .slick-center .slide-clip {clip-path: inset(0px 0px 0px 0px);} .overview-slideshow .slick-center .slide-inner p {opacity: 1} /* Find a Station Wrapper */ .find-a-station-wrapper .container {position: relative;z-index: 1} .find-a-station-wrapper .jarallax {height: 300px; margin-top: -200px} .find-a-station-wrapper form {max-width: 400px} .find-a-station-wrapper .form-control, .find-a-station-wrapper .custom-select {border-radius: 30px; background-color: var(--white); color: var(--dark-blue);font-weight: 500;} .find-a-station-wrapper .form-control::-webkit-input-placeholder {color:var(--dark-blue); } .find-a-station-wrapper .form-control::-msplaceholder {color:var(--dark-blue)} .find-a-station-wrapper .form-control::-placeholder {color:var(--dark-blue)} .find-a-station-wrapper .form-group-icon {position: relative;} .find-a-station-wrapper .form-group-icon input {padding-right: 30px} .find-a-station-wrapper .form-group-icon img {position: absolute; top: 50%; height: 18px; margin-top: -9px; right: 10px; z-index: 2} /* Image Scroll Wrapper */ .img-scroll-wrapper {position: relative;} .img-scroll-wrapper h2.text-md-white { position: relative; padding-left: 20px;} .img-scroll-wrapper h2.text-md-white::before {content:""; width: 3px; display:block; background: var(--yellow);position: absolute; left: 0px; top: 7.5px; bottom: 7.5px} /* Octane Calc Wrapper */ .octane-calculator-wrapper input, .octane-calculator-wrapper select {border-radius: 0px} .octane-calculator-wrapper .btn-red {width: 100%; max-width: 265px;} .octane-calculator-wrapper input, .octane-calculator-wrapper select, .octane-calculator-wrapper option { border: none; font-weight: 700;font-size: .75rem} .octane-calculator-wrapper input::-webkit-inner-spin-button {opacity: 1} .octane-calculator-wrapper .form-control::-webkit-input-placeholder {color:var(--body);} .octane-calculator-wrapper .form-control::-msplaceholder {color:var(--body);} .octane-calculator-wrapper .form -control::-placeholder {color:var(--body);} /* Socials */ .socials li:not(:last-child) {margin-right: 3px} .socials a {display:flex; justify-content:center; align-items:center; transition: all 250ms ease; background: var(--white); border: 1.5px solid var(--lighter-grey); text-decoration: none; background: var(--white); border-radius: 50%; width: 30px; height: 30px; font-size: .75rem} .socials a:hover, .socials a:focus {border-color: var(--blue)} /* Survey Form */ .survey-form .step .active .badge {background: var(--blue) !important} .survey-form .step .badge {border-color: var(--blue) !important} .survey-form .has-errors.active .badge {background: var(--red) !important} .survey-form .has-errors .badge:empty {border-color: var(--red) !important} .survey-form .step {width: auto;display:inline-flex} .survey-form .step.disabled {pointer-events:none; opacity: .5} .survey-form {max-width: 600px} .survey-form input, .survey-form p, .survey-form select {max-width: 420px} .survey-form .frm-required {color: var(--red)} .survey-form input, .survey-form select {border-radius: 0px} .survey-form label {font-weight: bold;display:block} .survey-form .custom-radio label {font-weight: normal} .survey-form div[class*="col"] {padding: 0px 15px !important} .survey-form .row {margin-left: -15px !important; margin-right: -15px !important;} .survey-form .max-w-100 {max-width: 100px;} .survey-form .invalid-feedback {font-size: 90%} /* Alert */ .alert-wrapper {text-transform: none; font-size: .813rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} .alert-wrapper .alert {text-align:center; background: var(--blue); color: var(--white); position: relative;width: 100%;padding: 10px 20px 10px 0px; margin: 0px; border-radius: 0px} .alert-wrapper .alert + .alert {border-top: 1px solid rgba(255,255,255,.2);} .alert-wrapper a {color: var(--white); text-decoration: none;font-weight: 400; } .alert-wrapper button {position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);right: 15px; padding: 0px; background:none; border:none; color: var(--white); -webkit-text-stroke: 1px var(--blue)} .alert-wrapper button:hover, .alert-wrapper button:focus {color: var(--yellow)} /* Cookie Noti */ .cookie-wrapper {position: fixed; bottom: 0px; left: 0px; right: 0px; margin: auto; max-width: 100%; background: var(--darker-grey); color: var(--white); font-size: 14px; z-index: 100; line-height: 1.4;} .cookie-wrapper a {color: var(--white)} .cookie-choice .list-inline-item, .cookie-choice-expand .list-inline-item {margin-right: 0px !important;} .cookie-choice-expand {max-height: 575px; overflow-x:hidden;} .cookie-choice-expand.show {overflow-y: auto; } .form-check-input[disabled]~.form-check-label {color:#E0E0E0} /* Search */ form[name="frmSearch"] .btn-primary, form[name="frmSearch"] input {border-radius: 0px} /* Stake F1 Page */ .stake-f1-team-kick-sauber .hero video {object-position: center 40%;} .f1-slideshow-nav {position: absolute; bottom: 20px; left: 0px; right: 0px; z-index: 1; max-width: 400px} .f1-slideshow {position: relative; z-index: 0;} .f1-slideshow .slick-track {height: 500px} .f1-slideshow img {object-fit: cover; width: 100%; height: 100%} .f1-slideshow-nav {position: absolute; left: 0px; right: 0px; z-index: 1; max-width: 400px} .f1-slideshow-nav img {border-radius: 15px; margin: 0px 7.5px; border: 1.5px solid var(--grey);object-fit: cover; height: 60px; width: 100%;} .f1-slideshow-nav .slick-current {border: 1.5px solid var(--stake-green)} .stake-f1-team-kick-sauber section.overlay-blue {padding-top: 100px;margin-top: -200px; position: relative; z-index: -1} .admin-edit .stake-f1-team-kick-sauber section.overlay-blue {z-index: 0} /* Quality Fuels - Suggested Articles */ .suggestions-wrapper {position: fixed; z-index: 1; bottom: -80px; left: 0px; transition: bottom 500ms ease; right: 0px;overflow:hidden;height: 70px} .suggestions-wrapper.active {bottom: 0px; visibility: visible; opacity: 1; pointer-events: all;} .suggestions-wrapper, .suggestions-wrapper [class*="col"] { height: 70px} .suggestions-wrapper a {color: var(--white); text-decoration:none;font-family: "Roboto Condensed",sans-serif; font-size: .875rem} .suggestions-wrapper a:hover, .suggestions-wrapper a:focus {text-decoration: underline;} .suggestions-wrapper:not(:has(.slick-slider)) .col-6:not(:first-child) {border-left: 1px solid rgba(255,255,255,.5)} .suggestions-wrapper .slick-prev, .suggestions-wrapper .slick-next {background: rgba(255,255,255,.075); position: absolute; z-index: 1; transform: scale(.75); right: -5px; border: none; padding:0px; width: 45px; height: 45px;} .suggestions-wrapper .slick-prev {bottom: -5px} .suggestions-wrapper .slick-next {top: -5px; border-bottom: 1.5px solid rgba(255,255,255,.25) } .suggestions-wrapper .slick-prev::after, .suggestions-wrapper .slick-next::after {content:""; opacity: .5; transition: opacity 250ms ease; display:block;border: 1px solid var(--white);border-width: 0px 0px 3px 3px;width: 14px; height:14px; } .suggestions-wrapper .slick-prev::after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 18px;} .suggestions-wrapper .slick-next::after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 11px;} .suggestions-wrapper .slick-prev::before {content:""; width: 1px; bottom: -10px; height: 100px; background: rgba(255,255,255,.5); position: absolute; left: -1px} /* News Press */ .cms-newspress-detail img {max-width: 75%; display:block;margin-left:auto;margin-right:auto;} /* ========================================================================== Media Queries ========================================================================== */ @media (min-width: 0px) { /* Text */ body {font-size: 1rem} h1, .h1 {font-size: 2.25rem} h2, .h2 {font-size: 2rem} h3, .h3 {font-size: 1.75rem} h4, .h4 {font-size: 1.5rem} h5, .h5 {font-size: 1.25rem} h6, .h6 {font-size: 1.15rem} .text-xs {font-size: .75rem;} .text-sm {font-size: .875rem} .text-large {font-size:0.938rem;} .text-x-large {font-size: 1rem;} .h3-with-date {padding-left: 15px} .h3-with-date {font-size: 1.625rem;} .h3-date {margin-left:-15px;font-size: 4.688rem;} /* About Shared */ .about-us .img-slanted {height: 550px} .about-us .caption {top: 52%;} .about-us main p {padding-left: 15px} .about-us main .h3 {font-size: 18px;line-height: 1.33} /* About Wrappers */ .about-us .history-wrapper, .about-us .station-wrapper {margin-bottom: 30px} .about-us .ship-wrapper {margin: -30px 0px -10px 0px} .about-us .mining-wrapper {margin: -20px 0px 0px 0px} .about-us .refining-wrapper {margin-bottom: 10px} .about-us .states-wrapper {margin:0px 0px 70px 0px} .about-us .motorsports-wrapper {margin: -30px 0px 260px 0px} .about-us .company-wrapper, .about-us .new-wrapper, .about-us .racing-wrapper, .about-us .joining-wrapper, .about-us .app-wrapper, .about-us .health-wrapper hr, .about-us .strong-wrapper, .about-us .rewards-wrapper {margin-bottom: 50px} .about-us .ultra-wrapper {margin-bottom: 70px} /* About Elements */ .about-us .states-wrapper img {max-width: 75%} .about-us .pump-wrapper img {height:310px} .about-us .motorsports-wrapper .caption {max-width: 300px;right: 0px; top: 550px} .about-us .motorsports-wrapper .caption .date {font-size: 60px;} .about-us .motorsports-wrapper .bg-red { padding: 30px 15px; } .about-us .racing-wrapper [class*="col-"]:first-child {padding-top: 200px} .about-us .racing-wrapper .img-slanted {margin-bottom: -220px;height:450px} .about-us .joining-wrapper img, .about-us .ultra-wrapper img, .new-wrapper img {max-width: 280px} .about-us .refining-wrapper img {max-width: 200px} .about-us .app-wrapper img {max-width:220px} .about-us .health-wrapper h2+p {font-size: 18px;margin-bottom: 30px} .about-us .health-wrapper h3 {font-size: 26px; padding-left: 15px;} .about-us .rewards-wrapper img {max-width: 230px} /* Racing */ .img-partner {width: 160px} /* Grocery Rewards */ .grocery-rewards sup {font-size: 50%; top: -1rem;} /* Main Locator - Form */ .locator .filters-wrapper {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: center; justify-items: start;} .locator .filters-wrapper .custom-control:first-child {grid-column: 1 / -1;} /* Main Locator - Map */ .locator #map {height: 300px; box-shadow: 5px 0 14px 1px rgba(99,100,102,.25); } /* Main Locator - Locations */ .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; background-size: cover;} .locator .locations {max-width: 450px;} .locator .location {padding: 20px 25px} .locator .location-details-wrapper.active {height: 500px} .locator .btn-close-details {right: 25px;top: 0px; } .locator .loading { margin:100px auto;display:block} .locator .location-details-wrapper .location {width: 90%;} /* Main Locator - Nav */ .locator nav {padding: 0px 15px; max-width: 260px; margin:0px auto 20px 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);} /* Main Locator - Locator Detail */ .locator-detail .nearby-slideshow {margin-left: -25px; margin-right: -25px;} /* Go Rewards */ .go-rewards .app-promo .col-md-7 {margin: 0px 0px -30px 0px;position: relative; z-index: 1} .go-rewards .app-promo .col-12 {position: relative; z-index: 0;padding: 0px} .go-rewards .app-promo-content {border-top: 4px solid var(--blue)} .go-rewards .img-scroll-wrapper .img-tiremarks {left:calc(-100% + 50px); } .go-rewards .find-a-station-wrapper .jarallax {height: 300px;margin-top: -200px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);width: 100vw; z-index: -1} .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;} /* Reviews Slideshow */ .custom-slideshow {padding: 0px 24px} .custom-slideshow .slick-prev {left:-14px;} .custom-slideshow .slick-next {right:-14px;} /* Grocery Detail */ .grocery-rewards .find-a-station-wrapper .jarallax {height: 300px;margin-top: -200px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);width: 100vw; z-index: -1} /* CMS Slideshow */ .cms-slideshow .img-md {display:none} /* Hiring Form */ .hiring-hero .bonus {top: 46%; left: 1%; width: 44%} /* Heros */ .hero { box-shadow: rgba(0,0,0,.4) 0px 0 7.5px;} .hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: min(12vw,5rem);} .hero-80vh {margin: 15px 15px 15px 15px;height: calc(80vh - 85px);} .hero-lg, .hero-lg .container {height: 550px;} .hero-md, .hero-md .container {height: 275px;} .hero-lg ul {flex-direction: column;} .sunoco-diesel .hero-img {object-position: 70% bottom;} .find-a-station .hero img {object-position: right bottom} .stake-f1-team-kick-sauber .hero-img {object-position: 85% center;} .go-rewards .hero-img {object-position: left bottom} .offer-94-octane .hero img {object-position: 90% center} /* Image Scroll Wrapper */ .img-scroll-wrapper .img-scroll {transition: transform 250ms ease; z-index: -101; content:""; position: absolute;left: -100%; height: 100%; top: 0px; width: 100%; } .img-scroll-wrapper .img-scroll-panel-2 {left: -90%} .img-scroll-wrapper .container-small .img-scroll {left: -110%; } .img-scroll-wrapper .img-scroll + .img-smoke {left:calc(100% - 100vw);} .img-scroll-wrapper .img-scroll + .img-map {left:calc(100% - 20vw); } .img-scroll-wrapper .img-scroll + .img-waves {left:calc(100% - 30vw); } .img-scroll-wrapper .img-tiremarks {background: url(/img/bg-tiremarks.webp) right center no-repeat; background-size: contain; } .img-scroll-wrapper .img-raceflag {background: url(/img/bg-raceflag.webp) right center no-repeat; background-size: contain; opacity: .5} .img-scroll-wrapper .img-smoke {background: url(/img/bg-smoke.webp) right center no-repeat; background-size: contain; } .img-scroll-wrapper .img-map {background: url(/img/bg-map.webp) right center no-repeat; background-size: cover; } .img-scroll-wrapper .img-waves {background: url(/img/bg-waves.webp) right center no-repeat; background-size: 90% 100%;} .img-scroll-wrapper .jarallax-img {height: 250px; width: 100%; object-fit:cover;} .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {background: none; border: 1.5px solid var(--blue); color: var(--blue)} .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):hover, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):focus {background: none; border-color: var(--dark-blue); color: var(--dark-blue)} /* Overview Slideshow */ .overview-slideshow .slide-clip {clip-path: inset(0px 0px 190px 0px);} .overview-slideshow .slide {width: 290px; margin: 90px 7.5px -90px 7.5px} .overview-slideshow .slick-center {margin: 0px 7.5px} /* Containers */ .container-xsmall {max-width: 600px} .container-small {max-width: 700px} .container-medium {max-width: 800px} /* Overlays & Gradients */ .gradient-dark-left::after {width: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);} /* Backgrounds */ .bg-img-offset {height: 80%} /* Survey Form */ .survey-form .cms-stepper {flex-direction: row;} .survey-form .step {margin: 0px 5px 10px 0px} .survey-form .step a {width: auto} /* Main Locator Cities & Locations */ .locator-list ul {columns: 2} /* Main Locator Detail */ .locator-detail #map {height: 350px;} } @media (min-width: 430px) { .locator .btn-close-details {right: auto; left: 380px } } @media (min-width: 500px) { /* Main Locator - Detail */ .locator .location-details-wrapper .location {width: 400px;} } @media (min-width: 576px) { /* Go Rewards */ .arrow-row .col-sm-4 {position: relative;} .arrow-row .col-sm-4:not(:last-child)::after {content:""; height: 18px;width: 45px;background: url(/img/icon-arrow.png) no-repeat;background-size: contain;position: absolute; right: -20px; position: absolute; top: 50px; -webkit-transform: translateY(-50%); transform: translateY(-50%);} /* Spacing */ .mb-sm-7 {margin-bottom: 5rem !important} .mt-sm-7 {margin-top: 5rem !important} /* Main 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} /* Main Locator - Cities & Locations */ .locator-list ul {columns: 4} /* Spacing */ .pb-sm-6 {padding-bottom: 3.5rem!important} .pt-sm-6 {padding-top: 3.5rem!important} .py-sm-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important} .pb-sm-7 {padding-bottom: 5rem!important} .pt-sm-7 {padding-top: 5rem!important} .py-sm-7 {padding-top: 5rem!important;padding-bottom: 5rem!important} .mb-sm-6 {margin-bottom: 3.5rem!important} .mt-sm-6 {margin-top: 3.5rem!important} .my-sm-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important} .mb-sm-7 {margin-bottom: 5rem!important} .mt-sm-7 {margin-top: 5rem!important} .my-sm-7 {margin-top: 5rem!important;margin-bottom: 5rem!important} /* Heros */ .hero-lg ul {flex-direction: row;} /* Quality Fuels - Suggested Articles */ .suggestions-wrapper .col-md-3:not(:first-child):not(:last-child) {border-right: 1px solid rgba(255,255,255,.5);} } @media (min-width: 641px) { /* Hiring Form */ .hiring-hero .bonus {top: 46%; left: 8%; width: 29%} } @media (max-width: 767.9px) { /* Header */ header {background: var(--white);border-bottom: 1.5px solid var(--lightest-grey);top: 0px; left: 0px; width: 100%;} header .logo {width: 70px;height: 53px; padding: 5px 0px; } header .offcanvasmenu {background: var(--white); transition: opacity 250ms ease; overflow-y:auto; position: absolute; top: -999px; width: 100%; height: calc(100vh - 40px); padding: 20px 0px 0px 0px; opacity: 0; visibility:hidden; pointer-events: none;} .offcanvas-open .offcanvasmenu {opacity: 1; visibility: visible; pointer-events:all; top: 100%} .offcanvas-open {overflow:hidden;} header .mainmenu li {margin-bottom: 35px} header .mainmenu button {font-weight: 700; color: var(--blue); font-size: 1.125rem; width: 100%} header .mainmenu button span {font-size: 2.25rem; width: 20px; height: 30px; line-height: 1;-webkit-text-stroke: 3.5px white;margin: -2px 0px 2px 0px} header .mainmenu button:focus {outline: 0; box-shadow:0 0 0 .2rem rgba(0,123,255,.25)} header .quicklinks {border-top: 1.5px solid var(--lighter-grey); padding-top: 40px} header .quicklinks li {margin-bottom: 15px} header .quicklinks a {color: var(--body); font-size: 1rem;} header .dropdown {opacity: 0; visibility:hidden;transition: opacity 250ms ease; pointer-events: none;position: absolute; top: -999px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} header .dropdown li {margin-bottom: 15px} header li.active .dropdown {opacity: 1; visibility: visible; pointer-events: all;position: relative; top: 0px; width: 100%} header .dropdown a {color:var(--body); text-transform: none; font-weight: 400;font-size: .913rem} header .dropdown .btn-back {font-size: .913rem} header .dropdown .btn-back span {-webkit-text-stroke: 2.5px white; font-size: 2rem} header .dropdown p {font-size: 1.125rem;font-family: "Roboto Condensed",sans-serif;} } @media (min-width: 768px) { /* Text */ h1, .h1 {font-size: 2.75rem} h2, .h2 {font-size: 2.5rem} h3, .h3 {font-size: 2rem} h4, .h4 {font-size: 1.75rem} h5, .h5 {font-size: 1.5rem} h6, .h6 {font-size: 1.25rem} .text-xs {font-size: .75rem;} .text-large {font-size: 1.125rem;} .text-x-large {font-size: 1.25rem;} .text-shadow-md-lg {text-shadow: rgba(0,0,0,.75) 0px 0 30px;} .text-md-nowrap {white-space: nowrap;} .text-md-white {color: var(--white)} .h3-with-date {padding-left: 30px} .h3-with-date {font-size: 30px;} .h3-date {margin-left: -30px;font-size: 90px;} /* Header */ .has-hero80vh header {top: 20px; left: 20px; width: calc(100% - 40px);} header .logo {width: 130px; height: 80px} header li {position: relative;display: inline-block;font-size: .913rem} header li button {color: var(--white);padding: 2px 3.5px} header li button:hover, header ul li button:focus {color: var(--white)} header .quicklinks {margin: 15px 0px 20px 0px} header .quicklinks li {margin-left: 25px; } header .quicklinks a {text-decoration: none; color:var(--white)} header .quicklinks a:hover, header .quicklinks a:focus {text-decoration: underline;color: var(--white); } header .mainmenu > li {margin-left: 45px; padding-bottom: 10px;} header .mainmenu > li:last-child .dropdown {right: 0px} header .mainmenu > li::after {content:""; height: 2px; width: calc(100% - 15px); position: absolute; bottom: 10px; left: 0px; right: 0px; margin: auto; display:block; background: var(--red); opacity: 0; transition: all 250ms ease;} header .mainmenu > li.show::after, body:not(.has-touch) header .mainmenu > li:hover::after {opacity: 1; bottom: 5px;} header .mainmenu > li:last-child {display:none} header .mainmenu > li.show .dropdown {opacity: 1; visibility: visible; top: calc(100% - 5px); pointer-events:all} header .mainmenu > li:nth-child(1) .dropdown {margin-left: -246px;} header .mainmenu > li:nth-child(2) .dropdown {margin-left: -398px} header .mainmenu > li:nth-child(3) .dropdown {right: 0px; left: auto; margin: 0px} header .mainmenu button {font-weight: 700; color: var(--white)} header .mainmenu button:focus {outline: none} header .mainmenu .angle {margin: -4px 0px 4px 6px; transition: transform 250ms ease; transform-origin: 50% 70%; border: 1px solid var(--white);width: 8px; height: 8px;border-width: 0px 0px 1.5px 1.5px;display:block; } header .mainmenu .angle-down {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);transform: rotate(-45deg);} header .mainmenu .show .angle { -ms-transform: rotate(-225deg);-wekbit-transform: rotate(-225deg);transform: rotate(-225deg);} header .dropdown {opacity: 0; transition: all 250ms ease; visibility: hidden; position: absolute; left: 50%; top: 100%; pointer-events:none;background: var(--white); padding: 1.5rem; width:600px; font-size: .875rem;font-weight: 400;line-height: 1.6; text-transform: none;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";} header .dropdown a {color:var(--body); padding: 0px;font-weight: 400} header .dropdown a:hover, header .dropdown a:focus {color:var(--body); text-decoration: underline; } header .dropdown li {display:block;margin: 0px 0px 10px 0px; padding: 0px} header .dropdown li:hover::after {content:none} header .dropdown p {line-height: 1.5; font-size: .875rem} header .dropdown .h5 {font-size: 1.15rem;} .header-compact header {background: var(--white);box-shadow: 0 0 .5rem rgba(0,0,0,.15);} .header-compact.has-hero80vh header {top: 0px; left: 0px; right: 0px; width: 100%;} .header-compact header .mainmenu button {color: var(--blue)} .header-compact header .mainmenu > li {margin-top: -30px; margin-bottom: -30px} .header-compact header .mainmenu li:last-child {display:inline-block;} .header-compact header .quicklinks {display:none} .header-compact header li button:hover, .header-compact header li button:focus {color: var(--blue)} .header-compact header li .angle {border-color: var(--blue)} .header-compact header .logo {width: 75px; height: 52px; padding: 5px 0px; position: relative; z-index: 1} .header-compact header .mainmenu li:last-child::after {content:none} .header-compact header .mainmenu li.show .dropdown {top: 100%; } .dropdown-open::after {content:""; display:block; pointer-events:none; transition: opacity 250ms ease, backdrop-filter 250ms ease; opacity: 0;background: rgba(0,0,0,.5); backdrop-filter: blur(5px); z-index: 1; position: fixed; top: 20px; left: 0px; right: 0px; height: 100%} .has-hero80vh.dropdown-open::after {left: 20px; right: 20px; height: calc(80vh - 40px)} .header-compact::after, .has-hero80vh.header-compact::after {top: 0px; left: 0px; width: 100%; height: 100%} .dropdown-open::after {opacity: 1} .header-hover header, .header-white {transition: background 250ms ease, border 250ms ease;background: var(--white);box-shadow: 0 0 .5rem rgba(0,0,0,.15);} .header-hover header li button, .header-white li button {color: var(--blue)} .header-hover header li button:hover, .header-hover header li button:focus, .header-white li button:hover, .header-white li button:focus, .header-white .quicklinks a, .header-hover header .quicklinks a, .header-white .quicklinks a:hover, .header-white .quicklinks a:focus, .header-hover header .quicklinks a:focus, .header-white .quicklinks a:hover {color: var(--blue)} .header-hover header li .angle, .header-white li .angle {border-color: var(--blue)} .header-white {background: var(--white)} /* About Shared */ .about-us main p {padding-left: 30px} .about-us .h3 {font-size: 24px;line-height: 1.6} .history-wrapper p:last-child::after {content:none} /* About Wrappers */ .about-us .roots-wrapper {margin-bottom: 20px} .about-us .history-wrapper,.about-us .ultra-wrapper,.about-us .ship-wrapper, .about-us .station-wrapper {margin-bottom: 70px} .about-us .mining-wrapper {margin: -20px 0px 100px 0px} .about-us .refining-wrapper {margin-bottom: 10px} .about-us .states-wrapper {margin:0px 0px 150px 0px} .about-us .motorsports-wrapper {margin: 0px 0px 300px 0px} .about-us .company-wrapper,.about-us .app-wrapper,.about-us .new-wrapper,.about-us .racing-wrapper, .about-us .strong-wrapper, .about-us .rewards-wrapper {margin-bottom: 90px} .about-us .joining-wrapper {margin-bottom: 200px} /* About Elements */ .about-us .station-wrapper img {margin-top: 50px} .about-us .states-wrapper img {margin-top: -130px;max-width:100%} .about-us .pump-wrapper img {width: 85%; height:auto; max-width: 240px;margin-top: -110px} .about-us .motorsports-wrapper .caption {left:auto;right: 0px; max-width: 430px;top:auto; bottom: -520px} .about-us .motorsports-wrapper .bg-red { padding: 50px; } .about-us .motorsports-wrapper .caption .date {font-size: 90px;} .about-us .racing-wrapper [class*="col-"]:first-child {padding-top: 250px} .about-us .racing-wrapper .img-slanted {margin-bottom: -180px;height:370px} .about-us .joining-wrapper img {max-width: 100%} .about-us .ultra-wrapper img {width: 85%} .about-us .refining-wrapper img {max-width: 270px} .about-us .app-wrapper img {margin-top: 0px;max-width:250px} .about-us .health-wrapper hr {margin: 0px 0px 80px 0px} .about-us .health-wrapper h2+p {margin-bottom: 100px} .about-us .health-wrapper h3 {font-size: 30px; padding-left: 30px;} .about-us .strong-wrapper img {width: 80%;} .about-us .rewards-wrapper img {width: 70%; max-width: 100%} /* Racing */ .img-partner {max-width: 100%} /* Main Locator - Form */ .locator .filters-wrapper {display: grid; grid-template-columns: repeat(6,1fr); gap: 0px; align-items: center; justify-items: center;} .locator .filters-wrapper .custom-control:first-child {grid-column: 1 / -1; justify-self: center;} /* Main Locator - Detail */ .locator-detail .nearby-slideshow {margin-left: 0px; margin-right: 0px} .locator-detail #map {height: 500px;} /* Borders */ .border-md-right {border-right: 1px solid var(--light-blue-grey)!important} .border-bottom-md-none {border-bottom: none !important} /* Hiring Form */ .hiring-hero .bonus {top: 42%; left: 19%; width: 23%} /* Card Pages */ .sunoco-corporate-card .corporate-cc-hero, .wex-hero {position: relative;} .sunoco-corporate-card .corporate-cc-hero p.text-md-left {position: absolute; top: 82%; left: 70px; max-width: 48%; } .wex-hero p.text-md-left {position: absolute; top: 78%; max-width:52%; right:55px} /* Image Scroll Wrapper */ .img-scroll-wrapper {position: relative; } .img-scroll-wrapper .h-full {min-height: 400px} .img-scroll-wrapper-xs .h-full {min-height: 250px} .img-scroll-wrapper-video .container, .img-scroll-wrapper-video .d-flex {min-height: 0px} .img-scroll-wrapper .jarallax-img {position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1;} .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {background: var(--white); color: var(--blue);box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,.3);border:none} .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):hover, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn):focus {background: var(--white); color: var(--red)} /* Heros */ .hero { box-shadow: rgba(0,0,0,.4) 0px 0 15px} .hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 6rem;} .hero-80vh {margin: 20px;height: calc(80vh - 40px);} .hero-md h1, .hero-md .h1 {font-size: 3.5rem} .sunoco-diesel .hero-img {object-position: right bottom;} .hero-img, .find-a-station .hero img, .go-rewards .hero-img {object-position: center center} .offer-94-octane .hero img {object-position: right 10%;} /* Spacing */ .pb-md-6 {padding-bottom: 3.5rem!important} .pt-md-6 {padding-top: 3.5rem!important} .py-md-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important} .pb-md-7 {padding-bottom: 5rem!important} .pt-md-7 {padding-top: 5rem!important} .py-md-7 {padding-top: 5rem!important;padding-bottom: 5rem!important} .mb-md-6 {margin-bottom: 3.5rem!important} .mt-md-6 {margin-top: 3.5rem!important} .my-md-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important} .mb-md-7 {margin-bottom: 5rem!important} .mt-md-7 {margin-top: 5rem!important} .my-md-7 {margin-top: 5rem!important;margin-bottom: 5rem!important} /* Overview Slideshow */ .overview-slideshow .slide {width: 400px} .overview-slideshow .h3 {font-size: 1.5rem} /* Gradients */ .gradient-dark-left-md {position: relative;} .gradient-dark-left-md::after {content:""; display:block; z-index: -1; position: absolute; top: 0px; left: 0px; height: 100%; width: 70%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);} /* Shadows */ .box-shadow-sm-md-none, box-shadow-md-md-none, .box-shadow-lg-md-none {box-shadow: none;} /* Overview Slideshow */ .overview-slideshow .slide-clip {clip-path: inset(0px 0px 160px 0px);} .overview-slideshow .slide { margin: 80px 7.5px -80px 7.5px} .overview-slideshow .slick-center {margin: 0px 7.5px} /* Backgrounds */ .bg-md-none {background: none !important} .bg-img-offset {height: 60%} /* Content Hub */ .article-more {position: absolute; top: 50%; right: 0px; transform: translateY(-50%)} .nav-contenthub-fixedtop {padding-top: 50px} /* Overlays & Gradients */ .gradient-dark-left::after {width: 70%; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);} /* Octane Calculator */ .octane-calculator-wrapper .btn-submit {height: 35px} /* Go Rewards */ .go-rewards .app-promo .col-md-7 {position: absolute; top: 50%; transform: translateY(-50%); left: -50px;z-index: 1;margin:0px} .go-rewards .app-promo .col-12 {padding-left: 15px; padding-right: 15px;} .go-rewards .app-promo-content {border-top: none; border-left: 4px solid var(--blue)} /* Survey Form */ .survey-form .step {margin: 0px 15px 0px 0px;} } @media (min-width: 992px) { /* Header */ header .mainmenu > li:nth-child(1) .dropdown {margin-left: -345px;} header .mainmenu > li:nth-child(2) .dropdown {margin-left: -377px;} header .mainmenu > li {margin-left: 70px;} /* About Elements */ .about-us .caption {top: 55%;} .about-us .img-slanted {height: 600px} /* Main Locator - Form */ .locator .filters-wrapper {display:flex; gap: 0px 35px;justify-content: center;} /* Main Locator - Map */ .locator #map {height: 460px;box-shadow:none;} /* Main Locator - List */ .locator .locator-row {box-shadow: 0 0 2rem rgba(0,0,0,.2)} .locator .locations {margin:0px;max-width: 100%} .locator .locations li {height: 415px} .locator .locations .location {padding: 0px 20px 0px 20px; height: 33.333%} .locator .locations .location:hover {background: var(--lightest-grey)} .locator .location-details-wrapper .location {padding: 30px 10px 30px 60px; width: 300px} .locator .locator-row .col-12:nth-child(1) {order: 2;} .locator .locator-row .col-12:nth-child(2) {display:none; order: 1; max-width: 350px;} .locator .location-details-wrapper.active {height: 460px} .locator .btn-close-details {right: -20px;top: 10px; left:auto} .locator .loading { margin:0px;position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .locator .no-results {margin:20px} .locator.show-details .row .col-12:nth-child(2) {display:block;} .locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 350px);margin:0px} .locator .locator-row .col-12:first-child::before { top: 0px; height: 100%; } /* Main Locator - Nav */ .locator nav {padding: 10px;margin: 0px auto; position: absolute; max-width:none; width:240px; left: 0px; right: 0px; bottom: 0px} .locator nav .locations-prev::before, .locator nav .locations-next::before { margin-left: 0px} .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);} /* Go Rewards */ .go-rewards .qr-code {top: calc(50% - 82.5px)} /* Reviews Slideshow */ .custom-slideshow {padding: 0px} .custom-slideshow .slick-prev {left:-40px;} .custom-slideshow .slick-next {right:-40px;} /* Spacing */ .pb-lg-6 {padding-bottom: 3.5rem!important} .pt-lg-6 {padding-top: 3.5rem!important} .py-lg-6 {padding-top: 3.5rem!important;padding-bottom: 3.5rem!important} .pb-lg-7 {padding-bottom: 5rem!important} .pt-lg-7 {padding-top: 5rem!important} .py-lg-7 {padding-top: 5rem!important;padding-bottom: 5rem!important} .mb-lg-6 {margin-bottom: 3.5rem!important} .mt-lg-6 {margin-top: 3.5rem!important} .my-lg-6 {margin-top: 3.5rem!important;margin-bottom: 3.5rem!important} .mb-lg-7 {margin-bottom: 5rem!important} .mt-lg-7 {margin-top: 5rem!important} .my-lg-7 {margin-top: 5rem!important;margin-bottom: 5rem!important} /* Overview Slideshow */ .overview-slideshow .slick-list {width: calc(100% + 30px)} .overview-slideshow .slide {width: 305px;margin: 90px 7.5px -90px 7.5px} .overview-slideshow .slide-clip {clip-path: inset(0px 0px 185px 0px);} .overview-slideshow .slick-center {margin: 0px 7.5px} /* Card Pages */ .wex-hero p.text-md-left {right:75px} /* Heros */ .stake-f1-team-kick-sauber .hero-img {object-position: center center} } @media (min-width: 1200px) { /* Main Locator - List */ .locator .locator-row .col-12:nth-child(1) { max-width: 100%} .locator.show-details .row .col-12:nth-child(1) {max-width: calc(100% - 520px);margin:0px} .locator .locator-row .col-12:nth-child(2) {max-width: 520px;} .locator .location-details-wrapper .location {padding: 50px 0px 40px 60px; width: 450px} .locator .btn-close-details {right: -20px; top: 20px;} .locator .no-results {margin:130px 30px 0px 80px} /* Main Locator - Nav */ .locator nav {width: 410px} /* Heros */ .hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 7rem;} /* Overview Slideshow */ .overview-slideshow .slick-list {width: 100%} .overview-slideshow .slide {width: 355px} .overview-slideshow .slide-clip {clip-path: inset(0px 0px 160px 0px);} } @media (min-width: 1500px) { /* About */ .about-us .img-slanted {min-width: 100vw;height:auto;min-height:550px} /* About Elements */ .about-us .motorsports-wrapper .caption {bottom: -350px} /* Heros */ .hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 9rem;} .hero-md h1, .hero-md .h1 {font-size: 4.5rem} .hero-lg .container {max-width: 1670px} /* Overview Slideshow */ .overview-slideshow .slide {width:355px;margin: 80px 7.5px -80px 7.5px} .overview-slideshow .slick-center {margin: 0px 7.5px} /* Go Rewards */ .go-rewards .qr-code {width: 200px; right: 2vw; border-radius: 10px; font-size: 1.063rem} .go-rewards .qr-code img {width: 115px} /* Containers */ .container {max-width: 1500px} .container-xsmall {max-width: 800px} .container-small {max-width: 900px} .container-medium {max-width: 1100px} .container-fluid {max-width: 1800px} /* Interstitials */ .interstitial-slanted {clip-path: polygon(0 31%, 100% 20%, 100% 89%, 0% 100%);margin-top: -9rem} .interstitial-slanted .container {top: 57.5%; transform: translate(-50%, -57.5%) } /* Overview Slideshow */ .overview-slideshow .slide {width:475px;margin: 100px 7.5px -100px 7.5px} .overview-slideshow .slide-clip {clip-path: inset(0px 0px 140px 0px);} .overview-slideshow .slick-center {margin: 0px 7.5px} } @media (min-width: 2500px) { /* Text */ body {font-size: 1.25rem} h1, .h1 {font-size: 3rem} h2, .h2 {font-size: 2.75rem} h3, .h3 {font-size: 2.25rem} h4, .h4 {font-size: 2rem} h5, .h5 {font-size: 1.75rem} h6, .h6 {font-size: 1.5rem} .text-xs {font-size: 1rem} .text-sm {font-size: 1.063rem} .text-large {font-size: 1.25rem;} .text-x-large {font-size: 1.5rem;} .btn-red, .btn-yellow, .btn-blue, .btn-blue-border, .btn-white, .btn-white-border, .btn-darkest-grey, .img-scroll-wrapper .bg-white .btn:not(.btn-red):not(.cms-contentmenu .btn) {font-size: 1.15rem; padding: 15px 30px} /* Header */ header li {font-size: 1.25rem} header .dropdown .h5 {font-size: 1.5rem} header .dropdown p {font-size: 1.15rem} .alert-wrapper {font-size: 1rem} header .mainmenu > li:nth-child(1) .dropdown {margin-left: -357px;} header .mainmenu > li:nth-child(2) .dropdown {margin-left: -400px;} /* Overview Slideshow */ .overview-slideshow .h3 {font-size: 2.25rem} .overview-slideshow .slide-clip {clip-path: inset(0px 0px 200px 0px);} /* Socials */ .socials a {width: 50px; height: 50px; font-size: 1.15rem} /* Heros */ .hero-lg, .hero-lg .container {min-height: 700px} .hero-80vh h1, .hero-lg h1, .hero-lg .h1 {font-size: 12rem;} .hero-md, .hero-md .container {height: 500px;} .hero-md h1, .hero-md .h1 {font-size: 6rem;} /* Image Scroll Wrapper */ .img-scroll-wrapper .img-tiremarks {left:calc(-100% - 150px); } .img-scroll-wrapper .img-raceflag {left:-100%; } .img-scroll-wrapper .img-smoke {left:calc(-100% + 400px); } .img-scroll-wrapper .img-scroll-panel-2 { left:-600px; width: 650px; background-size: 100% 100%} /* Cookie Banner */ .cookie-wrapper .cookie-choice a {font-size: 1.25rem;} } @media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) { /* Heros */ .hero-lg, .hero-lg .container {height: auto} .hero-lg h1, .hero-lg .h1 {padding: 100px 0px; font-size: 15vh} .hero-80vh h1 {margin-top: 7.5vh;font-size: 17vh} .hero-80vh .btn-find-a-station {display:none } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important} }