/* Parallax base styles
  --------------------------------------------- */
.parallax {
    height: 500px; /* fallback for older browsers */
    height: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    font-size: 100%;
  }

.parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 105%;
    height: 105vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

.parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 5;
    -ms-transform: none;
  }

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
    -ms-transform: none;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
    -ms-transform: none;
  }

.parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
    -ms-transform: none;
  }

  /* General Styles
  --------------------------------------------- */

body {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
	font-weight: 200;
	font-size: 2em;
    background-color: #7fcef4;
    overflow-x: hidden;   
}

b {
	font-family: 'Khand', sans-serif;
    font-weight: 700;
}  
  
  
button {
	cursor: pointer;
}  
  
h1, h2, h3, h4 {
	text-transform: uppercase;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
}  
  
.title {
  	color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-shadow: 0px 0px 10px #000;
  }  
  
li {
	text-align: center;
}  

.nsfw_warning {
	 position: absolute; 
	 top: 50%; 
	 left: 50%; 
	 z-index: -2;
	 -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    }

 /* NSFW Censors
  --------------------------------------------- */

.nsfw img {
	transition: opacity 300ms ease-out 0s;
	border-radius: 8px;
}

.nsfw-on img {
	opacity: .3;
	-webkit-filter: blur(15px);
 	-moz-filter: blur(15px);
  	-o-filter: blur(15px);
  	-ms-filter: blur(15px);
  	filter: blur(15px);
  	-webkit-transform: translate3d(0, 0, 0);
  	-moz-transform: translate3d(0, 0, 0);
  	-o-transform: translate3d(0, 0, 0);
  	-ms-transform: translate3d(0, 0, 0);
  	transform: translate3d(0, 0, 0);
}

.nsfw-off img {
	opacity: 1;
	-webkit-filter: blur(0px);
 	-moz-filter: blur(0px);
  	-o-filter: blur(0px);
  	-ms-filter: blur(0px);
  	filter: blur(0px);
}
 
   /* Navigation
  --------------------------------------------- */

#bottom-menu-trigger {
	background-color: #fff;
	color: #00a0e9;
	padding-left: .5em;
	padding-right: .5em;
	cursor: pointer;
	position: fixed;
	bottom: 0%;
	left: 0%;
	z-index: 999;
	width: 5em;
	border-bottom: 5px solid #fff;
	text-align: center;
	font-size: .5em;
}

#bottom-menu-trigger:hover,
#bottom-menu-trigger:active,
#bottom-menu-trigger:focus {
	color: #7fcef4;
}

#bottom-menu {
	color: #000;
	position: absolute;
	bottom: -2em;
	left: 5em;
	z-index: 999;
	background-color: #fff;
	border-bottom: 5px solid #fff;
	text-align: center;
	transition: 500ms;
	font-size: .5em;
}

#bottom-menu a {
	color: #000;
	font-family: 'Khand', sans-serif;
    font-weight: 400;
    padding-left: .5em;
    padding-right: .5em;
}

#bottom-menu a:hover,
#bottom-menu a:active,
#bottom-menu a:focus {
	border-bottom: 5px solid #00a0e9;
}

.nav-wrapper {
	z-index: 999;
	position: fixed;
	bottom: 0%;
	left: 0%;
	height: 1em;
	width: 20em;
	overflow: hidden;
}

#sidemenu {
	position: fixed;
	top: 0%;
	right: -25em;
	width: 25em;
	height: 100%;
	height: 100vh;
	z-index: 998;
	transition: 500ms;
	background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,.9)); /*Safari 5.1-6*/
	background: -o-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,.9)); /*Opera 11.1-12*/
	background: -moz-linear-gradient(right,rgba(0,0,0,0),rgba(0,0,0,.9)); /*Fx 3.6-15*/
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.9)); /*Standard*/
}


#sidemenu_bar {
	position: fixed; 
	top: 5%; 
	right: 0%; 
	width: .75em; 
	height: 7.5em; 
	background-color: #00a0e9; 
	z-index: 999;
}

#sidemenu_bar .menu {
	color: #fff;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    margin-right: .1em;
    font-size: .75em;
}

.sidebar-transition {
	right: 0em;
	transition: 300ms;
}

#sidemenu_bar:hover,
#sidemenu_bar:focus,
#sidemenu_bar:active {
	background-color: #7fcef4;
}

#sidemenu_inner {
	position: absolute; 
	top: 8%; 
	right: .75em; 
	border-top: 1px solid #00a0e9; 
	width: 7.5em; 
	z-index: 999;
}

#sidemenu_title {
	color: #00a0e9; 
	margin-top: -1.25em; 
	font-size: .75em; 
	text-align: right; 
	margin-right: .25em;
}

#sidemenu .button-group {
	margin-right: .25em;
}

#sidemenu button {
	background-color: #4B4B4B;
	color: #fff;
	border-radius: 5px;
	text-align: left;
	padding: .2em;
	padding-left: 1em;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
    font-size: 1em;
    margin-top: .1em;
    margin-bottom: .1em;
}

.fa-chevron-right {
	float: right;
	margin-top: .4em;
}

#sidemenu button:hover,
#sidemenu button:active,
#sidemenu button:focus {
	background-color: #ccc;
	color: #000;
	
}
  
  /* Slide 1 - Top
  --------------------------------------------- */
 
#group1 {
    z-index: 5;
  }
  
#group1 .parallax__layer--back {
	background-image: url('../imgs/top/top_bg2.jpg'); 
	background-size: 100% 100%;
}  
  
/* 'news' tags */  
.news-info {
	color: #fff; 
	text-shadow: 0px 0px 5px #00a0e9; 
	z-index: 997; 
	position: absolute; 
	top: 45%; 
	left: 2%;
	font-size: 1.5em;
}

.fa-star {
	color: #00a0e9;
	text-shadow: 0px 0px 5px #fff;
}

.news-info a {
	color: #fff;
}

.news-info a:hover,
.news-info a:active,
.news-info a:focus {
	color:  #00a0e9;
	text-shadow: 0px 0px 5px #fff;
}  
		
/* branding logos */  		

#parade_logo {
	width: 5em;
	position: absolute;
	top: 3%;
	left: 5%;
}

#mg_logo {
	width: 5em;
	position: absolute;
	bottom: 7%;
	right: 3%;
	z-index: 999;
}

#milktub {
	position: absolute;
	top: 35%;
	background-color: rgba(80, 80, 80, 0.7);
	width: 7em;
	height: 1.7em;
	z-index: 100;
}

#milktub:after,
#milktub::after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.7em 1em 0 0;
	border-color: rgba(80, 80, 80, 0.7) transparent transparent transparent;
	position: absolute;
	left: 7em;
}

#milktub b:hover,
#milktub b:focus,
#milktub b:active {
	color: #7fcef4;
}

#milktub img {
	height: 1.5em;
	margin-left: .3em;
}  

#milktub b {
	position: absolute;
	font-size: .3em;
	color: #fff;
	z-index: 150;
	line-height: 1em;
	margin-top: .5em;
	margin-left: 1em;
	text-shadow: 0px 0px 10px #000;

}

#milktub i {
	font-size: 1.85em;
	line-height: 1.1em;
}

#social {
	position: absolute;
	bottom: 13%;
	right: 1%;
	z-index: 100;
}

/* graphic elements */  
#logo {
	position: absolute;
	z-index: 50;
	width: 100%;
	bottom: 13%;
}

#charagroup {
	overflow: hidden;
}

#charagroup img {
	position: absolute;
	bottom: 0%;
}

#haruimg {
	left: 20%;
	height: 100%;
}

#hiroimg {
	left: -5%;
	height: 90%;
}

#ryuimg {
	left: 50%;
	height: 80%;
}

#makiimg {
	left: 70%;
	height: 70%;
}

#kouimg {
	left: 85%;
	height: 60%;
}  
  
  /* Slide 2 - Story
  --------------------------------------------- */
#group2 {
    z-index: 6; 
}
#group2 .parallax__layer--base {
     background-image: url('../imgs/bar-bak.jpg'); 
     background-size: 100% 100%; 
}

#group2 p {
	font-size: .5em;
}
  
  
  /* Slide 3 - Characters
  --------------------------------------------- */
#group3 {
    z-index: 3;
}  

/* Tag Text + Shadow */
#tagtext {
	margin: 1em;
	-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}

#tagtext-shad {
	margin: 1em;
	-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}

.butts {	
    font-family: 'Khand', sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 7vw;
}

.butts-shad {
	color: #000000;
	opacity: .5;
	margin-top: .5em;
	margin-left: .15em;
}

.literally {
	position: absolute;
	top: 25%;
	right: 10%;
	font-size: .75em;
	padding-top: 2em;
	padding-bottom: 2em;
	text-transform: uppercase;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
    color: #ffffff;
}

.literally-shad {
	color: #000000;
	opacity: .5;
	margin-top: .15em;
	margin-left: .25em;
}

.literally-shad .triangle-right,
.literally-shad .triangle-right.left {
	background: #000;
	color: #000;
}
.literally-shad .triangle-right:after,
.literally-shad .triangle-right.left:after {
	border-color: transparent #000;
}

.triangle-right {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#fff;
  background:#075698; /* default background for browsers without gradient support */
  /* css3 */
  -webkit-border-radius: 3em;
  -moz-border-radius: 3em;
  border-radius: 3em;
}

.triangle-right.left {
  margin-left:40px;
  background:#00a0e9;
}

.triangle-right:after {
  content:"";
  position:absolute;
  bottom:-25px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:30px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#00a0e9 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.triangle-right.left:after {
  top:16px;
  left:-15px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:0px 25px 15px 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #00a0e9;
}

/* Character Info Boxes & Nametags */

.charainfobox {
	position: absolute;
	width: 9em;
	color: #fff;
}

.nametag {
	background-color: #00a0e9;
	font-size: .5em;
	padding: .25em;
	padding-left: 1em;
	width: 8em;
	color: #fff;
	cursor: pointer;
}

.nametag:hover {
	background-color: #fff;
	color: #00a0e9;
}

.description {
	font-size: .35em;
	padding: .25em;
	padding-left: 2em;
	text-shadow: 0px 0px 5px #000;
	text-align: justify;
	font-weight: bold;
}

#hiroyuki {
	bottom: 25%;
	width: 6em;
}

#kouichi {
	width: 6em;
	left: 25%;
	bottom: 5%;
}

#kouichi .nametag {
	width: 6em;
	padding-left: .75em;
}

#maki {
	width: 7em;
	left: 55%;
	bottom: 10%;
}

#maki .nametag {
	width: 4em;
}

#ryu {
	right: 0%;
	bottom: 30%;
	width: 6em;
}

#ryu .nametag {
	text-align: right;
	margin-left: 4em;
	padding-right: 2em;
	padding-left: .25em;
}

#ryu .description {
	padding-right: 2em;
	padding-left: .25em;

}  

/* Background Graphic Layer */

#group3 .parallax__layer--back {
	background-size: 100%;
	background-size: 100vw; 
	background-position: right bottom; 
	background-repeat: no-repeat;
	background-image:url('../imgs/ntybkg2.png');
}

#group3 .parallax__layer--deep {
	background-size: 100%;
	background-size: 100vw; 
	background-position: right bottom; 
	background-repeat: no-repeat;
	background-color: #7fcef4; 
	background-image:url('../imgs/ntybkg2-shadow2.png');
} 

  /* Slide 4 - Haru
  --------------------------------------------- */  
#group4 {
    z-index: 5;
}

#group4 .parallax__layer--base {
	background: #fff; 
	height: 105%;
	height: 105vh;
	overflow: hidden;
	background-image:url('../imgs/ntybkg3.png');
	background-size: cover;
	background-repeat: no-repeat;
}

#haruimg2 {
	position: absolute;
	top: -1em;
	right: 7%;
	height: 30em;
	
}

#haruimg2 img {
}

.haru-tag {
	position: absolute;
	left: 3%;
	top: 5%;
	background-image:url('../imgs/stripe.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/*background-color: #00a0e9;*/
	font-family: 'Khand', sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 2.5em;
    width: 4em;
    height: 1.75em;
    text-align: center;
	-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    padding-right: 1.25em;
    padding-top: .75em;
    line-height: .25em;
    z-index: 100;
}

.haru-tag span {
	font-size: .25em;
	
}

#haru_infobox {
	
	font-size: .45em;
}

#haru_quote {
	color: #00a0e9;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
    font-size: 6vmin;
    position: absolute;
    bottom: 25%;
    right: 5vmin;
	font-style: italic;
	width: 12em;
	z-index: 100;	
}

#haru_quote span {
	background-color: rgba(255, 255, 255, 0.9);
	padding-right: .5em;
	padding-left: .3em;
}

.indent {
	margin-left: 35%;
}

#haru_description {
	position: absolute;
	top: 20vmin;
	left: 7%;
	width: 40%;
	background-image:url('../imgs/smear.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 1.5em;
	padding-bottom: 6em;
}

#haru_description p {
	font-size: 1.75vmin;
	line-height: 1.25em;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	background-color: rgba(255, 255, 255, 0.5);
}

#haru_voice {
	position: absolute;
	bottom: 10%;
	left: 0%;
}

#haru_voice .subs {
	margin-top: -1em;
}

#subs-display-haru,
#subs-display-haru2,
#subs-display-haru3 {
	color: #00a0e9;
	font-weight: bold;
	background-color: rgba(255, 255, 255, 0.9);
	font-size: 1em;
	padding: .5em;
	text-align: center;
	line-height: .9em;
}
#haru_voice button{
	background-color: #00a0e9;
	color: #fff;
	font-family: 'Khand', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

#haru_voice button:hover,
#haru_voice button:active,
#haru_voice button:focus {
	background-color: #7fcef4;
	color: #000;
}

#haru_voice h3 {
    color: #00a0e9;
    margin-left: .5em;
    margin-bottom: -.5em;
    font-size: 1.5em;
}

#haru_voice .fallback-subs {
	width: 45%;
	margin-left: 1em;
	font-size: .5em;
	background-color: rgba(255, 255, 255, 0.9);
	padding: .5em;
	margin-bottom: -5%;
}



  /* Slide 5 - Features
  --------------------------------------------- */
#group5 {
    z-index: 6;
    height: auto; 
	background-color: #7fcef4;
}
  
#group5 a {
  color: #fff;
  text-decoration: underline;
}

#group5 a:hover {
  color: #00a0e9;
  text-decoration: underline;
}

.features {
	color: #fff;
}

.features h2 {
    font-size: 3em;
    margin-left: .25em;
}

.features h3 {
    font-size: 1.5em;
    margin-left: .25em;
	text-transform: uppercase;
	margin-bottom: -.4em;
}

.features h4 {
    font-size: 2em;
    margin-left: .5em;
	text-transform: uppercase;
	margin-bottom: -.4em;
}

.features button {
	background-color: #7fcef4;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 10px;
}

.features button:hover,
.features button:focus,
.features button:active {
	background-color: #fff;
	color: #7fcef4;
}

.feature_section {
	border-top: 1em solid #fff;
	color: #fff;
	width: 100%;
	font-size: .5em;
	padding: 1em;
}

.feature_section p {
	text-align: justify;
}

#bg_samples {
	border: 1px solid #fff;
	border-radius: 20px;
	padding-top: 1em;
}

.img-container {
	border: 3px solid #fff;
	border-radius: 10px;
	overflow: hidden;
	
}

#bg_samples img {
	border: 3px solid #fff;
	margin-bottom: .5em;
	border-radius: 10px;
	overflow: hidden;
}


#ntybtn {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	font-size: 2em;
	border: 1px solid #fff;
	border-radius: 10px;
	width: 10em;
	margin: .5em;
}

#ntybtn:hover,
#ntybtn:active,
#ntybtn:focus {
	background-color: #fff;
	color: #7fcef4;
}

#ntybtn span {
	margin-left: .2em;
	margin-top: -.25em;
	font-size: 1.1em;
}

#ntybtn .fa-ban {
	display: block;
	font-size: 1.5em;
	margin-left: .25em;
	float: left;
	margin-top: .07em;
}

#ntybtn .fa-exclamation {
	display: block;
	float: left;
	margin-left: -.82em;
	margin-top: .35em;
	text-shadow: 0px 0px 2px #7fcef4;

}

.settingsbox {
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 1em;
}

.settingsbox label {
	color: #fff;
}

input[type="radio"] {
    display: none;
}

input[type="radio"] + label .fa-dot-circle-o
 {
display: none;
}

input[type="radio"]:checked + label .fa-dot-circle-o
{
display: block;
color: #fff;
}

input[type="radio"]:checked + label .fa-circle-o {
display: none;
}

#sprite_example {
	border: 3px solid #fff;
	border-radius: 10px;
	float: left;
	overflow:hidden;
	width: 100%;
}

#cg_example {
	border: 3px solid #fff;
	border-radius: 10px;
	overflow: hidden;
	float: left;
	width: 100%;
}

.thumb {
	margin-left: .5em;
	margin-right: .5em;
	overflow: hidden;
}

.thumb img {
	opacity: .5;
	border: 3px solid #fff;
	border-radius: 10px;
}

.thumb img:hover {
	opacity: 1;
}

#gal_display {
	overflow: hidden;
	margin-bottom: 1em;
}

#gal_display img {

	border: 3px solid #fff;
	border-radius: 10px;
}

.nsfw_warn {
	position: absolute;
	margin-left: 1em;
	margin-top: 1em;
	z-index: -3;
} 

  /* Slide 6 - Specs
  --------------------------------------------- */ 
#group6 {
    z-index: 6; 
}
#group6 .parallax__layer--back {
    background: rgb(245,235,100);
}  
  
.specs {
	color: #7fcef4;
	font-size: 1em;
}

.specs a {
	color: #7fcef4;
	text-decoration: underline;
}

.specs a:hover,
.specs a:active,
.specs a:focus {
	color: #00a0e9;
	text-decoration: underline;
}


.specs h2 {
	color: #fff; 
	font-size: 3em;
	margin-top: -.9em;
	margin-left: .5em;
}

.specs h3 {
    font-size: 2em;
    margin-left: .25em;
	text-transform: uppercase;
	margin-bottom: -1em;
	color: #00adef;
}

.specs h4 {
    font-size: 1.5em;
    margin-left: .25em;
	text-transform: uppercase;
	margin-bottom: -.4em;
}
  
.spec_box {
	border: 1px solid #7fcef4;
	border-radius: 20px;
	padding: 1em;
	font-size: .65em;
	margin-bottom: 1em;
}

.specs button {
	color: #fff;
	border: 1px solid #00adef;
	background-color: #00adef;
	border-radius: 20px;
	font-size: .75em;
}

.specs button:hover,
.specs button:focus,
.specs button:active {
	color: #7fcef4;
	border: 1px solid #7fcef4;
	background-color: #fff;
}  
  
.specs .img-container {
	border: 3px solid #7fcef4;
}  

#what {
	font-size: .65em;
	margin-top: -.5em;
	float: right;
}

.no-flickr {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
  
.strike {
	text-decoration: line-through;
}  
  /* Modals
  --------------------------------------------- */  
.reveal-modal {
	border-radius: 10px;
	margin-top: 5vmin;
	top: 0;
}  

#agegate {
	margin-top: 10%;
}

#agegate-close button {
	background-color: #00a0e9;
	color: #fff;
}

#agegate-close button:hover,
#agegate-close button:focus,
#agegate-close button:active {
	background-color: #7fcef4;
} 
  
.profile_txt {
	width: 65%;
}

.profile_txt p {
	font-size: 1.75vmin;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
}

.profile_img {
	position: absolute;
	top: 0px;
	left: 60%;
	width: 40%;
	width: 40vw;
}


.profile_data {
	width: 65%;
	padding: .25em;
	margin-top: -2em;
	margin-bottom: .5em;
	font-size: 2vmin;
}

.character-modals .lead {
	font-size: 3vmin;
	width: 60%;	
}

.character-modals h2 {
	font-size: 2em;
	text-transform: uppercase;
}

.character-modals h3 {
	font-size: 1em;
	text-transform: uppercase;
}

#hiroyuki_chara h2,
#hiroyuki_chara h3 {
    color: #f08200;
}

#hiroyuki_chara button {
	background-color: #f08200;
	color: #fff;
	font-weight: bold;	
}
#hiroyuki_chara button:hover,
#hiroyuki_chara button:active, 
#hiroyuki_chara button:focus {
	background-color: #fee793;
	color: #000;
}

#haru_chara h2 {
    color: #00a0e9;
}

#ryu_chara h2,
#ryu_chara h3 {
    color: #1d2088;
}

#ryu_chara button {
	background-color: #1d2088;
	color: #fff;
	font-weight: bold;
}

#ryu_chara button:hover,
#ryu_chara button:active,
#ryu_chara button:focus {
	background-color: #bfb9db;
	color: #000;
}

#maki_chara h2,
#maki_chara h3 {
    color: #541f7f;
}

#maki_chara button {
	background-color: #541f7f;
	color: #fff;
	font-weight: bold;
}

#maki_chara button:hover,
#maki_chara button:active,
#maki_chara button:focus {
	background-color: #d0a6cc;
	color: #000;
}

#kouichi_chara h2,
#kouichi_chara h3 {
    color: #22943a;
}

#kouichi_chara button {
	background-color: #22943a;
	color: #fff;
	font-weight: bold;
}

#kouichi_chara button:hover,
#kouichi_chara button:active,
#kouichi_chara button:focus {
	background-color: #bfdc98;
	color: #000;
}
 
#fankitinfo ul li {
	text-align: left;
}

#fankitinfo img {
	float: right;
}

 /* Softsub Display
  --------------------------------------------- */  

.subs {
   visibility: hidden;
   display:block;
   height:2em;
   color: #000;
   text-align:left;
   margin-left: 1em;
   font-size:12pt;
   z-index: 3000;
   margin-bottom: 1em;
   font-style: italic;
   }

.subs-display {
	display:none;
} 

.fallback-subs {
	display: none;
}

.lead {
	font-style: italic;
}

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

footer {
	background-color: #00adef;
	width: 100vw;
	font-size: .5em;
	color: #fff;
	text-align: center;
	padding: 2em 0;
}

footer a {
	color: #fff;
	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;
}
 
  /* Browser Specific Issues
  --------------------------------------------- */    
  
.gecko .fallback-subs {
	display: block;
	width: 65%;
}

.gecko .subs {
	height: 4em;
}

.gecko .nsfw-on img,
.ie .nsfw-on img {
	opacity: 0;
}

.gecko #subs-display-haru,
.gecko #subs-display-haru2,
.gecko #subs-display-haru3 {
	background-color: rgba(255, 255, 255, 0);
}

.voice-samples .fallback-subs {
	margin-top: -1em;
	font-size: .6em;
}

.mobile-bumper {
	display: none;
}
  
.mac #sidemenu_bar,
.mobile #sidemenu_bar {
	display: block;
}

.win #sidemenu_bar,
.win #sidemenu {
	display: none;
}  

.win #bottom-menu-trigger {
	display: block;
}

.mac .nav-wrapper,
.mobile .nav-wrapper {
	display: none;

}
  /* Media Queries
  --------------------------------------------- */  

  
/* max-width 640px, mobile-only*/
@media only screen and (max-width: 40em) { 
	/*.parallax {
    font-size: 6.25vmin;
	}*/

	footer div {
		padding: 1em 0;
	}
	
	.links {
		font-size: 2em;
	}
	
	.literally {
		display: none;
		}

	.reveal-modal button {
		font-size: .65em;
		padding: .75em;
	}

	#hiroyuki {
		bottom: 20%;
	}

	#maki {
		bottom: 10%;
		right: 0%;
	}

	#ryu {
		bottom:20%;
	}

	#kouichi {
		bottom: 10%;
	}

	.butts {	
   		font-size: 2em;
	}

	.butts-shad {
		 font-size: 2em;
	}

	#tagtext {
		margin: .5em;	
	}

	#haruimg {
		left: 50%;
	    -webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	}	

	.title {
		width: 85%;
	}
	
	#group2 p {
	font-size: .4em;
	}
		
	.reveal-modal {
		margin-top: 0;
	}  
	
	.character-modals .lead {
		font-size: 3vmin;
		width: 60%;	
	}

	.character-modals h2 {
		font-size: 1.5em;
	}

	.character-modals h3 {
		font-size: .75em;
	}

	.profile_img {
		display: none;
	}

	.profile_data {
		width: 100%;
		font-size: 3vmin;
	}

	.profile_txt {
		width: 100%;
	}

	.reveal-modal {
		height: 1em;
		overflow-y: scroll;
	}
	
	.profile_txt p {
		font-size: 2.75vmin;
	}


	.character-modals .lead {
		font-size: 3vmin;
		width: 60%;	
	}

	.gecko .fallback-subs {
		width: 100%;
	}

	.mobile-bumper {
		display: block;	
	}
	
	#haruimg2 {
		right: 0em;
		left: 50%;
	    -webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	}

	#haru_description {
		display: none;
	}

	#haru_infobox {
		font-size: .3em;
	}

	#haru_quote {	
	    font-size: .75em;
	    bottom: 45%;
	    right: 0%;	
	}

	.haru-tag {
		left: 5%;
		top: 0%;
	    font-size: 1.5em;
	}
	
	#haru-info {
		font-size: .5em;
	}
	
	#haru_voice button{
	    font-size: 1em;
	    padding: .5em;
	}


	#haru_voice h3 {
	    font-size: 1em;
	}

	#haru_voice .fallback-subs {
		width: 100%;
		margin-left: -1em;
		padding: 0em;
		margin-bottom: 10%;
	}
	
	#haru_voice .fallback-subs p {
		font-size: 1.5em;

	}

	.features h2 {
	    font-size: 2.5em;
	    margin-left: 0em;
	}

	.features .fa-rotate-270 {
		display: none;
	}

	#ntybtn {
		font-size: 1.5em;
	}

	#tagtext-shad {
		margin: .5em;
	}
	
	.news-info {
		display: none;
	}	

	#gal_display {
		display: none;
	}

	#kouimg,
		#makiimg,
		#hiroimg,
		#ryuimg {
		display: none;
		}
	#haru_infobox {
		display: none;
	}	
	#logo {
		bottom: 25%;
	}
	
	#social {
		bottom: 20%;
	}
	
	#milktub {
		top: 25%;
	}
	
	 .thumb img {
	opacity: 1;
	}

} 


/* max-width 640px, mobile-only, portrait orientation*/
@media only screen and (max-width: 40em) and (orientation: portrait) { 
	#haruimg2 {
		height: auto;
		width: 100%;
		width: 100vw;
		right: 0em;
		left: 50%;
    	-webkit-transform: translateX(-50%);
    	transform: translateX(-50%);
	}
	
}
/* any portrait orientation */
@media only screen and (orientation: portrait) { 
	#kouimg,
	#makiimg,
	#hiroimg,
	#ryuimg {
		display: none;
	}
	
	.butts {
    font-size: 12vh;
    }
}

/* Special Rule for Slide 3 */
@media screen and (min-aspect-ratio: 20/17) {  	
	#group3 .parallax__layer--back,
	#group3 .parallax__layer--deep {
		background-position: right top; 
	}
  
}