.profile-info::before {
    left: 10%;
}

.profile-info::after {
    left: 20%;
}

@media (max-width: 768px) {

    .nextpane,
    .lastpane {
        display: none;
    }

    .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

/* display 3 */
@media (min-width: 768px) {
    .artwork {
        display: none;
    }

    .mobilenav {
        display: none;
    }

    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 75px !important;
        height: 75px !important;
    }

    .carousel-control-next,
    .carousel-control-prev {
        width: 8% !important;
        height: 50px;
        margin: auto;
    }

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}



/* Small devices (landscape phones, 576px and up) */
@media (max-width: 992px) {
    .btn-highlight-nav {
        background: linear-gradient(178deg, #cf0e0eb3, #e70000, #e70000, #cf0e0eb3);
        border-radius: 5px;
        color: #ffffffd1 !IMPORTANT;
        padding: 5px 10px !important;
        margin: 5px 0px;
    }

    .d-mobile {
        display: block;
    }

    .d-desktop {
        display: none;
    }

    .image-play {
        padding: 0px !important;
    }

    #playbtn {
        width: 60px !important;
    }

    .navbar-collapse.collapse.show li.nav-item {
        /* border-bottom: 1px solid #b7a8a8; */
        width: 95%;
    }

    .navbar-collapse.collapse.show li.nav-item:last-child {
        margin-bottom: 14px;
    }


}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 993px) {
    .btn-highlight-nav {
        margin-left: 10px;
        margin-top: 9px;
        padding: 5px !important;
        background: linear-gradient(178deg, #cf0e0eb3, #e70000, #e70000, #cf0e0eb3);
        border-radius: 5px;
        color: #ffffffd1 !IMPORTANT;
        padding: 5px 10px !important;
    }

    .d-mobile {
        display: none;
    }

    .d-desktop {
        display: block;
    }

    /* .image-play {
        padding-top: 10px !important;
    } */

    #playbtn {
        width: 60px !important;
    }

    .profile-info::before {
        left: 20%;
    }

    .profile-info::after {
        left: 30%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .d-mobile {
        display: none;
    }

    .d-desktop {
        display: block;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 769px) and (max-width: 991.98px) {
    .search-container input {
        max-width: 140px;
    }

    .nowpane {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
    }
}