/* ========================================== */
/* MRCOOL COLOR Scheme [DML 06-20]: */
/* ========================================== */

/*
MrCool Blue (210H) = #004A97;
MrCool Navy (210H) = #0F2A45;
MrCool Lt Blue (210H) = #1C8EFF;
MrCool XLt Blue (210H) = #54AAFF;

Black (210H) = #282A2B;
Lt Blk (210H) = #303336;
Charcoal (210H) = #525557;
Med Grey (210H) = #797C80;
Lt Grey (210H) = #A6A8AB;
Silver (210H) = #DCE0E3;
White (210H) = #F0F4F7;

Contrast Triad (15H & 45H):
#ffcd38
#ff7f54
*/

/* ========================================== */
/* END: MRCOOL COLOR Scheme [DML 6-20]: */
/* ========================================== */

/* ========================================= */
/** CSS Reset based on Eric Meyers css reset*/
/* ========================================= */

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

q:before,
q:after {
  content: "";
}

blockquote:before,
blockquote:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  text-decoration: none;
  color: unset;
}

/* ========================================= */
/** New DML Defaults */
/* ========================================= */
html {
  font-size: 17px;
  line-height: 1.5em;
}

body {
  background-color: #f0f4f7;
  color: #525557;
}

h1 {
  text-align: center;
  font-size: 3.325rem;
  line-height: 5rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
}

h2 {
  text-align: center;
  color: #1c8eff;
  font-size: 2.325rem;
  line-height: 2.25rem;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

h3 {
  text-align: center;
  font-size: 1.875rem;
  line-height: 3rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

h4 {
  text-align: center;
  font-size: 1.325rem;
  line-height: 2.67rem;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 300;
}

h5 {
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.67rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}

h6 {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.67rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  color: #303336;
}

p,
li {
  font-size: 1rem;
  line-height: 1.5rem;
}

small {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

.svgBtn {
  background-color: transparent;
  border: 0;
  padding: 0;
}

a:hover {
  font-size: 1.125rem;
}

b {
  font-weight: bold;
}

/* ========================================= */
/** Main & Header */
/* ========================================= */

header .title {
  position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #f0f4f7;
  text-align: center;
  line-height: 3.5rem;
  min-width: 89%;
}

.popMenu {
  margin: 17px auto;
  z-index: 3;
  padding: 17px;
  max-width: 34%;
  border-radius: 5px;
  background-color: rgba(240, 244, 247, 0.55);
  color: #004a97;
  text-align: center;
  -webkit-box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  -webkit-animation: e-z 0.42s ease-in-out 0s 1 normal;
  animation: e-z 0.42s ease-in-out 0s 1 normal;
}

.popMenu li a {
  line-height: 2rem;
  font-size: 1.25rem;
}

.header-icon {
  width: 67px;
  height: 67px;
  margin: -17px 13px;
}

.header-icon:hover {
  width: 73px;
  height: 73px;
  margin: -17px 7px;
}
#shop-now {
  width: 144px;
  height: 67px;
  margin: -17px 5px;
}

#shop-now:hover {
  width: 150px;
  height: 73px;
  margin: -20px 2px;
}

.reg-mark {
  vertical-align: super;
  font-size: 0.34em;
  margin: -5px 0 -5px 0;
}

/* ========================================= */
/** NavBar */
/* ========================================= */

.navbar {
  z-index: 5;
  width: 100vw;
  padding: 21px 3.25vw;
  max-height: 78px;
  min-height: 55px;
  height: 78px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background-color: #f0f4f7; */
  background-color: rgba(0, 74, 151, 0.34);
  -webkit-box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);

  border-bottom: 3px solid rgba(240, 244, 247, 0.34);
  /** Not using sticky and making nav bar fixed */
  position: fixed;
  top: 0;
}

.navbar ul {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
}

/** sticky class added to navbar with JS when it passes its scroll position */
.sticky {
  position: fixed;
  top: 0;
}

/** Add margin to top of banner below nav as the navbar is repositioned to fixed and top:0 */
/* .sticky + .banner {
	margin-top: 34px;
} */

.nav-icon-cont {
  /* position: absolute;
	top: 8px;
	margin: 0 8px;*/
  width: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /** for when maxed out space icons */
  /* -webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	-webkit-justify-content: space-evenly;
	justify-content: space-evenly; */
  /** for full spread of icons */
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.navbar ul.e-z {
  margin: 15.5px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  background-color: rgba(240, 244, 247, 0.78);
  border-radius: 5px;
  padding: 1.618vh 1.618vw;
  max-height: 67vh;
  max-width: 67vw;
  -webkit-box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  /** using animation */
  -webkit-animation: e-z 0.34s ease-in-out 0s 1 normal;
  animation: e-z 0.34s ease-in-out 0s 1 normal;
  top: 67px;
  right: 34px;
}

.navbar ul.e-z-rev {
  height: 0;
  width: 0;
  opacity: 0;
  -webkit-box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  -webkit-animation: e-z 0.67s ease-in-out 0s 1 normal;
  animation: e-z 0.67s ease-in-out 0s 1 normal;
}

/* ========================================= */
/** Banner */
/* ========================================= */

.banner {
  display: block;
  position: relative;
  overflow: hidden;
  /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
  /** make smaller on larger screens and scale for mobile */
  height: calc(56vw / 2);
  max-width: 100vw;
  /** Not using sticky and making nav bar fixed */
  margin-top: 78px;
}

.banner .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: #54aaff;
	opacity: 0.5; */
  z-index: 0;
}
.banner .overlay img {
  opacity: 0.5;
  z-index: 1;
}

.banner img,
.banner video {
  max-width: 100vw;
  min-width: 100%;

  position: absolute;
  z-index: -1;
  /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
  /** make smaller on larger screens and scale for mobile  -5vw adjust here, then set to 0 once banner height changes in @media*/
  left: 0;
  top: -5vw;
}

.vid-click-cont {
  margin: 3.125%;
  margin-bottom: 3.125%;
}

/* ========================================= */
/*  Sections */
/* ========================================= */

section {
  position: relative;
  max-width: 100vw;
  overflow: hidden;
}

.container {
  max-width: 100vw;
  padding: 3.25% 6.125%;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
}

.cta-1 {
  background-color: #f0f4f7;
}
.cta-2 {
  background-color: #54aaff;
  padding: 1.618% 3.25%;
}

#cta-3 img,
#cta-4 img {
  margin: -5px 0;
  width: 100%;
}
#cta-4 {
  background-color: #f0f4f7;
  padding: 0;
}
#cta-8 img {
  margin: 0 22.5%;
  width: 55%;
}

.title {
  margin: 34px 0 21px 0;
}

.leftOver {
  font-size: 1.25rem;
  position: absolute;
  width: 34%;
  top: 25%;
  left: 3%;
  border-radius: 5px;
  background-color: rgba(240, 244, 247, 0.55);
  color: #004a97;
  text-align: left;
  -webkit-box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  -webkit-animation: e-z 0.42s ease-in-out 0s 1 normal;
  animation: e-z 0.42s ease-in-out 0s 1 normal;
  padding: 2vh 3vw;
}

.leftOver ul li {
  line-height: 2.5rem;
  /* padding-left: 13px;
	margin-left: 8px; */
  list-style-position: inside;
}

/** set to after leftOver before @media 1080 - before leftOver fills left - then center after */
.centerAfter {
  position: absolute;
  bottom: 8%;
  left: 3%;
  width: 42%;
  margin: 21px auto;
  border-radius: 5px;
  background-color: rgba(240, 244, 247, 0.55);
  color: #004a97;
  text-align: left;
  -webkit-box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  padding: 2vh 3vw;
}
.inner-div {
  /** important for switch from 2 to 1 column */
  text-align: center;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  width: 47%;
  margin: 0 1.5%;
  padding: 0;
}

.icon-div {
  /** important for switch from 2 to 1 column */
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 42%;
  margin: 4%;
  padding: 1%;
  /** VERY important fix to mousemove / pointermove breaking on touch devices issue */
  /* touch-action: none; */
}

.icon-tab {
  margin: 8px;
  padding: 13px;
  /* background-color: rgba(240, 244, 247, 0.55);
	-webkit-box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
	box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21); */
  border-radius: 5px;
  border-bottom: 3px solid rgba(121, 124, 128, 0.13);
  border-left: 3px solid rgba(121, 124, 128, 0.13);
}

.icon-tab > img.reveal-icon {
  margin: 1.5vw;
}

.icon-p {
  margin: 3px;
  padding: 3px;
  border-bottom: 2px solid rgba(84, 170, 255, 0.13);
}

/* ========================================= */
/* DoxSxn  */
/* ========================================= */
.dox-link-tab {
  margin: 21px;
  padding: 21px;
  background-color: rgba(240, 244, 247, 0.55);
  color: #004a97;
  text-align: left;
  -webkit-box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  height: 360px;
  width: 280px;
}

.dox-link-inner {
  position: relative;
  font-size: 1.5rem;
  line-height: 2rem;
  border-bottom: 3px solid rgba(84, 170, 255, 0.55);
  background-color: rgba(240, 244, 247, 0.67);
  padding: 8px;
}

/** rendered inline with react useState / useEffect with async await promise check for webp */
/* #dox-tab-1 {
	background-image: url("/img/uni-card-full.jpg");
}
#dox-tab-2 {
	background-image: url("/img/uni-card-2-3-cond.jpg");
}
#dox-tab-3 {
	background-image: url("/img/uni-card-4-5-cond.jpg");
}
#dox-tab-4 {
	background-image: url("/img/uni-card-ah.jpg");
}
#dox-tab-5 {
	background-image: url("/img/uni-card-ah.jpg");
} */

.down-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42px;
  height: 42px;
  margin: 0 0 -21px -21px;
}

/* ========================================= */
/* Eco-Rebates */
/* ========================================= */

#eco-rebates-bar,
#eco-rebates-bar2,
#eco-rebates-bar3 {
  font-size: 2.325rem;
  text-align: center;
  padding: 1%;
}
#eco-rebates-bar span,
#eco-rebates-bar2 span,
#eco-rebates-bar3 span {
  color: #f0f4f7 !important;
}

#eco-rebates-bar *:hover,
#eco-rebates-bar *:focus,
#eco-rebates-bar2 *:hover,
#eco-rebates-bar2 *:focus,
#eco-rebates-bar3 *:hover,
#eco-rebates-bar3 *:focus {
  text-decoration: none !important;
  outline: none !important;
  border: none !important;
}

.eco-m a:focus,
.eco-m a:hover {
  font-size: 1.125em;
  text-decoration: none;
  outline: none;
  border: none;
}

/* ========================================= */
/*  DML 360 SPIN */
/* ========================================= */

.dml-360-div {
  /** important for switch from 2 to 1 column */
  display: inline-block;
  position: relative;
  width: 47%;
  margin: 1% 1.325%;
  /** VERY important fix to mousemove / pointermove breaking on touch devices issue */
  touch-action: none;
}

.dml-360-img {
  width: 100%;
}

#prespin-img {
  margin: 8% 3.5% -3% 3.5%;
  width: 100%;
}

#spin-overlay-img {
  /** important to not interact when spinning */
  pointer-events: none;
  position: absolute;
  /** match parent margins*/
  left: 1.325%;
  bottom: 0;
  margin-bottom: -3%;
  width: 100%;
}

/** in Sections For 360 img */

.spin-select {
  color: #525557;
  border-radius: 5%;
  border-top: none;
  border-bottom: none;
  border-left: 3.5px solid #004a97;
  border-right: 3.5px solid #004a97;
  margin: 0 8px;
  padding: 3px 8px;
  background-color: #f0f4f7;
}

/* ========================================= */
/*  Video */
/* ========================================= */

.yt-iframe {
  display: block;
  position: relative;
  overflow: hidden;
  /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
  /** make smaller on larger screens and scale for mobile */
  height: calc(56vw / 1.325);
  max-width: 100vw;
}

/* ========================================= */
/*  Forms */
/* ========================================= */

.cta-form {
  width: 100%;
  line-height: 2rem;
  position: relative;
  z-index: 1;
  /* margin: 42px 0; */
}

.select-div {
  /** important for switch from 2 to 1 column */
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 45%;
  margin: 0.5% 2.5%;
  padding: 0.5%;
  border-radius: 5px;
  /** VERY important fix to mousemove / pointermove breaking on touch devices issue */
  /* touch-action: none; */
}

#select-display {
  -webkit-box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  box-shadow: 0 5px 13px rgba(15, 42, 69, 0.21);
  border: 5px solid rgba(240, 244, 247, 0.34);
}

.cta-legend {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: #dce0e3;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
}

.cta-form input,
.cta-form select,
.cta-form textarea {
  /* display: inline-block; */
  display: block;
  background-color: rgba(220, 224, 227, 0.78);
  color: #004a97;

  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;

  border-radius: 5px;

  border: 1.5px solid #dce0e3;

  margin: 5px auto;
  padding: 0 8px;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5em;
}

.cta-form label {
  line-height: 3rem;
  margin: 5px auto;
  padding: 0 8px;
  /* display: inline-block; */
  display: none;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  color: #f0f4f7;
}
#cta-submit {
  /* display: block; */
  display: none;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.67rem;
  border-radius: 5px;
  margin: 21px auto;
  padding: 8px;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 300;
  color: #004a97;
}
.message {
  display: block;
  line-height: 2rem;
  color: #f0f4f7;
  text-align: center;
  font-weight: 600;
}

.err-msg {
  color: #303336;
}
.select-dealer {
  background-color: rgba(240, 244, 247, 0.55);
  -webkit-box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  box-shadow: 0 2px 3px rgba(15, 42, 69, 0.21);
  padding: 13px;
}

.select-dealer img {
  max-height: 72px;
  margin: 8px 13px;
}

.select-dealer h6 {
  margin-bottom: 13px;
}

.see-more {
  font-size: 1.125em;
  color: #004a97;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 5px;
  border-right: 3px solid rgba(255, 127, 84, 0.8);
  border-left: 3px solid rgba(255, 127, 84, 0.8);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="checkbox"] {
  display: inline;
  width: 21px;
  height: 21px;
  margin-left: 13px;
}

/* ========================================= */
/*	Reveal */
/* ========================================= */

#reveal-container {
  position: relative;
  width: 100%;
  min-height: 55vw;
  overflow: hidden;
  /** important for pointer events will not work on mobile without this */
  touch-action: none;
}

.layer {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
  overflow: hidden;
}

.layer .content-wrap {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
}

.layer .content-body {
  width: 25%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  color: #f0f4f7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.reveal-img {
  position: absolute;
  width: 35%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layer h1 {
  font-size: 2em;
}

.bottom-layer {
  background: #303336;
  z-index: 1;
}

.bottom-layer .content-body {
  right: 5%;
}

.bottom-layer h1 {
  color: #54aaff;
}

.top-layer {
  background: #f0f4f7;
  color: #303336;
  z-index: 2;
  width: 50vw;
}

.top-layer .content-body {
  left: 5%;
  color: #303336;
}

.handle {
  position: absolute;
  height: 100%;
  display: block;
  background-color: #54aaff;
  width: 8px;
  top: 0;
  left: 50%;
  z-index: 3;
}

#reveal-container .handle {
  top: 50%;
  transform: rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin: top;
}

#reveal-container .top-layer {
  transform: skew(-30deg);
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}

#reveal-container .top-layer .content-wrap {
  transform: skew(30deg);
  margin-left: 1000px;
}

.slider-arrows {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  width: 144px;
}

img.reveal-icon {
  position: relative;
  width: 5vw;
  margin: 2vw;
}

img.reveal-icon_2 {
  position: relative;
  width: 15vw;
  margin: 2vw;
}

.content-toptag {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  text-align: center;

  padding: 2px 4px;
  border-radius: 5px;
  border-right: 3px solid #54aaff;
  border-left: 3px solid #54aaff;
}

.content-toptag > a > p {
  font-size: 1.34rem;
}

.bottom-layer .content-toptag > a > * {
  color: rgb(255, 127, 84);
}

.top-layer .content-toptag > a > * {
  color: #004a97;
}

/* ========================================= */
/*  Footer */
/* ========================================= */

.foot {
  color: #f0f4f7;
  background-color: #525557;
  padding: 3.25% 6.125%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.footSocNet {
  /* width:34%; */
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.footContact {
  margin: 10.5px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.footCopyright {
  margin: 10.5px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

.soc-icon {
  width: 42px;
  margin: 10.5px;
}

.soc-icon:hover {
  width: 47px;
  margin: 8px;
}

.inline-svg {
  width: 17px;
  margin: 0 0 -4px 8px;
}

#toTopBtn {
  display: none;
  position: fixed;
  right: 34px;
  bottom: 34px;
  width: 55px;
  height: 55px;
  z-index: 99;
}

#toTopBtnSvg {
  display: none;
  width: 55px;
  height: 55px;
}

/* ========================================= */
/*  animations */
/* ========================================= */
.hide {
  display: none !important;
}
.show {
  display: block !important;
}

@-webkit-keyframes e-z {
  0% {
    opacity: 0;
    height: 0;
  }
  25% {
    opacity: 0.34;
    height: 25%;
  }
  50% {
    opacity: 0.5;
    height: 50%;
  }
  75% {
    opacity: 0.67;
    height: 75%;
  }
  100% {
    opacity: 1;
    height: 100%;
  }
}

@keyframes e-z {
  0% {
    opacity: 0;
    height: 0;
  }
  25% {
    opacity: 0.34;
    height: 25%;
  }
  50% {
    opacity: 0.5;
    height: 50%;
  }
  75% {
    opacity: 0.67;
    height: 75%;
  }
  100% {
    opacity: 1;
    height: 100%;
  }
}

@-webkit-keyframes e-z-rev {
  0% {
    opacity: 1;
    height: 100%;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes e-z-rev {
  0% {
    opacity: 1;
    height: 100%;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

/* ========================================= */
/*  @MEDIA responsive overrides */
/* ========================================= */

@media only screen and (max-width: 1440px) {
  #cta-8 img {
    margin: 0 16.5%;
    width: 67%;
  }
  .leftOver {
    width: 42%;
  }

  .banner {
    /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
    /** make smaller on larger screens and scale for mobile */
    height: calc(56vw / 1.618);
  }
}

@media only screen and (max-width: 1200px) {
  header .title {
    top: 20%;
  }
}

@media only screen and (max-width: 1080px) {
  /** New DML Defaults */

  html {
    font-size: 15px;
  }

  .popMenu {
    max-width: 55%;
  }

  .header-icon {
    width: 47px;
    height: 47px;
    margin: -17px 8px;
  }

  .header-icon:hover {
    width: 53px;
    height: 53px;
    margin: -20px 2px;
  }
  #shop-now {
    width: 94px;
    height: 47px;
    margin: -17px 5px;
  }

  #shop-now:hover {
    width: 100px;
    height: 53px;
    margin: -20px 2px;
  }
  .navbar {
    height: 67px;
  }
  .banner {
    margin-top: 63px;
  }
  .banner img,
  .banner video {
    /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
    /** make smaller on larger screens and scale for mobile  -5vw adjust here, then set to 0 once banner height changes in @media*/
    top: 0;
  }
  .centerAfter {
    position: relative;
    bottom: unset;
    left: unset;
    width: 67%;
  }

  .banner {
    /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
    /** make smaller on larger screens and scale for mobile */
    height: calc(56vw / 1.325);
  }
  #cta-8 img {
    margin: 0 5.5%;
    width: 89%;
  }
}

@media only screen and (max-width: 720px) {
  html {
    font-size: 13.5px;
  }
  .dml-360-div {
    width: 89%;
    margin: 1% 5.5%;
  }
  #prespin-img {
    margin: 8% 5.5% -1% 5.5%;
    width: 89%;
  }
  #spin-overlay-img {
    left: 5.5%;
    margin-bottom: -1%;
    width: 89%;
  }
  .icon-div {
    width: 89%;
    margin: 34px 5.5%;
    padding: 1% 3% 5.5% 3%;
    /** VERY important fix to mousemove / pointermove breaking on touch devices issue */
    /* touch-action: none; */
  }
  .select-div {
    width: 95%;
    margin: 0.5% 2.5%;
    padding: 1% 2%;
  }
  h2 {
    font-family: "Roboto Condensed", sans-serif;
  }
  .inline-svg {
    width: 13.5px;
    margin: 0 0 -2px 5px;
  }
  .popMenu {
    max-width: 67%;
  }

  .leftOver {
    top: unset;
    left: unset;
    position: relative;
    width: 100%;
    text-align: left;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    background-color: unset;
    margin: 21px;
  }

  .banner {
    /** important: uses aspect ratio of video to maintain responsive banner / header sizing */
    /** make smaller on larger screens and scale for mobile */
    height: 56vw;
  }

  .slider-arrows {
    width: 72px;
  }
}

@media only screen and (max-width: 560px) {
  /** New DML Defaults */

  html {
    font-size: 12px;
  }
  .popMenu {
    max-width: 89%;
  }
  .header-icon {
    width: 42px;
    height: 42px;
    margin: -17px 2.5px;
  }

  .header-icon:hover {
    width: 47px;
    height: 47px;
    margin: -17px 0px;
  }
  #shop-now {
    width: 84px;
    height: 42px;
    margin: -17px 2.5px;
  }

  #shop-now:hover {
    width: 90px;
    height: 47px;
    margin: -19.5px 0px;
  }
  .navbar {
    height: 58px;
  }
  .banner {
    margin-top: 55px;
  }
}

/** extra small phone screen fixes */
@media only screen and (max-device-width: 360px) {
  /** New DML Defaults */

  html {
    font-size: 10.5px;
  }

  header .title {
    top: 20%;
  }

  .no-small {
    display: none !important;
  }
}

/** ========================================= */
/** iOS fix */
/** ========================================= */

/* all ipad*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* all ipad landscape*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* .bg-image-27 {
	background-attachment: scroll;
	background-size: 100vh;
	} */

  header .title {
    top: 50%;
  }
}

/* iphone X*/
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
  /* .bg-image-27 {
	background-attachment: scroll;
	background-size: 200vh;
	} */

  header .title {
    top: 17%;
  }

  /* header {
		margin-top: 67px;
	} */
}

/* iphone X landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 100vh;
	} */

  header .title {
    top: 50%;
  }
}

/* android 8, 9, 10 */
@media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
  /* .bg-image-27 {
	background-attachment: scroll;
	background-size: 200vh;
	} */
}

/* android 8, 9, 10... landscape */
@media only screen and (min-device-width: 360px) and (max-device-width: 812px) and (orientation: landscape) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 100vh;
	} */

  header .title {
    top: 50%;
  }
}

/* iphone 6,7,8 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /* .bg-image-27 {
	background-attachment: scroll;
	background-size: 200vh;
	} */
}

/* iphone 6,7,8 + separate fix from iphone X */
/* @media only screen and (min-device-width: 410px) and (max-device-width: 740px) and (-webkit-device-pixel-ratio: 3) {

	header .title {
		top: 20%;
	}
} */

/* iphone 6,7,8 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 100vw;
	} */

  header .title {
    top: 50%;
  }
}

/* iphone 5, 5S */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 200vh;
    } */
}

/* iphone 5, 5S landscape*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 100vw;
	} */

  header .title {
    top: 50%;
  }
}

/* other iphone */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 200vh;

	} */
}

/* other iphone landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  /* .bg-image-27 {
        background-attachment: scroll;
        background-size: 100vh;
	} */

  header .title {
    top: 50%;
  }
}