/* SLIDER
==================== */

#slider {
    background: #000;
    /*   border: 5px solid #eaeaea;*/
/*       box-shadow: 1px 1px 5px rgba(0,0,0,0.7);*/
    height: 600px;
    width: 100%;
    margin: 80px auto 0;
    overflow: visible;
    position: relative;
}

#mask {
    width: 100%;
    overflow: hidden;
/*    height: 100%;*/
}


/* Список изображений */

#slider ul {
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#slider li {
    width: 100%;
    /* Ширина изображения */
    height: 600px;
    /* Высота изображения */
    position: absolute;
    top: 0px;
    /* Исходное положение  (за пределами слайдера) */
    margin: 0 auto;
    list-style: none;
    /*    transform: translate3d(0%, 0%, 0) scale(1);*/
}

.sld__img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
/*        min-height: 100%;*/
    margin: 0 auto;
    object-fit: cover;
}

#slider li.firstanimation {
    animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    animation: cyclefive 25s linear infinite;
}


/* Анимация */

@keyframes cycle {
    0% {
        top: 0px;
    }
    /* При запуске слайдера, первое изображение уже видимо */
    4% {
        top: 0px;
    }
    /* Стартовая позиция */
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    /* С 4% до 16 % (3 секунды) изображение видимо */
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    /* с 16% до 20% (1 секунды)выход изображения*/
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    /* Возвращение на исходную позицию за пределами маски */
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    /* С 96% до 100% (1 секунда) – вход */
    100% {
        top: 0px;
        opacity: 1;
    }
}

@keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    /* Исходная позиция за пределами маски */
    16% {
        top: -325px;
        opacity: 0;
    }
    /* Начало движения с 16% */
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    /* С 20% до 24% (в течении 1 секунды) — вход*/
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    /* С 24% до 36 % (3 секунды) изображение видимо */
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    /* С 36% до 40% (1 секунда)— выход */
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    /* Возврат на исходную позицию */
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}


/* Индикатор выполнения */

.progress-bar {
    position: relative;
    top: 0px;
    width: 680px;
    height: 5px;
    background: red;
    animation: fullexpand 25s ease-out infinite;
}


/* Строка состояния анимации */

@keyframes fullexpand {
    /* В этих ключевых кадрах анимация стационарна */
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    /* В этих — оживает */
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    /* В этих — плавно заполняется */
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    /* В этих ключевых кадрах индикатор выполнения завершил свой путь */
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -320px;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
}

#slider .tooltip {
    … transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
    left: 0px;
}

#slider: hover li,
#slider: hover .progress-bar {
    animation-play-state: paused;
}