/*************************************************************************************************************/
/***** 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-text, var(--lh-600, 1.6em));
	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;}

#modals{padding: 0;}

/**************************************************************************************************************/
/***** 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);
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}


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

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

.container{max-width: var(--container, 1540px);}
.container.container--normal {max-width: var(--col-12);}
.container.container--large  {max-width: var(--col-10);}
.container.container--medium {max-width: var(--col-8);}
.container.container--small  {max-width: var(--col-6);}

.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[data-columns="2"][data-columns-sidebar="right"]{
		grid-template-columns: 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);
		row-gap: var(--gutter);
	}
	.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;
}

/* -- 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);
	top: calc(var(--height-header--sticky, 0px) + var(--height-notification, 0px));
}
.sticky.gap{
	top: calc(var(--height-header--sticky, 0px) + var(--gutter, 20px));
	top: calc(var(--height-header--sticky, 0px) + var(--gutter, 20px) + var(--height-notification, 0px));
}

.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]{--lines:0;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}
[data-line-clamp="1"]{--lines:1;-webkit-line-clamp: var(--lines); line-clamp:var(--lines);}
[data-line-clamp="2"]{--lines:2;-webkit-line-clamp: var(--lines); line-clamp:var(--lines);}
[data-line-clamp="3"]{--lines:3;-webkit-line-clamp: var(--lines); line-clamp:var(--lines);}
[data-line-clamp="4"]{--lines:4;-webkit-line-clamp: var(--lines); line-clamp:var(--lines);}

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;
	word-break: break-word;
    font-family: var(--ff-heading, sans-serif);
    line-height: var(--lh-heading);
	color: var(--color-heading, #000000);
	letter-spacing: var(--ls-heading, 0em);
	/* text-transform: uppercase; */
}
label,.label{
	font-family: var(--ff-label, var(--ff-heading, sans-serif));
	font-size: var(--fs-label, var(--fs-text));
	line-height: var(--lh-label, var(--lh-heading, 1em));
	letter-spacing: var(--ls-label, var(--ls-heading, normal));
	color: var(--color-label, var(--color-heading, #000000));
	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);}

.ff-700				{font-family: var(--ff-700);}
.ff-600				{font-family: var(--ff-600);}
.ff-500				{font-family: var(--ff-500);}
.ff-400				{font-family: var(--ff-400);}
.ff-300				{font-family: var(--ff-300);}

h1,.h1,.fs-h-900    {font-size: var(--fs-h1, var(--fs-h-900));}
h2,.h2,.fs-h-800    {font-size: var(--fs-h2, var(--fs-h-800));}
h3,.h3,.fs-h-700    {font-size: var(--fs-h3, var(--fs-h-700));}
h4,.h4,.fs-h-600    {font-size: var(--fs-h4, var(--fs-h-600));}
h5,.h5,.fs-h-500    {font-size: var(--fs-h5, var(--fs-h-500));}
h6,.h6,.fs-h-400    {font-size: var(--fs-h6, 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);}
.text-grey{color: var(--color-text-grey);}

/*************************************************************************************************************/
/***** CORE **************************************************************************************************/
/*************************************************************************************************************/
/*
main > section:first-child,
main > section:first-of-type{
    padding-top: calc(var(--height-header));
}
*/
section{
	width: 100%;
	padding-block: var(--padding-container-block);
	padding-inline: var(--padding-container-inline);
}
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;
}

/*************************************************************************************************************/
/***** CONTENT ***********************************************************************************************/
/*************************************************************************************************************/
.content > * {
    margin-top: var(--gap-flow);
}
.content > *:first-child {
    margin-top: 0px;
}
.content ul{
	list-style: disc;
}
.content ul,
.content ol{
	padding-left: var(--gap, 16px);
	margin-left: var(--gap, 16px);
}
.content ul li::marker,
.content ol li::marker{
	color: var(--color-accent, #000000);
}
.content ul li:not(:first-child),
.content ol li:not(:first-child){
	margin-top: var(--gap-100);
}
.content a{
	font-family: var(--ff-text);
	color: var(--color-text, #000000);
	transition: var(--trans);
}
.content a.link-underline{
	font-family: var(--ff-text);
	padding-block: 0;
}
.content a:hover,
.content a:focus{
	color: var(--hover-accent, #111111);
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
	/* font-family: var(--ff-text, sans-serif); */
	color: var(--color-heading, #000000);
	line-height: var(--lh-heading);
	margin-top: var(--gap-900);
}
.content h1:first-child,
.content h2:first-child,
.content h3:first-child,
.content h4:first-child,
.content h5:first-child,
.content h6:first-child{
	margin-top: 0;
}
.content blockquote{
	position: relative;
	width: 100%;
	max-width: var(--col-8);
	margin-inline: auto;
	border: var(--border);
	border-color: var(--color-accent);
	padding-block: var(--gap-800);
	padding-inline: var(--gap-600);
}
.content blockquote p{
	max-width: var(--col-6);
	margin-inline: auto;
	font-family: var(--ff-h-400, var(--ff-heading));
	font-size: var(--fs-h3);
	line-height: var(--lh-200);
	color: var(--color-text);
}

.content * + blockquote,
.content blockquote + *{
	margin-top: var(--gap-global);
}
/* .content h1{font-size: var(--fs-h1, var(--fs-h-900));}
.content h2{font-size: var(--fs-h2, var(--fs-h-800));}
.content h3{font-size: var(--fs-h3, var(--fs-h-700));}
.content h4{font-size: var(--fs-h4, var(--fs-h-600));}
.content h5{font-size: var(--fs-h5, var(--fs-h-500));}
.content h6{font-size: var(--fs-h6, var(--fs-h-400));} */


/**************************************************************************************************************/
/***** UI ELEMENTS ********************************************************************************************/
/**************************************************************************************************************/
/***************************/
/***** BUTTONS *************/
/***************************/
.btn,
a.btn{
	position: relative;
	padding: var(--padding-button);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-300);
	font-family: var(--ff-text);
	font-size: var(--fs-btn);
	line-height: var(--lh-btn, var(--lh-100));
	letter-spacing: var(--ls-btn, 0em);
	text-align: center;
	border: 1px solid currentColor;
	border-radius: var(--br-elements);
}
.btn,
a.btn{
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
}
.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus{
	background-color: var(--hover-accent);
	border-color: var(--hover-accent);
	color: var(--color-white);
}
.btn,
a.btn,
.btn svg path,
a.btn svg path
{
	transition: var(--trans);
}
.btn.btn--icon,
a.btn.btn--icon{
	gap: var(--gap-400);
}
.btn__icon:empty,
.btn__label:empty{
	display: none;
}
.btn__icon,
.btn__label{
	display: flex;
	position: relative;
	pointer-events: none;
}

/**********************/
/* Button Alternative */
/**********************/
.btn.btn--alt,
a.btn.btn--alt{
	background-color: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}
.btn.btn--alt:hover,
.btn.btn--alt:focus,
a.btn.btn--alt:hover,
a.btn.btn--alt:focus{
	background-color: var(--color-accent);
	color: var(--color-text-white);
	border-color: var(--color-accent);
}
.btn.btn--alt:hover svg path,
.btn.btn--alt:focus svg path,
a.btn.btn--alt:hover svg path,
a.btn.btn--alt:focus svg path{
	fill: var(--color-white);
}

/**********************/
/* Button Light *******/
/**********************/
.btn.btn--light,
a.btn.btn--light{
	background-color: var(--color-text-white);
	border-color: var(--color-text-white);
	color: var(--color-text);
}
.btn.btn--light:hover,
.btn.btn--light:focus,
a.btn.btn--light:hover,
a.btn.btn--light:focus{
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-white);
}

/****************************/
/* Button Light Alternative */
/****************************/
.btn.btn--alt.btn--light,
a.btn.btn--alt.btn--light{
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}
.btn.btn--alt.btn--light:hover,
.btn.btn--alt.btn--light:focus,
a.btn.btn--alt.btn--light:hover,
a.btn.btn--alt.btn--light:focus{
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-text);
}
.btn.btn--alt.btn--light:hover svg path,
.btn.btn--alt.btn--light:focus svg path,
a.btn.btn--alt.btn--light:hover svg path,
a.btn.btn--alt.btn--light:focus svg path{
	fill: var(--color-accent);
}

/****************************/
/* Button Icon **************/
/****************************/
.btn.btn--icon svg path,
.btn.btn--icon:hover svg path,
.btn.btn--icon:focus svg path,
a.btn.btn--icon svg path,
a.btn.btn--icon:hover svg path,
a.btn.btn--icon:focus svg path{
	fill: var(--color-white);
}

/****************************/
/* Button Alternative Icon **/
/****************************/
.btn.btn--alt.btn--icon svg path,
a.btn.btn--alt.btn--icon svg path{
	fill: var(--color-accent);
}
.btn.btn--alt.btn--icon:hover svg path,
.btn.btn--alt.btn--icon:focus svg path,
a.btn.btn--alt.btn--icon:hover svg path,
a.btn.btn--alt.btn--icon:focus svg path{
	fill: var(--color-white);
}

/****************************/
/* Button Alternative Icon **/
/****************************/
.btn.btn--link{
	font-family: var(--ff-text);
	font-size: var(--fs-text);
}
.btn.btn--link,
.btn.btn--link:hover,
.btn.btn--link:focus{
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	border: 0;
	color: var(--color-accent);
}

.btn.btn--link.btn--icon svg path,
.btn.btn--link.btn--icon:hover svg path,
.btn.btn--link.btn--icon:focus svg path{
	fill: var(--color-accent);
}

/********************/
/* Button Icon Move */
/********************/
[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);
	line-height: var(--lh-100);
	color: inherit;
}
.link::before,
.link-underline::after{
	content: '';
	background-color: currentColor;
	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, var(--trans-duration)) 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;
}


/*************************************************************************************************************/
/***** GLOBAL INTERACTIVE ELEMENTS ***************************************************************************/
/*************************************************************************************************************/
/********************/
/* Select ***********/
/********************/
[data-widget="select"]{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gutter);
}
@media(min-width: 1025px){
	[data-widget="select"]{
		flex-direction: row;
		align-items: center;
	}
}

.select{
	cursor: pointer;
	display: inline-block;
	position: relative;
	width: 220px;
	height: var(--height-form-items);
}
.select-styled,
.select-options{
	font-size: var(--fs-300);
}
.select-styled{
	padding-inline: var(--gap);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--color-white);
	/* background-color: var(--color-background); */
	border: var(--border);
	border-radius: var(--br-global);
	display: flex;
	align-items: center;
	user-select: none;
	-webkit-user-select: none;
}
.select-styled:after{
	--arrow-width: 16px;
	--arrow-height: 10px;
	content: "";
	position: absolute;
	top: calc(50% - var(--arrow-height) / 2);
	right: var(--gap);
	width: var(--arrow-width);
	height: var(--arrow-height);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: var(--icon-select);
	transition: var(--trans);
}
.select-styled.active:after{
	transform: var(--transform-select-arrow);
}
.select-styled.active + .select-options{
	display: block;
}
.select-options{
	display: none;
	position: absolute;
	top: calc(100% + var(--gap-100));
	right: 0;
	left: 0;
	z-index: var(--z-select, 3000);
	margin: 0;
	padding-block: var(--gap-200);
	list-style: none;
	background-color: var(--color-white);
	border: var(--border);
	border-radius: var(--br-global);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}
.select-options li{
	margin: 0;
	padding-block: var(--gap-100);
	padding-inline: var(--gap-500);
	transition: var(--trans);
}
.select-options li:hover,
.select-options li:focus,
.select-options li.is-selected{
	background-color: var(--color-background);
	color: var(--color-heading);
}
.select-options li[rel=""]{
	display: none;
}

/***************************/
/* [Widget] Accordion ******/
/***************************/
[data-widget="accordion"] .accordion{
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-background);
}
[data-widget="accordion"] .accordion-tab{
    border-bottom: var(--border);
}
[data-widget="accordion"] .accordion-head,
[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon,
[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon svg rect{
	transition: var(--trans);
}
[data-widget="accordion"] .accordion-head{
	width: 100%;
	position: relative;
	padding-block: var(--gap-500);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-500);
	font-family: var(--ff-text);
	font-size: var(--fs-400);
	color: var(--color-text, #000000);
	cursor: pointer;
}
[data-widget="accordion"] .accordion-content{
	height:0;
	overflow: hidden;
}
[data-widget="accordion"] .accordion-content .content{
    padding-top: 0;
	padding-inline: var(--gutter-400);
	padding-bottom: var(--gutter-600);
}
[data-widget="accordion"] .accordion-content .content,
[data-widget="accordion"] .accordion-content .content *{
	pointer-events: none;
    font-family: var(--ff-text);
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    color: var(--color-text);
}
[data-widget="accordion"] .accordion-content .content a,
[data-widget="accordion"] .accordion-content .content input,
[data-widget="accordion"] .accordion-content .content label,
[data-widget="accordion"] .accordion-content .content button{
    pointer-events: all;
}
[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon{
	display: flex;
}
[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon,
[data-widget="accordion"] .accordion-tab .accordion-head .accordion--icon svg rect{
	flex-shrink: 0;
}
[data-widget="accordion"] .accordion-tab[aria-selected="true"] .accordion--text{
	color: var(--color-heading);
}
[data-widget="accordion"] .accordion-tab[aria-selected="true"] .accordion-head .accordion--icon svg path{
	fill: var(--color-heading);
}

[data-widget="accordion"] .accordion-tab[aria-selected="true"] .accordion-head .accordion--icon{
	transform: var(--transform-select-arrow);
}

/***************************/
/* [Widget] Tabs ***********/
/***************************/
[data-widget="tabs"] .tabs-controls::-webkit-scrollbar {
    height: 0; /* Chrome, Safari, Edge */
}
[data-widget="tabs"] .tabs-controls::-webkit-scrollbar-track,
[data-widget="tabs"] .tabs-controls::-webkit-scrollbar-thumb {
    display: none; /* Εξαφανίζει το track και το thumb */
}
[data-widget="tabs"] .tabs-controls {
	margin-bottom: var(--gap-500);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	gap: var(--gap-500);
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
[data-widget="tabs"] .tabs-control{
	width: auto;
	position: relative;
	padding-block: var(--gap-200);
	font-family: var(--ff-heading);
	font-size: var(--fs-300);
	color: var(--color-text);
	text-transform: uppercase;
 	cursor: pointer;
	flex-shrink: 0;
}
[data-widget="tabs"] .tabs-control[aria-selected]:before{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	background-color: var(--color-accent);
	transition: var(--trans);
}
[data-widget="tabs"] .tabs-panel .item__description{
	color: var(--color-text);
}
[data-widget="tabs"] .tabs-control[aria-selected="true"]{
	color: var(--color-heading);
}
[data-widget="tabs"] .tabs-control[aria-selected="true"]:before{
	height: 2px;
}
[data-widget="tabs"] .tabs-panel[aria-selected="false"]{
	display: none;
}
[data-widget="tabs"] .tabs-panel[aria-selected="true"]{
	display: flex;
}
@media(min-width:1025px){
	[data-widget="tabs"] .tabs-control{
		flex-shrink: 1;
	}
}

/********************/
/* Checkbox *********/
/********************/
.checkbox{
    --size: 16px;
    position: relative;
    min-height: var(--size, 16px);
}
.checkbox label{
	font-family: var(--ff-text);
}
.checkbox input[type="checkbox"]{
    width: initial;
    height: initial;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    position: absolute;
}
.checkbox input[type="checkbox"] + label{
    --top: 8px;
    position: relative;
    display: inline-block;
    padding-left: calc(var(--size, 16px) + var(--gap-200, 8px));
    line-height: calc(var(--size, 16px) + var(--top, 4px));
	color: var(--color-text);
    cursor: pointer;
}
.checkbox input[type="checkbox"] + label:before{
    --color-border: var(--color-accent);
    content:'';
    width: var(--size, 16px);
    height: var(--size, 16px);
    position: absolute;
    top:0;
    left: 0;
    display: inline-block;
    background-color: var(--color-background);
    border: 1px solid var(--color-border, #000000);
	border-radius: var(--br-200);
	border-radius: var(--br-global);

    vertical-align: middle;
    transition: var(--trans);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}
.checkbox input[type="checkbox"] + label:after{
    content: '';
    width: var(--size, 16px);
    height: var(--size, 16px);
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    opacity: 0;
    transition: var(--trans);
    transition-delay: var(--trans-duration-300, 100ms);
}
.checkbox input[type="checkbox"] + label:before,
.checkbox input[type="checkbox"] + label:after{
    top: calc(var(--top) * 0.5);
}
.checkbox input[type="checkbox"] + label:after{
	background-image: var(--icon-checkbox--white);
}
.checkbox input[type="checkbox"]:checked + label:before{
    background-color: var(--color-accent, #000000);
    border-color: var(--color-accent, #000000);
}
.checkbox input[type="checkbox"]:checked + label:after{
    opacity: 1;
}


/*******************************/
/* Horizontal Navigation *******/
/*******************************/
nav[data-type="horizontal-navigation"] ul::-webkit-scrollbar {
    height: 0; /* Chrome, Safari, Edge */
}
nav[data-type="horizontal-navigation"] ul::-webkit-scrollbar-track,
nav[data-type="horizontal-navigation"] ul::-webkit-scrollbar-thumb {
    display: none; /* Εξαφανίζει το track και το thumb */
}
nav[data-type="horizontal-navigation"] ul{
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
nav[data-type="horizontal-navigation"] ul{
	display: flex;
	justify-content: flex-start;
	gap: var(--gutter-500);
}
nav[data-type="horizontal-navigation"] ul li{
    flex-shrink: 0;
}