@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.slider{
    width:100%;
      height:100vh;   /* Full screen height */
    position:relative;
    overflow:hidden;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.prev,.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.5);
    color:#fff;
    border:none;
    padding:15px;
    cursor:pointer;
    font-size:22px;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

.dots{
    position:absolute;
    bottom:20px;
    width:100%;
    text-align:center;
}

.dot{
    display:inline-block;
    width:12px;
    height:12px;
    background:#fff;
    opacity:.5;
    margin:0 5px;
    border-radius:50%;
    cursor:pointer;
}

.dot.active{
    opacity:1;
    background:#ff6600;
}

@media(max-width:768px){
    .slider{
        height:550px;
    }
}