/* ------------------ accessible carousel styles ------------------ */
.relative {
  position: relative;
}
.mod--hidden {
  overflow: hidden;
}
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.news-carrousel__container {
  white-space: nowrap;
}
.news-carrousel__control__list {
  position: absolute;
  list-style-type: none;
  top: 92%;
  right: 0;
  left: 0;
  z-index: 200;
  margin-top: -0.5em;
  padding-left: 0;
  text-align: center;
}
.news-carrousel__control__list__item {
  display: inline-block;
  margin: 0 .5em;
}
.news-carrousel__control__list__link {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: #fff;
  border: 1px solid #555555;
  border-radius: 50%;
  cursor: pointer;
}
.news-carrousel__button-container {
  position: absolute;
  top: 25px;
  z-index: 100;
}
.news-carrousel__button__previous {
  left: 25px;
}
.news-carrousel__button__next {
  right: 25px;
}
.news-carrousel__button__button {
  border: solid rgba(255, 255, 255, 0.7) 2px;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: transparent;
  color: white;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-size: 1em;
}
.news-carrousel__button__button:focus {
  outline: dotted 2px black;
  background-color: rgba(255, 255, 255, 0.8);
}
.news-carrousel__button__button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.news-carrousel__button__img {
  width: 30px;
  height: 30px;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  max-width: none;
}
/* only for minimalist example */
.carrousel__content[aria-hidden=true] {
  display: none;
}
/* ------------------ State rules ------------------ */
.news-carrousel__control__list__link:focus,
.news-carrousel__control__list__link:hover,
.news-carrousel__control__list__link:active,
.news-carrousel__control__list__link[aria-selected=true] {
  background: #858585;
}
.news-carrousel__control__list__link:focus,
.news-carrousel__control__list__link:hover,
.news-carrousel__control__list__link:active {
  outline: 2px dotted #7f7f7f;
}
/* ------------------ transition slide ------------------ */
.slide .carrousel__content {
  display: inline-block;
  vertical-align: top;
  visibility: visible;
  width: 100%;
  position: relative;
  transition: visibility 0s ease, transform .5s ease-in;
  transition-delay: 0;
  white-space: normal;
}

[data-carrousel-active-slide="1"].slide>.carrousel__content {
  transform: translateX(0);
}
[data-carrousel-active-slide="2"].slide>.carrousel__content {
  transform: translateX(-100%);
}
[data-carrousel-active-slide="3"].slide>.carrousel__content {
  transform: translateX(-200%);
}
[data-carrousel-active-slide="4"].slide>.carrousel__content {
  transform: translateX(-300%);
}
[data-carrousel-active-slide="5"].slide>.carrousel__content {
  transform: translateX(-400%);
}
[data-carrousel-active-slide="6"].slide>.carrousel__content {
  transform: translateX(-500%);
}
[data-carrousel-active-slide="7"].slide>.carrousel__content {
  transform: translateX(-600%);
}
[data-carrousel-active-slide="8"].slide>.carrousel__content {
  transform: translateX(-700%);
}
[data-carrousel-active-slide="9"].slide>.carrousel__content {
  transform: translateX(-800%);
}
[data-carrousel-active-slide].slide>[aria-hidden="true"].carrousel__content {
  visibility: hidden;
  transition-delay: .5s, 0s;
}
/* ------------------ transition fade ------------------ */
.fade .carrousel__content {
  -webkit-animation: fadein 1s;
  animation: fadein 1s;
  white-space: normal;
}
.fade .carrousel__content[aria-hidden=true] {
  -webkit-animation: fadeout 1s;
  animation: fadeout 1s;
}
.fade .carrousel__content[aria-hidden=true] {
  display: none;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------ transition none ------------------ */
.none .carrousel__content {
  white-space: normal;
}
.none .carrousel__content[aria-hidden=true] {
  display: none;
}
.oneslide .sss {
  transform: translateX(0);
}
.sss {
  height: 200px;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}
.sss .legend {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px 20px;
  top: 50px;
  width: 100%;
  color: white;
}
.sss .legend p {
  font-family: 'Fedra', sans-serif;
  margin: 0;
}
.sss .legend p.typeevent {
  margin: 10px 0 0 0;
  padding: 0;
  font-weight: 800;
  font-style: italic;
}
.sss .legend p a {
  color: white;
}
.sss .legend p a:hover {
  color: #ddd;
}
.sss .legend h3.titredateevent {
  margin: 0;
  padding: 0;
  font-family: 'Fedra', sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  font-style: italic;
  font-size: 1.5em;
}
.sss .legend h3 a {
  color: white;
}
.sss .legend h3 a:hover {
  color: #72a5b6;
}
#slideraroundwrap {
  position: relative;
  left: -8px;
  width: calc(100% + 16px);
}
@media (min-width:48em) {
  .sss {
    height: 320px;
  }
  .sss .legend {
    top: 130px;
    width: 50%;
  }
  .sss .legend h3.titredateevent {
    line-height: 1.2em;
    font-size: 1.8em;
  }
  #slideraroundwrap {
    left: -16px;
    width: calc(100% + 32px);
  }
}

@media (min-width:61.24em) {
  .sss {
    height: 455px;
  }
  .sss .legend {
    top: 180px;
    width: 40%;
  }
  #slideraroundwrap {
    left: -32px;
    width: calc(100% + 64px);
  }
  .news-carrousel__button__button {
    padding: 25px;
  }
  .news-carrousel__button__img {
    width: 40px;
    height: 40px;
  }
}