body{
	margin:0;
	font-family: 'Montserrat', sans-serif;
	background-color: #F7F7F7;
	overflow-x: hidden;
}

			/* HEADER --- contient Fond animé, H1 et UL */

header{
	background-image: url('../image/background1.jpg');
	background-size: cover;
	background-attachment: fixed;
	width:100%;
	min-height:100vh;
	text-align: center;
}

.pg_contact header,.pg_etape header{
	background-image: url('../image/background3.jpg');
	background-size: cover;
	background-attachment: fixed;
	width:100%;
	min-height:75vh;
	text-align: center;
}
	.pg_contact h1,.pg_etape h1{
		margin-top:135px;
	}

.pg_etape header{
	background-image: url('../image/background4.jpg');
}

header ul{
	font-size:27px;
	color:#4b8ffc;
	margin:0px;
	text-align: right;
}
	header li{
		display: inline-block;
		padding-right:20px;
		padding-left: 20px;
		-o-transition-duration: 1s;
		-ms-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-webkit-transition-duration:1s;
		transition-duration: 1s;	
	}

	@media screen and (min-width:1001px)
	{
		header li:hover{
			color:#c45ab9;			
		}

		header li:hover span:nth-child(2){
			-o-animation: survol_barre 0.7s;
			-moz-animation: survol_barre 0.7s;
			-webkit-animation: survol_barre 0.7s;
			-ms-animation: survol_barre 0.7s;
			animation: survol_barre 0.7s;

				-o-animation-fill-mode: forwards;
				-moz-animation-fill-mode: forwards;
				-webkit-animation-fill-mode: forwards;
				-ms-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
		}

		header li:hover span:nth-child(3){
			-o-animation: survol_barre_side 0.5s;
			-moz-animation: survol_barre_side 0.5s;
			-webkit-animation: survol_barre_side 0.5s;
			-ms-animation: survol_barre_side 0.5s;
				animation: survol_barre_side 0.5s;

				animation-delay: 0.2s;
			-o-animation-delay: 0.2s;
			-moz-animation-delay: 0.2s;
			-webkit-animation-delay: 0.2s;
			-ms-animation-delay: 0.2s;

				animation-fill-mode: forwards;
			-o-animation-fill-mode: forwards;
			-moz-animation-fill-mode: forwards;
			-webkit-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
		}
	}


	header span{
		display: block;
		background-color: #f4f6f9;
		height:3px;
		width:0;
		cursor: pointer;
	}



	header li span:nth-child(3){
		position: relative;
		float:right;
		margin-top:-30px;
		width:3px;
		height:30px;
		opacity: 0;
	}

h1{
	display: inline-block;
	width:100%;
	text-align: center;
	background-color: #383838;
	opacity: 0.9;
	color:#4b8ffc;
	font-size: 90px;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-top:10%;
	border-top:4px solid #ededed;
	border-bottom:4px solid #ededed;
	-o-transition-duration: 2s;
	-ms-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-webkit-transition-duration:2s;
	 transition-duration: 2s;
	 font-family: 'Martel', sans-serif;
}

a{
	color:inherit;
	text-decoration: none;
}

	@media screen and (max-width:1000px)
	{

		header{
			display: flex;
			flex-flow: column;
		}


		header h1{
			order: -1;
			font-size:110px;
			margin-top:300px;
		}

		

		header ul{
			padding: 20px;
			margin-top:100px;
			position: relative;
			
		}



		header li{
			padding-right: 10px;
			padding-left: 10px;
			margin-top:40px;
			display: block;
			text-align: left;
			font-size:40px;
			width:100%;
		}



		header li:hover{
			color:#c45ab9;
		}
	}

	@media screen and (max-width:820px)
	{
		header h1{
			font-size: 65px;
			margin-top:100px;
		}

		header ul{
			top:10px;
		}

		header li{
			font-size:32px;
		}
	}

	@media screen and (max-width: 420px){

		header h1{
			font-size:40px;
		}

	}
/* SECTION --- contient texte de la page, bloc bougeants */
	.pg_contact section{
		white-space: nowrap;
		color:#465A6D;
	}


	.pg_etape section{
		white-space: nowrap;
		padding-bottom: 70px;
		text-align: center;
	}

	.pg_etape p,.pg_etape h2{
		white-space: normal;
		width:50%;
		text-align: center;
		margin:auto;
	}

	.pg_etape section p{
		margin-top:80px;
		font-size:26px;
	}

	.pg_etape .titre_li{
		font-size:32px;
		font-weight: bold;
	}



	.pg_etape section div{
		display: inline-block;
		padding-left:150px;
		padding-right: 150px;
	}

	.pg_etape section .liste_etape{
		width: 70%;
		margin:auto;
		border-left:15px solid black;
			-o-border-image: linear-gradient(to bottom, #4b8ffc 0%,#81B56A 50%,#c45ab9 100%);
			-moz-border-image: linear-gradient(to bottom, #4b8ffc 0%,#81B56A 50%,#c45ab9 100%);
			-webkit-border-image: linear-gradient(to bottom, #4b8ffc 0%,#81B56A 50%,#c45ab9 100%);
			-ms-border-image: linear-gradient(to bottom, #4b8ffc 0%,#81B56A 50%,#c45ab9 100%);
		border-image: linear-gradient(to bottom, #4b8ffc 0%,#81B56A 50%,#c45ab9 100%);	

		border-image-slice: 1;
			-o-border-image-slice: 1;
			-moz-border-image-slice: 1;
			-webkit-border-image-slice: 1;
			-ms-border-image-slice: 1;
			border-border-image-slice: 1;
	}

	.pg_etape ol{
		white-space: normal;
		font-size:76px;
		line-height: 40%
	}

	.pg_etape ol li{
		margin-top:100px;
		-o-transition-duration: 1s;
		-ms-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-webkit-transition-duration:1s;
		transition-duration: 1s;
	}

	.pg_etape ol li:nth-child(1){
		margin:0;
	}

	.pg_etape section li span{	
		font-size:26px;
	}

	.pg_etape section img{
		width:60px;
		-o-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg)
		transform: rotate(-90deg);
		position: relative;
		float:left;
		right:160px;
	
	}



	section .bloc_pg_contact{
		width:50%;
		display: inline-block;	
		vertical-align: top;

	}

	section .bloc_pg_contact:nth-child(1){
		text-align: center;
		font-size:25px;
		white-space: initial;
	}

	section .bloc_pg_contact:nth-child(2){
		text-align: center;
	}
		section .bloc_pg_contact p:nth-child(4){
			text-align: center;
		}

		/* Page nous contactez formulaire */
form{
	width:90%;
	display: inline-block;
	text-align: center;
	border-left:5px solid #465A6D;
	padding-left: 20px;
	margin-bottom: 100px;
	transition-duration: 1.3s;
	-ms-transition-duration: 1.3s;
	-o-transition-duration: 1.3s;
	-moz-transition-duration: 1.3s;
	-webkit-transition-duration: 1.3s;
}

	form p{
		color:red;
	}
	
	.form_accepted{
		-ms-transition-duration: 1.3s;
		-o-transition-duration: 1.3s;
		-moz-transition-duration: 1.3s;
		-webkit-transition-duration: 1.3s;
		transition-duration: 1.3s;
		opacity: 0;
	}

	.transition_accepted{
		opacity:1;
	}

#message_envoi{
	width:50%;
	margin-left:0;
	left:51%;
	opacity:0;
	-ms-transition-duration: 1s;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	font-size:60px;
	display: none;
	position: absolute;
	bottom:-200px;

}


	input,textarea{
	display: block;
	width:80%;
	margin:auto;
	height:45px;
	padding-left: 20px;
	font-size: 35px;
	border:0;
	outline:0;
	border-bottom:2px solid black;
	background-color: inherit;
	margin-top: 20px;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition-duration:1s;
	transition-duration: 1s;
}

input[type=submit]{
	background-color: grey;
	height:50px;
	width:50%;
	margin: auto;
	margin-top:20px;
}

textarea{
	height:120px;
	font-size:25px;
}

input:focus,textarea:focus{
	color:#F7F7F7;
	background-color: #465A6D;
}

label{
	font-size:35px;
	display: block;
	margin-top:20px;
	position: relative;
}



@keyframes label_over_input{

	0%{
		top:59px;
		opacity:0.4;
	}

	100%{
		top:59px;
		opacity:0.4;
	}
}

@keyframes label_up{

	0%{
		top:59px;
		opacity:0.4;
	}

	100%{
		top:0px;
		opacity:1;
	}
}



	/* Page nous contactez bloc texte infos */
	section ul{
		text-align: center;
		display: inline-block;
		font-weight: bold;
		list-style-type: square;
	}

		section li{
			text-align: left;
		}
			section li:first-line{	/* À enlever */
				
			}
	/* Les 3 blocs de textes page index */
p{
	font-size:20px;	
}

	.bloc_texte1,.bloc_texte2,.bloc_texte3{
		padding-bottom:140px;	
	}

	/* BLOC DE TEXTE 1 */
	.bloc_texte1{
		background-color: #465A6D;	
		color:#F7F7F7;
		text-align: right;
		padding-top: 50px;
	}

		.bloc_texte1 div:nth-child(2){
			display: inline-block;
			width:60%;
			border-left:5px solid #F7F7F7;
			vertical-align: top;
			margin-top:50px;
		}

		.bloc_texte1 div:nth-child(1){
			display: inline-block;
			text-align: right;
			width:40%;
			margin-top: 30px;
			margin-left:-10px;
		}

		.bloc_texte1 img{
			width:80%;
			margin-right:20px;
		}

		@media screen and (max-width: 1280px)
		{
			#message_envoi{
				font-size:50px;
			}

			.bloc_texte1 div:nth-child(1){
				margin-top: 100px;
			}

			.bloc_texte1 img{
				width:100%;
			}


		}


		@media screen and (max-width: 1000px)
		{

			.bloc_texte1 div:nth-child(1){
				margin-top: 100px;
				display: block;
				margin:auto;
				width:100%;
				text-align: center;
			}

			.bloc_texte1 div:nth-child(2){
				display: block;
				width:90%;
				margin:auto;
				border-right:5px solid rgb(40,40,40);
				border-left:5px solid rgb(40,40,40);
			}

			.bloc_texte1 img{
				margin:auto;
				width:60%;
			}

			.pg_contact section input,.pg_contact section label{
				font-size:23px;
			}

		}


		/* BLOC TEXTE 2 SLIDESHOW ETC*/
		.bloc_texte2{
			vertical-align: top;
			background-color: #efefef;
			color:#465A6D;
		}

		.bloc_texte2 img{
			position: absolute;
			width:700px;
			left: 0; 
			right: 0; 
			margin-left: auto; 
			margin-right: auto; 
			display: none;
		}

				.bloc_infos,.bloc_infos p{
					text-align: center;
				}

				.bloc_infos{
					vertical-align: top;
				}


		.bloc_texte2 .button_a{
			display: block;
			width:200px;
			height:50px;
			margin:auto;
			border:5px solid #465A6D;
			border-radius: 20px;
			background-color: #efefef;
			font-size:20px;
			color:#465A6D;
			cursor: pointer;
			outline:0;
			-o-transition-duration: 1s;
			-ms-transition-duration: 1s;
			-moz-transition-duration: 1s;
			-webkit-transition-duration:1s;
			transition-duration:1s;
			margin-top:60px;
		}




			.button_a:hover{
				-moz-transform: scale(1.1);
				-o-transform: scale(1.1);
				-ms-transform: scale(1.1);
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
				@media screen and (max-width: 1720px){

					.bloc_texte2 img{
						margin-top:500px;
					}

				}

				@media screen and (max-width: 530px){

					.bloc_contact textarea{
						width:470px;
						height:70px;
						font-size:25px;
					}
				}


			/* BLOCs TEXTEs */




	.bloc_texte3{
		background-color: #81B56A;
		color:#F7F7F7;
	}
			.lien_important{
				color:#4c4c4c;
			}
					/* HEXAGONES */
		.contenu_hexa{
			-moz-perspective: 1000px;
			-o-perspective: 1000px;
			-ms-perspective: 1000px;
			-webkit-perspective: 1000px;
			perspective: 1000px;
			display: inline-block;
			width:460px;
			margin-right:50px;
			margin-left: 50px;
			margin-top:70px;
			color:#F7F7F7;

		}
		    
			.contenu_hexa:hover .hexa1{
				-moz-transform: rotateY(180deg) scale(1.2);
				-o-transform: rotateY(180deg) scale(1.2);
				-ms-transform: rotateY(180deg) scale(1.2);
				-webkit-transform: rotateY(180deg) scale(1.2);
				transform: rotateY(180deg) scale(1.2);
			}
			.contenu_hexa:hover .hexa2{
				-moz-transform: rotateX(-180deg) scale(1.2);
				-o-transform: rotateX(-180deg) scale(1.2);
				-ms-transform: rotateX(-180deg) scale(1.2);
				-webkit-transform: rotateX(-180deg) scale(1.2);
				transform: rotateX(-180deg) scale(1.2);
			}
			.contenu_hexa:hover .hexa3{
				-moz-transform: rotateY(-180deg) scale(1.2);
				-o-transform: rotateY(-180deg) scale(1.2);
				-ms-transform: rotateY(-180deg) scale(1.2);
				-webkit-transform: rotateY(-180deg) scale(1.2);
				transform: rotateY(-180deg) scale(1.2);
			}
			



					.avant,.arriere{
					-moz-backface-visibility: hidden;
					-o-backface-visibility: hidden;
					-ms-backface-visibility: hidden;
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
					position: absolute;
					top:0;
					left:0;

				}

				.hexa1 .avant,.hexa3 .avant{
					z-index: 2;
					-moz-transform: rotateY(0deg);
					-o-transform: rotateY(0deg);
					-ms-transform: rotateY(0deg);
					-webkit-transform: rotateY(0deg);
					transform: rotateY(0deg);
				}

				.hexa1 .arriere{
					-moz-transform: rotateY(180deg);
					-o-transform: rotateY(180deg);
					-ms-transform: rotateY(180deg);
					-webkit-transform: rotateY(180deg);
					transform: rotateY(180deg);
				}


			.hexa2 .avant{
				z-index: 2;
				-moz-transform: rotateX(0deg);
				-o-transform: rotateX(0deg);
				-ms-transform: rotateX(0deg);
				-webkit-transform: rotateX(0deg);
				transform: rotateX(0deg);
			}

			.hexa2 .arriere{
				-moz-transform: rotateX(-180deg);	/* -180 au lieu de 180 pour compatibilitée Safari */
				-o-transform: rotateX(-180deg);
				-ms-transform: rotateX(-180deg);
				-webkit-transform: rotateX(-180deg);
				transform: rotateX(-180deg);
				bottom:0;
			}



				.hexa3 .arriere{
					-moz-transform: rotateY(-180deg);
					-o-transform: rotateY(-180deg);
					-ms-transform: rotateY(-180deg);
					-webkit-transform: rotateY(-180deg);
					transform: rotateY(-180deg);
				}

			.bloc_hexa{
				width:230.94px;
				height:400px;
				display: inline-block;
				vertical-align: top;
				-moz-transition: 1s;
				-o-transition: 1s;
				-ms-transition: 1s;
				-webkit-transition: 1s;
				transition: 1s;
				position: relative;
				-moz-transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
				background-color: #4b8ffc;
			}

				.bloc_hexa p,h3{
					position: relative;
					z-index: 2;
				}

				.bloc_hexa p{
					width:110%;
					margin-left: -5%;
				}

				.bloc_hexa::before,.bloc_hexa::after{
					content: "";
					position: absolute;
					z-index: -1;
					width:282.84px;
					height:282.84px;
					-moz-transform: scaleX(0.57735) rotate(45deg);
					-o-transform: scaleX(0.57735) rotate(45deg);
					-ms-transform: scaleX(0.57735) rotate(45deg);
   				    -webkit-transform: scaleX(0.57735) rotate(45deg);
					transform: scaleX(0.5574) rotate(45deg);
				}

				.bloc_hexa::before{
					left:-142.1px;
					top:58.15626px;
					background-color: #4b8ffc;
					box-shadow: -8px 8px 8px -3px #727272;
				}
	

				.bloc_hexa::after{
					right:-142.1px;
					top:58.15626px;
					background-color: #4b8ffc;
				}

						.hexa2{
							background-color: #81B56A;
						}
						.hexa2::after{
							background-color: #81B56A;
						}

						.hexa2::before{
							background-color: #81B56A;
						}

						.hexa3{
							background-color: #c45ab9;
						}
						.hexa3::after{
							background-color: #c45ab9;
						}

					.hexa3::before{
						background-color: #c45ab9;
					}

					@media screen and (max-width: 1000px)
					{
						p{
							font-size:25px;
						}
					}

					@media screen and (max-width:  570px){

						.bloc_hexa{
							margin-right:15%;
						}
					}
				


	section div p,.paragraphe_contact span{
		width:70%;
		margin:auto;
		text-align: left;
	}

	.paragraphe_contact{	/* Compatibilité IE  sans span == une seule ligne*/
		white-space: normal;
	}
		.bloc_texte1 p{
			text-align: left;
		}

	h2{
		text-align: center;
		font-size:45px;
		padding-top: 60px;
		margin-top:0;

	}
		.bloc_texte1 h2{
			padding-top: 0px;
		}

	h3{
		font-size: 30px;
	}

								/* FOOTER contient: Ma petite description,mes certificats des facons de me contactez*/
footer{
	background-color: #373738;
	color:white;
	padding-top:78px;
	padding-bottom: 60px;
}
	.footer_div1,.footer_div2,.footer_div3{
		display: inline-block;
		width:33%;
		vertical-align: top;
		text-align: center;
	}
		.title_footer{
			font-size:35px;
		}

		.footer_div2 p{
			font-size:40px;
			margin-top: 0;
		}

		.footer_div1 img{
			width:100px;
			height:100px;
			border-radius: 100px;
			margin-top:30px;
			border:5px solid white;
		}


		.footer_div1 p,.footer_div3 p{
			width:80%;
			margin:auto;
			margin-top:30px;
		}

			.footer_div1 p:nth-child(3),.footer_div3 p:nth-child(2){
				margin-top:20px;
			}



		.footer_div2 img{
			width:32%;
		}

		.footer_div3 a,.bloc_hexa a,.pg_contact .bloc_pg_contact a{
			color:red;
		}




		@media screen and (max-width: 1400px){

			.footer_div1 p,.footer_div3 p{
				margin-top:0px;
			}

			.footer_div2 img{
				width:45%;
			}
		}

		@media screen and (max-width: 1000px){

			.footer_div1,.footer_div2,.footer_div3{
				display: block;
				width:85%;
				margin:auto;
			}
				footer p{
					width:100%;
					margin:auto;
				}

				.footer_div2 img{
					width:30%;
				}

				.footer_div2 p:nth-child(1),.footer_div3 p:nth-child(1){
					margin-top:80px;
				}

				.footer_div2 p:nth-child(1){
					padding-bottom: 20px;
				}

				.footer_div3{
					border-bottom:3px solid white;
				}
		}





/* KEYFRAMES */
@keyframes survol_barre{

	0%
	{
		width:0;
		height:3px;
	}

	100%
	{
		width:105%;
		height:3px;
	}
}

@keyframes survol_barre_side{

	0%
	{
		opacity: 0;
		right:100%;
	}

	100%
	{
		opacity: 1;
		right:-5%;
	}
}


@keyframes element_spawn{

	0%
	{
		right:150px;
		opacity: 0;
		-o-transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
		-ms-transform: rotate(-15deg)
		transform: rotate(-15deg);
	}

	100%
	{
		right:0;
		-o-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg)
		transform: rotate(0deg);
		opacity: 1;
	}
}

@keyframes hide_check{

	0%
	{
		left:0;
	}

	100%
	{
		left:100%;
		display: none;
	}
}

@keyframes h1_smaller{

	0%{
		width:30%;
	}

	100%{
		width:100%;
	}
}