@import url(https://fonts.googleapis.com/css?family=Roboto);

/* Setup styles - you don't need these */
body {
    font-family: 'Roboto', sans-serif;
}

.floaty-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index:0;
}

/* Component styles - this is what you need to grab */
.absolute-center {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.floaty {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.floaty-list {
    margin: 0 0 20px;
    padding: 0 0 0 6px;
    list-style: none;
    opacity: 0;
    transition: opacity .2s ease-out;
    z-index:1000;
    position:relative
}

.floaty:hover .floaty-list {
    opacity: 1;
}

.floaty-list-item {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 15px 0;
    cursor: pointer;
    border-radius: 50%;
    background-color: transparent
}

    .floaty-list-item > img {
        border-radius: 50%;
    }

.floaty-list-item--yellow {
    background-color: #d4a717;
}

    .floaty-list-item--yellow > svg {
        fill: #fff;
    }

.floaty-list-item--blue {
    background-color: #3c80f6;
}

    .floaty-list-item--blue > svg {
        fill: #fff;
    }

.floaty-list-item-label {
    position: absolute;
    top: 8px;
    right: 120%;
    padding: 4px 8px;
    font-size: 14px;
    color: #fff;
    background-color: #424242;
    border-radius: 2px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

.floaty-list-item:hover > .floaty-list-item-label {
    opacity: 1;
}

.floaty-btn {
    position: relative;
    width: 56px;
    height: 56px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
    background-color: #DB4437;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,.25);
}

    .floaty-btn:hover .floaty-btn-label {
        opacity: 0;
    }

.floaty-btn-label {
    position: absolute;
    top: 14px;
    right: 115%;
    padding: 4px 8px;
    font-size: 14px;
    color: #fff;
    background-color: #424242;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .2s ease-out;
}

.floaty-btn-icon {
    transition: all .2s;
}

.floaty-btn-icon-plus {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.floaty.is-active .floaty-btn-icon-plus {
    opacity: 0;
    -webkit-transform: rotate(13deg);
    transform: rotate(130deg);
}

.floaty-btn-icon-create {
    opacity: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.floaty.is-active .floaty-btn-icon-create {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}