@font-face{
	font-family: NewTimesRoman;
	src: url("font/times.ttf");
} 

body{
	background-size: cover;
	background: red;
	 font-size: 16px;
	 color: #353535;
	 margin: 0;
	 padding: 0;
}
body, li{
	font-family:  NewTimesroman;
	font-color:black;
}
h1, h2, h3, h4, h5{
	font-family: 'Playfair Display', serif;
	font-weight: normal;
}
p{
	font-family: 'Open Sans', sans-serif;
}
a{
	color: black;
	text-decoration: none;
}
a:hover{
	color: grey;
	text-decoration: none;
}


 @keyframes apparitionOpac {
      0%   {opacity:0;}
      100%   {opacity: 1;}
}

 @-webkit-keyframes apparitionOpac {
      0%   {opacity:0;}
      100%   {opacity: 1;}
}
html {
  scroll-behavior: smooth;
}

input, select { font-size: 100%; }

/*------------------------------NAVIGUATION---------------------------------*/

#burger_menu img{
	z-index: 998;
	position: fixed;
	width: 40px;
	top:30px;
	left:30px;
}

#menu_cross{
	width:40px;
	margin: 30px 0 0 30px;
}


nav ul {
	list-style-type: none;
}

nav li{

}


	nav{
	z-index: 999;
	position: fixed;
	background-color: white;
	height: 100%;
	width: 400px;
	display: none;
	top: 0px;
}
	#logo_pres{
	width:300px;
	margin-left: 20px;
}
nav ul {
	margin-left: 8px;
	margin-top: -50px;
}
	nav li{
		font-size: 25px;
		margin-top: 10px;
}

nav li a{
	
}


@media only screen  and (min-height:1080px) and (max-width: 1440px) {

	#burger_menu img{

	width: 80px;

}
#menu_cross{
	width: 80px;
}
#logo_pres{
	width:70%;
	margin-left: 50%;
	transform: translateX(-50%);
}
	nav{
		width: 100%;
	}
	nav ul {
		text-align: center;
		margin-left: 50%;
	transform: translateX(-50%);
	width: 100%;
	}
	nav li{
		font-size: 60px;
		font-family: 'Playfair Display', serif;
		margin: 20px 0 20px 0;


	}
}
	#remonteFleche {
		display: none;
	}


@media only screen  and  (min-width: 960px) {
	#remonteFleche{
		display: block;
		position: fixed;
		top: 100%;
		left: 100%;
		transform: translate(-100%,-100%);
		width: 75px;
		height: 75px;
		padding: 20px;

	}
	#remonteFleche img{
		width: 100%;
	}


	#remonteFleche img:hover{
		animation: flecheHautAnimHover 0.5s infinite;
	}

}
@keyframes flecheHautAnimHover{
	 	0%{transform: translateY(0);}
	 	50%{transform: translateY(-5px);}
	 	100%{transform: translateY(0);}
	 } 


/*---------------------------PAGES------------------------------*/

  body {
    background-color: white;
  }
.pageEntiere{
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
}
  .pageInte{
  	position: absolute;
  	transform: translateY(-50%);
  	transform: translateX(-50%);

  	left:50%;
  	width: 960px;
  	height:500px;
  
  }



  .pageInteDeux{
  	width:960px;
  	margin: 0 auto;
  }


.iconDown{
	position: fixed;
	padding: 20px;
	width: 100px;
	top:100%;
	left:100%;
	transform: translate(-100%,-100%);
	display: none;


}
.iconDown:hover{
	opacity: 0.5;
}

#footer{

}

/*---------------------------PRESENTATION------------------------------*/
	 @keyframes droiteAppa{
	 	0%{width:0%;}
	 	100%{width:49%;}
	 } 

	 @keyframes topAppa{
	 	0%{top:-100%; }
	 	100%{top:0;}
	 }
	  @-webkit-keyframes droiteAppa{
	 	0%{width:0%}
	 	100%{width:49%;}
	 } 

	 @-webkit-keyframes topAppa{
	 	0%{top:-100%; }
	 	100%{top:0;}
	 }

	 @keyframes colorchange {
	      0%   {background: #e1ebf7;}
	      20%  {background: #efe5ee;}
	      40%  {background: #fcdfd7;}
	      60%  {background: #d4ecdc;}
	     80% {background: #fcf9da;}
	     90% {background: #eef1f6;}
	      100%   {background: #e1ebf7;}
	}

	 @-webkit-keyframes colorchange {
	      0%   {background: #e1ebf7;}
	      20%  {background: #efe5ee;}
	      40%  {background: #fcdfd7;}
	      60%  {background: #d4ecdc;}
	     80% {background: #fcf9da;}
	     90% {background: #eef1f6;}
	      100%   {background: #e1ebf7;}
	}

	#colorCarre{
		position: absolute;
		width: 49%;
		height: 100%;
		background-color: white;
		top: 0;
		left: 0;
		z-index: -1;
		animation: colorchange 5s infinite, droiteAppa 2s 1; 
	      -webkit-animation: colorchange 5s infinite, droiteAppa 2s 1; 

	}

@media only screen  and (min-width: 960px) {


	#sarahPres{
		position: fixed;
		top: 50%;
		left:50%;
		transform: translate(-50%,-50%);
		font-family: 'NewTimesRoman', serif;
		z-index: 2;
		font-size: 5vw;
		font-weight: normal;
	}

	#logoTaille{
	 letter-spacing: 2px;
	}
	#logoTaille2{
		letter-spacing: 2px
	}

	#logoTaille3{
		letter-spacing: 1px
	}

	
	#commuPres{
		position: absolute;
		font-size: 30px;
		top:290px;
		left:570px;
	}
	#textPrese{
		position: absolute;
		top:160px;
		left:175px;
		font-size:25px;
		line-height: 30px;
		font-stretch: condensed;
		font-family: 'Playfair Display', serif;
		letter-spacing: 10px;
		font-weight: bold;
	}

	#fondPres{
		display: none;
	}
	  #pageIntePres{
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;

	  }	

	.presPages{

		font-size: 25px;

		font-family: 'Playfair Display', serif;
		position: fixed;
		top:95%;
		transform: translateY(-100%);
		padding:5px;
	}

	.pres1{
		left: 10%;

	}
	.pres2{
		left:50%;
	}

	.pres3{
		left:80%;
	}
}
@media only screen  and (min-height:1080px) and (max-width: 1440px) {



	#sarahPres{
		top: 45%;
		position: fixed;
			width: 100%;
	font-size: 100px;
	font-family: 'NewTimesRoman', serif;
	z-index: 2;
	text-align: center;
	}

	.pres1{

		font-size: 55px;
		top: 70%;
	left: 50%;
	transform: translate(-50%,-50%);

			}
			.pres2{
				font-size: 55px;
				top: 80%;
				left:50%;
				transform: translate(-50%,-50%);
			}

			.pres3{
				font-size: 55px;
				top: 90%;
				left:50%;
				transform: translate(-50%,-50%);
			}
		
			#colorCarre{
				height: 40%;
				width: 70%;
				top: 20%;
				left: 15%;

				animation: colorchange 5s infinite, droiteAppa none; 
					}

	}


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



	#sarahPres{
		top: 25%;
		position: fixed;
			width: 100%;
	font-size: 100px;
	font-family: 'NewTimesRoman', serif;
	z-index: 2;
	text-align: center;
	font-size: 7vw;
	}

	.pres1{
		position: absolute;

		font-size: 6vw;
		top: 70%;
	left: 50%;
	transform: translate(-50%,-50%);

			}
			.pres2{
				position: absolute;
				font-size: 6vw;
				top: 80%;
				left:50%;
				transform: translate(-50%,-50%);
			}

			.pres3{
				position: absolute;
				font-size: 6vw;
				top: 90%;
				left:50%;
				transform: translate(-50%,-50%);
			}
		


	}

/*---------------------------SERVICES------------------------------*/






	#pageService{
		margin-top: 100px;
		height: 800px;

	}

	#hautService{
		width:100%;
		text-align: center;
		

	}

	#hautService h1{
		 animation: apparitionOpac  3s; 
		font-size: 75px;
		margin: 100px;

	}
		#hautService h3{
			margin-top: 75px;
		letter-spacing: 3px;
		font-size: 25px;
		line-height: 40px;

	}


		.orgaService img{
		width:100%;
	}


	.orgaService h4{
		margin-top: 40px;
		font-size: 25px;
	}

	.orgaService p{
		line-height: 35px;
		width: 100%;
		margin: 0px auto 0 auto;
	} 


	.ligneService2 div{
		margin-top: 200px;

	}





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

		#hautService h1{
			margin: 0;
			font-size: 15vw;
			width: 100%;
			padding: 10px;
		}

	.orgaService {
	
		margin: 30px;

	}
		.orgaService p{
		line-height: 35px;
		width: 100%;
		margin: 0px auto 150px auto;
	} 



	#blocServices{

		position: absolute;

		text-align: center;



	}

	}


@media only screen and (min-width: 960px){

	#blocServices{
		position: absolute;
		width: 960px;
		left: 50%;
		transform: translate(-40%,0);


	}


	.orgaService {
		width: 250px;
		height: 650px;
		float: left;
		margin: 15px;
		text-align: center;
			animation: apparitionOpac  1s;

	}


}


.appa4 p{
 word-spacing: 4px;
}





/*---------------------------QUI------------------------------*/


@keyframes sarahSlideTop{

	0%{top: -100px;}
	100%{top: 200px;}
}

@keyframes botAppa{

	0%{top: 100%;}
	100%{top: 0;}
}

@keyframes gaucheAppa{

	0%{left: -200%;}
	100%{left: 0;}
}

@keyframes colonneDroiteAppa{

	0%{left: 200%;}
	100%{left: 500px;}
}

@media only screen  and (min-width: 960px){

		#pageQui h1{

		font-size: 55px;
		letter-spacing: 10px;

		animation: sarahSlideTop 2s;
		width: 960px;
		text-align: center;
		margin: 100px 0 100px 0;


	}

	#profilSarah{
		width: 502px;
		height: 417px;

		margin: 0 auto;
	}

	#inteQui{
		width: 960px;
		margin: 100px auto 0 auto;
	}


	.photoGauche{
		float: left;
	}


	.blocSarah{
		width: 960px;
		height: 310px;
		margin: 80px 0 80px 0;
	}
	.blocSarah img{
		height: 310px;
		width: 310px;
	}
	.courtGauche{
		width:310px;
		height: 100%;
		float: left;
	}

	.longGauche{
		width: 650px;
		height: 100%;
		float: left;
	}

	.longDroit{
		width: 650px;
		height: 100%;
		margin-left: 310px;

	}

	.blocSarah p{
		font-size: 15px;
		height: 200px;
		width: 500px;
		margin: auto;
		text-align: justify;
		padding-top: 70px;
		word-spacing: 1px;
		letter-spacing: 1px;

	}
}

.debutQui{
	font-weight: bold;
	font-family: 'Playfair Display', serif;
}

#sarahQuiMobile{
	display: none;
}
#quiSarahImgMobile{
	display: none;
}

#QuiSuisJe{
		display: none;
	}

@media only screen  and (min-height:1080px) and (max-width: 1440px) {

	#QuiSuisJe{
		display: block;
		width: 100%;
		height: 100px;
		position: absolute;
		top: 90%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 998;
		text-align: center;
		
	}

	#QuiSuisJe h5{
		font-size: 75px;
		margin: 0 0 30px 0;

	}
	#QuiSuisJe img{
		height: 100px;
	}
	#inteQui{
		margin: 0;
		width: 100%;
	}
	#profilSarah{

		width: 100vw;
		height: 100vh;
		margin: 0 0 200px 0;

	}
	#profilSarah img{
		position: absolute;
		width: 100%;
		height: auto;


	}
	#pageQui h1{
		font-size: 75px;
		position: absolute;
		animation:none;
		background: white;
		position: fixed;
		top: 50%;	
		left: 5%;
		width: 90%;
		padding: 5px;

	}


	#sarahQuiOrdi{
		display: none;
	}
	#sarahQuiMobile{
		display: block;
	}

	#quiSarahImgMobile{
		display: block;
	}
	#quiSarahImgOrdi{
		display: none;
	}
	.blocSarahMobile {
		width: 100%;
		text-align: center;

	
	}
	.blocSarahMobile img{
	
		transform: scale(1.2);
	
	}
	.blocSarahMobile p{
		font-size: 35px;
		text-align: justify;
		width: 80%;
		margin: 100px 0 200px 10%;
	}
}


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

		#sarahQuiOrdi{
		display: none;
	}
	#sarahQuiMobile{
		display: block;
	}

#pageQui h1{
		font-size: 15vw;
	width: 100%;
	text-align: center;
	margin: 100px 0 100px 0;

	}
	#inteQui {
		width: 100%;
	}
	#profilSarah{
	width: 100%;
}
	#quiSarahImgOrdi{
		width: 100%;
	}
	.blocSarahMobile img{
		width: 50%;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.blocSarahMobile p{
		font-size: 15px;
		text-align: justify;
		width: 80%;
		margin: 50px 0 100px 10%;
	}



}
/*---------------------CLIENT------------------------------*/



@media only screen and (min-width: 960px)  {




		#pageClient{
			margin-top: 50px;
		
		}

		#compteur{
			width: 960px;
			margin-top: 100px;
			background: url("../img/compteuressai1.jpg") no-repeat bottom  fixed;
			height: 200px;
				font-size: 40px;
				animation: apparitionOpac 5s;
		}



		.stat{
			text-align: center;
			float: left;
			color: white;
			width:240px;
			font-family: 'Playfair Display', serif;
			margin: 30px 0 0 0;
		}
		#pageClient h1{
			font-size: 70px;
			animation: apparitionOpac 1s;
			padding: 20px;



		}
		#pageClient h4{
			font-size: 35px;

		}
		#pageClient p{
			margin-top: 20px;
			line-height: 40px;
			font-size: 45px;
			font-family: 'Roboto Condensed', sans-serif;
		}

		#blocClient{
			opacity:1;
			text-align: left;
			animation: apparitionOpac 7s;
			animation-fill-mode: none;
			margin-top: 50px;


		}


		#blocClient img{
			max-width: 320px;


		}

		.clientLogo{
			width: 33%;
			height: 320px;
			float: left;
			text-align: center;
		}
		.clientLogo img{

			margin-top: 50%;
			transform: translateY(-100%);
			max-height: 250px;
		}


			.centralPage{
			width: 960px;
			margin: 0 auto;
		}

	}


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

	#pageClient h1{
			font-size: 50px;
			animation: apparitionOpac 1s;
			margin: 100px 0 0 0;
			text-align: center;
			padding: 15px;


		}


	#compteur{

			width: 80vw;
			background:url("../img/compteuressai1.jpg") no-repeat  bottom ;
			background-size:100vw;
				font-size: 40px;
				animation: apparitionOpac 5s;
				overflow: hidden;
				margin-top: 50px;
				margin-left: 10vw;
		
			
		}

		.stat{
			float: left;
			text-align: center;
			color: white;
			font-family: 'Playfair Display', serif;
			width: 25%;
			font-size: 3vw;
						font-weight: bold;

		}


		.centralPage{
		width: 100%;
		margin: 0 auto;
	}
	#blocClient {
		margin: 100px 0 0 0;
		width: 100vw;
		text-align: center;

	}
	#blocClient a {
		width: 100%;
		float: right;

	}

	#blocClient img {
		height: 100%;

	}

	.clientLogo img{
		max-width: 80%;
		max-height: 200px;
	}
}

@media only screen and (min-height:1080px) and (max-width: 1440px) {
	#pageContact{
		width: 100vw;
	}
	.pageInte{
		width: 100%;
	}
	#pageClient{
		width: 100%;
			margin:0;
		}

 

	#pageClient h1{
			font-size: 120px;
			animation: apparitionOpac 1s;
			margin: 100px 0 0 0;
			text-align: center;


		}


	#compteur{

		width: 80vw;
		background:  url("../img/compteuressai1.jpg") bottom;
		background-size: 100vw;
				font-size: 40px;
				text-align: center;
							margin-top: 50px;
				margin-left: 10vw;
		}

		.stat{
			float: left;
			text-align: center;
			color: white;
			font-family: 'Playfair Display', serif;
			width: 25%;
			font-size: 3vw;
			font-weight: bold;
	
		}


		.centralPage{
		width: 100%;
		margin: 0 auto;
	}
	#blocClient {
		margin: 100px 0 0 0;

	}
	#blocClient a {
		width: 100%;
		height: 400px;
		margin: 0 0 0 0;
	

	}

	#blocClient img {
	
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

	@keyframes clientAgran{
		0%{transform: scale(1,1) translateY(-100%);}
		100%{transform: scale(1.1,1.1) translateY(-100%);}
	}
	@-webkit-keyframes clientAgran{
		0%{transform: scale(1,1) translateY(-100%);
		}
		100%{transform: scale(1.1,1.1) translateY(-100%);}
	}

	.clientLogo img:hover{

		animation: clientAgran 1s 1;
		-webkit-animation: clientAgran 1s 1;

		}



	




		

/*---------------------------CONTACT------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}



.container {
	text-align: center;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.container img{
	width:100%;
	margin: 0 0 20px;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="number"],
#contact input[type="sujet"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
}

#titreContact {
  display: block;
  font-size: 50px;
  font-weight: 300;
  margin: 100px auto 50px auto;
  max-width: 600px;
  color: black;
  text-align: center;

}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="number"],
#contact input[type="sujet"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="number"]:hover,
#contact input[type="sujet"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  color: black;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #727272;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}


@media only screen and (max-width: 1080px){
	.sousFormn{
	background: #F9F9F9;
	margin: 50px auto ;
	padding: 15px;
	color: black;
	max-width: 600px;
	text-align: center;
}

	.sousFormn img{
		height: 130px;
	}
}


@media only screen and (min-width: 1080px){

	.sousFormn img{
		width: 30%;
		position: fixed;
		padding: 10px;
		left: 100%;
		top: 100%;
		transform: translate(-100%,-100%);
	}
}

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}




#responseForm{
	width: 300px;
	margin: 100px auto 0 auto;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
}
#redirection{
	font-weight: normal;
}
#redirection img{
	margin: 0;
	width: 100px;

}