@charset "UTF-8";

@font-face {
	font-family: 'Ashcroft';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/AshcroftTest-Regular.otf') format('opentype');
}

:root{
	/*	sizing */
    --ss:100/440;

    /*	colours */
    --white:#FFFFFF;
	--black:#060606;
    --cream:#DAD4C2;

    /*	font-families */
	--ff:"Roboto", sans-serif;
    --hff:"Ashcroft", sans-serif;

    --h1:normal 400 calc(var(--ss)*30vw) / 1.3em var(--hff);
    --p:normal 300 calc(var(--ss)*16vw) / 1.3em var(--ff);

}

@media(min-width:769px){
	:root{
		/*	sizing */
    	--ss:100/1920;

        --h1:normal 400 calc(var(--ss)*50vw) / 1.3em var(--hff);
        --p:normal 300 calc(var(--ss)*20vw) / 1.4em var(--ff);

    }
}

/* RESET
======================================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html {font-size: 16px;}
button {border:0;outline:0;}
* { box-sizing: border-box; outline:none;letter-spacing:inherit;}
section[style*="z-index:"] {-webkit-transform: translate3d(0,0,0);}
body {line-height: 1;}
a {color:inherit;}
main section a[href*="faq"]:not(.btn) {text-decoration:underline;}
body > #page {overflow: clip;}
img {max-width:100%;}
picture {max-width:100%;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
p { margin-bottom: 1.4em; /*letter-spacing: 0.010em;*/}
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.softhide {display:none;}
u {text-decoration:underline;}
iframe { border:0; outline: none; width:100%;}
.video{background-size:cover; background-position: center; background-repeat:no-repeat}
.hidden {  display: none !important; }

/* FONT ASSIGNMENT
======================================================= */
body { font:var(--p); text-align: left; overflow-x: hidden; color:var(--cream); background:var(--black)}

h1 {font:var(--h1); letter-spacing:0.01em; margin-bottom:calc(var(--ss)*47vw); }
p, a {font:var(--p); text-decoration:none;}
p:last-child{margin-bottom: 0;}
b, strong, .strong { font-weight:500; }

@media(min-width:769px){
    h1 {margin-bottom:calc(var(--ss)*47vw); }
}

/* COLOURING IN
======================================================= */
.black-bg { background-color: var(--black); }

.fc-white{color:var(--white);}
.fc-cream{color:var(cream);}

/* CONTENT
======================================================= */
section {position:relative;height:100vh}
section:before{content: ''; display: block; position:absolute; width:100%; height:100%; top:0; left:0; transform:translateX(-50%); background:url(images/SS-bg.svg) top right / calc(var(--ss)*156vw) calc(var(--ss)*99vw) repeat; opacity:0.15;}

section .inner{display:flex; flex-direction:column; justify-content: space-between; align-items: center; width:100%; height:100vh; position:relative; padding:calc(var(--ss)*46vw) calc(var(--ss)*27vw);}
section .content{text-align: center;}

section .logo{width:calc(var(--ss)*1235vw); height:auto; max-width:100%;}

@media(min-width:769px){
    section:before{ background-size: calc(var(--ss)*257vw) calc(var(--ss)*163vw); transform: translateX(calc(var(--ss)*-1034vw));}

    section .inner {align-items: flex-end; padding:calc(var(--ss)*85vw) calc(var(--ss)*114vw);}
    section .content{width:calc(var(--ss)*828vw); text-align: left;}
}