.player{
    position: relative;
    height: 600px;

    background-color: #F0F0F0;
}

.player .overlay{
    z-index: 10;

    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: 20px;

    border-radius: 3px;
}

.player .center{
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.player:hover .commands{
    bottom: 0px;
}

.player .commands{
    z-index: 20;

    position: absolute;
    bottom: -60px;

    display: block;
    width: 100%;

    background-color: #FFFFFF;
    transition: bottom .3s;
}

.player .commands .flex{
    line-height: 60px;
}

.player .commands .item{
    padding-left: 20px;
    padding-right: 20px;
}

.player .commands .button{
    cursor: not-allowed;
    transition: background-color .3s, color .3s;
}

.player .commands .button:hover{
    background-color: #00E585;
    color: #FFFFFF;
}