/*--------------------------------------------------------------
# DIRECTION DETAILS
--------------------------------------------------------------*/

#direction{
    margin-top: 105px;
}

.sizeM{
    margin-top: 8rem;
}

.direction-mf .person {
    position: relative;
}

.direction-mf .names{
    text-align: center;
    transition: all 250ms ease-in-out;
    font-size: 45px;
    font-weight: 900;
}

.directors p{
    text-align: center;
}

.direction-mf .person img {
    width: 100%;
    transition: all 250ms ease-in-out;
}

.person:hover .person-overlay .name{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.person-overlay .name-cover{
    position: absolute;
    left: 0;
    top: -5rem;
    width: 100%;
}

.person-overlay .name{
    top: -8rem;
    transition: all .3s ease-out 0s;
    opacity: 0;
    transform: scale(.9);
}

.directorInfo p{
    text-align: left;
}

.directorInfo{
    transition: opacity 250ms ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.antonio .directorInfo p{
    font-size: 14px;
}

.charlie .directorInfo p{
    font-size: .85rem;
}

.directors .nameBot{
    margin-bottom: 0;
    font-weight: bold;
    font-size: larger;
}

/*SIZE S ADJUSTMENTS*/

.sizeS .person{
    margin-bottom: 3rem;
}

.sizeS .name-cover{
    visibility: visible;
    opacity: 1;
    position: unset;
}

.sizeS .nameTop{
    margin-bottom: 0;
}

.sizeS .person .directorInfo{
    margin-top: 40px;
}

.sizeS .col-sm-6{
    flex: 0 0 auto;
    width: 60%;
}

/*END OF SIZE S ADJUSTMENTS*/


@media (min-width: 800px) {
    .sizeS {
        display: none;
    }
}

@media (max-width: 800px) {
    .sizeM {
        display: none;
    }
    .sizeS {
        display: flex;
    }
}

.lights{
    position: absolute;
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    left: 0;
}

.col-sm-6 .poster-lights{
    width: 50%!important;
}