@charset "UTF-8";
/* All clamps 320 - 1200 unless noted */


:root {

	--ws-blue: #001125;
	--ws-blue-rgb: 0,17,37;

	--ws-light: #EEF2F6;
	--ws-light-2: #ECECEC;
	--ws-light-3: #D4D9DF;

	--ws-red: #DC0032;
	--ws-red-rgb: 220,0,50;

	--ws-gap: 1.5em;
	--ws-max-content-width: 74em;
	--ws-transition: all .3s ease;

}


/* Metropolis Regular */
@font-face {
	font-display: swap;
	font-family: 'Metropolis';
	font-style: normal;
	font-weight: 400;
	src: url('/includes/fonts/Metropolis-Regular.woff2') format('woff2'),
	url('/includes/fonts/Metropolis-Regular.woff') format('woff');
}

/* Metropolis Italic */
@font-face {
	font-display: swap;
	font-family: 'Metropolis';
	font-style: italic;
	font-weight: 400;
	src: url('/includes/fonts/Metropolis-RegularItalic.woff2') format('woff2'),
	url('/includes/fonts/Metropolis-RegularItalic.woff') format('woff');
}

/* Metropolis SemiBold */
@font-face {
	font-display: swap;
	font-family: 'Metropolis';
	font-style: normal;
	font-weight: 600;
	src: url('/includes/fonts/Metropolis-SemiBold.woff2') format('woff2'),
	url('/includes/fonts/Metropolis-SemiBold.woff') format('woff');
}

/* Metropolis SemiBold Italic */
@font-face {
	font-display: swap;
	font-family: 'Metropolis';
	font-style: italic;
	font-weight: 600;
	src: url('/includes/fonts/Metropolis-SemiBoldItalic.woff2') format('woff2'),
	url('/includes/fonts/Metropolis-SemiBoldItalic.woff') format('woff');
}




html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	background: var(--ws-light);
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	text-wrap: pretty;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

body.no-flow {
	overflow: hidden;
}

img {
	border: 0;
	height: auto;
	max-width: 100%;
}

ul {
	padding-left: 0;
}

ul li {
	list-style: none;
}

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}

table {
	border-collapse: collapse;
}

td, th {
	empty-cells: show;
	text-align: left;
	vertical-align: middle;
}

#skipNavigation {
	background: #FFF;
	color: #000;
	left: 0;
	padding: .5em;
	position: absolute;
	top: -1000px;
	z-index: 10;
}

#skipNavigation:is(:hover, :focus-visible) {
	top: 0;
}




/* TYPEFACES ------------------------------ */

body, .text, input, button, select, textarea {
	color: var(--ws-blue);
	font-family: 'Metropolis', sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/* TYPOGRAPHY ------------------------------ */

h1 { font-size: 1.875em;}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

a {
	color: var(--ws-red);
	text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6, hr, .content :is(ul, ol), .contentEditor :is(ul, ol), blockquote, dd {
	margin-block: 0 1rem;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
}

:is(p, ul, ol, blockquote, aside, div, section) + :is(h2, h3, h4, h5, h6) {
	margin-top: 2em;
}

h1, h2, h3, h4, h5, h6, th, dt {
	color: var(--ws-blue);
}

em, i, q, cite, .italic {
	font-style: italic;
}

b, strong {
	font-weight: 600;
}

u {
	text-decoration: none;
}

hr {
	border: 0;
	border-top: 1px solid rgba(0,0,0,.15);
	clear: both;
	margin: 2.5em 0;
	padding-top: 1px;
}

p {
	text-wrap: pretty;
}

:is(ol, ul, p):last-child {
	margin-bottom: 0;
}

.intro {
	color: #000;
	font-size: 1.25em;
	margin: 0 0 1em;
}

sup, sub {
	font-size: .6em;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

.clearFloats {
	clear: both;
}

.nobr {
	white-space: nowrap;
}

.twoCol, .threeCol, .resCol {
	column-gap: 2em;
}

:is(.twoCol, .threeCol, .resCol) li {
	break-inside: avoid-column;
}

.req {
	color: var(--ws-red);
}

.muted {
	opacity: 0.5;
}

small, .textSm {
	font-size: .8em;
}

.content table {
	width: 100%;
}


/* Imagery */

figure {
	line-height: 0;
	margin: 0;
}

figcaption {
	line-height: 1.5;
}

.content :is(.photoright, .photoleft) {
	height: auto;
	max-width: min(50%, 21.875em);
}

.content :is(.photoright, .photoleft) img {
	float: none;
	height: auto;
	margin: 0;
	max-width: 100%;
}

.content figure.photo-fullwidth {
	text-align: center;
	width: 100%;
}

.content figure.photo-fullwidth img {
	width: auto;
}

.photoright {
	clear: right;
	float: right;
}

.photoright figcaption {
	text-align: right;
}

.photoleft {
	clear: left;
	float: left;
}



/* Blockquote */
blockquote {
	float: right;
	margin: 1em 0 1em 3em;
	max-width: 50%;
	text-align: right;
	width: 18.75em;
}

blockquote p {
	color: red;
	font-size: 1.375em;
	line-height: 1.1;
}

blockquote :is(cite, footer) {
	color: #888;
	font-size: 1rem;
}

blockquote cite::before,
blockquote footer::before {
	content: '\2013\00A0';
}

blockquote p:first-of-type::before {
	content: open-quote;
}

blockquote p:last-of-type::after {
	content: close-quote;
}




/* WRAP ------------------------------ */

.wrap,
body>footer .fatFooter {
	margin-inline: auto;
	max-width: var(--ws-max-content-width);
	width: 100%;
}

main.interior .wrap {
	padding-inline: var(--ws-gap);
	max-width: calc(var(--ws-max-content-width) + 2 * var(--ws-gap));
}




/* FLEXBOX COLUMNS ------------------------------ */
.ws-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-gap);
}

.ws-flex>:is(article,div,li) {
	width: calc( 99.9% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}





/* HEADER ------------------------------ */

body.home > header {
	content-visibility: hidden;
	display: none;
}




/* MAIN ------------------------------ */

main {
	position: relative;
	z-index: 0;
}

.contentEditor {
	background: #FFF;
	min-width: 100%;
}

/* content */
.content {
	word-wrap: break-word;
}





/* CMS PAGE ELEMENTS ------------------------------ */

/* lists */
.content :where(ol,ul) li {
	font-size: 1em;
	margin: 0 0 .5em;
}

.content :is(ol,ul) :where(ol,ul) {
	margin-top: .5em;
}

.content ol ol li {
	list-style: lower-alpha;
}

.content ul li {
	padding-left: 1.75em;
	position: relative;
}

.content ul li::before {
	aspect-ratio: 1;
	border-radius: 50%;
	color: var(--ws-red);
	content: '\2022';
	display: inline-block;
	height: .375em;
	font-size: 1.5em;
	left: .5em;
	position: absolute;
	text-align: center;
	top: -.25em;
}

.content ul li ul li:before {
	color: var(--ws-blue);
}




/* addon classes */
.clearfix::after {
	clear: both;
	content: '';
	display: table;
}

.videoContainer {
	aspect-ratio: 16 / 9;
	line-height: 0;
	position: relative;
	width: 100%;
}

.videoContainer.ratio-4-3 {
	aspect-ratio: 4 / 3; /* 4:3 full-frame */
}

/* Build out the space for videos when editing a CMS page */
#tinymce .videoContainer { aspect-ratio: 16 / 9 !important; }
#tinymce .videoContainer.ratio-4-3 { aspect-ratio: 4 / 3 !important; }


.videoContainer iframe,
#tinymce .mce-preview-object {
	border: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

#wysiwygBody {
	background: #FFF;
}

.wsNew {
	background-color: #FFC700;
	color: #222;
	display: inline-block;
	font-size: .7em;
	font-style: italic;
	height: 1.5em;
	line-height: 1.5em;
	margin: .3em 0;
	overflow: visible;
	padding: 0 .3em;
	vertical-align: top;
}

td.right, th.right {
	text-align: right;
}




/* SHARE ICONS ------------------------------ */

.shareIcons {
	display: inline-block;
	overflow: auto;
	position: relative;
}

.shareIcons a {
	background: no-repeat center / contain;
	border-radius: .2em;
	display: block;
	float: left;
	height: 20px;
	margin: 0 .5em 1em 0;
	width: 20px;
}

.shareFacebook {
	background-color: #1877F2;
	background-image: url('/images/icons/social/facebook.svg');
}

.shareTwitter {
	background-color: #1DA1F2;
	background-image: url('/images/icons/social/twitter.svg');
}

.shareLinkedin {
	background-color: #0A66C2;
	background-image: url('/images/icons/social/linkedin.svg');
}

.shareGoogle {
	background-color: #DD4B39;
	background-image: url('/images/icons/social/google-plus.svg');
}





/* FORMS AND INPUTS ------------------------------ */

input, select, textarea {
	font-size: 1em;
	line-height: 1.2em;
}

input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"])), select, textarea {
	width: 100%;
}

input:is([type="button"], [type="date"], [type="submit"], [type="text"], [type="reset"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select {
	border-radius: 0;
	outline: none;
}

input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select {
	background-color: #FFF;
	border: 1px solid #BABABA;
	border-radius: .625em;
	padding: .9em .75em;
}

.wsManagementLogin :is(input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select) {
	padding-block: .5em;
}


:is(input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select):focus {
	background-color: #FFF;
	border-color: var(--ws-blue);
}

textarea {
	display: block;
	resize: vertical;
}

select {
	background: #FFF url('/images/icons/select-arrows.svg') no-repeat calc(100% - .875em) 50%;
	padding-right: 2.15rem;
	width: auto;
	-webkit-appearance: none;
	-moz-appearance: none;
}

select::-ms-expand {
	display: none;
}

select option {
	padding: 0 .2em;
}


input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.formTable,
:where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
	width: 100%;
}

/* Hide the 'X' from Chrome search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}


#ContactForm fieldset {
	border: 0;
	margin: .5em 0 0;
	padding: 0;
}

#ContactForm fieldset legend {
	padding: 0;
}

#ContactForm fieldset table {
	margin-left: 2em;
}


.subjClass {
	display: none !important;
}

#Captcha label {
	padding-left: 0;
}

:is(.formEdit, .formBuilder) select {
	width: 40%;
}

.formTable table td {
	padding-bottom: 0;
}

.formTable.right td:first-child {
	text-align: right;
	width: 1%;
}

.formTable.right td {
	width: auto;
}


/* New contact form markup */

form.narrow .form-flex,
.narrow.form-flex {
	max-width: 18.75em;
}

.form-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-flex fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.form-flex fieldset legend {
	float: left;
	width: 100%;
}

.form-flex>div {
	margin: 0 0 .75em;
}

.form-flex .full {
	width: 100%;
}

.form-flex>div>label:first-of-type {
	display: block;
}

/* Checkboxes, radios */
.form-flex>div>fieldset>label {
	display: inline-block;
}




/* BUTTONS ------------------------------ */

button, .button, input:is([type="button"], [type="submit"], [type="reset"]) {
	background: var(--ws-red);
	border: 0;
	border-radius: .625em;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	padding: .75em 1.625em;
}

:is(button, .button).outline {
	background: #FFF;
	border: 1px solid #BABABA;
	border-radius: .625em;
	color: #000;
	font-weight: 400;
}

.button {
	display: inline-block;
}

button img {
	height: 1em;
	vertical-align: top;
	width: auto;
}

.buttons {
	margin-block: 2em;
}

.buttons:last-child {
	margin-bottom: 0;
}


.buttons :is(button, .button, input[type="button"], input[type="submit"], input[type="reset"]) {
	margin: .25em .25em .25em 0;
}




/* MANAGEMENT ------------------------------ */

hr + .manage {
	margin-top: -1em;
}

.manage {
	border-bottom: 1px solid rgba(0,0,0,.2);
	line-height: 1.3;
	width: 100%;
}

.manage th {
	border-bottom: 1px solid rgba(0,0,0,.2);
	text-align: left;
}

.manage th.right {
	text-align: right;
}

.manage th.sort {
	cursor: pointer;
}

.manage th.sort img {
	margin-left: 5px;
}

.manage th img {
	bottom: -2px;
	position: relative;
}

.manage td,.manage th {
	padding: 5px 5px 5px 0;
}

.manage td:first-child {
	padding-left: .8em;
}

.manage img.preload {
	border: solid 1px #fff;
	display: none;
	position: absolute;
	top: 0;
	z-index: 10;
}

.manage td.icons img {
	bottom: -2px;
	margin-left: 5px;
	position: relative;
}

.manage td:first-child.icons img {
	margin-left: 0;
}

.manage td:first-child.icons {
	padding-inline: 3px;
}

.manage td:nth-child(2) {
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
}

.manage td.icons a:first-child img {
	margin-left: 0;
}

.manage td.icons input {
	bottom: 2px;
	margin-left: 5px;
	position: relative;
}

.manage .hidden {
	color: #900;
	font-style: italic;
}

.manageButton {
	padding: 10px 0;
	text-align: right;
}

.alternate tbody tr:nth-child(even), .even {
	background: #FFF;
}

.alternate tbody tr:nth-child(odd), .odd {
	background: rgba(0,0,0,.06);
}

.manage + hr, .manage + .manageLinks + hr {
	margin-top: 50px;
}

.manageLinks {
	margin-top: 10px;
}

.manageLinks select {
	max-width: 20em;
}

.manageLinks a {
	white-space: nowrap;
}

.manageLinks a img {
	bottom: -2px;
	position: relative;
}

.manageLinks button {
	margin-left: 5px;
}

.manageButtons {
	padding: 10px 0;
	text-align: right;
}

.wsReturnToButton {
	float: right;
	margin-top: -3.5em;
}

.manage.rightFirstChild td:first-child {
	text-align: right;
}

.sortRow th {
	cursor: pointer;
}

.manageEllipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 200px;
}

.manage colgroup col {
	width: auto !important;
}


/* pagination */
.pagination {
	font-size: .95em;
	text-align: right;
}




/* PAGEHEADER ------------------------------ */

.pageHeader {
	width: 100%;
	height: auto;
	margin-bottom: 2em;
}




/* FORM ERRORS ------------------------------ */

.form-error {
	color: #EE0000;
	font-size: 0.9375em;
}

.reverse .form-error {
	background: #EE0000;
	color: #FFF;
}

.formError {
	background-color: #000;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 2px 2px #333;
	color: #FFF;
	display: none;
	margin: 0 0 2px;
	padding: .3125em .625em;
	z-index: 5;
}

.formError p {
	font-size: .9em;
	margin: 0;
}

.formError em {
	border: 10px solid;
	border-color: #000 transparent transparent;
	bottom: -1.0625em;
	display: block;
	height: 0;
	left: 2.5em;
	position: absolute;
	width: 0;
}




/* FOOTER ------------------------------ */

body>footer {
	background: #FFF;
	color: #000;
	padding: 1.875em var(--ws-gap) 1.75em;
	position: relative;
	text-align: center;
	z-index: 0;
}

body>footer a {
	color: #000;
	display: inline-block;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: .125em;
	line-height: 1.6875rem;
}

body>footer a.on {
	color: var(--ws-red);
	text-decoration-color: var(--ws-red);
}

body>footer img.insta-oil {
	margin: 0 0 1.5em;
	max-width: 6.625em;
}

body>footer .downloads {
	margin: 0 0 1.25em;
}

body>footer :is(.copyright, #exposure) {
	font-size: 0.75em;
}

body>footer .copyright {
	margin: 0 0 1.25em;
}

body>footer>.wrap nav {
	display: inline;
}




/* TRANSITIONS ------------------------------ */

a, a *, button, .button, input:is([type="button"], [type="submit"], [type="reset"]),
input, select, textarea,  #navContainer li, #popover .close {
	transition: var(--ws-transition);
}

.stop-transitions * {
	transition: none !important;
}



/* ANIMATIONS ------------------------------ */

@media screen and (prefers-reduced-motion: no-preference) {

	@keyframes icon-sink {
		100% { transform: translate(-50%,.5em); }
	}


	@keyframes icon-hang {
		0% { transform: translate(-50%,.5em); }
		50% { transform: translate(-50%,.125em); }
		100% { transform: translate(-50%,.5em);  }
	}

}




/* DOWNLOADS ------------------------------ /
* - Footer, homepage hero
*/

.downloads {
	display: flex;
	gap: clamp(1em, 0.636em + 1.82vw, 2em);
	justify-content: center;
}

.downloads img {
	height: 2.9375em;
	transition: var(--ws-transition);
	width: auto;
}



/* FAQS ----------------------------- */

.faqs-wrap {
	background: #FFF;
	border-radius: 0.625em;
	box-shadow: 0 0.25em 1.125em -0.625em rgba(0, 0, 0, 0.25);
	margin-block: 2em;
	padding: 2.5em clamp(1em, 0.455em + 2.73vw, 2.5em);
}

.faqs-wrap h2 {
	margin: 0 0 1.125em;
}

details {
	background: var(--ws-light-2);
	border-radius: .625em;
	color: var(--ws-blue);
	margin: 0 0 .375em;
	position: relative;
	transition: all .3s ease;
}

details[open] {
	background: var(--ws-light);
}

details summary {
	color: var(--ws-blue);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: .5em 3em .5em .75em;
	transition: var(--ws-transition);
	-webkit-appearance: none;
}

details summary::-webkit-details-marker {
	display: none;
}

details summary::before {
	aspect-ratio: 1;
	background: var(--ws-red);
	content: '';
	inset: .5em .875em auto auto;
	mask: url('/images/icons/angle-down.svg') no-repeat center / contain;
	position: absolute;
	transition: var(--ws-transition);
	width: 1.5em;
}

details[open] summary::before {
	transform: rotate(-180deg);
}

details>div {
	padding: .5em .75em 1.5em;
}




/* PRICE TABLE ----------------------------- */

.price-table {
	background: #FFF;
	border-radius: 0.625em;
	box-shadow: 0 0.25em 1.125em -0.625em rgba(0, 0, 0, 0.25);
	margin-block: 2em;
	padding: 2.5em clamp(1em, 0.455em + 2.73vw, 2.5em);
}

.price-table h2 {
	margin: 0 0 1.125em;
}

.price-table th {
	color: #666;
	font-style: italic;
}

.price-table :is(th, td) {
	padding: .4375em;
	user-select: none;
}

.price-table tbody tr {
	border-top: 1px solid var(--ws-light-3);
}





/* HERO ----------------------------- /
* - Homepage
*/

.hero {
	color: #FFF;
	padding-inline: 1.75em;
	text-align: center;
}

.hero .textbox>div {
	margin-inline: auto;
	width: min(23.4375em, 100%);
}

.hero figure.logo {
	margin: 0 auto var(--ws-margin);
	max-width: 11.25em;
}

.hero h1 {
	color: #FFF;
	font-size: 1.5em;
}

.hero p {
	margin: var(--ws-margin) 0 .375em;
}

/* Form */
.hero form>div {
	position: relative;
}

.hero input[type="tel"] {
	border-radius: 1.875em;
	height: 3.125em;
	padding: 0 5em 0 1.25em;
}

.hero form button {
	aspect-ratio: 1.5/1;
	border-radius: 0;
	bottom: 0;
	height: 100%;
	mask: url('/images/icons/search.svg') no-repeat center / 1.25em auto;
	padding: 0;
	position: absolute;
	right: 0;
}

/* Today's Price */
.hero span.todays-price {
	background: rgba(255,255,255,.1);
	border-radius: .625em;
	display: block;
	font-size: .75em;
	margin: 0 0 .75em;
	padding: 1.25em;
}

.hero span.todays-price b {
	display: block;
	font-size: 1.667em;
}

/* Price table */
.hero .table {
	border: 1px solid rgba(255,255,255,.2);
	border-radius: .625em;
	margin: 0 0 .375em;
	padding: .3125em 1.25em;
}

.hero table {
	text-align: left;
	width: 100%;
}

.hero table td {
	padding: .3125em 1.25em;
}

.hero table tr:not(:last-child) td {
	border-bottom: 1px dashed rgba(255,255,255,.2);
}

.hero .minimum {
	color: rgba(255,255,255,.7);
	display: flex;
	font-size: .75em;
	justify-content: space-between;
}

.hero .minimum a {
	color: rgba(255,255,255,.7);
	text-decoration: underline;
}




/* GET OIL ------------------------------ /
* - Homepage
*/

.get-oil {
	border-bottom: 1px solid var(--ws-light);
	padding-inline: 1.75em;
	position: relative;
	z-index: 0;
}

.get-oil .faqs-wrap {
	margin-block: 0;
	padding-inline: clamp(1em, 0.545em + 2.27vw, 2.25em);
}

.get-oil .button {
	display: table;
	margin: 2em auto 0;
}

.get-oil h2 {
	margin: 0 0 .375em;
	text-align: center;
}

.get-oil .textbox p {
	text-align: center;
}

.get-oil ol {
	list-style: none;
	margin: 2em auto 0;
	max-width: fit-content;
	padding: 0;
	position: relative;
}

.get-oil ol::before {
	background: var(--ws-blue);
	content: '';
	inset: 1em auto 2em 1.6875em;
	position: absolute;
	width: 1px;
}

.get-oil li {
	font-size: .875em;
	padding-left: clamp(5em, 4.818em + 0.91vw, 5.5em);
	position: relative;
}

.get-oil li:not(:last-child) {
	margin: 0 0 clamp(2em, 1.636em + 1.82vw, 3em);
}

.get-oil li::before {
	aspect-ratio: 1;
	background: var(--ws-red) no-repeat center / auto 1.25em;
	border: 3px solid var(--ws-light-3);
	border-radius: 50%;
	content: '';
	height: 3.875em;
	inset: -.9375em auto auto 0;
	position: absolute;
}

.get-oil li:nth-child(1)::before { background-image: url('/images/icons/download.svg'); }
.get-oil li:nth-child(2)::before { background-image: url('/images/icons/frontend/process-calendar.svg'); }
.get-oil li:nth-child(3)::before { background-image: url('/images/icons/credit-card.svg'); }
.get-oil li:nth-child(4)::before { background-image: url('/images/icons/frontend/process-check.svg'); background-size: auto 1.125em; }

.get-oil li>b {
	display: block;
	font-size: 1.29em;
}

.get-oil .faqs-wrap h2 {
	margin: 0 0 1.5em;
}

.get-oil .button.outline {
	padding-inline: 1.125em 2.375em;
	position: relative;
}

.get-oil .button.outline::after {
	aspect-ratio: 1;
	background: var(--ws-red);
	content: '';
	height: .875em;
	inset: 50% 1em auto auto;
	mask: url('/images/icons/arrow-right.svg') no-repeat center / contain;
	position: absolute;
	transform: translateY(-50%);
	transition: var(--ws-transition);
}





/* REWARDS ----------------------------- /
* - Homepage
*/
#rewards {
	background: linear-gradient(169deg, #001125 40%, #DC0032 100%);
	color:#fff;
	padding: 3.75rem 1.75em 4.375em;
	text-align: center;
}

#rewards .wrap {
	max-width: 31.25em;
}

#rewards h2 {
	color:#fff;
}

#rewards h2:before {
    background: var(--ws-red);
    content: "";
    display: block;
    height: 2rem;
    margin-bottom: 0.5rem;
    mask-image: url(/images/icons/dollar-circle.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}



/* DIALOG / POPUP ------------------------------ /
* - Service Available / Not Available dialog
*/

dialog {
	border: 0;
	border-radius: .5em;
	line-height: 0;
	max-height: calc(100vh - 2em);
	max-width: calc(100% - 2em);
	overflow: visible;
	padding: 0;
	position: relative;
	text-align: center;
	width: min(20.9375em, 100%);
}

dialog::backdrop {
	background: var(--ws-blue);
	opacity: .8;
}

dialog button.close {
	aspect-ratio: 1;
	background: #FFF !important;
	border-radius: 0;
	height: 2em;
	inset: -2.5em 0 auto auto;
	margin: 0;
	mask: url('/images/icons/x-mark.svg') no-repeat center / auto 1.25em;
	padding: 0;
	position: absolute;
}

dialog button.close:is(:hover,:focus-visible) {
	opacity: .75;
	outline: 0;
}

dialog p {
	text-wrap: balance;
}


/* Top */
dialog .dialog-content {
	border-radius: 0.5em;
	line-height: 1.5;
	overflow: hidden;
}

dialog .top {
	padding: 1.25em;
}

dialog .top strong {
	color: #000;
	display: block;
	font-size: 1.25em;
}

dialog .top strong::before {
	aspect-ratio: 20 / 19;
	background: var(--ws-red);
	content: '';
	display: block;
	margin: 0 auto .375em;
	mask: no-repeat center / contain;
	width: 1em;
}

dialog .top strong.available::before {
	mask-image: url('/images/icons/check.svg');
}

dialog .top strong.not-available::before {
	mask-image: url('/images/icons/exclamation.svg');
}


/* Bottom */
dialog .bottom {
	background: var(--ws-light);
	padding: 1.875em 1.25em;
}

dialog .downloads {
	gap: 1.125em;
	line-height: 1;
}

dialog form {
	text-align: left;
}

dialog input[type="email"] {
	margin: 0 0 1.25em;
}

dialog form button {
	border-radius: .625em;
	display: block;
	width: 100%;
}



/* -------~~~~~~~======= STYLE.CSS =======~~~~~~~------- */