@charset "UTF-8";

@font-face {
	font-family: 'Displace 2.0';
	font-style: normal;
	font-weight: 300;
	src: url('/templates/schuylkill/fonts/Displace2.0-Light-Web.woff2') format('woff2'),
		url('/templates/schuylkill/fonts/Displace2.0-Light-Web .woff') format('woff');
}


:root{
	/*	sizing */
    --ss:100/393;
	--rem:16;
	
/*	colours */
    --white:#FFFFFF;
	--black:#000000;
	--blue:#F0F4F7;
	--grey:#8A8A8A;
	--lgrey:#F1F1F1;
    --greyalt:#707070;

/*	font-families */
	--hff:"Displace 2.0", sans-serif;
    --ff:"brandon-grotesque", sans-serif;
	
	--h1:normal 300 calc(var(--ss)*35vw) / 1.15em var(--hff);
    --h1l:normal 300 calc(var(--ss)*60vw) / 1.12em var(--hff);
    --h2:normal 300 calc(var(--ss)*35vw) / 1.12em var(--hff);
	--h2l:normal 300 calc(var(--ss)*40vw) / 1.12em var(--hff);
    --h2s:normal 300 calc(var(--ss)*25vw) / 1.12em var(--hff);
    --h2xs:normal 300 calc(var(--ss)*25vw) / 1.12em var(--hff);
    --h3:normal 300 calc(var(--ss)*19vw) / 1.3em var(--hff);
    --h3l:normal 300 calc(var(--ss)*28vw) / 1.3em var(--hff);
    --h3alt:var(--h3);
	
	--h4:normal 400 calc(var(--ss)*16vw) / 1em var(--ff);
    --title:normal 300 calc(var(--ss)*16vw) / 1em var(--ff);
	
	--p1:normal 300 calc(var(--ss)*16vw) / 1.35em var(--ff);
	--p2:normal 300 calc(var(--ss)*16vw) / 1.25em var(--ff);
    --ps:normal 300 calc(var(--ss)*14vw) / 1.09em var(--ff);
    --pxs:normal 300 calc(var(--ss)*14vw) / 1.09em var(--ff);
	
	--btn:normal 400 calc(var(--ss)*15vw) / 1em var(--ff);
    
	--nav:var(--h1);
	--nav2:normal 400 calc(var(--ss)*11vw) / 1em var(--ff);
    --lang:normal 400 calc(var(--ss)*10vw) / 1em var(--ff);
    
    --icons:normal 700 calc(var(--ss)*11.796vw) / 1em var(--ff);

	--hpad:calc(var(--ss)*35vw);
	--vpad:calc(var(--ss)*80vw);
    --vpads:calc(var(--ss)*40vw);
	
	--bounce-right: 2s bounceright 2.5s infinite;
	--bounce-left: 2s bounceleft 2.5s infinite;
	--bounce-down: 2s bouncedown 2.5s infinite;
	
	--ls01:0.1em;
    --ls03:0.03em;
	--ls06:0.06em;
	--ls05:0.05em;
		
	--border:calc(var(--ss)*1.5vw) solid var(--grey);
    --border2:calc(var(--ss)*0.7vw) solid var(--grey);
    
    --anim:transform .8s cubic-bezier(.39,.575,.565,1), opacity .8s cubic-bezier(.47,0,.745,.715)
}


/* DESKTOP */
@media(min-width:769px){
	:root{
		/*	sizing */
    	--ss:100/1920;
		
		--h1:normal 300 calc(var(--ss)*70vw) / 1.2em var(--hff);
        --h1l:normal 300 calc(var(--ss)*120vw) / 1.12em var(--hff);
        --h2:normal 300 calc(var(--ss)*70vw) / 1.12em var(--hff);
		--h2l:normal 300 calc(var(--ss)*70vw) / 1.12em var(--hff);
        --h2s:normal 300 calc(var(--ss)*65vw) / 1.12em var(--hff);
        --h2xs:normal 300 calc(var(--ss)*40vw) / 1.12em var(--hff);
        --h3:normal 300 calc(var(--ss)*35vw) / 1.27em var(--hff);
        --h3l:normal 300 calc(var(--ss)*45vw) / 1.3em var(--hff);
        --h3alt:normal 300 calc(var(--ss)*20vw) / 1.27em var(--hff);
        
        --h4:normal 400 calc(var(--ss)*20vw) / 1em var(--ff);
		--title:normal 300 calc(var(--ss)*20vw) / 1em var(--ff);
		
        --p1:normal 300 calc(var(--ss)*20vw) / 1.35em var(--ff);
		--p2:normal 300 calc(var(--ss)*16vw) / 1.25em var(--ff);
        
		--ps:normal 300 calc(var(--ss)*18vw) / 1.25em var(--ff);
        --pxs:normal 300 calc(var(--ss)*16vw) / 1.25em var(--ff);
        
        --nav2:normal 400 calc(var(--ss)*15vw) / 1em var(--ff);
	    --btn:normal 400 calc(var(--ss)*20vw) / 1em var(--ff);
        
        
        --icons:normal 700 calc(var(--ss)*13vw) / 1em var(--ff);
		
		--hpad:calc(var(--ss)*163vw);
		--vpad:calc(var(--ss)*130vw);
        --vpads:calc(var(--ss)*80vw);
	}
}

/* XL DESKTOP */
@media(min-width:1921px){
	:root{
		--h1:normal 300 calc(70/16*1rem) / 1.2em var(--hff);
        --h1l:normal 300 calc(120/16*1rem) / 1.2em var(--hff);
		--h2:normal 300 calc(70/16*1rem) / 1.12em var(--hff);
        --h2l:normal 300 calc(70/16*1rem) / 1.12em var(--hff);
        --h2s:normal 300 calc(65/16*1rem) / 1.12em var(--hff);
        --h2xs:normal 300 calc(55/16*1rem) / 1.12em var(--hff);
        --h3:normal 300 calc(35/16*1rem) / 1.3em var(--hff);
        --h3l:normal 300 calc(45/16*1rem) / 1.3em var(--hff);
        --h3alt:normal 300 calc(20/16*1rem) / 1.27em var(--hff);
        
        --h4:normal 400 calc(20/16*1rem) / 1em var(--ff);
        
        --title:normal 300 calc(20/16*1rem) / 1em var(--ff);
        
		--p1:normal 300 calc(20/16*1rem) / 1.35em var(--ff);
		--p2:normal 300 1rem / 1.25em var(--ff);
        
        --ps:normal 300 calc(18/16*1rem) / 1.25em var(--ff);
        --ps:normal 300 calc(16/16*1rem) / 1.25em var(--ff);
		
        --nav2:normal 400 calc(15/16*1rem) / 1em var(--ff);
        --lang:normal 400 calc(10/16*1rem) / 1em var(--ff);
	    --btn:normal 400 calc(20/16*1rem) / 1em var(--ff);
		
		--footer:normal 300 1rem / 1.37em var(--ff);
		--footerb:normal 400 1rem / 1.37em var(--ff);
		--footers:normal 400 calc(12/16*1rem) / 1.2em var(--ff);

        --icons:normal 700 calc(13/16*1rem) / 1em var(--ff);
		
		--hpad:calc(163/16*1rem);
		--vpad:calc(130/16*1rem);
        --vpads:calc(80/16*1rem);
		
	    --border:1.5px solid var(--greyalt);
        --border2:0.7px solid var(--grey);
	}
}