.b-carousel {
  height: 436px;
  margin: 0 auto 2em;
  position: relative;
  width: 100%;
}

.b-carousel__frame {
  height: 436px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.b-carousel__items {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 9999px;
}
.b-carousel__items li {
  display: inline-block;
  float: left;
  transition: margin-left 0.25s linear;
  width: 418px;
}
.b-carousel__items li img {
  max-width: 100%;
}

.b-carousel__nav-arrow_prev,
.b-carousel__nav-arrow_next {
  background: transparent;
  border: 0;
  color: #333b8c;
  cursor: pointer;
  font: lighter 10em sans-serif;
  outline: 0;
  position: absolute;
  top: 0;
}
.b-carousel__nav-arrow_prev:hover,
.b-carousel__nav-arrow_next:hover {
  opacity:0.7;
}

.b-carousel__nav-arrow_prev {
  opacity: 0;
}

.b-carousel__nav-arrow_next {
  right: 0px;
  z-index: 99;
  height: 100%;
  background: rgba(255, 255, 255, 0.68);
width: calc(100% - 418px);
}



.b-carousel__nav-dots {
  display: inline-block;
  height: 1.25em;
  margin: 0;
  position: absolute;
  bottom: .75em;
  right: 2em;
}
.b-carousel__nav-dots li {
  background: #555;
  border-radius: .75em;
  cursor: pointer;
  display: inline-block;
  height: .75em;
  margin: 0 .75em;
  width: .75em;
}
.b-carousel__nav-dots li.active {
  background: #fff;
  box-shadow: 0 0 3px 3px #ddd;
}
.b-carousel__nav-dots li:hover {
  background: #f5f5f5;
}

.b-carousel__button_stop,
.b-carousel__button_play {
  height: 2.25em;
  position: absolute;
  bottom: .33em;
  left: 2em;
  text-align: center;
  width: 5em;
}

.b-carousel__button_stop {
  left: 100px;
}


.tooltip {
  background: #fefac9;
  border: 2px dashed #f0db4f;
  cursor: default;
  display: inline-block;
  padding: 0 5px;
}

@media (max-width: 506px){
  .b-carousel__items li {
    width: 270px;
  }
  .b-carousel__nav-arrow_next {
    width: calc(100% - 270px);
  }
}