.reveal .controls.helpbutton{
    /* don't use reveals controls=false mechanism
    to hide our button, but control it by our own
    configuration */
    display: block;
    left: 12px;     /* 12px; default */
    right: auto;
}

.reveal .controls.helpbutton button{
    bottom: 1.4em; /* 3.2em  default*/
}

.reveal .controls.helpbutton .controls-help{
    border: .5em solid;
    border-radius: 1.8em;
    box-sizing: border-box;
    height: 3.6em;
    position: relative;
    width: 3.6em;
    -webkit-animation: helpbutton-fadein 0.5s linear forwards;
    animation: helpbutton-fadein 0.5s linear forwards;
}

@-webkit-keyframes helpbutton-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes helpbutton-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reveal .controls.helpbutton .controls-help:before{
    content: '?';
    font-size: 2em;
    font-weight: 900;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate( -50%, -50% );
    transform: translate( -50%, -50% );
    transition: all 0.15s ease, background-color 0.8s ease;
}

.reveal .controls.helpbutton .controls-help:hover {
    -webkit-transform: scale( 1.1, 1.1 );
    transform: scale( 1.1, 1.1 );
}

.reveal .controls.helpbutton .controls-help:active {
    -webkit-animation: helpbutton-rotate-center 0.5s linear infinite both;
    animation: helpbutton-rotate-center 0.5s linear infinite both;
}

@-webkit-keyframes helpbutton-rotate-center {
    0% {
        -webkit-transform: rotate(0) scale( 1.1, 1.1 );
        transform: rotate(0) scale( 1.1, 1.1 );
    }
    100% {
        -webkit-transform: rotate(-360deg) scale( 1.1, 1.1 );
        transform: rotate(-360deg) scale( 1.1, 1.1 );
    }
}
@keyframes helpbutton-rotate-center {
    0% {
        -webkit-transform: rotate(0) scale( 1.1, 1.1 );
        transform: rotate(0) scale( 1.1, 1.1 );
    }
    100% {
        -webkit-transform: rotate(-360deg) scale( 1.1, 1.1 );
        transform: rotate(-360deg) scale( 1.1, 1.1 );
    }
}