/*************************************************************************************************************/
/***** GENERAL ***********************************************************************************************/
/*************************************************************************************************************/
html{
	overflow-x: hidden;
	scrollbar-gutter: stable; /* both-edges */
}
html,
body{
	background-color: var(--color-background, #FFFFFF);
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	background-color: var(--color-background);
	font-family: var(--ff-text, sans-serif);
	font-size: var(--fs-400);
	line-height: var(--lh-700);
	color: var(--color-text);
}

.dev{outline: 1px solid red;}
.dev-screen-center::before{content: '';position: fixed;top: 0;left: 50%;width: 1px;height: 100%;background-color: red;z-index: 9999;}
.dev-screen-center::after {content: '';position: fixed;top: 50%;left: 0;width: 100%;height: 1px;background-color: red;z-index: 9999;}

/**************************************************************************************************************/
/***** RESET **************************************************************************************************/
/**************************************************************************************************************/
*,
*:before,
*:after{
	margin: 0;
	padding: 0;
	border:0;
	box-sizing: border-box;
	word-break: break-word;
}

/* Scroll */
*{scrollbar-width: thin;scrollbar-color: var(--color-accent) #D9D9D9;}

*::-webkit-scrollbar {width: 10px;height: 0px;}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb{border-radius: 0px;}
*::-webkit-scrollbar-track {background-color: #D9D9D9;}
*::-webkit-scrollbar-thumb {background: var(--color-accent);}

/* Selection */
::-moz-selection{color: white;background-color: var(--color-accent, #000000);}
::selection {color: white;background-color: var(--color-accent, #000000);}
.error::selection {background-color: var(--color-error, #000000);}

:focus,
*:focus,
a:focus,
input:focus,
input:focus-visible,
textarea:focus,
select:focus,
button:focus{
	outline: none;
}
a,
a:hover,
a:focus,
a:visited{
	text-decoration: none;
	color: inherit;
}
label:empty{
	display: none !important;
}
b,
strong{
	font-weight: 700;
}
img,
picture{
	max-width: 100%;
	display: flex;
	-webkit-user-select: none;
	user-select: none;
}
button{
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}
button > *{
	pointer-events: none;
}
ul{
	list-style-type: none;
}
input,
textarea{
	font-family: var(--ff-text);
	font-size: var(--fs-text);
	line-height: var(--lh-text);
}
textarea{
	resize: none;
}
address{
	font-style: normal;
}
select{
	background-color: transparent;
}
code{
	display: block;
	border: 1px dashed var(--color-primary);
	background-color: var(--color-background, #F5F5F5);
	padding-block: var(--gap-100);
	padding-inline: var(--gap-300);
	border-radius: var(--br-200);
}

/*************************************************************************************************************
***** UTILITY ************************************************************************************************
**************************************************************************************************************/
/*************/
/* Layout ****/
/*************/
.container-fluid,
.container{
	width:100%;
	margin-inline:auto;
}

.container-fluid{max-width: var(--container-fluid, 4096px);}
.container{max-width: var(--container, 1540px);}

.row{
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	position: relative;
}

.col-12,.col-11,.col-10,
.col-9 ,.col-8 ,.col-7,
.col-6 ,.col-5 ,.col-4,
.col-3 ,.col-2 ,.col-1{
	width: 100%;
	margin-inline: auto;
}

.col-left{margin-left: 0;}
.col-right{margin-right: 0;}

.col-12{max-width: var(--col-12, 1540px) !important;} /* 1540px */
.col-11{max-width: var(--col-11, 1410px) !important;} /* 1410px */
.col-10{max-width: var(--col-10, 1280px) !important;} /* 1280px */
.col-9 {max-width: var( --col-9, 1150px) !important;} /* 1150px */
.col-8 {max-width: var( --col-8, 1020px) !important;} /* 1020px */
.col-7 {max-width: var( --col-7,  890px) !important;} /*  890px */
.col-6 {max-width: var( --col-6,  760px) !important;} /*  760px */
.col-5 {max-width: var( --col-5,  630px) !important;} /*  630px */
.col-4 {max-width: var( --col-4,  500px) !important;} /*  500px */
.col-3 {max-width: var( --col-3,  370px) !important;} /*  370px */
.col-2 {max-width: var( --col-2,  240px) !important;} /*  240px */
.col-1 {max-width: var( --col-1,  110px) !important;} /*  110px */

/********************/
/* Margin & Padding */
/********************/
/* Margin */
.mt   {margin-top: var(--gap-400, 16px);}
.mt-9 {margin-top: var(--gap-900, 80px);}
.mt-8 {margin-top: var(--gap-800, 64px);}
.mt-7 {margin-top: var(--gap-700, 48px);}
.mt-6 {margin-top: var(--gap-600, 32px);}
.mt-5 {margin-top: var(--gap-500, 24px);}
.mt-4 {margin-top: var(--gap-400, 16px);}
.mt-3 {margin-top: var(--gap-300, 12px);}
.mt-2 {margin-top: var(--gap-200,  8px);}
.mt-1 {margin-top: var(--gap-100,  4px);}
.mt-0 {margin-top: 0 !important;}

.mb   {margin-bottom: var(--gap-400, 16px);}
.mb-9 {margin-bottom: var(--gap-900, 80px);}
.mb-8 {margin-bottom: var(--gap-800, 64px);}
.mb-7 {margin-bottom: var(--gap-700, 48px);}
.mb-6 {margin-bottom: var(--gap-600, 32px);}
.mb-5 {margin-bottom: var(--gap-500, 24px);}
.mb-4 {margin-bottom: var(--gap-400, 16px);}
.mb-3 {margin-bottom: var(--gap-300, 12px);}
.mb-2 {margin-bottom: var(--gap-200,  8px);}
.mb-1 {margin-bottom: var(--gap-100,  4px);}
.mb-0 {margin-bottom: 0 !important;}

.mr   {margin-right: var(--gap-400, 16px);}
.mr-9 {margin-right: var(--gap-900, 80px);}
.mr-8 {margin-right: var(--gap-800, 64px);}
.mr-7 {margin-right: var(--gap-700, 48px);}
.mr-6 {margin-right: var(--gap-600, 32px);}
.mr-5 {margin-right: var(--gap-500, 24px);}
.mr-4 {margin-right: var(--gap-400, 16px);}
.mr-3 {margin-right: var(--gap-300, 12px);}
.mr-2 {margin-right: var(--gap-200,  8px);}
.mr-1 {margin-right: var(--gap-100,  4px);}
.mr-0 {margin-right: 0 !important;}

.ml   {margin-left: var(--gap-400, 16px);}
.ml-9 {margin-left: var(--gap-900, 80px);}
.ml-8 {margin-left: var(--gap-800, 64px);}
.ml-7 {margin-left: var(--gap-700, 48px);}
.ml-6 {margin-left: var(--gap-600, 32px);}
.ml-5 {margin-left: var(--gap-500, 24px);}
.ml-4 {margin-left: var(--gap-400, 16px);}
.ml-3 {margin-left: var(--gap-300, 12px);}
.ml-2 {margin-left: var(--gap-200,  8px);}
.ml-1 {margin-left: var(--gap-100,  4px);}
.ml-0 {margin-left: 0 !important;}

.m-0  {margin: 0;}
.mx-0 {margin-inline: 0 !important;}
.my-0 {margin-block: 0 !important;}

.margin-auto{margin-inline: auto !important;}
.margin-left{margin-left: 0 !important;}
.margin-right{margin-right: 0 !important;}

/* Padding */
.pt   {padding-top: var(--gap-400, 16px);}
.pt-9 {padding-top: var(--gap-900, 80px);}
.pt-8 {padding-top: var(--gap-800, 64px);}
.pt-7 {padding-top: var(--gap-700, 48px);}
.pt-6 {padding-top: var(--gap-600, 32px);}
.pt-5 {padding-top: var(--gap-500, 24px);}
.pt-4 {padding-top: var(--gap-400, 16px);}
.pt-3 {padding-top: var(--gap-300, 12px);}
.pt-2 {padding-top: var(--gap-200,  8px);}
.pt-1 {padding-top: var(--gap-100,  4px);}
.pt-0 {padding-top: 0 !important;}

.pb   {padding-bottom: var(--gap-400, 16px);}
.pb-9 {padding-bottom: var(--gap-900, 80px);}
.pb-8 {padding-bottom: var(--gap-800, 64px);}
.pb-7 {padding-bottom: var(--gap-700, 48px);}
.pb-6 {padding-bottom: var(--gap-600, 32px);}
.pb-5 {padding-bottom: var(--gap-500, 24px);}
.pb-4 {padding-bottom: var(--gap-400, 16px);}
.pb-3 {padding-bottom: var(--gap-300, 12px);}
.pb-2 {padding-bottom: var(--gap-200,  8px);}
.pb-1 {padding-bottom: var(--gap-100,  4px);}
.pb-0 {padding-bottom: 0 !important;}

.pr   {padding-right: var(--gap-400, 16px);}
.pr-9 {padding-right: var(--gap-900, 80px);}
.pr-8 {padding-right: var(--gap-800, 64px);}
.pr-7 {padding-right: var(--gap-700, 48px);}
.pr-6 {padding-right: var(--gap-600, 32px);}
.pr-5 {padding-right: var(--gap-500, 24px);}
.pr-4 {padding-right: var(--gap-400, 16px);}
.pr-3 {padding-right: var(--gap-300, 12px);}
.pr-2 {padding-right: var(--gap-200,  8px);}
.pr-1 {padding-right: var(--gap-100,  4px);}
.pr-0 {padding-right: 0 !important;}

.pl   {padding-left: var(--gap-400, 16px);}
.pl-9 {padding-left: var(--gap-900, 80px);}
.pl-8 {padding-left: var(--gap-800, 64px);}
.pl-7 {padding-left: var(--gap-700, 48px);}
.pl-6 {padding-left: var(--gap-600, 32px);}
.pl-5 {padding-left: var(--gap-500, 24px);}
.pl-4 {padding-left: var(--gap-400, 16px);}
.pl-3 {padding-left: var(--gap-300, 12px);}
.pl-2 {padding-left: var(--gap-200,  8px);}
.pl-1 {padding-left: var(--gap-100,  4px);}
.pl-0 {padding-left: 0 !important;}

.py{padding-block: 	var(--padding-container-block) !important;}
.px{padding-inline: var(--padding-container-inline) !important;}

.p-0    {padding: 0;}
.px-0   {padding-inline: 0 !important;}
.py-0   {padding-block: 0 !important;}

@media(max-width: 1024px){
	/********************/
	/* Margin & Padding */
	/********************/
	/* Margin */
	.mt  {margin-top: var(--gap-400, 16px);}
	.mt-9{margin-top: var(--gap-700, 48px);}
	.mt-8{margin-top: var(--gap-600, 32px);}
	.mt-7,
	.mt-6,
	.mt-5{margin-top: var(--gap-500, 24px);}
	.mt-4{margin-top: var(--gap-400, 16px);}
	.mt-3{margin-top: var(--gap-300, 12px);}
	.mt-2{margin-top: var(--gap-200,  8px);}
	.mt-1{margin-top: var(--gap-100,  4px);}
	.mt-0{margin-top: 0 !important;}

	.mb  {margin-top: var(--gap-400, 16px);}
	.mb-9{margin-top: var(--gap-700, 48px);}
	.mb-8{margin-top: var(--gap-600, 32px);}
	.mb-7,
	.mb-6,
	.mb-5{margin-top: var(--gap-500, 24px);}
	.mb-4{margin-top: var(--gap-400, 16px);}
	.mb-3{margin-top: var(--gap-300, 12px);}
	.mb-2{margin-top: var(--gap-200,  8px);}
	.mb-1{margin-top: var(--gap-100,  4px);}
	.mb-0{margin-top: 0 !important;}

	/* Padding */
	.pt  {padding-top: var(--gap-400, 16px);}
	.pt-9{padding-top: var(--gap-700, 48px);}
	.pt-8{padding-top: var(--gap-600, 32px);}
	.pt-7,
	.pt-6,
	.pt-5{padding-top: var(--gap-500, 24px);}
	.pt-4{padding-top: var(--gap-400, 16px);}
	.pt-3{padding-top: var(--gap-300, 12px);}
	.pt-2{padding-top: var(--gap-200,  8px);}
	.pt-1{padding-top: var(--gap-100,  4px);}
	.pt-0{padding-top: 0 !important;}

	.pb  {padding-bottom: var(--gap-400, 16px);}
	.pb-9{padding-bottom: var(--gap-700, 48px);}
	.pb-8{padding-bottom: var(--gap-600, 32px);}
	.pb-7,
	.pb-6,
	.pb-5{padding-bottom: var(--gap-500, 24px);}
	.pb-4{padding-bottom: var(--gap-400, 16px);}
	.pb-3{padding-bottom: var(--gap-300, 12px);}
	.pb-2{padding-bottom: var(--gap-200,  8px);}
	.pb-1{padding-bottom: var(--gap-100,  4px);}
	.pb-0{padding-bottom: 0 !important;}
}

@media(max-width:767px){
	.px-xs-0{padding-inline: 	0 !important;}
	.pl-xs-0{padding-left: 		0 !important;}
	.pr-xs-0{padding-right: 	0 !important;}
	
	.pt-xs{padding-top: 		var(--padding-container-block) !important;}
	.py-xs{padding-block: 		var(--padding-container-block) !important;}

	.px-xs{padding-inline: 		var(--padding-container-inline) !important;}
	.pl-xs{padding-left: 		var(--padding-container-inline) !important;}
	.pr-xs{padding-right: 		var(--padding-container-inline) !important;}
}


/**********************/
/* Gaps ***************/
/**********************/
.gap{gap: var(--gap-400, 16px);}
.gap.gap--900{gap: var(--gap-900, 80px) !important;}
.gap.gap--800{gap: var(--gap-800, 64px) !important;}
.gap.gap--700{gap: var(--gap-700, 48px) !important;}
.gap.gap--600{gap: var(--gap-600, 32px) !important;}
.gap.gap--500{gap: var(--gap-500, 24px) !important;}
.gap.gap--400{gap: var(--gap-400, 16px) !important;}
.gap.gap--300{gap: var(--gap-300, 12px) !important;}
.gap.gap--200{gap: var(--gap-200,  8px) !important;}
.gap.gap--100{gap: var(--gap-100,  4px) !important;}

.gutter{gap: var(--gutter, 20px);}
.gutter.gutter--900{gap: var(--gutter-900, 70px) !important;}
.gutter.gutter--800{gap: var(--gutter-800, 60px) !important;}
.gutter.gutter--700{gap: var(--gutter-700, 50px) !important;}
.gutter.gutter--600{gap: var(--gutter-600, 40px) !important;}
.gutter.gutter--500{gap: var(--gutter-500, 30px) !important;}
.gutter.gutter--400{gap: var(--gutter-400, 20px) !important;}
.gutter.gutter--300{gap: var(--gutter-300, 15px) !important;}
.gutter.gutter--200{gap: var(--gutter-200, 10px) !important;}
.gutter.gutter--100{gap: var(--gutter-100,  5px) !important;}

/**********************/
/* Flex & Grid ********/
/**********************/
.flex,
.grid{
	width: 100%;
}

.justify-center {justify-content: center;}
.justify-start  {justify-content: flex-start;}
.justify-end    {justify-content: flex-end;}
.justify-between{justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}

.align-start{align-items: start;}
.align-center{align-items: center;}
.align-end{align-items: end;}

/* Flex */
.flex           {display: flex;}
.flex-wrap      {flex-wrap: wrap;}
.flex-nowrap    {flex-wrap: nowrap;}
.flex-column    {flex-direction: column;}
.flex-grow-1    {flex-grow: 1;}
.flex-grow-0    {flex-grow: 0;}
.flex-shrink-1  {flex-shrink: 1;}
.flex-shrink-0  {flex-shrink: 0;}
 
/* Grid */
.grid{display: grid;}
.grid[data-columns="0"]{--min: 400px;grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr));} /* auto */
.grid[data-columns="2"]{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid[data-columns="3"]{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid[data-columns="4"]{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid[data-columns="5"]{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid[data-columns="6"]{grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid[data-columns="8"]{grid-template-columns: repeat(8, minmax(0, 1fr));}

.grid[data-columns="2"][data-columns-sidebar],
.grid[data-columns="2"][data-columns-sidebar="right"]{grid-template-columns: 2fr 1fr;}
.grid[data-columns="2"][data-columns-sidebar="left"]{grid-template-columns: 1fr 2fr;}

@media(max-width: 1024px){
	.grid[data-columns]{
		row-gap: var(--gap-700);
	}
	.grid[data-columns="6"]{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.grid[data-columns="3"],
	.grid[data-columns="4"],
	.grid[data-columns="5"],
	.grid[data-columns="8"]{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid[data-columns="2"][data-columns-sidebar],
	.grid[data-columns="2"][data-columns-sidebar="left"]{
		grid-template-columns: 1fr 2fr;
	}
	.grid[data-columns="2"][data-columns-sidebar="right"]{
		grid-template-columns: 2fr 1fr;
	}
	.grid[data-columns="2"]{
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}
@media(max-width: 767px){
	.grid[data-columns],
	.grid[data-columns="0"],
	.grid[data-columns="2"],
	.grid[data-columns="3"],
	.grid[data-columns="4"],
	.grid[data-columns="5"],
	.grid[data-columns="6"],
	.grid[data-columns="8"],
	.grid[data-columns="2"][data-columns-sidebar],
	.grid[data-columns="2"][data-columns-sidebar="left"],
	.grid[data-columns="2"][data-columns-sidebar="right"]{
		grid-template-columns: 1fr;
		row-gap: var(--gap-600);
	}
	.grid[data-columns]:not(.gap){
		row-gap: 0;
	}
}

.grid .grid-column{width: 100%;position: relative;}
.grid-span-2{grid-column: span 2;grid-row: span 2;}
.grid-column-2{grid-column: span 2;}
.grid-row-2{grid-row: span 2;}

@media(min-width: 1025px){
	.grid.grid--lg-reverse .grid-column:last-child{order: 1;}
	.grid.grid--lg-reverse .grid-column:first-child{order: 2;}
}
@media(min-width: 768px){
	.grid.grid--md-reverse .grid-column:last-child{order: 1;}
	.grid.grid--md-reverse .grid-column:first-child{order: 2;}
}
@media(max-width: 767px){
	.grid.grid--xs-reverse .grid-column:first-child{order: 2;}
	.grid.grid--xs-reverse .grid-column:last-child{order: 1;}
}

/* -- List */
.list{width:100%;display: flex;flex-direction: column;}
.list.gap{gap: var(--gutter, 20px);}

.list[data-direction="horizontal"]{
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.list[data-direction="horizontal"] .item{
	margin: 0;
	width: auto;
	display: inline-flex;
	flex-direction: row;
}

/**********************/
/* Visibility *********/
/**********************/
.overflow-hidden{overflow: hidden;}

.hide,
.hidden{display: none !important;}
@media(min-width: 1025px){
	.hidden-lg{display: none !important;}

	.visible-lg{display: flex !important;}
	.visible-md{display: none !important;}
	.visible-xs{display: none !important;}
}
@media(max-width: 1024px){
	.hidden-md{display: none !important;}

	.visible-lg{display: none !important;}
	.visible-md{display: flex !important;}
	.visible-xs{display: none !important;}

	.visible-md.visible-xs{display: flex !important;}
}
@media(max-width: 767px){
	.hidden-xs{display: none !important;}
	.hidden-md{display: flex !important;}
	.hidden-lg{display: flex !important;}

	.visible-lg{display: none !important;}
	.visible-md{display: none !important;}
	.visible-xs{display: flex !important;}
	
	.visible-md.visible-xs{display: flex !important;}
}

/************/
/* Misc *****/
/************/
.relative{position: relative;}
.absolute{position: absolute;top: 0;left: 0;}

.sticky{position: sticky !important;top: var(--height-header--sticky, 0px);}
.sticky.gap{top: calc(var(--height-header--sticky, 0px) + var(--padding, 20px));}

.pointer-none{pointer-events: none;}
.pointer-all{pointer-events: all;}

.opacity-0{opacity: 0;}
.opacity-1{opacity: 1;}

.br{border-radius: var(--br-400,  8px);overflow: hidden;}
.br-9{border-radius: var(--br-900, 40px);}
.br-8{border-radius: var(--br-800, 32px);}
.br-7{border-radius: var(--br-700, 24px);}
.br-6{border-radius: var(--br-600, 16px);}
.br-5{border-radius: var(--br-500, 12px);}
.br-4{border-radius: var(--br-400,  8px);}
.br-3{border-radius: var(--br-300,  6px);}
.br-2{border-radius: var(--br-200,  4px);}
.br-1{border-radius: var(--br-100,  2px);}

@media(max-width: 767px){
	.order-xs-1{order: 1;}
	.order-xs-2{order: 2;}
}

/****************/
/* Accesibility */
/****************/
/* Remove animations for people who've turned them off*/
@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}
.sr-only{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/**************************************************************************************************************/
/***** TYPOGRAFY **********************************************************************************************/
/**************************************************************************************************************/
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}

.bold{font-weight: bold;}
.italic{font-style: italic;}
.uppercase{text-transform: uppercase;}
.underline,
.underline:hover{text-decoration: underline;}

[data-line-clamp]{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}
[data-line-clamp="1"]{-webkit-line-clamp: 1; line-clamp:1;}
[data-line-clamp="2"]{-webkit-line-clamp: 2; line-clamp:2;}
[data-line-clamp="3"]{-webkit-line-clamp: 3; line-clamp:3;}
[data-line-clamp="4"]{-webkit-line-clamp: 4; line-clamp:4;}

h1,h2,h3,
h4,h5,h6{all:unset;}

.heading,
.h0,.fs-h-1000,
h1,.h1,.fs-h-900,
h2,.h2,.fs-h-800,
h3,.h3,.fs-h-700,
h4,.h4,.fs-h-600,
h5,.h5,.fs-h-500,
h6,.h6,.fs-h-400
{
	width: 100%;
	display: block;
    font-family: var(--ff-heading, sans-serif);
    line-height: var(--lh-heading);
	color: var(--color-heading, #000000);
	word-break: break-word;
	/* letter-spacing: var(--ls-heading); */
	/* text-transform: uppercase; */
}

p,.p,.text{
	font-family: var(--ff-text, sans-serif);
	font-size: var(--fs-text, var(--fs-400));
	line-height: var(--lh-text, var(--lh-400));
    color: var(--color-text);
	color: inherit;
}

.ff-heading	 	{font-family: var(--ff-heading, sans-serif);}
.ff-text 	 	{font-family: var(--ff-text, sans-serif);}
.ff-label	 	{font-family: var(--ff-label, sans-serif);}

h1,.h1,.fs-h-900    {font-size: var(--fs-h-900);}
h2,.h2,.fs-h-800    {font-size: var(--fs-h-800);}
h3,.h3,.fs-h-700    {font-size: var(--fs-h-700);}
h4,.h4,.fs-h-600    {font-size: var(--fs-h-600);}
h5,.h5,.fs-h-500    {font-size: var(--fs-h-500);}
h6,.h6,.fs-h-400    {font-size: var(--fs-h-400);}

.fs-900             {font-size: var(--fs-900);}
.fs-800             {font-size: var(--fs-800);}
.fs-700             {font-size: var(--fs-700);}
.fs-600             {font-size: var(--fs-600);}
.fs-500             {font-size: var(--fs-500);}
.fs-400             {font-size: var(--fs-400);}
.fs-300             {font-size: var(--fs-300);}
.fs-200             {font-size: var(--fs-200);}
.fs-100             {font-size: var(--fs-100);}

/**************************************************************************************************************/
/***** COLORS *************************************************************************************************/
/**************************************************************************************************************/
/* Background */
.bg-primary{background-color: var(--color-primary);}
.bg-secondary{background-color: var(--color-secondary);}
.bg-accent{background-color: var(--color-accent);}
.bg-color{background-color: var(--color-background);}

/* Text */
.text-primary{color: var(--color-primary);}
.text-secondary{color: var(--color-secondary);}
.text-color{color: var(--color-text);}
.text-accent{color: var(--color-accent);}

/**************************************************************************************************************/
/***** UI ELEMENTS ********************************************************************************************/
/**************************************************************************************************************/
/***************************/
/***** BUTTONS *************/
/***************************/
[data-icon-move]{--delay: 100ms;--movement: 200%;}
[data-icon-move],
[data-icon-move] .btn__icon{display: flex;justify-content: center;align-items: center;}
[data-icon-move] .btn__icon{position: relative;overflow: hidden;}

[data-icon-move] .btn__icon svg{transition: var(--trans);}
[data-icon-move] .btn__icon svg:first-child{position: absolute;top: 0;left: 0;}
[data-icon-move] .btn__icon svg:last-child{transition-delay: var(--delay);}

[data-icon-move]:hover .btn__icon svg:last-child{transition-delay: 0ms;}
[data-icon-move]:hover .btn__icon svg:first-child{transition-delay: var(--delay);}

[data-icon-move="right"] .btn__icon svg:last-child {transform: translateX(0);}
[data-icon-move="right"] .btn__icon svg:first-child{top: 50%;left: 50%;transform: translate(calc(-1 * var(--movement) - 50%), -50%);}
[data-icon-move="right"]:hover .btn__icon svg:last-child{transform: translateX(calc(1 * var(--movement)));}
[data-icon-move="right"]:hover .btn__icon svg:first-child{transform: translate(-50% , -50%)}

[data-icon-move="down"] .btn__icon svg:last-child {transform: translateY(0);}
[data-icon-move="down"] .btn__icon svg:first-child{transform: translateY(calc(-1 * var(--movement)));}
[data-icon-move="down"]:hover .btn__icon svg:last-child{transform: translateY(calc(1 * var(--movement)));}
[data-icon-move="down"]:hover .btn__icon svg:first-child{transform: translateY(0);}

[data-icon-move="up"] .btn__icon svg:last-child {transform: translateY(0);}
[data-icon-move="up"] .btn__icon svg:first-child{transform: translateY(calc(1 * var(--movement)));}
[data-icon-move="up"]:hover .btn__icon svg:last-child{transform: translateY(calc(-1 * var(--movement)));}
[data-icon-move="up"]:hover .btn__icon svg:first-child{transform: translateY(0);}

[data-icon-move="left"] .btn__icon svg:last-child {transform: translateX(0);}
[data-icon-move="left"] .btn__icon svg:first-child{top: 50%;left: 50%;transform: translate(calc(1 * var(--movement) - 50%), -50%);}
[data-icon-move="left"]:hover .btn__icon svg:last-child{transform: translateX(calc(-1 * var(--movement)));}
[data-icon-move="left"]:hover .btn__icon svg:first-child{transform: translate(-50% , -50%)}

/***************************/
/***** LINKS ***************/
/***************************/
.link,
a.link,
.link-underline,
a.link-underline{
	padding-block: var(--gap-100);
	position: relative;
	display: inline-block;
	font-family: var(--ff-text);
	/* font-family: var(--ff-text-500); */
	line-height: var(--lh-100);
	color: inherit;
}

.link::before,
.link-underline::after{background-color: currentColor;content: '';position: absolute;bottom: -2px;bottom: 0px;left: 0;width: 100%;height: 1px;transform: scaleX(0);transform-origin: right bottom;transition: transform var(--trans-duration-600) cubic-bezier(0.4, 0, 0, 1);pointer-events: none;}
.link-underline::after{transform: scaleX(1);transform-origin: left bottom;}

.link:hover::before,
.link:focus::before{transform: scaleX(1);transform-origin: left bottom;}
.link-underline:hover::after,
.link-underline:focus::after{transform: scaleX(0);transform-origin: right bottom;}

/*************************************************************************************************************/
/***** CORE **************************************************************************************************/
/*************************************************************************************************************/
section{
	width: 100%;
	padding-block: var(--padding-container-block);
	padding-inline: var(--padding-container-inline);
}

/*
main > section:first-child,
main > section:first-of-type{
    padding-top: calc(var(--height-header));
}
*/

header section,
aside section,
section section{
	padding-block: 0;
	padding-inline: 0;
}
[data-prefix],
[data-suffix]{
	position: relative;
	gap: var(--gap-100);
	display: inline-flex;
	align-items: center;
}
[data-prefix]::before{
	content: attr(data-prefix);
}
[data-suffix]::after{
	content: attr(data-suffix);
}
[data-prefix=""]::before,
[data-suffix=""]::after{
	content: unset;
}