ul.bo-slider{
    display:block;
}
.bo-slider{
    position:relative;
    width:100%
}
.bo-slider .bo-slide{
    display:none
}
.bo-slider .bo-slide.active{
    display:block
}
.bo-slider .bo-slide img{
    height:222px;
    width:100%;
    object-fit:cover
}
.bo-slider .bo-slide video{
    height:222px;
    width:100%;
    object-fit:cover
}
@media (min-width:640px){
    .bo-slider .bo-slide img{
        height:222px
    }
    .bo-slider .bo-slide video{
        height:222px
    }
}
@media (min-width:768px){
    .bo-slider .bo-slide img{
        height:222px
    }
    .bo-slider .bo-slide video{
        height:222px
    }
}
@media (min-width:1024px){
    .bo-slider .bo-slide img{
        height:222px
    }
    .bo-slider .bo-slide video{
        height:222px
    }
}
@media (min-width:1222px){
    .bo-slider .bo-slide img{
        height:222px
    }
    .bo-slider .bo-slide video{
        height:222px
    }
}
@media (min-width:1800px){
    .bo-slider .bo-slide img{
        height:222px
    }
    .bo-slider .bo-slide video{
        height:222px
    }
}
.bo-slider .bo-slide{
    position:relative
}
.bo-slider .play-button{
    cursor:pointer;
    position:absolute;
    top:50%;
    left:50%;
    width:auto;
    margin-top:-62px;
    margin-left:-62px;
    padding:16px;
    color:#fff;
    font-weight:700;
    font-size:80px;
    transition:.6s ease;
    border-radius:0 3px 3px 0;
    user-select:none
}
.bo-prev,.bo-slider .bo-next{
    cursor:pointer;
    position:absolute;
    top:39%;
    width:auto;
    margin-top:-22px;
    padding:16px;
    color:#fff;
    font-weight:600;
    font-size:28px;
    transition:.6s ease;
    border-radius:0;
    user-select:none;
}
.bo-slider .bo-prev{
    left:0;
}
.bo-slider .bo-next{
    right:0;
}
.bo-next:hover,.bo-prev:hover{
    background-color:rgba(0,0,0,.8)
}
.bo-dots{
    margin-top:-40px;
    text-align:center
}
.bo-dot{
    cursor:pointer;
    height:10px;
    width:10px;
    margin:0 2px;
    background-color:#fff;
    border-radius:50%;
    display:inline-block;
    transition:background-color .6s ease
}
.bo-dot:hover,.selected{
    background-color:#717171
}
.fade{
    -webkit-animation-name:fade;
    -webkit-animation-duration:1.5s;
    -moz-animation-name:fade;
    -moz-animation-duration:1.5;
    -ms-animation-name:fade;
    -ms-animation-duration:1.5;
    -o-animation-name:fade;
    -o-animation-duration:1.5;
    animation-name:fade;
    animation-duration:1.5s
}
@-webkit-keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
@-moz-keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
@-ms-keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
@-o-keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
@keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
.slide{
    -webkit-animation-name:slide;
    -webkit-animation-duration:1.5s;
    -moz-animation-name:slide;
    -moz-animation-duration:1.5;
    -ms-animation-name:slide;
    -ms-animation-duration:1.5;
    -o-animation-name:slide;
    -o-animation-duration:1.5;
    animation-name:slide;
    animation-duration:1.5s
}
@-webkit-keyframes slide{
    from{
        opacity:.4;
        margin-left:100%
    }
    to{
        opacity:1;
        margin:0
    }
}
@-moz-keyframes slide{
    from{
        opacity:.4;
        margin-left:100%
    }
    to{
        opacity:1;
        margin:0
    }
}
@-ms-keyframes slide{
    from{
        opacity:.4;
        margin-left:100%
    }
    to{
        opacity:1;
        margin:0
    }
}
@-o-keyframes slide{
    from{
        opacity:.4;
        margin-left:100%
    }
    to{
        opacity:1;
        margin:0
    }
}
@keyframes slide{
    from{
        opacity:.4;
        margin-left:100%
    }
    to{
        opacity:1;
        margin:0
    }
}