/*********
MINI RESET
**********/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Verdana, Arial, sans-serif;
    font-size: 62.5%;
    line-height: 1.5;
}

body {
    font-size: 1.4em;
    color: aliceblue;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;    
}

/***************COULEURS DES LIENS***************************************/

a{
    color: #308ae5;
}

a:hover{
    color: red;
}

/***Fond et textes***/

body{
    background-color: #333333;
}

/*********************menu**********************************************/

nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

main {
    position: relative;
    align-content: center;
}

/***********************STYLES DU SLIDER***************************************/
figure {
    margin: 0;
}

main ul {
    display: table;
    align-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
}

main ul li {
    display: table-cell;
    padding-right: 30em;
   
}

main ul li:last-child {
    padding-right: 0;
    align-items: center;
}

main ul li figure {
    position: relative;
}


.slideshow img{
    height: 200px;    
}


.slideshow {
    padding-bottom: 2em;
    overflow: hidden;
    animation: slideshowAnim 30s ease 0s infinite;
    /*nom de l'animation   durée      début   répetition*/
    margin-left: 2em;
}

.slideshow::before {
    content: url("masque.png");
    background: url("masque.png");
    display: block;
    height: 200px;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99999;
}

.slideshow::after {
    content: " ";
    display: block;
    height: 0;
    font-size: 0;
    line-height: 0;
    clear: both;
}

@keyframes slideshowAnim{
    from,11%,to {margin-left:35em;} /*etape 1 de 0 à 11% : place le bloc d'images avec une marge gauche de 25em */
    22%,23%{margin-left:-10em;}     /*etape 2 de 22 à 23% : bloc d'image avec une marge gauche de -10em */
    34%,35%{margin-left:-55em;}     
    46%,47%{margin-left:-105em;}
    58%,59%{margin-left:-150em;}
    70%,71%{margin-left:-195em;}
    82%,83%{margin-left:-245em;}
    94%,95%{margin-left:-290em;}
    99.99%{margin-left: 35em;}
}



/***********************titre*******************/
header h1{
    text-align: center;
    color:chartreuse;
    margin: 2em auto 2em auto;
}
nav {
    margin-bottom: 2em;
}

/*************************************navbar********************************************/



/*************************************photos***************************************************/

#activites{
    text-align: center;
    width: auto;
    margin: auto;
}

#activites img{
    display: block;
    width: 100%;
    max-width: 450px;
   margin: auto;
}


/************************************coordonnees******************************************/
#coordonnees{
    display: flex;
    padding-top: 2em;
    margin: auto;
}

#coordonnees p{
    padding-left: 2em;
    text-align: center;
}

iframe{
    width: 100%;
    max-width: 500px;
}


/****************************************tableau*****************************************/


#tarifs{
    text-align: center;

}

#tarifs table,#tarifs td,#tarifs tr,#tarifs th {
                border: 1px solid aliceblue;
                border-collapse: collapse;
            }

#tarifs table{
    margin: auto;
}

/*****************************contact**********************************************************/

#contact{
    margin: auto;
    text-align: center;
}

#contact table,#contact td,#contact tr{
    margin: auto;
    text-align: right;
    border: 0px solid black;
}

/*********************************horaires****************************************/

#horaires{
    margin: auto;
    text-align: center;
}


/*********************************footer*******************************************/
footer{
    text-align: center;
    margin-top: 5em;
    font-size: 0.8em; 
}
/*****activités*******************************/
#activites{
    display: inline-block;
}

#activites figure{
    height: 225px;
    width: 300px;
    align-content: center;
}

#activites img{
    height: auto;
    max-height: 200px;
    width: auto;
    display: flex;
    
}

*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
    max-width: none;
    width: calc(100% + 50px);
    opacity: 0.7;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(40px,0,0);
}

figure.effect-lily figcaption {
    text-align:center;
}

figure.effect-lily figcaption > div {
    bottom: 0;
    left: 0;
    padding: 0em;
    width: 100%;
    height: 50%;
}

figure.effect-lily h4,
figure.effect-lily p {
    transform: translate3d(0,-25px,0);
}

figure.effect-lily h4 {
    transition: transform 0.35s;
}

figure.effect-lily p {
    color: rgba(255,255,255,0.8);
    opacity: 0;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
    opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h4,
figure.effect-lily:hover p {
    transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
    transition-delay: 0.05s;
    transition-duration: 0.35s;
}


.flex-4-col {
  
  display: flex;
}



/*********************************presentation*************************************************/

#presentation{
    text-align: center;
}

#presentation img{
    height: 200px;
}

#presentation td{
    width: 100em;
    text-align: center;
}