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

	--container-grid-column:		110px; /* 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(--gap-600);
	--padding-button-small:			var(--gap-300) var(--gap-500);
	--padding-pils:					var(--gap-100) var(--gap-300);
	--padding-input: 				var(--gap-400) var(--gap-600);

	/* 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: 					calc(var(--gutter) * 2.00);	 /*  40px */

	--gap-sidebar: 					var(--gap-800);

	/* 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-600);
	--br-elements:					var(--br-800);

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

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

	--z-select: 					2000;

	/* Height */
	/* --height-header:				164px;
	--height-header--sticky:		112px;
	 */

	--height-header:				calc(var(--height-header-main) + var(--height-header-topbar));
	--height-header--sticky:		calc(112px + var(--height-header-topbar));
	
	--height-header-topbar:			40px;
	--height-header-main:			164px;

	--height-header-main--sticky:	90px;
	
	--height-form-items: 			58px;
	--height-logo:		 			100px;
	--height-logo--sticky: 			74px;

	--height-sticky-top:			calc(var(--height-header--sticky));
	--height-sticky-top-gap:		calc(var(--height-header--sticky) + var(--gutter));
	
	--height-hero-default: 			500px;
	--height-hero-normal: 			840px;
	--height-hero-jumbo: 			100svh;

	--height-cta-bar: 				74px;
	
	/* Width */
	--width-arrows-top: 			20px - 12px - 38px * 2;

	/* Sizes */
	--size-200: 					 50px;
	--size-100: 					 32px;

	/*******************/
	/* Misc ************/
	/*******************/
	/* Images */
	--image-aspect-ratio-lp: 		3/2; /* 1.5000 */
	--image-aspect-ratio-lp-alt: 	2/1; /* 2.0000 */
	--image-aspect-ratio-sq: 		3/3; /* 1.0000 */
	--image-aspect-ratio-pr: 		2/3; /* 0.6667 */
	--image-aspect-ratio-pr-alt: 	4/5; /* 0.8000 */

	--image-overlay: 				var(--color-black-20);

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

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

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

	/* Global Icons */
	--icon-checkbox:		 		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M9.67033 0.355531C10.1099 0.829573 10.1099 1.6037 9.67033 2.07774L4.50846 7.64447C4.0689 8.11851 3.35108 8.11851 2.91151 7.64447L0.330581 4.8611C-0.110194 4.38706 -0.110194 3.61294 0.330581 3.1389C0.770146 2.66485 1.48797 2.66485 1.92753 3.1389L3.70999 5.06116L8.07338 0.355531C8.51294 -0.11851 9.23076 -0.11851 9.67033 0.355531Z" fill="%23204390"/></svg>');
	--icon-checkbox--white: 		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M9.67033 0.355531C10.1099 0.829573 10.1099 1.6037 9.67033 2.07774L4.50846 7.64447C4.0689 8.11851 3.35108 8.11851 2.91151 7.64447L0.330581 4.8611C-0.110194 4.38706 -0.110194 3.61294 0.330581 3.1389C0.770146 2.66485 1.48797 2.66485 1.92753 3.1389L3.70999 5.06116L8.07338 0.355531C8.51294 -0.11851 9.23076 -0.11851 9.67033 0.355531Z" fill="white"/></svg>');
	
	--icon-select: 					url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M4.99226 5.42771C5.19421 5.62966 5.52078 5.62966 5.72058 5.42771L9.84773 1.30271C10.0497 1.10076 10.0497 0.774194 9.84773 0.57439C9.64578 0.374585 9.31921 0.372437 9.11941 0.57439L5.35964 4.33416L1.59773 0.572241C1.39578 0.370288 1.06921 0.370288 0.86941 0.572241C0.669606 0.774194 0.667457 1.10076 0.86941 1.30056L4.99226 5.42771Z" fill="%23204390"/></svg>');
	--icon-select--white: 			url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M4.99226 5.42771C5.19421 5.62966 5.52078 5.62966 5.72058 5.42771L9.84773 1.30271C10.0497 1.10076 10.0497 0.774194 9.84773 0.57439C9.64578 0.374585 9.31921 0.372437 9.11941 0.57439L5.35964 4.33416L1.59773 0.572241C1.39578 0.370288 1.06921 0.370288 0.86941 0.572241C0.669606 0.774194 0.667457 1.10076 0.86941 1.30056L4.99226 5.42771Z" fill="%23FFFFFF"/></svg>');

	/*******************/
	/* 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:	 			#173982;
	--init-primary-400-hsl:	 		221, 70%, 30%; 	/* #173982 */
	
	--init-secondary-400:	 		#204390;
	--init-secondary-400-hsl:	 	221, 64%, 35%; 	/* #204390 */
	--init-secondary-410-hsl:	 	221, 64%, 25%; 	/* #173169 */

	--init-accent-400: 				#173982;
	--init-accent-400-hsl: 			221, 70%, 30%; 	/* #173982 */
	--init-accent-410-hsl: 			221, 70%, 20%; 	/* #0F2657 */

	--init-text-400: 				#444444;
	--init-text-400-hsl: 			0, 0%, 27%; 	/* #444444 */

	--init-grey-400: 				#666666;
	--init-grey-300: 				#999999;
	--init-grey-200: 				#D6D6D6;

	--init-background: 				#FCFCFC;
	--init-background-accent: 		#eceef6;

	--init-color-orange:			#EE3D3D;
	--init-color-yellow: 			#F9B006;
	--init-color-blue: 				#2790F2;
	--init-color-grey: 				#B6B6B6;

	/* Asigned Colors */
	--color-primary:				var(--init-primary-400);
	--color-secondary:				var(--init-secondary-400);
	
	--color-heading:				var(--init-primary-400);
	--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-text-grey: 				var(--init-grey-400, #666666);
	--color-text-grey-alt: 			var(--init-grey-300, #999999);
	
	--color-background:				var(--init-background);
	--color-header:					var(--color-text-white);
	--color-label:					var(--color-heading);
	--color-input:					var(--color-text);
	--color-border:					var(--init-grey-200);
	--color-placeholder:			var(--init-grey-300);
	

	/*******************/
	/* Typography ******/
	/*******************/
	--ff-700:						"OpenSans-Bold", sans-serif;
	--ff-600:						"OpenSans-SemiBold", sans-serif;
	/* --ff-500:						"OpenSans-Medium", sans-serif; */
	--ff-400:						"OpenSans-Regular", sans-serif;
	
	--fs-h-900:						min(5vw, 60px); /* Heading */
	--fs-h-800:						min(4vw, 52px); /* Heading */
	--fs-h-700: 					var(--fs-800);
	--fs-h-600: 					var(--fs-600);

	--fs-800:						28px; /* Text */
	--fs-700:						22px; /* Text */
	--fs-600:						18px; /* Text */
	--fs-500:						16px; /* Text */
	--fs-400:						15px; /* Text */
	--fs-300:						14px; /* Text */
	--fs-200:						12px; /* 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-700);
	--ff-text:						var(--ff-400);
	--ff-label:						var(--ff-400);
	--ff-btn:						var(--ff-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-300); 	/* Button */	
	--fs-header: 					var(--fs-400);	/* Header */
	--fs-footer: 					var(--fs-400); 	/* Footer */
	--fs-label:						var(--fs-400); 	/* Label */
	
	--lh-heading: 					var(--lh-300);
	--lh-text: 						var(--lh-600);
	--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); */
}

@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 */
	
		/* Height */
		--height-header: 				120px;
		--height-logo: 					 70px;
		--height-header--sticky: 		 90px;
		--height-logo--sticky: 			var(--height-logo);

		--height-hero-default: 			380px;
		--height-hero-normal: 			600px;
		--height-hero-jumbo: 			100svh;

		/*******************/
		/* Typography ~80% */
		/*******************/			
		--fs-h-900:						30px;
		--fs-h-800:						28px;

		--fs-800: 						24px;
		--fs-700: 						18px;
		--fs-600: 						16px;
		--fs-500: 						15px;
		--fs-400: 						14px;
		--fs-300: 						13px;
		--fs-200: 						12px;

		--fs-label:						var(--fs-200); 	/* Label */
		
	}
}

@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 */
		

		
		/*******************/
		/* Typography ~60% */
		/*******************/
	}
}


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

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

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

/* Sans Serif 400 [Text] */
@font-face {
	font-family: 'OpenSans-Regular';
	src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
		 url('../fonts/OpenSans-Regular.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 */