@font-face {
  font-family: 'Montserrat';
  src: url('../montserrat.woff2') format('woff2'),
  url('../montserrat.woff') format('woff');
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
}

body {
  overflow-x: hidden;
  background-color: #fff;
  font: 100%/1 'Montserrat' ,sans-serif;
  color: #dae0e0;
}

header {
  margin-bottom: 2rem;
  background-color: #121212;
  text-align: center;
}

h1 {
  padding: 3rem 1rem;
  line-height: 1.4;
  font-size: 1.6rem;
}

h1 a {
  color: #ffc629;
}

h1 a:focus,
h1 a:hover {
  outline: 2px dotted;
}

#box {
  position: relative;
  margin: 2rem;
  width: 160px;
  height: 40px;
}

#carousel1 {
  position: relative;
  width: 400px;
  margin: 2rem auto;
  overflow: hidden;
  -ms-touch-action: pan-y;
}

#carousel2 {
  position: relative;
  left: 0;
  width: 300px;
  margin: 3rem auto 0;
  overflow: visible;
  -ms-touch-action: pan-y;
}

.carousel {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
}

.carousel.sliding {
  transition: left .5s cubic-bezier(.43, .195, .02, 1);
}

.slide {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.carousel1-carousel-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.carousel1-carousel-bullet {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: .25rem;
  cursor: pointer;
}

.carousel1-carousel-bullet.active {
  opacity: .5;
  cursor: default;
}

.carousel1-carousel-control-prev,
.carousel1-carousel-control-next {
  position: absolute;
  top: 0;
  z-index: 3;
  height: 100%;
  width: 50%;
  cursor: pointer;
}

.carousel1-carousel-control-prev {
  left: 0;
}

.carousel1-carousel-control-prev::before {
  content: "Précédent"
}

.carousel1-carousel-control-next {
  right: 0;
}

.carousel1-carousel-control-next::before {
  content: "Suivant"
}

.carousel1-carousel-control-prev.disable,
.carousel1-carousel-control-next.disable {
  opacity: .5;
  cursor: default;
}

.carousel-carousel-play-stop {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(calc(-50vw + 2rem));
  z-index: 4;
  width: 80px;
  height: 40px;
  cursor: pointer;
}

.carousel-carousel-play-stop::before {
  content: "Démarrer"
}

.carousel-carousel-play-stop.play::before {
  content: "Arrêter"
}

#carousel1 .slide div {
  width: 400px;
  height: 200px;
  display: flex;
}

#carousel2 .slide {
  opacity: .75;
}

#carousel2 .slide.active {
  opacity: 1;
}

#carousel2 .slide div {
  width: 300px;
  height: 200px;
  display: flex;
}

#carousel1 .slide div a,
#carousel2 .slide div a {
  padding: 1rem;
  color: #fff;
}

@media screen and (max-width: 521px) {
  #carousel1,
  #carousel1 .slide div,
  #carousel2,
  #carousel2 .slide div {
    width: 100vw;
  }
}