* {
    margin: 0;
}

@media(min-width:0px) and (max-width:800px) {
    .slider {
        position: relative;
        height: 130px;
        width: 100vw;
    }
    .slider-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 130px;
        background-size: cover;
        background-position: 50% 50%;
        z-index: 0;
        text-align: center;
        border-radius: 10px;
    }
    .slider-item video {
        max-height: 130px;
    }
}

@media(min-width:801px) and (max-width:8000px) {
    .slider {
        position: relative;
        height: 300px;
        /*width: Calc(100vw - 340px);*/
        margin-bottom: 20px;
    }
    .slider-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: 50% 50%;
        z-index: 0;
        text-align: center;
        border-radius: 10px;
    }
    .slider-item video {
        max-height: 300px;
    }
}

.slider-panel {
    position: absolute;
    bottom: 0;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    color: rgba(255, 255, 255, 0.7);
    z-index: 20;
}

.slider-panel__navigation {
    margin: 0 auto;
    padding: 10px;
    width: 70%;
    text-align: center;
}

.slider-panel__navigation i {
    margin: 0 3%;
    font-size: 15px;
}

.slider-panel__navigation i:hover,
.slider-panel__navigation i:active {
    color: white;
    cursor: pointer;
}

.slider-panel__controls {
    margin: 0 auto;
    padding: 10px;
    width: 70%;
    text-align: center;
}

.slider-panel__controls i {
    margin: 0 4%;
    font-size: 40px;
}

.slider-panel__controls i:hover,
.slider-panel__controls i:active {
    color: white;
    cursor: pointer;
}

.active {
    z-index: 10;
    -webkit-animation: 0.2s blur ease-in;
    animation: 0.2s blur ease-in;
}

@-webkit-keyframes circle {
    0% {
        -webkit-clip-path: circle(75%);
        clip-path: circle(75%);
    }
    100% {
        -webkit-clip-path: circle(0%);
        clip-path: circle(0%);
    }
}

@keyframes circle {
    0% {
        -webkit-clip-path: circle(75%);
        clip-path: circle(75%);
    }
    100% {
        -webkit-clip-path: circle(0%);
        clip-path: circle(0%);
    }
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}