/* carousel */
.carousel-wrapper {
    padding: 0 30px;
}

.paf-carousel {
  display: flex;
  min-height: 340px;
  align-items: flex-end;
  justify-content: center;
}

.paf-carousel .carousel-inner {
  position: absolute;
  top: 0;
}

.paf-carousel input[type="radio"][name="paf-carousel"] {
  z-index: 10;
  height: 0;
  width: 0;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  bottom: calc(100px + 0.5em);
  right: -0.5em;
}

.paf-carousel .carousel-inner > .item {
  display: block;
  width: 100%;

  transition-duration: 0.6s;
  transition-property: transform;
  transition-property: transform, visibility;

}

.paf-carousel label {
  position: relative;
  bottom: 100px;
}

@media (min-width: 768px){
  .paf-carousel {
    height: 450px;
  }
  .paf-carousel input[type="radio"][name="paf-carousel"] {bottom: 1.5em;}
  .paf-carousel label {bottom: 1em;}
}
.paf-carousel label::before {
  content: ' ';
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  cursor: pointer;
  background-color: #ccc;
  z-index: 11;
  border: #3276b1 1px solid;
}

.paf-carousel input[type="radio"][name="paf-carousel"]:checked + label::before {
  width: 12px;
  height: 12px;
  background: #3276b1;
  border: #fff 1px solid;
  bottom: -1px;
}

.paf-carousel input[type="radio"][name="paf-carousel"]:focus + label::before {
  background: #333;
  border: #fff 1px solid;
  width: 12px;
  height: 12px;
  bottom: -1px
}

.paf-carousel label::before:hover {
  background-color: #006cc6;
}


/* the first slide defines the height */
.paf-carousel .carousel-inner > .item:nth-child(n+2) {
  position: absolute;
  top: 0;
}

/* Only works for 10 items, but if we have more, we'll have to think about other things…  */
/* per default, an item is to the left */
.paf-carousel .carousel-inner > .item {transform: translateX(-100%); visibility: hidden;}

/* the selected item is not translated */
.paf-carousel [name="paf-carousel"][value="0"]:checked ~ .carousel-inner .item:nth-of-type(1) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="1"]:checked ~ .carousel-inner .item:nth-of-type(2) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="2"]:checked ~ .carousel-inner .item:nth-of-type(3) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="3"]:checked ~ .carousel-inner .item:nth-of-type(4) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="4"]:checked ~ .carousel-inner .item:nth-of-type(5) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="5"]:checked ~ .carousel-inner .item:nth-of-type(6) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="6"]:checked ~ .carousel-inner .item:nth-of-type(7) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="7"]:checked ~ .carousel-inner .item:nth-of-type(8) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="8"]:checked ~ .carousel-inner .item:nth-of-type(9) {transform: translateX(0); visibility: visible;}
.paf-carousel [name="paf-carousel"][value="9"]:checked ~ .carousel-inner .item:nth-of-type(10) {transform: translateX(0); visibility: visible;}

/* items after the selected item are to the right */
.paf-carousel [name="paf-carousel"][value="0"]:checked ~ .carousel-inner .item:nth-of-type(n + 2) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="1"]:checked ~ .carousel-inner .item:nth-of-type(n + 3) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="2"]:checked ~ .carousel-inner .item:nth-of-type(n + 4) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="3"]:checked ~ .carousel-inner .item:nth-of-type(n + 5) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="4"]:checked ~ .carousel-inner .item:nth-of-type(n + 6) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="5"]:checked ~ .carousel-inner .item:nth-of-type(n + 7) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="6"]:checked ~ .carousel-inner .item:nth-of-type(n + 8) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="7"]:checked ~ .carousel-inner .item:nth-of-type(n + 9) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="8"]:checked ~ .carousel-inner .item:nth-of-type(n + 10) {transform: translateX(100%);}
.paf-carousel [name="paf-carousel"][value="9"]:checked ~ .carousel-inner .item:nth-of-type(n + 11) {transform: translateX(100%);}

.paf-carousel .pause-button {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  width: 1.5em;
  height: 1.5em;
  vertical-align: text-top;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  outline: none;
}

.paf-carousel .pause-button:focus {
  color: #fff;
  background: #555;
}
.paf-carousel .pause-button:hover {
  color: #fff;
  background: #006cc6;
}

.paf-carousel .pause-button > span.glyphicon-pause,
.paf-carousel .pause-button > span.glyphicon-play {
  font-size: 14px;
}