/*
green = #00FF7F
red = #FF004A
blue = #00F7FF
yellow = #E2FF00
orange = #FFDA44
*/
*{box-sizing: border-box;}

html,body{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: .48cm;
	font-family: Helvetica, sans-serif;
	background: #242424;
	color: #fff;
}

body > *:nth-child(1) {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	text-align: center;
  font-weight:bold;
  color:transparent;
	width: 100vw;
	height: 100vh;
	padding-bottom: 4em;
}
body > *:nth-child(1) > *{
	margin: 25vh auto 0 auto;
	height: 50vh;
	width: 50vh
}

body.loaded > *:nth-child(1){
		animation: fade 1s forwards;
}

a{
	color: #c00;
}

article{
	position: absolute;
	box-sizing: border-box;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	padding-top: 3em;
	background: right top no-repeat;
	background-size: contain;
	transition: all .5s;
}

article > * {
	margin-left: -100vw;
	transition: all 1s
}
article > *:nth-child(1){
	transition: all .4s;
}

article h1{
	display: inline-block;
	clear: both;
	font-size: 2.5em;
	margin-top: 0;
	margin-bottom: 0;
}

article h1+h2,
article h1+h3{
	margin-top: 0;
	color: #777;
}


article > picture:nth-of-type(1){
	position: fixed;
	display: block;
	margin: 0;
	overflow: hidden;
	top: 0;
	right: 0;
	width: 40vw;
	height: 100vw;
}

article > section{
	width: 60vw;
	padding: 0 1em 2em 1em;
}

article:target{
	opacity: 1;
	z-index: 9000;
}
article:target > *{
	margin: 0 !important;
}
article > picture:nth-of-type(1) > img,
article > picture:nth-of-type(1) > source{
	position: absolute;
	top: 0;
	right: -20vw;
	height: 100vh;
	min-width: 70vw;
	transition: all .75s;
}
article > picture:nth-of-type(1) > p{
	position: absolute;
	left: 0;
	top: 95vh;
	background: (0,0,0,.5);
	height: 1em;
	font-size: .5em;
}


article nav a{
	display: block;
	border: 1px solid #fff;
	border-left: .5em solid #cc0007;
	color: #fff;
	text-decoration: none;
	padding: .5em;
	margin-bottom: .5em;
	text-align: left;
	transition: all .5s;
}
article nav a:hover{
	background: #cc0007;
	border: none;
	border-left: #333 solid 2em;
	color: #fff;
}




/*
#first{ background-image: url(image1.jpg); }
#second{ background-image: url(image2.jpg); }
#third{ background-image: url(image3.jpg); }
*/
body > nav:nth-last-of-type(1){
	position: fixed;
	display: block;
	width: 100%;
	padding: .5em 2em;
	text-align: center;
	background: rgba(0,0,0,.5);
	z-index: 9500;
}
body > nav:nth-of-type(1) a{
	color: #fff;
	text-decoration: none;
	padding: 1em 2em;
}
body > nav:nth-of-type(1) > a:hover{
	border-bottom: .5em solid #c00;
}
body > nav:nth-of-type(1) a:nth-child(1){
	padding: 0;
}
#mainMenu:target ~ nav:nth-of-type(1),
body > nav:nth-of-type(1) > [data-upcoming="undefined"]{
	opacity: 0;
	pointer-events: none;
	cursor: default;
}


footer{
	position: fixed;
	display: block;
	width: 50%;
	padding-top: .5em;
	text-align: center;
	z-index: 9500;
	bottom:0;
}
footer nav > a{
	display: inline-block;
	color: #fff;
	text-decoration: none;
	width: 49%;
	height: 1em;
	border: 1px solid #fff;
	font-size: 1.5em;
}
footer nav > a:hover{
	background: #fff;
	color: #000;
}


ul li{
	padding: .5em;
}




[data-boxes]{
	padding: 0;
	list-style: none;
	padding: 1em;
}
[data-boxes="centre"],
[data-boxes="centre"] *{
	text-align: center;
}
[data-boxes] > *{
	border: 1px solid #fff;
	padding: 1em !important;
}
[data-boxes] > a{
	color: #fff;
	text-decoration: none;
}
[data-boxes] > a:hover{
	background: #300;
}


[data-colour="0"]{color:purple!important;}
[data-colourBg="0"]{background:purple !important;}
[data-colourBg="0"]:not([data-colour]){color:#fff !important;}
[data-colour="1"]{color:#00FF7F !important;}
[data-colourBg="1"]:not([data-colour]){color:#000 !important;}
[data-colourBg="1"]{background:#00FF7F !important;}
[data-colour="2"]{color:#FFDA44 !important;}
[data-colourBg="2"]{background:#FFDA44 !important;}
[data-colourBg="2"]:not([data-colour]){color:#000 !important;}
[data-colour="3"]{color:#00F7FF !important;}
[data-colourBg="3"]{background:#00F7FF !important;}
[data-colourBg="3"]:not([data-colour]){color:#000 !important;}
[data-colour="4"]{color:#E2FF00 !important;}
[data-colourBg="4"]{background:#E2FF00 !important;}
[data-colourBg="4"]:not([data-colour]){color:#000 !important;}
[data-colour="5"]{color:#F44336 !important;}
[data-colourBg="5"]{background:#F44336 !important;}
[data-colourBg="5"]:not([data-colour]){color:#000 !important;}



[data-columns] > *{
	display: inline-block;
	padding: 0;
	margin: 0 .1%;
}
[data-columns="3"] > *{ width: 32%; }
[data-columns="4"] > *{ width: 24%; }


.big{
	font-size: 3em;
}



.boxed{
	border: 1px solid #fff;
}


.loader {
    border: 16px solid transparent; /* Light grey */
    border-top: 16px solid #FFDA44; /* orange */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}



.noHighlight{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.padded{
	padding: .5em 1em;
}

.popout > .closeBtn{
	isplay: block;
	position: fixed;
	top: 20%;
	right: 20%;
	padding: 0 .2em;
	background: #d00;
	color: #fff;
	border: 5px solid #fff;
	border-radius: 100%;

}



.popout{
	display: block;
	position: fixed;
	top: 0;
	left: -100vw;
	width: 100vw;
	margin-left: -100vw;
	background: rgba(0,0,0,.75);
	margin: 0;
	opacity: 0;
	transition: opacity .5s;
	overflow: hidden;
	z-index: 9999;
}
.popout:target{
	left: 0;
	opacity: 1;
	z-index: 9000;
	margin: 0;
}
.popout > *{
	display: block;
	width: 50vw;
	height: 75vh;
	margin: 12vh 25vw;
}



.sizeSmall{
	font-size: .5em;
}



@keyframes fade {
    0% { opacity: 1; }
		99% { opacity: 0; left: 0;}
    100% { left: -100vw; }
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}






@media screen and (max-width: 900px) {
	body{
	}

	body > article:nth-of-type(1){
		padding: 1em;
	}


	article{
		padding-top: 30vh
	}

	article > picture:nth-of-type(1){
		width: 100vw !important;
		height: 30vh;
		right: unset;
	}
	article > picture:nth-of-type(1) > *{
		height: 100% !important;
		right: 0 !important;
		min-width: unset;
		width: 100vw;
	}

	article > section{
		width: 100vw;
		top: 30vh;
	}

	footer{
		width:100%;
	}
}