
/* Cinzel Regular */
@font-face {
	font-family: 'Cinzel';
	src: url('../fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Open Sans Normal */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
	font-style: normal;
	font-display: swap;
}

/* Open Sans Italic */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
	font-style: italic;
	font-display: swap;
}

/* reset */

*{
	box-sizing:border-box;
	scrollbar-color:#009640 #FCC756;
	scrollbar-width:thin;
}
html,body,h1,h2,h3,p,ul,li,blockquote{
	padding:0;
	margin:0;
}
img,iframe{
	max-width:100%;
}



/* colours:

*/

a{
	color:inherit;
}
body{
	background:url(../img/masthead-1920_2.jpg) black no-repeat center top / 100% auto;
	color:#009640;
}
/* remove the above colour once the colours per section are set */
.skip-link{
	border-color:black;
	color:black;
	background-color:white;
}
#header{
	height:0;
	padding-top:51.5%;
	text-align:center;
}
/* header image sizes */
@media(max-width:620px){
	body{
		background-image:url(../img/masthead-800_2.jpg);
		background-size:115% auto;
	}
	#header{
		padding-top:168%;
	}
}

/* fonts */

html{
	font-size:16px; /* basis for 'rem' sizes */
}
body{
	font-family:'Cinzel', serif;
	font-size:100%;
	line-height:1;
}
label,input,textarea,select,option,
.response,
.mce_inline_error{
	font-family:'Open Sans',sans-serif;
}
h1,h2{
	font-size:3.125rem;
	font-size:clamp(1.25rem,7.5vw,3.125rem);
	font-weight:400;
	line-height:1.2;
	text-align:center;
	margin-bottom:.4em;
}
h3,h4,h5,h6,
p,ul,ol,blockquote{
	font-size:1.5625rem;
	font-size:clamp(1.0625rem,4.25vw,1.6rem);
	font-weight:400;
	line-height:1.42;
	margin-bottom:1.42em;
}
.clear p{
	margin-bottom:.875em;
}
label,input,textarea,select,option{
	font-size:1rem;
	font-weight:400;
	line-height:1.42;
	margin-bottom:1em;
}
.response{
	font-size:1.25rem;
	font-weight:400;
	line-height:1.2;
}

input[type="submit"]{
	width:auto;
	font-size:1.125rem;
	font-size:clamp(.875rem,3.5vw,1.125rem);
	font-weight:700;
	line-height:1.2;
	text-transform:uppercase;
	background:#009640;
	color:black;
	border-color:#009640;
	padding:.75em 1.25em;
	transition:all .2s ease-in-out 0s;
}
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active{
	background:#FCC756;
	border-color:#FCC756;
}

/* layout */

.screen-reader-text{
	position:fixed;
	top:-40000px;
	left:-40000px;
}
.skip-link{
	display:block; /* in case it's a span inside a link */
	border-width:4px;
	border-style:solid;
	border-radius:10px;
	padding:1rem;
}
.skip-link:focus,
a:focus .skip-link{
	top:1rem;
	left:1rem;
	z-index:90001;
}

/* overlap system from bottom up */
.section{
	position:relative;
}
#signup{z-index:4;}
#header{z-index:5;}

.outer{
	padding:0 5vw;
}
.inner{
	max-width:54.6875rem;
	margin:0 auto;
}

#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
#signup{
	text-align:center;
}

/* mailchimp overrides */

.indicates-required,
.asterisk{
	display:none;
}
form h2{
	display:none;
}
#mc_embed_signup_scroll{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0 1.875rem;
}
.mc-field-group{
	width:46.5%;
	max-width:100%;
}
@media(max-width:620px){
	.mc-field-group{
		width:91%;
	}
}
.mc-field-group label{
	position:absolute;
	left:-4000vw;
	top:-40000px;
}
.clear{
	width:100%;
	padding-top:clamp(0rem,.4vw,.5rem);
}
input{
	width:100%;
	background:black;
	color:#FCC756;
	padding:.75em 1.5em;
	border:1px solid #FCC756;
}
input{type="submit"}{
	background:#009640;
	color:black;
}
.response{
	padding:.75em 0;
}
#mce-success-response{
	color:#FCC756;
}
#mce-error-response{
	color:#FF0000;
}

#footer{
	min-height:5rem;
}

/* increase sizes via html font-size */

@media(min-width:1921px){html{font-size:18px;}}
@media(min-width:1960px){html{font-size:20px;}}
@media(min-width:2055px){html{font-size:21px;}}
@media(min-width:2150px){html{font-size:22px;}}
@media(min-width:2245px){html{font-size:23px;}}
@media(min-width:2340px){html{font-size:24px;}}
@media(min-width:2435px){html{font-size:25px;}}
@media(min-width:2530px){html{font-size:26px;}}
@media(min-width:2625px){html{font-size:27px;}}
@media(min-width:2720px){html{font-size:28px;}}
@media(min-width:2815px){html{font-size:29px;}}
@media(min-width:2910px){html{font-size:30px;}}
@media(min-width:3005px){html{font-size:31px;}}
@media(min-width:3100px){html{font-size:32px;}}
@media(min-width:3100px){html{font-size:33px;}}
@media(min-width:3195px){html{font-size:34px;}}
@media(min-width:3290px){html{font-size:36px;}}
@media(min-width:3385px){html{font-size:37px;}}
@media(min-width:3480px){html{font-size:38px;}}
@media(min-width:3575px){html{font-size:39px;}}
@media(min-width:3670px){html{font-size:40px;}}
@media(min-width:3765px){html{font-size:41px;}}
@media(min-width:3860px){html{font-size:42px;}}
@media(min-width:3955px){html{font-size:43px;}}
@media(min-width:4050px){html{font-size:44px;}}
