/* Colors
  --------------------------------------------- */  

h3 {
	color:  #ce3c30;
font-family: 'Poiret One', cursive;}

/* table {
	margin-top: 4em;
	color: #000;
}*/

#banner,
footer {
	background-color: #ce3c30;
}

body {
	background-image: url("../images/bkg/stardust.png");
}

/* Key Visual Positioning
  --------------------------------------------- */  

#keyvis{
	background: #fff;
	background-size: cover;
	height: 100vh;
	padding: none;
	overflow: hidden;
}

#demo-canvas {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);

}

.adults-only {
	position: absolute;
	top: 2.5%;
	right: 2.5%;
	width: 5em;
}

@media (max-width: 750px) {
	.adults-only {
	width: 3.5em;}

}

.social {
	position: absolute;
	top: 2.5%;
	left: 2.5%;
}
#brand-logo,
#mg-logo	{
	position: absolute;
	min-width: 10em;
}

#illust {
	background-image: url('../images/keyvis.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 35%;
	width: 100vw;
	height: 100vh;
	overflow:hidden;
}

.logo-container {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 10%;
}

#game-logo {
	display: inline;
	width: 100%;
	max-width: 65em;
	min-width: 30em;
	
}

#brand-logo {
	display: block;
	bottom: 75px;
	left: 5%;
	width: 15%;
}

#mg-logo {
	display: block;
	bottom: 75px;
	right: 5%;
	width: 15%;
}

hr {
	border-top: 4px dashed #8c8b8b;
}

/* Nav Bar
  --------------------------------------------- */  
#nav-pos {
	width: 100%;
	height: 60px;
	position: absolute;
	bottom: 0%;
	visibility: hidden;
}

#nav-bar {
	width: 100%;
	height: 60px;
	position: absolute;
	bottom: 0%;
	background-color: rgba(0,0,0,.75);
	z-index: 100;
	text-align: center;
}

#nav-bar.stickytop {
	position:fixed;
    top:0
}

#nav-bar ul {
	list-style-type: none;
}

#nav-bar ul li { 
	display: inline; 
	
}

#nav-bar ul li a {
	text-decoration: none;
	color: #fff;
	font-family: 'Poiret One', cursive;
	font-size: 2.5em;
	margin: 0 1em;
	transition: 300ms;
}

#nav-bar ul li a.new:after {
	font-size: .45em;
	font-weight: bold;
	position: absolute;
	margin-left: -1em;
}

#nav-bar ul li a:hover,
#nav-bar ul li a:active,
#nav-bar ul li a:focus {
	color:  #ce3c30;
	transition: 300ms;
}

@media (max-width: 960px) {
	#nav-bar ul li a {
		
		font-size: 1.5em;
	}

	#nav-bar ul {
		margin-top: .75em;
	}
}

@media (max-width: 600px) {
	#nav-bar ul li a {
		
		font-size: 1.15em;
	}

	#nav-bar ul {
		margin-top: 1.15em;
	}

}

#description {
	padding-top: 12.5%;
	padding-bottom: 12.5%;
}

#description p {
	padding: 0em 20%;
	text-indent: 2em;
	margin-bottom: .25em;
	color: #fff;
	font-family: 'EB Garamond', serif;
	font-size: 1.25em;
	text-align: left;
}

.note-container {
	width: 100%;
	height: 50em;
	margin-bottom: 5em;
	margin-top: 10em;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.note-tabs {
	height: 100%;
	width: 3em;
	left: -1.5em;
	position: absolute;
}

.tab span {
	width: 5em;
	font-size: 1em;
	text-align: center;
	line-height: 1em;
	text-decoration: none;
	color: black;
	font-family: 'EB Garamond', serif;
	position: absolute;
	margin-left: -1em;
	margin-top: 2.75em;
	display: block;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);

}

.tab {
	width: 3em;
	height: 7em;
	background-color: #a5a39d;
	margin-bottom: 1.5em;
	display: block;
}

.tab:after {
	width: 0;
	height: 0;
	border-top: 1.5em solid #a5a39d;
	border-left: 3.1em solid transparent;
	position: absolute;
	margin-left: 0em;
	margin-top: 7em;
	content: "";
}

.tab:hover,
.tab:active,
.tab:focus {
	background-color: #c7c3b4;
}

.tab:hover:after,
.tab:active:after,
.tab:focus:after {
	border-top: 1.5em solid #c7c3b4;
}

.tab.active {
	background-color: #f0ecdb;
}
.tab.active:after {
	border-top: 1.5em solid #f0ecdb;
}

/*.right-content.active {
	display:block;
}

.note-section.active {
	display:block;
}*/

.notebook {
	background-image: url("../images/bkg/ricepaper_v3.png");
	width: 100%;
	height: 40em;
	left: 1.5em;
	position: absolute;
	font-family: 'EB Garamond', serif;
}

.page-left,
.page-right,
.page-right2 {
	width: 50%;
	height: 90%;
	position: absolute;
	top: 5%;
}

.page-left {
	border-right: 1px solid #ccc;
	overflow: ;
}

.page-right,
.page-right2 {
	left: 50%;
	display: none;
}

.close,
.close2 {
	position: absolute;
	top: -.9em;
	right: .25em;
	font-size: 2em;
	color: #a5a39d;
	display: none;
}

.close:hover,
.close:active,
.close:focus,
.close2:hover,
.close2:active,
.close2:focus  {
	color: #c7c3b4;
}

.left-content,
.right-content {
	margin: 0 2em;
	
}

.new:after {
	content: " NEW";
	color: red;
	font-size: .75em;
	margin-left: .5em;
}

.left-content table {
	width: 100%;
	border: 1px solid black;
	border-top: 5px solid black;
}

.left-content td, th {
	border: 1px solid black;
	padding: 0;
	
}

.left-content td {
	padding-left: 1em;
}

.left-content td a, th {
	text-decoration: none;
	color: #000;
}

.left-content td a:hover,
.left-content td a:focus,
.left-content td a:active {
	text-decoration: underline;
}

.right-content {
	border-top: 5px solid black;
	padding-top: 1em;}

/*.right-content:target{
	display: block;
}*/




.right-content h5 {
	margin-top: -.5em;
	float: right;
}

.profile-data {
	width: 100%;
	
	position: relative;
	margin-bottom: 1em;
}

.profile-img {
	background-color: #fff;
	border: 1px solid black;
	width: 35%;
	float: left;
	margin-right: 1em;
}

.profile-stats {
	width: 59%;
float:right;	

	left: 40%;
}

.profile-description {
	line-height: 1em;
	float: left;
	text-align: justify;
}

.profile-description p {
	margin: .5em auto;
}

.subs-display {
	display:none;
	font-size: .9em;
	line-height: 1em;
	font-style: italic;

} 


.sub-box {
	border: 1px solid black;
	width: 100%;
	padding: .5em;
	box-sizing: border-box;
}
.voice-samples {
	float: left;
	width: 100%;
}
.voice-samples button {
	border-radius: 0;
	border: 1px solid black;
	margin-top: 1px;
}

.left-content img.loc {
	border: 1px solid black;
	width: 100%;
}

.loc-contain {
	width: 45%;
	float: left;
	margin: 1% 2.5%;
}

.right-content img.loc {
	border: 1px solid black;
	width: 100%;
}

.right-content .loc-desc {
	width: 100%;
	font-size: .80em;
	text-align: left;
}

#locations-present > .page-right2,
#locations-past > .page-right2 {
	display: block;
}


.triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid #a5a39d;
	border-left: 100px solid transparent;
	position: absolute;
	bottom: -2em;
	right: 0;
	opacity: .5;
}
.triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid #a5a39d;
	border-right: 100px solid transparent;
	position: absolute;
	bottom: -2em;
	left: 0;
	opacity: .5;
}

.triangle-bottomright:hover,
.triangle-bottomright:active,
.triangle-bottomright:focus,
.triangle-bottomleft:hover,
.triangle-bottomleft:active,
.triangle-bottomleft:focus {
	border-bottom: 100px solid #c7c3b4;
}

#locations-present .triangle-bottomright,
#locations-past .triangle-bottomright,
#locations-present .triangle-bottomleft,
#locations-past .triangle-bottomleft {
	display: none;
}

@media (max-width: 860px) {
	.page-left {
		width: 100%;
	}

	.page-right,
	.page-right2 {
		left: 0%;
		width: 100%;
		background-image: url("../images/bkg/ricepaper_v3.png");

		
	}
	.close,
	.close2 {
		display: block;
	}

	#locations-present > .page-right2,
	#locations-past > .page-right2 {
	display: none;
	}
	#locations-present .triangle-bottomright,
	#locations-past .triangle-bottomright,
	#locations-present .triangle-bottomleft,
	#locations-past .triangle-bottomleft {
	display: block;
	}

}
/*#locations-present .right-content,
#locations-past .right-content {
	display: block;
}*/

.notebook p {
	line-height: 1em;
	text-align: justify;
}


@media (max-width: 750px) {
	#description p {
		padding: 0em 1em;
	}
}

#banner {
	padding: .5em 10em .5em 10em;
	text-align: center;
	display: inline-block;
	position: absolute;
	top: 4em;
	left: -10em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	 -webkit-transform: rotate(-45deg);
	 transform: rotate(-45deg);
	 -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
	transition: 300ms;
} 

#banner:hover,
#banner:active,
#banner:focus {
	background-color: #e62b8a;
	transition: 300ms;
}	


#gallery {
	margin-top: 12.5%;
	margin-bottom: 12.5%;
}

#gallery h4,
#gallery a {
	color: #fff;
	font-family: 'EB Garamond', serif;
	text-align: center;
}

#details h3,
#gallery h3,
#system h3,
#information h3 {
	color: #fff;
	font-size: 4em;
}

#information,
#information a.button {
	color: #fff;
}

#information {
	margin-bottom: 12.5%;
}

#information img {
	width: 100%;
	border: 1px solid black;
}

#information th {
	border: none;
	color: #fff;
}

#information table {
	font-family: 'EB Garamond', serif;
}

#system {
	color: #fff;
}

#system img {
	width: 100%;
	border: 1px solid black;
}

#system h4,
#system p,
#system b {
	font-family: 'EB Garamond', serif;
}

#system p {
	line-height: 1em;
	text-align: justify;
}

#details h3 {
	margin-bottom: -1.5em;
}

#gallery h3 {
	margin-top: -1.5em;
}

.gal img {
	width: 100%;
	
}

.gal:hover {
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
}

.gal.new:after {
	position: absolute;
	margin-left: -3.5em;
	margin-top: .75em;
}

.gallery .nsfw img {
	opacity: 0.1;
}

.gallery .nsfw img:hover,
.gallery .nsfw img:focus,
.gallery .nsfw img:active {
	opacity: 1;
}

.nsfw  {
	background-image: url('../images/gal/nsfw.jpg');
	width: 100%;
	height: 100%;
	background-size: cover;
}

.cgsample img {
	width: 17em;
	margin: 1em;
}



#opvid_thumb {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

#opvid_thumb>img {
	width: 100%;
	float: left;
	/*opacity: .5;
	transition: 300ms;*/

}

#opvid_thumb>img:hover,
#opvid_thumb>img:focus,
#opvid_thumb>img:active {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

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


#short-stories{
	margin-top: 7em;
	padding: 3em;
	padding-top: 2em;
	padding-bottom: 8em;
	background-image: url("../images/bkg/note.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
	overflow: hidden;
	color: #000;
	width: 60%;
	margin-left: 40%;
}

#short-stories {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

/*#music {
	padding: 0 5em;
	padding-top: 2em;
	padding-bottom: 8em;
}

#music button {
	border-radius: 0;
	border: 0px solid black;
	font-family: 'EB Garamond', serif;
	padding-left: 1em;
	padding-right: 1em;
}

#music button:hover:before {
	 content: "\f001";
     font-family: FontAwesome;
     position: absolute;
     margin-left: -1.5em;
}

#music .fa {
	font-size: 1.5em;
}*/

#music {
	width: 35%;
	margin-top: 3em;
	position: relative;
	z-index: 10;
	-webkit-transform: rotate(-1deg);
	transform: rotate(-1deg);
	
}

#cover {
	position: absolute;
	width: 100%;
}

#record {
	position: absolute;
	width: 100%;
	transition: 300ms;
	
}

.record {
}

.hover-record {
	margin-left: 45%;
}

#music-pop {
	background-image: url("../images/musicbackground.jpg");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
	background-color: #fff;
	padding: 0 10em;
	padding-top: 2em;
	padding-bottom: 8em;
	/*width: 80vw;
	height: 80vh;*/

}

#music-pop h4,
#music-pop h5 {
	font-family: 'EB Garamond', serif;
}
#music-pop button {
	border-radius: 0;
	border: 0px solid black;
	font-family: 'EB Garamond', serif;
	padding-left: 1em;
	padding-right: 1em;
	margin: 0;
}

#tracklist {
	margin-top: 5%;
	margin-left: 45%;

}

#tracklist .audioplay {
	 cursor: pointer;
}

#tracklist .audioplay:before {
	
	content: "\f001";
     font-family: FontAwesome;
     margin-left: -1.55em;
     margin-right: .75em;
     margin-top: .25em;
}

#tracklist .audioplay:hover:before {
	 
}

#music-pop .fa {
	font-size: 1em;
}


#tracklist ul {
	list-style-type: none;
	text-align: left;
	font-family: 'EB Garamond', serif;
	padding-right: 2.5em;
}

#tracklist ul li {
	line-height: 1em;
	margin: .5em auto;
	text-indent: -1.5em;
}

#tracklist .audioplay:hover,
#tracklist .audioplay:focus,
#tracklist .audioplay:active {
	text-decoration: underline;
}

#short-stories a,
#short-stories h4 {
	color: #000;
	text-decoration: none;

}

#short-stories a {
	font-size: 1.15em;
	text-align: left;
}

#short-stories a:hover,
#short-stories a:focus,
#short-stories a:active {
	text-decoration: underline;
}

.ss-lightbox {
	background-image: url("../images/bkg/ricepaper_v3.png");
	padding: 5em;
}

.ss-lightbox p {
	text-align: left;
	text-indent: 2em;
	font-family: 'EB Garamond', serif;
	font-size: 1.25em;
	line-height: 1.25em;
	margin: 1em auto;
}

.ss-close {
	display: block;
	position: fixed;
	top: 5%;
	right: 10%;
	font-size: 2em;
	color: #a5a39d;
	cursor: pointer;
}

.ss-close:hover,
.ss-close:focus,
.ss-close:active {
	color: #c7c3b4;
}

@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;
}

.featherlight-close {
	display: none;
}


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

footer {
	font-size: 1em;
	color: #fff;
	text-align: center;
	padding: 2em 0;
}

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%;
 }