.main-slider
{
    position: relative;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    overflow: hidden
}

.main-slider:hover .slide-btn
{
    opacity: 1
}

.main-slider img
{
    width: 100%
}

.main-slider i
{
    font-size: 2.5em;
    line-height: 60px;
}

.slide-nav
{
    opacity: 0;
}

.slide-btn
{
    opacity: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    border-radius: 30px;
    text-align: center
}

#prev:hover, #next:hover
{
    background: rgba(0,0,0,0.9);
}

#prev
{
    left: 20px
}

#next
{
    right: 20px
}

#slides
{
    position: absolute;
    top: 0;
    width: 100%
}

#slides li
{
    position: absolute;
    top: 0px;
    width: 100%;
    opacity: 0;
    transition: 1s
}


@media screen and (max-width: 700px)
{
    .slide-btn
    {
        width: 30px;
        height: 30px
    }
    
    .slide-btn i
    {
        font-size: 1em;
        line-height: 30px
    }
}