:root {
  /*Primary colors*/
  --color-yellow: #ffd800;
  --color-green: #009900;
  --color-green-hover: #15c015;
  --color-light-green: #5cb73c;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #999;
  --color-light-gray: #fbfbfb;
  --color-dark-gray: #8c8c8c;
  --color-darker-gray: #666666;
  --color-blue:#048dfb;
  --color-light-blue:#80c8ff;
  --color-orange:#f56444;
  --color-red:#ff0000;
  /*Text color*/
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-darker-gray);
  --color-text-tertiary: var(--color-white);
  /*Primary Button colors*/
  --button-bg: var(--color-black);
  --button-bg-hover:var(--color-green-hover);
  --button-txt:var(--color-white);
  /*Secondary Warning Button colors*/
  --button-warning-bg: var(--color-yellow);
  --button-warning-bg-hover: var(--color-orang);
  --button-warning-txt: var(--color-black);
  /*Secondary Green Button colors*/
  --button-secondary-bg: var(--color-green);
  --buttom-secondary-bg-hover: var(--color-light-green);
  --button-secondary-txt: var(--color-light-green);
  /*Disabled Button colors*/
  --button-disabled-bg: var(--color-dark-gray);
  --buttom-disabled-bg-hover: var(--color-gray);
  --button-disabled-txt:var( --color-black);
  /*Secondary Blue Button*/
  --button-blue-bg: var(--color-blue);
  --buttom-blue-bg-hover: var(--color-light-blue);
}

:root[data-theme=dark] {
  /*Primary colors*/
  --color-yellow: #ffd800;
  --color-green: #009900;
  --color-green-hover: #15c015;
  --color-light-green: #5cb73c;
  --color-black: #fff;
  --color-white: #000;
  --color-gray: #999;
  --color-light-gray: #fbfbfb;
  --color-dark-gray: #8c8c8c;
  --color-darker-gray: #666666;
  --color-blue:#048dfb;
  --color-light-blue:#80c8ff;
  --color-orange:#f56444;
}

/*Border Radius 5\3px*/
/*Border Radius 10px*/
/*Box Shadow*/
/*transition*/
:root {
  /*Font size*/
  --font-size-s: .6rem;
  --font-size-m: 1rem;
  --font-size-l: 2rem;
  --font-size-xl: 3rem;
  /*Spacing*/
  --spacing-s: .5rem;
  --spacing-m: 1rem;
  --spacing-l: 2rem;
  --spacing-xl: 3rem;
  /*Grid Calc*/
  --grid-layout-gap: 1.2rem;
  --grid-column-count: 5;
  --grid-item--min-width: 15rem;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
}

body {
  font-family: "D-DIN";
  font-size: 16px;
  text-align: center;
  color: var(--color-black);
  line-height: 1.2rem;
  background: var(--color-black);
}

div,
ul,
li,
h1,
h2,
h3,
h4,
p,
a,
span,
strong,
form,
input,
label,
textarea,
header,
nav,
section,
footer,
hgroup,
article,
figure,
hgroup,
content {
  position: relative;
  box-sizing: border-box;
}

body,
ul,
li,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

li {
  list-style: none;
}

a {
  outline: none;
  text-decoration: none;
  cursor: pointer;
}

*:focus {
  outline: none;
}

a img {
  border: none;
}

h1, h2, h3 {
  font-size: clamp(2rem, 2vw, 1.6rem);
  margin: 0;
  line-height: 2rem;
}

p {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

/*Estructura general*/
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/*Bold Font*/
h1,
h2,
h3,
h4 {
  font-family: "D-DIN";
}

/*Regular Font*/
h3 {
  font-family: "D-DIN";
}

@font-face {
  font-family: "D-DIN";
  src: url("../fonts/D-DIN/D-DIN.eot");
  src: url("../fonts/D-DIN/D-DIN.eot?#iefix") format("embedded-opentype"), url("../fonts/D-DIN/D-DIN.woff2") format("woff2"), url("../fonts/D-DIN/D-DIN.woff") format("woff"), url("../fonts/D-DIN/D-DIN.ttf") format("truetype"), url("../fonts/D-DIN/D-DIN.svg#D-DIN") format("svg");
  font-weight: regular;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN-Bold";
  src: url("../fonts/D-DIN/D-DIN-Bold.eot");
  src: url("../fonts/D-DIN/D-DIN-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/D-DIN/D-DIN-Bold.woff2") format("woff2"), url("../fonts/D-DIN/D-DIN-Bold.woff") format("woff"), url("../fonts/D-DIN/D-DIN-Bold.ttf") format("truetype"), url("../fonts/D-DIN/D-DIN-Bold.svg#D-DIN-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/*CTA*/
.defaultcta {
  width: 80%;
  max-width: 200px;
  padding: 0.8rem;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: clamp(0.5rem, 3vw, 0.9rem);
  background: var(--button-bg);
  color: var(--button-txt);
  line-height: 18px;
  border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  font-family: "D-DIN";
  text-transform: uppercase;
  font-weight: bold;
}
.defaultcta:hover, .defaultcta:active {
  text-decoration: none;
  background: var(--button-bg-hover);
}
.defaultcta--blue {
  background: var(--button-blue-bg);
  color: var(--button-txt);
}
.defaultcta--warning {
  background: var(--button-warning-bg);
  color: var(--button-warning-txt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.defaultcta--warning:hover, .defaultcta--warning:active {
  background: var(--button-warning-bg-hover);
}
.defaultcta--warning:hover .cta__text, .defaultcta--warning:active .cta__text {
  animation: slideup 0.6s ease-in-out infinite alternate;
}
@keyframes slideup {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1.5);
  }
}
.defaultcta--secondary {
  color: var(--button-secondary-txt);
  background-color: transparent;
  border: 2px solid var(--button-secondary-bg);
  overflow: hidden;
}
.defaultcta--secondary span {
  z-index: 1;
}
.defaultcta--secondary::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--button-secondary-bg);
  transition: width 0.3s ease;
  z-index: -1;
}
.defaultcta--secondary:hover {
  color: var(--button-txt);
  background-color: transparent;
}
.defaultcta--secondary:hover::after {
  width: 100%;
}
.defaultcta--secondary:target {
  display: none;
}
.defaultcta--disabled {
  background: var(--button-disabled-bg);
  color: var(--button-disabled-txt);
}
.defaultcta--disabled:hover, .defaultcta--disabled:active {
  background: var(--buttom-disabled-bg-hover);
}
.defaultcta--ouline {
  background-color: transparent;
  border: 2px solid var(--color-white);
}
.defaultcta--ouline:active, .defaultcta--ouline:hover {
  border-color: var(--color-green-hover);
  color: var(--color-green-hover);
}
.defaultcta--outline-white {
  color: var(--button-txt);
  background-color: transparent;
  border: 2px solid var(--color-white);
  overflow: hidden;
}
.defaultcta--outline-white span {
  z-index: 1;
}
.defaultcta--outline-white::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  transition: width 0.3s ease;
  z-index: -1;
}
.defaultcta--outline-white:hover {
  color: var(--color-black);
  background-color: transparent;
}
.defaultcta--outline-white:hover::after {
  width: 100%;
}
.defaultcta--orange {
  background-color: var(--color-orange);
}

.catalog__link {
  color: var(--color-text-secondary);
  font-family: "D-DIN";
  font-weight: bold;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 1.2rem;
  border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  text-align: center;
  background-color: var(--color-light-gray);
}
@media screen and (min-width: 768px) {
  .catalog__link {
    text-align: left;
  }
}
.catalog__link:hover, .catalog__link:active, .catalog__link--selected {
  background: linear-gradient(to bottom, var(--color-light-blue) 0%, var(--color-blue) 100%);
  color: var(--color-white);
}
.catalog__link--selected {
  background-image: url(images/reusch-icon-menu.png) no-repeat left bottom;
}

.textlink {
  font-size: clamp(1rem, 1vw, 1.2rem);
  color: var(--color-white);
}
.textlink:active, .textlink:hover {
  text-decoration: underline;
}
.textlink--blue {
  color: var(--color-blue);
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: flex-start;
}
.logo a {
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo a img {
  width: 100%;
  height: auto;
}

.slider__item {
  display: flex;
  flex-direction: column;
}
.slider__item a, .slider__item img {
  width: 100%;
  height: auto;
  display: block;
}
.slider__item--desktop {
  display: none;
}
@media screen and (min-width: 768px) {
  .slider__item--desktop {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  .slider__item--mobile {
    display: none;
  }
}

.product {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product > div {
  width: 100%;
  height: 100%;
  transition: all 1s ease;
}
.product > div img {
  width: 70%;
}
.product__front {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  gap: 0.5rem;
  border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  align-items: center;
  padding-bottom: var(--spacing-m);
}
.product__front h2 {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--color-text-secondary);
  word-break: break-word;
  line-height: 1.2rem;
  display: flex;
  flex-direction: column;
}
.product__front p {
  font-family: "D-DIN-Bold";
}
.product__front:active, .product__front:hover {
  box-shadow: 0 30px 10px -10px #dedede;
  -moz-box-shadow: 0 30px 10px 610px #dedede;
  -webkit-box-shadow: 0 30px 10px -16px #dedede;
  transform: translateY(-1rem);
}
.product__back {
  display: none;
  position: absolute;
  flex-direction: column;
  top: 0;
  justify-content: center;
  padding: var(--spacing-m);
  align-items: center;
  background: var(--color-black);
  gap: 2rem;
}
.product__back:target {
  display: flex;
}

.hidden {
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
}
.form__item {
  display: flex;
  flex-direction: column-reverse;
  padding-top: 2rem;
}
.form__item::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 0.125rem;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.3s;
}
.form__item label {
  font-size: var(--font-size-m);
  color: var(--color-dark-gray);
  top: 3rem;
  left: 1rem;
  transition: all 1s ease;
  position: absolute;
}
.form__item input[type=text],
.form__item input[type=tel],
.form__item input[type=email],
.form__item textarea {
  font-size: var(--font-size-m);
  line-height: 20px;
  border: solid var(--color-gray);
  border-width: 0 0 1px 0;
  padding: var(--spacing-m);
  background-color: var(--color-light-gray);
}
.form__item input[type=text]:not(:-moz-placeholder) + label, .form__item input[type=tel]:not(:-moz-placeholder) + label, .form__item input[type=email]:not(:-moz-placeholder) + label, .form__item textarea:not(:-moz-placeholder) + label {
  top: 0.5rem;
}
.form__item input[type=text]:not(:placeholder-shown) + label, .form__item input[type=text]:focus + label,
.form__item input[type=tel]:not(:placeholder-shown) + label,
.form__item input[type=tel]:focus + label,
.form__item input[type=email]:not(:placeholder-shown) + label,
.form__item input[type=email]:focus + label,
.form__item textarea:not(:placeholder-shown) + label,
.form__item textarea:focus + label {
  top: 0.5rem;
}
.form__item input[type=text].defaultcta,
.form__item input[type=tel].defaultcta,
.form__item input[type=email].defaultcta,
.form__item textarea.defaultcta {
  align-self: flex-end;
  background: var(--button-bg);
}
.form__item:focus-within::before {
  transform: scaleX(1);
}
.form__item:focus-within input {
  box-shadow: 0 0 10px #dedede;
  -moz-box-shadow: 0 0 10px #dedede;
  -webkit-box-shadow: 0 0 10px #dedede;
}

.social {
  display: flex;
  justify-content: flex-end;
}
.social__link {
  display: flex;
  flex-direction: column;
  opacity: 0.8;
}
.social__link:active, .social__link:hover {
  opacity: 1;
}
.social__link img {
  width: 3rem;
  height: auto;
}

.hamburger {
  display: none;
}
.hamburger img {
  width: 2.5rem;
  height: 2.5rem;
}
.hamburger img:hover, .hamburger img:active {
  opacity: 0.8;
}
@media screen and (max-width: 1200px) {
  .hamburger {
    display: flex;
    flex-direction: column;
  }
}

.advertising {
  grid-column: span 2;
  grid-row: span 2;
}
.advertising__item {
  background-color: #000;
  display: flex;
  flex-direction: column;
  border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  overflow: hidden;
}
@media screen and (min-width: 1000px) {
  .advertising__item {
    height: 100%;
  }
}
.advertising__desktop {
  display: none;
}
@media screen and (min-width: 767px) {
  .advertising__desktop {
    display: flex;
  }
}
.advertising__mobile {
  display: flex;
}
@media screen and (min-width: 767px) {
  .advertising__mobile {
    display: none;
  }
}

.tallas {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  font-size: 0.8rem;
}
.tallas > div {
  border: 1px solid var(--color-gray);
  padding: 0 0.2rem;
}

.cookies {
  background-color: var(--color-white);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
  box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000;
}
.cookies p {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1rem;
}
@media screen and (min-width: 1000px) {
  .cookies p {
    font-size: 1.2rem;
  }
}

.hide {
  animation: hide 1s;
  -webkit-animation: hide 1s;
  bottom: -10rem;
}

/* Form animation*/
@keyframes hide {
  from {
    bottom: 0px;
    opacity: 1;
  }
  to {
    bottom: -10rem;
    opacity: 0;
  }
}
/* Chrome, Safari, Opera */
.alerts {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--color-yellow);
  color: #000;
  padding: var(--spacing-s);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.alerts img {
  fill: var(--color-yellow);
  width: 2rem;
  height: 2rem;
}
.alerts svg path {
  fill: red;
}
.alerts--error {
  background: var(--color-red);
  color: var(--color-white);
}
.alerts--error img {
  fill: var(--color-white);
}

.menu {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  height: 100%;
  min-width: 16rem;
}
.menu:target {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: show-menu 0.5s;
  background-color: var(--color-black);
}
@media screen and (min-width: 1200px) {
  .menu {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
    height: auto;
    position: relative;
  }
}
.menu__link {
  color: var(--color-text-tertiary);
  padding: 0.6rem;
  text-align: left;
  font-size: clamp(0.8rem, 2vw, 1rem);
  text-align: left;
  width: auto;
  border-bottom: 2px solid var(--color-text-primary);
}
@media screen and (max-width: 1200px) {
  .menu__link {
    text-align: left;
    padding: 0.6rem;
    width: 100%;
    font-size: 1.2rem;
  }
}
.menu__link:hover, .menu__link:active, .menu__link--selected {
  border-color: 2px solid var(--color-white);
}
.menu__link--outline {
  border: 2px solid var(--color-white);
  border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
}
.menu__hide {
  color: var(--color-white);
  font-size: 3rem;
  text-align: right;
  padding: 1rem;
}
.menu__hide:active, .menu__hide:hover {
  border-color: var(--color-black);
}
.menu__hide:target {
  animation: hide-menu 1s;
}
@media screen and (min-width: 1200px) {
  .menu__hide {
    display: none;
  }
}

/* mobile menu animation*/
@keyframes show-menu {
  from {
    right: -16rem;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@keyframes hide-menu {
  from {
    right: 0px;
    opacity: 1;
  }
  to {
    right: -16rem;
    opacity: 0;
  }
}
.catalog {
  gap: 2rem;
  padding: 0 var(--spacing-m);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1000px) {
  .catalog {
    gap: 2rem;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto;
  }
}
.catalog__nav {
  display: flex;
  gap: 0.5rem;
  overflow: auto;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .catalog__nav {
    flex-direction: column;
  }
}
.catalog__products {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
.catalog__desc {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.catalog__desc h1 {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 3.6rem);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(1rem, 3vw, 2rem);
}
.catalog__desc h1 span {
  font-family: "D-DIN-Bold";
  font-size: clamp(2.8rem, 4vw, 3.5rem);
  line-height: 3.2rem;
}
.catalog__desc p {
  line-height: 2rem;
  color: var(--color-text-secondary);
  text-align: justify;
}
.catalog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  grid-auto-flow: row dense;
  width: 100%;
  order: 1;
}
@media screen and (min-width: 768px) {
  .catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 23%));
    order: 2;
  }
}

.bannerbox {
  display: flex;
  flex-direction: column;
}
.bannerbox > a {
  width: 100%;
  height: auto;
}
.bannerbox img {
  width: 100%;
  height: auto;
}

.carbon {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1000px) {
  .carbon {
    width: 100%;
  }
}
.carbon a {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  align-items: center;
  overflow: hidden;
  padding: var(--spacing-l);
  border-radius: 1rem;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
}
.carbon a > img {
  position: absolute;
  bottom: 0;
  width: 200%;
}
@media screen and (min-width: 1000px) {
  .carbon a > img {
    width: 100%;
    position: relative;
  }
}
@media screen and (min-width: 1000px) {
  .carbon a {
    overflow: initial;
    width: 100%;
    padding: 0;
    padding: initial;
    border-radius: 0;
  }
}
.carbon__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.carbon__text h2 {
  font-size: clamp(3rem, 4vw, 2.2rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  letter-spacing: -2px;
  font-style: italic;
  font-weight: bold;
  line-height: initial;
}
.carbon__text h2 span {
  color: var(--color-orange);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-family: "D-DIN-Bold";
}
.carbon__text p {
  color: #fff;
  max-width: 500px;
}
@media screen and (min-width: 1000px) {
  .carbon__text {
    position: absolute;
    left: 3rem;
    top: 20%;
    width: 45%;
  }
}
.carbon__glove {
  width: 70%;
}
@media screen and (min-width: 1000px) {
  .carbon__glove {
    position: absolute;
    right: 20%;
    top: -2rem;
    width: 25%;
  }
}
.carbon__glove img {
  width: 100%;
  height: auto;
  rotate: 20deg;
}
.carbon__logo {
  width: 70%;
}
@media screen and (min-width: 1000px) {
  .carbon__logo {
    position: absolute;
    right: 3rem;
    bottom: 2rem;
    width: 10rem;
  }
}

.scrolled-banner h2 {
  animation: left 0.6s linear forwards;
  left: -20rem;
  opacity: 0;
}
.scrolled-banner p {
  animation: bottom 0.6s linear forwards;
  bottom: -10rem;
  opacity: 0;
}
.scrolled-banner .defaultcta {
  opacity: 0;
  animation: bottom 0.6s linear forwards;
  bottom: -5rem;
  animation-delay: 0.6s;
}

/* Banner animation*/
@keyframes left {
  from {
    left: -20rem;
    opacity: 0;
  }
  to {
    left: 0rem;
    opacity: 1;
  }
}
@keyframes bottom {
  from {
    bottom: -5rem;
    opacity: 0;
  }
  to {
    bottom: 0rem;
    opacity: 1;
  }
}
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.modal .closebtn {
  position: absolute;
  right: var(--spacing-m);
  top: var(--spacing-m);
  z-index: 2;
  font-size: 3rem;
  color: var(--color-black);
}
.modal .closebtn:active, .modal .closebtn:hover {
  color: var(--color-green);
}
.modal:target {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__msg {
  width: 90%;
  max-width: 40rem;
  background-color: var(--color-white);
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  height: 80vh;
  overflow-y: scroll;
  /* Add animation */
  animation: show 0.5s;
  /* Chrome, Safari, Opera */
  -webkit-animation: show 0.5s;
}
@media screen and (min-width: 600px) {
  .modal__msg {
    height: auto;
  }
}
.modal__msg h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}
.modal__msg p {
  color: var(--color-text-secondary);
}

/* Form animation*/
@keyframes show {
  from {
    top: -10rem;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
.grip {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .grip {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
}
.grip__img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grip__img img {
  width: clamp(300px, 70vw, 500px);
  height: auto;
}
.grip__desc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: justify;
  padding: var(--spacing-l);
}
.grip__desc h2 {
  text-transform: uppercase;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-family: "D-DIN-Bold";
}
.grip__desc p {
  color: var(--color-text-secondary);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}
.grid-4__item {
  display: flex;
  flex-direction: column;
  bottom: -100rem;
}
.grid-4__item img {
  width: 100%;
  height: auto;
  transition: all 1s ease;
}
.grid-4__item img:hover, .grid-4__item img:active {
  transform: scale(1.1);
  transition: all 1s ease;
}

.scrolled .grid-4__item {
  animation: card 0.6s linear forwards;
}
.scrolled .grid-4__item--1 {
  animation-delay: 0.4s;
}
.scrolled .grid-4__item--2 {
  animation-delay: 0.6s;
}
.scrolled .grid-4__item--3 {
  animation-delay: 0.8s;
}
.scrolled .grid-4__item--4 {
  animation-delay: 1s;
}

/* Cards animation*/
@keyframes card {
  from {
    bottom: -5rem;
    opacity: 0;
  }
  to {
    bottom: 0rem;
    opacity: 1;
  }
}
.contact {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-self: center;
}
@media screen and (min-width: 767px) {
  .contact {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
}
.contact__col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #000;
}
.header__nav {
  display: grid;
  grid-template-columns: 1fr auto auto;
  max-width: 100rem;
  width: 100%;
  align-items: center;
  padding: var(--spacing-m);
  gap: 1rem;
}
.header__nav .defaultcta {
  font-size: 0.8rem;
  max-width: 250px;
  min-width: 180px;
  justify-self: flex-end;
  padding: 0.5rem;
}

content {
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100rem;
  gap: 2rem;
}

.simple {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 2rem;
}

footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0 10rem;
  background: #000;
}

.footer {
  width: 90%;
  max-width: 55rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-l);
}
.footer__col {
  color: var(--color-text-tertiary);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  align-items: flex-start;
}
.footer__col h2 {
  font-size: clamp(1.2rem, 1vw, 1.4rem);
  line-height: initial;
}
.footer__col p {
  font-size: 1rem;
  color: #fff;
}
.footer__logo {
  max-width: 10rem;
  display: flex;
  flex-direction: column;
}
.footer__logo img {
  width: 100%;
  height: auto;
}

.single {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: justify;
  padding-bottom: var(--spacing-xl);
  width: 90%;
  max-width: 80rem;
}
.single h1, .single h2 {
  font-family: "D-DIN-Bold";
  text-align: left;
}
.single ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.2rem;
  padding-left: var(--spacing-m);
}
.single ul li {
  list-style: disc;
}
.single ul li a {
  color: var(--color-black);
}
.single ul li a:hover, .single ul li a:active {
  text-decoration: underline;
}
.single p a {
  color: var(--color-black);
}
.single p a:hover {
  text-decoration: underline;
}/*# sourceMappingURL=main.css.map */