@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic);
@font-face {
	font-family: 'Porridge';
	src: url('i/fonts/Porridge.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}


*{margin: 0;padding: 0;}

html{ min-height: 100%; height: 100%; }
body{font: normal normal normal 100%/140% 'Archivo Narrow', sans-serif; color: #036; background: url(i/back-1.jpg); background-size: cover; background-attachment: fixed; min-height: 100vh; background-position: center top; background-repeat: no-repeat; position: static; }
p{ margin: 10px 20px; font-size: 1.2em; line-height: 1.4em; }
ul, ol{ margin: 10px 30px; }
h1{ font: normal normal 500 2em/1.3em 'Porridge', sans-serif; margin: 10px 20px; text-transform: uppercase; }
h2,h3,h4{ font: normal normal 500 1.5em/1.3em 'Porridge', sans-serif; margin: 10px 20px; text-transform: uppercase; }
h3, h4{ font-size: 1.2em; }
a{ color: #ccf; transition: 2s color; }
a:hover{ color: #88b; }
label{ width: 200px; display: inline-block; }
button, a.button{ color: #fff; background-color: #222; border-radius: 5px; font-weight: bold; padding: 0.3em; border: none; cursor: pointer; transition: 1400ms background-color; display: inline-block; text-decoration: none; }
button:hover{ background-color: #777; }
input, textarea, select{ width: 500px; border: 1px solid #bbf; border-radius: 3px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); line-height: 2em; font-family: inherit; max-width: 100%; }
select{ width: auto; min-width: 500px; max-width: none; }
textarea{ vertical-align: top; border-radius: 7px; }
img, video{ max-width: 100%; height: auto !important; }
audio{ vertical-align: middle; }

ul.pagination{ margin: 10px 20px; }
ul.pagination li{ display: inline-block; list-style: none; padding: 0 .6em; background: #ccc; margin: 0 0 5px; }
ul.pagination a{ color: #000; text-decoration: none; }
ul.pagination a:not([href]){ color: #999; }

ul.QuizQuestion{ margin: 10px 20px; line-height: 2em; }
ul.QuizQuestion li{ list-style: none; display: block; }
ul.QuizQuestion input[type="radio"]{ display: none; visibility: hidden; }
ul.QuizQuestion span{ background: rgba(0,0,0.5); display: block; width: 100%; padding: 0 1em; margin: 2px 0; cursor: pointer; }
ul.QuizQuestion label{ width: 100%; }
ul.QuizQuestion input[type="radio"]:checked+span{ background: rgba(0,0,0,.3);}
ul.QuizQuestion input[type="radio"]:hover+span{ background: rgba(0,0,0,.42);}

#main{ margin-top: 80px; color: #fff; }
#main>div{ background-color: #000; background-color: rgba(0,0,0,0.6); border-radius: 6px; min-height: 600px; }

#footer{ background-color: #000; background: radial-gradient(rgba(50,50,0,0.6), rgba(0,0,0,1)); color: #fff; padding: 20px 0; text-align: center; font-size: .75em; line-height: 1.3em; margin-bottom: 100vh; }
#footer p{ font-size: .9em; }
#footer a{ color: #eee; text-decoration: none; }
#footer a:hover{ color: #f06; }

#menu{ position: absolute; top: 38px; z-index: 2; }
#menu a{ color: #fff; text-decoration: none; }
#menu a:hover{ color: #f06; }
#menu li{ list-style: none; display: inline-block; margin: 0 10px 0 0; position: relative; }
#menu li:last-of-type{ margin: 0; }
#menu ul{ position: relative; margin: 0; }
#menu ul ul{ display: none; position: absolute; top: 1.2em; left: 0; white-space: nowrap; background-color: #000; }
#menu ul li:hover ul{ display: block; }
#menu ul ul li{ display: block; }

#title{ position: absolute; top: 0; text-align: left; background-color: #000; height: 71px; border: 1px solid #f30; border-width: 0 0 3px 0; }
#title>div{ position: relative; }
p#searchbar{ margin: 0; position: absolute; right: 0; top: 0; }
p#searchbar input{ width: 200px; }

#blog li{ display: inline; list-style: none; margin: 0 10px; }
#blog{ text-align: center; }
#blog ul{ margin: 10px;; }

.holder{ width: 100%; position: relative; }
.holder>div{ width: 85%; margin: 0 auto; max-width: 100%; }
.hon{ display: none; }
.right{ float: right; }
.guesttext{ white-space: pre-line; }
.clips{ text-align: center; }
.clips p{ display: inline; margin: 0; white-space: nowrap; font-size: .9rem; }
.clips video, .clips audio{ margin: 0 5px 5px 0; }
.castle{ display: inline-block; width: 200px; }
.centre{ text-align: center; }

video.background-video{ width: auto; height: auto; min-width: 100vw; min-height: 100vh; z-index: -10; position: fixed; top: 0; left: 0; object-fit: cover; }
body:before{ content: ""; display: block; width: 100vw; height: 100vh; z-index: -9; position: fixed; background: url(i/vidoverlay.png); top: 0; left: 0; }



#menuhider, #menuhiderlabel{ display: none; visibility: hidden; }

@media all and (max-width: 1023px){
	.holder>div{ width: 98%; }
	#menu-list{ display: none; visibility: hidden; }
	label#menuhiderlabel{ display: inline-block; visibility: visible; cursor: pointer; background: #666; width: auto; padding: 0 .5em; line-height: 2em; border-radius: 3px; }
	#menu{ text-align: center; color: #fff; }
	#menuhider:checked+#menu-list{ display: block; visibility: visible; }
	#menu li{ display: block; margin: 0; background: #000; line-height: 2em; font-size: 1.4em; }
	#menu li li{ font-size: .8em; line-height: 2em; }
	#menu li li a{ color: #ccc; }
	#menu ul ul{ display: block; position: static; }
}

@media all and (max-width: 799px){
	select{ min-width: none; max-width: 100%; }
	#title{ text-align: center; }
	p#searchbar{ position: static; }
	#menu{ top: 75px; }
	#main{ margin-top: 117px; }
	#title{ height: 108px; }
}

@media all and (max-width: 699px){
	.clips p{ white-space: normal; }
	audio{ max-width: 100%; }
}