.js-heralbony__beyondguide-list {
  display: block;
  margin-bottom: 30px;
}

.js-heralbony__beyondguide-list .slick-track {
  display: flex;
  height: auto;
}

.js-heralbony__beyondguide-list .slick-slide {
  display: flex;
  height: auto;
  flex-direction: column;
}

.js-heralbony__beyondguide-list .slick-slide>div {
  height: 100%;
  display: flex;
  justify-content: center;
}

.js-heralbony__beyondguide-item {
  border-bottom: none;
  margin-bottom: 0;
  display: flex !important;
}

.js-heralbony__beyondguide-slider-controls {
  display: flex;
  justify-content: right;
  align-items: center;
}

.js-heralbony__beyondguide-btn-arrow,
.js-heralbony__beyondguide-btn-player {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M21.1786 2.82141C19.3875 0.977344 16.4728 0.080625 12.007 0H11.993C7.52672 0.080625 4.61203 0.977344 2.82141 2.82141C0.977344 4.6125 0.080625 7.52719 0 11.993V12.007C0.080625 16.4733 0.977344 19.388 2.82141 21.1786C4.61203 23.0231 7.52672 23.9194 11.993 24H12.007C16.4728 23.9194 19.3875 23.0231 21.1786 21.1791C23.0227 19.388 23.9194 16.4733 24 12.007V11.993C23.9194 7.52719 23.0227 4.6125 21.1786 2.82141Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
  position: relative;
  border: 1px solid #cc0000;
  background-color: #cc0000;
  cursor: pointer;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: background, border, color, fill, content, opacity, -webkit-transform;
  transition-property: background, border, color, fill, content, opacity, -webkit-transform;
  transition-property: background, border, color, transform, fill, content, opacity;
  transition-property: background, border, color, transform, fill, content, opacity, -webkit-transform;
}

.js-heralbony__beyondguide-btn-arrow::before,
.js-heralbony__beyondguide-btn-player::before {
  color: #fff;
  font-size: 1.5rem;
  top: unset;
}

.js-heralbony__beyondguide-btn-arrow.icon-arrow-left {
  margin-right: 20px;
}

.js-heralbony__beyondguide-btn-arrow.icon-arrow-right {
  margin-left: 20px;
}

.js-heralbony__beyondguide-btn-player {
  margin-left: 8px;
}

.js-heralbony__beyondguide-slider-dots {}

.js-heralbony__beyondguide-slider-dots .slick-dots {
  position: unset;
  font-size: 0;
  display: flex;
}

.js-heralbony__beyondguide-slider-dots .slick-dots li button:before{
  background: #666666;
}
.js-heralbony__beyondguide-slider-dots .slick-dots li.slick-active button:before {
    background: #cc0000;
    opacity: 1;
}

  .icon-arrow-left:hover::before{
    animation:slick_arrow-move .5s cubic-bezier(.215,.61,.355,1) forwards
  }

  @keyframes slick_arrow-move{
  0%{
    transform:translate(0);
    opacity:1
  }

  40%{
    transform:translate(-200%, 0);
    opacity:0
  }

  60%{
    transform:translate(200%, 0);
    opacity:0
  }

  to{
    transform:translate(0);
    opacity:1
  }
}
  .icon-arrow-right:hover::before{
    animation:slick_arrow-move2 .5s cubic-bezier(.215,.61,.355,1) forwards
  }

  @keyframes slick_arrow-move2{
  0%{
    transform:translate(0);
    opacity:1
  }

  40%{
    transform:translate(200%, 0);
    opacity:0
  }

  60%{
    transform:translate(-200%, 0);
    opacity:0
  }

  to{
    transform:translate(0);
    opacity:1
  }
}

@media (hover: hover) {
  [class^="js-heralbony__beyondguide-btn-"]:hover {
    opacity: 0.6;
  }
}

@media screen and (max-width: 767px) {
  .js-heralbony__beyondguide-list {
    margin-bottom: 15px;
  }

  .js-heralbony__beyondguide-btn-arrow,
  .js-heralbony__beyondguide-btn-player {
    width: 2.5rem;
    height: 2.5rem;
  }

  .js-heralbony__beyondguide-btn-arrow.icon-arrow-left {
    margin-right: auto;
  }

  .js-heralbony__beyondguide-btn-arrow.icon-arrow-right {
    margin-left: auto;
  }
}