@charset "utf-8";
/* CSS Document */
/* Guides.rubyonrails.org */
/* Reset.css */
/* Created January 30, 2009
--------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

body {line-height: 1; 
	color: black; 
	background: white;
}
a img {border:none;}
ins {text-decoration: none;}
del {text-decoration: line-through;}

:focus {
  -moz-outline:0;
  outline:0;
  outline-offset:0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

html {
	font-size: 16px;
	backgroundcolor: white;

}



.espaceS{
	background-color: rgba(0, 0, 0, 0);
	width: 100%;
	height: 8em;
}

@media (max-width: 1500px) {
  .espaceS {
  height: 16em;

}
}



.flex-container {
  display: flex;
  flex-wrap: wrap;
	height: auto;
}

.flex-item-cent {
  flex: 100%;
}
@media (max-width: 1500px) {
  .flex-item-cent {
  flex: 70%;

}
}


.flex-item-demiG {
  flex: 50%;
}

.flex-item-demiD {
  flex: 50%;
}

@media (max-width: 1200px) {
  .flex-item-demiD, .flex-item-demiG {
    flex: 90%;
  }
}


.flex-item-tiersG {
  flex: 33.33%;
}

.flex-item-tiersC {
  flex: 33.33%;
}

.flex-item-tiersD {
  flex: 33.33%;
}

@media (max-width: 800px) {
  .flex-item-tiersD, .flex-item-tiersC, .flex-item-tiersG {
    flex: 100%;
  }
}



@media only screen and (min-width: 1050px) {
.flex-item-quartDD, .flex-item-quartDC, .flex-item-quartGC, .flex-item-quartGG {
    flex: 25%;
	
  }
}



@media only screen and (max-width: 1050px) {
.flex-item-quartDD, .flex-item-quartDC, .flex-item-quartGC, .flex-item-quartGG {
    flex: 100%;
  }
}


.flex-item-40-10 {
  flex: 40%;	
	padding-right: 5%;
	padding-left:5%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
 .flex-item-40-10 {
  flex: 90%;	
	padding-right: 5%;
	padding-left:5%;
}

}
	
	
.centrer{
	display: flex;
	justify-content: center;
	align-items: center;
}



.p-r {
	position: relative;
}



.wCent {
	width:100%;
	height: 100%;
}


.wDemi{
	width:40%;
}

@media (max-width: 1200px) {
.wDemi{
	width:90%;
	}
}



.background-blue{
	background-color: #385268;
}

.background-bleu{
	background-color: #c7ebf0;
}

.background-jaune{
	background-color: #FDF8E1;
}

















.espace-haut-dix {
	padding-top:10%;
}

@media (max-width: 1200px) {
	.espace-haut-dix {
	padding-top:20%;
}
	
}

.espace-haut-deux {
	padding-top:2%;
}

.espace-haut-cinq {
	padding-top:5%;
}

.espace-haut-deux {
	padding-top:1%;
}

.espace-bas-deux {
	padding-bottom:2%;
}

.espace-bas-cinq {
	padding-bottom: 5%;
}

.espace-bas-dix{
	padding-bottom: 10%;
}


.espace-bas-trente{
	padding-bottom: 30%;
}


.espace-gauche-dix {
	padding-left: 10%;
}


@media (max-width: 1600px) {
.espace-gauche-dix {
	padding-left: 5%;
}
}
	
@media (max-width: 1600px) {
.espace-gauche-dixb {
	padding-left: 5%;
}
}


.espace-gauche-vingt {
	padding-left: 20%;
}

.espace-droit-vingt {
	padding-right: 20%;
}

@media (max-width: 1600px) {
.espace-gauche-vingt {
	padding-left: 5%;
	padding-right:5%;
}

}

.textC {
	text-align: center;
}




.onde {
	margin-bottom: -2%;
	z-index: -50;
}









.petit{
	width:10%;
	padding-left: 10%;
}



/* menu Burger */



#burger-menu {
  cursor: pointer;
  height: 27px;
  width: 27px;
  right: 0;
	margin-right: 90px;
	margin-top: 90px;
  overflow: visible;
  position: fixed;
  z-index:200;
	top: 0;
}

@media (max-width: 1200px) {
#burger-menu {
  cursor: pointer;
  height: 27px;
  width: 27px;
  right: 0;
	margin-right: 30px;
	margin-top: 30px;
  overflow: visible;
  position: fixed;
  z-index:200;
  transform: scale(1.5);
}
}

#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
  background: #385268;
  display: block;
  height: 3px;
  opacity: 1;
  position: absolute;
  transition: 0.3s ease-in-out;
	border-radius: 1.5px;	
}

#burger-menu span:before,
#burger-menu span:after {
  content: "";
}
#burger-menu span {
  right: 0px;
  top: 13px;
  width: 35px;
}
#burger-menu span:before {
  left: 0px;
  top: -10px;
  width: 35px;
}
#burger-menu span:after {
  left: 0px;
  top: 10px;
  width: 35px;
}

#burger-menu:hover span {
  right: -5px;
  top: 13px;
  width: 35px;
}
#burger-menu:hover span:before {
  left: -10px;
  top: -10px;
  width: 35px;
}
#burger-menu:hover span:after {
  left: -15px;
  top: 10px;
  width: 35px;
}





#menu{
  z-index:199;
  min-width:100%;
  min-height:100%;
  position: fixed;
  top:0;
  height:0;
  visibility: hidden;
  opacity: 0;
  text-align:center;
  transition: all 0.3s ease-in-out;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 400;
}




#menu.overlay{
  visibility: visible;
  opacity: 1;
  padding-top:1%;
  background:rgba(255,255,255,0.9);
}

li{
  list-style:none;
}

#menu a{
  color:#768099;
  display:block;
  font-size: 2.5em;
  margin-bottom:30px;
  text-decoration:none;
}

@media (max-width: 1200px) {
	#menu a{
  color:#768099;
  display:block;
  font-size: 2.7em;
  margin-bottom:30px;
  text-decoration:none;
}
}


	


#menu a:hover{
  color:#1f2e56;
  display:block;
  font-size: 2.5em;
  margin-bottom:30px;
  text-decoration:none;
}


@media (max-width: 1200px) {
	#menu a:hover{
  color:#1f2e56;
  display:block;
  font-size: 2.7em;
  margin-bottom:30px;
  text-decoration:none;
}
}









#logo {
	top: 5px;
	left:2.5%;
	position:absolute;
	z-index: -200;
	
}

.espaceTitreUn {
	padding-top: 8%;
}

#BandeauMenu{
	width: 100%;
	height: 90px;
	position: fixed;
	z-index: 100;
	top: 0;
}


#logo img {
	padding-top: 5px;
	padding-left: 5px;
	width: 300px;
	padding-bottom:5%;
}

@media (max-width: 1200px) {
	#logo img{
  padding-top: 5px;
	padding-left: 5px;
	width: 200px;
	padding-bottom:5%;
}
}

/* bouton retour */

.ferme {
	

	display: none;
}


.ouvert {
	width: 75px; 
	border-radius: 50%; 
	background: #fdc82f;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 50px;
	bottom: 50px;
	cursor: pointer;
	z-index: 1000;
	transition: background-color 0.3s;

	
	opacity: 1;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
	animation-name: opacite2;
	
	
}




.ouvert:hover {
	background: #fbe18d;

}

.ouvert2 {
	opacity:1;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
}

.ferme2 {
	display: none;
}

@keyframes opacite {
  from {
    opacity:1;
  }

  to {
    opacity:0;
  }
}

@keyframes opacite2 {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}

.boutonRetourIcone {
	width:75px;
}








/* LOGOS */



.onlinePF {
	width: 15%;
	margin-top: 20%; 
}

@media (max-width: 1200px) {
	.onlinePF {
		width: 15%;
		margin-top: 5%; 
	}
}

.onlinePFL {
	width: 20%;
	padding-bottom: 5%;
}

@media (max-width: 1400px) {
	.onlinePFL {
		width: 30%;
		padding-bottom: 5%;
	}
}


@media (max-width: 1200px) {
	.onlinePFL {
		width: 50%;
		padding-bottom: 3%;
	}
}

.espaceBlanc {
	width: 250px;
	height: 10px;
	background-color: white;
	margin: 5% 0 0 15%;
	border-radius: 100px;
	
}

@media (max-width: 1200px) {
	.espaceBlanc {
		width: 250px;
	height: 10px;
	background-color: white;
	margin: 7% auto 2% auto;
	border-radius: 100px;
	}
}


.espaceVert {
	width: 250px;
	height: 10px;
	background-color: #f25a6e;
	margin: 3% 0 0 0%;
	border-radius: 100px;
	
}

@media (max-width: 1200px) {
	.espaceVert {
	width: 250px;
	height: 10px;
	background-color: #f25a6e;
	margin: 7% auto 2% auto;
	border-radius: 100px;
	}
}


.espaceBlancC {
	width: 250px;
	height: 10px;
	background-color: white;
	margin: 3% 0 0 0%;
	border-radius: 100px;
	
}

.donner {
	text-decoration: none;
	background-color:#59cad4;
	margin:  5% 2.5% 0% 15%;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	padding: 5px 45px;
	border-radius: 100px;
	color:white;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.8em;
	
}
@media (max-width: 1200px) {
	.donner{
		margin:  5% 0% 15% 5%;
		float : left;
		padding: 20px 80px;
		font-size: 2.4em;
}
}

@media (max-width: 700px) {
	.donner{
		margin:  5% 5% 15% 0%;
		float : left;
			padding: 5px 50px;
		font-size: 1.7em;
}
}

.demander {
	text-decoration: none;
	background-color:#f25a6e;
	
	margin:  5% 5% 5% 5%;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	border-radius: 100px;

	padding: 5px 45px;
	
	color:white;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.8em;
}

@media (max-width: 1200px) {
	.demander{
		margin:  5% 5% 15% 0%;
		float : right;
			padding: 20px 80px;
		font-size: 2.4em;
}
}

@media (max-width: 700px) {
	.demander{
		margin:  5% 5% 15% 0%;
		float : right;
			padding: 5px 50px;
		font-size: 1.7em;
}
}




.donner:hover {
	background-color: white;
	transition: all 1s;
	color: #7de7ea;
	
}



.demander:hover {
	background-color: white;
	transition: all 1s;
	color: #f25a6e;
	
}

.section2 H1 {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color:#1f2e56;
	padding:5% 0 0 0%;
}

.section2 H2 {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:#768099;
	padding:5% 0 0% 0%;
	line-height: 1.5em;
	text-align: justify;
	text-align: center;
}

@media (max-width: 1200px) {
	.section2 H2{
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:#768099;
	padding:5% 0 0% 0%;
	line-height: 1.5em;
	text-align: justify;
	text-align: center;
}
}


.moitie {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1200px) {
	.moitie{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
}

.chapeau>H1  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color:white;
	padding:10% 0 0 15%;
}
@media (max-width: 1200px) {
	.chapeau>H1{
	padding:5% 5% 0 5%;
		text-align: center;
}
}

.chapeau>H2  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:white;
	padding:5% 0 5% 15%;
	line-height: 1.5em;
	
}

@media (max-width: 1200px) {
	.chapeau>H2{
	padding:5% 5% 0 5%;
		text-align: center;
}
}



.bold {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	
}

/* Section 1 */



.fondVert{
	background-color: #1f2e56;
	width: 100%;
	height: auto;
	margin-top:  200px;
	margin-bottom:200px;
	border-radius: 0 0 0 100px;
}
 
@media (max-width: 1200px) {
	.fondVert{
		background-color: #1f2e56;
	width: 100%;
	height: auto;
	margin-top:  150px;
	border-radius: 0 0 0 0;
		margin-bottom:100px;
}
}


.echange {
	width: auto;
	height: 100%;
}

@media (max-width: 1200px) {
	.echange{
		/*
	width: 100%;
	height: auto;
		transform: rotate(90deg);
		*/
		display: none;
}
}

	
/* Section2 */



.nbrText {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.6em;
	color:#1f2e56;
	padding:5% 0 0% 0%;
	line-height: 1.5em;
	text-align: justify;
	text-align: center;
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 150px;
}

@media (max-width: 700px) {
	.donner{
		margin:  5% 5% 15% 0%;
		float : left;
			padding: 5px 50px;
		font-size: 1.7em;
}
}



.histoCase {
	width: 400px;
	height: 230px;
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	position: relative;
}

.histoUn{
	width: 400px;
	height: 30%;
	background-color: #f25a6e;
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	bottom:0;
	position: absolute;
	
	  animation-name: Un;
  animation-duration: 4s;
	
}

@keyframes Un {
  0%  {
	     width: 400px;
		height: 1px;
	  background-color: #D0C1FF;
	}
  100% {
	  width: 400px;
		height: 30%;
	  background-color: #D0C1FF;}
}

.nbrUn{
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	color: #f25a6e;
	font-size: 4em;
	padding:5% 0 0 0%;
}

.histoDeux{
	width: 400px;
	height: 87%;
	background-color: #59cad4;
	margin-left: auto;
	margin-right: auto;
	vertical-align: bottom;
	margin-top:5%;
	bottom:0;
	position: absolute;
	
	 animation-name: Deux;
  animation-duration: 4s;
	
}

@keyframes Deux {
  0%  {
	     width: 400px;
		height: 1px;
	  background-color: #59cad4;
	}
  100% {
	  width: 400px;
		height: 87%;
	  background-color: #59cad4;}
}



.nbrDeux{
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	color: #59cad4;
	font-size: 4em;
	padding:5% 0 0 0%;
}

.histoTrois{
	width: 400px;
	height: 66%;
	background-color: #1f2e56;
	margin-left: auto;
	margin-right: auto;
	vertical-align: bottom;
	margin-top:5%;
	bottom:0;
	position: absolute;
	
	animation-name: Trois;
  animation-duration: 4s;
	
}

@keyframes Trois {
  0%  {
	     width: 400px;
		height: 1px;
	  background-color: #1f2e56;
	}
  100% {
	  width: 400px;
		height: 66%;
	  background-color: #1f2e56;}
}



.nbrTrois{
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	color: #1f2e56;
	font-size: 4em;
	padding:5% 0 0 0%;
}



/* section 3 */

.souffle {
	width:100%;
	height:2%;
	background-color: white;
	
}



h4 {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.1em;
	color:#fbcdd3;
	padding:2.5% 0 5% 0%;
	line-height: 1.3em;
	text-align: justify;
	text-align: center;
	width: 80%;
	margin-right:auto;
	margin-left: auto;
}

#demander  h4 {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.1em;
	color:#cdeff2;
	padding:2.5% 0 5% 0%;
	line-height: 1.3em;
	text-align: justify;
	text-align: center;
	width: 80%;
	margin-right:auto;
	margin-left: auto;
}

.background-mauve {
	height: 70%;
	background-color: #f25a6e;
	margin-right: 10%;
	margin-left: 10%;
	border-radius: 50px 50px 50px 50px;
	margin-top:3%;
	margin-bottom: 150px;
}

@media (max-width: 1600px) {
	.background-mauve {
	margin-right: 3%;
	margin-left: 3%;;
}
}

.background-vert {
	height: 70%;
	background-color: #59cad4;
	margin-right: 10%;
	margin-left: 10%;
	border-radius: 50px 50px 50px 50px;
	margin-top:3%;
	margin-bottom: 150px;
}

@media (max-width: 1600px) {
	.background-vert {
	margin-right: 3%;
	margin-left: 3%;;
}
}

.section3 H1  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color:white;
	padding:5% 0 0 0%;
}

.section3 H2 {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:white;
	padding:2.5% 0 2.5% 0%;
	line-height: 1.3em;
	text-align: justify;
	text-align: center;
	width: 70%;
	margin-right:auto;
	margin-left: auto;
}

.section3 .titre H1  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 2.5em;
	color:white;
	padding:5% 0 0 0%;
}

.donnerB {
	text-decoration: none;
	background-color:#59cad4;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	padding: 5px 40px;
	border-radius: 100px;
	color:white;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 2em;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
	margin-top: 2%;
}


.demanderB {
	text-decoration: none;
	background-color:#f25a6e;
	
	/*arrondir les coins en haut à gauche et en bas à droite*/
	border-radius: 100px;

	padding: 5px 40px;
	
	color:white;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 2em;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
	margin-top: 2%;
}

.donnerB:hover {
	background-color: white;
	transition: all 1s;
	color: #7de7ea;
	
}

.demanderB:hover {
	
	
	background-color: white;
	transition: all 1s;
	color: #f97a90;
}

/* section 4 */

.espaceVertB {
	width: 250px;
	height: 10px;
	background-color: #f25a6e;
	margin: 2% 0 0 9%;
	border-radius: 100px;
	
}

@media (max-width: 1200px) {
	.espaceVertB {
	margin-right:auto;
		margin-left:auto;
}
}



.section4 H1  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color:#1f2e56;
	padding:5% 0 0 9%;
}

@media (max-width: 1200px) {
	.section4 H1 {
	text-align: center;
			padding:0% 0 0 0%;

}
}

.section4 H2  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:#768099;
	padding:2% 9% 5% 9%;
	line-height: 1.1em;
	
}

.partenaires {
	width:50%;
}
/* section 5 */






.fondMauve{
	background-color: #1f2e56;
	width: 100%;
	height: auto;
	margin-top:  200px;
	border-radius: 0 100px 0 0;
}

.section5 H1  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 700;
	font-size: 3em;
	color:white;
	padding:5% 0 0 0%;
}

.section5 H2  {
	font-family: 'Signika Negative', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color:white;
	padding:2% 9% 5% 9%;
	line-height: 1.5em;
	
}


.espaceBlancD {
	width: 250px;
	height: 10px;
	background-color: white;
	margin: 3% 0 3% 0%;
	border-radius: 100px;
	
}





#formulaire {
	color: #385268;
}




form {
	margin-right:auto;
	margin-left:auto;
	width: 50%;
	height: 75%;
}

@media (max-width: 1200px) {
	form {
	font-size: 1.5em;
}
}





@media (min-width: 800px)and (max-width: 1400px){
  form {
	margin-right:auto;
	margin-left:auto;
	width: 90%;
	height: 75%;
}


	textarea {
	font-size: 1.2em;
	width: 100%;
}
}



@media (max-width: 800px) {
  form {
	margin-right:auto;
	margin-left:auto;
	width: 90%;
	height: 75%;
}
	textarea {
	font-size: 1.5em;
	width: 100%;
}
}


input {
	font-family: 'Signika Negative', sans-serif;
	margin-bottom:3px;
	color: white;
	border-width:0px 0px 2px 0px;
	border-radius: 0px;
	font-size: 1.2em;
	border-color: #79829a;
	background-color: rgba(69, 40, 40, 0);
	letter-spacing: 1px;
	width: 100%; 
}
	
input:focus {
  border-color: #59cad4;
	transition: border-color 1s;
}







textarea {
	margin-top: 25px;
	height:200px;
	resize:none;
	border:2px solid #79829a;
	border-radius:20px;
	width:calc(100% - 40px);
	background-color: rgba(69, 40, 40, 0);
	color: white;
	font-size: 1.2em;
	padding: 20px;
	font-family: 'Signika Negative', sans-serif;
}

textarea:focus {
	border:2px solid #59cad4;
	transition: border-color 1s;
}



::placeholder{
	color: #79829a;
}


form p {
	left: 0;
	padding-top: 10px;
	font-family: 'Signika Negative', sans-serif;
	color: #79829a;
	line-height: 1em;
}

.erreur {
	left: 0;
	font-family: 'Signika Negative', sans-serif;
	color: #f25a6e;
	margin-top: 10px;
	font-size: 1em;
}


.col2f {
	width: 100%;
	height: auto;
	float: left;
	
}

.col2fG {
	width: 90%;
	height: auto;
	float: left;
	padding-bottom: 2%;
	padding-left: 10%;
}

.boutonf {
  	background-color: white;
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	letter-spacing: .1rem;
  	font-size: 1.2em;
 	position: relative;
	border-radius: 50px;
	border: none;
	color: #1f2e56;
	padding: 30px 0px;
	text-decoration: none;
	width: 250px;
	transition: background-color 0.5s;
	margin-top: 50px;
}



.boutonf:hover {
 	background-color: #59cad4; 
	cursor:pointer;
	transition: background-color 0.5s;
	color: #1f2e56;
}


.envoyer {
	text-decoration: none;
	background-color: white;
		border-width:0px 0px 0px 0px;

	margin:  5% 0% 5% 0%;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	border-radius: 100px;

	padding: 5px 45px;
	
	color: #1f2e56;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.6em;
	width: auto;
	cursor: pointer;
	
}

.envoyer:hover {
	background-color: #59cad4; 
	transition: all 1s;
	color: white;
	
	
}



/* footer */



.Chaussette {
	position: relative;
	width:100%;
	height: auto;
}

.PartieG {
	margin-top: 25px;
	left: 5%;
	position: absolute;
}

@media (max-width: 1080px){
  .PartieG  {
	  width:100%;
	  text-align: center;
}
}

.PartieD {
	right: 5%;
	position: absolute;
	margin-top: 60px;
}

@media (max-width: 1080px){
  .PartieD  {
	  width:100%;
	margin-top: 250px;
	margin-right: auto;
	  margin-left: auto;
}
}

.TalignD {
	text-align: right;
	padding-right: 6px;
}
@media (max-width: 1080px){
  .TalignD  {
	 text-align: center;
}
}

.youtube {
	height: 50px;
	width: 50px;
	background-image: url("images/youtube_UOPTOb.svg");
	background-repeat: no-repeat;
	cursor: pointer;
	
}
.facebook {
	height: 50px;
	width: 50px;
	background-image: url("images/facebook_UOPTOb.svg");
	background-repeat: no-repeat;
	cursor: pointer;
}
.instagram {
	height: 50px;
	width: 50px;
	background-image: url("images/instagram_UOPTOb.svg");
	background-repeat: no-repeat;
	cursor: pointer;
}
.linkedin {
	height: 50px;
	width: 50px;
	background-image: url("images/linkedin_UOPTOb.svg");
	background-repeat: no-repeat;
	cursor: pointer;
}

.slogan {
	height: 60px;
	width: 300px;
	background-image: url("images/slogan.svg");
	background-repeat: no-repeat;
}

@media (max-width: 1200px) {
	.instagram {
		height: 80px;
		width: 80px;
	}
}
@media (max-width: 1200px) {
	.facebook {
		height: 80px;
		width: 80px;
	}
}
@media (max-width: 1200px) {
	.youtube {
		height: 80px;
		width: 80px;
	}
}

@media (max-width: 1200px) {
	.linkedin {
		height: 80px;
		width: 80px;
	}
}

.youtube:hover {
	height: 50px;
	width: 50px;
	background-image: url("images/youtube_UOPT.svg");
	background-repeat: no-repeat;
}
.facebook:hover {
	height: 50px;
	width: 50px;
	background-image: url("images/facebook_UOPT.svg");
	background-repeat: no-repeat;
}
.instagram:hover {
	height: 50px;
	width: 50px;
	background-image: url("images/instagram_UOPT.svg");
	background-repeat: no-repeat;
}

.linkedin:hover {
	height: 50px;
	width: 50px;
	background-image: url("images/linkedin_UOPT.svg");
	background-repeat: no-repeat;
}

.logoLion {
	height:135px;
	width:534px;
	background-image: url("images/TeteDeLion.svg");
	background-repeat: no-repeat;
	margin-left:5%;
}

.logoProvince {
	height:135px;
	width:534px;
	background-image: url("images/ProvinceDeLuxembourg_Logo.svg");
	background-repeat: no-repeat;
	margin-left:5%;
	
}

@media (max-width: 1080px){
  .logoProvince  {
	height:135px;
	width:534px;
	  margin-right: auto;
	  margin-letf: auto;
	background-image: url("images/ProvinceDeLuxembourg_Logo.svg");
	background-repeat: no-repeat;
}
}

.LienProvince {
	font-size:1.5em;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	color: #1a2b55;
	text-transform: uppercase;
}




.LienProvince:hover {
	
	color: #485577;
}

@media (max-width: 1200px) {
	.instagram:hover {
		height: 80px;
		width: 80px;
	}
}
@media (max-width: 1200px) {
	.facebook:hover {
		height: 80px;
		width: 80px;
	}
}
@media (max-width: 1200px) {
	.youtube:hover {
		height: 80px;
		width: 80px;
	}
}
@media (max-width: 1200px) {
	.linkedin:hover {
		height: 80px;
		width: 80px;
	}
}

a {
	text-decoration: none;
}


.footer {
	margin-top: 200px;
	background-color: #1a2b55;
	height: 100px;
	width: 100%;
	bottom:0;
	font-family: 'Signika Negative', sans-serif;
	font-size: 1em;
	color:white;
	line-height: 1.4em;
	font-weight: 300;
	text-align: center;
	padding-bottom: 30px;
}

@media (max-width: 1080px){
  .footer  {
	 margin-top: 400px;
}
}

.Fleche {
	left: 7.5%;
	position: absolute;
	height:50px;
	width:50px;
	background-image: url("images/fleche.svg");
	background-repeat: no-repeat;
}

.caps {
	text-transform: uppercase;
}
/* AUTRE */

.pictos {
	width: 160px;
}

@media (max-width: 1200px) {
	.picto {
	width: 100px;
}
}

/* ANIMATION */

.slideanim {visibility:hidden;}
.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  /* Make the element visible */
  visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
  0% {
    opacity: 0;
    transform: translatex(70%);
  }
  100% {
    opacity: 1;
    transform: translatex(0%);
  }
}

.slideanimB {visibility:hidden;}
.slideB {
  /* The name of the animation */
  animation-name: slideB;
  -webkit-animation-name: slideB;
  /* The duration of the animation */
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  /* Make the element visible */
  visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slideB {
  0% {
    opacity: 0;
    transform: translatex(-70%);
  }
  100% {
    opacity: 1;
    transform: translatex(0%);
  }
}



#barres article .conteneur_progress_bar{
    height: 200px; /* Taille des barres */
    width: 300px;
    margin: auto;
	transform: rotate(180deg);
}
 
#barres article .conteneur_progress_bar .commun_progress_style{
    position:relative;
    height: 30px;
}
 

 
                        /* Animation des barres de progression */
 
.barG{
    background: #f25a6e;
    animation: barG 5s forwards 1; /* 1 au lien de infinite */
}
@keyframes barG{ /*temps*/
    0%{height:0%;} /*début*/
    100%{height:30%;} /*fin*/
}
 
.barC{
    background: #59cad4;
    animation: barC 5s forwards 1;/* 1 au lien de infinite */
}
@keyframes barC{ /*temps*/
    0%{height:0;}/*début*/
    100%{height:89%;}/*fin*/
}
 
.barD{
    background: #1f2e56;
    animation: barD 5s forwards 1;/* 1 au lien de infinite */
}
@keyframes barD{ /*temps*/
    0%{height:0;}/*début*/
    100%{height:66%;}/*fin*/
}
 

.errorQ {
	font-family: 'Signika Negative', sans-serif;
	font-size: 5em;
	text-align: center;
	margin-top: 15%;
	color:#1f2e56;
}

.errorT {
	font-family: 'Signika Negative', sans-serif;
	font-size: 2em;
	text-align: center;
	color:#1f2e56;
	margin-bottom: 3%;
}
.errorB {
	text-decoration: none;
	background-color:#1f2e56;
	margin:  10% auto 5% auto;
	/*arrondir les coins en haut à gauche et en bas à droite*/
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	padding: 5px 45px;
	border-radius: 100px;
	color:white;
	font-family: 'Signika Negative', sans-serif;
	font-weight: 600;
	font-size: 1.8em;
	width: 100%;
}

.errorB:hover {
	background-color: #E1E1E1;
	transition: all 1s;
	color: #1f2e56;
	
}