body {
	position: absolute;
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	background-color: black;
	font-size: 100%;
	display:block;
	color:white;
	overflow-x: hidden;
	overflow-y:hidden;
	background-image: url("../images/univers.jpg");
    background-size: cover;
    background-position: top right;
	cursor: url("../images/crosshair.png"),auto;
}

/***************************
DETECT BROWSER 
***************************/
#browserpage {
	position:absolute;
	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;
}
	
/******************************* 
PAGELOADER
*******************************/
#pageload_container {
  position:absolute;
  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("../images/univers.jpg");
  background-size: cover;
  background-position: top right;
}

.pageload_slidedown {
  -webkit-animation: down 3s;
  -webkit-animation-fill-mode: forwards;
  animation: down 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes down {
  0%   {top:calc(100% - 100%)}
  100% {top:calc(100% - 0%)}
}

@keyframes down {
  0%   {top:calc(100% - 100%)}
  100% {top:calc(100% - 0%)}
}

#pageload_content {
  position: absolute;
  float:left;
  height: 100%;
  width: 100%;
  margin:0px;
  padding:0px;
  top:0%;
  left:0%;
  display:block;  
  -webkit-perspective: 200px;
  perspective: 200px;
}

#pageload_content_box {
  position:relative;
  float:left;
  display:block;  
  height: 500px;
  width: 500px;
  margin:0px;
  padding:0px;
  top:calc(50% - 250px);
  left:calc(50% - 250px);
  background-color: transparent;
  border:none;
  -webkit-animation: myrotate 6s;
  -webkit-animation-fill-mode: forwards;
  -webkit-backface-visibility: visible; 
  -webkit-transform: rotateY(200deg);
  animation: myrotate 6s;
  animation-fill-mode: forwards;
  backface-visibility: visible;
  transform: rotateY(200deg);
 }
 
@-webkit-keyframes myrotate {
  0%   {transform: rotateY(200deg);}
  100% {transform: rotateY(360deg);}
}

@keyframes myrotate {
  0%   {transform: rotateY(200deg);}
  100% {transform: rotateY(360deg);}
}
	

#pageload_header {
	font-size:1.5em;
	padding: 20px 0px 20px 20px;
	margin:0px;
}

#pageload_text {
  float:left;
  width:470px;
  height:470px;
  padding:30px;	
  margin:0px;
  text-align: center;
  font-family: Courier New;
  font-size:1.2em;
  font-weight:bold;
  line-height:2.0em;
}

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

#loadbar {
    position: absolute;
	float:left;
	width: 0px;
    height: 1px;
    background: #FFFFFF;
	margin-bottom:2px;
	display:block;
    -webkit-animation: startLoad 3s; 
	-webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: forwards; 
	-webkit-animation-play-state: paused;
    animation: startLoad 3s;   
	animation-delay: 0s;
    animation-fill-mode: forwards;
	animation-play-state: paused;
}

@-webkit-keyframes startLoad {
    0% {width: 0px;}
    100% {width: 300px;}
}

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

#loadbarstart {
    position: absolute;
	float:left;
	width: 0px;
    height: 1px;
    background: #FFFFFF;
	margin-bottom:2px;
	display:block;
    -webkit-animation: executeLoad 3s; 
	-webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards; 
	-webkit-animation-play-state: paused;
    animation: executeLoad 3s;   
	animation-delay: 0.5s;
    animation-fill-mode: forwards;
	animation-play-state: paused;
}

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

@keyframes executeLoad {
     0% {width: 0px;}
    100% {width: 150px;}
}
	
#loadbutton_container {
	position:absolute;
	float:left;
	left:50%;
	width:250px;
	height:40px;
	margin-left:-125px;
	bottom:10%;
	background-color:transparent;
	display:none;	
	z-index:-200;
}

#loadbutton {
	position:absolute;
	float:left;
	width:250px;
	height:31px;
	top:0px;
	left:50%;
	margin-left:-125px;
	background-color:transparent;
	color:#FFFFFF;
	font-family:"Courier New", Courier, monospace;
	font-size:0.8em;
	font-weight:bold;
	border:none;
	outline:none;
	padding:10px 0px 0px 0px;
	display:none;	
	cursor:url("../images/target.png"),pointer;
}
	
#loadbutton:hover {
	color:#ccc;
}

/***************************
PAGE CONTENT
***************************/
#container_page {
	position:absolute;
	float:left;
	width:960px;
	height: auto;
	top:70px;
	left:70px;
	margin-left:0px;
	display:block;
	visibility: hidden;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

.page_slideup {
  -webkit-animation: up 3s;
  -webkit-animation-fill-mode: forwards;
  animation: up 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes up {
  0%   {top:calc(100% - 0%)}
  100% {top:calc(100% - 100% + 70px)}
}

@keyframes up {
  0%   {top:calc(100% - 0%)}
  100% {top:calc(100% - 100% + 70px)}
}

#container_doks {
	position:relative;
	float:left;
	width:250px;
	height:286px;	
	left:0px;
	top:0px;
	margin:0px 70px 70px 0px;
	padding:0px;
	display:block;
}

#content_doks {
	position:relative;
	float:left;
	width:250px;
	height:250px;
	padding:0px;
	margin:0px;
	display:block;
}

#logo {
	position:relative;
	float:left;
	height:19px;
	width:auto;
	margin:0px;
	padding:0px 10px 16px 0px;
	top:0px;
	font-family: Courier New;
	font-size:1.0em;	
	font-weight:bold;
	display:block;
}	


.headline {
	position:relative;
	float:left;
	height:19px;
	width:auto;
	left:0px;
	top:0px;
	margin:0px;
	padding:0px 10px 16px 0px;
	font-family: Courier New;
	font-size:0.95em;	
	font-weight:bold;
	display:inline;
}
	
#typeone, #typetwo, #typethree, #typefour  {
	position:absolute;
	float:left;
	top:0px;
	font-family: Courier New;
	font-size:1.5em;
	text-align:center;
	padding:0px 30px 0px 30px;
}

#type_count {
	position:absolute;
	float:right;
	width:auto;
	height:auto;
	right:30px;
	bottom:30px;
	margin:0px;
	padding:0px;
	font-family: Courier New;
	font-size:1.0em;	
	font-weight:bold;
	display:inline;
}

.line {
	position:relative;
	float:left;
	width:1px;
	height:20px;
	margin-top:18px;
	display:block;
	background-color:#FFFFFF;
}

/*******************************
BOOKS 
*******************************/
#container_347, #container_rio {
  position:relative;
  float:left;
  width:250px;
  height:286px;
  font-size:1.0em;	
  left:0px;
  margin: 0px 70px 70px 0px;
  padding:0px;	
  display:block;
  z-index:0;
}
	
#container_347 a, #container_rio a {
  position:relative;
  float:left;
  width:250px;
  height:286px;
  top:0px;
  left:0px;
  margin:0px;
  padding:0px;
  color:#FFFFFF;
  display:block;
  border:none;
  outline:none;
  cursor:url("../images/target.png"),pointer;
}	

.content_books {
	position:relative;
	float:left;
	width:250px;
	height:250px;
	display:block;
}

#turn {
  position:absolute;
  float:left;
  width: 200px;
  height:220px;
  top:5px;
  left:30px;
  font: Courier !important;
  z-index:-400;
  -webkit-animation-name: turn;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-perspective: 800px;
  animation-name: turn;
  animation-duration: 10s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  perspective: 800px;
 }
 
@-webkit-keyframes turn {
	0%   {-webkit-transform: rotateY(0deg);} 
	100% {-webkit-transform: rotateY(360deg);}
}
	
@keyframes turn {
    0%   {transform: rotateY(0deg);} 
	100% {transform: rotateY(360deg);}
}
	
#turn_rio {
  position:absolute;
  float:left;
  width: 200px;
  height:220px;
  top:5px;
  left:30px;
  font: Courier !important;
  z-index:-400;
  -webkit-animation-name: rioturn;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform: rotateY(0deg);
  -webkit-transform-style: flat;
  -webkit-perspective: 800px;
  animation-name: rioturn;
  animation-duration: 10s;
  animation-delay: 7s;
  animation-iteration-count: infinite;
  transform: rotateY(0deg);
  transform-style: flat;
  perspective: 800px;
 }

@-webkit-keyframes rioturn {
	0%   {-webkit-transform: rotateY(0deg); -webkit-transform-style: flat;} 
	100% {-webkit-transform: rotateY(360deg); -webkit-transform-style: flat;}
}
	
@keyframes rioturn {
    0%   {transform: rotateY(0deg); transform-style: flat;} 
	100% {transform: rotateY(360deg); transform-style: flat;}
}

.book {
  position:relative;
  font-size: 3em;
  width: 2em;
  margin: 1.5em auto;
  display:block;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(-45deg) rotateY(30deg);
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  background: transparent;
  border: 1px solid white;
  text-align: center;
  line-height: 2em;
}

.front {-webkit-transform: translateZ(1em); transform: translateZ(1em); width: 1.9em; height: 3.58em; top:-1.02em; right:0.49em;}
.top {-webkit-transform: rotateX(90deg) translateZ(1em); transform: rotateX(90deg) translateZ(1em); width: 2.01em; height: 1.0em; top:-0.01em; right:0.14em; }
.right {-webkit-transform: rotateY(90deg) translateZ(1em); transform: rotateY(90deg) translateZ(1em); width: 0.99em; height: 3.8em; top:-0.51em; left:0.33em;}
.left {-webkit-transform: rotateY(-90deg) translateZ(1em); transform: rotateY(-90deg) translateZ(1em); width: 1em; height: 3.8em; left:0.3em; top:-0.51em;}
.bottom {-webkit-transform: rotateX(-90deg) translateZ(1em); transform: rotateX(-90deg) translateZ(1em); width: 2em; height: 1em; top: 1.8em; right:0.15em;}
.back {-webkit-transform: rotateY(-180deg) translateZ(1em); transform: rotateY(-180deg) translateZ(1em); width: 2.10em; height: 3.96em; top:-0.01em; right:-0.17em;}

#container_scream {
  display:none;	
}

/*******************************
CREDITS 
*******************************/
#container_credit {
	position:relative;
	float:left;
	width:250px;
	height:396px;
	font-size:1.0em;	
	top:0px;	
	margin:0px 70px 70px 0px;
	padding:0px;	
}

#container_credit_space {
	position:relative;
	float:left;
	display:block;
	width:250px;
	height:250px;
	margin:0px 0px 70px 0px;
	overflow: hidden;
}

.content_credit {
	position:relative;
	float:left;
	display:block;
	width:250px;
	height:190px;
	overflow: hidden;
	margin:30px 0px 30px 0px;
}

#credit_txt_one, #credit_txt_two  {
	position:absolute;
	left:0%;
	height:auto;
	width:190px;
	margin-left:30px;
	margin-right:30px;
	padding-top:100px;
	padding-bottom:100px;
	text-align:left;
	line-height:1.5em;
	overflow: hidden;
	box-sizing: border-box;
	font-family: Courier New;
}

#credit_txt_two  {
	display:none;
}

#container_credit_small {
	position:relative;
	float:left;
	width:250px;
	height:40px;
	bottom:0px;
	margin:0px 0px 0px 0px;
	display:inline;
}

#content_credit_small {
	position:absolute;
	background-color:transparent;
	bottom:5% !important;
    width:250px;
	height:40px;
	z-index:200;
	display:block;
	padding:0px 15px 5px 0px;
	font-family: Courier New;
}

#collaborations_btn, #about_btn {
	float:left;
	position:relative;
	height:40px;
	padding-top:15px;
	background-color:transparent;
	color:#FFFFFF;
	font-family: Courier New;
	font-size:0.8em;
	text-align:center;
	border:none;
	display:inline;
	outline:none;
	cursor:url("../images/target.png"),pointer;
}

#about_btn {
	width:99px;
	display:block;
	font-weight:bold;
}

#collaborations_btn {
	width:150px;
	display:block;
}


.last_btn {
	border-right:none !important;
}

.link_fade {
  display:block;
  -webkit-animation: fade_btn 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation: fade_btn 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  opacity:1.0;
}

@-webkit-keyframes fade_btn {
  0%   {opacity:0.2; }
  100% {opacity:1.0; }
}

@keyframes fade_btn {
  0%   {opacity:0.2; }
  100% {opacity:1.0; }
}

/*****************************
AUDIO
*****************************/
#container_audio {
	position:relative;
	float:left;
	width:250px;
	height:396px;
	font-size:1.0em;	
	top:0px;	
	margin:0px 70px 70px 0px;
	padding:0px;	
	-webkit-user-select: none; /* Safari */
	  -ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

#content_audio {
	position:relative;
	float:left;
	width:250px;
	height:250px;
	font-size:1em;
	margin:0px 0px 70px 0px;
	padding:0px;
	display:block;
}
#container_record_player {
    position:relative;
	float:left;
	left:0px;
	top:0px;
	width:250px;
	height:250px;
	display:block;
}
	
#record_player {
    position:absolute;
	float:left;
	left:44px;
	top:40px;
	width:140px;
	height:140px;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
	z-index:-100;
 }
	
#play_record {
    position:absolute;
	float:left;
	left:-1px;
	top:-1px;
	width:140px;
	height:140px;
	display:none;
	border:1px solid #FFFFFF;
	border-radius:50%;
 }
	
#stop_record {
    position:absolute;
	float:left;
	left:-1px;
	top:-1px;
	width:140px;
	height:140px;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
 }
    
#record_middle_border {
	position:absolute;
	float:left;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
	left:49px;
	top:49px;
	width:40px;
	height:40px;
}
	
#record_middle {
	position:absolute;
	float:left;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
	left:67px;
	top:67px;
	width:4px;
	height:4px;
}
	
#record_player_middle {
	position:absolute;
	float:left;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
	left:67px;
	top:67px;
	width:4px;
	height:4px;
}
	
#record_stop_middle {
	position:absolute;
	float:left;
	display:block;
	border:1px solid #FFFFFF;
	border-radius:50%;
	left:67px;
	top:67px;
	width:4px;
	height:4px;
}
	
#record_stop_one {
	position:absolute;
	float:left;
	left:68px;
	top:10px;
	width:4px;
	height:40px;
	display:block;
	border:1px solid #FFFFFF;	
}
	
#record_stop_two {
	position:absolute;
	float:left;
	left:106px;
	top:49px;
	width:4px;
	height:40px;
	display:block;
	border:1px solid #FFFFFF;
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari prior 9.0 */
    transform: rotate(90deg); /* Standard syntax */
}
	
#record_stop_three {
	position:absolute;
	float:left;
	left:68px;
	top:88px;
	width:4px;
	height:40px;
	display:block;
	border:1px solid #FFFFFF;	
}
	
#record_stop_four {
	position:absolute;
	float:left;
	left:28px;
	top:49px;
	width:4px;
	height:40px;
	display:block;
	border:1px solid #FFFFFF;	
	-ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari prior 9.0 */
    transform: rotate(270deg); /* Standard syntax */
}
	
#record_box_one, #record_box_two, #record_box_three, #record_box_four, #record_box_five, #record_box_six, #record_box_seven, #record_box_eight {
	position:absolute;
	float:left;
	display:block;
	border:1px dashed #FFFFFF;
	border-radius:50%;
}
	
#record_box_one, #record_box_five {
	width:120px;
	height:120px;
	left:9px;
	top:9px;
}

#record_box_one {
	clip: rect(2px,55px,55px,2px);
}

#record_box_five {
	clip: rect(60px,120px,120px,60px);
}
	
#record_box_two, #record_box_six {
	width:100px;
	height:100px;
	left:19px;
	top:19px;
}

#record_box_two {
	clip: rect(2px,45px,45px,2px);
}

#record_box_six {
	clip: rect(50px,100px,100px,50px);
}
	
#record_box_three, #record_box_seven {
	width:80px;
	height:80px;
	left:29px;
	top:29px;
}

#record_box_three {
	clip: rect(2px,35px,35px,2px);
}

#record_box_seven {
	clip: rect(40px,80px,80px,40px);
}
	
#record_box_four, #record_box_eight {
	width:60px;
	height:60px;
	left:39px;
	top:39px;
}

#record_box_four {
	clip: rect(2px,25px,25px,2px);
}

#record_box_eight {
	clip: rect(30px,60px,60px,30px);
}
	
.recordplaying {
    -webkit-animation: playing_record 3s 0.0s infinite;
	-webkit-animation-timing-function: linear; 
	animation: playing_record 3s 0.0s infinite;
	animation-timing-function: linear;
}
	
@-webkit-keyframes playing_record {
     0%  {transform: rotateZ(0deg);} 
	100% {transform: rotateZ(360deg);}
}
	
 @keyframes playing_record {
    0%   {transform: rotateZ(0deg);} 
	100% {transform: rotateZ(360deg);}
} 

.recordstopped {
    -webkit-animation: stopped_record 3s 0.5s infinite;
	-webkit-animation-timing-function: linear; 
	animation: stopped_record 3s 0.5s infinite;
	animation-timing-function: linear;
}
	
@-webkit-keyframes stopped_record {
     0%   {transform: rotateZ(0deg);} 
	100% {transform: rotateZ(360deg);}
}
	
 @keyframes stopped_record {
    0%   {transform: rotateZ(0deg);} 
	100% {transform: rotateZ(360deg);}
} 

.recordload {
	z-index:-400;
    -webkit-animation: load_record 2s forwards;
	-webkit-animation-timing-function: linear; 
	animation: load_record 2s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes load_record {
    0%   {transform: rotateY(270deg);} 
	100% {transform: rotateY(360deg);}
}
	
 @keyframes load_record {
    0%   {transform: rotateY(270deg);} 
	100% {transform: rotateY(360deg);}
} 

.record_play_clip {
	clip: rect(0px,6px,42px,0px);
	-webkit-animation: clip_play 0.9s 0.3s forwards;
	-webkit-animation-timing-function: linear; 
	animation: clip_play 0.9s 0.3s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes clip_play {
    0%   {clip: rect(0px,6px,42px,0px);} 
	100% {clip: rect(0px,6px,0px,0px);}
}
	
 @keyframes clip_play {
    0%   {clip: rect(0px,6px,42px,0px);} 
	100% {clip: rect(0px,6px,0px,0px);}
} 

.recordunload {
	z-index:-400;
    -webkit-animation: unload_record 2s forwards;
	-webkit-animation-timing-function: linear; 
	animation: unload_record 2s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes unload_record {
    0%   {transform: rotateY(180deg);} 
	100% {transform: rotateY(90deg);}
}
	
 @keyframes unload_record {
    0%   {transform: rotateY(180deg);} 
	100% {transform: rotateY(90deg);}
} 	
	
.record_stop_clip {
	clip: rect(0px,6px,0px,0px);
	-webkit-animation: clip_stop 1.0s 0.75s forwards;
	-webkit-animation-timing-function: linear; 
	animation: clip_stop 1.0s 0.75s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes clip_stop {
    0%  {clip: rect(0px,6px,0px,0px);} 
	100% {clip: rect(0px,6px,42px,0px);}
}
	
 @keyframes clip_stop {
	0%  {clip: rect(0px,6px,0px,0px);} 
	100% {clip: rect(0px,6px,42px,0px);}
}

#pickup {
	position:absolute;
	float:right;
	width:8px;
	height:120px;
	right:45px;
	top:40px;
	display:block;
	background-color: transparent;
}
	
#pickup_bottom {
	position:relative;
	float:left;
	width:8px;
	height:20px;
	right:0px;
	top:0px;
	display:block;
	background-color: transparent;
	border:1px solid #FFFFFF;
}
	
#pickup_long {
	position:relative;
	float:left;
	width:4px;
	height:70px;
	left:2px;
	top:0px;
	display:block;
	background-color: transparent;
	border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;
}
	
#pickup_head {
	position:relative;
	float:left;
	width:8px;
	height:25px;
	right:0px;
	top:0px;
	display:block;
	background-color: transparent;
	border:1px solid #FFFFFF;
}
	
.start_pickup {
    -webkit-animation: play_pickup 1s forwards;
	-webkit-animation-timing-function: linear; 
	animation: play_pickup 1s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes play_pickup {
    0%   {right:45px; top:40px;} 
	100% { margin-top:-2px; margin-right:20px; transform: rotate(20deg);}
}
	
 @keyframes play_pickup {
    0%   {right:45px; top:40px;} 
	100% { margin-top:-2px; margin-right:20px; transform: rotate(20deg);}
} 	
	
.stop_pickup {
    -webkit-animation: stop_pickup 1s forwards;
	-webkit-animation-timing-function: linear; 
	animation: stop_pickup 1s forwards;
	animation-timing-function: linear;
}
	
@-webkit-keyframes stop_pickup {
    0%   {margin-top:-2px; margin-right:20px; transform: rotate(20deg);} 
	100% { right:45px; top:40px; transform: rotate(0deg);}
}
	
 @keyframes stop_pickup {
    0%   {margin-top:-2px; margin-right:20px; transform: rotate(20deg);} 
	100% { right:45px; top:40px; transform: rotate(0deg);}
} 	

#track_number {
	position:relative;
	float:left;
	height:19px;
	width:auto;
	padding:0px 10px 16px 0px;
	margin:0px;
	font-family: Courier New;
	font-size:1.0em;	
	font-weight:bold;
	background-color:transparent;
	display:inline;
}

#container_controls {
	position:relative;
	float:left;
    width:250px;
	height:40px;
	left:0px;
	margin:0px 0px 0px 0px;
	background-color:transparent;
	z-index:200;
	display:block;
}

#play_btn, #pause_btn, #next_btn, #prev_btn {
	float:left;
	position:relative;
	height:40px;
	width:61px;
	margin:-10px 0px 0px 0px;
	padding:20px 0px 0px 0px;
	background-color:transparent;
	color:#FFFFFF;
	font-family: Courier New;
	font-size:0.8em;
	text-align:center;
	border:none;
	display:inline;
	outline:none;
	cursor:url("../images/target.png"),pointer;
}

.line_audio {
	position:relative;
	float:left;
	width:1px;
	height:20px;
	margin-top:10px;
	display:block;
	background-color:#FFFFFF;
}

#soundbar {
	position:absolute;
	float:right;
	background-color:transparent;
    right:30px;
	bottom:30px;
    width:30px;
	height:15px;
	padding:5px 10px 0px 10px;
	z-index:200;
	display:block;
	border:1px solid #FFFFFF;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari prior 9.0 */
    transform: rotate(180deg); /* Standard syntax */	
}

#soundbarone {
	float:left;
	position:relative;
    margin-right:2px;
    bottom:0px;
    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;}
}

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

#soundbartwo {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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;}
}

/* Standard syntax */
@keyframes barmovetwo {
    50% {height: 6px;}
}
#soundbarthree {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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: 8px;}
}

/* Standard syntax */
@keyframes barmovethree {
    50% {height: 8px;}
}
#soundbarfour {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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: 10px;}
}

/* Standard syntax */
@keyframes barmovefour {
    50% {height: 10px;}
}
#soundbarfive {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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: 10px;}
}

/* Standard syntax */
@keyframes barmovefive {
    50% {height: 10px;}
}

#soundbarsix {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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: 6px;}
}

/* Standard syntax */
@keyframes barmovesix {
    50% {height: 6px;}
}

#soundbarseven {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    height: 4px;
    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: 8px;}
}

/* Standard syntax */
@keyframes barmoveseven {
    50% {height: 8px;}
}

#soundbareight {
	float:left;
    margin-right:2px;
    margin-bottom:0px;
    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: 10px;}
}

/* Standard syntax */
@keyframes barmoveeight {
    50% {height: 10px;}
}

#soundbarnine {
	float:left;
    margin-right: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: 8px;}
}

/* Standard syntax */
@keyframes barmovenine {
    50% {height: 8px;}
}

#soundbarten {
	float:left;
    margin-right:2px;
    height:1px;
    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;}
}

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

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

/* Chrome, Safari, Opera */
@-webkit-keyframes barmoveeleven {
    50% {height: 2px;}
}

/* Standard syntax */
@keyframes barmoveeleven {
    50% {height: 2px;}
}

.paused {
	 animation-play-state: paused;
	 -webkit-animation-play-state: paused;
}
	
.running {
	animation-play-state: running;
	-webkit-animation-play-state: running;
}

/*******************************
GAME 
*******************************/
#container_game {
	position:relative;
	float:left;
	width:250px;
	height:396px;
	font-size:1.0em;	
	top:0px;	
	margin:0px 70px 70px 0px;
	padding:0px;
	-webkit-user-select: none; /* Safari */
	  -ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

#content_game {
	position:absolute;
	float:left;
	width:250px;
	height:250px;
	top:35px;
	font-size:1em;
	margin:0px 0px 70px 0px;
	padding:0px;
	display:block;
}

#start_game, #game_glitch {
	position:absolute;
	float:left;
	height:35px;
	width:110px;
	left:0px;
	top:-10px;
	margin:0px 0px 0px 0px;
	padding:0px 8px 0px 0px;
	box-sizing: border-box;
	color:#FFFFFF;
	font-family: Courier New;
	font-size:0.95em;
	font-weight:bold;
	background-color:transparent;
	border:none;
	outline:none;
	display:inline;
	overflow:hidden;
	cursor:url("../images/target.png"),pointer;
}

#start_game {
	left:-4px !important;
}

#game_glitch {
	z-index:-200;
	top:0px;
}

.glitch {
	position: absolute;
	float:left;
	left:0px;
	top:10px;
	padding:0px;
	font-family: Courier New;
	font-size:0.95em;
	font-weight:bold;
	text-shadow:1px 1px #FFFFFF;
	clip: rect(0px, 110px, 0px, 0px);
  	-webkit-animation: glitch-anim 2s infinite linear alternate-reverse;
	animation: glitch-anim 2s infinite linear alternate-reverse;
}

/* rect (top, right, bottom, left) */ 
@keyframes glitch-anim {
  0%   {clip: rect(0px, 110px, 2px, 0px);}
  10%  {clip: rect(2px, 110px, 6px, 4px);}
  20%  {clip: rect(8px, 110px, 10px, 0px);}
  30%  {clip: rect(2px, 110px, 12px, 10px);}
  40%  {clip: rect(16px, 110px, 18px, 0px);}
  50%  {clip: rect(1px, 110px, 3px, 4px);}
  60%  {clip: rect(5px, 110px, 8px, 0px);}
  70%  {clip: rect(3px, 110px, 15px, 10px);}
  80%  {clip: rect(14px, 110px, 0px, 4px);}
  90%  {clip: rect(9px, 110px, 13px, 0px);}
  100% {clip: rect(0px, 110px, 19px, 0px);}
}	

@-webkit-keyframes glitch-anim {
  0%   {clip: rect(0px, 110px, 2px, 0px);}
  10%  {clip: rect(2px, 110px, 6px, 4px);}
  20%  {clip: rect(8px, 110px, 10px, 0px);}
  30%  {clip: rect(2px, 110px, 12px, 10px);}
  40%  {clip: rect(16px, 110px, 18px, 0px);}
  50%  {clip: rect(1px, 110px, 3px, 4px);}
  60%  {clip: rect(5px, 110px, 8px, 0px);}
  70%  {clip: rect(3px, 110px, 15px, 10px);}
  80%  {clip: rect(14px, 110px, 0px, 4px);}
  90%  {clip: rect(9px, 110px, 13px, 0px);}
  100% {clip: rect(0px, 110px, 19px, 0px);}
}

#game_score {
	position:absolute;
	float:left;
	height:35px;
	width:auto;
	top:-1px;
	left:106px;
	margin:0px;
	padding:0px 0px 0px 0px;
	font-family: Courier New;
	font-size:0.95em;	
	font-weight:bold;
}	

#game_btn_container {
	position:absolute;
	float:left;
	width:250px;
	height:40px;
	top:355px;
	left:0px;
	margin:0px;
	padding:0px;
	display:block;
}

#game_float {
	position:relative;
	float:left;
    width:250px;
	height:40px;
    padding:0px;
	left:0px;
	right:0px;
	z-index:200;
	background-color:transparent;
	cursor:url("../images/crosshair.png"),pointer;
	display:block;
}

#up_btn, #left_btn, #right_btn, #down_btn {
	position:relative;
	float:left;
	height:40px;
	width:61px;
	padding:20px 0px 0px 0px;
	margin:-10px 0px 0px 0px;
	background-color:transparent;
	color:#FFFFFF;
	font-family: Courier New;
	font-size:0.8em;
	text-align:center;
	border:none;
	display:inline;
	outline:none;
	cursor:url("../images/target.png"),pointer;
}

.line_game {
	position:relative;
	float:left;
	width:1px;
	height:20px;
	margin-top:10px;
	display:block;
	background-color:#FFFFFF;
}

/***********************
CORNER BOXES
***********************/
.loader_corner_left_top, .loader_corner_right_top, .loader_corner_right_bottom, .loader_corner_left_bottom {
	position:absolute;
	width:150px;
	height:150px;
	display:block;
}
	
.loader_corner_left_top {
	float:left;
	left:0px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
	
.loader_corner_right_top {
	float:right;
	right:0px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.loader_corner_right_bottom {
	float:right;
	right:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.loader_corner_left_bottom {
	float:left;
	left:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}

.box1, .box2, .box3, .box4 {
	position:absolute;
	width:80px;
	height:80px;
	display:block;
}
	
.box1 {
	float:left;
	left:0px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
	
.box2 {
	float:right;
	right:0px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.box3 {
	float:right;
	right:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.box4 {
	float:left;
	left:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}

.box5, .box6, .box7, .box8 {
	position:absolute;
	width:80px;
	height:10px;
	display:block;
}

.box5 {
	float:left;
	left:0px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
	
.box6 {
	float:right;
	right:0px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.box7 {
	float:right;
	right:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.box8 {
	float:left;
	left:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}

.some_corner_left_top, .some_corner_right_top, .some_corner_right_bottom, .some_corner_left_bottom {
	position:absolute;
	width:250px;
	height:30px;
	display:block;
}

.some_corner_left_top {
	float:left;
	left:0px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
	
.some_corner_right_top {
	float:right;
	right:0px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.some_corner_right_bottom {
	float:right;
	right:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
	
.some_corner_left_bottom {
	float:left;
	left:0px;
	bottom:0px;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
	
/***********************
SO ME NAVIGATION
***********************/
#container_some_mobi {
	display:none;
}

#container_some {
	position:absolute;
	float:left;
	height:100px;
	width:890px;
    left: 70px;
	top: 890px;
	display:block;
	visibility: hidden; 
	border:none;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}
	
.container_some_slideup {
  -webkit-animation: upsome 3s;
  -webkit-animation-fill-mode: forwards;
  animation: upsome 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes upsome {
  0%   {top:calc(100% - 0% + 890px)}
  100% {top:calc(100% - 100% + 890px)}
}

@keyframes upsome {
  0%   {top:calc(100% - 0% + 890px)}
  100% {top:calc(100% - 100% + 890px)}
}

#some_nav {
	position:absolute;
	float:left;
	height:1px;
	width:830px;
    left:30px;
	top:50px;
	display:block;
	border-bottom: 1px dashed #FFFFFF;
	font-family: Courier New;
}
	
#some_nav a {
	color:#FFFFFF;
	cursor:url("../images/target.png"),pointer;
}

#some_fb, #some_in, #some_yt {
	position:absolute;
	display:block;
	width: 30px;
	height: 16px;
    padding-top: 8px;
	padding-bottom: 6px;  
	top:5px;
	font-size:0.9em;
    color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	z-index: 100;
}

#some_tw, #some_tu, #some_mail {
	position:absolute;
	display:block;
	width: 30px;
	height: 16px;
    padding-top: 8px;
	padding-bottom: 6px;  
	top:-30px;
	font-size:0.9em;
    color: #FFFFFF;
	text-decoration: none;
	text-align: center;
	z-index: 100;
}

#some_one_line, #some_two_line, #some_five_line {
	position:absolute;
	float:right;
	display:block;
	width: 15px;
	height: 15px;
	bottom:0px;
	margin-bottom:0px;
	margin-right:0px;
	font-size:0.9em;
    color: #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#some_three_line, #some_four_line, #some_six_line {
	position:absolute;
	float:right;
	display:block;
	width: 15px;
	height: 15px;
	bottom:0px;
	margin-bottom:-15px;
	margin-right:0px;
	font-size:0.9em;
    color: #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#some_line_start {
	position:relative;
	float:left;
	width:1px;
	height:30px;
	top:-15px;
	left:0px;
	border-left: 1px solid #FFFFFF;
}

#some_line_end {
	position:relative;
	float:left;
	width:1px;
	height:30px;
	top:-15px;
	left:830px;
	border-right: 1px solid #FFFFFF;
}

#some_fb, #some_one_line {
	-webkit-animation-name: one; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: one;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes one {
    0% {left: 0%;}
  25% {left: 70%;}
  50% {left: 70%;}
  75% {left: 45%;}
  100% {left: 0%;}
}

@keyframes one {
  0% {left:0%;}
  25% {left:70%;}
  50% {left:70%;}
  75% {left:45%;}
  100% {left:0%;}
}
	
#some_in, #some_two_line {
	-webkit-animation-name: two; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: two;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes two {
  0% {left: 20%;}
  25% {left: 0%;}
  50% {left: 0%;}
  75% {left: 90%;}
  100% {left: 20%;}
}

@keyframes two {
  0% {left: 20%;}
  25% {left: 0%;}
  50% {left: 0%;}
  75% {left: 90%;}
  100% {left: 20%;}
}
	
#some_tw, #some_three_line {
	-webkit-animation-name: three; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: three;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes three {
  0% {left: 80%;}
  25% {left: 40%;}
  50% {left: 20%;}
  75% {left: 20%;}
  100% {left: 80%;}
}

@keyframes four {
  0% {left: 80%;}
  25% {left: 40%;}
  50% {left: 20%;}
  75% {left: 20%;}
  100% {left: 80%;}
}
	
#some_tu, #some_four_line {
	-webkit-animation-name: four; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: four;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes four {
  0% {left: 60%;}
  25% {left: 80%;}
  50% {left: 80%;}
  75% {left: 40%;}
  100% {left: 60%;}
}

@keyframes four {
  0% {left: 60%;}
  25% {left: 80%;}
  50% {left: 80%;}
  75% {left: 40%;}
  100% {left: 60%;}
}
	
#some_yt, #some_five_line {
	-webkit-animation-name: five; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: five;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes five {
  0% {left: 95%;}
  25% {left: 60%;}
  50% {left: 60%;}
  75% {left: 70%;}
  100% {left: 95%;}
}

@keyframes five {
  0% {left: 95%;}
  25% {left: 60%;}
  50% {left: 60%;}
  75% {left: 70%;}
  100% {left: 95%;}
}

#some_mail, #some_six_line {
	-webkit-animation-name: six; 
    -webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
    animation-name: six;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes six {
  0% {left: 85%;}
  25% {left: 25%;}
  50% {left: 35%;}
  75% {left: 35%;}
  100% {left: 85%;}
}

@keyframes six {
  0% {left: 85%;}
  25% {left: 25%;}
  50% {left: 35%;}
  75% {left: 35%;}
  100% {left: 85%;}
}

/*****************************
IPAD
*****************************/
@media screen and (max-width: 1200px) {
	
/*
body {
	overflow-y:visible !important;
}
*/ 
#container_page {
	width:640px;
}
	
#container_rio {
	height:396px;
}

#content_book_rio {
	margin-bottom:70px;
}
	
#container_scream {
	position:absolute;
	float:left;
	width:250px;
	height:40px;
	left:0px;
	bottom:0px;
	margin:69px 0px 0px 0px;
	display:block;	
	background-color:transparent;
	outline:none;
	padding:0px;
	z-index:200;
}
	
.link_shake {
  width:300px;
  height:100px;
  display:block;	
  -webkit-animation: shake 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation: shake 0.5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@-webkit-keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#scream_btn {
	position:relative;
	float:left;
	width:240px;
	height:40px;
	margin:-10px 0px 0px -10px;
	padding:20px 0px 0px 30px;
	text-align:left;
	display:block;
	outline:none;
	border:none;	
	color:#FFFFFF;
	font-family: Courier New;
	font-size:0.8em;
	background-color:transparent;
	cursor:url("../images/target.png"),pointer;
}
	
.some_corner_left_top, .some_corner_right_top, .some_corner_right_bottom, .some_corner_left_bottom {
	display:none;
}

/**************************
SO ME NAVIGATION IPAD
**************************/
#container_some {
	display:none;
}
		
#container_some_mobi {
	position:fixed;
	float:right;
	height:calc(100% - 70px);
	width:100px;
    left:auto;
	right:70px;
	top:70px;
	display:block;
	visibility: hidden; 
	border:none;
	z-index:200;
	-webkit-user-select: none; /* Safari */
	  -ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}
	
.container_some_ipad_slideup {
  -webkit-animation: upsomefirst 3s;
  -webkit-animation-fill-mode: forwards;
  animation: upsomefirst 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes upsomefirst {
  0%   {top:calc(100% - 0% )}
  100% {top:calc(100% - 100% + 70px)}
}

@keyframes upsomefirst {
  0%   {top:calc(100% - 0%)}
  100% {top:calc(100% - 100% + 70px)}
}
	
#some_nav_mobi {
	position:absolute;
	float:right;
	height:calc(100%);
	width:45px;
	left:auto;
	right:0px;
	top:0px;
	display:block;
	border-right:1px dashed #FFFFFF;
	border-bottom:none;
	font-family:Courier New;
}
	
#some_nav_mobi a {
	color:#FFFFFF;
	cursor:url("../images/target.png"),pointer;
}
	
#some_line_start_mobi {
	position:absolute;
	float:right;
	width:30px;
	height:1px;
	top:0px;
	right:-15px;
	left:auto;
	border-top:1px solid #FFFFFF;
	border-left:none;
}

#some_line_end_mobi {
	display:none;
}

#some_fb_mobi, #some_in_mobi, #some_yt_mobi {
	position:absolute;
	display:block;
	margin-left:0px;
	width:30px;
	height:16px;
    padding-top:8px;
	padding-bottom:6px;  
	top:15px;
	font-size:0.9em;
    color:#FFFFFF;
	text-decoration:none;
	text-align:center;
}

#some_tw_mobi, #some_tu_mobi, #some_mail_mobi {
	position:absolute;
	display:block;
	width:30px;
	height:16px;
    padding-top:8px;
	padding-bottom:6px;  
	top:15px;
	font-size:0.9em;
    color:#FFFFFF;
	text-decoration:none;
	text-align:center;
}

#some_one_line_mobi, #some_two_line_mobi, #some_five_line_mobi {
	position:absolute;
	float:right;
	display:block;
	width:15px;
	height:30px;
	right:0px;
	margin-top:15px;
	margin-right:-15px;
	font-size:0.9em;
    color: #FFFFFF;
	border-top:1px solid #FFFFFF;
	border-right:none;
}

#some_three_line_mobi, #some_four_line_mobi, #some_six_line_mobi {
	position:absolute;
	float:right;
	display:block;
	width:15px;
	height:30px;
	right:0px;
	margin-right:0px;
	margin-top:15px;
	font-size:0.9em;
    color:#FFFFFF;
	border-top:1px solid #FFFFFF;
	border-right:none;
}

#some_fb_mobi, #some_one_line_mobi {
	-webkit-animation-name: one_mobi;
    -webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
    animation-name: one_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes one_mobi {
  0%   {top: 0%;}
  25%  {top: 80%;}
  50%  {top: 80%;}
  75%  {top: 25%;}
  100% {top: 0%;}
}
	
@keyframes one_mobi {
  0% {top: 0%;}
  25% {top: 80%;}
  50% {top: 80%; }
  75% {top: 25%;}
  100% {top: 0%;}
}
	
#some_in_mobi, #some_two_line_mobi {
	-webkit-animation-name: two_mobi; 
    -webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
    animation-name: two_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes two_mobi {
  0% {top: 20%;}
  25% {top: 0%;}
  50% {top: 60%;}
  75% {top: 60%;}
  100% {top: 20%;}
}

@keyframes two_mobi {
  0% {top: 20%;}
  25% {top: 0%;}
  50% {top: 60%;}
  75% {top: 60%;}
  100% {top: 20%;}
}
	
#some_tw_mobi, #some_three_line_mobi {
	-webkit-animation-name: three_mobi; 
    -webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
    animation-name: three_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes three_mobi {
  0% {top: 80%;}
  25% {top: 70%;}
  50% {top: 70%;}
  75% {top: 20%;}
  100% {top: 80%;}
}

@keyframes four_mobi {
  0% {top: 80%;}
  25% {top: 70%;}
  50% {top: 70%;}
  75% {top: 20%;}
  100% {top: 80%;}
}
	
#some_tu_mobi, #some_four_line_mobi {
	-webkit-animation-name: four_mobi;
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: four_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes four_mobi {
  0% {top: 60%;}
  25% {top: 90%;}
  50% {top: 10%;}
  75% {top: 10%;}
  100% {top: 60%;}
}

@keyframes four_mobi {
  0% {top: 60%;}
  25% {top: 90%;}
  50% {top: 10%;}
  75% {top: 10%;}
  100% {top: 60%;}
}
	
#some_yt_mobi, #some_five_line_mobi {
	-webkit-animation-name: five_mobi; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: five_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes five_mobi {
  0% {top: 30%;}
  25% {top: calc(97% - 30px);}
  50% {top: calc(97% - 30px);}
  75% {top: 35%;}
  100% {top: 30%;}
}

@keyframes five_mobi {
  0% {top: 30%;left:auto;}
  25% {top: calc(97% - 30px);}
  50% {top: calc(97% - 30px);}
  75% {top: 35%;}
  100% {top: 30%;}
}

#some_mail_mobi, #some_six_line_mobi {
	-webkit-animation-name: six_mobi; 
    -webkit-animation-duration: 20s; 
	-webkit-animation-iteration-count: infinite;
    animation-name: six_mobi;
    animation-duration: 20s;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes six_mobi {
  0% {top: calc(100% - 30px);}
  25% {top: 40%;}
  50% {top: 50%;}
  75% {top: 50%;}
  100% {top: calc(100% - 30px);}
}

@keyframes six_mobi {
  0% {top: calc(100% - 30px);}
  25% {top: 40%;}
  50% {top: 50%;}
  75% {top: 50%;}
  100% {top: calc(100% - 30px);}
}
	
}

/*****************************
MOBILE
*****************************/
@media screen and (max-width: 760px) {
	
#container_page {
	width:320px;
	top:20px;
	left:10px;
}
	
.page_slideup_second {
  -webkit-animation: upsecond 3s;
  -webkit-animation-fill-mode: forwards;
  animation: upsecond 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes upsecond {
  0%   {top:calc(100% - 0%);}
  100% {top:calc(100% - 100% + 20px);}
}

@keyframes upsecond {
  0%   {top:calc(100% - 0%);}
  100% {top:calc(100% - 100% + 20px);}
}

#pageload_content_box { 
  height: 300px;
  width: 300px;
  top:calc(50% - 150px);
  left:calc(50% - 150px);
 }
	
#pageload_header {
	font-size:1.2em;
	padding: 0px 0px 10px 0px;
}

#pageload_text {
  width:240px;
  height:240px;
  font-size:1.0em;
  font-weight:normal;
  line-height:1.4em;
}
	
#loadbar_container {
	width:240px;
	margin-left:-120px;
	bottom:30px;
}
	
#loadbar {
    width: 0px;
    height: 1px;
    background: #FFFFFF;
    position: fixed;
	float:left;
	margin-bottom:2px;
	display:block;
    -webkit-animation: startLoad 3s; 
	-webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: forwards; 
	-webkit-animation-play-state: paused;
    animation: startLoad 3s;   
	animation-delay: 0s;
    animation-fill-mode: forwards;
	animation-play-state: paused;
}

@-webkit-keyframes startLoad {
    0% {width: 0px;}
    100% {width: 240px;}
}

@keyframes startLoad {
     0% {width: 0px;}
    100% {width: 240px;}
}

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

@keyframes executeLoad {
     0% {width: 0px;}
    100% {width: 120px;}
}
	
#loadbutton_container {
	width:240px;
	margin-left:-120px;
}
	
.loader_corner_left_top, .loader_corner_right_top, .loader_corner_right_bottom, .loader_corner_left_bottom {
	width:100px;
	height:100px;
}
	
#loadbutton {
	width:240px;
	margin-left:-120px;
}
	
#container_some_mobi {
	height:calc(100% - 40px);
	width:50px;
	right:10px;
	top: 20px;
}
	
#some_line_end_mobi {
	position:absolute;
	float:right;
	width:30px;
	height:1px;
	bottom:0px;
	right:-15px;
	top:auto;
	left:auto;
	border-bottom: 1px solid #FFFFFF;
	border-right:none;
	display:block;
}

.container_some_phone_slideup {
  -webkit-animation: upsomesecond 3s;
  -webkit-animation-fill-mode: forwards;
  animation: upsomesecond 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes upsomesecond {
  0%   {top:calc(100% - 0% );}
  100% {top:calc(100% - 100% + 20px);}
}

@keyframes upsomesecond {
  0%   {top:calc(100% - 0%);}
  100% {top:calc(100% - 100% + 20px);}
}
	
}