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



		
	html, body
{
    height: 100%;
	width:100%;
}
#randomImage{height:100%; width:100%;padding:0px;margin:0px;}
#box {
    background-color:#000000;
    text-align: center;
    padding-top: 12px;
    width: 600px;
    height: 350px;
}

#banner{
	display:block;
	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
	height:60px; 
	color:blue;
	/*padding-right:100px;
	/*width:95%;*/ 
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:20px;
	
	}
	
#banner2{
	display:block;
	
	height:60px; 
	/*padding-right:100px;
	/*width:95%;*/ 
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed"
, Helvetica, Arial, sans-serif;
	font-size:20px;
	width:100%;
	letter-spacing:100px;
	background:none; 
	position:fixed; 
	z-index:10000
	
	}

	#banner3{
		display:block;
		
		height:60px; 
		/*padding-right:100px;
		/*width:95%;*/ 
		text-align:center;
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed"
	, Helvetica, Arial, sans-serif;
		font-size:20px;
		width:100%;
		letter-spacing:100px;
		background:none; 
		position:fixed; 
		z-index:0000
		
		}	
	
#banner2 a {text-decoration:none;
		color:rgba(0,0,255,1.00);
}
	
.menu-img{
	display: block;
	position: inherit;
	height: 150px;
	border: solid lime 2px;
	margin:2px;
	float:left; }	

.pp, .oo, .ll{
	display:inline;
	font-size:36px;
	color:rgba(0,0,255,1.00);
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	letter-spacing: normal;
}


.O a{text-decoration:none;
color:rgba(0,0,0,1.00);
}
.O a:hover{
cursor:url(beeld/cursor/cursorclick.cur)64 30, progress !important;

}

.P a:hover{
cursor:url(beeld/cursor/cursorclick.cur)64 30, progress !important;

}

.pp a:hover:after{
	content:"P";
}

.pp a:hover span {display:none}
.oo a:hover span {display:none}
.ll a:hover span {display:none}

.pp span{background:none}
.oo span{background:none}
.ll span{background:none}

.oo a:hover:after{content:"O";
	}

.ll a:hover:after{
	content:"L";
}

#navl{width:300px; 
top:30%; 
left:0;
position:absolute;
color:transparent;}

#rechts{background:url(beeld/pointright/rightGREENsmall.png); }
#links{background:url(beeld/pointright/leftGREENsmall.png); }

#links, #rechts{
width:200px;
height:260px; 
top:30%; 
right:0;
position:absolute;
color:transparent;
}
#links a, #rechts a{
	color:transparent;}

#banner{
	display:block;
	-webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
	height:60px; 
	/*padding-right:100px;
	/*width:95%;*/ 
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:20px;
	
	}
	
#cellP, #cellO, #cellL{
	display:inline;
	font-size:36px;
	color:rgba(0,0,255,1.00);
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}

.video2{
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	transform:rotate(-20deg);
	transform origin:bottom left;
	z-index:-1;
	margin:10px;
	}
	
	.video3{
	-moz-transform:scale(0.6) ;
	-webkit-transform:scale(0.6) ;
	transform:scale(0.6) 
	}
	
.text a{text-decoration:none;
color:#00FF00;
}

.text a:hover{text-decoration:line-through;
;
}

.text a:visited{text-decoration:none;
color:#00FF00;
}

.noline{
    text-decoration:line-through;
	color:rgba(0,20,255,1.00);
	text-transform:lowercase;
}
.hd {
  margin: 50px auto;
  width: 500px;
  height: 200px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 90;
  text-stroke: 5px black;
  color: transparent;
  font-size: 180px;
  font-style: italic;
  letter-spacing: -10px;

 
  
}

.hd-click {
	text-shadow:rgba(0,0,0,1.00);
    background: linear-gradient(
    to bottom,  
    transparent 0%,
    transparent 49%,
    black 50%,
    black 100%
  );
   background-size: 100% 300%;
  -webkit-background-clip: text;
  transition: background .05s;
  background-position: 100% 100%;
}


.text{
	
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size:30px;
	color:rgba(0,255,0,1.00);
	display:none;
	width:300px;
	z-index:1;}
	
span{background:white;
margin-top:-60px;
z-index:1}

 #container {
	height:60%;
	width: 100%;
 	position: relative
	;
		}
		

		
img, iframe{display:none;
position:relative;}

#nav>img {display:block}
#nav>img a{display:block}
#nav{position:fixed;
left:0;
width:100px;
top:30%;
}
#nav a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.image-wrapper {
	position: absolute;
    width:auto;
	font-size:60px;
	padding:0px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	z-index:999;
		}

.image-wrapper:hover img{
    display: block;}

.hidden>img {
    display:none;
}

.visible>img {
    display:block;
}

.hidden>span {
    display:none;
}

.visible>span {
    display:block;
}

.hidden>iframe {
    display:none;
}

.visible>iframe {
    display:block;
}


	
.image-wrapper:hover iframe{
    display: block;}
	
.image-wrapper:hover .text{
  	display: block;}
	
.text{background:white}	
.example1 a {
	-webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: black;
  color:white;
 -webkit-text-decoration-line: underline  !important;}
 
.subtitle{
	position:relative;
	pointer-events: none;
	z-index: 1000;
	width: 100%;
	margin: 0px;
} 

.example1:hover img {
	display:block;}

.example1:hover .text {
	display:block;}

.example1 {
  height: 55px;	
overflow: hidden;
  clear:both;
 position: relative;
  width:auto;
  bottom:0;
   -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
	
;
 }
	
.example1 h3 {
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: black;
     -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  font-family: "Arial Rounded MT Bold";
  color:white;
 position: relative;
  float:right;
 width: auto;
  margin-top:10px;
 text-align: left;
  white-space:nowrap;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);	
 transform:translateX(-100%);
 /* Apply animation to this element */	
 -moz-animation: example1 300s linear  infinite ;
 -webkit-animation: example1 300s linear  infinite ;
 animation: example1 300s linear infinite ;
}

.example1 h4 {
 -webkit-text-stroke-width: .5px;
 -webkit-text-stroke-color: black;
 font-family: "Arial Rounded MT Bold";
 color:white;
 position: relative;
 float:right;
 width: auto;
  margin:0;
  font-size:24px;
 line-height: 40px;
 text-align: left;
  white-space:nowrap;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);	
 transform:translateX(-100%);
 /* Apply animation to this element */	
 -moz-animation: example1 200s linear  infinite ;
 -webkit-animation: example1 200s linear  infinite ;
 animation: example1 200s linear infinite ;
}

.example1 h5 {
 -webkit-text-stroke-width: .8px;
 -webkit-text-stroke-color: black;
 font-family: "Arial Rounded MT Bold";
 color:white;
 position: relative;
 float:right;
 width: auto;
  margin:0;
  font-size:34px;
 line-height: 40px;
 text-align: left;
  white-space:nowrap;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);	
 transform:translateX(-100%);
 /* Apply animation to this element */	
 -moz-animation: example1 300s linear  infinite ;
 -webkit-animation: example1 300s linear  infinite ;
 animation: example1 300s linear infinite ;
}

.example1 h6 {
	-webkit-text-stroke-width: .8px;
	-webkit-text-stroke-color: black;
	font-family: "Arial Rounded MT Bold";
	color:white;
	position: relative;
	float:right;
	width: auto;
	 margin:0;
	 font-size:34px;
	line-height: 40px;
	text-align: left;
	 white-space:nowrap;
   }

.odyssee{
	/* Starting position */
	-moz-transform:translateX(-100%);
	-webkit-transform:translateX(-100%);	
	transform:translateX(-100%);
	/* Apply animation to this element */	
	-moz-animation: example1 600s linear  infinite ;
	-webkit-animation: example1 600s linear  infinite ;
	animation: example1 600s linear infinite ;}

.example1 h4 a:hover{
	cursor:url(beeld/cursor/cursorclick.cur), progress !important}
	
	
	.example1 h3 a:hover{
	cursor:url(beeld/cursor/cursorclick.cur), progress !important}
	
#letters {
	width:100%;
	font-size:20px;
	height:600px;
	border:double;
	border-color:#C4292B;
	position:inherit; 
	float:right;
	padding: 50px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}