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



body {
  scroll-padding-top: 7em;
}




/* HOVER ------------------------------*/

a:is(:hover, :focus-visible), a:is(:hover, :focus-visible) * {
	color: var(--ws-blue);
}


:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])):is(:hover, :focus-visible) {
	background-color: var(--ws-blue);
	color: #FFF;
}

:is(button, .button).outline:is(:hover,:focus-visible) {
	background: #FFF;
  border-color: var(--ws-red);
	color: var(--ws-red);
}


fieldset label:first-of-type input:is(:hover, :focus-visible) {
	outline: 1px solid var(--ws-red);
}





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

body:not(#tinymce) {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Fixes horizontal overflow issue */
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

body>footer {
  align-self: end;
}

body:not(.home).management {
  margin-top: 0 !important;
}





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

body>header {
	align-items: center;
	background: var(--ws-blue);
	display: flex;
	justify-content: space-between;
	padding: 1.5em clamp(1.5em, 0.458em + 2.22vw, 2.125em) 1.5em clamp(1.5em, -1.208em + 5.78vw, 3.125em);
	position: sticky;
	top: 0;
	z-index: 1;
}

body>header>aside {
	position: absolute;
}

body.scroll>header {
	box-shadow: 0 1px 1px rgba(0,0,0,.015),0 2px 2px rgba(0,0,0,.015),0 4px 4px rgba(0,0,0,.015),0 8px 8px rgba(0,0,0,.015),0 16px 16px rgba(0,0,0,.015);
}

body.management>header {
	margin-top: 35px;
	top: 35px;
}


#brand {
	display: block;
	max-width: 11.25em;
	width: 100%;
}

#brand img {
	display: block;
	height: auto;
	width: 100%;
}

nav ul {
	margin: 0;
}

#mainnav {
	overflow: visible;
}

#mainnav ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

#mainnav li {
	display: inline-block;
	position: relative;
}

#mainnav a {
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

/* T1 */
#mainnav>ul {
	display: flex;
	gap: 1em;
}

#mainnav>ul>li>a {
	border-radius: 1.5625em;
	color: #FFF;
	padding: 1.0625em 1.625em;
}

#mainnav>ul>li:hover>a,
#mainnav>ul>li>a:focus-visible {
	background: #FFF;
	color: var(--ws-red);
}

#mainnav>ul>li.on>a {
	background: var(--ws-red);
	color: #FFF;
}


/* Accessible dropdowns */
#mainnav>ul>li>button {
	background: transparent;
	bottom: 0;
	border: 0;
	height: .5rem;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	right: 50%;
	transform: translate(50%,-50%);
	width: 1.25rem;
}

#mainnav>ul>li>button:focus-visible {
	opacity: 1;
}

#mainnav>ul>li>button:before {
	background: url('/images/icons/misc/chevron-down.svg') no-repeat center / contain;
	content: '';
	height: .75rem;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
}



/* Dropdown menus */

#mainnav li ul {
  background: rgba(0,0,0,.8);
  height: auto !important;
  left:0;
  opacity: 0;
  padding: .5em 0;
  position: absolute;
  top: -200vh;
  visibility: hidden;
  width: 16em;
}

#mainnav li:hover ul,
#mainnav>ul>li.tapped > ul,
#mainnav>ul>li>a:focus + ul,
#mainnav>ul>li.expand>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/* fade out */
#mainnav li:not(.expand) ul {
  transition:
  opacity .2s ease-out 0.25s,
  visibility .2s ease-out 0.25s,
  top 0s linear 0.5s;
}

/* fade in */
#mainnav>ul>li:is(:hover, .expand)>ul {
  transition:
  opacity .2s ease-in .25s,
  top 0s linear .25s,
  visibility .2s ease-in 0s;
}

#mainnav>ul>li:last-child ul {
	left: auto;
	right: 0;
}

#mainnav>ul>li>ul>li {
	display: block;
	width: 100%;
}

#mainnav>ul>li>ul>li>a {
	color: #FFF;
	display: block;
	font-size: 1em;
	line-height: 1.1;
	padding: .25em .75em;
	text-align: left;
	width: 100%;
}

#mainnav li ul li a:is(:hover, :focus-visible) {
	background: #FFF;
	color: #000;
}

#mainnav li ul ul {
	display: none;
}


/* mobile */
#mobilenav, .menu {
	content-visibility: hidden;
	display: none;
}





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

main.interior>div.wrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

body.fullWidth main>div>#content {
	float: none;
	margin: 0 auto;
	max-width: clamp(46.875rem, 7.5rem + 43.75vw, 60rem);
	padding: 3.75em 0 clamp(4em, 0.667em + 7.11vw, 6em);
	width: 100%;
}




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

.photoright {
	margin: 0 0 2em clamp(2em, -1.333em + 7.11vw, 4em);
}

.photoleft {
	margin: 0 clamp(2em, -1.333em + 7.11vw, 4em) 2em 0;
}

.wsManagementLogin td:first-child {
	text-align: right;
	width: 40%;
}

.twoCol {
	columns: 2;
}

.threeCol {
	columns: 3;
}

.resCol {
	columns: auto;
	column-width: 13em;
}

.shareIcons a:is(:hover, :focus-visible) {
	background-color: #FF0000;
}




/* FORMS ------------------------------ */

.formTable td {
	width: 50%
}

.formTable td {
	padding: 0 0 .5em .5em
}

.formTable td:first-child {
	padding: 0 .5em .5em 0
}

.formTable td[colspan="2"] {
	padding-right: 0
}

.formTable.formLoose,
.formTable.formLoose td {
	width: auto
}


/* New contact form markup */
.form-flex .half {
	width: calc(50% - .5em);
}

.form-flex .third {
	width: calc(33.33% - .5em);
}

.form-flex .quarter {
	width: calc(25% - .5em);
}




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

.downloads a:is(:hover,:focus-visible) img {
  transform: scale(.95);
}




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

body>footer a:is(:hover, :focus-visible) {
	color: var(--ws-red);
}

body>footer .wrap nav span:before {
	content: "|";
	margin: 0 0.8125em;
}




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

details:is(:hover,:focus-visible) {
  background-color: var(--ws-light);
}

details:is(:hover,:focus-visible) summary::before {
  background: var(--ws-blue);
}




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

.hero {
	background: linear-gradient(150deg, var(--ws-blue) 40%, var(--ws-red) 100%);
  padding-block: 3.375em 4em;
  position: relative;
  --ws-margin: clamp(2.5em, 0.833em + 3.56vw, 3.5em);
}

.hero .wrap {
  display: flex;
  gap: 2em;
  justify-content: space-between;
}

.hero .textbox {
  min-width: 23.4375em;
  width: calc(50% - 1em);
}

.hero .minimum a:is(:hover,:focus-visible) {
  color: #FFF;
}


.hero .images {
  max-width: 34.375em;
  width: calc(50% - 1em);
}

.hero .images figure {
  margin-bottom: calc(-22% / (1042 / 1633)) /* Aspect ratio of the image */
}

.hero .jump-link {
  aspect-ratio: 12 / 35;
  background: url('/images/icons/jump-link.svg');
  inset: auto auot 1em 50%;
  position: absolute;
  transform: translate(-50%, 0);
  width: .75em;
}

.hero .jump-link:is(:hover,:focus-visible) {
  animation: icon-sink .5s ease-out 0s 1 normal forwards, icon-hang 1.5s ease-out .5s infinite alternate forwards;
}





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

.get-oil {
  padding-block: 4.25em 5.625em;
}

.get-oil::before {
  background: #FFF;
  content: '';
  inset: 0 50% 0 0;
  position: absolute;
  z-index: -1;
}

.get-oil .wrap {
  display: flex;
  justify-content: space-between;
  max-width: calc(80.25em + 2 * var(--ws-gap));
}

.get-oil .wrap>div {
  width: 50%;
}

.get-oil .wrap>div:first-child {
  padding-right: 1em;
}

.get-oil .wrap>div:last-child {
  margin-top: clamp(0em, -23.273em + 36.36vw, 4em); /* 1024 - 1200 */
  padding-left: 1em;
}

.get-oil .faqs-container {
  margin-inline: auto;
  max-width: 34.8125em;
}





/* REWARDS ----------------------------- /
* - Homepage
*/
#rewards p strong {
	display: block;
}




/* MAX WIDTH MEDIA QUERIES ------------------------------ */




/* MIN WIDTH MEDIA QUERIES ------------------------------ */

/* 1800px */
@media (min-width: 112.5em) {
  body { font-size: 1.1em; }
}


/* 2400px */
@media (min-width: 150em) {
  body { font-size: 1.2em; }
}




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