@charset "UTF-8";
@font-face {
  font-family: "font-light";
  src: url("/assets/fonts/neutrif/font-light.woff2") format("woff2"), url("/assets/fonts/neutrif/font-light.woff") format("wof");
  font-display: swap;
}
@font-face {
  font-family: "font-regular";
  src: url("/assets/fonts/neutrif/font-regular.woff2") format("woff2"), url("/assets/fonts/neutrif/font-regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "font-bold";
  src: url("/assets/fonts/neutrif/font-bold.woff2") format("woff2"), url("/assets/fonts/neutrif/font-bold.woff") format("woff");
  font-display: swap;
}
/*Custom template */
.swiper {
  height: 400px;
}

.popular {
  position: relative;
}
.popular .swiper-slide {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), black);
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: tranform;
}
@media (min-width: 980px) {
  .popular .swiper-slide:hover {
    transform: scale(1.05);
  }
}
.popular .swiper-container {
  padding-left: 0;
  padding-top: 1.5em;
  padding-bottom: 4em;
}
@media (min-width: 992px) {
  .popular .swiper-container {
    padding-left: calc((100vw - 1280px) / 2 + 16px);
  }
}
.popular .slide-link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 0;
  padding-top: 125%;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.popular .slide-link .slide-title {
  font-weight: 600;
  font-size: 1.125em;
  padding: 1.5em 1em 1.5em 1.5em;
  line-height: 1.1;
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.popular .slide-link img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 0.24s ease-out;
  will-change: opacity;
}

.swiper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
}
@media (min-width: 992px) {
  .swiper-header {
    padding-left: calc((100vw - 1280px) / 2 + 16px);
  }
}

.swiper-header .swiper-arrows {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.swiper-header .swiper-arrows .swiper-prev,
.swiper-header .swiper-arrows .swiper-next {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.5em;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  border-radius: 50%;
  outline: none;
  font-weight: bold;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease;
  outline: none;
  border: none;
  cursor: pointer;
}
.swiper-header .swiper-arrows .swiper-prev:hover,
.swiper-header .swiper-arrows .swiper-next:hover {
  background-color: white;
  color: black;
  transform: translateY(-3px);
  box-shadow: 0 0.25em 1.25em hsla(265, 50%, 50%, 0.2);
}
.swiper-header .swiper-arrows .swiper-prev.swiper-button-disabled,
.swiper-header .swiper-arrows .swiper-next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: scale(0.5);
}
.swiper-header .swiper-arrows .swiper-prev div,
.swiper-header .swiper-arrows .swiper-next div {
  display: flex;
  line-height: 1;
  justify-content: center;
  align-items: center;
  margin-top: -4px;
}
.swiper-header .swiper-arrows button + button {
  margin-left: 0.5em;
}

.bottom {
  padding-bottom: 6em;
}

.ov-hidden {
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
select,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
main,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

img {
  max-width: 100%;
  border-width: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

/* Reset de arrows en inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@keyframes underline {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes stretch {
  0% {
    height: 0;
  }
  100% {
    height: 80px;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes bounce {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(0, -15px, 0);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}
/* functional */
/* functional */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-justify {
  text-align: justify;
}

.text-nowrap {
  white-space: nowrap;
}

.is-flex {
  display: flex;
}

.is-inlineflex {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.content-start {
  justify-content: flex-start;
}

.content-end {
  justify-content: flex-end;
}

.content-center {
  justify-content: center;
}

.content-sp-between {
  justify-content: space-between;
}

.content-sp-around {
  justify-content: space-around;
}

.content-sp-evenly {
  justify-content: space-evenly;
}

.align-top {
  align-items: flex-start;
}

.align-middle {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.align-bottom {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.align-multi-top {
  align-content: flex-start;
  flex-wrap: wrap;
}

.align-multi-bottom {
  align-content: flex-end;
  flex-wrap: wrap;
}

.align-multi-center {
  align-content: center;
  flex-wrap: wrap;
}

.align-multi-between {
  align-content: space-between;
  flex-wrap: wrap;
}

.align-multi-around {
  align-content: space-around;
  flex-wrap: wrap;
}

.align-multi-stretch {
  align-content: stretch;
  flex-wrap: wrap;
}

.align-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.align-items-center {
  display: flex;
  align-items: center;
}

.align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sticky-bottom {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  padding: 0 0 0;
  bottom: 0;
}

@media (min-width: 768px) {
  .xs\:text-center {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .sm\:text-center {
    text-align: center;
  }
}

@media (min-width: 1000px) {
  .md\:text-center {
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .lg\:text-center {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .xs\:text-left {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .sm\:text-left {
    text-align: left;
  }
}

@media (min-width: 1000px) {
  .md\:text-left {
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .lg\:text-left {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .xs\:text-right {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .sm\:text-right {
    text-align: right;
  }
}

@media (min-width: 1000px) {
  .md\:text-right {
    text-align: right;
  }
}

@media (min-width: 1280px) {
  .lg\:text-right {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .sm\:align-middle {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
  }
}

@media (min-width: 1000px) {
  .md\:align-middle {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
  }
}

/* functional */
.container {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 100%;
  max-width: 992px;
}
@media (min-width: 768px) {
  .container {
    padding-right: 0;
    padding-left: 0;
    width: 90%;
    max-width: 768px;
  }
}
@media (min-width: 1000px) {
  .container {
    width: 80%;
    max-width: 1000px;
  }
}
@media (min-width: 1280px) {
  .container {
    width: 80%;
    max-width: 1280px;
  }
}
@media (min-width: 1440px) {
  .container {
    width: 100%;
    max-width: 1440px;
  }
}

.container-full {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  max-width: 1500px;
}
@media (min-width: 768px) {
  .container-full {
    padding-right: 0;
    padding-left: 0;
    width: 90%;
    max-width: 768px;
  }
}
@media (min-width: 1000px) {
  .container-full {
    width: 80%;
    max-width: 1000px;
  }
}
@media (min-width: 1280px) {
  .container-full {
    width: 80%;
    max-width: 1280px;
  }
}

.container-bleed {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.container-0 {
  padding-right: 16px;
  padding-left: 16px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 992px;
}
@media (min-width: 768px) {
  .container-0 {
    width: 90%;
    max-width: 768px;
  }
}
@media (min-width: 1000px) {
  .container-0 {
    width: 80%;
    max-width: 992px;
  }
}
@media (min-width: 1280px) {
  .container-0 {
    margin: 0;
    width: 80%;
    max-width: 1280px;
  }
}

.container-global-2 {
  padding-right: 16px;
  padding-left: 16px;
  max-width: 250px;
}
@media (min-width: 768px) {
  .container-global-2 {
    max-width: 1650px;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

.container-global-3 {
  padding-right: 16px;
  padding-left: 16px;
  max-width: 1440px;
}
@media (min-width: 1000px) {
  .container-global-3 {
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

.container-global-4 {
  padding-right: 16px;
  padding-left: 16px;
  max-width: 250px;
}
@media (min-width: 1000px) {
  .container-global-4 {
    max-width: 1440px;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

.container-2 {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 90%;
  max-width: 700px;
}

.container-3 {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 100%;
  max-width: 900px;
}
@media (min-width: 768px) {
  .container-3 {
    padding-right: 0;
    padding-left: 0;
  }
}

.container-4 {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  width: 90%;
  max-width: 360px;
}

.container-5 {
  position: relative;
  padding: 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}
@media (min-width: 1280px) {
  .container-5 {
    max-width: 1000px;
    padding: 0;
  }
}

.container-6 {
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  max-width: 442px;
}

.container-7 {
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  max-width: 295px;
}
@media (min-width: 768px) {
  .container-7 {
    max-width: 460px;
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 1000px) {
  .container-7 {
    max-width: 460px;
  }
}
@media (min-width: 1280px) {
  .container-7 {
    max-width: 595px;
  }
}

.container-8 {
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  max-width: 395px;
}

.container-9 {
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  max-width: 798px;
}
@media (min-width: 768px) {
  .container-9 {
    padding: 0 0;
  }
}

.container-11 {
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  max-width: 1080px;
}
@media (min-width: 768px) {
  .container-11 {
    padding: 0 0;
  }
}

.container-12 {
  padding: 0 24px;
  width: 100%;
  max-width: 1080px;
}
@media (min-width: 768px) {
  .container-12 {
    padding: 0 0;
  }
}

.container-body {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1000px) {
  .container-body {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.container-body2 {
  padding-left: 16px;
  overflow: hidden;
}
@media (min-width: 1000px) {
  .container-body2 {
    padding-left: 40px;
  }
}
.is-rtl .container-body2 {
  padding-right: 16px;
  padding-left: 0;
}
@media (min-width: 1000px) {
  .is-rtl .container-body2 {
    padding-right: 40px;
    padding-left: 0;
  }
}
.container-body2 .swiper-container {
  overflow: inherit;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
  margin-left: 0;
}
@media (min-width: 768px) {
  .row {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .row {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 1280px) {
  .row {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 1440px) {
  .row {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (min-width: 1px) {
  .col-xs-1 {
    -webkit-box-flex: 0;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xs-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xs-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-4 {
    -webkit-box-flex: 0;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xs-5 {
    -webkit-box-flex: 0;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xs-6 {
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-7 {
    -webkit-box-flex: 0;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xs-8 {
    -webkit-box-flex: 0;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xs-9 {
    -webkit-box-flex: 0;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-10 {
    -webkit-box-flex: 0;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xs-11 {
    -webkit-box-flex: 0;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xs-12 {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .col-sm-1 {
    -webkit-box-flex: 0;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .col-md-1 {
    -webkit-box-flex: 0;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .col-lg-1 {
    -webkit-box-flex: 0;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.col-xl-1 {
  -webkit-box-flex: 0;
  flex: 0 0 4.1666666667%;
  max-width: 4.1666666667%;
}

.col-xl-2 {
  -webkit-box-flex: 0;
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-xl-3 {
  -webkit-box-flex: 0;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-xl-4 {
  -webkit-box-flex: 0;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-xl-5 {
  -webkit-box-flex: 0;
  flex: 0 0 20.8333333333%;
  max-width: 20.8333333333%;
}

.col-xl-6 {
  -webkit-box-flex: 0;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-xl-7 {
  -webkit-box-flex: 0;
  flex: 0 0 29.1666666667%;
  max-width: 29.1666666667%;
}

.col-xl-8 {
  -webkit-box-flex: 0;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-xl-9 {
  -webkit-box-flex: 0;
  flex: 0 0 37.5%;
  max-width: 37.5%;
}

.col-xl-10 {
  -webkit-box-flex: 0;
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-xl-11 {
  -webkit-box-flex: 0;
  flex: 0 0 45.8333333333%;
  max-width: 45.8333333333%;
}

.col-xl-12 {
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-xl-13 {
  -webkit-box-flex: 0;
  flex: 0 0 54.1666666667%;
  max-width: 54.1666666667%;
}

.col-xl-14 {
  -webkit-box-flex: 0;
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-xl-15 {
  -webkit-box-flex: 0;
  flex: 0 0 62.5%;
  max-width: 62.5%;
}

.col-xl-16 {
  -webkit-box-flex: 0;
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-xl-17 {
  -webkit-box-flex: 0;
  flex: 0 0 70.8333333333%;
  max-width: 70.8333333333%;
}

.col-xl-18 {
  -webkit-box-flex: 0;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-xl-19 {
  -webkit-box-flex: 0;
  flex: 0 0 79.1666666667%;
  max-width: 79.1666666667%;
}

.col-xl-20 {
  -webkit-box-flex: 0;
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-xl-21 {
  -webkit-box-flex: 0;
  flex: 0 0 87.5%;
  max-width: 87.5%;
}

.col-xl-22 {
  -webkit-box-flex: 0;
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-xl-23 {
  -webkit-box-flex: 0;
  flex: 0 0 95.8333333333%;
  max-width: 95.8333333333%;
}

.col-xl-24 {
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

[class*=col-] {
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0;
}

.col {
  display: block;
  flex: 1 1 0;
  padding: 0 0;
}

@media (min-width: 768px) {
  .col-sm {
    display: block;
    flex: 1 1 0;
    padding: 0 0;
  }
}

@media (min-width: 768px) {
  .col-md {
    display: block;
    flex: 1 1 0;
    padding: 0 0;
  }
}

@media (min-width: 768px) {
  .col-lg {
    display: block;
    flex: 1 1 0;
    padding: 0 0;
  }
}

.bleed {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.bleed-0 {
  padding: 0 0px 0 0px;
  overflow: hidden;
}
.bleed-0 .container-fluid {
  margin-left: -0px;
  margin-right: -0px;
  padding: 0 0px 0 0px;
}
.bleed-0 > .row {
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  flex-wrap: wrap;
}
.bleed-0 > [class*=col-],
.bleed-0 > .col {
  padding: 0px;
  box-sizing: border-box;
}

.single {
  flex-basis: 50%;
  max-width: 50%;
}

.double {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .single {
    flex-basis: 25%;
    max-width: 25%;
  }
  .double {
    flex-basis: 50%;
    max-width: 50%;
  }
}
.bleed-4 {
  padding: 0 2px 0 2px;
  overflow: hidden;
}
.bleed-4 .container-fluid {
  margin-left: -2px;
  margin-right: -2px;
  padding: 0 2px 0 2px;
}
.bleed-4 > .row {
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  flex-wrap: wrap;
}
.bleed-4 > [class*=col-],
.bleed-4 > .col {
  padding: 2px;
  box-sizing: border-box;
}

.single {
  flex-basis: 50%;
  max-width: 50%;
}

.double {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .single {
    flex-basis: 25%;
    max-width: 25%;
  }
  .double {
    flex-basis: 50%;
    max-width: 50%;
  }
}
.bleed-8 {
  padding: 0 4px 0 4px;
  overflow: hidden;
}
.bleed-8 .container-fluid {
  margin-left: -4px;
  margin-right: -4px;
  padding: 0 4px 0 4px;
}
.bleed-8 > .row {
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  flex-wrap: wrap;
}
.bleed-8 > [class*=col-],
.bleed-8 > .col {
  padding: 4px;
  box-sizing: border-box;
}

.single {
  flex-basis: 50%;
  max-width: 50%;
}

.double {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .single {
    flex-basis: 25%;
    max-width: 25%;
  }
  .double {
    flex-basis: 50%;
    max-width: 50%;
  }
}
.list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
  width: 100%;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.grid-8 img {
  border: 1px solid #eaeaea;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
}

@media (min-width: 768px) {
  .grid-2-desktop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    align-items: end;
  }
}

.grid-2-wide {
  grid-column: span 2;
}

/* functional */
.h-auto {
  height: auto;
}

.h-40 {
  height: 40px;
}

.h-100 {
  height: 100%;
}

.height-100 {
  height: 100%;
}

.height-xs {
  min-height: 80px;
}
@media (min-width: 768px) {
  .height-xs {
    min-height: 80px;
  }
}

.height-sm {
  min-height: 100px;
}
@media (min-width: 768px) {
  .height-sm {
    min-height: 100px;
  }
}

.height-128 {
  min-height: 128px;
}
@media (min-width: 768px) {
  .height-128 {
    min-height: 128px;
  }
}

.height-md {
  min-height: 350px;
}
@media (min-width: 768px) {
  .height-md {
    min-height: 350px;
  }
}

.height-lg {
  min-height: 400px;
}
@media (min-width: 768px) {
  .height-lg {
    min-height: 400px;
  }
}

.height-xl {
  min-height: 450px;
}
@media (min-width: 768px) {
  .height-xl {
    min-height: 450px;
  }
}

.height-full {
  min-height: 100vh;
}
@media (min-width: 768px) {
  .height-full {
    min-height: 100vh;
  }
}

.height-big {
  min-height: 300px;
}
@media (min-width: 768px) {
  .height-big {
    min-height: 500px;
  }
}

.height-medium {
  min-height: 200px;
}
@media (min-width: 768px) {
  .height-medium {
    min-height: 400px;
  }
}

.height-mini {
  min-height: 100px;
}
@media (min-width: 768px) {
  .height-mini {
    min-height: 300px;
  }
}

.height-home {
  min-height: calc(100vh - 80px);
}
@media (min-width: 768px) {
  .height-home {
    min-height: calc(100vh - 80px);
  }
}

/* functional */
.ico-big {
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  border-radius: 50%;
}

.ico svg {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

svg-icon div {
  display: flex;
  align-items: center;
  justify-content: center;
}
svg-icon.c-invert {
  fill: #ffffff;
}
svg-icon.ico-white path, svg-icon.c-invert path {
  fill: #ffffff;
}
svg-icon.ico-error path {
  fill: #b40016;
}
svg-icon.ico-success path {
  fill: #12882c;
}
svg-icon.ico-feel path {
  fill: #a9a9a9;
}

.has-light svg path {
  fill: white;
  stroke: none;
}
.has-light a {
  color: #ffffff;
}
.has-light a:focus,
.has-light a:hover,
.has-light a:active {
  text-decoration: none;
  color: #ffffff;
}

.has-error svg path {
  fill: #b40016;
}

.has-feel svg path {
  fill: #a9a9a9;
}

.has-success svg path {
  fill: #76ae4a;
}

.ico-ball {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: #e3e3e3;
  flex: 0 0 40px;
}
.ico-ball .ico-count {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  background-color: #0E0E11;
  color: #ffffff;
  text-align: center;
  line-height: 1.6;
  position: absolute;
  left: 5px;
  bottom: 5px;
  border: 1px solid #ffffff;
  font-weight: 600;
}
.ico-ball svg {
  margin-top: -4px;
}

.x24 {
  width: 24px;
  height: 24px;
}

.x32 {
  width: 32px;
  height: 32px;
}

.x48 {
  width: 48px;
  height: 48px;
}

.x64 {
  width: 64px;
  height: 64px;
}

.btn.btn-link.has-ico-pre {
  padding-left: 18px;
}
.btn.btn-link.has-ico-pre .ico-pre {
  margin: 0;
  top: -1px;
}

.has-ico-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 48px;
}
.has-ico-center svg {
  margin-top: 0;
  margin-right: 4px;
}
.has-ico-center div svg {
  margin-top: 0;
  margin-right: 4px;
}

svg-icon.ico-post,
svg-icon.ico-pre {
  margin: 0 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* functional */
.rat-16-9 {
  position: relative;
  overflow: hidden;
}
.rat-16-9::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.rat-16-9 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-16-9 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-21-9 {
  position: relative;
  overflow: hidden;
}
.rat-21-9::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 42.8571428571%;
}
.rat-21-9 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-21-9 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-1-1 {
  position: relative;
  overflow: hidden;
}
.rat-1-1::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.rat-1-1 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-1-1 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-2-1 {
  position: relative;
  overflow: hidden;
}
.rat-2-1::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 50%;
}
.rat-2-1 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-2-1 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-2-3 {
  position: relative;
  overflow: hidden;
}
.rat-2-3::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.25%;
}
.rat-2-3 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-2-3 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-3-2 {
  position: relative;
  overflow: hidden;
}
.rat-3-2::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 66.6666666667%;
}
.rat-3-2 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-3-2 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-3-4 {
  position: relative;
  overflow: hidden;
}
.rat-3-4::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.3333333333%;
}
.rat-3-4 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-3-4 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-4-2 {
  position: relative;
  overflow: hidden;
}
.rat-4-2::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 50%;
}
.rat-4-2 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-4-2 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-4-3 {
  position: relative;
  overflow: hidden;
}
.rat-4-3::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 75%;
}
.rat-4-3 .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-4-3 .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-strech {
  position: relative;
  overflow: hidden;
}
.rat-strech::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 161.8181818182%;
}
.rat-strech .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-strech .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-main {
  position: relative;
  overflow: hidden;
}
.rat-main::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.25%;
}
.rat-main .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-main .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rat-double {
  position: relative;
  overflow: hidden;
}
.rat-double::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 64.4752018454%;
}
.rat-double .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.rat-double .rat-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.sk-load {
  position: relative;
}
.sk-load::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 126%;
  background-color: #ffffff;
}
.sk-load::marker {
  display: none;
  content: "";
}

.sk-load1 {
  position: relative;
}
.sk-load1::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc(133.25% + 126px);
  background-color: #ffffff;
}
@media (min-width: 992px) {
  .sk-load1::before {
    padding-top: calc(133.25% + 144px);
  }
}
.sk-load1::marker {
  display: none;
  content: "";
}

.sk-load2 {
  position: relative;
}
.sk-load2::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc(133.25% + 126px);
  background-color: #ffffff;
}
@media (min-width: 992px) {
  .sk-load2::before {
    padding-top: calc(133.25% + 144px);
  }
}
.sk-load2::marker {
  display: none;
  content: "";
}

.sk-load3 {
  position: relative;
}
.sk-load3::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.25%;
  background-color: #ffffff;
}
.sk-load3::marker {
  display: none;
  content: "";
}

.sk-load4 {
  position: relative;
}
.sk-load4::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 75.5%;
}
.sk-load4 .card9-link {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.sk-load4::marker {
  display: none;
  content: "";
}

.sk-load5 {
  position: relative;
}
.sk-load5::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc(66.6667% + 126px);
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .sk-load5::before {
    padding-top: calc(66.6667% + 144px);
  }
}
.sk-load5::marker {
  display: none;
  content: "";
}

.sk-load6 {
  position: relative;
}
.sk-load6::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.25%;
  background-color: #ffffff;
}
@media (min-width: 992px) {
  .sk-load6::before {
    padding-top: 133.25%;
  }
}
.sk-load6.hidden-image::before {
  padding-top: 126px;
}
.sk-load6::marker {
  display: none;
  content: "";
}

.sk-load7 {
  position: relative;
}
.sk-load7::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 66.6667%;
  background-color: #ffffff;
}
.sk-load7::marker {
  display: none;
  content: "";
}

.swiper-monoproducto .swiper-wrapper {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.sk-load9 {
  position: relative;
}
.sk-load9:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc(64.66667% + 126px);
  background-color: #ffffff;
}
.sk-load9:before .p-view {
  background-color: transparent;
}
@media (min-width: 1000px) {
  .sk-load9:before {
    padding-top: calc(62.9% + 144px);
  }
}
@media (min-width: 1280px) {
  .sk-load9:before {
    padding-top: calc(64.7% + 144px);
  }
}
.sk-load9::marker {
  display: none;
  content: "";
}

.ar-1-1 {
  aspect-ratio: 1/1;
}

.ar-4-3 {
  aspect-ratio: 4/3;
}

.ar-3-4 {
  aspect-ratio: 3/4;
}

.ar-3-2 {
  aspect-ratio: 3/2;
}

.ar-16-9 {
  aspect-ratio: 16/9;
}

.ar-9-16 {
  aspect-ratio: 9/16;
}

.ar-1-1 {
  aspect-ratio: 1/1;
}

.ar-20-9 {
  aspect-ratio: 20/9;
}

.grid-wrap-custom .sk-load:before,
.grid-wrap-custom .sk-load1:before,
.grid-wrap-custom .sk-load2:before,
.grid-wrap-custom .sk-load3:before,
.grid-wrap-custom .sk-load5:before,
.grid-wrap-custom .sk-load6:before,
.grid-wrap-custom .p-view {
  background-color: transparent;
}

/* functional */
body {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  -webkit-overflow-scrolling: touch;
  font-variant-ligatures: no-common-ligatures;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

select {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

p {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  margin: 0;
  font-size: 12px;
}
@media (min-width: 1000px) {
  p {
    font-size: 13px;
  }
}

a {
  color: #0E0E11;
  text-decoration: none;
}

.secondary {
  font-family: "ms-serif", serif;
  font-weight: 100;
}

.text-12-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.text-12-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.text-12-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.text-12-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.text-12-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.text-14-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.text-14-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.text-14-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.text-14-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.text-14-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.text-16-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.text-16-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.text-16-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.text-16-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.text-16-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.text-18-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 18px;
  line-height: 1.5;
}

.text-18-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 18px;
  line-height: 1.5;
}

.text-18-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 18px;
  line-height: 1.5;
}

.text-18-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.text-18-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.text-20-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 20px;
  line-height: 1.5;
}

.text-20-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 20px;
  line-height: 1.5;
}

.text-20-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 20px;
  line-height: 1.5;
}

.text-20-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

.text-20-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

.text-24-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 24px;
  line-height: 1.5;
}

.text-24-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 24px;
  line-height: 1.5;
}

.text-24-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 24px;
  line-height: 1.5;
}

.text-24-2r {
  font-family: "font-Regular", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.5;
}

.text-24-2b {
  font-family: "font-Regular", Helvetica, "arial black", sans-serif;
  font-size: 24px;
  line-height: 1.5;
}

@media (min-width: 1px) {
  .p-tag {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 8px;
    line-height: 1.3;
  }
  .h2 {
    font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 18px;
    line-height: 1.2;
  }
  .title-l {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 12px;
    line-height: 1.4;
  }
  .title-l-l {
    font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 12px;
    line-height: 1.4;
  }
  .title-l-b {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 12px;
    line-height: 1.4;
  }
  .title-m {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 11px;
    line-height: 1.4;
  }
  .title-s {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 10px;
    line-height: 1.4;
  }
  .text-l {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 12px;
    line-height: 1.5;
  }
  .text-l-l {
    font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 12px;
    line-height: 1.5;
  }
  .text-m {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 11px;
    line-height: 1.5;
  }
}
@media (min-width: 992px) {
  .p-tag {
    font-size: 10px;
    line-height: 1.3;
  }
  .h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .title-l {
    font-size: 12px;
    line-height: 1.4;
  }
  .title-l-l {
    font-size: 12px;
    line-height: 1.4;
  }
  .title-l-b {
    font-size: 12px;
    line-height: 1.4;
  }
  .title-m {
    font-size: 11px;
    line-height: 1.4;
  }
  .title-s {
    font-size: 10px;
    line-height: 1.4;
  }
  .text-l {
    font-size: 12px;
    line-height: 1.5;
  }
  .text-l-l {
    font-size: 12px;
    line-height: 1.5;
  }
  .text-m {
    font-size: 11px;
    line-height: 1.5;
  }
}
@media (min-width: 1px) {
  .h1 {
    font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 18px;
    line-height: 0.8;
  }
  .h2 {
    font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 24px;
    line-height: 1.2;
  }
  .h3 {
    font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 40px;
    line-height: 1;
  }
  .p1 {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 14px;
    line-height: 1.4;
  }
  .p2 {
    font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
    font-weight: inherit;
    font-size: 14px;
    line-height: 1.4;
  }
}
@media (min-width: 768px) {
  .h1 {
    font-size: 20px;
    line-height: 0.8;
  }
  .h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .h3 {
    font-size: 50px;
    line-height: 1;
  }
  .p1 {
    font-size: 14px;
    line-height: 1.4;
  }
  .p2 {
    font-size: 14px;
    line-height: 1.4;
  }
}
@media (min-width: 1000px) {
  .h1 {
    font-size: 30px;
    line-height: 0.8;
  }
  .h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .h3 {
    font-size: 80px;
    line-height: 1;
  }
  .p1 {
    font-size: 16px;
    line-height: 1.4;
  }
  .p2 {
    font-size: 18px;
    line-height: 1.4;
  }
}
@media (min-width: 1280px) {
  .h1 {
    font-size: 40px;
    line-height: 0.8;
  }
  .h2 {
    font-size: 32px;
    line-height: 1.2;
  }
  .h3 {
    font-size: 100px;
    line-height: 1;
  }
  .p1 {
    font-size: 16px;
    line-height: 1.4;
  }
  .p2 {
    font-size: 18px;
    line-height: 1.4;
  }
}
/* todo una vez incluida */
.fluid-9-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-9-l {
  font-size: 14px;
  line-height: 0.3;
}
@media (min-width: 320px) {
  .fluid-9-l {
    font-size: calc(14px + 2 * (100vw - 320px) / 1180);
    line-height: 0.3;
  }
}
@media (min-width: 1500px) {
  .fluid-9-l {
    font-size: 16px;
    line-height: 0.3;
  }
}

.fluid-9-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-9-r {
  font-size: 14px;
  line-height: 0.3;
}
@media (min-width: 320px) {
  .fluid-9-r {
    font-size: calc(14px + 2 * (100vw - 320px) / 1180);
    line-height: 0.3;
  }
}
@media (min-width: 1500px) {
  .fluid-9-r {
    font-size: 16px;
    line-height: 0.3;
  }
}

.fluid-9-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-9-m {
  font-size: 14px;
  line-height: 0.3;
}
@media (min-width: 320px) {
  .fluid-9-m {
    font-size: calc(14px + 2 * (100vw - 320px) / 1180);
    line-height: 0.3;
  }
}
@media (min-width: 1500px) {
  .fluid-9-m {
    font-size: 16px;
    line-height: 0.3;
  }
}

.fluid-9-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-9-sb {
  font-size: 14px;
  line-height: 0.3;
}
@media (min-width: 320px) {
  .fluid-9-sb {
    font-size: calc(14px + 2 * (100vw - 320px) / 1180);
    line-height: 0.3;
  }
}
@media (min-width: 1500px) {
  .fluid-9-sb {
    font-size: 16px;
    line-height: 0.3;
  }
}

.fluid-9-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-9-b {
  font-size: 14px;
  line-height: 0.3;
}
@media (min-width: 320px) {
  .fluid-9-b {
    font-size: calc(14px + 2 * (100vw - 320px) / 1180);
    line-height: 0.3;
  }
}
@media (min-width: 1500px) {
  .fluid-9-b {
    font-size: 16px;
    line-height: 0.3;
  }
}

.fluid-8-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-8-l {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-8-l {
    font-size: calc(16px + 2 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-8-l {
    font-size: 18px;
    line-height: 1.2;
  }
}

.fluid-8-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-8-r {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-8-r {
    font-size: calc(16px + 2 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-8-r {
    font-size: 18px;
    line-height: 1.2;
  }
}

.fluid-8-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-8-m {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-8-m {
    font-size: calc(16px + 2 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-8-m {
    font-size: 18px;
    line-height: 1.2;
  }
}

.fluid-8-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-8-sb {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-8-sb {
    font-size: calc(16px + 2 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-8-sb {
    font-size: 18px;
    line-height: 1.2;
  }
}

.fluid-8-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-8-b {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-8-b {
    font-size: calc(16px + 2 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-8-b {
    font-size: 18px;
    line-height: 1.2;
  }
}

.fluid-7-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-7-l {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-7-l {
    font-size: calc(16px + 8 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-7-l {
    font-size: 24px;
    line-height: 1.2;
  }
}

.fluid-7-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-7-r {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-7-r {
    font-size: calc(16px + 8 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-7-r {
    font-size: 24px;
    line-height: 1.2;
  }
}

.fluid-7-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-7-m {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-7-m {
    font-size: calc(16px + 8 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-7-m {
    font-size: 24px;
    line-height: 1.2;
  }
}

.fluid-7-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-7-sb {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-7-sb {
    font-size: calc(16px + 8 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-7-sb {
    font-size: 24px;
    line-height: 1.2;
  }
}

.fluid-7-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-7-b {
  font-size: 16px;
  line-height: 1.2;
}
@media (min-width: 320px) {
  .fluid-7-b {
    font-size: calc(16px + 8 * (100vw - 320px) / 1180);
    line-height: 1.2;
  }
}
@media (min-width: 1500px) {
  .fluid-7-b {
    font-size: 24px;
    line-height: 1.2;
  }
}

.fluid-6-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-6-l {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-6-l {
    font-size: calc(18px + 14 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-6-l {
    font-size: 32px;
    line-height: 1;
  }
}

.fluid-6-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-6-r {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-6-r {
    font-size: calc(18px + 14 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-6-r {
    font-size: 32px;
    line-height: 1;
  }
}

.fluid-6-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-6-m {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-6-m {
    font-size: calc(18px + 14 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-6-m {
    font-size: 32px;
    line-height: 1;
  }
}

.fluid-6-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-6-sb {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-6-sb {
    font-size: calc(18px + 14 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-6-sb {
    font-size: 32px;
    line-height: 1;
  }
}

.fluid-6-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-6-b {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-6-b {
    font-size: calc(18px + 14 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-6-b {
    font-size: 32px;
    line-height: 1;
  }
}

.fluid-5-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-5-l {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-5-l {
    font-size: calc(24px + 18 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-5-l {
    font-size: 42px;
    line-height: 1;
  }
}

.fluid-5-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-5-r {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-5-r {
    font-size: calc(24px + 18 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-5-r {
    font-size: 42px;
    line-height: 1;
  }
}

.fluid-5-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-5-m {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-5-m {
    font-size: calc(24px + 18 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-5-m {
    font-size: 42px;
    line-height: 1;
  }
}

.fluid-5-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-5-sb {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-5-sb {
    font-size: calc(24px + 18 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-5-sb {
    font-size: 42px;
    line-height: 1;
  }
}

.fluid-5-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-5-b {
  font-size: 24px;
  line-height: 1;
}
@media (min-width: 320px) {
  .fluid-5-b {
    font-size: calc(24px + 18 * (100vw - 320px) / 1180);
    line-height: 1;
  }
}
@media (min-width: 1500px) {
  .fluid-5-b {
    font-size: 42px;
    line-height: 1;
  }
}

.fluid-44-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-44-l {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-44-l {
    font-size: calc(34px + 16 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-44-l {
    font-size: 50px;
    line-height: 0.8;
  }
}

.fluid-44-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-44-r {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-44-r {
    font-size: calc(34px + 16 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-44-r {
    font-size: 50px;
    line-height: 0.8;
  }
}

.fluid-44-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-44-m {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-44-m {
    font-size: calc(34px + 16 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-44-m {
    font-size: 50px;
    line-height: 0.8;
  }
}

.fluid-44-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-44-sb {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-44-sb {
    font-size: calc(34px + 16 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-44-sb {
    font-size: 50px;
    line-height: 0.8;
  }
}

.fluid-44-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-44-b {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-44-b {
    font-size: calc(34px + 16 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-44-b {
    font-size: 50px;
    line-height: 0.8;
  }
}

.fluid-4-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-4-l {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-4-l {
    font-size: calc(34px + 38 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-4-l {
    font-size: 72px;
    line-height: 0.8;
  }
}

.fluid-4-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-4-r {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-4-r {
    font-size: calc(34px + 38 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-4-r {
    font-size: 72px;
    line-height: 0.8;
  }
}

.fluid-4-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-4-m {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-4-m {
    font-size: calc(34px + 38 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-4-m {
    font-size: 72px;
    line-height: 0.8;
  }
}

.fluid-4-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-4-sb {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-4-sb {
    font-size: calc(34px + 38 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-4-sb {
    font-size: 72px;
    line-height: 0.8;
  }
}

.fluid-4-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-4-b {
  font-size: 34px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-4-b {
    font-size: calc(34px + 38 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-4-b {
    font-size: 72px;
    line-height: 0.8;
  }
}

.fluid-3-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-3-l {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-3-l {
    font-size: calc(40px + 60 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-3-l {
    font-size: 100px;
    line-height: 0.8;
  }
}

.fluid-3-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-3-r {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-3-r {
    font-size: calc(40px + 60 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-3-r {
    font-size: 100px;
    line-height: 0.8;
  }
}

.fluid-3-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-3-m {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-3-m {
    font-size: calc(40px + 60 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-3-m {
    font-size: 100px;
    line-height: 0.8;
  }
}

.fluid-3-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-3-sb {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-3-sb {
    font-size: calc(40px + 60 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-3-sb {
    font-size: 100px;
    line-height: 0.8;
  }
}

.fluid-3-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-3-b {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-3-b {
    font-size: calc(40px + 60 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-3-b {
    font-size: 100px;
    line-height: 0.8;
  }
}

.fluid-2-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-2-l {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-2-l {
    font-size: calc(40px + 100 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-2-l {
    font-size: 140px;
    line-height: 0.8;
  }
}

.fluid-2-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-2-r {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-2-r {
    font-size: calc(40px + 100 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-2-r {
    font-size: 140px;
    line-height: 0.8;
  }
}

.fluid-2-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-2-m {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-2-m {
    font-size: calc(40px + 100 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-2-m {
    font-size: 140px;
    line-height: 0.8;
  }
}

.fluid-2-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-2-sb {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-2-sb {
    font-size: calc(40px + 100 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-2-sb {
    font-size: 140px;
    line-height: 0.8;
  }
}

.fluid-2-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-2-b {
  font-size: 40px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-2-b {
    font-size: calc(40px + 100 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-2-b {
    font-size: 140px;
    line-height: 0.8;
  }
}

.fluid-1-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-1-l {
  font-size: 48px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-1-l {
    font-size: calc(48px + 112 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-1-l {
    font-size: 160px;
    line-height: 0.8;
  }
}

.fluid-1-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-1-r {
  font-size: 48px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-1-r {
    font-size: calc(48px + 112 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-1-r {
    font-size: 160px;
    line-height: 0.8;
  }
}

.fluid-1-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-1-m {
  font-size: 48px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-1-m {
    font-size: calc(48px + 112 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-1-m {
    font-size: 160px;
    line-height: 0.8;
  }
}

.fluid-1-sb {
  font-family: arial, sans-serif;
  font-weight: 700;
}
.fluid-1-sb {
  font-size: 48px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-1-sb {
    font-size: calc(48px + 112 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-1-sb {
    font-size: 160px;
    line-height: 0.8;
  }
}

.fluid-1-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.fluid-1-b {
  font-size: 48px;
  line-height: 0.8;
}
@media (min-width: 320px) {
  .fluid-1-b {
    font-size: calc(48px + 112 * (100vw - 320px) / 1180);
    line-height: 0.8;
  }
}
@media (min-width: 1500px) {
  .fluid-1-b {
    font-size: 160px;
    line-height: 0.8;
  }
}

.text-light,
.font-light {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.text-regular,
.font-regular {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.text-medium,
.font-medium {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.text-semibold,
.font-semibold {
  font-family: arial, sans-serif;
  font-weight: 700;
}

.text-bold,
.font-bold {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.is-through {
  position: relative;
  width: max-content;
}
.is-through::after {
  content: "";
  background-color: #0E0E11;
  width: 100%;
  position: absolute;
  bottom: 50%;
  left: 0;
  height: 1px;
}

.c-gray.is-through::after {
  background-color: #8e8e8e;
}

/* functional */
/* functional */
/*  deprecated no se usan */
.arrow-cover {
  height: auto;
  padding: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #0E0E11;
  display: box;
  display: flexbox;
  display: flex;
  opacity: 1;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  transition: opacity 0.3s ease;
  z-index: 6;
}

.arrow-cover svg {
  animation: bounce 0.8s infinite alternate;
}

.line-scrolldown {
  position: absolute;
  top: calc(100% - 120px);
  left: 50%;
  z-index: 3;
  opacity: 1;
  transform: translateX(-50%);
}
.line-scrolldown::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0E0E11;
  transform: translateX(-50%);
}
.line-scrolldown::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 0;
  border-radius: 2px;
  background: #0E0E11;
  transform: translateX(-50%);
  animation: stretch 1s 1.5s cubic-bezier(0.55, 0.085, 0, 0.99) forwards;
}

.has-light .arrow-cover {
  color: #ffffff;
}
.has-light .line-scrolldown::before {
  background: #ffffff;
}
.has-light .line-scrolldown::after {
  background: #ffffff;
}

/* functional */
.marketing-spot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 16px;
  border: 1px solid #0E0E11;
  margin-top: 16px;
}
.marketing-spot svg-icon {
  margin-right: 8px;
  z-index: -1;
}

.banner-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #ffc700;
  color: #ffffff;
}

.banner-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #1a32a4;
  color: #ffffff;
}

.banner-valid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #12882c;
  color: #ffffff;
}

.banner-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #ffce4e;
  color: #0E0E11;
}

.banner-feel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #fb9962;
  color: #0E0E11;
}

.banner-limited {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 24px 16px;
  margin-top: 16px;
  text-align: center;
  background-color: #000;
  color: #ffffff;
}

/* functional */
input:is([type=button], [type=submit], [type=reset]),
input[type=file]::file-selector-button,
button {
  color: #0E0E11;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
  vertical-align: middle;
  justify-content: center;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 12px;
  background-color: transparent;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.btn:focus, .btn.focus, .btn:hover, .btn.hover, .btn:visited, .btn:active, .btn.active {
  text-decoration: none;
  opacity: 0.6;
  outline: none;
}
.btn[disabled], .btn:disabled, .btn.disabled {
  pointer-events: none;
  filter: grayscale(1);
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
  cursor: not-allowed;
}
.has-light .btn {
  color: #0E0E11;
  border-color: #ffffff;
  background-color: #ffffff;
}
.has-light .btn::after {
  background-color: #ffffff;
}
.has-light .btn:focus, .has-light .btn.focus, .has-light .btn:hover, .has-light .btn.hover, .has-light .btn:visited, .has-light .btn:active, .has-light .btn.active {
  color: #ffffff;
  background-color: #e3e3e3;
  border-color: #e3e3e3;
}
.has-light .btn[disabled], .has-light .btn:disabled, .has-light .btn.disabled {
  cursor: default;
  pointer-events: none;
  filter: grayscale(1);
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}
.btn.btn-separate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}
.btn.btn-separate svg {
  margin-left: 8px;
}
.btn.btn-separate.btn--mini, .btn.btn-separate.btn--small {
  width: max-content;
}
.btn.btn-feel-invert {
  color: #0E0E11;
  background-color: transparent;
  border: 1px solid #fb9962;
}
.btn.btn-feel-invert svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.btn.btn-feel-invert svg circle {
  stroke: #0E0E11;
}
.btn.btn-feel-invert:focus, .btn.btn-feel-invert.focus, .btn.btn-feel-invert:hover, .btn.btn-feel-invert.hover, .btn.btn-feel-invert:active, .btn.btn-feel-invert.active {
  color: #0E0E11;
  opacity: 1;
  border-color: rgba(251, 153, 98, 0.5);
}
.btn.btn-feel-invert[disabled], .btn.btn-feel-invert:disabled, .btn.btn-feel-invert.disabled {
  opacity: 1;
  border-color: #ebecf5;
  color: #8e8e8e;
  cursor: default;
}
.btn.has-ico-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn.btn-clear {
  padding: 8px;
  background: none;
  border: none;
}

.btn-xs {
  position: relative;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  font-size: 12px;
  margin-right: 0;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px;
}
.btn-xs:active, .btn-xs:focus, .btn-xs:visited {
  outline: none;
}

.btn--mini {
  padding: 2px 0 0 0;
  font-size: 12px;
}

.btn--small {
  height: 48px;
  padding-right: 0;
  padding-left: 0;
  font-size: 12px;
}

.btn--medium {
  padding-right: 0;
  padding-left: 0;
  font-size: 12px;
  max-width: 272px;
  width: 100%;
  height: 48px;
}

.btn--mini-rd {
  padding-right: 0;
  padding-left: 0;
  font-size: 12px;
  height: 32px;
  display: inline-flex;
  align-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .btn--mini-rd {
    padding: 0;
    font-size: 12px;
    height: 48px;
  }
}

.btn--large {
  height: 48px;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  font-size: 12px;
}

.btn--xlarge {
  padding-right: 0;
  padding-left: 0;
  position: relative;
  display: inline-flex;
  min-height: 48px;
  min-width: 200px;
  max-width: 400px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--full {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  font-size: 12px;
  height: 48px;
}

.btn--round {
  border-radius: 50px;
}

.btn-primary {
  color: #ffffff;
  background-color: #0E0E11;
  border: 1px solid #0E0E11;
}
.btn-primary svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn-primary svg circle {
  stroke: #ffffff;
}
.btn-primary svg path {
  fill: #ffffff;
}
.btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary.hover, .btn-primary:active, .btn-primary.active {
  color: #ffffff;
  background-color: #8e8e8e;
  border: 1px solid #8e8e8e;
  opacity: 1;
}
.btn-primary[disabled], .btn-primary:disabled, .btn-primary.disabled {
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}
.btn-primary[disabled] svg g, .btn-primary:disabled svg g, .btn-primary.disabled svg g {
  fill: #8e8e8e;
  stroke: #8e8e8e;
}
.btn-primary[disabled] svg circle, .btn-primary:disabled svg circle, .btn-primary.disabled svg circle {
  stroke: #8e8e8e;
}
.btn-primary[disabled] svg path, .btn-primary:disabled svg path, .btn-primary.disabled svg path {
  fill: #8e8e8e;
}
.has-light .btn-primary {
  color: #0E0E11;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
.has-light .btn-primary svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.has-light .btn-primary svg circle {
  stroke: #0E0E11;
}
.has-light .btn-primary svg path {
  fill: #0E0E11;
}
.has-light .btn-primary:focus, .has-light .btn-primary.focus, .has-light .btn-primary:hover, .has-light .btn-primary.hover, .has-light .btn-primary:active, .has-light .btn-primary.active {
  color: #ffffff;
  background-color: #8e8e8e;
  border: 1px solid #8e8e8e;
  opacity: 1;
}
.has-light .btn-primary:focus svg g, .has-light .btn-primary.focus svg g, .has-light .btn-primary:hover svg g, .has-light .btn-primary.hover svg g, .has-light .btn-primary:active svg g, .has-light .btn-primary.active svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.has-light .btn-primary:focus svg circle, .has-light .btn-primary.focus svg circle, .has-light .btn-primary:hover svg circle, .has-light .btn-primary.hover svg circle, .has-light .btn-primary:active svg circle, .has-light .btn-primary.active svg circle {
  stroke: #ffffff;
}
.has-light .btn-primary:focus svg path, .has-light .btn-primary.focus svg path, .has-light .btn-primary:hover svg path, .has-light .btn-primary.hover svg path, .has-light .btn-primary:active svg path, .has-light .btn-primary.active svg path {
  fill: #ffffff;
}
.has-light .btn-primary[disabled], .has-light .btn-primary:disabled, .has-light .btn-primary.disabled {
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}

.btn-secondary {
  color: #0E0E11;
  background-color: #ffffff;
  border: 1px solid #0E0E11;
}
.btn-secondary svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.btn-secondary svg circle {
  stroke: #0E0E11;
}
.btn-secondary svg path {
  fill: #0E0E11;
}
.btn-secondary:focus, .btn-secondary.focus, .btn-secondary:hover, .btn-secondary.hover, .btn-secondary:active, .btn-secondary.active {
  color: #0E0E11;
  background-color: #ffffff;
  border: 1px solid #8e8e8e;
  opacity: 1;
}
.btn-secondary[disabled], .btn-secondary:disabled, .btn-secondary.disabled {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}
.btn-secondary[disabled] svg g, .btn-secondary:disabled svg g, .btn-secondary.disabled svg g {
  fill: #e3e3e3;
  stroke: #e3e3e3;
}
.btn-secondary[disabled] svg circle, .btn-secondary:disabled svg circle, .btn-secondary.disabled svg circle {
  stroke: #e3e3e3;
}
.btn-secondary[disabled] svg path, .btn-secondary:disabled svg path, .btn-secondary.disabled svg path {
  fill: #e3e3e3;
}
.has-light .btn-secondary {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
}
.has-light .btn-secondary svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.has-light .btn-secondary svg circle {
  stroke: #ffffff;
}
.has-light .btn-secondary svg path {
  fill: #ffffff;
}
.has-light .btn-secondary:focus, .has-light .btn-secondary.focus, .has-light .btn-secondary:hover, .has-light .btn-secondary.hover, .has-light .btn-secondary:active, .has-light .btn-secondary.active {
  color: #ffffff;
  background-color: #8e8e8e;
  border: 1px solid #8e8e8e;
  opacity: 1;
}
.has-light .btn-secondary:focus svg g, .has-light .btn-secondary.focus svg g, .has-light .btn-secondary:hover svg g, .has-light .btn-secondary.hover svg g, .has-light .btn-secondary:active svg g, .has-light .btn-secondary.active svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.has-light .btn-secondary:focus svg circle, .has-light .btn-secondary.focus svg circle, .has-light .btn-secondary:hover svg circle, .has-light .btn-secondary.hover svg circle, .has-light .btn-secondary:active svg circle, .has-light .btn-secondary.active svg circle {
  stroke: #ffffff;
}
.has-light .btn-secondary:focus svg path, .has-light .btn-secondary.focus svg path, .has-light .btn-secondary:hover svg path, .has-light .btn-secondary.hover svg path, .has-light .btn-secondary:active svg path, .has-light .btn-secondary.active svg path {
  fill: #ffffff;
}
.has-light .btn-secondary[disabled], .has-light .btn-secondary:disabled, .has-light .btn-secondary.disabled {
  background-color: transparent;
  border: 1px solid #8e8e8e;
  color: #8e8e8e;
  opacity: 1;
}

.btn-phantom {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
}
.btn-phantom svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn-phantom svg circle {
  stroke: #ffffff;
}
.btn-phantom svg path {
  fill: #ffffff;
}
.btn-phantom:focus, .btn-phantom.focus, .btn-phantom:hover, .btn-phantom.hover, .btn-phantom:active, .btn-phantom.active {
  color: #0E0E11;
  background-color: transparent;
  border: 1px solid #8e8e8e;
  opacity: 1;
}

.btn-limited {
  height: 48px;
  color: #ffffff;
  background-color: #000;
  border: 1px solid #000;
}
.btn-limited svg g {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn-limited svg circle {
  stroke: #ffffff;
}
.btn-limited svg path {
  fill: #ffffff;
}

.btn-primary-feel {
  color: #0E0E11;
  background-color: #fb9962;
}
.btn-primary-feel svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.btn-primary-feel svg circle {
  stroke: #0E0E11;
}
.btn-primary-feel svg path {
  fill: #0E0E11;
}
.btn-primary-feel:focus, .btn-primary-feel.focus, .btn-primary-feel:hover, .btn-primary-feel.hover, .btn-primary-feel:active, .btn-primary-feel.active {
  color: #0E0E11;
  opacity: 1;
  background-color: rgba(251, 153, 98, 0.6);
}
.btn-primary-feel:disabled, .btn-primary-feel[disabled], .btn-primary-feel.disabled {
  pointer-events: none;
  cursor: default;
  border: 1px solid #e3e3e3 !important;
  color: #8e8e8e !important;
  background-color: #e3e3e3 !important;
  filter: none;
  opacity: 1;
}
.btn-primary-feel:disabled svg-icon, .btn-primary-feel[disabled] svg-icon, .btn-primary-feel.disabled svg-icon {
  background-color: #e3e3e3 !important;
  border: 1px solid #e3e3e3 !important;
}

.btn-secondary-feel {
  color: #0E0E11;
  background-color: #ffffff;
  border: 1px solid #0E0E11;
}
.btn-secondary-feel svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.btn-secondary-feel svg circle {
  stroke: #0E0E11;
}
.btn-secondary-feel:focus, .btn-secondary-feel.focus, .btn-secondary-feel:hover, .btn-secondary-feel.hover, .btn-secondary-feel:active, .btn-secondary-feel.active {
  opacity: 1;
  color: #0E0E11;
  border: 1px solid #8e8e8e;
  background-color: #ffffff;
}
.btn-secondary-feel:disabled, .btn-secondary-feel[disabled], .btn-secondary-feel.disabled {
  pointer-events: none;
  cursor: default;
  border: 1px solid #e3e3e3 !important;
  color: #8e8e8e !important;
  background-color: #e3e3e3 !important;
  filter: none;
  opacity: 1;
}
.btn-secondary-feel:disabled svg-icon, .btn-secondary-feel[disabled] svg-icon, .btn-secondary-feel.disabled svg-icon {
  background-color: #e3e3e3 !important;
  border: 1px solid #e3e3e3 !important;
}
.has-light .btn-secondary-feel {
  color: #ffffff;
  border-color: #ffffff;
  background-color: transparent;
}
.has-light .btn-secondary-feel:focus, .has-light .btn-secondary-feel.focus, .has-light .btn-secondary-feel:hover, .has-light .btn-secondary-feel.hover, .has-light .btn-secondary-feel:active, .has-light .btn-secondary-feel.active {
  opacity: 1;
  color: #ffffff;
  border: 1px solid #8e8e8e;
  background-color: #8e8e8e;
}

.btn-tertiary {
  color: #0E0E11;
  background-color: #ffffff;
  border: 1px solid #0E0E11;
}
.btn-tertiary svg g {
  fill: #0E0E11;
  stroke: #0E0E11;
}
.btn-tertiary svg circle {
  stroke: #0E0E11;
}
.btn-tertiary:focus, .btn-tertiary.focus, .btn-tertiary:hover, .btn-tertiary.hover, .btn-tertiary:active, .btn-tertiary.active {
  opacity: 1;
  color: #0E0E11;
  border: 1px solid #8e8e8e;
  background-color: #ffffff;
}
.btn-tertiary:disabled, .btn-tertiary[disabled], .btn-tertiary.disabled {
  pointer-events: none;
  cursor: default;
  border: 1px solid #e3e3e3 !important;
  color: #8e8e8e !important;
  background-color: #e3e3e3 !important;
  filter: none;
  opacity: 1;
}
.btn-tertiary:disabled svg-icon, .btn-tertiary[disabled] svg-icon, .btn-tertiary.disabled svg-icon {
  background-color: #e3e3e3 !important;
  border: 1px solid #e3e3e3 !important;
}
.has-light .btn-tertiary {
  color: #ffffff;
  border-color: #ffffff;
  background-color: transparent;
}
.has-light .btn-tertiary:focus, .has-light .btn-tertiary.focus, .has-light .btn-tertiary:hover, .has-light .btn-tertiary.hover, .has-light .btn-tertiary:active, .has-light .btn-tertiary.active {
  opacity: 1;
  color: #ffffff;
  border: 1px solid #8e8e8e;
  background-color: #8e8e8e;
}

.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: #0E0E11;
}

.btn-invert {
  color: #0E0E11;
  background-color: transparent;
  border: 1px solid #0E0E11;
}
.btn-invert:focus, .btn-invert.focus, .btn-invert:hover, .btn-invert.hover, .btn-invert:active, .btn-invert.active {
  opacity: 0.6;
}

.btn-invert-light {
  color: #0E0E11;
  background-color: transparent;
  border: 1px solid #e3e3e3;
}
.btn-invert-light:focus, .btn-invert-light.focus, .btn-invert-light:hover, .btn-invert-light:active, .btn-invert-light.active {
  opacity: 0.6;
}
.btn-invert-light:focus svg path, .btn-invert-light.focus svg path, .btn-invert-light:hover svg path, .btn-invert-light:active svg path, .btn-invert-light.active svg path {
  fill: #ffffff;
}

.btn-default {
  background-color: #0E0E11;
  border: 1px solid #0E0E11;
  color: #ffffff;
}

.btn-blue {
  background-color: #1a32a4;
  color: #ffffff;
  border: 1px solid #1a32a4;
}
.btn-blue:focus, .btn-blue.focus, .btn-blue:hover, .btn-blue.hover, .btn-blue:visited, .btn-blue:active, .btn-blue.active {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.6;
}

.btn-link {
  border: none;
  text-align: left;
  text-decoration: none;
  color: #0E0E11;
  background-color: transparent;
  padding: 0;
  border-radius: 8px;
}
.has-light .btn-link {
  color: #ffffff;
  background-color: transparent;
}
.has-light .btn-link:focus, .has-light .btn-link.focus, .has-light .btn-link:hover, .has-light .btn-link.hover, .has-light .btn-link:visited, .has-light .btn-link:active, .has-light .btn-link.active {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.6;
}

.btn-trans {
  color: #ffffff;
  background: rgba(226, 226, 226, 0.6);
  font-size: 12px;
  border: 0 solid #ffffff;
  box-sizing: border-box;
}
.btn-trans svg {
  stroke: #ffffff;
}
.btn-trans:focus, .btn-trans.focus, .btn-trans:hover, .btn-trans.hover, .btn-trans:visited, .btn-trans:active, .btn-trans.active {
  color: #ffffff;
  text-decoration: none;
}

.btn-circle {
  right: 0;
  position: absolute;
  display: flex;
  width: 40px;
  max-width: initial;
  height: 40px;
  border: 1px solid #0E0E11;
  border-radius: 50px;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: transparent;
}

.btn-social {
  height: 48px;
  cursor: pointer;
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.168), 0 0 1px rgba(0, 0, 0, 0.084);
}
.btn-social svg-icon {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin-top: -3px;
  margin-right: 12px;
  top: 0;
  left: 1px;
}
.btn-social svg-icon div {
  display: flex;
}
.btn-social:disabled, .btn-social[disabled], .btn-social.disabled {
  background-color: #ebecf5;
  border-color: transparent;
  opacity: 1;
}
.btn-social:disabled svg path, .btn-social[disabled] svg path, .btn-social.disabled svg path {
  fill: #8e8e8e;
}

.btn-google,
.has-light .btn-google {
  background-color: #ffffff;
  color: #0E0E11;
  border: 1px solid #ffffff;
}
.btn-google svg-icon,
.has-light .btn-google svg-icon {
  top: 1px;
}
.btn-google:focus, .btn-google.focus, .btn-google:hover, .btn-google.hover, .btn-google:visited, .btn-google:active, .btn-google.active,
.has-light .btn-google:focus,
.has-light .btn-google.focus,
.has-light .btn-google:hover,
.has-light .btn-google.hover,
.has-light .btn-google:visited,
.has-light .btn-google:active,
.has-light .btn-google.active {
  border: 1px solid #ebecf5;
  opacity: 1;
}

.btn-facebook {
  background-color: #1977f3;
  color: #ffffff;
  border: 1px solid #1977f3;
}
.btn-facebook svg-icon {
  background-color: transparent;
}
.btn-facebook svg-icon path {
  fill: #ffffff;
}
.btn-facebook:focus, .btn-facebook.focus, .btn-facebook:hover, .btn-facebook.hover, .btn-facebook:visited, .btn-facebook:active, .btn-facebook.active {
  opacity: 1;
  background-color: #1977f3;
  border: 1px solid #1977f3;
}
.has-light .btn-facebook {
  background-color: #1977f3;
  color: #ffffff;
  border: 1px solid #1977f3;
}

.btn-apple,
.has-light .btn-apple {
  background-color: #0E0E11;
  color: #ffffff;
  border: 1px solid #0E0E11;
}
.btn-apple:focus, .btn-apple.focus, .btn-apple:hover, .btn-apple.hover, .btn-apple:visited, .btn-apple:active, .btn-apple.active,
.has-light .btn-apple:focus,
.has-light .btn-apple.focus,
.has-light .btn-apple:hover,
.has-light .btn-apple.hover,
.has-light .btn-apple:visited,
.has-light .btn-apple:active,
.has-light .btn-apple.active {
  opacity: 1;
  background-color: #8e8e8e;
  border: 1px solid #8e8e8e;
}

.btn-apple-secondary,
.has-light .btn-apple-secondary {
  background-color: #ffffff;
  color: #0E0E11;
  border: 1px solid #0E0E11;
}
.btn-apple-secondary:focus, .btn-apple-secondary.focus, .btn-apple-secondary:hover, .btn-apple-secondary.hover, .btn-apple-secondary:visited, .btn-apple-secondary:active, .btn-apple-secondary.active,
.has-light .btn-apple-secondary:focus,
.has-light .btn-apple-secondary.focus,
.has-light .btn-apple-secondary:hover,
.has-light .btn-apple-secondary.hover,
.has-light .btn-apple-secondary:visited,
.has-light .btn-apple-secondary:active,
.has-light .btn-apple-secondary.active {
  opacity: 1;
  background-color: #ffffff;
  border: 1px solid #8e8e8e;
}

.btn-naver,
.has-light .btn-naver {
  background-color: #03cf5d;
  color: #ffffff;
  padding-left: 48px;
  border: 1px solid #03cf5d;
}
.btn-naver:focus, .btn-naver.focus, .btn-naver:hover, .btn-naver.hover, .btn-naver:visited, .btn-naver:active, .btn-naver.active,
.has-light .btn-naver:focus,
.has-light .btn-naver.focus,
.has-light .btn-naver:hover,
.has-light .btn-naver.hover,
.has-light .btn-naver:visited,
.has-light .btn-naver:active,
.has-light .btn-naver.active {
  opacity: 1;
  background-color: #03cf5d;
  border: 1px solid #03cf5d;
}

.btn-wechat,
.has-light .btn-wechat {
  background-color: #2dc100;
  color: #ffffff;
  padding-left: 48px;
  border: 1px solid #2dc100;
}
.btn-wechat:focus, .btn-wechat.focus, .btn-wechat:hover, .btn-wechat.hover, .btn-wechat:visited, .btn-wechat:active, .btn-wechat.active,
.has-light .btn-wechat:focus,
.has-light .btn-wechat.focus,
.has-light .btn-wechat:hover,
.has-light .btn-wechat.hover,
.has-light .btn-wechat:visited,
.has-light .btn-wechat:active,
.has-light .btn-wechat.active {
  opacity: 1;
  background-color: #03cf5d;
  border: 1px solid #2dc100;
}

.btn-block {
  display: block;
  width: 100%;
}

.btns {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btns .btn {
  margin-right: 0;
}

.btns .btn:not(:last-child) {
  margin-right: 0;
}

.btn-group {
  position: relative;
  display: flex;
}
.btn-group > :not(:first-child, :last-child) {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group [class^=btn--],
.btn-group [class*=" btn--"] {
  position: relative;
  border-radius: 0;
  float: left;
  margin-right: 0;
}
.btn-group [class^=btn--]:first-child,
.btn-group [class*=" btn--"]:first-child {
  margin-left: 0;
}
.btn-group [class^=btn--]:last-child,
.btn-group [class*=" btn--"]:last-child {
  margin-left: -1px;
  outline: none;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px;
}
.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0;
}

.btn-group > .btn {
  flex: 1;
}

.btn-group-inline {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.btn-group-inline .btn {
  display: inline-block;
  width: auto;
  min-width: 200px;
  margin: 0 8px;
}

.btn-anim {
  height: 48px;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.btn-anim span {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-anim .btn-submit {
  transform: translateY(0);
}
.btn-anim .btn-loading {
  opacity: 0;
  transform: translateY(40px);
}
.btn-anim:disabled, .btn-anim[disabled], .btn-anim.disabled {
  background-color: #e3e3e3;
  border-color: transparent;
  opacity: 1;
}
.btn-anim:disabled svg path, .btn-anim[disabled] svg path, .btn-anim.disabled svg path {
  fill: rgba(14, 14, 17, 0.6);
}

.is-loading.btn-anim .btn-submit {
  transform: translateY(-40px);
  opacity: 0;
}
.is-loading.btn-anim .btn-loading {
  opacity: 1;
  transform: translateY(0);
}

.no-focus:focus {
  color: #ffffff;
  background-color: #0E0E11;
  border-color: #0E0E11;
}

.btn-loading svg {
  animation: spin 1.6s ease-in-out infinite;
}

.btn-social-login {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn-social-login svg {
  margin-right: 8px;
}
.btn-social-login.btn-facebook {
  border: #1977f3 solid 1px;
  background: #1977f3;
  color: #ffffff;
}
.btn-social-login.btn-outline-login {
  border: #e3e3e3 solid 1px;
}
.btn-social-login.disabled {
  filter: invert(1);
  background: #ffffff;
  color: #0E0E11;
  cursor: default;
}
.btn-social-login.disabled svg path {
  fill: #0E0E11;
}

.btn-feel {
  background-color: #fb9962;
  border: 1px solid #fb9962;
  color: #0E0E11;
}
.btn-feel:hover, .btn-feel.hover, .btn-feel:focus, .btn-feel.focus {
  background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
  color: #0E0E11;
  opacity: 1;
}
.btn-feel[disabled], .btn-feel:disabled, .btn-feel.disabled {
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}
.has-light .btn-feel {
  background-color: #fb9962;
  border: 1px solid #fb9962;
  color: #0E0E11;
}
.has-light .btn-feel:hover, .has-light .btn-feel.hover, .has-light .btn-feel:focus, .has-light .btn-feel.focus {
  background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
  color: #0E0E11;
  opacity: 1;
}
.has-light .btn-feel[disabled], .has-light .btn-feel:disabled, .has-light .btn-feel.disabled {
  background-color: #e3e3e3;
  border: 1px solid #e3e3e3;
  color: #8e8e8e;
  opacity: 1;
}

.btn-world {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: none;
  background-color: rgba(14, 14, 17, 0.4);
  color: #ffffff;
}
.btn-world svg path {
  fill: #ffffff;
}
.btn-world:hover, .btn-world.hover, .btn-world:focus, .btn-world.focus {
  background-color: rgba(14, 14, 17, 0.8);
  border: none;
}
.btn-world .btn-world-left {
  padding-right: 8px;
}
.btn-world .btn-world-center {
  width: calc(100% - 40px);
  padding-right: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
  margin-top: -1px;
}

.btn-svg svg-icon {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 1px;
  width: 46px;
  height: 46px;
  padding-bottom: 3px;
}

.btn.btn-secondary-rd {
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #0E0E11;
  padding: 9px 2px 4px;
  height: 32px;
  min-width: 100px;
  text-align: center;
  background: none;
  font-size: 12px;
}
@media (min-width: 768px) {
  .btn.btn-secondary-rd {
    font-size: 12px;
    padding: 16px 2px 14px;
    height: 48px;
    font-size: 12px;
    min-width: 120px;
  }
}
.btn.btn-secondary-rd:hover {
  opacity: 0.5;
}

.has-light .btn-phantom {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
}
.has-light .btn-primary-feel:hover, .has-light .btn-primary-feel.hover, .has-light .btn-primary-feel:focus, .has-light .btn-primary-feel.focus {
  background-color: rgba(251, 153, 98, 0.6);
  color: #8e8e8e;
  border-color: rgba(251, 153, 98, 0.6);
}
.has-light .btn-primary-feel[disabled], .has-light .btn-primary-feel:disabled, .has-light .btn-primary-feel.disabled {
  opacity: 1;
  background-color: #ebecf5;
  color: #8e8e8e;
  cursor: default;
}
.has-light .btn-google svg path {
  fill: initial;
  stroke: none;
}

.btn--tag {
  padding: 2px 4px 2px 0;
  color: #8e8e8e;
  font-size: 12px;
  letter-spacing: 0;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  display: inline-block;
}

/* functional */
.checkbox-item {
  text-align: center;
  position: relative;
}
.checkbox-item.is-error {
  color: #b40016;
}
.checkbox-item.is-error [type=checkbox]:checked + label::before,
.checkbox-item.is-error [type=checkbox]:not(:checked) + label::before {
  border: 1px solid #b40016;
}
.checkbox-item .ico-check {
  width: 22px;
  height: 22px;
  left: 0;
  top: 0;
}
.checkbox-item .ico-check::after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #0E0E11;
  width: 16px;
  transform: rotate(136deg);
  left: 4px;
  top: 8px;
}
.checkbox-item .ico-check::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 1px;
  top: 10px;
  transform: rotate(50deg);
  background-color: #0E0E11;
}
.checkbox-item [type=checkbox]:not(:checked) + label,
.checkbox-item [type=checkbox]:checked + label {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  font-weight: normal;
  font-size: 12px;
  text-align: initial;
  display: box;
  display: flexbox;
  display: flex;
}
.checkbox-item [type=checkbox]:not(:checked) + label::before,
.checkbox-item [type=checkbox]:checked + label::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  left: 0;
  border: none;
  border: 1px solid #8e8e8e;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 0 0;
}
.checkbox-item [type=checkbox]:not(:checked) + label span,
.checkbox-item [type=checkbox]:checked + label span {
  display: initial;
  vertical-align: top;
  margin: 5px 0 0;
  line-height: 16px;
  min-height: 20px;
  padding-left: 0;
}
.checkbox-item [type=checkbox]:not(:checked) + label span::after,
.checkbox-item [type=checkbox]:checked + label span::after {
  content: " ";
}
.checkbox-item [type=checkbox]:not(:checked) + label a,
.checkbox-item [type=checkbox]:checked + label a {
  text-decoration: underline;
  margin-right: 4px;
}
.checkbox-item [type=checkbox]:not(:checked),
.checkbox-item [type=checkbox]:checked {
  position: absolute;
  left: -9999px;
  width: 70px;
}
.checkbox-item input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.checkbox-item [type=checkbox]:not(:checked) + label .icon,
.checkbox-item [type=checkbox]:checked + label .icon {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #0E0E11;
  transition: all 0.2s;
}
.checkbox-item [type=checkbox]:not(:checked) + label .icon {
  opacity: 0;
  transform: scale(0);
}
.checkbox-item [type=checkbox]:checked + label .icon {
  opacity: 1;
  transform: scale(1);
}
.checkbox-item.color-filter [type=checkbox]:not(:checked) + label,
.checkbox-item.color-filter [type=checkbox]:checked + label {
  padding-left: 32px;
}
.checkbox-item.color-filter .color-wrap button {
  margin-right: 0;
}
.checkbox-item.color-filter [type=checkbox]:not(:checked) + label span,
.checkbox-item.color-filter [type=checkbox]:checked + label span {
  padding-left: 24px;
}

.checkbox-item-2 {
  display: inline-block;
  text-align: center;
  margin: 10px 10px 0 0;
}
.checkbox-item-2 [type=checkbox]:not(:checked) + label,
.checkbox-item-2 [type=checkbox]:checked + label {
  position: relative;
  padding-left: 0;
  cursor: pointer;
  font-weight: normal;
  font-size: 12px;
  text-align: initial;
  display: box;
  display: flexbox;
  display: flex;
}
.checkbox-item-2 [type=checkbox]:not(:checked) + label::before,
.checkbox-item-2 [type=checkbox]:checked + label::before {
  position: absolute;
  content: "";
  width: 62px;
  height: 26px;
  border-radius: 30px;
  left: 0;
  border: none;
  border: 1px solid #0E0E11;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 0 0;
}
.checkbox-item-2 [type=checkbox]:not(:checked) + label span,
.checkbox-item-2 [type=checkbox]:checked + label span {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0;
  line-height: 16px;
  padding-left: 70px;
  min-height: 20px;
}
.checkbox-item-2 [type=checkbox]:not(:checked),
.checkbox-item-2 [type=checkbox]:checked {
  position: absolute;
  left: -9999px;
  width: 70px;
}
.checkbox-item-2 input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.checkbox-item-2 .checkbox-circle {
  background: #0E0E11;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle,
.checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
  position: absolute;
  top: 3px;
  left: 6px;
  color: #0E0E11;
  transition: all 0.2s;
}
.checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle {
  opacity: 1;
  transform: scale(1);
  left: 4px;
}
.checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
  opacity: 1;
  transform: scale(1);
  left: 38px;
}

.checkbox-radio {
  position: relative;
}
.checkbox-radio [type=radio]:not(:checked) + label,
.checkbox-radio [type=radio]:checked + label {
  position: relative;
  padding-left: 0;
  cursor: pointer;
  font-weight: normal;
  font-size: 12px;
  text-align: initial;
  display: box;
  display: flexbox;
  display: flex;
  flex-direction: column;
  float: none;
}
.checkbox-radio [type=radio]:not(:checked) + label::before,
.checkbox-radio [type=radio]:checked + label::before {
  position: absolute;
  box-sizing: border-box;
  content: "";
  width: 24px;
  height: 24px;
  left: 0;
  border: none;
  border: 1px solid #8e8e8e;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 0 0;
  border-radius: 50%;
}
.checkbox-radio [type=radio]:not(:checked) + label span,
.checkbox-radio [type=radio]:checked + label span {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0;
  line-height: 16px;
  padding-left: 32px;
  min-height: 20px;
}
.checkbox-radio [type=radio]:not(:checked),
.checkbox-radio [type=radio]:checked {
  position: absolute;
  left: -9999px;
  width: 70px;
}
.checkbox-radio input[type=radio] {
  box-sizing: border-box;
  padding: 0;
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.checkbox-radio [type=radio]:not(:checked) + label .ico-radio,
.checkbox-radio [type=radio]:checked + label .ico-radio {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  background-color: #0E0E11;
  border-radius: 50%;
  transition: all 0.2s;
}
.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  opacity: 0;
  transform: scale(0);
}
.checkbox-radio [type=radio]:checked + label .ico-radio {
  opacity: 1;
  transform: scale(1);
}
.checkbox-radio label {
  padding-bottom: 0;
}

.checkbox-item-text {
  min-height: 42px;
}
.checkbox-item-text span {
  position: relative;
  margin-left: 40px;
  min-height: 48px;
}

.checkbox-item-box {
  position: relative;
  width: 25px;
  height: 25px;
}

.checkbox-item-img {
  text-align: center;
  position: relative;
}
.checkbox-item-img.is-error {
  color: #b40016;
}
.checkbox-item-img.is-error [type=checkbox]:checked + label::before,
.checkbox-item-img.is-error [type=checkbox]:not(:checked) + label::before {
  border: 1px solid #b40016;
}
.checkbox-item-img .ico-check {
  width: 22px;
  height: 22px;
  left: 0;
  top: 0;
}
.checkbox-item-img .ico-check::after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: #0E0E11;
  width: 16px;
  transform: rotate(136deg);
  left: 4px;
  top: 8px;
}
.checkbox-item-img .ico-check::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 1px;
  top: 10px;
  transform: rotate(50deg);
  background-color: #0E0E11;
}
.checkbox-item-img [type=checkbox] + label::after,
.checkbox-item-img [type=checkbox] + label::after {
  width: 80px;
  height: 80px;
  content: "";
}
.checkbox-item-img [type=checkbox]:not(:checked),
.checkbox-item-img [type=checkbox]:checked {
  position: absolute;
  left: -9999px;
}
.checkbox-item-img [type=checkbox]:not(:checked) + label,
.checkbox-item-img [type=checkbox]:checked + label {
  padding-bottom: 132%;
  height: 100%;
  width: 100%;
  aspect-ratio: 3/4;
  position: relative;
  padding-left: 40px;
  cursor: pointer;
  font-weight: normal;
  font-size: 12px;
  text-align: initial;
  display: flex;
}
.checkbox-item-img [type=checkbox]:not(:checked) + label span,
.checkbox-item-img [type=checkbox]:checked + label span {
  display: initial;
  vertical-align: top;
  margin: 5px 0 0;
  line-height: 16px;
  min-height: 20px;
  padding-left: 0;
}
.checkbox-item-img [type=checkbox]:not(:checked) + label span::after,
.checkbox-item-img [type=checkbox]:checked + label span::after {
  content: " ";
}
.checkbox-item-img [type=checkbox]:not(:checked) + label::before,
.checkbox-item-img [type=checkbox]:checked + label::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  left: 0;
  border: none;
  border: 1px solid #a3a0a0;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 0;
}
.checkbox-item-img [type=checkbox]:not(:checked) + label a,
.checkbox-item-img [type=checkbox]:checked + label a {
  text-decoration: underline;
  margin-right: 4px;
}
.checkbox-item-img .checkbox-item [type=checkbox]:not(:checked) + label .icon,
.checkbox-item-img .checkbox-item [type=checkbox]:checked + label .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(1) translate(-50%, calc(-50% - 40px));
  color: #0E0E11;
  transition: all 0.2s;
}
.checkbox-item-img input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.checkbox-item-img [type=checkbox]:checked + label .icon {
  opacity: 1;
  transform: scale(1) translate(-50%, calc(-50% - 40px));
}
.checkbox-item-img .checkbox-item [type=checkbox]:checked + label .icon {
  opacity: 1;
  transform: scale(1) translate(-50%, calc(-50% - 40px));
}
.checkbox-item-img [type=checkbox]:checked + label {
  border: 1px solid #0E0E11;
}
.checkbox-item-img [type=checkbox]:not(:checked) + label .icon {
  opacity: 0;
  transform: scale(0) translate(-50%, calc(-50% - 40px));
}
.checkbox-item-img [type=checkbox]:not(:checked) + label {
  border: 1px solid transparent;
}
.checkbox-item-img.color-filter [type=checkbox]:not(:checked) + label,
.checkbox-item-img.color-filter [type=checkbox]:checked + label {
  padding-left: 32px;
}
.checkbox-item-img.color-filter .color-wrap button {
  margin-right: 0;
}
.checkbox-item-img.color-filter [type=checkbox]:not(:checked) + label span,
.checkbox-item-img.color-filter [type=checkbox]:checked + label span {
  padding-left: 24px;
}
.checkbox-item-img img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.checkbox-item-img .checkbox-item-img-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

.check-no.checkbox-radio [type=radio]:checked + label::before, .check-no.checkbox-radio [type=radio]:not(:checked) + label::before {
  display: none;
}
.check-no.checkbox-radio [type=radio]:checked + label .ico-radio {
  display: none;
}
.check-no.checkbox-radio [type=radio]:checked + label .border-1 {
  border: 1px solid #0E0E11;
}

.check-center.checkbox-radio [type=radio]:checked + label::before, .check-center.checkbox-radio [type=radio]:not(:checked) + label::before {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
.check-center.checkbox-radio [type=radio]:checked + label .ico-radio, .check-center.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  top: 50%;
  left: 23px;
  margin-top: -5px;
}
.check-center .box3-content {
  padding-left: 40px;
}
.check-center.checkbox-radio [type=radio]:checked + label .border-1 {
  border: 1px solid #0E0E11;
}

.check-bleed.checkbox-radio [type=radio]:checked + label::before, .check-bleed.checkbox-radio [type=radio]:not(:checked) + label::before {
  left: 0;
}
.check-bleed.checkbox-radio [type=radio]:checked + label .ico-radio, .check-bleed.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  left: 7px;
}

.check-top.checkbox-radio [type=radio]:checked + label::before, .check-top.checkbox-radio [type=radio]:not(:checked) + label::before {
  position: absolute;
  top: 16px;
  left: 16px;
}
.check-top.checkbox-radio [type=radio]:checked + label .ico-radio, .check-top.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  top: 23px;
  left: 23px;
}
.check-top .box3-content {
  padding-left: 40px;
}
.check-top.checkbox-radio [type=radio]:checked + label .border-1 {
  border: 1px solid #0E0E11;
}

.check-clear.checkbox-radio [type=radio]:checked + label::before, .check-clear.checkbox-radio [type=radio]:not(:checked) + label::before {
  position: absolute;
  top: 16px;
  left: 0;
}
.check-clear.checkbox-radio [type=radio]:checked + label .ico-radio, .check-clear.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  top: 23px;
  left: 7px;
}
.check-clear .box3-content {
  padding-left: 40px;
}
.check-clear.checkbox-radio [type=radio]:checked + label .border-1 {
  border: 1px solid #0E0E11;
}

.checkbox-card .checkbox-card-label {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  background: #ffffff;
  flex-direction: column;
  display: flex;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.checkbox-card [type=radio] {
  position: absolute;
  left: -9999px;
  width: 70px;
}
.checkbox-card [type=radio]:checked + .checkbox-card-label, .checkbox-card :hover + .checkbox-card-label {
  cursor: pointer;
  border: 1px solid #0E0E11;
}
.has-light .checkbox-card {
  color: #ffffff;
}
.has-light .checkbox-card .checkbox-card-label {
  border: 1px solid #8e8e8e;
  background: #0E0E11;
}
.has-light .checkbox-card [type=radio]:checked + .checkbox-card-label, .has-light .checkbox-card :hover + .checkbox-card-label {
  cursor: pointer;
  border: 1px solid #ffffff;
}

.is-active.checkbox-radio .border-1 {
  border: 1px solid #0E0E11;
}
.is-active.checkbox-radio [type=radio] + label .ico-radio {
  opacity: 1;
  transform: scale(1);
}

.is-error .checkbox-item [type=checkbox]:checked + label::before,
.is-error .checkbox-item [type=checkbox]:not(:checked) + label::before {
  border: 1px solid #b40016 !important;
}
.is-error .checkbox-item a {
  color: #b40016 !important;
}
.is-error .checkbox-item svg g {
  fill: #b40016 !important;
}
.is-error .checkbox-item svg g polyline {
  stroke: #b40016 !important;
}

.has-light .checkbox-item .ico-check::after {
  background-color: transparent;
}
.has-light .checkbox-item .ico-check::before {
  background-color: #ffffff;
}
.has-light .checkbox-item [type=checkbox]:not(:checked) + label::before,
.has-light .checkbox-item [type=checkbox]:checked + label::before {
  border: 1px solid #ffffff;
}
.has-light .checkbox-item [type=checkbox]:not(:checked) + label .icon,
.has-light .checkbox-item [type=checkbox]:checked + label .icon {
  color: #ffffff;
}
.has-light .checkbox-item svg g {
  fill: #ffffff;
}
.has-light .checkbox-item svg g polyline {
  stroke: #ffffff;
}
.has-light .checkbox-radio [type=radio]:not(:checked) + label::before,
.has-light .checkbox-radio [type=radio]:checked + label::before {
  border: 1px solid #ffffff;
}
.has-light .checkbox-radio [type=radio]:not(:checked) + label .ico-radio,
.has-light .checkbox-radio [type=radio]:checked + label .ico-radio {
  background-color: #ffffff;
}
.has-light .checkbox-item-2 [type=checkbox]:not(:checked) + label::before,
.has-light .checkbox-item-2 [type=checkbox]:checked + label::before {
  border: 1px solid #ffffff;
}
.has-light .checkbox-item-2 .checkbox-circle {
  background: #ffffff;
}
.has-light .checkbox-item-2 [type=checkbox]:not(:checked) + label .checkbox-circle,
.has-light .checkbox-item-2 [type=checkbox]:checked + label .checkbox-circle {
  color: #ffffff;
}

.checkbox-item [type=checkbox]:not(:checked) + label::before,
.checkbox-item [type=checkbox]:checked + label::before {
  background-color: #fff;
}

/* functional */
input:focus,
textarea:focus {
  outline: none;
  border: 1px solid #0E0E11;
}

.form {
  width: 100%;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: transparent;
  opacity: 1;
}

.textarea {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

label {
  font-size: 13px;
}

select {
  background-color: #ffffff;
  border-color: #e3e3e3;
  border-radius: 0;
  color: #0E0E11;
}

.select {
  max-width: 100%;
  appearance: none;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  justify-content: flex-start;
  position: relative;
  vertical-align: top;
}
.select select {
  cursor: pointer;
  display: block;
  max-width: 100%;
  outline: 0;
}
.select select:hover {
  opacity: 0.6;
}
.select label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  z-index: 1;
}
.select::after {
  border: 1px solid #0E0E11;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  content: " ";
  height: 8px;
  margin-top: -6px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 8px;
}
.select:not(.is-multiple) {
  height: 48px;
}
.select:not(.is-multiple, .is-loading)::after {
  border-color: #0E0E11;
}
.select select::-ms-expand {
  display: none;
}
.select select[disabled]:hover,
.select fieldset[disabled] select:hover {
  border-color: #ebecf5;
}
.select select:not([multiple]) {
  padding-right: 45px;
}
.select select[multiple] {
  height: auto;
  padding: 0;
}
.select select[multiple] option {
  padding: 0 40px;
}
.select:not(.is-multiple, .is-loading):hover::after {
  border-color: #0E0E11;
}
.select.select-label select {
  padding-left: 100px;
}
.select.select-box {
  height: auto;
}
.select.select-box select {
  background-color: #e3e3e3;
  min-width: 24px;
  width: 100%;
  height: 24px;
  padding: 0 16px 0 8px;
  font-size: 12px;
  border-radius: 0;
  border: none;
  text-align: center;
}
.select.select-box::after {
  display: block;
  right: 6px;
  width: 5px;
  height: 5px;
  margin-top: -3px;
}
.select.select-flat, .select.select-flat-no-icon {
  width: max-content;
}
.select.select-flat label, .select.select-flat-no-icon label {
  z-index: 0;
  left: 0;
}
.select.select-flat select, .select.select-flat-no-icon select {
  border: none;
  padding-left: 0;
  background: none;
  padding-right: 40px;
}
.select.select-flat::after, .select.select-flat-no-icon::after {
  right: 0;
}
.select.select-flat-no-icon {
  padding-right: 8px;
}
.select.select-flat-no-icon::after {
  content: none;
}
.select.select-secondary-rd {
  width: max-content;
}
.select.select-secondary-rd:hover {
  opacity: 0.5;
}
.select.select-secondary-rd label {
  z-index: 0;
  left: 0;
}
.select.select-secondary-rd::after {
  display: none;
}
.select.select-secondary-rd select {
  border-radius: 0;
  border: 1px solid #0E0E11;
  padding: 6px 2px 4px;
  min-width: 100px;
  text-align: center;
  background: none;
  height: 32px;
  font-size: 12px;
  opacity: 0;
}
@media (min-width: 768px) {
  .select.select-secondary-rd select {
    padding: 14px 2px;
    height: 48px;
    font-size: 12px;
  }
}
.select.select-secondary-rd select:hover {
  opacity: 0;
}
.select.select-secondary-rd.select:not([multiple]), .select.select-secondary-rd.select:not(.is-multiple) {
  height: 32px;
}
@media (min-width: 768px) {
  .select.select-secondary-rd.select:not([multiple]), .select.select-secondary-rd.select:not(.is-multiple) {
    height: 48px;
  }
}
.select.select-secondary-rd.select select:not(.is-multiple), .select.select-secondary-rd.select select:not([multiple]) {
  padding: 6px 2px 4px;
  height: 32px;
  width: 100px;
}
@media (min-width: 768px) {
  .select.select-secondary-rd.select select:not(.is-multiple), .select.select-secondary-rd.select select:not([multiple]) {
    width: 120px;
    padding: 14px 2px;
    height: 48px;
  }
}
.select.select-secondary-rd .btn-secondary-rd {
  position: absolute;
  top: 0;
  left: 0;
}
.select .select-secondary-rd .btn.btn-secondary-rd {
  padding: 9px 2px 4px;
}
.select .select-secondary-rd .btn.btn-secondary-rd:hover {
  opacity: 0.5;
}
@media (min-width: 768px) {
  .select .select-secondary-rd .btn.btn-secondary-rd {
    padding: 16px 2px 14px;
  }
}
.select.select-size {
  width: max-content;
}
.select.select-size label {
  z-index: 0;
  left: 0;
}
.select.select-size select {
  border-radius: 0;
  padding-left: 16px;
  background: none;
  padding-right: 40px;
  border-color: #0E0E11;
}
.select.select-size select:hover {
  opacity: 0.6;
}

.input,
.textarea,
.select select {
  border: 1px solid transparent;
  appearance: none;
  align-items: center;
  box-shadow: none;
  display: inline-flex;
  justify-content: flex-start;
  padding: 14px 16px;
  position: relative;
  vertical-align: top;
  border-radius: 0;
  height: 48px;
  box-sizing: border-box;
  background-color: transparent;
  border-color: #e3e3e3;
  color: #0E0E11;
  max-width: 100%;
  width: 100%;
  font-size: 12px;
  line-height: 1;
}
@media (min-width: 768px) {
  .input,
  .textarea,
  .select select {
    font-size: 12px;
  }
}
.input.validation-error,
.textarea.validation-error,
.select select.validation-error {
  border-color: #b40016;
}

.validation-error-messages {
  color: #b40016;
  font-weight: 500;
}
.validation-error-messages svg path {
  fill: #b40016;
}

.validation-error-wrap {
  min-height: 24px;
}

.input-line {
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  background-color: transparent;
  padding-left: 0;
  border-bottom: 1px solid #0E0E11;
}

.input-notouch {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  pointer-events: none;
  border-color: #e3e3e3;
  padding: 24px 0;
}

.inputmini {
  border-color: #e3e3e3;
  color: #0E0E11;
  max-width: 100%;
  width: 58px;
  align-items: center;
  border: 1px solid #e3e3e3;
  box-shadow: none;
  display: inline-flex;
  height: 34px;
  font-size: 13px;
  margin-left: 10px;
  text-align: center;
  justify-content: flex-start;
  line-height: 1.5;
  padding: calc(0.375em - 1px) calc(0.625em - 1px) calc(0.375em - 1px) calc(0.625em - 1px);
  position: relative;
  vertical-align: top;
}

.input-btn .input {
  display: inline-block;
  width: calc(60% - 100px);
}
.input-btn .btn {
  display: inline-block;
  height: 48px;
  margin-left: -3px;
  width: 100px;
}

.input-gray {
  padding-left: 40px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0;
  border: none;
}

input::input-placeholder {
  color: #e3e3e3;
  transform: translate3d(0, 0, 0);
}

.checkbox-text {
  float: left;
}
.checkbox-text label {
  display: inline-block;
}
.checkbox-text input {
  display: inline-block;
  margin-right: 10px;
}

.info-text {
  color: #8e8e8e;
  margin-top: 4px;
  width: 100%;
  float: left;
}

.form-text {
  right: 16px;
  right: 0;
  left: auto;
  position: absolute;
  top: 0;
  min-width: 50px;
  height: 48px;
  box-sizing: border-box;
  display: table;
}
.form-text span {
  vertical-align: middle;
  display: table-cell;
  padding-right: 16px;
  padding: 12px;
}

.form-text-svg svg {
  display: inline-block;
  padding: 12px;
  box-sizing: initial;
}

.form-input-label-2,
.error-zone {
  font-family: "font-Regular";
  position: relative;
}
.form-input-label-2 label,
.error-zone label {
  font-size: 12px;
}
.form-input-label-2 .validation-error-messages,
.error-zone .validation-error-messages {
  width: calc(100% - 40px);
}
.form-input-label-2 .help,
.error-zone .help {
  font-family: "font-Regular";
  position: relative;
  line-height: 1.5;
  font-size: 12px;
  margin-top: 0;
  padding-top: 2px;
  margin-bottom: 4px;
  width: calc(100% - 50px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.form-input-label-2 .input-text,
.error-zone .input-text {
  color: #8e8e8e;
  margin-top: 4px;
  line-height: 1;
}
.form-input-label-2 .info-text,
.error-zone .info-text {
  color: #8e8e8e;
  margin-top: 4px;
  width: auto;
  position: absolute;
  right: 0;
}
.form-input-label-2 > input, .form-input-label-2 > label, .form-input-label-2 > textarea,
.error-zone > input,
.error-zone > label,
.error-zone > textarea {
  font-family: "font-Regular";
  padding: 16px;
  font-weight: normal;
}
.form-input-label-2 > label,
.error-zone > label {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  font-weight: normal;
  margin-top: 1px;
  margin-bottom: 0;
  line-height: 1.1;
  color: #8e8e8e;
  border-radius: 0;
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}
.form-input-label-2 input::input-placeholder,
.error-zone input::input-placeholder {
  color: transparent;
}
.form-input-label-2 input:input-placeholder,
.error-zone input:input-placeholder {
  color: transparent;
}
.form-input-label-2 input::placeholder,
.error-zone input::placeholder {
  color: transparent;
}
.form-input-label-2 input:not(:placeholder-shown),
.error-zone input:not(:placeholder-shown) {
  padding-top: calc(14px + 14px * 0.6666666667);
  padding-bottom: calc(14px / 3 + 3px);
}
.form-input-label-2 input:not(:placeholder-shown) ~ label,
.error-zone input:not(:placeholder-shown) ~ label {
  padding-top: calc(14px / 3 + 1px);
  padding-bottom: calc(14px / 3);
  font-size: 12px;
  color: #8e8e8e;
}
.form-input-label-2 input::-webkit-list-button, .form-input-label-2 input::-webkit-calendar-picker-indicator,
.error-zone input::-webkit-list-button,
.error-zone input::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
}
.form-input-label-2 input:-webkit-autofill,
.form-input-label-2 input:-webkit-autofill:hover,
.form-input-label-2 input:-webkit-autofill:focus,
.form-input-label-2 textarea:-webkit-autofill,
.form-input-label-2 textarea:-webkit-autofill:hover,
.form-input-label-2 textarea:-webkit-autofill:focus,
.form-input-label-2 select:-webkit-autofill,
.form-input-label-2 select:-webkit-autofill:hover,
.form-input-label-2 select:-webkit-autofill:focus,
.error-zone input:-webkit-autofill,
.error-zone input:-webkit-autofill:hover,
.error-zone input:-webkit-autofill:focus,
.error-zone textarea:-webkit-autofill,
.error-zone textarea:-webkit-autofill:hover,
.error-zone textarea:-webkit-autofill:focus,
.error-zone select:-webkit-autofill,
.error-zone select:-webkit-autofill:hover,
.error-zone select:-webkit-autofill:focus {
  border: 1px solid #e3e3e3;
  -webkit-text-fill-color: #0E0E11;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}
.form-input-label-2.input-line .input,
.error-zone.input-line .input {
  border: none;
}
.form-input-label-2 input:-ms-input-placeholder,
.error-zone input:-ms-input-placeholder {
  color: #8e8e8e !important;
}
.form-input-label-2 input,
.error-zone input {
  background-color: #ffffff;
}
.form-input-label-2.has-ico-pre.btn, .form-input-label-2.has-ico-pre > input, .form-input-label-2.has-ico-pre > label,
.form-input-label-2 .has-ico-pre.btn,
.form-input-label-2 .has-ico-pre > input,
.form-input-label-2 .has-ico-pre > label,
.error-zone.has-ico-pre.btn,
.error-zone.has-ico-pre > input,
.error-zone.has-ico-pre > label,
.error-zone .has-ico-pre.btn,
.error-zone .has-ico-pre > input,
.error-zone .has-ico-pre > label {
  padding-left: 36px;
}
.form-input-label-2.has-ico-pre .form-icon,
.form-input-label-2 .has-ico-pre .form-icon,
.error-zone.has-ico-pre .form-icon,
.error-zone .has-ico-pre .form-icon {
  top: 0;
  left: 0;
}
.form-input-label-2.has-ico-pre .ico-pre,
.form-input-label-2 .has-ico-pre .ico-pre,
.error-zone.has-ico-pre .ico-pre,
.error-zone .has-ico-pre .ico-pre {
  height: 45px;
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  box-sizing: border-box;
  margin: 0 15px;
  cursor: pointer;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.form-input-label-2.has-ico-post.btn, .form-input-label-2.has-ico-post > input, .form-input-label-2.has-ico-post > label,
.form-input-label-2 .has-ico-post.btn,
.form-input-label-2 .has-ico-post > input,
.form-input-label-2 .has-ico-post > label,
.error-zone.has-ico-post.btn,
.error-zone.has-ico-post > input,
.error-zone.has-ico-post > label,
.error-zone .has-ico-post.btn,
.error-zone .has-ico-post > input,
.error-zone .has-ico-post > label {
  padding-right: 36px;
}
.form-input-label-2.has-ico-post .form-icon,
.form-input-label-2 .has-ico-post .form-icon,
.error-zone.has-ico-post .form-icon,
.error-zone .has-ico-post .form-icon {
  padding: 12px;
  top: 0;
  right: 0;
  left: auto;
}
.form-input-label-2.has-ico-post .ico-post,
.form-input-label-2 .has-ico-post .ico-post,
.error-zone.has-ico-post .ico-post,
.error-zone .has-ico-post .ico-post {
  height: 45px;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  box-sizing: border-box;
  margin: 0 15px;
  cursor: pointer;
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.form-input-label-2.required label::after {
  content: " *";
}

.is-error .input,
.is-error label,
.is-error .help {
  color: #b40016 !important;
}
.is-error .input {
  border: 1px solid #b40016;
}
.is-error .input-prefix :nth-child(1)::placeholder {
  color: #b40016;
}
.is-error svg g {
  stroke: #b40016 !important;
}
.is-error svg path {
  fill: #b40016 !important;
}

.ok-input .input,
.ok-input label,
.ok-input .help {
  color: #76ae4a !important;
}
.ok-input .input {
  border: 1px solid #76ae4a;
  color: #76ae4a;
}
.ok-input .input-prefix :nth-child(1)::placeholder {
  color: #76ae4a;
}
.ok-input .input-line {
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid #76ae4a;
  color: #76ae4a;
}

.disabled-input {
  pointer-events: none;
  opacity: 0.4;
}

.form-input-label {
  font-family: "font-Regular";
  position: relative;
  margin-bottom: 24px;
}
.form-input-label > input, .form-input-label > label {
  font-family: "font-Regular";
  padding: 16px;
  font-weight: normal;
}
.form-input-label > label {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  font-weight: normal;
  margin-top: 1px;
  margin-bottom: 0;
  line-height: 1.1;
  color: #8e8e8e;
  border-radius: 8px;
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}
.form-input-label input::input-placeholder {
  color: transparent;
}
.form-input-label input:input-placeholder {
  color: transparent;
}
.form-input-label input::placeholder {
  color: transparent;
}
.form-input-label input:not(:placeholder-shown) {
  padding-top: calc(14px + 14px * 0.6666666667);
  padding-bottom: calc(14px / 3 + 3px);
}
.form-input-label input:not(:placeholder-shown) ~ label {
  padding-top: calc(14px / 3 + 1px);
  padding-bottom: calc(14px / 3);
  font-size: 12px;
  color: #8e8e8e;
}
.form-input-label input::-webkit-list-button, .form-input-label input::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
}
.form-input-label input:-webkit-autofill,
.form-input-label input:-webkit-autofill:hover,
.form-input-label input:-webkit-autofill:focus,
.form-input-label textarea:-webkit-autofill,
.form-input-label textarea:-webkit-autofill:hover,
.form-input-label textarea:-webkit-autofill:focus,
.form-input-label select:-webkit-autofill,
.form-input-label select:-webkit-autofill:hover,
.form-input-label select:-webkit-autofill:focus {
  border: 1px solid #e3e3e3;
  -webkit-text-fill-color: #0E0E11;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}
.form-input-label.input-line .input {
  border: none;
}

.form-input-prefix {
  display: flex;
}
.form-input-prefix .input-prefix {
  width: 52px;
  display: inline-block;
  margin-right: 8px;
}
.form-input-prefix .input-prefix .input {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
.form-input-prefix .form-input-label,
.form-input-prefix .form-input-label-2 {
  display: inline-block;
  width: calc(100% - 60px);
}

.form-prefix {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form-prefix > :not(.select):nth-child(1) {
  flex: 0 0 75px;
}
.form-prefix > :nth-child(2) {
  flex: 5 0 130px;
}
.form-prefix > .btn {
  flex: 1 0 auto;
}

.input-line-v2 {
  position: relative;
  display: flex;
  padding-right: 64px;
}
.input-line-v2 .input,
.input-line-v2 .input:focus,
.input-line-v2 .textarea,
.input-line-v2 .textarea:focus {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  padding: 12px 0 4px;
  height: auto;
  border: none;
  border-bottom: 1px solid #0E0E11;
}
.input-line-v2 .input::input-placeholder {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  text-overflow: inherit;
  line-height: initial;
  white-space: pre;
  overflow-wrap: normal;
  -webkit-user-modify: read-only !important;
  overflow: hidden;
}

@supports (-ms-ime-align: auto) {
  .form-input-label-2 > label {
    display: none;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-input-label-2 > label {
    display: none;
  }
}
.has-light .form-input-label input,
.has-light .form-input-label-2 input {
  background-color: transparent;
}
.has-light input,
.has-light label {
  color: #ffffff;
}
.has-light .form-input-label > label,
.has-light .form-input-prefix > label {
  color: #ffffff;
}
.has-light .form-input-label input::input-placeholder,
.has-light .form-input-prefix input::input-placeholder {
  color: transparent;
}
.has-light .form-input-label input:input-placeholder,
.has-light .form-input-prefix input:input-placeholder {
  color: transparent;
}
.has-light .form-input-label input::placeholder,
.has-light .form-input-prefix input::placeholder {
  color: transparent;
}
.has-light .form-input-label input:not(:placeholder-shown) ~ label,
.has-light .form-input-prefix input:not(:placeholder-shown) ~ label {
  color: #ffffff;
}
.has-light .form-input-label input:-webkit-autofill,
.has-light .form-input-label input:-webkit-autofill:hover,
.has-light .form-input-label input:-webkit-autofill:focus,
.has-light .form-input-label textarea:-webkit-autofill,
.has-light .form-input-label textarea:-webkit-autofill:hover,
.has-light .form-input-label textarea:-webkit-autofill:focus,
.has-light .form-input-label select:-webkit-autofill,
.has-light .form-input-label select:-webkit-autofill:hover,
.has-light .form-input-label select:-webkit-autofill:focus,
.has-light .form-input-prefix input:-webkit-autofill,
.has-light .form-input-prefix input:-webkit-autofill:hover,
.has-light .form-input-prefix input:-webkit-autofill:focus,
.has-light .form-input-prefix textarea:-webkit-autofill,
.has-light .form-input-prefix textarea:-webkit-autofill:hover,
.has-light .form-input-prefix textarea:-webkit-autofill:focus,
.has-light .form-input-prefix select:-webkit-autofill,
.has-light .form-input-prefix select:-webkit-autofill:hover,
.has-light .form-input-prefix select:-webkit-autofill:focus {
  border: 1px solid #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 1000px #0E0E11 inset;
}
.has-light .form-input-label .input,
.has-light .form-input-label .textarea,
.has-light .form-input-label .select select,
.has-light .form-input-prefix .input,
.has-light .form-input-prefix .textarea,
.has-light .form-input-prefix .select select {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.has-light .form-input-label-2 .info-text,
.has-light .error-zone .info-text {
  color: #ffffff;
}
.has-light .input-prefix input::input-placeholder {
  color: #ffffff;
  transform: translate3d(0, 0, 0);
  opacity: 0.7;
}

@supports (-ms-ime-align: auto) {
  .form-input-label > label {
    display: none;
  }
  .formlabel input:-ms-input-placeholder {
    color: #8e8e8e;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-input-label > label {
    display: none;
  }
  .formlabel input:-ms-input-placeholder {
    color: #8e8e8e !important;
  }
}
.form-postcode {
  flex-wrap: wrap;
  gap: 8px;
}
.form-postcode > :not(.select):nth-child(1) {
  flex: 0 0 200px;
}
.form-postcode > :nth-child(2) {
  flex: 1 0 auto;
}
.form-postcode .form-input-label-2 .help {
  width: 100%;
}

.form-input-mobile {
  position: absolute;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 450px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* functional */
a:hover {
  opacity: 0.6;
}

.link4 {
  position: relative;
  display: inline-block;
  border: 0;
  transform: none;
  transition: background-color 0.3s ease-in-out;
  margin: 0;
  padding: 2px 0;
  cursor: pointer;
}
.link4:hover {
  opacity: 0.6;
}
.link4::after {
  content: "";
  background-color: #0E0E11;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
}

.link-button-prev {
  background: transparent !important;
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 1;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #e3e3e3;
}

.inner-button {
  margin-top: -1px;
  display: block;
  width: 40px;
  height: 40px;
  color: #ffffff;
}
.inner-button::after {
  border: 1px solid #0E0E11;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 10px;
  margin-top: -8px;
  pointer-events: none;
  position: absolute;
  top: 53%;
  right: 16px;
  transform: rotate(-135deg);
  transform-origin: center;
  width: 10px;
}

.link-line {
  display: inline;
  position: relative;
  border: 0;
  padding: 0;
  transform: none;
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(transparent calc(100% - 1px), #000000 10px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: background-size 0.4s;
}
.link-line:hover {
  opacity: 0.6;
}
.link-line.c-feel-dark {
  background-image: linear-gradient(transparent calc(100% - 1px), #a9a9a9 10px);
}
.link-line.c-feel {
  background-image: linear-gradient(transparent calc(100% - 1px), #fb9962 10px);
}
.link-line.is-error, .link-line.c-error {
  background-image: linear-gradient(transparent calc(100% - 1px), #b40016 10px);
}
.is-error .link-line {
  background-image: linear-gradient(transparent calc(100% - 1px), #b40016 10px);
}
.link-linebutton {
  padding-left: 0;
  padding-right: 0;
}
.link-linebutton.link-svg-pre {
  padding-left: 20px;
  padding-right: 0;
}
.link-linebutton.link-svg-post {
  padding-right: 20px;
  padding-left: 0;
}

.link-raw {
  display: inline-block;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background: initial;
}
.link-raw:hover {
  opacity: 0.6;
}

.link-svg-pre {
  padding-left: 20px;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background-position-x: 20px;
}
.link-svg-pre svg-icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
}
.link-svg-pre:hover {
  opacity: 0.6;
}

.link-svg-post {
  padding-right: 20px;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  display: initial;
  position: relative;
  border: 0;
  transform: none;
  cursor: pointer;
  background-position: calc(100% - 20px);
}
.link-svg-post svg-icon {
  position: absolute;
  right: 0;
  top: 2px;
  width: 16px;
  height: 16px;
}
.link-svg-post:hover {
  opacity: 0.6;
}

.has-light a {
  color: #ffffff;
}
.has-light .link1 {
  color: #ffffff;
}
.has-light .link1::after {
  background-color: #ffffff;
}
.has-light .link4 {
  color: #ffffff;
}
.has-light .link4::after {
  background-color: #ffffff;
}
.has-light .link4 .link4-underline {
  background: #ffffff;
}
.has-light .link5 {
  color: #ffffff;
}
.has-light .link5::after {
  background: #ffffff;
}
.has-light .link6 {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
}
.has-light .link7 {
  color: #ffffff;
}
.has-light .link7::after {
  background: #ffffff;
}
.has-light .link8 {
  color: #ffffff;
}
.has-light .link9 {
  color: #ffffff;
}
.has-light .link9::after {
  background: #ffffff;
}
.has-light .link-raw {
  color: white;
}
.has-light .link-line {
  color: white;
  background-image: linear-gradient(transparent calc(100% - 1px), white 10px);
}
.has-light .link-line::after {
  background-color: #ffffff;
}
.has-light .link-multiline {
  color: white;
  background-image: linear-gradient(transparent calc(100% - 1px), white 10px);
}
.has-light .link-multiline::after {
  background-color: #ffffff;
}
.has-light .link-svg-post {
  color: white;
}
.has-light .link-svg-pre {
  color: white;
}

/* functional */
ul.list-disc {
  list-style: none;
  margin: 0 0;
  padding: 0;
}
ul.list-disc li {
  position: relative;
  padding: 0 0;
}
ul.list-disc li::after {
  background-color: #1a1a1a;
  content: "";
  border-radius: 50%;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 0;
  margin-top: -1px;
  top: 50%;
  transform: translateY(-50%);
}
ul.list-disc li a {
  text-decoration: none;
  padding: 14px 0;
}
ul.list-disc li a::after {
  bottom: 7px;
}

ul.list-inline {
  margin: 0;
  padding: 0;
}
ul.list-inline li {
  display: inline-flex;
  padding: 0 0;
  margin: 0;
}
ul.list-inline li::after {
  display: none;
}

ul.list-inline-flex {
  margin: 0;
  padding: 0;
}
ul.list-inline-flex li {
  display: inline-flex;
  padding: 0 0;
  margin: 0;
}
ul.list-inline-flex li::after {
  display: none;
}

ul.list-inline-clear {
  margin: 0;
  padding: 0;
}
ul.list-inline-clear li {
  display: inline-block;
  margin: 0;
}
ul.list-inline-clear li::after {
  display: none;
}

ul.list-clear li {
  list-style: none;
}
ul.list-clear li::after {
  display: none;
}

ul.h-size-selector a {
  position: relative;
  width: 20px;
  height: 20px;
  text-align: center;
}
ul.h-size-selector a:hover {
  cursor: pointer;
}
ul.h-size-selector a:hover::after {
  border: 1px solid rgb(51, 48, 48);
}
ul.h-size-selector a::after {
  content: "";
  position: absolute;
  border: 1px solid transparent;
  width: 10px;
  height: 10px;
  left: 3px;
  top: 3px;
  padding: 8px;
  border-radius: 50%;
  transition: 0.5s ease all;
}

ul.list-mini {
  margin: 8px 0;
}
ul.list-mini > li {
  position: relative;
  padding: 4px 8px;
  line-height: 1;
  float: left;
  clear: both;
  list-style: none;
}
ul.list-mini > li.is-missing::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #0E0E11;
  border-radius: 0;
  margin-top: -1px;
  transform: none;
}
ul.list-mini > li::after {
  content: "";
  width: 2px;
  height: 2px;
  background-color: #0E0E11;
  position: absolute;
  left: 0;
  bottom: 10px;
}

.list-table {
  display: table;
  width: 100%;
}

.list-box {
  display: table-cell;
  box-sizing: border-box;
  border: 1px solid #8e8e8e;
  transition: all 0.2s ease;
  opacity: 0.5;
  left: -1px;
}
.list-box:first-child {
  left: 0;
}
.list-box.is-active, .list-box:hover {
  border: 1px solid #0E0E11;
  opacity: 1;
  cursor: pointer;
}

.multiple-table {
  display: table;
  width: calc(100% + 2px);
}
.multiple-table .list-box:last-child {
  left: -2px;
}

.list-button {
  position: relative;
  padding: 16px;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
  cursor: pointer;
  opacity: 1;
}
.list-button span {
  font-size: 12px;
}
.list-button:hover {
  opacity: 0.6;
}
.list-button.list-secondary, .list-button.list-secundary {
  background-color: #e3e3e3;
  padding-left: 42px;
}
.list-button.list-tertiary {
  background-color: #ebecf5;
  padding-left: 64px;
}
.list-button.list-tertiary svg-icon {
  left: 20px;
  opacity: 1;
}
.list-button.list-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.list-button.list-icons span {
  flex-grow: 1;
}

.list-selection a {
  padding: 8px;
  background: #ffffff;
}
.list-selection a:hover,
.list-selection .is-active {
  padding: 8px;
  background: #ebecf5;
}

ul.list-disc.has-light > li.is-missing::after,
ul.list-mini.has-light > li.is-missing::after {
  background-color: #ffffff;
}
ul.list-disc.has-light > li::after,
ul.list-mini.has-light > li::after {
  background-color: #ffffff;
}

ul.list-breadcrumb li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
ul.list-breadcrumb li.list-breadcrumb-divider {
  color: #949494;
  position: relative;
  top: 4px;
  padding: 0;
}

/* functional */
.progressbar {
  width: 100%;
  height: 8px;
  border-radius: 0;
  background-color: #e3e3e3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}
.progressbar .progressbar-status {
  min-width: 8px;
  height: 8px;
  border-radius: 0;
  background-color: #0E0E11;
  transition: all 0.2s ease;
}

/* functional */
.tabs .list-equal {
  display: flex;
  align-items: flex-end;
}
.tabs .list-equal li {
  flex-grow: 1;
}
.tabs ul {
  align-items: center;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-start;
  margin: 0;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.tabs li {
  display: block;
  margin: 0;
}
.tabs li a,
.tabs li span {
  align-items: center;
  border-bottom: 1px solid #e3e3e3;
  color: #8e8e8e;
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
  padding: 0;
  vertical-align: top;
  padding-bottom: 1;
  font-size: 12px;
}
.tabs li a:hover,
.tabs li span:hover {
  border-bottom-color: #0E0E11;
  border-bottom-width: 2px;
  padding-bottom: 0;
  color: #0E0E11;
  cursor: pointer;
}
.tabs li.is-active a, .tabs li.is-active span {
  border-bottom-color: #0E0E11;
  border-bottom-width: 2px;
  padding-bottom: 0;
  color: #0E0E11;
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.tabs li::after {
  display: none;
}
.tabs.is-center ul {
  justify-content: center;
}
.tabs.is-around ul {
  justify-content: space-around;
}
.tabs.is-around ul li {
  flex: 1;
}
.tabs.is-around ul li span {
  border-bottom-width: 1px;
}

.tabs-list {
  margin-left: -8px;
}
.tabs-list li {
  margin: 0;
  padding-left: 8px;
  padding-right: 8px;
}
.tabs-list li span {
  position: relative;
}
.tabs-list li span:hover {
  cursor: pointer;
}
.tabs-list li span:hover::after {
  content: "";
  width: 100%;
  background: #0E0E11;
  height: 2px;
  position: absolute;
  bottom: -4px;
  left: 0;
}
.tabs-list li.is-active span::after {
  content: "";
  width: 100%;
  background: #0E0E11;
  height: 2px;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.tabs-gray {
  border: none;
  position: relative;
  width: 100%;
  background-color: #ebecf5;
}
.tabs-gray ul {
  border: none;
}
.tabs-gray li {
  display: block;
  margin: 0;
  width: 100%;
}
.tabs-gray a,
.tabs-gray span {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  color: #8e8e8e;
  border-color: #ebecf5;
  position: relative;
}
.tabs-gray a:hover,
.tabs-gray span:hover {
  color: #0E0E11;
  cursor: pointer;
}

.tabs-clear li {
  display: block;
  margin: 0;
  width: 100%;
}

.tabs-mini {
  display: inline-block;
}
.tabs-mini ul {
  border: none;
  background-color: #ffffff;
  padding: 0 14px;
  display: inline-flex;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}
.tabs-mini li {
  position: relative;
}
.tabs-mini li a {
  opacity: 0.5;
  border: none;
  padding: 6px 8px 8px;
  color: #0E0E11;
}
.tabs-mini li:first-child a::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 20px;
  background-color: #e3e3e3;
}
.tabs-mini li a:hover {
  border: none;
  cursor: pointer;
  padding: 6px 8px 8px;
  opacity: 1;
}
.tabs-mini li.is-active a {
  padding: 6px 8px 8px;
  opacity: 1;
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}
.tabs-mini.tabs-map {
  max-width: 450px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}
.tabs-mini.tabs-map ul {
  border: 1px solid #e3e3e3;
}

/* functional */
.tag-warning {
  background-color: #ffc700;
  color: #ffffff;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-info {
  background-color: #1a32a4;
  color: #ffffff;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-valid {
  background-color: #12882c;
  color: #ffffff;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-alert {
  background-color: #ffce4e;
  color: #0E0E11;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-feel {
  background-color: #fb9962;
  color: #0E0E11;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-limited {
  background-color: #0E0E11;
  color: #ffffff;
  padding: 6px;
  line-height: 1;
  display: inline-block;
}

.tag-new {
  color: #0E0E11;
  font-style: normal;
  line-height: 10px;
  top: 10px;
  right: -30px;
  position: absolute;
}

/* functional */
.tooltip-sm {
  bottom: 0;
  transform: translateY(100%) translateY(10px);
  right: calc(50% - 16px);
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  position: absolute;
  width: max-content;
  max-width: 320px;
  z-index: 10;
  padding: 8px;
  padding-right: 24px;
  color: #0E0E11;
}
.tooltip-sm::after {
  content: "";
  top: -6px;
  right: 10px;
  position: absolute;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
}
.tooltip-sm.tooltip-br, .tooltip-sm.tooltip-tr {
  left: calc(50% - 16px);
  right: auto;
}
.tooltip-sm.tooltip-br::after, .tooltip-sm.tooltip-tr::after {
  right: auto;
  left: 10px;
}
.tooltip-sm.tooltip-tl, .tooltip-sm.tooltip-tr {
  top: 0;
  bottom: auto;
  transform: translateY(-100%) translateY(-10px);
}
.tooltip-sm.tooltip-tl::after, .tooltip-sm.tooltip-tr::after {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}
.tooltip-sm .close {
  position: absolute;
  right: 8px;
  top: 8px;
}

.store-state {
  width: max-content;
  position: relative;
  padding-left: 16px;
}
.store-state div {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
}

.has-tooltip-temp {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.tooltip-sm-temp {
  bottom: 0;
  transform: translateY(100%) translateY(10px);
  right: -8px;
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  position: absolute;
  width: 240px;
  z-index: 10;
  padding: 8px;
  padding-right: 24px;
  color: #0E0E11;
}
.tooltip-sm-temp::after {
  content: "";
  top: -6px;
  right: 10px;
  position: absolute;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
}
.tooltip-sm-temp .close-temp {
  position: absolute;
  right: 8px;
  top: 8px;
}
.tooltip-sm-temp.tooltip-tl-temp {
  left: -8px;
  right: auto;
}
.tooltip-sm-temp.tooltip-tl-temp::after {
  right: auto;
  left: 10px;
}
.tooltip-sm-temp.tooltip-bl-temp {
  top: 0;
  bottom: auto;
  transform: translateY(-100%) translateY(-10px);
}

.tooltip-sm-old {
  top: 36px;
  right: 8px;
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  position: absolute;
  width: 100%;
  max-width: 327px;
  z-index: 10;
}

.tooltip-sm-old::after {
  top: -6px;
  right: 18px;
  content: "";
  position: absolute;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
}

.tooltip-close {
  border-bottom: 1px solid #e3e3e3;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
}

.is-tooltip {
  position: relative;
  width: 100%;
}

.has-tooltip {
  position: relative;
  width: fit-content;
}

/* functional */
.form-input-label .validation-error-messages,
.form-input-label-2 .validation-error-messages {
  color: #b40016;
}
.form-input-label .validation-error-messages svg path,
.form-input-label-2 .validation-error-messages svg path {
  fill: #b40016;
}
.form-input-label.datalist input:focus + svg,
.form-input-label-2.datalist input:focus + svg {
  transform: rotate(-180deg);
  transition: 0.6s;
}
.form-input-label.datalist input.validation-error + svg path,
.form-input-label-2.datalist input.validation-error + svg path {
  fill: red;
}
.form-input-label.datalist input::-webkit-list-button, .form-input-label.datalist input::-webkit-calendar-picker-indicator,
.form-input-label-2.datalist input::-webkit-list-button,
.form-input-label-2.datalist input::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
}
.form-input-label.datalist svg,
.form-input-label-2.datalist svg {
  position: absolute;
  top: 16px;
  right: 16px;
  transform: rotate(0deg);
  transition: 0.6s;
}
.form-input-label.datalist .validation-error-messages,
.form-input-label-2.datalist .validation-error-messages {
  color: #b40016;
}
.form-input-label.datalist .validation-error-messages svg,
.form-input-label-2.datalist .validation-error-messages svg {
  position: relative;
  top: auto;
  right: auto;
}
.form-input-label.datalist .validation-error-messages svg path,
.form-input-label-2.datalist .validation-error-messages svg path {
  fill: #b40016;
}

/* functional */
.ico-round {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid #e3e3e3;
}

.ico-round-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid #e3e3e3;
}

.checkbox-ico {
  position: relative;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  left: auto;
  border: 1px solid #e3e3e3;
  outline: 0;
  vertical-align: top;
  margin: 0;
  border-radius: 50%;
}

.checkbox-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.checkbox-radio.checkbox-box label {
  width: 100%;
  height: 100%;
}

.checkbox-radio.checkbox-box [type=radio]:checked + label,
.checkbox-radio.checkbox-box [type=radio]:not(:checked) + label {
  padding: 16px;
}

.checkbox-radio.checkbox-box [type=radio]:checked + label span,
.checkbox-radio.checkbox-box [type=radio]:not(:checked) + label span {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0;
  line-height: 16px;
  padding-left: 0;
  min-height: 20px;
}

.checkbox-radio.checkbox-box [type=radio]:checked + label .ico-radio,
.checkbox-radio.checkbox-box [type=radio]:not(:checked) + label .ico-radio {
  top: 6px;
  left: 6px;
}

.checkbox-radio.checkbox-box [type=radio]:checked + label::before,
.checkbox-radio.checkbox-box [type=radio]:not(:checked) + label::before {
  display: none;
}

ul.list-clear li.list-box {
  list-style: none;
  margin: 0;
  margin-top: -1px;
  left: 0;
  position: relative;
}
ul.list-clear li.list-box:last-child {
  left: -2px;
}

.list-box {
  width: 100%;
  display: table-cell;
  box-sizing: border-box;
  border: 1px solid rgb(133, 133, 133);
  transition: all 0.2s ease;
  opacity: 0.5;
  left: -1px;
}
.list-box.is-active, .list-box:hover {
  border: 1px solid #0E0E11;
  opacity: 1;
  cursor: pointer;
}
.list-box:first-child {
  left: 0;
}
.list-box::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 15%;
  min-height: 78px;
}
.list-box .checkbox-radio [type=radio]:checked + label,
.list-box .checkbox-radio [type=radio]:not(:checked) + label {
  flex-direction: row;
}
@media (min-width: 992px) {
  .list-box .checkbox-radio [type=radio]:checked + label,
  .list-box .checkbox-radio [type=radio]:not(:checked) + label {
    flex-direction: column;
  }
}
.list-box-label {
  display: flex;
  align-items: center;
  padding: 16px;
  justify-content: space-between;
}
@media (min-width: 992px) {
  .list-box-label {
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
}
.list-box .checkbox-ico {
  order: 1;
}
.list-box .checkbox-text {
  order: 2;
}
@media (min-width: 992px) {
  .list-box::before {
    width: 100%;
    padding-top: 100%;
  }
  .list-box:first-child {
    left: 0;
  }
  .list-box .checkbox-ico {
    margin: 10px;
    order: 1;
  }
  .list-box .checkbox-text {
    margin: 16px;
    order: 3;
  }
}

.multiple-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .multiple-table {
    flex-direction: row;
  }
}

.two-table {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.two-table .list-box {
  width: 100%;
}
.two-table .list-box::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
  min-height: 78px;
}
.two-table .list-box .checkbox-radio [type=radio]:checked + label,
.two-table .list-box .checkbox-radio [type=radio]:not(:checked) + label {
  flex-direction: column;
}
.two-table .list-box-label {
  display: flex;
  align-items: center;
  padding: 16px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
.two-table .list-box .checkbox-text {
  margin: 16px;
}

/* functional */
.color-wrap {
  display: inline-block;
  padding: 8px 0;
  position: relative;
  vertical-align: middle;
}
.color-wrap .name {
  display: inline-block;
  vertical-align: middle;
}
.color-wrap button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  width: 12px;
  height: 12px;
  left: 0;
  line-height: 16px;
  margin-right: 6px;
  opacity: 1;
  padding: 0;
  position: relative;
  text-align: center;
  top: 0;
  vertical-align: middle;
}
.color-wrap button:hover .color-selector::before, .color-wrap button.is-active .color-selector::before {
  transform: scale(0);
}
.color-wrap button .color-selector {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  margin: 0;
  margin-top: 0;
  position: relative;
  top: 0;
  width: 100%;
}
.color-wrap button .color-selector::before {
  border: 1px solid #e3e3e3;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transition: all ease 275ms;
  width: 100%;
}
.color-wrap button .color-selector img,
.color-wrap button .color-selector .color-plain {
  border: 1px solid #e3e3e3;
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}
.color-wrap button .color-selector span {
  border: 1px solid #e3e3e3;
  height: 12px;
  left: 50%;
  margin-left: -6px;
  margin-top: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}
.color-wrap button:hover::before,
.color-wrap button .is-active {
  transform: scale(1);
}
.color-wrap button .color-square {
  border-radius: 0;
}
.color-wrap button .color-square::before {
  border: 1px solid #e3e3e3;
  border-radius: 0;
}
.color-wrap button .color-square:hover {
  border-radius: 0;
}
.color-wrap button .color-square img,
.color-wrap button .color-square .color-plain {
  border: 1px solid #e3e3e3;
  border-radius: 0;
}
.color-wrap button .color-square span {
  border-radius: 0;
}
.color-wrap .color-more {
  display: inline-block;
  margin-left: 5px;
}
.color-wrap .color-more span {
  border-bottom: 1px dotted #8e8e8e;
}

/* functional */
.modalx-transparent.modalx-backdrop {
  pointer-events: none;
  background: transparent;
}
.modalx-transparent.modalx-backdrop .modalx {
  pointer-events: none;
}
.modalx-transparent.modalx-backdrop .modalx-content {
  border: 1px solid #e3e3e3;
}

.modalx-xxs {
  max-width: 320px;
}
@media (min-width: 768px) {
  .modalx-xxs {
    max-width: 445px;
  }
}

.modalx-xs {
  max-width: 295px;
}

.modalx-sm {
  max-width: 445px;
}

.modalx-md {
  max-width: 595px;
}

.modalx-lg {
  max-width: 899px;
}

.modalx-xl {
  max-width: 950px;
}

.modalx-0 {
  padding: 0;
}
.modalx-0 .modalx-body {
  overflow: hidden;
}

.modalx-16 .modalx-body {
  padding: 48px 16px 16px;
}
@media (min-width: 768px) {
  .modalx-16 .modalx-body {
    padding-top: 64px;
  }
}

.modalx-16-16 .modalx-body {
  padding: 16px;
}

.modalx-24 .modalx-body {
  padding: 48px 16px 16px;
}
@media (min-width: 768px) {
  .modalx-24 .modalx-body {
    padding: 64px 24px 24px;
  }
}

.modalx-32 .modalx-body {
  padding: 48px 16px 16px;
}
@media (min-width: 768px) {
  .modalx-32 .modalx-body {
    padding: 64px 32px 32px;
  }
}

.modalx-40 .modalx-body {
  padding: 40px 16px 16px;
}
@media (min-width: 768px) {
  .modalx-40 .modalx-body {
    padding: 40px;
  }
}

.modalx-0-24 .modalx-body {
  padding: 0;
}
@media (min-width: 768px) {
  .modalx-0-24 .modalx-body {
    padding: 64px 24px 24px;
  }
}

@media (max-width: 767px) {
  .modalx-fullmobile {
    margin: 0 !important;
    max-width: initial;
    width: 100%;
  }
  .modalx-fullmobile app-shared-ui-modal {
    min-height: auto;
    margin: 0;
  }
  .modalx-fullmobile .modalx-body {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
  }
}

@media (max-width: 767px) {
  .modalx-fullviewport {
    margin: 0;
    max-width: initial;
  }
}

.modalx-centered {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}
@media (min-width: 768px) {
  .modalx-centered {
    min-height: calc(100% - 3.5rem);
  }
}

/* functional */
.row1-wrap {
  overflow: hidden;
}

.row1 {
  /* no se usa */
  display: box;
  display: flex;
  flex-flow: row wrap;
  flex-shrink: 0;
  flex-grow: 1;
  margin-left: -4px;
  margin-right: -4px;
}
@media (min-width: 1280px) {
  .row1 {
    margin-left: -8px;
    margin-right: -8px;
  }
}
.row1 .box-single {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.25%;
}
.row1 .box-single,
.row1 .box-single-center,
.row1 .box-double,
.row1 .box-super {
  box-sizing: border-box;
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0 4px;
}
@media (min-width: 1280px) {
  .row1 .box-single,
  .row1 .box-single-center,
  .row1 .box-double,
  .row1 .box-super {
    padding: 0 8px;
  }
}
.row1 .box-single,
.row1 .box-single-center {
  flex-basis: calc(50% - 1em);
  max-width: 50%;
}
.row1 .box-super {
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-basis: calc(100% - 1em);
}
@media (min-width: 1280px) {
  .row1 .box-single {
    flex-basis: calc(50% - 1em);
    max-width: 50%;
  }
  .row1 .box-single-center {
    justify-content: center;
    display: flex;
    flex-basis: calc(100% - 1em);
    max-width: 100%;
  }
  .row1 .box-single-center .card9-wrap {
    flex-basis: calc(50% - 1em);
    max-width: 50%;
  }
  .row1 .box-double,
  .row1 .box-super {
    flex-basis: calc(100% - 1em);
    max-width: 100%;
  }
  .row1 .box-double .card9-contents,
  .row1 .box-super .card9-contents {
    text-align: center;
  }
}
.explorer .row1 .box-single {
  flex-basis: calc(50% - 1em);
  max-width: 50%;
}
.explorer .row1 .box-double {
  flex-basis: calc(100% - 1em);
  max-width: 100%;
}

@media (min-width: 1280px) {
  .expanded .row1 .box-single,
  .expanded .row1 .box-single-center,
  .expanded .row1 .box-double,
  .expanded .row1 .box-super {
    flex-basis: calc(25% - 1em);
    max-width: 25%;
  }
}

/* functional */
.card {
  width: 100%;
}

.text-box .text-box-img {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 5px 0 0 0;
  vertical-align: top;
  box-sizing: border-box;
}
.text-box .text-box-inner {
  box-sizing: border-box;
  width: calc(100% - 80px - 5px);
  display: inline-block;
}

/* functional */
.card9 {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.card9 .color-wrap {
  position: relative;
  padding: 0 0 8px;
}
.card9 .card9-image {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.card9 .card9-add {
  z-index: 1000;
  position: absolute;
  background: rgb(255, 255, 255);
  padding: 16px;
  bottom: 16px;
  left: 16px;
  right: 16px;
  transition: opacity 275ms ease;
  opacity: 0;
}
.card9 .card9-sizes {
  padding: 0;
  display: inline-flex;
}
.card9 .card9-sizes:last-child {
  border-right: 1px solid #e3e3e3;
}
.card9 .card9-sizes button {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  border: none;
  background-color: #ffffff;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  border-right: none;
  padding: 10px 0;
  min-width: 48px;
  display: inline-block;
  appearance: initial;
}
.card9 .card9-sizes button:hover {
  background-color: #0E0E11;
  color: #ffffff;
  cursor: pointer;
}
.card9 .card9-wrap-details {
  min-height: 126px;
  position: absolute;
  bottom: 1px;
  left: 0;
  z-index: 3;
  width: 100%;
}
@media (min-width: 1000px) {
  .card9 .card9-wrap-details {
    padding: 0;
    min-height: 144px;
  }
}
.card9 .card9-video {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  height: 100%;
  top: 0;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.card9 .js-card9-inner {
  margin-bottom: 0;
}
.card9 .js-card9-inner .content {
  background: #e3e3e3;
}
.card9 .card9-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transition: all 0.3s ease;
  opacity: 0;
}
.card9 .card9-slider .ma-swiper-button-next,
.card9 .card9-slider .ma-swiper-button-prev {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: absolute;
  top: calc(50% - 80px);
  z-index: 3000;
  text-align: center;
  opacity: 0;
  transition-delay: 0s;
  transition: all 0.3s ease;
}
.card9 .card9-slider .ma-swiper-button-next {
  padding: 7px 4px 4px 7px;
  right: 16px;
}
.card9 .card9-slider .ma-swiper-button-next:hover {
  transition-delay: 0s;
  background: rgba(255, 255, 255, 0.5);
}
.card9 .card9-slider .ma-swiper-button-prev {
  padding: 7px 7px 4px 4px;
  left: 16px;
}
.card9 .card9-slider .ma-swiper-button-prev:hover {
  transition-delay: 0s;
  background: rgba(255, 255, 255, 0.5);
}

.card9-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: all 1s ease;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.card9-wrap .rat-content .card9-add {
  background-color: rgba(255, 255, 255, 0);
}
.card9-wrap .rat-content .btn-group {
  display: flex;
  flex-wrap: wrap;
}
.card9-wrap .rat-content:hover .card9-add {
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

#lookbook .card9-add {
  left: 0;
  width: 100%;
}
.is-active .card9-add {
  opacity: 1;
}

.card9-link .img-poster {
  cursor: pointer;
  object-fit: contain;
  height: 100%;
}
.card9-link .img-poster img {
  object-fit: contain;
  height: 100%;
  user-select: none;
}

.card9-bottom {
  display: flex;
  flex-direction: column;
}
.card9-bottom .card9-wrap-details {
  position: relative;
}
.card9-bottom .js-card9-inner {
  margin-bottom: 0;
  width: 50%;
}

@media (max-width: 767px) {
  .card9-left .card9-wrap {
    margin-left: 0;
  }
  .card9-left .card9-wrap-details {
    margin-left: 0;
  }
}
.card9-left .card9 {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.card9-left .card9-view-details {
  width: 50%;
}
.card9-left .card9-wrap-details {
  position: relative;
  margin-left: 8px;
}
.card9-left .js-card9-inner {
  width: 50%;
  margin-bottom: 0;
}

.card9-right .card9-wrap {
  margin-right: 33%;
}
.card9-right .card9 {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.card9-right .card9-view-details {
  width: 50%;
}
.card9-right .card9-wrap-details {
  text-align: right;
  position: relative;
  padding-right: 8px;
}
.card9-right .js-card9-inner {
  width: 50%;
  margin-bottom: 0;
}

.product-tag {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  color: #8e8e8e;
  letter-spacing: 0;
  line-height: 1;
}

.grid-swiper-wrap {
  cursor: grab;
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
}
.grid-swiper-wrap .card9-view-details {
  position: relative;
}
.grid-swiper-wrap .card9-wrap-details {
  position: relative;
}
.grid-swiper-wrap .rat-3-4::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 133.3333%;
}
@media (min-width: 768px) {
  .grid-swiper-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 1280px) {
  .grid-swiper-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}
.grid-swiper-wrap ::ng-deep .card9-wrap-details {
  position: relative;
}

.template-Carrusel .swiper-slide:first-child .card9-contents {
  padding-left: 16px;
}

a:hover.card9-link {
  opacity: 1;
}

div.card9-wrap .rat-content:hover .card9-add {
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

.card9-contents .product-view-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.card9-contents .product-view-info .tag-wrapper {
  width: 100%;
}

@media (max-width: 1280px) {
  .card9-add {
    display: none;
  }
}

/* functional */
.box3 {
  /* no se usa */
  position: relative;
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  display: flex;
}
.box3 .box3-middle {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.box3 .box3-price {
  display: flex;
  flex-direction: column;
  min-width: 60px;
}
.box3 .box3-price img {
  max-width: 60px;
}
.box3 .box3-right {
  display: flex;
  flex-direction: column;
  min-width: 60px;
}
.box3 .box3-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
  word-break: break-word;
}
.box3 .box3-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}
.box3 .box3-top {
  padding-top: 2px;
  padding-left: 16px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-start;
}
.box3:hover {
  cursor: pointer;
}

/* functional */
.box4 {
  position: relative;
  display: flex;
}
.box4 ul {
  margin-left: 16px;
  margin-top: 4px;
}
.box4::before {
  width: 2px;
  height: calc(100% - 48px);
  content: "";
  position: absolute;
  background-color: #8e8e8e;
  top: 44px;
  left: 20px;
}

/* functional */
/* functional */
.margin-auto {
  margin: 0 auto;
}

.m-0 {
  margin: 0px;
}

.mx-0 {
  margin-inline: 0px;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-0 {
  margin-left: 0px;
}

.p-0 {
  padding: 0px;
}

.px-0 {
  padding-inline: 0px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.pt-0 {
  padding-top: 0px;
}

.pr-0 {
  padding-right: 0px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pl-0 {
  padding-left: 0px;
}

.m-2 {
  margin: 2px;
}

.mx-2 {
  margin-inline: 2px;
}

.my-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.mt-2 {
  margin-top: 2px;
}

.mr-2 {
  margin-right: 2px;
}

.mb-2 {
  margin-bottom: 2px;
}

.ml-2 {
  margin-left: 2px;
}

.p-2 {
  padding: 2px;
}

.px-2 {
  padding-inline: 2px;
}

.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.pt-2 {
  padding-top: 2px;
}

.pr-2 {
  padding-right: 2px;
}

.pb-2 {
  padding-bottom: 2px;
}

.pl-2 {
  padding-left: 2px;
}

.m-4 {
  margin: 4px;
}

.mx-4 {
  margin-inline: 4px;
}

.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mt-4 {
  margin-top: 4px;
}

.mr-4 {
  margin-right: 4px;
}

.mb-4 {
  margin-bottom: 4px;
}

.ml-4 {
  margin-left: 4px;
}

.p-4 {
  padding: 4px;
}

.px-4 {
  padding-inline: 4px;
}

.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pt-4 {
  padding-top: 4px;
}

.pr-4 {
  padding-right: 4px;
}

.pb-4 {
  padding-bottom: 4px;
}

.pl-4 {
  padding-left: 4px;
}

.m-8 {
  margin: 8px;
}

.mx-8 {
  margin-inline: 8px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.p-8 {
  padding: 8px;
}

.px-8 {
  padding-inline: 8px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pt-8 {
  padding-top: 8px;
}

.pr-8 {
  padding-right: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.m-12 {
  margin: 12px;
}

.mx-12 {
  margin-inline: 12px;
}

.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mt-12 {
  margin-top: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.ml-12 {
  margin-left: 12px;
}

.p-12 {
  padding: 12px;
}

.px-12 {
  padding-inline: 12px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.pt-12 {
  padding-top: 12px;
}

.pr-12 {
  padding-right: 12px;
}

.pb-12 {
  padding-bottom: 12px;
}

.pl-12 {
  padding-left: 12px;
}

.m-16 {
  margin: 16px;
}

.mx-16 {
  margin-inline: 16px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.p-16 {
  padding: 16px;
}

.px-16 {
  padding-inline: 16px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pt-16 {
  padding-top: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.m-20 {
  margin: 20px;
}

.mx-20 {
  margin-inline: 20px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.p-20 {
  padding: 20px;
}

.px-20 {
  padding-inline: 20px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.m-24 {
  margin: 24px;
}

.mx-24 {
  margin-inline: 24px;
}

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mt-24 {
  margin-top: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.ml-24 {
  margin-left: 24px;
}

.p-24 {
  padding: 24px;
}

.px-24 {
  padding-inline: 24px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.pt-24 {
  padding-top: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pl-24 {
  padding-left: 24px;
}

.m-32 {
  margin: 32px;
}

.mx-32 {
  margin-inline: 32px;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mt-32 {
  margin-top: 32px;
}

.mr-32 {
  margin-right: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.ml-32 {
  margin-left: 32px;
}

.p-32 {
  padding: 32px;
}

.px-32 {
  padding-inline: 32px;
}

.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.pt-32 {
  padding-top: 32px;
}

.pr-32 {
  padding-right: 32px;
}

.pb-32 {
  padding-bottom: 32px;
}

.pl-32 {
  padding-left: 32px;
}

.m-40 {
  margin: 40px;
}

.mx-40 {
  margin-inline: 40px;
}

.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.p-40 {
  padding: 40px;
}

.px-40 {
  padding-inline: 40px;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pr-40 {
  padding-right: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pl-40 {
  padding-left: 40px;
}

.m-48 {
  margin: 48px;
}

.mx-48 {
  margin-inline: 48px;
}

.my-48 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.mt-48 {
  margin-top: 48px;
}

.mr-48 {
  margin-right: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.ml-48 {
  margin-left: 48px;
}

.p-48 {
  padding: 48px;
}

.px-48 {
  padding-inline: 48px;
}

.py-48 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.pt-48 {
  padding-top: 48px;
}

.pr-48 {
  padding-right: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.pl-48 {
  padding-left: 48px;
}

.m-56 {
  margin: 56px;
}

.mx-56 {
  margin-inline: 56px;
}

.my-56 {
  margin-top: 56px;
  margin-bottom: 56px;
}

.mt-56 {
  margin-top: 56px;
}

.mr-56 {
  margin-right: 56px;
}

.mb-56 {
  margin-bottom: 56px;
}

.ml-56 {
  margin-left: 56px;
}

.p-56 {
  padding: 56px;
}

.px-56 {
  padding-inline: 56px;
}

.py-56 {
  padding-top: 56px;
  padding-bottom: 56px;
}

.pt-56 {
  padding-top: 56px;
}

.pr-56 {
  padding-right: 56px;
}

.pb-56 {
  padding-bottom: 56px;
}

.pl-56 {
  padding-left: 56px;
}

.m-64 {
  margin: 64px;
}

.mx-64 {
  margin-inline: 64px;
}

.my-64 {
  margin-top: 64px;
  margin-bottom: 64px;
}

.mt-64 {
  margin-top: 64px;
}

.mr-64 {
  margin-right: 64px;
}

.mb-64 {
  margin-bottom: 64px;
}

.ml-64 {
  margin-left: 64px;
}

.p-64 {
  padding: 64px;
}

.px-64 {
  padding-inline: 64px;
}

.py-64 {
  padding-top: 64px;
  padding-bottom: 64px;
}

.pt-64 {
  padding-top: 64px;
}

.pr-64 {
  padding-right: 64px;
}

.pb-64 {
  padding-bottom: 64px;
}

.pl-64 {
  padding-left: 64px;
}

.m-72 {
  margin: 72px;
}

.mx-72 {
  margin-inline: 72px;
}

.my-72 {
  margin-top: 72px;
  margin-bottom: 72px;
}

.mt-72 {
  margin-top: 72px;
}

.mr-72 {
  margin-right: 72px;
}

.mb-72 {
  margin-bottom: 72px;
}

.ml-72 {
  margin-left: 72px;
}

.p-72 {
  padding: 72px;
}

.px-72 {
  padding-inline: 72px;
}

.py-72 {
  padding-top: 72px;
  padding-bottom: 72px;
}

.pt-72 {
  padding-top: 72px;
}

.pr-72 {
  padding-right: 72px;
}

.pb-72 {
  padding-bottom: 72px;
}

.pl-72 {
  padding-left: 72px;
}

.m-80 {
  margin: 80px;
}

.mx-80 {
  margin-inline: 80px;
}

.my-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mt-80 {
  margin-top: 80px;
}

.mr-80 {
  margin-right: 80px;
}

.mb-80 {
  margin-bottom: 80px;
}

.ml-80 {
  margin-left: 80px;
}

.p-80 {
  padding: 80px;
}

.px-80 {
  padding-inline: 80px;
}

.py-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-80 {
  padding-top: 80px;
}

.pr-80 {
  padding-right: 80px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pl-80 {
  padding-left: 80px;
}

.m-96 {
  margin: 96px;
}

.mx-96 {
  margin-inline: 96px;
}

.my-96 {
  margin-top: 96px;
  margin-bottom: 96px;
}

.mt-96 {
  margin-top: 96px;
}

.mr-96 {
  margin-right: 96px;
}

.mb-96 {
  margin-bottom: 96px;
}

.ml-96 {
  margin-left: 96px;
}

.p-96 {
  padding: 96px;
}

.px-96 {
  padding-inline: 96px;
}

.py-96 {
  padding-top: 96px;
  padding-bottom: 96px;
}

.pt-96 {
  padding-top: 96px;
}

.pr-96 {
  padding-right: 96px;
}

.pb-96 {
  padding-bottom: 96px;
}

.pl-96 {
  padding-left: 96px;
}

.m-112 {
  margin: 112px;
}

.mx-112 {
  margin-inline: 112px;
}

.my-112 {
  margin-top: 112px;
  margin-bottom: 112px;
}

.mt-112 {
  margin-top: 112px;
}

.mr-112 {
  margin-right: 112px;
}

.mb-112 {
  margin-bottom: 112px;
}

.ml-112 {
  margin-left: 112px;
}

.p-112 {
  padding: 112px;
}

.px-112 {
  padding-inline: 112px;
}

.py-112 {
  padding-top: 112px;
  padding-bottom: 112px;
}

.pt-112 {
  padding-top: 112px;
}

.pr-112 {
  padding-right: 112px;
}

.pb-112 {
  padding-bottom: 112px;
}

.pl-112 {
  padding-left: 112px;
}

.m-120 {
  margin: 120px;
}

.mx-120 {
  margin-inline: 120px;
}

.my-120 {
  margin-top: 120px;
  margin-bottom: 120px;
}

.mt-120 {
  margin-top: 120px;
}

.mr-120 {
  margin-right: 120px;
}

.mb-120 {
  margin-bottom: 120px;
}

.ml-120 {
  margin-left: 120px;
}

.p-120 {
  padding: 120px;
}

.px-120 {
  padding-inline: 120px;
}

.py-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

.pt-120 {
  padding-top: 120px;
}

.pr-120 {
  padding-right: 120px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pl-120 {
  padding-left: 120px;
}

.m-128 {
  margin: 128px;
}

.mx-128 {
  margin-inline: 128px;
}

.my-128 {
  margin-top: 128px;
  margin-bottom: 128px;
}

.mt-128 {
  margin-top: 128px;
}

.mr-128 {
  margin-right: 128px;
}

.mb-128 {
  margin-bottom: 128px;
}

.ml-128 {
  margin-left: 128px;
}

.p-128 {
  padding: 128px;
}

.px-128 {
  padding-inline: 128px;
}

.py-128 {
  padding-top: 128px;
  padding-bottom: 128px;
}

.pt-128 {
  padding-top: 128px;
}

.pr-128 {
  padding-right: 128px;
}

.pb-128 {
  padding-bottom: 128px;
}

.pl-128 {
  padding-left: 128px;
}

.m-160 {
  margin: 160px;
}

.mx-160 {
  margin-inline: 160px;
}

.my-160 {
  margin-top: 160px;
  margin-bottom: 160px;
}

.mt-160 {
  margin-top: 160px;
}

.mr-160 {
  margin-right: 160px;
}

.mb-160 {
  margin-bottom: 160px;
}

.ml-160 {
  margin-left: 160px;
}

.p-160 {
  padding: 160px;
}

.px-160 {
  padding-inline: 160px;
}

.py-160 {
  padding-top: 160px;
  padding-bottom: 160px;
}

.pt-160 {
  padding-top: 160px;
}

.pr-160 {
  padding-right: 160px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pl-160 {
  padding-left: 160px;
}

@media (min-width: 768px) {
  .sm\:mb-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .md\:mb-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:mb-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:mb-0 {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .sm\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 1000px) {
  .md\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .sm\:pr-0 {
    padding-right: 0;
  }
}

@media (min-width: 1000px) {
  .md\:pr-0 {
    padding-right: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:pr-0 {
    padding-right: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:pr-0 {
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .sm\:pl-0 {
    padding-left: 0;
  }
}

@media (min-width: 1000px) {
  .md\:pl-0 {
    padding-left: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:pl-0 {
    padding-left: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:pl-0 {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .sm\:pt-0 {
    padding-top: 0;
  }
}

@media (min-width: 1000px) {
  .md\:pt-0 {
    padding-top: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:pt-0 {
    padding-top: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:pt-0 {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .sm\:pb-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 1000px) {
  .md\:pb-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .lg\:pb-0 {
    padding-bottom: 0;
  }
}

@media (min-width: 1440px) {
  .xl\:pb-0 {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .smmax\:pb-0 {
    padding-bottom: 0;
  }
}

@media (max-width: 999px) {
  .mdmax\:pb-0 {
    padding-bottom: 0;
  }
}

@media (max-width: 1279px) {
  .lgmax\:pb-0 {
    padding-bottom: 0;
  }
}

@media (max-width: 1439px) {
  .xlmax\:pb-0 {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .smmax\:mb-0 {
    margin-bottom: 0;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-0 {
    margin-bottom: 0;
  }
}

@media (max-width: 1279px) {
  .lgmax\:mb-0 {
    margin-bottom: 0;
  }
}

@media (max-width: 1439px) {
  .xlmax\:mb-0 {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .smmax\:pt-0 {
    padding-top: 0;
  }
}

@media (max-width: 999px) {
  .mdmax\:pt-0 {
    padding-top: 0;
  }
}

@media (max-width: 1279px) {
  .lgmax\:pt-0 {
    padding-top: 0;
  }
}

@media (max-width: 1439px) {
  .xlmax\:pt-0 {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .smmax\:mt-0 {
    margin-top: 0;
  }
}

@media (max-width: 999px) {
  .mdmax\:mt-0 {
    margin-top: 0;
  }
}

@media (max-width: 1279px) {
  .lgmax\:mt-0 {
    margin-top: 0;
  }
}

@media (max-width: 1439px) {
  .xlmax\:mt-0 {
    margin-top: 0;
  }
}

/* functional */
.c-primary {
  color: #0E0E11;
}

.c-black {
  color: #0E0E11;
}

.c-dark-grey {
  color: #8e8e8e;
}

.c-middle-grey {
  color: #e3e3e3;
}

.c-light-grey {
  color: #ebecf5;
}

.c-white {
  color: #ffffff;
}

.second-color {
  color: #8e8e8e;
}

.is-info {
  color: #1a32a4;
}

.c-error {
  color: #b40016;
}

.c-sale {
  color: #ffce4e;
}

.c-info {
  color: #1a32a4;
}

.c-success {
  color: #76ae4a;
}

.c-valid {
  color: #12882c;
}

.c-warning {
  color: #ffc700;
}

.c-feel {
  color: #fb9962;
}

.c-feel-dark {
  color: #a9a9a9;
}

.c-feel-light {
  color: #f0f0f0;
}

.c-tier-silver {
  color: #e3e3e3;
}

.c-tier-platinum {
  color: #99b0c5;
}

.c-tier-gold {
  color: #dcbe99;
}

.c-limited {
  color: #000;
}

.bg-clear {
  background-color: #ffffff;
}

.bg-light {
  background-color: #f0f0f0;
  color: #0E0E11;
}

.bg-cream {
  background-color: #ebecf5;
}

.bg-feel-light {
  background-color: #f0f0f0;
}

.bg-feel-dark {
  background-color: #a9a9a9;
}

.bg-dark-grey {
  background-color: #8e8e8e;
}

.bg-middle-grey {
  background-color: #e3e3e3;
}

.bg-light-grey {
  background-color: #ebecf5;
}

.bg-primary {
  background-color: #0E0E11;
}

.bg-secondary {
  background-color: #000;
}

.bg-accent {
  background-color: #f70154;
}

.bg-white {
  background-color: #ffffff;
}

.bg-black {
  background-color: #0E0E11;
}

.bg-error {
  background-color: #b40016;
}

.bg-info {
  background-color: #1a32a4;
  color: #ffffff;
}

.bg-success {
  background-color: #76ae4a;
  color: #ffffff;
}

.bg-warning {
  background-color: #ffc700;
}

.bg-alert {
  background-color: #ffce4e;
}

.bg-feel {
  background-color: #fb9962;
}

.bg-dark {
  background-color: #000;
  color: #fff;
}

.bg-tier-silver {
  background-color: #e3e3e3;
}

.bg-tier-platinum {
  background-color: #99b0c5;
}

.bg-tier-gold {
  background-color: #dcbe99;
}

.bg-cover {
  background-position: center center;
  background-size: cover;
}

.bold {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.semibold {
  font-family: arial, sans-serif;
  font-weight: 700;
}

.ttc {
  text-transform: capitalize;
}

.margin-auto {
  margin: 0 auto;
}

.fl-left {
  float: left;
}

.fl-right {
  float: right;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.t-0 {
  top: 0;
}

.z-20 {
  z-index: 20;
}

.border-20 {
  border-radius: 20px;
}

.banner-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  padding: 16px;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-transform-none {
  text-transform: none;
}

.text-underline {
  text-decoration: underline;
}

.has-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  width: 100%;
}

.has-ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.img-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.img-cover img {
  height: 100vh;
}
@media (min-width: 1000px) {
  .img-cover img {
    width: 100vw;
    height: initial;
  }
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

hr {
  width: 100%;
  margin: 0;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

.only-mobile {
  display: inline-block;
}
@media (min-width: 768px) {
  .only-mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .only-desktop {
    display: none !important;
  }
}

.ico-r svg {
  position: relative;
  left: 8px;
  display: inline-block;
  vertical-align: text-top;
}

.ico.ico-l {
  display: flex;
  align-items: center;
}
.ico.ico-l svg-icon {
  margin-right: 16px;
}

.hg-status {
  position: relative;
  padding-left: 16px;
}
.hg-status::before {
  position: absolute;
  content: "";
  border-radius: 50%;
  overflow: hidden;
  top: 5px;
  left: 0;
  width: 8px;
  height: 8px;
}

.hg-status-a {
  color: #b40016;
}
.hg-status-a::before {
  background-color: #b40016;
}

.hg-status-b {
  color: #1a32a4;
}
.hg-status-b::before {
  background-color: #1a32a4;
}

.hg-status-c {
  color: #b40016;
}
.hg-status-c::before {
  background-color: #b40016;
}

.hg-status-d {
  color: #8e8e8e;
}
.hg-status-d::before {
  background-color: #8e8e8e;
}

.block-right {
  margin-left: auto;
}

.block-left {
  margin-right: auto;
}

@media (max-width: 767px) {
  .sm\:hidden {
    display: none !important;
  }
}

@media (max-width: 999px) {
  .md\:hidden {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .lg\:hidden {
    display: none !important;
  }
}

@media (max-width: 1439px) {
  .xl\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sm\:visible {
    display: none !important;
  }
}

@media (min-width: 1000px) {
  .md\:visible {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .lg\:visible {
    display: none !important;
  }
}

@media (min-width: 1440px) {
  .xl\:visible {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .smmax\:mb-16 {
    margin-bottom: 16px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-16 {
    margin-bottom: 16px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-20 {
    margin-bottom: 24px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-24 {
    margin-bottom: 24px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-32 {
    margin-bottom: 32px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-40 {
    margin-bottom: 40px;
  }
}

@media (max-width: 999px) {
  .mdmax\:mb-42 {
    margin-bottom: 42px;
  }
}

@media (min-width: 768px) {
  .sm\:order-last {
    order: 3;
  }
}

@media (min-width: 1000px) {
  .md\:order-last {
    order: 3;
  }
}

@media (min-width: 1280px) {
  .lg\:order-last {
    order: 3;
  }
}

.reverse {
  flex-wrap: wrap-reverse;
}

@media (max-width: 767px) {
  .smmax\:reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (max-width: 999px) {
  .mdmax\:reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (max-width: 1279px) {
  .lgmax\:reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (max-width: 999px) {
  .mdmax\:px-48 {
    padding-left: 48px;
    padding-right: 48px;
  }
}

.text-12-l {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-size: 12px;
}

strong {
  color: #0E0E11;
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}

.bb-line {
  border-bottom: var(--line-width) solid #e3e3e3;
}

.border-1 {
  border: var(--line-width) solid #0E0E11;
}

.border-1-grey {
  border: var(--line-width) solid #e3e3e3;
}

.border-1-light {
  border: var(--line-width) solid #ebecf5;
}

.border-t {
  border-top: var(--line-width) solid #0E0E11;
}

.border-r {
  border-right: var(--line-width) solid #0E0E11;
}

.border-b {
  border-bottom: var(--line-width) solid #0E0E11;
}

.border-b-grey {
  border-bottom: var(--line-width) solid #ebecf5;
}

.border-l {
  border-left: var(--line-width) solid #0E0E11;
}

.border-b2 {
  border-top: none;
  border-bottom: var(--line-width) solid #0E0E11;
}

.border-t2 {
  border-top: var(--line-width) solid #0E0E11;
}

.border-r2 {
  border-right: var(--line-width) solid #0E0E11;
}

.flex-vcenter {
  display: flex;
  align-items: center;
}
.flex-vcenter [type=checkbox]:checked + label .icon,
.flex-vcenter [type=checkbox]:not(:checked) + label .icon {
  position: absolute;
  top: 50%;
  margin-top: -9px;
}

.only-mobile-flex {
  display: flex;
}
@media (min-width: 768px) {
  .only-mobile-flex {
    display: flex;
  }
}
@media (min-width: 1000px) {
  .only-mobile-flex {
    display: none;
  }
}
@media (min-width: 1280px) {
  .only-mobile-flex {
    display: none;
  }
}

.only-desktop-flex {
  display: none;
}
@media (min-width: 768px) {
  .only-desktop-flex {
    display: none;
  }
}
@media (min-width: 1000px) {
  .only-desktop-flex {
    display: flex;
  }
}
@media (min-width: 1280px) {
  .only-desktop-flex {
    display: flex;
  }
}

.p-view {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

@media (max-width: 767px) {
  .p-view\:sm {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .smmax\:p-view {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
}

.text-faded {
  opacity: 0.5;
}

.cursor-pointer {
  cursor: pointer;
}

.ov-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollbar::-webkit-scrollbar {
  background-color: #ffffff;
  width: 16px;
}

.ov-custom::-webkit-scrollbar-track {
  background-color: #ebecf5;
}
.ov-custom::-webkit-scrollbar-track:hover {
  background-color: #ebecf5;
}
.ov-custom::-webkit-scrollbar-thumb {
  background-color: #8e8e8e;
  border-radius: 16px;
  border: 3px solid #ffffff;
}
.ov-custom::-webkit-scrollbar-thumb:hover {
  background-color: #8e8e8e;
  border: 2px solid #ebecf5;
}
.ov-custom::-webkit-scrollbar-button {
  display: none;
}

.svg-iflex {
  display: flex;
  align-content: center;
  align-items: center;
  margin: 4px;
}

.svg-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 4px;
}

.ttu,
.btn-primary,
.btn--full,
.btn-secondary,
.form-input-label-2 label {
  text-transform: uppercase;
}

/*  Todos los idiomas que no tienen uppercase porque son Capital sensitive, lo dejamos en minúsculas */
[lang^=de] .ttu,
[lang^=de] .btn-primary,
[lang^=de] .btn--full,
[lang^=de] .btn-secondary,
[lang^=de] .form-input-label-2 label,
[lang^=zh] .ttu,
[lang^=zh] .btn-primary,
[lang^=zh] .btn--full,
[lang^=zh] .btn-secondary,
[lang^=zh] .form-input-label-2 label,
[lang^=zo] .ttu,
[lang^=zo] .btn-primary,
[lang^=zo] .btn--full,
[lang^=zo] .btn-secondary,
[lang^=zo] .form-input-label-2 label,
[lang^=eu] .ttu,
[lang^=eu] .btn-primary,
[lang^=eu] .btn--full,
[lang^=eu] .btn-secondary,
[lang^=eu] .form-input-label-2 label,
[lang^=el] .ttu,
[lang^=el] .btn-primary,
[lang^=el] .btn--full,
[lang^=el] .btn-secondary,
[lang^=el] .form-input-label-2 label,
[lang^=tr] .ttu,
[lang^=tr] .btn-primary,
[lang^=tr] .btn--full,
[lang^=tr] .btn-secondary,
[lang^=tr] .form-input-label-2 label,
[lang^=ru] .ttu,
[lang^=ru] .btn-primary,
[lang^=ru] .btn--full,
[lang^=ru] .btn-secondary,
[lang^=ru] .form-input-label-2 label,
[lang^=sr] .ttu,
[lang^=sr] .btn-primary,
[lang^=sr] .btn--full,
[lang^=sr] .btn-secondary,
[lang^=sr] .form-input-label-2 label,
[lang^=uk] .ttu,
[lang^=uk] .btn-primary,
[lang^=uk] .btn--full,
[lang^=uk] .btn-secondary,
[lang^=uk] .form-input-label-2 label,
[lang^=bg] .ttu,
[lang^=bg] .btn-primary,
[lang^=bg] .btn--full,
[lang^=bg] .btn-secondary,
[lang^=bg] .form-input-label-2 label,
[lang^=ar] .ttu,
[lang^=ar] .btn-primary,
[lang^=ar] .btn--full,
[lang^=ar] .btn-secondary,
[lang^=ar] .form-input-label-2 label,
[lang^=nl] .ttu,
[lang^=nl] .btn-primary,
[lang^=nl] .btn--full,
[lang^=nl] .btn-secondary,
[lang^=nl] .form-input-label-2 label {
  text-transform: none;
}

.product-fadein {
  animation-delay: 1s;
  animation-duration: 3s;
  animation-name: fadein;
}

.vert-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.video-wrap {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.p-wrap {
  position: relative;
  width: 100%;
}

.charging {
  position: relative;
  height: 100%;
}

.arrow-right {
  float: right;
}

.h-50 {
  height: 50px;
}

.w-100 {
  width: 100%;
}

.mw-sm {
  max-width: 360px;
}

.mw-md {
  max-width: 442px;
}

.col-lg-4 > .mw-md {
  max-width: 442px;
}

.mw-lg {
  max-width: 798px;
}

.w-max {
  width: max-content;
}

.hidden {
  display: none !important;
}

.flex-grow-0 {
  flex-grow: 0;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.has-light {
  color: #ffffff;
}
.has-light hr {
  border-top: 1px solid #ffffff;
}

@media (max-width: 767px) {
  .smmax\:flex {
    display: flex;
  }
}

@media (max-width: 999px) {
  .mdmax\:flex {
    display: flex;
  }
}

@media (max-width: 1279px) {
  .lgmax\:flex {
    display: flex;
  }
}

@media (min-width: 768px) {
  .sm\:flex {
    display: flex;
  }
}

@media (min-width: 1000px) {
  .md\:flex {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .lg\:flex {
    display: flex;
  }
}

.pe-none {
  pointer-events: none;
}

.font-l {
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}

.font-r {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}

.font-m {
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}

.font-b {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
}

.font-sb {
  font-family: arial, sans-serif;
}

.absolute-middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.free-product {
  color: #ffc700;
}

.is-invert {
  filter: invert(1);
}

.p-stick {
  position: sticky;
  top: 0;
  z-index: 100;
}

.m-0 {
  margin: 0;
}

.o-hidden {
  overflow: hidden;
}

.max-vw-35 {
  max-width: 35vw;
}

.reset-body {
  margin-left: -20px;
  margin-right: -20px;
}
@media (min-width: 1000px) {
  .reset-body {
    margin-left: -40px;
    margin-right: -40px;
  }
}

@media (max-width: 999px) {
  .md\:reset-body {
    margin-left: -16px;
    margin-right: -16px;
  }
}

@media (max-width: 767px) {
  .sm\:reset-body {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
  justify-items: center;
  opacity: 0.4;
}
.grid-6 img {
  max-width: initial;
  width: 60%;
}
@media (min-width: 768px) {
  .grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.grid-2-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .grid-2-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-1-2-4 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .grid-1-2-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .grid-1-2-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .smmax\:grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .sm\:grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.scrollcustom {
  overflow: auto;
  /* Track */
  /* Handle */
}
.scrollcustom::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.scrollcustom::-webkit-scrollbar-track {
  background: #fff;
  -webkit-border-radius: 10px;
  border-radius: 0;
}
.scrollcustom::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #999;
}
.scrollcustom::-webkit-scrollbar-thumb:window-inactive {
  background: #999;
}

.min-scrollcustom-y {
  overflow: auto;
  /* Track */
  /* Handle */
}
.min-scrollcustom-y::-webkit-scrollbar {
  width: 5px;
}
.min-scrollcustom-y::-webkit-scrollbar-track {
  background: #fff;
  -webkit-border-radius: 10px;
  border-radius: 0;
}
.min-scrollcustom-y::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #999;
}
.min-scrollcustom-y::-webkit-scrollbar-thumb:window-inactive {
  background: #999;
}

.min-scrollcustom-x {
  overflow: auto;
  /* Track */
  /* Handle */
}
.min-scrollcustom-x::-webkit-scrollbar {
  height: 5px;
}
.min-scrollcustom-x::-webkit-scrollbar-track {
  background: #fff;
  -webkit-border-radius: 10px;
  border-radius: 0;
}
.min-scrollcustom-x::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #999;
}
.min-scrollcustom-x::-webkit-scrollbar-thumb:window-inactive {
  background: #999;
}

.min-scrollcustom-x.has-dark {
  overflow: auto;
  /* Track */
  /* Handle */
}
.min-scrollcustom-x.has-dark::-webkit-scrollbar {
  height: 5px;
}
.min-scrollcustom-x.has-dark::-webkit-scrollbar-track {
  background: #e3e3e3;
  -webkit-border-radius: 10px;
  border-radius: 0;
}
.min-scrollcustom-x.has-dark::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #0E0E11;
}
.min-scrollcustom-x.has-dark::-webkit-scrollbar-thumb:window-inactive {
  background: #0E0E11;
}

.leading-1 {
  line-height: 1;
}

.tag-product {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}
.is-rtl .tag-product {
  right: 0;
  left: inherit;
}

.m--1 {
  margin-top: -1px;
}

.btn-group-bleed .btn-group {
  margin-top: -1px;
}

.is-active.btn-secondary {
  background-color: #0E0E11;
  color: #ffffff;
  border: 1px solid #0E0E11;
}

.fixed-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.sidebar-overflow {
  height: 100vh;
  overflow: auto;
}

.is-through {
  text-decoration: line-through;
}

.gap-16 {
  gap: 16px;
}

.bg-primary-3 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-primary-15 {
  background-color: rgba(0, 0, 0, 0.15);
}

.bg-primary-30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-primary-60 {
  background-color: rgba(0, 0, 0, 0.6);
}

.bg-primary-97 {
  background-color: rgba(0, 0, 0, 0.97);
}

.bg-secondary-3 {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-secondary-15 {
  background-color: rgba(255, 255, 255, 0.15);
}

.bg-secondary-30 {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-secondary-60 {
  background-color: rgba(255, 255, 255, 0.6);
}

.bg-secondary-97 {
  background-color: rgba(255, 255, 255, 0.97);
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

/* functional */
@media (max-width: 767px) {
  /* no se usa */
  .header-account-logo {
    display: none;
  }
}
.header-account-head {
  position: relative;
  height: 56px;
  padding: 0 16px;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 1002;
  border-bottom: 1px solid #e3e3e3;
}
@media (min-width: 768px) {
  .header-account-head {
    height: 72px;
    padding: 0 16px;
  }
}

.header-account-first {
  position: relative;
  min-width: 120px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  height: 100%;
}

.header-account-cart {
  min-width: 120px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-end;
}
.header-account-cart svg {
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.header-account-back {
  transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}

.header-account-count {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-100px);
  align-items: flex-end;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.header-cart {
  position: fixed;
  z-index: 50;
  width: unset;
  height: calc(100vh - 56px);
  max-height: 800px;
  top: 0;
  opacity: 0;
  transform: translateY(-100px);
  left: 0;
  padding: 24px;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  pointer-events: none;
}
.header-cart::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.header-cart::-webkit-scrollbar-track {
  background: rgba(188, 188, 188, 0.1);
}
.header-cart::-webkit-scrollbar-thumb {
  background: rgba(41, 41, 41, 0.5);
  border-radius: 50px;
  height: 20%;
}
@media (min-width: 768px) {
  .header-cart {
    transform: translateY(-100px);
    display: none;
  }
}

.header-cart-resume {
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e3e3e3;
}

.header-cart-list {
  width: unset;
  height: calc(100% - 180px);
}

.is-cart .header-account-cart svg {
  transform: rotate(180deg);
}
.is-cart .header-account-back {
  transform: translateY(100px);
}
.is-cart .header-account-count {
  transform: translateY(-50%);
}
.is-cart .header-cart {
  pointer-events: all;
  opacity: 1;
  transform: translateY(56px);
}
@media (min-width: 768px) {
  .is-cart .header-cart {
    transform: translateY(72px);
  }
}

/* functional */
.hg-bread {
  background-color: #ffffff;
  padding: 0;
  border-bottom: 1px solid #e3e3e3;
}
.hg-bread .hg-bread-inner {
  display: table;
  text-align: center;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
}
.hg-bread .hg-bread-item {
  display: inline-table;
  margin-bottom: -1px;
  vertical-align: middle;
  text-align: center;
  padding: 12px 0;
  width: 33.3333%;
  text-transform: uppercase;
}
.hg-bread .hg-bread-num {
  text-align: center;
  line-height: 1;
  overflow: hidden;
  margin: 0 auto 10px;
}
.hg-bread .hg-bread-line {
  display: inline-table;
  vertical-align: middle;
}
.hg-bread .hg-bread-line div {
  width: 42px;
  height: 1px;
  background-color: #0E0E11;
}
.hg-bread .hg-bread-title {
  line-height: 1;
}
.hg-bread .is-inactive {
  opacity: 0.4;
}

/* functional */
.is-rtl .fl-left {
  float: right;
}
.is-rtl .fl-right {
  float: left;
}
.is-rtl .text-left {
  text-align: right;
}
.is-rtl .text-right {
  text-align: left;
}
@media (max-width: 767px) {
  .is-rtl .xs\:text-right {
    text-align: left;
  }
}
@media (max-width: 767px) {
  .is-rtl .sm\:text-right {
    text-align: left;
  }
}
@media (max-width: 999px) {
  .is-rtl .md\:text-right {
    text-align: left;
  }
}
@media (max-width: 767px) {
  .is-rtl .xs\:text-left {
    text-align: right;
  }
}
@media (max-width: 767px) {
  .is-rtl .sm\:text-left {
    text-align: right;
  }
}
@media (max-width: 999px) {
  .is-rtl .md\:text-left {
    text-align: right;
  }
}
.is-rtl .select select:not([multiple]) {
  padding-right: 16px;
  padding-left: 45px;
}
.is-rtl .select-size select:not([multiple]) {
  padding-right: 16px;
  padding-left: 16px;
}
.is-rtl .select:not(.is-multiple, .is-loading)::after {
  right: inherit;
  left: 20px;
}
.is-rtl .select.select-label select {
  padding-right: 100px;
}
.is-rtl .select.select-label label {
  left: inherit;
  right: 16px;
}
.is-rtl .select:not(.is-multiple, .is-loading).select-box::after {
  left: 8px;
}
.is-rtl .mr-0 {
  margin-right: 0;
  margin-left: 0px;
}
.is-rtl .ml-0 {
  margin-left: 0;
  margin-right: 0px;
}
.is-rtl .pr-0 {
  padding-right: 0;
  padding-left: 0px;
}
.is-rtl .pl-0 {
  padding-left: 0;
  padding-right: 0px;
}
.is-rtl .mr-2 {
  margin-right: 0;
  margin-left: 2px;
}
.is-rtl .ml-2 {
  margin-left: 0;
  margin-right: 2px;
}
.is-rtl .pr-2 {
  padding-right: 0;
  padding-left: 2px;
}
.is-rtl .pl-2 {
  padding-left: 0;
  padding-right: 2px;
}
.is-rtl .mr-4 {
  margin-right: 0;
  margin-left: 4px;
}
.is-rtl .ml-4 {
  margin-left: 0;
  margin-right: 4px;
}
.is-rtl .pr-4 {
  padding-right: 0;
  padding-left: 4px;
}
.is-rtl .pl-4 {
  padding-left: 0;
  padding-right: 4px;
}
.is-rtl .mr-8 {
  margin-right: 0;
  margin-left: 8px;
}
.is-rtl .ml-8 {
  margin-left: 0;
  margin-right: 8px;
}
.is-rtl .pr-8 {
  padding-right: 0;
  padding-left: 8px;
}
.is-rtl .pl-8 {
  padding-left: 0;
  padding-right: 8px;
}
.is-rtl .mr-12 {
  margin-right: 0;
  margin-left: 12px;
}
.is-rtl .ml-12 {
  margin-left: 0;
  margin-right: 12px;
}
.is-rtl .pr-12 {
  padding-right: 0;
  padding-left: 12px;
}
.is-rtl .pl-12 {
  padding-left: 0;
  padding-right: 12px;
}
.is-rtl .mr-16 {
  margin-right: 0;
  margin-left: 16px;
}
.is-rtl .ml-16 {
  margin-left: 0;
  margin-right: 16px;
}
.is-rtl .pr-16 {
  padding-right: 0;
  padding-left: 16px;
}
.is-rtl .pl-16 {
  padding-left: 0;
  padding-right: 16px;
}
.is-rtl .mr-20 {
  margin-right: 0;
  margin-left: 20px;
}
.is-rtl .ml-20 {
  margin-left: 0;
  margin-right: 20px;
}
.is-rtl .pr-20 {
  padding-right: 0;
  padding-left: 20px;
}
.is-rtl .pl-20 {
  padding-left: 0;
  padding-right: 20px;
}
.is-rtl .mr-24 {
  margin-right: 0;
  margin-left: 24px;
}
.is-rtl .ml-24 {
  margin-left: 0;
  margin-right: 24px;
}
.is-rtl .pr-24 {
  padding-right: 0;
  padding-left: 24px;
}
.is-rtl .pl-24 {
  padding-left: 0;
  padding-right: 24px;
}
.is-rtl .mr-32 {
  margin-right: 0;
  margin-left: 32px;
}
.is-rtl .ml-32 {
  margin-left: 0;
  margin-right: 32px;
}
.is-rtl .pr-32 {
  padding-right: 0;
  padding-left: 32px;
}
.is-rtl .pl-32 {
  padding-left: 0;
  padding-right: 32px;
}
.is-rtl .mr-40 {
  margin-right: 0;
  margin-left: 40px;
}
.is-rtl .ml-40 {
  margin-left: 0;
  margin-right: 40px;
}
.is-rtl .pr-40 {
  padding-right: 0;
  padding-left: 40px;
}
.is-rtl .pl-40 {
  padding-left: 0;
  padding-right: 40px;
}
.is-rtl .mr-48 {
  margin-right: 0;
  margin-left: 48px;
}
.is-rtl .ml-48 {
  margin-left: 0;
  margin-right: 48px;
}
.is-rtl .pr-48 {
  padding-right: 0;
  padding-left: 48px;
}
.is-rtl .pl-48 {
  padding-left: 0;
  padding-right: 48px;
}
.is-rtl .mr-56 {
  margin-right: 0;
  margin-left: 56px;
}
.is-rtl .ml-56 {
  margin-left: 0;
  margin-right: 56px;
}
.is-rtl .pr-56 {
  padding-right: 0;
  padding-left: 56px;
}
.is-rtl .pl-56 {
  padding-left: 0;
  padding-right: 56px;
}
.is-rtl .mr-64 {
  margin-right: 0;
  margin-left: 64px;
}
.is-rtl .ml-64 {
  margin-left: 0;
  margin-right: 64px;
}
.is-rtl .pr-64 {
  padding-right: 0;
  padding-left: 64px;
}
.is-rtl .pl-64 {
  padding-left: 0;
  padding-right: 64px;
}
.is-rtl .mr-72 {
  margin-right: 0;
  margin-left: 72px;
}
.is-rtl .ml-72 {
  margin-left: 0;
  margin-right: 72px;
}
.is-rtl .pr-72 {
  padding-right: 0;
  padding-left: 72px;
}
.is-rtl .pl-72 {
  padding-left: 0;
  padding-right: 72px;
}
.is-rtl .mr-80 {
  margin-right: 0;
  margin-left: 80px;
}
.is-rtl .ml-80 {
  margin-left: 0;
  margin-right: 80px;
}
.is-rtl .pr-80 {
  padding-right: 0;
  padding-left: 80px;
}
.is-rtl .pl-80 {
  padding-left: 0;
  padding-right: 80px;
}
.is-rtl .mr-96 {
  margin-right: 0;
  margin-left: 96px;
}
.is-rtl .ml-96 {
  margin-left: 0;
  margin-right: 96px;
}
.is-rtl .pr-96 {
  padding-right: 0;
  padding-left: 96px;
}
.is-rtl .pl-96 {
  padding-left: 0;
  padding-right: 96px;
}
.is-rtl .mr-112 {
  margin-right: 0;
  margin-left: 112px;
}
.is-rtl .ml-112 {
  margin-left: 0;
  margin-right: 112px;
}
.is-rtl .pr-112 {
  padding-right: 0;
  padding-left: 112px;
}
.is-rtl .pl-112 {
  padding-left: 0;
  padding-right: 112px;
}
.is-rtl .mr-120 {
  margin-right: 0;
  margin-left: 120px;
}
.is-rtl .ml-120 {
  margin-left: 0;
  margin-right: 120px;
}
.is-rtl .pr-120 {
  padding-right: 0;
  padding-left: 120px;
}
.is-rtl .pl-120 {
  padding-left: 0;
  padding-right: 120px;
}
.is-rtl .mr-128 {
  margin-right: 0;
  margin-left: 128px;
}
.is-rtl .ml-128 {
  margin-left: 0;
  margin-right: 128px;
}
.is-rtl .pr-128 {
  padding-right: 0;
  padding-left: 128px;
}
.is-rtl .pl-128 {
  padding-left: 0;
  padding-right: 128px;
}
.is-rtl .mr-160 {
  margin-right: 0;
  margin-left: 160px;
}
.is-rtl .ml-160 {
  margin-left: 0;
  margin-right: 160px;
}
.is-rtl .pr-160 {
  padding-right: 0;
  padding-left: 160px;
}
.is-rtl .pl-160 {
  padding-left: 0;
  padding-right: 160px;
}
.is-rtl .check-center.check-bleed.checkbox-radio [type=radio]:checked + label::before,
.is-rtl .check-center.check-bleed.checkbox-radio [type=radio]:not(:checked) + label::before {
  left: initial;
  right: 0;
}
.is-rtl .check-center.check-bleed.checkbox-radio [type=radio]:checked + label .ico-radio,
.is-rtl .check-center.check-bleed.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  left: initial;
  right: 5px;
}
.is-rtl .btn.btn-separate svg-icon {
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 8px;
}
.is-rtl .btn.btn-world .btn-world-center {
  text-align: right;
}
.is-rtl .btn.btn-world .btn-world-right {
  transform: rotateY(180deg);
}
.is-rtl .btn-group .btn:first-child() {
  border-radius: 0 8px 8px 0;
}
.is-rtl .btn-group .btn:last-child() {
  border-radius: 8px 0 0 8px;
}
.is-rtl .btn-social-login svg {
  margin-right: 0;
  margin-left: 8px;
}
.is-rtl .btn-social {
  padding-right: 48px;
  padding-left: 0;
}
.is-rtl .btn-social svg-icon {
  right: 1px;
  left: auto;
  margin-right: 0;
  margin-left: 16px;
}
.is-rtl .btn-social.btn-google {
  padding-right: 60px;
  padding-left: 0;
}
.is-rtl .btn-social.btn-naver {
  padding-right: 80px;
  padding-left: 0;
}
.is-rtl .checkbox-item [type=checkbox]:not(:checked),
.is-rtl .checkbox-item [type=checkbox]:checked {
  left: 0;
  right: -9999px;
  position: absolute;
  width: 70px;
}
.is-rtl .checkbox-item [type=checkbox]:not(:checked) + label::before,
.is-rtl .checkbox-item [type=checkbox]:checked + label::before {
  left: auto;
  right: 0;
  margin: 0 0 0 10px;
}
.is-rtl .checkbox-item [type=checkbox]:not(:checked) + label,
.is-rtl .checkbox-item [type=checkbox]:checked + label {
  padding-left: 0;
  padding-right: 40px;
}
.is-rtl .checkbox-item [type=checkbox]:not(:checked) + label span.theta,
.is-rtl .checkbox-item [type=checkbox]:checked + label span.theta {
  padding-left: 0;
  padding-right: 40px;
}
.is-rtl .checkbox-item [type=checkbox]:not(:checked) + label .icon,
.is-rtl .checkbox-item [type=checkbox]:checked + label .icon {
  right: 5px;
  left: auto;
  top: 4px;
}
.is-rtl .checkbox-item .ma-wrapper-terms-inner span,
.is-rtl .checkbox-item .ma-wrapper-terms-inner span.legal-text {
  padding-right: 0;
  padding-left: 0;
}
.is-rtl .check-bleed.checkbox-radio [type=radio]:checked + label .ico-radio, .is-rtl .check-bleed.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  left: 0;
  right: 17px;
}
.is-rtl .check-bleed.checkbox-radio [type=radio]:checked + label::before, .is-rtl .check-bleed.checkbox-radio [type=radio]:not(:checked) + label::before {
  left: auto;
  right: 0;
}
.is-rtl .check-center.checkbox-radio [type=radio]:checked + label::before, .is-rtl .check-center.checkbox-radio [type=radio]:not(:checked) + label::before {
  left: auto;
  right: 16px;
  margin: 0;
}
.is-rtl .check-center.checkbox-radio [type=radio]:checked + label .ico-radio, .is-rtl .check-center.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  left: 0;
  right: 23px;
}
.is-rtl .check-center .box3-content {
  padding-left: 0;
  padding-right: 48px;
}
.is-rtl .checkbox-radio [type=radio]:not(:checked),
.is-rtl .checkbox-radio [type=radio]:checked {
  left: 0;
  right: -9999px;
  position: absolute;
  width: 70px;
}
.is-rtl .checkbox-item-text span {
  margin-left: 0;
  margin-right: 40px;
}
.is-rtl [type=radio]:not(:checked),
.is-rtl [type=radio]:checked,
.is-rtl .checkbox-card [type=radio] {
  left: 9999px;
}
.is-rtl .checkbox-item-2 [type=checkbox]:not(:checked),
.is-rtl .checkbox-item-2 [type=checkbox]:checked {
  left: 9999px;
}
.is-rtl .color-wrap button {
  margin-right: 0;
  margin-left: 8px;
}
.is-rtl .form-input-label.datalist svg,
.is-rtl .form-input-label-2.datalist svg {
  right: auto;
  left: 16px;
}
.is-rtl .form-input-label.datalist .validation-error-messages svg,
.is-rtl .form-input-label-2.datalist .validation-error-messages svg {
  left: auto;
}
.is-rtl .select.select-box select {
  padding: 0 8px 0 16px;
}
.is-rtl .select.select-box::after {
  left: 6px;
  right: auto;
}
.is-rtl .select.select-flat label {
  left: auto;
}
.is-rtl .select.select-flat select {
  padding-right: 0;
}
.is-rtl .select.select-flat::after {
  left: 20px;
  right: auto;
}
.is-rtl .form-input-label .info-text {
  left: 0;
}
.is-rtl .form-input-label.icon-right .form-text {
  right: auto;
  left: 0;
}
.is-rtl .form-input-label.has-ico-post svg-icon {
  position: absolute;
  right: 0;
}
.is-rtl .form-input-label.has-ico-post .validation-error-messages svg-icon {
  position: relative;
}
.is-rtl .form-input-prefix .input-prefix {
  margin-right: 0;
  margin-left: 8px;
}
.is-rtl .form-input-label-2.icon-right .form-text {
  right: auto;
  left: 0;
}
.is-rtl .form-input-label-2.has-ico-post .ico-post {
  right: auto;
  left: 0;
}
.is-rtl .form-input-label-2.has-ico-post .validation-error-messages svg-icon {
  position: relative;
}
.is-rtl .form-input-label-2.has-ico-pre .ico-pre {
  position: absolute;
  right: 0;
  left: auto;
}
.is-rtl .form-input-label-2.has-ico-pre .validation-error-messages svg-icon {
  position: relative;
}
.is-rtl .form-input-label-2 .info-text {
  left: 0;
  right: initial;
}
.is-rtl .has-ico-post.btn, .is-rtl .has-ico-post > input, .is-rtl .has-ico-post > label {
  padding-right: 12px;
  padding-left: 40px;
}
.is-rtl .has-ico-pre.btn, .is-rtl .has-ico-pre > input, .is-rtl .has-ico-pre > label {
  padding-left: 12px;
  padding-right: 44px;
}
.is-rtl .link-svg-pre,
.is-rtl button.link-line.link-svg-pre {
  padding-left: 0;
  padding-right: 20px;
}
.is-rtl .link-svg-pre::after,
.is-rtl button.link-line.link-svg-pre::after {
  left: 0;
}
.is-rtl .link-svg-pre svg-icon,
.is-rtl button.link-line.link-svg-pre svg-icon {
  left: auto;
  right: 0;
}
.is-rtl .link-svg-post,
.is-rtl button.link-line.link-svg-post {
  padding-left: 20px;
  padding-right: 0;
}
.is-rtl .link-svg-post::after,
.is-rtl button.link-line.link-svg-post::after {
  right: 0;
}
.is-rtl .link-svg-post svg-icon,
.is-rtl button.link-line.link-svg-post svg-icon {
  right: auto;
  left: 0;
}
.is-rtl ul.list-disc li::after {
  right: 0;
}
.is-rtl .list-button.list-secundary, .is-rtl .list-button.list-secondary {
  padding-left: 16px;
  padding-right: 42px;
}
.is-rtl .list-button.list-tertiary {
  padding-left: 16px;
  padding-right: 64px;
}
.is-rtl .tabs-mini {
  float: left;
}
.is-rtl .tabs-mini li:first-child a::after {
  left: 0;
  right: auto;
}
.is-rtl .header-account-back {
  left: auto;
  right: 0;
}
.is-rtl .header-account-back svg-icon svg {
  transform: rotate(180deg);
}
.is-rtl .validation-error-messages svg-icon {
  padding-right: 0;
  padding-left: 8px;
}
.is-rtl .tooltip-sm {
  left: calc(50% - 16px);
  right: auto;
  padding-left: 24px;
  padding-right: 16px;
}
.is-rtl .tooltip-sm::after {
  right: auto;
  left: 10px;
}
.is-rtl .tooltip-sm.tooltip-tr, .is-rtl .tooltip-sm.tooltip-br {
  right: calc(50% - 16px);
  left: auto;
}
.is-rtl .tooltip-sm.tooltip-tr::after, .is-rtl .tooltip-sm.tooltip-br::after {
  left: auto;
  right: 10px;
}
.is-rtl .tooltip-sm .close {
  right: auto;
  left: 8px;
}
.is-rtl .tooltip-sm-temp {
  left: -8px;
  right: auto;
  padding-left: 24px;
  padding-right: 16px;
}
.is-rtl .tooltip-sm-temp::after {
  right: auto;
  left: 10px;
}
.is-rtl .tooltip-sm-temp .close-temp {
  right: auto;
  left: 8px;
}
.is-rtl .tag-new {
  right: auto;
  left: -30px;
}
.is-rtl .box4 ul {
  margin-left: 0;
  margin-right: 16px;
}
.is-rtl .box4::before {
  left: initial;
  top: 47px;
  right: 20px;
}

/*Custom template */
@keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes verticalFadeIn {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes numFade {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}
@keyframes lineFade {
  0% {
    width: 0;
  }
  50% {
    width: 100px;
  }
  100% {
    width: 100px;
  }
}
@keyframes verticalImage {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-ms-keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes verticalReveal {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideUpAndFade {
  0% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes slideUpAndFade {
  0% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-ms-keyframes slideUpAndFade {
  0% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideUpAndFade {
  0% {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/* Animation for hiding the video wrapper */
@-webkit-keyframes hideVideo {
  0% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
  100% {
    width: 0vw;
    height: 100dvh;
    opacity: 0;
  }
}
@keyframes hideVideo {
  0% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
  100% {
    width: 0vw;
    height: 100dvh;
    opacity: 0;
  }
}
@keyframes fadein {
  from {
    transform: translateY(15%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes open-left {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}
.kv-block11-num {
  position: relative;
  display: inline-block;
  text-align: right;
  height: 16px;
  width: 100px;
}

.kv-block11-num:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
}

.order-1 {
  animation-delay: 0.3s !important;
}

.order-2 {
  animation-delay: 0.6s !important;
}

.order-3 {
  animation-delay: 0.9s !important;
}

.order-4 {
  animation-delay: 1.2s !important;
}

.order-5 {
  animation-delay: 1.5s !important;
}

.order-6 {
  animation-delay: 1.7s !important;
}

.order-7 {
  animation-delay: 1.9s !important;
}

.vertical-inner,
.kv-block-text {
  transform: translateY(100px);
  opacity: 0;
}

.opened .kv-block11-num .num {
  animation: 3s numFade 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .kv-block11-num:after {
  animation: 3s lineFade 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .rat-3-2 {
  opacity: 1;
}
.opened .vertical-inner {
  animation: 1.5s verticalReveal 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .kv-block-text {
  animation: 1.5s verticalReveal 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .img-wrap .img-inner {
  width: 100%;
  animation: 1.5s verticalImage 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .img-wrap .img-inner2 {
  width: 100%;
  animation: 1.5s verticalImage 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}
.opened .kv-block11-num:after {
  animation: lineFade 3s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
}

.kv-block11-num {
  position: relative;
  display: inline-block;
  text-align: right;
  height: 16px;
  width: 100px;
}
.kv-block11-num:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
}
.kv-block11-num .num {
  position: absolute;
  top: -2px;
  left: 8px;
  opacity: 0;
}

.opened .out-:nth-child(1) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 140ms;
}
.opened .out-:nth-child(2) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 280ms;
}
.opened .out-:nth-child(3) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 420ms;
}
.opened .out-:nth-child(4) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 560ms;
}
.opened .out-:nth-child(5) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 700ms;
}
.opened .out-:nth-child(6) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 840ms;
}
.opened .out-:nth-child(7) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 980ms;
}
.opened .out-:nth-child(8) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1120ms;
}
.opened .out-:nth-child(9) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1260ms;
}
.opened .out-:nth-child(10) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1400ms;
}
.opened .out-:nth-child(11) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1540ms;
}
.opened .out-:nth-child(12) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1680ms;
}
.opened .out-:nth-child(13) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1820ms;
}
.opened .out-:nth-child(14) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 1960ms;
}
.opened .out-:nth-child(15) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2100ms;
}
.opened .out-:nth-child(16) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2240ms;
}
.opened .out-:nth-child(17) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2380ms;
}
.opened .out-:nth-child(18) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2520ms;
}
.opened .out-:nth-child(19) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2660ms;
}
.opened .out-:nth-child(20) .in- {
  animation: verticalReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-fill-mode: both;
  animation-delay: 2800ms;
}

.word,
.imglogo,
.fadein,
.verticalFadeIn {
  position: relative;
  opacity: 0;
}

.opened .fadein {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.opened .verticalFadeIn {
  animation: verticalFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.opened .client-zone .imglogo {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-svg {
  position: absolute;
  margin-top: 6px;
  width: 100%;
  display: flex;
  clip-path: inset(0 100% 0 0);
}

.is-inview .anim-svg {
  animation: 0.3s open-left;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

.btn-swipe span[data-label]:after {
  color: #f70154;
  content: attr(data-label);
  opacity: 0;
  position: absolute;
  width: 100%;
  margin-left: -8px;
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.btn-swipe span[data-label] span,
.btn-swipe span[data-label]:after {
  display: block;
  height: 15px;
  line-height: 15px;
  transition: opacity 0.3s, transform 0.3s;
}
.btn-swipe:hover span[data-label] span {
  opacity: 0;
  transform: translateY(-100%);
}
.btn-swipe:hover span[data-label]:after {
  opacity: 1;
  transform: translateY(-100%);
}

.timeline-img {
  opacity: 0.3;
  filter: grayscale(1);
  transition: all 0.3s ease;
}

.column-timeline:hover .btn-swipe span[data-label] span {
  opacity: 0;
  transform: translateY(-100%);
}
.column-timeline:hover .btn-swipe span[data-label]:after {
  opacity: 1;
  transform: translateY(-100%);
}
.column-timeline:hover .timeline-img {
  opacity: 1;
  filter: grayscale(0);
}

.line-anim {
  position: relative;
}
.line-anim::before {
  transform: scaleX(0);
  transform-origin: bottom right;
}
.line-anim:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  cursor: pointer;
}
.line-anim::before {
  content: " ";
  display: block;
  position: absolute;
  height: 2px;
  bottom: 10px;
  left: 0;
  inset: auto 0 10px 0;
  background: black;
  z-index: -1;
  transition: transform 0.3s ease;
}

a.line-anim {
  transition: all 0.3s ease;
}

.darkmode a.line-anim {
  transition: all ease 0.3s;
  color: #000000;
}

.darkmode footer a {
  color: #000000;
}

[class*=outtext-] {
  overflow: hidden;
  position: relative;
}

[class*=outtext-] .intext {
  position: absolute;
  left: 0;
}

.outtext-1,
.outtext-2 {
  height: 15vw;
  max-height: 142px;
}
@media (min-width: 1280px) {
  .outtext-1,
  .outtext-2 {
    height: 18vw;
    max-height: 142px;
  }
}

.outtext-1 .intext,
.outtext-2 .intext {
  top: 12vw;
}

.outtext-2 {
  top: -20px;
}

.outtext-3,
.outtext-4 {
  height: 25px;
}

.outtext-3 .intext,
.outtext-4 .intext {
  top: 50px;
}

@media (min-width: 1280px) {
  .outtext-1,
  .outtext-2 {
    height: 142px;
  }
  .outtext-3,
  .outtext-4 {
    height: 50px;
  }
  .outtext-5 {
    height: 142px;
  }
}
/*Custom template */
.cursor-follow {
  position: fixed;
  background-color: #f70154;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  z-index: 1000;
  mix-blend-mode: difference;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
.cursor-follow img {
  width: 300px;
  height: 200px;
}

.cursor {
  position: fixed;
  background-color: white;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  z-index: 100;
  user-select: none;
  pointer-events: none;
  transform: scale(1);
}

@media (max-width: 768px) {
  .cursor-follow, .cursor {
    display: none;
  }
}
.grid-responsive-header {
  width: 100%;
  height: 70px;
  padding: 10px;
  display: flex;
  justify-content: center;
}

.grid-responsive {
  width: 100vw;
  height: calc(100vh - 70px);
  display: flex;
}

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

.grid-mobile-wrap,
.grid-tablet-wrap,
.grid-desktop-wrap {
  position: relative;
}

.grid-desktop {
  width: 1920px;
  height: 170vh;
  transform: translate(-25%, -25%) scale(0.5);
  position: absolute;
  left: 0%;
  top: 0;
  bottom: 0;
}

.grid-tablet {
  width: 775px;
  height: 1024px;
  transform: translate(-12%, -20%) scale(0.6);
  position: absolute;
  left: 0%;
  top: 0;
  bottom: 0;
}

.grid-mobile {
  width: 410px;
  height: 852px;
  transform: translate(-3%, -15%) scale(0.7);
  position: absolute;
  left: 0%;
  top: 0;
  bottom: 0;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: 0.2fr 0.3fr 0.5fr;
  grid-gap: 16px;
  align-items: start;
  width: 100%;
}
@media (min-width: 1000px) {
  .grid-3 {
    width: 100%;
  }
}

.menu-gsap.menu-open .openButton span {
  transform: rotate(45deg);
  transform-origin: top left;
  width: 26px;
}
.menu-gsap.menu-open .openButton span:nth-child(2) {
  opacity: 0;
}
.menu-gsap.menu-open .openButton span:nth-child(3) {
  transform-origin: bottom left;
  transform: rotate(-45deg);
}
.menu-gsap.menu-open #menu-gsap-wrap {
  opacity: 1;
}
.menu-gsap .openButton {
  top: -50px;
  right: 24px;
  transition: all 0.2s ease;
  position: fixed;
  z-index: 60;
  width: 22px;
  height: 22px;
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
  mix-blend-mode: difference;
  filter: grayscale(1);
}
@media (min-width: 992px) {
  .menu-gsap .openButton {
    right: 7em;
    top: -50px;
  }
}
.menu-gsap .openButton span {
  position: relative;
  z-index: 10;
  display: block;
  height: 2px;
  width: 22px;
  background-color: white;
  transition: all 0.2s ease;
}
.menu-gsap .openButton span:nth-child(2) {
  margin: 7px 0;
}
.menu-gsap nav {
  position: absolute;
  color: white;
  font-size: clamp(1.875rem, 0.5357rem + 4vw, 7rem);
  line-height: 1.3;
  top: 100px;
  left: 50px;
}
.menu-gsap nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-gsap #menu-gsap-wrap {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 100%; /* Inicialmente, la div estará fuera de la pantalla */
  width: 100%;
  height: 100%;
  background-color: #f70154;
  opacity: 1; /* La hacemos visible al principio */
  pointer-events: auto; /* Habilita los eventos del puntero */
  transition: all 0.5s ease; /* Agregamos una transición de 0.5 segundos para suavizar el desplazamiento de izquierda a derecha */
}
.menu-gsap .hidden-menu2 {
  left: 100%; /* Aseguramos que la div esté fuera de la pantalla cuando tiene la clase 'hidden' */
}

.menu-logo {
  position: fixed;
  top: -55px;
  z-index: 20;
  width: 35px;
  left: 24px;
  transition: all 0.2s ease;
  mix-blend-mode: difference;
}
@media (min-width: 768px) {
  .menu-logo {
    left: 24px;
    top: 55px;
  }
}
@media (min-width: 1280px) {
  .menu-logo {
    left: 7em;
    top: 55px;
  }
}
.menu-logo svg {
  width: 100%;
  z-index: 20;
  position: relative;
}
.menu-logo .menu-logo-icon {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: -10px;
  bottom: 4px;
  transition: all 0.5s ease;
  z-index: 10;
  translate: 0 0;
  transform: scale(1);
}
.menu-logo:hover {
  cursor: pointer;
}
.menu-logo:hover .menu-logo-icon {
  animation-direction: normal;
  background-color: #000000;
  translate: 0 0;
  transform: scale(1);
  transform-origin: center;
  animation: roundlogo 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes roundlogo {
  0% {
    translate: 0 0;
    transform: scale(1);
  }
  50% {
    translate: -27px -15px;
    transform: scale(1);
  }
  100% {
    translate: -27px -15px;
    transform: scale(10);
  }
}
.show-logo .menu-logo {
  top: 16px;
}
@media (min-width: 992px) {
  .show-logo .menu-logo {
    top: 55px;
  }
}
.show-logo .openButton {
  top: 24px;
}
@media (min-width: 992px) {
  .show-logo .openButton {
    top: 65px;
  }
}

.menu-open.menu-gsap .openButton {
  top: 24px !important;
}
@media (min-width: 992px) {
  .menu-open.menu-gsap .openButton {
    top: 65px !important;
  }
}

.innermarkdown {
  padding-bottom: 40px;
}
.innermarkdown .toc {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #0E0E11;
  font-size: 14px;
  margin: 0 auto 20px;
  padding: 16px;
  max-width: 634px;
  padding: 20px;
}
.innermarkdown .toc ol li a {
  display: block;
  color: #0E0E11;
  padding: 0 8px 8px 0;
}
.innermarkdown .toc ol {
  list-style: none;
}
.innermarkdown pre {
  padding: 20px;
}
.innermarkdown blockquote p {
  position: relative;
  font-size: 32px;
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  text-align: center;
  margin: 60px 0;
  padding: 30px;
}
.innermarkdown blockquote p:after {
  opacity: 0.2;
  bottom: 0;
  position: absolute;
  font-size: 132px;
  line-height: 0.4;
  content: '"';
}
.innermarkdown hr {
  margin-top: 20px;
  margin-bottom: 40px;
}
@media (min-width: 1000px) {
  .innermarkdown hr {
    margin-top: 40px;
    margin-bottom: 80px;
  }
}
.innermarkdown p {
  font-size: 18px;
  line-height: 1.4;
}
.innermarkdown h2 {
  margin-top: 24px;
  padding-bottom: 20px;
  font-size: clamp(1.875rem, 0.5357rem + 4vw, 7rem);
  margin-left: -20%;
  width: 140%;
  text-align: center;
  line-height: 1;
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.innermarkdown h3 {
  margin-top: 24px;
  padding-bottom: 20px;
  font-size: clamp(1.875rem, 0.5357rem + 4vw, 7rem);
  line-height: 1;
  font-family: "font-light", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}
.innermarkdown h4 {
  margin-top: 24px;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  padding-bottom: 8px;
  font-size: 32px;
}
.innermarkdown h5 {
  text-align: center;
  margin-top: 0px;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  padding-bottom: 8px;
  font-size: 18px;
}
.innermarkdown h2:before,
.innermarkdown h4:before,
.innermarkdown h3:before {
  display: block;
  content: "";
  padding-top: 120px;
  margin-top: -120px;
}
.innermarkdown .eleventy-plugin-youtube-embed {
  width: 120% !important;
  transform: translateX(-8%);
  margin-left: 0;
  max-width: 100vw;
  margin-top: 32px;
  margin-bottom: 32px;
}
@media (min-width: 1000px) {
  .innermarkdown .eleventy-plugin-youtube-embed {
    width: 120% !important;
    transform: translateX(-50%);
    margin-left: 50%;
    max-width: 1000px;
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
.innermarkdown p:has(img) {
  width: 100%;
  transform: translateX(0);
  margin-left: 0;
  max-width: 1000px;
}
.innermarkdown p:has(img)::after {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
@media (min-width: 1000px) {
  .innermarkdown p:has(img) {
    width: 50vw;
    transform: translateX(-50%);
    margin-left: 50%;
    max-width: 1000px;
  }
}
.innermarkdown p:has(img) img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.innermarkdown h2 .anchor-link,
.innermarkdown h3 .anchor-link,
.innermarkdown h4 .anchor-link {
  position: absolute;
  font-size: 24px;
  opacity: 0.5;
}

.video-wrap {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.video-wrap--show {
  pointer-events: auto;
}

.video-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  background: black;
}

.video-wrap--show .video-inner {
  opacity: 1;
}

.video-player {
  position: fixed;
  top: 50%;
  width: 100%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.video-loaded .loader {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.video-loaded .action--play {
  opacity: 1;
  pointer-events: auto;
}

.action--close {
  line-height: 1;
  position: absolute;
  z-index: 1000;
  top: 16px;
  right: 32px;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  opacity: 1;
  background: transparent;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: scale3d(0.7, 0.7, 1);
  transform: scale3d(0.7, 0.7, 1);
  cursor: pointer;
}

.action--close svg {
  width: 30px;
  height: 30px;
}

.video-wrap--show .action--close {
  opacity: 1;
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

@media screen and (min-width: 25em) {
  .video-inner {
    width: 0vw;
    height: 100dvh;
  }
  .video-wrap--show .video-inner {
    opacity: 0;
    -webkit-animation: showVideo-1 0.5s ease forwards;
    animation: showVideo-1 0.5s ease forwards;
  }
  .video-wrap--hide .video-inner {
    -webkit-animation: hideVideo 0.5s ease forwards;
    animation: hideVideo 0.5s ease forwards;
  }
  .video-player {
    left: 50%;
    width: auto;
    height: 100dvh;
    opacity: 0;
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  .video-wrap--show .video-player,
  .video-wrap--hide .video-player {
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  .video-wrap--show .video-player {
    opacity: 1;
    -webkit-transition: opacity 1.5s 1s ease;
    transition: opacity 1.5s 1s ease;
  }
  .video-wrap--hide .video-player {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
}
@media screen and (min-width: 25em) and (min-aspect-ratio: 1280/720) {
  .video-inner {
    width: 0vw;
    height: 30vh;
  }
  .video-wrap--show .video-inner {
    -webkit-animation: showVideo-2 0.5s forwards;
    animation: showVideo-2 0.5s forwards;
  }
  .video-player {
    width: 70vw;
    height: auto;
  }
}
@-webkit-keyframes showVideo-1 {
  0% {
    width: 0vw;
    height: 100dvh;
    opacity: 0;
  }
  100% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
}
@keyframes showVideo-1 {
  0% {
    width: 0vw;
    height: 100dvh;
    opacity: 0;
  }
  100% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
}
@-webkit-keyframes showVideo-2 {
  0% {
    width: 0vw;
    height: 100dvh;
    opacity: 1;
  }
  100% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
}
@keyframes showVideo-2 {
  0% {
    width: 0vw;
    height: 100dvh;
    opacity: 1;
  }
  100% {
    width: 100vw;
    height: 100dvh;
    opacity: 1;
  }
}
.main-image {
  position: relative;
  left: 0;
  animation: 1s slideUpAndFade cubic-bezier(0.19, 1, 0.22, 1) 0.7s;
  animation-fill-mode: both;
  z-index: 15;
  max-width: 400px;
}
@media (min-width: 1000px) {
  .main-image {
    max-width: 100%;
    position: absolute;
    left: 50%;
    right: 10%;
    top: 0;
  }
}

.height-hero {
  position: relative;
}
.height-hero::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media (max-width: 767px) {
  .height-hero {
    min-height: 0;
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
@media (min-width: 768px) {
  .height-hero {
    min-height: 70vh;
  }
}

.section {
  position: relative;
  z-index: 9;
  padding: 7em 7em 5em 7em;
}
@media screen and (max-width: 1000px) {
  .section {
    padding: 3em 2.5em 3em 2.5em;
  }
}

.sectionpin {
  position: relative;
  z-index: 9;
  padding: 7em 7em 5em 7em;
}
@media screen and (max-width: 1000px) {
  .sectionpin {
    padding: 3em 2.5em 0em 2.5em;
  }
}

.sectionfull {
  position: relative;
  z-index: 9;
  padding: 6em 0 4em 0;
}
@media screen and (max-width: 1000px) {
  .sectionfull {
    padding: 6em 0 4em 0;
  }
}

section {
  position: relative;
}

header.interior a {
  color: #0E0E11;
}
header.interior svg path {
  fill: #0E0E11;
}

.block-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 60vw;
}
@media screen and (max-width: 1000px) {
  .block-img {
    position: relative;
    width: 100%;
    top: 0;
    transform: translateY(0);
  }
}

.block-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 30vw;
  padding: 0 3vw;
}
@media screen and (max-width: 1000px) {
  .block-text {
    position: relative;
    width: 90%;
    right: 0;
    left: 0;
    padding: 6em 2.5em 4em 2.5em;
  }
}

.block-right {
  right: 0;
}

.block-left {
  left: 0;
}

.pin-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pin-wrap > * {
  min-width: 80vw;
  padding: 0 20px 0 0;
  width: 80vw;
}
@media (min-width: 1000px) {
  .pin-wrap > * {
    width: initial;
    min-width: 80vw;
    padding: 0 5vw 0 0;
  }
}

#sectionPin {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  z-index: 10;
  left: 0;
  color: white;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
@media (min-width: 1000px) {
  #sectionPin {
    align-items: flex-start;
    padding-bottom: 20px;
    flex-direction: column;
    overflow: hidden;
    height: 100dvh;
    padding-left: 7em;
  }
}

.panel {
  position: relative;
  display: flex;
  align-items: end;
  height: 200px;
}
@media (min-width: 768px) {
  .panel {
    height: 30vh;
  }
}
@media (min-width: 1000px) {
  .panel {
    height: 40vh;
  }
}
@media (min-width: 1280px) {
  .panel {
    height: 60vh;
  }
}
.panel .panel-img {
  height: 100%;
  width: 60%;
  position: relative;
}
.panel .panel-img img {
  width: 100%;
  height: 100%;
  max-width: none;
}
@media (min-width: 1000px) {
  .panel .panel-img img {
    width: initial;
  }
}
.panel .panel-text {
  height: 100%;
  width: 40%;
  padding: 50px 50px 0 50px;
  position: relative;
}
.panel .o-60 {
  opacity: 0.6;
}
@media (max-width: 768px) {
  .panel {
    flex-direction: column;
  }
  .panel .panel-img {
    width: 100%;
    position: relative;
  }
  .panel .panel-text {
    width: 100%;
    padding: 20px 0 0 0;
    position: relative;
  }
}

.panel-info {
  display: grid;
  grid-gap: 20px;
  width: 100%;
}

.bg-pin {
  position: absolute;
  width: 100%;
  height: 100%;
}
.bg-pin svg {
  position: absolute;
  width: 100vw;
  height: 100%;
  opacity: 0.01;
  top: 0;
}

.title-sectionpin {
  display: none;
}

@media (max-width: 1000px) {
  #sectionPin {
    justify-content: flex-start;
    align-items: start;
    padding-top: 20px;
  }
  .pin-wrap {
    height: 400px;
    justify-content: flex-start;
    align-items: start;
  }
  .title-sectionpin {
    display: block;
  }
  .panel-info {
    display: none;
  }
}
.h-auto {
  height: auto;
}

.image-digital {
  opacity: 0;
  position: absolute;
  right: 5%;
  top: 20px;
  width: 65%;
}
@media (min-width: 1280px) {
  .image-digital {
    right: 7em;
    top: 100px;
    width: 35%;
  }
}
.image-digital img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.container-color {
  position: relative;
  z-index: 10;
  background-color: #0E0E11;
}

.video-wrap {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.video-wrap--show {
  pointer-events: auto;
}

.video-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  background: black;
}

.video-wrap--show .video-inner {
  opacity: 1;
}

.video-player {
  position: fixed;
  top: 50%;
  width: 100%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.video-loaded .loader {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.video-loaded .action--play {
  opacity: 1;
  pointer-events: auto;
}

.action--close {
  line-height: 1;
  position: fixed;
  z-index: 1000;
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  opacity: 0;
  background: transparent;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: scale3d(0.7, 0.7, 1);
  transform: scale3d(0.7, 0.7, 1);
  cursor: pointer;
}

.action--close svg {
  width: 30px;
  height: 30px;
}

.video-wrap--show .action--close {
  opacity: 1;
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

@media screen and (min-width: 25em) {
  .video-inner {
    width: 0vw;
    height: 100vh;
  }
  .video-wrap--show .video-inner {
    opacity: 0;
    -webkit-animation: showVideo-1 0.5s ease forwards;
    animation: showVideo-1 0.5s ease forwards;
  }
  .video-wrap--hide .video-inner {
    -webkit-animation: hideVideo 0.5s ease forwards;
    animation: hideVideo 0.5s ease forwards;
  }
  .video-player {
    left: 50%;
    width: auto;
    height: 100vh;
    opacity: 0;
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  .video-wrap--show .video-player,
  .video-wrap--hide .video-player {
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  .video-wrap--show .video-player {
    opacity: 1;
    -webkit-transition: opacity 1.5s 1s ease;
    transition: opacity 1.5s 1s ease;
  }
  .video-wrap--hide .video-player {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
}
@media screen and (min-width: 25em) and (min-aspect-ratio: 1280/720) {
  .video-inner {
    width: 0vw;
    height: 30vh;
  }
  .video-wrap--show .video-inner {
    -webkit-animation: showVideo-2 0.5s forwards;
    animation: showVideo-2 0.5s forwards;
  }
  .video-player {
    width: 70vw;
    height: auto;
  }
}
@-webkit-keyframes showVideo-1 {
  0% {
    width: 0vw;
    height: 100vh;
    opacity: 0;
  }
  100% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
}
@keyframes showVideo-1 {
  0% {
    width: 0vw;
    height: 100vh;
    opacity: 0;
  }
  100% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
}
@-webkit-keyframes showVideo-2 {
  0% {
    width: 0vw;
    height: 100vh;
    opacity: 1;
  }
  100% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
}
@keyframes showVideo-2 {
  0% {
    width: 0vw;
    height: 100vh;
    opacity: 1;
  }
  100% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
}
/* Animation for hiding the video wrapper */
@-webkit-keyframes hideVideo {
  0% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
  100% {
    width: 0vw;
    height: 100vh;
    opacity: 0;
  }
}
@keyframes hideVideo {
  0% {
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
  100% {
    width: 0vw;
    height: 100vh;
    opacity: 0;
  }
}
@media (min-width: 1px) {
  .ptr-64 {
    padding-top: 32px;
  }
  .ptr-120 {
    padding-top: 64px;
  }
  .ptr-128 {
    padding-top: 64px;
  }
}
@media (min-width: 768px) {
  .ptr-64 {
    padding-top: 32px;
  }
  .ptr-120 {
    padding-top: 64px;
  }
  .ptr-128 {
    padding-top: 64px;
  }
}
@media (min-width: 1000px) {
  .ptr-64 {
    padding-top: 64px;
  }
  .ptr-120 {
    padding-top: 120px;
  }
  .ptr-128 {
    padding-top: 128px;
  }
}
@media (min-width: 1280px) {
  .ptr-64 {
    padding-top: 64px;
  }
  .ptr-120 {
    padding-top: 120px;
  }
  .ptr-128 {
    padding-top: 128px;
  }
}
@media (min-width: 1px) {
  .pl-body {
    padding-left: 20px;
  }
}
@media (min-width: 768px) {
  .pl-body {
    padding-left: 20px;
  }
}
@media (min-width: 1000px) {
  .pl-body {
    padding-left: 40px;
  }
}
@media (min-width: 1280px) {
  .pl-body {
    padding-left: 40px;
  }
}
@media (min-width: 1px) {
  .pbr-24 {
    padding-bottom: 16px;
  }
  .pbr-32 {
    padding-bottom: 24px;
  }
  .pbr-64 {
    padding-bottom: 32px;
  }
  .pbr-128 {
    padding-bottom: 64px;
  }
}
@media (min-width: 768px) {
  .pbr-24 {
    padding-bottom: 16px;
  }
  .pbr-32 {
    padding-bottom: 24px;
  }
  .pbr-64 {
    padding-bottom: 32px;
  }
  .pbr-128 {
    padding-bottom: 64px;
  }
}
@media (min-width: 1000px) {
  .pbr-24 {
    padding-bottom: 24px;
  }
  .pbr-32 {
    padding-bottom: 32px;
  }
  .pbr-64 {
    padding-bottom: 64px;
  }
  .pbr-128 {
    padding-bottom: 128px;
  }
}
@media (min-width: 1280px) {
  .pbr-24 {
    padding-bottom: 24px;
  }
  .pbr-32 {
    padding-bottom: 32px;
  }
  .pbr-64 {
    padding-bottom: 64px;
  }
  .pbr-128 {
    padding-bottom: 128px;
  }
}
@media (min-width: 1px) {
  .pr-body {
    padding-right: 20px;
  }
}
@media (min-width: 768px) {
  .pr-body {
    padding-right: 20px;
  }
}
@media (min-width: 1000px) {
  .pr-body {
    padding-right: 40px;
  }
}
@media (min-width: 1280px) {
  .pr-body {
    padding-right: 40px;
  }
}
@media (min-width: 1px) {
  .mbr-24 {
    margin-bottom: 16px;
  }
  .mbr-32 {
    margin-bottom: 24px;
  }
  .mbr-64 {
    margin-bottom: 32px;
  }
  .mbr-128 {
    margin-bottom: 64px;
  }
}
@media (min-width: 768px) {
  .mbr-24 {
    margin-bottom: 24px;
  }
  .mbr-32 {
    margin-bottom: 32px;
  }
  .mbr-64 {
    margin-bottom: 64px;
  }
  .mbr-128 {
    margin-bottom: 128px;
  }
}
@media (min-width: 1000px) {
  .mbr-24 {
    margin-bottom: 24px;
  }
  .mbr-32 {
    margin-bottom: 32px;
  }
  .mbr-64 {
    margin-bottom: 64px;
  }
  .mbr-128 {
    margin-bottom: 128px;
  }
}
@media (min-width: 1280px) {
  .mbr-24 {
    margin-bottom: 24px;
  }
  .mbr-32 {
    margin-bottom: 32px;
  }
  .mbr-64 {
    margin-bottom: 64px;
  }
  .mbr-128 {
    margin-bottom: 128px;
  }
}
.height-xs {
  min-height: 80px;
}

@media (min-width: 768px) {
  .height-xs {
    min-height: 80px;
  }
}
.height-sm {
  min-height: 100px;
}

@media (min-width: 768px) {
  .height-sm {
    min-height: 100px;
  }
}
.height-128 {
  min-height: 128px;
}

@media (min-width: 768px) {
  .height-128 {
    min-height: 128px;
  }
}
.height-md {
  min-height: 350px;
}

@media (min-width: 768px) {
  .height-md {
    min-height: 350px;
  }
}
.height-lg {
  min-height: 400px;
}

@media (min-width: 768px) {
  .height-lg {
    min-height: 400px;
  }
}
.height-xl {
  min-height: 450px;
}

@media (min-width: 768px) {
  .height-xl {
    min-height: 450px;
  }
}
.height-full {
  min-height: 50vh;
}
@media (min-width: 768px) {
  .height-full {
    min-height: 100vh;
  }
}

.height-full-xs {
  min-height: 100vh;
}
@media (min-width: 768px) {
  .height-full-xs {
    min-height: 100vh;
  }
}

.height-big {
  min-height: 300px;
}

@media (min-width: 768px) {
  .height-big {
    min-height: 500px;
  }
}
.height-medium {
  min-height: 200px;
}

@media (min-width: 768px) {
  .height-medium {
    min-height: 400px;
  }
}
.height-mini {
  min-height: 100px;
}

@media (min-width: 768px) {
  .height-mini {
    min-height: 300px;
  }
}
.height-home {
  min-height: calc(100dvh - 80px);
}

@media (min-width: 768px) {
  .height-home {
    min-height: calc(100dvh - 80px);
  }
}
.servicios-incluidos {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #d6134f;
}

.lista-servicios {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-servicios li {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lista-servicios li:last-child {
  border-bottom: none;
}
.lista-servicios li:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d6134f;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 6px;
}

.boton-servicio {
  text-align: center;
  margin-top: 24px;
}

.btn-servicio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #d6134f 0%, #ff1744 100%);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.btn-servicio:hover {
  background: linear-gradient(135deg, #ff1744 0%, #d6134f 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(214, 19, 79, 0.3);
  color: white;
  text-decoration: none;
}
.btn-servicio:active {
  transform: translateY(0);
}
.btn-servicio svg {
  transition: transform 0.3s ease;
}
.btn-servicio:hover svg {
  transform: translateX(4px);
}

.servicios-incluidos.avanzado {
  border-left: 4px solid #ff6b35;
  background: rgba(255, 107, 53, 0.05);
  position: relative;
}
.servicios-incluidos.avanzado:before {
  content: "PREMIUM";
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

.btn-avanzado {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}
.btn-avanzado:hover {
  background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

@keyframes punto {
  from {
    stroke-dashoffset: 280;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes punto2 {
  from {
    stroke-dashoffset: 145;
    -webkit-animation-fill-mode: forwards;
    /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
  }
  to {
    stroke-dashoffset: 0;
  }
}
html {
  scroll-behavior: smooth;
}

body {
  height: 100dvh;
}

.has-scroll-smooth body,
html.has-scroll-smooth {
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.input,
.textarea,
.select select {
  background-color: transparent;
  border-color: #e3e3e3;
  color: #fff;
  max-width: 100%;
  width: 100%;
  font-size: 16px;
  line-height: 1;
}

ul.list-clear li {
  list-style: none;
  margin: 8px 0;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 100;
  height: 60px;
  transition: all ease 0.3s;
  display: flex;
  align-items: center;
}
@media (min-width: 1000px) {
  header {
    padding-bottom: 0;
    height: 120px;
  }
}

.front-section {
  z-index: 12;
  position: relative;
}

.front-section-2 {
  z-index: 18;
  position: relative;
}

@media (max-width: 767px) {
  .height-full-2 {
    min-height: 0;
    padding-top: 80px;
    padding-bottom: 70px;
  }
}
@media (min-width: 768px) {
  .height-full-2 {
    min-height: 80vh;
  }
}
@media (min-width: 1000px) {
  .height-full-2 {
    min-height: 100dvh;
  }
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  z-index: 1000;
  pointer-events: none;
}
.loading-container .loading-screen {
  text-transform: capitalize;
  position: relative;
  padding-right: 0;
  padding-top: 0;
  background-color: #f70154;
  width: 0%;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-content: center;
  align-items: center;
}

.bg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: #f70154;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer {
  color: #0E0E11;
  position: relative;
  z-index: 1;
}
.footer .hover-line {
  background-color: #000;
}

.pined {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media (min-width: 768px) {
  .text-block {
    max-width: 400px;
  }
}

.text-block-center {
  margin: 0 auto;
  max-width: 600px;
}

.vertical-reveal-inner.visible {
  animation: 1.5s verticalReveal 1 cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}

.vertical-reveal-outer {
  overflow: hidden;
}

[class*=anim-wrap-] {
  overflow: hidden;
  position: relative;
}

[class*=anim-wrap] .anim-text {
  position: absolute;
  left: 0;
}

.menu-desktop {
  color: white;
}

.container {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: 0;
  margin-left: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .container {
    padding-right: 24px;
    padding-left: 24px;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .container {
    padding-right: 7em;
    padding-left: 7em;
    width: 100%;
    max-width: 100%;
  }
}

.container-hero {
  padding-left: 24px;
  padding-right: 24px;
  margin-right: 0;
  margin-left: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .container-hero {
    padding-right: 24px;
    padding-left: 24px;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1000px) {
  .container-hero {
    padding-right: 7em;
    padding-left: 7em;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .container-hero {
    width: 100%;
    max-width: 100%;
  }
}

.container-proyecto {
  padding: 0em 24px 4em 24px;
  margin-right: 0;
  margin-left: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .container-proyecto {
    margin: 0 auto;
    padding-right: 24px;
    padding-left: 24px;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1000px) {
  .container-proyecto {
    padding-right: 7em;
    padding-left: 7em;
    width: 100%;
    max-width: 100%;
  }
}
@media (min-width: 1280px) {
  .container-proyecto {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    max-width: 1280px;
  }
}

.height-full-rd {
  min-height: auto;
}
@media (min-width: 1000px) {
  .height-full-rd {
    min-height: 100dvh;
  }
}

.fluid-300-b {
  letter-spacing: -31px;
}

.loading-screen h2 {
  filter: invert(1);
  opacity: 0.2;
}

b,
.bold {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  color: #f70154;
}

.out- {
  overflow: hidden;
  position: relative;
  z-index: 10;
  width: 100%;
}

.in- {
  transform: translateY(100px);
  opacity: 0;
}

#image-to-load {
  display: none;
}

.no-wrap {
  white-space: nowrap;
}

.link-line.has-light {
  background-image: linear-gradient(transparent calc(100% - 1px), #ffffff 10px);
}

.darkmode {
  transition: all ease 0.3s;
  color: #ffffff;
}
.darkmode .link-line {
  background-image: linear-gradient(transparent calc(100% - 1px), #ffffff 10px);
}
.darkmode a {
  transition: all ease 0.3s;
  color: #ffffff;
}

.lightmode {
  transition: all ease 0.3s;
  color: #0E0E11;
}
.lightmode .link-line {
  background-image: linear-gradient(transparent calc(100% - 1px), #0E0E11 10px);
}
.lightmode a {
  transition: all ease 0.3s;
  color: #0E0E11;
}
.lightmode .kv-block11-num:after {
  background-color: #0E0E11;
}

.client-zone {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.client-zone figure {
  width: 50%;
  min-width: 120px;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 768px) {
  .client-zone figure {
    -ms-flex-pack: center;
    justify-content: center;
    width: 30%;
  }
}
@media (min-width: 1000px) {
  .client-zone {
    min-height: 80vh;
    margin-bottom: 160px;
  }
  .client-zone figure:nth-child(4n+1) {
    width: 20%;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .client-zone figure:nth-child(4n) {
    width: 20%;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}
.client-zone .imglogo {
  width: 60%;
  height: 80px;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.27s cubic-bezier(0.12, 0.51, 0.49, 0.88);
  transform: translate3d(0, 80px, 0);
}
@media (min-width: 1000px) {
  .client-zone .imglogo {
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
  }
}

.img-wrap,
.img-wrap .img-inner {
  width: 100%;
  height: 100%;
  background-position: 0 0;
  z-index: 5;
}

.img-wrap {
  background-size: initial;
}

.img-wrap .img-inner {
  position: absolute;
  right: 0;
  transform: translateY(100%);
  opacity: 0;
  background-size: cover;
}

.section-footer {
  position: relative;
  z-index: 9;
  height: 100dvh;
  padding: 8em 7em 0 7em;
}
@media screen and (max-width: 1000px) {
  .section-footer {
    padding: 6em 24px 4em 24px;
  }
}

.hover-line {
  width: 0;
  height: 2px;
  background-color: #fff;
  margin-top: 10px;
  transition: 0.3s ease all;
}
.opened .hover-line {
  transition-delay: 1.5s;
  width: 100%;
}

.column-timeline-wrap:hover {
  color: #3f3f3f;
  transition: all 0.2s ease;
}
.column-timeline-wrap:hover .tag-btn {
  transition: all 0.2s ease;
  border: 1px solid #3f3f3f;
}

.column-timeline-wrap-about:hover {
  color: #3f3f3f;
  transition: all 0.2s ease;
}
.column-timeline-wrap-about:hover .tag-btn {
  transition: all 0.2s ease;
  border: 1px solid #3f3f3f;
}

.column-timeline {
  position: relative;
}
.column-timeline:hover {
  color: #ffffff;
}
.column-timeline:hover .tag-btn {
  border: 1px solid #ffffff;
}
.column-timeline .column-grid {
  width: 100%;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 0.5fr 1fr;
  /* Cambiamos a dos columnas */
  grid-auto-rows: minmax(100px, auto);
  align-items: center;
  display: grid;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all 0.2s ease;
  overflow: hidden;
}
@media (max-width: 1000px) {
  .column-timeline .column-grid > div:nth-child(3) .tag-btn {
    border: none;
    padding: 0;
    padding-right: 8px;
    min-width: 0;
  }
}
@media (min-width: 1000px) {
  .column-timeline .column-grid {
    grid-template-columns: 0.25fr 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .column-timeline .column-grid > div:nth-child(3) {
    text-align: end;
  }
}
.column-timeline .line-w {
  width: 100%;
  height: 1px;
  background-color: #8a8a8a;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.column-timeline .line-w:after {
  left: 0;
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  background-color: #fff;
  transition: 0.6s ease all;
}
.column-timeline .column-img {
  width: 200px;
  margin-right: 16px;
  overflow: hidden;
}
.column-timeline .column-img img {
  transition: 0.6s ease all;
  transform: scale(1.1);
  opacity: 0.2;
}
.column-timeline .tag-btn {
  padding: 8px 8px;
  border: 1px solid #8a8a8a;
  display: block;
  border-radius: 50px;
  min-width: 70px;
  text-align: center;
  margin-right: 8px;
  font-size: 12px;
}
@media (min-width: 1000px) {
  .column-timeline .tag-btn {
    text-align: center;
    display: inline-block;
  }
}
.column-timeline:hover {
  cursor: pointer;
}
.column-timeline:hover .line-w {
  position: relative;
}
.column-timeline:hover .line-w:after {
  left: 0;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
}

.link-line {
  color: #f70154;
}

.c-accent {
  color: #f70154;
}
.darkmode .c-accent {
  color: #f70154;
  background-image: linear-gradient(transparent calc(100% - 1px), #f70154 10px);
}

.boxer {
  width: 2vw;
  height: 2vw;
  background-color: #f70154;
  position: absolute;
  right: -1vw;
  border-radius: 50%;
  bottom: 0;
}
@media (min-width: 768px) {
  .boxer {
    width: 1vw;
    height: 1vw;
  }
}

.experiment-bg {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 260px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}
@media (max-width: 1000px) {
  .experiment-bg {
    opacity: 0.1;
  }
}

.especial {
  position: relative;
}
@media (max-width: 1000px) {
  .especial .pin-wrap {
    padding-left: 24px;
  }
}

.is-interior {
  background-color: #000;
}

.mini-titulo {
  color: #535353;
  font-size: 15px;
  font-style: normal;
  line-height: 33.773px;
  letter-spacing: 13px;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.init-body {
  overflow: hidden;
}

.image-mobile {
  position: absolute;
  width: 100%;
  right: 0;
  overflow: hidden;
}
.image-mobile img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.hero-home {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 30%;
  flex-direction: column;
}
@media (min-width: 768px) {
  .hero-home {
    display: flex;
    justify-content: center;
    padding: 0;
  }
}

.mask-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
}
.mask-wrap div {
  height: 25%;
}

.scrolled header {
  background-color: #ffffff;
  height: 90px;
}
@media (min-width: 1000px) {
  .scrolled header {
    height: 120px;
  }
}
.scrolled header a {
  color: #0E0E11;
}
.scrolled header svg path {
  fill: #0E0E11;
}
.scrolled header .height-md {
  min-height: 150px;
}
.scrolled .header-top {
  height: 200px;
}

.loading-pad {
  padding-left: 2em;
}
@media (min-width: 1000px) {
  .loading-pad {
    padding-left: 7em;
  }
}

.separator {
  width: 40px;
  height: 2px;
  background-color: #f70154;
}

.minititle {
  position: relative;
  font-family: "font-regular", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 5px;
  padding-left: 0px;
  transition: all 0.5s ease;
}
.minititle::before {
  content: "";
  top: 5px;
  position: absolute;
  left: 0;
  width: 0px;
  height: 2px;
  background-color: #f70154;
  transition: all 0.5s ease;
}

.opened .minititle {
  padding-left: 55px;
}
.opened .minititle::before {
  width: 50px;
}
.opened .text-box {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bg-hero {
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.hero_3 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.hero_3 .hero_3_inner {
  float: left;
  width: 24.264706%;
  border-radius: 2vw;
  overflow: hidden;
  z-index: 12;
  display: flex;
  align-items: flex-end;
}
.hero_3 .hero_3_inner img {
  height: auto;
  display: block;
  max-width: 100%;
}
.hero_3.hero_3_shadows .hero_3_inner {
  overflow: hidden;
  border: 0.26vw solid #000;
  box-shadow: -3.33333vw 3.33333vw 4vw rgba(0, 0, 0, 0.35);
}

.hero_1,
.hero_video {
  display: flex;
  justify-content: center;
}
.hero_1 .hero_1_inner,
.hero_video .hero_1_inner {
  border-radius: 2vw;
  overflow: hidden;
  z-index: 12;
}
.hero_1.hero_1_shadows .hero_1_inner,
.hero_video.hero_1_shadows .hero_1_inner {
  overflow: hidden;
  border: 0.26vw solid #000;
  box-shadow: -3.33333vw 3.33333vw 4vw rgba(0, 0, 0, 0.35);
}

.hero_video img {
  height: auto;
  display: block;
  max-width: initial;
  width: 100%;
  height: 100%;
  z-index: 11;
  object-fit: cover;
  position: absolute;
  left: 0;
}

.pagination {
  width: 100%;
  height: 200px;
  margin: 0 auto;
}
.pagination a {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  opacity: 1;
  display: flex;
  align-content: center;
  align-items: center;
}
.pagination a:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.2);
}
.pagination img {
  filter: grayscale(1);
  transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.3;
  transform: scale(1);
}

.pagination-inner {
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
  background-color: #0E0E11;
}
.pagination-inner div {
  color: #fff;
  opacity: 0.7;
}

.pagination-prev {
  float: left;
}
.pagination-prev div {
  position: absolute;
  left: 20px;
  z-index: 20;
}

.pagination-next {
  float: right;
}
.pagination-next div {
  position: absolute;
  right: 20px;
  z-index: 20;
}

.bg-logo {
  position: relative;
  width: 300px;
  height: 95px;
}

.bg-logo-svg {
  width: 70px;
  height: 70px;
  left: calc(50% - 35px);
}
.bg-logo-svg .path1 {
  fill: #f70154;
  stroke: #ffffff;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: punto 3s ease forwards alternate;
}
.bg-logo-svg .path2 {
  fill: #f70154;
  stroke: #ffffff;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: punto2 2s ease forwards alternate;
  animation-delay: 1.5s;
}

.bg-logo-name {
  position: relative;
  overflow: hidden;
  height: 93px;
  color: white;
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
  font-size: 45px;
  line-height: 1;
  top: -8px;
  left: 27px;
}
.bg-logo-name .bg-logo-name-1 {
  position: absolute;
  left: -200px;
  opacity: 0;
}
.bg-logo-name .bg-logo-name-2 {
  opacity: 0;
  left: -200px;
  top: 37px;
  position: absolute;
}

.bg-logo-svg-full {
  position: absolute;
  width: 70px;
  height: 70px;
  opacity: 0;
}

.column-timeline-wrap-about .column-timeline {
  opacity: 0;
}
.column-timeline-wrap-about .column-timeline .timeline-img {
  width: 100%;
  max-width: 200px;
  margin-top: 16px;
  opacity: 1 !important;
  filter: grayscale(0) !important;
}
.column-timeline-wrap-about .column-timeline .timeline-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 1;
}
.column-timeline-wrap-about .column-timeline .mask-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.column-timeline-wrap-about .column-timeline:hover .mask-wrap {
  opacity: 1;
}
.column-timeline-wrap-about .column-timeline:hover .timeline-img {
  opacity: 1 !important;
  filter: grayscale(0) !important;
}

.opened .column-timeline-wrap-about .column-timeline:nth-child(1) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(2) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(3) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(4) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(5) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(6) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(7) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(8) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3.5s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(9) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 4s both;
}
.opened .column-timeline-wrap-about .column-timeline:nth-child(10) {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) 4.5s both;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  align-items: start;
  width: 100%;
}
@media (min-width: 1000px) {
  .grid-2 {
    width: 70%;
  }
}

.word {
  display: inline-flex;
}

.word-wrap {
  overflow: hidden;
  padding-bottom: 2vw;
}
@media (min-width: 1000px) {
  .word-wrap {
    padding-bottom: 1vw;
  }
}

.lineh-8 {
  line-height: 0.8;
}

.plr-16 {
  padding-left: 0px;
}
@media (min-width: 1000px) {
  .plr-16 {
    padding-left: 16px;
  }
}

.title-zone {
  pointer-events: none;
  width: calc(100vw - 2em);
}
@media (min-width: 1280px) {
  .title-zone {
    width: calc(100vw - 7em);
  }
}

.strong {
  font-family: "font-bold", Helvetica, "Arial ", "Lucida Grande", sans-serif;
  font-weight: inherit;
}

.video-full {
  width: 100%;
  height: 100%;
  display: block;
}

.video-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 15;
}

.z-12 {
  z-index: 12;
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.h-40 {
  height: 40vh;
}

.bg-logo-inner {
  background: #f70154;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  left: 100px;
  top: -7px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 12;
  flex-direction: row;
  flex-wrap: nowrap;
}

.bg-logo-square {
  width: 200px;
  height: 200px;
  position: absolute;
  background: #f70154;
  top: -50px;
  left: -121px;
  border-radius: 50%;
  z-index: 10;
}

.video-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: #292929;
  overflow: hidden;
}

.loop-project img {
  display: none;
}
.loop-project .img-wrap {
  display: none;
}

.p-none {
  pointer-events: none;
}

.l-14 {
  line-height: 1.4;
}

.loop-project canvas {
  position: absolute;
  top: 100%;
  transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1) all;
}

.opened .loop-project canvas {
  top: 0;
}

a:hover.o-1 {
  opacity: 1;
}

.play-icon {
  z-index: 10;
}

.imagewrap {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  backdrop-filter: blur(10px);
  z-index: 9;
}

.circle-wrap {
  position: absolute;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
}

.circle-text {
  position: absolute;
  width: 150px;
  height: 150px;
  animation: rotatetext 20s linear infinite;
}

.circle-logo {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

@keyframes rotatetext {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.circle-wrap {
  opacity: 0;
}

.opened .circle-wrap {
  animation: fadein 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.data-section-selector {
  text-transform: capitalize;
}

.circle-wrap-out {
  float: left;
  display: flex;
  position: relative;
  width: 250px;
  height: 250px;
  position: sticky;
  top: 50px;
  align-content: flex-start;
  justify-content: flex-start;
}

.accordion-wrap .accordion {
  overflow: hidden;
  transition: max-height 0.5s ease;
  max-height: 60px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.accordion-wrap .accordion.active {
  max-height: 300px;
  color: #ffffff;
}
.accordion-wrap .accordion-header {
  height: 40px;
  cursor: pointer;
}
.accordion-wrap.accordion-faqs .accordion {
  transition: max-height 0.3s ease;
  max-height: 44px;
}
.accordion-wrap.accordion-faqs .accordion.active {
  max-height: 300px;
}
.accordion-wrap.accordion-faqs .accordion.active .list-circle {
  border: 1px solid rgba(247, 247, 247, 0.3);
}