button {
	color: white;
	font-family: 'Black Ops One', cursive;
	background-color: red;
	border-radius: 0;
	border: 0px;
}
.button-group {
	margin-bottom: -4em;
	margin-top: 2em;
}

#top {
	background: #fff url('../images/keyvis.jpg') no-repeat 65% 45%;
	background-size: cover;
	height: 100vh;
	padding: none;
	overflow: hidden;
}

@media screen and (min-aspect-ratio: 1/1) {
	#top{
	background: #fff url('../images/keyvis.jpg') no-repeat 100% 55%;
	background-size: cover;
	}
}

.featherlight-close {
	display: none;
}

.logo-container {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0;
	/*background-color: rgba(0,0,0,.75);*/
}
#game-logo {
	position: absolute;
	width: 50%;
	max-width: 75em;
	top: 2.5%;
	right: 2.5%;
}

#mg-logo {
	position: absolute;
	width: 15%;
	min-width: 10em;
	max-width: 15em;
	left: 5%;
	bottom: 2.5%;
}

.social {
	position: absolute;
	right: 5%;
	bottom: 2.5%;
}

#propeller-logo {
	position: absolute;
	width: 15%;
	top: 2.5%;
	left: 5%;
	max-width: 10em;
}

body {
	background-color: #000;
}

p,
h3 {
	color: #fff;
}

h3 {
	margin-top: 2em;
	color: red;
	font-family: 'Black Ops One', cursive;
}

p {
	font-family: 'Alegreya', serif;
	padding: 0em 2em;
	font-size: 1.25em;
		text-indent: 2em;


	}
.section {
	height: 100vh;
	width: 100vw;
}


#story {
	background-image: url('../images/BG800a.png');
	background-size: cover;
	background-position: 50% 50%;
	text-align: center;
}

#story svg {
	width: 100%;
	height: 90%;
	margin-top: 5%;
	background-image: url('../images/black.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	fill: white;
}

#characters {
	background-image: url('../images/BG200a.png');
	background-size: cover;
	background-position: 50% 50%;
}

#charaselect {
	background: rgba(0,0,0,.65);
	padding: 1em;
}

h3.row {
	margin-top: 0em;
	margin-bottom: 0em;
}

img.columns {
	margin-bottom: .75em;
	border: 2px solid red;
}

img.three:hover {
	border: 2px solid yellow;
}

img.three.activate {
	border: 2px solid yellow;
}

.profile {
	display: none;
}

.profile.activate {
	display: block;
}

.profile img {
	position: absolute;
	width: 627px;

	top: 50%;
	transform: translateY(-35%);
}


.leviathan.profile img,
.cerberus.profile img {
	width: 100%;
}

.nametag {
	background: rgba(0,0,0,.75);
	display: inline-block;
	padding: 0em 1em;
	opacity: .99;
}

.nametag h3 {
	margin: 0;
	margin-top: .5em;

}

.nametag h4 {
	margin-top: -.5em;
	font-size: 1.5em;
	font-family: 'Alegreya', serif;
	color: white;
}

.profile-text {
	position: absolute;
	background: rgba(0,0,0,.75);
	font-size: .85em;
	line-height: 1.25em;
	padding-top: 2em;
	bottom: 0;
}

.profile-text p {
	font-size: 1em;
	margin-bottom: 1em;
}

#gallery {
	background-image: url('../images/BG811a.png');
	background-size: cover;
	background-position: 50% 50%;
}

#specs {
	background-image: url('../images/BG210e.png');
	background-size: cover;
	background-position: 50% 50%;
}

#gallery {
	padding: 2em;
}

#gallery img {
	width: 100%;
	display: block;
	border: 3px solid red;
}

#gallery img:hover,
#gallery img:focus,
#gallery img:active {
	border: 3px solid yellow;
}

#gallery .row {
	margin-bottom: 1em;
}
#gallery h3 {
	background: rgba(0,0,0,.75);
	display: inline-block;
	padding: 0 .5em;
	margin: 0;
	position: absolute;
	top: 5%;
	left: 2.5%;
}

.specs{
	margin-top: -10%;
}

.cgsample img {
	width: 17em;
	margin: 1em;
	border: 3px solid #d0111b;
}

table {
	
	color: #fff;

}

.seven {
	background-color: rgba(0,0,0,.75);
	padding: 2em;
}

th {
	color: red;
		font-family: 'Black Ops One', cursive;

}

a.news {
	position: absolute;
	background: red;
	color: white;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	left: 0%;
	font-size: 1.5em;
	padding: .25em;
	padding-left: 1.5em;
	padding-right: 1em;
	font-family: 'Black Ops One', cursive;
}

a.news:hover {
	color: black;
}

#opvid_thumb {
	position: absolute;
	left: 2.5%;
	bottom: 5%;
	margin-bottom: 3em;
	
}

#opvid_thumb>img {
	border: 3px solid red;
	width: 15em;

}

#opvid_thumb>img:hover,
#opvid_thumb>img:focus,
#opvid_thumb>img:active {
	border: 3px solid yellow;
}

#opvid {
	
	width: 960px;
	height: 720px;
}



@media (max-width: 960px) {
	#opvid {
	
	width: 640px;
	height: 480px; 
}

}
@media (max-width: 750px) {
	#opvid {
	
	width: 420px;
	height: 315px; 
}

}

.lightbox {
	display: none;
	text-align: center;
}


.featherlight .featherlight-content {
	background: none;
}


/* Footer
  --------------------------------------------- */  

footer {
	background-color: red;
	font-size: 1em;
	color: #fff;
	text-align: center;
	padding: 2em 0;
	position: absolute;
	bottom: 0;
	width: 100%;
}

footer a {
	color: #fff;
	text-decoration: none;
	transition: 300ms;
}

.links {
	font-weight: bold;
}

footer a:hover,
footer a:active,
footer a:focus {
	color: #ffffff;
	-webkit-filter: invert(100%);
 	-moz-filter: invert(100%);
  	-o-filter: invert(100%);
  	-ms-filter: invert(100%);
  	filter: invert(100%);
}

.copyright {
	font-size: .5em;
	color: #fff;
	text-align: center;
	margin-bottom: 1em;
}
 
 footer img {
 	width: 100%;
 }