code,
code[class*=language-],
pre[class*=language-] {
    color: #333;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    tab-size: 4;
    hyphens: none;
    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    line-height: 1.4;
    direction: ltr;
    cursor: text;
    letter-spacing: normal
}

pre[class*=language-] {
    overflow: auto;
    margin: 1em 0;
    padding: 1.2em;
    border-radius: 3px;
    font-size: 85%
}

li code,
p code,
table code {
    margin: 0;
    border-radius: 3px;
    padding: .2em 0;
    font-size: 85%
}

li code:after,
li code:before,
p code:after,
p code:before,
table code:after,
table code:before {
    letter-spacing: -.2em;
    content: '\00a0'
}

:not(pre)>code[class*=language-],
code,
pre[class*=language-] {
    background: #f7f7f7
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #969896
}

.token.atrule,
.token.attr-value,
.token.punctuation,
.token.string {
    color: #183691
}

.token.property,
.token.tag {
    color: #63a35c
}

.token.boolean,
.token.number {
    color: #0086b3
}

.token.attr-name,
.token.attr-value .punctuation:first-child,
.token.important,
.token.keyword,
.token.regex,
.token.selector {
    color: #a71d5d
}

.language-css .token.string,
.token.entity,
.token.operator,
.token.url {
    color: #a71d5d
}

.token.entity {
    cursor: help
}

.namespace {
    opacity: .7
}

.f-color-chips {
    display: flex;
    flex-wrap: wrap
}

.f-color-chip {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    border-top-width: 8em;
    border-top-style: solid;
    border-bottom-width: 0;
    border-bottom-style: solid;
    background-color: #fff;
    font-weight: 700;
    font-size: .75em;
    padding: 1em;
    margin-bottom: 2em
}

@media (min-width:60em) {
    .f-color-chip {
        flex-basis: 13em
    }
}

.f-color-chip .f-color-chip__color {
    background-color: #fff;
    content: attr(data-color);
    font-weight: 400
}

.f-control,
.f-controls {
    box-sizing: border-box
}

.f-controls:after {
    clear: both
}

.f-controls:after,
.f-controls:before {
    display: table;
    content: ' '
}

.f-controls .f-control {
    display: block;
    float: left;
    text-align: center;
    width: 33.33333%;
    margin: 0;
    padding: 1rem 0
}

.f-controls .f-control.f-active {
    box-shadow: inset 0 3px 0 0 #757575
}

.f-controls .f-control.f-active use,
.f-item-controls .f-control:hover use {
    fill: #757575
}

.f-controls .f-control svg {
    vertical-align: middle
}

.f-control svg use,
.f-controls .f-control svg use,
.f-item-controls .f-control use {
    fill: #ccc
}

.f-control {
    display: inline-block;
    cursor: pointer;
    margin-left: .618rem
}

.f-control:first-child {
    margin-left: 0
}

.f-control svg {
    width: 14px;
    height: 14px
}

.f-control-bar {
    padding: 1rem 0
}

.f-control-bar:after {
    clear: both
}

.f-control-bar:after,
.f-control-bar:before {
    display: table;
    content: ' '
}

.f-menu-toggle {
    cursor: pointer;
    vertical-align: middle
}

.f-menu-toggle svg {
    display: block;
    float: left;
    margin-bottom: -1px
}

.f-item-group {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #ccc
}

.f-item-group:after {
    clear: both
}

.f-item-group:after,
.f-item-group:before {
    display: table;
    content: ' '
}

.f-item-group:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.f-item-group~.f-item-group {
    margin-top: 0
}

.f-item-group>.f-item-group {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0
}

.f-item-group>.f-item-group:first-of-type {
    margin-top: 0
}

.f-item-group>.f-item-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

.f-item-code {
    margin-top: 2rem
}

.f-item-preview:after {
    clear: both
}

.f-item-preview:after,
.f-item-preview:before {
    display: table;
    content: ' '
}

.f-item-border-bottom {
    border-bottom: 1px solid #ccc
}

.f-item-heading-group {
    margin-bottom: 2rem;
    vertical-align: middle
}

.f-item-heading-group:after {
    clear: both
}

.f-item-heading-group:after,
.f-item-heading-group:before {
    display: table;
    content: ' '
}

.f-item-controls,
.f-item-heading {
    display: inline-block;
    vertical-align: middle
}

.f-item-heading {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1
}

.f-item-controls {
    margin-left: .5rem
}

.f-item-controls .f-control {
    width: 14px;
    height: 14px;
    display: block;
    float: left
}

.f-item-hidden {
    display: none
}

.f-item-notes {
    font-size: .875rem
}

html {
    height: 100%
}

html.f-menu-active {
    overflow: hidden
}

@media (min-width:60em) {
    html.f-menu-active {
        overflow: auto
    }
}

body {
    margin: 0;
    position: relative
}

.f-menu-active body {
    width: 100%;
    height: 100%;
    overflow: hidden
}

@media (min-width:60em) {
    .f-menu-active body {
        overflow: auto
    }
}

.f-container {
    box-sizing: border-box;
    position: relative;
    padding: 0 1em;
    z-index: 0;
    min-height: 100vh
}

.f-container:after {
    clear: both
}

.f-container:after,
.f-container:before {
    display: table;
    content: ' '
}

.f-menu-active .f-container {
    transform: translate(14rem, 0)
}

@media (min-width:60em) {
    .f-menu-active .f-container {
        margin-left: 14rem;
        transform: translate(0, 0)
    }
}

.f-menu {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-14rem, 0);
    width: 14rem;
    height: 100%;
    z-index: 1;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.f-menu-active .f-menu {
    transform: translate(0, 0)
}

.f-menu ul {
    margin-bottom: 0;
    padding-left: 0
}

.f-menu li,
.f-menu ul,
.f-menu>ul {
    margin-top: 0
}

.f-menu>ul>li {
    margin-top: 1rem
}

.f-menu li {
    list-style-type: none;
    margin-bottom: 0
}

.f-menu a {
    display: block;
    padding: .5rem 2rem;
    color: #757575 !important;
    text-decoration: none;
    font-size: .75rem;
    line-height: 1
}

.f-menu a:hover {
    color: #757575 !important;
    text-decoration: underline
}

.f-menu a.f-active {
    box-shadow: inset 3px 0 0 0 #757575
}

.f-menu .f-menu__heading {
    padding-left: 1.5rem;
    font-weight: 700;
    font-size: .6875rem;
    text-transform: uppercase
}

.f-menu .f-menu__heading:hover {
    color: #757575
}

.f-container .btn-contact-float {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    display: inline-block
}

.f-container .container.bar--raised {
    position: relative;
    left: auto;
    transform: none
}

.f-container h1,
.f-container h2,
.f-container h3,
.f-container h4,
.f-container h5,
.f-container h6,
.f-container p,
.f-menu>ul {
    margin-bottom: 1rem
}

.f-container h1,
.f-container h2,
.f-container h3,
.f-container h4,
.f-container h5,
.f-container h6 {
    margin-top: 1rem
}