@charset "UTF-8";

*{
	margin:0;
	padding:0;
	-moz-box-sizing:0;
	-webkit-box-sizing:0;
	-ms-box-sizing:0;
	-o-box-sizing:0;
	box-sizing:0;
}

@font-face {
    font-family: 'sansationregular';
    src: url('police/Sansation-Regular-webfont.eot');
    src: url('police/Sansation-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Sansation-Regular-webfont.woff') format('woff'),
         url('police/Sansation-Regular-webfont.otf') format('truetype'),
         url('police/Sansation-Regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
	font-family:'sansationregular';
}

body#homepage{
	font-family:'sansationregular';
	background-image:url(images/fond_accueil.jpg);
	background-size: cover;
}

nav{
	width:100%;
	text-align:center;
	padding-top:35px;
	font-size:20px;
	height:10vh;
	
	}

li{
	display:inline;
	
}

ul a{
	color:#FFF;
	display:inline-block;
	text-decoration:none;
	margin-left:40px;
	transform:scale(1);
	transition:transform 0.2s linear;
	
}

nav a:hover{
	border-bottom:2px solid #F5D05D;
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
}

section{
	text-align:center;
	position:relative;
	height:70vh;
}

div.langage{
	position:absolute;
	top:0;
	right:0;
	margin-top:15px;
	margin-right:15px;
}
	
div.langage a{
	border:none;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition:  opacity 0.3s ease;
	transition: opacity 0.3s ease;
	}
	
div.langage a:hover{
	opacity:0.5;
	}

.exergue{
	color:#F5D05D;
	}
	


/*----------------------page d 'accueil-------------------------*/
.homepage P{
	font-size:36px;
	color:#FFF;
}


#menu_accueil{
	height:15vh;
}
.footer_accueil{
	height:20vh;
}
.section_accueil{
	height:65vh;
	margin-bottom:0;
}
.accroche_accueil{
	text-align:center;
}
/*----------------------nav page traduction---------------------*/


a.propos,
a.trad{
	color:#175669;
}
/*-----------------H1 page traduction___________________________*/
.accroche_english_trad{
	margin-bottom:30px;
	}
.titleTrad{
	color:#175669;
	position:relative;
	text-align:left;
	font-size:20px;
	width:900px;
	margin-right:auto;
	margin-left:auto;
}

p#traduction{
	color:#175669;
	text-align:justify;
	margin-top:15px;
	width:900px;
	margin-right:auto;
	margin-left:auto;
}
	

/*---------------------section page traduction-------------------*/
div.conteneur{
	background-color:#175669;
	color:#FFFFFF;
	display:table;
	text-align:justify;
	position:relative;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:25px;
	padding-right:25px;
	
}

div.conteneurEnglish{
	background-color:#175669;
	color:#FFFFFF;
	display:table;
	text-align:justify;
	position:relative;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:25px;
	padding-right:25px;
	
}


/*-------------------Page traduction : 4 étapes-----------------------------------*/

.etapes{
	width:20%;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
	margin-bottom:15px;}

div.contenu1{
	display:table-cell;
	width:50%;
	float:left;
}

div.contenu3{
	display:table-cell;
	width:50%;
	float:left;
}

div.contenu2,
div.contenu4{
	display:table-cell;
	width:50%;
	float:left;
}

div.contenu2{
	margin-top:40px;
	position:relative;
	}
div.contenu4{
	margin-top:40px;
	}

.point1,
.point3,
.point2,
.point4{
	float:left;
	padding-left:20px;
	padding-right:10px;

	}

#para1,
#para2{
	padding-left:80px;
	margin-top:10px;
	}

#para3,
#para4{
	
	padding-left:80px;
	padding-right:30px;
	margin-top:10px;
}

/*-----------------------Page traduction : langues/tarifs-------------------------------------*/
.contenu5{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	position:relative;
}

.tarif,
.langue{
	background-image:url(images/fondRond.png);
	background-repeat:no-repeat;
	width:200px;
	height:200px;
	float:left;
	color:#175669;
}

.tarif{
	margin-left:400px;
	}


.langue h2{
	line-height:180px;
	position:relative;
	left:-6px;
	top:0;
}
	

.langue p{
	text-align:justify;
	position:absolute;
	width:400px;
	left:-100px;
	top:100px;
	-webkit-transform:scaleY(0);
	-moz-transform:scaleY(0);
	-o-transform:scaleY(0);
	transform:scaleY(0);
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	-o-transform-origin:50% 0;
	-webkit-transition:transform 0.2s ease;
	-moz-transition:transform 0.2s ease;
	-o-transform:transform 0.2s ease;
	transform:transform 0.2s ease;
	}
	
.tarif p{
	text-align:justify;
	position:absolute;
	left:500px;
	top:100px;
	width:400px;
	-webkit-transform:scaleY(0);
	-moz-transform:scaleY(0);
	-o-transform:scaleY(0);
	transform:scaleY(0);
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	-o-transform-origin:50% 0;
	-webkit-transition:transform 0.2s ease;
	-moz-transition:transform 0.2s ease;
	-o-transform:transform 0.2s ease;
	transform:transform 0.2s ease;
	}
	
.tarif h2{
	position:relative;
	line-height:180px;
	left:-6px;
	top:0;
	}
	

	
.tarif:hover p,
.langue:hover p{
	-webkit-transform:scaleY(1);
	-moz-transform:scaleY(1);
	-o-transform:scaleY(1);
	transform:scaleY(1);
	}
	
.tarif:hover h2,	
.langue:hover h2{
	top:-15px;
}

h1.titleTrad{
	margin-top:25px;}

footer#translation{
	clear:both;
	font-size:12px;
	color:#F5D05D;
	text-align:center;
	position:relative;
	padding-top:30px;
	}
.MonBlog{
	float:right;
	padding-right:15px;
}

/*-------------------------------page Services----------------------------------*/

body#services{
	background-color:#175669;
}


	
div.contain{
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	text-align:justify;
	padding-left:15px;
	padding-right:15px;
	
	
}

div.contain1{
	width:500px;
	float:left;
	position:relative;
}

img#bulle{
	padding-left:150px;
}
.contain3 h1,
.contain2 h1,
.contain1 h1{
	text-align:center;
	margin-top:15px;
	color:#FFFFFF;
}
.contain3 p,
.contain2 p,
.contain1 p{
	margin-top:20px;
	line-height:25px;
	color:#FFFFFF;
	
}

div.contain2{
	width:500Px;
	margin-left:100px;
	float:left;
	margin-top:15px;
}
div.contain3{
	width:500Px;
	margin-left:100px;
	float:left;
	margin-top:40px;
	}
img#feuille{
	padding-left:200px;
}

img#oeil{
	padding-left:170px;}

/*-------------------------------page A propos----------------------------------*/

body#apropos{
	background-image:url(images/AL.png);
	background-repeat:no-repeat;
	background-position:center right;
	}
	
div.contain_apropos{
	width:1100px;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	text-align:justify;
}

div.contain_apropos p{
	color:#175669;
	float:left;
	width:650px;
	padding-top:10px;
	padding-left:75px;
	line-height:25px;
	}
p.propos1{
	margin-top:80px;
}	
img.apropos{
	float:left;
	margin-top:70px;
}

img.accroche{
	float:left;
	padding-left:200px;
	padding-top:50px;
	padding-bottom:25px;
}

div.contain_apropos h1{
	color:#175669;
	float:left;
	padding-left:75px;
	padding-bottom:5px;
	padding-top:30px;
	width:600px;
}

.temoignages{
	clear:both;
	color:#175669;
	text-align:center;
	width:900px;
	margin-left:auto;
	margin-right:auto;
	
}

.recommandation{
	clear:both;
	color:#175669;
	font-size:18px;
	padding-top:80px;
	text-align:center;
	width:900px;
	margin-left:auto;
	margin-right:auto;
}

span.from{
	font-size:12px;
	padding-top:5px;
}



/*--------------------animation recommandations------------*/


.temoignages p{
	opacity:0;
	height:90px;
	width:900px;
	position:absolute;
	font-size:18px;
	text-align: center;
	margin-top:15px;
}
	
.temoignages p.frame-1 {
	-moz-animation: frame1 40s ease-in-out infinite;
	-webkit-animation: frame1 40s ease-in-out infinite;
	animation: frame1 40s ease-in-out infinite;
	-moz-animation-delay: 0s;
	-webkit-animation-delay:0s;
	animation-delay:0s;
}

.temoignages p.frame-2 {
	-moz-animation: frame2 40s ease-in-out infinite;
	-webkit-animation: frame2 40s ease-in-out infinite;
	animation: frame2 40s ease-in-out infinite;
	-moz-animation-delay: 10s;
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
}


.temoignages p.frame-3,
.temoignages p.frame-4,
.temoignages p.frame-5,
.temoignages p.frame-6{
	-moz-animation: frame3 40s ease-in-out infinite;
	-webkit-animation: frame3 40s ease-in-out infinite;
	animation: frame3 40s ease-in-out infinite;
	}

.temoignages p.frame-3{
	-moz-animation-delay: 16s;
	-webkit-animation-delay: 16s;
	animation-delay: 16s;
	}

.temoignages p.frame-4 {
	-moz-animation-delay: 22s;
	-webkit-animation-delay: 22s;
	animation-delay: 22s;
}

.temoignages p.frame-5 {
	-moz-animation-delay: 28s;
	-webkit-animation-delay: 28s;
	animation-delay: 28s;
}

.temoignages p.frame-6 {
	-moz-animation-delay: 34s;
	-webkit-animation-delay: 34s;
	animation-delay: 34s;
}


@-moz-keyframes frame1 {
  0%{
   opacity:0;
  }
 
  5%{
	  opacity:1;
	  }
	30%{
		opacity:0;
	}
  
  100%{
	  opacity:0;
}
}

@-moz-keyframes frame2{
	 0%{
   opacity:0;
  }
  
  2%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}

@-moz-keyframes frame3{
	 0%{
   opacity:0;
  }
  
  5%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}


@-webkit-keyframes frame1 {
  0%{
   opacity:0;
  }
 
  5%{
	  opacity:1;
	  }
	30%{
		opacity:0;
	}
  
  100%{
	  opacity:0;
}
}

@-webkit-keyframes frame2{
	 0%{
   opacity:0;
  }
  
  2%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}

@-webkit-keyframes frame3{
	 0%{
   opacity:0;
  }
  
  5%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}

@keyframes frame1 {
  0%{
   opacity:0;
  }
 
  5%{
	  opacity:1;
	  }
	30%{
		opacity:0;
	}
  
  100%{
	  opacity:0;
}
}

@keyframes frame2{
	 0%{
   opacity:0;
  }
  
  2%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}

@keyframes frame3{
	 0%{
   opacity:0;
  }
  
  5%{
	  opacity:1;
  }
 
  20%{
	  opacity:0;
	  }
  
  100%{
	  opacity:0;
}
}

	


/*-------------------------------page contact----------------------------------*/

body#contact{
	background-image:url(images/Fond_contact.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	height:auto;
	color:#FFFFFF;
	}
	
.texte_contact{
	width:400px;
	float:left;
	line-height:25px;
	position:relative;
	top:-100px;

}

.texte_contact2{
	float:left;
	text-align:center;
	line-height:30px;
	width:400px;
	position:relative;
	top:-80px;
	
}


a img.facebook{
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	}
	
a img.facebook:hover{
	opacity:0.5;
	}
a img.linkedin{
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	}
	
a img.linkedin:hover{
	opacity:0.5;
	}

.social{
 	float:left;
	width:400px;
	text-align:center;
	top:-50px;
	position:relative;
}


.facebook{
	margin-right:20px;}

section.contact{
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	text-align:justify;
	display:table;
}

.conteneur1{
	display:table-cell;
	width:40%;
	padding-right:100px;
}
	
.conteneur2{
	display:table-cell;
	width:60%;


}



form{
	width:500px;
	height:400px;
	float:left;
	position:relative;
	border:1px solid #FFFFFF;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	border-radius:30px;
	padding-left:35px;
	text-align:left;
	margin-top:150px;
}

p.formulaire{
	margin-top:20px;
	width:180px;
}
	
label{
	display:block;
	width:15px;
	
}

label[for="nom"]{
	padding-top:20px;
	
}

input{
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	border:none;
	height:30px;
	width:180px;
	float:left;
	background-color: rgba(255, 255, 255, 0.5);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	padding-left:5px;
	padding-right:5px;
	margin-bottom:30px;
	
}

div.message{
	float:right;
	width:250px;
	position:relative;
	top:-170px;
}

textarea{
	width:200px;
	height:300px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	border:none;
	background-color: rgba(255, 255, 255, 0.5);
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	position:relative;
	padding-left: 5px;
	padding-top:5px;
	padding-right:5px;
	margin-right:10px;
	}


button{
	width:80px;
	height:30px;
	color: #ffffff;
	font-size:12px;
	position:relative;
	top:50px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20Px;
	border:none;
	background-color: rgba(255, 255, 255, 0.5);
}
p.champs{
	font-size:10px;
	position:relative;
	top:80px;
}

input:hover,
textarea:hover,
button:hover{
	background-color:#F5D05D;
	opacity:O.5;

	}
.merci{
	font-size:25px;
	text-align:center;
	line-height:600px;
	}
	

/*-----------------------------FOOTER-------------------------------------------------*/
Img.blog{
	float:right;
	position:relative;
	margin-right:15px;
	padding-bottom:20px;
}

footer a img.blog{
	-webkit-transition: -webkit-transform 0.2s ease-in-out;
	-moz-transition: -moz-transform 0.2s ease-in-out;
	-o-transition: -o-transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
}
	
footer a img.blog:hover{
	-webkit-transform: scale(0.5) rotate(-360deg);
	-moz-transform: scale(0.5) rotate(-360deg);
	-o-transform: scale(0.5) rotate(-360deg);
	transform: scale(0.5) rotate(-360deg);
}

footer{
	clear:both;
	position:relative;
	height:8vh;
	}

footer p {
	text-align:center;
	font-size:11px;
	color:#F4CF5D;
	position:relative;
	width:600px;
	margin-left:auto;
	margin-right:auto;
	top:90px;
}

footer a.boomdezign {
	color:#F4CF5D;
	}

/*--------------------------------------Mediaqueries---------------------------------------*/

@media (max-width:1280px){
	
	nav{
	width:100%;
	text-align:center;
	padding-top:35px;
	font-size:20px;
	height:5vh;
	
	}
	
	.accroche_accueil{
	text-align:center;
	margin-top:10px;
	}
	
	.logo{
		width:40%;
		
	}
	
	
	.tarif{
	margin-left:360px;
	}
	
	.langue{
		margin-left:30px;
}
	
	.MonBlog{
	float:right;
	padding-right:0px;
	
	
}

.blog{
	width:5%;
	}
	
.langue p{
	text-align:justify;
	position:absolute;
	width:400px;
	padding-left:25px;
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;
	-webkit-transform-origin:none;
	-moz-transform-origin:none;
	-o-transform-origin:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transform:none;
	transform:none;
	}
	
.tarif p{
	text-align:justify;
	position:absolute;
	width:400px;
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;
	-webkit-transform-origin:none;
	-moz-transform-origin:none;
	-o-transform-origin:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transform:none;
	transform:none;
	
	}
	
.langue h2,	
.tarif h2{
	position:relative;
	line-height:150px;
	left:-6px;
	top:0;
	}
	

	
.tarif:hover p,
.langue:hover p{
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;
	}
	
.tarif:hover h2,	
.langue:hover h2{
	top:0px;
}
	
	footer p.fin{
	text-align:center;
	font-size:11px;
	color:#F4CF5D;
	position:relative;
	width:600px;
	margin-left:auto;
	margin-right:auto;
	top:180px;
}
	
	
	.blogfin{
		top:130px;
		width:5%;
}

	
	
	
div.contain{
	width:800px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	text-align:justify;
	padding-left:15px;
	padding-right:15px;
	font-size:12px;
	padding-top:40px;
	
	
}

div.contain1{
	width:400px;
	float:left;
	position:relative;
}

img#bulle{
	padding-left:130px;
	width:30%;
}
.contain3 h1,
.contain2 h1,
.contain1 h1{
	text-align:center;
	margin-top:15px;
	color:#FFFFFF;
}
.contain3 p,
.contain2 p,
.contain1 p{
	margin-top:20px;
	line-height:25px;
	color:#FFFFFF;
	
}

div.contain2{
	width:300Px;
	margin-left:100px;
	float:left;
	margin-top:15px;
}
div.contain3{
	width:300Px;
	margin-left:100px;
	float:left;
	margin-top:40px;
	}
img#feuille{
	padding-left:120px;
	width:30%;
}

img#oeil{
	padding-left:105px;
	width:30%;}
	

form{
	width:500px;
	height:400px;
	float:left;
	position:relative;
	border:1px solid #FFFFFF;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	border-radius:30px;
	padding-left:35px;
	text-align:left;
	margin-top:30px;
}	
div.accrocheTrad{
	
	margin-top:30px;}	
	
	
	
	}