/*-------------------MISE EN PAGE--------------------*/
.header {
	width: 100%;
	background: #ffffff;
	margin: 0 auto;
}

.bodier{
	width: 80%;
    margin-left:auto;
    margin-right:auto;
}
.footer {
	font-size: 11px;
	background: #203040;
	padding: 10px 0;
}

h1{
color: #5F9EA0;
}

h2{
color: #000080;
font-size:14px;
}
body{
	font-family: 'Open Sans', sans-serif;
    font-size:13px;
}

/*------------------Photo de Contact------------------*/
.roundedImage{
    overflow:hidden;
    -webkit-border-radius:75px;
    -moz-border-radius:75px;
    border-radius:75px;
    width:130px;
    height:130px;
}

/*--------------Tableau du pied de page -------------*/
#MaTable {
    width: 80%;
    padding: 2px; 
    border-spacing: 0px;
    text-align : center;	
}
.tabcenter{
    margin-left:auto;
    margin-right:auto;
}

/*------------------Tableau du MENU------------------*/
#MaTable2 {
    width: 100%;
    padding: 0; 
    border-spacing: 10px;
    text-align : right;	
	font-family:'Open Sans', sans-serif;
	font-size: 14px;
}
/*----------------Tableau Descriptif-----------------*/
#MaTable3 {
    width: 80%;
    padding: 0px; 
}
#MaTable4 {
    width: 100%;
    padding: 0px; 
}
/*---------------------MENU--------------------------*/
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:inline-block;
position:relative;
border-radius:0px 0px 0px 0px; /*arrondir les angles des rectangles*/
}
#menu ul li{
display:inherit;
}

#menu ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
/* le sous menu reste affiché quand on est plus desus*/
-moz-transition: .5s all .0s;
-webkit-transition: .5s all .0s;
transition: .5s all .0s;
}
#menu li:hover ul{
max-height:15em;
}
/* background des liens menus et sous menus (inchanger au survol)*/
#menu li:first-child ,#menu li:first-child li{
background-color: #FFF;
}

/* les a href */
#menu a{
text-decoration:none;
display:block;
padding:8px 32px; /*dimmension des "rectangles"*/
color:#000000;
font-family:'Open Sans', sans-serif;
}
#menu ul a{
padding:8px 0;
}

#menu li:hover li a{
color: #5F9EA0;
text-transform: inherit;
}
/*couleur du lien au passage de la souris*/
#menu li:hover a, #menu li li:hover a, #menu li:hover li{
color:#5F9EA0;
}

/*---------------DIAPORAMA 400x200-------------------*/
.slider{
position:relative;
width:400px;
height:200px;
overflow:hidden;
margin:auto;
}
.slider div{
width:1200px;
position:absolute;
left:0;
-webkit-animation:slide 10s ease 0s infinite;
-moz-animation:slide 10s ease 0s infinite;
-ms-animation:slide 10s ease 0s infinite;
-o-animation:slide 10s ease 0s infinite;
animation:slide 10s ease 0s infinite;
}
.slider img{
display:inline-block;
}
@keyframes slide{
0{left:0px}
33%{left:-400px}
33.01%{left:-401px}
63%{left:-800px}
63.01%{left:-801px}
99.99%{left:-1200px}
}
@-webkit-keyframes slide{
from{left:0px}
33%{left:-400px}
33.01%{left:-401px}
63%{left:-800px}
63.01%{left:-801px}
99.99%{left:-1200px}
}

/*---------------DIAPORAMA 400x300-------------------*/
.slider2{
position:relative;
width:400px;
height:300px;
overflow:hidden;
margin:auto;
}
.slider2 div{
width:1200px;
position:absolute;
left:0;
-webkit-animation:slide 10s ease 0s infinite;
-moz-animation:slide 10s ease 0s infinite;
-ms-animation:slide 10s ease 0s infinite;
-o-animation:slide 10s ease 0s infinite;
animation:slide 10s ease 0s infinite;
}
.slider2 img{
display:inline-block;
}
@keyframes slide2{
0{left:0px}
33%{left:-400px}
33.01%{left:-401px}
63%{left:-800px}
63.01%{left:-801px}
99.99%{left:-1200px}
}
@-webkit-keyframes slide2{
from{left:0px}
33%{left:-400px}
33.01%{left:-401px}
63%{left:-800px}
63.01%{left:-801px}
99.99%{left:-1200px}
}

/*---------------Fond du site(ajusté à l'écran)-------------------*/
html { 
  margin:0;
  padding:0;
  background: url(./fond.jpg) no-repeat center fixed; /*image libre de droit création perso*/
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}