@font-face {
    font-family: 'Nib Pro';
    src: url('../fonts/NibPro-Bold.eot');
    src: local('Nib Pro Bold'), local('NibPro-Bold'),
        url('../fonts/NibPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NibPro-Bold.woff2') format('woff2'),
        url('../fonts/NibPro-Bold.woff') format('woff'),
        url('../fonts/NibPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nib Pro';
    src: url('../fonts/NibPro-Light.eot');
    src: local('Nib Pro Light'), local('NibPro-Light'),
        url('../fonts/NibPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NibPro-Light.woff2') format('woff2'),
        url('../fonts/NibPro-Light.woff') format('woff'),
        url('../fonts/NibPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nib Pro';
    src: url('../fonts/NibPro-Regular.eot');
    src: local('Nib Pro Regular'), local('NibPro-Regular'),
        url('../fonts/NibPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NibPro-Regular.woff2') format('woff2'),
        url('../fonts/NibPro-Regular.woff') format('woff'),
        url('../fonts/NibPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
	--ss:100/1366;
	
	--cream:#F7F5EF;
	--sand:#EDE8D9;
	--yellow:#F7D76C;
	--black:#0B0B0C;
	--lblack:#2B2E34;
	--pgreen:#A5C19B;
	--white:#F7F5EF;
	--brown:#E3D6C1;
	--tan:#D7C4A6;
	--fccream:#FFFBF5;
	--hover:#FAE7A7;
	
	--multi:1;
	--scale:1;
	
	--hff:'Nib Pro', serif;
	--bff:"Gotham A", "Gotham B", sans-serif;
	
	--pad64:4.69vw;
	--p1fs:1.17vw;
	
	--subh:3.55vw;
	
	--p1:normal 300 1.17vw / 1.83vw var( --bff ); /*16px*/ 
	--p2:normal 300 1.02vw / 1.46vw var( --bff ); /*14px*/ 
	--p3:normal 300 0.95vw / 1.46vw var( --bff ); /*13px*/ 
	--p4:normal 300 0.81vw / 1.24vw var( --bff ); /*11px*/
	--h1:normal 400 3.29vw / 4.39vw var( --hff ); /*45px*/ 
	--h2:normal 400 2.49vw / 3.37vw var( --hff ); /*34px*/	
	--h3:normal 400 1.61vw / 2.56vw var( --hff ); /*22px*/ 
	--h4:normal 400 1.46vw / 1.98vw var( --hff ); /*20px*/ 
	--h5:normal 400 1.32vw / 1.83vw var( --hff ); /*18px*/
}


/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
	.mbr{display:inline-block;}
	.mbr br{display:initial;}
}

@media (max-width:768px){
	:root{
		--ss:100/375;
		
		--64px:15.02vw;
		--40px:9.39vw;
		--32px:7.51vw;
		--120px:28.17vw;
		--p1fs:3.76vw;
		
		--subh:11.6vw;
		--secpad:12.21vw 9.39vw;
		
		--p0:normal 700 4.23vw / 6.57vw var(--bff);
		--p1:normal 300 3.76vw / 5.87vw var(--bff); /*16px*/ 
		--p2:normal 300 3.29vw / 4.69vw var( --bff ); /*14px*/ 
		--p3:normal 300 3.05vw / 4.69vw var( --bff ); /*13px*/ 
		--p4:normal 300 2.58vw / 3.99vw var( --bff ); /*11px*/
		--h1:normal 400 6.34vw / 8.22vw var(--hff); /*45px*/ 
		--h2:normal 400 7.98vw / 8.22vw var(--hff); /*34px*/ 
		--h3:normal 400 5.16vw / 8.22vw var( --hff ); /*22px*/ 
		--h4:normal 400 4.69vw / 5.63vw var( --hff ); /*20px*/ 
		--h5:normal 400 3.52vw / 4.93vw var( --hff ); /*18px*/
	}
}