#featured .hero-content {
    padding-top: 8%;
    color: #fff;
}

@media screen and (max-width: 768px) {
    header .separator {
        height: 0px;
    }

    #featured .hero-content {
        padding-top: 20vh;
    }

    .tbw-90 {
        display: none;
    }

    .tbw-120.tbw-sm-80 {
        flex: 1 0 60px;
        width: 60px;
    }
}

@media screen and (max-width: 576px) {
    .p-sm-0 {
        padding: 0 !important;
    }

    .main-table#listDiv {
        padding-top: 1rem;
    }
}

.p-sm-0 {
    padding: 15px;
}

p.f-des {
    margin: 0;
    min-height: 50px;
    display: none;
}

.selector-row {
    padding-top: 15px;
}

.card-header p {
    /*display: none;*/
}

.main-table .sort-search-bar {
    background-color: #fff;
}

    .main-table .sort-search-bar span {
        color: #000;
    }

.card img {
    object-fit: cover;
    width: 100%;
    height: var(--album-image-height);
}

/*.title-pink form {
    line-height: 2;
}*/

.sort-search-bar form input {
    line-height: 1.4;
}
.fa.fa-big.fa-search {
    font-size: 1.4rem;
}

form input[type=checkbox], form input[type=radio] {
    margin: 0;
}

form .input-group-addon {
    padding: 0;
    margin-left: 4px;
}

form label, form span {
    font-size: 1rem;
    margin: 0;
}

:root {
    --jumbotron-padding-y: 3rem;
}

.box-shadow {
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 10px;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {
    .jumbotron {
        padding-top: calc(var(--jumbotron-padding-y) * 0.5);
        padding-bottom: calc(var(--jumbotron-padding-y) * 0.5);
    }
}

.jumbotron .container {
    max-width: 40rem;
}

section.jumbotron {
    display: block;
    margin-bottom: 0px;
}

/*a.buy {
    border-radius: 50%;
}*/
a.buy i, a.album-play i {
    display: inline-block;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

div.card-button.basket {
    /*opacity: 0;*/
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #ff0099;
    border-radius: 5px;
    /* center overlay text */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-body {
    padding: 0.5rem;
}

.card-header {
    padding-left: 1rem;
    padding-top: 0.5rem;
}

    .card-header p {
        margin: 0;
        min-height: 0px;
    }

    .card-header h3 {
        margin-bottom: 5px;
    }

.card-footer {
    display: none;
}

.card-body {
    display: flex;
}

.card-button {
    align-self: flex-end;
}

form .form-group input[type='radio'] {
    width: 1.25rem;
    height: 1.25rem;
}

form .form-group input[type='text'] {
    font-size: 1.2rem;
    border-radius: 5px;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}



.image-gallery {
    /* Mobile first */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .image-gallery .column {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

.image-item img {
    width: 100%;
    border-radius: 5px;
    height: auto;
    object-fit: cover;
}

@media only screen and (min-width: 768px) {
    .image-gallery {
        flex-direction: row;
    }
}

/* overlay styles */

.image-item {
    position: relative;
    cursor: pointer;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    /* center overlay content */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* hover */
.image-item:hover .overlay {
    transform: scale(1);
}

.overlay span {
    font-size: 2rem;
    color: #fff;
}

.hero-content h1 {
    font-size: 3rem;
    margin: 1rem 0 2rem 0;
}

.hero-content p {
    font-size: 1.5rem;
	padding-bottom: 1rem;
}

.aspect-ratio-11 {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
}

.aspect-ratio-43 {
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: contain;
}

.aspect-ratio-169 {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: contain;
}

.no-aspect-ratio {
    aspect-ratio: unset;
}


.card-button.basket {
    /*color: white;
            mix-blend-mode: difference;
            filter: grayscale(1);*/
}

.card-button.bottom-left {
    position: absolute;
    padding: 10px;
    bottom: 0%;
    left: 0%;
}

.card-button.bottom-right {
    position: absolute;
    padding: 10px;
    bottom: 0%;
    right: 0%;
}

.card-button.top-left {
    position: absolute;
    padding: 10px;
    top: 0%;
    left: 0%;
}

.card-button.top-right {
    position: absolute;
    padding: 10px;
    top: 0%;
    right: 0%;
}

.card-button.album-center {
    position: absolute;
    padding: 5px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    /*transform: translateY(-50%);*/
}

    .card-button.album-center.title-top {
        position: absolute;
        padding: 5px;
        top: calc(50% + 5px);
        left: calc(50% - 30px);
    }

    .card-button.album-center.title-bottom {
        position: absolute;
        padding: 5px;
        top: calc(50% - 65px);
        left: calc(50% - 30px);
    }

.card-button.basket:hover {
    transform: scale(1.2);
}

.lead.text-muted {
    font-size: 1.5rem;
}

.card-button.album-play.no-border .play-track {
    border-width: 0px !important;
}

a:hover {
    text-decoration: none;
}

.main-table#listDiv {
    padding-top: 2.5rem;
}

.albums_section [class*=col-] {
    padding: 15px;
}

.tbw-90 {
    width: 90px;
    flex: 1 0 90px;
}

.tbw-120 {
    width: 110px;
    flex: 1 0 110px;
}

.no-box-shadow {
    border: 0 !important;
    box-shadow: none !important;
}

.card-img-overlay {
    cursor: pointer;
}

    .card-img-overlay .card-title {
        color: #fff;
    }
	
	 .card-img-overlay .card-title.no-title {
            width: 100%;
            height: 100%;
        }
            .card-img-overlay .card-title.no-title a {
                width: 100%;
                height: 100%;
                display: inline-block;
            } 

.card-title {
    margin-bottom: 0.5rem;
    /* min-height: 3rem;*/
}

    .card-title.valign {
        margin-bottom: 0rem;
    }

h5.card-title.text-center, p.card-text.text-center {
    text-align: center !important;
}

.card-title a {
    color: #000;
    font-size: 1.25rem;
}
/*.card-button {
            z-index: 9987;
        }*/
.col-md-125 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.col-md-20 {
    flex: 0 0 20%;
    max-width: 20%;
}

a.btn-page-in {
    background: var(--main-color);
    color: #fff;
}

a.btn-page:hover {
    background: var(--main-color);
    color: #fff !important;
}

p.card-text {
    font-size: 0.9rem;
}
/*.card-button.album-play {
            width: 32px;
        }
        .card-button.album-play:hover {
            border-radius: 50%;
            border: 1px solid #fff;
            width: 32px;
        }*/
p.card-text, h5.card-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

    p.card-text.play-icon-right, h5.card-title.play-icon-right {
        width: calc(100% - 58px);
    }

        h5.card-title.play-icon-right.valign {
            width: calc(100% - 30px);
        }

    p.card-text.play-icon-left, h5.card-title.play-icon-left {
        margin-left: 62px;
        width: calc(100% - 58px);
    }

        h5.card-title.play-icon-left.valign {
            margin-left: 35px;
            width: calc(100% - 35px);
        }

    p.card-text.basket-icon-right, h5.card-title.basket-icon-right {
        width: calc(100% - 58px);
    }

        h5.card-title.basket-icon-right.valign {
            width: calc(100% - 30px);
        }

    p.card-text.basket-icon-left, h5.card-title.basket-icon-left {
        margin-left: 42px;
        width: calc(100% - 38px);
        margin-bottom: 0;
    }

        h5.card-title.basket-icon-left.valign {
            margin-left: 30px;
            width: calc(100% - 29px);
        }

.card-button.basket.small a.buy i.fa {
    font-size: 1.5rem;
}

.card-img-overlay p.card-text, .card-img-overlay .card-title a {
    white-space: normal;
    /*mix-blend-mode: difference;*/
    color: #fff;
}

#featured-playlists .play-track {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 46px;
    font-size: 16px;
    color: black;
    border: 1px solid black;
    border-radius: 50%;
    background-color: #fff;
    padding-left: 5px;
    cursor: pointer;
}

#featured-playlists .card-button.basket.small {
    padding: 7px;
}

#featured-playlists .card-button.album-play.small {
    padding: 5px;
}

    #featured-playlists .card-button.album-play.small .play-track {
        width: 28px;
        height: 28px;
        line-height: 10px;
        font-size: 12px;
        padding-left: 3px;
    }

.btnFeaturedPLaylistsSearch, .btnFeaturedPlaylistsSearch i {
    cursor: pointer;
}

#featured-playlists .album-play.album-center .play-track {
    border-width: 0px;
    font-size: 16px;
}

.jumbotron .container p {
    font-size: 1.5rem !important;
}

.page-title .h1, .page-title .h2, .page-title .h3, .page-title h1, .page-title h2, .page-title h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

@media screen and (min-width: 576px) {
    .justify-content-end-md {
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
    }
    .w-100 {
        display: none !important;
    }
}
@media screen and (max-width: 576px) {    
    .w-100 {
        height: 0.5rem;
    }
}

.herohold .hero-content p {
    margin: auto !important;
    max-width: 50vw;
}
#featured-playlists.container {
    padding-top: 1rem;
}

#featured-playlists.container .col-12[class*="col-md-"] {
    padding: 15px;
}
#featured-playlists.container-fluid .col-12[class*="col-md-"] {
    padding: 15px;
}