@font-face {
    font-family:"Solina";
    src:url(/templates/curatingthesea/fonts/Solina-Light.woff2) format("woff2"),
    url(/templates/curatingthesea/fonts/Solina-Light.woff) format("woff");
    font-weight:300
}
@font-face {
    font-family:"Solina";
    src:url(/templates/curatingthesea/fonts/Solina-Medium.woff2) format("woff2"),
    url(/templates/curatingthesea/fonts/Solina-Medium.woff) format("woff");
    font-weight:400
}
@font-face {
    font-family:"Solina";
    src:url(/templates/curatingthesea/fonts/Solina-Book.woff2) format("woff2"),
    url(/templates/curatingthesea/fonts/Solina-Book.woff) format("woff");
    font-weight:500
}



:root {	
/*	sizing */
    --ss:100/1920;
/*	colours */
    --white:#FFFFFF;
    --black:#000000;
	--grey:#EAEBE5;
	--fcgrey:#848484;
	--lgrey:#F6F7F2;
	--dgrey:#707070;
	--green:#746602;
	--blue:#A7BCBE;
	--teal:#5D7B76;
	--red:#760438;
	
	
/*	font-colors */
    --fc1:var(--black);
    --fc2:var(--white);
	--fc3:var(--green);
	
/*	font-families */
	--ff:"Solina", Arial, Helvetica, sans-serif;

/*	fonts */
    --h1:normal 500 calc(var(--ss)*40vw) / calc(var(--ss)*45vw) var(--ff); 
    --h2:normal 400 calc(var(--ss)*21vw) / calc(var(--ss)*28vw) var(--ff);
	--h3:normal 400 calc(var(--ss)*15vw) / calc(var(--ss)*18vw) var(--ff);
	--h4:var(--h2);
    --p1:normal 300 calc(var(--ss)*23vw) / calc(var(--ss)*31vw) var(--ff);
    --p2:normal 300 calc(var(--ss)*19vw) / calc(var(--ss)*26vw) var(--ff);
	--p3:normal 300 calc(var(--ss)*16vw) / calc(var(--ss)*22vw) var(--ff);
	--p4:normal 300 calc(var(--ss)*17vw) / calc(var(--ss)*23vw) var(--ff);
    --nav:normal 500 calc(var(--ss)*21vw) / calc(var(--ss)*21vw) var(--ff);
	--btn:normal 400 calc(var(--ss)*17vw) / calc(var(--ss)*17vw) var(--ff);
	--small:normal 500 calc(var(--ss)*12vw) / calc(var(--ss)*14vw) var(--ff);
	--form: var(--p2);
	
	--ls1:0.01em;
	--ls2:0.02em;

/*	borders */

/*	paddings */
    --tpad:calc(var(--ss)*66vw); 
 	--rpad:calc(var(--ss)*56vw);
	--hpad:calc(var(--ss)*55vw);
	--lpad:calc(var(--ss)*65vw);
	--bpad:calc(var(--ss)*50vw); 
	--titlepad:calc(var(--ss)*15vw); 
	
/*	misc */
	--header-width:calc(var(--ss)*212vw);
	
	--p-mb:calc(var(--ss)*32vw);
	
	--anim: 0.8s;
	
	--border:1px solid var(--green);
	
}


@media(max-width:900px){
	:root{
		--ss:100/414;

		/*	fonts */
		--h1:normal 500 calc(var(--ss)*27vw) / calc(var(--ss)*34vw) var(--ff); 
		--h2:normal 400 calc(var(--ss)*19vw) / calc(var(--ss)*26vw) var(--ff);
		--h3:normal 400 calc(var(--ss)*14vw) / calc(var(--ss)*18vw) var(--ff);
		--h4:var(--h2);
		--p1:normal 300 calc(var(--ss)*19vw) / calc(var(--ss)*26vw) var(--ff);
		--p2:normal 300 calc(var(--ss)*17vw) / calc(var(--ss)*24.5vw) var(--ff);
		--p3:normal 300 calc(var(--ss)*15vw) / calc(var(--ss)*22vw) var(--ff);
		--nav:normal 500 calc(var(--ss)*21vw) / calc(var(--ss)*25vw) var(--ff);
		--btn:normal 400 calc(var(--ss)*15vw) / calc(var(--ss)*15vw) var(--ff);
		--small:normal 500 calc(var(--ss)*11vw) / calc(var(--ss)*13vw) var(--ff);

		/*	paddings */
		--tpad:calc(var(--ss)*35vw);
		--rpad:calc(var(--ss)*27vw);
		--hpad:calc(var(--ss)*27vw);
		--lpad:calc(var(--ss)*27vw);
		--bpad:calc(var(--ss)*35vw); 
		--titlepad:calc(var(--ss)*88vw); 

		--header__height:calc(var(--ss)*95vw);
		
		--panel__height:calc(100vh - calc(var(--ss)*161vw));
	}
	
}