html, body
{
	height:100%;
	margin: 0px;
	background-color: #F6FCF5;
}

.container
{
	height:100%;
}

.header
{
	width:100%;
	height:300px;
	/*position: fixed;*/
	background-color: #F6FCF5;
	z-index:10;
}

.header-left
{
	float: left;
	width: 0%;
	height:100%;
}

.header-right
{
	float: right;
	width: 0%;
	height:100%;
}

.header-center
{
	background-image: url('./zen800.png');
	background-repeat:no-repeat;
	background-size:  auto auto;
	background-position:center;
	display: inline-block;
	width: 100%;
	height:100%;
	background-color: #f1e2f7;
	max-height: 100%;
	max-width: 100%;
}

.header-top
{
	width: 100%;
	height:60%;
	
}

.topBar
{
	height:58px;
	background-color: #f1e2f7;
	position: fixed;
	width:100%;
	z-index:10;
}

.button_box
{
	float: left;
	width: 25%;
	height:100%;
	display: flex;
	justify-content: center;
}

.button 
{
  background:  none;
  background-color: #82c0b7;
  /*background-color: Transparent;*/
  border: 0px solid #82c0b7;
  color: white;
  /*padding: 20px 20px;*/
  text-align: center;
  /*color: black;*/	/*couleur du texte des boutons*/
  text-decoration: none;
  /*display: inline-block;*/
  font-size: 20px;
  margin: 4px 4px;
  cursor: pointer;
  width : 20%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  height:50px;
  color:rgba(0,0,0,1);
  background: rgb(130, 192, 183, 1);
  /*position: fixed;*/

}

.active, .button:hover
{
  background-color: #abb98e;
  color:rgba(0,0,0,1);
  background: rgb(171, 185, 142, 1)
}

.button_round
{
	border-radius: 0px;
	z-index:10;
	position:fixed;
}

.button_round:focus {outline:none;}

.rowButtons .btn1 {
  position: absolute;
  top: 10%;
  left: 16%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}

.rowButtons .btn2 {
  position: absolute;
  top: 10%;
  left: 33.4%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}

.rowButtons .btn3 {
  position: absolute;
  top: 10%;
  left: 51.0%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}

.rowButtons .btn4 {
  position: absolute;
  top: 10%;
  left: 68.4%;
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}


.header-bottom
{
	width: 100%;
	height:40%;
}


.header-bottom-left
{
	float: left;
	width: 25%;
	height:100%;
}

.header-bottom-right
{
	float: right;
	width: 25%;
	height:100%;
}

.header-bottom-center
{
	display: inline-block;
	width: 50%;
	height:100%;
	text-align:center;
	background-color: #ffffff;
	border: 0px solid black;
	opacity: 0.8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
	color:	#5D6D7E;
	font-family:    Calibri;
	z-index:5;
	
}

.header-name
{
	height:30%;
	line-height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size:      30px

}

.header-title
{
	height:30%;
	line-height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
	font-weight:	bold;
	font-size:      25px
}

.header-tel
{
	height:30%;
	line-height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size:      25px
}

.column-left
{
	float: left;
	width: 0%;
	height:100%;
}

.column-right
{
	float: right;
	width: 0%;
	height:100%;
}

.column-center
{
	display: inline-block;
	width: 100%;
	height:auto;
}

.page
{
	width:100%;
	height:auto;
	background-color: #f1e2f7;
	top: 300px;
	position: absolute;
	display: table;
	/*z-index:5;*/
}

.citation-left
{
	float: left;
	width: 10%;
	height:200px;
}

.citation-right
{
	float: right;
	width: 10%;
	height:200px;
}

.citation-center
{
	display: inline-block;
	width: 80%;
	height:200px;
	
	font-family:    French Script MT, Gabriola, Arial, Helvetica, sans-serif;
	font-size:      50px;
	font-weight:    bold;
	font-style:		italic;
	color:			#9900CC;
}

@media screen and (min-width: 901px){
  div.citation-center {
    font-size:      50px;
  }
}

@media screen and (min-width: 701px) and (max-width: 900px){
  div.citation-center {
    font-size:      40px;
  }
}

@media screen and (max-width: 700px){
  div.citation-center {
    font-size:      30px;
  }
}

.citation
{
	width: 100%;
	height:150px;
}

.citation2
{
	width: 100%;
	height:120px;
	font-family:    Calibri;
	font-size:      40px;
	font-weight:    bold;
	font-style:		italic;
	color:			#9900CC;
}

.rowCitationBis-left
{
	float: left;
	width: 5%;
	height:150px;
}
.rowCitationBis
{
	display: inline-block;
	width: 90%;
	font-family:    Calibri;
	font-size:      30px;
	color:			#000000;
	height:150px;
}

.rowCitationBis-right
{
	float: right;
	width: 5%;
	height:150px;
}

.citation-author
{
	width: 100%;
	height:50px;
	text-align:right;
}

.presentation
{
	width: 100%;
	height:auto;
	display: flex; align-items: stretch;
}

.presentation-left
{
	float: left;
	width: 10%;
	/*height:100%;*/
}

.presentation-right
{
	float: left;
	width: 10%;
	/*height:100%;*/
}

.presentation-text
{
	float: left;
	width: 80%;
	height:100%;
	padding:10px;
	background-color: #cce0ec;
	font-family:    Calibri;
	font-size:      25px;
	text-align: center;
	text-align: justify;
	text-justify: inter-word;
}

.presentation-logo
{
	float: left;
	width: 100%;
	height:100%;
	vertical-align: middle;
	display: flex;
    align-items: center;
	justify-content: center;
	text-align: center;
}

.presentation-logo img
{
	width: 80%;
	height: auto;
	
}

.presentation-adress
{
	padding: 0px;
	text-align: left;
	margin-top:10px;
	font-family:    Calibri;
	font-size:      25px;
}



.column_Presentation1 
{
  float: left;
  width: 10%;
  padding: 0px;
  height: 30px;
}
.column_Presentation2
{
	float: left;
	width: 40%;
	height: 300px;
	border: none;
	padding:10px;
	display: table-cell;
	background-color: #cce0ec;
	overflow:none;

}

.text_presentation2
{
	width: 100%;
	height: auto;
	font-family:    Calibri;	
	text-align: justify;
	text-justify: inter-word;
	font-size:      15x;
	padding:10px;
	display: table-cell;
	vertical-align:middle;
}


@media screen and (min-width: 1501px){
  div.text_presentation2 {
    font-size:      24px;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1500px){
  div.text_presentation2 {
    font-size:      22px;
  }
}


@media screen and (min-width: 901px) and (max-width: 1200px){
  div.text_presentation2 {
    font-size:      20px;
  }
}


@media screen and (min-width: 801px) and (max-width: 900px){
  div.text_presentation2 {
    font-size:      18px;
  }
}

@media screen and (max-width: 800px) {
  div.text_presentation2 {
    font-size:      15x;
  }
}



.column_Presentation3
{
	float: left;
	width: 35%;
	padding: 0px;
	height: 300px;	
	vertical-align: middle;
	display: table-cell;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding:10px;
	white-space: nowrap;
}

.column_Presentation3 img {
  width: 100%;
  height: 100%;
  vertical-align: middle
}

.helper_center {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.column_Presentation4
{
  float: left;
  width: 5%;
  padding: 0px;
  height: 30px;
}








.rowEmpty1 
{
  content: "";
  display: table;
  clear: both;
  height: 30px;
  width: 100%;
}

.rowEmpty2
{
  content: "";
  display: table;
  clear: both;
  height: 80px;
  width: 100%;
}

.rowEmpty3 
{
  content: "";
  display: table;
  clear: both;
  height: 80px;
  width: 100%;
}








.Icon
{
	width:50px;
	display:inline-block;
	float: left;
	height:100px;
}

.icon_image
{
	max-width: 100%;
    max-height: 30px;
	vertical-align: middle;
}

.helper
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.alignVcenter
{
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

.Info-left
{
	float: left;
	width: 10%;
	height:100px;
}

.Info-right
{
	float: right;
	width: 10%;
	height:100px;
}

.Info-center
{
	display: inline-block;
	width: 80%;
	height:100%;
}

.Formations-left
{
	float: left;
	width: 10%;
	height:100px;
}

.Formations-right
{
	float: right;
	width: 10%;
	height:100px;
}

.Formations-center
{
	display: inline-block;
	width: 75%;
	height:auto;
	
	padding:20px;
	font-family:    Calibri;
	font-size:      20px;

	background-color: #cce0ec;
}

.rowEmpty
{
  content: "";
  display: table;
  clear: both;
  height: 30px;
  width: 100%;
  float:left;
}

.Info
{
	background-color: #cce0ec;
	font-family:    Calibri;
	font-size:      25px;
	
}


.Contact
{
	height:100px;
	position: relative;
	display: table-cell;
	vertical-align: middle;
}


.column-left-pourquoi
{
	float: left;
	width: 10%;
	height:400px;
}

.column-right-pourquoi
{
	float: right;
	width: 10%;
	height:400px;
}

.column-center-pourquoi
{
	display: inline-block;
	width: 80%;
	height:400px;
	font-family:    Calibri;
	font-size:      25px;
	text-align: justify;
}