@media screen{
	
/* Reset CSS */

	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
	a { text-decoration:none;color: #fff; }
	a:hover { text-decoration: none; }
	a:focus { text-decoration: none; }
	table { border-spacing: 0; }
	fieldset,img { border: 0; }
	address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal;font-style: normal; }
	strong { font-weight: bold; }
	ol,ul, li { list-style: none;margin:0;padding:0; }
	caption,th { text-align: left; }
	q:before,q:after { content:''; }
	abbr,acronym { border: 0; }
	h1,h2,h3,h4,h5,h6 { font-weight:normal; font-size:100%; margin:0; padding:0; color:#fff; color:rgba(255,255,255,0.8); }

/* CUSTARD */

	body { 
		font-family:"Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:0.868em;
		background-color:#f1f1f1;
		color:#888;
		font-weight:400;
		cursor: url(imgs/cursor.png), auto;
	}
	
	::selection { background:#c0c0c0; color:#000; }
	::-moz-selection { background:#c0c0c0; color:#000; }
	
	h1 { letter-spacing:-0.055em; font-weight:300; font-size:3.7em; color:#444; }
	p { letter-spacing:-0.045em; font-weight:300; font-size:2.8em; color:#aaa; padding:0.1em 0; }
	.after { letter-spacing:-0.014em; font-weight:300; font-size:0.96em; padding:3.0em 0 1.3em 0; line-height:180%; }
	.cour { 
		font-family:"Roboto Mono", "Courier Sans", Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		font-size:150%; margin-left:24px; margin-right:24px; font-weight:300; color:#000;
	}
	.section { padding:90px 140px; }
	.explo { font-family:"Titillium Web", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400; font-size: 90%; }

	#sidebar {
		font-family:"Titillium Web", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
		left:0px;
		bottom:0px;
		width:100%; 
		position:fixed;
		height:150px;
		padding:25px 0;
		background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
		background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
		z-index:9999;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		transform-style:preserve-3d;
		letter-spacing: -0.02em;
		line-height:10px;
	}
	
	#toplogo { width:100px; left:32px; top:22px; position:fixed; z-index:9999; }
	.vt { font-family:"Titillium Web", "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 
		top:228px; left:-42px; position:absolute; z-index:9999; 
		-ms-transform:rotate(90deg);
 		-moz-transform:rotate(90deg);
 		-webkit-transform:rotate(90deg);
		-o-transform:rotate(90deg);
	}
	
	#navi { bottom:32px; left:32px; position:absolute; }
	#right { bottom:32px; right:28px; text-align:right; padding: 10px 20px; position:absolute; }
	
	#navi li { float:left; position:relative; }
	#navi li a { display:block; position:relative; }
	#navi li.active a { background:rgba(255,255,255, 0.8); color:#2ab9ee; }
	
	#navi > div > ul > li { text-align:center; }
	#navi > div > ul > li > a { padding:10px 13px; width:auto; }

	#navi ul li:hover {  }
	#navi ul li:hover > a {	background:rgba(170,170,170, 1); animation-name: def; animation-duration: 0.25s; color:rgb(255, 255, 255); }
	#navi a { color:rgb(102, 102, 102); }
		
}

/* ANIMATIONS */

@keyframes def {
    0%   { background-color: rgba(255,255,255, 1); color:rgb(102, 102, 102); }
    100% { background-color: rgba(170,170,170, 1); color:rgb(255, 255, 255); }
}

@media screen and (max-width: 1026px){ h1 { font-size:3em; } }
@media screen and (max-width: 850px) { 
	h1 { font-size:2.5em; } 
	.section { padding:90px 45px; } 
	#right { display:none; } 
	.vt { top:10px; left:0; position:relative; 
		-ms-transform:rotate(0deg);
 		-moz-transform:rotate(0deg);
 		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
	 }
}
@media screen and (max-width: 700px) { 
	h1 { font-size:1.7em; } 
	.section { padding:90px 45px; } 
	#right { display:none; }
	.vt { top:10px; left:0; position:relative; 
		-ms-transform:rotate(0deg);
 		-moz-transform:rotate(0deg);
 		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		font-size:90%;
	 }
}
@media screen and (max-width: 520px) { 
	h1 { font-size:1.5em; } 
	.section { padding:100px 45px; }
	.after { font-size:0.88em; } 
	#right { display:none; } 
	.vt { top:0; left:0; position:relative; 
		-ms-transform:rotate(0deg);
 		-moz-transform:rotate(0deg);
 		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		font-size:80%;
	 }
	#sidebar { display:none; }
}
@media screen and (max-width: 370px) { 
	h1 { font-size:1.3em; } 
	.section { padding:100px 45px; }
	.after { font-size:0.70em; } 
	#right { display:none; } 
	.vt { top:0; left:0; position:relative; 
		-ms-transform:rotate(0deg);
 		-moz-transform:rotate(0deg);
 		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		font-size:70%;
	 }
	#sidebar { display:none; }
}
@media screen and (max-height: 400px) {
	h1 { font-size:1.3em; } 
	.section { padding:20px 45px; }
	.after { font-size:0.70em; padding:2.0em 0 0.4em 0; } 
	#toplogo { display:none; }
	.vt { top:0; left:0; position:relative; 
		-ms-transform:rotate(0deg);
 		-moz-transform:rotate(0deg);
 		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		font-size:70%;
	 }
	#right { display:none; }
	#sidebar { height:100px; } 
	 
}

@media print
{
	body { display: none; font-family: "Segoe UI", "Segoe", "Lucida Sans", Helvetica, Arial, Verdana, sans-serif; }
	.vt { display: none; }
	#right { display: none; }
	.section { display: none; }
	#sidebar { display: none; }
}