@charset "utf-8";

/**
    Color Values
    Link:        #cd3327
    Link Hover: #72201C
 */



footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

.copyright {
  font-family: sans-serif;
  font-size: 0.6rem;
  color: #303030;
  text-align: right;
}

.copyright > a {
  color: #cd3327;
  text-decoration: none;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
}

.main {
  width: 100%;
  height: 100%;
}

.sossModels {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.modelDisplay {
  display: none;
}

.loadingScreen {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: black;
}

.loadingScreen .content {
  margin-top: 2vh;
}

.loadingBar {
  display: block;
  position: relative;
  width: 0;
  height: 4px;
  background-color: #636363; /* cornflowerblue */
}

.loading-gif img {
  display: block;
  position: absolute;
  top: 42%;
  left: 35%;
  width: 30%;
}

/* MENU */

.menu {
  position: absolute;
  top: 10px;
  right: 0;
  margin: 10px 10px 10px 10px;
  background-color: #771923;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  transition: 0.3s border-radius ease-in-out, 0.3s height ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
}

.tools {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  background-color: #cd3327;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
}

.tools::before {
  content: 'PLAY';
  position: absolute;
  top: -16px;
  color: #cd3327;
  font-family: sans-serif;
}

.tools::after {
  content: 'ME';
  position: absolute;
  top: 40px;
  color: #cd3327;
  font-family: sans-serif;
}

.tools .circle-play {
  margin-top: 1px;
  transition: 0.2s transform ease-in-out;
}

.tools .circle-play:hover {
  transform: scale(1.2);
}

.tools:hover {
  background-color: #72201c;
}

.tools:hover .circle-play {
  transform: scale(1.2);
}

/* FINISH SWITCHER */

.finishSwitcher {
  position: absolute;
  left: 0;
  bottom: 20px;
  z-index: 4;
  background-color: rgba(245, 245, 245, 0.85);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem;
  font-family: sans-serif;
  max-width: 220px;
}

.finishSwitcher-label {
  color: #cd3327;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.finishSwitcher-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.finish-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: white;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-family: sans-serif;
  font-size: 0.8rem;
  color: #303030;
  cursor: pointer;
  transition: 0.2s background-color ease-in-out, 0.2s border-color ease-in-out;
}

.finish-btn:hover {
  background-color: #f5f5f5;
  border-color: #cd3327;
}

.finish-btn.active {
  border-color: #cd3327;
  background-color: #f5e9e8;
  font-weight: bold;
}

.swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 0.6rem;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #d7d7d7;
  flex-shrink: 0;
}

/* Satin Brass */
.swatch-sb {
  background: linear-gradient(to bottom, #bea97a 0%, #d9c7a1 5%, #e3d4b3 8%, #faf5e1 13%, #fffeef 15%,
  #fefef2 18%, #f8f6e9 23%, #f3f0dd 26%, #e6e2c9 28%, #d3caad 31%, #c5b896 33%, #a7986f 38%, #8c7c58 46%,
  #8c7c58 49%, #90805c 51%, #aa9a76 62%, #baaa86 82%, #b7a783 87%, #ad9d79 95%, #aa9a76 100%);
}

/* Black E-Coat */
.swatch-bec {
  background: linear-gradient(to bottom, #292927 0%, #3c3c3a 3%, #2e2e2c 5%, #3a3a38 8%, #565654 10%,
  #525250 15%, #565654 18%, #4a4a48 21%, #525250 23%, #474745 26%, #595957 28%, #3b3b39 31%, #30302e 33%,
  #2d2d2b 36%, #2f2f2d 38%, #252523 41%, #1f1f1d 46%, #1c1c1a 51%, #1f1f1d 59%, #1c1c1a 62%, #222220 79%,
  #20201e 90%, #191917 100%);
}

/* Satin Chrome */
.swatch-sc {
  background: linear-gradient(to bottom, #a5a5a5 0%, #e3e3e3 10%, #fefefe 21%, #fcfcfc 23%,
  #f1f1f1 26%, #a7a7a7 36%, #8c8c8a 41%, #868782 44%, #7c7d78 46%, #767772 49%, #767772 51%,
  #8d8c87 59%, #9c9992 67%, #a6a299 77%, #a9a6a1 82%, #a6a5a0 87%, #a3a29d 90%, #92918c 100%);
}

/* Satin Nickel */
.swatch-sn {
  background: linear-gradient(to bottom, #978f7c 0%, #a49c89 3%, #d6cfbd 10%, #e2dbc9 13%, #e7e0d0 15%,
  #e7e0d0 18%, #e2dccc 21%, #cfc9b9 23%, #c0baac 26%, #b5afa1 28%, #8f8c7d 33%, #827e72 36%, #787468 38%,
  #676153 46%, #6a6456 49%, #8a846e 59%, #9c917d 69%, #a59989 79%, #a39a89 85%, #928978 95%, #8e8574 100%);
}

/* Oil-Rubbed Bronze (approximate) */
.swatch-orb {
  background: linear-gradient(to bottom, #2b1a12 0%, #4a2f1f 20%, #6b4226 45%, #4a2f1f 65%, #2b1a12 85%, #1c110b 100%);
}

/* Unplated (approximate) */
.swatch-u {
  background: linear-gradient(to bottom, #b3a58e 0%, #cfc2a7 20%, #ddd0b6 45%, #cfc2a7 65%, #b3a58e 85%, #9e916f 100%);
}

/* Brushed Stainless Steel (approximate) */
.swatch-bss {
  background: linear-gradient(to bottom, #9aa1a6 0%, #c4c9cc 20%, #e2e5e6 45%, #c4c9cc 65%, #9aa1a6 85%, #7d848a 100%);
}

/* Bright Chrome (approximate) */
.swatch-bc {
  background: linear-gradient(to bottom, #c8c8c8 0%, #f5f5f5 15%, #ffffff 30%, #e8e8e8 50%, #ffffff 65%, #d4d4d4 85%, #b0b0b0 100%);
}

/* Hide the finish-switcher on mobile */
@media (max-width: 768px) {
  .finishSwitcher {
    display: none;
  }
}