body {
	color:#808080;
	font-family:"HelveticaNeue", "Helvetica Neue",Helvetica,arial,verdana,sans-serif;
	height:100%;
	margin:0; padding:0;
	width:auto;
	letter-spacing:0.00em;
	text-rendering: optimizeLegibility;
	background: #fdfdfd url(/images/WhiteNoise.png?);
	}
	body #bodycontainer p {
		opacity:1;
		-webkit-transition: all 0.40s ease-in;
		background-size: 400% 400% !important;
		animation: gradient 18s ease infinite;
		animation-play-state: running;
		animation-direction: alternate;
	  }
	  
	  @keyframes gradient {
			  0% { background-position: 0% 0%; }
			 25% { background-position: 100% 100%; }
			 50% { background-position: 50% 50%; }
			 75% { background-position: 100% 50%; }
			100% { background-position: 0% 100%; }
		}
		body #bodycontainer p:hover {
			animation-play-state: paused;
	}

	body.loading #bodycontainer p {
		opacity:0;
		-webkit-transform-style: preserve-3d;
/*		-webkit-transform: translateY(0.2em) scaleX(0.97); */
		padding: 10vh 10vw;
		}
	body #bodycontainer p.intro   { -webkit-transition-delay: 0s; }
	body #bodycontainer p.connect { -webkit-transition-delay: 0.9s;}

	body #bodycontainer p.background 	  { -webkit-transition-delay: 0.3s; 
		background: 
			linear-gradient(217deg, #69CAE6, rgba(255,255,255,0.3) 90%),
            linear-gradient(127deg, #206A91, rgba(255,255,255,0.3) 30%),
            linear-gradient(336deg, #206A91, rgba(255,255,255,0.3) 30%);
		color:rgba(40,40,40,0.6);
		}
	body #bodycontainer p.experience 	  { -webkit-transition-delay: 0.6s; 
		background: 
			linear-gradient(217deg, rgba( 32, 32,32,0.8), rgba(64,64,64,0.6) 60%),
			linear-gradient(127deg, rgba( 32, 32,32,0.8), rgba(255,255,255,0.3) 30%),
			linear-gradient(336deg, rgba( 32, 32,32,0.8), rgba(96,96,96,0.3) 30%);
		color:rgba(210,210,210,0.6);
		}
		body #bodycontainer p.experience strong {color: rgba(240,240,240,0.6);
			;} 	
	body #bodycontainer p.intro, body #bodycontainer p.connect {
		background: 
			linear-gradient(217deg, rgba( 255,255,255,0.9), rgba(230,230,230,0.6) 60%),
			linear-gradient(127deg, rgba( 255,255,255,0.9), rgba(255,255,255,0.3) 30%);
	}

	@media screen and (-webkit-min-device-pixel-ratio:2) {
		body {
			background-size: 80px !important;
		}	
	}

a, a:link {
	white-space: nowrap;
	color:#206A91;
	}
	p a {
		text-decoration:none;
		padding:0.06em;
		margin:-0.06em;
		border-bottom: 0.05em solid  #206a91db;
	}
	p:hover a {
		-webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
	}
	a:hover, a.selected {
		color:#fff !important;
		background:#206A91;
/*		text-shadow: rgba(0,0,0,0.4) 0 -1px 0.1em; */	
	}
	p.experience a {
		color:#69CAE6; 
		border-bottom-color: #69CAE6;
	}
	p a:visited { border-color:white }
	 	
p { 
	margin-top:1em;
}

strong {
	color:rgba( 64, 64,64,0.8);
	}

#bodycontainer {
	background: transparent;
	font-size:1.61em;
	line-height:1.75em;
	
	width:auto;
	display:block;
	margin:0;
	padding:0;
	text-align:justify;
	min-height:110%;
	}
	#bodycontainer p {
		-webkit-transition: background-color 0.4s ease-in-out;
		-moz-transition: background-color 0.3s ease-in-out;
		margin:0;
		padding: 1.6em 3.2em;
		background: rgba(255,255,255,0.8);
		padding: 21vh 21vw;
	}

	#bodycontainer p:hover { 
		-webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		background: rgba(255,255,255,0.9);
	}

.logo a {
	display:block;
	padding:0 !important;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	}
	#logo.logo a {
		width:100px; height:100px; 

		margin:1.6em auto -4.8em auto; 
		background: no-repeat scroll left top;
		}
	#avatar.logo a {
		width:14vw; height:14vw; 
		float:right; 
		margin:5vh 0 0 3vw; 
		background: no-repeat scroll 64% top;
		border:none;
		position: fixed;
		border-radius: 50%;
		background-image: url('https://www.gravatar.com/avatar/09b292377ddbffd1ad40256ff8739f14?s=72');	
		}
		#avatar.logo a:hover {
			background-size: 172% 172% !important;
	}
	
	@media screen and (-webkit-max-device-pixel-ratio:1) {
		#logo.logo a {
			background-image: url('/images/Logo-square-100.png');
		}
		#avatar.logo a {
			background-color: rgb(255,255,255,0.8);
			background-image: url('https://storage.googleapis.com/static.leenders.info/Bas-Leenders.png');
		}	
		.logo a {
			background-size: cover;
		}in
	}	
	
	@media screen and (-webkit-min-device-pixel-ratio:2) {
		#logo.logo a {
			background-image: url('/images/Logo-square-200.png');
		}
		#avatar.logo a {
			background-color: rgb(255,255,255,0.8);
			background-image: url('https://storage.googleapis.com/static.leenders.info/Bas-Leenders.png');
		}	
		.logo a {
			background-size: cover !important;
		}
	}


#disclaimer, 
#menu { 
	padding:1.6em 3.2em; 
	clear:both; 
	color:#B9BABB;
	background-color:#ededed;
	background: rgba(238,238,238,0.9);
	border-top:1px solid #ececec;
	}
	body #disclaimer, body #menu {
		opacity:1;
		margin-top: 0;
		-webkit-transition: 0.90s 0.6s ease-out;
	}	
	body.loading #disclaimer {
		opacity: 0;
	}
	body.loading #menu {
		margin-top: -100px;
	}
	
#menu { 
	color:#B9BABB;
	background-color:#ededed;
	border-top:none;
	border-bottom:1px solid #ececec;
	}
	#disclaimer a, #disclaimer a:link, #menu a, #menu a:link {
		background:#e2e3e5 !important;
		color:#A9AAAB;
		border: none;
		}
		#disclaimer a:hover, #menu a:hover {
			background:#ccc !important;
			color:#fff;
	}