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

	--container-grid-column:		100px;
	--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 */

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

	/* Gutter */
	--gutter: 						20px;
	--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.50); /* 10px */
	--gutter-200:					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 */

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

	/* Asigned Colors */
	--color-primary:				var(--color-black, #000000);
	--color-secondary:				var(--color-white, #FFFFFF);

    --color-heading:                var(--color-black);
    --color-heading-white:          var(--color-white);
    --color-text:                   var(--color-black);
    --color-text-white:             var(--color-white);

	/*******************/
	/* Typography ******/
	/*******************/
	--ff-heading:					"HelveticaNeueGreek-Bold", serif;
	--ff-text:						"HelveticaNeueGreek-Regular", sans-serif;
	--ff-text-700:					"HelveticaNeueGreek-Bold", sans-serif;

	/*--fs-h-900:						60px;  H1 */
	/*--fs-h-800:						40px;  H2 */
	--fs-h-700:						24px; /* H3 */

	/*--fs-400:						16px;  Text */
	--fs-btn:						24px; /* Text */


	/*******************/
	/* Misc ************/
	/*******************/
	/* Transitions */
	--trans-duration: 				250ms;
	--trans: 						all var(--trans-duration) ease-in-out;

}

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

		/*******************/
		/* Typography ~60% */
		/*******************/
		--fs-h-900:						48px; /* H1 60px */
		--fs-h-800:						36px; /* H2 44px */
		--fs-h-700:						26px; /* H3 34px */
	}
}

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

		/*******************/
		/* Typography ~80% */
		/*******************/
		--fs-h-900:						36px; /* H1 60px */
		--fs-h-800:						22px; /* H2 44px */
		--fs-h-700:						20px; /* H3 34px */
		--fs-btn: 						20px;
	}
}


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

/* [Headings 700] */
@font-face {
	font-family: 'HelveticaNeueGreek-Bold';
	src: url('../assets/fonts/HelveticaNeueGreek-Bold.woff2') format('woff2'),
		 url('../assets/fonts/HelveticaNeueGreek-Bold.ttf') format('truetype');
}

/* [Text 400] */
@font-face {
	font-family: 'HelveticaNeueGreek-Regular';
	src: url('../assets/fonts/HelveticaNeueGreek-Regular.woff2') format('woff2'),
		 url('../assets/fonts/HelveticaNeueGreek-Regular.ttf') format('truetype');
}

/* [Text 700] */
@font-face {
	font-family: 'HelveticaNeueGreek-Bold';
	src: url('../assets/fonts/HelveticaNeueGreek-Bold.woff2') format('woff2'),
		 url('../assets/fonts/HelveticaNeueGreek-Bold.ttf') format('truetype');
}

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