@font-face {
    font-family: "BebasNeueRegular";
    font-weight: normal;
    src: url("fonts/BebasNeue-webfont.woff") format("woff"), url("fonts/BebasNeue-webfont.ttf") format("truetype"), url("fonts/BebasNeue-webfont.svg") format("svg");
}
@font-face {
  font-family: "Oswald";
  font-weight: normal;
  src: url("fonts/oswlad.woff") format('woff');
}
body {
	background:url(img/space.jpg);
	background-attachment: fixed;
	background-size:cover;
	background-repeat:no-repeat;
	margin:0;
	color:white;
	text-shadow:0px 0px 5px #000;
	}
	body .chrome {
		text-shadow:1px 1px 1px #000;
		}
ul, li, a, span, em, strong, b, h1, h2, h3, h4, h5, h6, p, select, input, textarea {
	list-style-type:none;
	padding:0;
	margin:0;
	font-family:Agency FB;
	font-weight:bold;
	}
div {
	font-family:Agency FB;
	font-weight:bold;
	}
img, a {border:none;}
li, a{
		-webkit-transition:all 0.3s linear;
		-moz-transition:all 0.3s linear;
		-o-transition:all 0.3s linear;
		transition:all 0.3s linear;
		}
a {text-decoration:none;outline:none;}
h1 {padding:26px 30px;line-height:0}
h2 {text-align:center;font-size:40px;
background:url(img/geek.png) no-repeat 40px top;
padding:20px 20px 130px 225px;}
#main p.home {
	position:relative;
	width:545px;
	margin:-100px 0 0 185px;
	}#main p.home a, #main p.margin a {
		cursor:pointer;
		}
.dotted {background:url(deco/dotted.png) repeat-x left bottom;}
.dotted-up {background:url(deco/dotted.png) repeat-x left top;}
.margin {margin:7px 0;}
.fs {font-size:18px;line-height:22px;}
h6 {font-size:14px;margin-top:7px;}
em {font-size:12px;}
h4, p, span{padding:4px 10px 4px 65px;}
h3 {padding:4px 55px;text-align:center;background:rgba(0,0,0,.7);font-size:26px;}
p span {padding:0;font-size:18px;text-decoration:underline;width:80px;display:inline-block;}
h4 {font-size:24px;}
.line {line-height:14px;}
.hidden {display:none;}
#wrapper {
	width:100%;
	overflow:hidden;
	min-height:700px;
	}
#main { 
	width:800px;
	height:630px;
	margin:30px auto;
	position:relative;
	}
.content .prev {
	text-decoration:underline;
	}
/*############## REAAAAAA ################*/
ul.rea {
	margin:20px 0 0 0;
	padding:4px 0px 4px 65px;
	}
ul.rea img {
	opacity:1;
	}
	ul.rea li:hover img {
		opacity:0.6;
		}
		ul.rea li {
		display:inline-block;
		margin: 0 30px 10px 0;
		padding:3px;
		letter-spacing:1.2px;
		background:rgba(0, 0, 0, 0.7);
		}ul.rea li:hover {
			background:rgba(45,199,230,.8);
			}
		ul.rea li a {
			display:block;
			background:url(img/link.png) no-repeat center center rgba(255,255,255,1);
			box-shadow:0px 0px 10px #000;
			cursor:pointer;
			height: 113px;
			width: 200px;
			}
.infos {display:none;}
.infos-rea h5 {padding:0;font-size: 24px;margin-bottom:7px;}
.infos-rea em {padding:0;font-size: 16px;margin-bottom:7px;display:block;}
.infos-rea p {padding:0;margin-bottom: 1.5em}
.infos-rea p a{padding:0;color:#fff;text-decoration:underline;}
#slideshowHolder {margin:10px auto;}
h4.rea-title {margin-top:15px;}
/*############## Fin REAA ################*/

/*############## NAAAAAAV ################*/
#nav2 {
	position:relative;
	top:200px;
	width:75px;
	z-index:1000;
	}
	#nav2 a {
		cursor:pointer;
		display:inline-block;
		padding:3px 7px 4px;
		background:#fff;
		color:#2DC7E6;
		text-shadow:none;
		width:110px;
		text-align:center;
		border:1px solid #fff;
		box-shadow:0 0 8px #2DC7E6 inset, 0 0 8px #2DC7E6;
		}
	#nav2 a {position:relative;margin-bottom:7px;}
		#nav2 a {
			border-radius:10px 0 0 10px;
			}
	#nav2 a:hover, #nav2 a.active {
		background:#2DC7E6;
		color:#000;
		border:1px solid #2DC7E6;
		box-shadow:0 0 8px #000 inset, 0 0 8px #000;
		}
		#nav2 a:hover, #nav2 a.active {
			padding-right:30px;
			left:-93px;
			}
.next {
	left:759px;
	}
.prev {
	left:-70px;
	}
#reponse {
	text-align:center;
	font-family:Agency FB;
	font-weight:bold;
	}
/*############### FIN NAAAAAAV #################*/

/*############### visible-invisible ############*/
.visible-invisible, .visible-invisible-rea {
	position:relative;
	height:580px;
	margin-bottom:54px;
	}
.visible-invisible-rea {overflow:auto;}
	.hiden {
		padding:20px 20px 5px 65px;
		}
	.up, .up2 {
		padding:12px 5px;
		text-align:center;
		width:100%;
		display:inline-block;
		cursor:pointer;
		}
	.up:hover, .up2:hover {background:rgba(0,0,0,.6);border-radius:25px;}
.removed {opacity:0;}
.ft-title {
	width:390px;
	padding:5px;
	opacity:0.5;
	}
/*########### FIN visible-invisible ############*/

/*########### SKILLZZZZZZZZZZZZZZZZ ############*/
ul.skill {margin-top:1.5em;padding:0 0 5px 65px;margin:10px 0 0;}
	ul.skill li {
		display:inline-block;
		margin:0 15px 7px 0;
		padding:2px;
		text-align:center;
		width:120px;
		box-shadow:0px 0px 5px #000;
		border-radius: 20px;
		background:rgba(255,255,255,.5);
		}
	ul.skill li img {width:120px;height:75px;}
	ul.skill li p {margin-bottom:10px;font-size:14px;padding:0;}
	ul.skill li p strong {display:block;font-size:18px;font-weight:bold;}
p.skillz {font-size:16px;line-height:14px;}
.title_compl {font-size:16px;padding:4px 10px;text-transform:none;}
/*########### FIn   SKILLZZZZZZZZZZ ############*/

/*###########       ABOUUUUUUUUUUUT ############*/
.android {background:url(img/android.png) no-repeat 400px top;}
#tiles img {width:160px}
/*########### FIn   ABOUUUUUUUUUUUT ############*/

/*################### WELCOME ##################*/
#welcome {
	position:relative;
	left:40px;
	top:-50px;
	width:720px;
	z-index:2000;
	}
	#welcome .first {opacity:0;font-size:190px;}
	#welcome .sec {opacity:0;font-size:190px;}
	#welcome .third {opacity:0;font-size:190px;}
	#welcome .four em {font-style:normal;font-size:190px;opacity:0;position:relative;}
#nav2, #content-rotator {opacity:0.2}
.ie #nav2, .ie #content-rotator {opacity:1}
.opera #nav2, .opera #content-rotator {opacity:1}
#welcome p {margin:0;padding:0;text-align:center;position:relative;}
/*################ FIn WELCOME #################*/

/*############### ROTATOR PLUG #################*/
#content-rotator {
	width:800px;
	height:630px;
	position:absolute;
	transform-origin:50% 205%;
	-ms-transform-origin:50% 205%;
	-webkit-transform-origin:50% 205%;
	transform-style: preserve-3d;
	}
.chrome #content-rotator {
	-webkit-transition:all 0.5s linear;
	}
.chrome .content {
	-webkit-transition:all 0.7s linear;
	}
.opera #content-rotator {
	-o-transition:all 0.5s linear;
	}
.opera .content {
	-o-transition:all 0.7s linear;
	}
.content {
	border-radius:25px;
	background:rgba(255,255,255,.7);
	box-shadow:5px -5px 20px #000, -5px 5px 20px #000;
	width:800px;
	height:630px;
	position:absolute;
	overflow:hidden;
	transform-origin:50% 205%;
	-ms-transform-origin:50% 205%;
	-webkit-transform-origin:50% 205%;
	transform-style: preserve-3d;
	}
.loading-content {
	opacity: 0;
	display: none;
	}
.block {
	display: block;

/*############## FIN ROTATOR PLUG ###############*/