[class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
    font-family: 'ascribe-logo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
    These glyphs are generated using: https://icomoon.io
    Even though it seems radically complicated, check out the site,
    its fairly straight forward.

    If someone wants you to add a new glyph go to the site,
    drop in the regular ascribe-logo font and select all icons.
    Then also add the new glyph, name and address it correctly and download
    the font again.

    Once you replace all the fonts they gave you, you're done.
 */

@font-face {
    font-family: 'ascribe-logo';
    src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae');
    src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'),
      url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'),
      url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'),
      url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
    font-family: 'ascribe-logo';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-ascribe-add:before {
    content: "\e800";
}
.icon-ascribe-sort:before {
    content: "\e801";
}
.icon-ascribe-search:before {
    content: "\e802";
}
.icon-ascribe-filter:before {
    content: "\e803";
}
.icon-ascribe-add-white:before {
    content: "\e804";
}
.icon-ascribe-add-blue .path1:before {
    content: "\e805";
    color: rgb(0, 60, 106);
}
.icon-ascribe-add-blue .path2:before {
    content: "\e806";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}
.icon-ascribe-icon:before {
    content: "\e807";
}
.icon-ascribe-logo:before {
    content: "\e808";
}

.icon-ascribe-ok:before {
    content: "\e809";
    font-size: .7em;
}

.btn-glyph-ascribe {
    font-size: 18px;
    padding: 4px 12px 0 10px
}

.ascribe-logo-circle {
    border: 6px solid #F6F6F6;
    border-radius: 10em;
    position: relative;
    top: 10%;
    left: 10%;

    display: block;
    width: 80%;
    height: 80%;

    > span {
        color: #F6F6F6;
        position: absolute;
        top: -.29em;
        left: .16em;

        font-size: 5em;
        font-weight: normal;
    }
}