@charset "UTF-8";
/*!
 * Typography
 */
/*!
 * Breakpoints
 */
/*!
 * Color palette
 */
/**
 * De pixels a porcentaje en base al tamaño de un wrapper.
 */
.about-distributor {
  background-color: #F2F2F3;
}
.about-distributor__wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
@media (min-width: 769px) {
  .about-distributor__wrapper {
    padding: 90px 20px;
  }
}
@media (min-width: 1201px) {
  .about-distributor__wrapper {
    padding: 120px 20px;
  }
}
.about-distributor__block {
  padding: 60px 0;
}
@media (min-width: 1441px) {
  .about-distributor__block {
    padding: 90px 0;
  }
}
@media (min-width: 769px) {
  .about-distributor__block-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .about-distributor__block-wrapper.is-inverse {
    flex-direction: row-reverse;
  }
}
.about-distributor__block-caption {
  flex: 6;
  display: flex;
  align-content: center;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
}
@media (min-width: 769px) {
  .about-distributor__block-caption {
    max-width: 100%;
  }
}
.about-distributor__block-caption-wrapper {
  text-align: center;
}
@media (min-width: 769px) {
  .about-distributor__block-caption-wrapper {
    padding-left: 40px;
    padding-right: 40px;
    text-align: left;
  }
}
@media (min-width: 993px) {
  .about-distributor__block-caption-wrapper {
    padding-left: 80px;
    padding-right: 80px;
  }
}
.about-distributor__block-caption-title {
  opacity: 0;
  position: relative;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.5px;
}
@media (min-width: 769px) {
  .about-distributor__block-caption-title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
  }
}
.about-distributor__block-caption-title.is-visible {
  display: block;
  animation: 1s ease 0s 1 captionFadeIn forwards;
}
.about-distributor__block-caption-subtitle {
  opacity: 0;
  position: relative;
  margin: 0;
  color: #9999A7;
  font-size: 16px;
  line-height: 25px;
}
@media (min-width: 993px) {
  .about-distributor__block-caption-subtitle {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.1px;
  }
}
.about-distributor__block-caption-subtitle.is-visible {
  display: block;
  animation: 1s ease 0.2s 1 captionFadeIn forwards;
}
.about-distributor__block-caption-button {
  opacity: 0;
  position: relative;
  margin-top: 60px !important;
  padding: 18px 30px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.about-distributor__block-caption-button.is-visible {
  display: inline-block !important;
  animation: 1s ease 0.4s 1 captionFadeIn forwards;
}
.about-distributor__block-colash {
  position: relative;
  width: 80%;
  max-width: 480px;
  aspect-ratio: 1/1;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .about-distributor__block-colash {
    flex: 6;
    max-width: 100%;
  }
}
.about-distributor__block-colash-card {
  display: none;
  position: absolute;
  overflow: hidden;
  margin-left: 50%;
  margin-top: 50%;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
  aspect-ratio: 1/1;
}
.about-distributor__block-colash-card.is-visible {
  display: block;
  animation: 1.5s ease 0.2s 1 cardFadeIn backwards;
}
.about-distributor__block-colash-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-distributor__block-colash-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about-distributor__block-colash-layer.layer--1 {
  z-index: 2;
}
.about-distributor__block-colash-layer.layer--2 {
  z-index: 1;
}
.about-distributor__block-colash-layer.layer--2 .about-distributor__block-colash-card {
  box-shadow: none;
}
.about-distributor__block-colash--about-us .layer--1 .card--01 {
  width: 51.724137931%;
  left: -5.1724137931%;
  top: -37.9310344828%;
}
.about-distributor__block-colash--about-us .layer--1 .card--02 {
  width: 37.9310344828%;
  left: -46.5517241379%;
  top: -10.3448275862%;
}
.about-distributor__block-colash--about-us .layer--1 .card--03 {
  width: 20.6896551724%;
  left: -5.1724137931%;
  top: 17.2413793103%;
}
.about-distributor__block-colash--about-us .layer--2 .card--01 {
  width: 34.4827586207%;
  left: -29.3103448276%;
  top: -29.3103448276%;
}
.about-distributor__block-colash--about-us .layer--2 .card--02 {
  width: 25.8620689655%;
  left: 6.8965517241%;
  top: 5.1724137931%;
}
.about-distributor__block-colash--success-cases .layer--1 .card--01 {
  width: 43.1034482759%;
  left: -27.5862068966%;
  top: -24.1379310345%;
}
.about-distributor__block-colash--success-cases .layer--1 .card--02 {
  width: 27.5862068966%;
  left: 18.9655172414%;
  top: -36.2068965517%;
}
.about-distributor__block-colash--success-cases .layer--1 .card--03 {
  width: 20.6896551724%;
  left: -27.5862068966%;
  top: 22.4137931034%;
}
.about-distributor__block-colash--success-cases .layer--1 .card--04 {
  width: 17.2413793103%;
  left: -1.724137931%;
  top: -44.8275862069%;
}
.about-distributor__block-colash--success-cases .layer--1 .card--05 {
  width: 13.7931034483%;
  left: -44.8275862069%;
  top: 5.1724137931%;
}
.about-distributor__block-colash--success-cases .layer--2 .card--01 {
  width: 48.275862069%;
  left: -15.5172413793%;
  top: -39.6551724138%;
}
.about-distributor__block-colash--success-cases .layer--2 .card--02 {
  width: 25.8620689655%;
  left: -39.6551724138%;
  top: 8.6206896552%;
}
.about-distributor__block-colash--success-cases .about-distributor__block-colash-card img {
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 15%;
  max-width: 200px;
  box-sizing: border-box;
}
.about-distributor__block-colash--partners .layer--1 .card--01 {
  width: 51.724137931%;
  left: -44.8275862069%;
  top: -32.7586206897%;
}
.about-distributor__block-colash--partners .layer--1 .card--02 {
  width: 32.7586206897%;
  left: 10.3448275862%;
  top: -3.4482758621%;
}
.about-distributor__block-colash--partners .layer--1 .card--03 {
  width: 20.6896551724%;
  left: -13.7931034483%;
  top: 22.4137931034%;
}
.about-distributor__block-colash--partners .layer--2 .card--01 {
  width: 34.4827586207%;
  left: -5.1724137931%;
  top: -22.4137931034%;
}
.about-distributor__block-colash--partners .layer--2 .card--02 {
  width: 25.8620689655%;
  left: -31.0344827586%;
  top: 6.8965517241%;
}
.about-distributor__block-colash--careers .layer--1 .card--01 {
  width: 48.275862069%;
  left: -24.1379310345%;
  top: -25.8620689655%;
}
.about-distributor__block-colash--careers .layer--1 .card--02 {
  width: 27.5862068966%;
  left: -24.1379310345%;
  top: 25.8620689655%;
}
.about-distributor__block-colash--careers .layer--1 .card--03 {
  width: 20.6896551724%;
  left: 17.2413793103%;
  top: -50%;
}
.about-distributor__block-colash--careers .layer--1 .card--04 {
  width: 22.4137931034%;
  height: 34.4827586207%;
  left: -50%;
  top: 1.724137931%;
}
.about-distributor__block-colash--careers .layer--1 .card--05 {
  width: 22.4137931034%;
  height: 34.4827586207%;
  left: 27.5862068966%;
  top: -25.8620689655%;
}
.about-distributor__block-colash--careers .layer--2 .card--01 {
  width: 34.4827586207%;
  left: 5.1724137931%;
  top: -34.4827586207%;
}
.about-distributor__block-colash--careers .layer--2 .card--02 {
  width: 34.4827586207%;
  left: -43.1034482759%;
  top: -3.4482758621%;
}
.about-distributor__block-colash--newsroom .layer--1 .card--01 {
  width: 51.724137931%;
  left: -5.1724137931%;
  top: -37.9310344828%;
}
.about-distributor__block-colash--newsroom .layer--1 .card--02 {
  width: 37.9310344828%;
  left: -46.5517241379%;
  top: -10.3448275862%;
}
.about-distributor__block-colash--newsroom .layer--1 .card--03 {
  width: 20.6896551724%;
  left: -5.1724137931%;
  top: 17.2413793103%;
}
.about-distributor__block-colash--newsroom .layer--2 .card--01 {
  width: 34.4827586207%;
  left: -29.3103448276%;
  top: -29.3103448276%;
}
.about-distributor__block-colash--newsroom .layer--2 .card--02 {
  width: 25.8620689655%;
  left: 6.8965517241%;
  top: 5.1724137931%;
}

@keyframes captionFadeIn {
  0% {
    top: 60px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: translateY(0%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) scale(1);
  }
}