/*https://css-tricks.com/almanac/properties/f/font/*/
/*https://getbootstrap.com/docs/4.5/layout/overview/*/
/*https://kenwheeler.github.io/slick/*/

:root{
	/* Color */
	--color-primary:			#000;
	--color-secondary:			#FFF;
	--color-text:				#000;
	--color-accent-hover:		#333;
	--color-grey:				#363636;
	--color-grey-light:			#979797;
	--color-sale:				#B3B3B3;
	--color-background:			#FAFAFA;
	--color-background-dark: 	#F5F5F5; /* rgba(222, 222, 222, 0.3) */
	--color-topbar:				#EFEFEF;
	--color-border:				#DEDEDE;
	--color-border-input:		#CACACA;
	
	--color-white:				hsla(0, 0%, 100%, 1);
	--color-black:				hsla(0, 0%, 0%, 1);
	
	/* Typo */
	--font-family-300:		"BwModelicaLGC-Light", Arial, Helvetica, sans-serif;
	--font-family-400:		"BwModelicaLGC-Regular", Arial, Helvetica, sans-serif;
	--font-family-500:		"BwModelicaLGC-Medium", Arial, Helvetica, sans-serif;
	--font-family-700:		"BwModelica-Bold", Arial, Helvetica, sans-serif;
	
	--font-size-h1:			42px;
	--font-size-h2:			32px;
	--font-size-h3:			18px;
	--font-size-h4:			12px;
	--font-size-text:		13px;
	--font-size-btn:		13px;
	--font-size-small:		12px;
	--font-size-tiny:		11px;
	--font-size-tiny-extra:	10px;

	--font-lh-normal:		1.25;
	--font-lh-h1:			1.19;
	--font-lh-h2:			1.56;
	--font-lh-body:			1.38;
	--font-lh-select:		1.50;
	--font-lh-description:	1.54;

	--font-ls-normal:		0px;
	--font-ls-tiny:			0.30px;
	--font-ls-small:		0.35px;
	--font-ls-medium:		0.50px;
	--font-ls-large:		0.85px;
	--font-ls-big:			1px;

	/* Paddings */
	--padding-section:		60px 30px;
	--padding-sec-header:	68px 30px 45px;
	--padding-button:		20px 40px;
	--padding-button-mini:	10px 20px;
	--padding-link:			5px 5px 5px 0px;
	--padding-input: 		16px 25px;
	--padding-menu-t:		25px;
	--padding-menu-b:		18px;
	--padding-arc-prod:		20px;
	--padding-arc-prod-coll:14px;
	--padding-bag:			35px;

	/* Max Width [Container] */
	--mxw-limit: 			1600px;
	--mxw-normal:	 		935px;
	--mxw-medium: 			745px;
	--mxw-small: 			555px;

	/* Height */
	--height-header: 		140px;
	--height-menu:			120px;
	--height-menu-sticky:	100px;

	--height-header-diff: 	calc(var(--height-header) - var(--height-menu-sticky));
	--height-slider:		680px;
	--height-input: 		50px;

	/* Images */
	--image-scaleUp:		scale(1.05);
	--image-scaleDown:		scale(0.95);

	/* General */
	--trans-image:			all 500ms ease-in-out;
	--trans:				all 250ms ease-in-out;
	--trans-fast:			all 100ms ease-in-out;
	--trans-slow:		 	all 350ms ease-in-out;
	
	/* Buttons */
	--btn-arrow-width:  	45px;
}



/*************************************************************************************************************
**************************************************************************************************************
***** MEDIA QUERIES ******************************************************************************************
**************************************************************************************************************
**************************************************************************************************************/

@media(max-width: 991px){
	:root{
		/* Typo */
		--font-size-h1:			38px;
		--font-size-h2:			28px;
		
		--font-size-text:		13px;
		--font-size-btn:		12px;

		/* Paddings */
		--padding-section:		75px 0px;
		--padding-sec-header:	68px 20px 25px;
		--padding-button:		16px 30px;
		--padding-arc-prod:		14px;
		--padding-bag:			20px;

		/* Height */
		--height-header: 		100px;
		--height-header-diff: 	40px;
		--height-menu:          auto;
		--height-slider:        560px;
	}
}
@media(max-width: 1199px){
	:root{
		/* Height */
		--height-header: 		100px;
		--height-header-diff: 	40px;
	}
}

/*************************************************************************************************************
***** TYPOGRAPHY **************************************************************************************************
**************************************************************************************************************/
@font-face {
	font-family: "BwModelicaLGC-Light";
	src: local(BwModelicaLGC-Light),
	  url(../fonts/BwModelicaLGC-Light.woff2)	format("woff2"),
	  url(../fonts/BwModelicaLGC-Light.woff)	format("woff"),
	  url(../fonts/BwModelicaLGC-Light.ttf)	format("truetype");
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: BwModelicaLGC-Regular;
	src: local(BwModelicaLGC-Regular),
	  url(../fonts/BwModelicaLGC-Regular.woff2) format("woff2"),
	  url(../fonts/BwModelicaLGC-Regular.woff) format("woff"),
	  url(../fonts/BwModelicaLGC-Regular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: BwModelicaLGC-Medium;
	src: local(BwModelicaLGC-Medium),
	  url(../fonts/BwModelicaLGC-Medium.woff2) format("woff2"),
	  url(../fonts/BwModelicaLGC-Medium.woff) format("woff"),
	  url(../fonts/BwModelicaLGC-Medium.ttf) format("truetype");
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: BwModelica-Bold;
	src: local(BwModelica-Bold),
	  url(../fonts/BwModelica-Bold.woff2)	format("woff2"),
	  url(../fonts/BwModelica-Bold.woff)	format("woff"),
	  url(../fonts/BwModelica-Bold.ttf)		format("truetype");
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}