@font-face {
	font-family:roboto;
	src:url(roboto.ttf);
}
@font-face {
	font-family:roboto-bold;
	src:url(robotoBold.ttf);
}
.header-container {
	position: relative;
	text-align: center;
	color: white;
}
.title {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:45px;
}
.subtitle {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	display:none;
}
html, body { /*we do not use the . before the class name because we are styling tags, not classes. Usually a bad practice, but excusable for the HTML and Body tags.*/
	padding: 0;
	margin: 0;
	height:100%;
}
body {
	padding-bottom: 10%;
	font-family: 'Roboto', sans-serif;
	background-color:#080808;
}
h1 {
	color:white;
	font-size:1rem;
}
h2 {
	color:white;
}
.footer {
	height:10%;
	width:100%;
	bottom:0;
	padding: 1%;
	text-align: center;
}
.padded_container {
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5%;
	text-align:center;
}
.boldMobile {
	font-weight: 50px;
}
.padded_sys {
	/*width:19%;
	float:left;
	display:inline-block;*/
	border:1px solid black;
	text-align:center;
	margin:.5%;
	padding-bottom:2%;
	margin-bottom:2%;
}
.desktop {
	display:none;
}
b {
	font-family:roboto-bold;
}
.slideshow {
	height:50%;
}
.advancer {
	margin:.5%;
	width:39.5%;
	background-color:black;
	border:1px solid white;
	color:white;
	outline:none;
	cursor:pointer;
	padding:2%;
}
.advancer:active {
	background-color: dimgrey;
}
.grey {
	color:lightgrey;
}
.fullwidthM {
	height:60%;
}
.imageContainer {
	height:90%;
}
.hideOnMobile {
	display:none;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: grey;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (min-width: 900px) {
	.padded_sys {
		float:left;
		display:inline-block;
		width:19%;
	}
	h1 {
		font-size:2rem;
	}
	.fullwidthM {
		height:50%;
	}
	.hideOnMobile {
		display:inline-block;
		margin-top:5%;
		margin-bottom:5%;
	}
	.slideshow {
		height:80%;
	}
	.advancer {
		width:19.5%;
	}
	.padded_container {
		margin-left:15%;
		display:inline-block;
		margin-right:15%;
	}
	.subtitle {
		display:block;
	}
	.mobile {
		display:none;
	}
	.desktop {
		display:block;
	}
	.imageContainer {
		height:70%;
		bottom:0;
	}
}

iframe {
	border:none;
	outline:none;
	overflow:hidden;
}

.loaderDiv {
	margin-top:255px
}

.loader {
	border:#808080 2px solid;
	width:15%;
	height:10%;
	background-color:transparent;
	color:white;
	
}

.explanation {
	color:white;
	content:"You need to click load to start the viewer. This is done so the website loads quickly and runs smoothly on lower-end computers, without the viewer bogging down the experience.";
}