
.carousel .carousel-cell{
    width: 100%;
    margin-right: 10px;
}
.flickity-page-dots {
    bottom: 10px;
}
.flickity-page-dots .dot {
    height: 4px;
    width: 40px;
    border-radius: 0;
    opacity: 1;
    background: #fff;
}
.flickity-page-dots .is-selected{
    background: #000000;

}

.carousel .carousel-cell .img-box img{
    height: auto;
}
.main-content .box-music .top-music .media .img-box{
    position: relative;
    height: 0px;
    padding-bottom: 55%;
}
.main-content .box-music .top-music .media .img-box img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

/* plyr */
.plyr {
    height: 100%;
}
.plyr__controls{
    position: relative;
}
.plyr__controls .plyr__controls__item.plyr__progress__container{
    position: absolute;
    top: 0;
    left: 49%;
    transform: translateX(-50%);
    width: 98%;
}
/* .plyr--video.plyr--hide-controls .plyr__controls{
    opacity: 1;
    transform: translateY(0);
} */
.plyr__menu{
    display: none;
}
.plyr--full-ui input[type=range]{
    color: #ff0000;
}
.plyr__control--overlaid{
    background-color: #0000007a;
    /* opacity: 0; */
    /* visibility: hidden; */
}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #ff0000;
}
@media (max-width: 992px){
    /* .carousel .carousel-cell .img-box{
        height: 400px;
    } */
}
@media (max-width: 768px){
    /* .carousel .carousel-cell .img-box{
        height: 300px;
    } */
    .top-music .media .caption h2{
        font-size: 1.4rem;
    }
    .plyr {
        height: 400px;
    }
}