@font-face {
	font-family: "montserrat-bold";
	/*src: url(https://www.icondbn.co.za/fonts/MONTSERRAT-BOLD_0.TTF) format("truetype");*/
	src: url(../fonts/MONTSERRAT-BOLD_0.TTF) format("truetype");
}

@font-face {
	font-family: "opensans-regular";
	/*src: url(https://www.icondbn.co.za/fonts/OPENSANS-REGULAR_2.TTF) format("truetype");*/
	src: url(../fonts/OPENSANS-REGULAR_2.TTF) format("truetype");
}
/*
p.customfont {
	font-family: "My Custom Font", Verdana, Tahoma;
}
*/
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-family: helvetica, arial;
	background-color: rgb(39, 6, 52);
}

body.noscroll {
	position: fixed;
	overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "montserrat-bold", helvetica, arial;
	text-transform: uppercase;
	margin: 0;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.2em; }
h3 { font-size: .8em; }
h4 { font-size: .7em; }
h5 { font-size: .6em; }
h6 { font-size: .5em; }

a, a label {
	cursor: pointer;
}

article {
	margin-top: 4.5em;
	margin-left: .5em;
	margin-right: .5em;
	margin-bottom: 3.5em;
	padding: 1em;
	border: 1px #aaa solid;
	border-radius: 1em;
	background-color: #fff;
	font-family: "opensans-regular", helvetica, arial;
	overflow: auto;
}

article.content {
	background-color: #fff;
	border: 1px solid #588527;
	border-radius: 8px;
	/* width: 80%; */
	padding: 10px;
	/* margin: 0 8px; */
}

article a {
	text-decoration: none;
	color: #588527;
}

footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3em;
	background-color: rgb(140, 196, 62);
	text-align: center;
	padding: .2em;
	border-top: 1px rgb(39, 6, 52) solid;
}

footer a,
footer a:active,
footer a:hover,
footer a:visited {
	text-decoration: none;
	color: #268bbf;
	font-weight: bold;
}

footer .link {
	display: inline-block;
	margin-left: .8em;
	margin-right: .8em;
}

footer .link span {
	display: none;
}

footer .link img {
	display: inline-block;
	vertical-align: middle;
}

footer .sm-icon {
	max-height: 2.4em;
}


/* ---------------------------------------------------------------------------*/

#core-session-timeout-display { display: none; }

/* -----------------------------------------------------------------------------
TODO: this needs to move to desktop size, with alternate layout for mobile
*/
#admin-menu {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 3em;
	height: 2em;
	background-color: rgb(77, 16, 100);
	text-align: center;
	padding: 6px;
	border-top: 1px solid rgb(255, 255, 255);
}

#admin-menu a {
	border: 1px solid #588527;
	background-color: #cfc;
	color: #224200;
	padding:1px 16px;
	margin: 0 2px;
}


#admin-menu a:hover {
	background-color: #afa;
}

/* -------------------------------------------------------------------------- */








.landing {
	position: relative;
}

.logo-title,
.logo-subtext,
.logo-dates,
.logo-location
 {
	position: relative;
	display: block;
	margin-left: 10%;
	width: 80%;
}

.logo-main {
	position: relative;
	display: block;
	margin-left: 15%;
	width: 70%;
}

.logo-subtext,
.logo-dates,
.logo-location {
	font-family: "montserrat-bold", helvetica, arial;
	color: #fff;
	text-align: center;
}

.logo-subtext {
	margin-top: .2em;
	font-size: 1em;
}

.logo-dates {
	margin-top: .6em;
	font-size: 1.8em;
}

.logo-location {
	font-size: .8em;
}

.title-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4em;
	background-color: #000;
	padding: .8em;
}

.title-bar img {
	height: 100%;
	margin-right: 1em;
}

.title-bar .tbi1 {
	display: inline-block;
}

.title-bar .tbi2 {
	display: none;
}

.title-bar h1 {
	position: fixed;
	display: inline-block;
	color: #fff;
	font-size: 18px;
}

img.map {
	width: 100%;
	max-width: 814px;
	border: 1px rgb(39, 6, 52) solid;
}

.about-pic {
	width: 100%;
	max-width: 600px;
}

.watch-space-notice {
	color: rgb(140, 196, 62);
	font-weight: bold;
	font-size: .7em;
}


/* NOTE: Still need to deal with proper formatting of landscape mobile devices (primarily for the landing page) */

/* iPhone/Samsung landscape, iPad Portrait */
@media only screen and (min-width: 433px)
{
	h1 { font-size: 2em; }
	h2 { font-size: 1.5em; }
	h3 { font-size: 1.17em; }
	h4 { font-size: 1em; }
	h5 { font-size: .83em; }
	h6 { font-size: .67em; }

	article.content {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.logo-main,
	.logo-title,
	.logo-subtext,
	.logo-dates,
	.logo-location {
		margin-right: auto;
		margin-left: auto;
		width: 500px;
	}

	.logo-subtext {
		font-size: 1.8em;
	}

	.logo-dates {
		font-size: 3em;
	}

	.logo-location {
		font-size: 1.2em;
	}

	.title-bar .tbi1 {
		display: none;
	}

	.title-bar .tbi2 {
		display: inline-block;
	}

	.title-bar h1 {
		font-size: 28px;
	}

	.watch-space-notice {
		font-size: 1em;
	}
}

/* Desktop/iPad landscape */
@media only screen and (min-width: 1024px) /*and (orientation: landscape)*/
{
	#content {
		margin-top: 14em;
	}

	footer {
		padding: .4em;
	}

	footer .link {
		margin-left: 2em;
		margin-right: 2em;
	}

	footer .link span {
		display: inline-block;
		font-size: 1em;
		margin-top: .3em;
	}

	footer .sm-icon {
		max-height: 2em;
	}

	.title-bar {
		top: 9em;
	}

	.landing {
		top: -4em;
		text-align: center;
	}

	.logo-info,
	.logo-main {
		display: inline-block;
	}

	article a:hover {
		color: #58585A;
	}

	.about-pic {
		float: right;
		width: 25%;
	}

	.watch-space-notice {
		font-size: 1.2em;
	}
}