@charset "utf-8";
/* CSS Document */

*{
	margin:0px;
}

body {
	background-color:black;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #252525;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #404040;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #505050;
}


/*PAGE CONTAINER*/
.container {
	position: absolute; 
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}

.textContainer {
	position:relative;
	margin:auto;
	width:900px;
	height:690px;
	top: 3%;
}

#revealText {
	cursor:pointer;
	position:fixed;
	right: 10px;
	bottom: 40px;
	padding:20px;
	text-align:justify;
	font-size: 12px;
	font-family: 'courier new';
}

.revealText{
	color:#999999;
	animation: hideButton 1s;
	animation-fill-mode: forwards;
	animation-delay: 27s;
}

.revealText:hover {
	color:white;
}

.revealMiddleText{
	color:#999999;
	cursor:pointer;
	position:fixed;
	right: 10px;
	bottom: 40px;
	padding:20px;
	text-align:justify;
	font-size: 12px;
	font-family: 'courier new';
	animation: hideButton 1s;
	animation-fill-mode: forwards;
	animation-delay: 21s;
}

.revealMiddleText:hover {
	color:white;
}

.revealEndText{
	cursor:pointer;
	color:#999999;
	position:fixed;
	right: 10px;
	bottom: 40px;
	padding:20px;
	text-align:justify;
	font-size: 12px;
	font-family: 'courier new';
	animation: hideButton 1s;
	animation-fill-mode: forwards;
	animation-delay: 30s;
}

.revealEndText:hover {
	color:white;
}

@keyframes hideButton {
	0%{opacity:1;}
	99%{opacity:1;}
	100%{opacity:0;}
}

/*TEXT STYLE*/

/*links*/
a:link {                 /* unvisited */
		color:#ABABAB;
		text-decoration:none;
	  }                        
	  a:visited {              /* visited */
        color:#ABABAB;
	  }
a:hover {
	color:white;
}


/*regular text*/
.text p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text2 p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text2a p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text2b p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text3 p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text4 p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text4a p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text4b p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text4c p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.text5 p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top: 50px;
	white-space: nowrap;
    overflow: hidden;
}

.textReveal p{
	font-size: 14px;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin-bottom:10px;
	width: 900px;
	top:50px;
}


/*TYPEWRITER EFFECT - FIRST HALF*/
.text p:nth-child(1) {
	opacity:0;
    animation: type 2s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 1s;
}

.text p:nth-child(2) {
	opacity:0;
    animation: type 1s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:3s;
}

.text p:nth-child(3) {
	opacity:0;
    animation: type 2.5s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay:3.5s;
}

.text p:nth-child(4) {
	opacity:0;
    animation: line4 5s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:6.5s;
}

.text p:nth-child(5) {
	opacity:0;
    animation: line5 4s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:12.5s;
}

.text p:nth-child(6) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay:17.5s;
}

.text p:nth-child(7) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:21s;
}

.text p:nth-child(8) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:24s;
}

.text p:nth-child(9) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:24.5s;
}

.text p:nth-child(10) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:26s;
}

.text p:nth-child(11) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:27s;
}

.text p:nth-child(12) {
	opacity:0;
    animation: type 2s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:28s;
}

@keyframes type {
	0% {width: 0;}
	1%{opacity:1;}
	100%{opacity:1;}
}

@keyframes line4 {
	0% {width: 0;}
	1%{opacity:1;}
	30% {width:320px}
	50% {width:320px}
	100%{opacity:1;}
}

@keyframes line5 {
	0% {width: 0;}
	1%{opacity:1;}
	50% {width:545px}
	70% {width:545px}
	100%{opacity:1;}
}


/*TYPEWRITER EFFECT - HUNDRED REVEAL*/
.text2 p:nth-child(1) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

.text2 p:nth-child(2) {
	opacity:0;
    animation: line2 5s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:3.5s;
}

.text2 p:nth-child(3) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:8.5s;
}

@keyframes line2 {
	0% {width: 0;}
	1%{opacity:1;}
	20% {width:300px}
	35% {width:300px}
	55% {width:550px}
	75% {width:550px}
	100%{opacity:1;}
}

/*TYPEWRITER EFFECT - NEVER REVEAL*/
.text2a p:nth-child(1) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

.text2a p:nth-child(2) {
	opacity:0;
    animation: line2a 5s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:3.5s;
}

.text2a p:nth-child(3) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:8.5s;
}

@keyframes line2a {
	0% {width: 0;}
	1%{opacity:1;}
	4% {width:75px}
	19% {width:75px}
	35% {width:320px}
	55% {width:320px}
	100%{opacity:1;}
}

/*TYPEWRITER EFFECT - ONCE REVEAL*/
.text2b p:nth-child(1) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

.text2b p:nth-child(2) {
	opacity:0;
    animation: line2b 5s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:3.5s;
}

.text2b p:nth-child(3) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:8.5s;
}

@keyframes line2b {
	0% {width: 0;}
	1%{opacity:1;}
	10% {width:110px}
	25% {width:110px}
	45% {width:370px}
	65% {width:370px}
	100%{opacity:1;}
}


/*TYPEWRITER EFFECT - MIDDLE*/
.text3 p:nth-child(1) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:.5s;
}

.text3 p:nth-child(2) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: 11s;
}

.text3 p:nth-child(3) {
	opacity:0;
    animation: line2-1 5.5s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:14s;
}

.text3 p:nth-child(4) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:19s;
}

.text3 p:nth-child(5) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:20s;
}

.text3 p:nth-child(6) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:21s;
}

.text3 p:nth-child(7) {
	opacity:0;
    animation: type 3s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay:22s;
}

@keyframes line2-1 {
	0% {width: 0;}
	1%{opacity:1;}
	4% {width:65px}
	24% {width:65px}
	40% {width:250px}
	57% {width:250px}
	100%{opacity:1;}
}


/*TYPEWRITER EFFECT - ACCIDENT REVEAL*/
.text4 p:nth-child(1) {
	opacity:0;
    animation: line1 4s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

@keyframes line1 {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:455px}
	60% {width:455px}
	100%{opacity:1;}
}

/*TYPEWRITER EFFECT - KIDNAPPING REVEAL*/
.text4a p:nth-child(1) {
	opacity:0;
    animation: line1a 4s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

@keyframes line1a {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:450px}
	60% {width:450px}
	100%{opacity:1;}
}

/*TYPEWRITER EFFECT - ASSAULT REVEAL*/
.text4b p:nth-child(1) {
	opacity:0;
    animation: line1b 4s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

@keyframes line1b {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:450px}
	60% {width:450px}
	100%{opacity:1;}
}

/*TYPEWRITER EFFECT - MURDER REVEAL*/
.text4c p:nth-child(1) {
	opacity:0;
    animation: line1c 4s steps(40, end);
    animation-fill-mode: forwards;
	animation-delay: .5s;
}

@keyframes line1c {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:435px}
	60% {width:435px}
	100%{opacity:1;}
}


/*TYPEWRITER EFFECT - END*/
.text5 p:nth-child(1) {
	opacity:0;
    animation: lineA 4s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 5.5s;
}

.text5 p:nth-child(2) {
	opacity:0;
    animation: lineB 4s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 9.5s;
}

.text5 p:nth-child(3) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 14s;
}

.text5 p:nth-child(4) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 17s;
}

.text5 p:nth-child(5) {
	opacity:0;
    animation: lineC 4s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 16.5s;
}

.text5 p:nth-child(6) {
	opacity:0;
    animation: lineD 5s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 20.5s;
}

.text5 p:nth-child(7) {
	opacity:0;
    animation: lineE 4s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 25.5s;
}

.text5 p:nth-child(8) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 25.5s;
}

.text5 p:nth-child(9) {
	opacity:0;
    animation: type 3s steps(45, end);
    animation-fill-mode: forwards;
	animation-delay: 31s;
}

@keyframes lineA {
	0% {width: 0;}
	1%{opacity:1;}
	55% {width:690px}
	75% {width:690px}
	100%{opacity:1;}
}

@keyframes lineB {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:450px}
	60% {width:450px}
	100%{opacity:1;}
}

@keyframes lineC {
	0% {width: 0;}
	1%{opacity:1;}
	72% {width:790px}
	92% {width:790px}
	100%{opacity:1;}
}

@keyframes lineD {
	0% {width: 0;}
	1%{opacity:1;}
	30% {width:435px}
	50% {width:435px}
	62% {width:655px}
	82% {width:655px}
	100%{opacity:1;}
}

@keyframes lineE {
	0% {width: 0;}
	1%{opacity:1;}
	40% {width:545px}
	60% {width:545px}
	100%{opacity:1;}
}






/*return to beginning text button*/
.menu {
	text-align:justify;
	font-size: 12px;
	color: white;
	font-family: 'courier new';
	opacity:50%;
	background-color: none;
	position:fixed;
	right: 10px;
	bottom: 0px;
	padding:20px;
	cursor: pointer;
}

.menu:hover{
	opacity:100%;
}

/*make a choice text button*/
.textOption {
	color: #D0D0D0;
	font-weight: bold;
	text-indent: 15px;
	cursor: pointer;
}

.textOption:hover {
	color:white;
}

#F11 {
	font-size: 87%;
	color: #999999;
	font-family: 'courier new';
	position: relative;
	margin:auto;
	text-align:center;
	top:30%;
}

#begin {
	font-size: 110%;
	font-family: 'courier new';
	position: relative;
	margin:auto;
	text-align:center;
	top:70%;
	width:300px;
}