body {position: relative; overflow: hidden; margin: 0; padding: 0; height: 100%; transform-style: preserve-3d;}



#replayHolder{
  position: absolute;
  display: flex;
  flex-flow: wrap-reverse;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#replayLightsButton{
  pointer-events: all;
  cursor: pointer;
  width: 164px;
  height: 27px;
  margin-bottom: 185px;
  bottom: 0%;
  display: none;
}

.w-layout-grid {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

#undergradient{
  z-index: 0;
/*   z-index: 4; */
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 20%;
  background: linear-gradient(0deg,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.45) 0%,
  hsla(0, 0%, 0%, 0) 100%
  );
  /*
  background: linear-gradient(0deg,
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
  );
  */
}

#loader{
  z-index: 6;
}

#bodyTextHolder{
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#deskTrayArrow{
  transform: rotateY(180deg);
  -webkit-transform: rotate(180deg);
}

#toggler{
  pointer-events: none;
}

#realToggle{
  pointer-events: all;
  cursor: pointer;
}


.loading-page {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: flex;
  width: 100vw;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('../images/loading_page_bg.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: scroll;
  z-index: 3;
}

.content {
  position: static;
  top: 30%;
}

.loading-page-headline {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.loading-page-headline-text {
  font-family: CadillacGothic-WideRegular, sans-serif;
  color: #fff;
  font-size: 27px;
  line-height: 27px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 8px;
}

.body {
  font-family: Cadillacgothic, sans-serif;
}

.loading-page-copy-text {
  width: 55%;
  margin-top: 40px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1.5px;
}

.logo-outline {
  display: block;
  width: 23%;
}


.scene {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
 
  background-position: 50% 50%;
  background-size: cover;
}

.nameplate {
  position: fixed;
  left: 0%;
  top: 2%;
  right: 0%;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}

.nameplate-logo {
  width: 128px;
  margin-bottom: 10px;
  pointer-events: auto;
}

.nameplate-text {
  font-family: CadillacGothic-WideBold, sans-serif;
  color: #fff;
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 4px;
  pointer-events: auto;
}

.ar-view {
  position: fixed;
  left: auto;
  top: 2%;
  right: 1.5%;
/*   padding: 2vh 2vw; */
  bottom: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 4;
  pointer-events: auto;
}

.ar-icon {
  width: 20px;
}

.ar-view-text {
  margin-right: 10px;
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  line-height: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.body-copy {
  position: absolute;
  left: auto;
  top: auto;
  right: auto;
  bottom: 9%;
  display: flex;
  width: 100%;
  flex-direction: column;
  
  align-items: center;
}

.body-copy-title {
  margin-bottom: 18px;
  font-family: CadillacGothic-WideRegular, sans-serif;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 6px;
}

.body-copy-text {
/*   width: 60%; */
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
}

#body-copy-asterisk-x-sup {
  font-size: 7px;
}

.disclaimer-interior {
  position: fixed;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 2.5%;
  z-index: 4;
  width: calc(100% - 130px - 3% - 187px - 3%);
  left: calc(130px + 3%);
}

.disclaimer-interior-text {
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  opacity: 0.8;
}

.disclaimer-all {
  position: fixed;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 1%;
  z-index: 4;
 
}

.disclaimer-all-text, .disclaimer-all-text-mobile {
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 9px;
  line-height: 9px;
  text-align: center;
  opacity: 0.8;
}

.disclaimer-all-text-mobile {
  display: none;
}

.b-p-button {
  position: fixed;
  left: auto;
  top: auto;
  right: 2%;
  bottom: 4%;
  display: flex;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  cursor: pointer;
  z-index: 4;
  pointer-events: auto;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.b-g-text {
  margin: 18px 20px;
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  
}

.slide-control {
  position: fixed;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 4%;
  display: flex;
  justify-content: center;
  z-index: 4;
}

.left-arrow {
  width: 7%;
  cursor: pointer;
  opacity: 0.25;
}

.right-arrow {
  width: 7%;
  cursor: pointer;
}

.slide-control-wrap {
  display: flex;
  width: 40%;
  justify-content: space-around;
  align-items: center;
}

.slide-bar {
  width: 100px;
  height: 2.5px;
  margin-right: 1%;
  margin-left: 1%;
  background-color: hsla(0, 0%, 100%, 0.3);
}

.slide-bar.selected {
  height: 2.5px;
  margin-right: 1%;
  margin-left: 1%;
  background-color: #fff;
}

.three-slide-bars {
  display: flex;
  width: 60%;
  margin-right: 15%;
  margin-left: 15%;
  justify-content: center;
  align-items: center;
}

.disclaimer-1 {
  position: fixed;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 6;
  display: none;
  width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000;
  pointer-events: none;
}

.disclaimer-1-text {
  width: 90%;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 9px;
  line-height: 11px;
  font-weight: 400;
  text-align: center;
}

.hotspot-copy {
  position: fixed;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  display: none;
  overflow: visible;
  width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 5;
  pointer-events: auto;
}

.discalimer-2-title {
  margin-top: 25px;
  margin-bottom: 15px;
  font-family: CadillacGothic-WideRegular, sans-serif;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 3px;
}

#hotspot-copy-asterisk-0 {
  font-size: 21px;
}

.discalimer-2-text {
/*   width: 35%; */
/*   width: 60%; */
  margin-bottom: 15px;
  font-family: Cadillacgothic, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
}

.disclaimer-2-sport {
  margin-bottom: 20px;
  font-family: Cadillacgothic, sans-serif;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
}

.disclaimer-2-cross {
  position: absolute;
  left: auto;
  top: 13%;
  right: 7%;
  bottom: auto;
  width: 40px;
  cursor: pointer;
}

.div-block {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: flex;
  width: 400px;
  height: 100%;
  max-height: none;
  max-width: 20%;
  flex-direction: row;
  align-items: center;
}

.color-drawer {
  position: absolute;
  display: flex;
  width: 100%;
  left: -90%;
  height: 240px;
  justify-content: flex-end;
  border-style: solid;
  border-width: 0.75px;
  border-color: #fff;
  border-radius: 1px;
  opacity: 1;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  mix-blend-mode: normal;
  cursor: pointer;
  pointer-events: all;
  border-left: none;
}

.color-selector-placement {
  position: absolute;
  left: 0px;
  display: flex;
  width: 280px;
  height: 100%;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.tray-content {
  display: flex;
  width: 90%;
  padding-top: 7%;
  padding-bottom: 7%;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.tray-button {
  display: flex;
  width: 10%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.tray-button-holder {
  display: flex;
  height: 30%;
  justify-content: center;
}

.image {
  width: 40%;
  height: auto;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
  -o-object-fit: contain;
     object-fit: contain;
}

.tray-button-text-holder {
  display: flex;
  height: 40%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.text-block {
  transform: rotate(-90deg);
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.color-name {
  max-width: 100%;
  margin-bottom: 0px;
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.grid {
  display: -ms-grid;
  display: grid;
  width: 80%;
  height: 35%;
  max-height: 30%;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  align-content: space-around;
  -ms-grid-row-align: auto;
      align-self: auto;
  flex: 0 auto;
  grid-auto-flow: row;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.color {
  width: 100%;
  max-height: 40px;
  max-width: 40px;
  min-height: 20px;
  min-width: 20px;
  padding-top: 100%;
  padding-bottom: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, 0);
  border-radius: 50%;
}

.color.selected {
  position: relative;
  width: 50%;
  height: 50%;
  max-height: none;
  max-width: none;
  min-height: auto;
  min-width: auto;
  padding-top: 0%;
  border-color: #fff;
  background-image: linear-gradient(180deg, #8d929a, #373b3d 90%);
}

.color.color2 {
  position: relative;
  max-height: 40px;
  max-width: 40px;
  min-height: 20px;
  min-width: 20px;
  padding-top: 100%;
  background-image: linear-gradient(180deg, #2d497c, #062552 90%);
}

.colors {
  width: 175px;
  height: 85px;
}

.color-grid {
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: stretch;
  align-content: stretch;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.color1 {
  width: 35px;
  height: 35px;
  max-width: 100%;
  margin-top: 1px;
  padding-right: 0%;
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, 0);
  border-radius: 50%;
}

.color1.selected {
  border-color: #fff;
}

.color1.selected.argentsilver {
  width: 35px;
  height: 35px;
  margin-top: 0px;
  border-width: 1px;
  background-image: linear-gradient(180deg, #8d929a, #373b3d 90%);
}

.color1.opulentblue {
  border-style: none;
  background-image: linear-gradient(180deg, #2d497c, #062552 90%);
}

.color1.crystalwhite {
  border-style: none;
  background-image: linear-gradient(180deg, #f4efef, #bfbec0 90%);
}

.color1.radiantred {
  border-style: none;
  background-image: linear-gradient(180deg, #b90707, #570202 90%);
}

.color1.color5 {
  border-style: none;
  background-image: linear-gradient(180deg, #d8edef, #819ea2 89%);
}

.color1.color6 {
  border-style: none;
  background-image: linear-gradient(180deg, #146f6f, #02191a 90%);
}

.color1.color7 {
  border-style: none;
  background-image: linear-gradient(180deg, #ada1bc, #353741 90%);
}

.color1.color8 {
  border-style: none;
  background-image: linear-gradient(180deg, #696969, #11130f);
}

.wheels-text-holder {
  margin-top: 10px;
  text-align: center;
}

.wheels-text {
  margin-bottom: 4px;
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.wheels-subtext {
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 7px;
  line-height: 9px;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}

.tire-pictures-holder {
  display: none;
  width: 80px;
  margin-bottom: -10px;
  justify-content: space-between;
  align-items: center;
}

.tire-img {
  width: 35px;
}

.image-3 {
  width: 35px;
}

.toggle-area {
  position: absolute;
  left: 2%;
  bottom: 4%;
  display: flex;
  width: 120px;
  height: 64px;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

.toggle-text {
  font-family: CadillacGothic-Medium, sans-serif;
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  
}

.toggle-background {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 40px;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  border-radius: 100px;
}

.white-toggle {
  position: absolute;
  left: 3px;
  top: 3px;
  display: block;
  overflow: hidden;
  width: 55px;
  height: 33px;
  border: 1px none #000000;
  border-radius: 50px;
  background-color: #ffffff;
  pointer-events: none;
}

.exterior-icon {
  position: absolute;
  left: 20px;
  top: 20%;
  height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}

.exterior-icon.unselected {
  left: 10px;
  top: 4px;
  display: inline-block;
  width: 33px;
  height: auto;
  pointer-events: none;
}

.exterior-icon.selected {
  left: 13px;
  top: 7px;
  
  width: 33px;
  height: auto;
}

.interior-icon {
  position: absolute;
  left: 95px;
  top: 20%;
  height: 60%;
}

.interior-icon.selected {
  left: auto;
  top: 5px;
  right: 16px;
 
  width: 29px;
  height: auto;
}

.interior-icon.unselected {
  left: auto;
  top: 2px;
  left: 70px;
  display: inline-block;
  width: 29px;
  height: auto;
  pointer-events: none;
}

.black-bar {
  display: none;
  z-index: 4;
}

.mobiletraybutton {
  z-index: 4;
  display: none;
}

.details-toggle-mobile {
  display: none;
}

.headline {
  position: fixed;
  left: 0%;
  top: 20%;
  right: 0%;
  bottom: auto;
}

.headline-text {
  font-family: CadillacGothic-WideRegular, sans-serif;
  color: #fff;
  font-size: 38px;
  line-height: 38px;
  text-align: center;
  letter-spacing: 10px;
  display: none;
}

#hotspot-copy-asterisk-x-1 {
  font-size: 22px;
  letter-spacing: 0px;
}

.tap-to-close {
  display: none;
  pointer-events: auto;
}

.wheels-text-holder-mobile {
  display: none;
  margin-top: 10px;
  text-align: center;
}

.wheels-subtext-mobile {
  display: none;
  color: #fff;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 0.5px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.lottie-animation {
  width: 23%;
  margin-top: 40px;
}

.utility-page-wrap {
  display: flex;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
}

.utility-page-content {
  display: flex;
  width: 260px;
  flex-direction: column;
  text-align: center;
}

.utility-page-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#scene2 {
  z-index: 3;
}

#interior {
  display: none;
}

@media screen and (min-width: 1280px) {
  .scene {
    width: 100vw;
  }

  .nameplate {
    display: flex;
  }
  

/*   .ar-view {
    top: 3%;
    right: 3%;
    display: flex;
  } */

  .ar-view-text {
    align-items: center;
  }

  .color-selector-placement {
    width: 300px;
  }

  .color1 {
    margin-top: 1px;
  }

  .tire-pictures-holder {
    width: 80px;
  }
}

.asterisk {
  pointer-events: auto;
  cursor: pointer;
}

/* AR */
.qr-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.52);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.x-holder {
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: end;
}

#qr-close-button {
  position: absolute;
  margin-left: auto;
  margin-right: 20px;
  margin-top: 20px;
  max-width: 44px;
  cursor: pointer;
}

.black-box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  justify-content: flex-start;
  flex-direction: column;
  position: fixed;
  background-color: black;
  width: 765px;
  height: 600px;
  max-width: 100%;
  max-height: 100%;
}

.qr-inner {
  pointer-events: none;
  display: flex;
  position: absolute;
  height: 100%;
  flex-flow: column;
  width: 100%;
  align-items: center;
}

.actual-qr {
  width: 240px;
  margin-top: 125px;
}

.qr-text {
  font-family: CadillacGothic-WideRegular, sans-serif;
  margin-top: 53px;
  text-align: center;
  width: 100%;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  color: white;
  letter-spacing: 2.5px;
}

@media screen and (min-width: 1440px) {
  .loading-page-headline-text {
    font-size: 28px;
    line-height: 28px;
    letter-spacing: 9px;
  }

  .loading-page-copy-text {
    font-size: 13px;
    line-height: 19px;
  }

  .scene {
    font-size: 15px;
    line-height: 15px;
  }

  .nameplate {
    top: 0.5%;
    margin-top: 1.5%;
  }

  .nameplate-logo {
    width: 140px;
    margin-bottom: 13px;
  }

  .nameplate-text {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 5px;
  }

  .ar-icon {
    width: 28px;
  }


  .ar-view-text {
    margin-right: 14px;
/*     font-size: 15px; */
/*     line-height: 15px; */
  }

  .body-copy {
    bottom: 10%;
  }

  .body-copy-title {
    letter-spacing: 7px;
  }

  .body-copy-text {
/*     width: 55%; */
    font-size: 16px;
    line-height: 24px;
  }
  #body-copy-asterisk-x-sup {
    font-size: 10px;
  }
  
  .disclaimer-interior-text {
    font-size: 12px;
    line-height: 12px;
  }

  .disclaimer-all-text {
    font-size: 10px;
    line-height: 10px;
  }

  .b-g-text {
/*     margin: 23px 45px 18px; */
/*     font-size: 15px;
    line-height: 15px;
    letter-spacing: 2px; */
  }

  .slide-control-wrap {
    width: 35%;
  }

  .three-slide-bars {
    margin-right: 10%;
    margin-left: 10%;
  }

  .disclaimer-1-text {
    font-size: 9px;
    line-height: 11px;
  }

  .hotspot-copy {
    height: auto;
  }

  .discalimer-2-title {
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 26px;
    letter-spacing: 3.5px;
  }
  
  #hotspot-copy-asterisk-0 {
    font-size: 21px;
  }

  .discalimer-2-text {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.5px;
  }

  .disclaimer-2-cross {
    width: 45px;
  }

  .color-drawer {
    height: 280px;
    border-width: 1px;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }

  .color-selector-placement {
    width: 320px;
  }

  .tray-content {
    margin-bottom: -5px;
  }


  .colors {
    width: 200px;
    height: 88px;
  }

  .color1 {
    width: 37px;
    height: 37px;
    margin-top: 2px;
/*     padding-top: 37px; */
  }

  .color1.selected.argentsilver {
    width: 39px;
    height: 39px;
    margin-top: 0px;
    padding-top: 35px;
    border-style: solid;
    border-width: 2px;
  }

  .color1.opulentblue {
    width: 37px;
    padding-top: 37px;
  }

  .wheels-text {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 1px;
  }

  .wheels-subtext {
    font-size: 8px;
    line-height: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .tire-pictures-holder {
    width: 88px;
    margin-bottom: 0px;
  }

  .tire-img {
    width: 37px;
  }

/*   .toggle-area {
    width: 135px;
    height: 78px;
  } */

/*   .toggle-text {
    font-size: 13px;
    line-height: 13px;
  } */

/*   .white-toggle {
    left: 3.5px;
    top: 3.5px;
    width: 63px;
    height: 42px;
  } */

/*   .exterior-icon.unselected {
    left: 18px;
    top: 11px;
    width: 36px;
  } */

/*   .exterior-icon.selected {
    left: 15px;
    top: 11px;
    display: none;
    width: 36px;
  } */

/*   .interior-icon.unselected {
    top: 8px;
    right: 18px;
    width: 31px;
  } */

  .headline-text {
    font-size: 45px;
    line-height: 45px;
/*     letter-spacing: 14px; */
  }
  
  #hotspot-copy-asterisk-x-1 {
  font-size: 23px;
  letter-spacing: 0px;
}

  .wheels-subtext-mobile {
    font-size: 8px;
    line-height: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}

@media screen and (min-width: 1920px) {
  .loading-page {
    display: flex;
  }

  .content {
    top: 33%;
  }

  .loading-page-headline-text {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 11px;
  }

  .loading-page-copy-text {
    line-height: 20px;
    letter-spacing: 2px;
  }

  .nameplate {
    letter-spacing: 6px;
  }

  .nameplate-logo {
    width: 160px;
    margin-bottom: 10px;
  }

  .nameplate-text {
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 5.5px;
  }

  .ar-icon {
    width: 30px;
  }

  .ar-view-text {
    margin-right: 14px;
/*     font-size: 15px; */
/*     line-height: 15px; */
  }

  .body-copy {
    position: absolute;
    left: 0%;
    top: auto;
    right: 0%;
  }

  .body-copy-title {
    letter-spacing: 8px;
  }

  .body-copy-text {
    font-size: 18px;
    line-height: 28px;
  }
  #body-copy-asterisk-x-sup {
    font-size: 11px;
  }

/*   .b-g-text {
    font-size: 16px;
    line-height: 16px;
  } */

  .slide-control-wrap {
    width: 32%;
  }

  .slide-bar {
    width: 105px;
    height: 3px;
  }

  .slide-bar.selected {
    height: 3px;
  }

  .disclaimer-1-text {
    font-size: 10px;
    line-height: 12px;
  }

  .hotspot-copy {
    height: auto;
  }

  .discalimer-2-title {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 26px;
    letter-spacing: 4px;
  }
  #hotspot-copy-asterisk-0 {
    font-size: 21px;
  }

  .discalimer-2-text {
/*     width: 35%; */
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1px;
  }

  .disclaimer-2-cross {
    width: 52px;
  }

  .color-drawer {
    height: 334px;
    min-height: 300px;
  }

  .color-selector-placement {
    width: 400px;
  }

  .tray-content {
    margin-bottom: -8px;
  }

  .colors {
    width: 242px;
    height: 110px;
  }

  .color1 {
    width: 44px;
    height: 44px;
/*     padding-top: 44px; */
  }

  .color1.selected.argentsilver {
    width: 48px;
    height: 48px;
    margin-top: 0px;
    padding-top: 44px;
  }

  .color1.opulentblue {
    width: 44px;
    height: 44px;
    padding-top: 44px;
  }

  .wheels-text {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 1.5px;
  }

  .wheels-subtext {
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 1px;
  }

  .tire-pictures-holder {
    width: 108px;
  }

  .tire-img {
    width: 44px;
  }

  .headline-text {
    font-size: 53px;
    line-height: 53px;
/*     letter-spacing: 15px; */
  }
  
  #hotspot-copy-asterisk-x-1 {
  font-size: 26px;
  letter-spacing: 0px;
}

  .wheels-subtext-mobile {
    font-size: 9px;
    line-height: 9px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 991px) {
  .black-bar {
    height: 11%;
  }
  
  .color-grid {
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: stretch;
  align-content: stretch;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}
  
/*   .wheels-text-holder-mobile {
   width: 80%; 
  } */
  
  #bodyTextHolder{
    width: 100%;
  }
  
  #replayLightsButton{
    margin-bottom: 259px;
  }
  
  #undergradient{
    bottom: 8%;
    height: 22%;
  }
  
  .content {
    width: 80%;
  }
  
  .disclaimer-interior-text{
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .disclaimer-all-text{
    margin-left: 5%;
    margin-right: 5%;
  }

  .loading-page-headline-text {
    font-size: 20px;
    line-height: 20px;
  }

  .loading-page-copy-text {
    width: 90%;
    margin-top: 60px;
  }
  
  .lottie-animation {
    margin-top: 60px;
  }

  .logo-outline {
    width: 35%;
  }

  .nameplate {
    position: fixed;
    left: 0%;
    top: 3%;
    right: 0%;
    bottom: auto;
    margin-top: 0%;
    align-items: center;
  }

  .nameplate-logo {
    display: block;
    height: 69.421875px;
    margin-bottom: 0px;
  }

  .nameplate-text {
    display: none;
    margin-top: -40px;
  }

  .ar-view {
    left: 5%;
    top: auto;
    right: auto;
    bottom: 1.5%;
    width: 40%;
    height: 5%;
    justify-content: center;
  }

  .ar-icon {
    height: auto;
    margin-right: 8%;
  }

  .ar-view-text {
    margin-right: 0px;
    order: 1;
    letter-spacing: 1px;
  }

  .body-copy {
    position: fixed;
    left: 0%;
    top: 12%;
    right: 0%;
    bottom: auto;
    margin-top: 0px;
    justify-content: flex-start;
  }

  .body-copy-title {
    margin-bottom: 7%;
    font-family: Cadillacgothic, sans-serif;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 2px;
  }

  .body-copy-text {
    display: none;
    width: 70%;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  }
  
  .disclaimer-interior {
    bottom: calc(12% + 70px + 6px);
    z-index: 4;
    width: 95%;
    left: 2.5%;
  }

  .disclaimer-all {
    bottom: calc(8% + 6px);
    z-index: 4;
  }

  .b-p-button {
    right: 5%;
    bottom: 1.5%;
    display: flex;
    width: 40%;
    height: 5%;
    justify-content: center;
    align-items: center;
  }

  .b-g-text {
    margin-top: auto;
    margin-bottom: auto;
  }

  .slide-control {
    left: 0%;
    top: 12%;
    right: 0%;
    bottom: auto;
    height: 5%;
  }

  .left-arrow {
    width: 37px;
  }

  .right-arrow {
    width: 37px;
  }

  .slide-control-wrap {
    width: 90%;
    align-items: flex-start;
  }

  .slide-bar {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .three-slide-bars {
    width: 40%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 15px;
    align-items: flex-end;
  }

  .disclaimer-1 {
    z-index: 5;
    height: auto;
    justify-content: space-around;
  }

  .disclaimer-1-text {
    width:auto;
    margin-top: 0px;
    padding: 0% 3% 2%;
    font-size: 12px;
    line-height: 14px;
  }

  .hotspot-copy {
    bottom: 8%;
    z-index: 4;
  }

  .discalimer-2-title {
    font-size: 20px;
    line-height: 20px;
  }
  
  #hotspot-copy-asterisk-0 {
    font-size: 15px;
  }

/*   .discalimer-2-text {
    width: 92%;
  } */

  .disclaimer-2-cross {
    top: 5%;
    right: 4%;
  }

  .color-drawer {
    left: 0%;
    top: 100%;
    height: 100%;
    max-height: none;
    flex-direction: column;
    justify-content: space-between;
    border-left: none;
    border-right: none;
    border-bottom-color: #707070;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #000);
  }

  .color-selector-placement {
    left: 0%;
    bottom: 8%;
    width: 100%;
    height: 220px;
    max-width: none;
    
  }

  .tray-content {
    position: static;
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: auto;
    padding-top: 2%;
    flex-direction: row;
    grid-auto-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .tray-button {
    position: static;
    bottom: 5%;
    display: none;
    width: 50%;
    height: 80px;
    margin-bottom: 10%;
    margin-left: 50%;
    flex-direction: row;
    align-items: flex-start;
  }

  .tray-button-holder {
    height: 100%;
    transform: rotate(-90deg);
  }

  .tray-button-text-holder {
    order: -1;
    transform: rotate(90deg);
  }

  .color-name {
    max-width: none;
    margin-top: 10px;
    line-height: 15px;
  }

  .colors {
    width: 95%;
    height: auto;
/*     margin-top: -35px; */
    margin-left: 0px;
  }

  .color1 {
    width: 42px;
    margin-top: 2px;
    height: 42px;
  }

  .color1.selected.argentsilver {
    width: 46px;
    height: 46px;

    border-width: 2px;
  }

  .color1.opulentblue {
    width: 42px;
    height: 42px;
  }

  .wheels-text-holder {
    display: none;
  }

  .wheels-text {
    display: none;
    width: 240px;
    font-size: 17px;
    line-height: 19px;
  }

  .wheels-subtext {
    width: 240px;
    font-size: 17px;
    line-height: 19px;
  }

  .tire-pictures-holder {
    width: 100px;
    height: auto;
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .tire-img {
    width: 42px;
    margin-right: 0px;
  }

  .toggle-area {
    left: 12%;
    bottom: 12%;
    display: flex;
    width: 190px;
    height: 70px;
    justify-content: center;
    align-items: center;
  }

  .toggle-text {
    position: absolute;
    left: 0%;
    top: auto;
    right: auto;
    bottom: auto;
    -ms-grid-row-align: center;
        align-self: center;
   
  }

  .toggle-background {
    position: absolute;
    left: auto;
    top: auto;
    right: 0%;
    bottom: auto;
    width: 120px;
  }

  .black-bar {
    position: absolute;
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0%;
    display: block;
    height: 8%;
    padding-right: 0px;
    padding-bottom: 0px;
    background-color: #000;
  }

  .mobiletraybutton {
    position: absolute;
    right: 0%;
    bottom: 11%;
    display: flex;
    width: 50%;
    height: 80px;
    justify-content: center;
    align-items: center;
    pointer-events: all;
  }

  .text-block-2 {
    margin-right: 5%;
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
  }

  .details-toggle-mobile {
    display: none;
    margin-bottom: 1%;
    pointer-events: auto;
  }

  .details-toggle-text {
    margin-left: 6px;
    color: #fff;
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0.5px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  }

  .text-span {
    font-size: 31px;
    font-weight: 400;
  }

  .toggle-arrow {
    width: 16px;
    height: 10px;
    margin-top: 1px;
  }

  .headline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .headline-text {
    width: 350px;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 4px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  }
  
  #hotspot-copy-asterisk-x-1 {
  font-size: 20px;
  letter-spacing: 0px;
}

  .tap-to-close {
    display: block;
    margin-top: 10px;
    margin-bottom: 13px;
    color: #fff;
    font-size: 12px;
    line-height: 14px;
  }

  .wheels-text-holder-mobile {
    display: block;
  }

  .wheels-subtext-mobile {
    display: block;
    width: 95%;
    font-family: CadillacGothic-Medium, sans-serif;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
  }
}


/* mobile vertical */
@media screen and (max-width: 479px) {
  .content {
    height: 40%;
  }
  
  .loading-page-headline {
    height: 100%;
    justify-content: space-evenly;
  }
  
  .loading-page-headline-text {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 3px;
  }


  .loading-page-copy-text {
    margin-top: 0px;
    font-size: 9px;
  }
  
  .lottie-animation {
    width: 50%;
    margin-top: -8%;
  }

  .logo-outline {
    width: 60%;
  }

  .scene {
    height: 100%;
  }

  .nameplate-logo {
    width: 93px;
    height: 50.421875px;
  }

  .nameplate-text {
    display: none;
    margin-top: -28px;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    letter-spacing: 3px;
  }

  .ar-view {
    width: 40%;
    height: 5%;
    min-width: 128px;
    justify-content: center;
  }

  .ar-icon {
    position: absolute;
    left: 5%;
    width: 70%;
    height: auto;
    margin-right: 10%;
  }

  .ar-view-text {
    position: absolute;
    right: 22%;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
  }
  
  .ar-icon-mobile, .ar-icon-all {
    width: 30px;
  }

  .body-copy-text {
    display: block;
/*     width: 80%; */
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    display: none;
  }
  #body-copy-asterisk-x-sup {
    font-size: 7px;
  }
  
  .disclaimer-interior {
    bottom: 23%;
    width: 100%;
    left: 0%;
  }
  
  .disclaimer-interior-text {
    margin-right: 5%;
    margin-left: 5%;
    font-size: 10px;
    line-height: 13px;
  }

  .disclaimer-all-text {
    display: none;
  }
  
  .disclaimer-all-text-mobile {
    display: block;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 8px;
    line-height: 11px;
  }

  .b-p-button {
    width: 40%;
    height: 5%;
    min-width: 128px;
  }

  .b-g-text {
    margin-right: 3%;
    margin-left: 3%;
    font-size: 12px;
    line-height: 12px;
  }

  .left-arrow {
    width: 32px;
  }

  .right-arrow {
    width: 32px;
  }

  .three-slide-bars {
    margin-bottom: auto;
  }
  
  #replayLightsButton {
    margin-bottom: 270px;
  }

  .disclaimer-1 {
    height: auto;
    pointer-events: auto;
  }

  .disclaimer-1-text {
    font-size: 10px;
    line-height: 12px;
  }

/*   .hotspot-copy {
    height: 20%;
  } */

  .discalimer-2-title {
/*     width: 70%; */
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 2px;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  #hotspot-copy-asterisk-0 {
    font-size: 9px;
  }

  .discalimer-2-text {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 10px;
  }
  
  .disclaimer-2-sport {
    margin-bottom: 8px;
  }

  .disclaimer-2-cross {
    width: 31.7px;
  }

  .color-selector-placement {
    position: absolute;
  }

  .tray-content {
    width: 90%;
    margin-left: 5%;
    padding-bottom: 4%;
  }

  .color-name {
    margin-top: 15px;
    font-size: 9px;
    line-height: 9px;
  }

  .colors {
    width: 95%;
/*     margin-top: -25px; */
  }

  .color1 {
    width: 38px;
    height: 38px;
  }

  .color1.selected.argentsilver {
    width: 38px;
    height: 38px;
  
  }

  .color1.opulentblue {
    width: 38px;
    height: 38px;
  }

  .wheels-text-holder {
    width: 90%;
  }

  .tire-pictures-holder {
    width: 90px;
    margin-top: 0px;
    justify-content: space-between;
  }

  .tire-img {
    width: 38px;
    margin-right: 0px;
  }

  .toggle-area {
    left: 7%;
    bottom: 13%;
    display: flex;
    width: 170px;
    max-width: none;
  }

  .toggle-background {
    width: 120px;
    max-width: 75%;
  }

  .mobiletraybutton {
    right: 5%;
    bottom: 13%;
    width: auto;
    height: 70px;
  }

  .text-block-2 {
    margin-right: 15px;
    font-family: CadillacGothic-Medium, sans-serif;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
  }

  .details-toggle-mobile {
    display: none;
  }


  .headline-text {
    width: 100%;
    font-size: 20px;
    line-height: 22px;
/*     letter-spacing: 3px; */
/*     width: 227px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 3px; */
  }
  
  #hotspot-copy-asterisk-x-1 {
  font-size: 13px;
  letter-spacing: 0px;
}

  .tap-to-close {
    margin-top: 8px;
    font-size: 10px;
    line-height: 12px;
  }

  .wheels-text-holder-mobile {
    margin-top: 15px;
  }

  .wheels-subtext-mobile {
/*     width: 95%; */
    width: 100%;
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 0.8px;
  }
}

#color-argent.w-node-_1a0445fb-111a-e59a-98c6-581f43be118f-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-row-align: start;
      align-self: start;
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-_2962eb3f-5b4f-f5a1-5762-9d33fdfe5f52-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-row-align: start;
      align-self: start;
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-_82c9a79b-77f2-1486-49e7-3c6035d6641c-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-row-align: start;
      align-self: start;
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#color-radiant.w-node-e39aab81-8e63-0c65-9d72-26ffbf13713f-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-row-align: start;
      align-self: start;
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-b2cc0582-ebda-cd43-8ee2-3da7adaa12f7-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
/*   -ms-grid-row-align: end; */
/*       align-self: end; */
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-_46262b20-440c-d8b5-82db-11506661a544-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
/*   -ms-grid-row-align: end; */
/*       align-self: end; */
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-_390be5d8-fb50-335b-76d7-37ca9ac9c746-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
/*   -ms-grid-row-align: end; */
/*       align-self: end; */
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

#w-node-c3cc0179-2a23-fe43-b38f-2fb33c6c811b-94dd516c {
  -ms-grid-column: span 1;
      grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
      grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
/*   -ms-grid-row-align: end; */
/*       align-self: end; */
  -ms-grid-column-align: center;
      justify-self: center;
  cursor: pointer;
}

@media screen and (min-width: 1920px) {
  #color-argent.w-node-_1a0445fb-111a-e59a-98c6-581f43be118f-94dd516c {
    -ms-grid-row-align: start;
        align-self: start;
  }

  #w-node-_390be5d8-fb50-335b-76d7-37ca9ac9c746-94dd516c {
    -ms-grid-column: span 1;
        grid-column-start: span 1;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
    -ms-grid-row: span 1;
        grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-row-align: end;
/*         align-self: end; */
    -ms-grid-column-align: center;
        justify-self: center;
  }
}

@media screen and (max-width: 991px) {
  #color-name{
    margin: 5px;
    -ms-grid-row-align: start;
        align-self: start;
    -ms-grid-column-align: center;
        justify-self: center;
  }

  #w-node-eaaa73d6-1a4b-1996-655b-9ba33808284e-94dd516c {
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-grid-row-align: center;
        align-self: center;
  }

  #w-node-_6b411181-813a-082f-79f7-b3845fd25709-94dd516c {
    -ms-grid-column-align: center;
        justify-self: center;
  }

  #w-node-fe6ba5cf-a5f4-f202-5dee-155b8025731d-94dd516c {
    -ms-grid-column-align: center;
        justify-self: center;
  }

  #w-node-_376e36a2-f0e0-6839-d208-3a3ef7fc80e6-94dd516c {
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-column-align: center;
        justify-self: center;
  }
}

@font-face {
  font-family: 'Cadillacgothic';
  src: url('../fonts/CadillacGothic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CadillacGothic-WideRegular';
  src: url('../fonts/CadillacGothic-WideRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CadillacGothic-Medium';
  src: url('../fonts/CadillacGothic-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CadillacGothic-Bold';
  src: url('../fonts/CadillacGothic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CadillacGothic-WideBold';
  src: url('../fonts/CadillacGothic-WideBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CadillacgothicWideMedium';
  src: url('../fonts/CadillacGothic-WideMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* mobile horizontal */
@media screen and (max-height: 479px) and (min-width: 600px) {
  
  .color-grid {
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: stretch;
  align-content: stretch;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
  
  #replayLightsButton{
    margin-bottom: 160px;
  }
  
  .hotspot-copy {
    bottom: 0%;
  }
  
  #undergradient{
    bottom: 0%;
    height: 22%;
  }
  
  .loading-page-headline-text {
    font-size: 20px
  }
  
  .loading-page-copy-text {
    margin-top: 15px
  }
  
  .nameplate {
    top: 6%;
  }
  
  .nameplate-text {
    display: none;
    margin-top: -23px;
    font-size: 12px;
    line-height: 12px;
  }
  
  .headline {
    top: 16%;
  }
  
  .headline-text {
    width: auto;
    font-size: 28px;
    line-height: 28px;
  }
  
  #hotspot-copy-asterisk-x-1 {
  font-size: 17px;
  letter-spacing: 0px;
}
  
  .left-arrow, .right-arrow {
    width: 30px;
  }
  
  
  .b-p-button {
  position: fixed;
  left: auto;
  top: auto;
  right: 3%;
  bottom: 5%;
  display: flex;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  cursor: pointer;
  width: auto;
  height: auto;
    width: auto;
    height: auto;
   
}
  
  .b-g-text{
    margin: 14px 16px;
    font-size: 12px;
  }
  
  
  
  .ar-view{
    width: auto;
    height: auto;
    left: auto;
    top: 5%;
    right: 3%;
    bottom: auto;
  }
  
  .black-bar {
    display: none;
  }
  
  .mobiletraybutton{
    display: none;
  }
  
  .toggle-area{
    position: fixed;
    left: 3%;
    bottom: 5%;
    display: flex;
    width: 120px;
    height: 65px;
    
    align-items: normal;
  }
  
  .toggle-text{
    font-size: 12px;
    line-height: 12px;
    left: auto;
    align-self: auto;
    
  }
  
  .toggle-background{
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0%;
    width: 100%;
  }
  
  .color-selector-placement{
    left: -1px;
    width: 280px;
    height: calc(97% - 50px);
    bottom: auto;
    top: 0px;
    z-index: 4;
  }
  
  .color-drawer{
    border: 1px solid white;
    height: 240px;
    left: -90px;
    flex-direction: row;
    background-image: none;
    
  }
  
  .tray-content{
    display: flex;
    width: 90%;
    padding-top: 7%;
    flex-direction: column;
  }
  
  .tire-img{
    width:38px;
  }
  
  #color-name{
    line-height: 12px;
    max-width: 100%;
    margin-top: 0px;
    align-self: auto;
    margin-bottom: 10px;
  }
  
  .colors{
    width: 175px;
    height: 85px;
    margin-top: 0px;
    
  }
  
  .color1.selected.argentsilver{
    width: 34px;
    height: 34px;
    border-width: 1px;
    padding-top: 0px;
    margin-top: 1px;
  }
  
  .wheels-text-holder{
    display: block;
  }
  
  .wheels-text{
    display: block;
    font-size: 12px;
    line-height: 14px;
  }
  
  .wheels-subtext-mobile{
    display: none;
    font-size: 8px;
    line-height: 8px;
  }
  
  .tires-picture-holder{
    width: 80px;
    margin-bottom: 10px;
    margin-top: 0px;
    
  }
  
  .tray-button{
    display: flex;
    width: 10%;
    height: 100%;
    margin-bottom: 0px;
    margin-left: 0px;
    flex-direction: column;
    align-items: normal;
  }

  .tray-button-holder {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    height: 20%;
  }
  
  .tray-button-text-holder{
    order: 1;
    transform: rotate(0deg);
  }
  
  .wheels-subtext{
    font-size: 8px;
    line-height: 8px;
  }
  
  #w-node-fe6ba5cf-a5f4-f202-5dee-155b8025731d-94dd516c{
    display: none;
  }
  
  .color1{
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-style: solid;
    padding-top: 0px;
  }
  
  .color1.opulentblue{
    width: 34px;
    height: 34px;
    
  }
  
  .disclaimer-interior {
    left: calc(3% + 130px);
    width: calc(100vw - 175px - 130px - 6%);
    bottom: 12%;
  }
  
  .disclaimer-all{
    left: calc(3% + 130px);
    width: calc(100vw - 175px - 130px - 6%);
    bottom: 3%;
    font-size: 8px;
  }
  
  .nameplate-logo{
    height: 40px;
    margin-top: -10px;
    width: auto;
  }
  
  .body-copy-title{
    font-size: 15px;
    line-height: 15px;
    margin-bottom: 12px;
    font-family: CadillacGothic-WideRegular, sans-serif;
    letter-spacing: 6px;
  }
  
  .details-toggle-mobile {
    display: none;
  }
  
  .slide-control-wrap{
    left: calc(3% + 130px);
    width: calc(100vw - 175px - 130px - 6%);
    position: absolute;
    justify-content: center;
  }
  
  .three-slide-bars {
    width: 60%;
    margin-right: 10%;
    margin-left: 10%;
    padding-top: 0%
  }
  
  .body-copy {
    position: absolute;
    left: auto;
    top: auto;
    right: auto;
    bottom: 17%;
    display: none;
  }
  
  .body-copy-text {
    width: 60%;
    font-size: 13px;
    line-height: 19px;
    display: block;
    text-shadow: none;
    margin-top: 0;
  }
  
  #body-copy-asterisk-x-sup {
    font-size: 8px;
  }
  
  .slide-control {
    bottom: 10%;
    left: 0%;
    top: auto;
  }
  
  .ar-view-text {
    font-size: 12px;
    line-height: 12px;
    margin-right: 10px;
    order: 0;
    display: none;
  }
}

/* mobile vertical small */

@media screen and (max-width: 327px){
  #mobileTrayButtonText{
    margin-right: 3px;
  }
  
  .b-g-text{
    font-size: 11px;
    line-height: 11px;
  }
}