/* diaporama par défaut - styles communs */

.diaporama {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(126, 178, 183, 1);
}

img.diapoimage {
  height: 100%;
  width: 100%;
}

video.diapovideo {
height: 100%;
width: 100%;
background-color: black;
}

.diapo div {
height: 100%;
display: flex;
padding: 0.8em 1.4em 2em 1.4em;
background:  rgba(126, 178, 183, 0.4);
align-items: center;
justify-content: center;
}

.diapo figcaption {
  position: relative;
  bottom: 10%;
  text-align: center;
  color: white;
}

.diapo figcaption.diapovideocaption {
position: relative;
bottom: 20%;
text-align: center;
color: white;
}

.diapo figcaption a:link, .diapo figcaption a:visited, .diapo figcaption a:active {
color: #c79090;
text-decoration: none;
}

.diapo figcaption a:hover {
text-decoration: underline;
}

.diaposdots {
  width: 100%;
  position: absolute;
  top: 6px;
  text-align: center;
}

ul.diaposdots {
  list-style:none;
}

ul.diaposdots li {
  width: 12px;
  height: 12px;
  margin: 0px 2px;
  border-radius: 50%;
  border: 1px solid rgba(126, 178, 183, 1);
  background:  rgba(126, 178, 183, 0.4);
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

ul.diaposdots li:hover, ul li.active {
background:  rgba(126, 178, 183, 1);
}

/* diaporama par défaut avec 4 diapos */

.diapos {
    width: 400%;
    height: 100%;
    position:relative;
    text-align: center;
}

.diaposanimall {
  animation: diaposanimall 12s infinite;
}

.diaposanimall:hover {
  animation-play-state: paused;
}

.diaposanim1 {
  animation: diaposanim1 12s 1;
  animation-fill-mode: forwards;
}

.diaposanim2 {
  animation: diaposanim2 12s 1;
  animation-fill-mode: forwards;
}

.diaposanim3 {
  animation: diaposanim3 12s 1;
  animation-fill-mode: forwards;
}

.diaposanim4 {
  animation: diaposanim4 12s 1;
  animation-fill-mode: forwards;
}

.diapo {
    width: 25%;
    height: 100%;
    float: left;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@keyframes diaposanimall{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:-100%;
    }
    46%{
      margin-left:-100%;
    }
    50%{
      margin-left:-200%;
    }
    71%{
      margin-left:-200%;
    }
    75%{
      margin-left:-300%;
    }
    96%{
      margin-left:-300%;
    }
  }

  @keyframes diaposanim1{
    0%{
      margin-left:-300%;
    }
    6%{
      margin-left:0%;
    }
    100%{
      margin-left:0%;
    }
  }

  @keyframes diaposanim2{
    0%{
      margin-left:-300%;
    }
    6%{
      margin-left:-100%;
    }
    100%{
      margin-left:-100%;
    }
  }

  @keyframes diaposanim3{
    0%{
      margin-left:0%;
    }
    6%{
      margin-left:-200%;
    }
    100%{
      margin-left:-200%;
    }
  }

  @keyframes diaposanim4{
    0%{
      margin-left:0%;
    }
    6%{
      margin-left:-300%;
    }
    100%{
      margin-left:-300%;
    }
  }

/* diaporama avec 5 diapos */

.diapos5 {
  width: 500%;
  height: 100%;
  position:relative;
  text-align: center;
}

.diaposanimall5 {
animation: diaposanimall5 15s infinite;
}

.diaposanimall5:hover {
animation-play-state: paused;
}

.diaposanim5-1 {
animation: diaposanim5-1 12s 1;
animation-fill-mode: forwards;
}

.diaposanim5-2 {
animation: diaposanim5-2 12s 1;
animation-fill-mode: forwards;
}

.diaposanim5-3 {
animation: diaposanim5-3 12s 1;
animation-fill-mode: forwards;
}

.diaposanim5-4 {
animation: diaposanim5-4 12s 1;
animation-fill-mode: forwards;
}

.diaposanim5-5 {
  animation: diaposanim5-5 12s 1;
  animation-fill-mode: forwards;
  }

.diapo5 {
  width: 20%;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@keyframes diaposanimall5{
  0%,100%{
    margin-left:0%;
  }
  16%{
    margin-left:0%;
  }
  20%{
    margin-left:-100%;
  }
  36%{
    margin-left:-100%;
  }
  40%{
    margin-left:-200%;
  }
  56%{
    margin-left:-200%;
  }
  60%{
    margin-left:-300%;
  }
  76%{
    margin-left:-300%;
  }
  80%{
    margin-left:-400%;
  }
  96%{
    margin-left:-400%;
  }
}

@keyframes diaposanim5-1{
  0%{
    margin-left:-200%;
  }
  6%{
    margin-left:0%;
  }
  100%{
    margin-left:0%;
  }
}

@keyframes diaposanim5-2{
  0%{
    margin-left:-300%;
  }
  6%{
    margin-left:-100%;
  }
  100%{
    margin-left:-100%;
  }
}

@keyframes diaposanim5-3{
  0%{
    margin-left:0%;
  }
  6%{
    margin-left:-200%;
  }
  100%{
    margin-left:-200%;
  }
}

@keyframes diaposanim5-4{
  0%{
    margin-left:-100%;
  }
  6%{
    margin-left:-300%;
  }
  100%{
    margin-left:-300%;
  }
}

@keyframes diaposanim5-5{
  0%{
    margin-left:-200%;
  }
  6%{
    margin-left:-400%;
  }
  100%{
    margin-left:-400%;
  }
}

/* diaporama avec 6 diapos */

.diapos6 {
  width: 600%;
  height: 100%;
  position:relative;
  text-align: center;
}

.diaposanimall6 {
animation: diaposanimall6 18s infinite;
}

.diaposanimall6:hover {
animation-play-state: paused;
}

.diaposanim6-1 {
animation: diaposanim6-1 12s 1;
animation-fill-mode: forwards;
}

.diaposanim6-2 {
animation: diaposanim6-2 12s 1;
animation-fill-mode: forwards;
}

.diaposanim6-3 {
animation: diaposanim6-3 12s 1;
animation-fill-mode: forwards;
}

.diaposanim6-4 {
animation: diaposanim6-4 12s 1;
animation-fill-mode: forwards;
}

.diaposanim6-5 {
  animation: diaposanim6-5 12s 1;
  animation-fill-mode: forwards;
  }
  
.diaposanim6-6 {
  animation: diaposanim6-6 12s 1;
  animation-fill-mode: forwards;
  }

.diapo6 {
  width: 16.66%;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@keyframes diaposanimall6{
  0%,100%{
    margin-left:0%;
  }
  14%{
    margin-left:0%;
  }
  17%{
    margin-left:-100%;
  }
  30%{
    margin-left:-100%;
  }
  33%{
    margin-left:-200%;
  }
  47%{
    margin-left:-200%;
  }
  50%{
    margin-left:-299.88%;
  }
  64%{
    margin-left:-299.88%;
  }
  67%{
    margin-left:-399.84%;
  }
  80%{
    margin-left:-399.84%;
  }
  83%{
    margin-left:-499.76%;
  }
  97%{
    margin-left:-499.76%;
  }
}

@keyframes diaposanim6-1{
  0%{
    margin-left:-200%;
  }
  6%{
    margin-left:0%;
  }
  100%{
    margin-left:0%;
  }
}

@keyframes diaposanim6-2{
  0%{
    margin-left:-300%;
  }
  6%{
    margin-left:-100%;
  }
  100%{
    margin-left:-100%;
  }
}

@keyframes diaposanim6-3{
  0%{
    margin-left:0%;
  }
  6%{
    margin-left:-200%;
  }
  100%{
    margin-left:-200%;
  }
}

@keyframes diaposanim6-4{
  0%{
    margin-left:-100%;
  }
  6%{
    margin-left:-299.88%;
  }
  100%{
    margin-left:-299.88%;
  }
}

@keyframes diaposanim6-5{
  0%{
    margin-left:-200%;
  }
  6%{
    margin-left:-399.84%;
  }
  100%{
    margin-left:-399.84%;
  }
}

@keyframes diaposanim6-6{
  0%{
    margin-left:-300%;
  }
  6%{
    margin-left:-499.76%;
  }
  100%{
    margin-left:-499.76%;
  }
}