#hero {
  background: #f9f9f9
    url("../jpg/ab-2025-12-mc-web-05-ud-foh-4525-2400-smb07b.jpg?context=bWFzdGVyfHJvb3R8MjYxMTUwfGltYWdlL2pwZWd8YURJMkwyZzNaUzh4TURFeU56ZzJNelkzTmprMU9DOUJRbDh5TURJMUxURXlYMDFEWDNkbFlsOHdOUzFWUkMxR1QwZ3RORFV5TlY4eU5EQXdYMU5OTG1wd1p3fDM3ZmIzYWY5ZDlhY2U2Y2U5OTg0MzgxZGI3YzQzM2RkNTgyMjFmODgxYjA0ZTRhYmFjMjQwMTRkODdmMTlkYTg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-content {
  max-width: 1440px;
  padding: 30px 50px 38px 50px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30% 40% 30%;
}
.message {
  display: table;
  margin-left: 8%;
}
.message > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-bottom: 1.2em;
}
.message span img.desktop-lockup {
  width: 70%;
  display: block;
  margin: 0 auto;
  padding-top: 1rem;
}
.message span img.mobile-lockup {
  display: none;
}
.message span p {
    color: #0B2572;
    font-weight: 700;
    font-size: 24px;
    margin: 20px auto 10px;
    width: 70%;
    line-height: 1.1;
}
.message h2 {
  font-size: 2em;
  color: #ffffff;
  line-height: 1.2em;
  margin: 15px auto 25px;
  width: 90%;
}
.message h2 span.reg {
  font-weight: normal;
  font-size: 0.9em;
}
.message .superprice {
  font-size: 2em;
  line-height: 1.4;
}
.message .superprice sup {
  position: static;
  font-size: 0.5em;
  vertical-align: super;
}
.message .superprice .decimal {
  display: none;
}
.cta {
  background: #f33d32;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
    0px 3px 5px 0px rgba(0, 0, 0, 0.08);
  padding: 0.6em 2em;
  text-decoration: none;
  color: white;
  border: 3px solid #f33d32;
  transition: all ease 0.5s;
  font-weight: bold;
  font-size: 20px;
}
.cta:hover {
  background: transparent;
  color: #f33d32;
  border: 3px solid #f33d32;
  transition: all ease 0s;
  box-shadow: 0 0 0 rgb(0, 0, 0, 0);
}
.spotlights {
  min-width: 314px;
}

.spotlights img {
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgb(0, 0, 0, 0.25);
}
.spotlights a:nth-child(1) img {
  margin-bottom: 5%;
}
@media (max-width: 991px) {
  .hero-content {
    max-width: 840px;
    grid-template-columns: 25% 43% 30%;
  }
  .message span p {
    font-size: 18px;
}
}
@media (max-width: 850px) {
  #hero {
    background: #000
      url("../jpg/ab-2025-12-mc-web-05-ud-foh-4525-grad-850-04ce96.jpg?context=bWFzdGVyfHJvb3R8MjI5NDM0fGltYWdlL2pwZWd8YUdZMUwyZzROeTh4TURFeU56ZzJNemt6T1RFd01pOUJRbDh5TURJMUxURXlYMDFEWDFkbFlsOHdOUzFWUkMxR1QwZ3RORFV5TlMxbmNtRmtYemcxTUMwd05DNXFjR2N8MjI5MGNkOGRhYTU2M2VkNmFhNGQwMDU2ODJhMmM2YjA4OTExYmFhNjNjMzgwMjE4NTZhZDkyYTgyY2ZjODY3ZQ");
    background-size: auto 850px;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .hero-content {
    padding: 250px 0 25px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 134px auto 185px;
  }
  .message {
    padding-left: 0;
    margin-left: 0;
  }
  .message > span {
    padding-bottom: 2.4em;
  }
  .message span p {
  color: white;
    font-size: 26px;
}
  .message span img.desktop-lockup {
  display: none;
}
.message span img.mobile-lockup {
   width: 70%;
  display: block;
  margin: 25px auto 0;
  padding-top: 1rem;
}
  .message span h2 {
    padding-left: 0;
    width: 80%;
    font-size: 1.75em;
  }
  .message span a {
    margin-left: 0;
  }
  .spotlights {
    height: 185px;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 0 20px;
  }
  .spotlights::before {
    height: 185px;
    width: 20px;
    position: absolute;
    right: 0;
    content: "";
    background-image: linear-gradient(to right, rgba(96, 161, 252, 0), #000000);
    pointer-events: none;
  }
  .spotlights::after {
    height: 185px;
    width: 20px;
    position: absolute;
    left: 0;
    content: "";
    background-image: linear-gradient(to right, #60afc, rgba(96, 161, 252, 0));
    pointer-events: none;
  }
  .spotlights img {
    height: 170px;
    width: auto;
  }
  .spotlights a:nth-child(1) img {
    margin-right: 10px;
  }
}
@media (max-width: 767px) {
  .message span h2 {
    font-size: 1.5em;
  }
  #hero {
    background-size: auto 767px;
  }
}
@media (max-width: 600px) {
  #hero {
    background-size: auto 600px;
  }
  .hero-content {
    padding: 150px 0 15px;
  }
  .spotlights {
    justify-content: left;
  }
  .message span h2 {
    font-size: 1.05em;
    line-height: 1.4;
  }
    .message span p {
    font-size: 20px;
}
}
@media (max-width: 425px) {
  #hero {
    background-size: auto 425px;
  }
  .hero-content {
    padding: 100px 0 10px;
  }
}

#homeTabs {
  background-image: linear-gradient(#ffffff, #ffffff 37px, #f3f2ef 37px);
  text-align: center;
  border-top: 1px solid #dedacd;
}
#homeTabs input[type="radio"] {
  position: absolute;
  visibility: hidden;
}
#homeTabs label {
  display: inline-block;
  padding: 14px 0;
  border-radius: 4px 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  width: 20%;
  z-index: 1;
  margin-top: -14px;
  text-align: center;
  background-image: linear-gradient(#f4f1ec, #dedacd);
  color: #1c1818;
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.15);
}
#homeTabs input:not(:checked) + label:hover {
  color: #000;
  text-shadow: 0 0 8px #fff, 0 0 5px #fff;
}
#homeTabs input:checked + label {
  background-image: linear-gradient(#fff, #f4f1ec);
  color: #0b2572;
  font-weight: bold;
}
#homeTabs .content {
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  background-color: #f4f1ec;
  justify-content: center;
  align-items: center;
}
#homeTabs .content > #frame-listings,
#homeTabs .content > #frame-logos,
#homeTabs .content > #frame-nav,
#homeTabs .content > #sun-listings,
#homeTabs .content > #sun-logos,
#homeTabs .content > #sun-nav,
#homeTabs .content > #contact-listings,
#homeTabs .content > #contacts-logos,
#homeTabs .content > #contacts-nav {
  display: none;
}
#tab-1:checked ~ .content #frame-listings,
#tab-1:checked ~ .content #frame-logos,
#tab-1:checked ~ .content #frame-nav,
#tab-2:checked ~ .content #sun-logos,
#tab-2:checked ~ .content #sun-nav,
#tab-2:checked ~ .content #sun-listings,
#tab-3:checked ~ .content #contact-listings,
#tab-3:checked ~ .content #contacts-nav,
#tab-3:checked ~ .content #contacts-logos {
  display: flex;
  animation-name: inUp;
  animation-timing-function: ease-in-out;
  animation-duration: 0.6s;
}
@keyframes inUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  90% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  #homeTabs label {
    width: 32%;
    font-size: 12px;
  }
}
@media (max-width: 450px) {
  #homeTabs label {
    font-size: 11px;
  }
}

@media (max-width: 1134px) {
  #homeTabs .content::before {
    height: 260px;
    width: 20px;
    position: absolute;
    right: 0;
    content: "";
    background-image: linear-gradient(
      to right,
      rgba(243, 242, 239, 0),
      #f3f2ef
    );
    pointer-events: none;
  }
  #homeTabs .content::after {
    height: 260px;
    width: 20px;
    position: absolute;
    left: 0;
    content: "";
    background-image: linear-gradient(
      to right,
      #f3f2ef,
      rgba(243, 242, 239, 0)
    );
    pointer-events: none;
  }
  #homeTabs .section::after {
    content: "";
    border-right: 12px #f3f2ef solid;
  }
  #homeTabs .section::before {
    content: "";
    border-left: 12px #f3f2ef solid;
  }
}

#homeTabs .section {
  margin: 24px 0;
}
#homeTabs #frame-listings,
#homeTabs #frame-logos,
#homeTabs #frame-nav,
#homeTabs #sun-listings,
#homeTabs #sun-logos,
#homeTabs #sun-nav,
#homeTabs #contact-listings,
#homeTabs #contacts-logos,
#homeTabs #contacts-nav {
  display: flex;
  width: 100%;
  max-width: 1340px;
  flex-flow: row nowrap;
  padding: 8px 0;
  overflow-x: auto;
  cursor: pointer;
}

#homeTabs .listing {
  display: flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  flex: 1 1 20%;
  min-width: 184px;
  background-color: #fff;
  border-radius: 4px;
  margin: 0 12px;
  padding: 0px 8px 16px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.24);
}

#homeTabs .listing:hover {
  box-shadow: 0 3px 5px rgb(0, 0, 0, 0.25);
}
#homeTabs .listing:hover .swatch div {
  box-shadow: none;
}

#homeTabs .product-image img {
  width: 100%;
}
#homeTabs .product-image {
  display: flex;
  width: 100%;
  aspect-ratio: 2/1;
  background-size: contain;
  margin: 24px 0px 12px;
  align-items: center;
  justify-content: center;
}

#homeTabs .info {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

#homeTabs .name-swatch-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

#homeTabs .name {
  display: block;
  color: #0b2572;
  font-size: 14px;
  line-height: 150%;
  font-weight: 700;
  text-align: center;
}

#homeTabs .swatch div {
  height: 24px;
  width: 24px;
  float: left;
  background-color: #ccc;
  margin: 0 4px;
  border-radius: 2px;
  border: solid #fff 2px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  background-size: cover;
}

/*SWATCH COLORS*/
#homeTabs .swatch div.swatchColorTurtoise {
  background-image: url(../jpg/b5789b49e63a925b9192.jpg);
  background-size: 145%;
  background-position: center;
}

#homeTabs .swatch div.swatchColorCrystal {
  background-image: url(../png/4bd22597574c0cfda122.png);
  background-size: 145%;
  background-position: center;
}

#homeTabs .swatch div.swatchColorPearl {
  background-image: url(../png/0dac43f7eb1b39d4f400.png);
  background-size: 145%;
  background-position: center;
}

/*CONTACTS SPECIFIC*/
#homeTabs #contact-listings .listing {
  padding: 0px 8px 8px;
}

#homeTabs #contact-listings .listing div.product-image {
  margin: 8px 24px;
  aspect-ratio: 3/2;
}

#homeTabs #contact-listings div .info {
  padding: 16px 0px;
  border-top: 2px solid #e3e3e3;
}

#homeTabs #frame-nav,
#homeTabs #frame-logos,
#homeTabs #sun-nav,
#homeTabs #sun-logos,
#homeTabs #contacts-nav,
#homeTabs #contacts-logos {
  padding-left: 32px;
  padding-bottom: 16px;
  padding-top: 0;
}
#homeTabs #frame-nav a,
#homeTabs #sun-nav a,
#homeTabs #contacts-nav a {
  border: #0b2572 solid 1px;
  border-radius: 4em;
  color: #0b2572;
  padding: 12px 0;
  margin-right: 12px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  width: calc(25% - 18px);
  transition: all ease 0.5s;
  font-weight: 700;
}
#homeTabs #frame-nav a:hover,
#homeTabs #sun-nav a:hover,
#homeTabs #contacts-nav a:hover {
  background-color: #e7e6e3;
  transition: none;
}
#homeTabs #frame-logos img,
#homeTabs #sun-logos img {
  filter: brightness(100%) saturate(100%) sepia(8%) hue-rotate(216deg)
    brightness(108%) contrast(90%);
}
#homeTabs #frame-logos a,
#homeTabs #sun-logos a,
#homeTabs #contacts-logos a {
  width: 9.6%;
  min-width: 90px;
  border-radius: 4px;
}
#homeTabs #frame-logos a:hover,
#homeTabs #sun-logos a:hover,
#homeTabs #contacts-logos a:hover {
  background-color: #e7e6e3;
}
#homeTabs #frame-logos a:hover img,
#homeTabs #sun-logos a:hover img {
  filter: brightness(100%) saturate(100%) invert(3%) sepia(0%) saturate(249%)
    hue-rotate(101deg) brightness(92%) contrast(100%);
}
#homeTabs #contacts-logos a {
  padding: 8px 12px;
}
#homeTabs #contacts-logos a img {
  height: 24px;
}
#homeTabs #sun-logos,
#homeTabs #sun-nav,
#homeTabs #contacts-logos,
#homeTabs #contacts-nav {
  justify-content: center;
}
@media (max-width: 810px) {
  #homeTabs #contacts-logos {
    justify-content: left;
  }
}
@media (max-width: 584px) {
  #tab-1:checked ~ .content #frame-nav,
  #tab-2:checked ~ .content #sun-nav,
  #tab-3:checked ~ .content #contacts-nav {
    flex-wrap: wrap;
  }
  #homeTabs #sun-logos {
    justify-content: left;
  }
  #homeTabs #frame-nav a,
  #homeTabs #sun-nav a,
  #homeTabs #contacts-nav a {
    width: calc(50% - 18px);
    margin-bottom: 10px;
    font-size: 12px;
  }
}

.disclaimer-icon {
  top: -0.5em;
  font-size: 55%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  margin-left: 2px;
}
h2.terms-modal {
  font-size: 1.35em;
  margin: 0 auto;
  line-height: 2rem;
}
.modal-body p {
  margin-bottom: 5px;
  line-height: 1.3;
}
hr.hr-modal {
  margin: 10px 0;
}