img.poster, img.landscape {width:100%;}

.overlay-content {
    position: absolute;
    margin-top: -0.5rem;
    visibility: hidden;
    border-radius: .25rem;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.related-film .overlay-content {
    margin-top: -46px;
}

.overlay-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.overlay-content > .actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    gap: 0.5rem;
    z-index: 999999;
}

.overlay-content > .actions > button {
    width: 2.5rem;
    height: 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background: var(--base-01);
    border: .5px solid var(--base-01);
    border-radius: 100%;
    color: var(--base-mute);
    font-size: var(--text-base);
    -webkit-filter: saturate(1);
    filter: saturate(1);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.overlay-content > .actions > button > i {
    margin: auto;
    font-size: var(--text-xl);
    font-weight: 400;
}

.overlay-content > .actions > button > i.fa-heart {
    padding-top: .125rem;
}

.overlay-content > .actions > button:hover {
    background: var(--base-02);
    color: var(--base-content);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.actions .isfavorite {
    color: var(--primary) !important;
    border: 0.5px solid var(--primary) !important;
    background: var(--base-02) !important;
}

.actions .isfavorite:hover {
    color: var(--primary-focus) !important;
    background: var(--base-03) !important;
}

.actions .isfavorite i {
    font-weight: 900 !important;
}

.progress-bar-container {
    /*    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;*/
    height: 6px;
    background: #ffffff54;;
    z-index: 99999;
    margin: -15px 1.5px 6px 1.5px;
   position: relative;
    /*display: none;*/
}

.progress-bar-container .progress-indicator {
    background: var(--primary);
    height: 100%;
}

.film-container .overlay-content, .related-film .overlay-content {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease-in-out;
}

.film-container:hover .overlay-content, .related-film:hover .overlay-content {
   visibility: visible;
   opacity: 1; 
   transition: all 0.5s ease-in-out;
}