* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p { 
  margin-bottom: 0; 
  white-space: normal;
}

:root {

	/* colors */
	--black: #000000;
  --white: #FFFFFF;
  --grey: #706F6F;
  --light-grey: #F1F1F1;

  --color-1:#0070AD;
  --color-2:#006C47;

	/* spacings */
  --spacing-5: 0.5rem;
  --spacing-10: 1rem;
  --spacing-15: 1.5rem;
  --spacing-20: 2rem;
  --spacing-25: 2.5rem;
  --spacing-30: 3rem;
  --spacing-35: 3.5rem;
  --spacing-40: 4rem;
  --spacing-50: 5rem;
  --spacing-60: 6rem;
  --spacing-70: 7rem;
  --spacing-80: 8rem;
  --spacing-90: 9rem;
  --spacing-100: 10rem;
  --spacing-110: 11rem;
  --spacing-120: 12rem;
  --spacing-130: 12rem;
  --spacing-140: 14rem;
  --spacing-150: 15rem;
  --spacing-160: 16rem;
  --spacing-170: 17rem;
  --spacing-180: 18rem;
  --spacing-190: 19rem;
  --spacing-200: 20rem;
  --spacing-210: 21rem;
  --spacing-220: 22rem;
  --spacing-230: 23rem;
  --spacing-240: 24rem;
  --spacing-270: 27rem;
  --spacing-280: 28rem;

	/* spacings from theme */
	--horizontal-spacing-four-products-per-row: 2.5rem;
}

html,
body {
	color: var(--black);
	letter-spacing: 0 !important;
}

.list-unstyled {
	list-style: none;
	line-height: 1;
}

.ls-0 { letter-spacing: 0 !important; }

/* —————————————————— LAYOUT —————————————————— */

/* CONTAINERS */
.container-full-desktop {
	width: calc(100% - calc((var(--spacing-60))*2));
	margin: auto;
}

.container-narrow-desktop {
	width: calc(100% - 57.5rem);
	margin: auto;
}

@media only screen and (max-width: 480px) {

	.container-full-desktop,
	.container-narrow-desktop {
		width: calc(100% - calc((var(--spacing-20))*2));
		margin: auto;
	}
}

.w50 { width: 50%; }
.w75 { width: 75%; }
.w100 { width: 100%; }

.max-h-100 { max-height: 100vh; }
.h-100vh { height: 100vh; }

.AspectRatio img.ofit-cover { object-fit: cover !important; }

.lil-aspect-ratio img { object-fit: cover !important; }

.v-middle { vertical-align: middle; }

/* —————————————————— BACKGROUNDS —————————————————— */

.b-black { background-color: var(--black); }
.b-white { background-color: var(--white); }

.b-grey { background-color: var(--grey); }
.b-lightgrey { background-color: var(--light-grey); }

.b-color-1 { background-color: var(--color-1); }
.b-color-2 { background-color: var(--color-2); }



/* —————————————————— COLORS —————————————————— */

.c-black { color: var(--black); }
.c-white { color: var(--white); }

.c-grey { color: var(--grey); }
.c-lightgrey { color: var(--light-grey); }
.c-color-1 { color: var(--color-1); }
.c-color-2 { color: var(--color-1); }

/* —————————————————— FONTS —————————————————— */

.f-w-100{ font-weight:100; }
.f-w-200{ font-weight:200; }
.f-w-300{ font-weight:300; }
.f-w-400{ font-weight:400; }
.f-w-500{ font-weight:500; }
.f-w-600{ font-weight:600; }
.f-w-700{ font-weight:700; }
.f-w-800{ font-weight:800; }
.f-w-900{ font-weight:900; }

.t-lh-05 { line-height: 0.5 }
.t-lh-06 { line-height: 0.6 }
.t-lh-07 { line-height: 0.7 }
.t-lh-08 { line-height: 0.8 }
.t-lh-09 { line-height: 0.9 }
.t-lh-095 { line-height: 0.95 }
.t-lh-1 { line-height: 1 }
.t-lh-11 { line-height: 1.1 }
.t-lh-12 { line-height: 1.2 }
.t-lh-125 { line-height: 1.25 }
.t-lh-13 { line-height: 1.3 }
.t-lh-14 { line-height: 1.4 }
.t-lh-15 { line-height: 1.5 }
.t-lh-16 { line-height: 1.6 }
.t-lh-17 { line-height: 1.7 }
.t-lh-18 { line-height: 1.8 }
.t-lh-19 { line-height: 1.9 }

@media only screen and (max-width: 480px) {
  .t-m-lh-05 { line-height: 0.5 }
  .t-m-lh-06 { line-height: 0.6 }
  .t-m-lh-07 { line-height: 0.7 }
  .t-m-lh-08 { line-height: 0.8 }
  .t-m-lh-09 { line-height: 0.9 }
  .t-m-lh-095 { line-height: 0.95 }
  .t-m-lh-1 { line-height: 1 }
  .t-m-lh-11 { line-height: 1.1 }
  .t-m-lh-12 { line-height: 1.2 }
  .t-m-lh-125 { line-height: 1.25 }
  .t-m-lh-13 { line-height: 1.3 }
  .t-m-lh-14 { line-height: 1.4 }
  .t-m-lh-15 { line-height: 1.5 }
  .t-m-lh-16 { line-height: 1.6 }
  .t-m-lh-17 { line-height: 1.7 }
  .t-m-lh-18 { line-height: 1.8 }
  .t-m-lh-19 { line-height: 1.9 }
}

/* —————————————————— TEXT STYLES (DESK) —————————————————— */

body {
	font-size: 1.4rem;
	line-height: 1.5;
}

.fs-10{ font-size:1.0rem; }
.fs-11{ font-size:1.1rem; }
.fs-12{ font-size:1.2rem; }
.fs-13{ font-size:1.3rem; }
.fs-14{ font-size:1.4rem; }
.fs-15{ font-size:1.5rem; }
.fs-16{ font-size:1.6rem; }
.fs-18{ font-size:1.8rem; }
.fs-19{ font-size:1.9rem; }
.fs-20{ font-size:2rem; }
.fs-21{ font-size:2.1rem; }
.fs-22{ font-size:2.2rem; }
.fs-23{ font-size:2.3rem; }
.fs-24{ font-size:2.4rem; }
.fs-25{ font-size:2.5rem; }
.fs-26{ font-size:2.6rem; }
.fs-27{ font-size:2.7rem; }
.fs-28{ font-size:2.8rem; }
.fs-29{ font-size:2.9rem; }
.fs-30{ font-size:3rem; }
.fs-31{ font-size:3.1rem; }
.fs-32{ font-size:3.2rem; }
.fs-33{ font-size:3.3rem; }
.fs-34{ font-size:3.4rem; }
.fs-35{ font-size:3.5rem; }
.fs-36{ font-size:3.6rem; }
.fs-40{ font-size:4rem; }
.fs-42{ font-size:4.2rem; }
.fs-48{ font-size:4.8rem; }
.fs-50{ font-size:5rem; }
.fs-51{ font-size:5.1rem; }
.fs-52{ font-size:5.2rem; }
.fs-53{ font-size:5.3rem; }
.fs-54{ font-size:5.4rem; }
.fs-55{ font-size:5.5rem; }
.fs-56{ font-size:5.6rem; }
.fs-57{ font-size:5.7rem; }
.fs-58{ font-size:5.8rem; }
.fs-59{ font-size:5.9rem; }
.fs-60{ font-size:6rem; }
.fs-61{ font-size:6.1rem; }
.fs-62{ font-size:6.2rem; }
.fs-63{ font-size:6.3rem; }
.fs-64{ font-size:6.4rem; }
.fs-65{ font-size:6.5rem; }
.fs-70{ font-size:7rem; }
.fs-72{ font-size:7.2rem; }
.fs-75{ font-size:7.5rem; }
.fs-80{ font-size:8rem; }
.fs-94{ font-size:9.4rem; }
.fs-96{ font-size:9.6rem; }
.fs-100{ font-size:10rem; }
.fs-110{ font-size:11rem; }
.fs-130{ font-size:13rem; }
.fs-140{ font-size:14rem; }
.fs-150{ font-size:15rem; }
.fs-160{ font-size:16rem; }
.fs-190{ font-size:19rem; }

.fs-300{ font-size:30rem; }

/* —————————————————— TEXT STYLES (MOB) —————————————————— */
@media only screen and (max-width: 480px) {

  body {
	font-size: 1.3rem;
  	line-height: 1.5;
  }

  .fs-m-10{ font-size:1.0rem; }
  .fs-m-11{ font-size:1.1rem; }
  .fs-m-12{ font-size:1.2rem; }
  .fs-m-13{ font-size:1.3rem; }
  .fs-m-14{ font-size:1.4rem; }
  .fs-m-15{ font-size:1.5rem; }
  .fs-m-16{ font-size:1.6rem; }
  .fs-m-18{ font-size:1.8rem; }
  .fs-m-19{ font-size:1.9rem; }
  .fs-m-20{ font-size:2rem; }
  .fs-m-21{ font-size:2.1rem; }
  .fs-m-22{ font-size:2.2rem; }
  .fs-m-23{ font-size:2.3rem; }
  .fs-m-24{ font-size:2.4rem; }
  .fs-m-25{ font-size:2.5rem; }
  .fs-m-26{ font-size:2.6rem; }
  .fs-m-27{ font-size:2.7rem; }
  .fs-m-28{ font-size:2.8rem; }
  .fs-m-29{ font-size:2.9rem; }
  .fs-m-30{ font-size:3rem; }
  .fs-m-31{ font-size:3.1rem; }
  .fs-m-32{ font-size:3.2rem; }
  .fs-m-33{ font-size:3.3rem; }
  .fs-m-34{ font-size:3.4rem; }
  .fs-m-35{ font-size:3.5rem; }
  .fs-m-36{ font-size:3.6rem; }
  .fs-m-40{ font-size:4rem; }
  .fs-m-41{ font-size:4.1rem; }
  .fs-m-42{ font-size:4.2rem; }
  .fs-m-48{ font-size:4.8rem; }
  .fs-m-50{ font-size:5rem; }
  .fs-m-60{ font-size:6rem; }
  .fs-m-61{ font-size:6.1rem; }
  .fs-m-62{ font-size:6.2rem; }
  .fs-m-63{ font-size:6.3rem; }
  .fs-m-64{ font-size:6.4rem; }
  .fs-m-65{ font-size:6.5rem; }
  .fs-m-70{ font-size:7rem; }
  .fs-m-72{ font-size:7.2rem; }
  .fs-m-75{ font-size:7.5rem; }
  .fs-m-80{ font-size:8rem; }
  .fs-m-94{ font-size:9.4rem; }
  .fs-m-96{ font-size:9.6rem; }
  .fs-m-100{ font-size:10rem; }
  .fs-m-110{ font-size:11rem; }
  .fs-m-130{ font-size:13rem; }
  .fs-m-140{ font-size:14rem; }
  .fs-m-150{ font-size:15rem; }
  .fs-m-160{ font-size:16rem; }
  .fs-m-190{ font-size:19rem; }

}

/* —————————————————— MARGINS / PADDINGS —————————————————— */
.p-0 { padding: 0; }
.p-5 { padding: var(--spacing-5); }
.p-10 { padding: var(--spacing-10); }
.p-15 { padding: var(--spacing-15); }
.p-20 { padding: var(--spacing-20); }
.p-30 { padding: var(--spacing-30); }
.p-40 { padding: var(--spacing-40); }
.p-50 { padding: var(--spacing-50); }
.p-60 { padding: var(--spacing-60); }
.p-80 { padding: var(--spacing-80); }
.p-90 { padding: var(--spacing-90); }
.p-100 { padding: var(--spacing-100); }
.p-120 { padding: var(--spacing-120); }
.p-150 { padding: var(--spacing-150); }
.p-180 { padding: var(--spacing-180); }
.p-200 { padding: var(--spacing-200); }
.p-240 { padding: var(--spacing-240); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.py-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
.py-35 { padding-top: var(--spacing-35); padding-bottom: var(--spacing-35); }
.py-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
.py-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
.py-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
.py-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
.py-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
.py-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }


.px-0 { padding-right: 0; padding-left: 0; }
.px-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
.px-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
.px-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
.px-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
.px-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
.px-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
.px-50 { padding-right: var(--spacing-50); padding-left: var(--spacing-50); }
.px-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
.px-70 { padding-right: var(--spacing-70); padding-left: var(--spacing-70); }
.px-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
.px-90 { padding-right: var(--spacing-90); padding-left: var(--spacing-90); }
.px-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
.px-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
.px-140 { padding-right: var(--spacing-140); padding-left: var(--spacing-140); }
.px-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }


.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-10 { padding-bottom: var(--spacing-10); }
.pb-15 { padding-bottom: var(--spacing-15); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-30 { padding-bottom: var(--spacing-30); }
.pb-40 { padding-bottom: var(--spacing-40); }
.pb-50 { padding-bottom: var(--spacing-50); }
.pb-60 { padding-bottom: var(--spacing-60); }
.pb-70 { padding-bottom: var(--spacing-70); }
.pb-80 { padding-bottom: var(--spacing-80); }
.pb-90 { padding-bottom: var(--spacing-90); }
.pb-100 { padding-bottom: var(--spacing-100); }
.pb-110 { padding-bottom: var(--spacing-110); }
.pb-120 { padding-bottom: var(--spacing-120); }
.pb-130 { padding-bottom: var(--spacing-130); }
.pb-140 { padding-bottom: var(--spacing-140); }
.pb-150 { padding-bottom: var(--spacing-150); }
.pb-180 { padding-bottom: var(--spacing-180); }
.pb-200 { padding-bottom: var(--spacing-200); }
.pb-240 { padding-bottom: var(--spacing-240); }

.pt-0 { padding-top: 0; }
.pt-5 { padding-top: var(--spacing-5); }
.pt-10 { padding-top: var(--spacing-10); }
.pt-15 { padding-top: var(--spacing-15); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-30 { padding-top: var(--spacing-30); }
.pt-40 { padding-top: var(--spacing-40); }
.pt-50 { padding-top: var(--spacing-50); }
.pt-60 { padding-top: var(--spacing-60); }
.pt-70 { padding-top: var(--spacing-70); }
.pt-80 { padding-top: var(--spacing-80); }
.pt-90 { padding-top: var(--spacing-90); }
.pt-100 { padding-top: var(--spacing-100); }
.pt-110 { padding-top: var(--spacing-110); }
.pt-120 { padding-top: var(--spacing-120); }
.pt-130 { padding-top: var(--spacing-130); }
.pt-140 { padding-top: var(--spacing-140); }
.pt-150 { padding-top: var(--spacing-150); }
.pt-180 { padding-top: var(--spacing-180); }
.pt-190 { padding-top: var(--spacing-190); }
.pt-200 { padding-top: var(--spacing-200); }
.pt-210 { padding-top: var(--spacing-210); }
.pt-220 { padding-top: var(--spacing-220); }
.pt-230 { padding-top: var(--spacing-230); }
.pt-240 { padding-top: var(--spacing-240); }


.pl-0 { padding-left: 0; }
.pl-5 { padding-left: var(--spacing-5); }
.pl-10 { padding-left: var(--spacing-10); }
.pl-15 { padding-left: var(--spacing-15); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-30 { padding-left: var(--spacing-30); }
.pl-40 { padding-left: var(--spacing-40); }
.pl-50 { padding-left: var(--spacing-50); }
.pl-60 { padding-left: var(--spacing-60); }
.pl-70 { padding-left: var(--spacing-70); }
.pl-80 { padding-left: var(--spacing-80); }
.pl-100 { padding-left: var(--spacing-100); }
.pl-120 { padding-left: var(--spacing-120); }
.pl-130 { padding-left: var(--spacing-130); }
.pl-140 { padding-left: var(--spacing-140); }
.pl-150 { padding-left: var(--spacing-150); }
.pl-240 { padding-left: var(--spacing-240); }

.pr-0 { padding-right: 0; }
.pr-5 { padding-right: var(--spacing-5); }
.pr-10 { padding-right: var(--spacing-10); }
.pr-15 { padding-right: var(--spacing-15); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-30 { padding-right: var(--spacing-30); }
.pr-40 { padding-right: var(--spacing-40); }
.pr-60 { padding-right: var(--spacing-60); }
.pr-80 { padding-right: var(--spacing-80); }
.pr-100 { padding-right: var(--spacing-100); }
.pr-120 { padding-right: var(--spacing-120); }
.pr-130 { padding-right: var(--spacing-130); }
.pr-140 { padding-right: var(--spacing-140); }
.pr-150 { padding-right: var(--spacing-150); }
.pr-240 { padding-right: var(--spacing-240); }


.my-0 { margin-top: 0; margin-bottom: 0; }
.my-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.my-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.my-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
.my-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
.my-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
.my-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.my-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
.my-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
.my-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }

.mx-0 { margin-right: 0; margin-left: 0; }
.mx-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
.mx-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
.mx-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
.mx-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
.mx-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
.mx-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
.mx-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
.mx-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
.mx-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
.mx-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
.mx-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }

.mx-auto { margin-left: auto; margin-right: auto; }

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-15 { margin-bottom: var(--spacing-15); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-30 { margin-bottom: var(--spacing-30); }
.mb-40 { margin-bottom: var(--spacing-40); }
.mb-50 { margin-bottom: var(--spacing-50); }
.mb-60 { margin-bottom: var(--spacing-60); }
.mb-70 { margin-bottom: var(--spacing-70); }
.mb-80 { margin-bottom: var(--spacing-80); }
.mb-90 { margin-bottom: var(--spacing-90); }
.mb-100 { margin-bottom: var(--spacing-100); }
.mb-120 { margin-bottom: var(--spacing-120); }
.mb-150 { margin-bottom: var(--spacing-150); }
.mb-180 { margin-bottom: var(--spacing-180); }
.mb-200 { margin-bottom: var(--spacing-200); }
.mb-240 { margin-bottom: var(--spacing-240); }


.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--spacing-5); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-15 { margin-top: var(--spacing-15); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-30 { margin-top: var(--spacing-30); }
.mt-40 { margin-top: var(--spacing-40); }
.mt-50 { margin-top: var(--spacing-50); }
.mt-60 { margin-top: var(--spacing-60); }
.mt-70 { margin-top: var(--spacing-70); }
.mt-80 { margin-top: var(--spacing-80); }
.mt-90 { margin-top: var(--spacing-90); }
.mt-100 { margin-top: var(--spacing-100); }
.mt-110 { margin-top: var(--spacing-110); }
.mt-120 { margin-top: var(--spacing-120); }
.mt-130 { margin-top: var(--spacing-130); }
.mt-140 { margin-top: var(--spacing-140); }
.mt-150 { margin-top: var(--spacing-150); }
.mt-160 { margin-top: var(--spacing-160); }
.mt-170 { margin-top: var(--spacing-170); }
.mt-180 { margin-top: var(--spacing-180); }
.mt-190 { margin-top: var(--spacing-190); }
.mt-200 { margin-top: var(--spacing-200); }
.mt-240 { margin-top: var(--spacing-240); }

.ml-0 { margin-left: 0; }
.ml-5 { margin-left: var(--spacing-5); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-15 { margin-left: var(--spacing-15); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-30 { margin-left: var(--spacing-30); }
.ml-40 { margin-left: var(--spacing-40); }
.ml-60 { margin-left: var(--spacing-60); }
.ml-80 { margin-left: var(--spacing-80); }
.ml-100 { margin-left: var(--spacing-100); }
.ml-120 { margin-left: var(--spacing-120); }
.ml-240 { margin-left: var(--spacing-240); }

.mr-0 { margin-right: 0; }
.mr-5 { margin-right: var(--spacing-5); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-15 { margin-right: var(--spacing-15); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-30 { margin-right: var(--spacing-30); }
.mr-40 { margin-right: var(--spacing-40); }
.mr-60 { margin-right: var(--spacing-60); }
.mr-70 { margin-right: var(--spacing-70); }
.mr-80 { margin-right: var(--spacing-80); }
.mr-100 { margin-right: var(--spacing-100); }
.mr-120 { margin-right: var(--spacing-120); }
.mr-150 { margin-right: var(--spacing-150); }
.mr-240 { margin-right: var(--spacing-240); }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

@media only screen and (max-width: 480px) {

    .p-m-0 { padding: 0; }
    .p-m-5 { padding: var(--spacing-5); }
    .p-m-10 { padding: var(--spacing-10); }
    .p-m-15 { padding: var(--spacing-15); }
    .p-m-20 { padding: var(--spacing-20); }
    .p-m-30 { padding: var(--spacing-30); }
    .p-m-40 { padding: var(--spacing-40); }
    .p-m-50 { padding: var(--spacing-50); }
    .p-m-60 { padding: var(--spacing-60); }
    .p-m-80 { padding: var(--spacing-80); }
    .p-m-90 { padding: var(--spacing-90); }
    .p-m-100 { padding: var(--spacing-100); }
    .p-m-120 { padding: var(--spacing-120); }
    .p-m-150 { padding: var(--spacing-150); }
    .p-m-180 { padding: var(--spacing-180); }
    .p-m-200 { padding: var(--spacing-200); }
    .p-m-240 { padding: var(--spacing-240); }

    .py-m-0 { padding-top: 0; padding-bottom: 0; }
    .py-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .py-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .py-m-15 { padding-top: var(--spacing-15); padding-bottom: var(--spacing-15); }
    .py-m-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
    .py-m-25 { padding-top: var(--spacing-25); padding-bottom: var(--spacing-25); }
    .py-m-30 { padding-top: var(--spacing-30); padding-bottom: var(--spacing-30); }
    .py-m-40 { padding-top: var(--spacing-40); padding-bottom: var(--spacing-40); }
    .py-m-60 { padding-top: var(--spacing-60); padding-bottom: var(--spacing-60); }
    .py-m-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
    .py-m-100 { padding-top: var(--spacing-100); padding-bottom: var(--spacing-100); }
    .py-m-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
    .py-m-240 { padding-top: var(--spacing-240); padding-bottom: var(--spacing-240); }
    
    
    .px-m-0 { padding-right: 0; padding-left: 0; }
    .px-m-5 { padding-right: var(--spacing-5); padding-left: var(--spacing-5); }
    .px-m-10 { padding-right: var(--spacing-10); padding-left: var(--spacing-10); }
    .px-m-15 { padding-right: var(--spacing-15); padding-left: var(--spacing-15); }
    .px-m-20 { padding-right: var(--spacing-20); padding-left: var(--spacing-20); }
    .px-m-25 { padding-right: var(--spacing-25); padding-left: var(--spacing-25); }
    .px-m-30 { padding-right: var(--spacing-30); padding-left: var(--spacing-30); }
    .px-m-40 { padding-right: var(--spacing-40); padding-left: var(--spacing-40); }
    .px-m-60 { padding-right: var(--spacing-60); padding-left: var(--spacing-60); }
    .px-m-80 { padding-right: var(--spacing-80); padding-left: var(--spacing-80); }
    .px-m-100 { padding-right: var(--spacing-100); padding-left: var(--spacing-100); }
    .px-m-120 { padding-right: var(--spacing-120); padding-left: var(--spacing-120); }
    .px-m-240 { padding-right: var(--spacing-240); padding-left: var(--spacing-240); }
    
    
    .pb-m-0 { padding-bottom: 0; }
    .pb-m-5 { padding-bottom: var(--spacing-5); }
    .pb-m-10 { padding-bottom: var(--spacing-10); }
    .pb-m-15 { padding-bottom: var(--spacing-15); }
    .pb-m-20 { padding-bottom: var(--spacing-20); }
    .pb-m-30 { padding-bottom: var(--spacing-30); }
    .pb-m-40 { padding-bottom: var(--spacing-40); }
    .pb-m-50 { padding-bottom: var(--spacing-50); }
    .pb-m-60 { padding-bottom: var(--spacing-60); }
    .pb-m-70 { padding-bottom: var(--spacing-70); }
    .pb-m-80 { padding-bottom: var(--spacing-80); }
    .pb-m-90 { padding-bottom: var(--spacing-90); }
    .pb-m-100 { padding-bottom: var(--spacing-100); }
    .pb-m-120 { padding-bottom: var(--spacing-120); }
    .pb-m-240 { padding-bottom: var(--spacing-240); }
    
    .pt-m-0 { padding-top: 0; }
    .pt-m-5 { padding-top: var(--spacing-5); }
    .pt-m-10 { padding-top: var(--spacing-10); }
    .pt-m-15 { padding-top: var(--spacing-15); }
    .pt-m-20 { padding-top: var(--spacing-20); }
    .pt-m-25 { padding-top: var(--spacing-25); }
    .pt-m-30 { padding-top: var(--spacing-30); }
    .pt-m-40 { padding-top: var(--spacing-40); }
    .pt-m-50 { padding-top: var(--spacing-50); }
    .pt-m-60 { padding-top: var(--spacing-60); }
    .pt-m-80 { padding-top: var(--spacing-80); }
    .pt-m-100 { padding-top: var(--spacing-100); }
    .pt-m-120 { padding-top: var(--spacing-120); }
    .pt-m-240 { padding-top: var(--spacing-240); }
    
    
    .pl-m-0 { padding-left: 0; }
    .pl-m-5 { padding-left: var(--spacing-5); }
    .pl-m-10 { padding-left: var(--spacing-10); }
    .pl-m-15 { padding-left: var(--spacing-15); }
    .pl-m-20 { padding-left: var(--spacing-20); }
    .pl-m-30 { padding-left: var(--spacing-30); }
    .pl-m-40 { padding-left: var(--spacing-40); }
    .pl-m-60 { padding-left: var(--spacing-60); }
    .pl-m-80 { padding-left: var(--spacing-80); }
    .pl-m-100 { padding-left: var(--spacing-100); }
    .pl-m-120 { padding-left: var(--spacing-120); }
    .pl-m-240 { padding-left: var(--spacing-240); }
    
    .pr-m-0 { padding-right: 0; }
    .pr-m-5 { padding-right: var(--spacing-5); }
    .pr-m-10 { padding-right: var(--spacing-10); }
    .pr-m-15 { padding-right: var(--spacing-15); }
    .pr-m-20 { padding-right: var(--spacing-20); }
    .pr-m-30 { padding-right: var(--spacing-30); }
    .pr-m-40 { padding-right: var(--spacing-40); }
    .pr-m-60 { padding-right: var(--spacing-60); }
    .pr-m-80 { padding-right: var(--spacing-80); }
    .pr-m-100 { padding-right: var(--spacing-100); }
    .pr-m-120 { padding-right: var(--spacing-120); }
    .pr-m-240 { padding-right: var(--spacing-240); }
    
    
    .my-m-0 { margin-top: 0; margin-bottom: 0; }
    .my-m-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .my-m-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
    .my-m-15 { margin-top: var(--spacing-15); margin-bottom: var(--spacing-15); }
    .my-m-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
    .my-m-30 { margin-top: var(--spacing-30); margin-bottom: var(--spacing-30); }
    .my-m-40 { margin-top: var(--spacing-40); margin-bottom: var(--spacing-40); }
    .my-m-60 { margin-top: var(--spacing-60); margin-bottom: var(--spacing-60); }
    .my-m-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
    .my-m-100 { margin-top: var(--spacing-100); margin-bottom: var(--spacing-100); }
    .my-m-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
    .my-m-240 { margin-top: var(--spacing-240); margin-bottom: var(--spacing-240); }
    
    .mx-m-0 { margin-right: 0; margin-left: 0; }
    .mx-m-5 { margin-right: var(--spacing-5); margin-left: var(--spacing-5); }
    .mx-m-10 { margin-right: var(--spacing-10); margin-left: var(--spacing-10); }
    .mx-m-15 { margin-right: var(--spacing-15); margin-left: var(--spacing-15); }
    .mx-m-20 { margin-right: var(--spacing-20); margin-left: var(--spacing-20); }
    .mx-m-30 { margin-right: var(--spacing-30); margin-left: var(--spacing-30); }
    .mx-m-40 { margin-right: var(--spacing-40); margin-left: var(--spacing-40); }
    .mx-m-60 { margin-right: var(--spacing-60); margin-left: var(--spacing-60); }
    .mx-m-80 { margin-right: var(--spacing-80); margin-left: var(--spacing-80); }
    .mx-m-100 { margin-right: var(--spacing-100); margin-left: var(--spacing-100); }
    .mx-m-120 { margin-right: var(--spacing-120); margin-left: var(--spacing-120); }
    .mx-m-240 { margin-right: var(--spacing-240); margin-left: var(--spacing-240); }
    
    .mx-m-auto { margin-left: auto; margin-right: auto; }
    
    .mb-m-0 { margin-bottom: 0; }
    .mb-m-5 { margin-bottom: var(--spacing-5); }
    .mb-m-10 { margin-bottom: var(--spacing-10); }
    .mb-m-15 { margin-bottom: var(--spacing-15); }
    .mb-m-20 { margin-bottom: var(--spacing-20); }
    .mb-m-30 { margin-bottom: var(--spacing-30); }
    .mb-m-40 { margin-bottom: var(--spacing-40); }
    .mb-m-50 { margin-bottom: var(--spacing-50); }
    .mb-m-60 { margin-bottom: var(--spacing-60); }
    .mb-m-70 { margin-bottom: var(--spacing-70); }
    .mb-m-80 { margin-bottom: var(--spacing-80); }
    .mb-m-100 { margin-bottom: var(--spacing-100); }
    .mb-m-120 { margin-bottom: var(--spacing-120); }
    .mb-m-240 { margin-bottom: var(--spacing-240); }
    
    
    .mt-m-0 { margin-top: 0; }
    .mt-m-5 { margin-top: var(--spacing-5); }
    .mt-m-10 { margin-top: var(--spacing-10); }
    .mt-m-15 { margin-top: var(--spacing-15); }
    .mt-m-20 { margin-top: var(--spacing-20); }
    .mt-m-25 { margin-top: var(--spacing-25); }
    .mt-m-30 { margin-top: var(--spacing-30); }
    .mt-m-40 { margin-top: var(--spacing-40); }
    .mt-m-50 { margin-top: var(--spacing-50); }
    .mt-m-60 { margin-top: var(--spacing-60); }
    .mt-m-80 { margin-top: var(--spacing-80); }
    .mt-m-90 { margin-top: var(--spacing-90); }
    .mt-m-100 { margin-top: var(--spacing-100); }
    .mt-m-120 { margin-top: var(--spacing-120); }
    .mt-m-240 { margin-top: var(--spacing-240); }
    
    .ml-m-0 { margin-left: 0; }
    .ml-m-5 { margin-left: var(--spacing-5); }
    .ml-m-10 { margin-left: var(--spacing-10); }
    .ml-m-15 { margin-left: var(--spacing-15); }
    .ml-m-20 { margin-left: var(--spacing-20); }
    .ml-m-30 { margin-left: var(--spacing-30); }
    .ml-m-40 { margin-left: var(--spacing-40); }
    .ml-m-60 { margin-left: var(--spacing-60); }
    .ml-m-80 { margin-left: var(--spacing-80); }
    .ml-m-100 { margin-left: var(--spacing-100); }
    .ml-m-120 { margin-left: var(--spacing-120); }
    .ml-m-240 { margin-left: var(--spacing-240); }
    
    .mr-m-0 { margin-right: 0; }
    .mr-m-5 { margin-right: var(--spacing-5); }
    .mr-m-10 { margin-right: var(--spacing-10); }
    .mr-m-15 { margin-right: var(--spacing-15); }
    .mr-m-20 { margin-right: var(--spacing-20); }
    .mr-m-30 { margin-right: var(--spacing-30); }
    .mr-m-40 { margin-right: var(--spacing-40); }
    .mr-m-60 { margin-right: var(--spacing-60); }
    .mr-m-80 { margin-right: var(--spacing-80); }
    .mr-m-100 { margin-right: var(--spacing-100); }
    .mr-m-120 { margin-right: var(--spacing-120); }
    .mr-m-240 { margin-right: var(--spacing-240); }    

}


/**
 * ----------------------------------------------------------------------------
 * Aspect ratio
 * ----------------------------------------------------------------------------
 */

 .AspectRatio {
	position: relative;
	margin-left: auto;
	margin-right: auto;
  }
  
  .AspectRatio::before {
	content: "";
	display: block;
  }
  
  .AspectRatio>img {
	max-height: 100%;
	max-width: 100%;
  }
  
  .AspectRatio--withFallback>img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
  }
  
  .no-js .AspectRatio>img {
	display: none !important;
  }
  
  @supports (--css: variables) {
  
	/* For dynamic one, we use CSS variables, which makes it only compatible for newer browsers */
	.AspectRatio--withFallback {
	  padding-bottom: 0 !important;
	  /* For older browsers we use the padding-bottom trick, so make sure to remove it here */
	}
  
	.AspectRatio::before {
	  padding-bottom: calc(100% / (var(--aspect-ratio)));
	}
  
	.AspectRatio>img,
	.no-js .AspectRatio>noscript img {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	}
  }
  
  .AspectRatio--square::before {
	padding-bottom: 100%;
  }
  
  .AspectRatio--short::before {
	padding-bottom: 75%;
  }
  
  .AspectRatio--tall::before {
	padding-bottom: 130%;
  }
  .AspectRatio--taller::before {
   padding-bottom: 150%;
  }
  .AspectRatio--screen::before {
   padding-bottom: 180%;
  }
  
  .AspectRatio--square>img,
  .AspectRatio--short>img,
  .AspectRatio--tall>img,
  .AspectRatio--screen>img {
	position: absolute;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }
  
  @supports ((-o-object-fit: contain) or (object-fit: contain)) {
  
	.AspectRatio--square>img,
	.AspectRatio--short>img,
	.AspectRatio--tall>img,
	.AspectRatio--taller>img {
	  width: 100%;
	  height: 100%;
	  -o-object-fit: cover;
	  object-fit: cover;
	}
  }
  
  .Image--lazyLoad[data-sizes=auto] {
	width: 100%;
	/* this is needed to help LazySizes calculate the correct size */
  }

.stop {
	clear: both;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
	/*color: inherit;*/
}

p a{
  text-decoration: underline;
}

.trs-02 {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

.trs-05 {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.trs-1 {
	transition: all 1s;
	-webkit-transition: all 1s;
}

.trs-15 {
	transition: all 1.5s;
	-webkit-transition: all 1.5s;
}

.trs-2 {
	transition: all 2s;
	-webkit-transition: all 2s;
}

.align-c { text-align: center; }
.align-l { text-align: left; }
.align-r { text-align: right; }

@media only screen and (max-width: 480px) {
	.align-m-c { text-align: center; }
	.align-m-r { text-align: right; }
	.align-m-l { text-align: left; }
}


.t-u { text-transform: uppercase; }
.t-l { text-transform: lowercase; }
.t-cap { text-transform: capitalize; }
.t-underline { text-decoration: underline; }
.ital{ font-style:italic; }

.full-div { width: 100%; height: 100%; }

.back-cover {
	background-size: cover;
	background-position: center center;
}

.ofit-cover { object-fit: cover; }


.d-none { display: none !important; }
.d-ib { display: inline-block; }
.d-b { display: block; }
.d-f {
	display: flex;
	gap: var(--gutter);
  flex-wrap:wrap;
}

.d-ig { display: inline-grid; }
.d-g { display: grid; }

.as{ align-items: start; }
.ac{ align-items: center; }
.ae{ align-items: end; }

.js{ justify-content: space-between; }


.d-g.col-2{ grid-template-columns:repeat(2, 1fr); }
.d-g.col-3{ grid-template-columns:repeat(3, 1fr); }
.d-g.col-4{ grid-template-columns:repeat(4, 1fr); }
.d-g.col-5{ grid-template-columns:repeat(5, 1fr); }
.d-g.col-6{ grid-template-columns:repeat(6, 1fr); }
.d-g.col-7{ grid-template-columns:repeat(7, 1fr); }
.d-g.col-8{ grid-template-columns:repeat(8, 1fr); }

.gtc-2-fr{ grid-template-columns:repeat(2, 1fr); }
.gtc-3-fr{ grid-template-columns:repeat(3, 1fr); }
.gtc-4-fr{ grid-template-columns:repeat(4, 1fr); }
.gtc-5-fr{ grid-template-columns:repeat(5, 1fr); }
.gtc-6-fr{ grid-template-columns:repeat(6, 1fr); }
.gtc-7-fr{ grid-template-columns:repeat(7, 1fr); }
.gtc-8-fr{ grid-template-columns:repeat(8, 1fr); }

.gtc-2-max{ grid-template-columns:repeat(2, max-content); }
.gtc-3-max{ grid-template-columns:repeat(3, max-content); }
.gtc-4-max{ grid-template-columns:repeat(4, max-content); }
.gtc-5-max{ grid-template-columns:repeat(5, max-content); }
.gtc-6-max{ grid-template-columns:repeat(6, max-content); }
.gtc-7-max{ grid-template-columns:repeat(7, max-content); }
.gtc-8-max{ grid-template-columns:repeat(8, max-content); }


.gap-5{ grid-gap:0.5rem; }
.gap-10{ grid-gap:1rem; }
.gap-15{ grid-gap:1.5rem; }
.gap-20{ grid-gap:2rem; }
.gap-25{ grid-gap:2.5rem; }
.gap-30{ grid-gap:3rem; }
.gap-35{ grid-gap:3.5rem; }
.gap-40{ grid-gap:4rem; }
.gap-45{ grid-gap:4.5rem; }
.gap-50{ grid-gap:5rem; }
.gap-55{ grid-gap:5.5rem; }
.gap-60{ grid-gap:6rem; }

@media only screen and (max-width: 480px) {
  .gap-m-5{ grid-gap:0.5rem; }
  .gap-m-10{ grid-gap:1rem; }
  .gap-m-15{ grid-gap:1.5rem; }
  .gap-m-20{ grid-gap:2rem; }
  .gap-m-25{ grid-gap:2.5rem; }
  .gap-m-30{ grid-gap:3rem; }
  .gap-m-35{ grid-gap:3.5rem; }
  .gap-m-40{ grid-gap:4rem; }
  .gap-m-45{ grid-gap:4.5rem; }
  .gap-m-50{ grid-gap:5rem; }
  .gap-m-55{ grid-gap:5.5rem; }
  .gap-m-60{ grid-gap:6rem; }

  .gtc-m-auto{ grid-template-columns: auto; }

}


.w0 { width: 0%;}
.w10 { width: 10%;}
.w20 { width: 20%;}
.w30 { width: 30%;}
.w31 { width: 31%;}
.w32 { width: 32%;}
.w33 { width: 33%;}
.w34 { width: 34%;}
.w35 { width: 35%;}
.w36 { width: 36%;}
.w37 { width: 37%;}
.w38 { width: 38%;}
.w39 { width: 39%;}
.w40 { width: 40%;}
.w45 { width: 45%;}
.w50 { width: 50%;}
.w55 { width: 55%;}
.w60 { width: 60%;}
.w65 { width: 65%;}
.w70 { width: 70%;}
.w75 { width: 75%;}
.w80 { width: 80%;}
.w85 { width: 85%;}
.w90 { width: 90%;}
.w95 { width: 95%;}
.w100 { width: 100%;}
.vw100 { width: 100vw; width: 100dwh; }
.w-fit { width: fit-content;}

.h0 { height: 0%;}
.h100 { height: 100%;}
.vh100 { height: 100vh; height: 100dvh; }

@media only screen and (max-width: 480px) {
  .m-h-fit-content { height: fit-content; }

  .w-m-0 { width: 0%;}
  .w-m-10 { width: 10%;}
  .w-m-20 { width: 20%;}
  .w-m-30 { width: 30%;}
  .w-m-31 { width: 31%;}
  .w-m-32 { width: 32%;}
  .w-m-33 { width: 33%;}
  .w-m-34 { width: 34%;}
  .w-m-35 { width: 35%;}
  .w-m-36 { width: 36%;}
  .w-m-37 { width: 37%;}
  .w-m-38 { width: 38%;}
  .w-m-39 { width: 39%;}
  .w-m-40 { width: 40%;}
  .w-m-45 { width: 45%;}
  .w-m-50 { width: 50%;}
  .w-m-55 { width: 55%;}
  .w-m-60 { width: 60%;}
  .w-m-65 { width: 65%;}
  .w-m-70 { width: 70%;}
  .w-m-75 { width: 75%;}
  .w-m-80 { width: 80%;}
  .w-m-85 { width: 85%;}
  .w-m-90 { width: 90%;}
  .w-m-95 { width: 95%;}
  .w-m-100 { width: 100%;}

}



/* CURSOR */
.c-pointer { cursor: pointer; }
.pe-none { pointer-events: none; }

/* POSITION */
.p-r { position: relative;}
.p-a { position: absolute; }
.p-f { position: fixed;}
.p-s { position: sticky;}

.p-0 { top: 0; left: 0; }
.p-t-0 { top: 0;}
.p-r-0 { right: 0;}
.p-b-0 { bottom: 0;}
.p-l-0 { left: 0;}


/* Z-INDEX */
.l-0 { z-index: 0; }
.l-1 { z-index: 1; }
.l-2 { z-index: 2; }
.l-3 { z-index: 3; }
.l-4 { z-index: 4; }
.l-5 { z-index: 5; }
.l-6 { z-index: 6; }
.l-7 { z-index: 7; }
.l-8 { z-index: 8; }
.l-9 { z-index: 9; }
.l-10 { z-index: 10; }
.l-11 { z-index: 11; }
.l-12 { z-index: 12; }
.l-13 { z-index: 13; }
.l-14 { z-index: 14; }
.l-15 { z-index: 15; }
.l-100 { z-index: 100; }
.l-101 { z-index: 101; }
.l-102 { z-index: 102; }
.l-103 { z-index: 103; }
.l-104 { z-index: 104; }
.l-105 { z-index: 105; }
.l-999 { z-index: 999; }
.l-1000 { z-index: 1000; }
.l-1001 { z-index: 1001; }
.l-1002 { z-index: 1002; }
.l-1003 { z-index: 1003; }
.l-1004 { z-index: 1004; }
.l-1005 { z-index: 1005; }

.d-ib { display: inline-block; }
.d-b { display: block; }
.d-none { display: none; }
.d-grid { display: grid; }
.grid-full-align { align-items: center; }
.grid-vert-align { align-items: center; }

.op-0 { opacity: 0; }
.op-01 { opacity: 0.1; }
.op-02 { opacity: 0.2; }
.op-03 { opacity: 0.3; }
.op-04 { opacity: 0.4; }
.op-05 { opacity: 0.5; }
.op-06 { opacity: 0.6; }
.op-07 { opacity: 0.7; }
.op-08 { opacity: 0.8; }
.op-09 { opacity: 0.9; }
.op-1 { opacity: 1; }

.of-h { overflow: hidden; }
.of-s { overflow: scroll; }
.of-y-s { overflow-y: scroll; }


/* BLOCK ALIGN */
.ver-align {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

.hor-align {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
}

.full-align {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.f-left { float: left }
.f-right { float: right; }
.stop { clear: both; }



.circle { border-radius: 50%; }

.br-5 { border-radius: 5px; }
.br-10 { border-radius: 10px; }
.br-15 { border-radius: 15px; }
.br-20 { border-radius: 20px; }
.br-25 { border-radius: 25px; }
.br-30 { border-radius: 30px; }
.br-35 { border-radius: 35px; }
.br-t-25 { border-radius: 25px 25px 0 0; }
.br-t-30 { border-radius: 30px 30px 0 0; }
.br-t-35 { border-radius: 35px 35px 0 0; }

.br-2b { border-radius: 2vw; }
.br-3b { border-radius: 3vw; }
.br-4b { border-radius: 4vw; }

.horizontal-scroll-father {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.horizontal-scroll-child {
	scroll-snap-align: center;
	flex-shrink: 0;
}


.sw-linear{ transition-timing-function: linear; }
.ss-auto{ width: fit-content; }


/* —— SCROLL ANIMATION —— */

.anime[data-scroll-repeat]{
  transition:all 1s;
  transform:translateY(3rem);
  opacity:0;
}
.anime[data-scroll-repeat].is-inview{
  transform:translateY(0rem);
  opacity:1;
}
.anime[data-scroll-repeat].a05{ transition:all 0.5s; }
.anime[data-scroll-repeat].a06{ transition:all 0.6s; }
.anime[data-scroll-repeat].a07{ transition:all 0.7s; }
.anime[data-scroll-repeat].a08{ transition:all 0.8s; }
.anime[data-scroll-repeat].a09{ transition:all 0.9s; }
.anime[data-scroll-repeat].a11{ transition:all 1.1s; }
.anime[data-scroll-repeat].a12{ transition:all 1.2s; }
.anime[data-scroll-repeat].a13{ transition:all 1.3s; }
.anime[data-scroll-repeat].a14{ transition:all 1.4s; }
.anime[data-scroll-repeat].a15{ transition:all 1.5s; }


.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



.video-full-responsive{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height:100vh;
  transform: translate(-50%, -50%);
  border:0;
}
.video-full-responsive.p_16_9{
  aspect-ratio:16 / 9;
}
.video-full-responsive.p_9_16{
  aspect-ratio:9 / 16;
}







/* —————————————————— PROJECT —————————————————— */

.montserrat{ font-family: 'Montserrat', sans-serif; }

body{
  opacity:0;
  transition:all 1s;
}
body.loaded{
  opacity:1;
}

.scroll-text-enter{
  transform:translateY(6rem);
  opacity:0;
  transition:all 0s;
}
.scroll-text-enter.is-inview{
  transform:translateY(0rem);
  opacity:1;
  transition:all 2s;
}
.scroll-text-enter.is-inview.delay-01{ transition-delay:0.1s; }
.scroll-text-enter.is-inview.delay-02{ transition-delay:0.2s; }
.scroll-text-enter.is-inview.delay-03{ transition-delay:0.3s; }
.scroll-text-enter.is-inview.delay-04{ transition-delay:0.4s; }


.scroll-img-enter.delay-01 img{ transition-delay:0.1s; }
.scroll-img-enter.delay-02 img{ transition-delay:0.2s; }
.scroll-img-enter.delay-03 img{ transition-delay:0.3s; }
.scroll-img-enter.delay-04 img{ transition-delay:0.4s; }

.scroll-img-enter{
  overflow:hidden;
}
.scroll-img-enter img{
  transform:translateY(100%);
  transition:all 1.2s;
}
.scroll-img-enter.is-inview img{
  transform:translateY(0%);
}

body .background{ background-color:var(--color-1) }
body.color-1 .background{ background-color:var(--color-1) }
body.color-2 .background{ background-color:var(--color-2) }

body .color{ color:var(--color-1) }
body.color-1 .color{ color:var(--color-1) }
body.color-2 .color{ color:var(--color-2) }


.wrapper{
  width:calc(100% - (var(--spacing-60) * 2));
  margin-right:auto;
  margin-left:auto;
}

@media only screen and (max-width: 480px) {
  .wrapper{
    width:calc(100% - (var(--spacing-20) * 2));
  }
}


body.color-1 .season-2{ display:none }
body.color-2 .season-1{ display:none }

.season--1{ display:none !important; }


/* —————————————————————————————————— */
/* ———————— EXPERIENCE CARD ————————— */
/* —————————————————————————————————— */

.exp-card{
  max-width:45.8rem;
}

.exp-card .exp-visual{
  height:28rem;
}
.exp-card .exp-visual img{
  height:130%;
  margin-top:-5%;
}

.exp-card .name{
  height:6rem;
}
.exp-card .descr{
  height:6rem;
}

.exp-card .location{
  height:1.4rem;
}
.exp-card .duration{
  height:1.4rem;
}


@media only screen and (max-width: 480px) {

  .exp-card{
    max-width:32rem;
  }
  .exp-card .exp-visual{
    height:18rem;
  }

  .exp-card .name{
    height:5rem;
  }
  .exp-card .descr{
    height:5rem;
  }

}





/* —————————————————————————————————— */
/* ———————————— EVENT CARD —————————— */
/* —————————————————————————————————— */

.evt-card{
  width:100%;
  height:46rem;
}

.evt-card .evt-visual{
  width:70%;
  height:100%;
}
.evt-card .evt-visual img{
  height:120%;
  margin-top:-5%;
}

.evt-card .descr{
  height:9rem;
}

.evt-card .content{
  padding-left:55%;
}

body.color-1 .evt-card .content .data{
  border-top:2px solid var(--color-1);
  border-bottom:2px solid var(--color-1);
}

.evt-card .gradient{
  background:linear-gradient(to left, var(--white) 50%, transparent);
}


@media only screen and (max-width: 480px) {

  .evt-card{
    width:100%;
    height:50rem;
  }

  .evt-card .evt-visual{
    width:100%;
    height:30vh;
  }

  .evt-card .gradient{
    background:linear-gradient(to top, var(--white) 55%, transparent);
  }

  .evt-card .content{
    padding-left:2rem;
    padding-top:32vh;
  }

}



/* —————————————————————————————————— */
/* ——————————— HOTEL CARD ——————————— */
/* —————————————————————————————————— */

.hotel-card{
}

.hotel-card .hotel-visual{
  height:28rem;
}
.hotel-card .hotel-visual img{
  height:130%;
  margin-top:-5%;
}

.hotel-card .data-box .data{
  border-width:2px;
  border-style:solid;
}
body.color-1 .hotel-card .data-box .data{ border-color:var(--color-1); }
body.color-2 .hotel-card .data-box .data{ border-color:var(--color-2); }


.hotel-card .name{
  height:6rem;
}
.hotel-card .descr{
  height:6rem;
}
.hotel-card .sunflower{
  width:1.6rem;
}


@media only screen and (max-width: 480px) {

  .hotel-card .hotel-visual{
    height:18rem;
  }

  .hotel-card .name{
    height:5rem;
  }
  .hotel-card .descr{
    height:5rem;
  }

}


/* —————————————————————— */
/* ——————— BTN ———————— */
/* —————————————————————— */

.btn.outline.color{
  border-width:2px;
  border-style:solid;
}
body.color-1 .btn.outline.color{ border-color:var(--color-1); }
body.color-2 .btn.outline.color{ border-color:var(--color-2); }


/* —————————————————————— */
/* ——————— INPUT ———————— */
/* —————————————————————— */

.i{
  width:100%;
  padding:2rem 3rem;
  border:0;
  border:1px;
  border-style:solid;
  font-family: 'Montserrat', sans-serif;
  background-color:transparent;
  line-height:1;
  font-size:2.4rem;
  font-weight:600;
  position:relative;
  border-radius:0;
  appearance: none;
}
.i.white{
  border-color:var(--white);
  color:var(--white);
}


.i.small{
  padding:1.5rem 2rem;
  font-size:1.6rem;
}

.i.textarea{
  height:20rem;
}

select.i option{
  color:var(--black);
}


@media only screen and (max-width: 480px) {

  .i{
    padding:1rem 1.5rem;
    line-height:1;
    font-size:1.6rem;
  }

}





