:root {
	--color1: #c8951c;
	--color1-darken: #a27712;
	--color1-lighten: #e9b230;
	--color2: #000000;
	--color3: #ffffff;
	--color4: #eeeeee;
	--color5: #333;
	--cl1: #c8951c;
	--cl2: #000000;
	--cl3: #ffffff;
	--cl4: #eeeeee;
	--cl5: #333;
	--cl6: #83929b;
	--cl7: #ebeef0;	
	--cl-copy: var( --cl1);
	--cl-headlines: var( --cl1);
	--cl-links: var( --cl1);
	--cl-links-hover: var( --cl2);
	--cl-links-active: var( --cl1);
	--cl-links-inactive: var( --cl2);
	--cl-input-text: var(--cl3);
	--indent: clamp(1rem, 2vw, 3rem);	
	--grid-gap: var( --indent);
	--sp1: clamp(.5rem, 1.3vw, 3rem);
	--sp2: calc( var( --sp1) * 2 );
	--sp3: calc( var( --sp1) * 3 );
	--sp4: calc( var( --sp1) * 4 );
	--sp5: calc( var( --sp1) * 5 );
	--sp6: calc( var( --sp1) * 6 );
	--sp7: calc( var( --sp1) * 7 );
	--sp8: calc( var( --sp1) * 8 );
	--sp9: calc( var( --sp1) * 9 );
	--sp10: calc( var( --sp1) * 10 );
	--sp-half: calc( var( --sp1) / 2 );
	--sp-quarter: calc( var( --sp1) / 4 );	
	--btn-height: clamp(2.5rem,4vw,3.1rem);
	--btn-padding-horizontal: clamp(.8rem,2.8vw,2.1rem);
	--btn-padding-vertical: clamp(0.2rem,1vw,0.7rem);
	--btn-gap: clamp(0.3rem, 0.5vw, 0.6rem);
	--btn-radius: clamp(.2rem,1vw,.5rem);
	--btn-border-width: 1px;	
	--font-hl: 'Roboto Medium', sans-serif;
	--font-copy: 'Roboto Regular', sans-serif;
	--font-regular: 'Roboto Regular', sans-serif;
	--font-light: 'Roboto Light', sans-serif;
	--font-button: 'Roboto Regular', sans-serif;
	--sm: clamp(.7rem,1.1vw,.85rem);
	--md: clamp(.9rem,1.3vw,1.1rem);
	--lg: clamp(1.1rem,1.8vw,2rem);
	--xl: clamp(1.4rem,2.8vw,3rem);
	--xxl: clamp(1.6rem,4vw,4rem);
	--xxxl: clamp(1.8rem,5vw,5rem);		
	--lh-sm: 140%;
	--lh-md: 125%;
	--lh-lg: 111%;
	--lh-xl: 104%;
	--lh-xxl: 109%;
	--lh-xxxl: 100%;	
	--grid__gutter: 1rem;
	--header-height: clamp(4rem,11vw,11rem);
	--round-corner: 2rem;
	--round-corner-icon: 2rem;
	--border-thickness: clamp(.15rem,.7vw,0.4rem);
	--max-width-content: 2000px;
	--max-height-images: 1333px;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-bold: 700;	
}
@media screen and (min-width: 768px){
	:root {
		--grid__gutter: 1.3rem;
		--round-corner: 5rem;
	}
	
}
@media screen and (min-width: 992px){
	:root {
		--grid__gutter: 1.6rem;
		--round-corner: 7rem;
		--round-corner-icon: 3rem;
	}
	
}
@media screen and (min-width: 1200px){
	:root {
		--grid__gutter: 1.6rem;
		--round-corner: 9rem;
		--round-corner-icon: 4rem;
	}
	
}