.button {
    composes: fa    from 'font-awesome/css/font-awesome.css';
    composes: fa-fw from 'font-awesome/css/font-awesome.css';
    cursor: pointer;
}

.resetCameraButton {
    composes: button;
    composes: fa-arrows-alt from 'font-awesome/css/font-awesome.css';

}

.toggleMenuButton {
    composes: button;
    composes: fa-bars from 'font-awesome/css/font-awesome.css';
    margin-right: 10px;
}

.playButton {
    composes: button;
    composes: fa-play from 'font-awesome/css/font-awesome.css';
}

.stopButton {
    composes: button;
    composes: fa-stop from 'font-awesome/css/font-awesome.css';
}

.previousButton {
    composes: button;
    composes: fa-chevron-left from 'font-awesome/css/font-awesome.css';
    padding-right: 0;
}

.nextButton {
    composes: button;
    composes: fa-chevron-right from 'font-awesome/css/font-awesome.css';
    padding-left: 0;
}

.busy {
  composes: button;
  composes: fa-spinner from 'font-awesome/css/font-awesome.css';
  composes: fa-pulse from 'font-awesome/css/font-awesome.css';
  padding: 0;
}

.menu {
    position: absolute;
    top: 2.2em;
    right: 10px;
    height: calc(100vh - 4.5em);
    width: 300px;
    background-color: #eee;
    z-index: 2;
    border-radius: 5px;
    color: #111;
    font-size: 20px;
    transition: opacity 0.5s;
    opacity: .75;
    overflow: hidden;
}

.menu:hover {
   opacity: 1;
}

.hiddenMenu {
    composes: menu;
    z-index: -1;
    opacity: 0;
}

.viewport {
    position: absolute;
    top: 2.4em;
    left: 0;
    right: 0;
    height: calc(100vh - 4.9em);
    overflow: hidden;
}
