#controls-container {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 50px;
    position: fixed;
    z-index: 50
}

#controls-container,.control-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.control-icons {
    background: rgba(0,0,0,.6);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.4);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    color: hsla(0,0%,100%,.95);
    border-radius: 5px;
    padding: 0 .3em;
    margin: 0 .5em
}

.control-icons .disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5
}

.control-icons .ctrl-btn {
    position: relative
}

.control-icons .icon {
    padding: 12px 6px;
    padding: .75rem .375rem
}

.control-icons .icon:hover {
    -webkit-transition: color .2s;
    transition: color .2s;
    color: #2196f3;
    cursor: pointer
}