body {
	
}


svg {
	width: 100%;
	height: auto;
}

.announcement {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	color:  #4fc1ef;
	padding-left: 2em;
	padding-right: 1em;
	font-size: 2em;
	font-weight: bold;
	text-decoration: none;
}

.announcement:hover {
	background: #4fc1ef;
	color:  #fff;
}

.character {
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	width: 67vh;
	
}

#leads .character {
	height: 100vh;
}

.character svg {
 	opacity: .5;

}

.character:hover svg {
	opacity: .75;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
 }

 @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
 }


#yuna {
	background-image: url('../images/yuna2.png');
	left: 50%;
  	transform: translateX(-50%);
  	opacity: .99;
}

#megumi {
	background-image: url('../images/megumi3.png');
	left: 50%;
	transition: 5s;
	-webkit-animation: bounce 3s infinite ease-out;
  	animation: bounce 3s infinite ease-out;
}

#sachi {
	background-image: url('../images/sachi3.png');
	right: 50%;
	transition: 5s
	-webkit-animation: bounce 4s infinite linear;
  	animation: bounce 4s infinite linear;
}

.ghost {
	transition: 5s;
	opacity: 0;
}

.section.active .chara-wrap .ghost {
	transition: 5s;
	opacity: .99;
}




.nametag {
	background-color: #fff;
	background-image: url('../images/lined_paper.png');
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	color:  #4fc1ef;
	font-family: 'Crafty Girls', cursive;
	font-size: 2em;
	padding: .5em;
	display: inline;
	opacity: .99;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;

}

#gallery h3 {
	background-color: #fff;
	background-image: url('../images/lined_paper.png');
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	color:  #4fc1ef;
	font-family: 'Crafty Girls', cursive;
	font-size: 2em;
	padding: .5em;
	font-weight: bold;
	margin-top: 1.5em;
	display: inline;
}



a {
	text-decoration: none;
}

#sachi-nametag {
	left: 0;
	transform: rotate(5deg);
}

#sachi-nametag img {
	height: 2em;
	float: left;
	margin-top: -.4em;
}

#megumi-nametag {
	right: 0;
	transform: rotate(-3deg);
}

#megumi-nametag img {
	height: 2em;
	float: right;
	margin-top: -.4em;
}

#yuna-nametag {
	margin-top: 10%;
	left: 50%;
	transform: translateX(-50%);
}


#miki {
	background-image: url('../images/miki.png');
	left: 35vw;
	}

#seina {
	background-image: url('../images/seina.png');
	right: 35vw;
}



#nena {
	background-image: url('../images/nena.png');
	right: 60%;
}
#umi {
	background-image: url('../images/umi.png');
	left: 50%;
  	transform: translateX(-50%);
}
#sasa {
	background-image: url('../images/sasa.png');
	left: 60%;
}

#kiri {
	background-image: url('../images/kiri.png');
	right: 45%;

}

#tsukuyo {
	background-image: url('../images/tsukuyo.png');
	left: 45%;

}

#youka {
	background-image: url('../images/youka.png');
	right: 45%;

}

#aki {
	background-image: url('../images/aki.png');
	left: 45%;

}
#matsuri {
	background-image: url('../images/matsuri.png');
	right: 45%;

}

#miyu {
	background-image: url('../images/miyu.png');
	left: 45%;

}

#hina {
	background-image: url('../images/hina.png');
	right: 50%;

}

#fuji {
	background-image: url('../images/fuji.png');
	left: 50%;

}

#seinatext {
	width: 15vw;
	position: absolute;
	top: 25vw;
	left: 1.25%;
}

#seinatext svg path {
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;

}


#seinatext svg {
	padding: 1em;
}

#mikitext {
	width: 15vw;
	position: absolute;
	top: 20vw;
	left: 13%;
	transform: rotate(10deg);
}

.chara-wrap {
	display: inline-block;
	position: relative;
	width: 75vw;
	height: 100vh;
	
}

.slide .chara-wrap {
	padding-top: 10vh;
}

.writing-wrapper {
	text-align: center;
	width: 100vw;
	position: absolute;
	top: 5%;
}
.writing {
	display: inline-block;

}

.writing svg {
	padding :3em;
}

#text1,
#text2,
#text3,
#text4,
#text5 {
	width: 35vw;
}

#text1 {
	transform: rotate(-7.5deg);
	margin-left: -25%;
	margin-top: 5vh;
}

#heart {	
	display: inline-block;
	opacity: .75;
	width: 12em;
	margin-top: 5%;
	margin-left: -2.5%;
}

#text2 {
	width: 35vw;
	margin-left: -10%;
	margin-top: -1.5%;

}

#nenatext {
	width: 15vw;
	transform: rotate(-30deg);
	position: absolute;
	top: 15vw;
	left: 1.5%;
}

#umitext {
	width: 15vw;
	position: absolute;
	transform: rotate(10deg);
	top: 15vh;
	left: 50%;
	transform: translateX(-50%);
}

#sasatext {
	width: 15vw;
	position: absolute;
	transform: rotate(30deg);
	top: 7.5vw;
	right: 1.5%;
}

#text3 {
	margin-left: 20%;
	margin-top: 2.5%;
}

#kiritext {
	width: 20vw;
	position: absolute;
	top: 15vw;
	left: 3.5%;
}

#tsukuyotext {
	width: 20vw;
	position: absolute;
	top: 25vw;
	right: 7%;
}


#text4 {
	width: 30vw;
	margin-top: -2%;
}

#youkatext {
	width: 20vw;
	position: absolute;
	top: 15vw;
	left: 3.5%;
}

#akitext {
	width: 20vw;
	position: absolute;
	transform: rotate(15deg);
	top: 15vw;
	right: 4%;
}

#text5 {
	width: 15vw;
	margin-left: -3%;
}

#matsuritext {
	width: 20vw;
	position: absolute;
	top: 15vw;
	left: 3.5%;
}

#miyutext {
	width: 20vw;
	position: absolute;
	transform: rotate(15deg);
	top: 15vw;
	right: 4%;
}

#hinatext {
	width: 20vw;
	position: absolute;
	top: 10vw;
	
}

#fujitext {
	width: 20vw;
	position: absolute;
	top: 5vw;
	right: 4%;
}

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

#top {
	background: #ccc;
}

#leads {
	background-image: url('../images/roofbkg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	text-align: center;
}

#characters {
	background-image: url('../images/chalkboard.png');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;

}

.writtenname {
	display: none;
	transition: 300ms;
}

#gallery {
	background-image: url('../images/cork.jpg');
}

.gallery {
	padding: 2em;
	padding-right: 3em;
}

.gallery img {
	width: 100%;
	border: .5em solid white;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}


#specs {
	background-image: url('../images/wood.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	text-align: center;
	overflow: hidden;
}



#specs b {
	color: #4fc1ef;
}

#specs button {
	font-size: 1.25em;
	border: none;
	padding: 1em;
	padding-bottom: 1.5em;
	margin-bottom: -1em;
margin-top: -.75em;
}

#specs button:hover {
	background-image:url('../images/circle.svg');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.slide {
	background-image: url('../images/chalkboard.png');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	text-align: center;
	overflow: hidden;
}

.featherlight .featherlight-content {
	background: none;
	text-align: center;
	padding: 2em;
}

.drama {
	background: #fff;
	width: 75vw;
	text-align: left;
	padding: 1.5em;
}

.drama img {
	width: 100%;
}

.drama .button {
	width: 45%;
	margin: 2.5%;
}

.drama p,
.drama li {
	font-size: .85em;
}

.featherlight .featherlight-content .paper {
	min-height: 30em;
	width: 65%;
	padding: 0;
	border-bottom: 0;
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
	display: inline-block;
}

.paper {
	margin: 0;
    padding: 0;
    height: 100%;
	/* gradients - second red border, first red border, top white space, blue lines */
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 25px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;

}

.paper-inner {
	margin: 0;
    display: block;
    font-family: 'Reenie Beanie', cursive;
    font-size: 1.75em;
    line-height: 25px;
    padding-top: 65px;
    padding-left: 10.5%;
    padding-right: 10.5%;
    text-align: justify;
}

.featherlight-content .paper-inner {
	padding-bottom: 1em;
}

.paper-inner b {
	
	font-family: 'Crafty Girls', cursive;
}

.paper-inner:first-line {
    font-size: 1.5em;
    line-height: 33px;
    vertical-align: baseline;
}

#specs .paper {
	width: 50vw;
	margin-top: 10vh;
	display: inline-block;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	transform: rotate(-5deg);
}

@media (max-width: 1000px) {
	#specs .paper {
	width: 85vw;
	margin-top: 0vh;
	transform: rotate(0deg);
}

}

.profile-inner {

}

.sd {
	width: 45%;
	float: right;
	opacity: .9;
}

#seina-profile b,
#umi-profile b {
	color: #F779AB;
}

#seina-profile .sd {
	-webkit-transform: rotate(10deg);
	

}

#miki-profile b {
	color: #939393;
}

#miki-profile .sd {
	-webkit-transform: rotate(10deg);

}

#nena-profile b,
#youka-profile b {
	color: #5EB4FF;
}

#sena-profile b,
#sasa-profile b,
#tsukuyo-profile b,
#aki-profile b {
	color: #6DDB9D;
}

#kiri-profile b,
#matsuri-profile b,
#miyu-profile b {
	color: #AAC65B;
}

#opvid {
	
	width: 960px;
	height: 720px;
}
.featherlight-iframe .featherlight-content {
	min-height: auto;
	width: auto;
	padding: 0;
	border-bottom: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}


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

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

}



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

#keyvis-bak {
	background: #fff url('../images/bkg-back.jpg') no-repeat bottom center;
	background-size: cover;
	height: 100vh;
	width: 100%;
	margin-bottom: 2em;
}

#keyvis-front {
	background: url('../images/bkg-front.png') no-repeat bottom center;
	background-size: cover;
	height: 100vh;
	width: 100%;
	position: absolute;
}

#banner {
	background-color: #4fc1ef;
	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;
}

.logocontain {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 55%;
}
#game-logo {
	height: 35vh;
	position: absolute;
	left: 2.5%;
	top: 2.5%;
}

#story-summary {
	position: absolute;
	right: 1em;
	margin-top: 1em;
	top: 25%;
	transform: translateY(-35%);
	width: 35vw;
	/*background-color: rgba(255,255,255,.5);*/
	background-image: url('../images/white.png');
	background-size: 100% 100%;
	padding: 3% 7%;
	font-size: .85em;
	max-width: 45em;
}

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

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

@media (max-width: 750px) {
	#game-logo {
		width: 60%;
		height: auto;
	}
	.logocontain {
		bottom: auto;
		top: 10%;
	}
	#liar-logo, #mg-logo {
		width: 20%;
		bottom: 1%;
	}
	.adults-only {
	width: 3.5em;}

}

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


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

footer {
	background-color: #4fc1ef;
	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: #ccc;
	text-align: center;
	margin-bottom: 1em;
}
 
 footer img {
 	width: 100%;
 }