body { 
  font-family:"Courier New", Courier, monospace;
  padding:0px;
  margin:0px;
  color:#fff;
  overflow-y:scroll;
  font-size:100%;
  line-height:1;
  width:100%;
  height:100%;
  background-color:#000000;
  text-align:left;
}

html {
	height:100%;
}

span, script, * { 
	margin:0px; 
	padding:0px; 
} 

#browserpage {
	position:fixed;
	height:100%;
	width:100%;
	margin:0px;
    padding:0px;
	color:#FFFFFF;
	background-color: #000000;
	overflow:hidden;
	z-index:1000;
}
	
#browsertext {
	position:relative;
	float:left;
	left:10%;
	margin:0px;
    padding:0px;
	height:auto;
	width:80%;
	top:35%;
	font-size:40px;
	text-align:center;
}

h1 {
	font-size:1.2em;
	text-align:left;
}

h2 {
	font-size:1.2em;
	text-align:left;
}

h3 {
	font-size: 1.0em;
	line-height:1.2em;
	text-align:left;
	letter-spacing:0.1em;
	padding-bottom:10px;
}

.page {
	width:100%;
	height:100%;
}

#header {
	position:absolute;
	width:100%;
	height:auto;
	z-index:100;
	background:#000000;
}
	
#container_logo {
	float:left;
	position:fixed;
	width:auto;
	padding:0px;
	margin-top:30px;
	margin-left:30px;
}

#container_logo p {
	float:left;
	margin-left:16px;
	font-weight:bold;
	padding-top:7px;
}

#logo {
	float:left;
	width:60px;
	height:25px;
	font-size:1.2em;
	font-weight:bold;
	text-decoration:none;
	color:#ffffff;
	padding-top:5px;
	margin:0px;
	border-right: 1px solid #FFFFFF;
}

#logo a:hover {
	text-decoration: underline !important;
}


/******************************* 
PAGELOADER
*******************************/


#loader {
  position:fixed;
  float:left;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:block;
  text-align: center;
  z-index:400;
  color:#FFFFFF;
  background-color:#000000;
  background-image: url("../img/img_11-kopi.jpg");
  background-size: cover;
  background-position: top left;
}
	
#loadercontent {
	position:relative;
	float:left;
	left:50%;
	width:404px;
	margin-left:-202px;
	top:40%;
}

#loaderheader {
	font-size:1.5em;
	padding-bottom:20px;
}

#loadbar_container {
	position:relative;
	float:left;
	left:50%;
	margin-left:-150px;
	display: block;
	background-color:none;
	margin-top:10%;
    width:300px;
	height:10px;
	padding-top:10px;
	z-index:200;
}

#loadbar {
    width: 0px;
    height: 1px;
    background: #FFFFFF;
    position: fixed;
	float:left;
	margin-bottom:2px;
	display:block;
    -webkit-animation: barmoveOne 3s;  /* Chrome, Safari, Opera */
	-webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation: barmoveOne 3s;   
	animation-delay: 0s;
    animation-fill-mode: forwards;
	animation-play-state: paused;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveOne {
    0% {width: 0px;}
    100% {width: 300px;}
}

@keyframes barmoveOne {
     0% {width: 0px;}
    100% {width: 300px;}
}

#loadbarstart {
    width: 0px;
    height: 1px;
    background: #FFFFFF;
    position: fixed;
	float:left;
	margin-bottom:2px;
	display:block;
    -webkit-animation: barmoveTwo 3s;  /* Chrome, Safari, Opera */
	-webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation: barmoveTwo 3s;   
	animation-delay: 0.5s;
    animation-fill-mode: forwards;
	animation-play-state: paused;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveTwo {
    0% {width: 0px;}
    100% {width: 150px;}
}

@keyframes barmoveTwo {
     0% {width: 0px;}
    100% {width: 150px;}
}

#loadbutton {
	position:absolute;
	float:left;
	left:50%;
	width:250px;
	height:31px;
	margin-left:-125px;
	top:30%;
	background-color:transparent;
	color:#FFFFFF;
	font-family:"Courier New", Courier, monospace;
	font-size:1.0em;
	font-weight:bold;
	border:1px solid #FFFFFF;
	outline:none;
	padding:0px 0px 0px 0px;
	display:none;	
}
	
#loadbutton:hover {
	color:#ccc;
}


/*********************************
GLITCH HEADING EFFECT
*********************************/


.glitch_normal {
    position: relative;
	float:left;
	top:0px;
	left:0px;
	width:600px;
	height:30px;
	font-size: 1.8em;
	font-weight: bold;
	padding:0px;
	margin-bottom:7px;
}
	
.glitch {
	position: absolute;
	float:left;
	top:0px;
	left:0px;
	padding:0px;
	font-size: 1.49em;
	font-weight: bold;
	text-shadow: 2px 2px #FFFFFF;
	overflow: hidden; /* The clip property does not work if "overflow:visible".*/
	clip: rect(0px, 600px, 0, 0); 
  	animation: glitch-anim 1.5s infinite linear alternate-reverse;
	-webkit-animation: glitch-anim 1.5s infinite linear alternate-reverse;
}

/* rect (top, right/ width, bottom, left) */ 
@keyframes glitch-anim {
  0% {
    clip: rect(0px, 600px, 4px, 0px);
  }
  5% {
    clip: rect(85px, 600px, 32px, 0px);
  }
  10% {
    clip: rect(77px, 600px, 40px, 0px);
  }
  15% {
    clip: rect(50px, 600px, 55px, 0px);
  }
  20% {
    clip: rect(43px, 600px, 3px, 0px);
  }
  25% {
    clip: rect(76px, 600px, 9px, 0px);
  }
  30% {
    clip: rect(24px, 600px, 75px, 0px);
  }
  35% {
    clip: rect(82px, 600px, 89px, 0px);
  }
  40% {
    clip: rect(72px, 600px, 1px, 0px);
  }
  45% {
    clip: rect(88px, 600px, 65px, 0px);
  }
  50% {
    clip: rect(74px, 600px, 4px, 0px);
  }
  55% {
    clip: rect(31px, 600px, 3px, 0px);
  }
  60% {
    clip: rect(40px, 600px, 60px, 0px);
  }
  65% {
    clip: rect(9px, 600px, 59px, 0px);
  }
  70% {
    clip: rect(75px, 600px, 26px, 0px);
  }
  75% {
    clip: rect(14px, 600px, 100px, 0px);
  }
  80% {
    clip: rect(2px, 600px, 26px, 0px);
  }
  85% {
    clip: rect(92px, 600px, 95px, 0px);
  }
  90% {
    clip: rect(82px, 600px, 68px, 0px);
  }
  95% {
    clip: rect(23px, 600px, 64px, 0px);
  }
  100% {
    clip: rect(34px, 600px, 23px, 0px);
  }
}


/******************************* 
NAVIGATION MENU
*******************************/

#menu_text {
	position:fixed;
	float:right;
	right:0px;
	top:0px;
	width:10px;
	margin-top:30px;
	margin-right:42px;
	padding:0px;
	z-index:100;
	background-color:transparent;
	word-break: break-all;
	font-weight: bold;
	line-height: 1.2;
}

#nav a {
    position: fixed;
    right: 30px;
    padding-top: 13px;
	padding-bottom: 10px;
    width: 34px;
	height: 17px;
    text-decoration: none;
    font-size:0.9em;
    color: #FFFFFF;
	background-color:transparent;
    text-align:center;
    border-bottom: 1px solid #FFFFFF;
	z-index:100;
}


#menu_one {
    top: 200px;
	border-top: 1px solid #FFFFFF;
}

#menu_two {
    top: 240px;
}

#menu_three {
    top: 280px;
}

#menu_four {
    top: 320px;
}

#menu_five {
    top: 360px;
}

#menu_six {
    top: 400px;
}

#menu_seven {
    top: 440px;
}

#nav_names a {
    position:fixed;
	right: -200px;
	width: 200px;  
    text-decoration: none;
    font-size:0.9em;
    color: #FFFFFF;
	height: 17px;
    padding-top: 13px;
	padding-bottom: 10px;
    background-color:transparent;
	text-align:right;
}
	
#welcome {
    top: 200px; 
}
	
#synopsis {
    top: 240px;
}

#movies {
    top: 280px;
}

#sound {
    top: 320px;
}

#credits {
    top: 360px;
}

#order {
    top: 400px;
}

#follow {
    top: 440px;
}

.forwards {
	-webkit-animation: forward 1s ; /* Safari 4.0 - 8.0 */
	animation: forward 1s ;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-play-state: paused;
	-webkit-animation-play-state: paused; 
	animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
}
	
.backwards {
	-webkit-animation: backward 1s ; /* Safari 4.0 - 8.0 */
    animation: backward 1s ;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; 
    animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
}
	
@-webkit-keyframes forward {
    from {right: -200px;}
    to {right: 80px;}
}

@keyframes forward {
    from {right: -200px;}
    to {right: 80px;}
}

@-webkit-keyframes backward {
    from {right: 80px;}
    to {right: -200px;}
}

@keyframes backward {
    from {right: 80px;}
    to {right: -200px;}
}

.active {
	text-decoration:underline !important;
	font-weight:bold;
	font-size:1.0em !important;
}

.navline_menu {
	position:fixed;
	float:right;
	right:80px;
	background-color:transparent;
	top:0;
	margin-top:0px;
    width:30px;
	height:20px;
	padding-top:20px;
	z-index:100;
	cursor:pointer;
}

.continue {
	margin-top:200px;
}

.synopsis  {
	margin-top:240px;
}

.movies  {
	margin-top:280px;
}

.sound  {
	margin-top:320px;
}

.credits  {
	margin-top:360px;
}

.order  {
	margin-top:400px;
}

.follow  {
	margin-top:440px;
}

.navline_content {
	position:absolute;
	float:left;
	left:50%;
	background-color:transparent;
	margin-left:-350px;
    width:34px;
	height:10px;
	padding-top:10px;
	z-index:100;
	cursor:pointer;
}

#navline_continue, #navline_synopsis, #navline_movies, #navline_sound, #navline_credits, #navline_order, #navline_follow   {
    position: relative;
	float:right;
	width: 0px;
    height: 1px;
	margin-bottom:2px;
    background: #ffffff;
    -webkit-animation: moveLine 1.5s;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation: moveLine 1.5s;   
    animation-fill-mode: forwards;
	animation-delay: 1s;	
}

#contentline_continue, #contentline_synopsis, #contentline_movies, #contentline_sound, #contentline_credits, #contentline_order, #contentline_follow   {
    position: relative;
	float:right;
	width: 0px;
    height: 1px;
    background: #ffffff;
	margin:0px;
	padding:0px;
    -webkit-animation: moveLine 1.5s;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation: moveLine 1.5s;   
    animation-fill-mode: forwards;
	animation-delay: 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveLine {
    0% {width: 1px;}
    100% {width: 34px;}
}

@keyframes moveLine {
     0% {width: 1px;}
    100% {width: 34px;}
}

.continue_main {
	top:41.2%;
}

.synopsis_main {
	top:36.5%;
}

.movies_main {
	top:43.6%;
}

.sound_main {
	top:40.9%;
}

.credits_main {
	top:32.4%;
}

.order_main {
	top:38.9%;
}

.follow_main {
	top:41.3%;
}

.inactive_ani {
	display:none;
	-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}

.active_ani {
	display:block;
	-webkit-animation-play-state: running; /* Safari 4.0 - 8.0 */
    animation-play-state: running;
}

#some_nav_mobi {
	display: none;
}
	
#some_fb_mobi, #some_in_mobi, #some_tw_mobi, #some_tu_mobi, #some_yt_mobi {
	display: none;
}

#some_nav {
	position: fixed;
	float:left;
    left: 50%;
	width: 600px;
	margin-left:-300px;
	margin-top:30px;
	z-index:100;
}
	
#some_nav a {
    float:left;
	padding-top: 8px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
    width: 30px;
	height: 17px;
    text-decoration: none;
    font-size:0.9em;
    color: #FFFFFF;
    text-align:center;
    border-left: 1px solid #FFFFFF;
	cursor:pointer;
}

#some_nav a:hover {
	text-decoration:underline;
	font-weight:bold;
} 

#some_five {
	border-right: 1px solid #FFFFFF;
}

#some_names {
	position: fixed;
	float:left;
    left: 50%;
	width: 600px;
	margin-left:-300px;
}
	
#some_names a {
    float:left;
	position: fixed;
	width:10px;
	text-decoration: none;
    font-size:0.9em;
    color: #FFFFFF;
    background-color: none;
	text-align:center;
	word-break: break-all;
	margin-top: -200px;
}
	
#facebook {
    margin-left:131px;
}
	
#instagram {
    margin-left:172px;
}

#twitter {
    margin-left:214px;
}

#tumblr {
    margin-left:254px;
}

#youtube {
    margin-left:295px;
}

.someforwards {
	-webkit-animation: someforward 1s; /* Safari 4.0 - 8.0 */
	animation: someforward 1s;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-play-state: paused;
	-webkit-animation-play-state: paused; 
	animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
}
	
.somebackwards {
	-webkit-animation: somebackward 1s; /* Safari 4.0 - 8.0 */
    animation: somebackward 1s;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-play-state: paused;
    -webkit-animation-play-state: paused; 
    animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
}
	
@-webkit-keyframes someforward {
    from {margin-top: -200px;}
    to {margin-top: 70px;}
}

@keyframes someforward {
    from {margin-top: -200px;}
    to {margin-top: 70px;}
}

@-webkit-keyframes somebackward {
    from {margin-top: 70px;}
    to {margin-top: -200px;}
}

@keyframes somebackward {
    from {margin-top: 70px;}
    to {margin-top: -200px;}
}
	
#some_text_one {
	float:left;
	font-weight: bold;
	width:105px;
	margin-right:10px;
	margin-top:7px;
}

#some_text_two {
	float:left;
	font-weight:normal;
	width:160px;
	margin-left:350px;
	margin-top:-23px;
}


/********************************
CONTAINER & CONTENT POSITIONING
********************************/		


.container_welcome, .container_synopsis, .container_movie, .container_sound, .container_credit, .container_buy, .container_follow {
	position:relative;
	display:block;
	background-color:#000;
	border: none;
	width: 100%;
	height: 100%;
	padding:0%;
	box-sizing: border-box;
	text-align:left;
}

.container_welcome, .container_movie {
	overflow:hidden;
} 

.container_synopsis {
	background-image: url("../img/moon-9.jpg");
	background-size:cover;
	background-position: top left;
}

.container_sound {
	background-image: url("../img/img_19-kopi.jpg");
	background-size: cover;
	background-position: top left;
}

.container_buy {
	background-image: url("../img/img_4.jpg");
	background-size:cover;
	background-position: center top;
}

.container_follow {
	background-image: url("../img/img_1-kopi.jpg");
	background-size:cover;
	background-position: left center;
}

.content_welcome, .content_synopsis, .content_movie, .content_sound, .content_buy, .content_follow {
	position:absolute;
    left: 50%;
	width:600px;
    margin-left:-300px;
	line-height:1.2em;
	text-align:left;
	padding:0px;
	overflow:hidden;
}

.content_welcome {
	top:41.4%;
	height:200px;
}

.content_synopsis {
	top:36.6%;
	height:317px;
}

.content_movie {
    top:43.7%;
	height:149px;
}

.content_sound {
	top:41.1%;
	height: 222px;
}

.content_credit {
	display:block;
	width:100%;
	height:100%;
	box-sizing: border-box;
	background-color:transparent;
	background-image: url("../img/img_9.png");
	background-size: cover;
	background-position: top right;
	overflow: hidden;
	top:32.5%;
}

.content_buy {
	top:39.0%;
	height:267px;
}

.content_follow {
	top:41.4%;
	height:300px;
}


/*********************************
TEXT & LINK STYLING
*********************************/


.order_text {
	position:relative;
	float:left;
	font-size:1.0em;
	line-height:1.2em;
	text-align:left;
	
}

#order_link {	
	position:relative;
	color: #ffffff;
	text-decoration:none;
	cursor:pointer;
	font-size:1.0em;
	line-height:1.2em;
	font-weight: bold;
	display:inline;
}

.reviews {
    float:left;
	color: #ffffff;
	font-size:1.0em;
	line-height:1.2em;
	z-index:100;
	margin-top:30px;
	padding:0px 0px 0px 0px;
	text-align:left;
	/* border-left: 1px solid #FFFFFF; */
}

.reviews h3 {
	padding:0px 0px 5px 0px;
	text-align:left;
}

.content_synopsis p {
	padding-bottom: 18px;
}

#videoone {
	position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

#videotwo {
	position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

#videocontenttwo_text {
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom: 1px solid #FFFFFF;
}

#swap_btn_one, #swap_btn_two, #swap_btn_three, #swap_btn_four {
	background:none;
	color:#fff;
	font-family:"Courier New", Courier, monospace;
	font-size:1.0em;
	font-weight:bold;
	outline:none;
	margin:0px;
	padding:0px 15px 0px 18px;
	border:none;
	text-align: center;
	width:auto;
	height:auto;
	cursor:pointer;
	border-left: 1px solid #FFFFFF;
}

#swap_btn_one {
	padding-left:0px;
	border:none;
}

#swap_btn_one:hover, #swap_btn_two:hover, #swap_btn_three:hover, #swap_btn_four:hover {
	text-decoration:underline;
}

.btn_active {
	text-decoration:line-through;
}

.credit_txt {
	position:relative;
	left:50%;
	width:600px;
	margin-left:-300px;
	padding-top:400px;
	padding-bottom:800px;
	text-align:left;
	line-height:1.5em;
}

.linespacing {
	margin-top:18px;
}

#follow_social {
	position:relative;
	float:left;
	width:600px;
	margin-top:20px;
	padding-top:15px;
	border-top: 1px solid #FFFFFF;
}

.socialmedia_text_one a, .socialmedia_text_two a, .socialmedia_text_three a, .socialmedia_text_four a, .socialmedia_text_five a {
	position:relative;
	float:left;
	width:auto;
	height:20px;
	font-weight: bold;
	padding: 0px 20px 0px 20px;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
	display:inline;
	letter-spacing:0.1em;
	outline:none;
	border-left: 1px solid #FFFFFF;
}

.socialmedia_text_one a {
	border:none;
	padding: 0px 20px 0px 0px;
}

/*
.socialmedia_text_five a {
	 border-right: 1px solid #FFFFFF; 
}
*/

.socialmedia_text_one a:hover, .socialmedia_text_two a:hover, .socialmedia_text_three a:hover, .socialmedia_text_four a:hover, .socialmedia_text_five a:hover {
	text-decoration:underline;
}


/******************************* 
TYPEWRITERS
*******************************/


.welcome_text, .synopsis_text, .movie_text, .sound_text, .credit_text, .buy_text, .follow_text {
	position: relative;
    left:0%;
	top:0%;
	margin: 0px 0px 15px 0px;
    border-right: 2px solid;
	border-right-color: transparent;
    white-space: nowrap;
    overflow: hidden;
	z-index:300;
	display:block;
}
	
.welcome_text {
    width: 322px;
    /* transform: translateY(-50%); - https://www.w3schools.com/cssref/css3_pr_transform.asp */
}

.synopsis_text{ 
	width: 141px;
}


.movie_text {
    width: 233px;
}
	
.sound_text {
    width: 200px;
}	
	
.credit_text {
    width: 222px;
}
	
.buy_text {
    width: 187px;
}
	
.follow_text {
    width: 130px;
}

/* Animation */
#welcome_typewriter {
  animation: typewriterWelcome 3s steps(28) 1s 1 normal both,
             blinkTextCursor 500ms steps(28) 8.5 normal;
  -webkit-animation: typewriterWelcome 3s steps(28) 1s 1 normal both,
             blinkTextCursor 500ms steps(28) 8.5 normal;
}
	
@keyframes typewriterWelcome {
  from{width: 0;}
  to{width: 322px;}
}

@-webkit-keyframes typewriterWelcome {
  from{width: 0;}
  to{width: 322px;}
}

/* Animation */
#synopsis_typewriter{
  animation: typewriterSynopsis 2s steps(12) 1s 1 normal both,
	  		 blinkTextCursor 500ms steps(12) 6.5 normal;
  -webkit-animation: typewriterSynopsis 2s steps(12) 1s 1 normal both,
	  		 blinkTextCursor 500ms steps(12) 6.5 normal;
             
}
	
@keyframes typewriterSynopsis {
  from{width: 0;}
  to{width: 141px;}
}

@-webkit-keyframes typewriterSynopsis {
  from{width: 0;}
  to{width: 141px;}
}
	
/* Animation */
#movie_typewriter {
  animation: typewriterMovie 3s steps(17) 1s 1 normal both,
             blinkTextCursor 500ms steps(17) 8.5 normal;
  -webkit-animation: typewriterMovie 3s steps(17) 1s 1 normal both,
             blinkTextCursor 500ms steps(17) 8.5 normal;
}
	
@keyframes typewriterMovie {
  from{width: 0;}
  to{width: 197px;}
}

@-webkit-keyframes typewriterMovie {
  from{width: 0;}
  to{width: 197px;}
}
	
/* Animation */
#sound_typewriter {
  animation: typewriterSound 3s steps(20) 1s 1 normal both,
             blinkTextCursor 500ms steps(20) 8.5 normal;
  -webkit-animation: typewriterSound 3s steps(20) 1s 1 normal both,
             blinkTextCursor 500ms steps(20) 8.5 normal;
}
	
@keyframes typewriterSound {
  from{width: 0;}
  to{width: 229px;}
}	

@-webkit-keyframes typewriterSound {
  from{width: 0;}
  to{width: 229px;}
}
	
/* Animation */
#credit_typewriter {
  animation: typewriterCredit 3s steps(19) 1s 1 normal both,
             blinkTextCursor 500ms steps(19) 8.5 normal;
  -webkit-animation: typewriterCredit 3s steps(19) 1s 1 normal both,
             blinkTextCursor 500ms steps(19) 8.5 normal;
}
	
@keyframes typewriterCredit {
  from{width: 0;}
  to{width: 222px;}
}

@-webkit-keyframes typewriterCredit {
  from{width: 0;}
  to{width: 222px;}
}

/* Animation */
#buy_typewriter {
  animation: typewriterBuy 3s steps(16) 1s 1 normal both,
             blinkTextCursor 500ms steps(16) 8.5 normal;
  -webkit-animation: typewriterBuy 3s steps(16) 1s 1 normal both,
             blinkTextCursor 500ms steps(16) 8.5 normal;
}
	
@keyframes typewriterBuy {
  from{width: 0;}
  to{width: 187px;}
}

@-webkit-keyframes typewriterBuy {
  from{width: 0;}
  to{width: 187px;}
}
	
/* Animation */
#follow_typewriter {
  animation: typewriterFollow 3s steps(11) 1s 1 normal both,
             blinkTextCursor 500ms steps(11) 8.5 normal;
  -webkit-animation: typewriterFollow 3s steps(11) 1s 1 normal both,
             blinkTextCursor 500ms steps(11) 8.5 normal;
}
	
@keyframes typewriterFollow {
  from{width: 0;}
  to{width: 130px;}
}

@-webkit-keyframes typewriterFollow {
  from{width: 0;}
  to{width: 130px;}
}

@keyframes blinkTextCursor {
  from{border-right-color: transparent ;}
  to{border-right-color: #FFFFFF;}
}

@-webkit-keyframes blinkTextCursor {
  from{border-right-color: transparent ;}
  to{border-right-color: #FFFFFF;}
}

.active_type {
	display:block;
	animation-play-state: running;
	-webkit-animation-play-state: running; /* Safari 4.0 - 8.0 */
}

.inactive_type {
	display:none;
	animation-play-state: paused;
    -webkit-animation-play-state: paused; 
}


/*****************************
PAGE MUTE BUTTON
*****************************/


#soundbar {
	position:fixed;
	float:right;
	background-color:transparent;
    right:30px;
	bottom:30px;
    width:29px;
	height:10px;
	padding-top:10px;
	padding-left:1px;
	z-index:200;
	cursor:pointer;
	display:block;
}

#soundbarone {
	float:left;
    margin-right:2px;
    margin-top:-1px;
    height: 2px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmoveone 3s infinite; /* Chrome, Safari, Opera */
    animation: barmoveone 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveone {
    50% {height: 4px;margin-top:-2px;}
}

/* Standard syntax */
@keyframes barmoveone {
    50% {height: 4px;margin-top:-2px;}
}

#soundbartwo {
	float:left;
    margin-right:2px;
    margin-top:-1px;
    height: 2px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovetwo 5s infinite; /* Chrome, Safari, Opera */
    animation: barmovetwo 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovetwo {
    50% {height: 6px;margin-top:-3px;}
}

/* Standard syntax */
@keyframes barmovetwo {
    50% {height: 6px;margin-top:-3px;}
}
#soundbarthree {
	float:left;
    margin-right:2px;
    margin-top:-2px;
    height: 4px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovethree 3s infinite; /* Chrome, Safari, Opera */
    animation: barmovethree 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovethree {
    50% {height: 12px;margin-top:-6px;}
}

/* Standard syntax */
@keyframes barmovethree {
    50% {height: 12px;margin-top:-6px;}
}
#soundbarfour {
	float:left;
    margin-right:2px;
    margin-top:-4px;
    height: 8px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovefour 2s infinite; /* Chrome, Safari, Opera */
    animation: barmovefour 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovefour {
    50% {height: 16px;margin-top:-8px;}
}

/* Standard syntax */
@keyframes barmovefour {
    50% {height: 16px;margin-top:-8px;}
}
#soundbarfive {
	float:left;
    margin-right:2px;
    margin-top:-2px;
    height: 4px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovefive 2s infinite; /* Chrome, Safari, Opera */
    animation: barmovefive 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovefive {
    50% {height: 12px;margin-top:-6px;}
}

/* Standard syntax */
@keyframes barmovefive {
    50% {height: 12px;margin-top:-6px;}
}

#soundbarsix {
	float:left;
    margin-right:2px;
    margin-top:-1px;
    height: 2px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovesix 3s infinite; /* Chrome, Safari, Opera */
    animation: barmovesix 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovesix {
    50% {height: 8px;margin-top:-4px;}
}

/* Standard syntax */
@keyframes barmovesix {
    50% {height: 8px;margin-top:-4px;}
}

#soundbarseven {
	float:left;
    margin-right:2px;
    margin-top:-4px;
    height: 8px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmoveseven 4s infinite; /* Chrome, Safari, Opera */
    animation: barmoveseven 4s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveseven {
    50% {height: 14px;margin-top:-7px;}
}

/* Standard syntax */
@keyframes barmoveseven {
    50% {height: 14px;margin-top:-7px;}
}

#soundbareight {
	float:left;
    margin-right:2px;
    margin-top:-2px;
    height: 4px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmoveeight 3s infinite; /* Chrome, Safari, Opera */
    animation: barmoveeight 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveeight {
    50% {height: 16px;margin-top:-8px;}
}

/* Standard syntax */
@keyframes barmoveeight {
    50% {height: 16px;margin-top:-8px;}
}

#soundbarnine {
	float:left;
    margin-right:2px;
    margin-top:-2px;
    height: 4px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmovenine 2s infinite; /* Chrome, Safari, Opera */
    animation: barmovenine 2s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmovenine {
    50% {height: 10px;margin-top:-5px;}
}

/* Standard syntax */
@keyframes barmovenine {
    50% {height: 10px;margin-top:-5px;}
}

#soundbarten {
	float:left;
    margin-right:0px;
    height: 0px;
    width:1px;
    background-color: #ffffff;
    color: white;
	z-index:100;
    -webkit-animation: barmoveten 5s infinite; /* Chrome, Safari, Opera */
    animation: barmoveten 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveten {
    50% {height: 4px;margin-top:-2px;}
}

/* Standard syntax */
@keyframes barmoveten {
    50% {height: 4px;margin-top:-2px;}
}

#soundbarpaused {
    float:right;
	width: 1px;
    height: 1px;
    background: #FFFFFF;
    position: absolute;
	margin-top:0px;
	z-index:50;
    -webkit-animation: movepaused 1.5s;  /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation: movepaused 1.5s;   
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes movepaused {
    0% {width: 1px;}
    100% {width: 29px;}
}

@keyframes movepaused {
     0% {width: 1px;}
    100% {width: 29px;}
}

.running {
	animation-play-state: running;
	-webkit-animation-play-state: running;
	display: block;
}

.paused {
	 animation-play-state: paused;
	 -webkit-animation-play-state: paused;
	display: none;
}


/*****************************
PAGE TRACKLIST
*****************************/


.container_song {
	position:relative;
	width:100%;
	height:25px;
	padding: 15px 0px 8px 0px;
	margin: 0px;
	display:inline-block;
	border:none;
	outline:none;
	border-bottom:1px solid #FFFFFF;
}

.sound_one {
	border-top:1px solid #FFFFFF;
	padding: 20px 0px 8px 0px;
}

.intro_text_sound {
	padding-bottom:40px;
}

.song_title {
	position:relative;
	float:left;
	left:20px;
	color:#fff;
	font-size:1.1em;
	padding:0px;
	margin:0px;
}

#audiobtnone, #audiobtntwo {
	position:relative;
	float:left;
	left:0px;
	width:auto;
	height:auto;
	background:none;
	border:none;
	outline:none;
	cursor:pointer;
	/* border-left:1px solid #FFFFFF; */
	border-right:1px solid #FFFFFF;
	padding: 2px 20px 0px 0px;
	margin-top:-3px;
}

#aud_one_currenttime, #aud_two_currenttime {
	float:right;
	position:absolute;
	right:43px;
	width:auto;
	height:auto;
	padding:0px;
	margin: 0px 25px 0px 0px;
}

	
#aud_one_duration, #aud_two_duration {
	float:right;
	position:relative;
	right:0px;
	width:auto;
	padding:0px;
	margin: 0px 0px 0px 0px;
}
	
.slidecontainer {
	float:right;
	position:relative;
    width: 380px;
	height:25px;
	margin-right: 0px;
	margin-top:0px;
	outline: none;
	border: none;
}

.slider {
	position:absolute;
	float:left;
	left:0px;
    -webkit-appearance: none;
    appearance: none;
    width: 250px;
    height: 2px;
	top:5px;
	background-color: #ffffff;
	background: url("../img/slider_bg.png");
    outline: none;
	border: none;
	opacity: 1;
	cursor: pointer;
}

.slider:hover {
    cursor: pointer;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 25px;
    cursor: pointer;
	border:none;
	outline: none;
	opacity: 1;
	background: url("../img/slider.png");
}

.slider::-moz-range-thumb {
    width: 4px;
    height: 25px;
    cursor: pointer;
	border:none;
	outline: none;
	opacity: 1;
	background: url("../img/slider.png");
}


/*****************************
FORMS AND BUTTONS
*****************************/


.form_container {
	float:left;
	margin-top:20px;
	margin-left:0px;
	font-size:0.8em;
}

.form_container p {
	display:block;
	font-weight:bold;
	text-align:center;
}

.form_box {
	width:240px;
	height:20px;
	margin-bottom:20px;
	outline:none;
	border:none;
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
	letter-spacing:0.1em;
}

.form_radio {
	margin-left:50px;
}

.form_radio_two {
	margin-left:20px;
}

.form_radio_three {
	margin-left:20px;
}

.form_btn_submit {
	float:left;
	width:240px;
	height:21px;
	margin-top:20px;
	background-color:transparent;
	color:#FFFFFF;
	font-weight:bold;
	border:1px solid #FFFFFF;
	outline:none;
	padding:0px;
	margin-left:50px;
	font-family:"Courier New", Courier, monospace;
}

.form_btn_submit:hover {
	color:#ccc;
}


/*********************************
PARALLAX BACKGROUND IMAGE
*********************************/


.threefourseven_parallax_synopsis {
    /* The image used */
    background-image: url("../img/img_21_new2.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.threefourseven_parallax_movies {
    /* The image used */
    background-image: url("../img/img_29.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.threefourseven_parallax_sound {
    /* The image used */
    background-image: url("../img/img_18.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.threefourseven_parallax_credits {
    /* The image used */
    background-image: url("../img/img_16.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
}

.threefourseven_parallax_buy {
    /* The image used */
    background-image: url("../img/forest_ground-new.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}

.threefourseven_parallax_follow {
    /* The image used */
    background-image: url("../img/img_14.jpg");

    /* Set a specific height */
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}