/* Set the background color of body to tan */
body {
  /*background-color: tan;*/
  background-image: url("fond.jpg"); /* relatif */
  background-repeat:repeat-y ;
width:100%;
padding:0;
margin:0;  
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
}

.jiaby{
background-color: #fff; 
width:90%;
margin-left:10%;
box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.2);
}

.loha{

padding:0; 
}



/*tolotra*/

#acc{
margin-left:30px;

}

nav{
width:100%;
margin:0 auto;
background-color:lightblue;

}

nav ul{
list-style-type:none;
padding:0;
}

nav ul li{
float:left;
width:15%;
text-align:center;

position:relative;

}

nav > ul > li{
height:60px;
}

nav ul::after{
content:"";
display:table;
clear:both;

}

nav a{
display:block;
text-decoration:none;
color: black;
background-color: lightblue;
text-transform:uppercase;

margin: 0;
bottom:0;
padding: .5em 1.5em;
font-size: inherit;
box-sizing: border-box;
width:100%;
height:100%;
}



.zanaka{
display:none;

position:absolute;
width:100%;
z-index:1000;
}

nav > ul > li:hover > a{
color: white;
background-color: steelblue;
}

nav >  ul li:hover .zanaka{
display:block;
}

.zafy{
display:none;

position:absolute;
padding:0;
top:0;
width:100%;
z-index:2000;
}

.zafy a{
background-color: skyblue;
}

nav >ul li ul li:hover .zafy{
display:block;
/*margin-left:150px;*/
margin-left:100%;
padding:0;
}


nav >ul li ul li:hover .zafya{
display:block;
margin-left:-100%;
}

.zanaka li{
float:none;
width:100%;
border-top: 1px solid white;

}

.zanaka a:hover{
color: white;
background-color: steelblue;

}

.reny > a::after{
content:"";
font-size:12px;
}



.kibo{

padding:0;
}

.voky{
padding:0;
}

.vody{

padding:0; 
}



/*position*/
.loha{
width:100%;
}

.tenda{
width:100%;
}


.kibo{
display:flex;
flex-direction: row;
width:100%;
}

.voky img{
 display:block;
  width: 100%;
  height: auto;
}
.vody{
width:100%;
background-color: steelblue;
color:white;
}

.dio{
clear:both;
}





#v2{
background-color: white;
width:73%;
/*float:left;*/
padding:20px;

}

#v2 p{
text-align:justify;
}

#v3 h3{
color:steelblue;
}


#v3{
background-color: white;
width:20%;
/*float:left;*/
padding:10px;

}

#v3 a{
display:block;
width:100%;
height:auto;
text-decoration:none;
color:black;
}

#v3 a:hover{
color:steelblue;

}

#v4{
background-color: white;
width:85%;
float:none;
padding:20px;
}

#v4 p{
text-align:justify;
}

#v4 h3{
color:steelblue;
}

table{   
    border-collapse: collapse;
}
td{  
    border: 1px solid #a2a9b1; 
	padding:15px;
}

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

.fanamenu{
display:flex;
justify-content:center;
text-decoration:none;
}

.fana > a{
display:block;
width:30px;
height:30px;
border:1px solid grey;
color:black;
text-decoration:none;
}

.fana{
text-align:center;
}

.fana > a:hover{
background-color:grey;
}



@keyframes slideshow__fade {
  0% {
    opacity: 0;
    z-index: 2;
  }
  6.6666666667% {
    opacity: 1;
  }
  26.6666666667% {
    opacity: 1;
  }
  27.6666666667% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
  }
}


.diaporama {
  position: relative;
  width:450px;
  margin:0 auto;
  /*background-color:red;*/
}

.diaporama img:not(:first-child) {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  animation-duration: 30s; /*On retrouve nos 30 secondes ici */
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: slideshow__fade;
  animation-timing-function: ease-in;
  transition: opacity 2s ease-in;
}

.diaporama img:nth-child(1) {
  animation-delay: 0s;
}
.diaporama img:nth-child(2) {
  animation-delay: 6s;
}
.diaporama img:nth-child(3) {
  animation-delay: 12s;
}
.diaporama img:nth-child(4) {
  animation-delay: 18s;
}
.diaporama img:nth-child(5) {
  animation-delay: 24s;
}





/* ====================================================================On screens that are 992px or less, set the background color to blue
========================================================================================================================================== */
@media screen and (max-width: 992px) {
  body {
    /*background-color: blue;*/
  }

  .jiaby{
background-color: #fff; 
width:95%;
margin-left:5%;
box-shadow: 0px 0px 16px 8px rgba(0,0,0,0.2);
}

#logo{
height:150px;
}

nav ul li{

width:16%;

}

nav > ul > li{
height:80px;
}
/*position*/
.loha{
width:100%;
}

.tenda{
width:100%;
}

.kibo{
display:flex;
flex-direction: column;
width:100%;
}

.voky img{
 display:block;
  width: 100%;
  height: auto;
}

.vody{
width:100%;
}



#v2{
width:90%;
/*float:none;*/
}

#v3{
/*float:none;*/
width:90%;
}





}
/* =====================================================================On screens that are 600px or less, set the background color to olive 
===========================================================================================================================================*/
@media screen and (max-width: 600px) {
body {
  /*background-color: tan;*/
  background-image:none;
}


.jiaby{
background-color: #fff; 
width:100%;
margin-left:0;
box-shadow:none;
}

#logo{
height:100px;
}


/*tolotra*/

nav{
width:100%;
margin:0 auto;
background-color:lightblue;

}

nav ul{
list-style-type:none;
padding:0;
}

nav ul li{
float:none;
width:50%;
text-align:center;

position:relative;

}

nav > ul > li{
height:60px;
border-top: 1px solid grey;
}

nav ul::after{
content:"";
display:table;
clear:both;

}

nav a{
display:block;
text-decoration:none;
color: black;
background-color: lightblue;

margin: 0;
bottom:0;
padding: .5em 1.5em;
font-size: inherit;
box-sizing: border-box;
width:100%;
height:100%;
}



.zanaka{
display:none;

position:absolute;
width:100%;
margin-left:100%;
top:0;
z-index:1000;
}

.zanaka a{
background-color: lightgrey;
}

nav > ul > li:hover > a{
color: white;
background-color: steelblue;
}

nav >  ul li:hover .zanaka{
display:block;
}

.zafy{
display:none;

position:absolute;
padding:0;
top:0;
width:100%;
z-index:2000;
}

.zafy a{
background-color: white;
}

nav >ul li ul li:hover .zafy{
display:block;
/*margin-left:150px;*/
margin-left:-100%;
padding:0;
}


nav >ul li ul li:hover .zafya{
display:block;
margin-left:-100%;
}

.zanaka li{
float:none;
width:100%;
border-top: 1px solid grey;

}

.zanaka a:hover{
color: white;
background-color: steelblue;

}

.reny > a::after{
content:"";
font-size:12px;
}

 /*position*/
.loha{
width:100%;
}

.kibo{
display:flex;
flex-direction: column;
width:100%;
}

.voky img{
 display:block;
  width: 100%;
  height: auto;
}

.vody{
width:100%;
}


#v2{
background-color: white;
width:95%;
/*float:none;*/
padding:10px;
margin:0;
}


  
 #v3{
background-color: white;
width:95%;
/*float:none;*/
padding:10px;
} 
  
 .diaporama {
  position: relative;
  width:400px;
  margin:0;
} 
  
 .puba img{
 display:block;
  width: 100%;
  height: auto;
} 
  
 }