*{
box-sizing: border-box;
}
html, body{
margin: 0px;
padding: 0px;
font-family: arial;
}
body{
text-align: center;
}

div.hero{
position: relative;
}
div.hero img{
max-width: 100%;
height: auto;
}
div.formfield{
width: 100%;
}
span.confirmtitle{
display: none;
font-weight: bold;
}
.inputcont p.checkboxtext{
display: inline;
width: auto;
}
nav{
background: linear-gradient(#0D1426, black);
overflow: hidden;
display: flex;
justify-content: space-between;
position: relative;
border-bottom: 3px solid white;
}
a{
font-weight: bold;
}
nav a{
color: white;
text-decoration: none;
font-weight: normal;
}
div.menulinks a{
margin: 0px 10px;
display: inline-block;
color: white;
}
div.menulinks a:visited{
color: white;
}

div.warpcont{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
width: 15%;
}
img.warpcentre{
animation: warpspin 5s linear infinite;
/*transition: all 6s linear;
transform: rotate(720deg);*/
max-width: 100%;
display: block;
height: auto;
}

@keyframes warpspin {
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
	stroke-dashoffset: 0;
}
}

div.logoback{
position: relative;
max-width: 323px;
}
div.menulinks{
float: right;
display: flex;
align-items: center;
padding-right: 20px;
}
nav a:hover{
text-decoration: none;
}
nav img{
float: left;
max-width: 100%;
height: auto;
}

input, textarea{
width: 100%;
border: 3px solid gray;
border-radius: 5px;
clear: both;
display: block;
padding: 6px 7px;
}

textarea{
height: auto;
font-family: Arial;
padding: 10px;
}
div.inputcont{
display: flex;
width: 80%;
margin: 0px auto 26px;
align-items: center;
flex-wrap: wrap;
}

button.submit, #loginpopup button.submit{
border: 2px solid #39C;
/* old background: #39C; */
background: #2A7EA7;
color: white;
font-weight: bold;
padding: 10px 15px;
border-radius: 20px;
display: block;
margin: 0px auto;
font-size: max(2vh, 16px);
}

footer{
text-align: center;
margin: 10px 0px;
padding-bottom: 50px;
color: white;
padding-top: 50px;
background-position: center;
background-color: #111;
margin-bottom: 0px;
}

footer a{
color: white;
font-weight: bold;
text-decoration: 1px solid white;
}

input.invalid, textarea.invalid{
border-color: red;
}

div.inputcont p.error, #index p.error{
color: red;
text-align: center;
width: 100%;
margin: 0px;
display: none;
}
div.text{
width: 80%;
margin: 20px auto;
text-align: left;
color: #666;
line-height: 130%;
}
div.text h1{
text-align: center;
}
p.centre{
text-align: center;
}
div.privacy{
margin-top: 10px;
}
div.prettyleft{
top: 0px;
bottom: 0px;
padding: 20px;
display: flex;
flex-direction: column;
background-image: linear-gradient(black, transparent), url('/images/corp/galaxy2.webp');
background-size: cover;
color: white;
flex-basis: 46%;
flex-shrink: 0;
background-position: center;
}
#registerhost div.prettyleft{
background-image: linear-gradient(black, transparent), url('/images/corp/galaxy5.webp');
}
div.savenote{
	display: none;
	text-align: center;
	background-color: white;
	border-radius: 10px;
	padding: 10px;
	color: #333;
}

div.savenote svg{
height: 25px;

}

div.notificationcont{
width: 80%;
margin: 0px auto 15px;
}
div.error{
color: red;
display: block;
}
div.success{
color: green;
display: block;
text-align: center;
}
div.submitting{
display: block;
}

div.billingopt p{
display: inline-block;
vertical-align: middle;
}
div.radiobuttoncont{
display: flex;
justify-content: center;
width: 100%;
}
div.radiooption{
margin: 0px 5%;
}
label{
margin-left: 5px;
}
div.quizdivider{
	height: 1px;
	width: 90%;
	background-color: white;
	flex-shrink: 0;
	z-index: 99;
}

div.radiobuttoncont{
display: flex;
justify-content: center;
}
body.cke_editable{
padding: 0px 10px;
text-align: left;
}
div.prettyleft a{
color: white;
font-weight: bold;
}
span.required{
color: red;
}
div.savenote span{
vertical-align: middle;
}
div.savenote.submitting{
display: flex;
justify-content: center;
align-items: center;
}
div.paymenttype{
margin-top: 10px;
}
form input.checkbox, input[type="checkbox"], input.checkbox, input#terms, input#eventemailupdates{
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
}

input.checkbox.invalid, input.hiddencheckbox.invalid{
outline: 3px solid red;
border: none;
}

div.getstarted{
background-color: #0066CC;
padding: 10px;
}
div.iconpic{
display: none;
}

form.registerform{
color: #333;
/*flex-basis: 66%;*/
width: 100%;
padding: 0px 10px;
margin: 0px auto;
}
div.registrationform{
flex-basis: 54%;
}
#article div.mainbody, #bloglist div.mainbody{
background: url('/images/corp/tutorial.jpg') #010E17;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 0;
overflow: hidden;
}
#index div.inputcont.email{
display: none;
}
#bloglist h3{
font-size: 27px;
line-height: 38px;
margin: 0px;
}

div.mainbody::before{
content: "";
background: inherit;
filter: blur(4px);
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: -1;
/*box-shadow: inset 0 0 2000px rgba(0, 0, 0, .5);*/
}
div.blog h1{
text-align: center;
font-size: 30px;
}
div.blog div.headerpic{
background: none;
}
div.blog div.headerpic img{
max-width: 100%;
}
div.articlelist{
display: flex;
margin-bottom: 20px;
}
div.articlelist img{
max-width: 50%;
height: 100%;
}
div.articledesc{
margin-left: 10px;
}
/* Article bits */
div.article{
width: 80%;
display: inline-block;
min-height: 800px;
background-color: white;
padding: 0px 20px 10px;
max-width: 1080px;
text-align: left;
color: #333;
position: relative;
z-index: 1;
margin-bottom: 50px;
}
span.writtenby{
font-weight: bold;
color: #333;
}
blockquote{
border-left: 5px solid #002642;
padding-left: 10px;
margin-left: 30px;
}
div.article  p, div.article  ul li, div.article ol li, div.article blockquote{
margin-bottom: 20px; 
line-height: 150%;
}
div.article ul, div.article ol{
margin: auto;
padding-left: 0px;
width: 75%;
}
div.inputcont p{
width: 100%;
margin: 0px 0px 6px 0px;
text-align: left;
}
div.article div.text{
max-width: 100%;
background-color: white;
min-height: 100%;
margin: 0px auto;
color: black;
}

div.headerpic {
position: relative;
overflow: hidden;
width: 100%;
margin: 0px auto;
min-height: 200px;
background: url('/images/corp/tutorial2.jpg');
background-size: cover;
background-position: center;
}
div.textbg {
background: rgba(0,0,0,0.5);
width: 96%;
height: 80%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
color: white;
z-index: 1;
}
div.breadcrumb{
text-align: left;
padding: 10px 0px;
font-weight: bold;
color: #333;
}
#article div.text{
width: 90%;
}
#bloglist div.text{
width: 100%;
}
div.headerline{
border: 1px solid white;
width: 100%;
position: absolute;
}
div.rightline{
right: 2%;
height: 95%;
width: auto;
}
div.leftline{
left: 2%;
height: 95%;
width: auto;
}
div.topline{
position: absolute;
top: 7%;
width: 98%;
}
div.bottomline{
position: absolute;
bottom: 7%;
width: 98%;
}
div.piccentre{
margin: 0px auto 0px;
display: block;
text-align: center;
}
div.article a, a.nou{
color: #0980E1;
text-decoration: none;
font-weight: bold;
}
div.breadcrumb a{
color: #333;
}

#article ul.noicon{
list-style: none;
}

h1.headline{
color: #0B101F;
font-size: 24px;
margin: 20px 0px;
text-align: left;
}
h2.shorthead{
font-size: 32px;
color: white;
}
div.piccentre img{
max-width: 100%;
vertical-align: top;
height: auto;
}
div.piccentre img:hover{
cursor: zoom-in;
}
div.expansionbox{
border: 1px solid #Ccc;
border-radius: 5px;
margin-bottom: 20px;
}
div.article p.sectionhead{
padding: 5px 10px;
margin: 10px 0px;
font-size: 20px;
color: #0B101F;
font-weight: bold;
}
div.expandbox{
height: 30px;
width: 30px;
background-color: #999;
border-radius: 5px;
float: right;
margin: 10px 20px;
text-align: center;
line-height: 30px;
font-size: 25px;
flex-shrink: 0;
}
div.articleexpansionhead{
display: flex;
justify-content: space-between;
align-items: center;
}
div.articleexpansionhead:hover{
cursor: pointer;
}
div.sectionhidden{
overflow: hidden;
height: 0px;
transition: height .4s ease-out;
}
div.sectioninner {
padding: 0px 20px 20px;
}
div.fullscreenpic{
background: rgba(0,0,0,.8);
width: 100%;
position: fixed;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
text-align: center;
}

div.fsimg{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
div.fsimgcont{
max-height: 95%;
display: inline-block;
}
div.fullscreenpic img{
vertical-align: middle;
max-height: 100%;
max-width: 95%;
}
div.fullscreenpic:hover {
cursor: zoom-out;
}
li div.piccentre{
margin-top: 10px;
}
span.caps{
text-transform: uppercase;
}
div.quizdivider{
flex-basis: 33%;
background-color: gray;
}
div.detailshead{
display: flex;
align-items: center;
justify-content: space-around;
margin: 20px 0px 0px;
}

p.registerhead{
width: 90%;
margin: 10px auto;
}
p.notice{
padding: 10px 20px;
background-color: #a1c7d9;
border-radius: 10px;
}
span.stars{
font-size: 25px;
color: gray;
}
span.star.filled{
color: #2e86b0;
}
p.mainquote{
font-style: italic;
}

div.youtube{
width: 100%;
text-align: center;
margin-bottom: 20px;
}

div.media{
width: 100%;
border-top: 1px solid #6666;
border-bottom: 1px solid #6666;
position: relative;
max-width: 800px;
margin: 0px auto 20px;
}
div.mediainner{
padding-top: 56.25%;
} 
div.media iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div.navlinklogin{
display: flex;
}

a{
text-decoration: none;
color: #0066CC;
}

a:hover{
text-decoration: underline;
}
a:visited{
color: #0066CC;
}
div.headerpic img{
display: block;
}


div.officialquiz p.inputname{
font-weight: bold;
}

input:disabled{
background-color: #999;
}
/* Info listings for e.g. the my causes page - also will be used on official events*/
p.infodetails{
text-align: center;
}
div.infogroupleft p.infodetails{
text-align: left;
}
div.infogrouphead h2{
width: 100%;
}
div.infogrouphead{
max-width: 100%;	
display: flex;
flex-wrap: wrap;
}
div.infogroup{
flex-basis: 33%;
}
div.infogroupstripe{
flex-basis: 40%;
}
div.fullwidthdivide{
width: 100%;
text-align: right;
margin: 10px 0px;
}
div.detailsrow{
display: flex;
justify-content: space-evenly;
}
div.infogroupleft{
justify-content: left;
}
div.infogroupleft p.infohead{
text-align: left;
}
div.infogroupwide p.infodetails{
width: 100%;
}
p.infohead{
font-weight: bold;
width: 100%;
text-align: center;
}
div.infogroupwide{
max-width: 100%;
flex-basis: 100%;
width: 100%;
}
div.infogroupright{
float: right;
}

p.infodetailscentre{
text-align:center;
}
p.infodetailsemail{
margin-top: 10px;
}
footer a, footer a:visited{
color: white;
}
.hidden, div.hidden{
display: none;
}
svg.spinnerpermaanim{
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
transform-origin: center center;
}


@keyframes rotating{
from {
	-ms-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
} to {
	-ms-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	transform-origin: center center;
}
}
svg.spinner{
height: 25px; 
width: 25px;
margin: 0px 0px 0px 5px;
vertical-align: middle;
}

circle.timerouter{
stroke: #3898d2;
fill: transparent;
stroke-width: 5;
}
circle.upperedge{
stroke: white;
fill: transparent;
stroke-width: 10;
stroke-dasharray: 60,374;
stroke-dashoffset: -238;
}
circle.timerouter{
stroke-width: 10;
}
img.logo{
display: block;
}
div.eventdetails{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
margin-left: 15px;
}
div.eventdetails p{
margin: 0px;	
}
div.eventlisting img{
max-height: 100px;
max-width: auto;
border-radius: 50%;
}
div.eventlisting{
display: flex;
max-width: 50%;
}
div.eventlistings{
display: flex;
justify-content: space-evenly;
}
svg.spinnerdots{transform-origin:center;animation:spinner .75s step-end infinite; vertical-align: middle;fill: white;}
div.submitting svg.spinnerdots{
fill: #333;
}
@keyframes spinner{8.3%{transform:rotate(30deg)}16.6%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.3%{transform:rotate(120deg)}41.6%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.3%{transform:rotate(210deg)}66.6%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.3%{transform:rotate(300deg)}91.6%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}

@media (max-width:820px){
div.menulinks{
	width: 100%;
	position: absolute;
	top: 60px;
	z-index: 999;
	display: block;
	height: 0px;
	overflow: hidden;
	transition: .25s height ease-out;
	padding: 0px;
	background-color: white;
}

div.menulinks a,div.menulinks a:visited{
	color: #333;
	width: 100%;
	background-color: white;
	display: inline-block;
	margin: 0px;
	transition: .25s all ease-out;
	padding: 10px 0px;
}

div.inputcont{
	width: auto;
}


div.menulinks a.navlinksmall{
	width: 50%;
}
div.navlink{border-bottom: 1px solid #CCC; background-color: white;color: #333;}
div.navlink:hover{
	background-color: #CCC;
}
div.menulinks a.navlinksmall:nth-child(2){
	border-left: 1px solid #CCC;
}
div.navlinklogin{
	display: flex;
}
div.menuburger{
	position: absolute;
	width: 40px;
	right: 10px;
	height: 100%;
}
div.menuburger:hover{
	cursor: pointer;
}
div.menuburger span{
	position: absolute;
	background-color: white;
	border-radius: 5px;
	transition: all .25s ease-out;
	left: 0px;
	width: 100%;
	height: 5px;
	color: white;
}
div.menuburger.open span:nth-child(1){
	opacity: 0;
}
div.menuburger.open span:nth-child(4){
	opacity: 0;
}
div.menuburger.open span:nth-child(2){
	transform: rotate(45deg);
}
div.menuburger.open span:nth-child(3){
	transform: rotate(-45deg);
}
div.menuburger span:nth-child(1){
	top: 20%;
}
div.menuburger span:nth-child(4){
	top: 70%;
}
div.menuburger span:nth-child(2), div.menuburger span:nth-child(3){
	top: 45%;
}
nav{
	overflow: visible;
	height: 60px;
}
nav a.logo{
	display: inline-block;
	position: absolute;
	width: auto;
	transform: translate(-50%, -50%);
	top: 50%;
}
div.warpcont{
	position: absolute;
	width: 15%;
}
div.logoback{
	max-width: 100%;
	width: 100%;
	/*height: 100%;*/
	/* needed for mobile corp page logo */
	text-align: center;
}
img.logo{
	max-width: 233px;
	
}
}
@media(max-width: 480px) and (min-width: 0px){
div.youtube{
	position: relative;
	/* Necessary workaround for youtube embed on mobile */
	padding-bottom: 56.25%;
	margin-bottom: 20px;
}

div.youtube iframe, div.youtube object, div.youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


	nav img{
		display: block;
		float: none;
		width: auto;
		margin: 0px;
		max-width: 100%;
	}
	img.warpcentre{
		max-width: 100%;
	}

	div.prettyleft{
		background-image: rgba(0,0,0,0.6), url('/images/corp/galaxy2.webp');
		min-height: 50vh;
	}
	textarea#description, #cke_description{
		height: auto;	
	}
	#article div.text, #bloglist div.text{
		width: 100%;
	}
	div.article{
		width: 95%;
	}
	div.headerpic{
		width: 108%;
		margin: 0px -4% auto;
		min-height: 175px;
	}
	div.blog div.headerpic{
		min-height: auto;
	}
	div.bottomline{
		bottom: 7%;
		width: 97%;
	}
	div.topline{
		top: 7%;
		width: 97%;
	}
	div.rightline{
		right: 3%;
		height: 93%;
	}
	div.leftline{
		left: 3%;
		height: 93%;
	}
	h2.shorthead{
		font-size: 26px;
		width: 87%;
	}
	div.article{
		padding: 0px 4% 10px;
	}
	div.piccentre{
		margin-left: -4%;
		width: 108%;
	}
	div.sectioninner{
		padding: 4%;
	}
	div.article ul div.piccentre, div.article ol div.piccentre{
		width: 120%;
		margin: 20px 0px 0px -15%;
	}
	div.article ul, div.article ol{
		padding-left: 9%;
	}
	div.causeboxsmall{
		width: 28%;
		margin: 2%;
	}
	div.articlelist img{
		max-width: 100%;
		align-self: flex-start;
	}
	div.articlelist{
		flex-wrap: wrap;
	}
	#bloglist h3{
		font-size: 20px;
		line-height: 26px;
		
	}

	span.caps{
		flex-basis: 71%;
		text-align: center;
	}
	div.quizdivider{
		flex-shrink: 1;
	}
}

a.hidepopupcross{
color: #CCC;
position: absolute;
border-radius: 50px;
border: 2px solid gray;
width: 35px;
height: 35px;
right: 15px;
text-align: center;
line-height: 32px;
font-size: 18px;
top: 23px;
}
table{
border-collapse: collapse;
}