/*
Theme Name: Cuatro Cuatros
Theme URI: https://cuatrocuatros.com
Description: Theme for Cuatro Cuatros website. 
Author: Marina
Author URI: https://franc3s.es
Version: 1.0
*/
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.eot");
  src: url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.eot?#iefix") format("embedded-opentype"), url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.woff2") format("woff2"), url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.woff") format("woff"), url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.ttf") format("truetype"), url("./fonts/helvetica-neue/HelveticaNeue-CondensedBold.svg#HelveticaNeue-CondensedBold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
body {
  background-color: #FFFFFF;
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
}

body,
header,
ul,
section,
div,
h1,
h2,
p {
  margin: 0;
  padding: 0;
}

.main--padding {
  padding: 4.8rem 0.8rem;
}
@media all and (min-width: 48rem) {
  .main--padding {
    padding: 4rem 2.8rem;
  }
}

.topbar {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 3;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 53.26% 39.72% 7.01%;
  grid-template-columns: 53.26% 39.72% 7.01%;
  list-style: none;
  padding: 2rem 0.8rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
@media all and (min-width: 37rem) {
  .topbar {
    -ms-grid-columns: 67.34% 21.77% 10.89%;
    grid-template-columns: 67.34% 21.77% 10.89%;
  }
}
@media all and (min-width: 48rem) {
  .topbar {
    padding: 2rem 2.8rem;
  }
}

.topbar__item {
  font-size: 2.4rem;
  text-transform: uppercase;
  color: #FFFFFF;
}
@media all and (min-width: 48rem) {
  .topbar__item {
    font-size: 3.2rem;
  }
}
.topbar__item > a:hover {
  text-decoration: underline;
}

h1,
.h1 {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
}
@media all and (min-width: 48rem) {
  h1,
.h1 {
    font-size: 3.2rem;
  }
}

h2,
.h2 {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
}
@media all and (min-width: 48rem) {
  h2,
.h2 {
    font-size: 2rem;
  }
}

p,
.p {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: inherit;
}
a:visited {
  color: inherit;
}

button {
  color: inherit;
  background-color: transparent;
}
button:visited {
  color: inherit;
}

.hero__bg-img {
  background-image: url(https://cuatrocuatros.com/wp-content/uploads/2023/06/tarta4444_LuzDegradado1-scaled.jpg);
  background-color: #000000;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.product__hover-img {
  display: none;
}
.product.active .product__hover-img {
  display: none;
}
@media all and (min-width: 48rem) {
  .product:hover:not(.active) .product__hover-img {
    display: inline-block;
    position: fixed;
    inset: 10% 0 0 20%;
  }
}
.product__hover-img__image {
  width: 35vw;
  height: auto;
}
.product__info__images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 0;
}
@media all and (min-width: 60rem) {
  .product__info__images {
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
.product__info__images__item {
  width: 100%;
  height: auto;
}

.contact__image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  padding-top: 6rem;
  padding-bottom: 2rem;
}
@media all and (min-width: 48rem) {
  .contact__image {
    padding-top: 3.2rem;
    padding-bottom: 0;
    padding-left: 8rem;
  }
}
@media all and (min-width: 90rem) {
  .contact__image {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}
.contact__image__footer {
  font-size: 1.6rem;
}
@media all and (min-width: 48rem) {
  .contact__image__footer {
    padding-left: 8rem;
  }
}
@media all and (min-width: 90rem) {
  .contact__image__footer {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

.hero__text {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 3rem;
  color: #FFFFFF;
  text-transform: uppercase;
}
.hero__text__padding {
  padding-left: 12rem;
  padding-right: 12rem;
}

.contact__title {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  text-transform: uppercase;
  padding-bottom: 0.2rem;
  padding-top: 3.2rem;
}

.product {
  border: none;
  border-bottom: 1px solid black;
  padding: 1.2rem 0;
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
}
.product:visited {
  color: inherit;
}
@media all and (min-width: 48rem) {
  .product {
    border-bottom: 1.3px solid black;
  }
}
@media all and (min-width: 90rem) {
  .product {
    border-bottom: 1.5px solid black;
  }
}
.product__specs {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 53.26% 46.73%;
  grid-template-columns: 53.26% 46.73%;
}
@media all and (min-width: 37rem) {
  .product__specs {
    -ms-grid-columns: 67.34% 32.66%;
    grid-template-columns: 67.34% 32.66%;
  }
}
.product__specs__collection-material {
  z-index: 2;
}
@media all and (min-width: 48rem) {
  .product__specs__collection-material {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
  }
}
.product__info__desc {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media all and (min-width: 48rem) {
  .product__info__desc {
    -ms-grid-columns: 67.34% 32.66%;
    grid-template-columns: 67.34% 32.66%;
  }
}
.product__info__desc__text {
  padding-bottom: 2rem;
}
@media all and (min-width: 48rem) {
  .product__info__desc__text {
    width: 90%;
  }
}

.accordion,
.jsAccordion {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-size: 2rem;
  padding: 0;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media all and (min-width: 48rem) {
  .accordion,
.jsAccordion {
    font-size: 2rem;
  }
}

.jsActive, .jsAccordion:hover {
  background-color: white;
}

.jsAccordContent {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s ease-out;
  transition: max-height 0.5s ease-out;
}

.contact {
  color: white;
  background-color: black;
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 5.6rem;
}
@media all and (min-width: 48rem) {
  .contact {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (min-width: 90rem) {
  .contact {
    -ms-grid-columns: 30% 37.34% 32.66%;
    grid-template-columns: 30% 37.34% 32.66%;
    min-height: 100vh;
  }
}
.contact__awards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}
.contact__awards:first-of-type {
  padding-top: 0.8rem;
}
.contact__link:hover {
  text-decoration: underline;
}

.padding-right {
  padding-right: 4rem;
}

.footer-container {
  padding: 0rem 0.8rem 4.8rem;
}
@media all and (min-width: 48rem) {
  .footer-container {
    padding: 0 2.8rem 4rem;
  }
}

.footer {
  font-family: "Helvetica Neue", "Arial Narrow", sans-serif;
  font-weight: bold;
  font-size: 2rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  z-index: 2;
}
@media all and (min-width: 37rem) {
  .footer {
    -ms-grid-columns: 67.34% 0 21.77% 0 10.89%;
    grid-template-columns: 67.34% 21.77% 10.89%;
    gap: 0;
  }
}
.footer__element {
  text-transform: uppercase;
  list-style: none;
  z-index: 2;
  -ms-grid-column-align: center;
      justify-self: center;
}
@media all and (min-width: 37rem) {
  .footer__element {
    justify-self: flex-start;
  }
}
.footer__element > a:hover {
  text-decoration: underline;
}
.footer__element__email, .footer__element__insta {
  text-decoration: underline;
}
@media all and (min-width: 48rem) {
  .footer__element__email, .footer__element__insta {
    text-decoration: none;
  }
}

.justify-self--center {
  -ms-grid-column-align: center;
      justify-self: center;
}

.justify-self--end {
  -ms-grid-column-align: end;
      justify-self: end;
}
.justify-self--end-variation {
  -ms-grid-column-align: center;
      justify-self: center;
}
@media all and (min-width: 48rem) {
  .justify-self--end-variation {
    -ms-grid-column-align: end;
        justify-self: end;
  }
}

.color-bg-black {
  background-color: #000000;
}

.jsCarouselTitle {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.jsCarouselTitle p {
  font-size: 6rem;
  white-space: nowrap;
  text-transform: uppercase;
  margin: 12px 0;
}

.jsHide {
  display: none;
}