:root {
    --gutter: 2rem;
    --gutter-compensation: -2rem;
    --padding: 1rem;
    --margin: 1rem;
    --grid: 400px;
    --body-color: #2d3748;
    --body-bg-color: #EDF2F7;
    --primary-color: #667eea;
    --primary-color-hover: #5a67d8;
    --primary-color-inverted: #c3dafe;
    --primary-color-shadow: rgba(102, 126, 234, 0.1);
    --secondary-color: #ed64a6;
    --secondary-color-hover: #d53f8c;
    --secondary-color-inverted: #fed7e2;
    --secondary-color-shadow: rgba(237, 100, 166, 0.1);
    --positive-color: #48bb78;
    --positive-color-hover: #38a169;
    --positive-color-inverted: #c6f6d5;
    --positive-color-shadow: rgba(72, 187, 120, 0.1);
    --negative-color: #f56565;
    --negative-color-hover: #fc4d68;
    --negative-color-shadow: rgba(245, 101, 101, 0.1);
    --negative-color-inverted: #fbe4e8;
    --alert-color: #ed8936;
    --alert-color-hover: #dd6b20;
    --alert-color-inverted: #feebc8;
    --alert-color-shadow: rgba(237, 137, 54, 0.1);
    --info-color: #4299e1;
    --info-color-hover: #3182ce;
    --info-color-inverted: #bee3f8;
    --info-color-shadow: rgba(66, 153, 225, 0.1);
    --light-color: #f8f9fa;
    --light-color-hover: #e1e5ea;
    --light-color-inverted: #f1f1f1;
    --light-color-shadow: rgba(248, 249, 250, 0.1);
    --dark-color: #343a40;
    --dark-color-hover: #2d3339;
    --dark-color-shadow: rgba(52, 58, 64, 0.2);
    --dark-color-inverted: #F4F5F6;
    --black-color: #000;
    --white-color: #fff;
    --shadow-color: rgba(136,152,170,.15);
    --grey-color: #a0aec0;
    --grey-color-100: #f6f9fc;
    --grey-color-300: #dee2e6;
    --grey-color-500: #adb5bd;
    --grey-color-700: #8898aa;
    --transparent: transparent;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*, *::before, *::after {
    box-sizing: border-box
}

::selection {
    color: #fff;
    background-color: var(--primary-color)
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

@-ms-viewport {
    width: device-width
}

article, aside, dialog, figcaption, figure, footer, hgroup, main, nav, section {
    display: block
}

video {
    width: 100%;
    height: auto
}

audio:not([controls]) {
    display: none !important;
    height: 0
}

[hidden] {
    display: none
}

a:focus {
    outline: thin dotted
}

a:active, a:hover {
    outline: 0
}

h1, h2, h3, h4, h5, h6, p {
    font-family: inherit;
    margin: 0 0 1rem 0
}

    p:last-child {
        margin: 0
    }

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

mark {
    background: var(--alert-color);
    color: var(--black-color)
}

code, kbd, pre, samp {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

abbr[title], abbr[data-original-title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

.clip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

cite {
    font-style: normal
}

img {
    border: 0 none;
    vertical-align: top;
    width: auto;
    max-width: 100%;
    max-height: auto
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0;
    line-height: 0;
    position: relative
}

fieldset {
    border: 1px solid silver;
    margin: 0;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.video {
    height: 0;
    margin-bottom: 0.88889rem;
    overflow: hidden;
    padding-bottom: 67.5%;
    padding-top: 1.38889rem;
    position: relative
}

    .video.widescreen {
        padding-bottom: 56.34%
    }

    .video.vimeo {
        padding-top: 0
    }

    .video iframe, .video object, .video embed, .video video {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

.inline.flex {
    display: inline-flex
}

.flex {
    display: flex
}

.not-allowed {
    cursor: not-allowed
}

.left.aligned {
    text-align: left
}

.center.aligned {
    text-align: center
}

.right.aligned {
    text-align: right
}

.show-all {
    display: inherit
}

.hide-all {
    display: none
}

.hidden {
    visibility: hidden
}

.visible {
    visibility: visible
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

    button::-moz-focus-inner, input::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
        padding: 0;
        border-style: none;
        border: 0
    }

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0
}

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: listbox
}

html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

    html.ios, html.ios body {
        height: initial
    }

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--body-color);
    text-align: left;
    background-color: var(--white-color)
}

.wojo-grid {
    width: auto;
    max-width: 1280px;
    margin: 0 auto;
    padding-right: var(--padding);
    padding-left: var(--padding)
}

.wojo.mason {
    -webkit-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 2rem;
    column-gap: 2rem;
    counter-reset: item-counter
}

    .wojo.mason.grid {
        -webkit-column-count: 8;
        column-count: 8;
        -webkit-column-gap: 2rem;
        column-gap: 1rem;
        counter-reset: item-counter
    }

    .wojo.mason > .item {
        display: inline-block;
        width: 100%;
        margin-bottom: 2rem
    }

    .wojo.mason.grid > .item {
        display: inline-block;
        width: 100%;
        margin-bottom: 1rem
    }

    .wojo.mason.loading {
        position: relative;
        cursor: default;
        pointer-events: none
    }

        .wojo.mason.loading::before {
            position: absolute;
            content: '';
            top: 0%;
            left: 0%;
            background: rgba(255, 255, 255, 0.8);
            width: 100%;
            height: 100%;
            z-index: 100
        }

        .wojo.mason.loading:after {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            margin: -1.5em 0em 0em -1.5em;
            width: 3em;
            height: 3em;
            -webkit-animation: form-spin 0.6s linear;
            animation: form-spin 0.6s linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 500rem;
            border-color: rgba(0,0,0,.5) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
            border-style: solid;
            border-width: 0.2em;
            box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
            visibility: visible;
            z-index: 101
        }

@-webkit-keyframes segment-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes segment-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.full.padding {
    padding: var(--padding)
}

.full.big.padding {
    padding: calc(var(--padding) * 2)
}

.full.large.padding {
    padding: calc(var(--padding) * 3)
}

.full.small.padding {
    padding: calc(var(--padding) / 2)
}

.vertical.padding {
    padding: var(--padding) 0
}

.horizontal.padding {
    padding: 0 var(--padding)
}

.small.vertical.padding {
    padding: calc(var(--padding) / 2) 0
}

.small.horizontal.padding {
    padding: 0 calc(var(--padding) / 2)
}

.small.top.padding {
    padding-top: calc(var(--padding) / 2)
}

.small.bottom.padding {
    padding-bottom: calc(var(--padding) / 2)
}

.small.left.padding {
    padding-left: calc(var(--padding) / 2)
}

.small.right.padding {
    padding-right: calc(var(--padding) / 2)
}

.right.padding {
    padding-right: var(--padding)
}

.left.padding {
    padding-left: var(--padding)
}

.top.padding {
    padding-top: var(--padding)
}

.bottom.padding {
    padding-bottom: var(--padding)
}

.big.vertical.padding {
    padding: calc(var(--padding) * 2) 0
}

.big.horizontal.padding {
    padding: 0 calc(var(--padding) * 2)
}

.big.top.padding {
    padding-top: calc(var(--padding) * 2)
}

.big.bottom.padding {
    padding-bottom: calc(var(--padding) * 2)
}

.big.left.padding {
    padding-left: calc(var(--padding) * 2)
}

.big.right.padding {
    padding-right: calc(var(--padding) * 2)
}

.large.vertical.padding {
    padding: calc(var(--padding) * 3) 0
}

.large.horizontal.padding {
    padding: 0 calc(var(--padding) * 3)
}

.large.top.padding {
    padding-top: calc(var(--padding) * 3)
}

.large.bottom.padding {
    padding-bottom: calc(var(--padding) * 3)
}

.large.left.padding {
    padding-left: calc(var(--padding) * 3)
}

.large.right.padding {
    padding-right: calc(var(--padding) * 3)
}

.full.margin {
    margin: var(--margin)
}

.full.big.margin {
    margin: calc(var(--margin) * 2)
}

.full.large.margin {
    margin: calc(var(--margin) * 3)
}

.vertical.margin {
    margin: var(--margin) 0
}

.horizontal.margin {
    margin: 0 var(--margin)
}

.full.small.margin {
    margin: calc(var(--margin) / 2)
}

.small.vertical.margin {
    margin: calc(var(--margin) / 2) 0
}

.small.horizontal.margin {
    margin: 0 calc(var(--margin) / 2)
}

.small.top.margin {
    margin-top: calc(var(--margin) / 2)
}

.small.bottom.margin {
    margin-bottom: calc(var(--margin) / 2)
}

.small.left.margin {
    margin-left: calc(var(--margin) / 2)
}

.small.right.margin {
    margin-right: calc(var(--margin) / 2)
}

.right.margin {
    margin-right: var(--margin)
}

.left.margin {
    margin-left: var(--margin)
}

.top.margin {
    margin-top: var(--margin)
}

.bottom.margin {
    margin-bottom: var(--margin)
}

.big.vertical.margin {
    margin: calc(var(--margin) * 2) 0
}

.big.horizontal.margin {
    margin: 0 calc(var(--margin) * 2)
}

.big.top.margin {
    margin-top: calc(var(--margin) * 2)
}

.big.bottom.margin {
    margin-bottom: calc(var(--margin) * 2)
}

.big.left.margin {
    margin-left: calc(var(--margin) * 2)
}

.big.right.margin {
    margin-right: calc(var(--margin) * 2)
}

.large.vertical.margin {
    margin: calc(var(--margin) * 3) 0
}

.large.horizontal.margin {
    margin: 0 calc(var(--margin) * 3)
}

.large.top.margin {
    margin-top: calc(var(--margin) * 3)
}

.large.bottom.margin {
    margin-bottom: calc(var(--margin) * 3)
}

.large.left.margin {
    margin-left: calc(var(--margin) * 3)
}

.large.right.margin {
    margin-right: calc(var(--margin) * 3)
}

.align.center {
    justify-content: center
}

.align.end {
    justify-content: flex-end
}

.align.spaced {
    justify-content: space-between
}

.align.around {
    justify-content: space-around
}

.align.top {
    align-items: flex-start
}

.align.bottom {
    align-items: flex-end
}

.align.middle {
    align-items: center
}

.align.stretch {
    align-items: stretch
}

.align.self.top {
    align-self: flex-start
}

.align.self.bottom {
    align-self: flex-end
}

.align.self.middle {
    -ms-grid-row-align: center;
    align-self: center
}

.align.self.stretch {
    -ms-grid-row-align: stretch;
    align-self: stretch
}

.row {
    display: flex;
    flex-flow: row wrap
}

    .row.gutters {
        margin-left: var(--gutter-compensation)
    }

    .row.mini.gutters {
        margin-left: calc(var(--gutter-compensation) / 4)
    }

    .row.small.gutters {
        margin-left: calc(var(--gutter-compensation) / 2)
    }

    .row.big.gutters {
        margin-left: calc(var(--gutter-compensation) * 2)
    }

    .row.large.gutters {
        margin-left: calc(var(--gutter-compensation) * 3)
    }

    .row.vertical.gutters {
        margin-left: 0
    }

    .row.gutters > .columns {
        padding-left: var(--gutter);
        margin-bottom: var(--gutter)
    }

    .row.mini.gutters > .columns {
        padding-left: calc(var(--gutter) / 4);
        margin-bottom: calc(var(--gutter) / 4)
    }

    .row.small.gutters > .columns {
        padding-left: calc(var(--gutter) / 2);
        margin-bottom: calc(var(--gutter) / 2)
    }

    .row.big.gutters > .columns {
        padding-left: calc(var(--gutter) * 2);
        margin-bottom: calc(var(--gutter) * 2)
    }

    .row.large.gutters > .columns {
        padding-left: calc(var(--gutter) * 3);
        margin-bottom: calc(var(--gutter) * 3)
    }

    .row.horizontal.gutters > .columns {
        margin-bottom: 0
    }

    .row.vertical.gutters > .columns {
        padding-left: 0;
        padding-right: 0
    }

    .row .columns {
        flex: 1 1 0px;
        min-width: 0
    }

        .row .columns.auto {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap
        }

    .row.grid {
        flex-direction: row;
        flex-wrap: wrap
    }

        .row.grid > .columns {
            flex: 0 1 auto;
            -ms-grid-row-align: auto;
            align-self: auto
        }

@media screen and (min-width:64.063em) {
    .row .columns.screen-100 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row .columns.screen-90 {
        flex: 0 0 90%;
        max-width: 90%
    }

    .row .columns.screen-80 {
        flex: 0 0 80%;
        max-width: 80%
    }

    .row .columns.screen-75 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .row .columns.screen-70 {
        flex: 0 0 70%;
        max-width: 70%
    }

    .row .columns.screen-60 {
        flex: 0 0 60%;
        max-width: 60%
    }

    .row .columns.screen-50 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row .columns.screen-40 {
        flex: 0 0 40%;
        max-width: 40%
    }

    .row .columns.screen-33 {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3)
    }

    .row .columns.screen-30 {
        flex: 0 0 30%;
        max-width: 30%
    }

    .row .columns.screen-25 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row .columns.screen-20 {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row .columns.screen-15 {
        flex: 0 0 15%;
        max-width: 15%
    }

    .row .columns.screen-10 {
        flex: 0 0 10%;
        max-width: 10%
    }

    .row .columns.screen.offset-90 {
        margin-left: 90%
    }

    .row .columns.screen.offset-80 {
        margin-left: 80%
    }

    .row .columns.screen.offset-70 {
        margin-left: 70%
    }

    .row .columns.screen.offset-60 {
        margin-left: 60%
    }

    .row .columns.screen.offset-50 {
        margin-left: 50%
    }

    .row .columns.screen.offset-40 {
        margin-left: 40%
    }

    .row .columns.screen.offset-30 {
        margin-left: 30%
    }

    .row .columns.screen.offset-20 {
        margin-left: 20%
    }

    .row .columns.screen.offset-10 {
        margin-left: 10%
    }

    .row.grid.screen-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row.grid.screen-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row.grid.screen-3 > .columns {
        flex: 0 0 Calc(100% / 3);
        max-width: Calc(100% / 3)
    }

    .row.grid.screen-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row.grid.screen-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row.grid.screen-6 > .columns {
        flex: 0 0 Calc(100% / 6);
        max-width: Calc(100% / 6)
    }

    .row.grid.screen-7 > .columns {
        flex: 0 0 Calc(100% / 7);
        max-width: Calc(100% / 7)
    }

    .row.grid.screen-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%
    }

    .screen.order-1 {
        order: 1
    }

    .screen.order-2 {
        order: 2
    }

    .screen.order-3 {
        order: 3
    }

    .screen.order-4 {
        order: 4
    }

    .screen.order-5 {
        order: 5
    }

    .screen.order-6 {
        order: 6
    }

    .screen.left.aligned {
        text-align: left
    }

    .screen.center.aligned {
        text-align: center
    }

    .screen.right.aligned {
        text-align: right
    }

    .screen-hide {
        display: none
    }
}

@media screen and (min-width:40.625em) and (max-width:64em) and (orientation :landscape) {
    .row .columns.tablet-100 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row .columns.tablet-90 {
        flex: 0 0 90%;
        max-width: 90%
    }

    .row .columns.tablet-80 {
        flex: 0 0 80%;
        max-width: 80%
    }

    .row .columns.tablet-75 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .row .columns.tablet-70 {
        flex: 0 0 70%;
        max-width: 70%
    }

    .row .columns.tablet-60 {
        flex: 0 0 60%;
        max-width: 60%
    }

    .row .columns.tablet-50 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row .columns.tablet-40 {
        flex: 0 0 40%;
        max-width: 40%
    }

    .row .columns.tablet-33 {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3)
    }

    .row .columns.tablet-30 {
        flex: 0 0 30%;
        max-width: 30%
    }

    .row .columns.tablet-25 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row .columns.tablet-20 {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row .columns.tablet-15 {
        flex: 0 0 15%;
        max-width: 15%
    }

    .row .columns.tablet-10 {
        flex: 0 0 10%;
        max-width: 10%
    }

    .row .columns.tablet.offset-90 {
        margin-left: 90%
    }

    .row .columns.tablet.offset-80 {
        margin-left: 80%
    }

    .row .columns.tablet.offset-70 {
        margin-left: 70%
    }

    .row .columns.tablet.offset-60 {
        margin-left: 60%
    }

    .row .columns.tablet.offset-50 {
        margin-left: 50%
    }

    .row .columns.tablet.offset-40 {
        margin-left: 40%
    }

    .row .columns.tablet.offset-30 {
        margin-left: 30%
    }

    .row .columns.tablet.offset-20 {
        margin-left: 20%
    }

    .row .columns.tablet.offset-10 {
        margin-left: 10%
    }

    .row.grid.tablet-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row.grid.tablet-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row.grid.tablet-3 > .columns {
        flex: 0 0 Calc(100% / 3);
        max-width: Calc(100% / 3)
    }

    .row.grid.tablet-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row.grid.tablet-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row.grid.tablet-6 > .columns {
        flex: 0 0 Calc(100% / 6);
        max-width: Calc(100% / 6)
    }

    .row.grid.tablet-7 > .columns {
        flex: 0 0 Calc(100% / 7);
        max-width: Calc(100% / 7)
    }

    .row.grid.tablet-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%
    }

    .tablet.order-1 {
        order: 1
    }

    .tablet.order-2 {
        order: 2
    }

    .tablet.order-3 {
        order: 3
    }

    .tablet.order-4 {
        order: 4
    }

    .tablet.order-5 {
        order: 5
    }

    .tablet.order-6 {
        order: 6
    }

    .tablet.left.aligned {
        text-align: left
    }

    .tablet.center.aligned {
        text-align: center
    }

    .tablet.right.aligned {
        text-align: right
    }

    .tablet-hide {
        display: none
    }
}

@media screen and (max-width:48.063em) {
    .row.mobile.fluid > .columns, .row .columns.mobile-100 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row .columns.mobile-90 {
        flex: 0 0 90%;
        max-width: 90%
    }

    .row .columns.mobile-80 {
        flex: 0 0 80%;
        max-width: 80%
    }

    .row .columns.mobile-75 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .row .columns.mobile-70 {
        flex: 0 0 70%;
        max-width: 70%
    }

    .row .columns.mobile-60 {
        flex: 0 0 60%;
        max-width: 60%
    }

    .row .columns.mobile-50 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row .columns.mobile-40 {
        flex: 0 0 40%;
        max-width: 40%
    }

    .row .columns.mobile-33 {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3)
    }

    .row .columns.mobile-30 {
        flex: 0 0 30%;
        max-width: 30%
    }

    .row .columns.mobile-25 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row .columns.mobile-20 {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row .columns.mobile-15 {
        flex: 0 0 15%;
        max-width: 15%
    }

    .row .columns.mobile-10 {
        flex: 0 0 10%;
        max-width: 10%
    }

    .row.grid.mobile-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row.grid.mobile-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row.grid.mobile-3 > .columns {
        flex: 0 0 Calc(100% / 3);
        max-width: Calc(100% / 3)
    }

    .row.grid.mobile-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row.grid.mobile-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row.grid.mobile-6 > .columns {
        flex: 0 0 Calc(100% / 6);
        max-width: Calc(100% / 6)
    }

    .row.grid.mobile-7 > .columns {
        flex: 0 0 Calc(100% / 7);
        max-width: Calc(100% / 7)
    }

    .row.grid.mobile-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%
    }

    .mobile.order-1 {
        order: 1
    }

    .mobile.order-2 {
        order: 2
    }

    .mobile.order-3 {
        order: 3
    }

    .mobile.order-4 {
        order: 4
    }

    .mobile.order-5 {
        order: 5
    }

    .mobile.order-6 {
        order: 6
    }

    .mobile.left.aligned {
        text-align: left
    }

    .mobile.center.aligned {
        text-align: center
    }

    .mobile.right.aligned {
        text-align: right
    }

    .mobile-hide {
        display: none
    }

    .wojo.mason {
        -webkit-column-count: 2;
        column-count: 2
    }

        .wojo.mason.grid {
            -webkit-column-count: 5;
            column-count: 5
        }
}

@media screen and (max-width:30em) {
    .row.phone.fluid > .columns, .row .columns.phone-100, .row.grid[class*="screen-"] > .columns {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row .columns.phone-90 {
        flex: 0 0 90%;
        max-width: 90%
    }

    .row .columns.phone-80 {
        flex: 0 0 80%;
        max-width: 80%
    }

    .row .columns.phone-75 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .row .columns.phone-70 {
        flex: 0 0 70%;
        max-width: 70%
    }

    .row .columns.phone-60 {
        flex: 0 0 60%;
        max-width: 60%
    }

    .row .columns.phone-50 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row .columns.phone-40 {
        flex: 0 0 40%;
        max-width: 40%
    }

    .row .columns.phone-33 {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3)
    }

    .row .columns.phone-30 {
        flex: 0 0 30%;
        max-width: 30%
    }

    .row .columns.phone-25 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row .columns.phone-20 {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row .columns.phone-15 {
        flex: 0 0 15%;
        max-width: 15%
    }

    .row .columns.phone-10 {
        flex: 0 0 10%;
        max-width: 10%
    }

    .row.grid.phone-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%
    }

    .row.grid.phone-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%
    }

    .row.grid.phone-3 > .columns {
        flex: 0 0 Calc(100% / 3);
        max-width: Calc(100% / 3)
    }

    .row.grid.phone-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%
    }

    .row.grid.phone-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%
    }

    .row.grid.phone-6 > .columns {
        flex: 0 0 Calc(100% / 6);
        max-width: Calc(100% / 6)
    }

    .row.grid.phone-7 > .columns {
        flex: 0 0 Calc(100% / 7);
        max-width: Calc(100% / 7)
    }

    .row.grid.phone-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%
    }

    .phone.order-1 {
        order: 1
    }

    .phone.order-2 {
        order: 2
    }

    .phone.order-3 {
        order: 3
    }

    .phone.order-4 {
        order: 4
    }

    .phone.order-5 {
        order: 5
    }

    .phone.order-6 {
        order: 6
    }

    .phone.left.aligned {
        text-align: left
    }

    .phone.center.aligned {
        text-align: center
    }

    .phone.right.aligned {
        text-align: right
    }

    .phone-hide {
        display: none
    }

    .wojo.mason {
        -webkit-column-count: 1;
        column-count: 1
    }

        .wojo.mason.grid {
            -webkit-column-count: 2;
            column-count: 2
        }
}

#debug-panel {
    opacity: 0.9;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%
}

    #debug-panel .debug-wrapper {
        padding: 0px .875em;
        background-color: #2A2A2E;
        border: 1px solid rgba(0,0,0,0.2);
        border-bottom: 0;
        margin: 0px auto 0px auto
    }

        #debug-panel .debug-wrapper .legend {
            background-color: #0C0C0D;
            padding: .25em;
            border: 1px solid rgba(0,0,0,0.2);
            width: auto;
            margin-top: -1.25em
        }

    #debug-panel a {
        text-decoration: none;
        color: rgba(255,255,255,0.5);
        font-size: .875rem;
        margin: 0 .25em;
        line-height: 1
    }

    #debug-panel .debug-wrapper .legend span {
        color: #999;
        font-weight: 300
    }

    #debug-panel .items {
        padding: 10px;
        height: 200px;
        overflow-y: auto;
        padding-top: 1em;
        font-size: 13px;
        color: #888;
        font-family: Monaco, Menlo, Consolas, "Courier New", monospace
    }

    #debug-panel pre {
        color: rgba(255,255,255,0.5);
        background-color: rgba(255,255,255,0.1);
        padding: .25rem
    }

    #debug-panel a.clear_session {
        color: #E91E63;
        opacity: 1;
        margin-left: .5em;
        display: inline-block
    }

    #debug-panel #contentQueries {
        color: #DB7DE9
    }

    #debug-panel .checkbox {
        font-size: 14px;
        line-height: 1em;
        padding-left: .5em
    }

.animate {
    -webkit-animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-duration: .8s;
    animation-fill-mode: both
}

.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.pulsate {
    -webkit-animation-name: pulsate;
    animation-name: pulsate;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
        transform: scale3d(0.8, 0.8, 0.8)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulsate {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(0.8, 0.8, 0.8);
        transform: scale3d(0.8, 0.8, 0.8)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.blink {
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }

    25% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes blink {
    0% {
        opacity: 1
    }

    25% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.hitLeft {
    -webkit-animation-name: hitLeft;
    animation-name: hitLeft;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes hitLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translateX(20px) rotate(4deg);
        transform: translateX(20px) rotate(4deg)
    }
}

@keyframes hitLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translateX(20px) rotate(4deg);
        transform: translateX(20px) rotate(4deg)
    }
}

.hitRight {
    -webkit-animation-name: hitRight;
    animation-name: hitRight;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes hitRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translateX(-20px) rotate(-4deg);
        transform: translateX(-20px) rotate(-4deg)
    }
}

@keyframes hitRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translateX(-20px) rotate(-4deg);
        transform: translateX(-20px) rotate(-4deg)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
}

@keyframes shake {
    10% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    30% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    40% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
}

.ball {
    -webkit-animation-name: ball;
    animation-name: ball;
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes ball {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    75% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    85% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes ball {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    75% {
        -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    85% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.pullUp {
    -webkit-animation-name: pullUp;
    animation-name: pullUp;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pullUp {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pullDown {
    -webkit-animation-name: pullDown;
    animation-name: pullDown;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        -webkit-transform-origin: center top;
        transform-origin: center top
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pullDown {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(1, 0, 1);
        transform: scale3d(1, 0, 1);
        -webkit-transform-origin: center top;
        transform-origin: center top
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pullLeft {
    -webkit-animation-name: pullLeft;
    animation-name: pullLeft;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes pullLeft {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: center left;
        transform-origin: center left
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pullLeft {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: center left;
        transform-origin: center left
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pullRight {
    -webkit-animation-name: pullRight;
    animation-name: pullRight;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes pullRight {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: center right;
        transform-origin: center right
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pullRight {
    0% {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        -webkit-transform-origin: center right;
        transform-origin: center right
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.jumpInLeft {
    -webkit-animation-name: jumpInLeft;
    animation-name: jumpInLeft;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes jumpInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(10deg)
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg)
    }

    90% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }
}

@keyframes jumpInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(10deg)
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg)
    }

    90% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }
}

.jumpInRight {
    -webkit-animation-name: jumpInRight;
    animation-name: jumpInRight;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes jumpInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(90deg)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg)
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(5deg)
    }

    90% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }
}

@keyframes jumpInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(90deg)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg)
    }

    70% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(5deg)
    }

    90% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }
}

.jumpOutRight {
    -webkit-animation-name: jumpOutRight;
    animation-name: jumpOutRight;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes jumpOutRight {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }

    30% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(5deg)
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(90deg)
    }
}

@keyframes jumpOutRight {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }

    30% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(5deg)
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(90deg)
    }
}

.jumpOutLeft {
    -webkit-animation-name: jumpOutLeft;
    animation-name: jumpOutLeft;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes jumpOutLeft {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }

    30% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg)
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(10deg)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg)
    }
}

@keyframes jumpOutLeft {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
        transform: scale3d(1, 1, 1) rotate(0deg)
    }

    30% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg)
    }

    70% {
        opacity: 1;
        -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
        transform: scale3d(1.2, 1.2, 1.2) rotate(10deg)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
        transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg)
    }
}

.rollInLeft {
    -webkit-animation-name: rollInLeft;
    animation-name: rollInLeft;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(-400px) rotate(445deg);
        transform: translateX(-400px) rotate(445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(20px) rotate(20deg);
        transform: translateX(20px) rotate(20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

@keyframes rollInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(-400px) rotate(445deg);
        transform: translateX(-400px) rotate(445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(20px) rotate(20deg);
        transform: translateX(20px) rotate(20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

.rollInRight {
    -webkit-animation-name: rollInRight;
    animation-name: rollInRight;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(400px) rotate(-445deg);
        transform: translateX(400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(-20px) rotate(-20deg);
        transform: translateX(-20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

@keyframes rollInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(400px) rotate(-445deg);
        transform: translateX(400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateX(-20px) rotate(-20deg);
        transform: translateX(-20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

.rollInTop {
    -webkit-animation-name: rollInTop;
    animation-name: rollInTop;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollInTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(-400px) rotate(-445deg);
        transform: translateY(-400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateY(20px) rotate(-20deg);
        transform: translateY(20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes rollInTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(-400px) rotate(-445deg);
        transform: translateY(-400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateY(20px) rotate(-20deg);
        transform: translateY(20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

.rollInBottom {
    -webkit-animation-name: rollInBottom;
    animation-name: rollInBottom;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollInBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(400px) rotate(-445deg);
        transform: translateY(400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateY(-20px) rotate(-20deg);
        transform: translateY(-20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

@keyframes rollInBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(400px) rotate(-445deg);
        transform: translateY(400px) rotate(-445deg);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    50% {
        -webkit-transform: translateY(-20px) rotate(-20deg);
        transform: translateY(-20px) rotate(-20deg)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }
}

.rollOutLeft {
    -webkit-animation-name: rollOutLeft;
    animation-name: rollOutLeft;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollOutLeft {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateX(20px) rotate(-20deg);
        transform: translateX(20px) rotate(-20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(-400px) rotate(-445deg);
        transform: translateX(-400px) rotate(-445deg)
    }
}

@keyframes rollOutLeft {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateX(20px) rotate(-20deg);
        transform: translateX(20px) rotate(-20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(-400px) rotate(-445deg);
        transform: translateX(-400px) rotate(-445deg)
    }
}

.rollOutRight {
    -webkit-animation-name: rollOutRight;
    animation-name: rollOutRight;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollOutRight {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateX(-20px) rotate(20deg);
        transform: translateX(-20px) rotate(20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(400px) rotate(445deg);
        transform: translateX(400px) rotate(445deg)
    }
}

@keyframes rollOutRight {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateX(-20px) rotate(20deg);
        transform: translateX(-20px) rotate(20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateX(400px) rotate(445deg);
        transform: translateX(400px) rotate(445deg)
    }
}

.rollOutTop {
    -webkit-animation-name: rollOutTop;
    animation-name: rollOutTop;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollOutTop {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateY(20px) rotate(20deg);
        transform: translateY(20px) rotate(20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(-400px) rotate(445deg);
        transform: translateY(-400px) rotate(445deg)
    }
}

@keyframes rollOutTop {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateY(20px) rotate(20deg);
        transform: translateY(20px) rotate(20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(-400px) rotate(445deg);
        transform: translateY(-400px) rotate(445deg)
    }
}

.rollOutBottom {
    -webkit-animation-name: rollOutBottom;
    animation-name: rollOutBottom;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes rollOutBottom {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateY(-20px) rotate(-20deg);
        transform: translateY(-20px) rotate(-20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(400px) rotate(-445deg);
        transform: translateY(400px) rotate(-445deg)
    }
}

@keyframes rollOutBottom {
    0% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateY(-20px) rotate(-20deg);
        transform: translateY(-20px) rotate(-20deg)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translateY(400px) rotate(-445deg);
        transform: translateY(400px) rotate(-445deg)
    }
}

.popIn {
    -webkit-animation-name: popIn;
    animation-name: popIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(1.08, 1.08, 1.08);
        transform: scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes popIn {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    40% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(1.08, 1.08, 1.08);
        transform: scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.popInLeft {
    -webkit-animation-name: popInLeft;
    animation-name: popInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes popInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1)
    }

    40% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes popInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1)
    }

    40% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.popInRight {
    -webkit-animation-name: popInRight;
    animation-name: popInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes popInRight {
    0% {
        -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes popInRight {
    0% {
        -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.popInTop {
    -webkit-animation-name: popInTop;
    animation-name: popInTop;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes popInTop {
    0% {
        -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}

@keyframes popInTop {
    0% {
        -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}

.popInBottom {
    -webkit-animation-name: popInBottom;
    animation-name: popInBottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes popInBottom {
    0% {
        -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}

@keyframes popInBottom {
    0% {
        -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
        transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
        opacity: 0
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
        transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }

    80% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
        transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}

.popOut {
    -webkit-animation-name: popOut;
    animation-name: popOut;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes popOut {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08);
        transform: scale3d(1.08, 1.08, 1.08)
    }

    80% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

@keyframes popOut {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08);
        transform: scale3d(1.08, 1.08, 1.08)
    }

    80% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

.popOutLeft {
    -webkit-animation-name: popOutLeft;
    animation-name: popOutLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes popOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0)
    }
}

@keyframes popOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0)
    }
}

.popOutRight {
    -webkit-animation-name: popOutRight;
    animation-name: popOutRight;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes popOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0)
    }
}

@keyframes popOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0)
    }
}

.popOutTop {
    -webkit-animation-name: popOutTop;
    animation-name: popOutTop;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes popOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0)
    }
}

@keyframes popOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: top center;
        transform-origin: top center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0)
    }
}

.popOutBottom {
    -webkit-animation-name: popOutBottom;
    animation-name: popOutBottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes popOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0)
    }
}

@keyframes popOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
        transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0);
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0)
    }
}

.flip {
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }

    50% {
        -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
        animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035)
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }

    50% {
        -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
        animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035)
    }
}

.flipInX {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes flipInX {
    from {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)
    }

    50% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1)
    }

    to {
        -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1)
    }
}

@keyframes flipInX {
    from {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)
    }

    50% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1)
    }

    to {
        -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1)
    }
}

.flipInY {
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes flipInY {
    from {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)
    }

    50% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1)
    }
}

@keyframes flipInY {
    from {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)
    }

    50% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1)
    }

    to {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1)
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2)
    }
}

.flipOutY {
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1);
        transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1)
    }

    to {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
        transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2)
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0);
        opacity: 0
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0);
        opacity: 0
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.fadeInTop {
    -webkit-animation-name: fadeInTop;
    animation-name: fadeInTop;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@-webkit-keyframes fadeInTop {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0);
        opacity: 0
    }

    50% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes fadeInTop {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0);
        opacity: 0
    }

    50% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.fadeInBottom {
    -webkit-animation-name: fadeInBottom;
    animation-name: fadeInBottom;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@-webkit-keyframes fadeInBottom {
    0% {
        -webkit-transform: translate3d(0, 400px, 0);
        transform: translate3d(0, 400px, 0);
        opacity: 0
    }

    50% {
        opacity: 0.2
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes fadeInBottom {
    0% {
        -webkit-transform: translate3d(0, 400px, 0);
        transform: translate3d(0, 400px, 0);
        opacity: 0
    }

    50% {
        opacity: 0.2
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0);
        opacity: 0
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@keyframes fadeOutRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0);
        opacity: 0
    }
}

.fadeOutTop {
    -webkit-animation-name: fadeOutTop;
    animation-name: fadeOutTop;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@-webkit-keyframes fadeOutTop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    40% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, -300px, 0);
        transform: translate3d(0, -300px, 0);
        opacity: 0
    }
}

@keyframes fadeOutTop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    40% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, -300px, 0);
        transform: translate3d(0, -300px, 0);
        opacity: 0
    }
}

.fadeOutBottom {
    -webkit-animation-name: fadeOutBottom;
    animation-name: fadeOutBottom;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

@-webkit-keyframes fadeOutBottom {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    40% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0);
        opacity: 0
    }
}

@keyframes fadeOutBottom {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }

    40% {
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
    }

    100% {
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0);
        opacity: 0
    }
}

.driveInLeft {
    -webkit-animation-name: driveInLeft;
    animation-name: driveInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveInLeft {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes driveInLeft {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.driveInRight {
    -webkit-animation-name: driveInRight;
    animation-name: driveInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveInRight {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes driveInRight {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.driveInTop {
    -webkit-animation-name: driveInTop;
    animation-name: driveInTop;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveInTop {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes driveInTop {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.driveInBottom {
    -webkit-animation-name: driveInBottom;
    animation-name: driveInBottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveInBottom {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes driveInBottom {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0)
    }

    30% {
        opacity: 1
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.driveOutLeft {
    -webkit-animation-name: driveOutLeft;
    animation-name: driveOutLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0)
    }
}

@keyframes driveOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(-400px, 0, 0);
        transform: translate3d(-400px, 0, 0)
    }
}

.driveOutRight {
    -webkit-animation-name: driveOutRight;
    animation-name: driveOutRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0)
    }
}

@keyframes driveOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(400px, 0, 0);
        transform: translate3d(400px, 0, 0)
    }
}

.driveOutTop {
    -webkit-animation-name: driveOutTop;
    animation-name: driveOutTop;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0)
    }
}

@keyframes driveOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, -400px, 0);
        transform: translate3d(0, -400px, 0)
    }
}

.driveOutBottom {
    -webkit-animation-name: driveOutBottom;
    animation-name: driveOutBottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes driveOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0)
    }
}

@keyframes driveOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0)
    }
}

.spin {
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s
}

@-webkit-keyframes spin {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: rotateZ(-20deg);
        transform: rotateZ(-20deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: rotateZ(380deg);
        transform: rotateZ(380deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

@keyframes spin {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: rotateZ(-20deg);
        transform: rotateZ(-20deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: rotateZ(380deg);
        transform: rotateZ(380deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

.spinIn {
    -webkit-animation-name: spinIn;
    animation-name: spinIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes spinIn {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0);
        transform: rotateZ(0deg) scale3d(0, 0, 0);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    50% {
        opacity: 1
    }

    70% {
        -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1);
        transform: rotateZ(380deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    100% {
        -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1);
        transform: rotateZ(360deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

@keyframes spinIn {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0);
        transform: rotateZ(0deg) scale3d(0, 0, 0);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    50% {
        opacity: 1
    }

    70% {
        -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1);
        transform: rotateZ(380deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    100% {
        -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1);
        transform: rotateZ(360deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

.spinOut {
    -webkit-animation-name: spinOut;
    animation-name: spinOut;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes spinOut {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1);
        transform: rotateZ(0deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    20% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1);
        transform: rotateZ(-20deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    30% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0);
        transform: rotateZ(360deg) scale3d(0, 0, 0);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

@keyframes spinOut {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1);
        transform: rotateZ(0deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    20% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1);
        transform: rotateZ(-20deg) scale3d(1, 1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }

    30% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0);
        transform: rotateZ(360deg) scale3d(0, 0, 0);
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
}

.swoopInLeft {
    -webkit-animation-name: swoopInLeft;
    animation-name: swoopInLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopInLeft {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
        transform: scaleX(1.5) translate3d(-400px, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
        transform: scaleX(1) translate3d(20px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }
}

@keyframes swoopInLeft {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
        transform: scaleX(1.5) translate3d(-400px, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
        transform: scaleX(1) translate3d(20px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }
}

.swoopInRight {
    -webkit-animation-name: swoopInRight;
    animation-name: swoopInRight;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopInRight {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
        transform: scaleX(1.5) translate3d(400px, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
        transform: scaleX(1) translate3d(-20px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }
}

@keyframes swoopInRight {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
        transform: scaleX(1.5) translate3d(400px, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
        transform: scaleX(1) translate3d(-20px, 0, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }
}

.swoopInTop {
    -webkit-animation-name: swoopInTop;
    animation-name: swoopInTop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopInTop {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
        transform: scaleY(1.5) translate3d(0, -400px, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
        transform: scaleY(1) translate3d(0, 20px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }
}

@keyframes swoopInTop {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
        transform: scaleY(1.5) translate3d(0, -400px, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
        transform: scaleY(1) translate3d(0, 20px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }
}

.swoopInBottom {
    -webkit-animation-name: swoopInBottom;
    animation-name: swoopInBottom;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopInBottom {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0);
        transform: scaleY(1.5) translate3d(0, 250px, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
        transform: scaleY(1) translate3d(0, -20px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }
}

@keyframes swoopInBottom {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0);
        transform: scaleY(1.5) translate3d(0, 250px, 0)
    }

    40% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    65% {
        -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
        transform: scaleY(1) translate3d(0, -20px, 0)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }
}

.swoopOutLeft {
    -webkit-animation-name: swoopOutLeft;
    animation-name: swoopOutLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
        transform: scaleX(1) translate3d(20px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
        transform: scaleX(1.5) translate3d(-400px, 0, 0)
    }
}

@keyframes swoopOutLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
        transform: scaleX(1) translate3d(20px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
        transform: scaleX(1.5) translate3d(-400px, 0, 0)
    }
}

.swoopOutRight {
    -webkit-animation-name: swoopOutRight;
    animation-name: swoopOutRight;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
        transform: scaleX(1) translate3d(-20px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
        transform: scaleX(1.5) translate3d(400px, 0, 0)
    }
}

@keyframes swoopOutRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1) translate3d(0, 0, 0);
        transform: scaleX(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
        transform: scaleX(1) translate3d(-20px, 0, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
        transform: scaleX(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
        transform: scaleX(1.5) translate3d(400px, 0, 0)
    }
}

.swoopOutTop {
    -webkit-animation-name: swoopOutTop;
    animation-name: swoopOutTop;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
        transform: scaleY(1) translate3d(0, 20px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
        transform: scaleY(1.5) translate3d(0, -400px, 0)
    }
}

@keyframes swoopOutTop {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
        transform: scaleY(1) translate3d(0, 20px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
        transform: scaleY(1.5) translate3d(0, -400px, 0)
    }
}

.swoopOutBottom {
    -webkit-animation-name: swoopOutBottom;
    animation-name: swoopOutBottom;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

@-webkit-keyframes swoopOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
        transform: scaleY(1) translate3d(0, -20px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0);
        transform: scaleY(1.5) translate3d(0, 200px, 0)
    }
}

@keyframes swoopOutBottom {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1) translate3d(0, 0, 0);
        transform: scaleY(1) translate3d(0, 0, 0)
    }

    40% {
        opacity: 1;
        -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
        transform: scaleY(1) translate3d(0, -20px, 0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
        -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
        transform: scaleY(1.2) translate3d(0, 0, 0)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0);
        transform: scaleY(1.5) translate3d(0, 200px, 0)
    }
}

.fold {
    -webkit-animation-name: fold;
    animation-name: fold
}

@-webkit-keyframes fold {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(1, 0.4, 1);
        transform: scale3d(1, 0.4, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 0.4, 1);
        transform: scale3d(0.4, 0.4, 1)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -webkit-transform: scale3d(0.2, 0.2, 0.2);
        transform: scale3d(0.2, 0.2, 0.2)
    }
}

@keyframes fold {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(1, 0.4, 1);
        transform: scale3d(1, 0.4, 1)
    }

    60% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 0.4, 1);
        transform: scale3d(0.4, 0.4, 1)
    }

    100% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -webkit-transform: scale3d(0.2, 0.2, 0.2);
        transform: scale3d(0.2, 0.2, 0.2)
    }
}

.unfold {
    -webkit-animation-name: unfold;
    animation-name: unfold
}

@-webkit-keyframes unfold {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    30% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 0.4, 1);
        transform: scale3d(0.4, 0.4, 1)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 1, 1);
        transform: scale3d(0.4, 1, 1)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes unfold {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0)
    }

    30% {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 0.4, 1);
        transform: scale3d(0.4, 0.4, 1)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -webkit-transform: scale3d(0.4, 1, 1);
        transform: scale3d(0.4, 1, 1)
    }

    100% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.scaleIn {
    -webkit-animation-name: scaleIn;
    animation-name: scaleIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.scaleOut {
    -webkit-animation-name: scaleOut;
    animation-name: scaleOut;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.8);
        transform: scale(0.8)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scaleOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

@keyframes scaleOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9)
    }
}

.animate[data-delay="100"] {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.animate[data-delay="150"] {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms
}

.animate[data-duration="100"] {
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.animate[data-duration="150"] {
    -webkit-animation-duration: 150ms;
    animation-duration: 150ms
}

.animate[data-delay="200"] {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.animate[data-delay="250"] {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms
}

.animate[data-duration="200"] {
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

.animate[data-duration="250"] {
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms
}

.animate[data-delay="300"] {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.animate[data-delay="350"] {
    -webkit-animation-delay: 350ms;
    animation-delay: 350ms
}

.animate[data-duration="300"] {
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

.animate[data-duration="350"] {
    -webkit-animation-duration: 350ms;
    animation-duration: 350ms
}

.animate[data-delay="400"] {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.animate[data-delay="450"] {
    -webkit-animation-delay: 450ms;
    animation-delay: 450ms
}

.animate[data-duration="400"] {
    -webkit-animation-duration: .4s;
    animation-duration: .4s
}

.animate[data-duration="450"] {
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms
}

.animate[data-delay="500"] {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.animate[data-delay="550"] {
    -webkit-animation-delay: 550ms;
    animation-delay: 550ms
}

.animate[data-duration="500"] {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.animate[data-duration="550"] {
    -webkit-animation-duration: 550ms;
    animation-duration: 550ms
}

.animate[data-delay="600"] {
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.animate[data-delay="650"] {
    -webkit-animation-delay: 650ms;
    animation-delay: 650ms
}

.animate[data-duration="600"] {
    -webkit-animation-duration: .6s;
    animation-duration: .6s
}

.animate[data-duration="650"] {
    -webkit-animation-duration: 650ms;
    animation-duration: 650ms
}

.animate[data-delay="700"] {
    -webkit-animation-delay: .7s;
    animation-delay: .7s
}

.animate[data-delay="750"] {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms
}

.animate[data-duration="700"] {
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}

.animate[data-duration="750"] {
    -webkit-animation-duration: 750ms;
    animation-duration: 750ms
}

.animate[data-delay="800"] {
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

.animate[data-delay="850"] {
    -webkit-animation-delay: 850ms;
    animation-delay: 850ms
}

.animate[data-duration="800"] {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.animate[data-duration="850"] {
    -webkit-animation-duration: 850ms;
    animation-duration: 850ms
}

.animate[data-delay="900"] {
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}

.animate[data-delay="950"] {
    -webkit-animation-delay: 950ms;
    animation-delay: 950ms
}

.animate[data-duration="900"] {
    -webkit-animation-duration: .9s;
    animation-duration: .9s
}

.animate[data-duration="950"] {
    -webkit-animation-duration: 950ms;
    animation-duration: 950ms
}

.animate[data-delay="1000"] {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animate[data-duration="1000"] {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.animate[data-delay="1050"], .animate[data-delay="1100"], .animate[data-delay="1150"], .animate[data-delay="1200"], .animate[data-delay="1250"] {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms
}

.animate[data-delay="1300"], .animate[data-delay="1350"], .animate[data-delay="1400"], .animate[data-delay="1450"], .animate[data-delay="1500"] {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.animate[data-delay="1550"], .animate[data-delay="1600"], .animate[data-delay="1650"], .animate[data-delay="1700"], .animate[data-delay="1750"] {
    -webkit-animation-delay: 1750ms;
    animation-delay: 1750ms
}

.animate[data-duration="1050"], .animate[data-duration="1100"], .animate[data-duration="1150"], .animate[data-duration="1200"], .animate[data-duration="1250"] {
    -webkit-animation-duration: 1250ms;
    animation-duration: 1250ms
}

.animate[data-duration="1300"], .animate[data-duration="1350"], .animate[data-duration="1400"], .animate[data-duration="1450"], .animate[data-duration="1500"] {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s
}

.animate[data-duration="1550"], .animate[data-duration="1600"], .animate[data-duration="1650"], .animate[data-duration="1700"], .animate[data-duration="1750"] {
    -webkit-animation-duration: 1750ms;
    animation-duration: 1750ms
}

.animate[data-delay="1800"], .animate[data-delay="1850"], .animate[data-delay="1900"], .animate[data-delay="1950"], .animate[data-delay="2000"] {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animate[data-delay="2050"], .animate[data-delay="2100"], .animate[data-delay="2150"], .animate[data-delay="2200"], .animate[data-delay="2250"] {
    -webkit-animation-delay: 2250ms;
    animation-delay: 2250ms
}

.animate[data-delay="2300"], .animate[data-delay="2350"], .animate[data-delay="2400"], .animate[data-delay="2450"], .animate[data-delay="2500"] {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.animate[data-delay="2550"], .animate[data-delay="2600"], .animate[data-delay="2650"], .animate[data-delay="2700"], .animate[data-delay="2750"] {
    -webkit-animation-delay: 2750ms;
    animation-delay: 2750ms
}

.animate[data-duration="1800"], .animate[data-duration="1850"], .animate[data-duration="1900"], .animate[data-duration="1950"], .animate[data-duration="2000"] {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animate[data-duration="2050"], .animate[data-duration="2100"], .animate[data-duration="2150"], .animate[data-duration="2200"], .animate[data-duration="2250"] {
    -webkit-animation-duration: 2250ms;
    animation-duration: 2250ms
}

.animate[data-duration="2300"], .animate[data-duration="2350"], .animate[data-duration="2400"], .animate[data-duration="2450"], .animate[data-duration="2500"] {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s
}

.animate[data-duration="2550"], .animate[data-duration="2600"], .animate[data-duration="2650"], .animate[data-duration="2700"], .animate[data-duration="2750"] {
    -webkit-animation-duration: 2750ms;
    animation-duration: 2750ms
}

.animate[data-delay="2800"], .animate[data-delay="2850"], .animate[data-delay="2900"], .animate[data-delay="2950"], .animate[data-delay="3000"] {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animate[data-delay="3050"], .animate[data-delay="3100"], .animate[data-delay="3150"], .animate[data-delay="3200"], .animate[data-delay="3250"] {
    -webkit-animation-delay: 3250ms;
    animation-delay: 3250ms
}

.animate[data-delay="3300"], .animate[data-delay="3350"], .animate[data-delay="3400"], .animate[data-delay="3450"], .animate[data-delay="3500"] {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s
}

.animate[data-delay="3550"], .animate[data-delay="3600"], .animate[data-delay="3650"], .animate[data-delay="3700"], .animate[data-delay="3750"] {
    -webkit-animation-delay: 3750ms;
    animation-delay: 3750ms
}

.animate[data-duration="2800"], .animate[data-duration="2850"], .animate[data-duration="2900"], .animate[data-duration="2950"], .animate[data-duration="3000"] {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

.animate[data-duration="3050"], .animate[data-duration="3100"], .animate[data-duration="3150"], .animate[data-duration="3200"], .animate[data-duration="3250"] {
    -webkit-animation-duration: 3250ms;
    animation-duration: 3250ms
}

.animate[data-duration="3300"], .animate[data-duration="3350"], .animate[data-duration="3400"], .animate[data-duration="3450"], .animate[data-duration="3500"] {
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s
}

.animate[data-duration="3550"], .animate[data-duration="3600"], .animate[data-duration="3650"], .animate[data-duration="3700"], .animate[data-duration="3750"] {
    -webkit-animation-duration: 3750ms;
    animation-duration: 3750ms
}

.animate[data-delay="3800"], .animate[data-delay="3850"], .animate[data-delay="3900"], .animate[data-delay="3950"], .animate[data-delay="4000"] {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animate[data-delay="4050"], .animate[data-delay="4100"], .animate[data-delay="4150"], .animate[data-delay="4200"], .animate[data-delay="4250"] {
    -webkit-animation-delay: 4250ms;
    animation-delay: 4250ms
}

.animate[data-delay="4300"], .animate[data-delay="4350"], .animate[data-delay="4400"], .animate[data-delay="4450"], .animate[data-delay="4500"] {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s
}

.animate[data-delay="4550"], .animate[data-delay="4600"], .animate[data-delay="4650"], .animate[data-delay="4700"], .animate[data-delay="4750"] {
    -webkit-animation-delay: 4750ms;
    animation-delay: 4750ms
}

.animate[data-duration="3800"], .animate[data-duration="3850"], .animate[data-duration="3900"], .animate[data-duration="3950"], .animate[data-duration="4000"] {
    -webkit-animation-duration: 4s;
    animation-duration: 4s
}

.animate[data-duration="4050"], .animate[data-duration="4100"], .animate[data-duration="4150"], .animate[data-duration="4200"], .animate[data-duration="4250"] {
    -webkit-animation-duration: 4250ms;
    animation-duration: 4250ms
}

.animate[data-duration="4300"], .animate[data-duration="4350"], .animate[data-duration="4400"], .animate[data-duration="4450"], .animate[data-duration="4500"] {
    -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s
}

.animate[data-duration="4550"], .animate[data-duration="4600"], .animate[data-duration="4650"], .animate[data-duration="4700"], .animate[data-duration="4750"] {
    -webkit-animation-duration: 4750ms;
    animation-duration: 4750ms
}

.animate[data-delay="4800"], .animate[data-delay="4850"], .animate[data-delay="4900"], .animate[data-delay="4950"], .animate[data-delay="5000"] {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.animate[data-duration="4800"], .animate[data-duration="4850"], .animate[data-duration="4900"], .animate[data-duration="4950"], .animate[data-duration="5000"] {
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}

.wojo.label {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    outline: none;
    vertical-align: middle;
    background-color: #757575;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    margin: 0;
    padding: .5rem 1rem;
    line-height: 1rem;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: .250rem;
    box-sizing: content-box;
    border: 1px solid #757575;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    position: relative;
    box-shadow: 0 4px 6px rgba(50,50,93,.1), 0 1px 3px rgba(0,0,0,.1)
}

.wojo.basic.label, .wojo.inverted.label {
    background-color: transparent;
    box-shadow: none;
    border-color: #757575;
    color: #757575
}

.wojo.primary.label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff
}

.wojo.primary.basic.label {
    background-color: transparent;
    color: var(--primary-color)
}

.wojo.primary.inverted.label {
    background-color: var(--primary-color-inverted);
    border-color: var(--primary-color-inverted);
    color: var(--primary-color)
}

.wojo.secondary.label {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff
}

.wojo.secondary.basic.label {
    background-color: transparent;
    color: var(--secondary-color)
}

.wojo.secondary.inverted.label {
    background-color: var(--secondary-color-inverted);
    border-color: var(--secondary-color-inverted);
    color: var(--secondary-color)
}

.wojo.positive.label {
    border-color: var(--positive-color);
    background-color: var(--positive-color);
    color: #fff
}

.wojo.positive.basic.label {
    background-color: transparent;
    color: var(--positive-color)
}

.wojo.positive.inverted.label {
    background-color: var(--positive-color-inverted);
    border-color: var(--positive-color-inverted);
    color: var(--positive-color)
}

.wojo.negative.label {
    background-color: var(--negative-color);
    border-color: var(--negative-color);
    color: #fff
}

.wojo.negative.basic.label {
    background-color: transparent;
    color: var(--negative-color)
}

.wojo.negative.inverted.label {
    background-color: var(--negative-color-inverted);
    border-color: var(--negative-color-inverted);
    color: var(--negative-color)
}

.wojo.light.label {
    background-color: var(--light-color);
    border-color: var(--light-color);
    color: var(--body-color)
}

.wojo.light.basic.label {
    background-color: transparent;
    color: var(--light-color)
}

.wojo.light.inverted.label {
    background-color: var(--light-color-inverted);
    border-color: var(--light-color-inverted);
    color: var(--light-color)
}

.wojo.dark.label {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: #fff
}

.wojo.dark.basic.label {
    background-color: transparent;
    color: #fff
}

.wojo.dark.inverted.label {
    background-color: var(--dark-color-inverted);
    border-color: var(--dark-color-inverted);
    color: var(--dark-color)
}

.wojo.alert.label {
    background-color: var(--alert-color);
    border-color: var(--alert-color);
    color: #fff
}

.wojo.alert.basic.label {
    background-color: transparent;
    color: var(--alert-color)
}

.wojo.white.label {
    background-color: #fff;
    border-color: #fff;
    color: var(--primary-color)
}

.wojo.white.basic.label {
    background-color: transparent;
    color: #fff
}

.wojo.transparent.label {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid transparent
}

.wojo.label .icon {
    margin-right: 0.5rem
}

.wojo.right.label .icon {
    margin-left: 0.5rem;
    margin-right: 0
}

.wojo.rounded.label {
    border-radius: 2rem
}

.wojo.circular.label {
    border-radius: 100rem
}

.wojo.initials.label {
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 2rem;
    font-size: .875rem
}

    .wojo.initials.label .icon {
        margin-right: 0
    }

.wojo.empty.label {
    min-width: 0em;
    min-height: 0em;
    overflow: hidden;
    width: .875rem;
    height: .875rem;
    padding: 0
}

.wojo.ring.label {
    border-radius: 100%;
    height: .875rem;
    padding: 0;
    vertical-align: middle;
    width: .875rem
}

    .wojo.ring.label.spaced {
        margin-right: .5rem
    }

    .wojo.ring.label::after {
        background-color: #fff;
        border-radius: 50%;
        content: "";
        height: 0.625rem;
        left: 0.125rem;
        position: absolute;
        top: 0.125rem;
        transition: all 0.3s ease 0s;
        width: 0.625rem
    }

.wojo.link.label {
    cursor: pointer
}

.wojo.simple.label {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: inherit
}

.wojo.label .status {
    position: absolute;
    top: -2px;
    right: -2px;
    width: .813rem;
    height: .813rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 2px solid #ffffff
}

    .wojo.label .status.negative {
        background: var(--negative-color)
    }

    .wojo.label .status.positive {
        background: var(--positive-color)
    }

.wojo.tiny.label {
    font-size: 0.6875rem;
    padding: .250rem .5rem
}

.wojo.tiny.empty.label {
    width: .5rem;
    height: .5rem;
    padding: 0
}

.wojo.small.label {
    font-size: 0.750rem;
    padding: .25rem .5rem
}

.wojo.small.empty.label {
    width: .750rem;
    height: .750rem;
    padding: 0
}

.wojo.label {
    font-size: 0.813rem
}

.wojo.big.label {
    font-size: 0.913rem
}

.wojo.big.initials.label {
    width: calc(2.875rem - 2px);
    height: calc(2.875rem - 2px);
    line-height: calc(2.875rem - 2px)
}

.wojo.large.label {
    font-size: 1rem
}

.wojo.form {
    position: relative;
    max-width: 100%
}

    .wojo.form .field > label {
        display: block;
        margin: 0em 0em 0.5rem 0em;
        color: var(--body-color);
        font-size: 0.813rem;
        font-weight: 700;
        text-transform: uppercase
    }

    .wojo.form .field label .icon.asterisk {
        font-size: .750em;
        vertical-align: middle;
        color: var(--alert-color)
    }

    .wojo.form textarea, .wojo.file > input, .wojo.form input:not([type]), .wojo.form input[type="date"], .wojo.form input[type="datetime-local"], .wojo.form input[type="email"], .wojo.form input[type="number"], .wojo.form input[type="password"], .wojo.form input[type="search"], .wojo.form input[type="tel"], .wojo.form input[type="time"], .wojo.form input[type="text"], .wojo.form input[type="url"] {
        width: 100%;
        font-family: inherit;
        margin: 0em;
        outline: none;
        -webkit-appearance: none;
        tap-highlight-color: rgba(255, 255, 255, 0);
        line-height: 1rem;
        padding: .875rem 1.5rem;
        font-size: 1rem;
        height: calc(1.750rem + 1rem + 2px);
        background: #fff;
        border: 0px solid var(--grey-color-300);
        color: var(--body-color);
        border-radius: .250rem;
        font-weight: 400;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
        transition: all 0.15s ease 0s
    }

        .wojo.form textarea:not([rows]) {
            height: 12em;
            min-height: 8em;
            max-height: 24em
        }

    .wojo.form input.basic {
        border: 1px solid rgba(255, 255, 255, 0);
        border-bottom-color: var(--grey-color-500);
        background: rgba(255, 255, 255, 0);
        border-radius: 0;
        padding: 1rem 0
    }

    .wojo.form textarea:focus, .wojo.form input:not([type]):focus, .wojo.form input[type="date"]:focus, .wojo.form input[type="datetime-local"]:focus, .wojo.form input[type="email"]:focus, .wojo.form input[type="number"]:focus, .wojo.form input[type="password"]:focus, .wojo.form input[type="search"]:focus, .wojo.form input[type="tel"]:focus, .wojo.form input[type="time"]:focus, .wojo.form input[type="text"]:focus, .wojo.form input[type="url"]:focus, .wojo.form input[type="text"]:focus, .wojo.form select:focus {
        color: var(--dark-color);
        border-color: var(--primary-color);
        border-radius: 0.250rem;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102, 126, 234,.5)
    }

    .wojo.form textarea.basic:focus, .wojo.form input.basic:not([type]):focus, .wojo.form input.basic[type="date"]:focus, .wojo.form input.basic[type="datetime-local"]:focus, .wojo.form input.basic[type="email"]:focus, .wojo.form input.basic[type="number"]:focus, .wojo.form input.basic[type="password"]:focus, .wojo.form input.basic[type="search"]:focus, .wojo.form input.basic[type="tel"]:focus, .wojo.form input.basic[type="time"]:focus, .wojo.form input.basic[type="text"]:focus {
        color: var(--dark-color);
        border: 1px solid rgba(255, 255, 255, 0);
        border-bottom-color: var(--primary-color);
        background: rgba(255, 255, 255, 0);
        border-radius: 0;
        box-shadow: none
    }

    .wojo.form ::-webkit-input-placeholder {
        color: var(--grey-color-500)
    }

    .wojo.form :-ms-input-placeholder {
        color: var(--grey-color-500)
    }

    .wojo.form ::-moz-placeholder {
        color: var(--grey-color-500)
    }

    .wojo.form :focus::-webkit-input-placeholder {
        color: var(--grey-color-700)
    }

    .wojo.form :focus:-ms-input-placeholder {
        color: var(--grey-color-700)
    }

    .wojo.form :focus::-moz-placeholder {
        color: var(--grey-color-700)
    }

    .wojo.form input:-webkit-autofill {
        box-shadow: 0px 0px 0px 100px #fff inset;
        border-color: #fff
    }

        .wojo.form input:-webkit-autofill:focus {
            box-shadow: 0px 0px 0px 100px #fff inset;
            border-color: #fff
        }

    .wojo.form select {
        font-family: inherit;
        display: inline-block;
        width: 100%;
        color: var(--dark-color);
        line-height: 1rem;
        padding: 0 1.5rem;
        font-size: 1rem;
        height: 2.750rem;
        border: 0px solid var(--grey-color-300);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
        vertical-align: middle;
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23212529' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1rem center;
        background-size: auto auto;
        background-size: 8px 10px;
        border-radius: 0.250rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
    }

        .wojo.form select.basic {
            border: 1px solid rgba(255, 255, 255, 0);
            border-bottom: 1px solid var(--grey-color-500);
            border-radius: 0;
            padding: 1rem 0;
            background-color: rgba(255, 255, 255, 0)
        }

        .wojo.form select:focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234,.5)
        }

        .wojo.form select option {
            font-size: .913rem
        }

.wojo.file {
    display: flex;
    flex-flow: row wrap;
    position: relative
}

    .wojo.file > input, .wojo.file > div {
        flex: 1 1 0px;
        min-width: 0
    }

    .wojo.file > div {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

        .wojo.file > div .label {
            position: absolute;
            right: .5rem;
            top: 50%;
            font-size: .750rem;
            width: 1rem;
            height: 1rem;
            font-weight: 500;
            border-radius: .250rem;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            background-color: var(--dark-color-shadow);
            box-shadow: 1px 1px 0 0 rgba(255,255,255,0.1)
        }

.wojo.checkbox {
    position: relative;
    padding: 0 0 0 2.5rem;
    text-align: left;
    line-height: 1;
    margin-bottom: 1.5em
}

    .wojo.checkbox.inline {
        display: inline-flex;
        margin-right: 1.5em
    }

        .wojo.checkbox.inline > * {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            max-width: 100%
        }

    .wojo.checkbox label {
        cursor: pointer;
        color: var(--grey-color-500);
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

        .wojo.checkbox label::before, .wojo.checkbox label::after {
            content: '';
            position: absolute;
            top: 50%
        }

    .wojo.checkbox.radio label::before, .wojo.checkbox.radio label::after {
        border-radius: 50%
    }

    .wojo.checkbox label::before {
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        background: #fff;
        border: 2px solid var(--grey-color-300);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .wojo.checkbox label::after {
        left: .1250rem;
        width: 1rem;
        height: 1rem;
        margin: -.5rem 0 0;
        opacity: 0;
        background: var(--primary-color);
        -webkit-transform: translate3d(-20px, 0, 0) scale(0.5);
        transform: translate3d(-20px, 0, 0) scale(0.5);
        transition: all .35s ease
    }

    .wojo.checkbox.radio label::before {
        width: 1.5rem;
        height: 1.5rem
    }

    .wojo.checkbox.radio label::after {
        left: .250rem
    }

    .wojo.checkbox.small label::before {
        width: 1rem;
        height: 1rem
    }

    .wojo.checkbox.small label::after {
        width: 0.75rem;
        height: 0.75rem;
        margin: -.35rem 0 0
    }

    .wojo.checkbox input[type="radio"], .wojo.checkbox input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: -9999px;
        visibility: hidden
    }

        .wojo.checkbox input[type="radio"]:checked + label:after, .wojo.checkbox input[type="checkbox"]:checked + label:after {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
            transition: all .20s ease
        }

.wojo.toggle.checkbox {
    padding: 0 0 0 3.5rem
}

    .wojo.toggle.checkbox label::before, .wojo.toggle.checkbox label::after {
        content: "";
        position: absolute;
        margin: 0;
        outline: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        transition: all 0.3s ease
    }

    .wojo.toggle.checkbox label::before {
        left: 0;
        width: 2.5rem;
        height: .875rem;
        background-color: var(--grey-color-300);
        border-radius: .5rem;
        border: 0
    }

    .wojo.toggle.checkbox label::after {
        left: 0;
        opacity: 1;
        width: 1.250rem;
        height: 1.250rem;
        background-color: #fff;
        border: 1px solid var(--grey-color-300);
        border-radius: 50%;
        box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.1)
    }

    .wojo.toggle.checkbox input[type="radio"]:checked + label:before, .wojo.toggle.checkbox input[type="checkbox"]:checked + label:before {
        background-color: var(--primary-color)
    }

    .wojo.toggle.checkbox input[type="radio"]:checked + label:after, .wojo.toggle.checkbox input[type="checkbox"]:checked + label:after {
        border-color: var(--primary-color);
        -webkit-transform: translate(90%, -50%);
        transform: translate(90%, -50%)
    }

.wojo.checkbox input[type="radio"]:checked + label, .wojo.checkbox input[type="checkbox"]:checked + label {
    color: var(--body-color)
}

.wojo.checkbox.fitted {
    margin-bottom: 0
}

.wavatar-dropzone {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--grey-color-300);
    border-radius: .250rem;
    padding: 0px;
    margin: 0 auto;
    align-items: center;
    transition: all 0.2s ease-in-out
}

    .wavatar-dropzone > div {
        flex: 1 1 0px;
        min-width: 0;
        cursor: pointer
    }

    .wavatar-dropzone img {
        max-width: 150px;
        max-height: 150px;
        vertical-align: middle;
        border-radius: .250em;
        z-index: 3
    }

    .wavatar-dropzone [type="file"] {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        cursor: pointer;
        opacity: 0
    }

    .wavatar-focus, .wavatar-dropzone:hover {
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        box-shadow: 0 3px 9px var(--shadow-color), 3px 4px 8px var(--shadow-color)
    }

.wavatar-accept {
    color: var(--positive-color);
    border: 1px solid var(--positive-color)
}

.wavatar-enter {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color)
}

.wavatar-reject {
    color: var(--negative-color);
    border: 1px solid var(--negative-color)
}

.wojo.color.picker {
    background: #fff;
    position: absolute;
    border-radius: .250rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
    padding: 1rem;
    z-index: 1500;
    transition: all linear .2s
}

    .wojo.color.picker h5 {
        font-size: .750rem;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--body-color);
        margin-bottom: .5rem
    }

    .wojo.color.picker .items {
        display: flex;
        flex-flow: row wrap;
        margin-left: -.250rem
    }

    .wojo.color.picker .wojo.mini.input {
        margin: .5rem 0
    }

    .wojo.color.picker .row {
        margin-top: 1rem
    }

    .wojo.color.picker .wojo.mini.input.error {
        border: 1px solid var(--negative-color)
    }

        .wojo.color.picker .wojo.mini.input.error input {
            color: var(--negative-color)
        }

    .wojo.color.picker .items .item {
        border-radius: .250rem;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        flex: 1 1 0px;
        min-width: 0;
        margin-left: .250rem;
        margin-bottom: .250rem
    }

        .wojo.color.picker .items .item:hover {
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

    .wojo.color.picker .button[data-close] {
        position: absolute;
        right: 0;
        top: 0
    }

    .wojo.color.picker .colorPickDummy {
        background: #fff;
        border: 1px dashed var(--grey-color-300)
    }

.wojo.calendar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    background-color: transparent;
    transition: background-color .2s linear, opacity .2s ease;
    z-index: 1200;
    overflow: hidden
}

    .wojo.calendar.active {
        visibility: visible;
        opacity: 1;
        background-color: rgba(0,0,0,0.75)
    }

    .wojo.calendar.inactive {
        opacity: 0;
        background-color: transparent
    }

    .wojo.calendar .container {
        line-height: normal;
        position: absolute;
        display: flex;
        flex-direction: column;
        left: 50%;
        bottom: 2rem;
        min-width: 280px;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: .250rem;
        -webkit-transform: translateX(-50%) scale(1.05) perspective(1px);
        transform: translateX(-50%) scale(1.05) perspective(1px);
        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
        transition: opacity .25s ease, -webkit-transform .25s ease;
        transition: transform .25s ease, opacity .25s ease;
        transition: transform .25s ease, opacity .25s ease, -webkit-transform .25s ease
    }

    .wojo.calendar.active .container {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1)
    }

    .wojo.calendar .header {
        padding: 1.5rem;
        color: #fff;
        background-color: var(--primary-color)
    }

        .wojo.calendar .header .current.year {
            display: block;
            cursor: pointer;
            font-weight: 500;
            font-size: 1rem
        }

            .wojo.calendar .header .current.year:hover {
                color: #fff
            }

        .wojo.calendar .header .current.date {
            font-size: 1.875rem;
            font-weight: 300
        }

    .wojo.calendar .content {
        position: relative;
        background-color: #fff;
        width: 400px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
        flex: 0 1 auto
    }

        .wojo.calendar .content .prev.link, .wojo.calendar .content .next.link {
            position: absolute;
            top: .5rem;
            left: .875rem;
            display: block;
            text-align: center;
            line-height: 2rem;
            width: 2rem;
            height: 2rem;
            cursor: pointer;
            border-radius: .250rem;
            opacity: 1;
            transition: opacity .25s ease, background-color .25s linear;
            z-index: 2
        }

        .wojo.calendar .content .next.link {
            left: auto;
            right: .875rem
        }

            .wojo.calendar .content .prev.link:hover, .wojo.calendar .content .next.link:hover {
                background-color: var(--grey-color-300)
            }

            .wojo.calendar .content .prev.link:active, .wojo.calendar .content .next.link:active {
                background-color: var(--grey-color-500)
            }

        .wojo.calendar .content .views {
            width: 1200px;
            overflow: hidden;
            opacity: 1;
            transition: opacity .25s ease;
            display: flex;
            flex-flow: row wrap
        }

        .wojo.calendar .content .sections {
            padding: 0 1rem .750rem;
            -webkit-transform: translateX(-100%) perspective(1px);
            transform: translateX(-100%) perspective(1px);
            transition: none;
            flex: 0 0 calc(100% / 3);
            max-width: calc(100% / 3)
        }

            .wojo.calendar .content .sections.animate-left {
                -webkit-transform: translateX(-200%);
                transform: translateX(-200%);
                transition: -webkit-transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
                transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
                transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform .25s cubic-bezier(0.4, 0.0, 0.2, 1)
            }

            .wojo.calendar .content .sections.animate-right {
                -webkit-transform: translateX(0);
                transform: translateX(0);
                transition: -webkit-transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
                transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1);
                transition: transform .25s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform .25s cubic-bezier(0.4, 0.0, 0.2, 1)
            }

    .wojo.calendar .sections .heading {
        text-align: center;
        font-size: .875rem;
        font-weight: 500;
        cursor: pointer;
        padding: 1rem 0
    }

    .wojo.calendar .sections .weekdays {
        display: flex;
        flex-direction: row;
        margin-bottom: .5rem;
        background-color: var(--grey-color-100);
        padding: .5rem 0;
        border-top: 1px solid var(--grey-color-300);
        border-bottom: 1px solid var(--grey-color-300)
    }

        .wojo.calendar .sections .weekdays span {
            text-align: center;
            font-size: .750rem;
            flex: 0 0 Calc(100% / 7);
            max-width: Calc(100% / 7);
            font-weight: 700
        }

    .wojo.calendar .sections .week {
        display: flex;
        flex-direction: row
    }

        .wojo.calendar .sections .week .item {
            flex: 0 0 Calc(100% / 7);
            max-width: Calc(100% / 7);
            text-decoration: none;
            text-align: center;
            font-size: .875rem;
            outline: none;
            cursor: pointer;
            padding: 1.125rem .5rem;
            line-height: 1rem;
            position: relative;
            transition: background-color .2s linear
        }

        .wojo.calendar .sections .week .pm, .wojo.calendar .sections .week .nm {
            color: var(--grey-color-500)
        }

.sections .week .item.disabled {
    cursor: not-allowed;
    color: var(--grey-color-500)
}

.wojo.calendar .sections .week .item:not(.disabled):not(.selected):hover {
    background-color: var(--grey-color-300)
}

.wojo.calendar .sections .week .item:not(.disabled):not(.selected):active {
    background-color: var(--grey-color-500)
}

.wojo.calendar .sections .week .item.current {
    color: var(--primary-color);
    background-color: var(--grey-color-300);
    font-weight: 500
}

.wojo.calendar .sections .week .item.pm, .dudp__cal-dates .item.nm {
    color: var(--grey-color-500)
}

.wojo.calendar .sections .week .item.selected {
    font-weight: normal;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: .250rem
}

    .wojo.calendar .sections .week .item.selected::before, .wojo.calendar .months .month.selected::before {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: 6px solid #fff;
        border-left: 6px solid transparent
    }

.wojo.calendar .content .months {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    opacity: 1;
    -webkit-transform: scale(1) perspective(1px);
    transform: scale(1) perspective(1px);
    transition: opacity .25s ease, -webkit-transform .25s ease;
    transition: transform .25s ease, opacity .25s ease;
    transition: transform .25s ease, opacity .25s ease, -webkit-transform .25s ease
}

.wojo.calendar .months .month-row {
    display: flex;
    flex-direction: row
}

.wojo.calendar .months .month {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border-radius: .250rem;
    padding: 1rem;
    position: relative;
    transition: background-color .2s linear
}

    .wojo.calendar .months .month:hover {
        background-color: var(--grey-color-300)
    }

    .wojo.calendar .months .month:active {
        background-color: var(--grey-color-500)
    }

    .wojo.calendar .months .month.selected {
        font-weight: 500;
        color: #fff;
        background-color: var(--primary-color)
    }

.wojo.calendar .content .years {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    opacity: 1;
    transition: opacity .25s ease;
    overflow-y: scroll;
    overflow-x: hidden
}

.wojo.calendar .years .year {
    display: block;
    padding: .5rem 0;
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s linear
}

    .wojo.calendar .years .year:hover {
        background-color: var(--grey-color-300)
    }

    .wojo.calendar .years .year:active {
        background-color: var(--grey-color-500)
    }

    .wojo.calendar .years .year.selected {
        font-weight: 500;
        font-size: 1.5rem;
        color: #fff;
        background-color: var(--primary-color)
    }

.wojo.calendar .content .actions {
    padding: 0 .875rem .875rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between
}

    .wojo.calendar .content .actions .button {
        font-size: .875rem;
        padding: 0 1rem;
        min-width: 2.5rem;
        text-align: center;
        text-transform: uppercase;
        line-height: 2rem;
        font-weight: 500;
        cursor: pointer;
        color: var(--primary-color);
        border-radius: .250rem;
        border: 0;
        background-color: #fff;
        transition: background-color .2s linear
    }

        .wojo.calendar .content .actions .button.clear {
            color: var(--negative-color)
        }

        .wojo.calendar .content .actions .button.today {
            color: var(--positive-color)
        }

        .wojo.calendar .content .actions .button:hover {
            background-color: var(--grey-color-300)
        }

        .wojo.calendar .content .actions .button:active {
            background-color: var(--grey-color-500)
        }

.wojo.calendar .content .months.is-hidden, .wojo.calendar .content .prev.link.is-hidden, .wojo.calendar .content .next.link.is-hidden, .wojo.calendar .content .views.is-hidden, .wojo.calendar .content .years.is-hidden {
    opacity: 0;
    visibility: hidden
}

.wojo.calendar .content .months.is-out {
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.wojo.calendar .content .views.is-out {
    opacity: 0
}

body[datepicker-display='on'] {
    overflow: hidden
}

.wojo.time.picker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.75);
    transition: background-color .28s ease;
    z-index: 1200
}

    .wojo.time.picker.hidden {
        display: none
    }

    .wojo.time.picker.animate {
        background-color: transparent
    }

    .wojo.time.picker .container {
        position: absolute;
        display: flex;
        flex-direction: column;
        left: 50%;
        bottom: 24px;
        min-width: 280px;
        opacity: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: .250rem;
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
        box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
        transition: opacity .28s ease, -webkit-transform .28s ease;
        transition: transform .28s ease, opacity .28s ease;
        transition: transform .28s ease, opacity .28s ease, -webkit-transform .28s ease;
        overflow: hidden
    }

        .wojo.time.picker .container.animate {
            -webkit-transform: translateX(-50%) scale(1.05);
            transform: translateX(-50%) scale(1.05);
            opacity: 0
        }

    .wojo.time.picker .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        padding: 1.5rem;
        color: rgba(255,255,255,.5);
        text-align: center;
        background-color: var(--primary-color)
    }

        .wojo.time.picker .header > span {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            line-height: 3rem;
            cursor: default
        }

            .wojo.time.picker .header > span:not(.separator):not(.ampm) {
                cursor: pointer;
                margin: 0 .250rem
            }

        .wojo.time.picker .header .hour.active, .wojo.time.picker .header .minute.active {
            color: #fff
        }

        .wojo.time.picker .header .ampm {
            font-size: 1.5rem
        }

    .wojo.time.picker .content {
        position: relative;
        padding: 1.5rem;
        background-color: #fff
    }

        .wojo.time.picker .content .section {
            position: relative;
            width: 300px;
            height: 300px;
            margin-bottom: 1.5rem;
            border-radius: .250rem
        }

            .wojo.time.picker .content .section .button.am, .wojo.time.picker .content .section .button.pm {
                position: absolute;
                bottom: 0;
                z-index: 3
            }

            .wojo.time.picker .content .section .button.am {
                left: 0
            }

            .wojo.time.picker .content .section .button.pm {
                right: 0
            }

            .wojo.time.picker .content .section .dot {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                padding: .375rem;
                background-color: var(--grey-color-300);
                border-radius: 50%
            }

            .wojo.time.picker .content .section .hours, .wojo.time.picker .content .section .minutes {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
                transition: opacity .35s ease, -webkit-transform .35s cubic-bezier(0.4, 0.0, 0.2, 1);
                transition: transform .35s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .35s ease;
                transition: transform .35s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .35s ease, -webkit-transform .35s cubic-bezier(0.4, 0.0, 0.2, 1);
                overflow: hidden
            }

                .wojo.time.picker .content .section .hours.animate {
                    -webkit-transform: scale(1.2);
                    transform: scale(1.2);
                    opacity: 0
                }

                .wojo.time.picker .content .section .minutes.animate {
                    -webkit-transform: scale(.8);
                    transform: scale(.8);
                    opacity: 0
                }

                .wojo.time.picker .content .section .hours.hidden, .wojo.time.picker .content .section .minutes.hidden {
                    display: none
                }

            .wojo.time.picker .content .section .digit {
                position: absolute;
                width: 50%;
                top: 50%;
                left: 0;
                margin-top: -1.5rem;
                -webkit-transform-origin: right center;
                transform-origin: right center;
                z-index: 1
            }

                .wojo.time.picker .content .section .digit span {
                    display: inline-block;
                    width: 3rem;
                    height: 3rem;
                    line-height: 1.5rem;
                    text-align: center;
                    border-radius: .250rem;
                    cursor: pointer;
                    font-size: 1rem;
                    font-weight: 500;
                    transition: background-color .28s, color .14s
                }

                    .wojo.time.picker .content .section .digit span small {
                        line-height: 1rem;
                        display: block;
                        font-size: .750rem;
                        font-weight: 400
                    }

            .wojo.time.picker .content .section .minutes .digit:not(.marker) {
                margin-top: -.5rem;
                height: .750rem
            }

                .wojo.time.picker .content .section .minutes .digit:not(.marker) span {
                    width: .5rem;
                    height: .5rem;
                    line-height: .5rem;
                    margin-left: 2rem;
                    background-color: var(--grey-color-300)
                }

                    .wojo.time.picker .content .section .digit.active span, .wojo.time.picker .content .section .minutes .digit.active:not(.marker) span, .wojo.time.picker .content .section .minutes .digit:not(.marker) span:hover, .wojo.time.picker .content .section .digit span:hover {
                        background-color: var(--primary-color);
                        color: #fff;
                        z-index: 2;
                        -webkit-transform: scale(1.75);
                        transform: scale(1.75)
                    }

            .wojo.time.picker .content .section .minutes .digit.marker {
                margin-top: -.750rem
            }

                .wojo.time.picker .content .section .minutes .digit.marker span {
                    width: 1.5rem;
                    height: 1.5rem;
                    line-height: 1.5rem
                }

    .wojo.time.picker .actions {
        margin: 0 -1rem -1rem;
        text-align: right;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between
    }

        .wojo.time.picker .actions .button {
            font-size: .875rem;
            padding: 0 1rem;
            min-width: 2.5rem;
            text-align: center;
            text-transform: uppercase;
            line-height: 2rem;
            font-weight: 500;
            cursor: pointer;
            color: var(--primary-color);
            border-radius: .250rem;
            border: 0;
            background-color: #fff;
            transition: background-color .2s linear
        }

            .wojo.time.picker .actions .button.cancel {
                color: var(--negative-color)
            }

            .wojo.time.picker .actions .button.now {
                color: var(--positive-color)
            }

            .wojo.time.picker .actions .button:hover {
                background-color: var(--grey-color-300)
            }

            .wojo.time.picker .actions .button:active {
                background-color: var(--grey-color-500)
            }

body[timepicker-display='on'] {
    overflow: hidden
}

.wojo.range, .wojo.range .fill {
    border-radius: .250rem
}

.wojo.range {
    background: var(--grey-color-300);
    position: relative
}

    .wojo.range.horizontal {
        height: .5rem;
        width: 100%
    }

    .wojo.range.vertical {
        width: 20px;
        min-height: 150px;
        max-height: 100%;
        height: 100%
    }

    .wojo.range.disabled {
        opacity: 0.4
    }

    .wojo.range .fill {
        background: var(--primary-color);
        position: absolute
    }

    .wojo.range.horizontal .fill {
        top: 0;
        height: 100%
    }

    .wojo.range.vertical .fill {
        bottom: 0;
        width: 100%
    }

    .wojo.range .handle {
        cursor: pointer;
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
        box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
        transition: background 0.3s ease;
        border-radius: 50%;
        z-index: 2
    }

        .wojo.range .handle:active, .wojo.range.active .handle {
            background: #fff
        }

    .wojo.range.horizontal .handle {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        touch-action: pan-y;
        -ms-touch-action: pan-y
    }

    .wojo.range.vertical .handle {
        left: -10px;
        touch-action: pan-x;
        -ms-touch-action: pan-x
    }

    .wojo.range .counter {
        position: absolute;
        right: 0;
        top: -1.5rem;
        font-weight: 500;
        font-size: .750rem
    }

    .wojo.range .labels {
        width: 100%;
        display: flex;
        padding-top: .5rem;
        justify-content: space-between;
        z-index: 1
    }

        .wojo.range .labels .label {
            font-size: 0.75rem;
            font-weight: 500;
            position: relative;
            padding-top: .5rem
        }

            .wojo.range .labels .label::before {
                content: "";
                height: .5em;
                width: 1px;
                background: var(--dark-color-shadow);
                position: absolute;
                top: 0;
                left: 50%
            }

            .wojo.range .labels .label:first-child::before {
                left: 0
            }

            .wojo.range .labels .label:last-child::before {
                right: 0;
                left: auto
            }

.wojo.small.range, .wojo.small.range .fill {
    border-radius: .188rem
}

    .wojo.small.range.horizontal {
        height: .25rem
    }

    .wojo.small.range .handle {
        width: 1rem;
        height: 1rem
    }

.wojo.loading.form {
    position: relative;
    cursor: default;
    pointer-events: none
}

    .wojo.loading.form:before {
        position: absolute;
        content: '';
        top: 0%;
        left: 0%;
        background: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 100%;
        z-index: 10
    }

    .wojo.loading.form:after {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin: -1.5em 0em 0em -1.5em;
        width: 3em;
        height: 3em;
        -webkit-animation: form-spin 0.6s linear;
        animation: form-spin 0.6s linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        border-radius: 500rem;
        border-color: rgba(0,0,0,.5) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
        border-style: solid;
        border-width: 0.2em;
        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
        visibility: visible;
        z-index: 11
    }

@-webkit-keyframes form-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes form-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

[data-editable=true] {
    position: relative
}

    [data-editable=true]::after {
        content: '';
        position: absolute;
        bottom: -.250rem;
        left: 0;
        width: 100%;
        height: 2px;
        border-bottom: 2px dashed var(--grey-color-500)
    }

.wojo.editable {
    background-color: #fff;
    border: 0;
    -webkit-appearance: none;
    padding: .125rem 1rem !important;
    outline: var(--primary-color) auto 2px;
    outline-offset: 0px
}

.wojo.fields {
    display: flex;
    flex-direction: row;
    margin-left: -2em
}

    .wojo.fields .field {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 2em;
        margin-bottom: 2em
    }

        .wojo.fields .field.auto {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap
        }

.wojo.block.fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    margin-bottom: 0
}

    .wojo.block.fields .field {
        flex: 0 1 auto;
        -ms-grid-row-align: auto;
        align-self: auto;
        min-width: 0;
        padding-left: 0;
        margin-bottom: 2em
    }

.wojo.fields .field.labeled > label {
    margin-bottom: 0;
    text-align: right
}

.wojo.fields .field > p {
    margin-top: 1rem
}

.wojo.fields .field.one.wide {
    flex: 0 0 10%;
    max-width: 10%
}

.wojo.fields .field.two.wide {
    flex: 0 0 20%;
    max-width: 20%
}

.wojo.fields .field.three.wide {
    flex: 0 0 30%;
    max-width: 30%
}

.wojo.fields .field.four.wide {
    flex: 0 0 40%;
    max-width: 40%
}

.wojo.fields .field.five.wide {
    flex: 0 0 50%;
    max-width: 50%
}

.wojo.fields .field.six.wide {
    flex: 0 0 60%;
    max-width: 60%
}

.wojo.fields .field.seven.wide {
    flex: 0 0 70%;
    max-width: 70%
}

.wojo.fields .field.eight.wide {
    flex: 0 0 80%;
    max-width: 80%
}

.wojo.fields .field.nine.wide {
    flex: 0 0 90%;
    max-width: 90%
}

.wojo.inline.fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

    .wojo.inline.fields .field {
        flex: 0 1 auto;
        margin-bottom: 0
    }

.wojo.small.fields {
    margin-left: -1em
}

    .wojo.small.fields .field {
        padding-left: 1em;
        margin-bottom: 1em
    }

.wojo.fields .basic.field {
    margin-bottom: 0
}

.wojo.fields.disabled .field, .wojo.fields .field :disabled {
    pointer-events: none;
    opacity: 0.45
}

.wojo.fields .field.disabled label {
    opacity: 0.45
}

.wojo.fields .field.disabled :disabled {
    opacity: 1
}

.wojo.small.form textarea, .wojo.small.form input:not([type]), .wojo.small.form input[type="date"], .wojo.small.form input[type="datetime-local"], .wojo.small.form input[type="email"], .wojo.small.form input[type="number"], .wojo.small.form input[type="password"], .wojo.small.form input[type="search"], .wojo.small.form input[type="tel"], .wojo.small.form input[type="time"], .wojo.small.form input[type="text"], .wojo.small.form input[type="file"], .wojo.small.form input[type="url"] {
    line-height: .875rem;
    padding: 0 1.5rem;
    font-size: .875rem;
    height: calc(1.25rem + 1rem + 2px)
}

    .wojo.small.form textarea:not([rows]), .wojo.form textarea.small:not([rows]) {
        height: 6em;
        min-height: 4em;
        max-height: 12em;
        padding: 1rem 1.5rem
    }

.wojo.tiny.form textarea:not([rows]), .wojo.form textarea.tiny:not([rows]) {
    height: 3.188em;
    min-height: 3.188em;
    max-height: 12em;
    padding: .5rem 1rem
}

.wojo.small.form input.basic {
    padding: .875rem 0
}

.wojo.small.fields .field {
    margin-bottom: 1rem
}

.wojo.small.form .wojo.select > .counter, .wojo.small.select > .counter, .wojo.small.form select:not(.hideselect) {
    height: calc(1.25rem + 1rem + 2px)
}

    .wojo.small.form .wojo.select > .counter > span, .wojo.small.select > .counter > span {
        font-size: .875rem;
        line-height: .875rem;
        padding: .750rem 1.5rem
    }

.wojo.small.form .wojo.select > .menu > .options li.item, .wojo.small.select > .menu > .options li.item {
    font-size: .875rem
}

.wojo.form {
    font-size: 1rem
}

@media screen and (max-width:48.063em) {
    .wojo.fields {
        display: flex;
        flex-direction: column;
        margin-left: 0
    }

        .wojo.fields .field {
            flex: 0 1 auto;
            max-width: 100%;
            -ms-grid-row-align: stretch;
            align-self: stretch;
            min-width: 0;
            padding-left: 0
        }

            .wojo.fields .field.one.wide, .wojo.fields .field.two.wide, .wojo.fields .field.three.wide, .wojo.fields .field.four.wide, .wojo.fields .field.five.wide, .wojo.fields .field.six.wide, .wojo.fields .field.seven.wide, .wojo.fields .field.eight.wide, .wojo.fields .field.nine.wide {
                flex: 0 0 100%;
                max-width: 100%
            }

            .wojo.fields .field.labeled {
                margin-bottom: 0
            }

                .wojo.fields .field.labeled > label {
                    text-align: left;
                    margin-bottom: .5rem
                }

    .wojo.inline.fields {
        flex-direction: row;
        align-items: center;
        margin-left: -2em
    }

        .wojo.inline.fields .field {
            flex: 0 1 auto;
            padding-left: 2em
        }
}

.wojo.dropdown {
    position: absolute;
    z-index: 500;
    top: -5000px;
    left: -5000px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, 0)scale(.85);
    transform: translate(0, 0)scale(.85);
    transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
    pointer-events: none;
    padding: .5rem;
    border-radius: .250rem;
    background: #fff;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1)
}

    .wojo.dropdown.active {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
        pointer-events: auto
    }

    .wojo.dropdown.static {
        padding: 1rem
    }

    .wojo.dropdown.fixed {
        position: fixed
    }

.wojo.float {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 1rem;
    border-radius: .250rem;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1)
}

    .wojo.float.active {
        display: block
    }

.wojo.dropdown .pointer {
    height: 16px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0;
    -webkit-transform: translate(0px, -16px);
    transform: translate(0px, -16px)
}

    .wojo.dropdown .pointer::after, .wojo.dropdown.top-left .pointer::after, .wojo.dropdown.top-center .pointer::after, .wojo.dropdown.top-right .pointer::after {
        border: 1px solid var(--dark-color-shadow);
        box-shadow: 0 2px 1px 0 var(--dark-color-shadow);
        left: 50%;
        top: 12px;
        background: #fff;
        content: "";
        height: 12px;
        position: absolute;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 12px;
        margin-left: -8px
    }

.wojo.dropdown.top-left .pointer::after {
    left: 0;
    margin-left: 1em
}

.wojo.dropdown.top-right .pointer::after {
    left: auto;
    right: 0;
    margin-left: auto;
    margin-right: 1em
}

.wojo.dropdown.top-left, .wojo.dropdown.top-center, .wojo.dropdown.top-right {
    margin-top: 0.5em
}

.wojo.dropdown.pointing.top-left, .wojo.dropdown.pointing.top-center, .wojo.dropdown.pointing.top-right {
    margin-top: 1em
}

.wojo.dropdown > .item > .icon, .wojo.dropdown > .item > .label, .wojo.dropdown > .item > .flag, .wojo.dropdown > .item > .image, .wojo.dropdown > .item > span, .wojo.dropdown > .item > img {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.dropdown > .item > .icon, .wojo.dropdown > .item > .label, .wojo.dropdown > .item > .flag, .wojo.dropdown > .item > .image, .wojo.dropdown > .item > img {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
    margin-right: 1rem
}

    .wojo.dropdown > .item > .right.icon, .wojo.dropdown > .item > .right.label, .wojo.dropdown > .item > .right.flag, .wojo.dropdown > .item > .right.image, .wojo.dropdown > .item > img.right {
        margin-right: 0;
        margin-left: 1rem
    }

.wojo.dropdown.nowrap {
    white-space: nowrap
}

.wojo.dropdown a.item {
    position: relative;
    cursor: pointer;
    padding: 0.750rem 1.25rem;
    line-height: 1em;
    border-radius: .188em;
    font-size: 1em;
    color: var(--dark-color);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row wrap;
    text-align: left;
    white-space: nowrap;
    align-items: center
}

    .wojo.dropdown a.item:hover {
        background: var(--primary-color);
        color: rgba(255, 255, 255, 0.95)
    }

    .wojo.dropdown a.item.active {
        background-color: var(--primary-color);
        color: #fff;
        pointer-events: none
    }

.wojo.dropdown .divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0em;
    margin: 0.5rem 0em
}

.wojo.dropdown .basic.divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0;
    margin: 0
}

.wojo.dropdown .big.divider {
    margin: 1rem 0em
}

.wojo.dropdown > .header {
    padding: 0.50rem 1.25rem;
    font-size: 1em;
    font-weight: 700;
    text-align: center
}

.wojo.dropdown > .scrolling {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
    padding-right: 1rem
}

.wojo.dropdown.fluid {
    width: calc(100% - 2.5rem)
}

[data-dropdown] {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

    [data-dropdown] > .text {
        padding-right: .5em
    }

.wojo.dropdown a.item.disabled {
    pointer-events: none;
    opacity: .75
}

.wojo.dropdown.small a.item {
    padding: 0.50rem 1rem
}

.wojo.dropdown.mini {
    font-size: 0.750rem
}

.wojo.dropdown.tiny {
    font-size: 0.813rem
}

.wojo.dropdown.small {
    font-size: 0.875rem
}

.wojo.dropdown {
    font-size: 1rem
}

.wojo.input {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border-radius: .250rem;
    border: 0px solid var(--grey-color-300);
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    align-items: stretch;
    transition: all 0.2s ease-in-out
}

    .wojo.input input, .wojo.form .wojo.input input, .wojo.form .wojo.input textarea {
        flex: 1 1 0px;
        min-width: 0;
        border: 0;
        border-radius: .250rem;
        box-shadow: none;
        height: calc(1.875rem + 1rem - 2px)
    }

    .wojo.icon.input > i.icon, .wojo.input .tag.label {
        line-height: 1rem;
        padding: 0 1rem;
        -ms-grid-row-align: center;
        align-self: center
    }

.wojo.action.input > .button, .wojo.icon.input > .button {
    padding: 0 1.875rem;
    flex: 0 1 auto;
    -ms-grid-row-align: auto;
    align-self: auto;
    height: calc(100%-4px)
}

.wojo.action.input > .icon.button, .wojo.icon.input > .icon.button {
    padding: 0 1rem;
    border: 0
}

.wojo.action.input > .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--grey-color-100)
}

    .wojo.action.input > .buttons .wojo.button {
        padding: 0 1rem
    }

.wojo.input > select {
    width: auto;
    box-shadow: none
}

.wojo.basic.input {
    border: 1px solid rgba(255, 255, 255, 0);
    border-bottom-color: var(--grey-color-500);
    background: rgba(255, 255, 255, 0);
    border-radius: 0
}

    .wojo.basic.input input, .wojo.form .wojo.basic.input input, .wojo.form .wojo.basic.input textarea {
        background: rgba(255, 255, 255, 0);
        padding: 1rem 0
    }

.wojo.input .tag.label {
    background-color: var(--primary-color);
    padding: 0.5rem .75rem;
    line-height: .750rem;
    font-weight: 500;
    color: var(--primary-color-inverted);
    white-space: nowrap;
    border-radius: .250rem;
    margin-right: .250rem
}

.wojo.input .tag [data-role="remove"] {
    margin-left: .5rem;
    cursor: pointer
}

    .wojo.input .tag [data-role="remove"]::after {
        content: "x";
        font-weight: 700
    }

.wojo.input.focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234,.5)
}

.wojo.basic.input.focus {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--primary-color)
}

    .wojo.basic.input.focus input:focus {
        background: rgba(255, 255, 255, 0);
        box-shadow: none
    }

.wojo.mini.basic.input input {
    padding: .875rem 0
}

.wojo.form .wojo.mini.input input, .wojo.mini.input input {
    line-height: .750rem;
    padding: .5rem 1rem;
    font-size: .750rem;
    height: calc(1rem + 1rem)
}

.wojo.small.basic.input input {
    padding: .875rem 0
}

.wojo.form .wojo.small.input input, .wojo.small.input input {
    line-height: .875rem;
    padding: .875rem 1.5rem;
    font-size: .875rem;
    height: calc(1.25rem + 1rem + 2px)
}

.wojo.form .wojo.input input, .wojo.input input {
    line-height: 1rem;
    padding: .875rem 1.5rem;
    font-size: 1em;
    height: calc(1.875rem + 1rem)
}

.wojo.button {
    cursor: pointer;
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    outline: none;
    vertical-align: middle;
    background-color: #757575;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    margin: 0;
    padding: .875rem 1.875rem;
    line-height: 1rem;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: .250rem;
    border: 1px solid #757575;
    box-sizing: content-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    position: relative;
    box-shadow: 0 4px 6px rgba(50,50,93,.1), 0 1px 3px rgba(0,0,0,.08)
}

    .wojo.button:hover, .wojo.button:active, .wojo.button:focus {
        color: #fff;
        background: #616161;
        border-color: #616161
    }

    .wojo.button:active, .wojo.button.active {
        outline: 0 none;
        box-shadow: none
    }

.wojo.basic.buttons .button, .wojo.basic.button, .wojo.basic.primary.buttons .button, .wojo.basic.primary.button, .wojo.basic.secondary.buttons .button, .wojo.basic.secondary.button, .wojo.basic.positive.buttons .button, .wojo.basic.positive.button, .wojo.basic.negative.buttons .button, .wojo.basic.negative.button, .wojo.basic.white.buttons .button, .wojo.basic.white.button, .wojo.basic.light.buttons .button, .wojo.basic.light.button, .wojo.basic.dark.buttons .button, .wojo.basic.dark.button, .wojo.simple.buttons .button, .wojo.simple.button, .wojo.simple.primary.buttons .button, .wojo.simple.primary.button, .wojo.simple.secondary.buttons .button, .wojo.simple.secondary.button, .wojo.simple.positive.buttons .button, .wojo.simple.positive.button, .wojo.simple.negative.buttons .button, .wojo.simple.negative.button, .wojo.simple.white.buttons .button, .wojo.simple.white.button, .wojo.simple.light.buttons .button, .wojo.simple.light.button, .wojo.simple.dark.buttons .button, .wojo.simple.dark.button, .wojo.inverted.buttons .button, .wojo.inverted.button, .wojo.inverted.primary.buttons .button, .wojo.inverted.primary.button, .wojo.inverted.secondary.buttons .button, .wojo.inverted.secondary.button, .wojo.inverted.positive.buttons .button, .wojo.inverted.positive.button, .wojo.inverted.negative.buttons .button, .wojo.inverted.negative.button, .wojo.inverted.white.buttons .button, .wojo.inverted.white.button, .wojo.inverted.light.buttons .button, .wojo.inverted.light.button, .wojo.inverted.dark.buttons .button, .wojo.inverted.dark.button {
    background: transparent;
    box-shadow: none;
    color: var(--body-color)
}

.wojo.simple.buttons .button, .wojo.simple.button, .wojo.simple.primary.buttons .button, .wojo.simple.primary.button, .wojo.simple.secondary.buttons .button, .wojo.simple.secondary.button, .wojo.simple.positive.buttons .button, .wojo.simple.positive.button, .wojo.simple.negative.buttons .button, .wojo.simple.negative.button, .wojo.simple.white.buttons .button, .wojo.simple.white.button, .wojo.simple.light.buttons .button, .wojo.simple.light.button, .wojo.simple.dark.buttons .button, .wojo.simple.dark.button {
    box-shadow: none;
    border-color: transparent
}

.wojo.basic.button:hover, .wojo.basic.button.active, .wojo.basic.button:active {
    color: #fff;
    background: #616161;
    border-color: #616161
}

.wojo.primary.buttons .button, .wojo.primary.button {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

    .wojo.primary.buttons .button:hover, .wojo.primary.buttons .button:active, .wojo.primary.buttons .button:focus, .wojo.primary.button:hover, .wojo.primary.button:active, .wojo.primary.button:focus {
        color: #fff;
        background: var(--primary-color-hover);
        border-color: var(--primary-color-hover)
    }

    .wojo.primary.buttons .button:active, .wojo.primary.buttons .button.active, .wojo.primary.button:active, .wojo.primary.button.active {
        box-shadow: none
    }

.wojo.simple.primary.buttons .button, .wojo.simple.primary.button {
    color: var(--primary-color);
    border-color: transparent
}

    .wojo.simple.primary.button:hover, .wojo.simple.primary.button.active, .wojo.simple.primary.button:active {
        color: var(--primary-color-hover);
        background: transparent
    }

.wojo.basic.primary.buttons .button, .wojo.basic.primary.button {
    color: var(--primary-color)
}

    .wojo.basic.primary.button:hover, .wojo.basic.primary.button.active, .wojo.basic.primary.button:active {
        color: #fff
    }

.wojo.inverted.primary.buttons .button, .wojo.inverted.primary.button {
    background-color: var(--primary-color-inverted);
    color: var(--primary-color);
    border-color: var(--primary-color-inverted)
}

    .wojo.inverted.primary.buttons .button.active, .wojo.inverted.primary.buttons .button:hover, .wojo.inverted.primary.button:hover, .wojo.inverted.primary.button.active, .wojo.inverted.primary.button:active {
        color: #fff;
        background: var(--primary-color);
        border-color: var(--primary-color)
    }

.wojo.secondary.buttons .button, .wojo.secondary.button {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color)
}

    .wojo.secondary.buttons .button:hover, .wojo.secondary.buttons .button:active, .wojo.secondary.buttons .button:focus, .wojo.secondary.button:hover, .wojo.secondary.button:active, .wojo.secondary.button:focus {
        color: #fff;
        background: var(--secondary-color-hover);
        border-color: var(--secondary-color-hover)
    }

    .wojo.secondary.buttons .button:active, .wojo.secondary.buttons .button.active, .wojo.secondary.button:active, .wojo.secondary.button.active {
        box-shadow: none
    }

.wojo.simple.secondary.buttons .button, .wojo.simple.secondary.button {
    color: var(--secondary-color);
    border-color: transparent
}

    .wojo.simple.secondary.button:hover, .wojo.simple.secondary.button.active, .wojo.simple.secondary.button:active {
        color: var(--secondary-color-hover);
        background: transparent
    }

.wojo.basic.secondary.buttons .button, .wojo.basic.secondary.button {
    border-color: var(--secondary-color);
    color: var(--secondary-color)
}

    .wojo.basic.secondary.button:hover, .wojo.basic.secondary.button.active, .wojo.basic.secondary.button:active {
        color: #fff
    }

.wojo.inverted.secondary.buttons .button, .wojo.inverted.secondary.button {
    background-color: var(--secondary-color-inverted);
    color: var(--secondary-color);
    border-color: var(--secondary-color-inverted)
}

    .wojo.inverted.secondary.buttons .button.active, .wojo.inverted.secondary.buttons .button:hover, .wojo.inverted.secondary.button:hover, .wojo.inverted.secondary.button.active, .wojo.inverted.secondary.button:active {
        color: #fff;
        background: var(--secondary-color);
        border-color: var(--secondary-color)
    }

.wojo.positive.buttons .button, .wojo.positive.button {
    background-color: var(--positive-color);
    color: #fff;
    border-color: var(--positive-color)
}

    .wojo.positive.buttons .button:hover, .wojo.positive.buttons .button:active, .wojo.positive.buttons .button:focus, .wojo.positive.button:hover, .wojo.positive.button:active, .wojo.positive.button:focus {
        color: #fff;
        background: var(--positive-color-hover);
        border-color: var(--positive-color-hover)
    }

    .wojo.positive.buttons .button:active, .wojo.positive.buttons .button.active, .wojo.positive.button:active, .wojo.positive.button.active {
        box-shadow: none
    }

.wojo.simple.positive.buttons .button, .wojo.simple.positive.button {
    color: var(--positive-color-hover);
    border-color: transparent
}

    .wojo.simple.positive.button:hover, .wojo.simple.positive.button.active, .wojo.simple.positive.button:active {
        color: var(--positive-color-hover);
        background: transparent
    }

.wojo.basic.positive.buttons .button, .wojo.basic.positive.button {
    border-color: var(--positive-color-hover);
    color: var(--positive-color-hover)
}

    .wojo.basic.positive.button:hover, .wojo.basic.positive.button.active, .wojo.basic.positive.button:active {
        color: #fff
    }

.wojo.inverted.positive.buttons .button, .wojo.inverted.positive.button {
    background-color: var(--positive-color-inverted);
    color: var(--positive-color);
    border-color: var(--positive-color-inverted)
}

    .wojo.inverted.positive.buttons .button.active, .wojo.inverted.positive.buttons .button:hover, .wojo.inverted.positive.button:hover, .wojo.inverted.positive.button.active, .wojo.inverted.positive.button:active {
        color: #fff;
        background: var(--positive-color);
        border-color: var(--positive-color)
    }

.wojo.negative.buttons .button, .wojo.negative.button {
    background-color: var(--negative-color);
    color: #fff;
    border-color: var(--negative-color)
}

    .wojo.negative.buttons .button:hover, .wojo.negative.buttons .button:active, .wojo.negative.buttons .button:focus, .wojo.negative.button:hover, .wojo.negative.button:active, .wojo.negative.button:focus {
        color: #fff;
        background: var(--negative-color-hover);
        border-color: var(--negative-color-hover)
    }

    .wojo.negative.buttons .button:active, .wojo.negative.buttons .button.active, .wojo.negative.button:active, .wojo.negative.button.active {
        box-shadow: none
    }

.wojo.simple.negative.buttons .button, .wojo.simple.negative.button {
    color: var(--negative-color-hover);
    border-color: transparent
}

    .wojo.simple.negative.button:hover, .wojo.simple.negative.button.active, .wojo.simple.negative.button:active {
        color: var(--negative-color-hover);
        background: transparent
    }

.wojo.basic.negative.buttons .button, .wojo.basic.negative.button {
    border-color: var(--negative-color-hover);
    color: var(--negative-color-hover)
}

    .wojo.basic.negative.button:hover, .wojo.basic.negative.button.active, .wojo.basic.negative.button:active {
        color: #fff
    }

.wojo.inverted.negative.buttons .button, .wojo.inverted.negative.button {
    background-color: var(--negative-color-inverted);
    color: var(--negative-color);
    border-color: var(--negative-color-inverted)
}

    .wojo.inverted.negative.buttons .button.active, .wojo.inverted.negative.buttons .button:hover, .wojo.inverted.negative.button:hover, .wojo.inverted.negative.button.active, .wojo.inverted.negative.button:active {
        color: #fff;
        background: var(--negative-color);
        border-color: var(--negative-color)
    }

.wojo.light.buttons .button, .wojo.light.button {
    background-color: var(--light-color);
    color: var(--body-color);
    border-color: var(--light-color)
}

    .wojo.light.buttons .button:hover, .wojo.light.buttons .button:active, .wojo.light.buttons .button:focus, .wojo.light.buttons .button.active, .wojo.light.button:hover, .wojo.light.button:active, .wojo.light.button:focus {
        color: var(--body-color);
        background: var(--light-color-hover);
        border-color: var(--light-color-hover)
    }

    .wojo.light.buttons .button:active, .wojo.light.buttons .button.active, .wojo.light.button:active, .wojo.light.button.active {
        box-shadow: none
    }

.wojo.simple.light.buttons .button, .wojo.simple.light.button {
    color: var(--light-color);
    border-color: transparent
}

    .wojo.simple.light.button:hover, .wojo.simple.light.button.active, .wojo.simple.light.button:active {
        color: var(--light-color-hover);
        background: transparent
    }

.wojo.basic.light.buttons .button, .wojo.basic.light.button {
    border-color: var(--light-color);
    color: var(--body-color)
}

    .wojo.basic.light.button:hover, .wojo.basic.light.button.active, .wojo.basic.light.button:active {
        color: var(--body-color)
    }

.wojo.inverted.light.buttons .button, .wojo.inverted.light.button {
    background-color: var(--light-color-inverted);
    color: var(--light-color);
    border-color: var(--light-color-inverted)
}

    .wojo.inverted.light.buttons .button.active, .wojo.inverted.light.buttons .button:hover, .wojo.inverted.light.button:hover, .wojo.inverted.light.button.active, .wojo.inverted.light.button:active {
        color: #fff;
        background: var(--light-color);
        border-color: var(--light-color)
    }

.wojo.dark.buttons .button, .wojo.dark.button {
    background-color: var(--dark-color);
    color: #fff;
    border-color: var(--dark-color)
}

    .wojo.dark.buttons .button:hover, .wojo.dark.buttons .button:active, .wojo.dark.buttons .button:focus, .wojo.dark.button:hover, .wojo.dark.button:active, .wojo.dark.button:focus {
        color: #fff;
        background: var(--dark-color-hover);
        border-color: var(--dark-color-hover)
    }

    .wojo.dark.buttons .button:active, .wojo.dark.buttons .button.active, .wojo.dark.button:active, .wojo.dark.button.active {
        box-shadow: none
    }

.wojo.simple.dark.buttons .button, .wojo.simple.dark.button {
    color: var(--dark-color);
    border-color: transparent
}

    .wojo.simple.dark.button:hover, .wojo.simple.dark.button.active, .wojo.simple.dark.button:active {
        color: var(--dark-color-hover);
        background: transparent
    }

.wojo.basic.dark.buttons .button, .wojo.basic.dark.button {
    border-color: var(--dark-color);
    color: var(--dark-color)
}

    .wojo.basic.dark.button:hover, .wojo.basic.dark.button.active, .wojo.basic.dark.button:active {
        color: #fff
    }

.wojo.inverted.dark.buttons .button, .wojo.inverted.dark.button {
    background-color: var(--dark-color-inverted);
    color: var(--dark-color);
    border-color: var(--dark-color-inverted)
}

    .wojo.inverted.dark.buttons .button.active, .wojo.inverted.dark.buttons .button:hover, .wojo.inverted.dark.button:hover, .wojo.inverted.dark.button.active, .wojo.inverted.dark.button:active {
        color: #fff;
        background: var(--dark-color);
        border-color: var(--dark-color)
    }

.wojo.white.buttons .button, .wojo.white.button {
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(50,50,93,.11), 0 1px 1px rgba(0,0,0,.08);
    color: var(--primary-color);
    border-color: #fff
}

    .wojo.white.buttons .button:hover, .wojo.white.buttons .button:active, .wojo.white.buttons .button:focus, .wojo.white.button:hover, .wojo.white.button:active, .wojo.white.button:focus {
        background-color: #fff;
        border-color: #fff;
        box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)
    }

    .wojo.white.buttons .button:active, .wojo.white.buttons .button.active, .wojo.white.button:active, .wojo.white.button.active {
        box-shadow: 0 0 0 0 transparent
    }

.wojo.basic.white.buttons .button, .wojo.basic.white.button {
    border-color: #fff;
    color: #fff
}

    .wojo.basic.white.button:hover, .wojo.basic.white.button.active, .wojo.basic.white.button:active {
        color: var(--primary-color)
    }

.wojo.transparent.buttons .button, .wojo.transparent.button {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: transparent
}

    .wojo.transparent.buttons .button:hover, .wojo.transparent.buttons .button:active, .wojo.transparent.buttons .button:focus, .wojo.transparent.button:active, .wojo.transparent.button:focus {
        background: rgba(255,255,255,0.4)
    }

.wojo.fluid.button, .wojo.fluid.buttons {
    display: flex;
    margin: 0
}

    .wojo.fluid.buttons .button {
        flex: 1 1 0px;
        min-width: 0
    }

.wojo.fluid.labeled.button span {
    flex: 1 1 0px
}

button.wojo.fluid.button {
    width: calc(100% - 3.75rem - 2px)
}

.wojo.icon.button {
    margin: 0;
    line-height: 1rem;
    padding: .875rem;
    font-size: 1rem
}

    .wojo.icon.button .icon {
        width: 1rem
    }

.wojo.button:not(.icon) .icon {
    margin-right: 1rem
}

.wojo.right.button:not(.labeled):not(.icon) .icon {
    margin-right: 0;
    margin-left: 1rem
}

.wojo.labeled.button {
    padding: 0
}

    .wojo.labeled.button span, .wojo.labeled.button .icon {
        flex: 0 1 auto;
        -ms-grid-row-align: auto;
        align-self: auto
    }

    .wojo.labeled.button span {
        padding: .875rem 1.875rem
    }

    .wojo.labeled.button .icon {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: .875rem;
        background-color: rgba(50,50,93,.1);
        box-shadow: 1px 0 0 0 rgba(50,50,93,.2)
    }

.wojo.right.labeled.button .icon {
    box-shadow: -1px 0 0 0 rgba(50,50,93,.2)
}

.wojo.buttons {
    display: inline-flex;
    flex-direction: row
}

    .wojo.buttons .button {
        flex: 1 0 auto;
        margin: 0em;
        border-radius: 0em;
        box-shadow: none
    }

        .wojo.buttons .button:first-child {
            border-radius: .250rem 0 0 .250rem
        }

        .wojo.buttons .button:last-child {
            border-radius: 0 .250rem .250rem 0
        }

.wojo.rounded.buttons .button:first-child {
    border-radius: 2rem 0 0 2rem
}

.wojo.rounded.buttons .button:last-child {
    border-radius: 0 2rem 2rem 0
}

.wojo.button .status {
    position: absolute;
    top: -2px;
    right: -2px;
    width: .813rem;
    height: .813rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 2px solid #ffffff
}

    .wojo.button .status.negative {
        background: var(--negative-color)
    }

    .wojo.button .status.positive {
        background: var(--positive-color)
    }

.wojo.circular.button {
    border-radius: 100rem
}

.wojo.compact.buttons, .wojo.compact.button {
    padding: .750rem 1rem
}

.wojo.rounded.buttons, .wojo.rounded.button {
    border-radius: 2.5rem
}

.wojo.spaced.button {
    margin-right: 1rem
}

.wojo.passive.button {
    cursor: default;
    pointer-events: none
}

.wojo.attached.buttons, .wojo.attached.button {
    position: absolute;
    z-index: 2
}

.wojo.attached.top.buttons, .wojo.attached.top.button {
    top: 0
}

.wojo.attached.bottom.buttons, .wojo.attached.bottom.button {
    bottom: 0
}

.wojo.attached.left.buttons, .wojo.attached.left.button {
    left: 0
}

.wojo.attached.right.buttons, .wojo.attached.right.button {
    right: 0
}

.wojo.attached.middle.buttons, .wojo.attached.middle.button {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.wojo.attached.spaced.top.buttons, .wojo.attached.spaced.top.button {
    top: 1rem
}

.wojo.attached.spaced.right.buttons, .wojo.attached.spaced.right.button {
    right: 1rem
}

.wojo.attached.spaced.left.buttons, .wojo.attached.spaced.left.button {
    left: 1rem
}

.wojo.attached.outside.top.buttons, .wojo.attached.outside.top.button {
    top: -1rem
}

.wojo.attached.outside.right.buttons, .wojo.attached.outside.right.button {
    right: -1rem
}

.wojo.attached.outside.left.buttons, .wojo.attached.outside.left.button {
    left: -1rem
}

.wojo.buttons .disabled.button, .wojo.disabled.button, .wojo.button:disabled, .wojo.disabled.button:hover, .wojo.disabled.active.button {
    cursor: default;
    opacity: 0.45;
    box-shadow: none;
    pointer-events: none
}

.wojo.loading.loading.button {
    z-index: 1;
    cursor: default;
    color: transparent;
    opacity: 1;
    pointer-events: none;
    transition: all 0s linear, opacity 0.1s ease
}

.wojo.loading.button::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: calc(-1.5rem / 2);
    margin-left: calc(-1.5rem / 2);
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,.1);
    border-top-color: #fff;
    -webkit-animation: spinner .6s linear infinite;
    animation: spinner .6s linear infinite
}

.wojo.small.loading.button::after {
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    margin-left: -.5rem;
    border: 2px solid rgba(0,0,0,.1);
    border-top-color: #fff
}

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.wojo.relaxed.button {
    padding: .875rem 2.5rem
}

.wojo.very.relaxed.button {
    padding: .875rem 4rem
}

.wojo.mini.buttons .button, .wojo.mini.button {
    font-size: .750rem;
    padding: .50rem 1rem;
    line-height: .750rem
}

    .wojo.mini.button .icon {
        font-size: 1rem
    }

button.wojo.mini.fluid.button {
    width: calc(100% - 2rem - 2px)
}

.wojo.mini.circular.button, .wojo.mini.icon.button {
    padding: .375rem
}

.wojo.small.buttons .button, .wojo.small.button {
    font-size: .875rem;
    padding: .625rem 1.250rem
}

button.wojo.small.fluid.button {
    width: calc(100% - 2.5rem - 2px)
}

.wojo.small.circular.button, .wojo.small.icon.button {
    padding: .625rem
}

.wojo.buttons .button, .wojo.button {
    font-size: 1rem
}

.wojo.big.buttons .button, .wojo.big.button {
    font-size: 1.25rem;
    padding: 1em 2em
}

.wojo.big.circular.button {
    padding: 1.25rem
}

.wojo.huge.buttons .button, .wojo.huge.button {
    font-size: 1.5rem;
    padding: 1.25em 2.50em
}

.wojo.huge.circular.button {
    padding: 1.5rem
}

.wojo.massive.buttons .button, .wojo.massive.button {
    font-size: 1.5rem;
    padding: 1.5em 3em
}

.wojo.massive.circular.button {
    padding: 2.5rem
}

.wojo.compact.button {
    padding: .5rem 1rem
}

@media screen and (max-width:30em) {
    .wojo.stacked.button {
        display: flex;
        flex: 1 1 0px;
        min-width: 0;
        margin-bottom: .250rem
    }

    .wojo.buttons.stacked {
        display: flex;
        flex-direction: column
    }

        .wojo.buttons.stacked .button {
            flex: 1 1 0px;
            min-width: 0;
            border-radius: .250rem;
            justify-content: flex-start;
            margin-bottom: .250rem
        }

            .wojo.buttons.stacked .button:first-child, .wojo.buttons.stacked .button:last-child {
                border-radius: .250rem
            }
}

.wojo.message {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    padding: 1rem 1.5rem;
    background-color: var(--grey-color-100);
    border-radius: .250rem;
    margin-bottom: 1rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 0 2rem 0 var(--shadow-color)
}

    .wojo.message .header {
        font-size: 1rem;
        font-weight: 700
    }

.wojo.icon.message {
    display: flex;
    flex-flow: row wrap
}

    .wojo.icon.message > .icon:not(.close), .wojo.image.message > .image {
        display: block;
        flex: 0 0 auto;
        margin-right: 1rem
    }

    .wojo.icon.message > .icon:not(.close) {
        width: auto
    }

    .wojo.icon.message > .content {
        display: block;
        flex: 1 1 auto
    }

.wojo.message > .close.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: .750em;
    right: .5em;
    opacity: .7;
    transition: opacity .1s ease
}

.wojo.compact.message {
    display: inline-flex
}

.wojo.primary.message {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color-inverted)
}

.wojo.secondary.message {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color-inverted)
}

.wojo.positive.message {
    background-color: var(--positive-color);
    border: 1px solid var(--positive-color);
    color: var(--positive-color-inverted)
}

.wojo.negative.message {
    background-color: var(--negative-color);
    border: 1px solid var(--negative-color);
    color: var(--negative-color-inverted)
}

.wojo.primary.inverted.message {
    background-color: var(--primary-color-inverted);
    border: 1px solid var(--primary-color);
    color: var(--primary-color)
}

.wojo.secondary.inverted.message {
    background-color: var(--secondary-color-inverted);
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color)
}

.wojo.positive.inverted.message {
    background-color: var(--positive-color-inverted);
    border: 1px solid var(--positive-color);
    color: var(--positive-color)
}

.wojo.negative.inverted.message {
    background-color: var(--negative-color-inverted);
    border: 1px solid var(--negative-color);
    color: var(--negative-color)
}

#wojo-overlay {
    position: fixed;
    width: auto;
    right: 1rem;
    top: 2rem;
    z-index: 5000
}

.wojo.notice {
    max-width: 100%;
    min-width: 300px;
    position: relative;
    border-radius: .250rem;
    color: #fff;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)
}

    .wojo.notice .content {
        padding: 1.25rem;
        margin-left: 3rem
    }

    .wojo.notice:before {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        position: absolute;
        border-radius: .250rem;
        left: 1rem;
        top: -1.25rem;
        font-family: 'WojoIcons';
        content: "\e923";
        background-color: #fff;
        text-align: center;
        box-shadow: 0px 10px 30px -12px rgba(0, 0, 0, 0.42), 0px 4px 25px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px -5px rgba(0, 0, 0, 0.2);
        z-index: 3
    }

    .wojo.notice .wojo.progress, .wojo.notice .wojo.progress.attached .bar {
        border-radius: .250rem
    }

    .wojo.notice span {
        font-size: 1rem;
        display: block;
        font-weight: 600
    }

    .wojo.notice .text, .wojo.notice p {
        font-size: .875rem;
        font-weight: 400
    }

    .wojo.notice a.notice-close {
        opacity: 0;
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        color: rgba(255,255,255,0.8)
    }

    .wojo.notice:hover a.notice-close {
        opacity: 1
    }

    .wojo.notice.success {
        background-color: var(--positive-color-hover);
        color: var(--positive-color-inverted)
    }

        .wojo.notice.success:before {
            color: var(--positive-color)
        }

    .wojo.notice.info {
        background-color: var(--info-color-hover);
        color: var(--info-color-inverted)
    }

        .wojo.notice.info:before {
            color: var(--info-color)
        }

    .wojo.notice.alert {
        background-color: var(--alert-color-hover);
        color: var(--alert-color-inverted)
    }

        .wojo.notice.alert:before {
            color: var(--alert-color)
        }

    .wojo.notice.error {
        background-color: var(--negative-color-hover);
        color: var(--negative-color-inverted)
    }

        .wojo.notice.error:before {
            color: var(--negative-color)
        }

.wojo.notes.content {
    font-family: 'Kalam';
    position: relative;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, transparent 1px) 0 36px;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, transparent 1px) 0 36px;
    background: linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, transparent 1px) 0 36px;
    background-size: 100% 36px;
    font-size: 1.5rem;
    line-height: 2.250rem;
    margin: 0;
    min-height: 628px;
    color: rgba(0, 0, 0, 0.85);
    padding: 0;
    padding-left: 2rem;
    font-weight: 400
}

    .wojo.notes.content p {
        margin: 0
    }

    .wojo.notes.content::before, .wojo.notes.content::after {
        content: "";
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        position: absolute;
        top: -.5rem;
        left: 1rem;
        height: 100%
    }

    .wojo.notes.content::after {
        left: 1.25rem
    }

.wojo.heading.message {
    box-shadow: none;
    border: 0;
    margin: 0
}

.wojo.basic.message {
    padding: 0
}

.wojo.simple.message {
    border: 0;
    box-shadow: none
}

.wojo.transparent.message {
    background-color: transparent
}

.wojo.attached.message {
    margin: 0
}

.wojo.top.attached.message {
    margin-top: 0
}

.wojo.bottom.attached.message {
    margin-bottom: 0
}

.wojo.small.message {
    font-size: .875rem
}

.wojo.message {
    font-size: 1rem
}

.wojo.image {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    background-color: transparent
}

img.wojo.image {
    display: block
}

.wojo.image svg, .wojo.image img {
    display: block;
    max-width: 100%;
    height: auto
}

.wojo.inline.image, .wojo.inline.image svg, .wojo.inline.image img {
    display: inline-block
}

.wojo.rounded.images .image, .wojo.rounded.images img, .wojo.rounded.image img, .wojo.rounded.image svg, .wojo.rounded.image {
    border-radius: 0.250rem
}

.wojo.rounded.left.images .image, .wojo.rounded.left.images img, .wojo.rounded.left.image img, .wojo.rounded.left.image svg, .wojo.rounded.left.image {
    border-radius: 0.250rem 0 0 0.250rem
}

.wojo.rounded.right.images .image, .wojo.rounded.right.images img, .wojo.rounded.right.image img, .wojo.rounded.right.image svg, .wojo.rounded.right.image {
    border-radius: 0 0.250rem 0.250rem 0
}

.wojo.circular.images .image, .wojo.circular.images img, .wojo.circular.image img, .wojo.circular.image svg, .wojo.circular.image {
    border-radius: 500rem;
    overflow: hidden
}

.wojo.shadow.images .image, .wojo.shadow.images img, .wojo.shadow.image img, .wojo.shadow.image svg, .wojo.shadow.image {
    box-shadow: 0px 2px 3px var(--dark-color-shadow)
}

.wojo.boxed.images .image, .wojo.boxed.images img, .wojo.boxed.image img, .wojo.boxed.image svg, .wojo.boxed.image {
    border: 1px solid var(--light-color)
}

.wojo.framed.images .image, .wojo.framed.images img, .wojo.framed.image img, .wojo.framed.image svg, .wojo.framed.image {
    border: 1px solid var(--light-color);
    padding: 1rem
}

.wojo.avatar.images .image, .wojo.avatar.images img, .wojo.avatar.images svg, .wojo.avatar.image img, .wojo.avatar.image svg, .wojo.avatar.image {
    width: 3em;
    height: 3em;
    border-radius: 500rem
}

.wojo.category.images .image, .wojo.category.images img, .wojo.category.image img, .wojo.category.image {
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 2rem;
    box-sizing: content-box;
    font-size: .875rem;
    border-radius: 500rem;
    box-shadow: 0 4px 6px rgba(50,50,93,.1), 0 1px 3px rgba(0,0,0,.1);
    border: 1px solid #fff
}

.wojo.center.image {
    margin: 0 auto;
    display: block
}

.wojo.tiny.images .image, .wojo.tiny.images img, .wojo.tiny.images svg, .wojo.tiny.image {
    width: 24px
}

.wojo.mini.images .image, .wojo.mini.images img, .wojo.mini.images svg, .wojo.mini.image {
    width: 32px
}

.wojo.default.images .image, .wojo.default.images img, .wojo.default.images svg, .wojo.default.image {
    width: 48px
}

.wojo.small.images .image, .wojo.small.images img, .wojo.small.images svg, .wojo.small.image {
    width: 64px
}

.wojo.notification.images img, .wojo.notification.images svg, .wojo.notification.image {
    width: 96px
}

.wojo.badge.images .image, .wojo.badge.images img, .wojo.badge.images svg, .wojo.badge.image {
    width: 112px
}

.wojo.normal.images .image, .wojo.normal.images img, .wojo.normal.images svg, .wojo.normal.image {
    width: 128px
}

.wojo.medium.images .image, .wojo.medium.images img, .wojo.medium.images svg, .wojo.medium.image {
    width: 160px
}

.wojo.large.images .image, .wojo.large.images img, .wojo.large.images svg, .wojo.large.image {
    width: 256px
}

.wojo.big.images .image, .wojo.big.images img, .wojo.big.images svg, .wojo.big.image {
    width: 448px
}

.wojo.huge.images .image, .wojo.huge.images img, .wojo.huge.images svg, .wojo.huge.image {
    width: 512px
}

.wojo.massive.images .image, .wojo.massive.images img, .wojo.massive.images svg, .wojo.massive.image {
    width: 640px
}

.wojo.fluid.image, .wojo.fluid.image img, .wojo.fluid.image svg, .wojo.fluid.images, .wojofluid.images img, .wojo.fluid.images svg {
    display: block;
    width: 100%;
    height: auto
}

ul.wojo.list, ol.wojo.list {
    list-style-type: none;
    margin: 1rem 0;
    padding: 0
}

    ul.wojo.list li, ol.wojo.list li {
        list-style-type: none;
        list-style-position: outside;
        padding: .125rem 0
    }

    ul.wojo.list ul, ol.wojo.list ol, ul ul, ol ol {
        margin: 0;
        padding: 0 0 0 .750rem
    }

.wojo.list .item {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    margin-bottom: .250rem
}

.wojo.list.middle.aligned .item {
    align-items: center
}

.wojo.list .item > .content, .wojo.list .item > .icon {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.list .item > .icon, .wojo.list .item > b.index {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-right: 1rem
}

.wojo.list .item > .image {
    margin-right: 1rem
}

.wojo.list .item .icon:only-child, .wojo.list .item .image:only-child {
    -ms-grid-row-align: center;
    align-self: center
}

.wojo.list .item .header {
    line-height: 1rem;
    margin-bottom: .250rem;
    font-weight: 600
}

.wojo.list .item .description {
    font-size: .875rem
}

.wojo.horizontal.list {
    display: inline-flex;
    flex-flow: row wrap
}

    .wojo.horizontal.list > .item {
        margin-left: 1rem;
        align-items: center
    }

    .wojo.horizontal.list:not(.celled):not(.bulleted) > .item:first-child {
        margin-left: 0em;
        padding-left: 0em
    }

.wojo.divided.list:not(.horizontal) > .item {
    border-top: 1px solid var(--grey-color-300)
}

    .wojo.divided.list:not(.horizontal) > .item:first-child {
        border-top: none
    }

.wojo.divided.horizontal.list > .item, .wojo.celled.horizontal.list > .item {
    padding-left: 1rem
}

    .wojo.divided.horizontal.list > .item::before, .wojo.celled.horizontal.list > .item::before, .wojo.horizontal.celled.list > .item:last-child::after {
        border-left: 1px solid var(--grey-color-300);
        height: 50%;
        left: 0;
        top: 25%;
        width: 1px;
        position: absolute;
        content: ''
    }

.wojo.horizontal.divided.list > .item:first-child::before {
    border: none
}

.wojo.celled.list:not(.horizontal) > .item {
    border-top: 1px solid var(--grey-color-300);
    padding: 0.5rem
}

    .wojo.celled.list:not(.horizontal) > .item:last-child {
        border-bottom: 1px solid var(--grey-color-300)
    }

.wojo.horizontal.celled.list > .item:last-child::after {
    left: auto;
    right: -1rem
}

.wojo.celled.horizontal.list > .item:first-child {
    margin-left: 0
}

.wojo.relaxed.list:not(.horizontal) > .item:not(:first-child) {
    padding-top: 0.5rem
}

.wojo.relaxed.list:not(.horizontal) > .item:not(:last-child) {
    padding-bottom: 0.5rem
}

.wojo.horizontal.relaxed.list .list > .item:not(:first-child), .wojo.horizontal.relaxed.list > .item:not(:first-child) {
    padding-left: 1rem
}

.wojo.horizontal.relaxed.list .list > .item:not(:last-child), .wojo.horizontal.relaxed.list > .item:not(:last-child) {
    padding-right: 1rem
}

.wojo[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
    padding-top: 0.875em
}

.wojo[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
    padding-bottom: 0.875em
}

.wojo.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), .wojo.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
    padding-left: 1.5rem
}

.wojo.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), .wojo.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
    padding-right: 1.5rem
}

.wojo.fluid.list .item {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 0
}

    .wojo.fluid.list .item > .content {
        flex: 1 1 0px;
        min-width: 0
    }

        .wojo.fluid.list .item > .content.auto {
            flex: 0 0 auto;
            width: auto;
            max-width: none
        }

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none
}

    .dd-list .dd-list {
        padding-left: 2em
    }

.dd-collapsed .dd-list {
    display: none
}

.dd-item, .dd-empty, .dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0
}

.dd-item {
    box-shadow: 0 1px 0 0 #1E88E5, 1px 0 0 0 #1E88E5
}

    .dd-item:first-child {
        box-shadow: 0 1px 0 0 #1E88E5, 0 -1px 0 0 #1E88E5, 1px 0 0 0 #1E88E5
    }

.dd-handle {
    display: block;
    height: 2em;
    margin: 5px 0;
    padding: 5px 10px;
    text-decoration: none;
    background: #fafafa;
    box-sizing: border-box
}

    .dd-handle:hover {
        color: #2ea8e5
    }

.dd-item > button {
    font-family: 'WojoIcons';
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 2rem;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    white-space: nowrap;
    border: 0;
    background: transparent;
    text-align: center
}

    .dd-item > button::before {
        content: "\e948";
        display: block;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        margin-top: -.613rem
    }

    .dd-item > button[data-action="collapse"]:before {
        content: "\e94b"
    }

.dd-placeholder, .dd-empty {
    padding: 0;
    min-height: 2em;
    background: #f2fbff;
    border: 1px dashed var(--primary-color);
    box-sizing: border-box
}

.dd-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5
}

.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 9999
}

    .dd-dragel > .dd-item .dd-handle {
        margin-top: 0
    }

    .dd-dragel .dd-handle {
        box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1)
    }

.dd3-content {
    display: block;
    margin: 0;
    padding: .750em 1em .750em 4em;
    font-size: .875em;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1
}

    .dd3-content:hover {
    }

    .dd3-content > a {
        margin-right: 2em;
        color: #222;
        font-weight: 400
    }

.dd-dragel > .dd3-item > .dd3-content {
    margin: 0
}

.dd3-item > button {
    margin-left: 2.5em
}

.dd3-handle {
    font-family: 'WojoIcons';
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    cursor: move;
    width: 2em;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--primary-color);
    ;
    line-height: 1
}

    .dd3-handle:before {
        content: "\ea1a";
        position: absolute;
        left: 0;
        top: .5rem;
        width: 100%;
        text-align: center;
        color: #fff
    }

    .dd3-handle:hover {
        background-color: var(--dark-color);
    }

.dd3-content .actions {
    float: right
}

.wojo.items {
    display: flex;
    flex-direction: column
}

    .wojo.items > .item {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        position: relative
    }

        .wojo.items > .item > .columns {
            flex: 1 1 0px;
            min-width: 0;
            padding: 0.750em;
            white-space: nowrap
        }

            .wojo.items > .item > .columns.auto {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                white-space: nowrap
            }

            .wojo.items > .item > .columns > .header {
                font-weight: 500
            }

.wojo.divided.items > .item {
    border-top: 1px solid var(--grey-color-300)
}

.wojo.celled.items > .item {
    border-top: 1px solid var(--grey-color-300)
}

    .wojo.celled.items > .item:last-child {
        border-bottom: 1px solid var(--grey-color-300)
    }

.wojo.items > .item > .columns.one.wide {
    flex: 0 0 10%;
    max-width: 10%
}

.wojo.items > .item > .columns.two.wide {
    flex: 0 0 20%;
    max-width: 20%
}

.wojo.items > .item > .columns.three.wide {
    flex: 0 0 30%;
    max-width: 30%
}

.wojo.items > .item > .columns.four.wide {
    flex: 0 0 40%;
    max-width: 40%
}

.wojo.items > .item > .columns.five.wide {
    flex: 0 0 50%;
    max-width: 50%
}

.wojo.items > .item > .columns.six.wide {
    flex: 0 0 60%;
    max-width: 60%
}

.wojo.items > .item > .columns.seven.wide {
    flex: 0 0 70%;
    max-width: 70%
}

.wojo.items > .item > .columns.eight.wide {
    flex: 0 0 80%;
    max-width: 80%
}

.wojo.items > .item > .columns.nine.wide {
    flex: 0 0 90%;
    max-width: 90%
}

.wojo.items > .item > .columns.ten.wide {
    flex: 0 0 100%;
    max-width: 100%
}

.wojo.mini.list {
    font-size: 0.750rem
}

.wojo.tiny.list, .wojo.tiny.items {
    font-size: 0.813rem
}

.wojo.small.list, .wojo.small.items {
    font-size: 0.938rem
}

.wojo.list, .wojo.items {
    font-size: 1rem
}

@media screen and (max-width:48.063em) {
    .wojo.items {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }

        .wojo.items > .item > .columns.one.wide, .wojo.items > .item > .columns.two.wide, .wojo.items > .item > .columns.three.wide, .wojo.items > .item > .columns.four.wide, .wojo.items > .item > .columns.five.wide, .wojo.items > .item > .columns.six.wide, .wojo.items > .item > .columns.seven.wide, .wojo.items > .item > .columns.eight.wide, .wojo.items > .item > .columns.nine.wide, .wojo.items > .item > .columns.ten.wide, .wojo.items > .item > .columns {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap
        }

    .wojo.divided.items > .item {
        border-top: 1px solid var(--grey-color-300);
        border-left: 1px solid var(--grey-color-300)
    }

        .wojo.divided.items > .item:first-child {
            border-left: 0
        }
}

.wojo.table {
    width: 100%;
    background: #FFFFFF;
    margin: 0em;
    border: 1px solid var(--grey-color-300);
    box-shadow: none;
    border-radius: 0;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0px
}

    .wojo.table:first-child {
        margin-top: 0em
    }

    .wojo.table:last-child {
        margin-bottom: 0em
    }

    .wojo.table th, .wojo.table td {
        transition: background 0.1s ease, color 0.1s ease
    }

    .wojo.table thead {
        box-shadow: none
    }

        .wojo.table thead th {
            cursor: auto;
            background: var(--grey-color-100);
            text-align: inherit;
            padding: 1em 0.750em;
            vertical-align: inherit;
            font-size: .875rem;
            font-weight: 700;
            text-transform: none;
            border-bottom: 1px solid var(--grey-color-300);
            border-left: none
        }

        .wojo.table thead tr > th:first-child {
            border-left: none
        }

        .wojo.table thead tr:first-child > th:first-child {
            border-radius: 0.250rem 0 0em 0
        }

        .wojo.table thead tr:first-child > th:last-child {
            border-radius: 0 0.250rem 0 0
        }

        .wojo.table thead tr:first-child > th:only-child {
            border-radius: 0.250rem 0.250rem 0 0
        }

    .wojo.table tfoot {
        box-shadow: none
    }

        .wojo.table tfoot th {
            cursor: auto;
            border-top: 1px solid var(--grey-color-300);
            background: var(--grey-color-100);
            text-align: inherit;
            color: var(--dark-color);
            padding: 0.750em 0.750em;
            vertical-align: middle;
            font-style: normal;
            font-size: .813rem;
            font-weight: 600;
            text-transform: none
        }

        .wojo.table tfoot tr > th:first-child {
            border-left: none
        }

        .wojo.table tfoot tr:first-child > th:first-child {
            border-radius: 0em 0em 0em 0.250rem
        }

        .wojo.table tfoot tr:first-child > th:last-child {
            border-radius: 0em 0em 0.250rem 0em
        }

        .wojo.table tfoot tr:first-child > th:only-child {
            border-radius: 0em 0em 0.250rem 0.250rem
        }

    .wojo.table tr td {
        border-top: 3px solid var(--grey-color-300)
    }

    .wojo.table tr:first-child td {
        border-top: none
    }

    .wojo.table td {
        padding: 0.750em 0.750em;
        text-align: inherit;
        font-weight: 400
    }

        .wojo.table th .image, .wojo.table th .image img, .wojo.table td .image, .wojo.table td .image img {
            max-width: none
        }

.wojo.basic.table {
    background: transparent;
    border: 0;
    box-shadow: none
}

    .wojo.basic.table thead, .wojo.basic.table tfoot {
        box-shadow: none
    }

    .wojo.basic.table th {
        background: transparent;
        border-left: none;
        text-transform: uppercase;
        font-size: 0.813rem;
        white-space: nowrap
    }

    .wojo.basic.table tr td {
        border-top: 1px solid var(--grey-color-300)
    }

    .wojo.basic.table thead tr:first-child > th:last-child, .wojo.table thead tr:first-child > th:first-child {
        border-radius: 0
    }

.wojo.basic.striped.table tbody tr:nth-child(2n) {
    background-color: var(--grey-color-100)
}

.wojo.table th.center.aligned, .wojo.table td.center.aligned {
    text-align: center
}

.wojo.table th.right.aligned, .wojo.table td.right.aligned {
    text-align: right
}

.wojo[class*="very basic"].table {
    border: none
}

    .wojo[class*="very basic"].table:not(.sorting):not(.striped) th, .wojo[class*="very basic"].table:not(.sorting):not(.striped) td {
        padding: ''
    }

        .wojo[class*="very basic"].table:not(.sorting):not(.striped) th:first-child, .wojo[class*="very basic"].table:not(.sorting):not(.striped) td:first-child {
            padding-left: 0em
        }

        .wojo[class*="very basic"].table:not(.sorting):not(.striped) th:last-child, .wojo[class*="very basic"].table:not(.sorting):not(.striped) td:last-child {
            padding-right: 0em
        }

    .wojo[class*="very basic"].table:not(.sorting):not(.striped) thead tr:first-child th {
        padding-top: 0em
    }

.wojo.very.basic.table tr td {
    border-top: 0 solid rgba(34, 36, 38, 0.1)
}

.wojo.table th.auto, .wojo.table td.auto {
    width: 1px;
    white-space: nowrap
}

.wojo.compact.table th {
    padding-left: 0.75em;
    padding-right: 0.75em
}

.wojo.compact.table td {
    padding: 0.5em 0.75em
}

.wojo[class*="very compact"].table th {
    padding-left: 0.613em;
    padding-right: 0.613em
}

.wojo[class*="very compact"].table td {
    padding: 0.375em 0.613em
}

.wojo.compact.fitted.table td {
    padding: 0.2em 0.4em
}

.wojo.collapsing.table {
    width: auto
}

.wojo.table .handle {
    cursor: move
}

.wojo.table th.one.wide, .wojo.table td.one.wide {
    width: 6.25%
}

.wojo.table th.two.wide, .wojo.table td.two.wide {
    width: 12.5%
}

.wojo.table th.three.wide, .wojo.table td.three.wide {
    width: 18.75%
}

.wojo.table th.four.wide, .wojo.table td.four.wide {
    width: 25%
}

.wojo.table th.five.wide, .wojo.table td.five.wide {
    width: 31.25%
}

.wojo.table th.six.wide, .wojo.table td.six.wide {
    width: 37.5%
}

.wojo.table th.seven.wide, .wojo.table td.seven.wide {
    width: 43.75%
}

.wojo.table th.eight.wide, .wojo.table td.eight.wide {
    width: 50%
}

.wojo.table th.nine.wide, .wojo.table td.nine.wide {
    width: 56.25%
}

.wojo.table th.ten.wide, .wojo.table td.ten.wide {
    width: 62.5%
}

.wojo.table th.eleven.wide, .wojo.table td.eleven.wide {
    width: 68.75%
}

.wojo.table th.twelve.wide, .wojo.table td.twelve.wide {
    width: 75%
}

.wojo.table th.thirteen.wide, .wojo.table td.thirteen.wide {
    width: 81.25%
}

.wojo.table th.fourteen.wide, .wojo.table td.fourteen.wide {
    width: 87.5%
}

.wojo.table th.fifteen.wide, .wojo.table td.fifteen.wide {
    width: 93.75%
}

.wojo.table th.sixteen.wide, .wojo.table td.sixteen.wide {
    width: 100%
}

.wojo.small.table {
    font-size: 0.875rem
}

.wojo.table {
    font-size: 1rem
}

.wojo.large.table {
    font-size: 1.25rem
}

@media screen and (max-width:30em) {
    .wojo.responsive.table {
        overflow-x: auto;
        overflow-y: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }
}

@font-face {
    font-family: 'WojoIcons';
    src: url('../fonts/wojoicons.eot?rr6pzw');
    src: url('../fonts/wojoicons.eot?rr6pzw#iefix') format('embedded-opentype'), url('../fonts/wojoicons.ttf?rr6pzw') format('truetype'), url('../fonts/wojoicons.woff?rr6pzw') format('woff'), url('../fonts/wojoicons.svg?rr6pzw#wojoicons') format('svg');
    font-weight: normal;
    font-style: normal
}

i.icon {
    font-family: 'WojoIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    backface-visibility: hidden;
    vertical-align: middle;
    position: relative
}

    i.icon.middle {
        vertical-align: middle
    }

    i.icon.agenda:before {
        content: "\e900"
    }

    i.icon.aid.kit:before {
        content: "\e901"
    }

    i.icon.anchor:before {
        content: "\e902"
    }

.icon.android:before {
    content: "\e967"
}

i.icon.angle.double.down:before {
    content: "\e903"
}

i.icon.angle.double.left:before {
    content: "\e904"
}

i.icon.angle.double.right:before {
    content: "\e905"
}

i.icon.angle.double.up:before {
    content: "\e906"
}

i.icon.angle.down:before {
    content: "\e907"
}

i.icon.angle.left:before {
    content: "\e908"
}

i.icon.angle.right:before {
    content: "\e909"
}

i.icon.angle.up:before {
    content: "\e90a"
}

i.icon.antena:before {
    content: "\e90b"
}

i.icon.app:before {
    content: "\e90c"
}

i.icon.app.add:before {
    content: "\e90d"
}

i.icon.app.remove:before {
    content: "\e90e"
}

.icon.apple:before {
    content: "\e968"
}

i.icon.apps:before {
    content: "\e910"
}

i.icon.apps.alt:before {
    content: "\e911"
}

i.icon.arrow.backward:before {
    content: "\e912"
}

i.icon.arrow.forward:before {
    content: "\e913"
}

i.icon.arrows:before {
    content: "\e914"
}

i.icon.arrows.horizontal:before {
    content: "\e915"
}

i.icon.arrows.vertical:before {
    content: "\e916"
}

i.icon.asterisk:before {
    content: "\e917"
}

i.icon.backward:before {
    content: "\e918"
}

i.icon.badge:before {
    content: "\e919"
}

i.icon.bag:before {
    content: "\e92f"
}

i.icon.ban:before {
    content: "\e91a"
}

i.icon.bar.chart:before {
    content: "\e91b"
}

i.icon.bar.chart.alt:before {
    content: "\e91c"
}

i.icon.basket:before {
    content: "\e91d"
}

i.icon.basket.alt:before {
    content: "\e930"
}

i.icon.basketball:before {
    content: "\e91e"
}

i.icon.batery.empty:before {
    content: "\e91f"
}

i.icon.batery.full:before {
    content: "\e920"
}

i.icon.batery20:before {
    content: "\e921"
}

i.icon.batery50:before {
    content: "\e922"
}

i.icon.bell:before {
    content: "\e923"
}

i.icon.binoculars:before {
    content: "\e924"
}

i.icon.blackboard:before {
    content: "\e925"
}

i.icon.bluetooth:before {
    content: "\e926"
}

i.icon.bluetooth.connected:before {
    content: "\e927"
}

i.icon.bolt:before {
    content: "\e928"
}

i.icon.book:before {
    content: "\e929"
}

i.icon.bookmark:before {
    content: "\e92a"
}

i.icon.briefcase:before {
    content: "\e92c"
}

i.icon.briefcase.alt:before {
    content: "\e92d"
}

i.icon.brightness:before {
    content: "\e931"
}

i.icon.brightness.alt:before {
    content: "\e932"
}

i.icon.brush:before {
    content: "\e933"
}

i.icon.bubble:before {
    content: "\e935"
}

i.icon.building:before {
    content: "\e936"
}

i.icon.burger:before {
    content: "\e937"
}

i.icon.bus:before {
    content: "\e938"
}

i.icon.cake:before {
    content: "\e939"
}

i.icon.calculator:before {
    content: "\e93a"
}

i.icon.calendar:before {
    content: "\e93b"
}

i.icon.calendar.add:before {
    content: "\e93c"
}

i.icon.calendar.alt:before {
    content: "\e93d"
}

i.icon.calendar.remove:before {
    content: "\e93e"
}

i.icon.camera:before {
    content: "\e93f"
}

i.icon.camera.alt:before {
    content: "\e940"
}

i.icon.car:before {
    content: "\e941"
}

i.icon.cd:before {
    content: "\e942"
}

i.icon.certificate:before {
    content: "\e943"
}

i.icon.chat:before {
    content: "\e9ed"
}

i.icon.check:before {
    content: "\e944"
}

i.icon.check.all:before {
    content: "\e945"
}

i.icon.checkbox:before {
    content: "\e946"
}

i.icon.checkbox.checked:before {
    content: "\e947"
}

i.icon.checkbox.checkedalt:before {
    content: "\e90f"
}

i.icon.chevron.down:before {
    content: "\e948"
}

i.icon.chevron.right:before {
    content: "\e94a"
}

i.icon.chevron.up:before {
    content: "\e94b"
}

i.icon.chevron.left:before {
    content: "\e949"
}

i.icon.circle.check:before {
    content: "\e94c"
}

i.icon.circle.chevron.down:before {
    content: "\e94d"
}

i.icon.circle.chevron.left:before {
    content: "\e94e"
}

i.icon.circle.chevron.right:before {
    content: "\e94f"
}

i.icon.circle.chevron.up:before {
    content: "\e950"
}

i.icon.circle.delete:before {
    content: "\e951"
}

i.icon.circle.minus:before {
    content: "\e952"
}

i.icon.circle.plus:before {
    content: "\e953"
}

i.icon.clipboard:before {
    content: "\e954"
}

i.icon.clipboard.alt:before {
    content: "\e955"
}

i.icon.clock:before {
    content: "\e956"
}

i.icon.close:before {
    content: "\e957"
}

i.icon.cloud.download:before {
    content: "\e958"
}

i.icon.cloud.upload:before {
    content: "\e959"
}

i.icon.code:before {
    content: "\e95a"
}

i.icon.code.alt:before {
    content: "\e95b"
}

i.icon.cogs:before {
    content: "\e95c"
}

i.icon.collection:before {
    content: "\e95d"
}

i.icon.comment:before {
    content: "\e95e"
}

i.icon.comments:before {
    content: "\e95f"
}

i.icon.compass:before {
    content: "\e960"
}

i.icon.compress:before {
    content: "\e961"
}

i.icon.contacts:before {
    content: "\e934"
}

i.icon.contrast:before {
    content: "\e962"
}

i.icon.copy:before {
    content: "\e963"
}

i.icon.crayon:before {
    content: "\e96b"
}

i.icon.credit.card:before {
    content: "\e96c"
}

i.icon.crop:before {
    content: "\e96d"
}

i.icon.css:before {
    content: "\e96e"
}

i.icon.cup:before {
    content: "\e96f"
}

i.icon.customize:before {
    content: "\e964"
}

i.icon.cut:before {
    content: "\e970"
}

i.icon.dashboard:before {
    content: "\e971"
}

i.icon.database:before {
    content: "\e972"
}

i.icon.database.alt:before {
    content: "\e973"
}

i.icon.date:before {
    content: "\e974"
}

i.icon.delete:before {
    content: "\e975"
}

i.icon.desktop:before {
    content: "\e976"
}

i.icon.dice:before {
    content: "\e977"
}

i.icon.directions:before {
    content: "\e978"
}

i.icon.download:before {
    content: "\e979"
}

i.icon.download.alt:before {
    content: "\e97a"
}

i.icon.drop:before {
    content: "\e97c"
}

i.icon.dropbox:before {
    content: "\e97d"
}

i.icon.dropper:before {
    content: "\e97e"
}

i.icon.earth:before {
    content: "\e97f"
}

i.icon.ellipsis.horizontal:before {
    content: "\e980"
}

i.icon.ellipsis.horizontal.alt:before {
    content: "\e981"
}

i.icon.ellipsis.vertical:before {
    content: "\e982"
}

i.icon.ellipsis.vertical.alt:before {
    content: "\e983"
}

i.icon.email:before {
    content: "\e985"
}

i.icon.email.alt:before {
    content: "\e999"
}

i.icon.eraser:before {
    content: "\e986"
}

i.icon.expand:before {
    content: "\e987"
}

i.icon.eye:before {
    content: "\e988"
}

i.icon.eye.blocked:before {
    content: "\e989"
}

i.icon.eye.glasses:before {
    content: "\e98a"
}

i.icon.facebook:before {
    content: "\e98b"
}

i.icon.facebook.alt:before {
    content: "\e98c"
}

i.icon.faq:before {
    content: "\e98d"
}

i.icon.feather:before {
    content: "\e98e"
}

i.icon.female:before {
    content: "\e98f"
}

i.icon.female.gender:before {
    content: "\e990"
}

i.icon.file:before {
    content: "\e991"
}

i.icon.file.add:before {
    content: "\e992"
}

i.icon.file.remove:before {
    content: "\e993"
}

i.icon.files:before {
    content: "\e994"
}

i.icon.files.add:before {
    content: "\e995"
}

i.icon.files.remove:before {
    content: "\e996"
}

i.icon.filter:before {
    content: "\e997"
}

i.icon.find:before {
    content: "\e998"
}

i.icon.fire:before {
    content: "\e99b"
}

i.icon.flag:before {
    content: "\e99c"
}

i.icon.floppy:before {
    content: "\e99d"
}

i.icon.flow.tree:before {
    content: "\e99e"
}

i.icon.folder:before {
    content: "\e99f"
}

i.icon.folder.add:before {
    content: "\e9a0"
}

i.icon.folder.open:before {
    content: "\e9a1"
}

i.icon.folder.remove:before {
    content: "\e9a2"
}

i.icon.food.dome:before {
    content: "\e9a3"
}

i.icon.football:before {
    content: "\e9a4"
}

i.icon.forward:before {
    content: "\e9a5"
}

i.icon.gamepad:before {
    content: "\e9a6"
}

i.icon.ghost:before {
    content: "\e9a7"
}

i.icon.gift:before {
    content: "\e9a8"
}

i.icon.github:before {
    content: "\e9a9"
}

i.icon.globe:before {
    content: "\e9aa"
}

i.icon.google:before {
    content: "\e9ab"
}

i.icon.google.drive:before {
    content: "\e9ac"
}

i.icon.google.plus:before {
    content: "\e9ad"
}

i.icon.gps:before {
    content: "\e9ae"
}

i.icon.grid:before {
    content: "\e9af"
}

i.icon.grid.align.bottom.left:before {
    content: "\e9b0"
}

i.icon.grid.align.bottom.right:before {
    content: "\e9b1"
}

i.icon.grid.align.center.bottom:before {
    content: "\e9b2"
}

i.icon.grid.align.center.left:before {
    content: "\e9b3"
}

i.icon.grid.align.center.middle:before {
    content: "\e9b4"
}

i.icon.grid.align.center.right:before {
    content: "\e9b5"
}

i.icon.grid.align.center.top:before {
    content: "\e9b6"
}

i.icon.grid.align.top.left:before {
    content: "\e9b7"
}

i.icon.grid.align.top.right:before {
    content: "\e9b8"
}

i.icon.hdd:before {
    content: "\e9b9"
}

i.icon.headphones:before {
    content: "\e9ba"
}

i.icon.heart:before {
    content: "\e9bb"
}

i.icon.heart.alt:before {
    content: "\e9bc"
}

i.icon.help:before {
    content: "\e9bd"
}

i.icon.history:before {
    content: "\e9be"
}

i.icon.home:before {
    content: "\e9bf"
}

i.icon.hourglass:before {
    content: "\e9c0"
}

i.icon.html5:before {
    content: "\e9c2"
}

i.icon.icecream:before {
    content: "\e9c3"
}

i.icon.id:before {
    content: "\e9c4"
}

i.icon.inbox:before {
    content: "\e9c5"
}

i.icon.indent:before {
    content: "\e9c6"
}

i.icon.info.sign:before {
    content: "\e9c7"
}

i.icon.instagram:before {
    content: "\e9c8"
}

i.icon.invoice:before {
    content: "\e9c9"
}

i.icon.ip:before {
    content: "\e9ca"
}

i.icon.key:before {
    content: "\e9cb"
}

i.icon.laptop:before {
    content: "\e9cc"
}

i.icon.layer:before {
    content: "\e9ce"
}

i.icon.layer.alt:before {
    content: "\e9cf"
}

i.icon.leaf:before {
    content: "\e9d0"
}

i.icon.line.chart:before {
    content: "\e9d1"
}

i.icon.linkedin:before {
    content: "\ea81"
}

i.icon.lock:before {
    content: "\e9d2"
}

i.icon.long.arrow.down:before {
    content: "\e9d3"
}

i.icon.long.arrow.down.left:before {
    content: "\e9d4"
}

i.icon.long.arrow.down.right:before {
    content: "\e9d5"
}

i.icon.long.arrow.left:before {
    content: "\e9d6"
}

i.icon.long.arrow.right:before {
    content: "\e9d7"
}

i.icon.long.arrow.up:before {
    content: "\e9d8"
}

i.icon.long.arrow.up.left:before {
    content: "\e9d9"
}

i.icon.long.arrow.up.right:before {
    content: "\e9da"
}

i.icon.magnet:before {
    content: "\e9db"
}

i.icon.male:before {
    content: "\e9dc"
}

i.icon.male.gender:before {
    content: "\e9dd"
}

i.icon.map:before {
    content: "\e9de"
}

i.icon.maple.leaf:before {
    content: "\e9df"
}

i.icon.marker:before {
    content: "\e9e0"
}

i.icon.mask:before {
    content: "\e9e1"
}

i.icon.medal:before {
    content: "\e9e2"
}

i.icon.membership:before {
    content: "\e9e3"
}

i.icon.microphone:before {
    content: "\e9e5"
}

i.icon.minus:before {
    content: "\e9e6"
}

i.icon.minus.alt:before {
    content: "\e9e7"
}

i.icon.money:before {
    content: "\e9e8"
}

i.icon.mouse:before {
    content: "\e9e4"
}

i.icon.move:before {
    content: "\e9e9"
}

i.icon.move.horizontal:before {
    content: "\e9ea"
}

i.icon.move.vertical:before {
    content: "\e9eb"
}

i.icon.movie:before {
    content: "\e9ec"
}

i.icon.mug:before {
    content: "\ea08"
}

i.icon.musical.note.playlist:before {
    content: "\e9ee"
}

i.icon.musical.notes:before {
    content: "\e9ef"
}

i.icon.mute:before {
    content: "\e9f0"
}

i.icon.news:before {
    content: "\e9fe"
}

i.icon.note:before {
    content: "\e9f1"
}

i.icon.note.alt:before {
    content: "\e9f2"
}

i.icon.ordered.list:before {
    content: "\e9f3"
}

i.icon.outbox:before {
    content: "\e9f4"
}

i.icon.outdent:before {
    content: "\e9f5"
}

i.icon.paint.roller:before {
    content: "\e9f6"
}

i.icon.pan:before {
    content: "\e9f7"
}

i.icon.paper.plane:before {
    content: "\e9f9"
}

i.icon.paper.clip:before {
    content: "\e9f8"
}

i.icon.paste:before {
    content: "\ea59"
}

i.icon.pause:before {
    content: "\e9fa"
}

i.icon.pen:before {
    content: "\e9fc"
}

i.icon.pen.alt:before {
    content: "\e9fd"
}

i.icon.pencil:before {
    content: "\e9ff"
}

i.icon.phone:before {
    content: "\ea00"
}

i.icon.phone.call:before {
    content: "\ea01"
}

i.icon.photo:before {
    content: "\ea02"
}

i.icon.photo.alt:before {
    content: "\ea03"
}

i.icon.photos:before {
    content: "\ea04"
}

i.icon.pie.chart:before {
    content: "\ea05"
}

i.icon.pill:before {
    content: "\ea06"
}

i.icon.pin:before {
    content: "\ea07"
}

i.icon.pinterest:before {
    content: "\ea09"
}

i.icon.plane:before {
    content: "\ea0a"
}

i.icon.play:before {
    content: "\ea0b"
}

i.icon.plus:before {
    content: "\ea0c"
}

i.icon.plus.alt:before {
    content: "\ea0d"
}

i.icon.poll:before {
    content: "\ea67"
}

i.icon.postcard:before {
    content: "\ea0e"
}

i.icon.power:before {
    content: "\ea0f"
}

i.icon.printer:before {
    content: "\ea10"
}

i.icon.puzzle:before {
    content: "\ea11"
}

i.icon.qr:before {
    content: "\ea12"
}

i.icon.question.sign:before {
    content: "\ea13"
}

i.icon.queue.add:before {
    content: "\e965"
}

i.icon.queue.remove:before {
    content: "\e966"
}

i.icon.quote:before {
    content: "\ea14"
}

i.icon.radio:before {
    content: "\ea15"
}

i.icon.radio.checked:before {
    content: "\ea16"
}

i.icon.record:before {
    content: "\ea17"
}

i.icon.redo:before {
    content: "\ea18"
}

i.icon.refresh:before {
    content: "\ea19"
}

i.icon.reorder:before {
    content: "\ea1a"
}

i.icon.repeat:before {
    content: "\ea1b"
}

i.icon.resize:before {
    content: "\ea1c"
}

i.icon.round.chart:before {
    content: "\ea1d"
}

i.icon.rss:before {
    content: "\ea1e"
}

i.icon.sailboat:before {
    content: "\ea1f"
}

i.icon.select:before {
    content: "\ea20"
}

i.icon.select.all:before {
    content: "\ea21"
}

i.icon.send:before {
    content: "\ea71"
}

i.icon.send.alt:before {
    content: "\ea72"
}

i.icon.server:before {
    content: "\ea22"
}

i.icon.server.alt:before {
    content: "\ea23"
}

i.icon.setting:before {
    content: "\ea24"
}

i.icon.settings.alt:before {
    content: "\ea25"
}

i.icon.share:before {
    content: "\ea26"
}

i.icon.shield:before {
    content: "\ea27"
}

i.icon.shield.alt:before {
    content: "\ea28"
}

i.icon.shirt:before {
    content: "\ea29"
}

i.icon.shuffle:before {
    content: "\ea2a"
}

i.icon.sliders.horizontal:before {
    content: "\ea2b"
}

i.icon.sliders.horizontal.alt:before {
    content: "\ea73"
}

i.icon.sliders.vertical:before {
    content: "\ea2c"
}

i.icon.sliders.vertical.alt:before {
    content: "\ea7b"
}

i.icon.smartphone:before {
    content: "\ea2d"
}

i.icon.smile:before {
    content: "\ea2e"
}

i.icon.snowflake:before {
    content: "\ea2f"
}

.icon.sort:before {
    content: "\ea83"
}

i.icon.sort.ascending:before {
    content: "\ea30"
}

i.icon.sort.descending:before {
    content: "\ea31"
}

i.icon.soundcloud:before {
    content: "\ea32"
}

i.icon.speaker:before {
    content: "\ea33"
}

i.icon.spin.full:before {
    content: "\e92b"
}

i.icon.spin.circles:before {
    content: "\ea34"
}

i.icon.star:before {
    content: "\ea35"
}

i.icon.star.full:before {
    content: "\ea36"
}

i.icon.star.half:before {
    content: "\ea37"
}

i.icon.step.backward:before {
    content: "\ea38"
}

i.icon.step.forward:before {
    content: "\ea39"
}

i.icon.stop:before {
    content: "\ea3a"
}

i.icon.stop.watch:before {
    content: "\ea3b"
}

i.icon.storage:before {
    content: "\e92e"
}

i.icon.storage.alt:before {
    content: "\ea3c"
}

i.icon.sunset:before {
    content: "\ea3d"
}

i.icon.switch:before {
    content: "\ea3e"
}

i.icon.tab:before {
    content: "\ea42"
}

i.icon.tablet:before {
    content: "\ea43"
}

i.icon.tag:before {
    content: "\ea44"
}

i.icon.tag.delete:before {
    content: "\ea45"
}

i.icon.tags:before {
    content: "\ea46"
}

i.icon.target:before {
    content: "\ea47"
}

i.icon.tennis.ball:before {
    content: "\ea48"
}

i.icon.thumbs.down:before {
    content: "\ea49"
}

i.icon.thumbs.up:before {
    content: "\ea4a"
}

i.icon.tie:before {
    content: "\ea4b"
}

i.icon.timeline:before {
    content: "\ea4c"
}

i.icon.toggle.off:before {
    content: "\ea3f"
}

i.icon.toggle.off.alt:before {
    content: "\ea40"
}

i.icon.toggle.on:before {
    content: "\ea41"
}

i.icon.toggle.on.alt:before {
    content: "\ea4d"
}

i.icon.trailer:before {
    content: "\ea4e"
}

i.icon.train:before {
    content: "\ea4f"
}

i.icon.trash:before {
    content: "\ea51"
}

i.icon.trash.alt:before {
    content: "\ea50"
}

i.icon.triangle.down:before {
    content: "\ea52"
}

i.icon.triangle.left:before {
    content: "\ea53"
}

i.icon.triangle.right:before {
    content: "\ea54"
}

i.icon.triangle.unfold.more:before {
    content: "\ea55"
}

i.icon.triangle.up:before {
    content: "\ea56"
}

i.icon.trophy:before {
    content: "\ea57"
}

i.icon.tumblr:before {
    content: "\ea58"
}

i.icon.twitter:before {
    content: "\ea5a"
}

i.icon.umbrella:before {
    content: "\ea5b"
}

i.icon.underline:before {
    content: "\ea5c"
}

i.icon.undo:before {
    content: "\ea5d"
}

i.icon.unfold.in:before {
    content: "\ea5e"
}

i.icon.unfold.less:before {
    content: "\ea5f"
}

i.icon.unfold.more:before {
    content: "\ea60"
}

i.icon.unfold.out:before {
    content: "\ea61"
}

i.icon.unlink:before {
    content: "\ea62"
}

i.icon.unlock:before {
    content: "\ea63"
}

i.icon.unordered.list:before {
    content: "\ea64"
}

i.icon.upload:before {
    content: "\ea65"
}

i.icon.upload.alt:before {
    content: "\ea66"
}

i.icon.url:before {
    content: "\ea68"
}

i.icon.url.alt:before {
    content: "\ea69"
}

i.icon.usb.stick:before {
    content: "\ea6a"
}

i.icon.user:before {
    content: "\ea6b"
}

i.icon.user.add:before {
    content: "\ea6c"
}

i.icon.user.alt:before {
    content: "\ea6d"
}

i.icon.user.profile:before {
    content: "\ea6e"
}

i.icon.user.remove:before {
    content: "\ea6f"
}

i.icon.users:before {
    content: "\ea70"
}

i.icon.view.agenda:before {
    content: "\ea74"
}

i.icon.view.day:before {
    content: "\ea75"
}

i.icon.view.grid:before {
    content: "\ea76"
}

i.icon.view.list:before {
    content: "\ea77"
}

i.icon.view.week:before {
    content: "\ea78"
}

i.icon.vimeo:before {
    content: "\ea79"
}

i.icon.voicemail:before {
    content: "\ea7a"
}

i.icon.volume:before {
    content: "\e9fb"
}

i.icon.wallet:before {
    content: "\ea7c"
}

i.icon.wallpaper:before {
    content: "\ea7d"
}

i.icon.wand:before {
    content: "\ea7e"
}

i.icon.warning.sign:before {
    content: "\ea7f"
}

i.icon.water:before {
    content: "\ea80"
}

i.icon.weather.cloud:before {
    content: "\ea82"
}

i.icon.widgets:before {
    content: "\ea87"
}

i.icon.wifi.full:before {
    content: "\ea88"
}

i.icon.wifi.low:before {
    content: "\ea89"
}

i.icon.windows:before {
    content: "\ea8a"
}

i.icon.wojologo:before {
    content: "\ea8b"
}

i.icon.wojologo.alt:before {
    content: "\ea8c"
}

i.icon.wysiwyg.align.center:before {
    content: "\ea8e"
}

i.icon.wysiwyg.align.justify:before {
    content: "\ea8f"
}

i.icon.wysiwyg.align.left:before {
    content: "\ea90"
}

i.icon.wysiwyg.align.right:before {
    content: "\ea91"
}

i.icon.wysiwyg.bold:before {
    content: "\ea92"
}

i.icon.wysiwyg.border.dashed:before {
    content: "\eaa0"
}

i.icon.wysiwyg.border.dotted:before {
    content: "\eaa1"
}

i.icon.wysiwyg.border.double:before {
    content: "\eaa2"
}

i.icon.wysiwyg.border.inset:before {
    content: "\eaa5"
}

i.icon.wysiwyg.border.outset:before {
    content: "\eaa6"
}

i.icon.wysiwyg.border.solid:before {
    content: "\eaa3"
}

.icon.wysiwyg.bounce:before {
    content: "\eaa8"
}

.icon.wysiwyg.fade:before {
    content: "\eaa9"
}

.icon.wysiwyg.flip:before {
    content: "\eaaa"
}

.icon.wysiwyg.fold:before {
    content: "\eaab"
}

i.icon.wysiwyg.color:before {
    content: "\ea93"
}

i.icon.wysiwyg.font:before {
    content: "\ea94"
}

i.icon.wysiwyg.gradient:before {
    content: "\eaa4"
}

i.icon.wysiwyg.italic:before {
    content: "\ea95"
}

i.icon.wysiwyg.paragraph:before {
    content: "\ea96"
}

i.icon.wysiwyg.picture:before {
    content: "\eaa7"
}

i.icon.wysiwyg.remove.format:before {
    content: "\ea97"
}

.icon.wysiwyg.roll:before {
    content: "\eaac"
}

i.icon.wysiwyg.size:before {
    content: "\ea98"
}

.icon.wysiwyg.slide:before {
    content: "\eaad"
}

i.icon.wysiwyg.strikethrough:before {
    content: "\ea99"
}

i.icon.wysiwyg.subscript:before {
    content: "\ea9a"
}

i.icon.wysiwyg.superscript:before {
    content: "\ea9b"
}

i.icon.wysiwyg.table:before {
    content: "\ea9c"
}

i.icon.wysiwyg.type:before {
    content: "\ea9d"
}

i.icon.wysiwyg.underline:before {
    content: "\ea9e"
}

.icon.wysiwyg.zoom:before {
    content: "\eaae"
}

i.icon.youtube:before {
    content: "\ea9f"
}

i.icon.spinning {
    animation: icon-spinning 2s linear infinite
}

@keyframes icon-spinning {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes icon-spinning {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

i.icon.active {
    opacity: 1
}

i.emphasized.icon {
    opacity: 1
}

.icon.disabled {
    opacity: .3
}

i.link.icon {
    opacity: .8;
    cursor: pointer
}

    i.link.icon:hover {
        opacity: 1
    }

i.flipped.icon, i.horizontally.flipped.icon {
    transform: scale(-1, 1)
}

i.vertically.flipped.icon {
    transform: scale(1, -1)
}

i.rotated.icon, i.right.rotated.icon, i.clockwise.rotated.icon {
    transform: rotate(90deg)
}

i.left.rotated.icon, i.counterclockwise.rotated.icon {
    transform: rotate(-90deg)
}

i.white.icon {
    color: #fff
}

i.dark.icon {
    color: var(--dark-color)
}

i.light.icon {
    color: var(--light-color)
}

i.primary.icon {
    color: var(--primary-color)
}

i.secondary.icon {
    color: var(--secondary-color)
}

i.positive.icon {
    color: var(--positive-color)
}

i.negative.icon {
    color: var(--negative-color)
}

i.pink.icon {
    color: #E91E63
}

i.purple.icon {
    color: #9C27B0
}

i.warning.icon {
    color: #ffc107
}

i.primary.inverted.icon {
    color: var(--primary-color-inverted)
}

i.secondary.inverted.icon {
    color: var(--secondary-color-inverted)
}

i.positive.inverted.icon {
    color: var(--positive-color-inverted)
}

i.negative.inverted.icon {
    color: var(--negative-color-inverted)
}

i.dark.inverted.icon {
    color: var(--dark-color-inverted)
}

i.light.inverted.icon {
    color: var(--light-color-inverted)
}

i.inverted.twitter.icon {
    background-color: #00BFFF;
    color: #FFFFFF
}

i.inverted.facebook.icon {
    background-color: #128BDB;
    color: #FFFFFF
}

i.inverted.youtube.icon {
    background-color: #E20000;
    color: #FFFFFF
}

i.inverted.google.icon {
    background-color: #E20000;
    color: #FFFFFF
}

i.inverted.instagram.icon {
    background-color: #0569AA;
    color: #FFFFFF
}

.wojo.icons {
    display: flex;
    flex-flow: row wrap
}

    .wojo.icons .icon, .wojo.icons a {
        flex: 0 0 auto;
        max-width: 100%;
        margin-right: .5em;
        align-self: center
    }

i.tiny.icon {
    font-size: .625rem
}

    i.tiny.icon.circular {
        line-height: 1rem;
        width: 1rem;
        height: 1rem;
        box-shadow: none
    }

i.small.icon {
    font-size: .938rem
}

i.icon {
    font-size: 1rem
}

i.medium.icon {
    font-size: 1.5rem
}

i.large.icon {
    font-size: 2rem;
    vertical-align: middle
}

i.big.icon {
    font-size: 3rem;
    vertical-align: middle
}

i.huge.icon {
    font-size: 4rem;
    vertical-align: middle
}

i.massive.icon {
    font-size: 6rem;
    vertical-align: middle
}

i.gigantic.icon {
    font-size: 8rem;
    vertical-align: middle
}

i.ginormous.icon {
    font-size: 12rem;
    vertical-align: middle;
    line-height: 1em
}

.wojo.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 1rem 0;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: .250rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 0 2rem 0 var(--shadow-color)
}

    .wojo.card > .content:not(.notes), .wojo.segment > .content:not(.notes) {
        flex: 1 1 auto;
        padding: 1.5rem
    }

    .wojo.card > .header, .wojo.card > .footer, .wojo.segment > .header, .wojo.segment > .footer {
        padding: 1.25rem 1.5rem
    }

        .wojo.card > .header.divided, .wojo.segment > .header.divided {
            border-bottom: 1px solid var(--shadow-color)
        }

        .wojo.card > .footer.divided, .wojo.segment > .footer.divided {
            border-top: 1px solid var(--shadow-color)
        }

    .wojo.card > .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

.wojo.segment {
    position: relative;
    padding: 2rem;
    margin: 1rem 0;
    background-color: #fff;
    border-radius: .250rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 10px 15px -3px var(--shadow-color),0 4px 6px -2px var(--shadow-color)
}

    .wojo.segment > .header {
        display: flex;
        flex-flow: row wrap;
        position: relative
    }

    .wojo.segment > .basic.header {
        display: inherit;
        flex-flow: inherit;
        position: relative
    }

    .wojo.segment > .header > .items {
        flex: 0 0 auto;
        max-width: 100%;
        margin-right: 1rem
    }

        .wojo.segment > .header > .items:last-child {
            margin-right: 0
        }

    .wojo.segment.gutters, .wojo.segment.gutters > .content:not(.notes) {
        padding: 2rem 2rem 0 2rem
    }

.wojo.basic.segment, .wojo.basic.card, .wojo.basic.cards > .card {
    border: 0
}

.wojo.fitted.segment, .wojo.fitted.card, .wojo.fitted.cards > .card {
    padding: 0
}

.wojo.simple.segment, .wojo.simple.card, .wojo.simple.cards > .card {
    box-shadow: none
}

.wojo.attached.segment, .wojo.attached.card {
    margin: 0
}

.wojo.top.attached.segment, .wojo.top.attached.card {
    margin-top: 0
}

.wojo.bottom.attached.segment, .wojo.bottom.attached.card {
    margin-bottom: 0
}

.wojo.spaced.segment, .wojo.spaced.card {
    margin: 2rem 0
}

.wojo.cards {
    display: flex;
    flex-flow: row wrap;
    margin-left: var(--gutter-compensation);
    flex-wrap: wrap
}

    .wojo.cards .card {
        position: relative;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid var(--grey-color-300);
        border-radius: .250rem;
        margin-left: var(--gutter);
        margin-bottom: var(--gutter);
        box-shadow: 0 0 2rem 0 var(--shadow-color)
    }

        .wojo.cards .card > .content {
            padding: 2em;
            flex: 1 1 auto
        }

        .wojo.cards .card > .header, .wojo.cards .card > .footer {
            padding: 1.25rem 1.5rem
        }

            .wojo.cards .card > .header.divided {
                border-bottom: 1px solid var(--shadow-color)
            }

            .wojo.cards .card > .footer.divided {
                border-top: 1px solid var(--shadow-color)
            }

.wojo.full.cards .card {
    flex-direction: column;
    display: flex
}

    .wojo.full.cards .card > .footer {
        margin-top: auto
    }

.wojo.fof.card {
    min-height: 50vh;
    text-align: center;
    justify-content: center;
    align-items: center
}

    .wojo.fof.card h1 {
        font-size: 8rem;
        letter-spacing: .875rem;
        font-weight: 300;
        line-height: 1.5;
        color: var(--secondary-color)
    }

    .wojo.fof.card p:first-of-type {
        font-size: 1.5rem;
        line-height: 1.7;
        color: var(--grey-color)
    }

.wojo.loading.segment, .wojo.loading.card {
    position: relative;
    cursor: default;
    pointer-events: none
}

    .wojo.loading.segment::before, .wojo.loading.card::before {
        position: absolute;
        content: '';
        top: 0%;
        left: 0%;
        background: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 100%;
        z-index: 100
    }

    .wojo.loading.segment::after, .wojo.loading.card::after {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin: -1.5em 0em 0em -1.5em;
        width: 3em;
        height: 3em;
        -webkit-animation: form-spin 0.6s linear;
        animation: form-spin 0.6s linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        border-radius: 500rem;
        border-color: rgba(0,0,0,.5) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
        border-style: solid;
        border-width: 0.2em;
        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
        visibility: visible;
        z-index: 101
    }

@-webkit-keyframes segment-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes segment-spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@media screen and (min-width:64.063em) {
    .wojo.cards.screen-1, .wojo.cards.screen-2, .wojo.cards.screen-3, .wojo.cards.screen-4, .wojo.cards.screen-5 {
        flex-wrap: wrap
    }

        .wojo.cards.screen-1 > .card {
            flex: 0 0 calc(100% - var(--gutter));
            max-width: calc(100% - var(--gutter))
        }

        .wojo.cards.screen-2 > .card {
            flex: 0 0 calc(50% - var(--gutter));
            max-width: calc(50% - var(--gutter))
        }

        .wojo.cards.screen-3 > .card {
            flex: 0 0 calc(100% / 3 - var(--gutter));
            max-width: calc(100% / 3 - var(--gutter))
        }

        .wojo.cards.screen-4 > .card {
            flex: 0 0 calc(25% - var(--gutter));
            max-width: calc(25% - var(--gutter))
        }

        .wojo.cards.screen-5 > .card {
            flex: 0 0 calc(20% - var(--gutter));
            max-width: calc(20% - var(--gutter))
        }
}

@media screen and (min-width:40.625em) and (max-width:64em) {
    .wojo.cards.tablet-1, .wojo.cards.tablet-2, .wojo.cards.tablet-3, .wojo.cards.tablet-4, .wojo.cards.tablet-5 {
        flex-wrap: wrap
    }

        .wojo.cards.tablet-1 > .card {
            flex: 0 0 calc(100% - var(--gutter));
            max-width: calc(100% - var(--gutter))
        }

        .wojo.cards.tablet-2 > .card {
            flex: 0 0 calc(50% - var(--gutter));
            max-width: calc(50% - var(--gutter))
        }

        .wojo.cards.tablet-3 > .card {
            flex: 0 0 calc(100% / 3 - var(--gutter));
            max-width: calc(100% / 3 - var(--gutter))
        }

        .wojo.cards.tablet-4 > .card {
            flex: 0 0 calc(25% - var(--gutter));
            max-width: calc(25% - var(--gutter))
        }

        .wojo.cards.tablet-5 > .card {
            flex: 0 0 calc(20% - var(--gutter));
            max-width: calc(20% - var(--gutter))
        }
}

@media screen and (max-width:48.063em) {
    .wojo.cards.mobile-1, .wojo.cards.mobile-2, .wojo.cards.mobile-3, .wojo.cards.mobile-4, .wojo.cards.mobile-5 {
        flex-wrap: wrap
    }

        .wojo.cards.mobile-1 > .card {
            flex: 0 0 calc(100% - var(--gutter));
            max-width: calc(100% - var(--gutter))
        }

        .wojo.cards.mobile-2 > .card {
            flex: 0 0 calc(50% - var(--gutter));
            max-width: calc(50% - var(--gutter))
        }

        .wojo.cards.mobile-3 > .card {
            flex: 0 0 calc(100% / 3 - var(--gutter));
            max-width: calc(100% / 3 - var(--gutter))
        }

        .wojo.cards.mobile-4 > .card {
            flex: 0 0 calc(25% - var(--gutter));
            max-width: calc(25% - var(--gutter))
        }

        .wojo.cards.mobile-5 > .card {
            flex: 0 0 calc(20% - var(--gutter));
            max-width: calc(20% - var(--gutter))
        }
}

@media screen and (max-width:30em) {
    .wojo.cards[class*="screen-"], .wojo.cards[class*="tablet-"], .wojo.cards[class*="mobile-"] {
        flex-wrap: wrap
    }

        .wojo.cards[class*="screen-"] > .card, .wojo.cards[class*="tablet-"] > .card, .wojo.cards[class*="mobile-"] > .card {
            flex: 0 0 calc(100% - var(--gutter));
            max-width: calc(100% - var(--gutter))
        }
}

.modal-open .dimmer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1049;
    background-color: rgba(0,0,0,0.75)
}

.modal-open {
    overflow: hidden
}

    .modal-open .wojo.modal {
        overflow-x: hidden;
        overflow-y: auto
    }

.wojo.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

    .wojo.modal .dialog {
        position: relative;
        width: auto;
        pointer-events: none;
        margin: 1.75rem auto;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        min-height: calc(100% - (1.75rem * 2))
    }

        .wojo.modal .dialog > .content {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 100%;
            pointer-events: auto;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid var(--grey-color-300);
            border-radius: 0.250rem;
            outline: 0
        }

            .wojo.modal .dialog > .content > .header {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: start;
                align-items: center;
                -ms-flex-pack: justify;
                justify-content: space-between;
                padding: 1rem 1rem;
                border-bottom: 1px solid var(--grey-color-300);
                border-top-left-radius: 0.250rem;
                border-top-right-radius: 0.250rem
            }

                .wojo.modal .dialog > .content > .header > button {
                    background: #fff;
                    border: 0;
                    cursor: pointer
                }

                .wojo.modal .dialog > .content > .header h5 {
                    margin-bottom: 0;
                    line-height: 1.5;
                    font-size: 1.25rem;
                    font-weight: 600
                }

                    .wojo.modal .dialog > .content > .header h5 span {
                        margin: 0 .5rem;
                        font-size: 1rem
                    }

            .wojo.modal .dialog > .content > .body {
                position: relative;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                padding: 1.5rem;
            }

            .wojo.modal .dialog > .content > .footer {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                -ms-flex-pack: end;
                justify-content: flex-end;
                padding: 1rem;
                border-top: 1px solid var(--grey-color-300);
                border-bottom-right-radius: 0.250rem;
                border-bottom-left-radius: 0.250rem
            }

                .wojo.modal .dialog > .content > .footer > :not(:first-child) {
                    margin-left: .25rem
                }

                .wojo.modal .dialog > .content > .footer > :not(:last-child) {
                    margin-right: .25rem
                }

.wojo.small.modal .dialog {
    width: 320px
}

.wojo.modal .dialog {
    width: 480px
}

.wojo.medium.modal .dialog {
    width: 640px
}

.wojo.big.modal .dialog {
    width: 1024px
}

.wojo.full.modal .dialog {
    width: 100%
}

@media screen and (max-width:48.063em) {
    .wojo.big.modal .dialog, .wojo.full.modal .dialog {
        width: 100%
    }
}

@media screen and (max-width:30em) {
    .wojo.small.modal .dialog, .wojo.modal .dialog, .wojo.medium.modal .dialog, .wojo.big.modal .dialog, .wojo.full.modal .dialog {
        width: 100%
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.redactor-animate-hide {
    display: none !important
}

.redactor-fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn .2s ease-in-out;
    animation: fadeIn .2s ease-in-out
}

.redactor-fadeOut {
    opacity: 1;
    -webkit-animation: fadeOut .2s ease-in-out;
    animation: fadeOut .2s ease-in-out
}

[class^="re-icon-"], [class*=" re-icon-"] {
    font-family: 'WojoIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.re-icon-aligncenter:before {
    content: "\e002"
}

.re-icon-alignment:before, .re-icon-alignleft:before {
    content: "\ea8e"
}

.re-icon-alignright:before {
    content: "\e902"
}

.re-icon-bold:before {
    content: "\ea92"
}

.re-icon-bookmark:before {
    content: "\e904"
}

.re-icon-clips:before {
    content: "\e905"
}

.re-icon-codesnippets:before {
    content: "\e906"
}

.re-icon-deleted:before {
    content: "\ea99"
}

.re-icon-expand:before {
    content: "\e987"
}

.re-icon-file:before {
    content: "\e909"
}

.re-icon-fontcolor:before {
    content: "\ea93"
}

.re-icon-fontfamily:before {
    content: "\e90b"
}

.re-icon-fontsize:before {
    content: "\e90c"
}

.re-icon-format:before {
    content: "\ea96"
}

.re-icon-html:before {
    content: "\e95a"
}

.re-icon-imagecenter:before {
    content: "\e90f"
}

.re-icon-imageleft:before {
    content: "\e910"
}

.re-icon-imageright:before {
    content: "\e911"
}

.re-icon-image:before {
    content: "\eaa7"
}

.re-icon-indent:before {
    content: "\e913"
}

.re-icon-inline:before {
    content: "\e914"
}

.re-icon-italic:before {
    content: "\ea95"
}

.re-icon-line:before, .re-icon-horizontalrule:before {
    content: "\e916"
}

.re-icon-link:before {
    content: "\ea68"
}

.re-icon-ol:before, .re-icon-ordered:before {
    content: "\e918"
}

.re-icon-outdent:before {
    content: "\e919"
}

.re-icon-properties:before {
    content: "\e99c"
}

.re-icon-readmore:before {
    content: "\e91b"
}

.re-icon-redo:before {
    content: "\e91c"
}

.re-icon-retract:before {
    content: "\e961"
}

.re-icon-specialcharacters:before {
    content: "\e91e"
}

.re-icon-sub:before {
    content: "\e91f"
}

.re-icon-sup:before {
    content: "\e920"
}

.re-icon-table:before {
    content: "\e921"
}

.re-icon-textdirection:before {
    content: "\e922"
}

.re-icon-toggle:before {
    content: "\e923"
}

.re-icon-underline:before {
    content: "\e924"
}

.re-icon-undo:before {
    content: "\e925"
}

.re-icon-ul:before, .re-icon-lists:before, .re-icon-unordered:before {
    content: "\e9f3"
}

.re-icon-variable:before {
    content: "\e927"
}

.re-icon-video:before {
    content: "\ea9f"
}

.re-icon-widget:before {
    content: "\e929"
}

.redactor-box, .redactor-box textarea {
    z-index: auto
}

.redactor-box {
    position: relative;
    box-sizing: border-box
}

    .redactor-box.redactor-styles-on {
        margin: 0;
        padding: 0;
        background: #fff;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
        border: 0px solid var(--grey-color-300);
        color: var(--body-color);
        border-radius: .250rem
    }

    .redactor-box.redactor-inline {
        position: static
    }

.redactor-focus.redactor-styles-on, .redactor-focus:focus.redactor-styles-on {
    box-shadow: 0 0 0 3px rgba(102, 126, 234,.5)
}

.redactor-over:hover.redactor-styles-on {
    box-shadow: 0 0 0 3px #ee698a
}

.redactor-source-view, .redactor-source-view.redactor-styles-on {
    box-shadow: 0 0 0 3px #000
}

.redactor-in {
    position: relative;
    overflow: auto;
    white-space: normal;
    box-sizing: border-box
}

    .redactor-in:focus {
        outline: none
    }

.redactor-inline .redactor-in {
    overflow: hidden
}

.redactor-in *, .redactor-read-only * {
    outline: none !important
}

.redactor-in h1:empty, .redactor-in h2:empty, .redactor-in h3:empty, .redactor-in h4:empty, .redactor-in h5:empty, .redactor-in h6:empty, .redactor-in p:empty, .redactor-in blockquote:empty, .redactor-in div[data-redactor-tag=br]:empty, .redactor-in div[data-redactor-tag=tbr]:empty {
    min-height: 1.5em
}

.redactor-in div[data-redactor-tag=br], .redactor-in div[data-redactor-tag=tbr] {
    margin-top: 0;
    margin-bottom: 0
}

.redactor-in strong:empty, .redactor-in b:empty, .redactor-in em:empty, .redactor-in i:empty, .redactor-in span:empty, .redactor-in sup:empty, .redactor-in sub:empty, .redactor-in u:empty, .redactor-in ins:empty {
    display: inline-block;
    min-width: 1px;
    min-height: 1rem
}

.redactor-in table {
    empty-cells: show
}

.redactor-in li figure {
    width: auto;
    display: inline-block;
    margin: 0;
    vertical-align: top
}

.redactor-in figcaption:focus, .redactor-in figure code:focus, .redactor-in figure pre:focus, .redactor-in table td:focus, .redactor-in table th:focus {
    outline: none
}

.redactor-in figure[data-redactor-type=line] {
    margin-top: 1em;
    padding: 6px 0;
    vertical-align: baseline
}

    .redactor-in figure[data-redactor-type=line] hr {
        margin: 0;
        height: 3px;
        border: none;
        background: rgba(0, 0, 0, 0.1)
    }

figure.redactor-component[data-redactor-type="image"] {
    display: inline-block
}

.redactor-script-tag {
    display: none !important
}

.redactor-component {
    position: relative
}

    .redactor-component[data-redactor-type="widget"]:before, .redactor-component[data-redactor-type="video"]:before {
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        position: absolute;
        z-index: 1
    }

    .redactor-component[data-redactor-type=image], .redactor-component[data-redactor-type=widget] {
        clear: both
    }

    .redactor-component[data-redactor-type=variable] {
        white-space: nowrap;
        background: rgba(0, 125, 255, 0.75);
        color: #fff;
        display: inline-block;
        padding: 3px 6px;
        line-height: 1;
        border-radius: 4px;
        cursor: pointer
    }

.redactor-component-active {
    outline: 5px solid rgba(0, 125, 255, 0.5) !important
}

    .redactor-component-active[data-redactor-type=image] {
        outline: none !important
    }

        .redactor-component-active[data-redactor-type=image] img {
            outline: 5px solid rgba(0, 125, 255, 0.5) !important
        }

    .redactor-component-active[data-redactor-type=variable] {
        outline: none !important;
        background: #ee698a
    }

    .redactor-component-active[data-redactor-type=video] {
        outline: none !important
    }

        .redactor-component-active[data-redactor-type=video] iframe {
            outline: 5px solid rgba(0, 125, 255, 0.5) !important
        }

.redactor-blur.redactor-styles-on .redactor-component-active {
    outline: 5px solid #ddd !important
}

    .redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=image] {
        outline: none !important
    }

        .redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=image] img {
            outline: 5px solid #ddd !important
        }

    .redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=video] {
        outline: none !important
    }

        .redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=video] iframe {
            outline: 5px solid #ddd !important
        }

    .redactor-blur.redactor-styles-on .redactor-component-active[data-redactor-type=variable] {
        outline: none !important;
        background: #ddd
    }

.redactor-component-caret {
    position: absolute;
    left: -9999px
}

.redactor-textnodes-wrapper {
    display: inline-block
}

#redactor-image-resizer {
    position: absolute;
    z-index: 1050;
    background-color: rgba(0, 125, 255, 0.9);
    width: 13px;
    height: 13px;
    border: 1px solid #fff;
    cursor: move;
    cursor: nwse-resize
}

.redactor-file-item {
    display: inline-block;
    line-height: 1;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.2)
}

.redactor-file-remover {
    margin-left: 2px;
    position: relative;
    right: -3px;
    display: inline-block;
    padding: 0 3px;
    cursor: pointer;
    opacity: .5
}

    .redactor-file-remover:hover {
        opacity: 1
    }

#redactor-overlay {
    position: fixed;
    z-index: 1051;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(16, 16, 18, 0.3)
}

    #redactor-overlay > .redactor-close {
        position: fixed;
        top: 1rem;
        right: 1rem
    }

.redactor-source, .redactor-source:hover, .redactor-source:focus {
    text-align: left;
    box-sizing: border-box;
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
    width: 100%;
    display: block;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: #252525;
    color: #ccc;
    font-size: 15px;
    outline: none;
    padding: 10px 18px 20px 18px;
    line-height: 1.5;
    resize: vertical
}

.redactor-box[dir="rtl"] .redactor-source {
    direction: ltr
}

.redactor-placeholder:before {
    position: absolute;
    content: attr(placeholder);
    color: rgba(0, 0, 0, 0.4);
    font-weight: normal
}

.redactor-in figcaption[placeholder]:empty:before {
    content: attr(placeholder);
    color: rgba(0, 0, 0, 0.4);
    font-weight: normal
}

.redactor-in figcaption[placeholder]:empty:focus:before {
    content: ""
}

.redactor-statusbar {
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
    margin: 0;
    padding: 8px 10px;
    position: relative;
    overflow: hidden;
    list-style: none;
    background: #f8f8f8;
    box-sizing: border-box;
    border: none
}

    .redactor-statusbar li {
        float: left;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
        padding: 0 10px;
        line-height: 16px;
        border-right: 1px solid rgba(0, 0, 0, 0.1)
    }

        .redactor-statusbar li:last-child {
            border-right-color: transparent
        }

    .redactor-statusbar a {
        color: rgba(0, 0, 0, 0.5);
        text-decoration: underline
    }

        .redactor-statusbar a:hover {
            color: #f03c69;
            text-decoration: underline
        }

    .redactor-statusbar:empty {
        display: none
    }

.redactor-toolbar-wrapper {
    position: relative
}

.redactor-toolbar, .redactor-air {
    z-index: 100;
    position: relative;
    margin: 0 !important;
    padding: 0;
    list-style: none !important;
    line-height: 1 !important;
    background-image: none;
    border: none;
    box-sizing: border-box;
    background-color: var(--body-bg-color);
    border-radius: .250rem .250rem 0 0;
    text-align: center
}

.redactor-box.redactor-styles-on .redactor-toolbar {
    padding: 18px 16px 0 16px
}

.redactor-toolbar a, .redactor-air a {
    display: inline-block;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    vertical-align: middle;
    text-decoration: none;
    position: relative;
    color: rgba(0, 0, 0, 0.85);
    border-radius: .125rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    margin-bottom: .250rem;
    margin-left: .250rem;
    margin-right: .250rem;
    width: 2.5rem;
    height: 2rem;
    line-height: 2rem
}

    .redactor-toolbar a.re-button-icon, .redactor-air a.re-button-icon {
        font-size: 16px
    }

    .redactor-toolbar a:hover, .redactor-air a:hover {
        outline: none;
        color: #fff;
        background: var(--primary-color)
    }

    .redactor-toolbar a.redactor-button-active {
        background: rgba(245, 245, 245, 0.95);
        color: rgba(0, 0, 0, 0.4)
    }

    .redactor-toolbar a.redactor-button-disabled, .redactor-air a.redactor-button-disabled {
        opacity: 0.3
    }

        .redactor-toolbar a.redactor-button-disabled:hover, .redactor-air a.redactor-button-disabled:hover {
            color: #333;
            outline: none;
            background-color: transparent !important;
            cursor: default
        }

.redactor-source-view .redactor-toolbar {
    background: #252525
}

    .redactor-source-view .redactor-toolbar a {
        background: #000;
        color: #fff
    }

        .redactor-source-view .redactor-toolbar a:hover {
            background: var(--primary-color)
        }

        .redactor-source-view .redactor-toolbar a.redactor-button-disabled:hover {
            color: #fff !important;
            background-color: #000 !important
        }

.re-button-tooltip {
    display: none;
    position: absolute;
    white-space: nowrap;
    top: 0;
    z-index: 1052;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 3px;
    padding: 5px 9px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1;
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace
}

    .re-button-tooltip:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: none;
        border-bottom-color: rgba(0, 0, 0, 0.9);
        border-width: 4px;
        margin-left: -4px
    }

.redactor-toolbar-wrapper-air {
    position: absolute;
    z-index: 100
}

.redactor-air {
    padding: 6px 3px 2px 8px;
    max-width: 576px;
    min-width: 200px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.97)
}

    .redactor-air a {
        background: rgba(37, 37, 37, 0.95);
        box-shadow: none;
        color: rgba(255, 255, 255, 0.9)
    }

        .redactor-air a:hover {
            background: #3d79f2
        }

        .redactor-air a.redactor-button-active {
            background-color: rgba(255, 255, 255, 0.15);
            color: #fff
        }

        .redactor-air a.redactor-button-disabled:hover {
            color: #fff
        }

.redactor-air-helper {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    font-size: 15px;
    color: #000;
    background: rgba(255, 255, 255, 0.85);
    border-bottom-left-radius: 4px;
    padding: 7px 10px 6px 10px;
    cursor: pointer
}

    .redactor-air-helper:hover {
        background: #fff
    }

.redactor-voice-label {
    display: none
}

.redactor-context-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1051;
    background-color: rgba(0, 0, 0, 0.95);
    color: #555;
    border-radius: 4px;
    padding: 6px 18px 7px 18px;
    line-height: 1.5;
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace
}

    .redactor-context-toolbar a {
        font-size: 12px;
        color: #ccc;
        text-decoration: none;
        display: inline-block;
        padding: 2px 0 1px 12px
    }

        .redactor-context-toolbar a:first-child {
            padding-left: 0
        }

        .redactor-context-toolbar a i {
            position: relative;
            top: 3px;
            font-size: 16px
        }

        .redactor-context-toolbar a:before {
            content: '';
            padding-left: 10px;
            border-left: 1px solid rgba(255, 255, 255, 0.3)
        }

        .redactor-context-toolbar a:hover {
            color: #fff
        }

        .redactor-context-toolbar a:first-child:before {
            padding-left: 0;
            border-left: none
        }

    .redactor-context-toolbar[dir="rtl"] a {
        padding: 2px 12px 1px 0
    }

        .redactor-context-toolbar[dir="rtl"] a:first-child {
            padding-right: 0
        }

        .redactor-context-toolbar[dir="rtl"] a:before {
            padding-left: 0px;
            padding-right: 10px;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
            border-left: none
        }

        .redactor-context-toolbar[dir="rtl"] a:first-child:before {
            padding-right: 0;
            border-right: none
        }

.redactor-dropdown {
    display: none;
    position: absolute;
    z-index: 1051;
    background-color: #fff;
    border-radius: .250rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 0 2rem 0 var(--shadow-color);
    width: 264px;
    min-height: 40px;
    max-height: 250px;
    margin: 0;
    margin-top: -1px;
    overflow: auto;
    font-size: 15px;
    padding: 0
}

    .redactor-dropdown a span {
        display: inline-block;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 3px
    }

    .redactor-dropdown a {
        display: block;
        text-decoration: none;
        padding: 10px 8px;
        white-space: nowrap;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05)
    }

        .redactor-dropdown a:last-child {
            border-bottom-color: transparent
        }

    .redactor-dropdown a {
        color: #000
    }

        .redactor-dropdown a:hover {
            color: #fff !important;
            background-color: var(--primary-color) !important
        }

        .redactor-dropdown a.redactor-dropdown-item-disabled {
            color: rgba(0, 0, 0, 0.4);
            background: #fff
        }

.redactor-dropdown-cells {
    margin: 10px auto
}

    .redactor-dropdown-cells a, .redactor-dropdown-cells span {
        float: left;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        padding: 0;
        margin: 0;
        font-size: 14px
    }

.redactor-dropdown-selector {
    display: flex;
    text-align: center
}

    .redactor-dropdown-selector span {
        flex-grow: 1;
        font-size: 12px;
        padding: 8px;
        cursor: pointer
    }

        .redactor-dropdown-selector span:hover {
            background: #eee
        }

        .redactor-dropdown-selector span.active {
            cursor: text;
            color: rgba(0, 0, 0, 0.3);
            background: #eee
        }

.redactor-dropdown-format .redactor-dropdown-item-blockquote {
    color: rgba(0, 0, 0, 0.4);
    font-style: italic
}

.redactor-dropdown-format .redactor-dropdown-item-pre {
    font-family: monospace, sans-serif
}

.redactor-dropdown-format .redactor-dropdown-item-h1 {
    font-size: 40px;
    font-weight: bold;
    line-height: 32px
}

.redactor-dropdown-format .redactor-dropdown-item-h2 {
    font-size: 32px;
    font-weight: bold;
    line-height: 32px
}

.redactor-dropdown-format .redactor-dropdown-item-h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 24px
}

.redactor-dropdown-format .redactor-dropdown-item-h4 {
    font-size: 21px;
    font-weight: bold;
    line-height: 24px
}

.redactor-dropdown-format .redactor-dropdown-item-h5 {
    font-size: 18px;
    font-weight: bold;
    line-height: 24px
}

.redactor-dropdown-format .redactor-dropdown-item-h6 {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 24px
}

#redactor-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1051;
    line-height: 24px
}

.redactor-modal {
    position: relative;
    margin: 16px auto;
    padding: 0;
    background-color: #fff;
    border-radius: .250rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 0 2rem 0 var(--shadow-color);
    color: #000
}

    .redactor-modal form {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    .redactor-modal input, .redactor-modal select, .redactor-modal textarea {
        box-sizing: border-box;
        display: block;
        width: 100%;
        font-family: inherit;
        font-size: 16px;
        height: 40px;
        outline: none;
        vertical-align: middle;
        background: #fff;
        border: 0px solid var(--grey-color-300);
        color: var(--body-color);
        border-radius: .250rem;
        font-weight: 400;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
        padding: 0 .5em
    }

    .redactor-modal textarea {
        padding: .5em;
        height: auto;
        line-height: 1.5;
        vertical-align: top
    }

    .redactor-modal select {
        -webkit-appearance: none;
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23212529' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1rem center;
        background-repeat: no-repeat;
        background-size: auto auto;
        background-size: 8px 10px;
        background-position: right .65em center;
        padding-right: 28px
    }

        .redactor-modal select[multiple] {
            background-image: none;
            height: auto;
            padding: .5em .75em
        }

    .redactor-modal input[type="file"] {
        width: auto;
        border: none;
        padding: 0;
        height: auto;
        background: none;
        box-shadow: none;
        display: inline-block
    }

    .redactor-modal input[type="radio"], .redactor-modal input[type="checkbox"] {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 0;
        vertical-align: middle;
        position: relative;
        bottom: 0.15rem;
        font-size: 115%;
        margin-right: 3px
    }

    .redactor-modal .form-item {
        margin-bottom: 20px
    }

        .redactor-modal .form-item:last-child {
            margin-bottom: 0
        }

    .redactor-modal fieldset {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 16px;
        padding-bottom: 20px;
        margin-bottom: 20px
    }

        .redactor-modal fieldset .form-item {
            margin-bottom: 12px
        }

    .redactor-modal label {
        display: block;
        color: #555;
        margin-bottom: 0.25em;
        font-size: 14px
    }

        .redactor-modal label .desc, .redactor-modal label .success, .redactor-modal label .error {
            text-transform: none;
            font-weight: normal
        }

        .redactor-modal label.checkbox {
            font-size: 16px;
            line-height: 1.5;
            cursor: pointer;
            color: inherit
        }

    .redactor-modal .form-checkboxes label.checkbox {
        display: inline-block;
        margin-right: 1em
    }

    .redactor-modal input:hover, .redactor-modal textarea:hover, .redactor-modal select:hover {
        outline: none;
        background-color: #fff
    }

    .redactor-modal input:focus, .redactor-modal textarea:focus, .redactor-modal select:focus {
        transition: all linear .2s;
        outline: none;
        background-color: #fff;
        border-color: rgba(0, 125, 255, 0.5);
        box-shadow: 0 0 0 3px rgba(102, 126, 234,.5)
    }

    .redactor-modal input.error, .redactor-modal textarea.error, .redactor-modal select.error {
        background-color: rgba(255, 50, 101, 0.1);
        border: 1px solid #ff7f9e
    }

        .redactor-modal input.error:focus, .redactor-modal textarea.error:focus, .redactor-modal select.error:focus {
            border-color: #ff3265;
            box-shadow: 0 0 1px #ff3265
        }

    .redactor-modal input.success, .redactor-modal textarea.success, .redactor-modal select.success {
        background-color: rgba(47, 196, 182, 0.1);
        border: 1px solid #65dacf
    }

        .redactor-modal input.success:focus, .redactor-modal textarea.success:focus, .redactor-modal select.success:focus {
            border-color: #2fc4b6;
            box-shadow: 0 0 1px #2fc4b6
        }

    .redactor-modal input:disabled, .redactor-modal input:disabled:hover, .redactor-modal input.disabled, .redactor-modal input.disabled:hover, .redactor-modal textarea:disabled, .redactor-modal textarea:disabled:hover, .redactor-modal textarea.disabled, .redactor-modal textarea.disabled:hover, .redactor-modal select:disabled, .redactor-modal select:disabled:hover, .redactor-modal select.disabled, .redactor-modal select.disabled:hover {
        resize: none;
        opacity: .6;
        cursor: default;
        font-style: italic;
        color: rgba(0, 0, 0, 0.5);
        border: 1px solid #cacfd4;
        box-shadow: none;
        background-color: #fff
    }

    .redactor-modal .req {
        position: relative;
        top: 1px;
        font-weight: bold;
        color: #ff3265;
        font-size: 110%
    }

    .redactor-modal .desc {
        color: rgba(51, 51, 51, 0.5);
        font-size: 12px
    }

    .redactor-modal span.desc {
        margin-left: 0.25em
    }

    .redactor-modal div.desc {
        margin-top: 0.25em
    }

    .redactor-modal span.success, .redactor-modal span.error {
        font-size: 12px;
        margin-left: 0.25em
    }

    .redactor-modal div.desc {
        margin-bottom: -0.5em
    }

    .redactor-modal .redactor-close {
        position: absolute;
        top: 16px;
        right: 12px;
        font-size: 30px;
        line-height: 30px;
        padding: 0px 4px;
        color: #000;
        opacity: .3;
        cursor: pointer
    }

        .redactor-modal .redactor-close:hover {
            opacity: 1
        }

        .redactor-modal .redactor-close:before {
            content: '\00d7'
        }

    .redactor-modal button {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        text-align: center;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        color: var(--primary-color);
        background-color: #fff;
        border-radius: 3px;
        border: 2px solid var(--primary-color);
        min-height: 40px;
        outline: none;
        padding: 0.5em 1.25em;
        cursor: pointer;
        line-height: 1.2;
        vertical-align: middle;
        -webkit-appearance: none
    }

        .redactor-modal button:hover {
            outline: none;
            text-decoration: none;
            background: none;
            color: #fff;
            background-color: var(--primary-color);
            border-color: var(--primary-color-hover)
        }

        .redactor-modal button.redactor-button-secondary {
            border-color: #2a2e34;
            color: #2a2e34
        }

            .redactor-modal button.redactor-button-secondary:hover {
                color: rgba(42, 46, 52, 0.6);
                border-color: rgba(42, 46, 52, 0.5)
            }

        .redactor-modal button.redactor-button-danger, .redactor-modal button.redactor-button-unstyled {
            background: none;
            border-color: transparent;
            color: rgba(42, 46, 52, 0.6)
        }

            .redactor-modal button.redactor-button-danger:hover, .redactor-modal button.redactor-button-unstyled:hover {
                background: none;
                border-color: transparent;
                color: #ff3265;
                text-decoration: underline
            }

    .redactor-modal .redactor-modal-group:after {
        content: "";
        display: table;
        clear: both
    }

    .redactor-modal .redactor-modal-side {
        float: left;
        width: 30%;
        margin-right: 4%
    }

        .redactor-modal .redactor-modal-side img {
            max-width: 100%;
            height: auto;
            display: block
        }

    .redactor-modal .redactor-modal-area {
        float: left;
        width: 66%
    }

    .redactor-modal[dir="rtl"] .redactor-close {
        left: 12px;
        right: auto
    }

    .redactor-modal[dir="rtl"] textarea {
        direction: ltr;
        text-align: left
    }

    .redactor-modal[dir="rtl"] .redactor-modal-footer button.redactor-button-unstyled {
        float: left;
        margin-left: 0
    }

.redactor-modal-header {
    padding: 20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

    .redactor-modal-header:empty {
        display: none
    }

.redactor-modal-body {
    padding: 32px 48px;
    padding-bottom: 40px
}

.redactor-modal-footer {
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden
}

    .redactor-modal-footer button {
        margin-right: 4px
    }

        .redactor-modal-footer button.redactor-button-unstyled {
            margin-right: 0;
            float: right
        }

    .redactor-modal-footer:empty {
        display: none
    }

.redactor-modal-tabs {
    display: flex;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 1em
}

    .redactor-modal-tabs a {
        font-size: 15px;
        padding: 2px 0;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.5);
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        margin-right: 14px
    }

        .redactor-modal-tabs a:hover {
            transition: all linear .2s
        }

        .redactor-modal-tabs a:hover, .redactor-modal-tabs a.active {
            font-weight: 500;
            color: #007dff;
            border-bottom-color: #007dff
        }

.redactor-styles {
    margin: 0;
    padding: 1rem;
    font-size: 1em;
    line-height: 1.5;
    box-sizing: border-box
}

    .redactor-styles *, .redactor-styles *:before, .redactor-styles *:after {
        box-sizing: inherit
    }

    .redactor-styles[dir="rtl"] {
        direction: rtl;
        unicode-bidi: embed
    }

        .redactor-styles[dir="rtl"] ul li, .redactor-styles[dir="rtl"] ol li {
            text-align: right
        }

        .redactor-styles[dir="rtl"] ul, .redactor-styles[dir="rtl"] ol, .redactor-styles[dir="rtl"] ul ul, .redactor-styles[dir="rtl"] ol ol, .redactor-styles[dir="rtl"] ul ol, .redactor-styles[dir="rtl"] ol ul {
            margin: 0 1.5em 0 0
        }

        .redactor-styles[dir="rtl"] figcaption {
            text-align: right
        }

    .redactor-styles ul[dir="rtl"], .redactor-styles ul[dir="rtl"] ul, .redactor-styles ul[dir="rtl"] ol, .redactor-styles ol[dir="rtl"], .redactor-styles ol[dir="rtl"] ul, .redactor-styles ol[dir="rtl"] ol {
        margin: 0 1.5em 0 0
    }

        .redactor-styles ul[dir="rtl"] li, .redactor-styles ol[dir="rtl"] li {
            text-align: right
        }

    .redactor-styles a, .redactor-styles a:hover {
        color: #3397ff
    }

    .redactor-styles p, .redactor-styles dl, .redactor-styles blockquote, .redactor-styles hr, .redactor-styles pre, .redactor-styles table, .redactor-styles figure, .redactor-styles address {
        padding: 0;
        margin: 0;
        margin-bottom: 1em
    }

    .redactor-styles ul, .redactor-styles ol {
        padding: 0
    }

        .redactor-styles ul, .redactor-styles ul ul, .redactor-styles ul ol, .redactor-styles ol, .redactor-styles ol ul, .redactor-styles ol ol {
            margin: 0 0 0 1.5em
        }

            .redactor-styles ul li, .redactor-styles ol li {
                text-align: left
            }

            .redactor-styles ol ol li {
                list-style-type: lower-alpha
            }

            .redactor-styles ol ol ol li {
                list-style-type: lower-roman
            }

    .redactor-styles ul, .redactor-styles ol {
        margin-bottom: 1em
    }

    .redactor-styles h1, .redactor-styles h2, .redactor-styles h3, .redactor-styles h4, .redactor-styles h5, .redactor-styles h6 {
        font-weight: bold;
        color: #2a2e34;
        text-rendering: optimizeLegibility;
        margin: 0;
        padding: 0;
        margin-bottom: 0.5em;
        line-height: 1.2
    }

    .redactor-styles h1 {
        font-size: 2.0736em
    }

    .redactor-styles h2 {
        font-size: 1.728em
    }

    .redactor-styles h3 {
        font-size: 1.44em
    }

    .redactor-styles h4 {
        font-size: 1.2em
    }

    .redactor-styles h5 {
        font-size: 1em
    }

    .redactor-styles h6 {
        font-size: 0.83333em;
        text-transform: uppercase;
        letter-spacing: .035em
    }

    .redactor-styles blockquote {
        font-style: italic;
        color: rgba(0, 0, 0, 0.5);
        border: none
    }

    .redactor-styles table {
        width: 100%
    }

    .redactor-styles time, .redactor-styles small, .redactor-styles var, .redactor-styles code, .redactor-styles kbd, .redactor-styles mark {
        display: inline-block;
        font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
        font-size: 87.5%;
        line-height: 1;
        color: rgba(51, 51, 51, 0.9)
    }

    .redactor-styles var, .redactor-styles cite {
        opacity: .6
    }

    .redactor-styles var {
        font-style: normal
    }

    .redactor-styles dfn, .redactor-styles abbr {
        text-transform: uppercase
    }

        .redactor-styles dfn[title], .redactor-styles abbr[title] {
            text-decoration: none;
            border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
            cursor: help
        }

    .redactor-styles code, .redactor-styles kbd {
        position: relative;
        top: -1px;
        padding: 0.25em;
        padding-bottom: 0.2em;
        border-radius: 2px
    }

    .redactor-styles code {
        background-color: #eff1f2
    }

    .redactor-styles mark {
        border-radius: 2px;
        padding: 0.125em 0.25em;
        background-color: #fdb833
    }

    .redactor-styles kbd {
        border: 1px solid #e5e7e9
    }

    .redactor-styles sub, .redactor-styles sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }

    .redactor-styles sub {
        bottom: -0.25em
    }

    .redactor-styles sup {
        top: -0.5em
    }

    .redactor-styles pre {
        font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
        font-size: .9em
    }

        .redactor-styles pre, .redactor-styles pre code {
            background-color: #f6f7f8;
            padding: 0;
            top: 0;
            display: block;
            line-height: 1.5;
            color: rgba(51, 51, 51, 0.85);
            overflow: none;
            white-space: pre-wrap
        }

    .redactor-styles pre {
        padding: 1rem
    }

    .redactor-styles table {
        border-collapse: collapse;
        max-width: 100%;
        width: 100%
    }

        .redactor-styles table caption {
            text-transform: uppercase;
            padding: 0;
            color: rgba(0, 0, 0, 0.5);
            font-size: 11px
        }

        .redactor-styles table th, .redactor-styles table td {
            border: 1px solid #eee;
            padding: 16px;
            padding-bottom: 15px
        }

        .redactor-styles table tfoot th, .redactor-styles table tfoot td {
            color: rgba(0, 0, 0, 0.5)
        }

    .redactor-styles img, .redactor-styles video, .redactor-styles audio, .redactor-styles embed, .redactor-styles object {
        max-width: 100%
    }

    .redactor-styles img, .redactor-styles video, .redactor-styles embed, .redactor-styles object {
        height: auto !important
    }

    .redactor-styles img {
        vertical-align: middle;
        -ms-interpolation-mode: bicubic
    }

    .redactor-styles figcaption {
        display: block;
        opacity: .6;
        font-size: 12px;
        font-style: italic;
        text-align: left
    }

.upload-redactor-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 5px dashed rgba(0, 125, 255, 0.15);
    position: relative;
    width: 100%;
    min-height: 220px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: center
}

.upload-redactor-placeholder {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.3);
    font-style: italic
}

.upload-redactor-hover {
    background-color: rgba(0, 125, 255, 0.075)
}

.upload-redactor-error {
    background-color: rgba(255, 50, 101, 0.075)
}

.upload-redactor-box-hover {
    outline: 5px dashed rgba(0, 125, 255, 0.3)
}

.upload-redactor-box-error {
    outline: 5px dashed rgba(255, 50, 101, 0.3)
}

.redactor-structure h1, .redactor-structure h2, .redactor-structure h3, .redactor-structure h4, .redactor-structure h5, .redactor-structure h6, .redactor-structure div, .redactor-structure p {
    position: relative
}

    .redactor-structure h1:before, .redactor-structure h2:before, .redactor-structure h3:before, .redactor-structure h4:before, .redactor-structure h5:before, .redactor-structure h6:before, .redactor-structure div:before, .redactor-structure p:before {
        width: 24px;
        position: absolute;
        font-size: 10px;
        font-weight: normal;
        opacity: .5;
        left: -26px;
        top: 50%;
        margin-top: -7px;
        text-align: right
    }

    .redactor-structure h1:before {
        content: "h1"
    }

    .redactor-structure h2:before {
        content: "h2"
    }

    .redactor-structure h3:before {
        content: "h3"
    }

    .redactor-structure h4:before {
        content: "h4"
    }

    .redactor-structure h5:before {
        content: "h5"
    }

    .redactor-structure h6:before {
        content: "h6"
    }

    .redactor-structure div:before {
        content: "div"
    }

    .redactor-structure p:before {
        content: "p"
    }

#redactor-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000;
    height: 10px
}

    #redactor-progress span {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
        -webkit-animation: progress-bar-stripes 2s linear infinite;
        animation: progress-bar-stripes 2s linear infinite;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #007dff;
        background-size: 40px 40px
    }

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

.redactor-box-fullscreen {
    z-index: 1051;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

.redactor-box-fullscreen-target {
    position: absolute !important
}

.redactor-body-fullscreen .redactor-dropdown, .redactor-body-fullscreen .redactor-context-toolbar {
    z-index: 1052
}

.redactor-body-fullscreen #redactor-overlay {
    z-index: 1098
}

.redactor-body-fullscreen #redactor-modal {
    z-index: 1099
}

#redactor-modal .images-wrap {
    -webkit-column-count: 4;
    column-count: 4;
    -webkit-column-gap: .5rem;
    column-gap: .5rem;
    counter-reset: item-counter
}

    #redactor-modal .images-wrap > .item {
        display: inline-block;
        width: 100%;
        margin-bottom: .5rem;
        border: 2px solid rgba(0,0,0,0.1);
        padding: .250rem;
        text-align: center
    }

.redactor-wicons-list {
    list-style: none;
    margin: 0;
    padding: 0.5em;
    -moz-column-gap: .5em;
    -webkit-column-gap: .5em;
    column-gap: .5em;
    -moz-column-count: 12;
    -webkit-column-count: 12;
    column-count: 12;
    max-height: 400px;
    overflow: auto
}

    .redactor-wicons-list li {
        list-style: none;
        display: inline-block;
        margin: 0 0 .5em;
        box-sizing: border-box;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        cursor: pointer;
        border-radius: .188em;
        text-align: center
    }

        .redactor-wicons-list li.redactor-wicons-item-selected {
            background: #ee698a
        }

.redactor-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap
}

    .redactor-widget-list li {
        list-style: none;
        margin: 0;
        padding: 0;
        cursor: pointer;
        -ms-grid-row-align: auto;
        align-self: auto;
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: calc(var(--gutter) / 2);
        margin-bottom: calc(var(--gutter) / 2)
    }

        .redactor-widget-list li div {
            font-size: .750rem;
            font-weight: 500;
            background-color: var(--primary-color);
            color: #fff;
            padding: .5rem;
            border-radius: .250rem
        }

.redactor-in div:not(.row) {
    outline-offset: -2px;
    min-height: 2rem;
    outline: 1px dashed rgba(102, 126, 234, 0.8) !important
}

[data-tooltip] {
    position: relative
}

    [data-tooltip]:before {
        pointer-events: none;
        position: absolute;
        content: '';
        font-size: 1rem;
        width: 0.71428571em;
        height: 0.71428571em;
        background: #FFFFFF;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 200;
        box-shadow: 1px 1px 0px 0px #bababc
    }

    [data-tooltip]:after {
        pointer-events: none;
        content: attr(data-tooltip);
        position: absolute;
        text-transform: none;
        text-align: left;
        white-space: nowrap;
        font-size: .750rem;
        border: 1px solid #D4D4D5;
        line-height: 1.4285em;
        max-width: none;
        background: #FFFFFF;
        padding: 0.5em 1em;
        font-weight: normal;
        font-style: normal;
        color: rgba(0, 0, 0, 0.87);
        border-radius: 0.250rem;
        box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
        z-index: 100
    }

    [data-tooltip]:not([data-position]):before {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 50%;
        background: #FFFFFF;
        margin-left: -0.07142857rem;
        margin-bottom: 0
    }

    [data-tooltip]:not([data-position]):after {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 100%;
        margin-bottom: 0.5em
    }

    [data-tooltip]:before, [data-tooltip]:after {
        pointer-events: none;
        visibility: hidden
    }

    [data-tooltip]:before {
        opacity: 0;
        -webkit-transform: rotate(45deg) scale(0) !important;
        transform: rotate(45deg) scale(0) !important;
        -webkit-transform-origin: center top;
        transform-origin: center top;
        transition: all 0.1s ease
    }

    [data-tooltip]:after {
        opacity: 1;
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        transition: all 0.1s ease
    }

    [data-tooltip]:hover:before, [data-tooltip]:hover:after {
        visibility: visible;
        pointer-events: auto
    }

    [data-tooltip]:hover:before {
        -webkit-transform: rotate(45deg) scale(1) !important;
        transform: rotate(45deg) scale(1) !important;
        opacity: 1
    }

    [data-tooltip]:after, [data-tooltip][data-position="top center"]:after, [data-tooltip][data-position="bottom center"]:after {
        -webkit-transform: translateX(-50%) scale(0) !important;
        transform: translateX(-50%) scale(0) !important
    }

    [data-tooltip]:hover:after, [data-tooltip][data-position="bottom center"]:hover:after {
        -webkit-transform: translateX(-50%) scale(1) !important;
        transform: translateX(-50%) scale(1) !important
    }

    [data-tooltip][data-position="left center"]:after, [data-tooltip][data-position="right center"]:after {
        -webkit-transform: translateY(-50%) scale(0) !important;
        transform: translateY(-50%) scale(0) !important
    }

    [data-tooltip][data-position="left center"]:hover:after, [data-tooltip][data-position="right center"]:hover:after {
        -webkit-transform: translateY(-50%) scale(1) !important;
        transform: translateY(-50%) scale(1) !important
    }

    [data-tooltip][data-position="top left"]:after, [data-tooltip][data-position="top right"]:after, [data-tooltip][data-position="bottom left"]:after, [data-tooltip][data-position="bottom right"]:after {
        -webkit-transform: scale(0) !important;
        transform: scale(0) !important
    }

    [data-tooltip][data-position="top left"]:hover:after, [data-tooltip][data-position="top right"]:hover:after, [data-tooltip][data-position="bottom left"]:hover:after, [data-tooltip][data-position="bottom right"]:hover:after {
        -webkit-transform: scale(1) !important;
        transform: scale(1) !important
    }

    [data-tooltip][data-inverted]:before {
        box-shadow: none !important
    }

    [data-tooltip][data-inverted]:before {
        background: #1B1C1D
    }

    [data-tooltip][data-inverted]:after {
        background: #1B1C1D;
        color: #FFFFFF;
        border: none;
        box-shadow: none
    }

        [data-tooltip][data-inverted]:after .header {
            background-color: none;
            color: #FFFFFF
        }

[data-position="top center"][data-tooltip]:after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-bottom: 0.5em
}

[data-position="top center"][data-tooltip]:before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    background: #FFFFFF;
    margin-left: -0.07142857rem;
    margin-bottom: 0
}

[data-position="top left"][data-tooltip]:after {
    top: auto;
    right: auto;
    left: 0;
    bottom: 100%;
    margin-bottom: 0.5em
}

[data-position="top left"][data-tooltip]:before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 1em;
    margin-left: -0.07142857rem;
    margin-bottom: 0.14285714rem
}

[data-position="top right"][data-tooltip]:after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 100%;
    margin-bottom: 0.5em
}

[data-position="top right"][data-tooltip]:before {
    top: auto;
    left: auto;
    bottom: 100%;
    right: 1em;
    margin-left: -0.07142857rem;
    margin-bottom: 0.14285714rem
}

[data-position="bottom center"][data-tooltip]:after {
    bottom: auto;
    right: auto;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.5em
}

[data-position="bottom center"][data-tooltip]:before {
    bottom: auto;
    right: auto;
    top: 100%;
    left: 50%;
    margin-left: -0.07142857rem;
    margin-top: 0.14285714rem
}

[data-position="bottom left"][data-tooltip]:after {
    left: 0;
    top: 100%;
    margin-top: 0.5em
}

[data-position="bottom left"][data-tooltip]:before {
    bottom: auto;
    right: auto;
    top: 100%;
    left: 1em;
    margin-left: -0.07142857rem;
    margin-top: 0.14285714rem
}

[data-position="bottom right"][data-tooltip]:after {
    right: 0;
    top: 100%;
    margin-top: 0.5em
}

[data-position="bottom right"][data-tooltip]:before {
    bottom: auto;
    left: auto;
    top: 100%;
    right: 1em;
    margin-left: -0.14285714rem;
    margin-top: 0.07142857rem
}

[data-position="left center"][data-tooltip]:after {
    right: 100%;
    top: 50%;
    margin-right: 0.5em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-position="left center"][data-tooltip]:before {
    right: 100%;
    top: 50%;
    margin-top: -0.14285714rem;
    margin-right: -0.07142857rem
}

[data-position="right center"][data-tooltip]:after {
    left: 100%;
    top: 50%;
    margin-left: 0.5em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

[data-position="right center"][data-tooltip]:before {
    left: 100%;
    top: 50%;
    margin-top: -0.07142857rem;
    margin-left: 0.14285714rem
}

[data-position~="bottom"][data-tooltip]:before {
    background: #FFFFFF;
    box-shadow: -1px -1px 0px 0px #bababc
}

[data-position="left center"][data-tooltip]:before {
    background: #FFFFFF;
    box-shadow: 1px -1px 0px 0px #bababc
}

[data-position="right center"][data-tooltip]:before {
    background: #FFFFFF;
    box-shadow: -1px 1px 0px 0px #bababc
}

[data-position~="top"][data-tooltip]:before {
    background: #FFFFFF
}

[data-inverted][data-position~="bottom"][data-tooltip]:before {
    background: #1B1C1D;
    box-shadow: -1px -1px 0px 0px #bababc
}

[data-inverted][data-position="left center"][data-tooltip]:before {
    background: #1B1C1D;
    box-shadow: 1px -1px 0px 0px #bababc
}

[data-inverted][data-position="right center"][data-tooltip]:before {
    background: #1B1C1D;
    box-shadow: -1px 1px 0px 0px #bababc
}

[data-inverted][data-position~="top"][data-tooltip]:before {
    background: #1B1C1D
}

[data-position~="bottom"][data-tooltip]:before {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

[data-position~="bottom"][data-tooltip]:after {
    -webkit-transform-origin: center top;
    transform-origin: center top
}

[data-position="left center"][data-tooltip]:before {
    -webkit-transform-origin: top center;
    transform-origin: top center
}

[data-position="left center"][data-tooltip]:after {
    -webkit-transform-origin: right center;
    transform-origin: right center
}

[data-position="right center"][data-tooltip]:before {
    -webkit-transform-origin: right center;
    transform-origin: right center
}

[data-position="right center"][data-tooltip]:after {
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.jqstooltip {
    background-color: rgba(34,55,64,.9);
    border-radius: .250rem;
    color: #ffffff;
    font-size: 0.750rem;
    width: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
    text-align: left;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08)
}

.jqsfield {
    padding: .250rem;
    text-align: left
}

.morris-hover {
    position: absolute;
    z-index: 1000
}

    .morris-hover.morris-default-style {
        background-color: rgba(34,55,64,.9);
        font-size: 0.875rem;
        text-align: center;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        z-index: 1000;
        line-height: 1.250em;
        padding: .5em .75em;
        color: rgba(0, 0, 0, 0.87);
        border-radius: 0.188rem;
        box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08)
    }

        .morris-hover.morris-default-style .morris-hover-row-label {
            font-weight: 700;
            margin: 0.25em 0;
            color: #fff
        }

        .morris-hover.morris-default-style .morris-hover-point {
            white-space: nowrap;
            margin: 0.1em 0
        }

.wojo.menu {
    position: relative;
    width: 100%;
    z-index: 100;
    line-height: normal;
    background: #fff
}

    .wojo.menu a {
        color: #777
    }

    .wojo.menu ul {
        margin: 0;
        padding: 0;
        text-align: center
    }

    .wojo.menu li {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
        position: relative;
        line-height: normal;
        vertical-align: middle
    }

        .wojo.menu li a {
            display: flex;
            flex-flow: column;
            position: relative;
            padding: 1rem 2rem;
            line-height: 1rem;
            font-weight: 500;
            align-items: center;
            color: var(--grey-color);
            transition: none
        }

            .wojo.menu li a:hover {
                color: var(--primary-color)
            }

            .wojo.menu li a img {
                font-size: 2rem;
                margin-bottom: .5rem;
                width: 3rem;
                opacity: .75;
                transition: all .35s ease
            }

            .wojo.menu li a:hover img {
                opacity: 1
            }

    .wojo.menu ul li {
        display: inline-block
    }

        .wojo.menu ul li ul li a {
            align-items: start
        }

    .wojo.menu ul ul {
        top: auto;
        min-width: 220px;
        position: absolute;
        z-index: 100;
        text-align: left;
        display: none;
        background: #fff;
        box-shadow: 0 20px 34px -16px var(--primary-color-shadow)
    }

    .wojo.menu li li {
        display: block
    }

    .wojo.menu ul ul ul {
        top: 0;
        left: 220px
    }

    .wojo.menu > ul > li:hover > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
        top: 0
    }

    .wojo.menu > ul > li.drop-left > ul {
        right: 0
    }

    .wojo.menu li.drop-left ul ul {
        left: auto;
        right: 220px
    }

    .wojo.menu.fixed {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 101
    }

body.wojo.menu-noscroll-x {
    overflow-x: hidden
}

.wojo.menu li.has-sub > a::after {
    font-family: 'WojoIcons';
    content: "\e948";
    margin-left: .750rem;
    display: inline-block;
    position: absolute;
    right: -1rem;
    bottom: 1rem
}

.wojo.menu li li.has-sub > a::after {
    margin-left: .750rem;
    transform: translateY(-50%);
    right: .5rem;
    content: "\e94a";
    position: absolute;
    top: 50%
}

.wojo.menu li.drop-left li.has-sub > a::after {
    left: .5rem;
    right: auto;
    margin-right: .750rem;
    content: "\e949"
}

.wojo.menu.hide-arrows li.has-sub > a:after, .wojo.menu.hide-arrows li li.has-sub > a:after, .wojo.menu.hide-arrows li.drop-left li.has-sub > a:after {
    display: none
}

.wojo.menu .close-menu {
    display: none;
    text-transform: uppercase;
    text-decoration: none
}

.wojo.menu .dd-toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 3rem;
    height: 3rem;
    text-align: center;
    z-index: 101;
    border: 0
}

    .wojo.menu .dd-toggle .icon {
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%)
    }

.wojo.menu.desktop li.has-sub a {
    padding-right: .5rem
}

.wojo.menu.desktop.hide-arrows li.has-sub a {
    padding-right: 1rem
}

.wojo.menu.mobile > ul > li > a.dd-toggle {
    padding: 0
}

.menu-toggle {
    display: none
}

.wojo.menu.mobile {
    position: static
}

    .wojo.menu.mobile.fixed {
        position: static
    }

    .wojo.menu.mobile ul {
        position: relative;
        display: none
    }

    .wojo.menu.mobile.active {
        padding-bottom: 0
    }

        .wojo.menu.mobile.active > ul {
            display: block
        }

    .wojo.menu.mobile ul {
        text-align: left
    }

    .wojo.menu.mobile > ul > li {
        display: block
    }

        .wojo.menu.mobile > ul > li > a {
            padding: 15px
        }

    .wojo.menu.mobile ul {
        background: #fff
    }

        .wojo.menu.mobile ul ul {
            position: relative;
            opacity: 1;
            visibility: visible;
            width: auto;
            display: none;
            -webkit-transition: none;
            transition: none
        }

            .wojo.menu.mobile ul ul ul {
                left: auto;
                top: auto
            }

    .wojo.menu.mobile li.drop-left ul ul {
        right: auto
    }

    .wojo.menu.mobile li a {
        border-bottom: 1px solid rgba(255, 255, 255, .15)
    }

    .wojo.menu.mobile > ul {
        border-top: 1px solid rgba(255, 255, 255, .15)
    }

    .wojo.menu.mobile li a.dd-toggle {
        border: 0
    }

    .wojo.menu.mobile.light li a.dd-toggle {
        border: 0
    }

    .wojo.menu.mobile .dd-toggle {
        display: inline-block
    }

    .wojo.menu.mobile li.has-sub > a:after, .wojo.menu.mobile li li.has-sub > a:after, .wojo.menu.mobile li.drop-left li.has-sub > a:after {
        display: none
    }

    .wojo.menu.mobile.right > ul, .wojo.menu.mobile.left > ul {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 280px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 20px 34px -16px var(--primary-color-shadow)
    }

    .wojo.menu.mobile.right > ul {
        right: 0
    }

    .wojo.menu.mobile.right .close-menu, .wojo.menu.mobile.left .close-menu {
        display: block;
        text-align: right
    }

    .wojo.menu.mobile.left > ul {
        left: 0
    }

.wojo.menu.desktop li.mega ul ul {
    background: none
}

.wojo.menu.desktop li.mega li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px
}

    .wojo.menu.desktop li.mega li li {
        display: block;
        position: relative;
        left: 4px
    }

.wojo.menu.desktop li.mega ul ul {
    width: auto
}

.wojo.menu.desktop > ul > li.mega {
    position: inherit
}

    .wojo.menu.desktop > ul > li.mega > ul {
        width: 100%
    }

        .wojo.menu.desktop > ul > li.mega > ul li.has-sub ul {
            display: block;
            position: relative;
            left: auto
        }

        .wojo.menu.desktop > ul > li.mega > ul > li {
            padding-bottom: 1rem;
            box-sizing: border-box
        }

.wojo.menu.desktop li.mega li li a {
    padding: .5rem 1rem
}

.wojo.menu.desktop li.mega li.has-sub a:after {
    display: none
}

.wojo.menu.desktop > ul > li.mega > ul > li > a {
    color: yellow
}

@media only screen and (max-width :768px) {
    .wojo.menu {
        overflow: hidden;
        display: block
    }

        .wojo.menu ul {
            position: relative;
            display: none
        }

        .wojo.menu .menu-toggle, .wojo.menu .close-menu {
            padding: 1rem;
            align-items: center;
            display: flex
        }

    .menu-toggle {
        padding: 1rem;
        align-items: center;
        display: flex;
        color: #fff
    }
}

.wojo.progress {
    width: 100%;
    height: 1.5rem;
    background: var(--grey-color-300);
    position: relative;
    margin-bottom: 1rem;
    border-radius: .250rem
}

    .wojo.progress .bar {
        display: block;
        position: relative;
        width: 0px;
        height: 100%;
        background: var(--grey-color);
        border-radius: .250rem;
        z-index: 1
    }

    .wojo.progress .label {
        font-weight: 700;
        margin-top: .250em;
        text-align: center;
        font-size: .875rem
    }

    .wojo.progress .tipWrap {
        display: none
    }

    .wojo.progress .tip {
        position: absolute;
        z-index: 2;
        transform: translateY(-50%);
        right: .5rem;
        font-size: .750rem;
        font-weight: 600;
        top: 50%;
        color: rgba(255,255,255,0.7)
    }

.wojo.primary.progress .bar {
    background: var(--primary-color)
}

.wojo.secondary.progress .bar {
    background: var(--secondary-color)
}

.wojo.positive.progress .bar {
    background: var(--positive-color)
}

.wojo.negative.progress .bar {
    background: var(--negative-color)
}

.wojo.dark.progress .bar {
    background: var(--dark-color)
}

.wojo.transparent.progress .bar {
    background-color: rgba(255,255,255,0.5)
}

.wojo.active.progress .bar::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #ffffff;
    border-radius: .250rem;
    -webkit-animation: progress-active 2s ease infinite;
    animation: progress-active 2s ease infinite
}

@-webkit-keyframes progress-active {
    0% {
        opacity: 0.3;
        width: 0
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

@keyframes progress-active {
    0% {
        opacity: 0.3;
        width: 0
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.wojo.progress.attached {
    background: transparent;
    position: absolute;
    border: none;
    margin: 0;
    left: 0
}

    .wojo.progress.attached, .wojo.progress.attached .bar {
        overflow: hidden;
        border-radius: 0
    }

        .wojo.progress.attached .bar {
            border-radius: 0
        }

.wojo.progress.top.attached, .wojo.progress.top.attached .bar {
    top: 0
}

.wojo.progress.bottom.attached, .wojo.progress.bottom.attached .bar {
    bottom: 0
}

.wojo.progress.fitted {
    margin-bottom: 0
}

.wojo.tiny.progress {
    height: .25rem
}

.wojo.mini.progress {
    height: .5rem
}

.wojo.small.progress {
    height: 1rem
}

.wojo.tiny.text {
    font-size: 0.688rem
}

.wojo.mini.text {
    font-size: 0.750rem
}

.wojo.small.text {
    font-size: 0.875rem
}

.wojo.normal.text {
    font-size: 1rem
}

.wojo.medium.text {
    font-size: 1.25rem
}

.wojo.large.text {
    font-size: 1.625rem
}

.wojo.big.text {
    font-size: 2.250rem
}

.wojo.huge.text {
    font-size: 2.75rem
}

.wojo.massive.text {
    font-size: 3.250rem
}

.wojo.thin.text {
    font-weight: 300
}

.wojo.light.text {
    font-weight: 400
}

.wojo.semi.text {
    font-weight: 500
}

.wojo.demi.text {
    font-weight: 600
}

.wojo.bold.text {
    font-weight: 800
}

.wojo.italic.text {
    font-style: italic
}

.wojo.link.text {
    cursor: pointer
}

.wojo.primary.text {
    color: var(--primary-color)
}

.wojo.secondary.text {
    color: var(--secondary-color)
}

.wojo.positive.text {
    color: var(--positive-color)
}

.wojo.negative.text {
    color: var(--negative-color)
}

.wojo.light.text {
    color: var(--light-color)
}

.wojo.white.text {
    color: #fff
}

.wojo.dark.text {
    color: var(--dark-color)
}

.wojo.grey.text {
    color: var(--grey-color)
}

.wojo.strike.text {
    text-decoration: line-through
}

.wojo.caps {
    text-transform: uppercase
}

.wojo.short.text {
    line-height: 1
}

.wojo.tall.text {
    line-height: 2
}

.wojo.dimmed.text {
    opacity: .75
}

.wojo.very.dimmed.text {
    opacity: .5
}

.wojo.icon.text {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center
}

    .wojo.icon.text > .icon, .wojo.icon.text > .image, .wojo.icon.text > .label {
        flex: 0 0 auto;
        max-width: 100%;
        margin-right: .5em
    }

    .wojo.icon.text.middle {
        display: flex;
        justify-content: center
    }

.wojo.icon.right.text > .icon, .wojo.icon.right.text > .image, .wojo.icon.right.text > .label {
    margin-left: .5em;
    margin-right: auto
}

.wojo.primary.bg {
    background-color: var(--primary-color)
}

.wojo.primary.inverted.bg {
    background-color: var(--primary-color-inverted)
}

.wojo.secondary.bg {
    background-color: var(--secondary-color)
}

.wojo.secondary.inverted.bg {
    background-color: var(--secondary-color-inverted)
}

.wojo.positive.bg {
    background-color: var(--positive-color)
}

.wojo.positive.inverted.bg {
    background-color: var(--positive-color-inverted)
}

.wojo.negative.bg {
    background-color: var(--negative-color)
}

.wojo.negative.inverted.bg {
    background-color: var(--negative-color-inverted)
}

.wojo.light.bg {
    background-color: var(--light-color)
}

.wojo.dark.bg {
    background-color: var(--dark-color)
}

.wojo.grey.bg {
    background-color: var(--grey-color)
}

.wojo.grey100.bg {
    background-color: var(--grey-color-100)
}

.wojo.grey300.bg {
    background-color: var(--grey-color-300)
}

.wojo.grey500.bg {
    background-color: var(--grey-color-500)
}

.wojo.boxed {
    border: 1px solid var(--grey-color-300);
    -webkit-transition: 0.3s;
    transition: 0.3s
}

.wojo.shadow {
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)
}

.wojo.soft.shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
}

.wojo.readonly {
    position: relative;
    cursor: not-allowed;
    point-events: none;
    text-shadow: none !important;
    color: transparent !important;
    -webkit-transition: all 0s linear;
    transition: all 0s linear
}

    .wojo.readonly:before {
        position: absolute;
        content: '';
        top: 0%;
        left: 0%;
        background: rgba(255, 255, 255, 0.75);
        width: 100%;
        height: 100%;
        border-radius: 0.250em;
        z-index: 10
    }

.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.highlite {
    background-color: #fffde7
}

.dimmable {
    position: relative;
    z-index: 0
}

    .dimmable.active::after {
        content: '';
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: var(--dark-color-shadow)
    }

.wojo.tabs .nav, .wojo.navs .nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none
}

    .wojo.tabs .nav li, .wojo.navs .nav li {
        margin-right: 1rem
    }

        .wojo.tabs .nav li:last-child, .wojo.navs .nav li:last-child {
            margin-right: 0
        }

        .wojo.tabs .nav li a, .wojo.navs .nav li a {
            border: 1px solid var(--grey-color-300);
            padding: .5rem 1.75rem;
            border-radius: 0.250rem;
            display: flex;
            background: #fff;
            flex-flow: row wrap;
            font-weight: 600;
            color: var(--primary-color)
        }

            .wojo.tabs .nav li a .icon, .wojo.tabs .nav li a img, .wojo.navs .nav li a .icon, .wojo.navs .nav li a img {
                flex: 0 0 auto;
                max-width: 100%;
                align-self: center;
                margin-right: .5rem
            }

            .wojo.tabs .nav li a.right .icon, .wojo.tabs .nav li a.right img, .wojo.navs .nav li a.right .icon, .wojo.navs .nav li a.right img {
                margin-left: .5rem
            }

            .wojo.tabs .nav li.active a, .wojo.tabs .nav li a:hover, .wojo.navs .nav li.active a, .wojo.navs .nav li a:hover {
                background-color: var(--primary-color);
                color: var(--primary-color-inverted)
            }

.wojo.tabs .tab {
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 0.250rem;
    padding: 2rem 1rem;
    background: #fff;
    border: 1px solid var(--grey-color-300)
}

.wojo.fluid.tabs .nav l, .wojo.fluid.navs .nav lii {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.navs.secondary {
    background-color: var(--secondary-color);
    border-radius: .250rem;
    padding: 1rem
}

    .wojo.navs.secondary .nav li a {
        background: transparent;
        color: #fff;
        border: 0
    }

        .wojo.navs.secondary .nav li.active a, .wojo.navs.secondary .nav li a:hover {
            background-color: rgba(255,255,255,.2)
        }

@media screen and (max-width:48.063em) {
    .wojo.tabs .nav, .wojo.navs .nav {
        flex-direction: column
    }

        .wojo.tabs .nav li, .wojo.navs .nav li {
            margin-right: 0
        }
}

.wojo.accordion section {
    border-radius: .250rem;
    position: relative;
    border: 1px solid var(--grey-color-300);
    margin-bottom: .75rem
}

    .wojo.accordion section h6.summary {
        font-weight: 400;
        font-size: 1rem;
        margin-bottom: 0
    }

        .wojo.accordion section h6.summary a {
            padding: 2rem 4.5rem 2rem 2rem;
            display: block;
            font-weight: 400;
            position: relative;
            border-radius: .250rem .250rem 0 0
        }

            .wojo.accordion section h6.summary a::before {
                font-family: "WojoIcons";
                position: absolute;
                content: "\e9e6";
                top: 50%;
                right: 2rem;
                transform: translateY(-50%)
            }

    .wojo.accordion section.active h6.summary a {
        background-color: var(--primary-color);
        color: var(--primary-color-inverted)
    }

        .wojo.accordion section.active h6.summary a::before {
            content: "\ea0c"
        }

    .wojo.accordion section .details {
        padding: 2rem
    }

.wojo.breadcrumb {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-weight: 300;
    text-transform: lowercase;
    margin-bottom: 2rem
}

    .wojo.breadcrumb .divider {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        white-space: nowrap;
        min-width: 0;
        margin: 0 .750rem;
        color: var(--grey-color-500)
    }

    .wojo.breadcrumb a.section {
        font-weight: 600;
        color: var(--primary-color)
    }

    .wojo.breadcrumb .active.section {
        font-weight: 400;
        color: var(--dark-color)
    }

.wojo.small.breadcrumb {
    font-size: 0.875rem
}

.wojo.pagination {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center
}

    .wojo.pagination .item {
        flex: 1 1 0px;
        min-width: 0;
        line-height: 1rem;
        padding: .750rem;
        font-weight: 700;
        color: var(--dark-color);
        border-radius: .250rem;
        text-align: center
    }

        .wojo.pagination .item.active {
            background-color: var(--primary-color);
            color: var(--primary-color-inverted)
        }

        .wojo.pagination .item:hover {
            color: var(--primary-color)
        }

        .wojo.pagination .item.disabled {
            color: var(--grey-color-500);
            cursor: not-allowed
        }

.wojo.small.pagination .item {
    padding: .750rem;
    font-size: .875rem
}

.wojo.divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0;
    margin: 0.5rem 0
}

.wojo.vertical.divider {
    border: 0;
    background-color: var(--dark-color-shadow);
    height: .750rem;
    margin: 0 0.5rem;
    width: 1px;
    display: inline-block
}

.wojo.basic.divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0;
    margin: 0
}

.wojo.space.divider {
    border: 0;
    margin: 0;
    height: 1rem
}

.wojo.auto.divider {
    border-color: var(--grey-color-300);
    margin: 1rem -2rem
}

.wojo.basic.uploader {
    border: 0;
    width: 100%;
    color: #92AAB0;
    padding: 0;
    margin-bottom: 0;
    font-size: 1em;
    text-align: left
}

.wojo.uploader-active {
    border-color: #0B85A1
}

.wojo.uploader div.or {
    font-size: 14px;
    font-weight: bold;
    color: #C0C0C0;
    padding: 10px
}

.wojo.basic.uploader div.content label {
    background-color: transparent;
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    width: auto;
    margin: 0;
    box-shadow: none
}

.wojo.uploader div.content span {
    cursor: pointer
}

.wojo.uploader div.content input, .wojo.button.uploader input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    direction: ltr;
    cursor: pointer
}

.wojo.uploader div.content label:hover {
    background-color: #427fed
}

.wojo.basic.uploader div.content label:hover {
    background-color: transparent
}

.wojo.button.uploader {
    width: auto;
    margin: 0
}

ul.wojo.activity, ul.wojo.activity li {
    list-style-type: none;
    margin: 0;
    padding: 0
}

    ul.wojo.activity li {
        clear: both
    }

        ul.wojo.activity li .intro {
            float: left;
            width: 150px;
            text-align: right;
            position: relative;
            font-size: .938em;
            font-weight: 700;
            padding: 1rem
        }

            ul.wojo.activity li .intro:after, ul.wojo.activity li .intro:before {
                position: absolute;
                content: "";
                width: 10px;
                height: 10px;
                background: #fff;
                right: -6px;
                border-radius: 10px;
                border: 2px solid var(--secondary-color);
                top: 1.5em;
                z-index: 3
            }

        ul.wojo.activity li:nth-child(2n) .content {
            background-color: var(--shadow-color)
        }

        ul.wojo.activity li .content {
            margin-left: 150px;
            padding: 1em;
            position: relative
        }

            ul.wojo.activity li .content:before {
                position: absolute;
                height: 100%;
                content: "";
                border-left: 2px solid var(--secondary-color);
                left: 0;
                top: 0;
                z-index: 1
            }

.scrollbox {
    overflow: auto
}

.wojo.mcalendar {
    border-radius: .250em
}

    .wojo.mcalendar .header {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-flow: row wrap;
        border-bottom: 1px solid var(--grey-color-300)
    }

        .wojo.mcalendar .header div {
            flex: 1 1 0px;
            min-width: 0;
            position: relative;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            padding: .5rem;
            font-size: .875em
        }

    .wojo.mcalendar .content {
        overflow: hidden
    }

    .wojo.mcalendar .weeks {
        display: flex;
        flex-flow: row wrap;
        border-top: 1px solid var(--grey-color-300)
    }

        .wojo.mcalendar .weeks .cell {
            min-width: 0;
            flex: 0 0 calc(100% / 7);
            max-width: calc(100% / 7);
            box-sizing: border-box;
            position: relative;
            font-weight: 700;
            color: inherit;
            background: #fff;
            border-left: 1px solid var(--grey-color-300);
            -webkit-transition: .25s;
            transition: .25s;
            padding: 0;
            text-decoration: none
        }

            .wojo.mcalendar .weeks .cell:first-child {
                border-left: 0
            }

        .wojo.mcalendar .weeks .day::before {
            content: "";
            display: block;
            padding-top: 100%;
            float: left
        }

        .wojo.mcalendar .weeks .empty {
            background-color: var(--grey-color-100)
        }

        .wojo.mcalendar .weeks .date {
            position: absolute;
            line-height: 2rem;
            top: 2px;
            right: 5px;
            font-size: .875rem;
            color: rgba(0,0,0,0.5);
            width: 2rem;
            height: 2rem;
            text-align: center;
            border-radius: .250rem
        }

        .wojo.mcalendar .weeks .day.today .date {
            background: var(--primary-color)
        }

        .wojo.mcalendar .weeks .day.today .date {
            color: #fff
        }

    .wojo.mcalendar .progress {
        position: relative;
        text-align: center;
        line-height: 0;
        max-width: 20px;
        margin: 0 auto;
        padding-top: 1.75rem
    }

    .wojo.mcalendar .indicator {
        display: inline-block;
        margin: 1px;
        width: 8px;
        height: 8px;
        vertical-align: middle;
        border-radius: 6px;
        background-color: #2B3D4C;
        font-size: 0;
        color: transparent
    }

        .wojo.mcalendar .indicator:hover {
            cursor: pointer
        }

    .wojo.mcalendar .list {
        background: rgba(255, 255, 255, 0.85);
        overflow: auto;
        position: absolute;
        top: 38px;
        width: 100%;
        height: calc(100% - 40px);
        display: none
    }

        .wojo.mcalendar .list .event {
            display: block;
            color: #fff;
            padding: .5rem 1rem;
            border-radius: .250em;
            margin-bottom: .5rem;
            position: relative
        }

            .wojo.mcalendar .list .event .description {
                font-size: .938em;
                margin: 0.25em 0
            }

            .wojo.mcalendar .list .event > a {
                font-size: .875rem;
                font-weight: 600;
                color: rgba(255,255,255,0.75)
            }

                .wojo.mcalendar .list .event > a:hover {
                    color: rgba(255,255,255,1)
                }

            .wojo.mcalendar .list .event .time {
                font-weight: 500;
                position: relative;
                left: 0;
                bottom: 0
            }

                .wojo.mcalendar .list .event .time .start, .wojo.mcalendar .list .event .time .end {
                    font-size: .750rem;
                    display: inline-block
                }

                    .wojo.mcalendar .list .event .time .end:not(:empty):before {
                        content: '-';
                        padding: 0 2px
                    }

        .wojo.mcalendar .list .date {
            width: 4.5rem;
            position: absolute;
            top: 50%;
            left: 0;
            text-align: center;
            font-size: .875em;
            font-weight: 700;
            transform: translateY(-50%)
        }

            .wojo.mcalendar .list .date > span {
                display: block
            }

        .wojo.mcalendar .list .today .date {
            color: #5E35B1
        }

    .wojo.mcalendar .event-item {
        position: relative;
        padding: 1rem 1rem .5rem 4.5rem;
        display: none;
        border-top: 1px solid var(--grey-color-300);
        text-align: left
    }

        .wojo.mcalendar .event-item:after {
            content: '-/-';
            padding: .5rem 1rem;
            display: block;
            margin-bottom: .5rem
        }

        .wojo.mcalendar .event-item .remove {
            top: 1em;
            position: absolute;
            right: 1.5em;
            color: #fff
        }

    .wojo.mcalendar .list .active {
        display: block
    }

        .wojo.mcalendar .list .active:after {
            display: none !important
        }

@media (min-width:400px) {
    .wojo.mcalendar .weeks .date {
        top: 5px;
        left: 5px;
        font-size: .750em
    }
}

@media (min-width:600px) {
    .wojo.mcalendar .weeks .day {
        padding-top: 2em;
        position: relative
    }

        .wojo.mcalendar .weeks .day:before {
            padding-top: 77%
        }

    .wojo.mcalendar .progress {
        width: auto;
        max-width: none;
        padding-top: .5rem
    }

    .wojo.mcalendar .list .event .time {
        position: absolute;
        left: auto;
        right: .5rem
    }

    .wojo.mcalendar .indicator {
        font-weight: 500;
        text-align: left;
        display: block;
        margin: 0 0 1px 0;
        width: auto;
        font-size: .875rem;
        padding: .875rem;
        border-radius: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box
    }

        .wojo.mcalendar .indicator.start {
            border-radius: .250rem 0 0 .250rem
        }

        .wojo.mcalendar .indicator.end {
            border-radius: 0 .250rem .250rem 0
        }

        .wojo.mcalendar .indicator.full {
            border-radius: .250rem
        }
}

@media screen and (max-width:769px) {
    ul.wojo.activity li .intro {
        float: none;
        width: auto;
        text-align: left;
        padding: .5em 1em;
        background-color: var(--shadow-color)
    }

    ul.wojo.activity li:nth-child(2n) .content {
        background-color: rgba(0, 0, 0, 0)
    }

    ul.wojo.activity li .content {
        margin-left: 0;
        padding: .5em 1em;
        position: relative
    }

        ul.wojo.activity li .intro:after, ul.wojo.activity li .intro:before, ul.wojo.activity li .content:before {
            display: none
        }
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url('../fonts/raleway-v14-latin-300.woff2') format('woff2'), url('../fonts/raleway-v14-latin-300.woff') format('woff')
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url('../fonts/raleway-v14-latin-regular.woff2') format('woff2'), url('../fonts/raleway-v14-latin-regular.woff') format('woff')
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url('../fonts/raleway-v14-latin-500.woff2') format('woff2'), url('../fonts/raleway-v14-latin-500.woff') format('woff')
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url('../fonts/raleway-v14-latin-700.woff2') format('woff2'), url('../fonts/raleway-v14-latin-700.woff') format('woff')
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url('../fonts/raleway-v14-latin-800.woff2') format('woff2'), url('../fonts/raleway-v14-latin-800.woff') format('woff')
}

html, body {
    font-size: 16px;
    height: 100%
}

body {
    font-family: "Raleway", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    color: var(--body-color);
    background-color: var(--body-bg-color);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0
}

a, a.dark, a.white, a.grey {
    cursor: pointer;
    color: var(--primary-color);
    text-decoration: none;
    transition: all .35s ease;
    outline: none
}

    a:hover, a.hover, a:focus {
        color: var(--primary-color-hover);
        transition: all .55s ease;
        outline: none;
        text-decoration: none
    }

    a.white {
        color: rgba(255,255,255,0.8)
    }

        a.white:hover, a.white.hover, a.white:focus {
            color: rgba(255,255,255,1)
        }

    a.dark {
        color: var(--dark-color)
    }

        a.dark:hover, a.dark.hover, a.dark:focus {
            color: var(--primary-color)
        }

    a.grey {
        color: var(--grey-color)
    }

        a.grey:hover, a.grey.hover, a.grey:focus {
            color: var(--primary-color)
        }

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 .5rem 0
}

h1 {
    font-size: 2rem;
    line-height: 2rem;
    margin: 0 0 1rem 0
}

h2 {
    font-size: 1.875rem;
    line-height: 2rem;
    font-weight: 300;
    margin-bottom: 2rem
}

h3 {
    font-size: 1.5rem;
    line-height: 1.75rem
}

h4 {
    font-size: 1.25rem;
    line-height: 1.75rem
}

h5 {
    font-size: 1.125rem;
    line-height: 1.5rem
}

h6 {
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 600
}

    h1.basic, h2.basic, h3.basic, h4.basic, h5.basic, h6.basic, p.basic {
        margin: 0
    }

header {
    min-height: 500px;
    background-size: cover;
    background-position: 100%;
    background-image: url('../images/header.jpg');
    position: relative;
    display: flex;
    align-items: center
}

.wojo.white.fill {
    fill: #edf2f7
}

header .shape {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0
}

#nav {
    position: absolute;
    right: 1rem;
    top: 1rem
}

#logo {
    max-width: 120px;
    margin: 0 auto
}

    #logo a {
        display: inline-block;
    }

.avatar {
    width: 120px;
    border-radius: 50%;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    margin-top: -8rem;
    position: relative;
    border: 3px solid #fff;
    z-index: 4
}

main {
    flex: 1 0 auto
}

footer {
    text-align: center;
    padding: 2rem;
    font-weight: 400;
    font-size: .875rem
}

.wojo.raised.segment {
    z-index: 3;
    margin-top: -8rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    border-radius: .5rem;
    background-color: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem
}

.wojo.raised.auto.segment {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto
}

.wojo.cards .card.active {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04)
}

@media screen and (min-width:40.625em) and (max-width:64em) and (orientation :landscape) {
    header {
        min-height: 400px
    }

    .wojo.raised.segment, .avatar {
        margin-top: -7rem
    }
}

@media screen and (max-width:30em) {
    header {
        min-height: 300px
    }

    .wojo.raised.segment, .avatar {
        margin-top: -6rem
    }
}