@charset "UTF-8";

@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;
}
@font-face {
    font-family: "barlow", sans-serif;
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Signerica_Fat';
	font-style: normal;
	font-weight: 400;
	src: url('/templates/loftlines/fonts/Signerica_Fat.woff') format('woff');
}

:root{
	/*	sizing */
    --ss:100/393;
/*	colours */
    --white:#FFFFFF;
	--trueblack:#000000;
    --black:#1E1E1E;
    --grey:#5A5A5A;
	--mgrey:#636363;
	--lgrey:rgba(0, 0, 0, 0.5);
    --red:#743B32;
	--orange:#C97F58;
	--pink:#F3DCCE;
	--chalk:#EAEAE4;
	--green:#AAA675;
    
    --white30:rgba(255, 255, 255, 0.30);
    --red30:rgba(116, 59, 50, 0.30);
    --green30:rgba(170, 166, 117, 0.30);
    --black30:rgba(30, 30, 30, 0.3);

/*	font-families */
	--ff:"barlow", sans-serif;
    --sff:"Signerica_Fat", sans-serif;
	
	--h1:normal 700 calc(var(--ss)*32vw) / 1.1em var(--ff);
    --h2:normal 700 calc(var(--ss)*28vw) / 1.1em var(--ff);
    --h2l:normal 700 calc(var(--ss)*32vw) / 1.3em var(--ff);
    --h3:normal 700 calc(var(--ss)*28vw) / 1.3em var(--ff);
    --h4:normal 700 calc(var(--ss)*16vw) / 1.3em var(--ff);
    
    --title:normal 700 calc(var(--ss)*16vw) / 1.3em var(--ff);
	
	--p1:normal 300 calc(var(--ss)*16vw) / 1.4em var(--ff);
    --p2:normal 300 calc(var(--ss)*22vw) / 1.4em var(--ff);
    --p-xs:normal 300 calc(var(--ss)*12vw) / 1.2em var(--ff);
    
    --footer:normal 300 calc(var(--ss)*14vw) / 1.3em var(--ff);
    
    --input:normal 700 calc(var(--ss)*16vw) / 1.3em var(--ff);
    
	--btn:normal 700 calc(var(--ss)*16vw) / 1em var(--ff);
	--nav:normal 700 calc(var(--ss)*14vw) / 1em var(--ff);
    
    --signature:normal 400 calc(var(--ss)*30vw) / 1.1em var(--sff);
	
	--hpad:calc(var(--ss)*15vw);
	--vpad:calc(var(--ss)*44vw);
    --vpads:calc(var(--ss)*27vw);
    
    --spacing:calc(var(--ss)*44vw);
    --spacing-s:calc(var(--ss)*27vw);
	
	--header-height:calc(var(--ss)*71vw);
	--banner-height:0vw;
	
	--bounce-right: 2s bounceright 2.5s infinite;
	--bounce-left: 2s bounceleft 2.5s infinite;
	--bounce-down: 2s bouncedown 2.5s infinite;
    
    --border:calc(var(--ss)*1vw) solid var(--white);
    --borderb:calc(var(--ss)*1vw) solid var(--black);
    --borderw:calc(var(--ss)*1vw) solid var(--white);
	
	--ls07:0.07em;
    --lsn02:-0.02em;
}

.chalk-bg {  
    --border:calc(var(--ss)*1vw) solid var(--black);
}

.has-banner.very-top{
	--banner-height:calc(var(--ss)*45vw);
}

@media(min-width:769px){
	:root{
		/*	sizing */
    	--ss:100/1512;
		
		--h1:normal 700 calc(var(--ss)*50vw) / 1.3em var(--ff);
        --h2:normal 700 calc(var(--ss)*60vw) / 1.1em var(--ff);
        --h2l:normal 700 calc(var(--ss)*50vw) / 1.1em var(--ff);
        --h3:normal 700 calc(var(--ss)*28vw) / 1.3em var(--ff);
        --h4:normal 700 calc(var(--ss)*18vw) / 1.3em var(--ff);
        
        --title:normal 700 calc(var(--ss)*18vw) / 1.1em var(--ff);
        
        --p1:normal 300 calc(var(--ss)*18vw) / 1.3em var(--ff);
        --p2:normal 300 calc(var(--ss)*22vw) / 1.4em var(--ff);
    
        --footer:normal 300 calc(var(--ss)*18vw) / 1.3em var(--ff);
        
        --input:normal 700 calc(var(--ss)*18vw) / 1.3em var(--ff);

        --btn:normal 700 calc(var(--ss)*16vw) / 1em var(--ff);
        --nav:var(--btn);
        
        --signature:normal 400 calc(var(--ss)*35vw) / 1.1em var(--sff);
	
		--hpad:calc(var(--ss)*35vw);
        --vpad:calc(var(--ss)*88vw);
        --vpads:calc(var(--ss)*44vw);
        --spacing:calc(var(--ss)*64vw);
        --spacing-s:calc(var(--ss)*44vw);
        
		--header-height:calc(var(--ss)*88vw);
		
	}
	.has-banner.very-top{
		--banner-height:calc(var(--ss)*57vw);
	}
    
    header .header-outer.menu-open{
        --header-height:calc(var(--ss)*136vw);
    }
}

@media(min-width:1513px){
	body.fixed-width{
		--h1:normal 700 calc(50/16*1rem) / 1.3em var(--ff);
        --h2:normal 700 calc(60/16*1rem) / 1.1em var(--ff);
        --h2l:normal 700 calc(50/16*1rem) / 1.1em var(--ff);
        --h3:normal 700 calc(28/16*1rem) / 1.3em var(--ff);
        --h4:normal 700 calc(18/16*1rem) / 1.3em var(--ff);
        
        --title:normal 700 calc(18/16*1rem) / 1.1em var(--ff);
        
        --p1:normal 300 calc(18/16*1rem) / 1.3em var(--ff);
        --p2:normal 300 calc(22/16*1rem) / 1.4em var(--ff);
    
        --footer:normal 300 calc(18/16*1rem) / 1.3em var(--ff);
        --p-xs:normal 300 calc(12/16*1rem) / 1.2em var(--ff);
        
        --input:normal 700 calc(18/16*1rem) / 1.3em var(--ff);

        --btn:normal 700 calc(16/16*1rem) / 1em var(--ff);
        --nav:var(--btn);
        
        --signature:normal 400 calc(35/16*1rem) / 1.1em var(--sff);
		
		--hpad:calc(35/16*1rem);
		--vpad:calc(88/16*1rem);
        --vpads:calc(44/16*1rem);
        --spacing:calc(64/16*1rem);
        --spacing-s:calc(44/16*1rem);
        
        --border:1px solid var(--white);
        --borderb:1px solid var(--black);
        --borderw:1px solid var(--white);
		
		--header-height:calc(88/16*1rem);
		--banner-height:0rem;
/*		--ls02:0.02em;*/
	}
    .chalk-bg {  
        --border:1px solid var(--black);
    }
    
	.fixed-width.has-banner.very-top{
		--banner-height:3.5625rem;
	}
    
    body.fixed-width header .header-outer.menu-open{
        --header-height:calc(136/16*1rem);
    }
}

@media(min-width:769px) {
    .mobile {display:none !important;}
}
@media(max-width:768px) {
    .desktop {display:none !important;}
}	
@media(max-width:1440px) {
    .xl-desktop {display:none !important;}
}	
@media(min-width:1440px) {
    .desktop.desktop-only {display:none !important;}
}