body{
	margin: 0 auto;
	}
h1,h2,h3,p,a{font-family:'Roboto', sans-serif;
}

a{text-decoration: none;}
	
	.arrow{display:none;}

	/* burger */
	/* *********************************************************************************************** */
		
		#telephone {display: none;}
		#entete{display: none;}  
		#navigateur{display: none;}
		#logo{display: none;}

		.burger{width: 100vw;height: auto;display: flex;justify-content: flex-end;}

		.nav2 {
		display: inline-flex;
		align-items: flex-start;
		justify-content: flex-end;
		width:100%;
		margin: 0 ;
		}
		
		.above-overlay { z-index: 10001; }

		.nav2 a.nav-brand {}

		.menu-burger {
		width: 30px;
		height: 22px;
		cursor: pointer;
		display: block;
		margin: 0 ;
		padding: 50px ;
		}

		.bar,
		.bar:after,
		.bar:before {
		height: 5px;
		background: white;
		}

		.bar:before { width: 50px;margin-bottom: 10px; }
		.bar  		{ width: 50px; }
		.bar:after 	{ width: 50px; margin-top: 10px; }

		.bar {
			position: relative;
			transform: translateY(10px);
			transition: all 0ms 300ms;
		}

		.bar.animate {
			width: 50px;
			background: rgba(255, 255, 255, 0);
		}

		.bar:before {
			content: "";
			position: absolute;
			left: 0;
			bottom: 10px;
			transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		}

		.bar:after {
			content: "";
			position: absolute;
			left: 0;
			top: 10px;
			transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
		}

		.bar.animate:after {
			width: 50px;
			bottom: : 18px;
			transform: rotate(45deg);
			transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		}

		.bar.animate:before {
			top: 18px;
			transform: rotate(-45deg);
			transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
		}


		/*overlay*/

		.overlay {
			display: none;
			position: absolute;
			height: 100vh;
			width: 100vw;
			top: 0;
			overflow: auto;
			z-index: 10000; 
			background: lightgrey;
			opacity: 0.90;
			background-attachment: fixed;
			background-position:  center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.overlay a { text-decoration: none; }

		.overlay .menu-options-list {
		
			display: flex;
			flex-flow: column nowrap;
			text-align: left;
			padding-left: 50px;
			padding-top: 100px;
			margin:  0;
		}

		.overlay .menu-option {
			display: block;
			width: 100%;
			margin: 10px 0;
		}

		.overlay .menu-option:hover {
			background:#00a79e ;
				-webkit-text-fill-color: #fff;
			margin-left: 35px;
			padding-left: 2px;
			webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-ms-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.overlay .menu-option a {
			color: grey;
			font-size:1.9em ;
			letter-spacing: 2px;
		}

		.overlay .menu-option:hover a {
			color: #fff;
		}

		.overlay .menu-option a span { color: #a3876d;}

		@-webkit-keyframes slideDownIn {
			0%   { opacity: 0;
				transform: translate(0, -100px);
			}
			100% { opacity: 1;
				transform: translate(0, 0);
			}
		}
		@-moz-keyframes slideDownIn {
			0%   { opacity: 0;
				transform: translate(0, -100px);
			}
			100% { opacity: 1;
				transform: translate(0, 0);
			}
		}
		@-o-keyframes slideDownIn {
			0%   { opacity: 0;
				transform: translate(0, -100px);
			}
			100% { opacity: 1;
				transform: translate(0, 0);
			}
		}
		@keyframes slideDownIn {
			0%   { opacity: 0;
				transform: translate(0, -50px);
			}
			100% { opacity: 1;
				transform: translate(0, 0);
			}
		}

		.slideDownIn {
			-webkit-animation: slideDownIn 1s; /* Safari 4+ */
			-moz-animation:    slideDownIn 1s; /* Fx 5+ */
			-o-animation:      slideDownIn 1s; /* Opera 12+ */
			animation:         slideDownIn 1s; /* IE 10+, Fx 29+ */
		}

	/* page
	******************************************************************************** */

		.accueil{
		background-repeat: no-repeat;
		background-position: center;
		max-width: 100vw;
		min-height: 100vh;
		height: auto;
		display: flex; 
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		}
		.accueil1{background-image: url(../medias/coaching-individuel.jpg);}
		.accueil2{background-image: url(../medias/coaching-couple.jpg);}
		.accueil3{background-image: url(../medias/coaching-autonomie.jpg);}
		.accueil4{background-image: url(../medias/reponses-coaching.jpg);}
		.accueil5{background-image: url(../medias/votre-coach.jpg);}
		.accueil6{background-image: url(../medias/legende-sphinx.jpg);}
		.accueil7{background-image: url(../medias/contact.jpg);}
		.accueil8{background-image: url(../medias/mentions.jpg);}
		.accueil9{background-image: url(../medias/plan.jpg);}

		h1{color: lightgrey; 
		font-weight: lighter;
		font-size: 2em;
		text-align: left;
		}


		#fonddepage{background-color: rgba(255,255,255,0.6);
		width: 80%;
		height: 80%;
		border-radius: 15px 15px 0 0;
		padding: 10px ;
		padding-top: 30px;
		padding-bottom: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		}
		#fonddepage h1{color: #00a79e; text-align:center; }
		.clair{opacity: 0.7;}
		.paragraphe::first-letter {
			  font-size:2.5em;
				padding-right:0.1em;
			  color:#00a79e;
			}
		#fonddepage p{text-align: justify;
			line-height: 35px;
			margin: 20px 5vw 0 5vw; 
			text-indent: 20px;
			font-size: 1em;
			font-weight: lighter;}

			main {padding: 0 30px; margin-bottom: 10vh;}

			main p{text-align: justify; 
					line-height: 35px;
					 margin-top:30px; 
					 margin-left:5vw;
					 margin-right: 5vw; 
					 text-indent: 20px;
					 font-size: 1em;
					 font-weight: lighter;}


			.bouton3{width: 100%;display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 5vh;
			color: #00a79e;
			}
			.bouton4{width: 220px;
				height: 50px;
				border-radius: 3px;
				border: solid 1px #00a79e;
				display: flex;
				flex-direction: row;
				align-items: center; 
				padding: 10px; 
				justify-content: space-between;
				color:#00a79e 
			}

			.bouton4 p{font-size: 1.6em; margin: 0;text-indent: 0;}

			.triangle {
			  width: 0; 
			  height: 0; 
			 border-top: 0.6em solid transparent;
			  border-bottom: 0.6em solid transparent; 
			  border-left:0.6em solid #00a79e; 
			}

			.bouton4:hover{color:#fff;background-color:#00a79e;font-weight: bolder; }

			.bouton4:hover .triangle {
			  width: 0; 
			  height: 0; 
			  border-top: 0.6em solid transparent;
			  border-bottom: 0.6em solid transparent; 
			  border-left:0.6em solid #fff; 
			}

			#nom{width: 100%;
			display: flex;
			justify-content: flex-end;
			}
			.centre{width:100%;display: flex;justify-content: center;margin-top: 3vh;}
			.photo{width: 8vw;}
			.photo img{width: 100%;}

			.fleche {
			position: relative;
			background: #00a79e;
			width: 80%;
			height: 35px;
			color: lightgrey;
			margin-left: 10px;
			padding-left: 20px;
			display: flex;
			align-items: center;
			}
			.fleche:after {
			left: 100%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(0, 167, 158, 0);
			border-left-color: #00a79e;
			border-width: 17.5px;
			margin-top: -17.5px;
			}
			.reponse {margin-bottom: 7vh;}
			h2{font-size: 1em;
				text-align: left; 
				font-weight: lighter;
			}
			.intfleche{line-height: 35px;
			 margin-top:20px;
			  margin-left:10px;
			  margin-right:10px; 
			  font-size: 1em;
			  font-weight: lighter;}

			  .photocontact{display: none;}
		.icones{display: none;}

		.coordonnees{display: flex;
		flex-direction: row;
		width: 80vw;
		align-items: center;
		}
		.coordonnees p{font-size: 1em; }

		.tout article{display: flex;
		flex-direction: column;
		align-items: space-between;
		max-width: 90vw;
		}
		
		.tout{border-radius: 3px;
			border: solid 2px #00a79e;
			margin: 10vh 15px ;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			max-width: 100vw;
		}

			.saufcontact p{text-align: justify;
 			margin-top:0; 
		 	margin-left:0;
		 	margin-right: 0; 
		 	text-indent: 0;
 			font-size: 1em;
			font-weight: lighter;}

			#contactform {
			display: flex;
			flex-direction: column;
			width: 80vw;
			}
		.moitiecontact{width:100%;}
		input {
		margin-bottom: 10px;
		width: 97%;
		outline: none;
		border: 1px solid lightgrey;
		border-radius: 3px;
		letter-spacing: 2px;
		font-size: 11px;
		padding-left: 15px;
		height: 60px;
		border-radius: 0;
		}
		textarea {
		margin-bottom: 14px;
		width: 93%;
		outline: none;
		border: 1px solid lightgrey;
		letter-spacing: 2px;
		font-size: 11px;
		padding: 15px;
		height: 218px;
		border-radius: 3px;
		}
		.btn {
		width: 100%;
		height: 50px;
		border-radius: 3px;
		border: 1px solid #fff;
		background: $btnBackground;
		color: #00a79e;
		&:hover {
			background: lighten($btnBackground, 50%);
		}
		}
		}

		#map-canvas {

		}
		.mentions{color: #00a79e;font-size: 1.5em;}
		.plan{color: #00a79e;font-size: 1.2em;}
		.plan:hover{color: lightgrey;}
	/* footer
	******************************************************************************** */
		
		.imagefooter{display: none;}

		footer{height:auto;
		background-color:#040e20; 
		display:flex;
		flex-direction: column;
		justify-content: flex-end;
		}
		.contactez{padding-bottom: 30px;}
		.infos{display: flex;
		flex-direction: column;
		justify-content: space-between;
		}
		.informations{padding-left: 15px;
		 color: lightgrey;
		}
		.informations a{color: lightgrey;
		}
		.informations a:hover{color:#00a79e;
		}

		.imagefooter img{height: 100%;
		}
		.pied{height:4vh;
			background-color:#051228; 
			display:flex;
			align-items: center; 
			padding: 0 15px;
		}
		.pied a, .pied p{color: lightgrey; 
			font-size: 10pt;
		}
		.pied a:hover{color:#00a79e;
		}

	/* ECRANS tablettes
	******************************************************************************** */
@media (min-width:580px)and (max-width: 1350px){

	.coordonnees p{font-size: 2em; }
	#fonddepage p{font-size: 1.2em;}
	main {padding: 0 10vw;}
	main p{font-size: 1.2em;}
	h1{font-size: 2.5em}
	.plan{color: #00a79e;font-size: 1.5em;}
	.infos{flex-direction: row; padding: 10px;}
}
	/* ECRANS PC
	******************************************************************************** */
	@media (min-width:1351px) {

		/* NAVIGATEUR
		******************************************************************************** */
			.burger{display: none;}
			.nav2{display: none;}
			.overlay{display: none;}

			#fixe{background-image:linear-gradient(#040e20 10%,transparent 101%);
			width: 100%;
			display: flex;
			flex-direction: row;
			height: 15vh;
			}
			.menu{width: 100%;}

			#entete{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 15px;
			}

			#navigateur{display:flex; flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
				padding:0 15px;
				height: 15vh;
				width: 90%;
			}
			#navigateur span{color: lightgrey;}
			#fixe a,#fixe p{
				color: lightgrey;
			}
			#fixe a{font-size: 1em;}
			#fixe a:hover{color: #00a79e;	
			}
			
			#entete p{font-size: 1.2em;color:#CB300A; font-weight: bolder;
			}

			#logo{display:block;height: 14vh;
			}
			#logo img{height: 100%;
			}


			#telephone{display:block;height: 2vh;margin-right: 5px;
			}
			#telephone img{height: 100%;
			}

		/* page
		******************************************************************************** */
			.accueil{height: 100vh;}

			#fonddepage{
			width: 60%;
			height: 50%; 
			padding: 50px ;
			padding-top: 100px;

			}
			h1{font-size: 3.3em;}
			.clair{opacity: 0.5;}
			#fonddepage p{
				margin: 100px 100px 0 100px; 
				text-indent: 50px;
				font-size: 1.1em;}
			
			.autonomie{margin-bottom: 3vh;}

			#logo2{height: 10vh; 
			}
			#logo2 img{height: 100%;margin-top: 3vh;
			}
			#logo3{width: 100%; display: flex;justify-content: center;}

			main {padding: 0 20vw;}
			main p{text-align: justify; 
					line-height: 35px;
					 margin-top:50px; 
					 margin-left:100px;
					 margin-right: 100px; 
					 text-indent: 50px;
					 font-size: 1.1em;
					 font-weight: lighter;}

			.fleche {
			position: relative;
			background: #00a79e;
			width: 35vw;
			height: 35px;
			color: lightgrey;
			margin-left: 100px;
			padding-left: 20px;
			}
			.fleche:after {
			left: 100%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(0, 167, 158, 0);
			border-left-color: #00a79e;
			border-width: 17.5px;
			margin-top: -17.5px;
			}
			.reponse {margin-bottom: 7vh;}
			
			h2{font-size: 1.5em;text-align: left; font-weight: lighter;}
			.intfleche{line-height: 35px; 
				margin-top:20px; 
				margin-left:100px;
				margin-right: 100px; 
				font-size: 1.1em;
				font-weight: lighter;}

			.photocontact{display:block;width: 40vw;
			}
			.photocontact img{width:100%;
			}
			.icones{display:block;width: 30px; margin-right: 2vw; border-radius: 3px;margin-top: -15px;
			}
			.icones img{width: 100%;border-radius: 3px;
			}
			
			.coordonnees{width:30vw;}
			.coordonnees p{font-size: 1.6em; }
			.tout{padding: 50px; height: 70vh;}

			#contactform {
			display: flex;
			flex-direction: row;
			width: 60vw;
			}
			input{width: 90%;
				margin-bottom: 29px;}

			.plan{color: #00a79e;font-size: 1.5em;}	

		/* footer
		******************************************************************************** */
			.imagefooter{display: block;height: 16vh;
			}
			footer{height:20vh;
			background-color:#040e20; 
			display:flex;
			flex-direction: column;
			justify-content: flex-end;
			}
			.infos{flex-direction: row;}
			.contactez{padding-bottom: 0;}

		/* scrollup
		******************************************************************************** */

			.scrollup {
			border-radius: 20px;
			width: 40px;
			height: 40px;
			position: fixed;
			bottom: 21vh;
			right: 50px;
			display: none;
			color: white;
			background-color: #00a79e;
			border: 1px solid #00a79e;
			font-size: 20px;
			text-align: center;
			line-height: 37px;
			box-shadow:4px 4px 15px #040e20;
			}
 
			.scrollup:hover {
				color: white;
			}
			.arrow{display:inline;width: 15px;}	

}