@font-face {
    font-family: "barlow", sans-serif;
	font-weight: 300;
	font-style: normal;
}
@font-face {
    font-family: "barlow", sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
    font-family: "barlow", sans-serif;
	font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: "barlow", sans-serif;
	font-weight: 600;
	font-style: normal;
}



:root {	
/*	sizing */
    --ss:100/1512;
/*	colours */
    --white:#FFFFFF;
	--black:#000000;
    --dgrey:#1E1E1E;
	--mgrey:#636363;
	--orange:#C97F58;
	--pink:#F3DCCE;
	--chalk:#EAEAE4;
	--green:#AAA675;
	
	
/*	font-colors */
    --fc1:var(--black);
    --fc2:var(--white);
	
/*	font-families */
	--ff:"barlow", sans-serif;

/*	fonts */
    --h1:normal 600 calc(var(--ss)*64vw) / 1.1em var(--ff); 
    --h2:normal 500 calc(var(--ss)*34vw) / 1.1em var(--ff);
	--h3:normal 500 calc(var(--ss)*24vw) / 1.1em var(--ff);
	--title:normal 600 calc(var(--ss)*24vw) / calc(var(--ss)*24vw) var(--ff);
	--h4:normal 500 calc(var(--ss)*20vw) / 1.1em var(--ff);
    --p1:normal 300 calc(var(--ss)*18vw) / 1.3em var(--ff);
    --nav:normal 600 calc(var(--ss)*34vw) / 1.1em var(--ff);
	--btn:normal 400 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) var(--ff);
	--footer:normal 400 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ff);
	--small:normal 300 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);
	--smaller:normal 300 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);
	--large:normal 300 calc(var(--ss)*40vw) / 1.3em var(--ff);
	--form: normal 400 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) var(--ff);
	--label: var(--h3);
	
	--ls0:normal;


/*	borders */

/*	paddings */
    --vpad:calc(var(--ss)*66vw); 
	--hpad:calc(var(--ss)*43vw); 
	
/*	misc */
	--header__height:calc(var(--ss)*134vw);
	--footer__height:calc(var(--ss)*220vw);
	
	--p-mb:calc(var(--ss)*32vw);
	
	--anim: 0.3s;
	
	--border:1px solid var(--mgrey);
	
}

.black-bg{
	--border:1px solid var(--white);
}

@media(max-width:768px){
	:root{
		--ss:100/394;

		/*	fonts */
		--h1:normal 600 calc(var(--ss)*34vw) / 1.1em var(--ff); 
		--h2:normal 400 calc(var(--ss)*18vw) / 1.1em var(--ff);
		--h3:normal 400 calc(var(--ss)*14vw) / 1.1em var(--ff);
		--h4:normal 400 calc(var(--ss)*20vw) / 1.1em var(--ff);
		--title:normal 600 calc(var(--ss)*16vw) / 1.3em var(--ff);
		--nav:var(--h1);
		--p1:normal 300 calc(var(--ss)*14vw) / 1.3em var(--ff);
		--p2:normal var(--p1);
		--footer:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);
		--small:normal 300 calc(var(--ss)*12vw) / 1.1em var(--ff);
		--smaller:normal 300 calc(var(--ss)*10vw) / 1.1em var(--ff);
		--large:normal 400 calc(var(--ss)*14vw) / 1.3em var(--ff);
		--label:normal 500 calc(var(--ss)*10vw) / 1.1em var(--ff);
		--form::normal 300 calc(var(--ss)*11vw) / 1.1em var(--ff);
		--btn:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) var(--ff);
		/*	paddings */
		--hpad:calc(var(--ss)*20.5vw);
		--vpad:calc(var(--ss)*30vw);

		--header__height:calc(var(--ss)*68vw);
		--footer__height:calc(var(--ss)*255vw);
		
		--border:1px solid var(--black);
	}
	
}