:root {
	--bg-r:255;
	--bg-g:255;
	--bg-b:255;
	--bg-color:rgba(var(--bg-r),var(--bg-g),var(--bg-b));
	--brownDark-r:117;
	--brownDark-g:78;
	--brownDark-b:64;
	--brownDark:rgba(var(--brownDark-r),var(--brownDark-g),var(--brownDark-b));
	--intro-r:177;
	--intro-g:155;
	--intro-b:127;
	--intro-color:rgba(var(--intro-r),var(--intro-g),var(--intro-b));
	--brownPale-r:229;
	--brownPale-g:225;
	--brownPale-b:206;
	--brownPale:rgba(var(--brownPale-r),var(--brownPale-g),var(--brownPale-b));
	--purple-r:176;
	--purple-g:31;
	--purple-b:108;
	--purple:rgba(var(--purple-r),var(--purple-g),var(--purple-b));
	--purple-med-r:192;
	--purple-med-g:76;
	--purple-med-b:138;
	--purple-med:rgba(var(--purple-med-r),var(--purple-med-g),var(--purple-med-b));
	--purple-light-r:208;
	--purple-light-g:121;
	--purple-light-b:168;
	--purple-light:rgba(var(--purple-light-r),var(--purple-light-g),var(--purple-light-b));
	--blue-r:97;
	--blue-g:171;
	--blue-b:155;
	--blue:rgba(var(--blue-r),var(--blue-g),var(--blue-b));
	--blue-med-r:124;
	--blue-med-g:188;
	--blue-med-b:175;
	--blue-med:rgba(var(--blue-med-r),var(--blue-med-g),var(--blue-med-b));
	--blue-light-r:176;
	--blue-light-g:213;
	--blue-light-b:205;
	--blue-light:rgba(var(--blue-light-r),var(--blue-light-g),var(--blue-light-b));

}
* {
	position:relative;
	padding:0;
	margin:0;
	box-sizing: border-box;
}
body, html {
	position:absolute;
	width:100%;
	height:100%;  
	background:var(--bg-color);
	font-family: "acumin-pro-semi-condensed", sans-serif;
}
a {
/* 
	text-decoration: none;
 */
	color:var(--brownDark);
}
.direct a, .direct a:hover {
	color:white;
	text-decoration: none;
}
a:hover {
	color:var(--purple);
}
ul {
	list-style-type: none;
}
header {
	position:fixed;
	width:100%;
	z-index:10;
}
		div.news {
			display:none;
		}
main {
	position:absolute;
	top:0;
	width:100%;
	min-height:100%;
	z-index:0;
	padding-top:187.5px;
}
h1 {
	padding-top:40px;
	background:var(--bg-color);
	padding-bottom:4vh;
	text-align:center;
}
h1 img {
	width:60%;
}
	h2 {
		color:var(--purple);
		padding: 12px 24px;
		border-top:solid 1px var(--bg-color);
		font-weight:400;
		font-size:1.75rem;
	}
.pointer {
	text-align:center;
	background:url('../media/ragged-edge.png');
	background-position:bottom 10px center;
	background-size:cover;
	background-repeat:no-repeat;
	width:100vw;
	z-index:5;
}
.pointer img {
	width:23%;
}
.intro {
	background-color:var(--intro-color);
	position:absolute;
	top:240px;
	width:100%;
	height:calc(100vh - 240px);
	padding-top:25vh;
	z-index:3;
}
.intro p {
	margin: 0 48px;
	font-weight:300;
	font-size:21px;
}
.intro figure.arrow {
	position:absolute;
	bottom:30px;
	right:50px;
	height:36px;
	cursor:pointer;
}
.intro figure.arrow img {
	height:100%;
}
.announcement {
	background-color:var(--purple-med);
	width:100%;
	z-index:3;
	color:white;
	text-transform: uppercase;
	font-weight:300;
	padding:148px 72px 188px 72px ;
}
.announcement p {
	font-weight:300;
	font-size:24px;
}
.announcement p span {
	font-style:italic;
	font-weight:400;
}
nav {
	position:absolute;
	bottom:0;
	z-index:5;
	width:100%;
}
nav .link {
	padding: 0.675em 48px;
	border-top:solid 1px white;
	font-weight:300;
	font-size:18px;
	transition:background 0.5s;
}
.link.expand {
	background-color:var(--blue-light);
}
.link.expand:before {
	position:absolute;
	left:18px;
	height:24px;
	width:12px;
	background:url('../media/arrow-expand.png');
	background-size: auto 24px; background-repeat: no-repeat; 
	content:'';
	opacity:0.4;
	transition:transform 0.5s, opacity 0.5s;
	transform-origin:center center;
}
.link.expand:hover, .link.expand.active {
	background-color:var(--blue-med);
}
.link.expand.active:before {
	transform:rotate(90deg);
	opacity:1;
}
.link.direct {
	background-color:var(--purple-light);
	color:white;
}
.link.direct:hover, .link.direct.active {
	background-color:var(--purple-med);
}
.link.direct.active:after{
	background:none;
}
.link.direct:after {
	position:absolute;
	right:18px;
	height:24px;
	width:34px;
	background:url('../media/arrow-direct.png');
	background-size: auto 24px; background-repeat: no-repeat; 
	content:'';
	transition:transform 0.5s, opacity 0.5s;
	transform-origin:center center;
}
.text {
	padding:24px 48px;
	display:none;
}
.text p, .text ul {
	margin-bottom:1em;
	font-weight:300;
}
.text h4 {
	margin-bottom:1em;
	color:var(--purple);
}
.text li {
	margin-bottom:0.25em;
	margin-left:2ch;
}
.text li:before {
	content:'- ';
	position:absolute;
	left:-2ch;
	
}
header.scrolling {
	position:fixed;
	top:0;
}
h1.scrolling {

}
@media screen and (min-width:600px) {
	body,html {
		background:var(--brownPale);
	}
	header, .pointer {
		width:50vw;
/* 
		border-right:solid 1px black;
*/
	}
	.pointer img {
		width:18%;
	}
	header {
		position:fixed;
	
	}
	.intro {
		margin-left:50vw;
		width:50vw;
		padding-top:19vh;
		border-left:solid 1px black;
	}
	.intro p {
		font-size:36px;
	
	}
	main {
		margin-left:50vw;
		width:50vw;
		border-left:solid 1px black;
		min-height:100vh;
		background:var(--bg-color);
	}
	.text p, .text ul {
		max-width:36em;
		margin:1em auto;
	}
	.announcement {
		height:auto;
		padding:148px 48px 188px 48px ;
		padding-top:1em;
		padding-bottom:1em;
	}
	.text {
		display:block;
		font-family: "acumin-pro", sans-serif;
	}
	nav {
		position:relative;
	}
	nav .link {
		font-weight:400;
	}
	.link.expand {
		background-color:rgba(var(--blue-r),var(--blue-g),var(--blue-b),0.5);
	}
	.link.direct {
		cursor:pointer;
		width:50vw;
	}
	.link.expand:before {
		background:none;
	}
	.announcement.scrolling {
		position:fixed;
		top:0;
		z-index:20;
	}
	.studios.scrolling {
		position:fixed;
		top:66px;
		z-index:20;
	}
	.eoi.scrolling {
		position:fixed;
		top:117px;
		z-index:20;
	}
	.plan.scrolling {
		position:fixed;
		top:168px;
		z-index:20;
	}
	.whats-on.scrolling {
		position:fixed;
		top:219px;
		z-index:20;
	}
	main.scrolling {
		padding-top:calc(19vh + 170px);
	}
		--root {
			--news-width:30rem;
		}
		h1 {
			padding-bottom:4vh;
		}
		div.news {
			display:block;
			max-width: var(--news-width);
			margin-top:2rem;
			margin-left:25vw;
			transform:translateX(-50%);
			top:55%;
			background:#fffffd;
			border:solid 1px var(--intro-color);
		}
		.news article {
			margin: 0 2rem 1rem 2rem;
			padding-bottom:1rem;
		}
		.news article:not(:last-child) {
			border-bottom:dotted 1px var(--purple);
		}
		.news h3 {
			font-weight:400;
			color:var(--purple);
		}
		.news p {
			margin-bottom:1em;
		}
		.news p.more {
			text-align:right;
			font-style:italic;
		}
		main:before {
			position:absolute;
			top:0;
			width:50vw;
			height:200px;
			content:'';
			background-image: url('media/stuff.jxpg');
			background-position:center top;
			background-size:100% auto;
			background-repeat:no-repeat;
		}
		.announcement {
			border-top:solid 1px black;
		}
}