@charset "utf-8";
/* CSS Document */
/* pour ajouter un bouton de navigation = rajouter une ligne du nom du bouton (ex:button_nom) dans "js.js" -> var.link + button.nom */

html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	background:url(images/site_texture_1.png);
}
a {
	text-decoration:none;
	color:#000;
}
a:deflink:link:visited:focus {
	text-decoration:none;
	color:#333;
}
a:hover{
	text-decoration:underline;
	color:#000;
}

.slide{
	position: relative;
	background-attachment: fixed;
	width:100%;
	height:100%;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
/*	position:absolute;*/
	top:0px;
	margin:0 auto;
	max-height:100%;
	max-width:100%;
}
.explication{	
	position:absolute;
	display:inline-block;
	top:180px;
	left:50%;
	margin-left:-500px;	
	color:rgba(255,255,255,0.7);
	/*font-weight:bold;
	background-image:url(http://ftpanikop.free.fr/Gringo/book/site/images/fond_noir-70.png);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
}

/******************************
	MENU SITE
*******************************/
.menu{
	position:fixed;
	text-align:center;
	/*left:50%;
	margin-left:-460px;
	top:50%;
	margin-top:10px;*/
	background-repeat:no-repeat;
	background-position: top center;
	z-index:10;
}
.title_site{
	color:#fbedd7;
	font-family:Arial, Helvetica, sans-serif;
}
.title_site .name{
	font-stretch:narrower;
	font-size:25px;
	vertical-align:bottom;
}
.title_site .work{
	font-weight:bold;
	font-size:13px;
	vertical-align:top;
}

/******************************
	TEXTES
*******************************/
.text {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fbedd7;
	text-align:justify;
	/*margin-top:30px;
	margin-bottom:30px;
	margin-left:30px;
	margin-right:30px;*/
}
.text .surlign {
	/*color:#FFF;
	font-weight:bold;*/
}
.text .title{
	font-size:18px;
}
.text .title-small{
	font-size:22px;
	background-color:#000000;
}
.text .black {
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	color:#000000;
}
.text .travail{
	color:#d2753d;
	text-shadow: 1px 1px 2px 1px #b45006;
	background-color:#000000;
	/*text-shadow:1px 1px 0.1em #fea05b, -1px -1px 0.1em #b45006;*/
}
.text .competences{
	color:#62a85c;
	background-color:#000000;
}
.text .ecole{
	color:#bb65bb;
	background-color:#000000;
}
.text .loisirs{
	color:#cfb22b;
	background-color:#000000;
}
.text .coordonnees{
	color:#709bb9;
	background-color:#000000;
}
.star{
	font-size:18px;
}

/******************************
	BOUTONS 
*******************************/
.button_page_next{
	display:block;
	width:50px;
	height:60px;
	position:absolute;
	bottom:0px;
	left:50%;
	margin-left:-25px;
	background-color:#333333;
	background-image:url(http://ftpanikop.free.fr/Gringo/book/site/images/arrow.png);
}
.button_page_previous{
	display:block;
	width:25px;
	height:25px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:485px;
	background-color:#333333;
	z-index:15;
}
.button_page_next:hover{
	background-color:#494949;
	cursor:pointer;
}
.button_page_previous:hover{
	background-color:#494949;
	cursor:pointer;
}
.button{
	width:60px;
	height:60px;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}
.button_travail{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image: url(../images/site_sommaire_travail.png);
}
.button_travail:hover,.active{
	background-image: url(../images/site_sommaire_travail_.png);
	z-index:11;
	cursor:pointer;
}

.button_competences{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image: url(../images/site_sommaire_competences.png);
}
.button_competences:hover,.active{
	background-image: url(../images/site_sommaire_competences_.png);
	z-index:11;
	cursor:pointer;
}

.button_ecole{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image: url(../images/site_sommaire_ecole.png);
}
.button_ecole:hover{
	background-image: url(../images/site_sommaire_ecole_.png);
	z-index:11;
	cursor:pointer;
}
.button_loisirs{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image:url(../images/site_sommaire_loisirs.png);
}
.button_loisirs:hover{
	background-image:url(../images/site_sommaire_loisirs_.png);
	z-index:11;
	cursor:pointer;
}
.button_mail{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image:url(../images/site_sommaire_mail.png);
}
.button_mail:hover{
	background-image:url(../images/site_sommaire_mail_.png);
	z-index:11;
	cursor:pointer;
}
.button_coordonnees{
	display:block;
	width:60px;
	height:60px;
	top:0;
	margin:0 auto;
	position:relative;
	background-image:url(../images/site_sommaire_coordonnees.png);
}
.button_coordonnees:hover{
	background-image:url(../images/site_sommaire_coordonnees_.png);
	z-index:11;
	cursor:pointer;
}
.button_accueil{
	display:block;
	width:60px;
	height:60px;
	bottom:0px;
	left:50%;
	margin-left:-30px;
	position:relative;
	background-image:url(http://ftpanikop.free.fr/Gringo/book/site/images/site_sommaire_accueil.png);
}
.button_accueil:hover{
	cursor:pointer;
	background-image:url(http://ftpanikop.free.fr/Gringo/book/site/images/site_sommaire_accueil_survol.png);
}
#my_vibrate_div{ 
	position: absolute;
	margin-top: 100px;
	margin-left: 100px;
	width: 100px;
	height: 100px;
	background-color: #e9dab1;
}
#vibrate_button{
	position: absolute;
	margin-top: 160px;
	margin-left: 350px;
}

/******************************
 SLIDE 1 
*******************************/
#slide1{
	/*opacity:0.4;*/
	/*filter:alpha(opacity=40); /* For IE8 and earlier */
	/*background-image: url(images/site_texture_orange.png);no-repeat center 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 */
	/*background-color:#e66e16;*/
	/*data-stellar-background-ratio="0" == pour ne pas que le fond glisse avec le scroll*/
}
#slide1 img{
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%;  /*pour que l'image soit au milieu de la page*/ 
}
#slide1 img:nth-child(30){
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
  	/*margin-left: -600px;  mais il faut retirer la moitié de la largeur */
}


/******************************
 SLIDE 2 
*******************************/
#slide2{
	/*opacity:0.4;*/
	/*filter:alpha(opacity=40); /* For IE8 and earlier */
	/*background: url(http://ftpanikop.free.fr/Gringo/book/site/images/outils_mur.jpg) no-repeat center 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 */
}
#slide2 img{
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
}
#slide2 img:nth-child(30){
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
  	/*margin-left: -600px;  mais il faut retirer la moitié de la largeur */
}

/******************************
 SLIDE 3 
*******************************/
#slide3{
	/*opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	/* background: url(http://ftpanikop.free.fr/Gringo/book/site/images/site_mosaique_1_01.png) no-repeat center*/ ;
	-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 */ 
}
#slide3 img{
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
}
#slide3 img:nth-child(30){
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
  	/*margin-left: -600px;  mais il faut retirer la moitié de la largeur */
}
/******************************
 SLIDE 4 
*******************************/

#slide4{
	/*opacity:0.4;*/
	/*filter:alpha(opacity=40);  For IE8 and earlier */
	/*background: url(http://ftpanikop.free.fr/Gringo/book/site/images/detente2.jpg) no-repeat center 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 */
}
#slide4 img{
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
}
#slide4 img:nth-child(30){
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
  	/*margin-left: -600px;  mais il faut retirer la moitié de la largeur */
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}
/******************************
 SLIDE 5 
*******************************/
#slide5{
	/*opacity:0.4;*/
	/*filter:alpha(opacity=40);  For IE8 and earlier */
	/*background: url(http://ftpanikop.free.fr/Gringo/book/site/images/contact.jpg) no-repeat center 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 */
	/*display:inline-table;*/
	/*vertical-align:central;*/
	background-color:#1a98f0;
}
#slide5 img{
	position: absolute;  /*pour centrer un <div>, il faut qu'elle soit en position absolute */
	top:0;/**/
	/*margin-top: -260px;*/
}
#slide5 img:nth-child(30){
	/*max-height:100%;*/
	position: absolute; /* pour centrer un <div>, il faut qu'elle soit en position absolute */
  	left: 50%; /* pour que l'image soit au milieu de la page */
  	/*margin-left: -600px;  mais il faut retirer la moitié de la largeur */
}