
@font-face {
	font-family: 'Anodina-ExtraBold';
	src: url('../font/Anodina-ExtraBold.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Anodina-Regular';
	src: url('../font/Anodina-Regular.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MinionPro-Regular';
	src: url('../font/MinionPro-Regular.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSans';
	src: url('../font/OpenSans.ttf');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'OpenSans-Italic';
	src: url('../font/OpenSans-Italic.ttf');
	font-weight: normal;
	font-style: normal;
}



h1{ font-size: 150px; line-height:150px; font-family:"Anodina-Regular"; color:#fff; margin-top:20px; font-weight: lighter;}
h2{ font-size: 50px; line-height:50px; font-weight: lighter; font-family:"Anodina-Regular"; }
h3{ font-size: 18px; line-height:20px; }
h4{ font-size: 16px; line-height:18px; }


body{
	background-color:#65c1be;
	font-family:Moralist_Sans;
	margin:0px;
}

p{
	color:#2c2e35;
	font-size:22px;
	font-family:"OpenSans";
}
#accueil{
	position: relative;
	background-color:#006570;
	padding-top:80px;
	padding-bottom:80px;
	margin-top:80px;
}

#accueil h1{
	font-size:150px;
	text-align:center;
	width:100%;
	margin-bottom:0px;
	margin-top: 10px;
}

#accueil h2{
	font-size:50px;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:0px;
	margin-top:10px;
}

#accueil img{
	margin-left:auto;
	margin-right:auto;
	height: auto;
	display: block;
}

#marleneGillez{
	background-color:#fff;
	padding-top:80px;
	padding-bottom:80px;
	padding-left:10%;
	padding-right:10%;
	box-sizing:border-box;
	width:100%;
}

#marleneGillez h2{
	font-size:48px !important;
	text-align:center;
	width:100%;
	font-family:"Anodina-ExtraBold";
	color:#006570;
	margin-bottom: 25px;
	margin-top:10px;
}

#marleneGillez h3{
	font-size:38px;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:50px;
	margin-top:10px;
}



#marleneGillez hr{
	width:70px;
	height:5px;
	background-color:#006570;
	margin-bottom:50px;
	border:0px;
}

#marleneGillez p{
	text-align:left;
	margin-bottom:40px;
}

#marleneGillez img{
	margin-left: auto;
  margin-right: auto;
  height: auto;
  display: block;
}

#marleneGillez.page2Cote .floatLeft.imageGauche img{
	width:400px;
	margin-right: 10%;
	margin-bottom:25px;
}



#accompagner{
	padding-top:80px;
	padding-bottom:80px;
	padding-left: 10%;
	padding-right: 10%;
	box-sizing: border-box;
	width: 100%;
	background-color:#006570;
}

#accompagner h2{
	font-size:48px !important;
	text-align:center;
	width:100%;
	font-family:"Anodina-ExtraBold";
	color:#fff;
	margin-bottom: 25px;
	margin-top:10px;
}

#accompagner h3{
	font-size:38px;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:50px;
	margin-top:10px;
	line-height: 40px;
}

#accompagner .page3CoteCentrer .bloc{
	padding-left: 2.5%;
	padding-right: 2.5%;
}

#accompagner .page3CoteCentrer .bloc img{
	padding-left: 10%;
	padding-right: 10%;
	box-sizing: border-box;
}

#accompagner .bloc h4{
	font-size:30px;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:0px;
	margin-top:40px;
	line-height: 40px;
}

#accompagner hr{
	width:70px;
	height:5px;
	background-color:#fff;
	margin-bottom:50px;
	border:0px;
}

#accompagner .bloc p{
	color:#fff;
}

p{
	text-align:center;
}

#contact{
	padding-top:80px;
}

#contact h2{
	font-size:48px !important;
	text-align:center;
	width:100%;
	font-family:"Anodina-ExtraBold";
	color:#006570;
	margin-bottom: 25px;
	margin-top:10px;
}

#contact h3{
	font-size:38px;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:50px;
	margin-top:10px;
}

#contact hr{
	width:70px;
	height:5px;
	background-color:#fff;
	margin-bottom:50px;
	border:0px;
}

#contact p{
	text-align:left;
	font-size:26px;
	line-height: 46px;
	margin-top:0px;
}

#contact .page2CoteCentrer .bloc{
	width: 45%;
	min-height: 500px;
}
#contact #googleMap{
	min-height:500px;
}

#droitAffaire{
	background-color:#fff;
	padding-bottom:80px;
}

#droitAffaire h2{
	font-size:100px;
	text-align:center;
	width:100%;
	margin-bottom:0px;
	color:#006570;
	height:80px;
	margin-top:30px;
}

#droitAffaire h3{
	font-size:32px !important;
	text-align:center;
	width:100%;
	font-family:"Anodina-Regular";
	color:#5bcdc2;
	margin-bottom:0px;
	margin-top:10px;
}

#droitAffaire img{
	margin-left:auto;
	margin-right:auto;
	height: auto;
	display: block;
}

footer{
	padding-bottom:80px;
	padding-top:80px;
}

footer h2{
	text-align:center;
	font-family:"Anodina-ExtraBold";
	color:#006570;
	margin-top:0px;
	margin-bottom:0px;
	font-size: 48px;
}

.page3CoteCentrer .bloc{
	
}

.page3CoteCentrer .blocCouleur{
	width:5px;
	background-color:#006570;
	
}

footer .page3CoteCentrer{

	margin-top:40px;
}

footer a{
	text-decoration:none;
	color:#fff;
}

footer p{
	color:#fff;
	font-family:"Anodina-ExtraBold";
	font-size:28px;
	margin-top:0px;
	margin-bottom:0px;
}

footer .bloc.gauche{
	margin-right:25px;
}

footer .bloc.droite{
	margin-left:25px;
}

footer .bloc.gauche p{
	text-align:right;
}

footer .bloc.droite p{
	text-align:left;
}

.blocTextLeft p{
	text-align:left;
	margin-top:0px;
	margin-bottom:0px;
	line-height:24px;
}

.rose{
	color:#80157d;
}

.bleu{
	color:#007d9f;
}

.vert{
	color:#6bad23;
}

.titreRelatif{
	position:relative;
}

.titreRelatif .imageGauche{
	position: inherit;
	left:20px;
	top:20px;
}

.titreRelatif .imageDroite{
	position: inherit;
	right:30px;
	bottom:-30px;
}

#activites{
	
}

#activites h2{
	color: #80157d;
	text-align: center;
	font-size: 64px !important;
	line-height: 50px;
} 

#activites iframe{

	margin-right:auto;
	margin-left:auto;
	display: block;
}

#activites .container img{

	margin-right:auto;
	margin-left:auto;
	display: block;
	max-width:100%;
}

.page2CoteCentrer {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
}

.page2CoteCentrer .bloc {
	width:50%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing:border-box;
  
}

.page2CoteCentrer .bloc img {
	width:100%;
}

.page3CoteCentrer {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
}

.page3CoteCentrer .bloc {
	width:33.3%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing:border-box;
  
}

.page3CoteCentrer .bloc img {
	width:100%;
}


.page4CoteCentrer {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
}

.page4CoteCentrer .bloc {
	width:25%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing:border-box;
  
}

.page4CoteCentrer .bloc img {
	width:100%;
}

.page5CoteCentrer {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
}

.page5CoteCentrer .bloc {
	width:20%;
  min-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing:border-box;
  text-align: center;
  
}

.page5CoteCentrer .bloc img {
	width:100%;
}

#creationGraphique{
	color:#000;
	position:relative;
	background-color:#dfc4de;
	padding-bottom:50px;

}

#creationGraphique .floatLeft{
	padding-left:10%;
	padding-right:10%;
	box-sizing:border-box;
}

#creationGraphique .floatLeft p{
	margin-top:50px;
	font-size: 24px;
	text-align:left;
	color:#1a171b;
	line-height:30px;
}

 #creationGraphique .floatLeft ul li{
	font-size: 24px;
	text-align:left;
}

#creationGraphique ul {
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	display: grid;
	padding-left: 0px;
}

#creationGraphique ul li {
	background-image: url("../images/icones/puceRonde.png");
	background-repeat: no-repeat;
	padding-left: 40px;
	line-height: 30px;
	margin-bottom: 10px;
	color:#1a171b;
}

.page2Cote .floatLeft.imageGauche img{
	float:left;
	width:40%;
	margin-right:5%;
	
}

.page2Cote.page2CoteMarge .imageGauche img {
	width: 50% !important;
	object-fit: cover;
	box-sizing: border-box;
	z-index: -1;
	float: left;
	margin-right: 50px;
	margin-bottom: 50px;

}

#creationGraphique .titreRelatif{
	background-color:#80157d;
	height: 130px;
}

#creationGraphique .titreRelatif h2{
	color: #1a171b;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 130px;
	font-size: 62px !important;
	text-align: center;
}

#creationGraphique .titreRelatif img{
	height:50px;
}

#creationGraphique .titreRelatif .imageGauche{
	top:5px;
	left: -30px;
}

#creationGraphique .titreRelatif .imageDroite{
	top:5px;
	right: -30px;
}


#creationGraphique .bloc h3{
	text-align:center;
	color:#bfdee7;
}

#creationGraphique .bloc p{
	text-align:center;
	color:#000;
}

#creationGraphique .imageBordBasDroit{
	position:absolute;
	bottom:0px;
	right:0px;
}

#creationGraphique .imageBordBasDroit img{
	position:absolute;
	bottom:0px;
	right:0px;
}

#communicationVisuelle {
	background-color:#bfdee7;
}

#communicationVisuelle .titreRelatif{
	background-color:#007ca0;
	height: 130px;
}

#communicationVisuelle .titreRelatif h2{
	color: #000;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 130px;
	font-size: 50px !important;
	text-align: center;
}

#communicationVisuelle .titreRelatif img{
	height:50px;
}

#communicationVisuelle .titreRelatif .imageGauche{
	top:11px;
	left: -30px;
}

#communicationVisuelle .titreRelatif .imageDroite{
	bottom: -13px;
	right: -30px;
}


#communicationVisuelle h3{
	color:#007ca0;
	font-size: 38px;
	line-height:36px;
	font-weight: lighter;
}

#communicationVisuelle p{
	color:#000;
	font-size: 26px;
}

#communicationVisuelle .page5CoteCentrer{
	padding-left:2%;
	padding-right:2%;
	padding-bottom:50px;
}

#infographie {
  background-color: #f5d2c0;
  position:relative;
  padding-bottom:50px;
}

#infographie .floatLeft {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

#infographie  p {
	margin-top: 50px;
	font-size: 24px;
	text-align: left;
	color: #1a171b;
	line-height: 30px;
}

#infographie .titreRelatif {
  background-color: #d94c05;
  height: 130px;
}

#infographie ul {
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  display: grid;
  padding-left: 0px;
}

#infographie ul li {
  background-image: url("../images/icones/puceCarre.png");
  background-repeat: no-repeat;
  padding-left: 40px;
  line-height: 30px;
  margin-bottom: 10px;
  color: #1a171b;
  font-size: 24px;
}

#infographie .titreRelatif .imageGauche {
	top: 5px;
	left: -30px;
}

#infographie .titreRelatif .imageDroite {
	top: 5px;
	right: -30px;
}

#infographie .titreRelatif h2 {
  color: #000;
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 130px;
  font-size: 50px !important;
  text-align: center;
}

#infographie .blocTexte {
	padding-left:10%;
	padding-right:10%;
}

#infographie .decorationInfographie
{
	position:absolute;
	right:0px;
	top:110px;
}

#infographie p.alignCenter{
	text-align:center;
}





#impression {
  background-color: #daeac8;
  position:relative;
  padding-bottom:50px;
}

#impression .floatLeft {
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

#impression  p {
	margin-top: 50px;
	font-size: 24px;
	text-align: left;
	color: #1a171b;
	line-height: 30px;
}

#impression .titreRelatif {
  background-color: #6bad23;
  height: 130px;
}

#impression ul {
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  display: grid;
  padding-left: 0px;
}

#impression ul li {
  background-image: url("../images/icones/puceHexagone.png");
  background-repeat: no-repeat;
  padding-left: 40px;
  line-height: 30px;
  margin-bottom: 10px;
  color: #1a171b;
  font-size: 24px;
}

#impression .titreRelatif .imageGauche {
	top: 5px;
	left: -30px;
}

#impression .titreRelatif .imageDroite {
	top: 5px;
	right: -30px;
}

#impression .titreRelatif h2 {
  color: #000;
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 130px;
  font-size: 50px !important;
  text-align: center;
}

#impression .blocTexte {
	padding-left:10%;
	padding-right:10%;
}

#impression .decorationInfographie
{
	position:absolute;
	right:0px;
	top:110px;
}

#impression p.alignCenter{
	text-align:center;
}


#contact .titreRelatif{
	background-color:#000;
}

#contact .titreRelatif h2 {
  color: #80157d;
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 130px;
  font-size: 60px !important;
  text-align: center;
  
}

#contact form input {
	width: 100%;
	box-sizing: border-box;
	margin: 0%;
	margin-bottom:0px;
	float: left;
	border: none;
	height: 43px;
	color: #000;
	background-color: #fff;
	font-size: 22px;
	padding-left:0px;
	font-family:"OpenSans";
	margin-bottom:2px;
}

#contact form textarea {

	width: 100%;
	box-sizing: border-box;
	margin: 0%;
	margin-top:5px;
	float: left;
	height: 125px;
	border: none;
	line-height: 28px;
	color: #000;
	text-align: justify;
	background-color: #dfc4de;
	font-size: 18px;
	padding-left:0px;
	color: #000;
	background-color: #fff;
	font-size: 22px;
	font-family:"OpenSans";
}

#contact{
	background-color:#fff;
	position:relative;

	padding-bottom:50px;
}

#contact .blocGauche{
	width:45%;
}

#contact .blocDroite{
	width:50%;
}

#contact .blocDroite p{
	text-align:left;
	font-size: 24px;
}

#contact iframe{
	/*width:100%;
	height:auto;*/
}

#contact button{
	width:210px;
	height:auto;
	background-color:#65c1be;
	height:65px;
	color:#fff;
	float:right;
	border:0px;
	font-size: 28px;
	line-height:35px;
	color:#006570;
	cursor:pointer;
} 

#contact .italic{
	font-style: italic;
	font-size: 20px;
}

#contact page2CoteCentrer {
	margin-top: 25px;
	
}

.bordHautGauche{
	position:absolute;
	top:140px;
	left:18px;
}

.bordBasDroite{
	position:absolute;
	bottom:10px;
	right:18px;
}


#contact .page2CoteCentrer{
	margin-top:32px;
	padding-left:25px;
	padding-right:25px;
}

#contact .container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

#contact .container .blocGauche{
	padding-left:0px;
}

#contact .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#contact .page3CoteCentrer{
	margin-top:50px;
}
#contact .page3CoteCentrer img{
	height: 100px;
	width: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#contact .page3CoteCentrer{
	text-align:center;
}

#popUp {
  max-width: 90%;
  position: fixed;
  z-index: 2000;
  background-color: #fff;
  transition: 0s;
  border-radius: 2px;
  padding: 3%;
    padding-top: 3%;
    padding-bottom: 3%;
  padding-top: 50px;
  padding-bottom: 50px;
  box-shadow: 1px 1px 3px -2px #000;
  box-sizing: border-box;
  z-index: 100000;
  width: 50%;
  left: 25%;
  bottom: 0;
  min-width: 300px;
}

#popUp .croix {
  position: absolute;
  right: 5px;
  top: 15px;
  background-color: #eee;
  cursor: pointer;
}

#popUp span {
  height: 40px;
  width: 40px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  float: left;
}

#popUp .croix img {
  border-radius: 3px;
  width: 16px !important;
  height: auto !important;
  margin: 10px;
}

#popUp .croix {
  cursor: pointer;
}

#popUp .description {
  font-size: 20px;
  padding: 0;
  margin: 0;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  line-height: 18px;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 20px;
  font-family:"OpenSans";
}

.invisible{
	display:none;
	transition: 1s;
	z-index:0 !important;
}

.red{
	color:red !important;
}

.green{
	color:green !important;
}


@media screen and (max-width:1400px)
{
	nav li{
		width: calc((100% / 6) - 15px);
		font-size:30px;
	}

	nav .courtiere{
		background-color:#6bad23;
		color:#000;
		width: calc((100% / 6) + 75px);
	}
}

@media screen and (max-width:1000px)
{
	nav li{
		font-size:26px;
		width: calc((100% / 6) - 22px);
	}
	
	nav .communication{
		background-color:#007D9F;
		color:#000;
		width: calc((100% / 6) + 13px);
	}
	
	#accueil h1{
		font-size: 120px;
	}
	
	#accueil h2{
		font-size: 40px;
	}
	
}


@media screen and (max-width:800px)
{
	
	#accueil h1{
		font-size: 90px;
		line-height: 80px;
	}
	
	#accueil h2{
		font-size: 30px;
	}
	
	#marleneGillez.page2Cote .floatLeft.imageGauche img{
		margin-right: auto;
		margin-left: auto;
		width: 100%;
	}
	
	#accompagner .page3CoteCentrer .bloc{
		width:100%;
		margin-bottom:50px;
	}
	
	#accompagner .page3CoteCentrer .bloc img{
		padding-left: 25%;
		padding-right: 25%;
	}
		
	#droitAffaire h2{
		font-size: 70px;
		line-height: 60px;
		height: auto;
	}
	
	#droitAffaire h3{
		font-size: 26px;
	}
	
	#contact .page2CoteCentrer .bloc{
		width:100%;
	}
	
	#contact #googleMap {
		min-height: 300px;
	}
	
	.page3CoteCentrer .bloc{
		margin-bottom:20px;
	}
	


}

@media screen and (max-width:580px)
{
	#accueil h1{
		font-size: 70px;
		line-height: 60px;
	}
	
	#accueil h2{
		font-size: 24px;
	}
	
	#contact h2{
		padding-left:10%;
		padding-right:10%;
		box-sizing:border-box;
	}
	
	#droitAffaire h2{
		font-size: 70px;
		line-height: 60px;
		height: auto;
		margin-bottom: 20px;
	}
	
	footer h2{
		font-size: 36px;
		padding-left:10%;
		padding-right:10%;
		width:100%;
		box-sizing:border-box;
	}
	
	.page3CoteCentrer .blocCouleur{
		/*display:none;*/
		height: 5px;
		margin-left:20%;
		margin-right:20%;
		width:100%;
		box-sizing:border-box;
		margin-bottom:20px;
	}
	
	footer .bloc.gauche{
		padding-left:10%;
		padding-right:10%;
		width:100%;
		box-sizing:border-box;
		text-align:center;
		margin-right: 0px;
	}
	
	footer .bloc.droite{
		padding-left:10%;
		padding-right:10%;
		width:100%;
		box-sizing:border-box;
		text-align:center;
		margin-left: 0px;
	}
	
	footer .bloc.gauche p{

		text-align:center;
	}
	
	footer .bloc.droite p{

		text-align:center;
	}
	
}

@media screen and (max-width:480px)
{
	
	
	
	
}

@media screen and (max-width:420px){

}

@media screen and (max-width:360px){

}

@media screen and (max-width:320px){

}


