* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@media only screen and (max-width: 500px) {
  * {
    cursor:unset;
  }
}

p { 
  margin-bottom: 0; 
  white-space: normal;
}

:root {

	/* colors */
	--dark-color: #8390A1;
  --light-color: #E5EAEA;
  --accent: #E4EC47;
  --white: #F8F8F8;
  --black: #1B1B1B;

  /* grid */
  --desk-grid-wrapper-columns:12;
  --desk-grid-wrapper-col-gutter:2.4rem;
  --desk-grid-wrapper-margin:8rem;

  --desk-grid-wrapper-small-columns:10;
  --desk-grid-wrapper-small-col-gutter:2.4rem;
  --desk-grid-wrapper-small-margin:22.7rem;

  --tabl-grid-wrapper-columns:12;
  --tabl-grid-wrapper-col-gutter:2.4rem;
  --tabl-grid-wrapper-margin:8rem;

  --tabl-grid-wrapper-small-columns:10;
  --tabl-grid-wrapper-small-col-gutter:2.4rem;
  --tabl-grid-wrapper-small-margin:12rem;

  --mobi-grid-wrapper-columns:4;
  --mobi-grid-wrapper-col-gutter:1.6rem;
  --mobi-grid-wrapper-margin:2rem;

  --mobi-grid-wrapper-small-columns:4;
  --mobi-grid-wrapper-small-col-gutter:1.6rem;
  --mobi-grid-wrapper-small-margin:2rem;
  
  /* animation */
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
}

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: 500px) {

	.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; }



/* —————————————————— 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-112 { line-height: 1.12 }
.t-lh-115 { line-height: 1.15 }
.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: 500px) {
  .f-m-w-100{ font-weight:100; }
  .f-m-w-200{ font-weight:200; }
  .f-m-w-300{ font-weight:300; }
  .f-m-w-400{ font-weight:400; }
  .f-m-w-500{ font-weight:500; }
  .f-m-w-600{ font-weight:600; }
  .f-m-w-700{ font-weight:700; }
  .f-m-w-800{ font-weight:800; }
  .f-m-w-900{ font-weight:900; }


  .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-115 { line-height: 1.15 }
  .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;
}

/* —————————————————— TEXT STYLES (MOB) —————————————————— */
@media only screen and (max-width: 500px) {

  body {
	 font-size: 1.3rem;
  	line-height: 1.5;
  }

}


.mx-auto { margin-left: auto; margin-right: auto; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }


@media only screen and (max-width: 500px) {
  .mx-m-auto { margin-left: auto; margin-right: auto; }
}


.stop { clear: both; }

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

button{
  cursor:none;
}

a:hover {
	text-decoration: none !important;
	/*color: inherit;*/
}

ul{
  list-style: none;
  margin:0;
  padding:0;
}

.a-underline{
  text-decoration:underline !important;
}

.a-u a{
  text-decoration:underline;
}

button{
  border:0;
}


.align-c { text-align: center; }
.align-l { text-align: left; }
.align-r { text-align: right; }

@media only screen and (max-width: 500px) {
	.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; }
.italic{ 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; }

.d-ig { display: inline-grid; }
.d-g { display: grid; }

.as{ align-items: start; }
.ac{ align-items: center; }
.ae{ align-items: end; }

.ai-s{ align-items: start; }
.ai-c{ align-items: center; }
.ai-e{ align-items: end; }

.ac-s{ align-content:start; }
.ac-c{ align-content:center; }
.ac-e{ align-content:end; }
.ac-space{ align-content:space-between; }

.as-s{ align-self:start; }
.as-c{ align-self:center; }
.as-e{ align-self:end; }

.jc-s{ justify-content:start; }
.jc-c{ justify-content:center; }
.jc-e{ justify-content:end; }
.jc-space{ justify-content:space-between; }

.js-e{ justify-self:end; }


@media only screen and (max-width: 500px) {
  .d-m-g { display: grid; }

  .as-m{ align-items: start; }
  .ac-m{ align-items: center; }
  .ae-m{ align-items: end; }

  .ac-m-s{ align-content:start; }
  .ac-m-c{ align-content:center; }
  .ac-m-e{ align-content:end; }
  .ac-m-space{ align-content:space-between; }

  .as-m-s{ align-self:start; }
  .as-m-c{ align-self:center; }
  .as-m-e{ align-self:end; }

  .jc-m-s{ justify-content:start; }
  .jc-m-c{ justify-content:center; }
  .jc-m-e{ justify-content:end; }
  .jc-m-space{ justify-content:space-between; }

  .js-m-e{ justify-self:end; }
}





.col-1{ grid-template-columns:repeat(1, 1fr); }
.col-2{ grid-template-columns:repeat(2, 1fr); }
.col-3{ grid-template-columns:repeat(3, 1fr); }
.col-4{ grid-template-columns:repeat(4, 1fr); }
.col-5{ grid-template-columns:repeat(5, 1fr); }
.col-6{ grid-template-columns:repeat(6, 1fr); }
.col-7{ grid-template-columns:repeat(7, 1fr); }
.col-8{ grid-template-columns:repeat(8, 1fr); }


.col-max-auto{ grid-template-columns:max-content auto; }
.col-max-max{ grid-template-columns:max-content max-content; }
.col-auto-max{ grid-template-columns:auto max-content; }
.col-auto-auto{ grid-template-columns:auto auto; }


.vw100 { width: 100vw; width: 100dwh; }
.w-fit { width: fit-content;}

.h0 { height: 0%;}
.h100 { height: 100%;}
.vh100 { height: 100vh; height: 100dvh; }

.h-auto{
  height:auto;
}

@media only screen and (max-width: 500px) {
  .m-h-fit-content { height: fit-content; }

  .col-m-1{ grid-template-columns:repeat(1, 1fr); }
  .col-m-2{ grid-template-columns:repeat(2, 1fr); }
  .col-m-3{ grid-template-columns:repeat(3, 1fr); }
  .col-m-4{ grid-template-columns:repeat(4, 1fr); }
  .col-m-5{ grid-template-columns:repeat(5, 1fr); }
  .col-m-6{ grid-template-columns:repeat(6, 1fr); }
  .col-m-7{ grid-template-columns:repeat(7, 1fr); }
  .col-m-8{ grid-template-columns:repeat(8, 1fr); }

  .col-m-max-auto{ grid-template-columns:max-content auto; }
  .col-m-max-max{ grid-template-columns:max-content max-content; }
  .col-m-auto-max{ grid-template-columns:auto max-content; }
  .col-m-auto-auto{ grid-template-columns:auto auto; }
}

.fullscreen{
  width:100vw;
  width:100svw;
  height:100vh;
  height:100svh;
}


/* 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;}


.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: 0.5rem; }
.br-10 { border-radius: 1rem; }
.br-15 { border-radius: 1.5rem; }
.br-20 { border-radius: 2rem; }
.br-25 { border-radius: 2.5rem; }
.br-30 { border-radius: 3rem; }
.br-35 { border-radius: 3.5rem; }
.br-50 { border-radius: 5rem; }
.br-70 { border-radius: 7rem; }

@media only screen and (max-width: 500px) {
  .br-m-0 { border-radius: 0rem; }
  .br-m-5 { border-radius: 0.5rem; }
  .br-m-10 { border-radius: 1rem; }
  .br-m-15 { border-radius: 1.5rem; }
  .br-m-20 { border-radius: 2rem; }
  .br-m-25 { border-radius: 2.5rem; }
  .br-m-30 { border-radius: 3rem; }
  .br-m-35 { border-radius: 3.5rem; }
  .br-m-50 { border-radius: 5rem; }
  .br-m-70 { border-radius: 7rem; }
}

.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 —— */
.observe{
  opacity:0;
  transition:all 0s;
  transition-delay:0;
  will-change: opacity, filter, transform;
}

.observe.is-inview{
  transform:translateY(0rem);
  filter:blur(0px);
  opacity:1;
  transition:all 1s;
  transition-delay:var(--anime-delay-time, 0ms);
}








.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 —————————————————— */

.inter{ font-family: "Inter", sans-serif; }
.elza{ font-family: elza-text, sans-serif; }

body{ transition:all var(--animation-default); }
body.light{ color: var(--black); }
body.dark{ color: var(--white); }
.l-d-switch{ 
  transition:background-color var(--animation-default), color var(--animation-default); 
}

/* —————————— BACKGROUNDS ————————— */

.b-dark-color { background-color: var(--dark-color); }
.b-light-color { background-color: var(--light-color); }
.b-accent { background-color: var(--accent); }

.b-white { background-color: var(--white); }
.b-black { background-color: var(--black); }

body.light .light-b-accent{ background-color: var(--accent); }
body.light .light-b-dark-color{ background-color: var(--dark-color); }
body.light .light-b-light-color{ background-color: var(--accent); }

body.light .light-b-white{ background-color: var(--white); }
body.light .light-b-black{ background-color: var(--black); }

body.dark .dark-b-accent{ background-color: var(--accent); }
body.dark .dark-b-dark-color{ background-color: var(--dark-color); }
body.dark .dark-b-light-color{ background-color: var(--accent); }

body.dark .dark-b-white{ background-color: var(--white); }
body.dark .dark-b-black{ background-color: var(--black); }

/* ——————————— COLORS ————————————— */

.c-dark-color { color: var(--dark-color); }
.c-light-color { color: var(--light-color); }
.c-accent { color: var(--accent); }

.c-white { color: var(--white); }
.c-black { color: var(--black); }

body.light .light-c-accent{ color: var(--accent); }
body.light .light-c-dark-color{ color: var(--dark-color); }
body.light .light-c-light-color{ color: var(--light-color); }

body.light .light-c-white{ color: var(--white); }
body.light .light-c-black{ color: var(--black); }

body.dark .dark-c-accent{ color: var(--accent); }
body.dark .dark-c-dark-color{ color: var(--dark-color); }
body.dark .dark-c-light-color{ color: var(--light-color); }

body.dark .dark-c-white{ color: var(--white); }
body.dark .dark-c-black{ color: var(--black); }


html{
  background-color:var(--white);
}



body{
  width:100vw;
  overflow-x:hidden;
  opacity:0;
}
body.loaded{
  opacity:1;
}

body.light{ background-color:var(--white); }
body.dark{ background-color:var(--black); }






#smooth-content {
  will-change: transform;
  width:100vw;
  overflow-x:hidden;
}
#header{ cursor:none; }
#header *{ cursor:none; }

#menu{ cursor:none; }
#menu *{ cursor:none; }

#smooth-content{ cursor:none; }
#smooth-content *{ cursor:none; }

@media only screen and (max-width: 500px) {
  #header{ cursor:auto; }
  #header *{ cursor:auto; }

  #menu{ cursor:auto; }
  #menu *{ cursor:auto; }

  #smooth-content{ cursor:auto; }
  #smooth-content *{ cursor:auto; }
}




.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%);
}





/* —————————— SIZING ————————— */

.wrapper{
  width:100%;
  padding-right:var(--desk-grid-wrapper-margin);
  padding-left:var(--desk-grid-wrapper-margin);
}

.wrapper-small{
  width:100%;
  padding-right:var(--desk-grid-wrapper-small-margin);
  padding-left:var(--desk-grid-wrapper-small-margin);
}

@media only screen and (max-width: 900px) {
  .wrapper{
    padding-right:var(--tabl-grid-wrapper-margin);
    padding-left:var(--tabl-grid-wrapper-margin);
  }

  .wrapper-small{
    padding-right:var(--tabl-grid-wrapper-small-margin);
    padding-left:var(--tabl-grid-wrapper-small-margin);
  }
}

@media only screen and (max-width: 500px) {
  .wrapper{
    padding-right:var(--mobi-grid-wrapper-margin);
    padding-left:var(--mobi-grid-wrapper-margin);
  }

  .wrapper-small{
    padding-right:var(--mobi-grid-wrapper-small-margin);
    padding-left:var(--mobi-grid-wrapper-small-margin);
  }
}



.wrapper.m-g{
  display: grid;
  grid-template-columns: repeat(var(--desk-grid-wrapper-columns), 1fr);
  column-gap:var(--desk-grid-wrapper-col-gutter);
}

.wrapper-small.m-g{
  display: grid;
  grid-template-columns: repeat(var(--desk-grid-wrapper-small-columns), 1fr);
  column-gap:var(--desk-grid-wrapper-small-col-gutter);
}

@media only screen and (max-width: 900px) {
  .wrapper.m-g{
    grid-template-columns: repeat(var(--tabl-grid-wrapper-columns), 1fr);
    column-gap:var(--tabl-grid-wrapper-col-gutter);
  }

  .wrapper-small.m-g{
    grid-template-columns: repeat(var(--tabl-grid-wrapper-small-columns), 1fr);
    column-gap:var(--tabl-grid-wrapper-small-col-gutter);
  }
}

@media only screen and (max-width: 500px) {
  .wrapper.m-g{
    grid-template-columns: repeat(var(--mobi-grid-wrapper-columns), 1fr);
    column-gap:var(--mobi-grid-wrapper-col-gutter);
  }

  .wrapper-small.m-g{
    grid-template-columns: repeat(var(--mobi-grid-wrapper-small-columns), 1fr);
    column-gap:var(--mobi-grid-wrapper-small-col-gutter);
  }
}


.m-g .c-0{ display:none; }
.m-g .c-1{ grid-column:span 1; }
.m-g .c-2{ grid-column:span 2; }
.m-g .c-3{ grid-column:span 3; }
.m-g .c-4{ grid-column:span 4; }
.m-g .c-5{ grid-column:span 5; }
.m-g .c-6{ grid-column:span 6; }
.m-g .c-7{ grid-column:span 7; }
.m-g .c-8{ grid-column:span 8; }
.m-g .c-9{ grid-column:span 9; }
.m-g .c-10{ grid-column:span 10; }
.m-g .c-11{ grid-column:span 11; }
.m-g .c-12{ grid-column:span 12; }

@media only screen and (max-width: 500px) {
  .m-g .c-m-0{ display:none; }
  .m-g .c-m-1{ grid-column:span 1; display:grid; }
  .m-g .c-m-2{ grid-column:span 2; display:grid; }
  .m-g .c-m-3{ grid-column:span 3; display:grid; }
  .m-g .c-m-4{ grid-column:span 4; display:grid; }
  .m-g .c-m-5{ grid-column:span 5; }
  .m-g .c-m-6{ grid-column:span 6; }
  .m-g .c-m-7{ grid-column:span 7; }
  .m-g .c-m-8{ grid-column:span 8; }
  .m-g .c-m-9{ grid-column:span 9; }
  .m-g .c-m-10{ grid-column:span 10; }
  .m-g .c-m-11{ grid-column:span 11; }
  .m-g .c-m-12{ grid-column:span 12; }
}





/* —————————— MOUSE ————————— */

.mf-cursor::before{
  width:12rem;
  height:12rem;
  top:-6rem;
  left:-6rem;
}

.mf-cursor-text{
  font-size:2rem;
  line-height:1;
}

.mf-cursor.-pointer{
  mix-blend-mode: difference;
}
body.light .mf-cursor.-pointer{}

.mf-cursor.-pointer::before {
  transform: scale(0.4);
}

.mf-cursor.-theme-hover{
  mix-blend-mode: unset !important;
}
.mf-cursor.-theme-hover::before {
  transform: scale(1.5);
  background:var(--white);
  
}

.mf-cursor.-theme-hover::before {
  transform: scale(1.5);
  background:var(--accent);
  color:var(--black);
  font-family: elza-text, sans-serif;
  opacity:1;
}
.mf-cursor.-theme-hover .mf-cursor-text{
  color:var(--black);
  font-family: elza-text, sans-serif;
}

@media only screen and (max-width: 500px) {
  .mf-cursor{
    display:none;
  }
}








/* —————————— DECORATIVE ————————— */

.decorative{
  width:100%;
  position:absolute;
  pointer-events:none;
}
.decorative.top{
  top:-3rem;
  left:0;
}
.decorative.bottom{
  bottom:-3rem;
  left:0;
  transform:rotate(180deg);
}

@media only screen and (max-width: 500px) {
  .decorative.top{
    top:-6rem;
    left:0;
  }

  .decorative.bottom{
    bottom:-6rem;
    left:0;
    transform:rotate(180deg);
  }
}



/* —————————— BTN ————————— */

.btn{
  width:fit-content;
  display: block;
  padding:0.5rem;
  border:1px dashed var(--salmon);
  font-size:1.8rem;
  line-height:1;
  border-radius:20rem;
  transition:all 0.3s;
  font-style: normal;
}

.btn .btn-content{
  height:4.5rem;
  padding:1.5rem 3rem 1.2rem;
  border:1px solid var(--salmon);
  border-radius:20rem;
  transition:all 0.3s;
}
.btn:hover .btn-content{
  height:5.5rem;
  padding:2rem 3.5rem 1.7rem;
  background-color:var(--pink);
  color:var(--salmon);
}

.btn.small .btn-content{
  height:3.5rem;
  padding:1rem 1.2rem 0.8rem;
  border:1px solid var(--salmon);
  border-radius:20rem;
  transition:all 0.3s;
}

.btn .btn-content .label-box{
  transition:all 0.3s;
}
.btn:hover .btn-content .label-box{
  transform:translateY(-6.8rem);
}
.btn .btn-content .label-box .label-hover{
  margin-top:5rem;
  transform:skewY(15deg);
  transition:all 0.4s;
}
.btn:hover .btn-content .label-box .label-hover{
  transform:skewY(0);
}

.btn.salmon .btn-content{
  background-color:var(--salmon);
  color:var(--pink);
}

.btn.pink{
  border:1px dashed var(--pink);
}
.btn.pink .btn-content{
  background-color:var(--pink);
  color:var(--salmon);
}

.btn.outline-salmon{
  border:1px dashed var(--salmon);
}
.btn.outline-salmon .btn-content{
  background-color:transparent;
  color:var(--salmon);
}

.btn.outline-white{
  border:1px dashed var(--white);
}
.btn.outline-white .btn-content{
  background-color:transparent;
  color:var(--white);
  border:1px solid var(--white);
}

.btn.white{
  border:1px dashed var(--white);
}
.btn.white .btn-content{
  background-color:var(--white);
  border:1px solid var(--white);
  color:var(--salmon);
}


.btn.btn-icon .btn-content{
  display:grid;
  grid-template-columns:max-content auto;
  align-items:start;
  grid-gap:1.5rem;
}

.btn.btn-icon .btn-content .icon{
  transform:translateY(-0.5rem);
}

.btn:hover{
  padding:0rem;
  border:1px solid transparent;
}


@media only screen and (max-width: 500px) {
  .btn{
    font-size:1.6rem;
  }

  .btn .btn-content{
    border:0px solid var(--salmon);
  }
}





.icon-btn{
  width:fit-content;
  display: block;
  padding:0.5rem;
  border:1px dashed var(--salmon);
  font-size:1.8rem;
  line-height:1;
  border-radius:20rem;
  transition:all 0.3s;
  font-style: normal;
}
.icon-btn .btn-content{
  width:4rem;
  height:4rem;
  padding:1rem;
  border:1px solid var(--salmon);
  border-radius:20rem;
  transition:all 0.3s;
}

.icon-btn.big .btn-content{
  width:8rem;
  height:8rem;
  padding:1rem;
  border:1px solid var(--salmon);
  border-radius:20rem;
  transition:all 0.3s;
}

.icon-btn.outline-white{
  border:1px dashed var(--white);
}
.icon-btn.outline-white .btn-content{
  background-color:transparent;
  color:var(--white);
  border:1px solid var(--white);
}

.icon-btn.white{
  border:1px dashed var(--white);
}
.icon-btn.white .btn-content{
  background-color:var(--white);
  border:1px solid var(--white);
  color:var(--salmon);
}














.marquee{
  width:100%;
  overflow: hidden;
}
.marquee .marquee-scroller{
  width:max-content;
  flex-wrap: nowrap;
}
.marquee .marquee-scroller .label{
  width:max-content;
}

@keyframes marquee {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}












.btn-arrow{
  width:fit-content;
  height:3.8rem;
  padding:1.2rem 0;
  display:flex;
  grid-gap:0.8rem;
  align-items:center;
  color:var(--dark-color);
  font-size:1.6rem;
  line-height:0.8;
  transition:all var(--animation-default);
  position:relative;
  text-shadow:0px 3.8rem 0px var(--dark-color);
  overflow:hidden;
}
.btn-arrow .label{
  transform:translateY(0%);
  transition:all var(--animation-default);
}

.btn-arrow::after{
  content:"";
  width:0%;
  height:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  transition:all var(--animation-default);
}

body.light .btn-arrow::after{
  background-color:var(--accent);
}
body.dark .btn-arrow::after{
  background-color:var(--dark-color);
}


.btn-arrow:hover{
  padding:1.2rem 2.4rem;
}
body.dark .btn-arrow:hover{
  color:var(--white);
  text-shadow:0px 3.8rem 0px var(--white);
}

.btn-arrow:hover .label{
  transform:translateY(-3.7rem);
}

.btn-arrow:hover::after{
  width:100%;
}


@media only screen and (max-width: 500px) {

  .btn-arrow{
    height:1.6rem;
    padding:0;
    font-size:1.4rem;
  }

}







.theme-block{
  width:100%;
  height:100vh;
  height:100dvh;
  will-change: transform, filter, opacity;
}

.theme-block .content{
  width:100%;
  height:100%;
  padding:9rem 22.7rem;
}

@media only screen and (max-width: 500px) {

  .theme-block .content{
    width:100%;
    height:100%;
    padding:2rem;
  }

}




/*
body.light .theme-block{ background-color: rgba(248, 248, 248, 0.80); }
body.dark .theme-block{ background-color: var(--black); }
*/