@charset "utf-8";
/* Manu.L - (c)2012 */

/*********** CHARTE GRAPHIQUE *****************/
/*
    Bleu foncé : #003a62
    Bleu : #03588e
    Bleu ciel : #9bbacc
    
*/
/*********** IMPORT DES TYPOS *****************/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700,800);

/************ DESIGN FOR ALL *******************/

html { font-size : 100%;}

body {
	overflow: hidden;
	background: #fff no-repeat top left;
	font: 0.8em/1.9em 'Open Sans', sans-serif;
	color: #03588e;
}

a {
	color : #03588e;
	text-decoration : none;
}

a:hover {
	text-decoration : underline;
}

header, footer, #main-nav, #main-nav ul, #menu p span, #social span {
	display: none;
}

h3 {
	font-size : 1.8em;
	font-weight : 800;
	letter-spacing: 0.01em;
	margin-bottom : 10px;
}

/*BOUTON PREV NEXT*/

#pagePrev {
	position : fixed;
	right : 95px;
	bottom : 30px
}

#pageNext {
	position : fixed;
	right : 30px;
	bottom : 30px
}
#pagePrev, #pageNext {
	display : block;
	height : 20px;
	width : 45px;
	padding : 5px;
	background-color: #03588e ;
	color : #fff;
	text-align : center;
	text-decoration : none;
	text-transform : uppercase;
}

#pagePrev:hover, #pageNext:hover, .a-web:hover {
	opacity: 0.5;
	cursor: pointer;
}

.pageNavigationButton {
    background: #03588e;
    border-radius: 5px 5px 5px 5px;
    height: 10px;
    margin: 1px 1px 0 0;
    width: 10px;
    z-index: 2600;
    cursor : pointer;
 }
 
.pageNavigationButton:hover, #social li a:hover {
 	opacity : 0.3;
 }

#menu p {
	position : fixed;
	bottom : 30%;
	left : 0;
	width : 96px;
	height : 76px;
	padding-top : 50px;
	padding-left : 20px;
	padding-right : 80px;
	background: transparent url('img/bg_h2menu.png') no-repeat left top;
	text-transform: uppercase;
	color : #fff;
	font-size : 1.5em ;
	font-weight : 300;
	z-index: 26000!important;
}

#main-nav {
	position : fixed;
	bottom : 30%;
	left : 140px;
	height : 110px;
	border-left: 4px solid #03588e;
	z-index: 40000!important;
}

#main-nav li a {
	display : block;
	margin-left : 10px;
	padding-bottom : 5px;
	font-size : 1.3em;
	font-weight: 300;
	text-transform: uppercase;
	z-index: 40000!important;
}

#main-nav li a:hover {
	margin-left : 20px;
	text-decoration : none;
	z-index: 40000!important;
}
	
	
/************ DESIGN FOR DESKTOP *****************/


@media (min-width : 641px) {
	body {
		height : 100%;
		background: url('img/bg_body.jpg') no-repeat top left fixed;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover; /* version standardisée */
	}

	.slide {
		width : 960px;
		margin : 50px auto;
	}
	
	.slide h2, #page0 h2 {
		position : absolute;
		top : 0;
		right : 20%;
		width : 189px;
		height : 156px;
		background: transparent url('img/bg_h2_slide.png') no-repeat center top;
		
	}
	
	.slide h2 span, #page0 h2 span {
		display : block;
		text-align : center;
		margin-top : 22%;
		text-transform: uppercase;
		color : #fff;
		font-size : 1.8em ;
		font-weight : 300;
	}
	
	div.h2top {
		position : absolute;
		bottom : 0;
		right : 20%;
		width : 189px;
		height : 41px;
		background: transparent url('img/bg_h2_top.png') no-repeat center top;
	}
	
	#page0 img {
		display: block;
		margin : 140px auto;
	}
	
	#info-nav {
		position : absolute;
		bottom : 3%;
		left : 150px;
		width : 145px;
		height : 77px;
		background: transparent url('img/bg_infonav.png') no-repeat center top;
	}
	
	.slide p {
		text-align : justify;
		padding-left : 20px;
		margin-bottom: 20px;
	}
	
	/*ABOUT*/
	
	.about h3 {
		margin-bottom : 0!important;
		height : 65px;
		padding-top : 180px;
		padding-left : 210px;
		background: transparent url('img/moi.png') no-repeat left top;
	}
	
	.about p {
		border-left: 4px solid #03588e;
		width : 430px;
		margin-left: 212px;
	}
	
	.slide p+ul {
		width : 246px;
		height : 136px;
		margin-left : 272px;
		margin-bottom : 50px;
		background: transparent url('img/bg_download.png') no-repeat right bottom;
		font-weight : 600;
	}
	
	.about p+ul span {
		font-style : italic;
	}
	
	#social {
		width : 380px;
		height : 122px;
		margin-left : 212px;
		background: transparent url('img/bg_social.png') no-repeat right top;
	}
	
	#social li a {
		display: block;
		float : left;
		height : 37px;
		margin-top : 60px;
	}
	
	#social li:first-child a {
		width : 45px;
		margin-right : 7px;
		background: transparent url('img/twitter.png') no-repeat left top;
	}
	
	#social li+li a {
		width : 45px;
		background: transparent url('img/viadeo.png') no-repeat left top;
	}
	
	#social li+li+li a {
		width : 45px;
		background: transparent url('img/linkedin.png') no-repeat left top;
	}
	
	#social li+li+li+li a {
		width : 45px;
		background: transparent url('img/dribbble.png') no-repeat left top;
	}
	

}  /*  mediaquery */



/************* DESIGN FOR IE 7 & 8 ****************/

.ie body {
	background: #fff url('img/bg_bodyIE.jpg') repeat top left;
}


/************** DESIGN FOR MOBILE ******************/

@media (max-width: 640px) {
	
	}

@media (max-device-width:640px) and (orientation:landscape) {
	body{-webkit-text-size-adjust:none !important}
}