body{
	margin: 0 auto;
	}
h2,h3,p,a{font-family:'Roboto', sans-serif;
}
h1{font-family: 'Dancing Script', cursive;}
a{text-decoration: none;}




#telephone {display: none;}
#entete{display: none;}  
#navigateur{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+ */
		}


	/* Accueil
	******************************************************************************** */

		#accueil{
		background-image: url(../medias/ciel-bleu.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
				background-position: center;
				background-size: cover;
		min-height: 100vh;
		max-width: 100vw;
		display: flex; 
		flex-direction: column;
		}

		.titre{width: 100%;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 15vh;
		}
		
		h1{color: lightgrey; 
			font-weight: lighter;
			font-size:1.6em;
			text-align: center;
			line-height: 50px;
			
		}
		#logotitre{height: 15vh;}
		#logotitre img{height:100%; }


	/* Sections
	******************************************************************************** */
		

		.image, .image2{display: none;}

		.paragraphe1, .paragraphe2, .paragraphe3{text-indent: 50px;font-size: 1.1em;text-align: justify;line-height: 30px;font-weight: lighter;}
	
		.paragraphe::first-letter {
		  font-size:2.5em;
			padding-right:0.1em;
		  color:#00a79e;}

		 
		h2{color:#00a79e;
		font-size: 1.4em;
		font-weight: lighter;
		}
		


		.articledroite, .articlegauche,.articlegauche2{ display: flex;
		flex-direction: column;
		width: 100%; 
		justify-content: center;
		align-items: center;
		}

		.articleimage{display: flex;
		flex-direction: column;
		padding: 0 50px;
		justify-content:center;
		align-items: space-between;
		margin-bottom: 10vh;
		}

		.bouton{width: 45vw;display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 5vh;
		}
		
		.texte{display: flex;
		flex-direction: column;
		padding: 0 10px;
		justify-content: space-around;
		align-items: center;
		}
		.articlecentre{width: 70vw;
		border-radius: 3px;
		border: solid 2px #00a79e;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10vh;
		}

		.bouton2{width: 200px; 
		height: 50px;
		border: solid 1px #00a79e; 
		text-align: center;
		color:#00a79e; 
		text-decoration: none;
		border-radius: 3px;
		}

		.bouton2:hover{color:#fff;background-color:#00a79e;font-weight: bold; }

		
		.photocontact{display: none;}
		.icones{display: none;}
		.coordonnees p{font-size: 1em; }

		.coordonnees{display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		}
		.centree{display: flex;
			justify-content: center;
			align-items: center;}

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

		.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;}

		.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; 
	}
	
	/* 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;
		}

		
		.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; }
	h1{font-size: 2.5em;}
	
	h2{font-size: 1.6em;}
	.articleimage{padding: 0 150px;}
	.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 103%);
			width: 100%;
			position: fixed;
			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%;
			}


	/* Accueil
	******************************************************************************** */
		.titre{
			flex-direction: row;
			justify-content: flex-start;
			padding-left: 50px;
			width: 85%;
			margin-top: 20vh;
		}
		#logotitre{display: none;}

		h1{font-size: 3.9em;
			text-align: left;
		line-height: 100px;}



	/* Sections
	******************************************************************************** */
		.articlecentre h2{font-size: 1.6em;}
		h2{font-size:1.6em; }

		.image, .image2 {display: block;
			width: 35vw; 
			max-height: 90vh;
			box-shadow:8px 8px 30px #040e20;
			border-radius: 3px;
		}
		.image{margin-top:-10vh;}
		.image2{margin-top: 10vh;}
		.image img,.image2 img{width: 100%; height: 100%;border-radius: 3px;
		}

		.articledroite{
		width: 45vw; 
		justify-content: flex-start;
				align-items: flex-start;
		margin-top: 10vh;padding-right: 15vh;
		}

		.articleimage{display: flex;
		flex-direction: row;
		padding: 0 50px;
		justify-content:space-between;
				margin-bottom: 0;
		}

			.articlegauche,.articlegauche2{display: flex;
		flex-direction: column;
		width: 45vw; 
		justify-content: flex-start;
		align-items: flex-end;
		text-align: right;
		padding-left: 15vh;}
		.ariclegauche{margin-top: 10vh;}
		.articlegauche2{margin-top: 20vh;}

		.bouton{width: 45vw;display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 5vh;
		}

		.texte{display: flex;
		flex-direction: row;
		margin-top: 10vh;
		padding: 0 50px;
		justify-content: space-around;
		}
		.articlecentre{width: 30vw;
		height: 70vh;
		border-radius: 3px;
		border: solid 2px #00a79e;
		padding: 50px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0;
		}

		.icones{display:block;width: 40px; margin-right: 2vw; border-radius: 3px;
		}

		.icones img{width: 100%;border-radius: 3px;
		}
		.photocontact{display:block;width: 45vw;
		}
		.photocontact img{width:100%;
		}
		.coordonnees p{font-size: 1.3em; }
		.coordonnees{width: 30vw;}

		.tout{border-radius: 3px;
		border: solid 2px #00a79e;
		margin: 10vh 15px ;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 50px;
		height: 70vh;
		width: auto;
		}
		.tout article{display: flex;
		flex-direction: column;
		align-items: space-between;
		}
		.bouton3{width: 25vw;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;}

		.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; 
		}
	/* footer
	******************************************************************************** */
			.imagefooter{display: block;height: 16vh;
			}
			.imagefooter img{height: 100%;}
			footer{height:20vh;
			background-color:#040e20; 
			display:flex;
			flex-direction: column;
			justify-content: flex-end;
			}
			.infos{flex-direction: row;}
			.contactez{padding-bottom: 0;}


}