html {
  height:100%;
  /* scroll-behavior: smooth; */
  overflow-x:hidden;
}
body {
	color: rgb(57 114 155);
    margin: 0;
    padding: 0;
    /* perspective: 1px; on la definit dans le javascript sur seulement la page index */
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
	display: block;
	scroll-behavior: smooth;
}
#trait0{
    width:100px;
	width: 87px;
	height: 6px;
	background:rgb(110,164,202);
    margin:-12px 0px 0px 480px;
	float:left;
	position:relative;
   }
.intro2 ,.intro3 ,.intro4,.intro5 {
    box-sizing: border-box;
    /* min-height: 110vh; */
	min-height: 120vh;
    padding: 30vw 0 5vw;
    position: relative;
    transform-style: inherit;
    width: 100vw;
	/* top:-50px; */
}
.intro h1, .intro h2,.intro2 h1, .intro2 h2,.intro3 h1, .intro3 h2 ,.intro4 h1, .intro4 h2{
    margin-top: -100px;
	/* text-shadow: black 0.05em 0.05em 0.9em; */
	text-shadow: 0 2px 2px #000;
	/* box-shadow:  0px -1px 10px rgba(0, 0, 0, .7); */
	letter-spacing: -0.03em;
	vertical-align: baseline;
	text-transform: uppercase;
	/* font-family: raleway, sans-serif; */
	font-family: Nunito;
	/* line-height: 0.8em; */
	text-align: center;
	font-size: 60px;
	color: rgb(255 255 255);
}
.intro5 h1{/* contact */
    margin-top: -300px;
	text-transform: uppercase;
    font-family: raleway-light, sans-serif;
    font-size: 60px;
    line-height:1.2em;
	color: rgb(255 255 255);	
}
.intro p,.intro2 p,.intro3 p,.intro4 p{
	text-shadow: black 0.1em 0.1em 0.2em;
	/* text-shadow: 0 2px 2px #000; */
	letter-spacing: 0.05em;
	vertical-align: baseline;
	text-transform: uppercase;
	font-family: Raleway, sans-serif;
	text-align: center;
	font-size: 18px;
	color: rgb(255 255 255);
}
.intro, .intro:before ,.intro2, .intro2:before,.intro3, .intro3:before,.intro4, .intro4:before{
	 /* background: 50% 50% / cover; */
    background: 100% 100% / cover;
	/* top: -100px; */
}
.intro2:before {
	 /* top: -100px; */
    position: absolute;
    bottom: 0;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    display: block;
    background-image: url('../images/plomberie3.png');
    background-size: cover;
	/*  jouer avec translate et scale pour pouvoir avoir leffet du scrolling souhaité */
    transform-origin: center center 0;
    transform:  translateZ(-1px) scale(2.2);
    z-index: -1;
    height: 100vh;
	/* animation: 50s para infinite linear ; */
	animation: 100s para infinite linear ;/* animation keyframe */
	background-repeat: no-repeat;/* animation keyframe */
}
.intro3:before {
    position: absolute;
    bottom: 0;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    display: block;
    background-image: url('../images/sanitaire.png');
    background-size: cover;
    transform-origin: center center 0;
    transform:  translateZ(-1px) scale(2.2);
    z-index: -1;
    /* height: 100vh; */	
	animation: 50s para infinite linear ;
	background-repeat: no-repeat;
}
.intro4:before {
    position: absolute;
    bottom: 0;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    display: block;
    background-image: url('../images/carrelage.png');
    background-size: cover;
    transform-origin: center center 0;
    transform:  translateZ(-1px) scale(2.0);
	animation: 200s para infinite linear ;
    background-repeat: no-repeat;
	z-index: -1;
    /* height: 100vh; */
}
/* animation image qui bouge sur les intro*/
@keyframes para {
	50% {
		background-position: 
			/* -5000px 20%, */
			/* -800px 95%, */
			-50px 50%,
			/* 1000px 100%, */
			-50px 0;
		}		
	}

.content {
  /* margin:200px auto; */
 width:100%;
  position: relative;
  z-index: 1;
  background:#fff;
 /*  background:rgb(40, 48, 70); */
   /* background:rgb(209,224,235); */
   /* padding:100px 0; */
  padding:150px 0;
  font-family: OpenSans, sans-serif;
  font-size: 16px;
  line-height:1.5em;
  /* margin-top:-80px; */ 
}
.container {
  max-width:1045px;
  margin:0 auto;
  height: 110vh;
}  
.titre{
  text-transform: uppercase;
  font-family: raleway, sans-serif;
  font-size: 70px;
  line-height:1.2em;
  /* color: rgb(209, 224, 235); */
  color:rgb(110,164,202);
}
.bouton
{
	opacity:1;
	transform: translateY(-600px);
	animation: 0.5s slideIn ease-in-out forwards  1s;
	display:block;
}