:root{
	/*******************/
	/* Layout **********/
	/*******************/
	--container-fluid:				4096px; /* 2048px; */
	--container:					calc(12 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1540px */

	--container-grid-column:		96px; /* 110px */
	--container-grid-gap:			20px;
	--container-grid-column-gap:	calc(var(--container-grid-column, 110px) + var(--container-grid-gap, 20px));

	--col-12: 						calc(12 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1540px */
	--col-11: 						calc(11 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1410px */
	--col-10: 						calc(10 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1280px */
	--col-9: 						calc( 9 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1150px */
	--col-8: 						calc( 8 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1020px */
	--col-7: 						calc( 7 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  890px */
	--col-6: 						calc( 6 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  760px */
	--col-5: 						calc( 5 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  630px */
	--col-4: 						calc( 4 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  500px */
	--col-3:						calc( 3 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  370px */
	--col-2:						calc( 2 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  240px */
	--col-1:						calc( 1 * var(--container-grid-column-gap) - var(--container-grid-gap)); /*  110px */

	/* Paddings */
	--padding: 						20px;
	--padding-container-block:		calc(var(--padding) * 4.00); /* 80px */
	--padding-container-inline:		calc(var(--padding) * 2.50); /* 50px */

	--padding-container-block-05x:	calc(var(--padding-container-block) * 0.50);	/*  30px */
	--padding-container-block-2x:	calc(var(--padding-container-block) * 2.00);	/* 160px */

	--padding-button:				var(--gap-400) var(--gutter-600);
	--padding-input: 				var(--gap-400) var(--gap-500);

	/* Gap */
	--gap:	 						1rem; /* Scale: 16px */
	--gap-1000: 					calc(var(--gap) * 6.00);	/* 96px */
	--gap-900: 						calc(var(--gap) * 5.00);	/* 80px */
	--gap-800: 						calc(var(--gap) * 4.00);	/* 64px */
	--gap-700: 						calc(var(--gap) * 3.00);	/* 48px */
	--gap-600: 						calc(var(--gap) * 2.00);	/* 32px */
	--gap-500: 						calc(var(--gap) * 1.50);	/* 24px */
	--gap-400: 						calc(var(--gap) * 1.00);	/* 16px */
	--gap-300: 						calc(var(--gap) * 0.75);	/* 12px */
	--gap-200: 						calc(var(--gap) * 0.50);	/*  8px */
	--gap-100: 						calc(var(--gap) * 0.25);	/*  4px */

	--gap-global: 					calc(var(--gutter) * 6.00); /* 120px */
	--gap-row-in: 					calc(var(--gutter) * 1.00); /*  20px */
	--gap-row-out: 					calc(var(--gutter) * 2.00);	/*  40px */

	--gap-flow: 					calc(var(--gutter) * 1.00);	 /*  20px */
	--gap-form: 					calc(var(--gutter) * 1.00);	 /*  20px */
	--gap-header: 					var(--gap-700);


	/* Gutter */
	--gutter: 						20px;
	--gutter-900:					calc(var(--gutter) * 3.50); /* 70px */
	--gutter-800:					calc(var(--gutter) * 3.00); /* 60px */
	--gutter-700:					calc(var(--gutter) * 2.50); /* 50px */
	--gutter-600:					calc(var(--gutter) * 2.00); /* 40px */
	--gutter-500:					calc(var(--gutter) * 1.50); /* 30px */
	--gutter-400:					calc(var(--gutter) * 1.00); /* 20px */
	--gutter-300:					calc(var(--gutter) * 0.75); /* 15px */
	--gutter-200:					calc(var(--gutter) * 0.50); /* 10px */
	--gutter-100:					calc(var(--gutter) * 0.25); /*  5px */

	/* Border Radius */	
	--br:							8px;
	--br-900: 						calc(var(--br) * 5.00); /* 40px */
	--br-800: 						calc(var(--br) * 4.00); /* 32px */
	--br-700: 						calc(var(--br) * 3.00); /* 24px */
	--br-600: 						calc(var(--br) * 2.00); /* 16px */
	--br-500: 						calc(var(--br) * 1.50); /* 12px */
	--br-400: 						calc(var(--br) * 1.00); /*  8px */
	--br-300: 						calc(var(--br) * 0.75); /*  6px */
	--br-200: 						calc(var(--br) * 0.50); /*  4px */
	--br-100: 						calc(var(--br) * 0.25); /*  2px */

	--br-global: 					var(--br-900);
	--br-1000: 						96px;

	/* zIndex */
	--z-top: 						9010;

	--z-header-front:				5011;
	--z-header: 					5010;
	--z-header-behind:				5009;
	
	--z-aside-front:				2511;
	--z-aside: 						2510;
	--z-aside-behind:				2509;

	--z-select: 					2000;

	/* Height */
	--height-topbar: 				 48px;
	--height-header:				195px;
	--height-header--sticky:		 90px;
	
	--height-form-items: 			58px;
	--height-logo:		 			30px;
	--height-logo--sticky: 			30px;

	--height-sticky-top:			calc(var(--height-header--sticky));
	--height-sticky-top-gap:		calc(var(--height-header--sticky) + var(--gutter));
	
	/* Width */

	/* Sizes */
	--size-400: 					min(15vw, 268px);
	--size-300: 					112px;
	--size-200: 					 60px;
	--size-100: 					 32px;

	/*******************/
	/* Color ***********/
	/*******************/
	--color-white: 					#FFFFFFFF;	/* 100% Opacity */
	--color-white-90: 				#FFFFFFE6;	/*  90% Opacity */
	--color-white-80: 				#FFFFFFCC;	/*  80% Opacity */
	--color-white-70: 				#FFFFFFB3;	/*  70% Opacity */
	--color-white-60: 				#FFFFFF99;	/*  60% Opacity */
	--color-white-50: 				#FFFFFF80;	/*  50% Opacity */
	--color-white-40: 				#FFFFFF66;	/*  40% Opacity */
	--color-white-30: 				#FFFFFF4D;	/*  30% Opacity */
	--color-white-20: 				#FFFFFF33;	/*  20% Opacity */
	--color-white-10: 				#FFFFFF1A;	/*  10% Opacity */
	--color-white-05: 				#FFFFFF0D;	/*   5% Opacity */

	--color-black: 					#000000FF;	/* 100% Opacity */
	--color-black-90: 				#000000E6;	/*  90% Opacity */
	--color-black-80: 				#000000CC;	/*  80% Opacity */
	--color-black-70: 				#000000B3;	/*  70% Opacity */
	--color-black-60: 				#00000099;	/*  60% Opacity */
	--color-black-50: 				#00000080;	/*  50% Opacity */
	--color-black-40: 				#00000066;	/*  40% Opacity */
	--color-black-30: 				#0000004D;	/*  30% Opacity */
	--color-black-20: 				#00000033;	/*  20% Opacity */
	--color-black-10: 				#0000001A;	/*  10% Opacity */
	--color-black-05: 				#0000000D;	/*   5% Opacity */

	/* Init Colors */
	--init-primary-400:	 			#D69763;
	--init-primary-400-hsl:	 		27, 58%, 61%; 	/* #D69763 */
	
	--init-secondary-400:	 		#C38653;
	--init-secondary-400-hsl:	 	27, 48%, 55%; 	/* #C38653 */
	--init-secondary-410-hsl:	 	27, 48%, 60%; 	/* #C38653 */

	--init-accent-400: 				#D69763;
	--init-accent-400-hsl: 			27, 58%, 61%; 	/* #D69763 */
	--init-accent-410-hsl: 			27, 58%, 66%; 	/* #617567 */

	--init-text-400: 				#545454;
	--init-text-400-hsl: 			0, 0%, 33%; 	/* #545454 */

	--init-grey-400: 				#C2C2C2;

	--init-background: 				#FFFFFF;
	--init-background-500:			#FBF5EF;
	--init-background-600:			#F6F0EA;

	/* Asigned Colors */
	--color-primary:				var(--init-primary-400);
	--color-secondary:				var(--init-secondary-400);
	
	--color-heading:				hsla(var(--init-primary-400-hsl), 1.0);
	--color-text:					var(--init-text-400);
	--color-btn:					var(--color-white);
	
	--color-accent:					hsla(var(--init-accent-400-hsl), 1.0);
	--hover-accent:					hsla(var(--init-accent-410-hsl), 1.0);
	
	--color-heading-white: 			var(--color-white);
	--color-text-white: 			var(--color-white);
	
	--color-background:				var(--init-background);
	--color-background-500:			var(--init-background-600);
	--color-header:					var(--color-text-white);
	--color-label:					var(--color-heading);
	/* --color-border:					var(--init-grey-400);
	--color-placeholder:			hsla(var(--init-primary-400-hsl), 0.6);
	--color-input:					hsla(var(--init-primary-400-hsl), 1.0); */
	

	/*******************/
	/* Typography ******/
	/*******************/
	--ff-h-400:						"Neutra2TextGreek-Bold", serif;
	--ff-400:						"Neutra2DispGr-Medium", sans-serif;
	--ff-700:						"Neutra2DispGr-Bold", sans-serif;
	
	--fs-h-900:						min(5vw, 94px); /* Heading */
	--fs-h-800:						48px; /* Heading */
	--fs-h-700:						40px; /* Heading */
	--fs-h-600:						36px; /* Heading */
	--fs-h-500:						32px; /* Heading */
	--fs-h-400:						16px; /* Heading */

	--fs-400:						26px; /* Text */
	--fs-300:						18px; /* Text */
	
	--lh-900:						1.90;
	--lh-800:						1.80;
	--lh-700:						1.70;
	--lh-600:						1.60;
	--lh-500:						1.50;
	--lh-400:						1.40;
	--lh-300:						1.30;
	--lh-200:						1.20;
	--lh-100:						1.10;

	--ls-300: 						0.30em;
	--ls-200: 						0.20em;
	--ls-100: 						0.10em;

	--ff-heading:					var(--ff-h-400);
	--ff-text:						var(--ff-400);
	--ff-label:						var(--ff-h-400);
	--ff-btn:						var(--ff-h-400);

	--fs-h1: 						var(--fs-h-900);
	--fs-h2: 						var(--fs-h-800);
	--fs-h3: 						var(--fs-h-700);
	--fs-h4: 						var(--fs-h-600);
	--fs-h5: 						var(--fs-h-500);
	--fs-h6: 						var(--fs-h-400);
	
	--fs-text:						var(--fs-400); 	/* Text */
	--fs-btn:						var(--fs-h-400); 	/* Button */	
	--fs-label:						var(--fs-400); 	/* Label */
	--fs-header: 					15px; 			/* Header */
	--fs-footer: 					var(--fs-300); 	/* Footer */
	
	--lh-heading: 					var(--lh-100);
	--lh-text: 						var(--lh-200);
	--lh-btn:	 					var(--lh-100);
	--lh-label: 					var(--lh-heading, var(--lh-100, 1.10));

	--ls-heading: 					var(--ls-200);
	--ls-label: 					var(--ls-100);
	/* --ls-btn: 						var(--ls-100); */
	
	/*******************/
	/* Misc ************/
	/*******************/
	/* Images */
	--image-aspect-ratio-lp: 		3/2; /* 1.5000 */
	--image-aspect-ratio-sq: 		3/3; /* 1.0000 */
	--image-aspect-ratio-pr: 		2/3; /* 0.6667 */
		
	--image-overlay: 				var(--color-black-20);

	/* Border */
	--border: 						1px solid var(--color-border);

	/* Box Shadow */
	--box-shadow: 					0px 12px 32px 0px var(--color-black-10);

	/* Transitions */	
	--trans-duration: 				 250ms;
	--trans-duration-600: 			 calc(2.00 * var(--trans-duration));
	--trans-duration-500: 			 calc(1.50 * var(--trans-duration));
	--trans-duration-400: 			 calc(1.00 * var(--trans-duration));
	--trans-duration-300:			 calc(0.75 * var(--trans-duration));

	--trans: 						all var(--trans-duration) ease-in-out;
	--trans-600: 					all var(--trans-duration-600) ease-in-out;
	--trans-500: 					all var(--trans-duration-500) ease-in-out;
	--trans-300:					all var(--trans-duration-300) ease-in-out;
	
	--trans-image: 					all var(--trans-duration-500) cubic-bezier(0,0,.50,1);
		
	--transform-image:				scale(1.05);
	--transform-image-alt:			scale(0.90);
	--transform-select-arrow:		rotate(180deg);

	/* Animations */
	--animation-spinner: 			spinner 1.5s forwards linear infinite;
}

@media(max-width: 1024px){
	:root{
		/*******************/
		/* Layout **********/
		/*******************/
		/* Paddings */
		--padding-container-block:		calc(var(--padding) * 3.00);	/* 60px */
		--padding-container-inline:		calc(var(--padding) * 1.50);	/* 30px */

		--padding-container-block-05x:	calc(var(--padding-container-block) * 0.50);	/*  30px */
		--padding-container-block-2x:	calc(var(--padding-container-block) * 1.50);	/*  90px */

		--padding-button: 				var(--gap-300) var(--gap-500);
		
		--gap-global: 					calc(var(--gutter) * 4.00); /* 80px */

		--br-1000: 						140px;

		/* Sizes */
		--size-400: 					min(50vw, 148px);
		--size-300: 					75px;
		--size-200: 					46px;
		--size-100: 					28px;

		/* Height */
		/* --height-header: 				70px; */
		--height-header--sticky: 		70px;
		--height-logo: 					22px;
		--height-logo--sticky: 			var(--height-logo);

		/*******************/
		/* Typography ~80% */
		/*******************/			
		--fs-h-900:						38px;
		--fs-h-800:						26px;
		--fs-h-700:						24px;
		--fs-h-600:						22px;

		--fs-400: 						22px;
	}
}

@media(max-width: 767px){
	:root{
		/*******************/
		/* Layout **********/
		/*******************/
		/* Paddings */
		--padding-container-block:		calc(var(--padding) * 4.50);	/* 90px */
		--padding-container-inline:		calc(var(--padding) * 1.00);	/* 20px */

		--padding-container-block-05x:	calc(var(--padding-container-block) * 0.50);	/*  25px */
		--padding-container-block-2x:	calc(var(--padding-container-block) * 1.50);	/*  75px */
		
		--height-topbar: 				34px;

		--br-1000: 						70px;
		
		/*******************/
		/* Typography ~60% */
		/*******************/
		--fs-h-900:						48px; /* Heading */
		

		/* --fs-400:						13px; */
		--fs-300:						16px;

		--fs-header: 					13px;
	}
}


/*************************************************************************************************************
***** TYPOGRAPHY *********************************************************************************************
***** https://web.dev/articles/font-best-practices ***********************************************************
**************************************************************************************************************/
/* Serif 400 [Text] */
@font-face {
	font-family: 'Neutra2TextGreek-Bold';
	src: url('../fonts/Neutra2TextGreek-Bold.woff2') format('woff2'),
		 url('../fonts/Neutra2TextGreek-Bold.ttf') format('truetype');
}

/* Sans Serif 400 [Text] */
@font-face {
	font-family: 'Neutra2DispGr-Medium';
	src: url('../fonts/Neutra2DispGr-Medium.woff2') format('woff2'),
		 url('../fonts/Neutra2DispGr-Medium.ttf') format('truetype');
}

/* Sans Serif 400 [Text] */
@font-face {
	font-family: 'Neutra2DispGr-Bold';
	src: url('../fonts/Neutra2DispGr-Bold.woff2') format('woff2'),
		 url('../fonts/Neutra2DispGr-Bold.ttf') format('truetype');
}


/* :root[lang="el"]{}
@media(max-width: 1024px){:root[lang="el"]{}} */

/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques */