*{
	box-sizing: border-box;
	position: relative;
	float: left;
}

html,body {
	background-color: #FFFFFF;
	background-attachment:scroll;
	background-repeat:repeat;
	background-position:center;
	background-size:2000px 2600px;

	height:96%;
	width:98%;
	margin: auto;

	visibility:visible;
}

/* THESE ARE THE CLASS DECLARATIONS FOR INDIVIDUAL ARTIFACTS AND CONTROLS */

p {
	font-family: verdana, arial, helvetica;
	font-style: bold;
	font-size: 2vw;
	font-decoration: none;
	color: #000000;
	text-align:center;
}

h3 {
	font-family: verdana, arial, helvetica;
	font-style: bold;
	font-size: 4vw;
	font-decoration: none;
	color: #000000;
}

h2 {
	font-family: verdana, arial, helvetica;
	font-style: bold;
	font-size: 1vw;
	font-decoration: none;
	color: #AAAAAA;
	text-align:center;
}

h1 {
	font-family: verdana, arial, helvetica;
	font-style: bold;
	font-size: 40px;
	font-decoration: none;
	color: #000000;
}

nugget {
	font-family: verdana, arial, helvetica;
	font-style: bold;
	font-size: 14px;
	font-decoration: none;
	color: RGB(0,0,33);
}

/* THESE ARE THE CLASS DECLARATIONS FOR THE SMALL SCREEN LAYOUTS */

@media (max-width: 650px) {

	p {
		font-family: verdana, arial, helvetica;
		font-style: bold;
		font-size: 4vw;
		font-decoration: none;
		color: #000000;
	}

	div.LowPadLayer {
		display: flex;
		background-color: #FFFFFF;
		opacity: 0;
		height: 100%;
		width: 20%;
	}

}

@media (max-width: 950px) {

	div.LowPadLayer {
		display: flex;
		background-color: #FFFFFF;
		opacity: 0;
		height: 100%;
		width: 20%;
	}

}

/* THESE ARE THE CLASS DECLARATIONS FOR THE MAIN STRUCTURES OF THE LAYOUT */

div.MenuButtonLayer {
	display: flex;
	background-color: #FFFFFF;
	opacity: 0.5;
	border: 5px solid #FFFFFF;
	border-radius: 5px;
	height: 15%;
	width: 15%;
}

div.LogoLayer {
	display: flex;
	background-color: #FFFFFF;
	opacity: 1;
	border: 5px solid #FFFFFF;
	border-radius: 5px;
	height: 15%;
	width: 70%;
}

div.QuoteLayer {
	display: flex;
	float: center;
	background-color: #FFFFFF;
	color: black;
	opacity: 1;
	border: 5px solid #FFFFFF;
	border-radius: 5px;
	height: 15%;
	width: 100%;	
}

/* THESE ARE THE CLASS DECLARATIONS FOR THE STORY LAYER AND IFRAME */

div.StoryLayer {
	display: none;
	position: absolute;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.9);
	background-image: url("HarIcons/LTBA-Close.png");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 5%;

	color: black;

	border: 5px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	top: 15%;
	height: 75%;
	width: 100%;	
}

.FileTransparency {
	display: flex;
	position: relative;
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	left: 10%;
	height: 100%;
	width: 80%;
	border: 5px solid rgba(255, 255, 255, 0);
	border-radius: 5px;
	overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.FileTransparency::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.FileTransparency {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}	

/* THESE ARE THE CLASS DECLARATIONS FOR THE COLOUR BLOCKS AND ANY PADDING */

div.SidePadLayer {
	display: flex;
	background-color: #FFFFFF;
	opacity: 0;
	height: 100%;
	width: 20%;
}

div.LowPadLayer {
	display: flex;
	background-color: #FFFFFF;
	opacity: 0;
	height: 0;
	width: 0;
}


.FlatPad {

	width: 70%;
	height: 25%;
}


div.TextHolder {
	display: flex;
	background-color: #FFFFFF;
	opacity: 1;
	width: 60%;

}

div.BlockHolder {
	display: flex;
	background-color: #FFFFFF;
	opacity: 1;
	height: 15%;
	width: 60%;

}

div.GoldLayer {

	display: flex;
	background-color: rgba(226, 194, 0, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 15vw;
}

div.BlueLayer {

	display: flex;
	background-color: rgba(0, 191, 217, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.GreenLayer {

	display: flex;
	background-color: rgba(123, 199, 81, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.PurpleLayer {

	display: flex;
	background-color: rgba(153, 0, 204, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.PinkLayer {

	display: flex;
	background-color: rgba(255, 51, 153, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.OrangeLayer {

	display: flex;
	background-color: rgba(255, 102, 0, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.BlackLayer {

	display: flex;
	background-color: rgba(0, 0, 0, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}

div.ForestLayer {

	display: flex;
	background-color: rgba(0, 102, 51, 0.9);
	opacity: 1;
	border: 5px solid rgba(255, 255, 255, 1);
	border-radius: 10px;
	width: 25%;
}


div.SmallPrintLayer {
	background-color: #FFFFFF;
	opacity: 0.5;
	 border: 5px solid #FFFFFF;
	border-radius: 5px;
	height: 10%;
	width: 100%;
}


/* THESE ARE THE CLASS DECLARATIONS FOR INDIVIDUAL ARTIFACTS AND CONTROLS */

div.CornerButtonLayer {
	style: none;
	position: relative;
	align: center;
	border-radius:25%;
	background-color: #FFFFFF;
	margin: auto;
	width: 30%;
	overflow: hidden;
}

.CornerButton {
	style: none;
	margin: 10%;
	max-height:80%;
	max-width:80%;
}

.TopLogo {
	style: none;
	margin: auto;
	max-height: 80%;
	max-width: auto;
}

.BigQuote {
	style: none;
	margin: auto;
	max-height: auto;
	max-width: 60%;
	min-width: 400px;
}

.SmallQuote {
	style: none;
	
	align: bottom;
	margin: auto;
	max-height: auto;
	max-width: 100%;
	min-width: 200px;
}