:root{
	/* Color */
	--color-primary:			#000000;
	--color-secondary:			#FDB52B;

	--color-white: 				#FFFFFF;	/* 100% Opacity */
	--color-white-80: 			#FFFFFFCC;	/*  80% Opacity */
	--color-white-50: 			#FFFFFF80;	/*  50% Opacity */
	--color-white-30: 			#FFFFFF4D;	/*  30% Opacity */
	--color-white-20: 			#FFFFFF33;	/*  20% Opacity */
	--color-white-10: 			#FFFFFF1A;	/*  10% Opacity */

	--color-text:				#000000;
	--color-accent:				#FDB52B;
	--color-accent-alt:			#8F6913;

	--color-grey: 				#949494;
	--color-placeholder:		var(--color-grey);

	--color-border:				#FFFFFF;
	--color-background: 		#FFFFFF;
	

	/* Typo */
	--ff-serif:					"PPCharlevoix-Regular", serif;
	--ff-sans:					"PPCharlevoix-Regular", sans-serif;
	
	--fs-900:					82px; /* H1 */
	--fs-800:					52px; /* H2 */
	--fs-700:					42px; /* H3 */

	--fs-600:					26px; /* Text */
	--fs-500:					22px; /* Text */
	--fs-400:					18px; /* Text */
	--fs-300:					16px; /* Text */
	--fs-200:					14px; /* Text */

	--fs-btn:					16px; /* Button*/

	--lh-400:					1.60;
	--lh-300:					1.40;
	--lh-200:					1.25;
	--lh-100:					1.00;

	--ls-100:					0.10em;

	/* 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-flow: 				calc(var(--gap) * 1.00);	/* 16px */
	--gap-form: 				calc(var(--gap) * 2.50);	/* 40px */
	

	/* Paddings */
	--padding: 					20px;
	--padding-pageX: 			calc(var(--padding) * 2.50);	/* 50px */
	--padding-sectionY:			calc(var(--padding) * 4.00);	/* 80px */
	--padding-sectionX:			calc(var(--padding) * 2.50);	/* 50px */

	--padding-sectionY-half:	calc(var(--padding-sectionY) * 0.50);	/* 40px */
	--padding-sectionY-double:	calc(var(--padding-sectionY) * 2.00);	/* 160px */
	--padding-sectionY-triple:	calc(var(--padding-sectionY) * 3.00);	/* 240px */

	--padding-button:			16px 26px;
	--padding-input: 			16px 32px;


	/* Width */
	--container-grid-column:	100px;
	--container-grid-gap:		 20px;

	--container-fluid:			2048px;
	--container:				calc(12 * var(--container-grid-column) + 11 * var(--container-grid-gap)); /* 1420px */

	--mxw-xl: 					calc(12 * var(--container-grid-column) + 11 * var(--container-grid-gap)); /* 1420px */
	--mxw-lg: 					calc(10 * var(--container-grid-column) +  9 * var(--container-grid-gap)); /* 1180px */
	--mxw-md: 					calc( 8 * var(--container-grid-column) +  7 * var(--container-grid-gap)); /*  960px */
	--mxw-sm: 					calc( 6 * var(--container-grid-column) +  5 * var(--container-grid-gap)); /*  700px */
	--mxw-xs: 					calc( 4 * var(--container-grid-column) +  3 * var(--container-grid-gap)); /*  450px */

	/* Height */
	--height-header:			162px;
	--height-header--sticky:	162px;

	/* Border Radius */
	--br:						32px;
	--br-400: 					calc(var(--br) * 1.00); /* 32px */

	/* Images */
	--image-shadow: 			#00000033; /* 20% */

	/* Transforms */
	--transform-image:			scale(1.05);
	--transform-arrow-down: 	rotate(-180deg);

	/* Transitions */
	--trans-duration-900: 		1000ms;
	--trans-duration-600: 		 500ms;
	--trans-duration-500: 		 350ms;
	--trans-duration: 			 250ms;
	--trans-duration-300:		 150ms;

	--trans-600: 				all var(--trans-duration-600) ease-in-out;
	--trans-500: 				all var(--trans-duration-500) ease-in-out;
	--trans: 					all var(--trans-duration) ease-in-out;
	--trans-300:				all var(--trans-duration-300) ease-in-out;

	--trans-image: 				all var(--trans-duration-900) cubic-bezier(0,0,.50,1);
	--trans-image-600:			all var(--trans-duration-600) cubic-bezier(0,0,.50,1);
}

@media(max-width: 1024px){
	:root{
		/* Typo */
		--fs-900:					62px; /* H1 82px */
		--fs-800:					42px; /* H2 52px */
		--fs-700:					36px; /* H3 42px */
		--fs-600:					26px; /* Text */
		--fs-500:					22px; /* Text */
		--fs-400:					16px; /* Text 18px */
		--fs-300:					14px; /* Text 16px */
		--fs-200:					13px; /* Text 14px */


		/* Paddings */
		--padding-pageX: 			calc(var(--padding) * 1.50); /* 30px */
		--padding-sectionY:			calc(var(--padding) * 3.00); /* 60px */
		--padding-sectionX:			calc(var(--padding) * 1.50); /* 30px */
	}
}

@media(max-width: 767px){
	:root{
		/* Typo */
		--fs-900:					42px; /* H1 */
		--fs-800:					38px; /* H2 */
		--fs-700:					32px; /* H3 */

		/* Paddings */
		--padding-pageX: 			calc(var(--padding) * 1.00);	/* 20px */
		--padding-sectionY:			calc(var(--padding) * 2.50);	/* 50px */
		--padding-sectionX:			calc(var(--padding) * 1.00);	/* 20px */
		--padding-input: 			15px 20px;
	}
}

/*************************************************************************************************************
***** TYPOGRAPHY *********************************************************************************************
**************************************************************************************************************/
/* Serif */
/*@font-face {
	font-family: 'BlackDiamond';
	src: url('../fonts/BlackDiamond.woff2') format('woff2'),
		 url('../fonts/BlackDiamond.ttf') format('truetype');
}*/

/* Sans Serif */
@font-face {
	font-family: 'PPCharlevoix-Regular';
	src: url('../fonts/PPCharlevoix-Regular.woff2') format('woff2'),
		 url('../fonts/PPCharlevoix-Regular.ttf') format('truetype');
}