@font-face {
    font-family: "the-seasons", sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
    font-family: "gravesend-sans", sans-serif;
	font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: "agenda-one", sans-serif;
	font-weight: 300;
	font-style: normal;
}



:root {	
/*	sizing */
    --ss:100/1512;
/*	colours */
    --white:#FFFFFF;
	--cream:#F6F3EB;
    --black:#000000;
	--red:#713638;
	--beige:#C0B096;
	--gold:#C0B096;
	--gold30:#e6dfd1;
	
	
/*	font-colors */
    --fc1:var(--black);
    --fc2:var(--white);
	--fc3:var(--red);
	
/*	font-families */
	--ffh:"the-seasons", serif;
	--ffh2:"gravesend-sans", sans-serif;
	--ffb:"agenda-one", sans-serif;

/*	fonts */
    --p2:normal 300 calc(var(--ss)*20vw) / calc(var(--ss)*26vw) var(--ffb);
	--small:normal 300 calc(var(--ss)*16vw) / calc(var(--ss)*18vw) var(--ffb);
	--large:normal 300 calc(var(--ss)*40vw) / calc(var(--ss)*51vw) var(--ffh);
	--form: var(--p2);
	--label: var(--h3);
	
	/*	fonts */
    --h1:normal 400 calc(var(--ss)*48vw) / 1.2em var(--ffh); 
    --h2:normal var(--h1);
	--h3:normal 500 calc(var(--ss)*15vw) / calc(var(--ss)*15vw) var(--ffh2);
	--h4:var(--h3);
	--title:normal 500 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ffh2);
	
    --p1:normal 300 calc(var(--ss)*18vw) / calc(var(--ss)*24vw) var(--ffb);	
	
	--hero:normal 500 calc(var(--ss)*20vw) / calc(var(--ss)*20vw) var(--ffh2);
	--btn-l:normal 500 calc(var(--ss)*14.5vw) / 1em var(--ffh2);
	--btn:normal 500 calc(var(--ss)*9vw) / 1em var(--ffh2);
	--nav:normal 400 calc(var(--ss)*36vw) / calc(var(--ss)*36vw) var(--ffh);
	--footer-p:normal 300 calc(var(--ss)*15vw) / 1.4em var(--ffb);
	--quote:normal 400 calc(var(--ss)*18vw) / calc(var(--ss)*28vw) var(--ffh);
	--name:normal 500 calc(var(--ss)*13vw) / calc(var(--ss)*13vw) var(--ffh2);
	
	--ls0:normal;
	--ls2:0.2em;
	--ls25:0.25em;
	--ls4:0.4em;

/*	borders */

/*	paddings */
    --vpad:calc(var(--ss)*66vw); 
	--hpad:calc(var(--ss)*32vw); 
	
/*	misc */
	--header-height:calc(var(--ss)*110vw);
	--footer-height:calc(var(--ss)*357vw);
	
	--p-mb:calc(var(--ss)*32vw);
	
	--anim: 0.3s;
	
	--border:calc(var(--ss)*1vw) solid var(--red);
	
}


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

		/*	fonts */ 
		--h2:normal 500 calc(var(--ss)*20vw) / calc(var(--ss)*24vw) var(--ffh2);
		--h4:var(--h2);
		--p2:normal var(--p1);
		--small:normal 300 calc(var(--ss)*12vw) / calc(var(--ss)*14vw) var(--ffb);
		--large:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*18vw) var(--ffh);
		--label:normal 500 calc(var(--ss)*10vw) / calc(var(--ss)*12vw) var(--ffh2);
		--form::normal 300 calc(var(--ss)*11vw) / calc(var(--ss)*14vw) var(--ffb);
		
		/*	fonts */
		--h1:normal 400 calc(var(--ss)*30vw) / calc(var(--ss)*35vw) var(--ffh);
		--h3:normal 500 calc(var(--ss)*12vw) / calc(var(--ss)*12vw) var(--ffh2);
		--title:normal 500 calc(var(--ss)*12vw) / calc(var(--ss)*12vw) var(--ffh2);
		
		--p1:normal 300 calc(var(--ss)*14vw) / calc(var(--ss)*20vw) var(--ffb);
		
		--hero:normal 500 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) var(--ffh2);
		--btn:normal 500 calc(var(--ss)*9vw) / 1em var(--ffh2);
		--btn-l:normal 500 calc(var(--ss)*12vw) / 1em var(--ffh2);
		--footer:normal 500 calc(var(--ss)*8vw) / calc(var(--ss)*8vw) var(--ffh2);
		--footer-p:normal 300 calc(var(--ss)*14vw) / 1.4em var(--ffb);
		--quote:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*20vw) var(--ffh);
		--name:normal 500 calc(var(--ss)*10vw) / calc(var(--ss)*10vw) var(--ffh2);

		/*	paddings */
		--hpad:calc(var(--ss)*33vw);
		--vpad:calc(var(--ss)*57vw);

		--header-height:calc(var(--ss)*62vw);
		--footer-height:calc(var(--ss)*424vw);
		
	}
	
}