/*///////////////////////////////
quoin graphic
*/
.inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
}

.circle {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: rgba( 255,255,255, 0.22 );
    border-radius: 100%;
    border: 3px solid white;
    color: white;
    font-family: sans-serif;

    -webkit-transform: scale3d(.01,.01,.01);
    transform: scale3d(.01,.01,.01);

    width: 50px;
    height: 50px;
    line-height: 50px;
}
.parent {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 100%;
    border: 3px solid rgba(0, 0, 0, 0);
    color: white;
    font-family: sans-serif;

    -webkit-transform: scale3d(.01,.01,.01);
    transform: scale3d(.01,.01,.01);

    width: 50px;
    height: 50px;
    line-height: 50px;
}

.circleExpand {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.quoinString {
    font-family: 'Fredoka One', cursive;
    opacity: 0;
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
    font-size: x-large;
    -webkit-transition: all .2s ease-out .2s;
    transition: all .2s ease-out .2s;
    color: #fff;
}
.circleExpand .quoinString {
    opacity: 1;
}

.quoin.quoin-disabled {
    opacity: 0.25;
}