/**
 * ItcSlider
 * @version 1.0.0
 * @author https://github.com/itchief
 * @copyright Alexander Maltsev 2020 - 2022
 * @license MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
 * @tutorial https://itchief.ru/javascript/slider
 */
.itc-slider { position: relative; margin-bottom: 20px; }
.itc-slider__wrapper { overflow: hidden; }
.itc-slider__items { gap: 5px; display: flex; transition: transform 0.5s ease; will-change: transform; }
.itc-slider__transition-none { transition: none; }
.itc-slider__item { flex: 0 0 19.5%; max-width: 19.5%; height: 185px; user-select: none; will-change: transform; background-size: cover !important; }
.itc-slider__btn { position: absolute; top: 50%; display: flex; justify-content: center; align-items: center; width: 40px; height: 50px; color: #fff; text-align: center; background: rgb(0 0 0 / 20%); border: none; transform: translateY(-50%); cursor: pointer; }
.itc-slider__btn_hide { display: none; }
.itc-slider__btn_prev { left: 0; }
.itc-slider__btn_next { right: 0; }
.itc-slider__btn:hover, .itc-slider__btn:focus { color: #fff; text-decoration: none; background: rgb(0 0 0 / 30%); outline: 0; }
.itc-slider__btn::before { content: ""; display: inline-block; width: 20px; height: 20px; background: transparent no-repeat center center; background-size: 100% 100%; }
.itc-slider__btn_prev::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); }
.itc-slider__btn_next::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); }
.itc-slider__indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 15; display: flex; justify-content: center; margin: 0 15%; padding-left: 0; list-style: none; }
.itc-slider__indicator { flex: 0 1 auto; box-sizing: content-box; width: 30px; height: 5px; margin-right: 3px; margin-left: 3px; text-indent: -999px; background-color: rgb(255 255 255 / 50%); background-clip: padding-box; border-top: 15px solid transparent; border-bottom: 15px solid transparent; cursor: pointer; }
.itc-slider__indicator_active { background-color: rgb(255 255 255 / 90%); }
 @media (max-width: 768px) { 
    .itc-slider__item { flex: 0 0 50%; max-width: 50%; }
 }
 @media (max-width: 500px) { 
    .itc-slider__item { flex: 0 0 100%; max-width: 100%; }
 }