:root {
    --body-color: #636b72;
    --body-bg-color: #fff;
    --primary-color: #18ab63;
    --primary-color-hover: #12854f;
    --primary-color-active: #12854f;
    --primary-color-inverted: #e9fcf3;
    --primary-color-shadow: rgba(24, 171, 99, 0.35);
    --secondary-color: #21325b;
    --secondary-color-hover: #1c2849;
    --secondary-color-active: #1c2849;
    --secondary-color-inverted: #ecf0f8;
    --secondary-color-shadow: rgba(28, 40, 73, 0.35);
    --positive-color: #00c9a7;
    --positive-color-hover: #009e84;
    --positive-color-active: #009e84;
    --positive-color-inverted: #e5fffb;
    --positive-color-shadow: rgba(0, 201, 167, 0.35);
    --negative-color: #ED4C78;
    --negative-color-hover: #b93b5c;
    --negative-color-active: #b93b5c;
    --negative-color-inverted: #fde8ed;
    --negative-color-shadow: rgba(237, 76, 120, 0.35);
    --alert-color: #F5CA99;
    --alert-color-hover: #bf9a74;
    --alert-color-active: #bf9a74;
    --alert-color-inverted: #fdf3e8;
    --alert-color-shadow: rgba(245, 202, 153, 0.35);
    --info-color: #09A5BE;
    --info-color-hover: #09A5BE;
    --info-color-active: #09A5BE;
    --info-color-inverted: #e7fbfe;
    --info-color-shadow: rgba(9, 165, 190, 0.35);
    --light-color: #f8f9fa;
    --light-color-hover: #e1e5ea;
    --light-color-active: #e1e5ea;
    --light-color-inverted: #f1f1f1;
    --light-color-shadow: rgba(248, 249, 250, 0.35);
    --dark-color: #343a40;
    --dark-color-hover: #2d3339;
    --dark-color-active: #2d3339;
    --dark-color-shadow: rgba(52, 58, 64, 0.1);
    --dark-color-inverted: #F4F5F6;
    --black-color: #000;
    --white-color: #fff;
    --shadow-color: rgba(136, 152, 170, .15);
    --grey-color: #818181;
    --grey-color-100: #f2f2f2;
    --grey-color-300: #d5d5d5;
    --grey-color-500: #b9b9b9;
    --grey-color-700: #9d9d9d
}

:root {
    --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --padding-fluid: calc(8px + 1.5625vw);
    --padding: 2rem;
    --margin: 2rem;
    --gutter: 2rem;
    --unit: 2rem;
    --radius: .375rem;
    --unit-small: 1rem;
    --unit-mini: .5rem;
    --gutter-compensation: -2rem;
    --line-height: 1.5;
    --font-weight: 400;
    --font-size: 1rem;
    --h1-size: clamp(2rem, 2vw + 1rem, 6rem);
    --h2-size: clamp(1.2rem, 2vw + 1rem, 4rem);
    --h3-size: clamp(1.5rem, 2vw + 1rem, 2.125rem);
    --h4-size: clamp(1rem, 2vw + 1rem, 2rem);
    --h5-size: clamp(1em, 2vw + .875rem, 1.25rem);
    --h6-size: clamp(1rem, 2vw + .750rem, 1rem)
}

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

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

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

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

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
}

.scrollbox,
select,
.overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--grey-color-300)
}

.overflow-auto::-webkit-scrollbar,
select::-webkit-scrollbar,
.scrollbox::-webkit-scrollbar {
    width: 12px
}

.overflow-auto::-webkit-scrollbar-track,
select::-webkit-scrollbar-track,
.scrollbox::-webkit-scrollbar-track {
    background: var(--primary-color-inverted)
}

.overflow-auto::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
.scrollbox::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 1rem;
    border: 3px solid var(--grey-color-300)
}

.scrollbox {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .5rem
}

.scrollbox.styled {
    padding: 1rem 0;
    margin-right: 0
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
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-wrap;
    word-wrap: break-word
}

blockquote {
    font-size: 1.75rem;
    color: var(--dark-color);
    padding: 2rem;
    margin: 0 0 1rem
}

blockquote p {
    font-style: italic;
    color: #000
}

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
}

.overflow {
    overflow: hidden
}

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: inherit
}

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,
.google-map {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    width: 100%
}

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

.video.vimeo {
    padding-top: 0
}

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

.height200 {
    height: 200px
}

.height300 {
    height: 300px
}

.height350 {
    height: 350px
}

.height400 {
    height: 400px
}

.height500 {
    height: 500px
}

.height600 {
    height: 600px
}

.height-full {
    height: 100%
}

.height-auto {
    height: auto
}

.height-vh {
    height: 100vh
}

.min-height-full {
    min-height: 100%
}

.min-height200 {
    min-height: 200px
}

.min-height100 {
    min-height: 100px
}

.max-height200 {
    max-height: 200px
}

.max-height300 {
    max-height: 300px
}

.max-height400 {
    max-height: 400px
}

.max-height500 {
    max-height: 500px
}

.max-height600 {
    max-height: 600px
}

.width25 {
    width: 25%
}

.width50 {
    width: 50%
}

.width75 {
    width: 75%
}

.width-full {
    width: 100%
}

.width-auto {
    width: auto
}

.max-width100 {
    max-width: 100px
}

.max-width200 {
    max-width: 200px
}

.max-width300 {
    max-width: 300px
}

.max-width400 {
    max-width: 400px
}

.max-width-500 {
    max-width: 500px
}

.min-width200 {
    min-width: 200px
}

.min-width300 {
    min-width: 300px
}

.min-width400 {
    min-width: 400px
}

.min-width-500 {
    min-width: 500px
}

.position-top {
    top: 0
}

.position-top-50 {
    bottom: 50%
}

.position-top-100 {
    bottom: 100%
}

.position-bottom {
    bottom: 0
}

.position-bottom-50 {
    bottom: 50%
}

.position-bottom-100 {
    bottom: 100%
}

.position-left {
    left: 0
}

.position-left-50 {
    bottom: 50%
}

.position-left-100 {
    bottom: 100%
}

.position-right {
    right: 0
}

.position-right-50 {
    bottom: 50%
}

.position-right-100 {
    bottom: 100%
}

.position-bottom1 {
    bottom: calc(var(--unit) / -2)
}

.position-bottom2 {
    bottom: calc(var(--unit) / -1)
}

.position-bottom-3 {
    bottom: calc(var(--unit) * -1.5)
}

.zindex-1 {
    z-index: -1
}

.zindex0 {
    z-index: 0
}

.zindex1 {
    z-index: 1
}

.zindex2 {
    z-index: 2
}

.zindex3 {
    z-index: 3
}

.zindex4 {
    z-index: 4
}

.zindex5 {
    z-index: 5
}

.opacity-100 {
    opacity: 1
}

.opacity-90 {
    opacity: .9
}

.opacity-80 {
    opacity: .8
}

.opacity-70 {
    opacity: .7
}

.opacity-60 {
    opacity: .6
}

.opacity-50 {
    opacity: .5
}

.opacity-40 {
    opacity: .4
}

.opacity-30 {
    opacity: .3
}

.opacity-20 {
    opacity: .2
}

.opacity-10 {
    opacity: .1
}

.opacity-0 {
    opacity: 0
}

.overflow-hidden {
    overflow: hidden
}

.overflow-auto {
    overflow: auto
}

.display-inline {
    display: inline
}

.display-inline-block {
    display: inline-block
}

.display-block {
    display: block
}

.display-inline-flex,
.inline-flex {
    display: inline-flex
}

.display-flex,
.flex {
    display: flex
}

.flex-column {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.not-allowed {
    cursor: not-allowed
}

.left-align {
    text-align: left
}

.center-align {
    text-align: center
}

.right-align {
    text-align: right
}

.show-all {
    display: inherit
}

.hide-all {
    display: none
}

.hidden {
    visibility: hidden
}

.visible {
    visibility: visible
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.fixed-top {
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000
}

.fixed-bottom {
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2000
}

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

.justify-center {
    justify-content: center
}

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

.justify-start {
    justify-content: flex-start
}

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

.justify-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,
.row.horizontal-gutters {
    margin-left: var(--gutter-compensation)
}

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

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

.row.medium-gutters,
.row.medium-horizontal-gutters {
    margin-left: calc(var(--gutter-compensation) * 1.5)
}

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

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

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

.row.massive-gutters,
.row.massive-horizontal-gutters {
    margin-left: calc(var(--gutter-compensation) * 4)
}

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

.row.divided {
    margin-left: calc(var(--gutter-compensation) * 4)
}

.mason {
    columns: 2;
    gap: var(--gutter);
    margin: 0 auto
}

.mason.one {
    columns: 1;
    gap: var(--gutter);
    margin: 0 auto
}

.mason.four {
    columns: 4;
    gap: var(--gutter);
    margin: 0 auto
}

.mason.three {
    columns: 3;
    gap: var(--gutter);
    margin: 0 auto
}

.mason.small {
    gap: calc(var(--gutter) / 2)
}

.mason.big {
    gap: calc(var(--gutter) * 2)
}

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

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

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

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

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

.row.medium-gutters>.columns,
.row.medium-horizontal-gutters>.columns,
.row.medium-vertical-gutters>.columns {
    padding-left: calc(var(--gutter) * 1.5);
    margin-bottom: calc(var(--gutter) * 1.5)
}

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

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

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

.row.massive-gutters>.columns,
.row.massive-horizontal-gutters>.columns,
.row.massive-vertical-gutters>.columns {
    padding-left: calc(var(--gutter) * 4);
    margin-bottom: calc(var(--gutter) * 4)
}

.row.horizontal-gutters>.columns,
.row.mini-horizontal-gutters>.columns,
.row.small-horizontal-gutters>.columns,
.row.medium-horizontal-gutters>.columns,
.row.large-horizontal-gutters>.columns,
.row.big-horizontal-gutters>.columns,
.row.huge-horizontal-gutters>.columns,
.row.massive-horizontal-gutters>.columns {
    margin-bottom: 0
}

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

.row.vertical-gutters>.columns,
.row.mini-vertical-gutters>.columns,
.row.small-vertical-gutters>.columns,
.row.medium-vertical-gutters>.columns,
.row.large-vertical-gutters>.columns,
.row.big-vertical-gutters>.columns,
.row.huge-vertical-gutters>.columns {
    padding-left: 0;
    padding-right: 0
}

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

.row.divided .columns {
    position: relative;
    padding-left: calc(var(--gutter) * 4);
    margin-bottom: calc(var(--gutter) * 4)
}

.row.divided .columns::before {
    position: absolute;
    z-index: -1;
    content: "";
    width: 1px;
    height: 80%;
    top: 10%;
    left: calc(var(--gutter) * 2);
    box-shadow: 1px 0 0 0 var(--shadow-color)
}

.row.divided .columns:first-child::before {
    box-shadow: none
}

.mason>* {
    break-inside: avoid;
    margin-bottom: var(--gutter)
}

.mason.small>* {
    margin-bottom: calc(var(--gutter) / 2)
}

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

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

@media screen and (max-width:640px) {
    .row .columns.auto {
        white-space: normal;
    }

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

    .row .columns.phone-100 {
        flex: 0 1 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,
    .row.grid.phone-2>.columns,
    .row.blocks.phone-2>.columns {
        flex: 0 0 50%;
        max-width: 50%;
    }

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

    .row .columns.phone-33,
    .row.grid.phone-3>.columns,
    .row.blocks.phone-3>.columns {
        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,
    .row.grid.phone-4>.columns,
    .row.blocks.phone-4>.columns {
        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.divided .columns::before {
        display: none;
    }

    .row.medium-gutters,
    .row.large-gutters,
    .row.big-gutters,
    .row.huge-gutters,
    .row.massive-gutters {
        margin-left: var(--gutter-compensation);
    }

    .row.phone-gutters>.columns,
    .row.medium-gutters>.columns,
    .row.large-gutters>.columns,
    .row.big-gutters>.columns,
    .row.huge-gutters>.columns,
    .row.massive-gutters>.columns {
        padding-left: var(--gutter);
        margin-bottom: var(--gutter);
    }

    .row.phone-vertical-gutters>.columns {
        margin-bottom: calc(var(--gutter) / 2);
    }

    .row.divided .columns::before {
        display: none;
    }

    .mason,
    .mason.four,
    .mason.three {
        columns: 1;
    }

    .mason.big {
        gap: var(--gutter);
    }

    .mason.big>* {
        margin-bottom: var(--gutter);
    }

    .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-align {
        text-align: left;
    }

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

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

    .phone-hide {
        display: none !important;
    }
}

@media screen and (min-width:641px) and (max-width:768px) {

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

    .row .columns.mobile-100 {
        flex: 0 1 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,
    .row.grid.mobile-2>.columns,
    .row.blocks.mobile-2>.columns {
        flex: 0 0 50%;
        max-width: 50%;
    }

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

    .row .columns.mobile-33,
    .row.grid.mobile-3>.columns,
    .row.blocks.mobile-3>.columns {
        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,
    .row.grid.mobile-4>.columns,
    .row.blocks.mobile-4>.columns {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .columns.mobile-20,
    .row.grid.mobile-5>.columns,
    .row.blocks.mobile-5>.columns {
        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.mini-gutters,
    .row.small-gutters,
    .row.medium-gutters,
    .row.large-gutters,
    .row.big-gutters,
    .row.huge-gutters,
    .row.massive-gutters {
        margin-left: var(--gutter-compensation);
    }

    .row.mini-gutters>.columns,
    .row.small-gutters>.columns,
    .row.medium-gutters>.columns,
    .row.large-gutters>.columns,
    .row.big-gutters>.columns,
    .row.huge-gutters>.columns,
    .row.massive-gutters>.columns {
        margin-bottom: var(--gutter);
        padding-left: var(--gutter);
    }

    .mason.four,
    .mason.three,
    .mason {
        columns: 2;
    }

    .mason.one {
        columns: 1;
    }

    .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-align {
        text-align: left;
    }

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

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

    .mobile-hide {
        display: none !important;
    }
}

@media screen and (min-width:769px) and (max-width:1199px) {

    .row .columns.tablet-100,
    .row.grid.tablet-1>.columns,
    .row.blocks.tablet-1>.columns {
        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,
    .row.grid.tablet-2>.columns,
    .row.blocks.tablet-2>.columns {
        flex: 0 0 50%;
        max-width: 50%;
    }

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

    .row .columns.tablet-33,
    .row.grid.tablet-3>.columns,
    .row.blocks.tablet-3>.columns {
        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,
    .row.grid.tablet-4>.columns,
    .row.blocks.tablet-4>.columns {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .columns.tablet-20,
    .row.grid.tablet-5>.columns,
    .row.blocks.tablet-5>.columns {
        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.grid.tablet-6>.columns,
    .row.blocks.tablet-6>.columns {
        flex: 0 0 Calc(100% / 6);
        max-width: Calc(100% / 6);
    }

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

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

    .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%;
    }

    .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-align {
        text-align: left;
    }

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

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

    .tablet-hide {
        display: none !important;
    }
}

@media screen and (min-width:1200px) {

    .row .columns.screen-100,
    .row.grid.screen-1>.columns,
    .row.blocks.screen-1>.columns {
        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,
    .row.grid.screen-2>.columns,
    .row.blocks.screen-2>.columns {
        flex: 0 0 50%;
        max-width: 50%;
    }

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

    .row .columns.screen-33,
    .row.grid.screen-3>.columns,
    .row.blocks.screen-3>.columns {
        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,
    .row.grid.screen-4>.columns,
    .row.blocks.screen-4>.columns {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .columns.screen-20,
    .row.grid.screen-5>.columns,
    .row.blocks.screen-5>.columns {
        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.grid.screen-6>.columns,
    .row.blocks.screen-6>.columns {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }

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

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

    .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%;
    }

    .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-align {
        text-align: left;
    }

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

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

    .screen-hide {
        display: none !important;
    }
}

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

#debug-panel .debug-wrapper {
    padding: 0 .875em;
    background-color: #21252B;
    border-bottom: 0;
    margin: 0 auto 0 auto
}

#debug-panel .debug-wrapper .legend {
    background-color: #323844;
    padding: 0 1rem;
    width: auto;
    display: flex;
    border-radius: .250rem;
    flex-flow: row wrap;
    align-items: center;
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

#debug-panel .debug-wrapper .legend>span {
    font-size: .875rem;
    font-weight: 400
}

#debug-panel .arrow {
    display: flex;
    flex-flow: row wrap
}

#debug-panel .arrow a {
    margin-left: 1rem
}

#debug-panel a {
    text-decoration: none;
    color: #A3A8B5;
    font-size: .750rem;
    margin: 0 .25rem;
    padding: .5rem .750rem;
    font-weight: 500;
    line-height: 1rem;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap
}

#debug-panel .tab.active {
    background-color: #21252B;
    border-radius: .250rem
}

#debug-panel .debug-wrapper .legend span {
    color: var(--grey-color);
    font-weight: 500;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap
}

#debug-panel .items {
    display: none;
    height: 200px;
    overflow-y: auto;
    padding: 1rem .750rem .750rem;
    font-size: 13px;
    color: #A3A8B5;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace
}

#debug-panel .items.active {
    display: block
}

#debug-panel pre {
    color: #A3A8B5;
    background-color: #2C313A;
    padding: .5rem;
    border-radius: .250rem
}

#debug-panel p {
    margin-bottom: .250rem;
    background-color: #2C313A;
    padding: .250rem
}

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

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

#error-box,
#code-box,
#trace-box {
    border-radius: 5px;
    display: block;
    margin: 25px auto;
    width: 60%;
    min-width: 70vw;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15)
}

.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;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    }

    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;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    }

    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;
    }
}

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

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

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

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

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

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

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

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

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

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.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.statistic {
    display: inline-flex;
    flex-direction: column;
    margin: 1em 0;
    max-width: max-content
}

.wojo.statistic+.wojo.statistic {
    margin: 0 0 0 1.5em
}

.wojo.statistic:first-child {
    margin-top: 0
}

.wojo.statistic:last-child {
    margin-bottom: 0
}

.wojo.statistics {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.wojo.statistics>.statistic {
    display: inline-flex;
    flex: 0 1 auto;
    flex-direction: column;
    margin: 0 1.5em 2em;
    max-width: max-content
}

.wojo.statistics {
    display: flex;
    margin: 1em -1.5em -2em
}

.wojo.statistics:after {
    display: block;
    content: ' ';
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden
}

.wojo.statistics:first-child {
    margin-top: 0
}

.wojo.statistics:last-child {
    margin-bottom: 0
}

.wojo.statistics .statistic>.value,
.wojo.statistic>.value {
    font-weight: 300;
    font-size: 4rem;
    line-height: 2;
    color: var(--dark-color);
    text-transform: uppercase;
    text-align: center
}

.wojo.statistics .statistic>.label,
.wojo.statistic>.label {
    font-weight: 500;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
    text-transform: uppercase;
    text-align: center
}

.wojo.statistics .statistic>.label~.value,
.wojo.statistic>.label~.value {
    margin-top: 0
}

.wojo.statistics .statistic>.value~.label,
.wojo.statistic>.value~.label {
    margin-top: 0
}

.wojo.statistics .statistic>.value .icon,
.wojo.statistic>.value .icon {
    opacity: 1;
    width: auto;
    margin: 0
}

.wojo.statistics .statistic>.text.value,
.wojo.statistic>.text.value {
    line-height: 1em;
    min-height: 2em;
    font-weight: 600;
    text-align: center
}

.wojo.statistics .statistic>.text.value+.label,
.wojo.statistic>.text.value+.label {
    text-align: center
}

.wojo.statistics .statistic>.value img,
.wojo.statistic>.value img {
    max-height: 3rem;
    vertical-align: baseline
}

.wojo.horizontal.statistic {
    flex-direction: row;
    align-items: center
}

.wojo.horizontal.statistics {
    flex-direction: column;
    margin: 0;
    max-width: none
}

.wojo.horizontal.statistics .statistic {
    flex-direction: row;
    align-items: center;
    max-width: none;
    margin: 1em 0
}

.wojo.horizontal.statistic>.text.value,
.wojo.horizontal.statistics>.statistic>.text.value {
    min-height: 0
}

.wojo.horizontal.statistics .statistic>.value .icon,
.wojo.horizontal.statistic>.value .icon {
    width: 1.18em
}

.wojo.horizontal.statistics .statistic>.value,
.wojo.horizontal.statistic>.value {
    display: inline-block;
    vertical-align: middle
}

.wojo.horizontal.statistics .statistic>.label,
.wojo.horizontal.statistic>.label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 0.75em
}

.wojo.mini.statistics .statistic>.value,
.wojo.mini.statistic>.value {
    font-size: 1.5rem
}

.wojo.mini.horizontal.statistics .statistic>.value,
.wojo.mini.horizontal.statistic>.value {
    font-size: 1.5rem
}

.wojo.mini.statistics .statistic>.text.value,
.wojo.mini.statistic>.text.value {
    font-size: 1rem
}

.wojo.tiny.statistics .statistic>.value,
.wojo.tiny.statistic>.value {
    font-size: 2rem
}

.wojo.tiny.horizontal.statistics .statistic>.value,
.wojo.tiny.horizontal.statistic>.value {
    font-size: 2rem
}

.wojo.tiny.statistics .statistic>.text.value,
.wojo.tiny.statistic>.text.value {
    font-size: 1rem
}

.wojo.small.statistics .statistic>.value,
.wojo.small.statistic>.value {
    font-size: 3rem
}

.wojo.small.horizontal.statistics .statistic>.value,
.wojo.small.horizontal.statistic>.value {
    font-size: 2rem
}

.wojo.small.statistics .statistic>.text.value,
.wojo.small.statistic>.text.value {
    font-size: 1rem
}

.wojo.statistics .statistic>.value,
.wojo.statistic>.value {
    font-size: 4rem
}

.wojo.horizontal.statistics .statistic>.value,
.wojo.horizontal.statistic>.value {
    font-size: 3rem
}

.wojo.statistics .statistic>.text.value,
.wojo.statistic>.text.value {
    font-size: 2rem
}

.wojo.large.statistics .statistic>.value,
.wojo.large.statistic>.value {
    font-size: 5rem
}

.wojo.large.horizontal.statistics .statistic>.value,
.wojo.large.horizontal.statistic>.value {
    font-size: 4rem
}

.wojo.large.statistics .statistic>.text.value,
.wojo.large.statistic>.text.value {
    font-size: 2.5rem
}

.wojo.huge.statistics .statistic>.value,
.wojo.huge.statistic>.value {
    font-size: 6rem
}

.wojo.huge.horizontal.statistics .statistic>.value,
.wojo.huge.horizontal.statistic>.value {
    font-size: 5rem
}

.wojo.huge.statistics .statistic>.text.value,
.wojo.huge.statistic>.text.value {
    font-size: 2.5rem
}

.wojo.button {
    cursor: pointer;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    outline: none;
    vertical-align: middle;
    background-color: var(--grey-color-700);
    color: var(--white-color);
    font-family: inherit;
    margin: 0;
    padding: .875rem 1.875rem;
    font-weight: 400;
    text-transform: none;
    text-shadow: none;
    line-height: 1.25rem;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid var(--grey-color-700);
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: all .2s ease-in-out;
    -webkit-tap-highlight-color: transparent
}

.wojo.button:hover,
.wojo.button:active,
.wojo.button:focus {
    color: var(--white-color);
    background: var(--grey-color);
    border-color: var(--grey-color)
}

.wojo.button:active,
.wojo.button.active {
    outline: 0 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: var(--white-color);
    background: var(--grey-color);
    border-color: var(--grey-color)
}

.wojo.primary.buttons .button,
.wojo.primary.button {
    background-color: var(--primary-color);
    color: var(--white-color);
    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: var(--white-color);
    background: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    box-shadow: 0 5px 10px var(--primary-color-shadow)
}

.wojo.primary.buttons .button:active,
.wojo.primary.buttons .button.active,
.wojo.primary.buttons .button:focus,
.wojo.primary.button:active,
.wojo.primary.button.active,
.wojo.primary.button:focus {
    background: var(--primary-color-active);
    box-shadow: 0 0 0 .250rem var(--primary-color-shadow)
}

.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: var(--primary-color-inverted);
    box-shadow: none
}

.wojo.basic.primary.buttons .button,
.wojo.basic.primary.button {
    color: var(--primary-color);
    border-color: var(--primary-color-hover)
}

.wojo.basic.primary.button:hover,
.wojo.basic.primary.button.active,
.wojo.basic.primary.button:active {
    color: var(--white-color)
}

.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: var(--white-color);
    background: var(--primary-color);
    border-color: var(--primary-color)
}

.wojo.inverted.primary.buttons .button.active,
.wojo.inverted.primary.button.active {
    box-shadow: none
}

.wojo.secondary.buttons .button,
.wojo.secondary.button {
    background-color: var(--secondary-color);
    color: var(--white-color);
    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: var(--white-color);
    background: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
    box-shadow: 0 5px 10px var(--secondary-color-shadow)
}

.wojo.secondary.buttons .button:active,
.wojo.secondary.buttons .button.active,
.wojo.secondary.buttons .button:focus,
.wojo.secondary.button:active,
.wojo.secondary.button.active,
.wojo.secondary.button:focus {
    background: var(--secondary-color-active);
    box-shadow: 0 0 0 .250rem var(--secondary-color-shadow)
}

.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: var(--secondary-color-inverted);
    box-shadow: none
}

.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: var(--white-color)
}

.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: var(--white-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color)
}

.wojo.inverted.secondary.buttons .button.active,
.wojo.inverted.secondary.button.active {
    box-shadow: none
}

.wojo.positive.buttons .button,
.wojo.positive.button {
    background-color: var(--positive-color);
    color: var(--white-color);
    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: var(--white-color);
    background: var(--positive-color-hover);
    border-color: var(--positive-color-hover);
    box-shadow: 0 5px 10px var(--positive-color-shadow)
}

.wojo.positive.buttons .button:active,
.wojo.positive.buttons .button.active,
.wojo.positive.buttons .button:focus,
.wojo.positive.button:active,
.wojo.positive.button.active,
.wojo.positive.button:focus {
    background: var(--positive-color-active);
    box-shadow: 0 0 0 .250rem var(--positive-color-shadow)
}

.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: var(--positive-color-inverted);
    box-shadow: none
}

.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: var(--white-color)
}

.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: var(--white-color);
    background: var(--positive-color);
    border-color: var(--positive-color)
}

.wojo.inverted.positive.buttons .button.active,
.wojo.inverted.positive.button.active {
    box-shadow: none
}

.wojo.negative.buttons .button,
.wojo.negative.button {
    background-color: var(--negative-color);
    color: var(--white-color);
    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: var(--white-color);
    background: var(--negative-color-hover);
    border-color: var(--negative-color-hover);
    box-shadow: 0 5px 10px var(--negative-color-shadow)
}

.wojo.negative.buttons .button:active,
.wojo.negative.buttons .button.active,
.wojo.negative.buttons .button:focus .wojo.negative.button:active,
.wojo.negative.button.active,
.wojo.negative.button:focus {
    background: var(--negative-color-active);
    box-shadow: 0 0 0 .250rem var(--negative-color-shadow)
}

.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: var(--negative-color-inverted);
    box-shadow: none
}

.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: var(--white-color)
}

.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: var(--white-color);
    background: var(--negative-color);
    border-color: var(--negative-color)
}

.wojo.inverted.negative.buttons .button.active,
.wojo.inverted.negative.button.active {
    box-shadow: none
}

.wojo.alert.buttons .button,
.wojo.alert.button {
    background-color: var(--alert-color);
    color: var(--white-color);
    border-color: var(--alert-color)
}

.wojo.alert.buttons .button:hover,
.wojo.alert.buttons .button:active,
.wojo.alert.buttons .button:focus,
.wojo.alert.button:hover,
.wojo.alert.button:active,
.wojo.alert.button:focus {
    color: var(--white-color);
    background: var(--alert-color-hover);
    border-color: var(--alert-color-hover);
    box-shadow: 0 5px 10px var(--alert-color-shadow)
}

.wojo.alert.buttons .button:active,
.wojo.alert.buttons .button.active,
.wojo.alert.buttons .button:focus .wojo.alert.button:active,
.wojo.alert.button.active,
.wojo.alert.button:focus {
    background: var(--alert-color-active);
    box-shadow: 0 0 0 .250rem var(--alert-color-shadow)
}

.wojo.simple.alert.buttons .button,
.wojo.simple.alert.button {
    color: var(--alert-color-hover);
    border-color: transparent
}

.wojo.simple.alert.button:hover,
.wojo.simple.alert.button.active,
.wojo.simple.alert.button:active {
    color: var(--alert-color-hover);
    background: var(--alert-color-inverted);
    box-shadow: none
}

.wojo.basic.alert.buttons .button,
.wojo.basic.alert.button {
    border-color: var(--alert-color-hover);
    color: var(--alert-color-hover)
}

.wojo.basic.alert.button:hover,
.wojo.basic.alert.button.active,
.wojo.basic.alert.button:active {
    color: var(--white-color)
}

.wojo.inverted.alert.buttons .button,
.wojo.inverted.alert.button {
    background-color: var(--alert-color-inverted);
    color: var(--alert-color);
    border-color: var(--alert-color-inverted)
}

.wojo.inverted.alert.buttons .button.active,
.wojo.inverted.alert.buttons .button:hover,
.wojo.inverted.alert.button:hover,
.wojo.inverted.alert.button.active,
.wojo.inverted.alert.button:active {
    color: var(--white-color);
    background: var(--alert-color);
    border-color: var(--alert-color)
}

.wojo.inverted.alert.buttons .button.active,
.wojo.inverted.alert.button.active {
    box-shadow: none
}

.wojo.info.buttons .button,
.wojo.info.button {
    background-color: var(--info-color);
    color: var(--white-color);
    border-color: var(--info-color)
}

.wojo.info.buttons .button:hover,
.wojo.info.buttons .button:active,
.wojo.info.buttons .button:focus,
.wojo.info.button:hover,
.wojo.info.button:active,
.wojo.info.button:focus {
    color: var(--white-color);
    background: var(--info-color-hover);
    border-color: var(--info-color-hover);
    box-shadow: 0 5px 10px var(--info-color-shadow)
}

.wojo.info.buttons .button:active,
.wojo.info.buttons .button.active,
.wojo.info.buttons .button:focus .wojo.info.button:active,
.wojo.info.button.active,
.wojo.info.button:focus {
    background: var(--info-color-active);
    box-shadow: 0 0 0 .250rem var(--info-color-shadow)
}

.wojo.simple.info.buttons .button,
.wojo.simple.info.button {
    color: var(--info-color-hover);
    border-color: transparent
}

.wojo.simple.info.button:hover,
.wojo.simple.info.button.active,
.wojo.simple.info.button:active {
    color: var(--info-color-hover);
    background: var(--info-color-inverted);
    box-shadow: none
}

.wojo.basic.info.buttons .button,
.wojo.basic.info.button {
    border-color: var(--info-color-hover);
    color: var(--info-color-hover)
}

.wojo.basic.info.button:hover,
.wojo.basic.info.button.active,
.wojo.basic.info.button:active {
    color: var(--white-color)
}

.wojo.inverted.info.buttons .button,
.wojo.inverted.info.button {
    background-color: var(--info-color-inverted);
    color: var(--info-color);
    border-color: var(--info-color-inverted)
}

.wojo.inverted.info.buttons .button.active,
.wojo.inverted.info.buttons .button:hover,
.wojo.inverted.info.button:hover,
.wojo.inverted.info.button.active,
.wojo.inverted.info.button:active {
    color: var(--white-color);
    background: var(--info-color);
    border-color: var(--info-color)
}

.wojo.inverted.info.buttons .button.active,
.wojo.inverted.info.button.active {
    box-shadow: none
}

.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);
    box-shadow: 0 5px 10px var(--light-color-shadow)
}

.wojo.light.buttons .button:active,
.wojo.light.buttons .button.active,
.wojo.light.buttons .button:focus,
.wojo.light.button:active,
.wojo.light.button.active,
.wojo.light.button:focus {
    box-shadow: 0 0 0 .250rem var(--dark-color-shadow)
}

.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: var(--white-color);
    background: var(--light-color);
    border-color: var(--light-color)
}

.wojo.dark.buttons .button,
.wojo.dark.button {
    background-color: var(--dark-color);
    color: var(--white-color);
    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: var(--white-color);
    background: var(--dark-color-hover);
    border-color: var(--dark-color-hover);
    box-shadow: 0 5px 10px var(--dark-color-shadow)
}

.wojo.dark.buttons .button:active,
.wojo.dark.buttons .button.active,
.wojo.dark.buttons .button:focus,
.wojo.dark.button:active,
.wojo.dark.button.active,
.wojo.dark.button:focus {
    box-shadow: 0 0 0 .250rem var(--dark-color-shadow)
}

.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: var(--white-color)
}

.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: var(--white-color);
    background: var(--dark-color);
    border-color: var(--dark-color)
}

.wojo.white.buttons .button,
.wojo.white.button {
    background-color: var(--white-color);
    color: var(--body-color);
    border-color: var(--white-color)
}

.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: var(--white-color);
    border-color: var(--white-color);
    box-shadow: 0 4px 6px var(--shadow-color), 0 1px 3px var(--shadow-color)
}

.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: var(--white-color);
    color: var(--white-color)
}

.wojo.basic.white.button:hover,
.wojo.basic.white.button.active,
.wojo.basic.white.button:active {
    color: var(--body-color)
}

.wojo.transparent.buttons .button,
.wojo.transparent.button {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white-color);
    border-color: transparent
}

.wojo.transparent.buttons .button:hover,
.wojo.transparent.buttons .button:active,
.wojo.transparent.buttons .button:focus,
.wojo.transparent.button:hover,
.wojo.transparent.button:active,
.wojo.transparent.button:focus {
    background: rgba(255, 255, 255, 0.5);
    border-color: transparent
}

.wojo.fluid.button,
.wojo.fluid.buttons {
    display: flex;
    margin: 0
}

.wojo.fluid.buttons .button {
    flex: 1 1 0;
    min-width: 0
}

.wojo.fluid.labeled.button span {
    flex: 1 1 0
}

button.wojo.fluid.button {
    width: calc(100% - 2px)
}

.wojo.icon.button {
    margin: 0;
    line-height: 1rem;
    padding: .875rem;
    font-size: 1rem
}

.wojo.icon.button .icon {
    width: 1.250rem
}

.wojo.button svg {
    width: 1rem;
    margin-right: 1rem
}

.wojo.button:not(.icon) .icon {
    margin-right: 1rem
}

.wojo.right.button:not(.labeled):not(.icon) .icon {
    margin-right: 0;
    margin-left: 1rem
}

.wojo.left.right.button:not(.labeled):not(.icon) .icon {
    margin-right: 1rem;
    margin-left: 1rem
}

.wojo.labeled.button {
    padding: 0
}

.wojo.labeled.button span,
.wojo.labeled.button .icon {
    flex: 0 1 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(255, 255, 255, .1)
}

.wojo.button.start {
    justify-content: flex-start
}

.wojo.buttons {
    display: inline-flex;
    flex-direction: row
}

.wojo.buttons .button {
    flex: 1 0 auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none
}

.wojo.buttons .button:first-child {
    border-radius: var(--radius) 0 0 var(--radius)
}

.wojo.buttons .button:last-child {
    border-radius: 0 var(--radius) var(--radius) 0
}

.wojo.buttons .button:only-child {
    border-radius: var(--radius)
}

.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.rounded.buttons .button:only-child {
    border-radius: 2rem
}

.wojo.circular.button {
    border-radius: 100rem
}

.wojo.compact.buttons,
.wojo.compact.button {
    padding: .5rem 1rem
}

.wojo.rounded.buttons,
.wojo.rounded.button {
    border-radius: 3rem
}

.wojo.spaced.button {
    margin-right: .5rem
}

.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.top.center.buttons,
.wojo.attached.top.center.button,
.wojo.attached.bottom.center.buttons,
.wojo.attached.bottom.center.button {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 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.spaced.bottom.buttons,
.wojo.attached.spaced.bottom.button {
    bottom: 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.buttons.vertical {
    display: flex;
    flex-direction: column
}

.wojo.buttons.vertical>.button,
.wojo.buttons.vertical>.buttons {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--radius);
    margin-bottom: .250rem
}

.wojo.buttons.vertical>.buttons {
    display: flex;
    flex-direction: row
}

.wojo.buttons.vertical>.buttons .button.auto {
    flex: 0 0 auto
}

.wojo.buttons .button,
.wojo.button {
    font-size: 1rem
}

.wojo.small.buttons .button,
.wojo.small.button {
    font-size: .875rem;
    padding: .625rem 1.25rem
}

.wojo.small.labeled.button span {
    font-size: .875rem;
    padding: .625rem 1rem
}

.wojo.mini.buttons .button,
.wojo.mini.button,
.wojo.mini.labeled.button span {
    font-size: .750rem;
    padding: .375rem 1rem
}

.wojo.mini.icon.button,
.wojo.mini.circular.button,
.wojo.mini.icon.button,
.wojo.mini.labeled.button .icon {
    padding: .375rem
}

.wojo.mini.button .icon,
.wojo.small.button .icon {
    font-size: 1.25rem
}

.wojo.mini.labeled.buttons .button,
.wojo.mini.labeled.button,
.wojo.labeled.small.buttons .button,
.wojo.labeled.small.button {
    padding: 0
}

.wojo.small.icon.button,
.wojo.small.circular.button,
.wojo.small.icon.button,
.wojo.small.labeled.button .icon {
    padding: .625rem
}

.wojo.big.buttons .button,
.wojo.big.button {
    font-size: 1rem;
    padding: 1.25rem 2rem
}

.wojo.big.circular.button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 1.25rem
}

.wojo.big.circular.button .icon {
    font-size: 1.25rem;
    width: 1.25rem
}

.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: var(--white-color);
    -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: var(--white-color)
}

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

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

@media screen and (max-width:640px) {
    .wojo.stacked.button {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: .250rem;
    }

    .wojo.buttons.stacked {
        display: flex;
        flex-direction: column;
    }

    .wojo.buttons.stacked .button {
        flex: 1 1 0;
        min-width: 0;
        border-radius: var(--radius);
        justify-content: flex-start;
        margin-bottom: .250rem;
    }

    .wojo.buttons.stacked .button:first-child,
    .wojo.buttons.stacked .button:last-child {
        border-radius: var(--radius);
    }
}

@font-face {
    font-family: 'WojoIcons';
    src: url('../fonts/wojoicons.ttf?y667ih') format('truetype'), url('../fonts/wojoicons.woff?y667ih') format('woff'), url('../fonts/wojoicons.svg?y667ih#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;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative
}

i.icon.align.around::before {
    content: "\e900";
    opacity: 0.5
}

i.icon.align.around::after {
    content: "\e901";
    margin-left: -1em
}

i.icon.align.between::before {
    content: "\e902";
    opacity: 0.5
}

i.icon.align.between::after {
    content: "\e903";
    margin-left: -1em
}

i.icon.align.bottom::before {
    content: "\e904";
    opacity: 0.5
}

i.icon.align.bottom::after {
    content: "\e905";
    margin-left: -1em
}

i.icon.align.center::before {
    content: "\e906";
    opacity: 0.5
}

i.icon.align.center::after {
    content: "\e907";
    margin-left: -1em
}

i.icon.align.end::before {
    content: "\e908";
    opacity: 0.5
}

i.icon.align.end::after {
    content: "\e909";
    margin-left: -1em
}

i.icon.align.middle::before {
    content: "\e90e";
    opacity: 0.5
}

i.icon.align.middle::after {
    content: "\e90f";
    margin-left: -1em
}

i.icon.align.start::before {
    content: "\e90a";
    opacity: 0.5
}

i.icon.align.start::after {
    content: "\e90b";
    margin-left: -1em
}

i.icon.align.top::before {
    content: "\e90c";
    opacity: 0.5
}

i.icon.align.top::after {
    content: "\e90d";
    margin-left: -1em
}

i.icon.amazon:before {
    content: "\ec21"
}

i.icon.apple:before {
    content: "\ec22"
}

i.icon.archive::before {
    content: "\e910";
    opacity: 0.5
}

i.icon.archive::after {
    content: "\e911";
    margin-left: -1em
}

i.icon.arrow.bar.down::before {
    content: "\e912";
    opacity: 0.5
}

i.icon.arrow.bar.down::after {
    content: "\e913";
    margin-left: -1em
}

i.icon.arrow.bar.left::before {
    content: "\e914";
    opacity: 0.5
}

i.icon.arrow.bar.left::after {
    content: "\e915";
    margin-left: -1em
}

i.icon.arrow.bar.right::before {
    content: "\e916";
    opacity: 0.5
}

i.icon.arrow.bar.right::after {
    content: "\e917";
    margin-left: -1em
}

i.icon.arrow.bar.up::before {
    content: "\e918";
    opacity: 0.5
}

i.icon.arrow.bar.up::after {
    content: "\e919";
    margin-left: -1em
}

i.icon.arrow.clockwise::before {
    content: "\e91a";
    opacity: 0.5
}

i.icon.arrow.clockwise::after {
    content: "\e91b";
    margin-left: -1em
}

i.icon.arrow.counterclockwise::before {
    content: "\e91c";
    opacity: 0.5
}

i.icon.arrow.counterclockwise::after {
    content: "\e91d";
    margin-left: -1em
}

i.icon.arrow.down::before {
    content: "\e91e";
    opacity: 0.5
}

i.icon.arrow.down::after {
    content: "\e91f";
    margin-left: -1em
}

i.icon.arrow.down.left::before {
    content: "\e926";
    opacity: 0.5
}

i.icon.arrow.down.left::after {
    content: "\e927";
    margin-left: -1em
}

i.icon.arrow.down.right::before {
    content: "\e928";
    opacity: 0.5
}

i.icon.arrow.down.right::after {
    content: "\e929";
    margin-left: -1em
}

i.icon.arrow.left::before {
    content: "\e922";
    opacity: 0.5
}

i.icon.arrow.left::after {
    content: "\e923";
    margin-left: -1em
}

i.icon.arrow.right::before {
    content: "\e924";
    opacity: 0.5
}

i.icon.arrow.right::after {
    content: "\e925";
    margin-left: -1em
}

i.icon.arrow.up::before {
    content: "\e920";
    opacity: 0.5
}

i.icon.arrow.up::after {
    content: "\e921";
    margin-left: -1em
}

i.icon.arrow.up.left::before {
    content: "\e92a";
    opacity: 0.5
}

i.icon.arrow.up.left::after {
    content: "\e92b";
    margin-left: -1em
}

i.icon.arrow.up.right::before {
    content: "\e92c";
    opacity: 0.5
}

i.icon.arrow.up.right::after {
    content: "\e92d";
    margin-left: -1em
}

i.icon.arrows.collaps::before {
    content: "\e92e";
    opacity: 0.5
}

i.icon.arrows.collaps::after {
    content: "\e92f";
    margin-left: -1em
}

i.icon.arrows.expand::before {
    content: "\e930";
    opacity: 0.5
}

i.icon.arrows.expand::after {
    content: "\e931";
    margin-left: -1em
}

i.icon.arrows.fullscreen::before {
    content: "\e932";
    opacity: 0.5
}

i.icon.arrows.fullscreen::after {
    content: "\e933";
    margin-left: -1em
}

i.icon.arrows.move::before {
    content: "\e934";
    opacity: 0.5
}

i.icon.arrows.move::after {
    content: "\e935";
    margin-left: -1em
}

i.icon.aspect.ratio::before {
    content: "\e936";
    opacity: 0.5
}

i.icon.aspect.ratio::after {
    content: "\e937";
    margin-left: -1em
}

i.icon.asterisk:before {
    content: "\e938"
}

i.icon.award::before {
    content: "\e939";
    opacity: 0.5
}

i.icon.award::after {
    content: "\e93a";
    margin-left: -1em
}

i.icon.back::before {
    content: "\e93b";
    opacity: 0.5
}

i.icon.back::after {
    content: "\e93c";
    margin-left: -1em
}

i.icon.backspace::before {
    content: "\e93d";
    opacity: 0.5
}

i.icon.backspace::after {
    content: "\e93e";
    margin-left: -1em
}

i.icon.bag::before {
    content: "\e93f";
    opacity: 0.5
}

i.icon.bag::after {
    content: "\e940";
    margin-left: -1em
}

i.icon.bar.chart::before {
    content: "\e941";
    opacity: 0.5
}

i.icon.bar.chart::after {
    content: "\e942";
    margin-left: -1em
}

i.icon.bar.chart.alt::before {
    content: "\e943";
    opacity: 0.5
}

i.icon.bar.chart.alt::after {
    content: "\e944";
    margin-left: -1em
}

i.icon.bar.chart.line::before {
    content: "\e945";
    opacity: 0.5
}

i.icon.bar.chart.line::after {
    content: "\e946";
    margin-left: -1em
}

i.icon.bar.chart.steps::before {
    content: "\e947";
    opacity: 0.5
}

i.icon.bar.chart.steps::after {
    content: "\e948";
    margin-left: -1em
}

i.icon.basket::before {
    content: "\e949";
    opacity: 0.5
}

i.icon.basket::after {
    content: "\e94a";
    margin-left: -1em
}

i.icon.basket.fill::before {
    content: "\e94b";
    opacity: 0.5
}

i.icon.basket.fill::after {
    content: "\e94c";
    margin-left: -1em
}

i.icon.battery:before {
    content: "\e94d"
}

i.icon.battery.charging::before {
    content: "\e94e";
    opacity: 0.5
}

i.icon.battery.charging::after {
    content: "\e94f";
    margin-left: -1em
}

i.icon.battery.full::before {
    content: "\e950";
    opacity: 0.5
}

i.icon.battery.full::after {
    content: "\e951";
    margin-left: -1em
}

i.icon.battery.half::before {
    content: "\e952";
    opacity: 0.5
}

i.icon.battery.half::after {
    content: "\e953";
    margin-left: -1em
}

i.icon.bell::before {
    content: "\e954";
    opacity: 0.5
}

i.icon.bell::after {
    content: "\e955";
    margin-left: -1em
}

i.icon.bicycle::before {
    content: "\e956";
    opacity: 0.5
}

i.icon.bicycle::after {
    content: "\e957";
    margin-left: -1.2001953125em
}

i.icon.binoculars::before {
    content: "\e958";
    opacity: 0.5
}

i.icon.binoculars::after {
    content: "\e959";
    margin-left: -1em
}

i.icon.blockquote.left::before {
    content: "\e95a";
    opacity: 0.5
}

i.icon.blockquote.left::after {
    content: "\e95b";
    margin-left: -1em
}

i.icon.blockquote.right::before {
    content: "\e95c";
    opacity: 0.5
}

i.icon.blockquote.right::after {
    content: "\e95d";
    margin-left: -1em
}

i.icon.book::before {
    content: "\e95e";
    opacity: 0.5
}

i.icon.book::after {
    content: "\e95f";
    margin-left: -1em
}

i.icon.bookmark::before {
    content: "\e960";
    opacity: 0.5
}

i.icon.bookmark::after {
    content: "\e961";
    margin-left: -1em
}

i.icon.bookshelf::before {
    content: "\e962";
    opacity: 0.5
}

i.icon.bookshelf::after {
    content: "\e963";
    margin-left: -1.2001953125em
}

i.icon.box::before {
    content: "\e964";
    opacity: 0.5
}

i.icon.box::after {
    content: "\e965";
    margin-left: -1em
}

i.icon.briefcase::before {
    content: "\e966";
    opacity: 0.5
}

i.icon.briefcase::after {
    content: "\e967";
    margin-left: -1em
}

i.icon.brightness.alt.high::before {
    content: "\e968";
    opacity: 0.5
}

i.icon.brightness.alt.high::after {
    content: "\e969";
    margin-left: -1em
}

i.icon.brightness.alt.low::before {
    content: "\e96a";
    opacity: 0.5
}

i.icon.brightness.alt.low::after {
    content: "\e96b";
    margin-left: -1em
}

i.icon.brightness.high::before {
    content: "\e96c";
    opacity: 0.5
}

i.icon.brightness.high::after {
    content: "\e96d";
    margin-left: -1em
}

i.icon.brightness.low::before {
    content: "\e96e";
    opacity: 0.4
}

i.icon.brightness.low::after {
    content: "\e96f";
    margin-left: -1em
}

i.icon.broadcast::before {
    content: "\e970";
    opacity: 0.5
}

i.icon.broadcast::after {
    content: "\e971";
    margin-left: -1em
}

i.icon.brush::before {
    content: "\e972";
    opacity: 0.5
}

i.icon.brush::after {
    content: "\e973";
    margin-left: -1em
}

i.icon.bucket::before {
    content: "\e974";
    opacity: 0.5
}

i.icon.bucket::after {
    content: "\e975";
    margin-left: -1em
}

i.icon.bug::before {
    content: "\e976";
    opacity: 0.5
}

i.icon.bug::after {
    content: "\e977";
    margin-left: -1em
}

i.icon.building::before {
    content: "\e978";
    opacity: 0.5
}

i.icon.building::after {
    content: "\e979";
    margin-left: -1em
}

i.icon.bullseye::before {
    content: "\e97a";
    opacity: 0.5
}

i.icon.bullseye::after {
    content: "\e97b";
    margin-left: -1em
}

i.icon.calculator::before {
    content: "\e97c";
    opacity: 0.5
}

i.icon.calculator::after {
    content: "\e97d";
    margin-left: -1em
}

i.icon.calendar::before {
    content: "\e97e";
    opacity: 0.5
}

i.icon.calendar::after {
    content: "\e97f";
    margin-left: -1em
}

i.icon.calendar.date::before {
    content: "\e980";
    opacity: 0.5
}

i.icon.calendar.date::after {
    content: "\e981";
    margin-left: -1em
}

i.icon.calendar.event::before {
    content: "\e982";
    opacity: 0.5
}

i.icon.calendar.event::after {
    content: "\e983";
    margin-left: -1em
}

i.icon.calendar.full::before {
    content: "\e984";
    opacity: 0.5
}

i.icon.calendar.full::after {
    content: "\e985";
    margin-left: -1em
}

i.icon.calendar.month::before {
    content: "\e986";
    opacity: 0.5
}

i.icon.calendar.month::after {
    content: "\e987";
    margin-left: -1em
}

i.icon.calendar.range::before {
    content: "\e988";
    opacity: 0.5
}

i.icon.calendar.range::after {
    content: "\e989";
    margin-left: -1em
}

i.icon.calendar.week::before {
    content: "\e98a";
    opacity: 0.5
}

i.icon.calendar.week::after {
    content: "\e98b";
    margin-left: -1em
}

i.icon.camera::before {
    content: "\e98c";
    opacity: 0.5
}

i.icon.camera::after {
    content: "\e98d";
    margin-left: -1em
}

i.icon.camera.alt::before {
    content: "\e98e";
    opacity: 0.5
}

i.icon.camera.alt::after {
    content: "\e98f";
    margin-left: -1em
}

i.icon.camera.reels::before {
    content: "\e990";
    opacity: 0.5
}

i.icon.camera.reels::after {
    content: "\e991";
    margin-left: -1em
}

i.icon.car::before {
    content: "\e992";
    opacity: 0.5
}

i.icon.car::after {
    content: "\e993";
    margin-left: -1em
}

i.icon.car.alt::before {
    content: "\e994";
    opacity: 0.5
}

i.icon.car.alt::after {
    content: "\e995";
    margin-left: -1em
}

i.icon.card.checklist::before {
    content: "\e996";
    opacity: 0.5
}

i.icon.card.checklist::after {
    content: "\e997";
    margin-left: -1em
}

i.icon.card.heading::before {
    content: "\e998";
    opacity: 0.5
}

i.icon.card.heading::after {
    content: "\e999";
    margin-left: -1em
}

i.icon.card.image::before {
    content: "\e99a";
    opacity: 0.5
}

i.icon.card.image::after {
    content: "\e99b";
    margin-left: -1em
}

i.icon.card.image.fill::before {
    content: "\e99c";
    opacity: 0.5
}

i.icon.card.image.fill::after {
    content: "\e99d";
    margin-left: -1em
}

i.icon.card.list::before {
    content: "\e99e";
    opacity: 0.5
}

i.icon.card.list::after {
    content: "\e99f";
    margin-left: -1em
}

i.icon.card.list.fill::before {
    content: "\e9a0";
    opacity: 0.5
}

i.icon.card.list.fill::after {
    content: "\e9a1";
    margin-left: -1em
}

i.icon.card.text::before {
    content: "\e9a2";
    opacity: 0.5
}

i.icon.card.text::after {
    content: "\e9a3";
    margin-left: -1em
}

i.icon.caret.down::before {
    content: "\e9a4";
    opacity: 0.5
}

i.icon.caret.down::after {
    content: "\e9a5";
    margin-left: -1em
}

i.icon.caret.up::before {
    content: "\e9a6";
    opacity: 0.5
}

i.icon.caret.up::after {
    content: "\e9a7";
    margin-left: -1em
}

i.icon.caret.left::before {
    content: "\e9a8";
    opacity: 0.5
}

i.icon.caret.left::after {
    content: "\e9a9";
    margin-left: -1em
}

i.icon.caret.right::before {
    content: "\e9aa";
    opacity: 0.5
}

i.icon.caret.right::after {
    content: "\e9ab";
    margin-left: -1em
}

i.icon.caret.down.square::before {
    content: "\e9ac";
    opacity: 0.5
}

i.icon.caret.down.square::after {
    content: "\e9ad";
    margin-left: -1em
}

i.icon.caret.up.square::before {
    content: "\e9ae";
    opacity: 0.5
}

i.icon.caret.up.square::after {
    content: "\e9af";
    margin-left: -1em
}

i.icon.caret.left.square::before {
    content: "\e9b0";
    opacity: 0.5
}

i.icon.caret.left.square::after {
    content: "\e9b1";
    margin-left: -1em
}

i.icon.caret.right.square::before {
    content: "\e9b2";
    opacity: 0.5
}

i.icon.caret.right.square::after {
    content: "\e9b3";
    margin-left: -1em
}

i.icon.cart::before {
    content: "\e9b4";
    opacity: 0.5
}

i.icon.cart::after {
    content: "\e9b5";
    margin-left: -1em
}

i.icon.cart.alt::before {
    content: "\e9b6";
    opacity: 0.5
}

i.icon.cart.alt::after {
    content: "\e9b7";
    margin-left: -1em
}

i.icon.cash::before {
    content: "\e9b8";
    opacity: 0.5
}

i.icon.cash::after {
    content: "\e9b9";
    margin-left: -1em
}

i.icon.cash.stack::before {
    content: "\e9ba";
    opacity: 0.5
}

i.icon.cash.stack::after {
    content: "\e9bb";
    margin-left: -1em
}

i.icon.cast::before {
    content: "\e9bc";
    opacity: 0.5
}

i.icon.cast::after {
    content: "\e9bd";
    margin-left: -1em
}

i.icon.chat:before {
    content: "\e9be"
}

i.icon.chat.dots.round::before {
    content: "\e9bf";
    opacity: 0.5
}

i.icon.chat.dots.round::after {
    content: "\eca4";
    margin-left: -1em
}

i.icon.chat.dots.square::before {
    content: "\e9c0";
    opacity: 0.5
}

i.icon.chat.dots.square::after {
    content: "\e9c1";
    margin-left: -1em
}

i.icon.chat.square.text::before {
    content: "\e9c2";
    opacity: 0.5
}

i.icon.chat.square.text::after {
    content: "\e9c3";
    margin-left: -1em
}

i.icon.chat.text.round::before {
    content: "\e9c4";
    opacity: 0.5
}

i.icon.chat.text.round::after {
    content: "\e9c5";
    margin-left: -1em
}

i.icon.check::before {
    content: "\e9c6";
    opacity: 0.5
}

i.icon.check::after {
    content: "\e9c7";
    margin-left: -1em
}

i.icon.check.all::before {
    content: "\e9c8"
}

i.icon.check.all::after {
    content: "\e9c9";
    margin-left: -1em;
    opacity: 0.5
}

i.icon.check.alt::before {
    content: "\e9ca";
    opacity: 0.5
}

i.icon.check.alt::after {
    content: "\e9cb";
    margin-left: -1em
}

i.icon.check.all.alt::before {
    content: "\e9cc";
    opacity: 0.5
}

i.icon.check.all.alt::after {
    content: "\e9cd";
    margin-left: -1em
}

i.icon.check.square::before {
    content: "\e9ce";
    opacity: 0.5
}

i.icon.check.square::after {
    content: "\e9cf";
    margin-left: -1em
}

i.icon.check.square.alt::before {
    content: "\e9d0";
    opacity: 0.5
}

i.icon.check.square.alt::after {
    content: "\e9d1";
    margin-left: -1em
}

i.icon.check.circle::before {
    content: "\e9d2";
    opacity: 0.5
}

i.icon.check.circle::after {
    content: "\e9d3";
    margin-left: -1em
}

i.icon.check.circle.alt::before {
    content: "\e9d4";
    opacity: 0.5
}

i.icon.check.circle.alt::after {
    content: "\e9d5";
    margin-left: -1em
}

i.icon.chevron.bar.contract::before {
    content: "\e9d6";
    opacity: 0.5
}

i.icon.chevron.bar.contract::after {
    content: "\e9d7";
    margin-left: -1em
}

i.icon.chevron.bar.expand::before {
    content: "\e9d8";
    opacity: 0.5
}

i.icon.chevron.bar.expand::after {
    content: "\e9d9";
    margin-left: -1em
}

i.icon.chevron.bar.up::before {
    content: "\e9da";
    opacity: 0.5
}

i.icon.chevron.bar.up::after {
    content: "\e9db";
    margin-left: -1em
}

i.icon.chevron.bar.down::before {
    content: "\e9dc";
    opacity: 0.5
}

i.icon.chevron.bar.down::after {
    content: "\e9dd";
    margin-left: -1em
}

i.icon.chevron.bar.left::before {
    content: "\e9de";
    opacity: 0.5
}

i.icon.chevron.bar.left::after {
    content: "\e9df";
    margin-left: -1em
}

i.icon.chevron.bar.right::before {
    content: "\e9e0";
    opacity: 0.5
}

i.icon.chevron.bar.right::after {
    content: "\e9e1";
    margin-left: -1em
}

i.icon.chevron.double.down::before {
    content: "\e9e2";
    opacity: 0.5
}

i.icon.chevron.double.down::after {
    content: "\e9e3";
    margin-left: -1em
}

i.icon.chevron.double.up::before {
    content: "\e9e4";
    opacity: 0.5
}

i.icon.chevron.double.up::after {
    content: "\e9e5";
    margin-left: -1em
}

i.icon.chevron.double.left::before {
    content: "\e9e6";
    opacity: 0.5
}

i.icon.chevron.double.left::after {
    content: "\e9e7";
    margin-left: -1em
}

i.icon.chevron.double.right::before {
    content: "\e9e8";
    opacity: 0.5
}

i.icon.chevron.double.right::after {
    content: "\e9e9";
    margin-left: -1em
}

i.icon.chevron.double.down.alt::before {
    content: "\e9ea";
    opacity: 0.5
}

i.icon.chevron.double.down.alt::after {
    content: "\e9eb";
    margin-left: -1em
}

i.icon.chevron.double.up.alt::before {
    content: "\e9ec";
    opacity: 0.5
}

i.icon.chevron.double.up.alt::after {
    content: "\e9ed";
    margin-left: -1em
}

i.icon.chevron.double.left.alt::before {
    content: "\e9ee";
    opacity: 0.5
}

i.icon.chevron.double.left.alt::after {
    content: "\e9ef";
    margin-left: -1em
}

i.icon.chevron.double.right.alt::before {
    content: "\e9f0";
    opacity: 0.5
}

i.icon.chevron.double.right.alt::after {
    content: "\e9f1";
    margin-left: -1em
}

i.icon.chevron.down:before {
    content: "\e9f2"
}

i.icon.chevron.up:before {
    content: "\e9f3"
}

i.icon.chevron.left:before {
    content: "\e9f4"
}

i.icon.chevron.right:before {
    content: "\e9f5"
}

i.icon.chevron.down.alt:before {
    content: "\e9f6"
}

i.icon.chevron.up.alt:before {
    content: "\e9f7"
}

i.icon.chevron.left.alt:before {
    content: "\e9f8"
}

i.icon.chevron.right.alt:before {
    content: "\e9f9"
}

i.icon.clock::before {
    content: "\e9fa";
    opacity: 0.5
}

i.icon.clock::after {
    content: "\e9fb";
    margin-left: -1em
}

i.icon.circle:before {
    content: "\e9fc"
}

i.icon.circle.fill::before {
    content: "\e9fd";
    opacity: 0.5
}

i.icon.circle.fill::after {
    content: "\e9fe";
    margin-left: -1em
}

i.icon.circle.half::before {
    content: "\e9ff";
    opacity: 0.5
}

i.icon.circle.half::after {
    content: "\ea00";
    margin-left: -1em
}

i.icon.clipboard::before {
    content: "\ea01";
    opacity: 0.5
}

i.icon.clipboard::after {
    content: "\ea02";
    margin-left: -1em
}

i.icon.clipboard.data::before {
    content: "\ea03";
    opacity: 0.5
}

i.icon.clipboard.data::after {
    content: "\ea04";
    margin-left: -1em
}

i.icon.cloud::before {
    content: "\ea05";
    opacity: 0.5
}

i.icon.cloud::after {
    content: "\ea06";
    margin-left: -1em
}

i.icon.cloud.download::before {
    content: "\ea07";
    opacity: 0.5
}

i.icon.cloud.download::after {
    content: "\ea08";
    margin-left: -1em
}

i.icon.cloud.upload::before {
    content: "\ea09";
    opacity: 0.5
}

i.icon.cloud.upload::after {
    content: "\ea0a";
    margin-left: -1em
}

i.icon.code::before {
    content: "\ea0b";
    opacity: 0.5
}

i.icon.code::after {
    content: "\ea0c";
    margin-left: -1em
}

i.icon.code.slash::before {
    content: "\ea0d"
}

i.icon.code.slash::after {
    content: "\ea0e";
    margin-left: -1em;
    opacity: 0.5
}

i.icon.collection::before {
    content: "\ea0f";
    opacity: 0.5
}

i.icon.collection::after {
    content: "\ea10";
    margin-left: -1em
}

i.icon.columns::before {
    content: "\ea11";
    opacity: 0.5
}

i.icon.columns::after {
    content: "\ea12";
    margin-left: -1em
}

i.icon.columns.gap::before {
    content: "\ea13";
    opacity: 0.5
}

i.icon.columns.gap::after {
    content: "\ea14";
    margin-left: -1em
}

i.icon.command::before {
    content: "\ea15";
    opacity: 0.5
}

i.icon.command::after {
    content: "\ea16";
    margin-left: -1em
}

i.icon.cone::before {
    content: "\ea17";
    opacity: 0.5
}

i.icon.cone::after {
    content: "\ea18";
    margin-left: -1em
}

i.icon.compass::before {
    content: "\ea19";
    opacity: 0.5
}

i.icon.compass::after {
    content: "\ea1a";
    margin-left: -1em
}

i.icon.controller::before {
    content: "\ea1b";
    opacity: 0.5
}

i.icon.controller::after {
    content: "\ea1c";
    margin-left: -1.2001953125em
}

i.icon.copy::before {
    content: "\ea1d";
    opacity: 0.5
}

i.icon.copy::after {
    content: "\ea1e";
    margin-left: -1em
}

i.icon.credit.card::before {
    content: "\ea1f";
    opacity: 0.5
}

i.icon.credit.card::after {
    content: "\ea20";
    margin-left: -1em
}

i.icon.crop::before {
    content: "\ea21";
    opacity: 0.5
}

i.icon.crop::after {
    content: "\ea22";
    margin-left: -1em
}

i.icon.cup::before {
    content: "\ea25";
    opacity: 0.5
}

i.icon.cup::after {
    content: "\ea26";
    margin-left: -1em
}

i.icon.cup.hot::before {
    content: "\ea23";
    opacity: 0.5
}

i.icon.cup.hot::after {
    content: "\ea24";
    margin-left: -1em
}

i.icon.cursor::before {
    content: "\ea27";
    opacity: 0.5
}

i.icon.cursor::after {
    content: "\ea28";
    margin-left: -1em
}

i.icon.cursor.text::before {
    content: "\ea29";
    opacity: 0.5
}

i.icon.cursor.text::after {
    content: "\ea2a";
    margin-left: -1em
}

i.icon.customize::before {
    content: "\ea2b";
    opacity: 0.5
}

i.icon.customize::after {
    content: "\ea2c";
    margin-left: -1em
}

i.icon.dash:before {
    content: "\ea2d"
}

i.icon.dash.circle::before {
    content: "\ea2e";
    opacity: 0.5
}

i.icon.dash.circle::after {
    content: "\ea2f";
    margin-left: -1em
}

i.icon.dash.square::before {
    content: "\ea30";
    opacity: 0.5
}

i.icon.dash.square::after {
    content: "\ea31";
    margin-left: -1em
}

i.icon.diagram::before {
    content: "\ea32";
    opacity: 0.5
}

i.icon.diagram::after {
    content: "\ea33";
    margin-left: -1em
}

i.icon.diagram.alt::before {
    content: "\ea34";
    opacity: 0.5
}

i.icon.diagram.alt::after {
    content: "\ea35";
    margin-left: -1em
}

i.icon.diagram.project::before {
    content: "\ea36";
    opacity: 0.5
}

i.icon.diagram.project::after {
    content: "\ea37";
    margin-left: -1em
}

i.icon.diamond:before {
    content: "\ea38"
}

i.icon.dice::before {
    content: "\ea39";
    opacity: 0.5
}

i.icon.dice::after {
    content: "\ea3a";
    margin-left: -1em
}

i.icon.display::before {
    content: "\ea3b";
    opacity: 0.5
}

i.icon.display::after {
    content: "\ea3c";
    margin-left: -1em
}

i.icon.distribute.vertical::before {
    content: "\ea3d";
    opacity: 0.5
}

i.icon.distribute.vertical::after {
    content: "\ea3e";
    margin-left: -1em
}

i.icon.distribute.horizontal::before {
    content: "\ea3f";
    opacity: 0.5
}

i.icon.distribute.horizontal::after {
    content: "\ea40";
    margin-left: -1em
}

i.icon.door.closed::before {
    content: "\ea41";
    opacity: 0.5
}

i.icon.door.closed::after {
    content: "\ea42";
    margin-left: -1em
}

i.icon.download::before {
    content: "\ea43";
    opacity: 0.5
}

i.icon.download::after {
    content: "\ea44";
    margin-left: -1em
}

i.icon.droplet::before {
    content: "\ea45";
    opacity: 0.5
}

i.icon.droplet::after {
    content: "\ea46";
    margin-left: -1em
}

i.icon.easel::before {
    content: "\ea47";
    opacity: 0.5
}

i.icon.easel::after {
    content: "\ea48";
    margin-left: -1em
}

i.icon.egg:before {
    content: "\ea49"
}

i.icon.eject::before {
    content: "\ea4a";
    opacity: 0.5
}

i.icon.eject::after {
    content: "\ea4b";
    margin-left: -1em
}

i.icon.emoji.smile::before {
    content: "\ea4c";
    opacity: 0.5
}

i.icon.emoji.smile::after {
    content: "\ea4d";
    margin-left: -1em
}

i.icon.envelope::before {
    content: "\ea4e";
    opacity: 0.5
}

i.icon.envelope::after {
    content: "\ea4f";
    margin-left: -1em
}

i.icon.envelope.fill::before {
    content: "\ea50";
    opacity: 0.5
}

i.icon.envelope.fill::after {
    content: "\ea51";
    margin-left: -1em
}

i.icon.erase::before {
    content: "\ea52";
    opacity: 0.5
}

i.icon.erase::after {
    content: "\ea53";
    margin-left: -1em
}

i.icon.exclamation.circle::before {
    content: "\ea54";
    opacity: 0.5
}

i.icon.exclamation.circle::after {
    content: "\ea55";
    margin-left: -1em
}

i.icon.exclamation.square::before {
    content: "\ea56";
    opacity: 0.5
}

i.icon.exclamation.square::after {
    content: "\ea57";
    margin-left: -1em
}

i.icon.exclamation.triangle::before {
    content: "\ea58";
    opacity: 0.5
}

i.icon.exclamation.triangle::after {
    content: "\ea59";
    margin-left: -1em
}

i.icon.eye::before {
    content: "\ea5a";
    opacity: 0.5
}

i.icon.eye::after {
    content: "\ea5b";
    margin-left: -1em
}

i.icon.eye.slash::before {
    content: "\ea5c";
    opacity: 0.5
}

i.icon.eye.slash::after {
    content: "\ea5d";
    margin-left: -1em
}

i.icon.eyedropper::before {
    content: "\ea5e";
    opacity: 0.5
}

i.icon.eyedropper::after {
    content: "\ea5f";
    margin-left: -1em
}

i.icon.eyeglasses::before {
    content: "\ea60";
    opacity: 0.5
}

i.icon.eyeglasses::after {
    content: "\ea61";
    margin-left: -1.0999999999999996em
}

i.icon.file::before {
    content: "\ea62";
    opacity: 0.5
}

i.icon.file::after {
    content: "\ea63";
    margin-left: -1em
}

i.icon.file.minus::before {
    content: "\ea64";
    opacity: 0.5
}

i.icon.file.minus::after {
    content: "\ea65";
    margin-left: -1em
}

i.icon.file.plus::before {
    content: "\ea66";
    opacity: 0.5
}

i.icon.file.plus::after {
    content: "\ea67";
    margin-left: -1em
}

i.icon.files::before {
    content: "\ea68";
    opacity: 0.5
}

i.icon.files::after {
    content: "\ea69";
    margin-left: -1em
}

i.icon.film::before {
    content: "\ea6a";
    opacity: 0.5
}

i.icon.film::after {
    content: "\ea6b";
    margin-left: -1em
}

i.icon.filter::before {
    content: "\ea6c";
    opacity: 0.5
}

i.icon.filter::after {
    content: "\ea6d";
    margin-left: -1em
}

i.icon.filter.left::before {
    content: "\ea6e";
    opacity: 0.5
}

i.icon.filter.left::after {
    content: "\ea6f";
    margin-left: -1em
}

i.icon.filter.right::before {
    content: "\ea70";
    opacity: 0.5
}

i.icon.filter.right::after {
    content: "\ea71";
    margin-left: -1em
}

i.icon.flag::before {
    content: "\ea72";
    opacity: 0.5
}

i.icon.flag::after {
    content: "\ea73";
    margin-left: -1em
}

i.icon.folder::before {
    content: "\ea74";
    opacity: 0.5
}

i.icon.folder::after {
    content: "\ea75";
    margin-left: -1em
}

i.icon.folder.open::before {
    content: "\ea76";
    opacity: 0.5
}

i.icon.folder.open::after {
    content: "\ea77";
    margin-left: -1em
}

i.icon.folder.tree::before {
    content: "\ea78";
    opacity: 0.5
}

i.icon.folder.tree::after {
    content: "\ea79";
    margin-left: -1em
}

i.icon.front::before {
    content: "\ea7a";
    opacity: 0.5
}

i.icon.front::after {
    content: "\ea7b";
    margin-left: -1em
}

i.icon.fullscreen:before {
    content: "\ea7c"
}

i.icon.fullscreen.exit:before {
    content: "\ea7d"
}

i.icon.funnel::before {
    content: "\ea7e";
    opacity: 0.5
}

i.icon.funnel::after {
    content: "\ea7f";
    margin-left: -1em
}

i.icon.gallery.thumbnails::before {
    content: "\ea80";
    opacity: 0.5
}

i.icon.gallery.thumbnails::after {
    content: "\ea81";
    margin-left: -1em
}

i.icon.gavel::before {
    content: "\ea82";
    opacity: 0.5
}

i.icon.gavel::after {
    content: "\ea83";
    margin-left: -1em
}

i.icon.gear::before {
    content: "\ea84";
    opacity: 0.5
}

i.icon.gear::after {
    content: "\ea85";
    margin-left: -1em
}

i.icon.gear.fill::before {
    content: "\ea86";
    color: rgb(35, 31, 32);
    opacity: 0.5
}

i.icon.gear.fill::after {
    content: "\ea87";
    margin-left: -1em
}

i.icon.gears::before {
    content: "\ea88";
    opacity: 0.5
}

i.icon.gears::after {
    content: "\ea89";
    margin-left: -1em
}

i.icon.gem::before {
    content: "\ea8a";
    opacity: 0.5
}

i.icon.gem::after {
    content: "\ea8b";
    margin-left: -1em
}

i.icon.geo::before {
    content: "\ea8c";
    opacity: 0.5
}

i.icon.geo::after {
    content: "\ea8d";
    margin-left: -1em
}

i.icon.geo.alt::before {
    content: "\ea8e";
    opacity: 0.5
}

i.icon.geo.alt::after {
    content: "\ea8f";
    margin-left: -1em
}

i.icon.gift::before {
    content: "\ea90";
    opacity: 0.5
}

i.icon.gift::after {
    content: "\ea91";
    margin-left: -1em
}

i.icon.globe::before {
    content: "\ea92";
    opacity: 0.5
}

i.icon.globe::after {
    content: "\ea93";
    margin-left: -1em
}

i.icon.graph.down.arrow::before {
    content: "\ea94";
    opacity: 0.5
}

i.icon.graph.down.arrow::after {
    content: "\ea95";
    margin-left: -1em
}

i.icon.graph.up.arrow::before {
    content: "\ea96";
    opacity: 0.5
}

i.icon.graph.up.arrow::after {
    content: "\ea97";
    margin-left: -1em
}

i.icon.grid::before {
    content: "\ea98";
    opacity: 0.5
}

i.icon.grid::after {
    content: "\ea99";
    margin-left: -1em
}

i.icon.grid.fill::before {
    content: "\ea9a";
    opacity: 0.5
}

i.icon.grid.fill::after {
    content: "\ea9b";
    margin-left: -1em
}

i.icon.grid.onebytwo::before {
    content: "\ea9c";
    opacity: 0.5
}

i.icon.grid.onebytwo::after {
    content: "\ea9d";
    margin-left: -1em
}

i.icon.grid.threebytwo.gap::before {
    content: "\ea9e";
    opacity: 0.5
}

i.icon.grid.threebytwo.gap::after {
    content: "\ea9f";
    margin-left: -1em
}

i.icon.grid.threebythree.gap::before {
    content: "\eaa0";
    opacity: 0.5
}

i.icon.grid.threebythree.gap::after {
    content: "\eaa1";
    margin-left: -1em
}

i.icon.grid.threebythree.gap.fill::before {
    content: "\eaa2";
    opacity: 0.5
}

i.icon.grid.threebythree.gap.fill::after {
    content: "\eaa3";
    margin-left: -1em
}

i.icon.grid.align.center.middle::before {
    content: "\eaa4";
    opacity: 0.5
}

i.icon.grid.align.center.middle::after {
    content: "\eaa5";
    margin-left: -1em
}

i.icon.grid.align.top.left::before {
    content: "\eaa6";
    opacity: 0.5
}

i.icon.grid.align.top.left::after {
    content: "\eaa7";
    margin-left: -1em
}

i.icon.grid.align.top.right::before {
    content: "\eaa8";
    opacity: 0.5
}

i.icon.grid.align.top.right::after {
    content: "\eaa9";
    margin-left: -1em
}

i.icon.grid.align.bottom.left::before {
    content: "\eaaa";
    opacity: 0.5
}

i.icon.grid.align.bottom.left::after {
    content: "\eaab";
    margin-left: -1em
}

i.icon.grid.align.bottom.right::before {
    content: "\eaac";
    opacity: 0.5
}

i.icon.grid.align.bottom.right::after {
    content: "\eaad";
    margin-left: -1em
}

i.icon.grid.align.top.middle::before {
    content: "\eaae";
    opacity: 0.5
}

i.icon.grid.align.top.middle::after {
    content: "\eaaf";
    margin-left: -1em
}

i.icon.grid.align.bottom.middle::before {
    content: "\eab0";
    opacity: 0.5
}

i.icon.grid.align.bottom.middle::after {
    content: "\eab1";
    margin-left: -1em
}

i.icon.grid.align.center.left::before {
    content: "\eab2";
    opacity: 0.5
}

i.icon.grid.align.center.left::after {
    content: "\eab3";
    margin-left: -1em
}

i.icon.grid.align.center.right::before {
    content: "\eab4";
    opacity: 0.5
}

i.icon.grid.align.center.right::after {
    content: "\eab5";
    margin-left: -1em
}

i.icon.grip.horizontal::before {
    content: "\eab6";
    opacity: 0.5
}

i.icon.grip.horizontal::after {
    content: "\eab7";
    margin-left: -1em
}

i.icon.grip.vertical::before {
    content: "\eab8";
    opacity: 0.5
}

i.icon.grip.vertical::after {
    content: "\eab9";
    margin-left: -1em
}

i.icon.hand::before {
    content: "\eaba";
    opacity: 0.5
}

i.icon.hand::after {
    content: "\eabb";
    margin-left: -1em
}

i.icon.hand.thumbs.down::before {
    content: "\eabc";
    opacity: 0.5
}

i.icon.hand.thumbs.down::after {
    content: "\eabd";
    margin-left: -1em
}

i.icon.hand.thumbs.up::before {
    content: "\eabe";
    opacity: 0.5
}

i.icon.hand.thumbs.up::after {
    content: "\eabf";
    margin-left: -1em
}

i.icon.hdd::before {
    content: "\eac0";
    opacity: 0.5
}

i.icon.hdd::after {
    content: "\eac1";
    margin-left: -1em
}

i.icon.hdd.network::before {
    content: "\eac2";
    opacity: 0.5
}

i.icon.hdd.network::after {
    content: "\eac3";
    margin-left: -1em
}

i.icon.hdd.rack::before {
    content: "\eac4";
    opacity: 0.5
}

i.icon.hdd.rack::after {
    content: "\eac5";
    margin-left: -1em
}

i.icon.hdd.stack::before {
    content: "\eac6";
    opacity: 0.5
}

i.icon.hdd.stack::after {
    content: "\eac7";
    margin-left: -1em
}

i.icon.headphones::before {
    content: "\eac8";
    opacity: 0.5
}

i.icon.headphones::after {
    content: "\eac9";
    margin-left: -1em
}

i.icon.heart:before {
    content: "\eaca"
}

i.icon.heart.half::before {
    content: "\eacb";
    opacity: 0.5
}

i.icon.heart.half::after {
    content: "\eacc";
    margin-left: -1em
}

i.icon.hourglass::before {
    content: "\eacd";
    opacity: 0.4
}

i.icon.hourglass::after {
    content: "\eace";
    margin-left: -1em
}

i.icon.house::before {
    content: "\eacf";
    opacity: 0.5
}

i.icon.house::after {
    content: "\ead0";
    margin-left: -1em
}

i.icon.house.alt::before {
    content: "\ead1";
    opacity: 0.5
}

i.icon.house.alt::after {
    content: "\ead2";
    margin-left: -1em
}

i.icon.icons::before {
    content: "\ead3";
    opacity: 0.5
}

i.icon.icons::after {
    content: "\ead4";
    margin-left: -1em
}

i.icon.image::before {
    content: "\ead5";
    opacity: 0.4
}

i.icon.image::after {
    content: "\ead6";
    margin-left: -1em
}

i.icon.image.alt::before {
    content: "\ead7";
    opacity: 0.5
}

i.icon.image.alt::after {
    content: "\ead8";
    margin-left: -1em
}

i.icon.image.fill::before {
    content: "\ead9";
    opacity: 0.5
}

i.icon.image.fill::after {
    content: "\eada";
    margin-left: -1em
}

i.icon.images::before {
    content: "\eadb"
}

i.icon.images::after {
    content: "\eadc";
    margin-left: -1em;
    opacity: 0.5
}

i.icon.inbox::before {
    content: "\eadd";
    opacity: 0.5
}

i.icon.inbox::after {
    content: "\eade";
    margin-left: -1em
}

i.icon.information.circle::before {
    content: "\eadf";
    opacity: 0.5
}

i.icon.information.circle::after {
    content: "\eae0";
    margin-left: -1em
}

i.icon.information.square::before {
    content: "\eae1";
    opacity: 0.5
}

i.icon.information.square::after {
    content: "\eae2";
    margin-left: -1em
}

i.icon.intersect::before {
    content: "\eae3";
    opacity: 0.5
}

i.icon.intersect::after {
    content: "\eae4";
    margin-left: -1em
}

i.icon.journal::before {
    content: "\eae5";
    opacity: 0.5
}

i.icon.journal::after {
    content: "\eae6";
    margin-left: -1em
}

i.icon.key::before {
    content: "\eae7";
    opacity: 0.5
}

i.icon.key::after {
    content: "\eae8";
    margin-left: -1em
}

i.icon.key.fill::before {
    content: "\eae9";
    opacity: 0.5
}

i.icon.key.fill::after {
    content: "\eaea";
    margin-left: -1em
}

i.icon.language::before {
    content: "\eaeb";
    opacity: 0.5
}

i.icon.language::after {
    content: "\eaec";
    margin-left: -1em
}

i.icon.laptop::before {
    content: "\eaed";
    opacity: 0.5
}

i.icon.laptop::after {
    content: "\eaee";
    margin-left: -1em
}

i.icon.layers::before {
    content: "\eaef";
    opacity: 0.5
}

i.icon.layers::after {
    content: "\eaf0";
    margin-left: -1em
}

i.icon.layers.fill::before {
    content: "\eaf1";
    opacity: 0.5
}

i.icon.layers.fill::after {
    content: "\eaf2";
    margin-left: -1em
}

i.icon.layout.sidebar::before {
    content: "\eaf3";
    opacity: 0.5
}

i.icon.layout.sidebar::after {
    content: "\eaf4";
    margin-left: -1em
}

i.icon.layout.sidebar.reverse::before {
    content: "\eaf5";
    opacity: 0.5
}

i.icon.layout.sidebar.reverse::after {
    content: "\eaf6";
    margin-left: -1em
}

i.icon.layout.split::before {
    content: "\eaf7";
    opacity: 0.5
}

i.icon.layout.split::after {
    content: "\eaf8";
    margin-left: -1em
}

i.icon.layout.text.window::before {
    content: "\eaf9";
    opacity: 0.5
}

i.icon.layout.text.window::after {
    content: "\eafa";
    margin-left: -1em
}

i.icon.layout.text.window.reverse::before {
    content: "\eafb";
    opacity: 0.5
}

i.icon.layout.text.window.reverse::after {
    content: "\eafc";
    margin-left: -1em
}

i.icon.layout.three.columns::before {
    content: "\eafd";
    opacity: 0.5
}

i.icon.layout.three.columns::after {
    content: "\eafe";
    margin-left: -1em
}

i.icon.layout.wtf::before {
    content: "\eaff";
    opacity: 0.5
}

i.icon.layout.wtf::after {
    content: "\eb00";
    margin-left: -1em
}

i.icon.life.preserver::before {
    content: "\eb01";
    opacity: 0.5
}

i.icon.life.preserver::after {
    content: "\eb02";
    margin-left: -1em
}

i.icon.lightbubl::before {
    content: "\eb03";
    opacity: 0.5
}

i.icon.lightbubl::after {
    content: "\eb04";
    margin-left: -1em
}

i.icon.lighting:::root {
    --body-color: #636b72;
    --body-bg-color: #fff;
    --primary-color: #18ab63;
    --primary-color-hover: #12854f;
    --primary-color-active: #12854f;
    --primary-color-inverted: #e9fcf3;
    --primary-color-shadow: rgba(24, 171, 99, 0.35);
    --secondary-color: #21325b;
    --secondary-color-hover: #1c2849;
    --secondary-color-active: #1c2849;
    --secondary-color-inverted: #ecf0f8;
    --secondary-color-shadow: rgba(28, 40, 73, 0.35);
    --positive-color: #00c9a7;
    --positive-color-hover: #009e84;
    --positive-color-active: #009e84;
    --positive-color-inverted: #e5fffb;
    --positive-color-shadow: rgba(0, 201, 167, 0.35);
    --negative-color: #ED4C78;
    --negative-color-hover: #b93b5c;
    --negative-color-active: #b93b5c;
    --negative-color-inverted: #fde8ed;
    --negative-color-shadow: rgba(237, 76, 120, 0.35);
    --alert-color: #F5CA99;
    --alert-color-hover: #bf9a74;
    --alert-color-active: #bf9a74;
    --alert-color-inverted: #fdf3e8;
    --alert-color-shadow: rgba(245, 202, 153, 0.35);
    --info-color: #09A5BE;
    --info-color-hover: #09A5BE;
    --info-color-active: #09A5BE;
    --info-color-inverted: #e7fbfe;
    --info-color-shadow: rgba(9, 165, 190, 0.35);
    --light-color: #f8f9fa;
    --light-color-hover: #e1e5ea;
    --light-color-active: #e1e5ea;
    --light-color-inverted: #f1f1f1;
    --light-color-shadow: rgba(248, 249, 250, 0.35);
    --dark-color: #343a40;
    --dark-color-hover: #2d3339;
    --dark-color-active: #2d3339;
    --dark-color-shadow: rgba(52, 58, 64, 0.1);
    --dark-color-inverted: #F4F5F6;
    --black-color: #000;
    --white-color: #fff;
    --shadow-color: rgba(136, 152, 170, .15);
    --grey-color: #818181;
    --grey-color-100: #f2f2f2;
    --grey-color-300: #d5d5d5;
    --grey-color-500: #b9b9b9;
    --grey-color-700: #9d9d9d
}

:root {
    --gutter: 2rem;
    --gutter-compensation: -2rem;
    --padding: 1rem;
    --margin: 1rem;
    --grid: 400px;
    --transparent: transparent;
    --radius: .250rem;
    --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)
}

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

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

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
}

.scrollbox {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--grey-color-300)
}

.scrollbox::-webkit-scrollbar {
    width: 12px
}

.scrollbox::-webkit-scrollbar-track {
    background: var(--primary-color-inverted)
}

.scrollbox::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 1rem;
    border: 3px solid var(--grey-color-300)
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
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
}

blockquote {
    color: #000;
    padding: 2rem;
    border-radius: .250rem;
    margin: 0 0 2rem 0;
    position: relative;
    background: #fff;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 23px 49px 0 var(--shadow-color)
}

blockquote p {
    font-style: italic;
    color: #000
}

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
}

.overflow {
    overflow: hidden
}

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
}

.fcolumn {
    flex-direction: column
}

.fwrap {
    flex-wrap: wrap
}

.block {
    display: block
}

.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
}

input:focus {
    outline-offset: 0
}

:focus {
    outline: -webkit-focus-ring-color auto 0
}

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
}

.h200 {
    height: 200px
}

.h300 {
    height: 300px
}

.h350 {
    height: 350px
}

.h400 {
    height: 400px
}

.h500 {
    height: 500px
}

.hp100 {
    height: 100%
}

.w50 {
    width: 50%
}

.w25 {
    width: 25%
}

.w75 {
    width: 75%
}

.w100 {
    width: 100%
}

.mw-50 {
    max-width: 50% !important
}

.mw-75 {
    max-width: 75% !important
}

.fvh {
    height: 100vh
}

.pt {
    top: 0
}

.pb {
    bottom: 0
}

.pl {
    left: 0
}

.pr {
    right: 0
}

.pbn1 {
    bottom: -1rem
}

.pbn2 {
    bottom: -2rem
}

.pbn3 {
    bottom: -3rem
}

.zin1 {
    z-index: -1
}

.zi1 {
    z-index: 1
}

.zi2 {
    z-index: 2
}

.zi3 {
    z-index: 3
}

.zi4 {
    z-index: 4
}

.zi5 {
    z-index: 5
}

.mb1 {
    margin-bottom: 1rem
}

.mb2 {
    margin-bottom: 2rem
}

.mb3 {
    margin-bottom: 3rem
}

.mb4 {
    margin-bottom: 4rem
}

.mb5 {
    margin-bottom: 5rem
}

.mt3 {
    margin-top: 3rem
}

.mt4 {
    margin-top: 4rem
}

.mt5 {
    margin-top: 5rem
}

.ml3 {
    margin-left: 3rem
}

.ml4 {
    margin-left: 4rem
}

.ml5 {
    margin-left: 5rem
}

.mr3 {
    margin-right: 3rem
}

.mr4 {
    margin-right: 4rem
}

.mr5 {
    margin-right: 5rem
}

.mbn3 {
    margin-bottom: -3rem
}

.mbn4 {
    margin-bottom: -4rem
}

.mbn5 {
    margin-bottom: -5rem
}

.mtn3 {
    margin-top: -3rem
}

.mtn4 {
    margin-top: -4rem
}

.mtn5 {
    margin-top: -5rem
}

.mln3 {
    margin-left: -3rem
}

.mln4 {
    margin-left: -4rem
}

.mln5 {
    margin-left: -5rem
}

.mrn3 {
    margin-right: -3rem
}

.mrn4 {
    margin-right: -4rem
}

.mrn5 {
    margin-right: -5rem
}

.fullsvg {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1
}

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: 1140px;
    margin: 0 auto;
    padding-right: var(--padding);
    padding-left: var(--padding)
}

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

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

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

.wojo.mason.five {
    -webkit-column-count: 5;
    column-count: 5;
    -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,
.wojo.mason.two>.item,
.wojo.mason.four>.item,
.wojo.mason.five>.item,
.wojo.mason.three>.item {
    display: inline-flex;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 2rem
}

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

.wojo.mason>.item>.card {
    position: static
}

.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.gutters>.columns.divider::after {
    position: absolute;
    top: 10%;
    left: 2rem;
    height: 80%;
    border-left: 1px solid var(--grey-color-300);
    content: ""
}

.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
}

.row.divided.grid .columns>.item {
    border-bottom: 1px solid var(--grey-color-300);
    display: flex;
    flex-flow: row wrap;
    align-items: center
}

.row.divided.grid .columns>.item>.columns {
    flex: 1 1 0px;
    min-width: 0;
    padding: 0.750em;
    white-space: nowrap
}

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

@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 !important
    }
}

@media screen and (min-width:48em) 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-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        white-space: nowrap
    }

    .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 !important
    }
}

@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 .columns.mobile-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        white-space: nowrap
    }

    .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 !important
    }

    .wojo.mason,
    .wojo.mason.five,
    .wojo.mason.four,
    .wojo.mason.three,
    .wojo.mason.two {
        -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 !important
    }

    .wojo.mason,
    .wojo.mason.five,
    .wojo.mason.four,
    .wojo.mason.three,
    .wojo.mason.two,
    .wojo.mason.grid {
        -webkit-column-count: 1;
        column-count: 1
    }
}

#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.button {
    cursor: pointer;
    display: inline-flex;
    flex-flow: row nowrap;
    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
}

.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;
    background: var(--primary-color-active)
}

.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;
    background: var(--secondary-color-active)
}

.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;
    background: var(--positive-color-active)
}

.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;
    background: var(--negative-color-active)
}

.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(255, 255, 255, .1)
}

.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: 3rem
}

.wojo.spaced.button {
    margin-right: 1rem
}

.wojo.passive.button {
    cursor: default;
    pointer-events: none
}

.wojo.filter.buttons {
    background-color: var(--dark-color-inverted);
    border-radius: .250rem
}

.wojo.filter.buttons .button {
    margin: .25rem;
    border-radius: .250rem;
    background-color: #fff;
    border: 0;
    color: var(--primary-color);
    box-shadow: 0 3px 6px 0 var(--shadow-color)
}

.wojo.filter.buttons .button.passive {
    background-color: transparent;
    box-shadow: none;
    border: 0
}

.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.buttons.vertical {
    display: flex;
    flex-direction: column
}

.wojo.buttons.vertical .button {
    flex: 1 1 0px;
    min-width: 0;
    border-radius: .250rem;
    justify-content: flex-start;
    margin-bottom: .250rem
}

.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: 1rem;
    padding: 1.25rem 2rem
}

.wojo.big.circular.button {
    padding: 1.25rem;
    width: 1.5rem;
    height: 1.5rem
}

.wojo.big.circular.button .icon {
    font-size: 1.25rem;
    width: 1.25rem
}

.wojo.labeled.big.buttons .button,
.wojo.labeled.big.button,
.wojo.labeled.small.buttons .button,
.wojo.labeled.small.button {
    padding: 0
}

.wojo.big.labeled.button span {
    font-size: 1rem;
    padding: 1.375rem 1.875rem
}

.wojo.big.labeled.button .icon {
    padding: 1.375rem
}

.wojo.small.labeled.button span {
    font-size: .875rem;
    padding: .750rem 1rem
}

.wojo.small.labeled.button .icon {
    padding: .750rem
}

.wojo.huge.buttons .button,
.wojo.huge.button {
    font-size: 1.5rem;
    padding: 1.25em 2.50em
}

.wojo.huge.circular.button {
    padding: 1.5rem;
    width: 2rem;
    height: 2rem
}

.wojo.huge.circular.button .icon {
    font-size: 2rem;
    width: 2rem
}

.wojo.massive.buttons .button,
.wojo.massive.button {
    font-size: 1.5rem;
    padding: 1.5em 3em
}

.wojo.massive.circular.button {
    padding: 2.5rem;
    width: 2.5rem;
    height: 2.5rem
}

.wojo.massive.circular.button .icon {
    font-size: 3rem;
    width: 3rem
}

.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
    }
}

@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: inherit;
    position: relative
}

i.icon.middle {
    vertical-align: middle
}

.icon.agenda:before {
    content: "\e900"
}

.icon.aid.kit:before {
    content: "\e901"
}

.icon.anchor:before {
    content: "\e902"
}

.icon.angle.double.down:before {
    content: "\e903"
}

.icon.angle.double.left:before {
    content: "\e904"
}

.icon.angle.double.right:before {
    content: "\e905"
}

.icon.angle.double.up:before {
    content: "\e906"
}

.icon.angle.down:before {
    content: "\e907"
}

.icon.angle.left:before {
    content: "\e908"
}

.icon.angle.right:before {
    content: "\e909"
}

.icon.angle.up:before {
    content: "\e90a"
}

.icon.antena:before {
    content: "\e90b"
}

.icon.app:before {
    content: "\e90c"
}

.icon.app.add:before {
    content: "\e90d"
}

.icon.app.remove:before {
    content: "\e90e"
}

.icon.apple:before {
    content: "\e968"
}

.icon.apps:before {
    content: "\e910"
}

.icon.apps.alt:before {
    content: "\e911"
}

.icon.arrow.backward:before {
    content: "\e912"
}

.icon.arrow.forward:before {
    content: "\e913"
}

.icon.arrows:before {
    content: "\e914"
}

.icon.arrows.horizontal:before {
    content: "\e915"
}

.icon.arrows.vertical:before {
    content: "\e916"
}

.icon.asterisk:before {
    content: "\e917"
}

.icon.backward:before {
    content: "\e918"
}

.icon.badge:before {
    content: "\e919"
}

.icon.bag:before {
    content: "\e92f"
}

.icon.ban:before {
    content: "\e91a"
}

.icon.bar.chart:before {
    content: "\e91b"
}

.icon.bar.chart.alt:before {
    content: "\e91c"
}

.icon.basket:before {
    content: "\e91d"
}

.icon.basket.alt:before {
    content: "\e930"
}

.icon.basketball:before {
    content: "\e91e"
}

.icon.batery.empty:before {
    content: "\e91f"
}

.icon.batery.full:before {
    content: "\e920"
}

.icon.batery20:before {
    content: "\e921"
}

.icon.batery50:before {
    content: "\e922"
}

.icon.bell:before {
    content: "\e923"
}

.icon.binoculars:before {
    content: "\e924"
}

.icon.blackboard:before {
    content: "\e925"
}

.icon.bluetooth:before {
    content: "\e926"
}

.icon.bluetooth.connected:before {
    content: "\e927"
}

.icon.bolt:before {
    content: "\e928"
}

.icon.book:before {
    content: "\e929"
}

.icon.bookmark:before {
    content: "\e92a"
}

.icon.briefcase:before {
    content: "\e92c"
}

.icon.briefcase.alt:before {
    content: "\e92d"
}

.icon.brightness:before {
    content: "\e931"
}

.icon.brightness.alt:before {
    content: "\e932"
}

.icon.brush:before {
    content: "\e933"
}

.icon.bubble:before {
    content: "\e935"
}

.icon.building:before {
    content: "\e936"
}

.icon.burger:before {
    content: "\e937"
}

.icon.bus:before {
    content: "\e938"
}

.icon.cake:before {
    content: "\e939"
}

.icon.calculator:before {
    content: "\e93a"
}

.icon.calendar:before {
    content: "\e93b"
}

.icon.calendar.add:before {
    content: "\e93c"
}

.icon.calendar.alt:before {
    content: "\e93d"
}

.icon.calendar.remove:before {
    content: "\e93e"
}

.icon.camera:before {
    content: "\e93f"
}

.icon.camera.alt:before {
    content: "\e940"
}

.icon.car:before {
    content: "\e941"
}

.icon.cd:before {
    content: "\e942"
}

.icon.certificate:before {
    content: "\e943"
}

.icon.chat:before {
    content: "\e9ed"
}

.icon.check:before {
    content: "\e944"
}

.icon.check.all:before {
    content: "\e945"
}

.icon.checkbox:before {
    content: "\e946"
}

.icon.checkbox.checked:before {
    content: "\e947"
}

.icon.checkbox.checkedalt:before {
    content: "\e90f"
}

.icon.chevron.down:before {
    content: "\e948"
}

.icon.chevron.right:before {
    content: "\e94a"
}

.icon.chevron.up:before {
    content: "\e94b"
}

.icon.chevron.left:before {
    content: "\e949"
}

.icon.circle.check:before {
    content: "\e94c"
}

.icon.circle.chevron.down:before {
    content: "\e94d"
}

.icon.circle.chevron.left:before {
    content: "\e94e"
}

.icon.circle.chevron.right:before {
    content: "\e94f"
}

.icon.circle.chevron.up:before {
    content: "\e950"
}

.icon.circle.delete:before {
    content: "\e951"
}

.icon.circle.minus:before {
    content: "\e952"
}

.icon.circle.plus:before {
    content: "\e953"
}

.icon.clipboard:before {
    content: "\e954"
}

.icon.clipboard.alt:before {
    content: "\e955"
}

.icon.clock:before {
    content: "\e956"
}

.icon.close:before {
    content: "\e957"
}

.icon.cloud.download:before {
    content: "\e958"
}

.icon.cloud.upload:before {
    content: "\e959"
}

.icon.code:before {
    content: "\e95a"
}

.icon.code.alt:before {
    content: "\e95b"
}

.icon.cogs:before {
    content: "\e95c"
}

.icon.collection:before {
    content: "\e95d"
}

.icon.comment:before {
    content: "\e95e"
}

.icon.comments:before {
    content: "\e95f"
}

.icon.compass:before {
    content: "\e960"
}

.icon.compress:before {
    content: "\e961"
}

.icon.contacts:before {
    content: "\e934"
}

.icon.contrast:before {
    content: "\e962"
}

.icon.copy:before {
    content: "\e963"
}

.icon.crayon:before {
    content: "\e96b"
}

.icon.credit.card:before {
    content: "\e96c"
}

.icon.crop:before {
    content: "\e96d"
}

.icon.css:before {
    content: "\e96e"
}

.icon.cup:before {
    content: "\e96f"
}

.icon.customize:before {
    content: "\e964"
}

.icon.cut:before {
    content: "\e970"
}

.icon.dashboard:before {
    content: "\e971"
}

.icon.database:before {
    content: "\e972"
}

.icon.database.alt:before {
    content: "\e973"
}

.icon.date:before {
    content: "\e974"
}

.icon.delete:before {
    content: "\e975"
}

.icon.desktop:before {
    content: "\e976"
}

.icon.dice:before {
    content: "\e977"
}

.icon.directions:before {
    content: "\e978"
}

.icon.download:before {
    content: "\e979"
}

.icon.download.alt:before {
    content: "\e97a"
}

.icon.drop:before {
    content: "\e97c"
}

.icon.dropbox:before {
    content: "\e97d"
}

.icon.dropper:before {
    content: "\e97e"
}

.icon.earth:before {
    content: "\e97f"
}

.icon.ellipsis.horizontal:before {
    content: "\e980"
}

.icon.ellipsis.horizontal.alt:before {
    content: "\e981"
}

.icon.ellipsis.vertical:before {
    content: "\e982"
}

.icon.ellipsis.vertical.alt:before {
    content: "\e983"
}

.icon.email:before {
    content: "\e985"
}

.icon.email.alt:before {
    content: "\e999"
}

.icon.eraser:before {
    content: "\e986"
}

.icon.expand:before {
    content: "\e987"
}

.icon.eye:before {
    content: "\e988"
}

.icon.eye.blocked:before {
    content: "\e989"
}

.icon.eye.glasses:before {
    content: "\e98a"
}

.icon.facebook:before {
    content: "\e98b"
}

.icon.facebook.alt:before {
    content: "\e98c"
}

.icon.faq:before {
    content: "\e98d"
}

.icon.feather:before {
    content: "\e98e"
}

.icon.female:before {
    content: "\e98f"
}

.icon.female.gender:before {
    content: "\e990"
}

.icon.file:before {
    content: "\e991"
}

.icon.file.add:before {
    content: "\e992"
}

.icon.file.remove:before {
    content: "\e993"
}

.icon.files:before {
    content: "\e994"
}

.icon.files.add:before {
    content: "\e995"
}

.icon.files.remove:before {
    content: "\e996"
}

.icon.filter:before {
    content: "\e997"
}

.icon.find:before {
    content: "\e998"
}

.icon.fire:before {
    content: "\e99b"
}

.icon.flag:before {
    content: "\e99c"
}

.icon.floppy:before {
    content: "\e99d"
}

.icon.flow.tree:before {
    content: "\e99e"
}

.icon.folder:before {
    content: "\e99f"
}

.icon.folder.add:before {
    content: "\e9a0"
}

.icon.folder.open:before {
    content: "\e9a1"
}

.icon.folder.remove:before {
    content: "\e9a2"
}

.icon.food.dome:before {
    content: "\e9a3"
}

.icon.football:before {
    content: "\e9a4"
}

.icon.forward:before {
    content: "\e9a5"
}

.icon.gamepad:before {
    content: "\e9a6"
}

.icon.ghost:before {
    content: "\e9a7"
}

.icon.gift:before {
    content: "\e9a8"
}

.icon.github:before {
    content: "\e9a9"
}

.icon.globe:before {
    content: "\e9aa"
}

.icon.google:before {
    content: "\e9ab"
}

.icon.google.drive:before {
    content: "\e9ac"
}

.icon.google.plus:before {
    content: "\e9ad"
}

.icon.gps:before {
    content: "\e9ae"
}

.icon.grid:before {
    content: "\e9af"
}

.icon.grid.align.bottom.left:before {
    content: "\e9b0"
}

.icon.grid.align.bottom.right:before {
    content: "\e9b1"
}

.icon.grid.align.center.bottom:before {
    content: "\e9b2"
}

.icon.grid.align.center.left:before {
    content: "\e9b3"
}

.icon.grid.align.center.middle:before {
    content: "\e9b4"
}

.icon.grid.align.center.right:before {
    content: "\e9b5"
}

.icon.grid.align.center.top:before {
    content: "\e9b6"
}

.icon.grid.align.top.left:before {
    content: "\e9b7"
}

.icon.grid.align.top.right:before {
    content: "\e9b8"
}

.icon.hdd:before {
    content: "\e9b9"
}

.icon.headphones:before {
    content: "\e9ba"
}

.icon.heart:before {
    content: "\e9bb"
}

.icon.heart.alt:before {
    content: "\e9bc"
}

.icon.help:before {
    content: "\e9bd"
}

.icon.history:before {
    content: "\e9be"
}

.icon.home:before {
    content: "\e9bf"
}

.icon.hourglass:before {
    content: "\e9c0"
}

.icon.html5:before {
    content: "\e9c2"
}

.icon.icecream:before {
    content: "\e9c3"
}

.icon.id:before {
    content: "\e9c4"
}

.icon.inbox:before {
    content: "\e9c5"
}

.icon.indent:before {
    content: "\e9c6"
}

.icon.info.sign:before {
    content: "\e9c7"
}

.icon.instagram:before {
    content: "\e9c8"
}

.icon.invoice:before {
    content: "\e9c9"
}

.icon.ip:before {
    content: "\e9ca"
}

.icon.key:before {
    content: "\e9cb"
}

.icon.laptop:before {
    content: "\e9cc"
}

.icon.layer:before {
    content: "\e9ce"
}

.icon.layer.alt:before {
    content: "\e9cf"
}

.icon.leaf:before {
    content: "\e9d0"
}

.icon.line.chart:before {
    content: "\e9d1"
}

.icon.linkedin:before {
    content: "\ea81"
}

.icon.lock:before {
    content: "\e9d2"
}

.icon.long.arrow.down:before {
    content: "\e9d3"
}

.icon.long.arrow.down.left:before {
    content: "\e9d4"
}

.icon.long.arrow.down.right:before {
    content: "\e9d5"
}

.icon.long.arrow.left:before {
    content: "\e9d6"
}

.icon.long.arrow.right:before {
    content: "\e9d7"
}

.icon.long.arrow.up:before {
    content: "\e9d8"
}

.icon.long.arrow.up.left:before {
    content: "\e9d9"
}

.icon.long.arrow.up.right:before {
    content: "\e9da"
}

.icon.magnet:before {
    content: "\e9db"
}

.icon.male:before {
    content: "\e9dc"
}

.icon.male.gender:before {
    content: "\e9dd"
}

.icon.map:before {
    content: "\e9de"
}

.icon.maple.leaf:before {
    content: "\e9df"
}

.icon.marker:before {
    content: "\e9e0"
}

.icon.mask:before {
    content: "\e9e1"
}

.icon.medal:before {
    content: "\e9e2"
}

.icon.membership:before {
    content: "\e9e3"
}

.icon.microphone:before {
    content: "\e9e5"
}

.icon.minus:before {
    content: "\e9e6"
}

.icon.minus.alt:before {
    content: "\e9e7"
}

.icon.money:before {
    content: "\e9e8"
}

.icon.mouse:before {
    content: "\e9e4"
}

.icon.move:before {
    content: "\e9e9"
}

.icon.move.horizontal:before {
    content: "\e9ea"
}

.icon.move.vertical:before {
    content: "\e9eb"
}

.icon.movie:before {
    content: "\e9ec"
}

.icon.mug:before {
    content: "\ea08"
}

.icon.musical.note.playlist:before {
    content: "\e9ee"
}

.icon.musical.notes:before {
    content: "\e9ef"
}

.icon.mute:before {
    content: "\e9f0"
}

.icon.news:before {
    content: "\e9fe"
}

.icon.note:before {
    content: "\e9f1"
}

.icon.note.alt:before {
    content: "\e9f2"
}

.icon.ordered.list:before {
    content: "\e9f3"
}

.icon.outbox:before {
    content: "\e9f4"
}

.icon.outdent:before {
    content: "\e9f5"
}

.icon.paint.roller:before {
    content: "\e9f6"
}

.icon.pan:before {
    content: "\e9f7"
}

.icon.paper.plane:before {
    content: "\e9f9"
}

.icon.paper.clip:before {
    content: "\e9f8"
}

.icon.paste:before {
    content: "\ea59"
}

.icon.pause:before {
    content: "\e9fa"
}

.icon.pen:before {
    content: "\e9fc"
}

.icon.pen.alt:before {
    content: "\e9fd"
}

.icon.pencil:before {
    content: "\e9ff"
}

.icon.phone:before {
    content: "\ea00"
}

.icon.phone.call:before {
    content: "\ea01"
}

.icon.photo:before {
    content: "\ea02"
}

.icon.photo.alt:before {
    content: "\ea03"
}

.icon.photos:before {
    content: "\ea04"
}

.icon.pie.chart:before {
    content: "\ea05"
}

.icon.pill:before {
    content: "\ea06"
}

.icon.pin:before {
    content: "\ea07"
}

.icon.pinterest:before {
    content: "\ea09"
}

.icon.plane:before {
    content: "\ea0a"
}

.icon.play:before {
    content: "\ea0b"
}

.icon.plus:before {
    content: "\ea0c"
}

.icon.plus.alt:before {
    content: "\ea0d"
}

.icon.poll:before {
    content: "\ea67"
}

.icon.postcard:before {
    content: "\ea0e"
}

.icon.power:before {
    content: "\ea0f"
}

.icon.printer:before {
    content: "\ea10"
}

.icon.puzzle:before {
    content: "\ea11"
}

.icon.qr:before {
    content: "\ea12"
}

.icon.question.sign:before {
    content: "\ea13"
}

.icon.queue.add:before {
    content: "\e965"
}

.icon.queue.remove:before {
    content: "\e966"
}

.icon.quote:before {
    content: "\ea14"
}

.icon.radio:before {
    content: "\ea15"
}

.icon.radio.checked:before {
    content: "\ea16"
}

.icon.record:before {
    content: "\ea17"
}

.icon.redo:before {
    content: "\ea18"
}

.icon.refresh:before {
    content: "\ea19"
}

.icon.reorder:before {
    content: "\ea1a"
}

.icon.repeat:before {
    content: "\ea1b"
}

.icon.resize:before {
    content: "\ea1c"
}

.icon.round.chart:before {
    content: "\ea1d"
}

.icon.rss:before {
    content: "\ea1e"
}

.icon.sailboat:before {
    content: "\ea1f"
}

.icon.select:before {
    content: "\ea20"
}

.icon.select.all:before {
    content: "\ea21"
}

.icon.send:before {
    content: "\ea71"
}

.icon.send.alt:before {
    content: "\ea72"
}

.icon.server:before {
    content: "\ea22"
}

.icon.server.alt:before {
    content: "\ea23"
}

.icon.setting:before {
    content: "\ea24"
}

.icon.settings.alt:before {
    content: "\ea25"
}

.icon.share:before {
    content: "\ea26"
}

.icon.shield:before {
    content: "\ea27"
}

.icon.shield.alt:before {
    content: "\ea28"
}

.icon.shirt:before {
    content: "\ea29"
}

.icon.shuffle:before {
    content: "\ea2a"
}

.icon.sliders.horizontal:before {
    content: "\ea2b"
}

.icon.sliders.horizontal.alt:before {
    content: "\ea73"
}

.icon.sliders.vertical:before {
    content: "\ea2c"
}

.icon.sliders.vertical.alt:before {
    content: "\ea7b"
}

.icon.smartphone:before {
    content: "\ea2d"
}

.icon.smile:before {
    content: "\ea2e"
}

.icon.snowflake:before {
    content: "\ea2f"
}

.icon.sort.ascending:before {
    content: "\ea30"
}

.icon.sort.descending:before {
    content: "\ea31"
}

.icon.soundcloud:before {
    content: "\ea32"
}

.icon.speaker:before {
    content: "\ea33"
}

.icon.spin.full:before {
    content: "\e92b"
}

.icon.spin.circles:before {
    content: "\ea34"
}

.icon.star:before {
    content: "\ea35"
}

.icon.star.full:before {
    content: "\ea36"
}

.icon.star.half:before {
    content: "\ea37"
}

.icon.step.backward:before {
    content: "\ea38"
}

.icon.step.forward:before {
    content: "\ea39"
}

.icon.stop:before {
    content: "\ea3a"
}

.icon.stop.watch:before {
    content: "\ea3b"
}

.icon.storage:before {
    content: "\e92e"
}

.icon.storage.alt:before {
    content: "\ea3c"
}

.icon.sunset:before {
    content: "\ea3d"
}

.icon.switch:before {
    content: "\ea3e"
}

.icon.tab:before {
    content: "\ea42"
}

.icon.tablet:before {
    content: "\ea43"
}

.icon.tag:before {
    content: "\ea44"
}

.icon.tag.delete:before {
    content: "\ea45"
}

.icon.tags:before {
    content: "\ea46"
}

.icon.target:before {
    content: "\ea47"
}

.icon.tennis.ball:before {
    content: "\ea48"
}

.icon.thumbs.down:before {
    content: "\ea49"
}

.icon.thumbs.up:before {
    content: "\ea4a"
}

.icon.tie:before {
    content: "\ea4b"
}

.icon.timeline:before {
    content: "\ea4c"
}

.icon.toggle.off:before {
    content: "\ea3f"
}

.icon.toggle.off.alt:before {
    content: "\ea40"
}

.icon.toggle.on:before {
    content: "\ea41"
}

.icon.toggle.on.alt:before {
    content: "\ea4d"
}

.icon.trailer:before {
    content: "\ea4e"
}

.icon.train:before {
    content: "\ea4f"
}

.icon.trash:before {
    content: "\ea51"
}

.icon.trash.alt:before {
    content: "\ea50"
}

.icon.triangle.down:before {
    content: "\ea52"
}

.icon.triangle.left:before {
    content: "\ea53"
}

.icon.triangle.right:before {
    content: "\ea54"
}

.icon.triangle.unfold.more:before {
    content: "\ea55"
}

.icon.triangle.up:before {
    content: "\ea56"
}

.icon.trophy:before {
    content: "\ea57"
}

.icon.tumblr:before {
    content: "\ea58"
}

.icon.twitter:before {
    content: "\ea5a"
}

.icon.umbrella:before {
    content: "\ea5b"
}

.icon.underline:before {
    content: "\ea5c"
}

.icon.undo:before {
    content: "\ea5d"
}

.icon.unfold.in:before {
    content: "\ea5e"
}

.icon.unfold.less:before {
    content: "\ea5f"
}

.icon.unfold.more:before {
    content: "\ea60"
}

.icon.unfold.out:before {
    content: "\ea61"
}

.icon.unlink:before {
    content: "\ea62"
}

.icon.unlock:before {
    content: "\ea63"
}

.icon.unordered.list:before {
    content: "\ea64"
}

.icon.upload:before {
    content: "\ea65"
}

.icon.upload.alt:before {
    content: "\ea66"
}

.icon.url:before {
    content: "\ea68"
}

.icon.url.alt:before {
    content: "\ea69"
}

.icon.usb.stick:before {
    content: "\ea6a"
}

.icon.user:before {
    content: "\ea6b"
}

.icon.user.add:before {
    content: "\ea6c"
}

.icon.user.alt:before {
    content: "\ea6d"
}

.icon.user.profile:before {
    content: "\ea6e"
}

.icon.user.remove:before {
    content: "\ea6f"
}

.icon.users:before {
    content: "\ea70"
}

.icon.view.agenda:before {
    content: "\ea74"
}

.icon.view.day:before {
    content: "\ea75"
}

.icon.view.grid:before {
    content: "\ea76"
}

.icon.view.list:before {
    content: "\ea77"
}

.icon.view.week:before {
    content: "\ea78"
}

.icon.vimeo:before {
    content: "\ea79"
}

.icon.voicemail:before {
    content: "\ea7a"
}

.icon.volume:before {
    content: "\e9fb"
}

.icon.wallet:before {
    content: "\ea7c"
}

.icon.wallpaper:before {
    content: "\ea7d"
}

.icon.wand:before {
    content: "\ea7e"
}

.icon.warning.sign:before {
    content: "\ea7f"
}

.icon.water:before {
    content: "\ea80"
}

.icon.weather.cloud:before {
    content: "\ea82"
}

.icon.widgets:before {
    content: "\ea87"
}

.icon.wifi.full:before {
    content: "\ea88"
}

.icon.wifi.low:before {
    content: "\ea89"
}

.icon.windows:before {
    content: "\ea8a"
}

.icon.wojologo:before {
    content: "\ea8b"
}

.icon.wojologo.alt:before {
    content: "\ea8c"
}

.icon.wysiwyg.align.center:before {
    content: "\ea8e"
}

.icon.wysiwyg.align.justify:before {
    content: "\ea8f"
}

.icon.wysiwyg.align.left:before {
    content: "\ea90"
}

.icon.wysiwyg.align.right:before {
    content: "\ea91"
}

.icon.wysiwyg.bold:before {
    content: "\ea92"
}

.icon.wysiwyg.border.dashed:before {
    content: "\eaa0"
}

.icon.wysiwyg.border.dotted:before {
    content: "\eaa1"
}

.icon.wysiwyg.border.double:before {
    content: "\eaa2"
}

.icon.wysiwyg.border.inset:before {
    content: "\eaa5"
}

.icon.wysiwyg.border.outset:before {
    content: "\eaa6"
}

.icon.wysiwyg.border.solid:before {
    content: "\eaa3"
}

.icon.wysiwyg.color:before {
    content: "\ea93"
}

.icon.wysiwyg.font:before {
    content: "\ea94"
}

.icon.wysiwyg.gradient:before {
    content: "\eaa4"
}

.icon.wysiwyg.italic:before {
    content: "\ea95"
}

.icon.wysiwyg.paragraph:before {
    content: "\ea96"
}

.icon.wysiwyg.picture:before {
    content: "\eaa7"
}

.icon.wysiwyg.remove.format:before {
    content: "\ea97"
}

.icon.wysiwyg.size:before {
    content: "\ea98"
}

.icon.wysiwyg.strikethrough:before {
    content: "\ea99"
}

.icon.wysiwyg.subscript:before {
    content: "\ea9a"
}

.icon.wysiwyg.superscript:before {
    content: "\ea9b"
}

.icon.wysiwyg.table:before {
    content: "\ea9c"
}

.icon.wysiwyg.type:before {
    content: "\ea9d"
}

.icon.wysiwyg.underline:before {
    content: "\ea9e"
}

.icon.youtube:before {
    content: "\ea9f"
}

i.icon.spin {
    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
}

i.icon.disabled {
    opacity: .3
}

i.link.icon {
    opacity: .8;
    cursor: pointer
}

i.link.icon:hover {
    opacity: 1
}

i.circular.icon,
i.rounded.icon {
    border-radius: 500em;
    text-align: center;
    box-sizing: content-box;
    box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15);
    line-height: 1rem;
    padding: .75em;
    vertical-align: middle
}

i.circular.inverted.icon,
i.rounded.inverted.icon {
    box-shadow: none
}

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.rounded.icon {
    border-radius: 0.188em
}

i.rounded.icon.outline {
    color: #1e2022
}

i.rounded.inverted.icon {
    border: none;
    box-shadow: none
}

i.white.icon {
    color: #ffffff
}

i.black.icon {
    color: #1e2022
}

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.p i.information.icon {
    color: #1E88E5
}

i.inverted.rounded.black.icon,
i.inverted.circular.black.icon {
    background-color: var(--dark-color-inverted);
    color: #FFFFFF
}

i.inverted.rounded.primary.icon,
i.inverted.circular.primary.icon {
    background-color: var(--primary-color);
    color: var(--primary-color-inverted)
}

i.inverted.rounded.secondary.icon,
i.inverted.circular.secondary.icon {
    background-color: var(--secondary-color);
    color: var(--secondary-color-inverted)
}

i.inverted.rounded.positive.icon,
i.inverted.circular.positive.icon {
    background-color: var(--positive-color);
    color: var(--positive-color-inverted)
}

i.inverted.rounded.negative.icon,
i.inverted.circular.negative.icon {
    background-color: var(--negative-color);
    color: var(--negative-color-inverted)
}

i.inverted.rounded.pink.icon,
i.inverted.circular.pink.icon {
    background-color: #E91E63;
    color: #FFFFFF
}

i.inverted.rounded.purple.icon,
i.inverted.circular.purple.icon {
    background-color: #9C27B0;
    color: #FFFFFF
}

i.inverted.rounded.info.icon,
i.inverted.circular.info.icon {
    background-color: #1E88E5;
    color: #FFFFFF
}

i.inverted.simple.rounded.primary.icon,
i.inverted.simple.circular.primary.icon {
    background-color: var(--primary-color-inverted);
    color: var(--primary-color)
}

i.inverted.simple.rounded.secondary.icon,
i.inverted.simple.circular.secondary.icon {
    background-color: var(--secondary-color-inverted);
    color: var(--secondary-color)
}

i.inverted.simple.rounded.positive.icon,
i.inverted.simple.circular.positive.icon {
    background-color: var(--positive-color-inverted);
    color: var(--positive-color)
}

i.inverted.simple.rounded.negative.icon,
i.inverted.simple.circular.negative.icon {
    background-color: var(--negative-color-inverted);
    color: var(--negative-color)
}

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.circular.icon,
i.tiny.rounded.icon {
    padding: .375rem;
    font-size: 1rem
}

i.small.icon {
    font-size: .938rem
}

i.small.circular.icon,
i.small.rounded.icon {
    padding: .5rem;
    font-size: 1rem
}

i.icon {
    font-size: 1rem
}

i.medium.icon {
    font-size: 1.5rem
}

i.medium.circular.icon {
    line-height: 2.5rem;
    width: 2.5rem;
    height: 2.5rem
}

i.large.icon {
    font-size: 2rem;
    vertical-align: middle
}

i.large.circular.icon {
    line-height: 3rem;
    width: 3rem;
    height: 3rem
}

i.big.icon {
    font-size: 3rem;
    vertical-align: middle
}

i.big.circular.icon {
    line-height: 6rem;
    width: 6rem;
    height: 6rem
}

i.huge.icon {
    font-size: 4rem;
    vertical-align: middle
}

i.huge.circular.icon {
    box-shadow: 0em 0em 0em 4px rgba(0, 0, 0, 0.1) inset;
    line-height: 8rem;
    width: 8rem;
    height: 8rem
}

i.massive.icon {
    font-size: 6rem;
    vertical-align: middle
}

i.massive.circular.icon {
    box-shadow: 0em 0em 0em 5px rgba(0, 0, 0, 0.1) inset;
    line-height: 10rem;
    width: 10rem;
    height: 10rem
}

i.gigantic.icon {
    font-size: 8rem;
    vertical-align: middle
}

i.ginormous.icon {
    font-size: 12rem;
    vertical-align: middle;
    line-height: 1em
}

span.flag.icon {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    line-height: 1
}

span.flag.icon:before {
    content: "\00a0"
}

span.flag.icon.squared {
    width: 1rem
}

.flag.icon.ad {
    background-image: url(../../../../../assets/flags/4x3/ad.svg)
}

.flag.icon.ad.squared {
    background-image: url(../../../../../assets/flags/1x1/ad.svg)
}

.flag.icon.ae {
    background-image: url(../../../../../assets/flags/4x3/ae.svg)
}

.flag.icon.ae.squared {
    background-image: url(../../../../../assets/flags/1x1/ae.svg)
}

.flag.icon.af {
    background-image: url(../../../../../assets/flags/4x3/af.svg)
}

.flag.icon.af.squared {
    background-image: url(../../../../../assets/flags/1x1/af.svg)
}

.flag.icon.ag {
    background-image: url(../../../../../assets/flags/4x3/ag.svg)
}

.flag.icon.ag.squared {
    background-image: url(../../../../../assets/flags/1x1/ag.svg)
}

.flag.icon.ai {
    background-image: url(../../../../../assets/flags/4x3/ai.svg)
}

.flag.icon.ai.squared {
    background-image: url(../../../../../assets/flags/1x1/ai.svg)
}

.flag.icon.al {
    background-image: url(../../../../../assets/flags/4x3/al.svg)
}

.flag.icon.al.squared {
    background-image: url(../../../../../assets/flags/1x1/al.svg)
}

.flag.icon.am {
    background-image: url(../../../../../assets/flags/4x3/am.svg)
}

.flag.icon.am.squared {
    background-image: url(../../../../../assets/flags/1x1/am.svg)
}

.flag.icon.ao {
    background-image: url(../../../../../assets/flags/4x3/ao.svg)
}

.flag.icon.ao.squared {
    background-image: url(../../../../../assets/flags/1x1/ao.svg)
}

.flag.icon.aq {
    background-image: url(../../../../../assets/flags/4x3/aq.svg)
}

.flag.icon.aq.squared {
    background-image: url(../../../../../assets/flags/1x1/aq.svg)
}

.flag.icon.ar {
    background-image: url(../../../../../assets/flags/4x3/ar.svg)
}

.flag.icon.ar.squared {
    background-image: url(../../../../../assets/flags/1x1/ar.svg)
}

.flag.icon.as {
    background-image: url(../../../../../assets/flags/4x3/as.svg)
}

.flag.icon.as.squared {
    background-image: url(../../../../../assets/flags/1x1/as.svg)
}

.flag.icon.at {
    background-image: url(../../../../../assets/flags/4x3/at.svg)
}

.flag.icon.at.squared {
    background-image: url(../../../../../assets/flags/1x1/at.svg)
}

.flag.icon.au {
    background-image: url(../../../../../assets/flags/4x3/au.svg)
}

.flag.icon.au.squared {
    background-image: url(../../../../../assets/flags/1x1/au.svg)
}

.flag.icon.aw {
    background-image: url(../../../../../assets/flags/4x3/aw.svg)
}

.flag.icon.aw.squared {
    background-image: url(../../../../../assets/flags/1x1/aw.svg)
}

.flag.icon.ax {
    background-image: url(../../../../../assets/flags/4x3/ax.svg)
}

.flag.icon.ax.squared {
    background-image: url(../../../../../assets/flags/1x1/ax.svg)
}

.flag.icon.az {
    background-image: url(../../../../../assets/flags/4x3/az.svg)
}

.flag.icon.az.squared {
    background-image: url(../../../../../assets/flags/1x1/az.svg)
}

.flag.icon.ba {
    background-image: url(../../../../../assets/flags/4x3/ba.svg)
}

.flag.icon.ba.squared {
    background-image: url(../../../../../assets/flags/1x1/ba.svg)
}

.flag.icon.bb {
    background-image: url(../../../../../assets/flags/4x3/bb.svg)
}

.flag.icon.bb.squared {
    background-image: url(../../../../../assets/flags/1x1/bb.svg)
}

.flag.icon.bd {
    background-image: url(../../../../../assets/flags/4x3/bd.svg)
}

.flag.icon.bd.squared {
    background-image: url(../../../../../assets/flags/1x1/bd.svg)
}

.flag.icon.be {
    background-image: url(../../../../../assets/flags/4x3/be.svg)
}

.flag.icon.be.squared {
    background-image: url(../../../../../assets/flags/1x1/be.svg)
}

.flag.icon.bf {
    background-image: url(../../../../../assets/flags/4x3/bf.svg)
}

.flag.icon.bf.squared {
    background-image: url(../../../../../assets/flags/1x1/bf.svg)
}

.flag.icon.bg {
    background-image: url(../../../../../assets/flags/4x3/bg.svg)
}

.flag.icon.bg.squared {
    background-image: url(../../../../../assets/flags/1x1/bg.svg)
}

.flag.icon.bh {
    background-image: url(../../../../../assets/flags/4x3/bh.svg)
}

.flag.icon.bh.squared {
    background-image: url(../../../../../assets/flags/1x1/bh.svg)
}

.flag.icon.bi {
    background-image: url(../../../../../assets/flags/4x3/bi.svg)
}

.flag.icon.bi.squared {
    background-image: url(../../../../../assets/flags/1x1/bi.svg)
}

.flag.icon.bj {
    background-image: url(../../../../../assets/flags/4x3/bj.svg)
}

.flag.icon.bj.squared {
    background-image: url(../../../../../assets/flags/1x1/bj.svg)
}

.flag.icon.bl {
    background-image: url(../../../../../assets/flags/4x3/bl.svg)
}

.flag.icon.bl.squared {
    background-image: url(../../../../../assets/flags/1x1/bl.svg)
}

.flag.icon.bm {
    background-image: url(../../../../../assets/flags/4x3/bm.svg)
}

.flag.icon.bm.squared {
    background-image: url(../../../../../assets/flags/1x1/bm.svg)
}

.flag.icon.bn {
    background-image: url(../../../../../assets/flags/4x3/bn.svg)
}

.flag.icon.bn.squared {
    background-image: url(../../../../../assets/flags/1x1/bn.svg)
}

.flag.icon.bo {
    background-image: url(../../../../../assets/flags/4x3/bo.svg)
}

.flag.icon.bo.squared {
    background-image: url(../../../../../assets/flags/1x1/bo.svg)
}

.flag.icon.bq {
    background-image: url(../../../../../assets/flags/4x3/bq.svg)
}

.flag.icon.bq.squared {
    background-image: url(../../../../../assets/flags/1x1/bq.svg)
}

.flag.icon.br {
    background-image: url(../../../../../assets/flags/4x3/br.svg)
}

.flag.icon.br.squared {
    background-image: url(../../../../../assets/flags/1x1/br.svg)
}

.flag.icon.bs {
    background-image: url(../../../../../assets/flags/4x3/bs.svg)
}

.flag.icon.bs.squared {
    background-image: url(../../../../../assets/flags/1x1/bs.svg)
}

.flag.icon.bt {
    background-image: url(../../../../../assets/flags/4x3/bt.svg)
}

.flag.icon.bt.squared {
    background-image: url(../../../../../assets/flags/1x1/bt.svg)
}

.flag.icon.bv {
    background-image: url(../../../../../assets/flags/4x3/bv.svg)
}

.flag.icon.bv.squared {
    background-image: url(../../../../../assets/flags/1x1/bv.svg)
}

.flag.icon.bw {
    background-image: url(../../../../../assets/flags/4x3/bw.svg)
}

.flag.icon.bw.squared {
    background-image: url(../../../../../assets/flags/1x1/bw.svg)
}

.flag.icon.by {
    background-image: url(../../../../../assets/flags/4x3/by.svg)
}

.flag.icon.by.squared {
    background-image: url(../../../../../assets/flags/1x1/by.svg)
}

.flag.icon.bz {
    background-image: url(../../../../../assets/flags/4x3/bz.svg)
}

.flag.icon.bz.squared {
    background-image: url(../../../../../assets/flags/1x1/bz.svg)
}

.flag.icon.ca {
    background-image: url(../../../../../assets/flags/4x3/ca.svg)
}

.flag.icon.ca.squared {
    background-image: url(../../../../../assets/flags/1x1/ca.svg)
}

.flag.icon.cc {
    background-image: url(../../../../../assets/flags/4x3/cc.svg)
}

.flag.icon.cc.squared {
    background-image: url(../../../../../assets/flags/1x1/cc.svg)
}

.flag.icon.cd {
    background-image: url(../../../../../assets/flags/4x3/cd.svg)
}

.flag.icon.cd.squared {
    background-image: url(../../../../../assets/flags/1x1/cd.svg)
}

.flag.icon.cf {
    background-image: url(../../../../../assets/flags/4x3/cf.svg)
}

.flag.icon.cf.squared {
    background-image: url(../../../../../assets/flags/1x1/cf.svg)
}

.flag.icon.cg {
    background-image: url(../../../../../assets/flags/4x3/cg.svg)
}

.flag.icon.cg.squared {
    background-image: url(../../../../../assets/flags/1x1/cg.svg)
}

.flag.icon.ch {
    background-image: url(../../../../../assets/flags/4x3/ch.svg)
}

.flag.icon.ch.squared {
    background-image: url(../../../../../assets/flags/1x1/ch.svg)
}

.flag.icon.ci {
    background-image: url(../../../../../assets/flags/4x3/ci.svg)
}

.flag.icon.ci.squared {
    background-image: url(../../../../../assets/flags/1x1/ci.svg)
}

.flag.icon.ck {
    background-image: url(../../../../../assets/flags/4x3/ck.svg)
}

.flag.icon.ck.squared {
    background-image: url(../../../../../assets/flags/1x1/ck.svg)
}

.flag.icon.cl {
    background-image: url(../../../../../assets/flags/4x3/cl.svg)
}

.flag.icon.cl.squared {
    background-image: url(../../../../../assets/flags/1x1/cl.svg)
}

.flag.icon.cm {
    background-image: url(../../../../../assets/flags/4x3/cm.svg)
}

.flag.icon.cm.squared {
    background-image: url(../../../../../assets/flags/1x1/cm.svg)
}

.flag.icon.cn {
    background-image: url(../../../../../assets/flags/4x3/cn.svg)
}

.flag.icon.cn.squared {
    background-image: url(../../../../../assets/flags/1x1/cn.svg)
}

.flag.icon.co {
    background-image: url(../../../../../assets/flags/4x3/co.svg)
}

.flag.icon.co.squared {
    background-image: url(../../../../../assets/flags/1x1/co.svg)
}

.flag.icon.cr {
    background-image: url(../../../../../assets/flags/4x3/cr.svg)
}

.flag.icon.cr.squared {
    background-image: url(../../../../../assets/flags/1x1/cr.svg)
}

.flag.icon.cu {
    background-image: url(../../../../../assets/flags/4x3/cu.svg)
}

.flag.icon.cu.squared {
    background-image: url(../../../../../assets/flags/1x1/cu.svg)
}

.flag.icon.cv {
    background-image: url(../../../../../assets/flags/4x3/cv.svg)
}

.flag.icon.cv.squared {
    background-image: url(../../../../../assets/flags/1x1/cv.svg)
}

.flag.icon.cw {
    background-image: url(../../../../../assets/flags/4x3/cw.svg)
}

.flag.icon.cw.squared {
    background-image: url(../../../../../assets/flags/1x1/cw.svg)
}

.flag.icon.cx {
    background-image: url(../../../../../assets/flags/4x3/cx.svg)
}

.flag.icon.cx.squared {
    background-image: url(../../../../../assets/flags/1x1/cx.svg)
}

.flag.icon.cy {
    background-image: url(../../../../../assets/flags/4x3/cy.svg)
}

.flag.icon.cy.squared {
    background-image: url(../../../../../assets/flags/1x1/cy.svg)
}

.flag.icon.cz {
    background-image: url(../../../../../assets/flags/4x3/cz.svg)
}

.flag.icon.cz.squared {
    background-image: url(../../../../../assets/flags/1x1/cz.svg)
}

.flag.icon.de {
    background-image: url(../../../../../assets/flags/4x3/de.svg)
}

.flag.icon.de.squared {
    background-image: url(../../../../../assets/flags/1x1/de.svg)
}

.flag.icon.dj {
    background-image: url(../../../../../assets/flags/4x3/dj.svg)
}

.flag.icon.dj.squared {
    background-image: url(../../../../../assets/flags/1x1/dj.svg)
}

.flag.icon.dk {
    background-image: url(../../../../../assets/flags/4x3/dk.svg)
}

.flag.icon.dk.squared {
    background-image: url(../../../../../assets/flags/1x1/dk.svg)
}

.flag.icon.dm {
    background-image: url(../../../../../assets/flags/4x3/dm.svg)
}

.flag.icon.dm.squared {
    background-image: url(../../../../../assets/flags/1x1/dm.svg)
}

.flag.icon.do {
    background-image: url(../../../../../assets/flags/4x3/do.svg)
}

.flag.icon.do.squared {
    background-image: url(../../../../../assets/flags/1x1/do.svg)
}

.flag.icon.dz {
    background-image: url(../../../../../assets/flags/4x3/dz.svg)
}

.flag.icon.dz.squared {
    background-image: url(../../../../../assets/flags/1x1/dz.svg)
}

.flag.icon.ec {
    background-image: url(../../../../../assets/flags/4x3/ec.svg)
}

.flag.icon.ec.squared {
    background-image: url(../../../../../assets/flags/1x1/ec.svg)
}

.flag.icon.ee {
    background-image: url(../../../../../assets/flags/4x3/ee.svg)
}

.flag.icon.ee.squared {
    background-image: url(../../../../../assets/flags/1x1/ee.svg)
}

.flag.icon.eg {
    background-image: url(../../../../../assets/flags/4x3/eg.svg)
}

.flag.icon.eg.squared {
    background-image: url(../../../../../assets/flags/1x1/eg.svg)
}

.flag.icon.eh {
    background-image: url(../../../../../assets/flags/4x3/eh.svg)
}

.flag.icon.eh.squared {
    background-image: url(../../../../../assets/flags/1x1/eh.svg)
}

.flag.icon.er {
    background-image: url(../../../../../assets/flags/4x3/er.svg)
}

.flag.icon.er.squared {
    background-image: url(../../../../../assets/flags/1x1/er.svg)
}

.flag.icon.es {
    background-image: url(../../../../../assets/flags/4x3/es.svg)
}

.flag.icon.es.squared {
    background-image: url(../../../../../assets/flags/1x1/es.svg)
}

.flag.icon.et {
    background-image: url(../../../../../assets/flags/4x3/et.svg)
}

.flag.icon.et.squared {
    background-image: url(../../../../../assets/flags/1x1/et.svg)
}

.flag.icon.fi {
    background-image: url(../../../../../assets/flags/4x3/fi.svg)
}

.flag.icon.fi.squared {
    background-image: url(../../../../../assets/flags/1x1/fi.svg)
}

.flag.icon.fj {
    background-image: url(../../../../../assets/flags/4x3/fj.svg)
}

.flag.icon.fj.squared {
    background-image: url(../../../../../assets/flags/1x1/fj.svg)
}

.flag.icon.fk {
    background-image: url(../../../../../assets/flags/4x3/fk.svg)
}

.flag.icon.fk.squared {
    background-image: url(../../../../../assets/flags/1x1/fk.svg)
}

.flag.icon.fm {
    background-image: url(../../../../../assets/flags/4x3/fm.svg)
}

.flag.icon.fm.squared {
    background-image: url(../../../../../assets/flags/1x1/fm.svg)
}

.flag.icon.fo {
    background-image: url(../../../../../assets/flags/4x3/fo.svg)
}

.flag.icon.fo.squared {
    background-image: url(../../../../../assets/flags/1x1/fo.svg)
}

.flag.icon.fr {
    background-image: url(../../../../../assets/flags/4x3/fr.svg)
}

.flag.icon.fr.squared {
    background-image: url(../../../../../assets/flags/1x1/fr.svg)
}

.flag.icon.ga {
    background-image: url(../../../../../assets/flags/4x3/ga.svg)
}

.flag.icon.ga.squared {
    background-image: url(../../../../../assets/flags/1x1/ga.svg)
}

.flag.icon.gb,
.flag.icon.en {
    background-image: url(../../../../../assets/flags/4x3/gb.svg)
}

.flag.icon.gb.squared,
.flag.icon.en.squared {
    background-image: url(../../../../../assets/flags/1x1/gb.svg)
}

.flag.icon.gd {
    background-image: url(../../../../../assets/flags/4x3/gd.svg)
}

.flag.icon.gd.squared {
    background-image: url(../../../../../assets/flags/1x1/gd.svg)
}

.flag.icon.ge {
    background-image: url(../../../../../assets/flags/4x3/ge.svg)
}

.flag.icon.ge.squared {
    background-image: url(../../../../../assets/flags/1x1/ge.svg)
}

.flag.icon.gf {
    background-image: url(../../../../../assets/flags/4x3/gf.svg)
}

.flag.icon.gf.squared {
    background-image: url(../../../../../assets/flags/1x1/gf.svg)
}

.flag.icon.gg {
    background-image: url(../../../../../assets/flags/4x3/gg.svg)
}

.flag.icon.gg.squared {
    background-image: url(../../../../../assets/flags/1x1/gg.svg)
}

.flag.icon.gh {
    background-image: url(../../../../../assets/flags/4x3/gh.svg)
}

.flag.icon.gh.squared {
    background-image: url(../../../../../assets/flags/1x1/gh.svg)
}

.flag.icon.gi {
    background-image: url(../../../../../assets/flags/4x3/gi.svg)
}

.flag.icon.gi.squared {
    background-image: url(../../../../../assets/flags/1x1/gi.svg)
}

.flag.icon.gl {
    background-image: url(../../../../../assets/flags/4x3/gl.svg)
}

.flag.icon.gl.squared {
    background-image: url(../../../../../assets/flags/1x1/gl.svg)
}

.flag.icon.gm {
    background-image: url(../../../../../assets/flags/4x3/gm.svg)
}

.flag.icon.gm.squared {
    background-image: url(../../../../../assets/flags/1x1/gm.svg)
}

.flag.icon.gn {
    background-image: url(../../../../../assets/flags/4x3/gn.svg)
}

.flag.icon.gn.squared {
    background-image: url(../../../../../assets/flags/1x1/gn.svg)
}

.flag.icon.gp {
    background-image: url(../../../../../assets/flags/4x3/gp.svg)
}

.flag.icon.gp.squared {
    background-image: url(../../../../../assets/flags/1x1/gp.svg)
}

.flag.icon.gq {
    background-image: url(../../../../../assets/flags/4x3/gq.svg)
}

.flag.icon.gq.squared {
    background-image: url(../../../../../assets/flags/1x1/gq.svg)
}

.flag.icon.gr {
    background-image: url(../../../../../assets/flags/4x3/gr.svg)
}

.flag.icon.gr.squared {
    background-image: url(../../../../../assets/flags/1x1/gr.svg)
}

.flag.icon.gs {
    background-image: url(../../../../../assets/flags/4x3/gs.svg)
}

.flag.icon.gs.squared {
    background-image: url(../../../../../assets/flags/1x1/gs.svg)
}

.flag.icon.gt {
    background-image: url(../../../../../assets/flags/4x3/gt.svg)
}

.flag.icon.gt.squared {
    background-image: url(../../../../../assets/flags/1x1/gt.svg)
}

.flag.icon.gu {
    background-image: url(../../../../../assets/flags/4x3/gu.svg)
}

.flag.icon.gu.squared {
    background-image: url(../../../../../assets/flags/1x1/gu.svg)
}

.flag.icon.gw {
    background-image: url(../../../../../assets/flags/4x3/gw.svg)
}

.flag.icon.gw.squared {
    background-image: url(../../../../../assets/flags/1x1/gw.svg)
}

.flag.icon.gy {
    background-image: url(../../../../../assets/flags/4x3/gy.svg)
}

.flag.icon.gy.squared {
    background-image: url(../../../../../assets/flags/1x1/gy.svg)
}

.flag.icon.hk {
    background-image: url(../../../../../assets/flags/4x3/hk.svg)
}

.flag.icon.hk.squared {
    background-image: url(../../../../../assets/flags/1x1/hk.svg)
}

.flag.icon.hm {
    background-image: url(../../../../../assets/flags/4x3/hm.svg)
}

.flag.icon.hm.squared {
    background-image: url(../../../../../assets/flags/1x1/hm.svg)
}

.flag.icon.hn {
    background-image: url(../../../../../assets/flags/4x3/hn.svg)
}

.flag.icon.hn.squared {
    background-image: url(../../../../../assets/flags/1x1/hn.svg)
}

.flag.icon.hr {
    background-image: url(../../../../../assets/flags/4x3/hr.svg)
}

.flag.icon.hr.squared {
    background-image: url(../../../../../assets/flags/1x1/hr.svg)
}

.flag.icon.ht {
    background-image: url(../../../../../assets/flags/4x3/ht.svg)
}

.flag.icon.ht.squared {
    background-image: url(../../../../../assets/flags/1x1/ht.svg)
}

.flag.icon.hu {
    background-image: url(../../../../../assets/flags/4x3/hu.svg)
}

.flag.icon.hu.squared {
    background-image: url(../../../../../assets/flags/1x1/hu.svg)
}

.flag.icon.id {
    background-image: url(../../../../../assets/flags/4x3/id.svg)
}

.flag.icon.id.squared {
    background-image: url(../../../../../assets/flags/1x1/id.svg)
}

.flag.icon.ie {
    background-image: url(../../../../../assets/flags/4x3/ie.svg)
}

.flag.icon.ie.squared {
    background-image: url(../../../../../assets/flags/1x1/ie.svg)
}

.flag.icon.il {
    background-image: url(../../../../../assets/flags/4x3/il.svg)
}

.flag.icon.il.squared {
    background-image: url(../../../../../assets/flags/1x1/il.svg)
}

.flag.icon.im {
    background-image: url(../../../../../assets/flags/4x3/im.svg)
}

.flag.icon.im.squared {
    background-image: url(../../../../../assets/flags/1x1/im.svg)
}

.flag.icon.in {
    background-image: url(../../../../../assets/flags/4x3/in.svg)
}

.flag.icon.in.squared {
    background-image: url(../../../../../assets/flags/1x1/in.svg)
}

.flag.icon.io {
    background-image: url(../../../../../assets/flags/4x3/io.svg)
}

.flag.icon.io.squared {
    background-image: url(../../../../../assets/flags/1x1/io.svg)
}

.flag.icon.iq {
    background-image: url(../../../../../assets/flags/4x3/iq.svg)
}

.flag.icon.iq.squared {
    background-image: url(../../../../../assets/flags/1x1/iq.svg)
}

.flag.icon.ir {
    background-image: url(../../../../../assets/flags/4x3/ir.svg)
}

.flag.icon.ir.squared {
    background-image: url(../../../../../assets/flags/1x1/ir.svg)
}

.flag.icon.is {
    background-image: url(../../../../../assets/flags/4x3/is.svg)
}

.flag.icon.is.squared {
    background-image: url(../../../../../assets/flags/1x1/is.svg)
}

.flag.icon.it {
    background-image: url(../../../../../assets/flags/4x3/it.svg)
}

.flag.icon.it.squared {
    background-image: url(../../../../../assets/flags/1x1/it.svg)
}

.flag.icon.je {
    background-image: url(../../../../../assets/flags/4x3/je.svg)
}

.flag.icon.je.squared {
    background-image: url(../../../../../assets/flags/1x1/je.svg)
}

.flag.icon.jm {
    background-image: url(../../../../../assets/flags/4x3/jm.svg)
}

.flag.icon.jm.squared {
    background-image: url(../../../../../assets/flags/1x1/jm.svg)
}

.flag.icon.jo {
    background-image: url(../../../../../assets/flags/4x3/jo.svg)
}

.flag.icon.jo.squared {
    background-image: url(../../../../../assets/flags/1x1/jo.svg)
}

.flag.icon.jp {
    background-image: url(../../../../../assets/flags/4x3/jp.svg)
}

.flag.icon.jp.squared {
    background-image: url(../../../../../assets/flags/1x1/jp.svg)
}

.flag.icon.ke {
    background-image: url(../../../../../assets/flags/4x3/ke.svg)
}

.flag.icon.ke.squared {
    background-image: url(../../../../../assets/flags/1x1/ke.svg)
}

.flag.icon.kg {
    background-image: url(../../../../../assets/flags/4x3/kg.svg)
}

.flag.icon.kg.squared {
    background-image: url(../../../../../assets/flags/1x1/kg.svg)
}

.flag.icon.kh {
    background-image: url(../../../../../assets/flags/4x3/kh.svg)
}

.flag.icon.kh.squared {
    background-image: url(../../../../../assets/flags/1x1/kh.svg)
}

.flag.icon.ki {
    background-image: url(../../../../../assets/flags/4x3/ki.svg)
}

.flag.icon.ki.squared {
    background-image: url(../../../../../assets/flags/1x1/ki.svg)
}

.flag.icon.km {
    background-image: url(../../../../../assets/flags/4x3/km.svg)
}

.flag.icon.km.squared {
    background-image: url(../../../../../assets/flags/1x1/km.svg)
}

.flag.icon.kn {
    background-image: url(../../../../../assets/flags/4x3/kn.svg)
}

.flag.icon.kn.squared {
    background-image: url(../../../../../assets/flags/1x1/kn.svg)
}

.flag.icon.kp {
    background-image: url(../../../../../assets/flags/4x3/kp.svg)
}

.flag.icon.kp.squared {
    background-image: url(../../../../../assets/flags/1x1/kp.svg)
}

.flag.icon.kr {
    background-image: url(../../../../../assets/flags/4x3/kr.svg)
}

.flag.icon.kr.squared {
    background-image: url(../../../../../assets/flags/1x1/kr.svg)
}

.flag.icon.kw {
    background-image: url(../../../../../assets/flags/4x3/kw.svg)
}

.flag.icon.kw.squared {
    background-image: url(../../../../../assets/flags/1x1/kw.svg)
}

.flag.icon.ky {
    background-image: url(../../../../../assets/flags/4x3/ky.svg)
}

.flag.icon.ky.squared {
    background-image: url(../../../../../assets/flags/1x1/ky.svg)
}

.flag.icon.kz {
    background-image: url(../../../../../assets/flags/4x3/kz.svg)
}

.flag.icon.kz.squared {
    background-image: url(../../../../../assets/flags/1x1/kz.svg)
}

.flag.icon.la {
    background-image: url(../../../../../assets/flags/4x3/la.svg)
}

.flag.icon.la.squared {
    background-image: url(../../../../../assets/flags/1x1/la.svg)
}

.flag.icon.lb {
    background-image: url(../../../../../assets/flags/4x3/lb.svg)
}

.flag.icon.lb.squared {
    background-image: url(../../../../../assets/flags/1x1/lb.svg)
}

.flag.icon.lc {
    background-image: url(../../../../../assets/flags/4x3/lc.svg)
}

.flag.icon.lc.squared {
    background-image: url(../../../../../assets/flags/1x1/lc.svg)
}

.flag.icon.li {
    background-image: url(../../../../../assets/flags/4x3/li.svg)
}

.flag.icon.li.squared {
    background-image: url(../../../../../assets/flags/1x1/li.svg)
}

.flag.icon.lk {
    background-image: url(../../../../../assets/flags/4x3/lk.svg)
}

.flag.icon.lk.squared {
    background-image: url(../../../../../assets/flags/1x1/lk.svg)
}

.flag.icon.lr {
    background-image: url(../../../../../assets/flags/4x3/lr.svg)
}

.flag.icon.lr.squared {
    background-image: url(../../../../../assets/flags/1x1/lr.svg)
}

.flag.icon.ls {
    background-image: url(../../../../../assets/flags/4x3/ls.svg)
}

.flag.icon.ls.squared {
    background-image: url(../../../../../assets/flags/1x1/ls.svg)
}

.flag.icon.lt {
    background-image: url(../../../../../assets/flags/4x3/lt.svg)
}

.flag.icon.lt.squared {
    background-image: url(../../../../../assets/flags/1x1/lt.svg)
}

.flag.icon.lu {
    background-image: url(../../../../../assets/flags/4x3/lu.svg)
}

.flag.icon.lu.squared {
    background-image: url(../../../../../assets/flags/1x1/lu.svg)
}

.flag.icon.lv {
    background-image: url(../../../../../assets/flags/4x3/lv.svg)
}

.flag.icon.lv.squared {
    background-image: url(../../../../../assets/flags/1x1/lv.svg)
}

.flag.icon.ly {
    background-image: url(../../../../../assets/flags/4x3/ly.svg)
}

.flag.icon.ly.squared {
    background-image: url(../../../../../assets/flags/1x1/ly.svg)
}

.flag.icon.ma {
    background-image: url(../../../../../assets/flags/4x3/ma.svg)
}

.flag.icon.ma.squared {
    background-image: url(../../../../../assets/flags/1x1/ma.svg)
}

.flag.icon.mc {
    background-image: url(../../../../../assets/flags/4x3/mc.svg)
}

.flag.icon.mc.squared {
    background-image: url(../../../../../assets/flags/1x1/mc.svg)
}

.flag.icon.md {
    background-image: url(../../../../../assets/flags/4x3/md.svg)
}

.flag.icon.md.squared {
    background-image: url(../../../../../assets/flags/1x1/md.svg)
}

.flag.icon.me {
    background-image: url(../../../../../assets/flags/4x3/me.svg)
}

.flag.icon.me.squared {
    background-image: url(../../../../../assets/flags/1x1/me.svg)
}

.flag.icon.mf {
    background-image: url(../../../../../assets/flags/4x3/mf.svg)
}

.flag.icon.mf.squared {
    background-image: url(../../../../../assets/flags/1x1/mf.svg)
}

.flag.icon.mg {
    background-image: url(../../../../../assets/flags/4x3/mg.svg)
}

.flag.icon.mg.squared {
    background-image: url(../../../../../assets/flags/1x1/mg.svg)
}

.flag.icon.mh {
    background-image: url(../../../../../assets/flags/4x3/mh.svg)
}

.flag.icon.mh.squared {
    background-image: url(../../../../../assets/flags/1x1/mh.svg)
}

.flag.icon.mk {
    background-image: url(../../../../../assets/flags/4x3/mk.svg)
}

.flag.icon.mk.squared {
    background-image: url(../../../../../assets/flags/1x1/mk.svg)
}

.flag.icon.ml {
    background-image: url(../../../../../assets/flags/4x3/ml.svg)
}

.flag.icon.ml.squared {
    background-image: url(../../../../../assets/flags/1x1/ml.svg)
}

.flag.icon.mm {
    background-image: url(../../../../../assets/flags/4x3/mm.svg)
}

.flag.icon.mm.squared {
    background-image: url(../../../../../assets/flags/1x1/mm.svg)
}

.flag.icon.mn {
    background-image: url(../../../../../assets/flags/4x3/mn.svg)
}

.flag.icon.mn.squared {
    background-image: url(../../../../../assets/flags/1x1/mn.svg)
}

.flag.icon.mo {
    background-image: url(../../../../../assets/flags/4x3/mo.svg)
}

.flag.icon.mo.squared {
    background-image: url(../../../../../assets/flags/1x1/mo.svg)
}

.flag.icon.mp {
    background-image: url(../../../../../assets/flags/4x3/mp.svg)
}

.flag.icon.mp.squared {
    background-image: url(../../../../../assets/flags/1x1/mp.svg)
}

.flag.icon.mq {
    background-image: url(../../../../../assets/flags/4x3/mq.svg)
}

.flag.icon.mq.squared {
    background-image: url(../../../../../assets/flags/1x1/mq.svg)
}

.flag.icon.mr {
    background-image: url(../../../../../assets/flags/4x3/mr.svg)
}

.flag.icon.mr.squared {
    background-image: url(../../../../../assets/flags/1x1/mr.svg)
}

.flag.icon.ms {
    background-image: url(../../../../../assets/flags/4x3/ms.svg)
}

.flag.icon.ms.squared {
    background-image: url(../../../../../assets/flags/1x1/ms.svg)
}

.flag.icon.mt {
    background-image: url(../../../../../assets/flags/4x3/mt.svg)
}

.flag.icon.mt.squared {
    background-image: url(../../../../../assets/flags/1x1/mt.svg)
}

.flag.icon.mu {
    background-image: url(../../../../../assets/flags/4x3/mu.svg)
}

.flag.icon.mu.squared {
    background-image: url(../../../../../assets/flags/1x1/mu.svg)
}

.flag.icon.mv {
    background-image: url(../../../../../assets/flags/4x3/mv.svg)
}

.flag.icon.mv.squared {
    background-image: url(../../../../../assets/flags/1x1/mv.svg)
}

.flag.icon.mw {
    background-image: url(../../../../../assets/flags/4x3/mw.svg)
}

.flag.icon.mw.squared {
    background-image: url(../../../../../assets/flags/1x1/mw.svg)
}

.flag.icon.mx {
    background-image: url(../../../../../assets/flags/4x3/mx.svg)
}

.flag.icon.mx.squared {
    background-image: url(../../../../../assets/flags/1x1/mx.svg)
}

.flag.icon.my {
    background-image: url(../../../../../assets/flags/4x3/my.svg)
}

.flag.icon.my.squared {
    background-image: url(../../../../../assets/flags/1x1/my.svg)
}

.flag.icon.mz {
    background-image: url(../../../../../assets/flags/4x3/mz.svg)
}

.flag.icon.mz.squared {
    background-image: url(../../../../../assets/flags/1x1/mz.svg)
}

.flag.icon.na {
    background-image: url(../../../../../assets/flags/4x3/na.svg)
}

.flag.icon.na.squared {
    background-image: url(../../../../../assets/flags/1x1/na.svg)
}

.flag.icon.nc {
    background-image: url(../../../../../assets/flags/4x3/nc.svg)
}

.flag.icon.nc.squared {
    background-image: url(../../../../../assets/flags/1x1/nc.svg)
}

.flag.icon.ne {
    background-image: url(../../../../../assets/flags/4x3/ne.svg)
}

.flag.icon.ne.squared {
    background-image: url(../../../../../assets/flags/1x1/ne.svg)
}

.flag.icon.nf {
    background-image: url(../../../../../assets/flags/4x3/nf.svg)
}

.flag.icon.nf.squared {
    background-image: url(../../../../../assets/flags/1x1/nf.svg)
}

.flag.icon.ng {
    background-image: url(../../../../../assets/flags/4x3/ng.svg)
}

.flag.icon.ng.squared {
    background-image: url(../../../../../assets/flags/1x1/ng.svg)
}

.flag.icon.ni {
    background-image: url(../../../../../assets/flags/4x3/ni.svg)
}

.flag.icon.ni.squared {
    background-image: url(../../../../../assets/flags/1x1/ni.svg)
}

.flag.icon.nl {
    background-image: url(../../../../../assets/flags/4x3/nl.svg)
}

.flag.icon.nl.squared {
    background-image: url(../../../../../assets/flags/1x1/nl.svg)
}

.flag.icon.no {
    background-image: url(../../../../../assets/flags/4x3/no.svg)
}

.flag.icon.no.squared {
    background-image: url(../../../../../assets/flags/1x1/no.svg)
}

.flag.icon.np {
    background-image: url(../../../../../assets/flags/4x3/np.svg)
}

.flag.icon.np.squared {
    background-image: url(../../../../../assets/flags/1x1/np.svg)
}

.flag.icon.nr {
    background-image: url(../../../../../assets/flags/4x3/nr.svg)
}

.flag.icon.nr.squared {
    background-image: url(../../../../../assets/flags/1x1/nr.svg)
}

.flag.icon.nu {
    background-image: url(../../../../../assets/flags/4x3/nu.svg)
}

.flag.icon.nu.squared {
    background-image: url(../../../../../assets/flags/1x1/nu.svg)
}

.flag.icon.nz {
    background-image: url(../../../../../assets/flags/4x3/nz.svg)
}

.flag.icon.nz.squared {
    background-image: url(../../../../../assets/flags/1x1/nz.svg)
}

.flag.icon.om {
    background-image: url(../../../../../assets/flags/4x3/om.svg)
}

.flag.icon.om.squared {
    background-image: url(../../../../../assets/flags/1x1/om.svg)
}

.flag.icon.pa {
    background-image: url(../../../../../assets/flags/4x3/pa.svg)
}

.flag.icon.pa.squared {
    background-image: url(../../../../../assets/flags/1x1/pa.svg)
}

.flag.icon.pe {
    background-image: url(../../../../../assets/flags/4x3/pe.svg)
}

.flag.icon.pe.squared {
    background-image: url(../../../../../assets/flags/1x1/pe.svg)
}

.flag.icon.pf {
    background-image: url(../../../../../assets/flags/4x3/pf.svg)
}

.flag.icon.pf.squared {
    background-image: url(../../../../../assets/flags/1x1/pf.svg)
}

.flag.icon.pg {
    background-image: url(../../../../../assets/flags/4x3/pg.svg)
}

.flag.icon.pg.squared {
    background-image: url(../../../../../assets/flags/1x1/pg.svg)
}

.flag.icon.ph {
    background-image: url(../../../../../assets/flags/4x3/ph.svg)
}

.flag.icon.ph.squared {
    background-image: url(../../../../../assets/flags/1x1/ph.svg)
}

.flag.icon.pk {
    background-image: url(../../../../../assets/flags/4x3/pk.svg)
}

.flag.icon.pk.squared {
    background-image: url(../../../../../assets/flags/1x1/pk.svg)
}

.flag.icon.pl {
    background-image: url(../../../../../assets/flags/4x3/pl.svg)
}

.flag.icon.pl.squared {
    background-image: url(../../../../../assets/flags/1x1/pl.svg)
}

.flag.icon.pm {
    background-image: url(../../../../../assets/flags/4x3/pm.svg)
}

.flag.icon.pm.squared {
    background-image: url(../../../../../assets/flags/1x1/pm.svg)
}

.flag.icon.pn {
    background-image: url(../../../../../assets/flags/4x3/pn.svg)
}

.flag.icon.pn.squared {
    background-image: url(../../../../../assets/flags/1x1/pn.svg)
}

.flag.icon.pr {
    background-image: url(../../../../../assets/flags/4x3/pr.svg)
}

.flag.icon.pr.squared {
    background-image: url(../../../../../assets/flags/1x1/pr.svg)
}

.flag.icon.ps {
    background-image: url(../../../../../assets/flags/4x3/ps.svg)
}

.flag.icon.ps.squared {
    background-image: url(../../../../../assets/flags/1x1/ps.svg)
}

.flag.icon.pt {
    background-image: url(../../../../../assets/flags/4x3/pt.svg)
}

.flag.icon.pt.squared {
    background-image: url(../../../../../assets/flags/1x1/pt.svg)
}

.flag.icon.pw {
    background-image: url(../../../../../assets/flags/4x3/pw.svg)
}

.flag.icon.pw.squared {
    background-image: url(../../../../../assets/flags/1x1/pw.svg)
}

.flag.icon.py {
    background-image: url(../../../../../assets/flags/4x3/py.svg)
}

.flag.icon.py.squared {
    background-image: url(../../../../../assets/flags/1x1/py.svg)
}

.flag.icon.qa {
    background-image: url(../../../../../assets/flags/4x3/qa.svg)
}

.flag.icon.qa.squared {
    background-image: url(../../../../../assets/flags/1x1/qa.svg)
}

.flag.icon.re {
    background-image: url(../../../../../assets/flags/4x3/re.svg)
}

.flag.icon.re.squared {
    background-image: url(../../../../../assets/flags/1x1/re.svg)
}

.flag.icon.ro {
    background-image: url(../../../../../assets/flags/4x3/ro.svg)
}

.flag.icon.ro.squared {
    background-image: url(../../../../../assets/flags/1x1/ro.svg)
}

.flag.icon.rs {
    background-image: url(../../../../../assets/flags/4x3/rs.svg)
}

.flag.icon.rs.squared {
    background-image: url(../../../../../assets/flags/1x1/rs.svg)
}

.flag.icon.ru {
    background-image: url(../../../../../assets/flags/4x3/ru.svg)
}

.flag.icon.ru.squared {
    background-image: url(../../../../../assets/flags/1x1/ru.svg)
}

.flag.icon.rw {
    background-image: url(../../../../../assets/flags/4x3/rw.svg)
}

.flag.icon.rw.squared {
    background-image: url(../../../../../assets/flags/1x1/rw.svg)
}

.flag.icon.sa {
    background-image: url(../../../../../assets/flags/4x3/sa.svg)
}

.flag.icon.sa.squared {
    background-image: url(../../../../../assets/flags/1x1/sa.svg)
}

.flag.icon.sb {
    background-image: url(../../../../../assets/flags/4x3/sb.svg)
}

.flag.icon.sb.squared {
    background-image: url(../../../../../assets/flags/1x1/sb.svg)
}

.flag.icon.sc {
    background-image: url(../../../../../assets/flags/4x3/sc.svg)
}

.flag.icon.sc.squared {
    background-image: url(../../../../../assets/flags/1x1/sc.svg)
}

.flag.icon.sd {
    background-image: url(../../../../../assets/flags/4x3/sd.svg)
}

.flag.icon.sd.squared {
    background-image: url(../../../../../assets/flags/1x1/sd.svg)
}

.flag.icon.se {
    background-image: url(../../../../../assets/flags/4x3/se.svg)
}

.flag.icon.se.squared {
    background-image: url(../../../../../assets/flags/1x1/se.svg)
}

.flag.icon.sg {
    background-image: url(../../../../../assets/flags/4x3/sg.svg)
}

.flag.icon.sg.squared {
    background-image: url(../../../../../assets/flags/1x1/sg.svg)
}

.flag.icon.sh {
    background-image: url(../../../../../assets/flags/4x3/sh.svg)
}

.flag.icon.sh.squared {
    background-image: url(../../../../../assets/flags/1x1/sh.svg)
}

.flag.icon.si {
    background-image: url(../../../../../assets/flags/4x3/si.svg)
}

.flag.icon.si.squared {
    background-image: url(../../../../../assets/flags/1x1/si.svg)
}

.flag.icon.sj {
    background-image: url(../../../../../assets/flags/4x3/sj.svg)
}

.flag.icon.sj.squared {
    background-image: url(../../../../../assets/flags/1x1/sj.svg)
}

.flag.icon.sk {
    background-image: url(../../../../../assets/flags/4x3/sk.svg)
}

.flag.icon.sk.squared {
    background-image: url(../../../../../assets/flags/1x1/sk.svg)
}

.flag.icon.sl {
    background-image: url(../../../../../assets/flags/4x3/sl.svg)
}

.flag.icon.sl.squared {
    background-image: url(../../../../../assets/flags/1x1/sl.svg)
}

.flag.icon.sm {
    background-image: url(../../../../../assets/flags/4x3/sm.svg)
}

.flag.icon.sm.squared {
    background-image: url(../../../../../assets/flags/1x1/sm.svg)
}

.flag.icon.sn {
    background-image: url(../../../../../assets/flags/4x3/sn.svg)
}

.flag.icon.sn.squared {
    background-image: url(../../../../../assets/flags/1x1/sn.svg)
}

.flag.icon.so {
    background-image: url(../../../../../assets/flags/4x3/so.svg)
}

.flag.icon.so.squared {
    background-image: url(../../../../../assets/flags/1x1/so.svg)
}

.flag.icon.sr {
    background-image: url(../../../../../assets/flags/4x3/sr.svg)
}

.flag.icon.sr.squared {
    background-image: url(../../../../../assets/flags/1x1/sr.svg)
}

.flag.icon.ss {
    background-image: url(../../../../../assets/flags/4x3/ss.svg)
}

.flag.icon.ss.squared {
    background-image: url(../../../../../assets/flags/1x1/ss.svg)
}

.flag.icon.st {
    background-image: url(../../../../../assets/flags/4x3/st.svg)
}

.flag.icon.st.squared {
    background-image: url(../../../../../assets/flags/1x1/st.svg)
}

.flag.icon.sv {
    background-image: url(../../../../../assets/flags/4x3/sv.svg)
}

.flag.icon.sv.squared {
    background-image: url(../../../../../assets/flags/1x1/sv.svg)
}

.flag.icon.sx {
    background-image: url(../../../../../assets/flags/4x3/sx.svg)
}

.flag.icon.sx.squared {
    background-image: url(../../../../../assets/flags/1x1/sx.svg)
}

.flag.icon.sy {
    background-image: url(../../../../../assets/flags/4x3/sy.svg)
}

.flag.icon.sy.squared {
    background-image: url(../../../../../assets/flags/1x1/sy.svg)
}

.flag.icon.sz {
    background-image: url(../../../../../assets/flags/4x3/sz.svg)
}

.flag.icon.sz.squared {
    background-image: url(../../../../../assets/flags/1x1/sz.svg)
}

.flag.icon.tc {
    background-image: url(../../../../../assets/flags/4x3/tc.svg)
}

.flag.icon.tc.squared {
    background-image: url(../../../../../assets/flags/1x1/tc.svg)
}

.flag.icon.td {
    background-image: url(../../../../../assets/flags/4x3/td.svg)
}

.flag.icon.td.squared {
    background-image: url(../../../../../assets/flags/1x1/td.svg)
}

.flag.icon.tf {
    background-image: url(../../../../../assets/flags/4x3/tf.svg)
}

.flag.icon.tf.squared {
    background-image: url(../../../../../assets/flags/1x1/tf.svg)
}

.flag.icon.tg {
    background-image: url(../../../../../assets/flags/4x3/tg.svg)
}

.flag.icon.tg.squared {
    background-image: url(../../../../../assets/flags/1x1/tg.svg)
}

.flag.icon.th {
    background-image: url(../../../../../assets/flags/4x3/th.svg)
}

.flag.icon.th.squared {
    background-image: url(../../../../../assets/flags/1x1/th.svg)
}

.flag.icon.tj {
    background-image: url(../../../../../assets/flags/4x3/tj.svg)
}

.flag.icon.tj.squared {
    background-image: url(../../../../../assets/flags/1x1/tj.svg)
}

.flag.icon.tk {
    background-image: url(../../../../../assets/flags/4x3/tk.svg)
}

.flag.icon.tk.squared {
    background-image: url(../../../../../assets/flags/1x1/tk.svg)
}

.flag.icon.tl {
    background-image: url(../../../../../assets/flags/4x3/tl.svg)
}

.flag.icon.tl.squared {
    background-image: url(../../../../../assets/flags/1x1/tl.svg)
}

.flag.icon.tm {
    background-image: url(../../../../../assets/flags/4x3/tm.svg)
}

.flag.icon.tm.squared {
    background-image: url(../../../../../assets/flags/1x1/tm.svg)
}

.flag.icon.tn {
    background-image: url(../../../../../assets/flags/4x3/tn.svg)
}

.flag.icon.tn.squared {
    background-image: url(../../../../../assets/flags/1x1/tn.svg)
}

.flag.icon.to {
    background-image: url(../../../../../assets/flags/4x3/to.svg)
}

.flag.icon.to.squared {
    background-image: url(../../../../../assets/flags/1x1/to.svg)
}

.flag.icon.tr {
    background-image: url(../../../../../assets/flags/4x3/tr.svg)
}

.flag.icon.tr.squared {
    background-image: url(../../../../../assets/flags/1x1/tr.svg)
}

.flag.icon.tt {
    background-image: url(../../../../../assets/flags/4x3/tt.svg)
}

.flag.icon.tt.squared {
    background-image: url(../../../../../assets/flags/1x1/tt.svg)
}

.flag.icon.tv {
    background-image: url(../../../../../assets/flags/4x3/tv.svg)
}

.flag.icon.tv.squared {
    background-image: url(../../../../../assets/flags/1x1/tv.svg)
}

.flag.icon.tw {
    background-image: url(../../../../../assets/flags/4x3/tw.svg)
}

.flag.icon.tw.squared {
    background-image: url(../../../../../assets/flags/1x1/tw.svg)
}

.flag.icon.tz {
    background-image: url(../../../../../assets/flags/4x3/tz.svg)
}

.flag.icon.tz.squared {
    background-image: url(../../../../../assets/flags/1x1/tz.svg)
}

.flag.icon.ua {
    background-image: url(../../../../../assets/flags/4x3/ua.svg)
}

.flag.icon.ua.squared {
    background-image: url(../../../../../assets/flags/1x1/ua.svg)
}

.flag.icon.ug {
    background-image: url(../../../../../assets/flags/4x3/ug.svg)
}

.flag.icon.ug.squared {
    background-image: url(../../../../../assets/flags/1x1/ug.svg)
}

.flag.icon.um {
    background-image: url(../../../../../assets/flags/4x3/um.svg)
}

.flag.icon.um.squared {
    background-image: url(../../../../../assets/flags/1x1/um.svg)
}

.flag.icon.us {
    background-image: url(../../../../../assets/flags/4x3/us.svg)
}

.flag.icon.us.squared {
    background-image: url(../../../../../assets/flags/1x1/us.svg)
}

.flag.icon.uy {
    background-image: url(../../../../../assets/flags/4x3/uy.svg)
}

.flag.icon.uy.squared {
    background-image: url(../../../../../assets/flags/1x1/uy.svg)
}

.flag.icon.uz {
    background-image: url(../../../../../assets/flags/4x3/uz.svg)
}

.flag.icon.uz.squared {
    background-image: url(../../../../../assets/flags/1x1/uz.svg)
}

.flag.icon.va {
    background-image: url(../../../../../assets/flags/4x3/va.svg)
}

.flag.icon.va.squared {
    background-image: url(../../../../../assets/flags/1x1/va.svg)
}

.flag.icon.vc {
    background-image: url(../../../../../assets/flags/4x3/vc.svg)
}

.flag.icon.vc.squared {
    background-image: url(../../../../../assets/flags/1x1/vc.svg)
}

.flag.icon.ve {
    background-image: url(../../../../../assets/flags/4x3/ve.svg)
}

.flag.icon.ve.squared {
    background-image: url(../../../../../assets/flags/1x1/ve.svg)
}

.flag.icon.vg {
    background-image: url(../../../../../assets/flags/4x3/vg.svg)
}

.flag.icon.vg.squared {
    background-image: url(../../../../../assets/flags/1x1/vg.svg)
}

.flag.icon.vi {
    background-image: url(../../../../../assets/flags/4x3/vi.svg)
}

.flag.icon.vi.squared {
    background-image: url(../../../../../assets/flags/1x1/vi.svg)
}

.flag.icon.vn {
    background-image: url(../../../../../assets/flags/4x3/vn.svg)
}

.flag.icon.vn.squared {
    background-image: url(../../../../../assets/flags/1x1/vn.svg)
}

.flag.icon.vu {
    background-image: url(../../../../../assets/flags/4x3/vu.svg)
}

.flag.icon.vu.squared {
    background-image: url(../../../../../assets/flags/1x1/vu.svg)
}

.flag.icon.wf {
    background-image: url(../../../../../assets/flags/4x3/wf.svg)
}

.flag.icon.wf.squared {
    background-image: url(../../../../../assets/flags/1x1/wf.svg)
}

.flag.icon.ws {
    background-image: url(../../../../../assets/flags/4x3/ws.svg)
}

.flag.icon.ws.squared {
    background-image: url(../../../../../assets/flags/1x1/ws.svg)
}

.flag.icon.ye {
    background-image: url(../../../../../assets/flags/4x3/ye.svg)
}

.flag.icon.ye.squared {
    background-image: url(../../../../../assets/flags/1x1/ye.svg)
}

.flag.icon.yt {
    background-image: url(../../../../../assets/flags/4x3/yt.svg)
}

.flag.icon.yt.squared {
    background-image: url(../../../../../assets/flags/1x1/yt.svg)
}

.flag.icon.za {
    background-image: url(../../../../../assets/flags/4x3/za.svg)
}

.flag.icon.za.squared {
    background-image: url(../../../../../assets/flags/1x1/za.svg)
}

.flag.icon.zm {
    background-image: url(../../../../../assets/flags/4x3/zm.svg)
}

.flag.icon.zm.squared {
    background-image: url(../../../../../assets/flags/1x1/zm.svg)
}

.flag.icon.zw {
    background-image: url(../../../../../assets/flags/4x3/zw.svg)
}

.flag.icon.zw.squared {
    background-image: url(../../../../../assets/flags/1x1/zw.svg)
}

.flag.icon.eu {
    background-image: url(../../../../../assets/flags/4x3/eu.svg)
}

.flag.icon.eu.squared {
    background-image: url(../../../../../assets/flags/1x1/eu.svg)
}

.flag.icon.gb.eng {
    background-image: url(../../../../../assets/flags/4x3/gb.eng.svg)
}

.flag.icon.gb.eng.squared {
    background-image: url(../../../../../assets/flags/1x1/gb.eng.svg)
}

.flag.icon.gb.nir {
    background-image: url(../../../../../assets/flags/4x3/gb.nir.svg)
}

.flag.icon.gb.nir.squared {
    background-image: url(../../../../../assets/flags/1x1/gb.nir.svg)
}

.flag.icon.gb.sct {
    background-image: url(../../../../../assets/flags/4x3/gb.sct.svg)
}

.flag.icon.gb.sct.squared {
    background-image: url(../../../../../assets/flags/1x1/gb.sct.svg)
}

.flag.icon.gb.wls {
    background-image: url(../../../../../assets/flags/4x3/gb.wls.svg)
}

.flag.icon.gb.wls.squared {
    background-image: url(../../../../../assets/flags/1x1/gb.wls.svg)
}

.flag.icon.un {
    background-image: url(../../../../../assets/flags/4x3/un.svg)
}

.flag.icon.un.squared {
    background-image: url(../../../../../assets/flags/1x1/un.svg)
}

span.flag.icon.disabled {
    opacity: .5
}

span.flag.small.icon {
    width: 1rem;
    height: 1rem
}

span.flag.icon {
    width: 1.5em;
    height: 1em
}

span.flag.full.icon {
    width: 100%;
    height: 100%
}

.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: .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: .250rem 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 .250rem .250rem 0
}

.wojo.rounded.top.images .image,
.wojo.rounded.top.images img,
.wojo.rounded.top.image img,
.wojo.rounded.top.image svg,
.wojo.rounded.top.image {
    border-radius: 0.250rem .250rem 0 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.shape.shadow.images .image,
.wojo.shape.shadow.images img,
.wojo.shape.shadow.image img,
.wojo.shape.shadow.image svg,
.wojo.shape.shadow.image {
    filter: drop-shadow(8px 8px 6px var(--dark-color-shadow));
    box-shadow: none
}

.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.image.description {
    position: relative
}

.wojo.image.description p {
    position: absolute;
    padding: 1rem;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: var(--dark-color-shadow)
}

.wojo.hover {
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    border-radius: .250rem
}

.wojo.hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 5px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    background: #fff;
    opacity: 1;
    z-index: 1
}

.wojo.hover:hover::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.wojo.hover:hover {
    box-shadow: 0 23px 49px 0 var(--shadow-color);
    transition: all 0.5s ease-in-out
}

.wojo.hover:hover img {
    border-radius: .5rem;
    transition: all 0.5s ease-in-out
}

.wojo.hover figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    text-align: center
}

.wojo.hover:hover figcaption {
    top: 0;
    opacity: 1;
    visibility: visible
}

.wojo.masked.image::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: url("../images/team-mask.svg") no-repeat;
    background-size: cover
}

.wojo.testimonial.image {
    z-index: 1
}

.wojo.testimonial.image img.client {
    padding: 2rem;
    border-radius: 50%;
    position: relative;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display: inline-block;
    background: #fff;
    box-shadow: 0 20px 35px 0 var(--shadow-color)
}

.wojo.testimonial.image img.shape {
    bottom: -100px;
    left: 110px;
    position: absolute
}

.wojo.image.lightbox span.viewer {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--primary-color);
    border-radius: 50%;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    text-align: center;
    opacity: 0;
    visibility: hidden
}

.wojo.image.lightbox span.viewer .icon {
    line-height: 2.5rem
}

.wojo.image.lightbox:hover span.viewer {
    opacity: 1;
    visibility: visible
}

.wojo.inverted.image,
.wojo.inverted.image img {
    box-shadow: 0 0 0 .125rem #fff
}

.wojo.image.cover {
    height: 100vh;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.wojo.image.fill {
    height: 100vh;
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

.wojo.image.full img,
.wojo.image.fit {
    -o-object-fit: cover;
    object-fit: cover;
    flex-grow: 1
}

.wojo.image.full {
    display: flex;
    flex-direction: column;
    height: 100%
}

.wojo.zoom.image {
    overflow: hidden
}

.wojo.zoom.image img {
    transform-origin: 50% 50%;
    transition: transform .5s, filter .5s ease-out
}

.wojo.zoom.image:hover img {
    transform: scale(1.25)
}

.wojo.skewed.image {
    perspective-origin: left center;
    perspective: 1500px;
    transform-style: preserve-3d
}

.wojo.skewed.image img {
    border-radius: .625rem;
    -webkit-transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
    transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
    box-shadow: 25px 60px 125px -25px rgba(80, 102, 144, .1), 16px 40px 75px -40px rgba(0, 0, 0, .2)
}

.wojo.hero.image {
    min-height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1
}

.wojo.hero.image::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
    background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
    background-repeat: repeat-x;
    border-radius: .250rem;
    -webkit-transition: opacity 0.45s;
    transition: opacity 0.45s
}

.wojo.hero.image:hover::before {
    background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
    background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
    opacity: 0
}

figure.wojo {
    line-height: 1
}

.wojo.mime.images .image,
.wojo.mime.images img,
.wojo.mime.images svg,
.wojo.mime.image {
    padding: .5rem;
    text-align: center;
    display: inline-flex
}

.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: auto;
}

.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
}

.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: 500;
    letter-spacing: 3px;
    margin: 0;
    padding: .613rem 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;
    text-transform: uppercase
}

.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.08);
    border: 0;
    color: #fff
}

.wojo.label .icon {
    margin-right: 0.5rem
}

.wojo.right.label .icon {
    margin-left: 0.5rem;
    margin-right: 0
}

.wojo.icon.label .icon {
    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.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 2
}

.wojo.ribbon::before,
.wojo.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #AFB3B8
}

.wojo.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 1em 0;
    background-color: #C8CBCE;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center
}

.wojo.ribbon.top.left {
    top: -10px;
    left: -10px
}

.wojo.ribbon.top.left::before,
.wojo.ribbon.top.left::after {
    border-top-color: transparent;
    border-left-color: transparent
}

.wojo.ribbon.top.left::before {
    top: 0;
    right: 0
}

.wojo.ribbon.top.left::after {
    bottom: 0;
    left: 0
}

.wojo.ribbon.top.left span {
    right: -20px;
    top: 30px;
    transform: rotate(-45deg)
}

.wojo.ribbon.top.right {
    top: -10px;
    right: -10px
}

.wojo.ribbon.top-right::before,
.wojo.ribbon.top-right::after {
    border-top-color: transparent;
    border-right-color: transparent
}

.wojo.ribbon.top.right::before {
    top: 0;
    left: 0
}

.wojo.ribbon.top.right::after {
    bottom: 0;
    right: 0
}

.wojo.ribbon.top.right span {
    left: -20px;
    top: 30px;
    transform: rotate(45deg)
}

.wojo.primary.ribbon span {
    background-color: var(--primary-color);
    color: var(--primary-color-inverted)
}

.wojo.primary.ribbon::before,
.wojo.primary.ribbon::after {
    border: 5px solid var(--primary-color-active)
}

.wojo.secondary.ribbon span {
    background-color: var(--secondary-color);
    color: var(--secondary-color-inverted)
}

.wojo.secondary.ribbon::before,
.wojo.secondary.ribbon::after {
    border: 5px solid var(--secondary-color-inverted)
}

.wojo.positive.ribbon span {
    background-color: var(--positive-color);
    color: var(--positive-color-inverted)
}

.wojo.positive.ribbon::before,
.wojo.positive.ribbon::after {
    border: 5px solid var(--positive-color-inverted)
}

.wojo.negative.ribbon span {
    background-color: var(--negative-color);
    color: var(--negative-color-inverted)
}

.wojo.negative.ribbon::before,
.wojo.negative.ribbon::after {
    border: 5px solid var(--negative-color-inverted)
}

.wojo.alert.ribbon span {
    background-color: var(--alert-color);
    color: var(--alert-color-inverted)
}

.wojo.alert.ribbon::before,
.wojo.alert.ribbon::after {
    border: 5px solid var(--alert-color-inverted)
}

.wojo.indicating.label {
    position: absolute;
    border: 2px solid #fff;
    bottom: .5rem;
    left: 0;
    z-index: 2;
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    padding: 0;
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25)
}

.wojo.fitted.label {
    margin: 0
}

.wojo.badge {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    border-radius: .250rem;
    box-shadow: 0 23px 49px 0 var(--shadow-color);
    z-index: 1
}

.wojo.badge::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: -1.40rem;
    border: 1.5rem solid;
    z-index: -6;
    border-color: transparent transparent var(--primary-color)transparent
}

.wojo.badge .year {
    padding: 1.5rem;
    display: block;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1
}

.wojo.badge .text {
    display: block;
    padding: .750rem 1.5rem;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    font-size: .875rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    line-height: 1
}

.wojo.badge.primary {
    background-color: var(--primary-color)
}

.wojo.bookmark {
    position: absolute;
    top: 1rem;
    right: -1rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    font-size: .875rem;
    background: var(--primary-color);
    color: #fff
}

.wojo.bookmark::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -3rem;
    border: 1.5rem solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color)
}

.wojo.mini.label {
    font-size: 0.5rem;
    padding: .125rem .5rem
}

.wojo.tiny.label {
    font-size: 0.613rem;
    padding: .250rem .5rem
}

.wojo.tiny.empty.label {
    width: .5rem;
    height: .5rem;
    padding: 0
}

.wojo.small.label {
    font-size: 0.6875rem;
    padding: .25rem .5rem
}

.wojo.small.empty.label {
    width: .750rem;
    height: .750rem;
    padding: 0
}

.wojo.label {
    font-size: 0.7rem
}

.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.huge.initials.label {
    width: calc(4rem - 2px);
    height: calc(4rem - 2px);
    line-height: calc(4rem - 2px)
}

.wojo.large.label {
    font-size: 1rem
}

.wojo.gigantic.labels .label,
.wojo.gigantic.label {
    font-size: 2.5rem
}

.wojo.gigantic.initials.circular.label {
    min-width: 3rem;
    min-height: 3em;
    width: 3em;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.5rem;
    margin: 0
}

.wojo.circular.gigantic.labels .label,
.wojo.circular.gigantic.label {
    min-width: 3em;
    min-height: 3em;
    line-height: 1em;
    text-align: center;
    border-radius: 500rem
}

.wojo.form {
    position: relative;
    max-width: 100%
}

.wojo.form .field>label,
.wojo.form .field label.label {
    display: block;
    margin: 0em 0em 0.5rem 0em;
    color: var(--body-color);
    font-size: 1rem;
    font-weight: 700
}

.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: normal;
    vertical-align: middle;
    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 0 0 1px rgba(0, 0, 0, .1);
    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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
}

.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: calc(1.875rem + 1rem);
    border: 0px solid var(--grey-color-300);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
}

.wojo.form select option {
    font-size: .913rem
}

.wojo.form select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--dark-color)
}

.wojo.form select:-moz-focusring * {
    color: var(--dark-color);
    text-shadow: none
}

.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 {
    border: 0;
    -webkit-appearance: none;
    padding: .125rem 1rem !important;
    outline: var(--primary-color) solid 2px;
    outline-offset: 0px;
    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.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 {
    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
    }
}

.sp-container {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    z-index: 5000;
    overflow: hidden
}

.wojo.color.input .sp-add-on {
    width: 40px;
    border-radius: .250rem
}

.wojo.color.input .sp-add-on .sp-colorize {
    height: 100%;
    width: 100%;
    border-radius: .250rem
}

input.spectrum.with-add-on {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0
}

.sp-colorize-container {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}

.sp-container.sp-flat {
    position: relative
}

.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.sp-top {
    position: relative;
    width: 100%;
    display: inline-block
}

.sp-top-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.sp-color {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20px !important
}

.sp-hue {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 100%;
    left: initial !important
}

.sp-clear-enabled .sp-hue {
    top: 15%;
    height: 85%
}

.sp-fill {
    padding-top: 80%
}

.sp-sat,
.sp-val {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 28px !important
}

.sp-alpha-enabled .sp-alpha {
    display: block
}

.sp-alpha-handle {
    position: absolute;
    top: -3px;
    cursor: pointer;
    height: 16px;
    border-radius: 50%;
    width: 16px;
    margin-right: 5px;
    left: -2px;
    right: 0;
    background: #f9f9f9;
    box-shadow: 0 0 2px 0px #3a3a3a
}

.sp-alpha {
    display: none;
    position: absolute;
    bottom: -18px;
    right: 0;
    left: 0;
    height: 10px
}

.sp-alpha-inner {
    border-radius: 4px
}

.sp-clear {
    display: none
}

.sp-clear.sp-clear-display {
    background-position: center
}

.sp-clear-enabled .sp-clear {
    display: block;
    position: absolute;
    top: -5px;
    right: -2px;
    bottom: 0;
    cursor: pointer;
    left: initial;
    height: 1rem;
    width: 1rem
}

.sp-container,
.sp-replacer,
.sp-preview,
.sp-dragger,
.sp-slider,
.sp-alpha,
.sp-clear,
.sp-alpha-handle,
.sp-container.sp-dragging .sp-input,
.sp-container button {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none
}

.sp-container.sp-buttons-disabled .sp-button-container {
    display: none
}

.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none
}

.sp-palette-only .sp-picker-container {
    display: none
}

.sp-palette-disabled .sp-palette-container {
    display: none
}

.sp-initial-disabled .sp-initial {
    display: none
}

.sp-sat {
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0))
}

.sp-val {
    border-radius: 4px;
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0))
}

.sp-hue {
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)
}

.sp-1 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00')
}

.sp-2 {
    height: 16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00')
}

.sp-3 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff')
}

.sp-4 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff')
}

.sp-5 {
    height: 16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff')
}

.sp-6 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000')
}

.sp-hidden {
    display: none !important
}

.sp-cf:before,
.sp-cf:after {
    content: "";
    display: table
}

.sp-cf:after {
    clear: both
}

@media (max-device-width:480px) {
    .sp-color {
        right: 40%
    }

    .sp-hue {
        left: 63%
    }

    .sp-fill {
        padding-top: 60%
    }
}

.sp-dragger {
    border-radius: 5px;
    height: 10px;
    width: 10px;
    border: 1px solid #fff;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 3px;
    margin-top: 3px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2)
}

.sp-slider {
    position: absolute;
    top: 0;
    cursor: pointer;
    height: 16px;
    border-radius: 50%;
    width: 16px;
    left: -2px;
    background: #f9f9f9;
    box-shadow: 0 0 2px 0px #3a3a3a;
    margin-top: 8px
}

.sp-container {
    display: inline-flex;
    background-color: white;
    padding: 0;
    border-radius: 4px;
    color: black;
    box-shadow: 0 0 0 1px rgba(99, 114, 130, .16), 0 8px 16px rgba(27, 39, 51, .08)
}

.sp-container,
.sp-container button,
.sp-container input,
.sp-color,
.sp-hue,
.sp-clear {
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.sp-top {
    margin-bottom: 10px
}

.sp-color,
.sp-hue,
.sp-clear,
.sp-val,
.sp-sat {
    border-radius: 3px
}

.sp-input-container {
    margin-top: -5px
}

.sp-input-container.sp-cf,
.sp-initial.sp-thumb.sp-cf,
.sp-button-container.sp-cf {
    height: 25px
}

.sp-picker-container .sp-cf {
    margin-bottom: 10px
}

.sp-palette-row-initial>span:first-child {
    cursor: pointer
}

.sp-initial-disabled .sp-input-container {
    width: 100%
}

.sp-input {
    padding: 0px 5px !important;
    margin: 0;
    width: 100%;
    box-shadow: none !important;
    height: 100% !important;
    background: transparent;
    color: #3a3a3a;
    border-radius: 2px !important;
    border: 1px solid #e0e0e0 !important;
    text-align: center;
    font-family: monospace;
    font-size: inherit !important
}

.sp-input:focus {
    border: 1px solid orange
}

.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd
}

.sp-picker-container,
.sp-palette-container {
    position: relative;
    padding: 10px
}

.sp-picker-container {
    width: 200px;
    padding-bottom: 0
}

.sp-palette-container {
    border-right: solid 1px #ccc
}

.sp-palette-only .sp-palette-container {
    border: 0
}

.sp-palette .sp-thumb-el {
    display: block;
    position: relative;
    float: left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border: solid 2px transparent
}

.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange
}

.sp-thumb-el {
    position: relative
}

.sp-initial {
    float: left
}

.sp-initial span {
    width: 30px;
    height: 25px;
    border: none;
    display: block;
    float: left;
    margin: 0
}

.sp-initial .spe-thumb-el.sp-thumb-active {
    border-radius: 0 5px 5px 0
}

.sp-initial .spe-thumb-el {
    border-radius: 5px 0 0 5px
}

.sp-initial .sp-clear-display {
    background-position: center
}

.sp-button-container {
    float: right
}

.sp-palette-button-container {
    margin-top: 10px
}

.sp-replacer {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    color: #666;
    transition: border-color .3s;
    vertical-align: middle;
    width: 3rem;
    height: 1.5rem
}

.sp-replacer:hover,
.sp-replacer.sp-active {
    border: 1px solid #666;
    color: black
}

.sp-replacer.sp-disabled {
    cursor: default;
    border-color: silver;
    color: silver
}

.sp-dd {
    position: absolute;
    font-size: 10px;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 2px;
    line-height: 1.6rem;
    background-color: white
}

.sp-preview {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    z-index: 0
}

.sp-preview-inner {
    transition: background-color .2s
}

.sp-preview-inner.sp-clear-display {
    display: none
}

.sp-palette .sp-thumb-el {
    width: 1rem;
    height: 1rem;
    margin: 3px;
    border: none;
    border-radius: .250rem
}

.sp-palette-only .sp-thumb-el {
    width: 1.5rem;
    height: 1.5rem
}

.sp-container button {
    border-radius: 3px;
    border: none;
    background: transparent;
    line-height: 1;
    padding: 0 8px;
    height: 25px;
    text-transform: capitalize;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--grey-color-700);
    font-weight: 700
}

.sp-container button.sp-choose {
    background-color: var(--primary-color);
    color: #fff;
    margin-left: 5px
}

.sp-container button:hover {
    opacity: .8
}

.sp-container button.sp-palette-toggle {
    width: 100%;
    background-color: #f3f3f3;
    margin: 0
}

.sp-palette span:hover,
.sp-palette span.sp-thumb-active {
    border-color: #000
}

.sp-preview,
.sp-alpha,
.sp-thumb-el {
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
}

.sp-preview-inner,
.sp-alpha-inner,
.sp-thumb-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.sp-palette .sp-thumb-inner {
    border-radius: 3px;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)
}

.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 0 0 1px rgba(0, 0, 0, .1);
    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;
    line-height: normal;
    vertical-align: middle;
    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 {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
    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.transparent.input {
    background: rgba(255, 255, 255, 0.05)
}

.wojo.transparent.input input {
    color: rgba(255, 255, 255, 0.8)
}

.wojo.transparent.input input,
.wojo.form .wojo.transparent.input input,
.wojo.form .wojo.transparent.input textarea {
    background: rgba(255, 255, 255, 0.05)
}

.wojo.inline.input {
    display: inline-flex
}

.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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
}

.wojo.basic.input.focus {
    box-shadow: 0 1px 0 0 var(--primary-color)
}

.wojo.basic.input.focus input:focus {
    box-shadow: none
}

.wojo.transparent.input input:focus {
    color: rgba(255, 255, 255, 0.8)
}

.wojo.input ::-webkit-input-placeholder {
    color: var(--grey-color-500)
}

.wojo.input :-ms-input-placeholder {
    color: var(--grey-color-500)
}

.wojo.input ::-moz-placeholder {
    color: var(--grey-color-500)
}

.wojo.input :focus::-webkit-input-placeholder {
    color: var(--grey-color-700)
}

.wojo.input :focus:-ms-input-placeholder {
    color: var(--grey-color-700)
}

.wojo.input :focus::-moz-placeholder {
    color: var(--grey-color-700)
}

.wojo.input input:-webkit-autofill {
    box-shadow: 0px 0px 0px 100px #fff inset;
    border-color: #fff
}

.wojo.input input:-webkit-autofill:focus {
    box-shadow: 0px 0px 0px 100px #fff inset;
    border-color: #fff
}

.wojo.ajax.input {
    z-index: 2
}

.wojo.ajax.input .results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    background: #fff;
    margin-top: 1px;
    width: 100%;
    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.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: 1rem;
    height: calc(1.875rem + 1rem)
}

.wojo.form .wojo.large.input input,
.wojo.large.input input {
    line-height: 1rem;
    padding: 1.5rem;
    font-size: 1.5rem;
    height: calc(1.75rem + 1.5rem + 2px)
}

.wojo.form .wojo.large.basic.input input,
.wojo.large.basic.input input {
    padding: 1rem 0;
    font-weight: 300
}

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:not(.button) {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.list .item>.icon:not(.button) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-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 {
    margin-left: .5rem;
    font-weight: 700
}

.wojo.horizontal.list {
    display: inline-flex;
    flex-flow: row wrap
}

.wojo.horizontal.list>.item {
    margin-left: 1rem;
    align-items: center;
    margin-bottom: 0
}

.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);
    margin-bottom: 0
}

.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;
    margin-bottom: 0
}

.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):not(.divided)>.item:last-child,
.wojo.very.relaxed.list:not(.horizontal):not(.divided)>.item:last-child {
    margin-bottom: 0
}

.wojo.relaxed.list:not(.horizontal):not(.divided)>.item {
    margin-bottom: 1rem
}

.wojo.very.relaxed.list:not(.horizontal):not(.divided)>.item {
    margin-bottom: 2rem
}

.wojo.relaxed.divided.list:not(.horizontal)>.item:first-child,
.wojo.very.relaxed.divided.list:not(.horizontal)>.item:first-child {
    padding-top: 0
}

.wojo.relaxed.divided.list:not(.horizontal)>.item:last-child,
.wojo.very.relaxed.divided.list:not(.horizontal)>.item:last-child {
    padding-bottom: 0
}

.wojo.relaxed.divided.list:not(.horizontal)>.item {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.wojo.very.relaxed.divided.list:not(.horizontal):not(.divided)>.item {
    padding-bottom: 2rem;
    padding-top: 2rem
}

.wojo.relaxed.list.horizontal>.item {
    margin-left: .5rem;
    margin-right: .5rem
}

.wojo.relaxed.list.horizontal>.item:first-child {
    margin-left: 0
}

.wojo.relaxed.list.horizontal>.item:last-child {
    margin-right: 0
}

.wojo.very.relaxed.list.horizontal>.item {
    margin-left: 1rem;
    margin-right: 1rem
}

.wojo.list>.item.active {
    font-weight: 700;
    color: var(--dark-color)
}

.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
}

.wojo.horizontal.compact.list .item {
    padding-left: .5rem;
    margin-left: .5rem
}

.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.divided.horizontal.responsive.list,
    .wojo.celled.horizontal.responsive.list {
        flex-direction: column
    }

    .wojo.divided.horizontal.responsive.list>.item,
    .wojo.celled.horizontal.responsive.list>.item {
        padding-left: 0;
        margin-left: 0
    }

    .wojo.divided.horizontal.responsive.list>.item::before,
    .wojo.celled.horizontal.responsive.list>.item::before,
    .wojo.horizontal.celled.responsive.list>.item:last-child::after {
        display: none
    }
}

.wojo.step.list .item {
    position: relative;
    padding: 1rem 0 1rem 2.5rem;
    margin: 0
}

.wojo.step.list .item:first-child {
    padding: 0 0 1rem 2.5rem
}

.wojo.step.list .item:first-child::after {
    height: 50%;
    top: auto
}

.wojo.step.list .item:last-child::after {
    height: 50%;
    bottom: auto
}

.wojo.step.list .item::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -.3125rem;
    width: .0625rem;
    height: 100%;
    border-right: 1px solid var(--grey-color-300);
    margin: auto auto auto 0;
    content: "";
    visibility: visible
}

.wojo.step.list .item::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -.25rem;
    width: 2rem;
    height: .0625rem;
    border-top: 1px solid var(--grey-color-300);
    margin: auto auto auto 0;
    content: ""
}

.wojo.step.list .item>.content,
.wojo.indicating.list>.item .content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border: 1px solid var(--grey-color-300);
    border-radius: 0.25rem;
    padding: 2em
}

.wojo.step.list .item>.content>.description,
.wojo.indicating.list .item>.content>.description {
    padding-left: 2rem;
    margin: 0;
    font-weight: normal
}

.wojo.step.list .item>.content>* {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.step.list .item>.content .auto,
.wojo.indicating.list .item>.content.auto {
    flex: 0 0 auto;
    max-width: 100%
}

.wojo.indicating.list>.item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
    margin-bottom: 1.5rem
}

.wojo.indicating.list>.item::after {
    position: absolute;
    top: 32px;
    left: 11px;
    height: 100%;
    border-left: 2px dashed var(--primary-color);
    content: "";
    visibility: visible
}

.wojo.indicating.list>.item .content:first-child {
    margin-right: 1rem;
    margin-top: 0.25rem
}

.wojo.indicating.list>.item .content:first-child>span {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
    border-radius: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    color: #fff;
    font-weight: 500
}

.wojo.indicating.list>.item .content:first-child>span>.icon {
    line-height: 1.5rem
}

.wojo.indicating.list>.item .content {
    border: none;
    border-radius: 0;
    padding: 0
}

.wojo.indicating.list .item:last-child::after {
    border-left: 0
}

ul.vertical-menu li,
ul.vertical-menu,
ul.vertical-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

ul.vertical-menu li {
    border-top: 1px solid #e7eaf3;
    display: block;
    position: relative
}

ul.vertical-menu li a {
    display: inline-block;
    position: relative;
    padding: .5rem 0;
    color: var(--dark-color);
    font-weight: 500
}

ul.vertical-menu li a:hover,
ul.vertical-menu li a.active {
    color: var(--primary-color)
}

ul.vertical-menu li a>i.icon {
    margin-right: .5em
}

ul.vertical-menu li a span {
    display: inline-block;
    font-size: .750em;
    padding: .5em;
    margin-left: 1em;
    line-height: .75;
    border-radius: .188em;
    font-weight: 600
}

ul.vertical-menu .menu-submenu {
    display: none;
    top: 0
}

ul.vertical-menu .menu-submenu li {
    border-bottom: 0;
    border-top: 1px solid #e7eaf3;
    box-shadow: none;
    position: relative
}

ul.vertical-menu .menu-submenu li a {
    padding: 8px 25px
}

ul.vertical-menu .menu-submenu li ul li a {
    padding: 8px 45px
}

ul.vertical-menu .menu-submenu li ul li ul li {}

ul.vertical-menu .menu-submenu li ul li ul li a {
    padding: 8px 65px
}

ul.vertical-menu .icon.chevron.down {
    position: absolute;
    right: 0;
    display: block;
    cursor: pointer;
    padding: 13px 0
}

.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 23px 49px 0 var(--shadow-color)
}

.wojo.card>.content:not(.notes),
.wojo.segment>.content:not(.notes) {
    flex: 1 1 auto;
    padding: 2rem
}

.wojo.tall.cards .card>.content,
.wojo.tall.card>.content {
    padding: 8rem 2rem
}

.page_faq .wojo.tall.card>.content {
    padding: 2rem
}

.wojo.semi.tall.cards .card>.content,
.wojo.semi.tall.card>.content {
    padding: 4rem 2rem
}

.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 23px 49px 0 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),
.wojo.card>.content.gutters:not(.notes) {
    padding: 2rem 2rem 0 2rem
}

.wojo.basic.segment,
.wojo.basic.card,
.wojo.basic.cards>.card,
.wojo.cards>.basic.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,
.wojo.cards>.simple.card {
    box-shadow: none
}

.wojo.transparent.segment,
.wojo.transparent.card {
    background-color: transparent
}

.wojo.white.transparent.segment,
.wojo.white.transparent.card {
    background-color: rgba(255, 255, 255, 0.02)
}

.wojo.black.transparent.segment,
.wojo.black.transparent.card {
    background-color: rgba(0, 0, 0, 0.02)
}

.wojo.attached.segment,
.wojo.attached.card {
    margin: 0
}

.wojo.top.attached.segment,
.wojo.top.attached.card {
    margin-top: 0;
    margin-bottom: 1rem
}

.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
    margin-bottom: 0;
    margin-top: 1rem
}

.wojo.spaced.segment,
.wojo.spaced.card {
    margin: 2rem 0
}

.wojo.card.active,
.wojo.segment.active,
.wojo.cards .card.active {
    box-shadow: 0 20px 34px -16px var(--dark-color-shadow)
}

.wojo.card.circular,
.wojo.segment.circular {
    display: inline-flex;
    border-radius: 100%
}

.wojo.card.inline,
.wojo.segment.inline {
    display: inline-flex
}

.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 23px 49px 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.full.card {
    height: 100%
}

.wojo.full.card>.content {
    height: 100%;
    flex: 0 1 auto
}

.wojo.full.cards .card>.content.photo,
.wojo.full.card>.content.photo {
    padding: 0
}

.wojo.full.cards .card>.content.photo>img,
.wojo.full.card>.content.photo>img {
    border-radius: .250rem
}

.wojo.full.card>.footer {
    flex: 0 1 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.link.cards .card,
.wojo.link.card {
    z-index: 11;
    transition: all 0.5s ease;
    overflow: hidden
}

.wojo.link.cards .card:hover,
.wojo.link.card:hover {
    background: var(--secondary-color)
}

.wojo.link.cards .card:hover p,
.wojo.link.cards .card:hover h5,
.wojo.link.card:hover p,
.wojo.link.card:hover h5,
.wojo.link.card:hover h6 {
    color: #fff
}

.wojo.link.cards .card::before,
.wojo.link.cards .card::after,
.wojo.link.card::before,
.wojo.link.card::after {
    width: 250px;
    height: 250px;
    content: "";
    top: -15px;
    right: -100%;
    z-index: -11;
    border-radius: 50%;
    position: absolute;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: rgba(255, 255, 255, 0.08)
}

.wojo.link.cards .card:hover::before,
.wojo.link.card:hover::before {
    top: -30px;
    right: -150px
}

.wojo.link.cards .card:hover::after,
.wojo.link.card:hover::after {
    top: -50px;
    right: -130px;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

.wojo.plugin.segment {
    border: 0
}

.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:48em) and (max-width:64em) and (orientation :landscape) {

    .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))
    }
}









.wojo.table {
    width: 100%;
    background: #FFFFFF;
    margin: 0em;
    border: 1px solid #dddddd;
    box-shadow: none;
    border-radius: 0;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0px;
    color: #3D4051
}

.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: #F9FAFB;
    text-align: inherit;
    color: rgba(0, 0, 0, 0.87);
    padding: 1em 0.750em;
    vertical-align: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-transform: none;
    border-bottom: 1px solid rgba(34, 36, 38, 0.1);
    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.188rem 0em 0em 0em
}

.wojo.table thead tr:first-child>th:last-child {
    border-radius: 0em 0.188rem 0em 0em
}

.wojo.table thead tr:first-child>th:only-child {
    border-radius: 0.188rem 0.188rem 0em 0em
}

.wojo.table tfoot {
    box-shadow: none
}

.wojo.table tfoot th {
    cursor: auto;
    border-top: 1px solid #dddddd;
    background: #F9FAFB;
    text-align: inherit;
    color: rgba(0, 0, 0, 0.87);
    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.188rem
}

.wojo.table tfoot tr:first-child>th:last-child {
    border-radius: 0em 0em 0.188rem 0em
}

.wojo.table tfoot tr:first-child>th:only-child {
    border-radius: 0em 0em 0.188rem 0.188rem
}

.wojo.table tr td {
    border-top: 3px solid rgba(0, 0, 0, 0.05)
}

.wojo.table tr:first-child td {
    border-top: none
}

.wojo.table td {
    padding: 0.750em 0.750em;
    text-align: inherit;
    font-weight: 300
}

.wojo.table>.icon {
    vertical-align: baseline
}

.wojo.table>.icon:only-child {
    margin: 0em
}

.wojo.table.segment {
    padding: 0em
}

.wojo.table.segment:after {
    display: none
}

.wojo.table.segment.stacked:after {
    display: block
}

.wojo.table th .image,
.wojo.table th .image img,
.wojo.table td .image,
.wojo.table td .image img {
    max-width: none
}

.wojo.basic.table.dashed tr td {
    border-top: 2px dashed rgba(34, 36, 38, 0.1)
}

.wojo.basic.table.dashed {
    border-bottom: 2px dashed rgba(34, 36, 38, 0.1);
    border-radius: 0
}

.wojo.structured.table {
    border-collapse: collapse
}

.wojo.structured.table thead th {
    border-left: none;
    border-right: none
}

.wojo.structured.sorting.table thead th {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd
}

.wojo.structured.basic.table th {
    border-left: none;
    border-right: none
}

.wojo.structured.celled.table tr th,
.wojo.structured.celled.table tr td {
    border-left: 1px solid rgba(34, 36, 38, 0.1);
    border-right: 1px solid rgba(34, 36, 38, 0.1)
}

.wojo.definition.table {
    border: 0
}

.wojo.definition.table thead th {
    background: #fff
}

.wojo.definition.table thead:not(.full-width) th:first-child {
    pointer-events: none;
    background: transparent;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4)
}

.wojo.definition.table tfoot:not(.full-width) th:first-child {
    pointer-events: none;
    background: transparent;
    font-weight: rgba(0, 0, 0, 0.4);
    color: normal;
    box-shadow: 1px 1px 0px 1px #FFFFFF
}

.wojo.celled.definition.table thead:not(.full-width) th:first-child {
    box-shadow: 0px -1px 0px 1px #FFFFFF
}

.wojo.celled.definition.table tfoot:not(.full-width) th:first-child {
    box-shadow: 0px 1px 0px 1px #FFFFFF
}

.wojo.definition.table tr td:first-child {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.95);
    font-size: 0.688rem;
    text-align: center
}

.wojo.definition.table thead:not(.full-width) th:nth-child(2) {
    border-left: 1px solid #dddddd
}

.wojo.definition.table tfoot:not(.full-width) th:nth-child(2) {
    border-left: 1px solid #dddddd
}

.wojo.definition.table td:nth-child(2) {
    border-left: 1px solid #dddddd
}

.wojo.table th.collapsing,
.wojo.table td.collapsing {
    width: 1px;
    white-space: nowrap
}

.wojo.fixed.table {
    table-layout: fixed
}

.wojo.fixed.table th,
.wojo.fixed.table td {
    overflow: hidden;
    text-overflow: ellipsis
}

.wojo.striped.table>tr:nth-child(2n),
.wojo.striped.table tbody tr:nth-child(2n) {
    background-color: #F5F5F5
}

.wojo.rounded.table {
    border-radius: 0.188rem
}

.wojo.one.column.table td {
    width: 100%
}

.wojo.two.column.table td {
    width: 50%
}

.wojo.three.column.table td {
    width: 33.33333333%
}

.wojo.four.column.table td {
    width: 25%
}

.wojo.five.column.table td {
    width: 20%
}

.wojo.six.column.table td {
    width: 16.66666667%
}

.wojo.seven.column.table td {
    width: 14.28571429%
}

.wojo.eight.column.table td {
    width: 12.5%
}

.wojo.nine.column.table td {
    width: 11.11111111%
}

.wojo.ten.column.table td {
    width: 10%
}

.wojo.eleven.column.table td {
    width: 9.09090909%
}

.wojo.twelve.column.table td {
    width: 8.33333333%
}

.wojo.thirteen.column.table td {
    width: 7.69230769%
}

.wojo.fourteen.column.table td {
    width: 7.14285714%
}

.wojo.fifteen.column.table td {
    width: 6.66666667%
}

.wojo.sixteen.column.table td {
    width: 6.25%
}

.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.table[class*="left aligned"],
.wojo.table [class*="left aligned"] {
    text-align: left
}

.wojo.table[class*="center aligned"],
.wojo.table [class*="center aligned"] {
    text-align: center
}

.wojo.table[class*="right aligned"],
.wojo.table [class*="right aligned"] {
    text-align: right
}

.wojo.table[class*="top aligned"],
.wojo.table [class*="top aligned"] {
    vertical-align: top
}

.wojo.table[class*="middle aligned"],
.wojo.table [class*="middle aligned"] {
    vertical-align: middle
}

.wojo.table[class*="bottom aligned"],
.wojo.table [class*="bottom aligned"] {
    vertical-align: bottom
}

.wojo.sorting.table thead th {
    cursor: pointer;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.87)
}

.wojo.sorting.table thead th:first-child {
    border-left: none
}

.wojo.sorting.table thead th.sorted,
.wojo.sorting.table thead th.sorted:hover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.wojo.sorting.table thead th:not(.disabled):after {
    display: inline-block;
    width: 1em;
    opacity: 0.2;
    margin: 0 0 0 .5em;
    font-family: "WojoIcons";
    content: '\e915';
    font-style: normal;
    font-weight: 400;
    font-size: .750rem;
    text-decoration: inherit
}

.wojo.sorting.table thead th.asc:after {
    content: '\e145'
}

.wojo.sorting.table thead th.desc:after {
    content: '\e142'
}

.wojo.sorting.table th.disabled:after {
    content: ''
}

.wojo.sorting.table th.disabled:hover {
    cursor: auto;
    color: rgba(0, 0, 0, 0.95)
}

.wojo.sorting.table thead th:hover {
    color: #33BFC1
}

.wojo.sorting.table thead th.sorted {
    background-color: #F5F5F5;
    color: rgba(0, 0, 0, 0.95)
}

.wojo.sorting.table thead th.sorted:after {
    display: inline-block
}

.wojo.sorting.table thead th.sorted:hover {
    background-color: #F5F5F5;
    color: rgba(0, 0, 0, 0.95)
}

.wojo.table i.icon.handle {
    cursor: pointer
}

.wojo.table tr.sorting-row {
    background-color: #F7F7F7
}

.wojo.collapsing.table {
    width: auto
}

.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
}

.wojo.basic.table tr td {
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.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: #F9F9F9
}

.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.celled.table tr th,
.wojo.celled.table tr td {
    border-left: 1px solid rgba(34, 36, 38, 0.1)
}

.wojo.celled.table tr th:first-child,
.wojo.celled.table tr td:first-child {
    border-left: none
}

.wojo.padded.table th {
    padding-left: 1em;
    padding-right: 1em
}

.wojo.padded.table th,
.wojo.padded.table td {
    padding: 1em 1em
}

.wojo[class*="very padded"].table th {
    padding-left: 1.5em;
    padding-right: 1.5em
}

.wojo[class*="very padded"].table td {
    padding: 1.5em 1.5em
}

.wojo.compact.table th {
    padding-left: 0.7em;
    padding-right: 0.7em
}

.wojo.compact.table td {
    padding: 0.5em 0.7em
}

.wojo[class*="very compact"].table th {
    padding-left: 0.6em;
    padding-right: 0.6em
}

.wojo[class*="very compact"].table td {
    padding: 0.4em 0.6em
}

.wojo.compact.fitted.table td {
    padding: 0.2em 0.4em
}

.wojo.table[class*="left aligned"],
.wojo.table [class*="left aligned"] {
    text-align: left
}

.wojo.table[class*="center aligned"],
.wojo.table [class*="center aligned"] {
    text-align: center
}

.wojo.table[class*="right aligned"],
.wojo.table [class*="right aligned"] {
    text-align: right
}

.wojo.table[class*="top aligned"],
.wojo.table [class*="top aligned"] {
    vertical-align: top
}

.wojo.table[class*="middle aligned"],
.wojo.table [class*="middle aligned"] {
    vertical-align: middle
}

.wojo.table[class*="bottom aligned"],
.wojo.table [class*="bottom aligned"] {
    vertical-align: bottom
}

.wojo.small.table {
    font-size: 0.9em
}

.wojo.table {
    font-size: 1em
}

.wojo.large.table {
    font-size: 1.1em
}

table.bt thead {
    display: none
}

table.bt tbody td {
    border: none;
    display: block;
    vertical-align: middle;
    text-align: left
}

table.bt tbody td:before {
    content: attr(data-th) ":";
    font-weight: 600;
    font-size: .875em;
    width: 8em;
    display: inline-block;
    color: rgba(34, 36, 38, 1)
}

table.bt tbody td.bt-hide {
    display: none
}

table.bt tbody td .bt-content {
    vertical-align: middle;
    display: inline-block
}

.bt-wrapper.active {
    max-height: 610px;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

@media screen and (max-width:769px) {
    .wojo.table tr td {
        border-top: 1px solid rgba(34, 36, 38, 0)
    }

    .wojo.basic.table tbody tr {
        box-shadow: 0 2px 0 0 #B4C1C7
    }

    .wojo.table th.collapsing,
    .wojo.table td.collapsing {
        width: auto;
        white-space: normal
    }

    .wojo.table[class*="center aligned"],
    .wojo.table [class*="center aligned"],
    .wojo.table[class*="tight aligned"],
    .wojo.table [class*="tight aligned"] {
        text-align: left
    }
}

.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-wdropdown] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

[data-wdropdown]>.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.statistic {
    display: inline-flex;
    flex-direction: column;
    margin: 1em 0em;
    max-width: auto
}

.wojo.statistic+.wojo.statistic {
    margin: 0em 0em 0em 1.5em
}

.wojo.statistic:first-child {
    margin-top: 0em
}

.wojo.statistic:last-child {
    margin-bottom: 0em
}

.wojo.statistics {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.wojo.statistics>.statistic {
    display: inline-flex;
    flex: 0 1 auto;
    flex-direction: column;
    margin: 0em 1.5em 2em;
    max-width: auto
}

.wojo.statistics {
    display: flex;
    margin: 1em -1.5em -2em
}

.wojo.statistics:after {
    display: block;
    content: ' ';
    height: 0px;
    clear: both;
    overflow: hidden;
    visibility: hidden
}

.wojo.statistics:first-child {
    margin-top: 0em
}

.wojo.statistics:last-child {
    margin-bottom: 0em
}

.wojo.statistics .statistic>.value,
.wojo.statistic>.value {
    font-weight: 300;
    font-size: 4rem;
    line-height: 2;
    color: var(--dark-color);
    text-transform: uppercase;
    text-align: center
}

.wojo.statistics .statistic>.label,
.wojo.statistic>.label {
    font-weight: 500;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
    text-transform: uppercase;
    text-align: center
}

.wojo.statistics .statistic>.label~.value,
.wojo.statistic>.label~.value {
    margin-top: 0rem
}

.wojo.statistics .statistic>.value~.label,
.wojo.statistic>.value~.label {
    margin-top: 0rem
}

.wojo.statistics .statistic>.value .icon,
.wojo.statistic>.value .icon {
    opacity: 1;
    width: auto;
    margin: 0em
}

.wojo.statistics .statistic>.text.value,
.wojo.statistic>.text.value {
    line-height: 1em;
    min-height: 2em;
    font-weight: 600;
    text-align: center
}

.wojo.statistics .statistic>.text.value+.label,
.wojo.statistic>.text.value+.label {
    text-align: center
}

.wojo.statistics .statistic>.value img,
.wojo.statistic>.value img {
    max-height: 3rem;
    vertical-align: baseline
}

.wojo.horizontal.statistic {
    flex-direction: row;
    align-items: center
}

.wojo.horizontal.statistics {
    flex-direction: column;
    margin: 0em;
    max-width: none
}

.wojo.horizontal.statistics .statistic {
    flex-direction: row;
    align-items: center;
    max-width: none;
    margin: 1em 0em
}

.wojo.horizontal.statistic>.text.value,
.wojo.horizontal.statistics>.statistic>.text.value {
    min-height: 0em
}

.wojo.horizontal.statistics .statistic>.value .icon,
.wojo.horizontal.statistic>.value .icon {
    width: 1.18em
}

.wojo.horizontal.statistics .statistic>.value,
.wojo.horizontal.statistic>.value {
    display: inline-block;
    vertical-align: middle
}

.wojo.horizontal.statistics .statistic>.label,
.wojo.horizontal.statistic>.label {
    display: inline-block;
    vertical-align: middle;
    margin: 0em 0em 0em 0.75em
}

.wojo.red.statistics .statistic>.value,
.wojo.statistics .red.statistic>.value,
.wojo.red.statistic>.value {
    color: #DB2828
}

.wojo.orange.statistics .statistic>.value,
.wojo.statistics .orange.statistic>.value,
.wojo.orange.statistic>.value {
    color: #F2711C
}

.wojo.yellow.statistics .statistic>.value,
.wojo.statistics .yellow.statistic>.value,
.wojo.yellow.statistic>.value {
    color: #FBBD08
}

.wojo.olive.statistics .statistic>.value,
.wojo.statistics .olive.statistic>.value,
.wojo.olive.statistic>.value {
    color: #B5CC18
}

.wojo.green.statistics .statistic>.value,
.wojo.statistics .green.statistic>.value,
.wojo.green.statistic>.value {
    color: #21BA45
}

.wojo.teal.statistics .statistic>.value,
.wojo.statistics .teal.statistic>.value,
.wojo.teal.statistic>.value {
    color: #00B5AD
}

.wojo.blue.statistics .statistic>.value,
.wojo.statistics .blue.statistic>.value,
.wojo.blue.statistic>.value {
    color: #2185D0
}

.wojo.violet.statistics .statistic>.value,
.wojo.statistics .violet.statistic>.value,
.wojo.violet.statistic>.value {
    color: #6435C9
}

.wojo.purple.statistics .statistic>.value,
.wojo.statistics .purple.statistic>.value,
.wojo.purple.statistic>.value {
    color: #A333C8
}

.wojo.pink.statistics .statistic>.value,
.wojo.statistics .pink.statistic>.value,
.wojo.pink.statistic>.value {
    color: #E03997
}

.wojo.brown.statistics .statistic>.value,
.wojo.statistics .brown.statistic>.value,
.wojo.brown.statistic>.value {
    color: #A5673F
}

.wojo.grey.statistics .statistic>.value,
.wojo.statistics .grey.statistic>.value,
.wojo.grey.statistic>.value {
    color: #767676
}

.wojo.inverted.statistics .statistic>.value,
.wojo.inverted.statistic .value {
    color: #FFFFFF
}

.wojo.inverted.statistics .statistic>.label,
.wojo.inverted.statistic .label {
    color: rgba(255, 255, 255, 0.9)
}

.wojo.inverted.red.statistics .statistic>.value,
.wojo.statistics .inverted.red.statistic>.value,
.wojo.inverted.red.statistic>.value {
    color: #FF695E
}

.wojo.inverted.orange.statistics .statistic>.value,
.wojo.statistics .inverted.orange.statistic>.value,
.wojo.inverted.orange.statistic>.value {
    color: #FF851B
}

.wojo.inverted.yellow.statistics .statistic>.value,
.wojo.statistics .inverted.yellow.statistic>.value,
.wojo.inverted.yellow.statistic>.value {
    color: #FFE21F
}

.wojo.inverted.olive.statistics .statistic>.value,
.wojo.statistics .inverted.olive.statistic>.value,
.wojo.inverted.olive.statistic>.value {
    color: #D9E778
}

.wojo.inverted.green.statistics .statistic>.value,
.wojo.statistics .inverted.green.statistic>.value,
.wojo.inverted.green.statistic>.value {
    color: #2ECC40
}

.wojo.inverted.teal.statistics .statistic>.value,
.wojo.statistics .inverted.teal.statistic>.value,
.wojo.inverted.teal.statistic>.value {
    color: #6DFFFF
}

.wojo.inverted.blue.statistics .statistic>.value,
.wojo.statistics .inverted.blue.statistic>.value,
.wojo.inverted.blue.statistic>.value {
    color: #54C8FF
}

.wojo.inverted.violet.statistics .statistic>.value,
.wojo.statistics .inverted.violet.statistic>.value,
.wojo.inverted.violet.statistic>.value {
    color: #A291FB
}

.wojo.inverted.purple.statistics .statistic>.value,
.wojo.statistics .inverted.purple.statistic>.value,
.wojo.inverted.purple.statistic>.value {
    color: #DC73FF
}

.wojo.inverted.pink.statistics .statistic>.value,
.wojo.statistics .inverted.pink.statistic>.value,
.wojo.inverted.pink.statistic>.value {
    color: #FF8EDF
}

.wojo.inverted.brown.statistics .statistic>.value,
.wojo.statistics .inverted.brown.statistic>.value,
.wojo.inverted.brown.statistic>.value {
    color: #D67C1C
}

.wojo.inverted.grey.statistics .statistic>.value,
.wojo.statistics .inverted.grey.statistic>.value,
.wojo.inverted.grey.statistic>.value {
    color: #DCDDDE
}

.wojo[class*="left floated"].statistic {
    float: left;
    margin: 0em 2em 1em 0em
}

.wojo[class*="right floated"].statistic {
    float: right;
    margin: 0em 0em 1em 2em
}

.wojo.floated.statistic:last-child {
    margin-bottom: 0em
}

.wojo.mini.statistics .statistic>.value,
.wojo.mini.statistic>.value {
    font-size: 1.5rem
}

.wojo.mini.horizontal.statistics .statistic>.value,
.wojo.mini.horizontal.statistic>.value {
    font-size: 1.5rem
}

.wojo.mini.statistics .statistic>.text.value,
.wojo.mini.statistic>.text.value {
    font-size: 1rem
}

.wojo.tiny.statistics .statistic>.value,
.wojo.tiny.statistic>.value {
    font-size: 2rem
}

.wojo.tiny.horizontal.statistics .statistic>.value,
.wojo.tiny.horizontal.statistic>.value {
    font-size: 2rem
}

.wojo.tiny.statistics .statistic>.text.value,
.wojo.tiny.statistic>.text.value {
    font-size: 1rem
}

.wojo.small.statistics .statistic>.value,
.wojo.small.statistic>.value {
    font-size: 3rem
}

.wojo.small.horizontal.statistics .statistic>.value,
.wojo.small.horizontal.statistic>.value {
    font-size: 2rem
}

.wojo.small.statistics .statistic>.text.value,
.wojo.small.statistic>.text.value {
    font-size: 1rem
}

.wojo.statistics .statistic>.value,
.wojo.statistic>.value {
    font-size: 4rem
}

.wojo.horizontal.statistics .statistic>.value,
.wojo.horizontal.statistic>.value {
    font-size: 3rem
}

.wojo.statistics .statistic>.text.value,
.wojo.statistic>.text.value {
    font-size: 2rem
}

.wojo.large.statistics .statistic>.value,
.wojo.large.statistic>.value {
    font-size: 5rem
}

.wojo.large.horizontal.statistics .statistic>.value,
.wojo.large.horizontal.statistic>.value {
    font-size: 4rem
}

.wojo.large.statistics .statistic>.text.value,
.wojo.large.statistic>.text.value {
    font-size: 2.5rem
}

.wojo.huge.statistics .statistic>.value,
.wojo.huge.statistic>.value {
    font-size: 6rem
}

.wojo.huge.horizontal.statistics .statistic>.value,
.wojo.huge.horizontal.statistic>.value {
    font-size: 5rem
}

.wojo.huge.statistics .statistic>.text.value,
.wojo.huge.statistic>.text.value {
    font-size: 2.5rem
}

.wojo.calendar.popup,
.wojo.mini.calendar.popup {
    max-width: none;
    padding: 0;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: .875rem
}

.wojo.calendar .wojo.popup::before {
    background: #F9FAFB
}

.wojo.calendar .wojo.popup.top::before {
    background: #fff
}

.wojo.calendar .calendar:focus {
    outline: 0
}

.wojo.calendar .wojo.table.year,
.wojo.calendar .wojo.table.month,
.wojo.calendar .wojo.table.minute {
    min-width: 15em
}

.wojo.calendar .wojo.table.day {
    min-width: 18em
}

.wojo.calendar .wojo.table.hour {
    min-width: 20em
}

.wojo.calendar .wojo.table tr th,
.wojo.calendar .wojo.table tr td {
    padding: 0.5em;
    white-space: nowrap
}

.wojo.calendar .wojo.table tr th {
    border-left: none
}

.wojo.calendar .wojo.table tr th .icon {
    margin: 0
}

.wojo.calendar .wojo.table tr th .icon {
    margin: 0
}

.wojo.calendar .wojo.table tr:first-child th {
    position: relative;
    padding-left: 0;
    padding-right: 0
}

.wojo.calendar .wojo.table.day tr:first-child th {
    border: none
}

.wojo.calendar .wojo.table.day tr:nth-child(2) th {
    padding-top: 0.2em;
    padding-bottom: 0.3em
}

.wojo.calendar .wojo.table tr td {
    padding-left: 0.1em;
    padding-right: 0.1em
}

.wojo.calendar .wojo.table tr .link {
    cursor: pointer
}

.wojo.calendar .wojo.table tr .prev.link {
    width: 14.28571429%;
    position: absolute;
    left: 0
}

.wojo.calendar .wojo.table tr .next.link {
    width: 14.28571429%;
    position: absolute;
    right: 0
}

.wojo.calendar .wojo.table tr .disabled {
    pointer-events: none;
    color: rgba(40, 40, 40, 0.3)
}

.wojo.calendar .wojo.table tr td.today {
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.1)
}

.wojo.calendar .wojo.table tr td.range {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
    box-shadow: none
}

.wojo.calendar .wojo.table.inverted tr td.range {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: none
}

.wojo.calendar .calendar:focus .wojo.table tbody tr td.focus,
.wojo.calendar .calendar.active .wojo.table tbody tr td.focus {
    box-shadow: inset 0 0 0 1px #33BFC1
}

.wojo.calendar .wojo.table tbody tr td.active {
    background: #33BFC1;
    color: #fff
}

.wojo.calendar .calendar:focus .wojo.table.inverted tbody tr td.focus,
.wojo.calendar .calendar.active .wojo.table.inverted tbody tr td.focus {
    box-shadow: inset 0 0 0 1px #33BFC1
}

.wojo.calendar .header {
    display: table;
    table-layout: fixed;
    width: 100%;
    background: #fff;
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)
}

.wojo.calendar .header div {
    width: 14.28% !important;
    display: table-cell;
    box-sizing: border-box;
    position: relative;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    padding: .5em;
    font-size: .875em
}

.wojo.calendar .content {
    display: table;
    table-layout: fixed;
    width: 100%;
    overflow: hidden
}

.wojo.calendar .weeks {
    display: table-row;
    width: 100%
}

.wojo.calendar .weeks .cell {
    width: 14.28% !important;
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
    font-weight: 500;
    color: inherit;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: .25s;
    padding: 0;
    text-decoration: none
}

.wojo.calendar .weeks .day:before {
    content: " ";
    display: block;
    padding-top: 100%;
    float: left
}

.wojo.calendar .weeks .empty {
    background-color: #FDFDFD
}

.wojo.calendar .weeks .date {
    position: absolute;
    line-height: 1em;
    text-align: right;
    top: 2px;
    right: 5px;
    font-size: .750em;
    color: rgba(0, 0, 0, 0.5)
}

.wojo.calendar .weeks .day.today {
    background: #fffde7
}

.wojo.calendar .weeks .day.today .date {
    color: #E2747E
}

.wojo.calendar .progress {
    position: relative;
    text-align: center;
    line-height: 0;
    max-width: 20px;
    margin: 0 auto;
    padding-top: 30%
}

.wojo.calendar .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.calendar .indicator:hover {
    cursor: pointer
}

.wojo.calendar .list {
    background: rgba(255, 255, 255, 0.85);
    overflow: auto;
    position: absolute;
    top: 38px;
    width: 100%;
    height: calc(100% - 40px);
    display: none
}

.wojo.calendar .list .event {
    display: block;
    padding: .5em .875em;
    border-radius: .188em;
    margin-bottom: .5em;
    position: relative
}

.wojo.calendar .list .event p {
    font-size: .875em;
    color: rgba(0, 0, 0, 0.65)
}

.wojo.calendar .list .event>a {
    font-size: .875em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75)
}

.wojo.calendar .list .event>a:hover {
    color: rgba(255, 255, 255, 1)
}

.wojo.calendar .list .event .time {
    font-weight: 400;
    position: absolute;
    right: 0.875em;
    bottom: .5em;
    color: rgba(255, 255, 255, 0.75)
}

.wojo.calendar .list .event .time .start,
.wojo.calendar .list .event .time .end {
    font-size: .750em;
    display: inline-block
}

.wojo.calendar .list .event .time .end:not(:empty):before {
    content: '-';
    padding: 0 2px
}

.wojo.calendar .list .date {
    width: 4.5em;
    position: absolute;
    left: 0;
    top: 0.875em;
    text-align: center;
    font-size: .875em;
    font-weight: 500;
    line-height: 1.2em
}

.wojo.calendar .list .date>span {
    display: block
}

.wojo.calendar .list .today .date {
    color: #E2747E
}

.wojo.calendar .event-item {
    position: relative;
    padding: .875em 0.875em .5em 4.5em;
    display: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left
}

.wojo.calendar .event-item:after {
    content: '-/-';
    padding: .5em .875em;
    display: block;
    margin-bottom: .5em
}

.wojo.calendar .event-item .remove {
    top: 1em;
    position: absolute;
    right: 1.5em;
    color: #fff
}

.wojo.calendar .list .active {
    display: block
}

.wojo.calendar .list .active .event:last-child {
    margin-bottom: 0
}

.wojo.calendar .list .active:after {
    display: none !important
}

@media (min-width:400px) {
    .wojo.calendar .weeks .date {
        top: 5px;
        left: 5px;
        font-size: .785em
    }
}

@media (min-width:600px) {
    .wojo.calendar .weeks .day {
        padding-top: 1.5em;
        position: relative
    }

    .wojo.calendar .weeks .day:before {
        padding-top: 77%
    }

    .wojo.calendar .progress {
        width: auto;
        max-width: none
    }

    .wojo.calendar .progress {
        padding: 0
    }

    .wojo.calendar .indicator {
        font-weight: 500;
        text-align: left;
        display: block;
        margin: 0 0 1px 0;
        width: auto;
        font-size: 0.688em;
        padding: 1em;
        border-radius: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box
    }

    .wojo.calendar .indicator.start {
        border-radius: 3px 0 0 3px
    }

    .wojo.calendar .indicator.end {
        border-radius: 0 3px 3px 0
    }
}

.wojo.message {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border-radius: .250rem;
    margin-bottom: 1rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 23px 49px 0 var(--shadow-color)
}

.wojo.message .header {
    font-size: 1rem;
    font-weight: 700
}

.wojo.icon.message>.icon:not(.close) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    margin-right: 1rem
}

.wojo.icon.message>.icon:not(.close) {
    width: auto
}

.wojo.icon.message>.content {
    flex: 1 1 0px
}

.wojo.icon.message>.content.auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap
}

.wojo.message>.close.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: .750em;
    right: .5rem;
    opacity: .7;
    transition: opacity .1s ease
}

.wojo.icon.message>.wojo.image {
    margin-right: 1.5rem
}

.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.info.message {
    background-color: var(--info-color);
    border: 1px solid var(--info-color);
    color: var(--info-color-inverted)
}

.wojo.info.inverted.message {
    background-color: var(--info-color-inverted);
    border: 1px solid var(--info-color);
    color: var(--info-color)
}

.wojo.alert.message {
    background-color: var(--alert-color);
    border: 1px solid var(--alert-color);
    color: var(--alert-color-inverted)
}

.wojo.alert.inverted.message {
    background-color: var(--alert-color-inverted);
    border: 1px solid var(--alert-color);
    color: var(--alert-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;
    color: #fff
}

.wojo.notice .flag {
    margin-left: .5rem
}

.wojo.notice .item b {
    margin-right: .5rem
}

.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 {
    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.fitted.message {
    padding: 0
}

.wojo.basic.message {
    border: 0
}

.wojo.simple.message {
    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.relaxed.message {
    padding: 2rem
}

.wojo.small.message {
    font-size: .875rem
}

.wojo.message {
    font-size: 1rem
}

.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%
    }
}

.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.progress.relaxed {
    margin-bottom: 2rem
}

.wojo.tiny.progress {
    height: .25rem
}

.wojo.mini.progress {
    height: .5rem
}

.wojo.small.progress {
    height: 1rem
}

.wojo.feed {
    margin: 1em 0em
}

.wojo.feed:first-child {
    margin-top: 0em
}

.wojo.feed:last-child {
    margin-bottom: 0em
}

.wojo.feed>.event {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.21428571rem 0em;
    margin: 0em;
    background: none;
    border-top: none
}

.wojo.feed>.event:first-child {
    border-top: 0px;
    padding-top: 0em
}

.wojo.feed>.event:last-child {
    padding-bottom: 0em
}

.wojo.feed>.event>.label {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: 7rem;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    text-align: left
}

.wojo.feed>.event>.label .icon {
    opacity: 1;
    font-size: 1.5em;
    width: 100%;
    padding: 0.25em;
    background: none;
    border: none;
    border-radius: none;
    color: rgba(0, 0, 0, 0.6)
}

.wojo.feed>.event>.label img {
    width: 100%;
    height: auto;
    border-radius: 500rem
}

.wojo.feed>.event>.label+.content {
    margin: 0 0 1rem 1.5rem
}

.wojo.feed>.event>.content {
    display: block;
    flex: 1 1 auto;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    text-align: left;
    word-wrap: break-word
}

.wojo.feed>.event:last-child>.content {
    padding-bottom: 0em
}

.wojo.feed>.event>.content a {
    cursor: pointer
}

.wojo.feed>.event>.content .date {
    margin: -0.5rem 0em 0em;
    padding: 0em;
    font-weight: normal;
    font-size: 1em;
    font-style: normal;
    color: rgba(0, 0, 0, 0.4)
}

.wojo.feed>.event>.content .summary {
    margin: 0em;
    font-size: 1em;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87)
}

.wojo.feed>.event>.content .summary img {
    display: inline-block;
    width: auto;
    height: 10em;
    margin: -0.25em 0.25em 0em 0em;
    border-radius: 0.25em;
    vertical-align: middle
}

.wojo.feed>.event>.content .user {
    display: inline-block;
    font-weight: bold;
    margin-right: 0em;
    vertical-align: baseline
}

.wojo.feed>.event>.content .user img {
    margin: -0.25em 0.25em 0em 0em;
    width: auto;
    height: 10em;
    vertical-align: middle
}

.wojo.feed>.event>.content .summary>.date {
    display: inline-block;
    float: none;
    font-weight: 400;
    font-size: 0.875em;
    font-style: normal;
    margin: 0em 0em 0em 0.5em;
    padding: 0em;
    color: rgba(0, 0, 0, 0.4);
    vertical-align: middle
}

.wojo.feed>.event>.content .extra {
    margin: 0.5em 0em 0em;
    background: none;
    padding: 0em;
    color: rgba(0, 0, 0, 0.87)
}

.wojo.feed>.event>.content .extra.images img {
    display: inline-block;
    margin: 0em 0.25em 0em 0em;
    width: 6em
}

.wojo.feed>.event>.content .extra.text {
    padding: 0em;
    border-left: none;
    font-size: .875em;
    max-width: auto;
    line-height: 1.4285em
}

.wojo.feed>.event>.content .meta {
    display: inline-block;
    font-size: 0.85714286em;
    margin: 0.5em 0em 0em;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0em;
    color: rgba(0, 0, 0, 0.6)
}

.wojo.feed>.event>.content .meta>* {
    position: relative;
    margin-left: 0.75em
}

.wojo.feed>.event>.content .meta>*:after {
    content: '';
    color: rgba(0, 0, 0, 0.2);
    top: 0em;
    left: -1em;
    opacity: 1;
    position: absolute;
    vertical-align: top
}

.wojo.feed>.event>.content .meta .like {
    color: '';
    transition: 0.2s color ease
}

.wojo.feed>.event>.content .meta .like:hover .icon {
    color: #FF2733
}

.wojo.feed>.event>.content .meta .active.like .icon {
    color: #EF404A
}

.wojo.feed>.event>.content .meta> :first-child {
    margin-left: 0em
}

.wojo.feed>.event>.content .meta> :first-child::after {
    display: none
}

.wojo.feed>.event>.content .meta a,
.wojo.feed>.event>.content .meta>.icon {
    cursor: pointer;
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    transition: color 0.1s ease
}

.wojo.feed>.event>.content .meta a:hover,
.wojo.feed>.event>.content .meta a:hover .icon,
.wojo.feed>.event>.content .meta>.icon:hover {
    color: rgba(0, 0, 0, 0.95)
}

.wojo.divided.feed>.event {
    border-top: 1px solid #e7eaf3;
    padding-bottom: 1em;
    padding-top: 1em
}

.wojo.divided.feed>.event:first-child {
    border-top: none;
    padding-top: 0
}

.wojo.small.feed {
    font-size: 0.875rem
}

.wojo.feed {
    font-size: 1rem
}

.wojo.large.feed {
    font-size: 1.25
}

.wojo.comments {
    margin: 1.5em 0;
    max-width: 800px
}

.wojo.comments .comment {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    position: relative;
    background-image: none;
    margin: 2rem 0 0;
    padding: 1rem;
    border: none;
    border-top: none;
    border-radius: .250rem;
    box-shadow: 0 23px 49px 0 var(--shadow-color)
}

.wojo.comments .comment:first-child {
    margin-top: 0
}

.wojo.comments .comment .comments {
    margin: 0 0 0.5rem 0.5rem;
    padding: 1rem 0 1rem 1rem
}

.wojo.comments .comment .comments:before {
    position: absolute;
    top: 0px;
    left: 0px
}

.wojo.comments .comment .comments .comment {
    border: none;
    border-top: none;
    background: none
}

.wojo.comments .comment .avatar {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
    width: 2.5rem
}

.wojo.comments .comment img.avatar,
.wojo.comments .comment .avatar img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.wojo.comments .comment>.content {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.comments .comment>.avatar~.content {
    margin-left: 2rem
}

.wojo.comments .comment .author {
    font-size: 1em;
    font-weight: 500
}

.wojo.comments .comment a.author {
    cursor: pointer
}

.wojo.comments .comment a.author:hover {
    color: var(--primary-color-hover)
}

.wojo.comments .comment .metadata {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: .875rem;
    vertical-align: middle
}

.wojo.comments .comment .metadata a.delete {
    margin-left: 1rem;
    vertical-align: middle
}

.wojo.comments .comment .metadata>* {
    display: inline-block;
    margin: 0 .5rem 0 0
}

.wojo.comments .comment .metadata> :last-child {
    margin-right: 0
}

.wojo.comments .comment .text:not(.wojo) {
    margin: .25rem 0 .5rem;
    font-size: 1rem;
    word-wrap: break-word;
    line-height: 1.3;
    font-weight: 300
}

.wojo.comments .comment .actions {
    font-size: .750rem;
    margin-top: 0
}

.wojo.comments .comment .actions a {
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: .875rem
}

.wojo.comments .comment .actions a:last-child {
    margin-right: 0
}

.wojo.comments .comment .actions a.active,
.wojo.comments .comment .actions a:hover {
    color: var(--dark-color)
}

.wojo.collapsed.comments,
.wojo.comments .collapsed.comments,
.wojo.comments .collapsed.comment {
    display: none
}

.wojo.threaded.comments .comment .comments {
    margin: -1.5rem 0 -1em 1.25rem;
    padding: 3rem 0 2rem 2.25rem;
    box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15)
}

.wojo.minimal.comments .comment .actions {
    opacity: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: auto;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.wojo.minimal.comments .comment>.content:hover>.actions {
    opacity: 1
}

.wojo.mini.comments {
    font-size: 0.750rem
}

.wojo.tiny.comments {
    font-size: 0.875rem
}

.wojo.small.comments {
    font-size: 0.913rem
}

.wojo.comments {
    font-size: 1rem
}

.wojo.large.comments {
    font-size: 1.25rem
}

.wojo.big.comments {
    font-size: 1.5rem
}

[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.063rem;
    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.063rem;
    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.063rem;
    margin-bottom: 0.125rem
}

[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.063rem;
    margin-bottom: 0.125rem
}

[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.063rem;
    margin-top: 0.125rem
}

[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.063rem;
    margin-top: 0.125rem
}

[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.125rem;
    margin-top: 0.063rem
}

[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.125rem;
    margin-right: -0.063rem
}

[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.063rem;
    margin-left: 0.125rem
}

[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: var(--dark-color);
    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: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)
}

.jqsfield {
    padding: .250rem;
    text-align: left
}

.morris-hover {
    position: absolute;
    z-index: 1000
}

.morris-hover.morris-default-style {
    background-color: var(--dark-color);
    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: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)
}

.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
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.redactor-animate-hide {
    display: none !important
}

.redactor-fadeIn {
    opacity: 0;
    animation: fadeIn .5s ease-in-out
}

.redactor-fadeOut {
    opacity: 1;
    animation: fadeOut .5s ease-in-out
}

[class^="re-icon-"],
[class*=" re-icon-"] {
    font-family: 'WojoIcons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    backface-visibility: hidden
}

.re-icon-aligncenter:before {
    content: "\e002"
}

.re-icon-alignment:before,
.re-icon-alignleft:before {
    content: "\ea8e"
}

.re-icon-alignright:before {
    content: "\ea91"
}

.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: "\e91a"
}

.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;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 3px;
    box-shadow: none
}

.redactor-box.redactor-inline {
    position: static
}

.redactor-focus.redactor-styles-on,
.redactor-focus:focus.redactor-styles-on {
    border-color: #673AB7
}

.redactor-over:hover.redactor-styles-on {
    border-color: #ee698a
}

.redactor-source-view,
.redactor-source-view.redactor-styles-on {
    border-color: #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 h6:empty,
.redactor-in p:empty,
.redactor-in blockquote:empty {
    min-height: 1.5em
}

.redactor-in strong:empty,
.redactor-in b:empty,
.redactor-in em:empty,
.redactor-in i: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)
}

.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] {
    clear: both;
    display: inline-block
}

.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;
    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.18)
}

#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: var(--dark-color);
    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;
    display: flex;
    margin: 0 !important;
    padding: 0;
    list-style: none !important;
    line-height: 1 !important;
    background: none;
    border: none;
    box-sizing: border-box
}

.redactor-box.redactor-styles-on .redactor-toolbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 1em;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.redactor-toolbar a,
.redactor-air a {
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    padding: 10px 15px 9px 15px;
    cursor: pointer;
    outline: none;
    border: none;
    vertical-align: middle;
    text-decoration: none;
    position: relative;
    color: rgba(0, 0, 0, 0.85);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    margin-right: 5px;
    margin-bottom: 4px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.redactor-toolbar a.re-button-icon,
.redactor-air a.re-button-icon {
    font-size: 1rem;
    padding: .5rem 1rem
}

.redactor-toolbar a:hover,
.redactor-air a:hover {
    outline: none;
    color: #fff;
    background: #1E88E5
}

.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: var(--dark-color)
}

.redactor-source-view .redactor-toolbar a {
    background: #000;
    color: #fff
}

.redactor-source-view .redactor-toolbar a:hover {
    background: #1E88E5
}

.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: auto;
    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;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    width: 264px;
    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: #1E88E5 !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: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 15px rgba(80, 80, 80, 0.25);
    border-radius: 3px;
    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-color: #FBFCFC;
    border: 1px solid #DCDFE2;
    box-shadow: none;
    color: #50646F;
    border-radius: 0.250rem;
    padding: 0 .5em
}

.redactor-modal textarea {
    padding: .5em;
    height: auto;
    line-height: 1.5;
    vertical-align: top
}

.redactor-modal select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAB3SURBVBiVhdCxCQJhEEThbw/TK8QijMTcDqxAi9HgijAxP4xsSxyTX8RTzoWBZd+bZAs7bLEwP3dcOvSoP7Lm9JVEVW2wnykGpyRjB0lGDA38kofmqOTtVNUaB3Tt9MAxyfVdTz6CFc4tqyn/+kySW1UtX/uUPwE2e0CBoJpLPAAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    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;
    margin-bottom: 0.25em;
    color: #7F929C;
    font-size: 0.913em;
    font-weight: 700
}

.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;
    border-color: #969fa9;
    box-shadow: none
}

.redactor-modal input:focus,
.redactor-modal textarea:focus,
.redactor-modal select:focus {
    transition: all linear .2s;
    outline: none;
    color: rgba(0, 0, 0, 0.95);
    border-color: #1E88E5;
    border-radius: 0.188rem;
    background: #FFFFFF;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.05)
}

.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 {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    color: #41C7F9;
    background-color: #fff;
    border-radius: 3px;
    border: 2px solid #41C7F9;
    min-height: 40px;
    outline: none;
    padding: 0.5em 1.25em;
    cursor: pointer;
    line-height: 1.2;
    vertical-align: middle;
    -webkit-appearance: none;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease
}

.redactor-modal button:hover {
    outline: none;
    text-decoration: none;
    background: none;
    background-color: #35B1E2;
    color: #FFFFFF;
    border-color: #35B1E2
}

.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 {
    font-family: 'Roboto Slab';
    padding: 20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}

.redactor-modal-header:empty {
    display: none
}

.redactor-modal-body {
    padding: 2em
}

.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-tab {
    padding: .25em
}

.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: 16px 18px;
    color: #444950;
    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 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(68, 73, 80, 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(68, 73, 80, 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 embed,
.redactor-styles object {
    height: 100%
}

.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-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-placeholder {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.3);
    font-style: italic
}

.upload-hover {
    background-color: rgba(0, 125, 255, 0.075)
}

.upload-error {
    background-color: rgba(255, 50, 101, 0.075)
}

.upload-box-hover {
    outline: 5px dashed rgba(0, 125, 255, 0.3)
}

.upload-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 {
    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 {
    width: 24px;
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    opacity: .3;
    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-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000;
    height: 10px
}

#redactor-progress span {
    background-image: -webkit-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);
    background-image: -o-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);
    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;
    -o-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
    }
}

@-o-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 {
    margin: .5em 0;
    padding: 0;
    -moz-column-gap: .5em;
    -webkit-column-gap: .5em;
    column-gap: .5em;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4
}

#redactor-modal .images-wrap>.item {
    display: inline-block;
    margin: 0 0 .5em;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    padding: 2px
}

.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;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    padding: 2px;
    cursor: pointer;
    line-height: 1;
    border-radius: .188em;
    text-align: center
}

.redactor-wicons-list li.redactor-wicons-item-selected {
    background: #ee698a
}

.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: 200
}

.wojo.normal.text {
    font-weight: 300
}

.wojo.semi.text {
    font-weight: 400
}

.wojo.demi.text {
    font-weight: 500
}

.wojo.bold.text {
    font-weight: 700
}

.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.warning.text {
    color: var(--alert-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.outline {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px
}

.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.white.bg {
    background-color: #fff
}

.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.primary.fill {
    fill: var(--primary-color)
}

.wojo.secondary.fill {
    fill: var(--secondary-color)
}

.wojo.positive.fill {
    fill: var(--positive-color)
}

.wojo.negative.fill {
    fill: var(--negative-color)
}

.wojo.warning.fill {
    fill: var(--alert-color)
}

.wojo.white.fill {
    fill: #FFF
}

.wojo.primary.stop {
    stop-color: var(--primary-color)
}

.wojo.secondary.stop {
    stop-color: var(--secondary-color)
}

.wojo.positive.stop {
    stop-color: var(--positive-color)
}

.wojo.negative.stop {
    stop-color: var(--negative-color)
}

.wojo.white.stop {
    stop-color: #FFF
}

.wojo.purple.stop {
    stop-color: #2d1582
}

.wojo.primary.gradient {
    background-image: linear-gradient(150deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
    background-repeat: repeat-x
}

.wojo.animated.text {
    background-image: -webkit-linear-gradient(358deg, #f35626, #feab3a);
    background-image: linear-gradient(92deg, #f35626, #feab3a);
    background-clip: text;
    -webkit-animation: hue 10s infinite linear;
    animation: hue 10s infinite linear;
    text-fill-color: transparent
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg)
    }

    to {
        -webkit-filter: hue-rotate(-360deg)
    }
}

@keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="0" /></filter></svg>#filter');
        filter: hue-rotate(0deg)
    }

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

.highlite {
    background-color: #fffde7 !important
}

.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
}

.wojo.rounded {
    border-radius: .250rem
}

.wojo.top.rounded {
    border-radius: .250rem .250rem 0 0
}

.wojo.bottom.rounded {
    border-radius: 0 0 .250rem .250rem
}

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

.scrollbox {
    overflow: auto
}

.wojo.tabs .nav,
.wojo.navs .nav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center
}

.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 li,
.wojo.fluid.navs .nav li {
    flex: 1 1 0px;
    min-width: 0
}

.wojo.simple.tabs .nav li a {
    border: 0;
    padding: .5rem 1.5rem;
    border-radius: 0;
    color: var(--dark-color)
}

.wojo.simple.tabs .nav li.active a,
.wojo.simple.tabs .nav li a:hover,
.wojo.simple.tabs .nav li.active a,
.wojo.simple.tabs .nav li a:hover {
    background-color: transparent;
    color: var(--primary-color)
}

@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.lang.tabs .nav {
        margin-top: -1.5rem;
        margin-left: 1rem;
        margin-right: 1rem
    }
}

.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: inline-flex;
    margin: 0;
    align-items: center;
    font-weight: 400;
    position: relative
}

.wojo.breadcrumb:first-child {
    margin-top: 0
}

.wojo.breadcrumb:last-child {
    margin-bottom: 0
}

.wojo.breadcrumb .divider {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    margin: 0 0.75rem 0;
    color: rgba(0, 0, 0, 0.5)
}

.wojo.breadcrumb a {
    color: var(--primary-color)
}

.wojo.breadcrumb a:hover {
    color: var(--primary-active)
}

.wojo.breadcrumb .icon.divider {
    font-size: 0.875rem
}

.wojo.breadcrumb a.section {
    cursor: pointer
}

.wojo.breadcrumb .section {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    margin: 0;
    padding: 0
}

.wojo.breadcrumb .active.section {
    color: var(--dark-color);
    font-weight: 500
}

.wojo.white.breadcrumb a {
    color: rgba(255, 255, 255, 0.7)
}

.wojo.white.breadcrumb a:hover {
    color: #fff
}

.wojo.white.breadcrumb .active.section {
    color: #fff;
    font-weight: 500
}

.wojo.white.breadcrumb .divider {
    color: rgba(255, 255, 255, 0.5)
}

.wojo.small.breadcrumb {
    font-size: 14px;
    font-size: .875rem
}

.wojo.sticky {
    position: static;
    -webkit-transition: none;
    transition: none;
    z-index: 2
}

.wojo.sticky.bound {
    position: absolute;
    left: auto;
    right: auto
}

.wojo.sticky.fixed {
    position: fixed;
    left: auto;
    right: auto
}

.wojo.sticky.bound.top,
.wojo.sticky.fixed.top {
    top: 0px;
    bottom: auto
}

.wojo.sticky.bound.bottom,
.wojo.sticky.fixed.bottom {
    top: auto;
    bottom: 0px
}

.wojo.native.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

@media screen and (max-width:48.063em) {
    ul.wojo.basic.tabs {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    ul.wojo.basic.tabs li {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.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,
.wojo.pagination .item.active:hover {
    background-color: var(--primary-color);
    color: var(--primary-color-inverted);
    cursor: default
}

.wojo.pagination .item.active,
.wojo.pagination .item.active:hover {}

.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.wide.divider {
    border-top: 3px solid var(--grey-color-300)
}

.wojo.very.wide.divider {
    border-top: 5px solid var(--grey-color-300)
}

.wojo.relaxed.divider {
    margin: 1rem 0
}

.wojo.very.relaxed.divider {
    margin: 1.5rem 0
}

.wbox-overlay *,
.wbox-overlay *:before,
.wbox-overlay *:after {
    -webkit-backface-visibility: hidden;
    box-sizing: border-box
}

.wbox-overlay * {
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.wbox-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1040;
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.wbox-title {
    width: 100%;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    padding: 6px 40px;
    overflow: hidden;
    position: fixed;
    display: none;
    left: 0;
    z-index: 1050
}

.wbox-close {
    cursor: pointer;
    position: fixed;
    top: -1px;
    right: 0;
    width: 50px;
    height: 40px;
    padding: 6px;
    display: block;
    background-position: 10px center;
    overflow: hidden;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    z-index: 1050
}

.wbox-num {
    cursor: pointer;
    position: fixed;
    left: 0;
    height: 40px;
    overflow: hidden;
    line-height: 28px;
    font-size: 12px;
    padding: 6px 10px;
    display: none;
    z-index: 1050
}

.wbox-next,
.wbox-prev {
    position: fixed;
    top: 50%;
    margin-top: -1em;
    overflow: hidden;
    cursor: pointer;
    display: block;
    width: 2em;
    height: 2em;
    z-index: 1050
}

.wbox-next span,
.wbox-prev span {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: #B6B6B6;
    border-right-color: #B6B6B6;
    text-indent: -100px;
    position: absolute;
    top: 8px;
    display: block
}

.wbox-prev {
    left: 2em
}

.wbox-next {
    right: 2em
}

.wbox-prev span {
    left: 10px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.wbox-next span {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 10px
}

.wbox-inline {
    width: 420px;
    height: 315px;
    height: 70vh;
    padding: 10px;
    background: #fff;
    margin: 0 auto;
    overflow: auto;
    text-align: left
}

.wboxframe {
    max-width: 100%;
    border: none;
    width: 100%;
    height: 260px;
    height: 70vh
}

.wboxframe.wbvid {
    height: 260px
}

@media (min-width:768px) {

    .wboxframe,
    .wbox-inline {
        width: 90%;
        height: 360px;
        height: 70vh
    }

    .wboxframe.wbvid {
        width: 640px;
        height: 360px
    }
}

@media (min-width:992px) {

    .wboxframe,
    .wbox-inline {
        max-width: 1200px;
        width: 80%;
        height: 540px;
        height: 70vh
    }

    .wboxframe.wbvid {
        width: 960px;
        height: 540px
    }
}

.wbox-open {
    overflow: hidden
}

.wbox-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
    max-height: 100%
}

.wbox-content {
    text-align: center;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 20px 10px
}

.wbox-container img {
    max-width: 100%;
    height: auto
}

.wbox-content .children {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    max-width: 100%;
    text-align: initial
}

.wbox-content img.children {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.wbox-preloader {
    position: relative
}

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

.wbox-preloader: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: #377dff rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15);
    border-style: solid;
    border-width: 0.2em;
    box-shadow: 0px 0px 0px 1px transparent;
    visibility: visible;
    z-index: 101
}

@-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)
    }
}

.wbox-content.swipe-left {
    margin-left: -200px !important
}

.wbox-content.swipe-right {
    margin-left: 200px !important
}

.animated {
    webkit-transition: margin 300ms ease-out;
    -webkit-transition: margin 300ms ease-out;
    transition: margin 300ms ease-out
}

.animate-in {
    opacity: 1
}

.animate-out {
    opacity: 0
}

.wojo.stars {
    margin-left: auto;
    margin-right: auto;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap
}

.wojo.stars .star {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin-right: .25em;
    color: #9E9E9E;
    width: 1em;
    height: 1em;
    line-height: 1em
}

.wojo.stars a {
    font-size: .813em;
    margin-left: 2em;
    border-bottom: 1px dotted #7e7e7e;
    color: #7e7e7e
}

.wojo.stars a span {
    font-weight: 500
}

.wojo.stars .star.active .icon,
.wojo.stars .star.selected .icon {
    color: #FF9800
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 700;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansBold.woff2') format('woff2'), url('../fonts/WojoSansBold.woff') format('woff')
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 600;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansDemi.woff2') format('woff2'), url('../fonts/WojoSansDemi.woff') format('woff')
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 500;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansMedium.woff2') format('woff2'), url('../fonts/WojoSansMedium.woff') format('woff')
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 400;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansRegular.woff2') format('woff2'), url('../fonts/WojoSansRegular.woff') format('woff')
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 300;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansLight.woff2') format('woff2'), url('../fonts/WojoSansLight.woff') format('woff')
}

@font-face {
    font-family: 'Wojo Sans';
    font-style: normal;
    font-weight: 200;
    unicode-range: U+0020-0237;
    src: local(''), url('../fonts/WojoSansExtraLight.woff2') format('woff2'), url('../fonts/WojoSansExtraLight.woff') format('woff')
}

html,
body {
    font-size: 16px;
    height: 100%
}

body {
    font-family: "Wojo Sans", Helvetica, Arial, sans-serif;
    color: var(--body-color);
    font-weight: 300;
    background-color: #ffffff;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column
}

a,
a.inverted,
a.secondary,
a.grey,
a.black,
a.white {
    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.secondary {
    color: var(--secondary-color)
}

a.secondary:hover,
a.secondary.hover,
a.secondary:focus {
    color: var(--primary-color-hover)
}

a.inverted,
p.inverted {
    color: rgba(255, 255, 255, 0.7)
}

a.black {
    color: var(--dark-color)
}

a.white {
    color: #fff
}

a.white:hover,
a.white.hover,
a.white:focus {
    color: var(--primary-color-hover)
}

a.inverted:hover,
a.inverted.hover,
a.inverted:focus {
    color: rgba(255, 255, 255, 1)
}

a.black:hover,
a.black.hover,
a.black:focus {
    color: var(--primary-color-hover)
}

a.grey {
    color: var(--grey-color)
}

a.grey:hover,
a.grey.hover,
a.grey:focus {
    color: var(--primary-color-hover)
}

a.dashed {
    border-bottom: 1px dashed var(--grey-color)
}

b,
strong {
    font-weight: 700
}

p {
    color: var(--grey-color);
    line-height: 1.7;
    margin-bottom: 1rem
}

p:last-child {
    margin-bottom: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Wojo Sans';
    line-height: 1.5;
    margin: 0 0 1rem 0;
    color: #1e2022;
    font-weight: 700;
    position: relative
}

.h1,
h1 {
    font-size: 3.5rem;
    font-weight: 700
}

.h2,
h2 {
    font-size: 2rem;
    font-weight: 500
}

.h3,
h3 {
    font-size: 2.5rem
}

.h4,
h4 {
    font-size: 2rem
}

.h5,
h5 {
    font-size: 1.5rem;
    font-weight: 600
}

.h6,
h6 {
    font-size: 1.25rem
}

h1.basic,
h2.basic,
h3.basic,
h4.basic,
h5.basic,
h6.basic,
p.basic {
    margin: 0
}

h1.fitted,
h2.fitted,
h3.fitted,
h4.fitted,
h5.fitted,
h6.fitted,
p.fitted,
.h1.fitted,
.h2.fitted,
.h3.fitted,
.h4.fitted,
.h5.fitted,
.h6.fitted {
    margin: 0;
    line-height: 1
}

.divided:not(.list):not(.header):not(.footer) {
    padding: 0 0 1rem 0;
    margin-bottom: 1.5rem
}

.divided:not(.list):not(.header):not(.footer)::before,
.divided:not(.list):not(.header):not(.footer)::after {
    height: .625rem;
    z-index: 5;
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    border-radius: 1rem;
    transform: translateX(-50%)
}

.divided:not(.list):not(.header):not(.footer)::before {
    width: 100px;
    background: var(--primary-color-inverted)
}

.divided:not(.list):not(.header):not(.footer)::after {
    width: 2rem;
    background: var(--primary-color)
}

.underlined {
    position: relative;
    margin-bottom: 2rem
}

.underlined::after {
    background: var(--primary-color);
    content: "";
    width: 4rem;
    height: 2px;
    position: absolute;
    bottom: -.5rem;
    left: 0
}

.underlined.white::after {
    background: #fff
}

.underlined.center::after {
    left: 50%;
    transform: translateX(-50%)
}

.overlay {
    position: relative;
    z-index: 1
}

.overlay.gradient::before,
.overlay.white::before,
.overlay.dark::before,
.overlay::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.75;
    z-index: -35;
    background: var(--secondary-color)
}

.overlay.white::before {
    background: #fff
}

.overlay.dark::before {
    background: #111
}

.overlay.gradient::before {
    background: linear-gradient(to left, #6442ff 0%, #1B1464 100%)
}

.wojo.image .image-mask {
    position: absolute;
    left: 0;
    bottom: 0
}

header#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

header#header .top-bar {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

header#header.sticky .top-bar {
    background: var(--secondary-color)
}

header#header.sticky {
    -webkit-animation: smoothScroll 1s forwards;
    animation: smoothScroll 1s forwards;
    background-color: #fff;
    border-bottom: 0;
    box-shadow: 0 5px 25px 0 rgba(27, 20, 100, 0.15)
}

header#header a.logo {
    display: inline-block;
    line-height: 1
}

header#header .logo img,
header#header .logo svg {
    width: 4rem
}

header#header .logo .logoshape1,
header#header .logo .logoshape3 {
    fill: #77838f
}

header #iconList a {
    color: #fff
}

header #iconList a:hover {
    color: var(--primary-color)
}

header.sticky #iconList a {
    color: var(--primary-color)
}

header.sticky #iconList a:hover {
    color: var(--primary-color-hover)
}

header .logo .logoshape2 {
    fill: var(--primary-color)
}

main {
    flex: 1 0 auto
}

aside h4 {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.25rem
}

nav.menu {}

nav.menu .menu-mobile {
    display: none
}

nav.menu .menu-dropdown-icon>a::after {
    content: "\e948";
    font-family: "WojoIcons";
    float: right;
    margin-left: .5rem;
    color: #fff
}

nav.menu .menu-dropdown-icon:before {
    content: "\e948";
    font-family: "WojoIcons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1rem;
    background: #fff
}

nav.menu small {
    display: none
}

nav.menu a>i.icon {
    margin-right: .5rem
}

nav.menu>ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    box-sizing: border-box
}

nav.menu>ul:before,
nav.menu>ul:after {
    content: "";
    display: table
}

nav.menu>ul:after {
    clear: both
}

nav.menu>ul>li {
    float: left;
    padding: 0;
    margin: 0
}

nav.menu>ul>li>a {
    text-decoration: none;
    padding: 1.5rem 1rem;
    display: block;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    opacity: 0.8;
    font-size: .813rem;
    position: relative
}

header#header.sticky nav.menu>ul>li>a {
    color: #111
}

header#header.sticky nav.menu .menu-dropdown-icon>a::after {
    color: #111
}

nav.menu>ul>li>a::before {
    display: inline-block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    z-index: 7;
    content: '';
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    background: #fff;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease
}

header#header.sticky nav.menu>ul>li>a::before {
    background: var(--primary-color)
}

nav.menu>ul>li>a:hover::before {
    transform: scaleX(1);
    transform-origin: 0 0
}

nav.menu>ul>li>a strong {
    font-weight: 500
}

nav.menu>ul>li>a:hover,
nav.menu>ul>li>a.active {
    color: #fff;
    opacity: 1
}

header#header.sticky nav.menu>ul>li>a:hover,
header#header.sticky nav.menu>ul>li>a.active {
    color: var(--primary-color)
}

nav.menu>ul>li>ul {
    display: none;
    width: 100%;
    background: #fff;
    padding: 0;
    position: absolute;
    z-index: 999;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075)
}

nav.menu>ul>li>ul:before,
nav.menu>ul>li>ul:after {
    content: "";
    display: table
}

nav.menu>ul>li>ul:after {
    clear: both
}

nav.menu>ul>li>ul>li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: calc(100%/3);
    background: none;
    float: left
}

nav.menu>ul>li>ul>li a {
    padding: .5rem;
    margin: 0 .5rem;
    display: block;
    font-size: 0.750rem;
    color: var(--grey-color);
    text-transform: uppercase;
    font-weight: 500;
    cursor: default;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

nav.menu>ul>li>ul>li>ul {
    display: block;
    padding: 0;
    margin: .5rem 0 0;
    list-style: none;
    box-sizing: border-box
}

nav.menu>ul>li>ul>li>ul:before,
nav.menu>ul>li>ul>li>ul:after {
    content: "";
    display: table
}

nav.menu>ul>li>ul>li>ul:after {
    clear: both
}

nav.menu>ul>li>ul>li>ul>li {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: .8rem
}

nav.menu>ul>li>ul>li>ul>li a {
    border: 0;
    text-transform: none;
    color: var(--dark-color);
    font-size: .875rem;
    font-weight: 400;
    margin: 0;
    padding: .5rem 1rem;
    cursor: pointer
}

nav.menu>ul>li>ul>li>ul>li a:hover {
    background-color: var(--primary-color);
    color: #fff
}

nav.menu>ul>li>ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 0
}

nav.menu>ul>li>ul.normal-sub>li {
    width: 100%
}

nav.menu>ul>li>ul.normal-sub>li a {
    border: 0;
    margin: 0;
    color: var(--dark-color);
    padding: 1rem 1.5rem;
    cursor: pointer
}

nav.menu>ul>li>ul.normal-sub>li a:hover {
    background-color: var(--primary-color);
    color: #fff
}

#pageCaption {
    padding: 9rem 0 6rem 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1
}

#pageCaption::before,
#moduleCaption::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.75;
    z-index: -35;
    background: var(--secondary-color)
}

#pageCaption .wojo-grid {
    position: relative
}

#pageCaption h1 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700
}

#moduleCaption {
    background-color: var(--secondary-color);
    position: relative;
    z-index: 1;
    padding: 10rem 0 6rem 0;
    margin-bottom: 2rem;
    background: url("../images/module_header.jpg") no-repeat;
    background-size: cover
}

#moduleCaption figure {
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%
}

#moduleCaption.blog {}

#moduleCaption.shop {}

.page_blog article>h4 {
    font-size: 1.750rem;
    font-weight: 500;
    line-height: 1.2
}

.wojo.ajax.search {
    position: absolute;
    top: 100%;
    background: #fff;
    margin-top: .5em;
    box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
    border-radius: .250rem;
    z-index: 5;
    width: 100%
}

.fullsize {
    height: 100vh
}

#fullpage a.logo {
    display: inline-block;
    line-height: 1;
    margin: 0 auto
}

#fullpage a.logo img,
#fullpage a.logo svg {
    height: 2rem
}

#fullpage a.logo .logoshape1,
#fullpage a.logo .logoshape3 {
    fill: #77838f
}

#fullpage a.logo .logoshape2 {
    fill: var(--primary-color)
}

#dashboard {
    padding: 3rem 0 0 0;
    margin-bottom: 4rem;
    background: var(--secondary-color-inverted)
}

ul.wojo.dash.list {
    margin-top: 1rem;
    margin-bottom: 0;
    margin-left: 0
}

ul.wojo.dash.list li a {
    color: var(--primary-color);
    align-items: center;
    display: inline-flex;
    font-weight: 500;
    padding: 1rem .5rem;
    position: relative
}

ul.wojo.dash.list li a::before {
    display: inline-block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 7;
    content: '';
    position: absolute;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    background: var(--primary-color);
    transition: transform 0.4s ease, -webkit-transform 0.4s ease
}

ul.wojo.dash.list li a:hover::before,
ul.wojo.dash.list li.active a::before {
    transform: scaleX(1);
    transform-origin: 0 0
}

ul.wojo.dash.list li a:hover,
ul.wojo.dash.list li.active a {
    color: var(--primary-color-hover)
}

ul.wojo.dash.list li a .icon {
    margin-right: 1rem
}

footer {
    position: relative;
    background-color: #212130;
    z-index: 1;
    flex-shrink: 0
}

footer .wrapper {
    position: relative;
    z-index: 2
}

footer .copyright {
    color: #dee2e6;
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem 0
}

footer .contents {
    color: #dee2e6;
    padding: 6rem 0 4rem 0
}

footer .logo img,
footer .logo svg {
    width: 1.5rem;
    margin-right: .875rem
}

footer .logo .logoshape1,
footer .logo .logoshape3 {
    fill: rgba(255, 255, 255, 0.2)
}

footer .logo .logoshape2 {
    fill: var(--primary-color)
}

footer figure {
    bottom: 0;
    left: 0;
    width: 40%;
    z-index: 0
}

body.page_profile,
body.page_sitemap,
body.page_dashboard {
    background-color: #F8F9FA
}

body.page_profile header#header,
body.page_sitemap header#header,
body.page_dashboard header#header {
    background: var(--secondary-color)
}

body.page_profile header#header.sticky,
body.page_sitemap header#header.sticky,
body.page_dashboard header#header.sticky {
    background: #fff
}

body.page_profile main,
body.page_sitemap main,
body.page_dashboard main {
    padding-top: 7rem
}

#searchHero {
    padding: 3rem 0;
    background: var(--secondary-color);
    opacity: .85;
    margin-bottom: 4rem;
    position: relative
}

#searchHero .wave {
    position: absolute;
    width: 100%;
    bottom: -1rem;
    left: 0;
    height: auto
}

#master-loader {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5000;
    background-size: contain;
    background-position: left bottom
}

#master-loader .curtains {
    background: #f9f9fb;
    height: 100%;
    position: fixed;
    top: 0;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    width: 51%;
    z-index: 5001
}

#master-loader .curtains.left {
    left: 0
}

#master-loader .curtains.right {
    right: 0
}

.wanimation {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -webkit-animation: 2s linear 0s normal none infinite running spin;
    animation: 2s linear 0s normal none infinite running spin;
    border-color: #2196f3 transparent transparent;
    -o-border-image: none;
    border-image: none;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    display: block;
    height: 150px;
    left: 50%;
    margin: -75px 0 0 -75px;
    position: relative;
    top: 50%;
    width: 150px;
    z-index: 5005
}

.wanimation::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -webkit-animation: 3s linear 0s normal none infinite running spin;
    animation: 3s linear 0s normal none infinite running spin;
    border-color: #f44336 transparent transparent;
    -o-border-image: none;
    border-image: none;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    bottom: 5px;
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px
}

.wanimation::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -webkit-animation: 1.5s linear 0s normal none infinite running spin;
    animation: 1.5s linear 0s normal none infinite running spin;
    border-color: #ff9800 transparent transparent;
    -o-border-image: none;
    border-image: none;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    bottom: 15px;
    content: "";
    left: 15px;
    position: absolute;
    right: 15px;
    top: 15px
}

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

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

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

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

.loaded #master-loader {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    transition: all 0.3s ease-out 1s;
    visibility: hidden
}

.loaded #master-loader .curtains.left {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s
}

.loaded #master-loader .curtains.right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s
}

.loaded .wanimation {
    opacity: 0;
    transition: all 0.3s ease-out 0s
}

@-webkit-keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

#back-to-top {
    color: #fff;
    text-decoration: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    padding: 1.25rem;
    text-align: center;
    background-color: var(--primary-color);
    cursor: pointer;
    display: none;
    opacity: .5;
    border: 0;
    border-radius: .250rem;
    transition: 0.3s ease-out
}

#back-to-top:hover {
    text-decoration: none;
    opacity: 1
}

#error404 {
    background: var(--secondary-color);
    padding: 8rem 0;
    background-image: url(../images/module_header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    z-index: 1
}

#error404::before {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.75;
    z-index: -2;
    position: absolute;
    background: #1B1464
}

body#errorPage {
    background-image: url(../images/error_bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    display: block
}

body#errorPage header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 1rem 0
}

body#errorPage .logo img,
body#errorPage .logo svg {
    width: 4rem;
    border-radius: .250rem
}

body#errorPage .logo .logoshape1,
body#errorPage .logo .logoshape3 {
    fill: #77838f
}

body#errorPage .logo .logoshape2 {
    fill: var(--primary-color)
}

body#errorPage main {
    position: relative;
    min-height: 100vh;
    display: flex;
    max-width: 1280px;
    padding: 0 1rem;
    margin: 0 auto
}

body#errorPage footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: transparent
}

#mdashboard {
    margin-top: 1rem
}

#mheader {
    position: absolute;
    top: 1rem;
    width: 100%;
    text-align: center;
    padding: 1rem
}

#mheader .logo img,
#mheader .logo svg {
    width: 4rem;
    border-radius: .250rem
}

#mheader .logo .logoshape1,
#mheader .logo .logoshape3 {
    fill: #77838f
}

#mheader .logo .logoshape2 {
    fill: #377dff
}

#mfooter {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: .750rem;
    padding: 1rem
}

.dash {
    position: relative;
    padding: 0 1em
}

.dash .digit {
    font-size: 3rem;
    line-height: 1;
    font-weight: 300;
    text-align: center;
    display: inline-flex;
    color: #377DFF
}

.dash_title {
    display: block;
    font-size: .750rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 500;
    color: #77838F
}

.wojo.button.player {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
    transition: all 0.5s ease
}

.wojo.button.player:hover,
.wojo.button.player.attached:hover {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.15)
}

.wojo.button.player:hover {
    transform: scale(1.15)
}

@media screen and (min-width:40.625em) and (max-width:64em) {
    #loginFooter {
        width: 30%
    }

    #regForm {
        padding: 3.5rem 0
    }
}

@media screen and (max-width:48.063em) {
    header#header .bottom-bar {
        margin-top: .5rem
    }

    nav.menu {
        text-align: left;
        position: relative;
        background-color: #fff
    }

    nav.menu,
    nav.menu .menu-dropdown-icon:before {
        display: block
    }

    nav.menu .menu-dropdown-icon::before {
        padding: .5rem
    }

    nav.menu .menu-dropdown-icon>a:after,
    nav.menu>ul>li>ul:after {
        display: none
    }

    nav.menu>ul {
        display: none;
        margin-top: 1rem
    }

    nav.menu>ul>li {
        width: 100%;
        float: none;
        display: block
    }

    nav.menu>ul>li a {
        padding: 1rem .750rem;
        width: 100%;
        display: block;
        color: #111
    }

    nav.menu>ul>li>a:hover,
    nav.menu>ul>li>a.active {
        color: var(--primary-color);
        opacity: 1
    }

    nav.menu>ul>li>ul {
        position: relative;
        border-radius: .0;
        border-top: 0;
        box-shadow: none;
        padding: 0;
        padding-left: 1rem;
        border-left: 3px solid var(--primary-color)
    }

    nav.menu>ul>li>ul.normal-sub {
        width: 100%
    }

    nav.menu>ul>li>ul>li {
        float: none;
        width: 100%
    }

    nav.menu>ul>li>ul>li:first-child {
        margin: 0
    }

    nav.menu>ul>li>ul>li>ul {
        position: relative
    }

    nav.menu>ul>li>ul>li>ul {
        margin: 1rem 0 0
    }

    nav.menu>ul>li>ul>li>ul>li {
        float: none
    }

    nav.menu .show-on-mobile {
        display: block
    }

    #loginFooter {
        display: none
    }

    #regForm {
        padding: 3.5rem 0
    }
}

@media screen and (max-width:30em) {
    header#header .top-bar {
        display: none
    }

    body#errorPage footer {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;

        :root {
            --body-color: #636b72;
            --body-bg-color: #fff;
            --primary-color: #18ab63;
            --primary-color-hover: #12854f;
            --primary-color-active: #12854f;
            --primary-color-inverted: #e9fcf3;
            --primary-color-shadow: rgba(24, 171, 99, 0.35);
            --secondary-color: #21325b;
            --secondary-color-hover: #1c2849;
            --secondary-color-active: #1c2849;
            --secondary-color-inverted: #ecf0f8;
            --secondary-color-shadow: rgba(28, 40, 73, 0.35);
            --positive-color: #00c9a7;
            --positive-color-hover: #009e84;
            --positive-color-active: #009e84;
            --positive-color-inverted: #e5fffb;
            --positive-color-shadow: rgba(0, 201, 167, 0.35);
            --negative-color: #ED4C78;
            --negative-color-hover: #b93b5c;
            --negative-color-active: #b93b5c;
            --negative-color-inverted: #fde8ed;
            --negative-color-shadow: rgba(237, 76, 120, 0.35);
            --alert-color: #F5CA99;
            --alert-color-hover: #bf9a74;
            --alert-color-active: #bf9a74;
            --alert-color-inverted: #fdf3e8;
            --alert-color-shadow: rgba(245, 202, 153, 0.35);
            --info-color: #09A5BE;
            --info-color-hover: #09A5BE;
            --info-color-active: #09A5BE;
            --info-color-inverted: #e7fbfe;
            --info-color-shadow: rgba(9, 165, 190, 0.35);
            --light-color: #f8f9fa;
            --light-color-hover: #e1e5ea;
            --light-color-active: #e1e5ea;
            --light-color-inverted: #f1f1f1;
            --light-color-shadow: rgba(248, 249, 250, 0.35);
            --dark-color: #343a40;
            --dark-color-hover: #2d3339;
            --dark-color-active: #2d3339;
            --dark-color-shadow: rgba(52, 58, 64, 0.1);
            --dark-color-inverted: #F4F5F6;
            --black-color: #000;
            --white-color: #fff;
            --shadow-color: rgba(136, 152, 170, .15);
            --grey-color: #818181;
            --grey-color-100: #f2f2f2;
            --grey-color-300: #d5d5d5;
            --grey-color-500: #b9b9b9;
            --grey-color-700: #9d9d9d
        }

        :root {
            --gutter: 2rem;
            --gutter-compensation: -2rem;
            --padding: 1rem;
            --margin: 1rem;
            --grid: 400px;
            --transparent: transparent;
            --radius: .250rem;
            --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)
        }

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

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

        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
        }

        .scrollbox {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) var(--grey-color-300)
        }

        .scrollbox::-webkit-scrollbar {
            width: 12px
        }

        .scrollbox::-webkit-scrollbar-track {
            background: var(--primary-color-inverted)
        }

        .scrollbox::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            border-radius: 1rem;
            border: 3px solid var(--grey-color-300)
        }

        article,
        aside,
        dialog,
        figcaption,
        figure,
        footer,
        header,
        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
        }

        blockquote {
            color: #000;
            padding: 2rem;
            border-radius: .250rem;
            margin: 0 0 2rem 0;
            position: relative;
            background: #fff;
            border-left: 4px solid var(--primary-color);
            box-shadow: 0 23px 49px 0 var(--shadow-color)
        }

        blockquote p {
            font-style: italic;
            color: #000
        }

        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
        }

        .overflow {
            overflow: hidden
        }

        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
        }

        .fcolumn {
            flex-direction: column
        }

        .fwrap {
            flex-wrap: wrap
        }

        .block {
            display: block
        }

        .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
        }

        input:focus {
            outline-offset: 0
        }

        :focus {
            outline: -webkit-focus-ring-color auto 0
        }

        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
        }

        .h200 {
            height: 200px
        }

        .h300 {
            height: 300px
        }

        .h350 {
            height: 350px
        }

        .h400 {
            height: 400px
        }

        .h500 {
            height: 500px
        }

        .hp100 {
            height: 100%
        }

        .w50 {
            width: 50%
        }

        .w25 {
            width: 25%
        }

        .w75 {
            width: 75%
        }

        .w100 {
            width: 100%
        }

        .mw-50 {
            max-width: 50% !important
        }

        .mw-75 {
            max-width: 75% !important
        }

        .fvh {
            height: 100vh
        }

        .pt {
            top: 0
        }

        .pb {
            bottom: 0
        }

        .pl {
            left: 0
        }

        .pr {
            right: 0
        }

        .pbn1 {
            bottom: -1rem
        }

        .pbn2 {
            bottom: -2rem
        }

        .pbn3 {
            bottom: -3rem
        }

        .zin1 {
            z-index: -1
        }

        .zi1 {
            z-index: 1
        }

        .zi2 {
            z-index: 2
        }

        .zi3 {
            z-index: 3
        }

        .zi4 {
            z-index: 4
        }

        .zi5 {
            z-index: 5
        }

        .mb1 {
            margin-bottom: 1rem
        }

        .mb2 {
            margin-bottom: 2rem
        }

        .mb3 {
            margin-bottom: 3rem
        }

        .mb4 {
            margin-bottom: 4rem
        }

        .mb5 {
            margin-bottom: 5rem
        }

        .mt3 {
            margin-top: 3rem
        }

        .mt4 {
            margin-top: 4rem
        }

        .mt5 {
            margin-top: 5rem
        }

        .ml3 {
            margin-left: 3rem
        }

        .ml4 {
            margin-left: 4rem
        }

        .ml5 {
            margin-left: 5rem
        }

        .mr3 {
            margin-right: 3rem
        }

        .mr4 {
            margin-right: 4rem
        }

        .mr5 {
            margin-right: 5rem
        }

        .mbn3 {
            margin-bottom: -3rem
        }

        .mbn4 {
            margin-bottom: -4rem
        }

        .mbn5 {
            margin-bottom: -5rem
        }

        .mtn3 {
            margin-top: -3rem
        }

        .mtn4 {
            margin-top: -4rem
        }

        .mtn5 {
            margin-top: -5rem
        }

        .mln3 {
            margin-left: -3rem
        }

        .mln4 {
            margin-left: -4rem
        }

        .mln5 {
            margin-left: -5rem
        }

        .mrn3 {
            margin-right: -3rem
        }

        .mrn4 {
            margin-right: -4rem
        }

        .mrn5 {
            margin-right: -5rem
        }

        .fullsvg {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: 1
        }

        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: 1140px;
            margin: 0 auto;
            padding-right: var(--padding);
            padding-left: var(--padding)
        }

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

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

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

        .wojo.mason.five {
            -webkit-column-count: 5;
            column-count: 5;
            -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,
        .wojo.mason.two>.item,
        .wojo.mason.four>.item,
        .wojo.mason.five>.item,
        .wojo.mason.three>.item {
            display: inline-flex;
            width: 100%;
            break-inside: avoid;
            margin-bottom: 2rem
        }

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

        .wojo.mason>.item>.card {
            position: static
        }

        .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.gutters>.columns.divider::after {
            position: absolute;
            top: 10%;
            left: 2rem;
            height: 80%;
            border-left: 1px solid var(--grey-color-300);
            content: ""
        }

        .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
        }

        .row.divided.grid .columns>.item {
            border-bottom: 1px solid var(--grey-color-300);
            display: flex;
            flex-flow: row wrap;
            align-items: center
        }

        .row.divided.grid .columns>.item>.columns {
            flex: 1 1 0px;
            min-width: 0;
            padding: 0.750em;
            white-space: nowrap
        }

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

        @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 !important
            }
        }

        @media screen and (min-width:48em) 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-auto {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                white-space: nowrap
            }

            .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 !important
            }
        }

        @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 .columns.mobile-auto {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                white-space: nowrap
            }

            .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 !important
            }

            .wojo.mason,
            .wojo.mason.five,
            .wojo.mason.four,
            .wojo.mason.three,
            .wojo.mason.two {
                -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 !important
            }

            .wojo.mason,
            .wojo.mason.five,
            .wojo.mason.four,
            .wojo.mason.three,
            .wojo.mason.two,
            .wojo.mason.grid {
                -webkit-column-count: 1;
                column-count: 1
            }
        }

        #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.button {
            cursor: pointer;
            display: inline-flex;
            flex-flow: row nowrap;
            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
        }

        .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;
            background: var(--primary-color-active)
        }

        .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;
            background: var(--secondary-color-active)
        }

        .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;
            background: var(--positive-color-active)
        }

        .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;
            background: var(--negative-color-active)
        }

        .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(255, 255, 255, .1)
        }

        .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: 3rem
        }

        .wojo.spaced.button {
            margin-right: 1rem
        }

        .wojo.passive.button {
            cursor: default;
            pointer-events: none
        }

        .wojo.filter.buttons {
            background-color: var(--dark-color-inverted);
            border-radius: .250rem
        }

        .wojo.filter.buttons .button {
            margin: .25rem;
            border-radius: .250rem;
            background-color: #fff;
            border: 0;
            color: var(--primary-color);
            box-shadow: 0 3px 6px 0 var(--shadow-color)
        }

        .wojo.filter.buttons .button.passive {
            background-color: transparent;
            box-shadow: none;
            border: 0
        }

        .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.buttons.vertical {
            display: flex;
            flex-direction: column
        }

        .wojo.buttons.vertical .button {
            flex: 1 1 0px;
            min-width: 0;
            border-radius: .250rem;
            justify-content: flex-start;
            margin-bottom: .250rem
        }

        .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: 1rem;
            padding: 1.25rem 2rem
        }

        .wojo.big.circular.button {
            padding: 1.25rem;
            width: 1.5rem;
            height: 1.5rem
        }

        .wojo.big.circular.button .icon {
            font-size: 1.25rem;
            width: 1.25rem
        }

        .wojo.labeled.big.buttons .button,
        .wojo.labeled.big.button,
        .wojo.labeled.small.buttons .button,
        .wojo.labeled.small.button {
            padding: 0
        }

        .wojo.big.labeled.button span {
            font-size: 1rem;
            padding: 1.375rem 1.875rem
        }

        .wojo.big.labeled.button .icon {
            padding: 1.375rem
        }

        .wojo.small.labeled.button span {
            font-size: .875rem;
            padding: .750rem 1rem
        }

        .wojo.small.labeled.button .icon {
            padding: .750rem
        }

        .wojo.huge.buttons .button,
        .wojo.huge.button {
            font-size: 1.5rem;
            padding: 1.25em 2.50em
        }

        .wojo.huge.circular.button {
            padding: 1.5rem;
            width: 2rem;
            height: 2rem
        }

        .wojo.huge.circular.button .icon {
            font-size: 2rem;
            width: 2rem
        }

        .wojo.massive.buttons .button,
        .wojo.massive.button {
            font-size: 1.5rem;
            padding: 1.5em 3em
        }

        .wojo.massive.circular.button {
            padding: 2.5rem;
            width: 2.5rem;
            height: 2.5rem
        }

        .wojo.massive.circular.button .icon {
            font-size: 3rem;
            width: 3rem
        }

        .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
            }
        }

        @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: inherit;
            position: relative
        }

        i.icon.middle {
            vertical-align: middle
        }

        .icon.agenda:before {
            content: "\e900"
        }

        .icon.aid.kit:before {
            content: "\e901"
        }

        .icon.anchor:before {
            content: "\e902"
        }

        .icon.angle.double.down:before {
            content: "\e903"
        }

        .icon.angle.double.left:before {
            content: "\e904"
        }

        .icon.angle.double.right:before {
            content: "\e905"
        }

        .icon.angle.double.up:before {
            content: "\e906"
        }

        .icon.angle.down:before {
            content: "\e907"
        }

        .icon.angle.left:before {
            content: "\e908"
        }

        .icon.angle.right:before {
            content: "\e909"
        }

        .icon.angle.up:before {
            content: "\e90a"
        }

        .icon.antena:before {
            content: "\e90b"
        }

        .icon.app:before {
            content: "\e90c"
        }

        .icon.app.add:before {
            content: "\e90d"
        }

        .icon.app.remove:before {
            content: "\e90e"
        }

        .icon.apple:before {
            content: "\e968"
        }

        .icon.apps:before {
            content: "\e910"
        }

        .icon.apps.alt:before {
            content: "\e911"
        }

        .icon.arrow.backward:before {
            content: "\e912"
        }

        .icon.arrow.forward:before {
            content: "\e913"
        }

        .icon.arrows:before {
            content: "\e914"
        }

        .icon.arrows.horizontal:before {
            content: "\e915"
        }

        .icon.arrows.vertical:before {
            content: "\e916"
        }

        .icon.asterisk:before {
            content: "\e917"
        }

        .icon.backward:before {
            content: "\e918"
        }

        .icon.badge:before {
            content: "\e919"
        }

        .icon.bag:before {
            content: "\e92f"
        }

        .icon.ban:before {
            content: "\e91a"
        }

        .icon.bar.chart:before {
            content: "\e91b"
        }

        .icon.bar.chart.alt:before {
            content: "\e91c"
        }

        .icon.basket:before {
            content: "\e91d"
        }

        .icon.basket.alt:before {
            content: "\e930"
        }

        .icon.basketball:before {
            content: "\e91e"
        }

        .icon.batery.empty:before {
            content: "\e91f"
        }

        .icon.batery.full:before {
            content: "\e920"
        }

        .icon.batery20:before {
            content: "\e921"
        }

        .icon.batery50:before {
            content: "\e922"
        }

        .icon.bell:before {
            content: "\e923"
        }

        .icon.binoculars:before {
            content: "\e924"
        }

        .icon.blackboard:before {
            content: "\e925"
        }

        .icon.bluetooth:before {
            content: "\e926"
        }

        .icon.bluetooth.connected:before {
            content: "\e927"
        }

        .icon.bolt:before {
            content: "\e928"
        }

        .icon.book:before {
            content: "\e929"
        }

        .icon.bookmark:before {
            content: "\e92a"
        }

        .icon.briefcase:before {
            content: "\e92c"
        }

        .icon.briefcase.alt:before {
            content: "\e92d"
        }

        .icon.brightness:before {
            content: "\e931"
        }

        .icon.brightness.alt:before {
            content: "\e932"
        }

        .icon.brush:before {
            content: "\e933"
        }

        .icon.bubble:before {
            content: "\e935"
        }

        .icon.building:before {
            content: "\e936"
        }

        .icon.burger:before {
            content: "\e937"
        }

        .icon.bus:before {
            content: "\e938"
        }

        .icon.cake:before {
            content: "\e939"
        }

        .icon.calculator:before {
            content: "\e93a"
        }

        .icon.calendar:before {
            content: "\e93b"
        }

        .icon.calendar.add:before {
            content: "\e93c"
        }

        .icon.calendar.alt:before {
            content: "\e93d"
        }

        .icon.calendar.remove:before {
            content: "\e93e"
        }

        .icon.camera:before {
            content: "\e93f"
        }

        .icon.camera.alt:before {
            content: "\e940"
        }

        .icon.car:before {
            content: "\e941"
        }

        .icon.cd:before {
            content: "\e942"
        }

        .icon.certificate:before {
            content: "\e943"
        }

        .icon.chat:before {
            content: "\e9ed"
        }

        .icon.check:before {
            content: "\e944"
        }

        .icon.check.all:before {
            content: "\e945"
        }

        .icon.checkbox:before {
            content: "\e946"
        }

        .icon.checkbox.checked:before {
            content: "\e947"
        }

        .icon.checkbox.checkedalt:before {
            content: "\e90f"
        }

        .icon.chevron.down:before {
            content: "\e948"
        }

        .icon.chevron.right:before {
            content: "\e94a"
        }

        .icon.chevron.up:before {
            content: "\e94b"
        }

        .icon.chevron.left:before {
            content: "\e949"
        }

        .icon.circle.check:before {
            content: "\e94c"
        }

        .icon.circle.chevron.down:before {
            content: "\e94d"
        }

        .icon.circle.chevron.left:before {
            content: "\e94e"
        }

        .icon.circle.chevron.right:before {
            content: "\e94f"
        }

        .icon.circle.chevron.up:before {
            content: "\e950"
        }

        .icon.circle.delete:before {
            content: "\e951"
        }

        .icon.circle.minus:before {
            content: "\e952"
        }

        .icon.circle.plus:before {
            content: "\e953"
        }

        .icon.clipboard:before {
            content: "\e954"
        }

        .icon.clipboard.alt:before {
            content: "\e955"
        }

        .icon.clock:before {
            content: "\e956"
        }

        .icon.close:before {
            content: "\e957"
        }

        .icon.cloud.download:before {
            content: "\e958"
        }

        .icon.cloud.upload:before {
            content: "\e959"
        }

        .icon.code:before {
            content: "\e95a"
        }

        .icon.code.alt:before {
            content: "\e95b"
        }

        .icon.cogs:before {
            content: "\e95c"
        }

        .icon.collection:before {
            content: "\e95d"
        }

        .icon.comment:before {
            content: "\e95e"
        }

        .icon.comments:before {
            content: "\e95f"
        }

        .icon.compass:before {
            content: "\e960"
        }

        .icon.compress:before {
            content: "\e961"
        }

        .icon.contacts:before {
            content: "\e934"
        }

        .icon.contrast:before {
            content: "\e962"
        }

        .icon.copy:before {
            content: "\e963"
        }

        .icon.crayon:before {
            content: "\e96b"
        }

        .icon.credit.card:before {
            content: "\e96c"
        }

        .icon.crop:before {
            content: "\e96d"
        }

        .icon.css:before {
            content: "\e96e"
        }

        .icon.cup:before {
            content: "\e96f"
        }

        .icon.customize:before {
            content: "\e964"
        }

        .icon.cut:before {
            content: "\e970"
        }

        .icon.dashboard:before {
            content: "\e971"
        }

        .icon.database:before {
            content: "\e972"
        }

        .icon.database.alt:before {
            content: "\e973"
        }

        .icon.date:before {
            content: "\e974"
        }

        .icon.delete:before {
            content: "\e975"
        }

        .icon.desktop:before {
            content: "\e976"
        }

        .icon.dice:before {
            content: "\e977"
        }

        .icon.directions:before {
            content: "\e978"
        }

        .icon.download:before {
            content: "\e979"
        }

        .icon.download.alt:before {
            content: "\e97a"
        }

        .icon.drop:before {
            content: "\e97c"
        }

        .icon.dropbox:before {
            content: "\e97d"
        }

        .icon.dropper:before {
            content: "\e97e"
        }

        .icon.earth:before {
            content: "\e97f"
        }

        .icon.ellipsis.horizontal:before {
            content: "\e980"
        }

        .icon.ellipsis.horizontal.alt:before {
            content: "\e981"
        }

        .icon.ellipsis.vertical:before {
            content: "\e982"
        }

        .icon.ellipsis.vertical.alt:before {
            content: "\e983"
        }

        .icon.email:before {
            content: "\e985"
        }

        .icon.email.alt:before {
            content: "\e999"
        }

        .icon.eraser:before {
            content: "\e986"
        }

        .icon.expand:before {
            content: "\e987"
        }

        .icon.eye:before {
            content: "\e988"
        }

        .icon.eye.blocked:before {
            content: "\e989"
        }

        .icon.eye.glasses:before {
            content: "\e98a"
        }

        .icon.facebook:before {
            content: "\e98b"
        }

        .icon.facebook.alt:before {
            content: "\e98c"
        }

        .icon.faq:before {
            content: "\e98d"
        }

        .icon.feather:before {
            content: "\e98e"
        }

        .icon.female:before {
            content: "\e98f"
        }

        .icon.female.gender:before {
            content: "\e990"
        }

        .icon.file:before {
            content: "\e991"
        }

        .icon.file.add:before {
            content: "\e992"
        }

        .icon.file.remove:before {
            content: "\e993"
        }

        .icon.files:before {
            content: "\e994"
        }

        .icon.files.add:before {
            content: "\e995"
        }

        .icon.files.remove:before {
            content: "\e996"
        }

        .icon.filter:before {
            content: "\e997"
        }

        .icon.find:before {
            content: "\e998"
        }

        .icon.fire:before {
            content: "\e99b"
        }

        .icon.flag:before {
            content: "\e99c"
        }

        .icon.floppy:before {
            content: "\e99d"
        }

        .icon.flow.tree:before {
            content: "\e99e"
        }

        .icon.folder:before {
            content: "\e99f"
        }

        .icon.folder.add:before {
            content: "\e9a0"
        }

        .icon.folder.open:before {
            content: "\e9a1"
        }

        .icon.folder.remove:before {
            content: "\e9a2"
        }

        .icon.food.dome:before {
            content: "\e9a3"
        }

        .icon.football:before {
            content: "\e9a4"
        }

        .icon.forward:before {
            content: "\e9a5"
        }

        .icon.gamepad:before {
            content: "\e9a6"
        }

        .icon.ghost:before {
            content: "\e9a7"
        }

        .icon.gift:before {
            content: "\e9a8"
        }

        .icon.github:before {
            content: "\e9a9"
        }

        .icon.globe:before {
            content: "\e9aa"
        }

        .icon.google:before {
            content: "\e9ab"
        }

        .icon.google.drive:before {
            content: "\e9ac"
        }

        .icon.google.plus:before {
            content: "\e9ad"
        }

        .icon.gps:before {
            content: "\e9ae"
        }

        .icon.grid:before {
            content: "\e9af"
        }

        .icon.grid.align.bottom.left:before {
            content: "\e9b0"
        }

        .icon.grid.align.bottom.right:before {
            content: "\e9b1"
        }

        .icon.grid.align.center.bottom:before {
            content: "\e9b2"
        }

        .icon.grid.align.center.left:before {
            content: "\e9b3"
        }

        .icon.grid.align.center.middle:before {
            content: "\e9b4"
        }

        .icon.grid.align.center.right:before {
            content: "\e9b5"
        }

        .icon.grid.align.center.top:before {
            content: "\e9b6"
        }

        .icon.grid.align.top.left:before {
            content: "\e9b7"
        }

        .icon.grid.align.top.right:before {
            content: "\e9b8"
        }

        .icon.hdd:before {
            content: "\e9b9"
        }

        .icon.headphones:before {
            content: "\e9ba"
        }

        .icon.heart:before {
            content: "\e9bb"
        }

        .icon.heart.alt:before {
            content: "\e9bc"
        }

        .icon.help:before {
            content: "\e9bd"
        }

        .icon.history:before {
            content: "\e9be"
        }

        .icon.home:before {
            content: "\e9bf"
        }

        .icon.hourglass:before {
            content: "\e9c0"
        }

        .icon.html5:before {
            content: "\e9c2"
        }

        .icon.icecream:before {
            content: "\e9c3"
        }

        .icon.id:before {
            content: "\e9c4"
        }

        .icon.inbox:before {
            content: "\e9c5"
        }

        .icon.indent:before {
            content: "\e9c6"
        }

        .icon.info.sign:before {
            content: "\e9c7"
        }

        .icon.instagram:before {
            content: "\e9c8"
        }

        .icon.invoice:before {
            content: "\e9c9"
        }

        .icon.ip:before {
            content: "\e9ca"
        }

        .icon.key:before {
            content: "\e9cb"
        }

        .icon.laptop:before {
            content: "\e9cc"
        }

        .icon.layer:before {
            content: "\e9ce"
        }

        .icon.layer.alt:before {
            content: "\e9cf"
        }

        .icon.leaf:before {
            content: "\e9d0"
        }

        .icon.line.chart:before {
            content: "\e9d1"
        }

        .icon.linkedin:before {
            content: "\ea81"
        }

        .icon.lock:before {
            content: "\e9d2"
        }

        .icon.long.arrow.down:before {
            content: "\e9d3"
        }

        .icon.long.arrow.down.left:before {
            content: "\e9d4"
        }

        .icon.long.arrow.down.right:before {
            content: "\e9d5"
        }

        .icon.long.arrow.left:before {
            content: "\e9d6"
        }

        .icon.long.arrow.right:before {
            content: "\e9d7"
        }

        .icon.long.arrow.up:before {
            content: "\e9d8"
        }

        .icon.long.arrow.up.left:before {
            content: "\e9d9"
        }

        .icon.long.arrow.up.right:before {
            content: "\e9da"
        }

        .icon.magnet:before {
            content: "\e9db"
        }

        .icon.male:before {
            content: "\e9dc"
        }

        .icon.male.gender:before {
            content: "\e9dd"
        }

        .icon.map:before {
            content: "\e9de"
        }

        .icon.maple.leaf:before {
            content: "\e9df"
        }

        .icon.marker:before {
            content: "\e9e0"
        }

        .icon.mask:before {
            content: "\e9e1"
        }

        .icon.medal:before {
            content: "\e9e2"
        }

        .icon.membership:before {
            content: "\e9e3"
        }

        .icon.microphone:before {
            content: "\e9e5"
        }

        .icon.minus:before {
            content: "\e9e6"
        }

        .icon.minus.alt:before {
            content: "\e9e7"
        }

        .icon.money:before {
            content: "\e9e8"
        }

        .icon.mouse:before {
            content: "\e9e4"
        }

        .icon.move:before {
            content: "\e9e9"
        }

        .icon.move.horizontal:before {
            content: "\e9ea"
        }

        .icon.move.vertical:before {
            content: "\e9eb"
        }

        .icon.movie:before {
            content: "\e9ec"
        }

        .icon.mug:before {
            content: "\ea08"
        }

        .icon.musical.note.playlist:before {
            content: "\e9ee"
        }

        .icon.musical.notes:before {
            content: "\e9ef"
        }

        .icon.mute:before {
            content: "\e9f0"
        }

        .icon.news:before {
            content: "\e9fe"
        }

        .icon.note:before {
            content: "\e9f1"
        }

        .icon.note.alt:before {
            content: "\e9f2"
        }

        .icon.ordered.list:before {
            content: "\e9f3"
        }

        .icon.outbox:before {
            content: "\e9f4"
        }

        .icon.outdent:before {
            content: "\e9f5"
        }

        .icon.paint.roller:before {
            content: "\e9f6"
        }

        .icon.pan:before {
            content: "\e9f7"
        }

        .icon.paper.plane:before {
            content: "\e9f9"
        }

        .icon.paper.clip:before {
            content: "\e9f8"
        }

        .icon.paste:before {
            content: "\ea59"
        }

        .icon.pause:before {
            content: "\e9fa"
        }

        .icon.pen:before {
            content: "\e9fc"
        }

        .icon.pen.alt:before {
            content: "\e9fd"
        }

        .icon.pencil:before {
            content: "\e9ff"
        }

        .icon.phone:before {
            content: "\ea00"
        }

        .icon.phone.call:before {
            content: "\ea01"
        }

        .icon.photo:before {
            content: "\ea02"
        }

        .icon.photo.alt:before {
            content: "\ea03"
        }

        .icon.photos:before {
            content: "\ea04"
        }

        .icon.pie.chart:before {
            content: "\ea05"
        }

        .icon.pill:before {
            content: "\ea06"
        }

        .icon.pin:before {
            content: "\ea07"
        }

        .icon.pinterest:before {
            content: "\ea09"
        }

        .icon.plane:before {
            content: "\ea0a"
        }

        .icon.play:before {
            content: "\ea0b"
        }

        .icon.plus:before {
            content: "\ea0c"
        }

        .icon.plus.alt:before {
            content: "\ea0d"
        }

        .icon.poll:before {
            content: "\ea67"
        }

        .icon.postcard:before {
            content: "\ea0e"
        }

        .icon.power:before {
            content: "\ea0f"
        }

        .icon.printer:before {
            content: "\ea10"
        }

        .icon.puzzle:before {
            content: "\ea11"
        }

        .icon.qr:before {
            content: "\ea12"
        }

        .icon.question.sign:before {
            content: "\ea13"
        }

        .icon.queue.add:before {
            content: "\e965"
        }

        .icon.queue.remove:before {
            content: "\e966"
        }

        .icon.quote:before {
            content: "\ea14"
        }

        .icon.radio:before {
            content: "\ea15"
        }

        .icon.radio.checked:before {
            content: "\ea16"
        }

        .icon.record:before {
            content: "\ea17"
        }

        .icon.redo:before {
            content: "\ea18"
        }

        .icon.refresh:before {
            content: "\ea19"
        }

        .icon.reorder:before {
            content: "\ea1a"
        }

        .icon.repeat:before {
            content: "\ea1b"
        }

        .icon.resize:before {
            content: "\ea1c"
        }

        .icon.round.chart:before {
            content: "\ea1d"
        }

        .icon.rss:before {
            content: "\ea1e"
        }

        .icon.sailboat:before {
            content: "\ea1f"
        }

        .icon.select:before {
            content: "\ea20"
        }

        .icon.select.all:before {
            content: "\ea21"
        }

        .icon.send:before {
            content: "\ea71"
        }

        .icon.send.alt:before {
            content: "\ea72"
        }

        .icon.server:before {
            content: "\ea22"
        }

        .icon.server.alt:before {
            content: "\ea23"
        }

        .icon.setting:before {
            content: "\ea24"
        }

        .icon.settings.alt:before {
            content: "\ea25"
        }

        .icon.share:before {
            content: "\ea26"
        }

        .icon.shield:before {
            content: "\ea27"
        }

        .icon.shield.alt:before {
            content: "\ea28"
        }

        .icon.shirt:before {
            content: "\ea29"
        }

        .icon.shuffle:before {
            content: "\ea2a"
        }

        .icon.sliders.horizontal:before {
            content: "\ea2b"
        }

        .icon.sliders.horizontal.alt:before {
            content: "\ea73"
        }

        .icon.sliders.vertical:before {
            content: "\ea2c"
        }

        .icon.sliders.vertical.alt:before {
            content: "\ea7b"
        }

        .icon.smartphone:before {
            content: "\ea2d"
        }

        .icon.smile:before {
            content: "\ea2e"
        }

        .icon.snowflake:before {
            content: "\ea2f"
        }

        .icon.sort.ascending:before {
            content: "\ea30"
        }

        .icon.sort.descending:before {
            content: "\ea31"
        }

        .icon.soundcloud:before {
            content: "\ea32"
        }

        .icon.speaker:before {
            content: "\ea33"
        }

        .icon.spin.full:before {
            content: "\e92b"
        }

        .icon.spin.circles:before {
            content: "\ea34"
        }

        .icon.star:before {
            content: "\ea35"
        }

        .icon.star.full:before {
            content: "\ea36"
        }

        .icon.star.half:before {
            content: "\ea37"
        }

        .icon.step.backward:before {
            content: "\ea38"
        }

        .icon.step.forward:before {
            content: "\ea39"
        }

        .icon.stop:before {
            content: "\ea3a"
        }

        .icon.stop.watch:before {
            content: "\ea3b"
        }

        .icon.storage:before {
            content: "\e92e"
        }

        .icon.storage.alt:before {
            content: "\ea3c"
        }

        .icon.sunset:before {
            content: "\ea3d"
        }

        .icon.switch:before {
            content: "\ea3e"
        }

        .icon.tab:before {
            content: "\ea42"
        }

        .icon.tablet:before {
            content: "\ea43"
        }

        .icon.tag:before {
            content: "\ea44"
        }

        .icon.tag.delete:before {
            content: "\ea45"
        }

        .icon.tags:before {
            content: "\ea46"
        }

        .icon.target:before {
            content: "\ea47"
        }

        .icon.tennis.ball:before {
            content: "\ea48"
        }

        .icon.thumbs.down:before {
            content: "\ea49"
        }

        .icon.thumbs.up:before {
            content: "\ea4a"
        }

        .icon.tie:before {
            content: "\ea4b"
        }

        .icon.timeline:before {
            content: "\ea4c"
        }

        .icon.toggle.off:before {
            content: "\ea3f"
        }

        .icon.toggle.off.alt:before {
            content: "\ea40"
        }

        .icon.toggle.on:before {
            content: "\ea41"
        }

        .icon.toggle.on.alt:before {
            content: "\ea4d"
        }

        .icon.trailer:before {
            content: "\ea4e"
        }

        .icon.train:before {
            content: "\ea4f"
        }

        .icon.trash:before {
            content: "\ea51"
        }

        .icon.trash.alt:before {
            content: "\ea50"
        }

        .icon.triangle.down:before {
            content: "\ea52"
        }

        .icon.triangle.left:before {
            content: "\ea53"
        }

        .icon.triangle.right:before {
            content: "\ea54"
        }

        .icon.triangle.unfold.more:before {
            content: "\ea55"
        }

        .icon.triangle.up:before {
            content: "\ea56"
        }

        .icon.trophy:before {
            content: "\ea57"
        }

        .icon.tumblr:before {
            content: "\ea58"
        }

        .icon.twitter:before {
            content: "\ea5a"
        }

        .icon.umbrella:before {
            content: "\ea5b"
        }

        .icon.underline:before {
            content: "\ea5c"
        }

        .icon.undo:before {
            content: "\ea5d"
        }

        .icon.unfold.in:before {
            content: "\ea5e"
        }

        .icon.unfold.less:before {
            content: "\ea5f"
        }

        .icon.unfold.more:before {
            content: "\ea60"
        }

        .icon.unfold.out:before {
            content: "\ea61"
        }

        .icon.unlink:before {
            content: "\ea62"
        }

        .icon.unlock:before {
            content: "\ea63"
        }

        .icon.unordered.list:before {
            content: "\ea64"
        }

        .icon.upload:before {
            content: "\ea65"
        }

        .icon.upload.alt:before {
            content: "\ea66"
        }

        .icon.url:before {
            content: "\ea68"
        }

        .icon.url.alt:before {
            content: "\ea69"
        }

        .icon.usb.stick:before {
            content: "\ea6a"
        }

        .icon.user:before {
            content: "\ea6b"
        }

        .icon.user.add:before {
            content: "\ea6c"
        }

        .icon.user.alt:before {
            content: "\ea6d"
        }

        .icon.user.profile:before {
            content: "\ea6e"
        }

        .icon.user.remove:before {
            content: "\ea6f"
        }

        .icon.users:before {
            content: "\ea70"
        }

        .icon.view.agenda:before {
            content: "\ea74"
        }

        .icon.view.day:before {
            content: "\ea75"
        }

        .icon.view.grid:before {
            content: "\ea76"
        }

        .icon.view.list:before {
            content: "\ea77"
        }

        .icon.view.week:before {
            content: "\ea78"
        }

        .icon.vimeo:before {
            content: "\ea79"
        }

        .icon.voicemail:before {
            content: "\ea7a"
        }

        .icon.volume:before {
            content: "\e9fb"
        }

        .icon.wallet:before {
            content: "\ea7c"
        }

        .icon.wallpaper:before {
            content: "\ea7d"
        }

        .icon.wand:before {
            content: "\ea7e"
        }

        .icon.warning.sign:before {
            content: "\ea7f"
        }

        .icon.water:before {
            content: "\ea80"
        }

        .icon.weather.cloud:before {
            content: "\ea82"
        }

        .icon.widgets:before {
            content: "\ea87"
        }

        .icon.wifi.full:before {
            content: "\ea88"
        }

        .icon.wifi.low:before {
            content: "\ea89"
        }

        .icon.windows:before {
            content: "\ea8a"
        }

        .icon.wojologo:before {
            content: "\ea8b"
        }

        .icon.wojologo.alt:before {
            content: "\ea8c"
        }

        .icon.wysiwyg.align.center:before {
            content: "\ea8e"
        }

        .icon.wysiwyg.align.justify:before {
            content: "\ea8f"
        }

        .icon.wysiwyg.align.left:before {
            content: "\ea90"
        }

        .icon.wysiwyg.align.right:before {
            content: "\ea91"
        }

        .icon.wysiwyg.bold:before {
            content: "\ea92"
        }

        .icon.wysiwyg.border.dashed:before {
            content: "\eaa0"
        }

        .icon.wysiwyg.border.dotted:before {
            content: "\eaa1"
        }

        .icon.wysiwyg.border.double:before {
            content: "\eaa2"
        }

        .icon.wysiwyg.border.inset:before {
            content: "\eaa5"
        }

        .icon.wysiwyg.border.outset:before {
            content: "\eaa6"
        }

        .icon.wysiwyg.border.solid:before {
            content: "\eaa3"
        }

        .icon.wysiwyg.color:before {
            content: "\ea93"
        }

        .icon.wysiwyg.font:before {
            content: "\ea94"
        }

        .icon.wysiwyg.gradient:before {
            content: "\eaa4"
        }

        .icon.wysiwyg.italic:before {
            content: "\ea95"
        }

        .icon.wysiwyg.paragraph:before {
            content: "\ea96"
        }

        .icon.wysiwyg.picture:before {
            content: "\eaa7"
        }

        .icon.wysiwyg.remove.format:before {
            content: "\ea97"
        }

        .icon.wysiwyg.size:before {
            content: "\ea98"
        }

        .icon.wysiwyg.strikethrough:before {
            content: "\ea99"
        }

        .icon.wysiwyg.subscript:before {
            content: "\ea9a"
        }

        .icon.wysiwyg.superscript:before {
            content: "\ea9b"
        }

        .icon.wysiwyg.table:before {
            content: "\ea9c"
        }

        .icon.wysiwyg.type:before {
            content: "\ea9d"
        }

        .icon.wysiwyg.underline:before {
            content: "\ea9e"
        }

        .icon.youtube:before {
            content: "\ea9f"
        }

        i.icon.spin {
            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
        }

        i.icon.disabled {
            opacity: .3
        }

        i.link.icon {
            opacity: .8;
            cursor: pointer
        }

        i.link.icon:hover {
            opacity: 1
        }

        i.circular.icon,
        i.rounded.icon {
            border-radius: 500em;
            text-align: center;
            box-sizing: content-box;
            box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15);
            line-height: 1rem;
            padding: .75em;
            vertical-align: middle
        }

        i.circular.inverted.icon,
        i.rounded.inverted.icon {
            box-shadow: none
        }

        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.rounded.icon {
            border-radius: 0.188em
        }

        i.rounded.icon.outline {
            color: #1e2022
        }

        i.rounded.inverted.icon {
            border: none;
            box-shadow: none
        }

        i.white.icon {
            color: #ffffff
        }

        i.black.icon {
            color: #1e2022
        }

        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.p i.information.icon {
            color: #1E88E5
        }

        i.inverted.rounded.black.icon,
        i.inverted.circular.black.icon {
            background-color: var(--dark-color-inverted);
            color: #FFFFFF
        }

        i.inverted.rounded.primary.icon,
        i.inverted.circular.primary.icon {
            background-color: var(--primary-color);
            color: var(--primary-color-inverted)
        }

        i.inverted.rounded.secondary.icon,
        i.inverted.circular.secondary.icon {
            background-color: var(--secondary-color);
            color: var(--secondary-color-inverted)
        }

        i.inverted.rounded.positive.icon,
        i.inverted.circular.positive.icon {
            background-color: var(--positive-color);
            color: var(--positive-color-inverted)
        }

        i.inverted.rounded.negative.icon,
        i.inverted.circular.negative.icon {
            background-color: var(--negative-color);
            color: var(--negative-color-inverted)
        }

        i.inverted.rounded.pink.icon,
        i.inverted.circular.pink.icon {
            background-color: #E91E63;
            color: #FFFFFF
        }

        i.inverted.rounded.purple.icon,
        i.inverted.circular.purple.icon {
            background-color: #9C27B0;
            color: #FFFFFF
        }

        i.inverted.rounded.info.icon,
        i.inverted.circular.info.icon {
            background-color: #1E88E5;
            color: #FFFFFF
        }

        i.inverted.simple.rounded.primary.icon,
        i.inverted.simple.circular.primary.icon {
            background-color: var(--primary-color-inverted);
            color: var(--primary-color)
        }

        i.inverted.simple.rounded.secondary.icon,
        i.inverted.simple.circular.secondary.icon {
            background-color: var(--secondary-color-inverted);
            color: var(--secondary-color)
        }

        i.inverted.simple.rounded.positive.icon,
        i.inverted.simple.circular.positive.icon {
            background-color: var(--positive-color-inverted);
            color: var(--positive-color)
        }

        i.inverted.simple.rounded.negative.icon,
        i.inverted.simple.circular.negative.icon {
            background-color: var(--negative-color-inverted);
            color: var(--negative-color)
        }

        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.circular.icon,
        i.tiny.rounded.icon {
            padding: .375rem;
            font-size: 1rem
        }

        i.small.icon {
            font-size: .938rem
        }

        i.small.circular.icon,
        i.small.rounded.icon {
            padding: .5rem;
            font-size: 1rem
        }

        i.icon {
            font-size: 1rem
        }

        i.medium.icon {
            font-size: 1.5rem
        }

        i.medium.circular.icon {
            line-height: 2.5rem;
            width: 2.5rem;
            height: 2.5rem
        }

        i.large.icon {
            font-size: 2rem;
            vertical-align: middle
        }

        i.large.circular.icon {
            line-height: 3rem;
            width: 3rem;
            height: 3rem
        }

        i.big.icon {
            font-size: 3rem;
            vertical-align: middle
        }

        i.big.circular.icon {
            line-height: 6rem;
            width: 6rem;
            height: 6rem
        }

        i.huge.icon {
            font-size: 4rem;
            vertical-align: middle
        }

        i.huge.circular.icon {
            box-shadow: 0em 0em 0em 4px rgba(0, 0, 0, 0.1) inset;
            line-height: 8rem;
            width: 8rem;
            height: 8rem
        }

        i.massive.icon {
            font-size: 6rem;
            vertical-align: middle
        }

        i.massive.circular.icon {
            box-shadow: 0em 0em 0em 5px rgba(0, 0, 0, 0.1) inset;
            line-height: 10rem;
            width: 10rem;
            height: 10rem
        }

        i.gigantic.icon {
            font-size: 8rem;
            vertical-align: middle
        }

        i.ginormous.icon {
            font-size: 12rem;
            vertical-align: middle;
            line-height: 1em
        }

        span.flag.icon {
            background-size: cover;
            background-position: 50%;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            line-height: 1
        }

        span.flag.icon:before {
            content: "\00a0"
        }

        span.flag.icon.squared {
            width: 1rem
        }

        .flag.icon.ad {
            background-image: url(../../../../../assets/flags/4x3/ad.svg)
        }

        .flag.icon.ad.squared {
            background-image: url(../../../../../assets/flags/1x1/ad.svg)
        }

        .flag.icon.ae {
            background-image: url(../../../../../assets/flags/4x3/ae.svg)
        }

        .flag.icon.ae.squared {
            background-image: url(../../../../../assets/flags/1x1/ae.svg)
        }

        .flag.icon.af {
            background-image: url(../../../../../assets/flags/4x3/af.svg)
        }

        .flag.icon.af.squared {
            background-image: url(../../../../../assets/flags/1x1/af.svg)
        }

        .flag.icon.ag {
            background-image: url(../../../../../assets/flags/4x3/ag.svg)
        }

        .flag.icon.ag.squared {
            background-image: url(../../../../../assets/flags/1x1/ag.svg)
        }

        .flag.icon.ai {
            background-image: url(../../../../../assets/flags/4x3/ai.svg)
        }

        .flag.icon.ai.squared {
            background-image: url(../../../../../assets/flags/1x1/ai.svg)
        }

        .flag.icon.al {
            background-image: url(../../../../../assets/flags/4x3/al.svg)
        }

        .flag.icon.al.squared {
            background-image: url(../../../../../assets/flags/1x1/al.svg)
        }

        .flag.icon.am {
            background-image: url(../../../../../assets/flags/4x3/am.svg)
        }

        .flag.icon.am.squared {
            background-image: url(../../../../../assets/flags/1x1/am.svg)
        }

        .flag.icon.ao {
            background-image: url(../../../../../assets/flags/4x3/ao.svg)
        }

        .flag.icon.ao.squared {
            background-image: url(../../../../../assets/flags/1x1/ao.svg)
        }

        .flag.icon.aq {
            background-image: url(../../../../../assets/flags/4x3/aq.svg)
        }

        .flag.icon.aq.squared {
            background-image: url(../../../../../assets/flags/1x1/aq.svg)
        }

        .flag.icon.ar {
            background-image: url(../../../../../assets/flags/4x3/ar.svg)
        }

        .flag.icon.ar.squared {
            background-image: url(../../../../../assets/flags/1x1/ar.svg)
        }

        .flag.icon.as {
            background-image: url(../../../../../assets/flags/4x3/as.svg)
        }

        .flag.icon.as.squared {
            background-image: url(../../../../../assets/flags/1x1/as.svg)
        }

        .flag.icon.at {
            background-image: url(../../../../../assets/flags/4x3/at.svg)
        }

        .flag.icon.at.squared {
            background-image: url(../../../../../assets/flags/1x1/at.svg)
        }

        .flag.icon.au {
            background-image: url(../../../../../assets/flags/4x3/au.svg)
        }

        .flag.icon.au.squared {
            background-image: url(../../../../../assets/flags/1x1/au.svg)
        }

        .flag.icon.aw {
            background-image: url(../../../../../assets/flags/4x3/aw.svg)
        }

        .flag.icon.aw.squared {
            background-image: url(../../../../../assets/flags/1x1/aw.svg)
        }

        .flag.icon.ax {
            background-image: url(../../../../../assets/flags/4x3/ax.svg)
        }

        .flag.icon.ax.squared {
            background-image: url(../../../../../assets/flags/1x1/ax.svg)
        }

        .flag.icon.az {
            background-image: url(../../../../../assets/flags/4x3/az.svg)
        }

        .flag.icon.az.squared {
            background-image: url(../../../../../assets/flags/1x1/az.svg)
        }

        .flag.icon.ba {
            background-image: url(../../../../../assets/flags/4x3/ba.svg)
        }

        .flag.icon.ba.squared {
            background-image: url(../../../../../assets/flags/1x1/ba.svg)
        }

        .flag.icon.bb {
            background-image: url(../../../../../assets/flags/4x3/bb.svg)
        }

        .flag.icon.bb.squared {
            background-image: url(../../../../../assets/flags/1x1/bb.svg)
        }

        .flag.icon.bd {
            background-image: url(../../../../../assets/flags/4x3/bd.svg)
        }

        .flag.icon.bd.squared {
            background-image: url(../../../../../assets/flags/1x1/bd.svg)
        }

        .flag.icon.be {
            background-image: url(../../../../../assets/flags/4x3/be.svg)
        }

        .flag.icon.be.squared {
            background-image: url(../../../../../assets/flags/1x1/be.svg)
        }

        .flag.icon.bf {
            background-image: url(../../../../../assets/flags/4x3/bf.svg)
        }

        .flag.icon.bf.squared {
            background-image: url(../../../../../assets/flags/1x1/bf.svg)
        }

        .flag.icon.bg {
            background-image: url(../../../../../assets/flags/4x3/bg.svg)
        }

        .flag.icon.bg.squared {
            background-image: url(../../../../../assets/flags/1x1/bg.svg)
        }

        .flag.icon.bh {
            background-image: url(../../../../../assets/flags/4x3/bh.svg)
        }

        .flag.icon.bh.squared {
            background-image: url(../../../../../assets/flags/1x1/bh.svg)
        }

        .flag.icon.bi {
            background-image: url(../../../../../assets/flags/4x3/bi.svg)
        }

        .flag.icon.bi.squared {
            background-image: url(../../../../../assets/flags/1x1/bi.svg)
        }

        .flag.icon.bj {
            background-image: url(../../../../../assets/flags/4x3/bj.svg)
        }

        .flag.icon.bj.squared {
            background-image: url(../../../../../assets/flags/1x1/bj.svg)
        }

        .flag.icon.bl {
            background-image: url(../../../../../assets/flags/4x3/bl.svg)
        }

        .flag.icon.bl.squared {
            background-image: url(../../../../../assets/flags/1x1/bl.svg)
        }

        .flag.icon.bm {
            background-image: url(../../../../../assets/flags/4x3/bm.svg)
        }

        .flag.icon.bm.squared {
            background-image: url(../../../../../assets/flags/1x1/bm.svg)
        }

        .flag.icon.bn {
            background-image: url(../../../../../assets/flags/4x3/bn.svg)
        }

        .flag.icon.bn.squared {
            background-image: url(../../../../../assets/flags/1x1/bn.svg)
        }

        .flag.icon.bo {
            background-image: url(../../../../../assets/flags/4x3/bo.svg)
        }

        .flag.icon.bo.squared {
            background-image: url(../../../../../assets/flags/1x1/bo.svg)
        }

        .flag.icon.bq {
            background-image: url(../../../../../assets/flags/4x3/bq.svg)
        }

        .flag.icon.bq.squared {
            background-image: url(../../../../../assets/flags/1x1/bq.svg)
        }

        .flag.icon.br {
            background-image: url(../../../../../assets/flags/4x3/br.svg)
        }

        .flag.icon.br.squared {
            background-image: url(../../../../../assets/flags/1x1/br.svg)
        }

        .flag.icon.bs {
            background-image: url(../../../../../assets/flags/4x3/bs.svg)
        }

        .flag.icon.bs.squared {
            background-image: url(../../../../../assets/flags/1x1/bs.svg)
        }

        .flag.icon.bt {
            background-image: url(../../../../../assets/flags/4x3/bt.svg)
        }

        .flag.icon.bt.squared {
            background-image: url(../../../../../assets/flags/1x1/bt.svg)
        }

        .flag.icon.bv {
            background-image: url(../../../../../assets/flags/4x3/bv.svg)
        }

        .flag.icon.bv.squared {
            background-image: url(../../../../../assets/flags/1x1/bv.svg)
        }

        .flag.icon.bw {
            background-image: url(../../../../../assets/flags/4x3/bw.svg)
        }

        .flag.icon.bw.squared {
            background-image: url(../../../../../assets/flags/1x1/bw.svg)
        }

        .flag.icon.by {
            background-image: url(../../../../../assets/flags/4x3/by.svg)
        }

        .flag.icon.by.squared {
            background-image: url(../../../../../assets/flags/1x1/by.svg)
        }

        .flag.icon.bz {
            background-image: url(../../../../../assets/flags/4x3/bz.svg)
        }

        .flag.icon.bz.squared {
            background-image: url(../../../../../assets/flags/1x1/bz.svg)
        }

        .flag.icon.ca {
            background-image: url(../../../../../assets/flags/4x3/ca.svg)
        }

        .flag.icon.ca.squared {
            background-image: url(../../../../../assets/flags/1x1/ca.svg)
        }

        .flag.icon.cc {
            background-image: url(../../../../../assets/flags/4x3/cc.svg)
        }

        .flag.icon.cc.squared {
            background-image: url(../../../../../assets/flags/1x1/cc.svg)
        }

        .flag.icon.cd {
            background-image: url(../../../../../assets/flags/4x3/cd.svg)
        }

        .flag.icon.cd.squared {
            background-image: url(../../../../../assets/flags/1x1/cd.svg)
        }

        .flag.icon.cf {
            background-image: url(../../../../../assets/flags/4x3/cf.svg)
        }

        .flag.icon.cf.squared {
            background-image: url(../../../../../assets/flags/1x1/cf.svg)
        }

        .flag.icon.cg {
            background-image: url(../../../../../assets/flags/4x3/cg.svg)
        }

        .flag.icon.cg.squared {
            background-image: url(../../../../../assets/flags/1x1/cg.svg)
        }

        .flag.icon.ch {
            background-image: url(../../../../../assets/flags/4x3/ch.svg)
        }

        .flag.icon.ch.squared {
            background-image: url(../../../../../assets/flags/1x1/ch.svg)
        }

        .flag.icon.ci {
            background-image: url(../../../../../assets/flags/4x3/ci.svg)
        }

        .flag.icon.ci.squared {
            background-image: url(../../../../../assets/flags/1x1/ci.svg)
        }

        .flag.icon.ck {
            background-image: url(../../../../../assets/flags/4x3/ck.svg)
        }

        .flag.icon.ck.squared {
            background-image: url(../../../../../assets/flags/1x1/ck.svg)
        }

        .flag.icon.cl {
            background-image: url(../../../../../assets/flags/4x3/cl.svg)
        }

        .flag.icon.cl.squared {
            background-image: url(../../../../../assets/flags/1x1/cl.svg)
        }

        .flag.icon.cm {
            background-image: url(../../../../../assets/flags/4x3/cm.svg)
        }

        .flag.icon.cm.squared {
            background-image: url(../../../../../assets/flags/1x1/cm.svg)
        }

        .flag.icon.cn {
            background-image: url(../../../../../assets/flags/4x3/cn.svg)
        }

        .flag.icon.cn.squared {
            background-image: url(../../../../../assets/flags/1x1/cn.svg)
        }

        .flag.icon.co {
            background-image: url(../../../../../assets/flags/4x3/co.svg)
        }

        .flag.icon.co.squared {
            background-image: url(../../../../../assets/flags/1x1/co.svg)
        }

        .flag.icon.cr {
            background-image: url(../../../../../assets/flags/4x3/cr.svg)
        }

        .flag.icon.cr.squared {
            background-image: url(../../../../../assets/flags/1x1/cr.svg)
        }

        .flag.icon.cu {
            background-image: url(../../../../../assets/flags/4x3/cu.svg)
        }

        .flag.icon.cu.squared {
            background-image: url(../../../../../assets/flags/1x1/cu.svg)
        }

        .flag.icon.cv {
            background-image: url(../../../../../assets/flags/4x3/cv.svg)
        }

        .flag.icon.cv.squared {
            background-image: url(../../../../../assets/flags/1x1/cv.svg)
        }

        .flag.icon.cw {
            background-image: url(../../../../../assets/flags/4x3/cw.svg)
        }

        .flag.icon.cw.squared {
            background-image: url(../../../../../assets/flags/1x1/cw.svg)
        }

        .flag.icon.cx {
            background-image: url(../../../../../assets/flags/4x3/cx.svg)
        }

        .flag.icon.cx.squared {
            background-image: url(../../../../../assets/flags/1x1/cx.svg)
        }

        .flag.icon.cy {
            background-image: url(../../../../../assets/flags/4x3/cy.svg)
        }

        .flag.icon.cy.squared {
            background-image: url(../../../../../assets/flags/1x1/cy.svg)
        }

        .flag.icon.cz {
            background-image: url(../../../../../assets/flags/4x3/cz.svg)
        }

        .flag.icon.cz.squared {
            background-image: url(../../../../../assets/flags/1x1/cz.svg)
        }

        .flag.icon.de {
            background-image: url(../../../../../assets/flags/4x3/de.svg)
        }

        .flag.icon.de.squared {
            background-image: url(../../../../../assets/flags/1x1/de.svg)
        }

        .flag.icon.dj {
            background-image: url(../../../../../assets/flags/4x3/dj.svg)
        }

        .flag.icon.dj.squared {
            background-image: url(../../../../../assets/flags/1x1/dj.svg)
        }

        .flag.icon.dk {
            background-image: url(../../../../../assets/flags/4x3/dk.svg)
        }

        .flag.icon.dk.squared {
            background-image: url(../../../../../assets/flags/1x1/dk.svg)
        }

        .flag.icon.dm {
            background-image: url(../../../../../assets/flags/4x3/dm.svg)
        }

        .flag.icon.dm.squared {
            background-image: url(../../../../../assets/flags/1x1/dm.svg)
        }

        .flag.icon.do {
            background-image: url(../../../../../assets/flags/4x3/do.svg)
        }

        .flag.icon.do.squared {
            background-image: url(../../../../../assets/flags/1x1/do.svg)
        }

        .flag.icon.dz {
            background-image: url(../../../../../assets/flags/4x3/dz.svg)
        }

        .flag.icon.dz.squared {
            background-image: url(../../../../../assets/flags/1x1/dz.svg)
        }

        .flag.icon.ec {
            background-image: url(../../../../../assets/flags/4x3/ec.svg)
        }

        .flag.icon.ec.squared {
            background-image: url(../../../../../assets/flags/1x1/ec.svg)
        }

        .flag.icon.ee {
            background-image: url(../../../../../assets/flags/4x3/ee.svg)
        }

        .flag.icon.ee.squared {
            background-image: url(../../../../../assets/flags/1x1/ee.svg)
        }

        .flag.icon.eg {
            background-image: url(../../../../../assets/flags/4x3/eg.svg)
        }

        .flag.icon.eg.squared {
            background-image: url(../../../../../assets/flags/1x1/eg.svg)
        }

        .flag.icon.eh {
            background-image: url(../../../../../assets/flags/4x3/eh.svg)
        }

        .flag.icon.eh.squared {
            background-image: url(../../../../../assets/flags/1x1/eh.svg)
        }

        .flag.icon.er {
            background-image: url(../../../../../assets/flags/4x3/er.svg)
        }

        .flag.icon.er.squared {
            background-image: url(../../../../../assets/flags/1x1/er.svg)
        }

        .flag.icon.es {
            background-image: url(../../../../../assets/flags/4x3/es.svg)
        }

        .flag.icon.es.squared {
            background-image: url(../../../../../assets/flags/1x1/es.svg)
        }

        .flag.icon.et {
            background-image: url(../../../../../assets/flags/4x3/et.svg)
        }

        .flag.icon.et.squared {
            background-image: url(../../../../../assets/flags/1x1/et.svg)
        }

        .flag.icon.fi {
            background-image: url(../../../../../assets/flags/4x3/fi.svg)
        }

        .flag.icon.fi.squared {
            background-image: url(../../../../../assets/flags/1x1/fi.svg)
        }

        .flag.icon.fj {
            background-image: url(../../../../../assets/flags/4x3/fj.svg)
        }

        .flag.icon.fj.squared {
            background-image: url(../../../../../assets/flags/1x1/fj.svg)
        }

        .flag.icon.fk {
            background-image: url(../../../../../assets/flags/4x3/fk.svg)
        }

        .flag.icon.fk.squared {
            background-image: url(../../../../../assets/flags/1x1/fk.svg)
        }

        .flag.icon.fm {
            background-image: url(../../../../../assets/flags/4x3/fm.svg)
        }

        .flag.icon.fm.squared {
            background-image: url(../../../../../assets/flags/1x1/fm.svg)
        }

        .flag.icon.fo {
            background-image: url(../../../../../assets/flags/4x3/fo.svg)
        }

        .flag.icon.fo.squared {
            background-image: url(../../../../../assets/flags/1x1/fo.svg)
        }

        .flag.icon.fr {
            background-image: url(../../../../../assets/flags/4x3/fr.svg)
        }

        .flag.icon.fr.squared {
            background-image: url(../../../../../assets/flags/1x1/fr.svg)
        }

        .flag.icon.ga {
            background-image: url(../../../../../assets/flags/4x3/ga.svg)
        }

        .flag.icon.ga.squared {
            background-image: url(../../../../../assets/flags/1x1/ga.svg)
        }

        .flag.icon.gb,
        .flag.icon.en {
            background-image: url(../../../../../assets/flags/4x3/gb.svg)
        }

        .flag.icon.gb.squared,
        .flag.icon.en.squared {
            background-image: url(../../../../../assets/flags/1x1/gb.svg)
        }

        .flag.icon.gd {
            background-image: url(../../../../../assets/flags/4x3/gd.svg)
        }

        .flag.icon.gd.squared {
            background-image: url(../../../../../assets/flags/1x1/gd.svg)
        }

        .flag.icon.ge {
            background-image: url(../../../../../assets/flags/4x3/ge.svg)
        }

        .flag.icon.ge.squared {
            background-image: url(../../../../../assets/flags/1x1/ge.svg)
        }

        .flag.icon.gf {
            background-image: url(../../../../../assets/flags/4x3/gf.svg)
        }

        .flag.icon.gf.squared {
            background-image: url(../../../../../assets/flags/1x1/gf.svg)
        }

        .flag.icon.gg {
            background-image: url(../../../../../assets/flags/4x3/gg.svg)
        }

        .flag.icon.gg.squared {
            background-image: url(../../../../../assets/flags/1x1/gg.svg)
        }

        .flag.icon.gh {
            background-image: url(../../../../../assets/flags/4x3/gh.svg)
        }

        .flag.icon.gh.squared {
            background-image: url(../../../../../assets/flags/1x1/gh.svg)
        }

        .flag.icon.gi {
            background-image: url(../../../../../assets/flags/4x3/gi.svg)
        }

        .flag.icon.gi.squared {
            background-image: url(../../../../../assets/flags/1x1/gi.svg)
        }

        .flag.icon.gl {
            background-image: url(../../../../../assets/flags/4x3/gl.svg)
        }

        .flag.icon.gl.squared {
            background-image: url(../../../../../assets/flags/1x1/gl.svg)
        }

        .flag.icon.gm {
            background-image: url(../../../../../assets/flags/4x3/gm.svg)
        }

        .flag.icon.gm.squared {
            background-image: url(../../../../../assets/flags/1x1/gm.svg)
        }

        .flag.icon.gn {
            background-image: url(../../../../../assets/flags/4x3/gn.svg)
        }

        .flag.icon.gn.squared {
            background-image: url(../../../../../assets/flags/1x1/gn.svg)
        }

        .flag.icon.gp {
            background-image: url(../../../../../assets/flags/4x3/gp.svg)
        }

        .flag.icon.gp.squared {
            background-image: url(../../../../../assets/flags/1x1/gp.svg)
        }

        .flag.icon.gq {
            background-image: url(../../../../../assets/flags/4x3/gq.svg)
        }

        .flag.icon.gq.squared {
            background-image: url(../../../../../assets/flags/1x1/gq.svg)
        }

        .flag.icon.gr {
            background-image: url(../../../../../assets/flags/4x3/gr.svg)
        }

        .flag.icon.gr.squared {
            background-image: url(../../../../../assets/flags/1x1/gr.svg)
        }

        .flag.icon.gs {
            background-image: url(../../../../../assets/flags/4x3/gs.svg)
        }

        .flag.icon.gs.squared {
            background-image: url(../../../../../assets/flags/1x1/gs.svg)
        }

        .flag.icon.gt {
            background-image: url(../../../../../assets/flags/4x3/gt.svg)
        }

        .flag.icon.gt.squared {
            background-image: url(../../../../../assets/flags/1x1/gt.svg)
        }

        .flag.icon.gu {
            background-image: url(../../../../../assets/flags/4x3/gu.svg)
        }

        .flag.icon.gu.squared {
            background-image: url(../../../../../assets/flags/1x1/gu.svg)
        }

        .flag.icon.gw {
            background-image: url(../../../../../assets/flags/4x3/gw.svg)
        }

        .flag.icon.gw.squared {
            background-image: url(../../../../../assets/flags/1x1/gw.svg)
        }

        .flag.icon.gy {
            background-image: url(../../../../../assets/flags/4x3/gy.svg)
        }

        .flag.icon.gy.squared {
            background-image: url(../../../../../assets/flags/1x1/gy.svg)
        }

        .flag.icon.hk {
            background-image: url(../../../../../assets/flags/4x3/hk.svg)
        }

        .flag.icon.hk.squared {
            background-image: url(../../../../../assets/flags/1x1/hk.svg)
        }

        .flag.icon.hm {
            background-image: url(../../../../../assets/flags/4x3/hm.svg)
        }

        .flag.icon.hm.squared {
            background-image: url(../../../../../assets/flags/1x1/hm.svg)
        }

        .flag.icon.hn {
            background-image: url(../../../../../assets/flags/4x3/hn.svg)
        }

        .flag.icon.hn.squared {
            background-image: url(../../../../../assets/flags/1x1/hn.svg)
        }

        .flag.icon.hr {
            background-image: url(../../../../../assets/flags/4x3/hr.svg)
        }

        .flag.icon.hr.squared {
            background-image: url(../../../../../assets/flags/1x1/hr.svg)
        }

        .flag.icon.ht {
            background-image: url(../../../../../assets/flags/4x3/ht.svg)
        }

        .flag.icon.ht.squared {
            background-image: url(../../../../../assets/flags/1x1/ht.svg)
        }

        .flag.icon.hu {
            background-image: url(../../../../../assets/flags/4x3/hu.svg)
        }

        .flag.icon.hu.squared {
            background-image: url(../../../../../assets/flags/1x1/hu.svg)
        }

        .flag.icon.id {
            background-image: url(../../../../../assets/flags/4x3/id.svg)
        }

        .flag.icon.id.squared {
            background-image: url(../../../../../assets/flags/1x1/id.svg)
        }

        .flag.icon.ie {
            background-image: url(../../../../../assets/flags/4x3/ie.svg)
        }

        .flag.icon.ie.squared {
            background-image: url(../../../../../assets/flags/1x1/ie.svg)
        }

        .flag.icon.il {
            background-image: url(../../../../../assets/flags/4x3/il.svg)
        }

        .flag.icon.il.squared {
            background-image: url(../../../../../assets/flags/1x1/il.svg)
        }

        .flag.icon.im {
            background-image: url(../../../../../assets/flags/4x3/im.svg)
        }

        .flag.icon.im.squared {
            background-image: url(../../../../../assets/flags/1x1/im.svg)
        }

        .flag.icon.in {
            background-image: url(../../../../../assets/flags/4x3/in.svg)
        }

        .flag.icon.in.squared {
            background-image: url(../../../../../assets/flags/1x1/in.svg)
        }

        .flag.icon.io {
            background-image: url(../../../../../assets/flags/4x3/io.svg)
        }

        .flag.icon.io.squared {
            background-image: url(../../../../../assets/flags/1x1/io.svg)
        }

        .flag.icon.iq {
            background-image: url(../../../../../assets/flags/4x3/iq.svg)
        }

        .flag.icon.iq.squared {
            background-image: url(../../../../../assets/flags/1x1/iq.svg)
        }

        .flag.icon.ir {
            background-image: url(../../../../../assets/flags/4x3/ir.svg)
        }

        .flag.icon.ir.squared {
            background-image: url(../../../../../assets/flags/1x1/ir.svg)
        }

        .flag.icon.is {
            background-image: url(../../../../../assets/flags/4x3/is.svg)
        }

        .flag.icon.is.squared {
            background-image: url(../../../../../assets/flags/1x1/is.svg)
        }

        .flag.icon.it {
            background-image: url(../../../../../assets/flags/4x3/it.svg)
        }

        .flag.icon.it.squared {
            background-image: url(../../../../../assets/flags/1x1/it.svg)
        }

        .flag.icon.je {
            background-image: url(../../../../../assets/flags/4x3/je.svg)
        }

        .flag.icon.je.squared {
            background-image: url(../../../../../assets/flags/1x1/je.svg)
        }

        .flag.icon.jm {
            background-image: url(../../../../../assets/flags/4x3/jm.svg)
        }

        .flag.icon.jm.squared {
            background-image: url(../../../../../assets/flags/1x1/jm.svg)
        }

        .flag.icon.jo {
            background-image: url(../../../../../assets/flags/4x3/jo.svg)
        }

        .flag.icon.jo.squared {
            background-image: url(../../../../../assets/flags/1x1/jo.svg)
        }

        .flag.icon.jp {
            background-image: url(../../../../../assets/flags/4x3/jp.svg)
        }

        .flag.icon.jp.squared {
            background-image: url(../../../../../assets/flags/1x1/jp.svg)
        }

        .flag.icon.ke {
            background-image: url(../../../../../assets/flags/4x3/ke.svg)
        }

        .flag.icon.ke.squared {
            background-image: url(../../../../../assets/flags/1x1/ke.svg)
        }

        .flag.icon.kg {
            background-image: url(../../../../../assets/flags/4x3/kg.svg)
        }

        .flag.icon.kg.squared {
            background-image: url(../../../../../assets/flags/1x1/kg.svg)
        }

        .flag.icon.kh {
            background-image: url(../../../../../assets/flags/4x3/kh.svg)
        }

        .flag.icon.kh.squared {
            background-image: url(../../../../../assets/flags/1x1/kh.svg)
        }

        .flag.icon.ki {
            background-image: url(../../../../../assets/flags/4x3/ki.svg)
        }

        .flag.icon.ki.squared {
            background-image: url(../../../../../assets/flags/1x1/ki.svg)
        }

        .flag.icon.km {
            background-image: url(../../../../../assets/flags/4x3/km.svg)
        }

        .flag.icon.km.squared {
            background-image: url(../../../../../assets/flags/1x1/km.svg)
        }

        .flag.icon.kn {
            background-image: url(../../../../../assets/flags/4x3/kn.svg)
        }

        .flag.icon.kn.squared {
            background-image: url(../../../../../assets/flags/1x1/kn.svg)
        }

        .flag.icon.kp {
            background-image: url(../../../../../assets/flags/4x3/kp.svg)
        }

        .flag.icon.kp.squared {
            background-image: url(../../../../../assets/flags/1x1/kp.svg)
        }

        .flag.icon.kr {
            background-image: url(../../../../../assets/flags/4x3/kr.svg)
        }

        .flag.icon.kr.squared {
            background-image: url(../../../../../assets/flags/1x1/kr.svg)
        }

        .flag.icon.kw {
            background-image: url(../../../../../assets/flags/4x3/kw.svg)
        }

        .flag.icon.kw.squared {
            background-image: url(../../../../../assets/flags/1x1/kw.svg)
        }

        .flag.icon.ky {
            background-image: url(../../../../../assets/flags/4x3/ky.svg)
        }

        .flag.icon.ky.squared {
            background-image: url(../../../../../assets/flags/1x1/ky.svg)
        }

        .flag.icon.kz {
            background-image: url(../../../../../assets/flags/4x3/kz.svg)
        }

        .flag.icon.kz.squared {
            background-image: url(../../../../../assets/flags/1x1/kz.svg)
        }

        .flag.icon.la {
            background-image: url(../../../../../assets/flags/4x3/la.svg)
        }

        .flag.icon.la.squared {
            background-image: url(../../../../../assets/flags/1x1/la.svg)
        }

        .flag.icon.lb {
            background-image: url(../../../../../assets/flags/4x3/lb.svg)
        }

        .flag.icon.lb.squared {
            background-image: url(../../../../../assets/flags/1x1/lb.svg)
        }

        .flag.icon.lc {
            background-image: url(../../../../../assets/flags/4x3/lc.svg)
        }

        .flag.icon.lc.squared {
            background-image: url(../../../../../assets/flags/1x1/lc.svg)
        }

        .flag.icon.li {
            background-image: url(../../../../../assets/flags/4x3/li.svg)
        }

        .flag.icon.li.squared {
            background-image: url(../../../../../assets/flags/1x1/li.svg)
        }

        .flag.icon.lk {
            background-image: url(../../../../../assets/flags/4x3/lk.svg)
        }

        .flag.icon.lk.squared {
            background-image: url(../../../../../assets/flags/1x1/lk.svg)
        }

        .flag.icon.lr {
            background-image: url(../../../../../assets/flags/4x3/lr.svg)
        }

        .flag.icon.lr.squared {
            background-image: url(../../../../../assets/flags/1x1/lr.svg)
        }

        .flag.icon.ls {
            background-image: url(../../../../../assets/flags/4x3/ls.svg)
        }

        .flag.icon.ls.squared {
            background-image: url(../../../../../assets/flags/1x1/ls.svg)
        }

        .flag.icon.lt {
            background-image: url(../../../../../assets/flags/4x3/lt.svg)
        }

        .flag.icon.lt.squared {
            background-image: url(../../../../../assets/flags/1x1/lt.svg)
        }

        .flag.icon.lu {
            background-image: url(../../../../../assets/flags/4x3/lu.svg)
        }

        .flag.icon.lu.squared {
            background-image: url(../../../../../assets/flags/1x1/lu.svg)
        }

        .flag.icon.lv {
            background-image: url(../../../../../assets/flags/4x3/lv.svg)
        }

        .flag.icon.lv.squared {
            background-image: url(../../../../../assets/flags/1x1/lv.svg)
        }

        .flag.icon.ly {
            background-image: url(../../../../../assets/flags/4x3/ly.svg)
        }

        .flag.icon.ly.squared {
            background-image: url(../../../../../assets/flags/1x1/ly.svg)
        }

        .flag.icon.ma {
            background-image: url(../../../../../assets/flags/4x3/ma.svg)
        }

        .flag.icon.ma.squared {
            background-image: url(../../../../../assets/flags/1x1/ma.svg)
        }

        .flag.icon.mc {
            background-image: url(../../../../../assets/flags/4x3/mc.svg)
        }

        .flag.icon.mc.squared {
            background-image: url(../../../../../assets/flags/1x1/mc.svg)
        }

        .flag.icon.md {
            background-image: url(../../../../../assets/flags/4x3/md.svg)
        }

        .flag.icon.md.squared {
            background-image: url(../../../../../assets/flags/1x1/md.svg)
        }

        .flag.icon.me {
            background-image: url(../../../../../assets/flags/4x3/me.svg)
        }

        .flag.icon.me.squared {
            background-image: url(../../../../../assets/flags/1x1/me.svg)
        }

        .flag.icon.mf {
            background-image: url(../../../../../assets/flags/4x3/mf.svg)
        }

        .flag.icon.mf.squared {
            background-image: url(../../../../../assets/flags/1x1/mf.svg)
        }

        .flag.icon.mg {
            background-image: url(../../../../../assets/flags/4x3/mg.svg)
        }

        .flag.icon.mg.squared {
            background-image: url(../../../../../assets/flags/1x1/mg.svg)
        }

        .flag.icon.mh {
            background-image: url(../../../../../assets/flags/4x3/mh.svg)
        }

        .flag.icon.mh.squared {
            background-image: url(../../../../../assets/flags/1x1/mh.svg)
        }

        .flag.icon.mk {
            background-image: url(../../../../../assets/flags/4x3/mk.svg)
        }

        .flag.icon.mk.squared {
            background-image: url(../../../../../assets/flags/1x1/mk.svg)
        }

        .flag.icon.ml {
            background-image: url(../../../../../assets/flags/4x3/ml.svg)
        }

        .flag.icon.ml.squared {
            background-image: url(../../../../../assets/flags/1x1/ml.svg)
        }

        .flag.icon.mm {
            background-image: url(../../../../../assets/flags/4x3/mm.svg)
        }

        .flag.icon.mm.squared {
            background-image: url(../../../../../assets/flags/1x1/mm.svg)
        }

        .flag.icon.mn {
            background-image: url(../../../../../assets/flags/4x3/mn.svg)
        }

        .flag.icon.mn.squared {
            background-image: url(../../../../../assets/flags/1x1/mn.svg)
        }

        .flag.icon.mo {
            background-image: url(../../../../../assets/flags/4x3/mo.svg)
        }

        .flag.icon.mo.squared {
            background-image: url(../../../../../assets/flags/1x1/mo.svg)
        }

        .flag.icon.mp {
            background-image: url(../../../../../assets/flags/4x3/mp.svg)
        }

        .flag.icon.mp.squared {
            background-image: url(../../../../../assets/flags/1x1/mp.svg)
        }

        .flag.icon.mq {
            background-image: url(../../../../../assets/flags/4x3/mq.svg)
        }

        .flag.icon.mq.squared {
            background-image: url(../../../../../assets/flags/1x1/mq.svg)
        }

        .flag.icon.mr {
            background-image: url(../../../../../assets/flags/4x3/mr.svg)
        }

        .flag.icon.mr.squared {
            background-image: url(../../../../../assets/flags/1x1/mr.svg)
        }

        .flag.icon.ms {
            background-image: url(../../../../../assets/flags/4x3/ms.svg)
        }

        .flag.icon.ms.squared {
            background-image: url(../../../../../assets/flags/1x1/ms.svg)
        }

        .flag.icon.mt {
            background-image: url(../../../../../assets/flags/4x3/mt.svg)
        }

        .flag.icon.mt.squared {
            background-image: url(../../../../../assets/flags/1x1/mt.svg)
        }

        .flag.icon.mu {
            background-image: url(../../../../../assets/flags/4x3/mu.svg)
        }

        .flag.icon.mu.squared {
            background-image: url(../../../../../assets/flags/1x1/mu.svg)
        }

        .flag.icon.mv {
            background-image: url(../../../../../assets/flags/4x3/mv.svg)
        }

        .flag.icon.mv.squared {
            background-image: url(../../../../../assets/flags/1x1/mv.svg)
        }

        .flag.icon.mw {
            background-image: url(../../../../../assets/flags/4x3/mw.svg)
        }

        .flag.icon.mw.squared {
            background-image: url(../../../../../assets/flags/1x1/mw.svg)
        }

        .flag.icon.mx {
            background-image: url(../../../../../assets/flags/4x3/mx.svg)
        }

        .flag.icon.mx.squared {
            background-image: url(../../../../../assets/flags/1x1/mx.svg)
        }

        .flag.icon.my {
            background-image: url(../../../../../assets/flags/4x3/my.svg)
        }

        .flag.icon.my.squared {
            background-image: url(../../../../../assets/flags/1x1/my.svg)
        }

        .flag.icon.mz {
            background-image: url(../../../../../assets/flags/4x3/mz.svg)
        }

        .flag.icon.mz.squared {
            background-image: url(../../../../../assets/flags/1x1/mz.svg)
        }

        .flag.icon.na {
            background-image: url(../../../../../assets/flags/4x3/na.svg)
        }

        .flag.icon.na.squared {
            background-image: url(../../../../../assets/flags/1x1/na.svg)
        }

        .flag.icon.nc {
            background-image: url(../../../../../assets/flags/4x3/nc.svg)
        }

        .flag.icon.nc.squared {
            background-image: url(../../../../../assets/flags/1x1/nc.svg)
        }

        .flag.icon.ne {
            background-image: url(../../../../../assets/flags/4x3/ne.svg)
        }

        .flag.icon.ne.squared {
            background-image: url(../../../../../assets/flags/1x1/ne.svg)
        }

        .flag.icon.nf {
            background-image: url(../../../../../assets/flags/4x3/nf.svg)
        }

        .flag.icon.nf.squared {
            background-image: url(../../../../../assets/flags/1x1/nf.svg)
        }

        .flag.icon.ng {
            background-image: url(../../../../../assets/flags/4x3/ng.svg)
        }

        .flag.icon.ng.squared {
            background-image: url(../../../../../assets/flags/1x1/ng.svg)
        }

        .flag.icon.ni {
            background-image: url(../../../../../assets/flags/4x3/ni.svg)
        }

        .flag.icon.ni.squared {
            background-image: url(../../../../../assets/flags/1x1/ni.svg)
        }

        .flag.icon.nl {
            background-image: url(../../../../../assets/flags/4x3/nl.svg)
        }

        .flag.icon.nl.squared {
            background-image: url(../../../../../assets/flags/1x1/nl.svg)
        }

        .flag.icon.no {
            background-image: url(../../../../../assets/flags/4x3/no.svg)
        }

        .flag.icon.no.squared {
            background-image: url(../../../../../assets/flags/1x1/no.svg)
        }

        .flag.icon.np {
            background-image: url(../../../../../assets/flags/4x3/np.svg)
        }

        .flag.icon.np.squared {
            background-image: url(../../../../../assets/flags/1x1/np.svg)
        }

        .flag.icon.nr {
            background-image: url(../../../../../assets/flags/4x3/nr.svg)
        }

        .flag.icon.nr.squared {
            background-image: url(../../../../../assets/flags/1x1/nr.svg)
        }

        .flag.icon.nu {
            background-image: url(../../../../../assets/flags/4x3/nu.svg)
        }

        .flag.icon.nu.squared {
            background-image: url(../../../../../assets/flags/1x1/nu.svg)
        }

        .flag.icon.nz {
            background-image: url(../../../../../assets/flags/4x3/nz.svg)
        }

        .flag.icon.nz.squared {
            background-image: url(../../../../../assets/flags/1x1/nz.svg)
        }

        .flag.icon.om {
            background-image: url(../../../../../assets/flags/4x3/om.svg)
        }

        .flag.icon.om.squared {
            background-image: url(../../../../../assets/flags/1x1/om.svg)
        }

        .flag.icon.pa {
            background-image: url(../../../../../assets/flags/4x3/pa.svg)
        }

        .flag.icon.pa.squared {
            background-image: url(../../../../../assets/flags/1x1/pa.svg)
        }

        .flag.icon.pe {
            background-image: url(../../../../../assets/flags/4x3/pe.svg)
        }

        .flag.icon.pe.squared {
            background-image: url(../../../../../assets/flags/1x1/pe.svg)
        }

        .flag.icon.pf {
            background-image: url(../../../../../assets/flags/4x3/pf.svg)
        }

        .flag.icon.pf.squared {
            background-image: url(../../../../../assets/flags/1x1/pf.svg)
        }

        .flag.icon.pg {
            background-image: url(../../../../../assets/flags/4x3/pg.svg)
        }

        .flag.icon.pg.squared {
            background-image: url(../../../../../assets/flags/1x1/pg.svg)
        }

        .flag.icon.ph {
            background-image: url(../../../../../assets/flags/4x3/ph.svg)
        }

        .flag.icon.ph.squared {
            background-image: url(../../../../../assets/flags/1x1/ph.svg)
        }

        .flag.icon.pk {
            background-image: url(../../../../../assets/flags/4x3/pk.svg)
        }

        .flag.icon.pk.squared {
            background-image: url(../../../../../assets/flags/1x1/pk.svg)
        }

        .flag.icon.pl {
            background-image: url(../../../../../assets/flags/4x3/pl.svg)
        }

        .flag.icon.pl.squared {
            background-image: url(../../../../../assets/flags/1x1/pl.svg)
        }

        .flag.icon.pm {
            background-image: url(../../../../../assets/flags/4x3/pm.svg)
        }

        .flag.icon.pm.squared {
            background-image: url(../../../../../assets/flags/1x1/pm.svg)
        }

        .flag.icon.pn {
            background-image: url(../../../../../assets/flags/4x3/pn.svg)
        }

        .flag.icon.pn.squared {
            background-image: url(../../../../../assets/flags/1x1/pn.svg)
        }

        .flag.icon.pr {
            background-image: url(../../../../../assets/flags/4x3/pr.svg)
        }

        .flag.icon.pr.squared {
            background-image: url(../../../../../assets/flags/1x1/pr.svg)
        }

        .flag.icon.ps {
            background-image: url(../../../../../assets/flags/4x3/ps.svg)
        }

        .flag.icon.ps.squared {
            background-image: url(../../../../../assets/flags/1x1/ps.svg)
        }

        .flag.icon.pt {
            background-image: url(../../../../../assets/flags/4x3/pt.svg)
        }

        .flag.icon.pt.squared {
            background-image: url(../../../../../assets/flags/1x1/pt.svg)
        }

        .flag.icon.pw {
            background-image: url(../../../../../assets/flags/4x3/pw.svg)
        }

        .flag.icon.pw.squared {
            background-image: url(../../../../../assets/flags/1x1/pw.svg)
        }

        .flag.icon.py {
            background-image: url(../../../../../assets/flags/4x3/py.svg)
        }

        .flag.icon.py.squared {
            background-image: url(../../../../../assets/flags/1x1/py.svg)
        }

        .flag.icon.qa {
            background-image: url(../../../../../assets/flags/4x3/qa.svg)
        }

        .flag.icon.qa.squared {
            background-image: url(../../../../../assets/flags/1x1/qa.svg)
        }

        .flag.icon.re {
            background-image: url(../../../../../assets/flags/4x3/re.svg)
        }

        .flag.icon.re.squared {
            background-image: url(../../../../../assets/flags/1x1/re.svg)
        }

        .flag.icon.ro {
            background-image: url(../../../../../assets/flags/4x3/ro.svg)
        }

        .flag.icon.ro.squared {
            background-image: url(../../../../../assets/flags/1x1/ro.svg)
        }

        .flag.icon.rs {
            background-image: url(../../../../../assets/flags/4x3/rs.svg)
        }

        .flag.icon.rs.squared {
            background-image: url(../../../../../assets/flags/1x1/rs.svg)
        }

        .flag.icon.ru {
            background-image: url(../../../../../assets/flags/4x3/ru.svg)
        }

        .flag.icon.ru.squared {
            background-image: url(../../../../../assets/flags/1x1/ru.svg)
        }

        .flag.icon.rw {
            background-image: url(../../../../../assets/flags/4x3/rw.svg)
        }

        .flag.icon.rw.squared {
            background-image: url(../../../../../assets/flags/1x1/rw.svg)
        }

        .flag.icon.sa {
            background-image: url(../../../../../assets/flags/4x3/sa.svg)
        }

        .flag.icon.sa.squared {
            background-image: url(../../../../../assets/flags/1x1/sa.svg)
        }

        .flag.icon.sb {
            background-image: url(../../../../../assets/flags/4x3/sb.svg)
        }

        .flag.icon.sb.squared {
            background-image: url(../../../../../assets/flags/1x1/sb.svg)
        }

        .flag.icon.sc {
            background-image: url(../../../../../assets/flags/4x3/sc.svg)
        }

        .flag.icon.sc.squared {
            background-image: url(../../../../../assets/flags/1x1/sc.svg)
        }

        .flag.icon.sd {
            background-image: url(../../../../../assets/flags/4x3/sd.svg)
        }

        .flag.icon.sd.squared {
            background-image: url(../../../../../assets/flags/1x1/sd.svg)
        }

        .flag.icon.se {
            background-image: url(../../../../../assets/flags/4x3/se.svg)
        }

        .flag.icon.se.squared {
            background-image: url(../../../../../assets/flags/1x1/se.svg)
        }

        .flag.icon.sg {
            background-image: url(../../../../../assets/flags/4x3/sg.svg)
        }

        .flag.icon.sg.squared {
            background-image: url(../../../../../assets/flags/1x1/sg.svg)
        }

        .flag.icon.sh {
            background-image: url(../../../../../assets/flags/4x3/sh.svg)
        }

        .flag.icon.sh.squared {
            background-image: url(../../../../../assets/flags/1x1/sh.svg)
        }

        .flag.icon.si {
            background-image: url(../../../../../assets/flags/4x3/si.svg)
        }

        .flag.icon.si.squared {
            background-image: url(../../../../../assets/flags/1x1/si.svg)
        }

        .flag.icon.sj {
            background-image: url(../../../../../assets/flags/4x3/sj.svg)
        }

        .flag.icon.sj.squared {
            background-image: url(../../../../../assets/flags/1x1/sj.svg)
        }

        .flag.icon.sk {
            background-image: url(../../../../../assets/flags/4x3/sk.svg)
        }

        .flag.icon.sk.squared {
            background-image: url(../../../../../assets/flags/1x1/sk.svg)
        }

        .flag.icon.sl {
            background-image: url(../../../../../assets/flags/4x3/sl.svg)
        }

        .flag.icon.sl.squared {
            background-image: url(../../../../../assets/flags/1x1/sl.svg)
        }

        .flag.icon.sm {
            background-image: url(../../../../../assets/flags/4x3/sm.svg)
        }

        .flag.icon.sm.squared {
            background-image: url(../../../../../assets/flags/1x1/sm.svg)
        }

        .flag.icon.sn {
            background-image: url(../../../../../assets/flags/4x3/sn.svg)
        }

        .flag.icon.sn.squared {
            background-image: url(../../../../../assets/flags/1x1/sn.svg)
        }

        .flag.icon.so {
            background-image: url(../../../../../assets/flags/4x3/so.svg)
        }

        .flag.icon.so.squared {
            background-image: url(../../../../../assets/flags/1x1/so.svg)
        }

        .flag.icon.sr {
            background-image: url(../../../../../assets/flags/4x3/sr.svg)
        }

        .flag.icon.sr.squared {
            background-image: url(../../../../../assets/flags/1x1/sr.svg)
        }

        .flag.icon.ss {
            background-image: url(../../../../../assets/flags/4x3/ss.svg)
        }

        .flag.icon.ss.squared {
            background-image: url(../../../../../assets/flags/1x1/ss.svg)
        }

        .flag.icon.st {
            background-image: url(../../../../../assets/flags/4x3/st.svg)
        }

        .flag.icon.st.squared {
            background-image: url(../../../../../assets/flags/1x1/st.svg)
        }

        .flag.icon.sv {
            background-image: url(../../../../../assets/flags/4x3/sv.svg)
        }

        .flag.icon.sv.squared {
            background-image: url(../../../../../assets/flags/1x1/sv.svg)
        }

        .flag.icon.sx {
            background-image: url(../../../../../assets/flags/4x3/sx.svg)
        }

        .flag.icon.sx.squared {
            background-image: url(../../../../../assets/flags/1x1/sx.svg)
        }

        .flag.icon.sy {
            background-image: url(../../../../../assets/flags/4x3/sy.svg)
        }

        .flag.icon.sy.squared {
            background-image: url(../../../../../assets/flags/1x1/sy.svg)
        }

        .flag.icon.sz {
            background-image: url(../../../../../assets/flags/4x3/sz.svg)
        }

        .flag.icon.sz.squared {
            background-image: url(../../../../../assets/flags/1x1/sz.svg)
        }

        .flag.icon.tc {
            background-image: url(../../../../../assets/flags/4x3/tc.svg)
        }

        .flag.icon.tc.squared {
            background-image: url(../../../../../assets/flags/1x1/tc.svg)
        }

        .flag.icon.td {
            background-image: url(../../../../../assets/flags/4x3/td.svg)
        }

        .flag.icon.td.squared {
            background-image: url(../../../../../assets/flags/1x1/td.svg)
        }

        .flag.icon.tf {
            background-image: url(../../../../../assets/flags/4x3/tf.svg)
        }

        .flag.icon.tf.squared {
            background-image: url(../../../../../assets/flags/1x1/tf.svg)
        }

        .flag.icon.tg {
            background-image: url(../../../../../assets/flags/4x3/tg.svg)
        }

        .flag.icon.tg.squared {
            background-image: url(../../../../../assets/flags/1x1/tg.svg)
        }

        .flag.icon.th {
            background-image: url(../../../../../assets/flags/4x3/th.svg)
        }

        .flag.icon.th.squared {
            background-image: url(../../../../../assets/flags/1x1/th.svg)
        }

        .flag.icon.tj {
            background-image: url(../../../../../assets/flags/4x3/tj.svg)
        }

        .flag.icon.tj.squared {
            background-image: url(../../../../../assets/flags/1x1/tj.svg)
        }

        .flag.icon.tk {
            background-image: url(../../../../../assets/flags/4x3/tk.svg)
        }

        .flag.icon.tk.squared {
            background-image: url(../../../../../assets/flags/1x1/tk.svg)
        }

        .flag.icon.tl {
            background-image: url(../../../../../assets/flags/4x3/tl.svg)
        }

        .flag.icon.tl.squared {
            background-image: url(../../../../../assets/flags/1x1/tl.svg)
        }

        .flag.icon.tm {
            background-image: url(../../../../../assets/flags/4x3/tm.svg)
        }

        .flag.icon.tm.squared {
            background-image: url(../../../../../assets/flags/1x1/tm.svg)
        }

        .flag.icon.tn {
            background-image: url(../../../../../assets/flags/4x3/tn.svg)
        }

        .flag.icon.tn.squared {
            background-image: url(../../../../../assets/flags/1x1/tn.svg)
        }

        .flag.icon.to {
            background-image: url(../../../../../assets/flags/4x3/to.svg)
        }

        .flag.icon.to.squared {
            background-image: url(../../../../../assets/flags/1x1/to.svg)
        }

        .flag.icon.tr {
            background-image: url(../../../../../assets/flags/4x3/tr.svg)
        }

        .flag.icon.tr.squared {
            background-image: url(../../../../../assets/flags/1x1/tr.svg)
        }

        .flag.icon.tt {
            background-image: url(../../../../../assets/flags/4x3/tt.svg)
        }

        .flag.icon.tt.squared {
            background-image: url(../../../../../assets/flags/1x1/tt.svg)
        }

        .flag.icon.tv {
            background-image: url(../../../../../assets/flags/4x3/tv.svg)
        }

        .flag.icon.tv.squared {
            background-image: url(../../../../../assets/flags/1x1/tv.svg)
        }

        .flag.icon.tw {
            background-image: url(../../../../../assets/flags/4x3/tw.svg)
        }

        .flag.icon.tw.squared {
            background-image: url(../../../../../assets/flags/1x1/tw.svg)
        }

        .flag.icon.tz {
            background-image: url(../../../../../assets/flags/4x3/tz.svg)
        }

        .flag.icon.tz.squared {
            background-image: url(../../../../../assets/flags/1x1/tz.svg)
        }

        .flag.icon.ua {
            background-image: url(../../../../../assets/flags/4x3/ua.svg)
        }

        .flag.icon.ua.squared {
            background-image: url(../../../../../assets/flags/1x1/ua.svg)
        }

        .flag.icon.ug {
            background-image: url(../../../../../assets/flags/4x3/ug.svg)
        }

        .flag.icon.ug.squared {
            background-image: url(../../../../../assets/flags/1x1/ug.svg)
        }

        .flag.icon.um {
            background-image: url(../../../../../assets/flags/4x3/um.svg)
        }

        .flag.icon.um.squared {
            background-image: url(../../../../../assets/flags/1x1/um.svg)
        }

        .flag.icon.us {
            background-image: url(../../../../../assets/flags/4x3/us.svg)
        }

        .flag.icon.us.squared {
            background-image: url(../../../../../assets/flags/1x1/us.svg)
        }

        .flag.icon.uy {
            background-image: url(../../../../../assets/flags/4x3/uy.svg)
        }

        .flag.icon.uy.squared {
            background-image: url(../../../../../assets/flags/1x1/uy.svg)
        }

        .flag.icon.uz {
            background-image: url(../../../../../assets/flags/4x3/uz.svg)
        }

        .flag.icon.uz.squared {
            background-image: url(../../../../../assets/flags/1x1/uz.svg)
        }

        .flag.icon.va {
            background-image: url(../../../../../assets/flags/4x3/va.svg)
        }

        .flag.icon.va.squared {
            background-image: url(../../../../../assets/flags/1x1/va.svg)
        }

        .flag.icon.vc {
            background-image: url(../../../../../assets/flags/4x3/vc.svg)
        }

        .flag.icon.vc.squared {
            background-image: url(../../../../../assets/flags/1x1/vc.svg)
        }

        .flag.icon.ve {
            background-image: url(../../../../../assets/flags/4x3/ve.svg)
        }

        .flag.icon.ve.squared {
            background-image: url(../../../../../assets/flags/1x1/ve.svg)
        }

        .flag.icon.vg {
            background-image: url(../../../../../assets/flags/4x3/vg.svg)
        }

        .flag.icon.vg.squared {
            background-image: url(../../../../../assets/flags/1x1/vg.svg)
        }

        .flag.icon.vi {
            background-image: url(../../../../../assets/flags/4x3/vi.svg)
        }

        .flag.icon.vi.squared {
            background-image: url(../../../../../assets/flags/1x1/vi.svg)
        }

        .flag.icon.vn {
            background-image: url(../../../../../assets/flags/4x3/vn.svg)
        }

        .flag.icon.vn.squared {
            background-image: url(../../../../../assets/flags/1x1/vn.svg)
        }

        .flag.icon.vu {
            background-image: url(../../../../../assets/flags/4x3/vu.svg)
        }

        .flag.icon.vu.squared {
            background-image: url(../../../../../assets/flags/1x1/vu.svg)
        }

        .flag.icon.wf {
            background-image: url(../../../../../assets/flags/4x3/wf.svg)
        }

        .flag.icon.wf.squared {
            background-image: url(../../../../../assets/flags/1x1/wf.svg)
        }

        .flag.icon.ws {
            background-image: url(../../../../../assets/flags/4x3/ws.svg)
        }

        .flag.icon.ws.squared {
            background-image: url(../../../../../assets/flags/1x1/ws.svg)
        }

        .flag.icon.ye {
            background-image: url(../../../../../assets/flags/4x3/ye.svg)
        }

        .flag.icon.ye.squared {
            background-image: url(../../../../../assets/flags/1x1/ye.svg)
        }

        .flag.icon.yt {
            background-image: url(../../../../../assets/flags/4x3/yt.svg)
        }

        .flag.icon.yt.squared {
            background-image: url(../../../../../assets/flags/1x1/yt.svg)
        }

        .flag.icon.za {
            background-image: url(../../../../../assets/flags/4x3/za.svg)
        }

        .flag.icon.za.squared {
            background-image: url(../../../../../assets/flags/1x1/za.svg)
        }

        .flag.icon.zm {
            background-image: url(../../../../../assets/flags/4x3/zm.svg)
        }

        .flag.icon.zm.squared {
            background-image: url(../../../../../assets/flags/1x1/zm.svg)
        }

        .flag.icon.zw {
            background-image: url(../../../../../assets/flags/4x3/zw.svg)
        }

        .flag.icon.zw.squared {
            background-image: url(../../../../../assets/flags/1x1/zw.svg)
        }

        .flag.icon.eu {
            background-image: url(../../../../../assets/flags/4x3/eu.svg)
        }

        .flag.icon.eu.squared {
            background-image: url(../../../../../assets/flags/1x1/eu.svg)
        }

        .flag.icon.gb.eng {
            background-image: url(../../../../../assets/flags/4x3/gb.eng.svg)
        }

        .flag.icon.gb.eng.squared {
            background-image: url(../../../../../assets/flags/1x1/gb.eng.svg)
        }

        .flag.icon.gb.nir {
            background-image: url(../../../../../assets/flags/4x3/gb.nir.svg)
        }

        .flag.icon.gb.nir.squared {
            background-image: url(../../../../../assets/flags/1x1/gb.nir.svg)
        }

        .flag.icon.gb.sct {
            background-image: url(../../../../../assets/flags/4x3/gb.sct.svg)
        }

        .flag.icon.gb.sct.squared {
            background-image: url(../../../../../assets/flags/1x1/gb.sct.svg)
        }

        .flag.icon.gb.wls {
            background-image: url(../../../../../assets/flags/4x3/gb.wls.svg)
        }

        .flag.icon.gb.wls.squared {
            background-image: url(../../../../../assets/flags/1x1/gb.wls.svg)
        }

        .flag.icon.un {
            background-image: url(../../../../../assets/flags/4x3/un.svg)
        }

        .flag.icon.un.squared {
            background-image: url(../../../../../assets/flags/1x1/un.svg)
        }

        span.flag.icon.disabled {
            opacity: .5
        }

        span.flag.small.icon {
            width: 1rem;
            height: 1rem
        }

        span.flag.icon {
            width: 1.5em;
            height: 1em
        }

        span.flag.full.icon {
            width: 100%;
            height: 100%
        }

        .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: .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: .250rem 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 .250rem .250rem 0
        }

        .wojo.rounded.top.images .image,
        .wojo.rounded.top.images img,
        .wojo.rounded.top.image img,
        .wojo.rounded.top.image svg,
        .wojo.rounded.top.image {
            border-radius: 0.250rem .250rem 0 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.shape.shadow.images .image,
        .wojo.shape.shadow.images img,
        .wojo.shape.shadow.image img,
        .wojo.shape.shadow.image svg,
        .wojo.shape.shadow.image {
            filter: drop-shadow(8px 8px 6px var(--dark-color-shadow));
            box-shadow: none
        }

        .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.image.description {
            position: relative
        }

        .wojo.image.description p {
            position: absolute;
            padding: 1rem;
            bottom: 0;
            left: 0;
            width: 100%;
            margin: 0;
            background: var(--dark-color-shadow)
        }

        .wojo.hover {
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            border-radius: .250rem
        }

        .wojo.hover::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border-radius: 5px;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transition: -webkit-transform 0.5s ease-in-out;
            transition: -webkit-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
            background: #fff;
            opacity: 1;
            z-index: 1
        }

        .wojo.hover:hover::after {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0
        }

        .wojo.hover:hover {
            box-shadow: 0 23px 49px 0 var(--shadow-color);
            transition: all 0.5s ease-in-out
        }

        .wojo.hover:hover img {
            border-radius: .5rem;
            transition: all 0.5s ease-in-out
        }

        .wojo.hover figcaption {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 2rem;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
            z-index: 2;
            text-align: center
        }

        .wojo.hover:hover figcaption {
            top: 0;
            opacity: 1;
            visibility: visible
        }

        .wojo.masked.image::after {
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            position: absolute;
            background: url("../images/team-mask.svg") no-repeat;
            background-size: cover
        }

        .wojo.testimonial.image {
            z-index: 1
        }

        .wojo.testimonial.image img.client {
            padding: 2rem;
            border-radius: 50%;
            position: relative;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            display: inline-block;
            background: #fff;
            box-shadow: 0 20px 35px 0 var(--shadow-color)
        }

        .wojo.testimonial.image img.shape {
            bottom: -100px;
            left: 110px;
            position: absolute
        }

        .wojo.image.lightbox span.viewer {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            color: #fff;
            line-height: 2.5rem;
            width: 2.5rem;
            height: 2.5rem;
            background-color: var(--primary-color);
            border-radius: 50%;
            -webkit-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            text-align: center;
            opacity: 0;
            visibility: hidden
        }

        .wojo.image.lightbox span.viewer .icon {
            line-height: 2.5rem
        }

        .wojo.image.lightbox:hover span.viewer {
            opacity: 1;
            visibility: visible
        }

        .wojo.inverted.image,
        .wojo.inverted.image img {
            box-shadow: 0 0 0 .125rem #fff
        }

        .wojo.image.cover {
            height: 100vh;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover
        }

        .wojo.image.fill {
            height: 100vh;
            width: 100%;
            -o-object-fit: fill;
            object-fit: fill
        }

        .wojo.image.full img,
        .wojo.image.fit {
            -o-object-fit: cover;
            object-fit: cover;
            flex-grow: 1
        }

        .wojo.image.full {
            display: flex;
            flex-direction: column;
            height: 100%
        }

        .wojo.zoom.image {
            overflow: hidden
        }

        .wojo.zoom.image img {
            transform-origin: 50% 50%;
            transition: transform .5s, filter .5s ease-out
        }

        .wojo.zoom.image:hover img {
            transform: scale(1.25)
        }

        .wojo.skewed.image {
            perspective-origin: left center;
            perspective: 1500px;
            transform-style: preserve-3d
        }

        .wojo.skewed.image img {
            border-radius: .625rem;
            -webkit-transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
            transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
            box-shadow: 25px 60px 125px -25px rgba(80, 102, 144, .1), 16px 40px 75px -40px rgba(0, 0, 0, .2)
        }

        .wojo.hero.image {
            min-height: 450px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            z-index: 1
        }

        .wojo.hero.image::before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            content: "";
            background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
            background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
            background-repeat: repeat-x;
            border-radius: .250rem;
            -webkit-transition: opacity 0.45s;
            transition: opacity 0.45s
        }

        .wojo.hero.image:hover::before {
            background: -webkit-linear-gradient(bottom, #1e2022 0%, transparent 75%);
            background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
            opacity: 0
        }

        figure.wojo {
            line-height: 1
        }

        .wojo.mime.images .image,
        .wojo.mime.images img,
        .wojo.mime.images svg,
        .wojo.mime.image {
            padding: .5rem;
            text-align: center;
            display: inline-flex
        }

        .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
        }

        .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: 500;
            letter-spacing: 3px;
            margin: 0;
            padding: .613rem 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;
            text-transform: uppercase
        }

        .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.08);
            border: 0;
            color: #fff
        }

        .wojo.label .icon {
            margin-right: 0.5rem
        }

        .wojo.right.label .icon {
            margin-left: 0.5rem;
            margin-right: 0
        }

        .wojo.icon.label .icon {
            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.ribbon {
            width: 150px;
            height: 150px;
            overflow: hidden;
            position: absolute;
            z-index: 2
        }

        .wojo.ribbon::before,
        .wojo.ribbon::after {
            position: absolute;
            z-index: -1;
            content: '';
            display: block;
            border: 5px solid #AFB3B8
        }

        .wojo.ribbon span {
            position: absolute;
            display: block;
            width: 225px;
            padding: 1em 0;
            background-color: #C8CBCE;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
            color: #fff;
            font-weight: 700;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            text-transform: uppercase;
            text-align: center
        }

        .wojo.ribbon.top.left {
            top: -10px;
            left: -10px
        }

        .wojo.ribbon.top.left::before,
        .wojo.ribbon.top.left::after {
            border-top-color: transparent;
            border-left-color: transparent
        }

        .wojo.ribbon.top.left::before {
            top: 0;
            right: 0
        }

        .wojo.ribbon.top.left::after {
            bottom: 0;
            left: 0
        }

        .wojo.ribbon.top.left span {
            right: -20px;
            top: 30px;
            transform: rotate(-45deg)
        }

        .wojo.ribbon.top.right {
            top: -10px;
            right: -10px
        }

        .wojo.ribbon.top-right::before,
        .wojo.ribbon.top-right::after {
            border-top-color: transparent;
            border-right-color: transparent
        }

        .wojo.ribbon.top.right::before {
            top: 0;
            left: 0
        }

        .wojo.ribbon.top.right::after {
            bottom: 0;
            right: 0
        }

        .wojo.ribbon.top.right span {
            left: -20px;
            top: 30px;
            transform: rotate(45deg)
        }

        .wojo.primary.ribbon span {
            background-color: var(--primary-color);
            color: var(--primary-color-inverted)
        }

        .wojo.primary.ribbon::before,
        .wojo.primary.ribbon::after {
            border: 5px solid var(--primary-color-active)
        }

        .wojo.secondary.ribbon span {
            background-color: var(--secondary-color);
            color: var(--secondary-color-inverted)
        }

        .wojo.secondary.ribbon::before,
        .wojo.secondary.ribbon::after {
            border: 5px solid var(--secondary-color-inverted)
        }

        .wojo.positive.ribbon span {
            background-color: var(--positive-color);
            color: var(--positive-color-inverted)
        }

        .wojo.positive.ribbon::before,
        .wojo.positive.ribbon::after {
            border: 5px solid var(--positive-color-inverted)
        }

        .wojo.negative.ribbon span {
            background-color: var(--negative-color);
            color: var(--negative-color-inverted)
        }

        .wojo.negative.ribbon::before,
        .wojo.negative.ribbon::after {
            border: 5px solid var(--negative-color-inverted)
        }

        .wojo.alert.ribbon span {
            background-color: var(--alert-color);
            color: var(--alert-color-inverted)
        }

        .wojo.alert.ribbon::before,
        .wojo.alert.ribbon::after {
            border: 5px solid var(--alert-color-inverted)
        }

        .wojo.indicating.label {
            position: absolute;
            border: 2px solid #fff;
            bottom: .5rem;
            left: 0;
            z-index: 2;
            width: .5rem;
            height: .5rem;
            border-radius: 1rem;
            padding: 0;
            box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25)
        }

        .wojo.fitted.label {
            margin: 0
        }

        .wojo.badge {
            position: absolute;
            top: -1.5rem;
            right: 1.5rem;
            border-radius: .250rem;
            box-shadow: 0 23px 49px 0 var(--shadow-color);
            z-index: 1
        }

        .wojo.badge::before {
            content: "";
            position: absolute;
            top: -1.5rem;
            left: -1.40rem;
            border: 1.5rem solid;
            z-index: -6;
            border-color: transparent transparent var(--primary-color)transparent
        }

        .wojo.badge .year {
            padding: 1.5rem;
            display: block;
            text-align: center;
            font-size: 3rem;
            font-weight: 700;
            color: #fff;
            line-height: 1
        }

        .wojo.badge .text {
            display: block;
            padding: .750rem 1.5rem;
            text-align: center;
            color: #fff;
            letter-spacing: 2px;
            font-size: .875rem;
            text-transform: uppercase;
            background: rgba(255, 255, 255, 0.1);
            line-height: 1
        }

        .wojo.badge.primary {
            background-color: var(--primary-color)
        }

        .wojo.bookmark {
            position: absolute;
            top: 1rem;
            right: -1rem;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 80px;
            font-size: .875rem;
            background: var(--primary-color);
            color: #fff
        }

        .wojo.bookmark::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: -3rem;
            border: 1.5rem solid;
            border-top-color: currentcolor;
            border-right-color: currentcolor;
            border-bottom-color: currentcolor;
            border-left-color: currentcolor;
            border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color)
        }

        .wojo.mini.label {
            font-size: 0.5rem;
            padding: .125rem .5rem
        }

        .wojo.tiny.label {
            font-size: 0.613rem;
            padding: .250rem .5rem
        }

        .wojo.tiny.empty.label {
            width: .5rem;
            height: .5rem;
            padding: 0
        }

        .wojo.small.label {
            font-size: 0.6875rem;
            padding: .25rem .5rem
        }

        .wojo.small.empty.label {
            width: .750rem;
            height: .750rem;
            padding: 0
        }

        .wojo.label {
            font-size: 0.7rem
        }

        .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.huge.initials.label {
            width: calc(4rem - 2px);
            height: calc(4rem - 2px);
            line-height: calc(4rem - 2px)
        }

        .wojo.large.label {
            font-size: 1rem
        }

        .wojo.gigantic.labels .label,
        .wojo.gigantic.label {
            font-size: 2.5rem
        }

        .wojo.gigantic.initials.circular.label {
            min-width: 3rem;
            min-height: 3em;
            width: 3em;
            height: 3rem;
            line-height: 3rem;
            font-size: 1.5rem;
            margin: 0
        }

        .wojo.circular.gigantic.labels .label,
        .wojo.circular.gigantic.label {
            min-width: 3em;
            min-height: 3em;
            line-height: 1em;
            text-align: center;
            border-radius: 500rem
        }

        .wojo.form {
            position: relative;
            max-width: 100%
        }

        .wojo.form .field>label,
        .wojo.form .field label.label {
            display: block;
            margin: 0em 0em 0.5rem 0em;
            color: var(--body-color);
            font-size: 1rem;
            font-weight: 700
        }

        .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: normal;
            vertical-align: middle;
            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 0 0 1px rgba(0, 0, 0, .1);
            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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
        }

        .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: calc(1.875rem + 1rem);
            border: 0px solid var(--grey-color-300);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
            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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
        }

        .wojo.form select option {
            font-size: .913rem
        }

        .wojo.form select:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 var(--dark-color)
        }

        .wojo.form select:-moz-focusring * {
            color: var(--dark-color);
            text-shadow: none
        }

        .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 {
            border: 0;
            -webkit-appearance: none;
            padding: .125rem 1rem !important;
            outline: var(--primary-color) solid 2px;
            outline-offset: 0px;
            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.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 {
            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
            }
        }

        .sp-container {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            z-index: 5000;
            overflow: hidden
        }

        .wojo.color.input .sp-add-on {
            width: 40px;
            border-radius: .250rem
        }

        .wojo.color.input .sp-add-on .sp-colorize {
            height: 100%;
            width: 100%;
            border-radius: .250rem
        }

        input.spectrum.with-add-on {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0
        }

        .sp-colorize-container {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
        }

        .sp-container.sp-flat {
            position: relative
        }

        .sp-container,
        .sp-container * {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box
        }

        .sp-top {
            position: relative;
            width: 100%;
            display: inline-block
        }

        .sp-top-inner {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0
        }

        .sp-color {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 20px !important
        }

        .sp-hue {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 12px;
            height: 100%;
            left: initial !important
        }

        .sp-clear-enabled .sp-hue {
            top: 15%;
            height: 85%
        }

        .sp-fill {
            padding-top: 80%
        }

        .sp-sat,
        .sp-val {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }

        .sp-alpha-enabled .sp-top {
            margin-bottom: 28px !important
        }

        .sp-alpha-enabled .sp-alpha {
            display: block
        }

        .sp-alpha-handle {
            position: absolute;
            top: -3px;
            cursor: pointer;
            height: 16px;
            border-radius: 50%;
            width: 16px;
            margin-right: 5px;
            left: -2px;
            right: 0;
            background: #f9f9f9;
            box-shadow: 0 0 2px 0px #3a3a3a
        }

        .sp-alpha {
            display: none;
            position: absolute;
            bottom: -18px;
            right: 0;
            left: 0;
            height: 10px
        }

        .sp-alpha-inner {
            border-radius: 4px
        }

        .sp-clear {
            display: none
        }

        .sp-clear.sp-clear-display {
            background-position: center
        }

        .sp-clear-enabled .sp-clear {
            display: block;
            position: absolute;
            top: -5px;
            right: -2px;
            bottom: 0;
            cursor: pointer;
            left: initial;
            height: 1rem;
            width: 1rem
        }

        .sp-container,
        .sp-replacer,
        .sp-preview,
        .sp-dragger,
        .sp-slider,
        .sp-alpha,
        .sp-clear,
        .sp-alpha-handle,
        .sp-container.sp-dragging .sp-input,
        .sp-container button {
            -webkit-user-select: none;
            -moz-user-select: -moz-none;
            -o-user-select: none;
            user-select: none
        }

        .sp-container.sp-input-disabled .sp-input-container {
            display: none
        }

        .sp-container.sp-buttons-disabled .sp-button-container {
            display: none
        }

        .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
            display: none
        }

        .sp-palette-only .sp-picker-container {
            display: none
        }

        .sp-palette-disabled .sp-palette-container {
            display: none
        }

        .sp-initial-disabled .sp-initial {
            display: none
        }

        .sp-sat {
            background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0))
        }

        .sp-val {
            border-radius: 4px;
            background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0))
        }

        .sp-hue {
            background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)
        }

        .sp-1 {
            height: 17%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00')
        }

        .sp-2 {
            height: 16%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00')
        }

        .sp-3 {
            height: 17%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff')
        }

        .sp-4 {
            height: 17%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff')
        }

        .sp-5 {
            height: 16%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff')
        }

        .sp-6 {
            height: 17%;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000')
        }

        .sp-hidden {
            display: none !important
        }

        .sp-cf:before,
        .sp-cf:after {
            content: "";
            display: table
        }

        .sp-cf:after {
            clear: both
        }

        @media (max-device-width:480px) {
            .sp-color {
                right: 40%
            }

            .sp-hue {
                left: 63%
            }

            .sp-fill {
                padding-top: 60%
            }
        }

        .sp-dragger {
            border-radius: 5px;
            height: 10px;
            width: 10px;
            border: 1px solid #fff;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 3px;
            margin-top: 3px;
            box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2)
        }

        .sp-slider {
            position: absolute;
            top: 0;
            cursor: pointer;
            height: 16px;
            border-radius: 50%;
            width: 16px;
            left: -2px;
            background: #f9f9f9;
            box-shadow: 0 0 2px 0px #3a3a3a;
            margin-top: 8px
        }

        .sp-container {
            display: inline-flex;
            background-color: white;
            padding: 0;
            border-radius: 4px;
            color: black;
            box-shadow: 0 0 0 1px rgba(99, 114, 130, .16), 0 8px 16px rgba(27, 39, 51, .08)
        }

        .sp-container,
        .sp-container button,
        .sp-container input,
        .sp-color,
        .sp-hue,
        .sp-clear {
            font-size: 12px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box
        }

        .sp-top {
            margin-bottom: 10px
        }

        .sp-color,
        .sp-hue,
        .sp-clear,
        .sp-val,
        .sp-sat {
            border-radius: 3px
        }

        .sp-input-container {
            margin-top: -5px
        }

        .sp-input-container.sp-cf,
        .sp-initial.sp-thumb.sp-cf,
        .sp-button-container.sp-cf {
            height: 25px
        }

        .sp-picker-container .sp-cf {
            margin-bottom: 10px
        }

        .sp-palette-row-initial>span:first-child {
            cursor: pointer
        }

        .sp-initial-disabled .sp-input-container {
            width: 100%
        }

        .sp-input {
            padding: 0px 5px !important;
            margin: 0;
            width: 100%;
            box-shadow: none !important;
            height: 100% !important;
            background: transparent;
            color: #3a3a3a;
            border-radius: 2px !important;
            border: 1px solid #e0e0e0 !important;
            text-align: center;
            font-family: monospace;
            font-size: inherit !important
        }

        .sp-input:focus {
            border: 1px solid orange
        }

        .sp-input.sp-validation-error {
            border: 1px solid red;
            background: #fdd
        }

        .sp-picker-container,
        .sp-palette-container {
            position: relative;
            padding: 10px
        }

        .sp-picker-container {
            width: 200px;
            padding-bottom: 0
        }

        .sp-palette-container {
            border-right: solid 1px #ccc
        }

        .sp-palette-only .sp-palette-container {
            border: 0
        }

        .sp-palette .sp-thumb-el {
            display: block;
            position: relative;
            float: left;
            width: 24px;
            height: 15px;
            margin: 3px;
            cursor: pointer;
            border: solid 2px transparent
        }

        .sp-palette .sp-thumb-el:hover,
        .sp-palette .sp-thumb-el.sp-thumb-active {
            border-color: orange
        }

        .sp-thumb-el {
            position: relative
        }

        .sp-initial {
            float: left
        }

        .sp-initial span {
            width: 30px;
            height: 25px;
            border: none;
            display: block;
            float: left;
            margin: 0
        }

        .sp-initial .spe-thumb-el.sp-thumb-active {
            border-radius: 0 5px 5px 0
        }

        .sp-initial .spe-thumb-el {
            border-radius: 5px 0 0 5px
        }

        .sp-initial .sp-clear-display {
            background-position: center
        }

        .sp-button-container {
            float: right
        }

        .sp-palette-button-container {
            margin-top: 10px
        }

        .sp-replacer {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            display: inline-block;
            border-radius: 3px;
            border: 1px solid #aaa;
            color: #666;
            transition: border-color .3s;
            vertical-align: middle;
            width: 3rem;
            height: 1.5rem
        }

        .sp-replacer:hover,
        .sp-replacer.sp-active {
            border: 1px solid #666;
            color: black
        }

        .sp-replacer.sp-disabled {
            cursor: default;
            border-color: silver;
            color: silver
        }

        .sp-dd {
            position: absolute;
            font-size: 10px;
            right: 0;
            top: 0;
            bottom: 0;
            padding: 0 2px;
            line-height: 1.6rem;
            background-color: white
        }

        .sp-preview {
            position: relative;
            width: 100%;
            height: 100%;
            float: left;
            z-index: 0
        }

        .sp-preview-inner {
            transition: background-color .2s
        }

        .sp-preview-inner.sp-clear-display {
            display: none
        }

        .sp-palette .sp-thumb-el {
            width: 1rem;
            height: 1rem;
            margin: 3px;
            border: none;
            border-radius: .250rem
        }

        .sp-palette-only .sp-thumb-el {
            width: 1.5rem;
            height: 1.5rem
        }

        .sp-container button {
            border-radius: 3px;
            border: none;
            background: transparent;
            line-height: 1;
            padding: 0 8px;
            height: 25px;
            text-transform: capitalize;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            color: var(--grey-color-700);
            font-weight: 700
        }

        .sp-container button.sp-choose {
            background-color: var(--primary-color);
            color: #fff;
            margin-left: 5px
        }

        .sp-container button:hover {
            opacity: .8
        }

        .sp-container button.sp-palette-toggle {
            width: 100%;
            background-color: #f3f3f3;
            margin: 0
        }

        .sp-palette span:hover,
        .sp-palette span.sp-thumb-active {
            border-color: #000
        }

        .sp-preview,
        .sp-alpha,
        .sp-thumb-el {
            position: relative;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)
        }

        .sp-preview-inner,
        .sp-alpha-inner,
        .sp-thumb-inner {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0
        }

        .sp-palette .sp-thumb-inner {
            border-radius: 3px;
            background-position: 50% 50%;
            background-repeat: no-repeat
        }

        .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)
        }

        .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)
        }

        .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 0 0 1px rgba(0, 0, 0, .1);
            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;
            line-height: normal;
            vertical-align: middle;
            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 {
            background: rgba(255, 255, 255, 0);
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
            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.transparent.input {
            background: rgba(255, 255, 255, 0.05)
        }

        .wojo.transparent.input input {
            color: rgba(255, 255, 255, 0.8)
        }

        .wojo.transparent.input input,
        .wojo.form .wojo.transparent.input input,
        .wojo.form .wojo.transparent.input textarea {
            background: rgba(255, 255, 255, 0.05)
        }

        .wojo.inline.input {
            display: inline-flex
        }

        .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 3px 9px rgba(50, 50, 9, 0), 3px 4px 8px rgba(10, 72, 179, .1), 0 0 0 1px var(--primary-color)
        }

        .wojo.basic.input.focus {
            box-shadow: 0 1px 0 0 var(--primary-color)
        }

        .wojo.basic.input.focus input:focus {
            box-shadow: none
        }

        .wojo.transparent.input input:focus {
            color: rgba(255, 255, 255, 0.8)
        }

        .wojo.input ::-webkit-input-placeholder {
            color: var(--grey-color-500)
        }

        .wojo.input :-ms-input-placeholder {
            color: var(--grey-color-500)
        }

        .wojo.input ::-moz-placeholder {
            color: var(--grey-color-500)
        }

        .wojo.input :focus::-webkit-input-placeholder {
            color: var(--grey-color-700)
        }

        .wojo.input :focus:-ms-input-placeholder {
            color: var(--grey-color-700)
        }

        .wojo.input :focus::-moz-placeholder {
            color: var(--grey-color-700)
        }

        .wojo.input input:-webkit-autofill {
            box-shadow: 0px 0px 0px 100px #fff inset;
            border-color: #fff
        }

        .wojo.input input:-webkit-autofill:focus {
            box-shadow: 0px 0px 0px 100px #fff inset;
            border-color: #fff
        }

        .wojo.ajax.input {
            z-index: 2
        }

        .wojo.ajax.input .results {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 5;
            background: #fff;
            margin-top: 1px;
            width: 100%;
            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.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: 1rem;
            height: calc(1.875rem + 1rem)
        }

        .wojo.form .wojo.large.input input,
        .wojo.large.input input {
            line-height: 1rem;
            padding: 1.5rem;
            font-size: 1.5rem;
            height: calc(1.75rem + 1.5rem + 2px)
        }

        .wojo.form .wojo.large.basic.input input,
        .wojo.large.basic.input input {
            padding: 1rem 0;
            font-weight: 300
        }

        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:not(.button) {
            flex: 1 1 0px;
            min-width: 0
        }

        .wojo.list .item>.icon:not(.button) {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            margin-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 {
            margin-left: .5rem;
            font-weight: 700
        }

        .wojo.horizontal.list {
            display: inline-flex;
            flex-flow: row wrap
        }

        .wojo.horizontal.list>.item {
            margin-left: 1rem;
            align-items: center;
            margin-bottom: 0
        }

        .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);
            margin-bottom: 0
        }

        .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;
            margin-bottom: 0
        }

        .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):not(.divided)>.item:last-child,
        .wojo.very.relaxed.list:not(.horizontal):not(.divided)>.item:last-child {
            margin-bottom: 0
        }

        .wojo.relaxed.list:not(.horizontal):not(.divided)>.item {
            margin-bottom: 1rem
        }

        .wojo.very.relaxed.list:not(.horizontal):not(.divided)>.item {
            margin-bottom: 2rem
        }

        .wojo.relaxed.divided.list:not(.horizontal)>.item:first-child,
        .wojo.very.relaxed.divided.list:not(.horizontal)>.item:first-child {
            padding-top: 0
        }

        .wojo.relaxed.divided.list:not(.horizontal)>.item:last-child,
        .wojo.very.relaxed.divided.list:not(.horizontal)>.item:last-child {
            padding-bottom: 0
        }

        .wojo.relaxed.divided.list:not(.horizontal)>.item {
            padding-bottom: 1rem;
            padding-top: 1rem
        }

        .wojo.very.relaxed.divided.list:not(.horizontal):not(.divided)>.item {
            padding-bottom: 2rem;
            padding-top: 2rem
        }

        .wojo.relaxed.list.horizontal>.item {
            margin-left: .5rem;
            margin-right: .5rem
        }

        .wojo.relaxed.list.horizontal>.item:first-child {
            margin-left: 0
        }

        .wojo.relaxed.list.horizontal>.item:last-child {
            margin-right: 0
        }

        .wojo.very.relaxed.list.horizontal>.item {
            margin-left: 1rem;
            margin-right: 1rem
        }

        .wojo.list>.item.active {
            font-weight: 700;
            color: var(--dark-color)
        }

        .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
        }

        .wojo.horizontal.compact.list .item {
            padding-left: .5rem;
            margin-left: .5rem
        }

        .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.divided.horizontal.responsive.list,
            .wojo.celled.horizontal.responsive.list {
                flex-direction: column
            }

            .wojo.divided.horizontal.responsive.list>.item,
            .wojo.celled.horizontal.responsive.list>.item {
                padding-left: 0;
                margin-left: 0
            }

            .wojo.divided.horizontal.responsive.list>.item::before,
            .wojo.celled.horizontal.responsive.list>.item::before,
            .wojo.horizontal.celled.responsive.list>.item:last-child::after {
                display: none
            }
        }

        .wojo.step.list .item {
            position: relative;
            padding: 1rem 0 1rem 2.5rem;
            margin: 0
        }

        .wojo.step.list .item:first-child {
            padding: 0 0 1rem 2.5rem
        }

        .wojo.step.list .item:first-child::after {
            height: 50%;
            top: auto
        }

        .wojo.step.list .item:last-child::after {
            height: 50%;
            bottom: auto
        }

        .wojo.step.list .item::after {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: -.3125rem;
            width: .0625rem;
            height: 100%;
            border-right: 1px solid var(--grey-color-300);
            margin: auto auto auto 0;
            content: "";
            visibility: visible
        }

        .wojo.step.list .item::before {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: -.25rem;
            width: 2rem;
            height: .0625rem;
            border-top: 1px solid var(--grey-color-300);
            margin: auto auto auto 0;
            content: ""
        }

        .wojo.step.list .item>.content,
        .wojo.indicating.list>.item .content {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            border: 1px solid var(--grey-color-300);
            border-radius: 0.25rem;
            padding: 2em
        }

        .wojo.step.list .item>.content>.description,
        .wojo.indicating.list .item>.content>.description {
            padding-left: 2rem;
            margin: 0;
            font-weight: normal
        }

        .wojo.step.list .item>.content>* {
            flex: 1 1 0px;
            min-width: 0
        }

        .wojo.step.list .item>.content .auto,
        .wojo.indicating.list .item>.content.auto {
            flex: 0 0 auto;
            max-width: 100%
        }

        .wojo.indicating.list>.item {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: start;
            align-items: flex-start;
            position: relative;
            margin-bottom: 1.5rem
        }

        .wojo.indicating.list>.item::after {
            position: absolute;
            top: 32px;
            left: 11px;
            height: 100%;
            border-left: 2px dashed var(--primary-color);
            content: "";
            visibility: visible
        }

        .wojo.indicating.list>.item .content:first-child {
            margin-right: 1rem;
            margin-top: 0.25rem
        }

        .wojo.indicating.list>.item .content:first-child>span {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 0.625rem;
            border-radius: 1.5rem;
            text-align: center;
            line-height: 1.5rem;
            color: #fff;
            font-weight: 500
        }

        .wojo.indicating.list>.item .content:first-child>span>.icon {
            line-height: 1.5rem
        }

        .wojo.indicating.list>.item .content {
            border: none;
            border-radius: 0;
            padding: 0
        }

        .wojo.indicating.list .item:last-child::after {
            border-left: 0
        }

        ul.vertical-menu li,
        ul.vertical-menu,
        ul.vertical-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0
        }

        ul.vertical-menu li {
            border-top: 1px solid #e7eaf3;
            display: block;
            position: relative
        }

        ul.vertical-menu li a {
            display: inline-block;
            position: relative;
            padding: .5rem 0;
            color: var(--dark-color);
            font-weight: 500
        }

        ul.vertical-menu li a:hover,
        ul.vertical-menu li a.active {
            color: var(--primary-color)
        }

        ul.vertical-menu li a>i.icon {
            margin-right: .5em
        }

        ul.vertical-menu li a span {
            display: inline-block;
            font-size: .750em;
            padding: .5em;
            margin-left: 1em;
            line-height: .75;
            border-radius: .188em;
            font-weight: 600
        }

        ul.vertical-menu .menu-submenu {
            display: none;
            top: 0
        }

        ul.vertical-menu .menu-submenu li {
            border-bottom: 0;
            border-top: 1px solid #e7eaf3;
            box-shadow: none;
            position: relative
        }

        ul.vertical-menu .menu-submenu li a {
            padding: 8px 25px
        }

        ul.vertical-menu .menu-submenu li ul li a {
            padding: 8px 45px
        }

        ul.vertical-menu .menu-submenu li ul li ul li {}

        ul.vertical-menu .menu-submenu li ul li ul li a {
            padding: 8px 65px
        }

        ul.vertical-menu .icon.chevron.down {
            position: absolute;
            right: 0;
            display: block;
            cursor: pointer;
            padding: 13px 0
        }

        .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 23px 49px 0 var(--shadow-color)
        }

        .wojo.card>.content:not(.notes),
        .wojo.segment>.content:not(.notes) {
            flex: 1 1 auto;
            padding: 2rem
        }

        .wojo.tall.cards .card>.content,
        .wojo.tall.card>.content {
            padding: 8rem 2rem
        }

        .page_faq .wojo.tall.card>.content {
            padding: 2rem
        }

        .wojo.semi.tall.cards .card>.content,
        .wojo.semi.tall.card>.content {
            padding: 4rem 2rem
        }

        .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 23px 49px 0 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),
        .wojo.card>.content.gutters:not(.notes) {
            padding: 2rem 2rem 0 2rem
        }

        .wojo.basic.segment,
        .wojo.basic.card,
        .wojo.basic.cards>.card,
        .wojo.cards>.basic.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,
        .wojo.cards>.simple.card {
            box-shadow: none
        }

        .wojo.transparent.segment,
        .wojo.transparent.card {
            background-color: transparent
        }

        .wojo.white.transparent.segment,
        .wojo.white.transparent.card {
            background-color: rgba(255, 255, 255, 0.02)
        }

        .wojo.black.transparent.segment,
        .wojo.black.transparent.card {
            background-color: rgba(0, 0, 0, 0.02)
        }

        .wojo.attached.segment,
        .wojo.attached.card {
            margin: 0
        }

        .wojo.top.attached.segment,
        .wojo.top.attached.card {
            margin-top: 0;
            margin-bottom: 1rem
        }

        .wojo.bottom.attached.segment,
        .wojo.bottom.attached.card {
            margin-bottom: 0;
            margin-top: 1rem
        }

        .wojo.spaced.segment,
        .wojo.spaced.card {
            margin: 2rem 0
        }

        .wojo.card.active,
        .wojo.segment.active,
        .wojo.cards .card.active {
            box-shadow: 0 20px 34px -16px var(--dark-color-shadow)
        }

        .wojo.card.circular,
        .wojo.segment.circular {
            display: inline-flex;
            border-radius: 100%
        }

        .wojo.card.inline,
        .wojo.segment.inline {
            display: inline-flex
        }

        .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 23px 49px 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.full.card {
            height: 100%
        }

        .wojo.full.card>.content {
            height: 100%;
            flex: 0 1 auto
        }

        .wojo.full.cards .card>.content.photo,
        .wojo.full.card>.content.photo {
            padding: 0
        }

        .wojo.full.cards .card>.content.photo>img,
        .wojo.full.card>.content.photo>img {
            border-radius: .250rem
        }

        .wojo.full.card>.footer {
            flex: 0 1 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.link.cards .card,
        .wojo.link.card {
            z-index: 11;
            transition: all 0.5s ease;
            overflow: hidden
        }

        .wojo.link.cards .card:hover,
        .wojo.link.card:hover {
            background: var(--secondary-color)
        }

        .wojo.link.cards .card:hover p,
        .wojo.link.cards .card:hover h5,
        .wojo.link.card:hover p,
        .wojo.link.card:hover h5,
        .wojo.link.card:hover h6 {
            color: #fff
        }

        .wojo.link.cards .card::before,
        .wojo.link.cards .card::after,
        .wojo.link.card::before,
        .wojo.link.card::after {
            width: 250px;
            height: 250px;
            content: "";
            top: -15px;
            right: -100%;
            z-index: -11;
            border-radius: 50%;
            position: absolute;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            background: rgba(255, 255, 255, 0.08)
        }

        .wojo.link.cards .card:hover::before,
        .wojo.link.card:hover::before {
            top: -30px;
            right: -150px
        }

        .wojo.link.cards .card:hover::after,
        .wojo.link.card:hover::after {
            top: -50px;
            right: -130px;
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s
        }

        .wojo.plugin.segment {
            border: 0
        }

        .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:48em) and (max-width:64em) and (orientation :landscape) {

            .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))
            }
        }

        .wojo.table {
            width: 100%;
            background: #FFFFFF;
            margin: 0em;
            border: 1px solid #dddddd;
            box-shadow: none;
            border-radius: 0;
            text-align: left;
            border-collapse: separate;
            border-spacing: 0px;
            color: #3D4051
        }

        .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: #F9FAFB;
            text-align: inherit;
            color: rgba(0, 0, 0, 0.87);
            padding: 1em 0.750em;
            vertical-align: inherit;
            font-size: .875rem;
            font-weight: 600;
            text-transform: none;
            border-bottom: 1px solid rgba(34, 36, 38, 0.1);
            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.188rem 0em 0em 0em
        }

        .wojo.table thead tr:first-child>th:last-child {
            border-radius: 0em 0.188rem 0em 0em
        }

        .wojo.table thead tr:first-child>th:only-child {
            border-radius: 0.188rem 0.188rem 0em 0em
        }

        .wojo.table tfoot {
            box-shadow: none
        }

        .wojo.table tfoot th {
            cursor: auto;
            border-top: 1px solid #dddddd;
            background: #F9FAFB;
            text-align: inherit;
            color: rgba(0, 0, 0, 0.87);
            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.188rem
        }

        .wojo.table tfoot tr:first-child>th:last-child {
            border-radius: 0em 0em 0.188rem 0em
        }

        .wojo.table tfoot tr:first-child>th:only-child {
            border-radius: 0em 0em 0.188rem 0.188rem
        }

        .wojo.table tr td {
            border-top: 3px solid rgba(0, 0, 0, 0.05)
        }

        .wojo.table tr:first-child td {
            border-top: none
        }

        .wojo.table td {
            padding: 0.750em 0.750em;
            text-align: inherit;
            font-weight: 300
        }

        .wojo.table>.icon {
            vertical-align: baseline
        }

        .wojo.table>.icon:only-child {
            margin: 0em
        }

        .wojo.table.segment {
            padding: 0em
        }

        .wojo.table.segment:after {
            display: none
        }

        .wojo.table.segment.stacked:after {
            display: block
        }

        .wojo.table th .image,
        .wojo.table th .image img,
        .wojo.table td .image,
        .wojo.table td .image img {
            max-width: none
        }

        .wojo.basic.table.dashed tr td {
            border-top: 2px dashed rgba(34, 36, 38, 0.1)
        }

        .wojo.basic.table.dashed {
            border-bottom: 2px dashed rgba(34, 36, 38, 0.1);
            border-radius: 0
        }

        .wojo.structured.table {
            border-collapse: collapse
        }

        .wojo.structured.table thead th {
            border-left: none;
            border-right: none
        }

        .wojo.structured.sorting.table thead th {
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd
        }

        .wojo.structured.basic.table th {
            border-left: none;
            border-right: none
        }

        .wojo.structured.celled.table tr th,
        .wojo.structured.celled.table tr td {
            border-left: 1px solid rgba(34, 36, 38, 0.1);
            border-right: 1px solid rgba(34, 36, 38, 0.1)
        }

        .wojo.definition.table {
            border: 0
        }

        .wojo.definition.table thead th {
            background: #fff
        }

        .wojo.definition.table thead:not(.full-width) th:first-child {
            pointer-events: none;
            background: transparent;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.4)
        }

        .wojo.definition.table tfoot:not(.full-width) th:first-child {
            pointer-events: none;
            background: transparent;
            font-weight: rgba(0, 0, 0, 0.4);
            color: normal;
            box-shadow: 1px 1px 0px 1px #FFFFFF
        }

        .wojo.celled.definition.table thead:not(.full-width) th:first-child {
            box-shadow: 0px -1px 0px 1px #FFFFFF
        }

        .wojo.celled.definition.table tfoot:not(.full-width) th:first-child {
            box-shadow: 0px 1px 0px 1px #FFFFFF
        }

        .wojo.definition.table tr td:first-child {
            font-weight: 600;
            color: rgba(0, 0, 0, 0.95);
            font-size: 0.688rem;
            text-align: center
        }

        .wojo.definition.table thead:not(.full-width) th:nth-child(2) {
            border-left: 1px solid #dddddd
        }

        .wojo.definition.table tfoot:not(.full-width) th:nth-child(2) {
            border-left: 1px solid #dddddd
        }

        .wojo.definition.table td:nth-child(2) {
            border-left: 1px solid #dddddd
        }

        .wojo.table th.collapsing,
        .wojo.table td.collapsing {
            width: 1px;
            white-space: nowrap
        }

        .wojo.fixed.table {
            table-layout: fixed
        }

        .wojo.fixed.table th,
        .wojo.fixed.table td {
            overflow: hidden;
            text-overflow: ellipsis
        }

        .wojo.striped.table>tr:nth-child(2n),
        .wojo.striped.table tbody tr:nth-child(2n) {
            background-color: #F5F5F5
        }

        .wojo.rounded.table {
            border-radius: 0.188rem
        }

        .wojo.one.column.table td {
            width: 100%
        }

        .wojo.two.column.table td {
            width: 50%
        }

        .wojo.three.column.table td {
            width: 33.33333333%
        }

        .wojo.four.column.table td {
            width: 25%
        }

        .wojo.five.column.table td {
            width: 20%
        }

        .wojo.six.column.table td {
            width: 16.66666667%
        }

        .wojo.seven.column.table td {
            width: 14.28571429%
        }

        .wojo.eight.column.table td {
            width: 12.5%
        }

        .wojo.nine.column.table td {
            width: 11.11111111%
        }

        .wojo.ten.column.table td {
            width: 10%
        }

        .wojo.eleven.column.table td {
            width: 9.09090909%
        }

        .wojo.twelve.column.table td {
            width: 8.33333333%
        }

        .wojo.thirteen.column.table td {
            width: 7.69230769%
        }

        .wojo.fourteen.column.table td {
            width: 7.14285714%
        }

        .wojo.fifteen.column.table td {
            width: 6.66666667%
        }

        .wojo.sixteen.column.table td {
            width: 6.25%
        }

        .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.table[class*="left aligned"],
        .wojo.table [class*="left aligned"] {
            text-align: left
        }

        .wojo.table[class*="center aligned"],
        .wojo.table [class*="center aligned"] {
            text-align: center
        }

        .wojo.table[class*="right aligned"],
        .wojo.table [class*="right aligned"] {
            text-align: right
        }

        .wojo.table[class*="top aligned"],
        .wojo.table [class*="top aligned"] {
            vertical-align: top
        }

        .wojo.table[class*="middle aligned"],
        .wojo.table [class*="middle aligned"] {
            vertical-align: middle
        }

        .wojo.table[class*="bottom aligned"],
        .wojo.table [class*="bottom aligned"] {
            vertical-align: bottom
        }

        .wojo.sorting.table thead th {
            cursor: pointer;
            white-space: nowrap;
            color: rgba(0, 0, 0, 0.87)
        }

        .wojo.sorting.table thead th:first-child {
            border-left: none
        }

        .wojo.sorting.table thead th.sorted,
        .wojo.sorting.table thead th.sorted:hover {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .wojo.sorting.table thead th:not(.disabled):after {
            display: inline-block;
            width: 1em;
            opacity: 0.2;
            margin: 0 0 0 .5em;
            font-family: "WojoIcons";
            content: '\e915';
            font-style: normal;
            font-weight: 400;
            font-size: .750rem;
            text-decoration: inherit
        }

        .wojo.sorting.table thead th.asc:after {
            content: '\e145'
        }

        .wojo.sorting.table thead th.desc:after {
            content: '\e142'
        }

        .wojo.sorting.table th.disabled:after {
            content: ''
        }

        .wojo.sorting.table th.disabled:hover {
            cursor: auto;
            color: rgba(0, 0, 0, 0.95)
        }

        .wojo.sorting.table thead th:hover {
            color: #33BFC1
        }

        .wojo.sorting.table thead th.sorted {
            background-color: #F5F5F5;
            color: rgba(0, 0, 0, 0.95)
        }

        .wojo.sorting.table thead th.sorted:after {
            display: inline-block
        }

        .wojo.sorting.table thead th.sorted:hover {
            background-color: #F5F5F5;
            color: rgba(0, 0, 0, 0.95)
        }

        .wojo.table i.icon.handle {
            cursor: pointer
        }

        .wojo.table tr.sorting-row {
            background-color: #F7F7F7
        }

        .wojo.collapsing.table {
            width: auto
        }

        .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
        }

        .wojo.basic.table tr td {
            border-top: 1px solid rgba(0, 0, 0, 0.1)
        }

        .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: #F9F9F9
        }

        .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.celled.table tr th,
        .wojo.celled.table tr td {
            border-left: 1px solid rgba(34, 36, 38, 0.1)
        }

        .wojo.celled.table tr th:first-child,
        .wojo.celled.table tr td:first-child {
            border-left: none
        }

        .wojo.padded.table th {
            padding-left: 1em;
            padding-right: 1em
        }

        .wojo.padded.table th,
        .wojo.padded.table td {
            padding: 1em 1em
        }

        .wojo[class*="very padded"].table th {
            padding-left: 1.5em;
            padding-right: 1.5em
        }

        .wojo[class*="very padded"].table td {
            padding: 1.5em 1.5em
        }

        .wojo.compact.table th {
            padding-left: 0.7em;
            padding-right: 0.7em
        }

        .wojo.compact.table td {
            padding: 0.5em 0.7em
        }

        .wojo[class*="very compact"].table th {
            padding-left: 0.6em;
            padding-right: 0.6em
        }

        .wojo[class*="very compact"].table td {
            padding: 0.4em 0.6em
        }

        .wojo.compact.fitted.table td {
            padding: 0.2em 0.4em
        }

        .wojo.table[class*="left aligned"],
        .wojo.table [class*="left aligned"] {
            text-align: left
        }

        .wojo.table[class*="center aligned"],
        .wojo.table [class*="center aligned"] {
            text-align: center
        }

        .wojo.table[class*="right aligned"],
        .wojo.table [class*="right aligned"] {
            text-align: right
        }

        .wojo.table[class*="top aligned"],
        .wojo.table [class*="top aligned"] {
            vertical-align: top
        }

        .wojo.table[class*="middle aligned"],
        .wojo.table [class*="middle aligned"] {
            vertical-align: middle
        }

        .wojo.table[class*="bottom aligned"],
        .wojo.table [class*="bottom aligned"] {
            vertical-align: bottom
        }

        .wojo.small.table {
            font-size: 0.9em
        }

        .wojo.table {
            font-size: 1em
        }

        .wojo.large.table {
            font-size: 1.1em
        }

        table.bt thead {
            display: none
        }

        table.bt tbody td {
            border: none;
            display: block;
            vertical-align: middle;
            text-align: left
        }

        table.bt tbody td:before {
            content: attr(data-th) ":";
            font-weight: 600;
            font-size: .875em;
            width: 8em;
            display: inline-block;
            color: rgba(34, 36, 38, 1)
        }

        table.bt tbody td.bt-hide {
            display: none
        }

        table.bt tbody td .bt-content {
            vertical-align: middle;
            display: inline-block
        }

        .bt-wrapper.active {
            max-height: 610px;
            overflow: auto;
            -webkit-overflow-scrolling: touch
        }

        @media screen and (max-width:769px) {
            .wojo.table tr td {
                border-top: 1px solid rgba(34, 36, 38, 0)
            }

            .wojo.basic.table tbody tr {
                box-shadow: 0 2px 0 0 #B4C1C7
            }

            .wojo.table th.collapsing,
            .wojo.table td.collapsing {
                width: auto;
                white-space: normal
            }

            .wojo.table[class*="center aligned"],
            .wojo.table [class*="center aligned"],
            .wojo.table[class*="tight aligned"],
            .wojo.table [class*="tight aligned"] {
                text-align: left
            }
        }

        .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-wdropdown] {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        [data-wdropdown]>.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.statistic {
            display: inline-flex;
            flex-direction: column;
            margin: 1em 0em;
            max-width: auto
        }

        .wojo.statistic+.wojo.statistic {
            margin: 0em 0em 0em 1.5em
        }

        .wojo.statistic:first-child {
            margin-top: 0em
        }

        .wojo.statistic:last-child {
            margin-bottom: 0em
        }

        .wojo.statistics {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap
        }

        .wojo.statistics>.statistic {
            display: inline-flex;
            flex: 0 1 auto;
            flex-direction: column;
            margin: 0em 1.5em 2em;
            max-width: auto
        }

        .wojo.statistics {
            display: flex;
            margin: 1em -1.5em -2em
        }

        .wojo.statistics:after {
            display: block;
            content: ' ';
            height: 0px;
            clear: both;
            overflow: hidden;
            visibility: hidden
        }

        .wojo.statistics:first-child {
            margin-top: 0em
        }

        .wojo.statistics:last-child {
            margin-bottom: 0em
        }

        .wojo.statistics .statistic>.value,
        .wojo.statistic>.value {
            font-weight: 300;
            font-size: 4rem;
            line-height: 2;
            color: var(--dark-color);
            text-transform: uppercase;
            text-align: center
        }

        .wojo.statistics .statistic>.label,
        .wojo.statistic>.label {
            font-weight: 500;
            font-size: 1em;
            color: rgba(0, 0, 0, 0.87);
            text-transform: uppercase;
            text-align: center
        }

        .wojo.statistics .statistic>.label~.value,
        .wojo.statistic>.label~.value {
            margin-top: 0rem
        }

        .wojo.statistics .statistic>.value~.label,
        .wojo.statistic>.value~.label {
            margin-top: 0rem
        }

        .wojo.statistics .statistic>.value .icon,
        .wojo.statistic>.value .icon {
            opacity: 1;
            width: auto;
            margin: 0em
        }

        .wojo.statistics .statistic>.text.value,
        .wojo.statistic>.text.value {
            line-height: 1em;
            min-height: 2em;
            font-weight: 600;
            text-align: center
        }

        .wojo.statistics .statistic>.text.value+.label,
        .wojo.statistic>.text.value+.label {
            text-align: center
        }

        .wojo.statistics .statistic>.value img,
        .wojo.statistic>.value img {
            max-height: 3rem;
            vertical-align: baseline
        }

        .wojo.horizontal.statistic {
            flex-direction: row;
            align-items: center
        }

        .wojo.horizontal.statistics {
            flex-direction: column;
            margin: 0em;
            max-width: none
        }

        .wojo.horizontal.statistics .statistic {
            flex-direction: row;
            align-items: center;
            max-width: none;
            margin: 1em 0em
        }

        .wojo.horizontal.statistic>.text.value,
        .wojo.horizontal.statistics>.statistic>.text.value {
            min-height: 0em
        }

        .wojo.horizontal.statistics .statistic>.value .icon,
        .wojo.horizontal.statistic>.value .icon {
            width: 1.18em
        }

        .wojo.horizontal.statistics .statistic>.value,
        .wojo.horizontal.statistic>.value {
            display: inline-block;
            vertical-align: middle
        }

        .wojo.horizontal.statistics .statistic>.label,
        .wojo.horizontal.statistic>.label {
            display: inline-block;
            vertical-align: middle;
            margin: 0em 0em 0em 0.75em
        }

        .wojo.red.statistics .statistic>.value,
        .wojo.statistics .red.statistic>.value,
        .wojo.red.statistic>.value {
            color: #DB2828
        }

        .wojo.orange.statistics .statistic>.value,
        .wojo.statistics .orange.statistic>.value,
        .wojo.orange.statistic>.value {
            color: #F2711C
        }

        .wojo.yellow.statistics .statistic>.value,
        .wojo.statistics .yellow.statistic>.value,
        .wojo.yellow.statistic>.value {
            color: #FBBD08
        }

        .wojo.olive.statistics .statistic>.value,
        .wojo.statistics .olive.statistic>.value,
        .wojo.olive.statistic>.value {
            color: #B5CC18
        }

        .wojo.green.statistics .statistic>.value,
        .wojo.statistics .green.statistic>.value,
        .wojo.green.statistic>.value {
            color: #21BA45
        }

        .wojo.teal.statistics .statistic>.value,
        .wojo.statistics .teal.statistic>.value,
        .wojo.teal.statistic>.value {
            color: #00B5AD
        }

        .wojo.blue.statistics .statistic>.value,
        .wojo.statistics .blue.statistic>.value,
        .wojo.blue.statistic>.value {
            color: #2185D0
        }

        .wojo.violet.statistics .statistic>.value,
        .wojo.statistics .violet.statistic>.value,
        .wojo.violet.statistic>.value {
            color: #6435C9
        }

        .wojo.purple.statistics .statistic>.value,
        .wojo.statistics .purple.statistic>.value,
        .wojo.purple.statistic>.value {
            color: #A333C8
        }

        .wojo.pink.statistics .statistic>.value,
        .wojo.statistics .pink.statistic>.value,
        .wojo.pink.statistic>.value {
            color: #E03997
        }

        .wojo.brown.statistics .statistic>.value,
        .wojo.statistics .brown.statistic>.value,
        .wojo.brown.statistic>.value {
            color: #A5673F
        }

        .wojo.grey.statistics .statistic>.value,
        .wojo.statistics .grey.statistic>.value,
        .wojo.grey.statistic>.value {
            color: #767676
        }

        .wojo.inverted.statistics .statistic>.value,
        .wojo.inverted.statistic .value {
            color: #FFFFFF
        }

        .wojo.inverted.statistics .statistic>.label,
        .wojo.inverted.statistic .label {
            color: rgba(255, 255, 255, 0.9)
        }

        .wojo.inverted.red.statistics .statistic>.value,
        .wojo.statistics .inverted.red.statistic>.value,
        .wojo.inverted.red.statistic>.value {
            color: #FF695E
        }

        .wojo.inverted.orange.statistics .statistic>.value,
        .wojo.statistics .inverted.orange.statistic>.value,
        .wojo.inverted.orange.statistic>.value {
            color: #FF851B
        }

        .wojo.inverted.yellow.statistics .statistic>.value,
        .wojo.statistics .inverted.yellow.statistic>.value,
        .wojo.inverted.yellow.statistic>.value {
            color: #FFE21F
        }

        .wojo.inverted.olive.statistics .statistic>.value,
        .wojo.statistics .inverted.olive.statistic>.value,
        .wojo.inverted.olive.statistic>.value {
            color: #D9E778
        }

        .wojo.inverted.green.statistics .statistic>.value,
        .wojo.statistics .inverted.green.statistic>.value,
        .wojo.inverted.green.statistic>.value {
            color: #2ECC40
        }

        .wojo.inverted.teal.statistics .statistic>.value,
        .wojo.statistics .inverted.teal.statistic>.value,
        .wojo.inverted.teal.statistic>.value {
            color: #6DFFFF
        }

        .wojo.inverted.blue.statistics .statistic>.value,
        .wojo.statistics .inverted.blue.statistic>.value,
        .wojo.inverted.blue.statistic>.value {
            color: #54C8FF
        }

        .wojo.inverted.violet.statistics .statistic>.value,
        .wojo.statistics .inverted.violet.statistic>.value,
        .wojo.inverted.violet.statistic>.value {
            color: #A291FB
        }

        .wojo.inverted.purple.statistics .statistic>.value,
        .wojo.statistics .inverted.purple.statistic>.value,
        .wojo.inverted.purple.statistic>.value {
            color: #DC73FF
        }

        .wojo.inverted.pink.statistics .statistic>.value,
        .wojo.statistics .inverted.pink.statistic>.value,
        .wojo.inverted.pink.statistic>.value {
            color: #FF8EDF
        }

        .wojo.inverted.brown.statistics .statistic>.value,
        .wojo.statistics .inverted.brown.statistic>.value,
        .wojo.inverted.brown.statistic>.value {
            color: #D67C1C
        }

        .wojo.inverted.grey.statistics .statistic>.value,
        .wojo.statistics .inverted.grey.statistic>.value,
        .wojo.inverted.grey.statistic>.value {
            color: #DCDDDE
        }

        .wojo[class*="left floated"].statistic {
            float: left;
            margin: 0em 2em 1em 0em
        }

        .wojo[class*="right floated"].statistic {
            float: right;
            margin: 0em 0em 1em 2em
        }

        .wojo.floated.statistic:last-child {
            margin-bottom: 0em
        }

        .wojo.mini.statistics .statistic>.value,
        .wojo.mini.statistic>.value {
            font-size: 1.5rem
        }

        .wojo.mini.horizontal.statistics .statistic>.value,
        .wojo.mini.horizontal.statistic>.value {
            font-size: 1.5rem
        }

        .wojo.mini.statistics .statistic>.text.value,
        .wojo.mini.statistic>.text.value {
            font-size: 1rem
        }

        .wojo.tiny.statistics .statistic>.value,
        .wojo.tiny.statistic>.value {
            font-size: 2rem
        }

        .wojo.tiny.horizontal.statistics .statistic>.value,
        .wojo.tiny.horizontal.statistic>.value {
            font-size: 2rem
        }

        .wojo.tiny.statistics .statistic>.text.value,
        .wojo.tiny.statistic>.text.value {
            font-size: 1rem
        }

        .wojo.small.statistics .statistic>.value,
        .wojo.small.statistic>.value {
            font-size: 3rem
        }

        .wojo.small.horizontal.statistics .statistic>.value,
        .wojo.small.horizontal.statistic>.value {
            font-size: 2rem
        }

        .wojo.small.statistics .statistic>.text.value,
        .wojo.small.statistic>.text.value {
            font-size: 1rem
        }

        .wojo.statistics .statistic>.value,
        .wojo.statistic>.value {
            font-size: 4rem
        }

        .wojo.horizontal.statistics .statistic>.value,
        .wojo.horizontal.statistic>.value {
            font-size: 3rem
        }

        .wojo.statistics .statistic>.text.value,
        .wojo.statistic>.text.value {
            font-size: 2rem
        }

        .wojo.large.statistics .statistic>.value,
        .wojo.large.statistic>.value {
            font-size: 5rem
        }

        .wojo.large.horizontal.statistics .statistic>.value,
        .wojo.large.horizontal.statistic>.value {
            font-size: 4rem
        }

        .wojo.large.statistics .statistic>.text.value,
        .wojo.large.statistic>.text.value {
            font-size: 2.5rem
        }

        .wojo.huge.statistics .statistic>.value,
        .wojo.huge.statistic>.value {
            font-size: 6rem
        }

        .wojo.huge.horizontal.statistics .statistic>.value,
        .wojo.huge.horizontal.statistic>.value {
            font-size: 5rem
        }

        .wojo.huge.statistics .statistic>.text.value,
        .wojo.huge.statistic>.text.value {
            font-size: 2.5rem
        }

        .wojo.calendar.popup,
        .wojo.mini.calendar.popup {
            max-width: none;
            padding: 0;
            border: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: .875rem
        }

        .wojo.calendar .wojo.popup::before {
            background: #F9FAFB
        }

        .wojo.calendar .wojo.popup.top::before {
            background: #fff
        }

        .wojo.calendar .calendar:focus {
            outline: 0
        }

        .wojo.calendar .wojo.table.year,
        .wojo.calendar .wojo.table.month,
        .wojo.calendar .wojo.table.minute {
            min-width: 15em
        }

        .wojo.calendar .wojo.table.day {
            min-width: 18em
        }

        .wojo.calendar .wojo.table.hour {
            min-width: 20em
        }

        .wojo.calendar .wojo.table tr th,
        .wojo.calendar .wojo.table tr td {
            padding: 0.5em;
            white-space: nowrap
        }

        .wojo.calendar .wojo.table tr th {
            border-left: none
        }

        .wojo.calendar .wojo.table tr th .icon {
            margin: 0
        }

        .wojo.calendar .wojo.table tr th .icon {
            margin: 0
        }

        .wojo.calendar .wojo.table tr:first-child th {
            position: relative;
            padding-left: 0;
            padding-right: 0
        }

        .wojo.calendar .wojo.table.day tr:first-child th {
            border: none
        }

        .wojo.calendar .wojo.table.day tr:nth-child(2) th {
            padding-top: 0.2em;
            padding-bottom: 0.3em
        }

        .wojo.calendar .wojo.table tr td {
            padding-left: 0.1em;
            padding-right: 0.1em
        }

        .wojo.calendar .wojo.table tr .link {
            cursor: pointer
        }

        .wojo.calendar .wojo.table tr .prev.link {
            width: 14.28571429%;
            position: absolute;
            left: 0
        }

        .wojo.calendar .wojo.table tr .next.link {
            width: 14.28571429%;
            position: absolute;
            right: 0
        }

        .wojo.calendar .wojo.table tr .disabled {
            pointer-events: none;
            color: rgba(40, 40, 40, 0.3)
        }

        .wojo.calendar .wojo.table tr td.today {
            font-weight: 500;
            background-color: rgba(0, 0, 0, 0.1)
        }

        .wojo.calendar .wojo.table tr td.range {
            background: rgba(0, 0, 0, 0.05);
            color: rgba(0, 0, 0, 0.95);
            box-shadow: none
        }

        .wojo.calendar .wojo.table.inverted tr td.range {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            box-shadow: none
        }

        .wojo.calendar .calendar:focus .wojo.table tbody tr td.focus,
        .wojo.calendar .calendar.active .wojo.table tbody tr td.focus {
            box-shadow: inset 0 0 0 1px #33BFC1
        }

        .wojo.calendar .wojo.table tbody tr td.active {
            background: #33BFC1;
            color: #fff
        }

        .wojo.calendar .calendar:focus .wojo.table.inverted tbody tr td.focus,
        .wojo.calendar .calendar.active .wojo.table.inverted tbody tr td.focus {
            box-shadow: inset 0 0 0 1px #33BFC1
        }

        .wojo.calendar .header {
            display: table;
            table-layout: fixed;
            width: 100%;
            background: #fff;
            box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)
        }

        .wojo.calendar .header div {
            width: 14.28% !important;
            display: table-cell;
            box-sizing: border-box;
            position: relative;
            font-weight: 500;
            text-align: center;
            text-transform: uppercase;
            padding: .5em;
            font-size: .875em
        }

        .wojo.calendar .content {
            display: table;
            table-layout: fixed;
            width: 100%;
            overflow: hidden
        }

        .wojo.calendar .weeks {
            display: table-row;
            width: 100%
        }

        .wojo.calendar .weeks .cell {
            width: 14.28% !important;
            display: table-cell;
            vertical-align: top;
            box-sizing: border-box;
            position: relative;
            font-weight: 500;
            color: inherit;
            background: #fff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
            transition: .25s;
            padding: 0;
            text-decoration: none
        }

        .wojo.calendar .weeks .day:before {
            content: " ";
            display: block;
            padding-top: 100%;
            float: left
        }

        .wojo.calendar .weeks .empty {
            background-color: #FDFDFD
        }

        .wojo.calendar .weeks .date {
            position: absolute;
            line-height: 1em;
            text-align: right;
            top: 2px;
            right: 5px;
            font-size: .750em;
            color: rgba(0, 0, 0, 0.5)
        }

        .wojo.calendar .weeks .day.today {
            background: #fffde7
        }

        .wojo.calendar .weeks .day.today .date {
            color: #E2747E
        }

        .wojo.calendar .progress {
            position: relative;
            text-align: center;
            line-height: 0;
            max-width: 20px;
            margin: 0 auto;
            padding-top: 30%
        }

        .wojo.calendar .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.calendar .indicator:hover {
            cursor: pointer
        }

        .wojo.calendar .list {
            background: rgba(255, 255, 255, 0.85);
            overflow: auto;
            position: absolute;
            top: 38px;
            width: 100%;
            height: calc(100% - 40px);
            display: none
        }

        .wojo.calendar .list .event {
            display: block;
            padding: .5em .875em;
            border-radius: .188em;
            margin-bottom: .5em;
            position: relative
        }

        .wojo.calendar .list .event p {
            font-size: .875em;
            color: rgba(0, 0, 0, 0.65)
        }

        .wojo.calendar .list .event>a {
            font-size: .875em;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.75)
        }

        .wojo.calendar .list .event>a:hover {
            color: rgba(255, 255, 255, 1)
        }

        .wojo.calendar .list .event .time {
            font-weight: 400;
            position: absolute;
            right: 0.875em;
            bottom: .5em;
            color: rgba(255, 255, 255, 0.75)
        }

        .wojo.calendar .list .event .time .start,
        .wojo.calendar .list .event .time .end {
            font-size: .750em;
            display: inline-block
        }

        .wojo.calendar .list .event .time .end:not(:empty):before {
            content: '-';
            padding: 0 2px
        }

        .wojo.calendar .list .date {
            width: 4.5em;
            position: absolute;
            left: 0;
            top: 0.875em;
            text-align: center;
            font-size: .875em;
            font-weight: 500;
            line-height: 1.2em
        }

        .wojo.calendar .list .date>span {
            display: block
        }

        .wojo.calendar .list .today .date {
            color: #E2747E
        }

        .wojo.calendar .event-item {
            position: relative;
            padding: .875em 0.875em .5em 4.5em;
            display: none;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            text-align: left
        }

        .wojo.calendar .event-item:after {
            content: '-/-';
            padding: .5em .875em;
            display: block;
            margin-bottom: .5em
        }

        .wojo.calendar .event-item .remove {
            top: 1em;
            position: absolute;
            right: 1.5em;
            color: #fff
        }

        .wojo.calendar .list .active {
            display: block
        }

        .wojo.calendar .list .active .event:last-child {
            margin-bottom: 0
        }

        .wojo.calendar .list .active:after {
            display: none !important
        }

        @media (min-width:400px) {
            .wojo.calendar .weeks .date {
                top: 5px;
                left: 5px;
                font-size: .785em
            }
        }

        @media (min-width:600px) {
            .wojo.calendar .weeks .day {
                padding-top: 1.5em;
                position: relative
            }

            .wojo.calendar .weeks .day:before {
                padding-top: 77%
            }

            .wojo.calendar .progress {
                width: auto;
                max-width: none
            }

            .wojo.calendar .progress {
                padding: 0
            }

            .wojo.calendar .indicator {
                font-weight: 500;
                text-align: left;
                display: block;
                margin: 0 0 1px 0;
                width: auto;
                font-size: 0.688em;
                padding: 1em;
                border-radius: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #fff;
                text-decoration: none;
                white-space: nowrap;
                box-sizing: border-box
            }

            .wojo.calendar .indicator.start {
                border-radius: 3px 0 0 3px
            }

            .wojo.calendar .indicator.end {
                border-radius: 0 3px 3px 0
            }
        }

        .wojo.message {
            display: flex;
            flex-flow: row wrap;
            position: relative;
            padding: 1rem 1.5rem;
            background-color: #fff;
            border-radius: .250rem;
            margin-bottom: 1rem;
            border: 1px solid var(--grey-color-300);
            box-shadow: 0 23px 49px 0 var(--shadow-color)
        }

        .wojo.message .header {
            font-size: 1rem;
            font-weight: 700
        }

        .wojo.icon.message>.icon:not(.close) {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap;
            margin-right: 1rem
        }

        .wojo.icon.message>.icon:not(.close) {
            width: auto
        }

        .wojo.icon.message>.content {
            flex: 1 1 0px
        }

        .wojo.icon.message>.content.auto {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap
        }

        .wojo.message>.close.icon {
            cursor: pointer;
            position: absolute;
            margin: 0;
            top: .750em;
            right: .5rem;
            opacity: .7;
            transition: opacity .1s ease
        }

        .wojo.icon.message>.wojo.image {
            margin-right: 1.5rem
        }

        .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.info.message {
            background-color: var(--info-color);
            border: 1px solid var(--info-color);
            color: var(--info-color-inverted)
        }

        .wojo.info.inverted.message {
            background-color: var(--info-color-inverted);
            border: 1px solid var(--info-color);
            color: var(--info-color)
        }

        .wojo.alert.message {
            background-color: var(--alert-color);
            border: 1px solid var(--alert-color);
            color: var(--alert-color-inverted)
        }

        .wojo.alert.inverted.message {
            background-color: var(--alert-color-inverted);
            border: 1px solid var(--alert-color);
            color: var(--alert-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;
            color: #fff
        }

        .wojo.notice .flag {
            margin-left: .5rem
        }

        .wojo.notice .item b {
            margin-right: .5rem
        }

        .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 {
            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.fitted.message {
            padding: 0
        }

        .wojo.basic.message {
            border: 0
        }

        .wojo.simple.message {
            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.relaxed.message {
            padding: 2rem
        }

        .wojo.small.message {
            font-size: .875rem
        }

        .wojo.message {
            font-size: 1rem
        }

        .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%
            }
        }

        .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.progress.relaxed {
            margin-bottom: 2rem
        }

        .wojo.tiny.progress {
            height: .25rem
        }

        .wojo.mini.progress {
            height: .5rem
        }

        .wojo.small.progress {
            height: 1rem
        }

        .wojo.feed {
            margin: 1em 0em
        }

        .wojo.feed:first-child {
            margin-top: 0em
        }

        .wojo.feed:last-child {
            margin-bottom: 0em
        }

        .wojo.feed>.event {
            display: flex;
            flex-direction: row;
            width: 100%;
            padding: 0.21428571rem 0em;
            margin: 0em;
            background: none;
            border-top: none
        }

        .wojo.feed>.event:first-child {
            border-top: 0px;
            padding-top: 0em
        }

        .wojo.feed>.event:last-child {
            padding-bottom: 0em
        }

        .wojo.feed>.event>.label {
            display: block;
            flex: 0 0 auto;
            width: auto;
            height: auto;
            min-width: 7rem;
            -ms-grid-row-align: stretch;
            align-self: stretch;
            text-align: left
        }

        .wojo.feed>.event>.label .icon {
            opacity: 1;
            font-size: 1.5em;
            width: 100%;
            padding: 0.25em;
            background: none;
            border: none;
            border-radius: none;
            color: rgba(0, 0, 0, 0.6)
        }

        .wojo.feed>.event>.label img {
            width: 100%;
            height: auto;
            border-radius: 500rem
        }

        .wojo.feed>.event>.label+.content {
            margin: 0 0 1rem 1.5rem
        }

        .wojo.feed>.event>.content {
            display: block;
            flex: 1 1 auto;
            -ms-grid-row-align: stretch;
            align-self: stretch;
            text-align: left;
            word-wrap: break-word
        }

        .wojo.feed>.event:last-child>.content {
            padding-bottom: 0em
        }

        .wojo.feed>.event>.content a {
            cursor: pointer
        }

        .wojo.feed>.event>.content .date {
            margin: -0.5rem 0em 0em;
            padding: 0em;
            font-weight: normal;
            font-size: 1em;
            font-style: normal;
            color: rgba(0, 0, 0, 0.4)
        }

        .wojo.feed>.event>.content .summary {
            margin: 0em;
            font-size: 1em;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.87)
        }

        .wojo.feed>.event>.content .summary img {
            display: inline-block;
            width: auto;
            height: 10em;
            margin: -0.25em 0.25em 0em 0em;
            border-radius: 0.25em;
            vertical-align: middle
        }

        .wojo.feed>.event>.content .user {
            display: inline-block;
            font-weight: bold;
            margin-right: 0em;
            vertical-align: baseline
        }

        .wojo.feed>.event>.content .user img {
            margin: -0.25em 0.25em 0em 0em;
            width: auto;
            height: 10em;
            vertical-align: middle
        }

        .wojo.feed>.event>.content .summary>.date {
            display: inline-block;
            float: none;
            font-weight: 400;
            font-size: 0.875em;
            font-style: normal;
            margin: 0em 0em 0em 0.5em;
            padding: 0em;
            color: rgba(0, 0, 0, 0.4);
            vertical-align: middle
        }

        .wojo.feed>.event>.content .extra {
            margin: 0.5em 0em 0em;
            background: none;
            padding: 0em;
            color: rgba(0, 0, 0, 0.87)
        }

        .wojo.feed>.event>.content .extra.images img {
            display: inline-block;
            margin: 0em 0.25em 0em 0em;
            width: 6em
        }

        .wojo.feed>.event>.content .extra.text {
            padding: 0em;
            border-left: none;
            font-size: .875em;
            max-width: auto;
            line-height: 1.4285em
        }

        .wojo.feed>.event>.content .meta {
            display: inline-block;
            font-size: 0.85714286em;
            margin: 0.5em 0em 0em;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0em;
            color: rgba(0, 0, 0, 0.6)
        }

        .wojo.feed>.event>.content .meta>* {
            position: relative;
            margin-left: 0.75em
        }

        .wojo.feed>.event>.content .meta>*:after {
            content: '';
            color: rgba(0, 0, 0, 0.2);
            top: 0em;
            left: -1em;
            opacity: 1;
            position: absolute;
            vertical-align: top
        }

        .wojo.feed>.event>.content .meta .like {
            color: '';
            transition: 0.2s color ease
        }

        .wojo.feed>.event>.content .meta .like:hover .icon {
            color: #FF2733
        }

        .wojo.feed>.event>.content .meta .active.like .icon {
            color: #EF404A
        }

        .wojo.feed>.event>.content .meta> :first-child {
            margin-left: 0em
        }

        .wojo.feed>.event>.content .meta> :first-child::after {
            display: none
        }

        .wojo.feed>.event>.content .meta a,
        .wojo.feed>.event>.content .meta>.icon {
            cursor: pointer;
            opacity: 1;
            color: rgba(0, 0, 0, 0.5);
            transition: color 0.1s ease
        }

        .wojo.feed>.event>.content .meta a:hover,
        .wojo.feed>.event>.content .meta a:hover .icon,
        .wojo.feed>.event>.content .meta>.icon:hover {
            color: rgba(0, 0, 0, 0.95)
        }

        .wojo.divided.feed>.event {
            border-top: 1px solid #e7eaf3;
            padding-bottom: 1em;
            padding-top: 1em
        }

        .wojo.divided.feed>.event:first-child {
            border-top: none;
            padding-top: 0
        }

        .wojo.small.feed {
            font-size: 0.875rem
        }

        .wojo.feed {
            font-size: 1rem
        }

        .wojo.large.feed {
            font-size: 1.25
        }

        .wojo.comments {
            margin: 1.5em 0;
            max-width: 800px
        }

        .wojo.comments .comment {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-start;
            position: relative;
            background-image: none;
            margin: 2rem 0 0;
            padding: 1rem;
            border: none;
            border-top: none;
            border-radius: .250rem;
            box-shadow: 0 23px 49px 0 var(--shadow-color)
        }

        .wojo.comments .comment:first-child {
            margin-top: 0
        }

        .wojo.comments .comment .comments {
            margin: 0 0 0.5rem 0.5rem;
            padding: 1rem 0 1rem 1rem
        }

        .wojo.comments .comment .comments:before {
            position: absolute;
            top: 0px;
            left: 0px
        }

        .wojo.comments .comment .comments .comment {
            border: none;
            border-top: none;
            background: none
        }

        .wojo.comments .comment .avatar {
            flex: 0 0 auto;
            max-width: none;
            white-space: nowrap;
            width: 2.5rem
        }

        .wojo.comments .comment img.avatar,
        .wojo.comments .comment .avatar img {
            display: block;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            border-radius: 50%
        }

        .wojo.comments .comment>.content {
            flex: 1 1 0px;
            min-width: 0
        }

        .wojo.comments .comment>.avatar~.content {
            margin-left: 2rem
        }

        .wojo.comments .comment .author {
            font-size: 1em;
            font-weight: 500
        }

        .wojo.comments .comment a.author {
            cursor: pointer
        }

        .wojo.comments .comment a.author:hover {
            color: var(--primary-color-hover)
        }

        .wojo.comments .comment .metadata {
            display: inline-block;
            margin-left: 0.5rem;
            font-size: .875rem;
            vertical-align: middle
        }

        .wojo.comments .comment .metadata a.delete {
            margin-left: 1rem;
            vertical-align: middle
        }

        .wojo.comments .comment .metadata>* {
            display: inline-block;
            margin: 0 .5rem 0 0
        }

        .wojo.comments .comment .metadata> :last-child {
            margin-right: 0
        }

        .wojo.comments .comment .text:not(.wojo) {
            margin: .25rem 0 .5rem;
            font-size: 1rem;
            word-wrap: break-word;
            line-height: 1.3;
            font-weight: 300
        }

        .wojo.comments .comment .actions {
            font-size: .750rem;
            margin-top: 0
        }

        .wojo.comments .comment .actions a {
            cursor: pointer;
            display: inline-block;
            font-weight: 600;
            font-size: .875rem
        }

        .wojo.comments .comment .actions a:last-child {
            margin-right: 0
        }

        .wojo.comments .comment .actions a.active,
        .wojo.comments .comment .actions a:hover {
            color: var(--dark-color)
        }

        .wojo.collapsed.comments,
        .wojo.comments .collapsed.comments,
        .wojo.comments .collapsed.comment {
            display: none
        }

        .wojo.threaded.comments .comment .comments {
            margin: -1.5rem 0 -1em 1.25rem;
            padding: 3rem 0 2rem 2.25rem;
            box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15)
        }

        .wojo.minimal.comments .comment .actions {
            opacity: 0;
            position: absolute;
            top: 0px;
            right: 0px;
            left: auto;
            -webkit-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s
        }

        .wojo.minimal.comments .comment>.content:hover>.actions {
            opacity: 1
        }

        .wojo.mini.comments {
            font-size: 0.750rem
        }

        .wojo.tiny.comments {
            font-size: 0.875rem
        }

        .wojo.small.comments {
            font-size: 0.913rem
        }

        .wojo.comments {
            font-size: 1rem
        }

        .wojo.large.comments {
            font-size: 1.25rem
        }

        .wojo.big.comments {
            font-size: 1.5rem
        }

        [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.063rem;
            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.063rem;
            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.063rem;
            margin-bottom: 0.125rem
        }

        [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.063rem;
            margin-bottom: 0.125rem
        }

        [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.063rem;
            margin-top: 0.125rem
        }

        [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.063rem;
            margin-top: 0.125rem
        }

        [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.125rem;
            margin-top: 0.063rem
        }

        [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.125rem;
            margin-right: -0.063rem
        }

        [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.063rem;
            margin-left: 0.125rem
        }

        [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: var(--dark-color);
            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: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)
        }

        .jqsfield {
            padding: .250rem;
            text-align: left
        }

        .morris-hover {
            position: absolute;
            z-index: 1000
        }

        .morris-hover.morris-default-style {
            background-color: var(--dark-color);
            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: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1)
        }

        .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
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        .redactor-animate-hide {
            display: none !important
        }

        .redactor-fadeIn {
            opacity: 0;
            animation: fadeIn .5s ease-in-out
        }

        .redactor-fadeOut {
            opacity: 1;
            animation: fadeOut .5s ease-in-out
        }

        [class^="re-icon-"],
        [class*=" re-icon-"] {
            font-family: 'WojoIcons' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-smoothing: antialiased;
            backface-visibility: hidden
        }

        .re-icon-aligncenter:before {
            content: "\e002"
        }

        .re-icon-alignment:before,
        .re-icon-alignleft:before {
            content: "\ea8e"
        }

        .re-icon-alignright:before {
            content: "\ea91"
        }

        .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: "\e91a"
        }

        .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;
            border: 1px solid rgba(0, 0, 0, 0.075);
            border-radius: 3px;
            box-shadow: none
        }

        .redactor-box.redactor-inline {
            position: static
        }

        .redactor-focus.redactor-styles-on,
        .redactor-focus:focus.redactor-styles-on {
            border-color: #673AB7
        }

        .redactor-over:hover.redactor-styles-on {
            border-color: #ee698a
        }

        .redactor-source-view,
        .redactor-source-view.redactor-styles-on {
            border-color: #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 h6:empty,
        .redactor-in p:empty,
        .redactor-in blockquote:empty {
            min-height: 1.5em
        }

        .redactor-in strong:empty,
        .redactor-in b:empty,
        .redactor-in em:empty,
        .redactor-in i: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)
        }

        .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] {
            clear: both;
            display: inline-block
        }

        .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;
            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.18)
        }

        #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: var(--dark-color);
            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;
            display: flex;
            margin: 0 !important;
            padding: 0;
            list-style: none !important;
            line-height: 1 !important;
            background: none;
            border: none;
            box-sizing: border-box
        }

        .redactor-box.redactor-styles-on .redactor-toolbar {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap;
            padding: 1em;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .redactor-toolbar a,
        .redactor-air a {
            box-sizing: border-box;
            font-size: 14px;
            text-align: center;
            padding: 10px 15px 9px 15px;
            cursor: pointer;
            outline: none;
            border: none;
            vertical-align: middle;
            text-decoration: none;
            position: relative;
            color: rgba(0, 0, 0, 0.85);
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.97);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
            margin-right: 5px;
            margin-bottom: 4px;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            max-width: 100%;
            -webkit-align-self: center;
            -ms-flex-item-align: center;
            align-self: center
        }

        .redactor-toolbar a.re-button-icon,
        .redactor-air a.re-button-icon {
            font-size: 1rem;
            padding: .5rem 1rem
        }

        .redactor-toolbar a:hover,
        .redactor-air a:hover {
            outline: none;
            color: #fff;
            background: #1E88E5
        }

        .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: var(--dark-color)
        }

        .redactor-source-view .redactor-toolbar a {
            background: #000;
            color: #fff
        }

        .redactor-source-view .redactor-toolbar a:hover {
            background: #1E88E5
        }

        .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: auto;
            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;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
            border-radius: 2px;
            width: 264px;
            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: #1E88E5 !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: #fff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 15px rgba(80, 80, 80, 0.25);
            border-radius: 3px;
            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-color: #FBFCFC;
            border: 1px solid #DCDFE2;
            box-shadow: none;
            color: #50646F;
            border-radius: 0.250rem;
            padding: 0 .5em
        }

        .redactor-modal textarea {
            padding: .5em;
            height: auto;
            line-height: 1.5;
            vertical-align: top
        }

        .redactor-modal select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAB3SURBVBiVhdCxCQJhEEThbw/TK8QijMTcDqxAi9HgijAxP4xsSxyTX8RTzoWBZd+bZAs7bLEwP3dcOvSoP7Lm9JVEVW2wnykGpyRjB0lGDA38kofmqOTtVNUaB3Tt9MAxyfVdTz6CFc4tqyn/+kySW1UtX/uUPwE2e0CBoJpLPAAAAABJRU5ErkJggg==');
            background-repeat: no-repeat;
            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;
            margin-bottom: 0.25em;
            color: #7F929C;
            font-size: 0.913em;
            font-weight: 700
        }

        .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;
            border-color: #969fa9;
            box-shadow: none
        }

        .redactor-modal input:focus,
        .redactor-modal textarea:focus,
        .redactor-modal select:focus {
            transition: all linear .2s;
            outline: none;
            color: rgba(0, 0, 0, 0.95);
            border-color: #1E88E5;
            border-radius: 0.188rem;
            background: #FFFFFF;
            box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.05)
        }

        .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 {
            font-weight: 400;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            text-align: center;
            font-size: 15px;
            color: #41C7F9;
            background-color: #fff;
            border-radius: 3px;
            border: 2px solid #41C7F9;
            min-height: 40px;
            outline: none;
            padding: 0.5em 1.25em;
            cursor: pointer;
            line-height: 1.2;
            vertical-align: middle;
            -webkit-appearance: none;
            -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
            transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease
        }

        .redactor-modal button:hover {
            outline: none;
            text-decoration: none;
            background: none;
            background-color: #35B1E2;
            color: #FFFFFF;
            border-color: #35B1E2
        }

        .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 {
            font-family: 'Roboto Slab';
            padding: 20px;
            font-size: 18px;
            line-height: 24px;
            font-weight: 700;
            color: #000;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05)
        }

        .redactor-modal-header:empty {
            display: none
        }

        .redactor-modal-body {
            padding: 2em
        }

        .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-tab {
            padding: .25em
        }

        .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: 16px 18px;
            color: #444950;
            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 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(68, 73, 80, 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(68, 73, 80, 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 embed,
        .redactor-styles object {
            height: 100%
        }

        .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-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-placeholder {
            font-size: 15px;
            line-height: 1.5;
            color: rgba(0, 0, 0, 0.3);
            font-style: italic
        }

        .upload-hover {
            background-color: rgba(0, 125, 255, 0.075)
        }

        .upload-error {
            background-color: rgba(255, 50, 101, 0.075)
        }

        .upload-box-hover {
            outline: 5px dashed rgba(0, 125, 255, 0.3)
        }

        .upload-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 {
            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 {
            width: 24px;
            position: absolute;
            font-size: 10px;
            font-weight: normal;
            opacity: .3;
            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-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000000;
            height: 10px
        }

        #redactor-progress span {
            background-image: -webkit-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);
            background-image: -o-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);
            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;
            -o-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
            }
        }

        @-o-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 {
            margin: .5em 0;
            padding: 0;
            -moz-column-gap: .5em;
            -webkit-column-gap: .5em;
            column-gap: .5em;
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4
        }

        #redactor-modal .images-wrap>.item {
            display: inline-block;
            margin: 0 0 .5em;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
            padding: 2px
        }

        .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;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
            padding: 2px;
            cursor: pointer;
            line-height: 1;
            border-radius: .188em;
            text-align: center
        }

        .redactor-wicons-list li.redactor-wicons-item-selected {
            background: #ee698a
        }

        .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: 200
        }

        .wojo.normal.text {
            font-weight: 300
        }

        .wojo.semi.text {
            font-weight: 400
        }

        .wojo.demi.text {
            font-weight: 500
        }

        .wojo.bold.text {
            font-weight: 700
        }

        .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.warning.text {
            color: var(--alert-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.outline {
            outline: 2px dashed var(--primary-color);
            outline-offset: 2px
        }

        .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.white.bg {
            background-color: #fff
        }

        .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.primary.fill {
            fill: var(--primary-color)
        }

        .wojo.secondary.fill {
            fill: var(--secondary-color)
        }

        .wojo.positive.fill {
            fill: var(--positive-color)
        }

        .wojo.negative.fill {
            fill: var(--negative-color)
        }

        .wojo.warning.fill {
            fill: var(--alert-color)
        }

        .wojo.white.fill {
            fill: #FFF
        }

        .wojo.primary.stop {
            stop-color: var(--primary-color)
        }

        .wojo.secondary.stop {
            stop-color: var(--secondary-color)
        }

        .wojo.positive.stop {
            stop-color: var(--positive-color)
        }

        .wojo.negative.stop {
            stop-color: var(--negative-color)
        }

        .wojo.white.stop {
            stop-color: #FFF
        }

        .wojo.purple.stop {
            stop-color: #2d1582
        }

        .wojo.primary.gradient {
            background-image: linear-gradient(150deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
            background-repeat: repeat-x
        }

        .wojo.animated.text {
            background-image: -webkit-linear-gradient(358deg, #f35626, #feab3a);
            background-image: linear-gradient(92deg, #f35626, #feab3a);
            background-clip: text;
            -webkit-animation: hue 10s infinite linear;
            animation: hue 10s infinite linear;
            text-fill-color: transparent
        }

        @-webkit-keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg)
            }

            to {
                -webkit-filter: hue-rotate(-360deg)
            }
        }

        @keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
                filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="0" /></filter></svg>#filter');
                filter: hue-rotate(0deg)
            }

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

        .highlite {
            background-color: #fffde7 !important
        }

        .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
        }

        .wojo.rounded {
            border-radius: .250rem
        }

        .wojo.top.rounded {
            border-radius: .250rem .250rem 0 0
        }

        .wojo.bottom.rounded {
            border-radius: 0 0 .250rem .250rem
        }

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

        .scrollbox {
            overflow: auto
        }

        .wojo.tabs .nav,
        .wojo.navs .nav {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;
            list-style: none;
            align-items: center
        }

        .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 li,
        .wojo.fluid.navs .nav li {
            flex: 1 1 0px;
            min-width: 0
        }

        .wojo.simple.tabs .nav li a {
            border: 0;
            padding: .5rem 1.5rem;
            border-radius: 0;
            color: var(--dark-color)
        }

        .wojo.simple.tabs .nav li.active a,
        .wojo.simple.tabs .nav li a:hover,
        .wojo.simple.tabs .nav li.active a,
        .wojo.simple.tabs .nav li a:hover {
            background-color: transparent;
            color: var(--primary-color)
        }

        @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.lang.tabs .nav {
                margin-top: -1.5rem;
                margin-left: 1rem;
                margin-right: 1rem
            }
        }

        .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: inline-flex;
            margin: 0;
            align-items: center;
            font-weight: 400;
            position: relative
        }

        .wojo.breadcrumb:first-child {
            margin-top: 0
        }

        .wojo.breadcrumb:last-child {
            margin-bottom: 0
        }

        .wojo.breadcrumb .divider {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap;
            margin: 0 0.75rem 0;
            color: rgba(0, 0, 0, 0.5)
        }

        .wojo.breadcrumb a {
            color: var(--primary-color)
        }

        .wojo.breadcrumb a:hover {
            color: var(--primary-active)
        }

        .wojo.breadcrumb .icon.divider {
            font-size: 0.875rem
        }

        .wojo.breadcrumb a.section {
            cursor: pointer
        }

        .wojo.breadcrumb .section {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            white-space: nowrap;
            margin: 0;
            padding: 0
        }

        .wojo.breadcrumb .active.section {
            color: var(--dark-color);
            font-weight: 500
        }

        .wojo.white.breadcrumb a {
            color: rgba(255, 255, 255, 0.7)
        }

        .wojo.white.breadcrumb a:hover {
            color: #fff
        }

        .wojo.white.breadcrumb .active.section {
            color: #fff;
            font-weight: 500
        }

        .wojo.white.breadcrumb .divider {
            color: rgba(255, 255, 255, 0.5)
        }

        .wojo.small.breadcrumb {
            font-size: 14px;
            font-size: .875rem
        }

        .wojo.sticky {
            position: static;
            -webkit-transition: none;
            transition: none;
            z-index: 2
        }

        .wojo.sticky.bound {
            position: absolute;
            left: auto;
            right: auto
        }

        .wojo.sticky.fixed {
            position: fixed;
            left: auto;
            right: auto
        }

        .wojo.sticky.bound.top,
        .wojo.sticky.fixed.top {
            top: 0px;
            bottom: auto
        }

        .wojo.sticky.bound.bottom,
        .wojo.sticky.fixed.bottom {
            top: auto;
            bottom: 0px
        }

        .wojo.native.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0
        }

        @media screen and (max-width:48.063em) {
            ul.wojo.basic.tabs {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column
            }

            ul.wojo.basic.tabs li {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1
            }
        }

        .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,
        .wojo.pagination .item.active:hover {
            background-color: var(--primary-color);
            color: var(--primary-color-inverted);
            cursor: default
        }

        .wojo.pagination .item.active,
        .wojo.pagination .item.active:hover {}

        .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.wide.divider {
            border-top: 3px solid var(--grey-color-300)
        }

        .wojo.very.wide.divider {
            border-top: 5px solid var(--grey-color-300)
        }

        .wojo.relaxed.divider {
            margin: 1rem 0
        }

        .wojo.very.relaxed.divider {
            margin: 1.5rem 0
        }

        .wbox-overlay *,
        .wbox-overlay *:before,
        .wbox-overlay *:after {
            -webkit-backface-visibility: hidden;
            box-sizing: border-box
        }

        .wbox-overlay * {
            -webkit-backface-visibility: visible;
            backface-visibility: visible
        }

        .wbox-overlay {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 1040;
            -webkit-transform: translateZ(1000px);
            transform: translateZ(1000px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d
        }

        .wbox-title {
            width: 100%;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
            padding: 6px 40px;
            overflow: hidden;
            position: fixed;
            display: none;
            left: 0;
            z-index: 1050
        }

        .wbox-close {
            cursor: pointer;
            position: fixed;
            top: -1px;
            right: 0;
            width: 50px;
            height: 40px;
            padding: 6px;
            display: block;
            background-position: 10px center;
            overflow: hidden;
            font-size: 24px;
            line-height: 1;
            text-align: center;
            z-index: 1050
        }

        .wbox-num {
            cursor: pointer;
            position: fixed;
            left: 0;
            height: 40px;
            overflow: hidden;
            line-height: 28px;
            font-size: 12px;
            padding: 6px 10px;
            display: none;
            z-index: 1050
        }

        .wbox-next,
        .wbox-prev {
            position: fixed;
            top: 50%;
            margin-top: -1em;
            overflow: hidden;
            cursor: pointer;
            display: block;
            width: 2em;
            height: 2em;
            z-index: 1050
        }

        .wbox-next span,
        .wbox-prev span {
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top-color: #B6B6B6;
            border-right-color: #B6B6B6;
            text-indent: -100px;
            position: absolute;
            top: 8px;
            display: block
        }

        .wbox-prev {
            left: 2em
        }

        .wbox-next {
            right: 2em
        }

        .wbox-prev span {
            left: 10px;
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg)
        }

        .wbox-next span {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            right: 10px
        }

        .wbox-inline {
            width: 420px;
            height: 315px;
            height: 70vh;
            padding: 10px;
            background: #fff;
            margin: 0 auto;
            overflow: auto;
            text-align: left
        }

        .wboxframe {
            max-width: 100%;
            border: none;
            width: 100%;
            height: 260px;
            height: 70vh
        }

        .wboxframe.wbvid {
            height: 260px
        }

        @media (min-width:768px) {

            .wboxframe,
            .wbox-inline {
                width: 90%;
                height: 360px;
                height: 70vh
            }

            .wboxframe.wbvid {
                width: 640px;
                height: 360px
            }
        }

        @media (min-width:992px) {

            .wboxframe,
            .wbox-inline {
                max-width: 1200px;
                width: 80%;
                height: 540px;
                height: 70vh
            }

            .wboxframe.wbvid {
                width: 960px;
                height: 540px
            }
        }

        .wbox-open {
            overflow: hidden
        }

        .wbox-container {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            overflow-scrolling: touch;
            -webkit-overflow-scrolling: touch;
            z-index: 20;
            max-height: 100%
        }

        .wbox-content {
            text-align: center;
            float: left;
            width: 100%;
            position: relative;
            overflow: hidden;
            padding: 20px 10px
        }

        .wbox-container img {
            max-width: 100%;
            height: auto
        }

        .wbox-content .children {
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            max-width: 100%;
            text-align: initial
        }

        .wbox-content img.children {
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .wbox-preloader {
            position: relative
        }

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

        .wbox-preloader: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: #377dff rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15);
            border-style: solid;
            border-width: 0.2em;
            box-shadow: 0px 0px 0px 1px transparent;
            visibility: visible;
            z-index: 101
        }

        @-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)
            }
        }

        .wbox-content.swipe-left {
            margin-left: -200px !important
        }

        .wbox-content.swipe-right {
            margin-left: 200px !important
        }

        .animated {
            webkit-transition: margin 300ms ease-out;
            -webkit-transition: margin 300ms ease-out;
            transition: margin 300ms ease-out
        }

        .animate-in {
            opacity: 1
        }

        .animate-out {
            opacity: 0
        }

        .wojo.stars {
            margin-left: auto;
            margin-right: auto;
            display: -webkit-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
            flex-flow: row wrap
        }

        .wojo.stars .star {
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            max-width: 100%;
            -webkit-align-self: center;
            -ms-flex-item-align: center;
            align-self: center;
            margin-right: .25em;
            color: #9E9E9E;
            width: 1em;
            height: 1em;
            line-height: 1em
        }

        .wojo.stars a {
            font-size: .813em;
            margin-left: 2em;
            border-bottom: 1px dotted #7e7e7e;
            color: #7e7e7e
        }

        .wojo.stars a span {
            font-weight: 500
        }

        .wojo.stars .star.active .icon,
        .wojo.stars .star.selected .icon {
            color: #FF9800
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 700;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansBold.woff2') format('woff2'), url('../fonts/WojoSansBold.woff') format('woff')
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 600;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansDemi.woff2') format('woff2'), url('../fonts/WojoSansDemi.woff') format('woff')
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 500;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansMedium.woff2') format('woff2'), url('../fonts/WojoSansMedium.woff') format('woff')
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 400;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansRegular.woff2') format('woff2'), url('../fonts/WojoSansRegular.woff') format('woff')
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 300;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansLight.woff2') format('woff2'), url('../fonts/WojoSansLight.woff') format('woff')
        }

        @font-face {
            font-family: 'Wojo Sans';
            font-style: normal;
            font-weight: 200;
            unicode-range: U+0020-0237;
            src: local(''), url('../fonts/WojoSansExtraLight.woff2') format('woff2'), url('../fonts/WojoSansExtraLight.woff') format('woff')
        }

        html,
        body {
            font-size: 16px;
            height: 100%
        }

        body {
            font-family: "Wojo Sans", Helvetica, Arial, sans-serif;
            color: var(--body-color);
            font-weight: 300;
            background-color: #ffffff;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column
        }

        a,
        a.inverted,
        a.secondary,
        a.grey,
        a.black,
        a.white {
            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.secondary {
            color: var(--secondary-color)
        }

        a.secondary:hover,
        a.secondary.hover,
        a.secondary:focus {
            color: var(--primary-color-hover)
        }

        a.inverted,
        p.inverted {
            color: rgba(255, 255, 255, 0.7)
        }

        a.black {
            color: var(--dark-color)
        }

        a.white {
            color: #fff
        }

        a.white:hover,
        a.white.hover,
        a.white:focus {
            color: var(--primary-color-hover)
        }

        a.inverted:hover,
        a.inverted.hover,
        a.inverted:focus {
            color: rgba(255, 255, 255, 1)
        }

        a.black:hover,
        a.black.hover,
        a.black:focus {
            color: var(--primary-color-hover)
        }

        a.grey {
            color: var(--grey-color)
        }

        a.grey:hover,
        a.grey.hover,
        a.grey:focus {
            color: var(--primary-color-hover)
        }

        a.dashed {
            border-bottom: 1px dashed var(--grey-color)
        }

        b,
        strong {
            font-weight: 700
        }

        p {
            color: var(--grey-color);
            line-height: 1.7;
            margin-bottom: 1rem
        }

        p:last-child {
            margin-bottom: 0
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6 {
            font-family: 'Wojo Sans';
            line-height: 1.5;
            margin: 0 0 1rem 0;
            color: #1e2022;
            font-weight: 700;
            position: relative
        }

        .h1,
        h1 {
            font-size: 3.5rem;
            font-weight: 700
        }

        .h2,
        h2 {
            font-size: 2rem;
            font-weight: 500
        }

        .h3,
        h3 {
            font-size: 2.5rem
        }

        .h4,
        h4 {
            font-size: 2rem
        }

        .h5,
        h5 {
            font-size: 1.5rem;
            font-weight: 600
        }

        .h6,
        h6 {
            font-size: 1.25rem
        }

        h1.basic,
        h2.basic,
        h3.basic,
        h4.basic,
        h5.basic,
        h6.basic,
        p.basic {
            margin: 0
        }

        h1.fitted,
        h2.fitted,
        h3.fitted,
        h4.fitted,
        h5.fitted,
        h6.fitted,
        p.fitted,
        .h1.fitted,
        .h2.fitted,
        .h3.fitted,
        .h4.fitted,
        .h5.fitted,
        .h6.fitted {
            margin: 0;
            line-height: 1
        }

        .divided:not(.list):not(.header):not(.footer) {
            padding: 0 0 1rem 0;
            margin-bottom: 1.5rem
        }

        .divided:not(.list):not(.header):not(.footer)::before,
        .divided:not(.list):not(.header):not(.footer)::after {
            height: .625rem;
            z-index: 5;
            bottom: 0;
            content: "";
            left: 50%;
            position: absolute;
            border-radius: 1rem;
            transform: translateX(-50%)
        }

        .divided:not(.list):not(.header):not(.footer)::before {
            width: 100px;
            background: var(--primary-color-inverted)
        }

        .divided:not(.list):not(.header):not(.footer)::after {
            width: 2rem;
            background: var(--primary-color)
        }

        .underlined {
            position: relative;
            margin-bottom: 2rem
        }

        .underlined::after {
            background: var(--primary-color);
            content: "";
            width: 4rem;
            height: 2px;
            position: absolute;
            bottom: -.5rem;
            left: 0
        }

        .underlined.white::after {
            background: #fff
        }

        .underlined.center::after {
            left: 50%;
            transform: translateX(-50%)
        }

        .overlay {
            position: relative;
            z-index: 1
        }

        .overlay.gradient::before,
        .overlay.white::before,
        .overlay.dark::before,
        .overlay::before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: "";
            opacity: 0.75;
            z-index: -35;
            background: var(--secondary-color)
        }

        .overlay.white::before {
            background: #fff
        }

        .overlay.dark::before {
            background: #111
        }

        .overlay.gradient::before {
            background: linear-gradient(to left, #6442ff 0%, #1B1464 100%)
        }

        .wojo.image .image-mask {
            position: absolute;
            left: 0;
            bottom: 0
        }

        header#header {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1)
        }

        header#header .top-bar {
            padding: .5rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1)
        }

        header#header.sticky .top-bar {
            background: var(--secondary-color)
        }

        header#header.sticky {
            -webkit-animation: smoothScroll 1s forwards;
            animation: smoothScroll 1s forwards;
            background-color: #fff;
            border-bottom: 0;
            box-shadow: 0 5px 25px 0 rgba(27, 20, 100, 0.15)
        }

        header#header a.logo {
            display: inline-block;
            line-height: 1
        }

        header#header .logo img,
        header#header .logo svg {
            width: 4rem
        }

        header#header .logo .logoshape1,
        header#header .logo .logoshape3 {
            fill: #77838f
        }

        header #iconList a {
            color: #fff
        }

        header #iconList a:hover {
            color: var(--primary-color)
        }

        header.sticky #iconList a {
            color: var(--primary-color)
        }

        header.sticky #iconList a:hover {
            color: var(--primary-color-hover)
        }

        header .logo .logoshape2 {
            fill: var(--primary-color)
        }

        main {
            flex: 1 0 auto
        }

        aside h4 {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-size: 1.25rem
        }

        nav.menu {}

        nav.menu .menu-mobile {
            display: none
        }

        nav.menu .menu-dropdown-icon>a::after {
            content: "\e948";
            font-family: "WojoIcons";
            float: right;
            margin-left: .5rem;
            color: #fff
        }

        nav.menu .menu-dropdown-icon:before {
            content: "\e948";
            font-family: "WojoIcons";
            display: none;
            cursor: pointer;
            float: right;
            padding: 1rem;
            background: #fff
        }

        nav.menu small {
            display: none
        }

        nav.menu a>i.icon {
            margin-right: .5rem
        }

        nav.menu>ul {
            margin: 0 auto;
            width: 100%;
            list-style: none;
            padding: 0;
            position: relative;
            box-sizing: border-box
        }

        nav.menu>ul:before,
        nav.menu>ul:after {
            content: "";
            display: table
        }

        nav.menu>ul:after {
            clear: both
        }

        nav.menu>ul>li {
            float: left;
            padding: 0;
            margin: 0
        }

        nav.menu>ul>li>a {
            text-decoration: none;
            padding: 1.5rem 1rem;
            display: block;
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #fff;
            opacity: 0.8;
            font-size: .813rem;
            position: relative
        }

        header#header.sticky nav.menu>ul>li>a {
            color: #111
        }

        header#header.sticky nav.menu .menu-dropdown-icon>a::after {
            color: #111
        }

        nav.menu>ul>li>a::before {
            display: inline-block;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 7px;
            z-index: 7;
            content: '';
            position: absolute;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            background: #fff;
            transition: transform 0.4s ease, -webkit-transform 0.4s ease
        }

        header#header.sticky nav.menu>ul>li>a::before {
            background: var(--primary-color)
        }

        nav.menu>ul>li>a:hover::before {
            transform: scaleX(1);
            transform-origin: 0 0
        }

        nav.menu>ul>li>a strong {
            font-weight: 500
        }

        nav.menu>ul>li>a:hover,
        nav.menu>ul>li>a.active {
            color: #fff;
            opacity: 1
        }

        header#header.sticky nav.menu>ul>li>a:hover,
        header#header.sticky nav.menu>ul>li>a.active {
            color: var(--primary-color)
        }

        nav.menu>ul>li>ul {
            display: none;
            width: 100%;
            background: #fff;
            padding: 0;
            position: absolute;
            z-index: 999;
            left: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
            box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075)
        }

        nav.menu>ul>li>ul:before,
        nav.menu>ul>li>ul:after {
            content: "";
            display: table
        }

        nav.menu>ul>li>ul:after {
            clear: both
        }

        nav.menu>ul>li>ul>li {
            margin: 0;
            padding-bottom: 0;
            list-style: none;
            width: calc(100%/3);
            background: none;
            float: left
        }

        nav.menu>ul>li>ul>li a {
            padding: .5rem;
            margin: 0 .5rem;
            display: block;
            font-size: 0.750rem;
            color: var(--grey-color);
            text-transform: uppercase;
            font-weight: 500;
            cursor: default;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1)
        }

        nav.menu>ul>li>ul>li>ul {
            display: block;
            padding: 0;
            margin: .5rem 0 0;
            list-style: none;
            box-sizing: border-box
        }

        nav.menu>ul>li>ul>li>ul:before,
        nav.menu>ul>li>ul>li>ul:after {
            content: "";
            display: table
        }

        nav.menu>ul>li>ul>li>ul:after {
            clear: both
        }

        nav.menu>ul>li>ul>li>ul>li {
            float: left;
            width: 100%;
            padding: 0;
            margin: 0;
            font-size: .8rem
        }

        nav.menu>ul>li>ul>li>ul>li a {
            border: 0;
            text-transform: none;
            color: var(--dark-color);
            font-size: .875rem;
            font-weight: 400;
            margin: 0;
            padding: .5rem 1rem;
            cursor: pointer
        }

        nav.menu>ul>li>ul>li>ul>li a:hover {
            background-color: var(--primary-color);
            color: #fff
        }

        nav.menu>ul>li>ul.normal-sub {
            width: 300px;
            left: auto;
            padding: 0
        }

        nav.menu>ul>li>ul.normal-sub>li {
            width: 100%
        }

        nav.menu>ul>li>ul.normal-sub>li a {
            border: 0;
            margin: 0;
            color: var(--dark-color);
            padding: 1rem 1.5rem;
            cursor: pointer
        }

        nav.menu>ul>li>ul.normal-sub>li a:hover {
            background-color: var(--primary-color);
            color: #fff
        }

        #pageCaption {
            padding: 9rem 0 6rem 0;
            position: relative;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            z-index: 1
        }

        #pageCaption::before,
        #moduleCaption::before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: "";
            opacity: 0.75;
            z-index: -35;
            background: var(--secondary-color)
        }

        #pageCaption .wojo-grid {
            position: relative
        }

        #pageCaption h1 {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 700
        }

        #moduleCaption {
            background-color: var(--secondary-color);
            position: relative;
            z-index: 1;
            padding: 10rem 0 6rem 0;
            margin-bottom: 2rem;
            background: url("../images/module_header.jpg") no-repeat;
            background-size: cover
        }

        #moduleCaption figure {
            bottom: 0;
            left: 0;
            z-index: 0;
            width: 100%
        }

        #moduleCaption.blog {}

        #moduleCaption.shop {}

        .page_blog article>h4 {
            font-size: 1.750rem;
            font-weight: 500;
            line-height: 1.2
        }

        .wojo.ajax.search {
            position: absolute;
            top: 100%;
            background: #fff;
            margin-top: .5em;
            box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
            border-radius: .250rem;
            z-index: 5;
            width: 100%
        }

        .fullsize {
            height: 100vh
        }

        #fullpage a.logo {
            display: inline-block;
            line-height: 1;
            margin: 0 auto
        }

        #fullpage a.logo img,
        #fullpage a.logo svg {
            height: 2rem
        }

        #fullpage a.logo .logoshape1,
        #fullpage a.logo .logoshape3 {
            fill: #77838f
        }

        #fullpage a.logo .logoshape2 {
            fill: var(--primary-color)
        }

        #dashboard {
            padding: 3rem 0 0 0;
            margin-bottom: 4rem;
            background: var(--secondary-color-inverted)
        }

        ul.wojo.dash.list {
            margin-top: 1rem;
            margin-bottom: 0;
            margin-left: 0
        }

        ul.wojo.dash.list li a {
            color: var(--primary-color);
            align-items: center;
            display: inline-flex;
            font-weight: 500;
            padding: 1rem .5rem;
            position: relative
        }

        ul.wojo.dash.list li a::before {
            display: inline-block;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            z-index: 7;
            content: '';
            position: absolute;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            background: var(--primary-color);
            transition: transform 0.4s ease, -webkit-transform 0.4s ease
        }

        ul.wojo.dash.list li a:hover::before,
        ul.wojo.dash.list li.active a::before {
            transform: scaleX(1);
            transform-origin: 0 0
        }

        ul.wojo.dash.list li a:hover,
        ul.wojo.dash.list li.active a {
            color: var(--primary-color-hover)
        }

        ul.wojo.dash.list li a .icon {
            margin-right: 1rem
        }

        footer {
            position: relative;
            background-color: #212130;
            z-index: 1;
            flex-shrink: 0
        }

        footer .wrapper {
            position: relative;
            z-index: 2
        }

        footer .copyright {
            color: #dee2e6;
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem 0
        }

        footer .contents {
            color: #dee2e6;
            padding: 6rem 0 4rem 0
        }

        footer .logo img,
        footer .logo svg {
            width: 1.5rem;
            margin-right: .875rem
        }

        footer .logo .logoshape1,
        footer .logo .logoshape3 {
            fill: rgba(255, 255, 255, 0.2)
        }

        footer .logo .logoshape2 {
            fill: var(--primary-color)
        }

        footer figure {
            bottom: 0;
            left: 0;
            width: 40%;
            z-index: 0
        }

        body.page_profile,
        body.page_sitemap,
        body.page_dashboard {
            background-color: #F8F9FA
        }

        body.page_profile header#header,
        body.page_sitemap header#header,
        body.page_dashboard header#header {
            background: var(--secondary-color)
        }

        body.page_profile header#header.sticky,
        body.page_sitemap header#header.sticky,
        body.page_dashboard header#header.sticky {
            background: #fff
        }

        body.page_profile main,
        body.page_sitemap main,
        body.page_dashboard main {
            padding-top: 7rem
        }

        #searchHero {
            padding: 3rem 0;
            background: var(--secondary-color);
            opacity: .85;
            margin-bottom: 4rem;
            position: relative
        }

        #searchHero .wave {
            position: absolute;
            width: 100%;
            bottom: -1rem;
            left: 0;
            height: auto
        }

        #master-loader {
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 5000;
            background-size: contain;
            background-position: left bottom
        }

        #master-loader .curtains {
            background: #f9f9fb;
            height: 100%;
            position: fixed;
            top: 0;
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
            width: 51%;
            z-index: 5001
        }

        #master-loader .curtains.left {
            left: 0
        }

        #master-loader .curtains.right {
            right: 0
        }

        .wanimation {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            -webkit-animation: 2s linear 0s normal none infinite running spin;
            animation: 2s linear 0s normal none infinite running spin;
            border-color: #2196f3 transparent transparent;
            -o-border-image: none;
            border-image: none;
            border-radius: 50%;
            border-style: solid;
            border-width: 3px;
            display: block;
            height: 150px;
            left: 50%;
            margin: -75px 0 0 -75px;
            position: relative;
            top: 50%;
            width: 150px;
            z-index: 5005
        }

        .wanimation::before {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            -webkit-animation: 3s linear 0s normal none infinite running spin;
            animation: 3s linear 0s normal none infinite running spin;
            border-color: #f44336 transparent transparent;
            -o-border-image: none;
            border-image: none;
            border-radius: 50%;
            border-style: solid;
            border-width: 3px;
            bottom: 5px;
            content: "";
            left: 5px;
            position: absolute;
            right: 5px;
            top: 5px
        }

        .wanimation::after {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            -webkit-animation: 1.5s linear 0s normal none infinite running spin;
            animation: 1.5s linear 0s normal none infinite running spin;
            border-color: #ff9800 transparent transparent;
            -o-border-image: none;
            border-image: none;
            border-radius: 50%;
            border-style: solid;
            border-width: 3px;
            bottom: 15px;
            content: "";
            left: 15px;
            position: absolute;
            right: 15px;
            top: 15px
        }

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

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

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

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

        .loaded #master-loader {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            transition: all 0.3s ease-out 1s;
            visibility: hidden
        }

        .loaded #master-loader .curtains.left {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s
        }

        .loaded #master-loader .curtains.right {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s
        }

        .loaded .wanimation {
            opacity: 0;
            transition: all 0.3s ease-out 0s
        }

        @-webkit-keyframes smoothScroll {
            0% {
                -webkit-transform: translateY(-40px);
                transform: translateY(-40px)
            }

            100% {
                -webkit-transform: translateY(0px);
                transform: translateY(0px)
            }
        }

        @keyframes smoothScroll {
            0% {
                -webkit-transform: translateY(-40px);
                transform: translateY(-40px)
            }

            100% {
                -webkit-transform: translateY(0px);
                transform: translateY(0px)
            }
        }

        #back-to-top {
            color: #fff;
            text-decoration: none;
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            z-index: 9999;
            padding: 1.25rem;
            text-align: center;
            background-color: var(--primary-color);
            cursor: pointer;
            display: none;
            opacity: .5;
            border: 0;
            border-radius: .250rem;
            transition: 0.3s ease-out
        }

        #back-to-top:hover {
            text-decoration: none;
            opacity: 1
        }

        #error404 {
            background: var(--secondary-color);
            padding: 8rem 0;
            background-image: url(../images/module_header.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            position: relative;
            z-index: 1
        }

        #error404::before {
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            content: "";
            opacity: 0.75;
            z-index: -2;
            position: absolute;
            background: #1B1464
        }

        body#errorPage {
            background-image: url(../images/error_bg.svg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            display: block
        }

        body#errorPage header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            padding: 1rem 0
        }

        body#errorPage .logo img,
        body#errorPage .logo svg {
            width: 4rem;
            border-radius: .250rem
        }

        body#errorPage .logo .logoshape1,
        body#errorPage .logo .logoshape3 {
            fill: #77838f
        }

        body#errorPage .logo .logoshape2 {
            fill: var(--primary-color)
        }

        body#errorPage main {
            position: relative;
            min-height: 100vh;
            display: flex;
            max-width: 1280px;
            padding: 0 1rem;
            margin: 0 auto
        }

        body#errorPage footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border: 0;
            margin: 0;
            padding: 0;
            background-color: transparent
        }

        #mdashboard {
            margin-top: 1rem
        }

        #mheader {
            position: absolute;
            top: 1rem;
            width: 100%;
            text-align: center;
            padding: 1rem
        }

        #mheader .logo img,
        #mheader .logo svg {
            width: 4rem;
            border-radius: .250rem
        }

        #mheader .logo .logoshape1,
        #mheader .logo .logoshape3 {
            fill: #77838f
        }

        #mheader .logo .logoshape2 {
            fill: #377dff
        }

        #mfooter {
            position: absolute;
            bottom: 1rem;
            width: 100%;
            text-align: center;
            font-weight: 300;
            font-size: .750rem;
            padding: 1rem
        }

        .dash {
            position: relative;
            padding: 0 1em
        }

        .dash .digit {
            font-size: 3rem;
            line-height: 1;
            font-weight: 300;
            text-align: center;
            display: inline-flex;
            color: #377DFF
        }

        .dash_title {
            display: block;
            font-size: .750rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
            font-weight: 500;
            color: #77838F
        }

        .wojo.button.player {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
            transition: all 0.5s ease
        }

        .wojo.button.player:hover,
        .wojo.button.player.attached:hover {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.4);
            transform: translate(-50%, -50%) scale(1.15)
        }

        .wojo.button.player:hover {
            transform: scale(1.15)
        }

        @media screen and (min-width:40.625em) and (max-width:64em) {
            #loginFooter {
                width: 30%
            }

            #regForm {
                padding: 3.5rem 0
            }
        }

        @media screen and (max-width:48.063em) {
            header#header .bottom-bar {
                margin-top: .5rem
            }

            nav.menu {
                text-align: left;
                position: relative;
                background-color: #fff
            }

            nav.menu,
            nav.menu .menu-dropdown-icon:before {
                display: block
            }

            nav.menu .menu-dropdown-icon::before {
                padding: .5rem
            }

            nav.menu .menu-dropdown-icon>a:after,
            nav.menu>ul>li>ul:after {
                display: none
            }

            nav.menu>ul {
                display: none;
                margin-top: 1rem
            }

            nav.menu>ul>li {
                width: 100%;
                float: none;
                display: block
            }

            nav.menu>ul>li a {
                padding: 1rem .750rem;
                width: 100%;
                display: block;
                color: #111
            }

            nav.menu>ul>li>a:hover,
            nav.menu>ul>li>a.active {
                color: var(--primary-color);
                opacity: 1
            }

            nav.menu>ul>li>ul {
                position: relative;
                border-radius: .0;
                border-top: 0;
                box-shadow: none;
                padding: 0;
                padding-left: 1rem;
                border-left: 3px solid var(--primary-color)
            }

            nav.menu>ul>li>ul.normal-sub {
                width: 100%
            }

            nav.menu>ul>li>ul>li {
                float: none;
                width: 100%
            }

            nav.menu>ul>li>ul>li:first-child {
                margin: 0
            }

            nav.menu>ul>li>ul>li>ul {
                position: relative
            }

            nav.menu>ul>li>ul>li>ul {
                margin: 1rem 0 0
            }

            nav.menu>ul>li>ul>li>ul>li {
                float: none
            }

            nav.menu .show-on-mobile {
                display: block
            }

            #loginFooter {
                display: none
            }

            #regForm {
                padding: 3.5rem 0
            }
        }

        @media screen and (max-width:30em) {
            header#header .top-bar {
                display: none
            }

            body#errorPage footer {
                position: relative;
                bottom: 0;
                left: 0;
                width: 100%;
                border: 0;
                margin: 0;
                padding: 0;
                background-color: transparent
            }

            .wojo.huge.text,
            h1 {
                font-size: 2.5rem
            }

            #loginFooter {
                display: none
            }

            #regForm {
                padding: 3.5rem 0
            }

            ul.wojo.dash.list {
                display: block;
                margin: 0
            }

            .wojo.horizontal.dash.relaxed.list .list>.item:not(:last-child),
            .wojo.dash.horizontal.relaxed.list>.item:not(:last-child),
            .wojo.horizontal.dash.relaxed.list .list>.item:not(:first-child),
            .wojo.dash.horizontal.relaxed.list>.item:not(:first-child) {
                padding: 0;
                display: block;
                margin: 0
            }

            .wojo.horizontal.dash.list>.item {
                margin: 0
            }
        }

        background-color: transparent
    }

    .wojo.huge.text,
    h1 {
        font-size: 2.5rem
    }

    #loginFooter {
        display: none
    }

    #regForm {
        padding: 3.5rem 0
    }

    ul.wojo.dash.list {
        display: block;
        margin: 0
    }

    .wojo.horizontal.dash.relaxed.list .list>.item:not(:last-child),
    .wojo.dash.horizontal.relaxed.list>.item:not(:last-child),
    .wojo.horizontal.dash.relaxed.list .list>.item:not(:first-child),
    .wojo.dash.horizontal.relaxed.list>.item:not(:first-child) {
        padding: 0;
        display: block;
        margin: 0
    }

    .wojo.horizontal.dash.list>.item {
        margin: 0
    }
}





























/*  */



i.icon.blank {
    width: 1.25rem;
    height: 1.25rem
}

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
}

i.icon.disabled {
    opacity: .3
}

i.selectable.icon {
    opacity: .8;
    cursor: pointer
}

i.selectable.icon:hover {
    opacity: 1
}

i.flipped.icon,
i.horizontally.flipped.icon {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

i.vertically.flipped.icon {
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1)
}

i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

i.left.rotated.icon,
i.counterclockwise.rotated.icon {
    -webkit-transform: rotate(-90deg);
    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.info.icon {
    color: var(--info-color)
}

i.alert.icon {
    color: var(--alert-color)
}

i.icon.rotate90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

i.inverted.icon {
    color: rgba(255, 255, 255, 0.5)
}

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.info.inverted.icon {
    color: var(--info-color-inverted)
}

i.alert.inverted.icon {
    color: var(--alert-color-inverted)
}

i.icon.mono:before {
    opacity: 1 !important
}

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

.wojo.icons .icon,
.wojo.icons a {
    flex: 0 0 auto;
    max-width: 100%;
    margin-right: .5rem;
    align-self: center
}

i.tiny.icon {
    font-size: .625rem
}

i.tinyi.icon.circular {
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
    box-shadow: none
}

i.small.icon {
    font-size: 1rem
}

i.icon {
    font-size: 1.25rem
}

i.medium.icon {
    font-size: 1.875rem
}

i.large.icon {
    font-size: 2.5rem;
    vertical-align: middle
}

i.big.icon {
    font-size: 3.75rem;
    vertical-align: middle
}

i.huge.icon {
    font-size: 5rem;
    vertical-align: middle
}

i.massive.icon {
    font-size: 6.25rem;
    vertical-align: middle
}

i.gigantic.icon {
    font-size: 7.5rem;
    vertical-align: middle
}

i.ginormous.icon {
    font-size: 12.5rem;
    vertical-align: middle;
    line-height: 1rem
}

span.flag.icon {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-flex;
    -ms-grid-row-align: center;
    align-self: center;
    line-height: 1;
    border-radius: .125rem
}

span.flag.icon:before {
    content: "\00a0"
}

span.flag.icon.squared {
    width: 1rem
}


span.flag.icon.disabled {
    opacity: .5
}

span.flag.small.icon {
    width: 1rem;
    height: .875rem
}

span.flag.icon {
    width: 1.5rem;
    height: 1rem
}

span.flag.full.icon {
    width: 100%;
    height: 100%
}

.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;
}
.secondary .wojo-grid .custom_icon_slider .wojo.image img{
    max-height: 70px;
    width: 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 svg,
.wojo.rounded.image,
.wojo.rounded.image img {
    border-radius: var(--radius)
}

.wojo.rounded.left.images .image,
.wojo.rounded.left.images img,
.wojo.rounded.left.image svg,
.wojo.rounded.left.image {
    border-radius: var(--radius) 0 0 var(--radius)
}

.wojo.rounded.right.images .image,
.wojo.rounded.right.images img,
.wojo.rounded.right.image svg,
.wojo.rounded.right.image {
    border-radius: 0 var(--radius) var(--radius) 0
}

.wojo.rounded.top.images .image,
.wojo.rounded.top.images img,
.wojo.rounded.top.image svg,
.wojo.rounded.top.image {
    border-radius: var(--radius) var(--radius) 0 0
}

.wojo.rounded.bottom.images .image,
.wojo.rounded.bottom.images img,
.wojo.rounded.bottom.image svg,
.wojo.rounded.bottom.image {
    border-radius: 0 0 var(--radius) var(--radius)
}

.wojo.circular.images .image,
.wojo.circular.images img,
.wojo.circular.image svg,
.wojo.circular.image {
    border-radius: 500rem;
    overflow: hidden
}

.wojo.shadow.images .image,
.wojo.shadow.images img,
.wojo.shadow.image svg,
.wojo.shadow.image {
    box-shadow: 0 2px 3px var(--dark-color-shadow)
}

.wojo.boxed.images .image,
.wojo.boxed.images img,
.wojo.boxed.image svg,
.wojo.boxed.image {
    border: .250rem solid var(--light-color)
}

.wojo.framed.images .image,
.wojo.framed.images img,
.wojo.framed.image svg,
.wojo.framed.image {
    border: .250rem 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 {
    margin-right: .875rem;
    width: 3em;
    height: 3em;
    border-radius: 500rem
}

.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.regular.images .image,
.wojo.regular.images img,
.wojo.regular.images svg,
.wojo.regular.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,
.wojo.fluid.images img,
.wojo.fluid.images svg {
    display: block;
    width: 100%;
    height: auto
}

.wojo.zoom.image {
    overflow: hidden
}

.wojo.zoom.image img {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: -webkit-transform .5s, -webkit-filter .5s ease-out;
    transition: transform .5s, filter .5s ease-out, -webkit-transform .5s, -webkit-filter .5s ease-out
}

.wojo.zoom.image:hover img {
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.wojo.hover {
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    border-radius: .250rem
}

.wojo.hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: .250rem;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    background: var(--white-color);
    opacity: 1;
    z-index: 1
}

.wojo.hover:hover::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.wojo.hover:hover {
    box-shadow: 0 23px 49px 0 var(--shadow-color);
    transition: all 0.5s ease-in-out
}

.wojo.hover:hover img {
    border-radius: .5rem;
    transition: all 0.5s ease-in-out
}

.wojo.hover figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    text-align: center
}

.wojo.hover:hover figcaption {
    top: 0;
    opacity: 1;
    visibility: visible
}

.wojo.skewed.image {
    -webkit-perspective-origin: left center;
    perspective-origin: left center;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.wojo.skewed.image img {
    border-radius: .625rem;
    -webkit-transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
    transform: rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0);
    box-shadow: 25px 60px 125px -25px var(--shadow-color), 16px 40px 75px -40px rgba(0, 0, 0, .2)
}

.wojo.hero.image {
    min-height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1
}

.wojo.hero.image::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(0deg, #1e2022 0%, transparent 75%) repeat-x;
    border-radius: .250rem;
    -webkit-transition: opacity 0.45s;
    transition: opacity 0.45s
}

.wojo.hero.image:hover::before {
    background: linear-gradient(0deg, #1e2022 0%, transparent 75%);
    opacity: 0
}

.wojo.fill.image,
.wojo.fill.image img,
.wojo.fill.image svg,
.wojo.fill.images,
.wojo.fill.images img,
.wojo.fill.images svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

@media screen and (max-width:768px) {
    .wojo.responsive.image {
        width: 100%;
    }
}

.wojo.label {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    outline: none;
    vertical-align: middle;
    background-color: var(--grey-color-700);
    color: var(--white-color);
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 3px;
    margin: 0;
    line-height: 1rem;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    border-radius: .250rem;
    box-sizing: content-box;
    border: 1px solid var(--grey-color-700);
    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;
    text-transform: uppercase
}

.wojo.primary.label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color)
}

.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: var(--white-color)
}

.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: var(--white-color)
}

.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: var(--white-color)
}

.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: var(--white-color)
}

.wojo.dark.basic.label {
    background-color: transparent;
    color: var(--white-color)
}

.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: var(--white-color)
}

.wojo.alert.basic.label {
    background-color: transparent;
    color: var(--alert-color)
}

.wojo.white.label {
    background-color: var(--white-color);
    border-color: var(--white-color);
    color: var(--primary-color)
}

.wojo.white.basic.label {
    background-color: transparent;
    color: var(--white-color)
}

.wojo.transparent.label {
    background: rgba(255, 255, 255, 0.2);
    border: 0;
    color: var(--white-color)
}

.wojo.basic.label,
.wojo.inverted.label {
    background-color: transparent;
    box-shadow: none;
    border-color: var(--body-color);
    color: var(--body-color)
}

.wojo.simple.label {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: inherit
}

.wojo.label .icon {
    margin-right: .5rem;
    font-size: 1rem;
    letter-spacing: normal
}

.wojo.right.label .icon {
    margin-left: .5rem;
    margin-right: 0
}

.wojo.icon.label .icon {
    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: 0;
    min-height: 0;
    overflow: hidden;
    width: .875rem;
    height: .875rem;
    padding: 0
}

.wojo.ring.label {
    border-radius: 100%;
    border: 0;
    height: 1rem;
    padding: 0;
    vertical-align: middle;
    width: 1rem
}

.wojo.ring.label.spaced {
    margin-right: .5rem
}

.wojo.ring.label::after {
    background-color: var(--white-color);
    border-radius: 50%;
    content: "";
    height: .625rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    transition: all 0.3s ease 0s;
    width: .625rem
}

.wojo.link.label {
    cursor: pointer
}

.wojo.label .status {
    position: absolute;
    top: -2px;
    right: -2px;
    width: .813rem;
    height: .813rem;
    border-radius: 1rem;
    background: var(--white-color);
    border: 2px solid var(--white-color)
}

.wojo.label .status.negative {
    background: var(--negative-color)
}

.wojo.label .status.positive {
    background: var(--positive-color)
}

.wojo.badge {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    border-radius: .250rem;
    box-shadow: 0 23px 49px 0 var(--shadow-color);
    z-index: 1
}

.wojo.badge::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: -1.40rem;
    border: 1.5rem solid;
    z-index: -6;
    border-color: transparent transparent var(--primary-color) transparent
}

.wojo.badge .year {
    padding: 1.5rem;
    display: block;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1
}

.wojo.badge .text {
    display: block;
    padding: .750rem 1.5rem;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    font-size: .875rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    line-height: 1
}

.wojo.badge.primary {
    background-color: var(--primary-color)
}

.wojo.badge.secondary {
    background-color: var(--secondary-color)
}

.wojo.badge.positive {
    background-color: var(--positive-color)
}

.wojo.badge.negative {
    background-color: var(--negative-color)
}

.wojo.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 2
}

.wojo.ribbon::before,
.wojo.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid var(--grey-color-700)
}

.wojo.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 1em 0;
    background-color: var(--grey-color-300);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center
}

.wojo.ribbon.top.left {
    top: -10px;
    left: -10px
}

.wojo.ribbon.top.left::before,
.wojo.ribbon.top.left::after {
    border-top-color: transparent;
    border-left-color: transparent
}

.wojo.ribbon.top.left::before {
    top: 0;
    right: 0
}

.wojo.ribbon.top.left::after {
    bottom: 0;
    left: 0
}

.wojo.ribbon.top.left span {
    right: -20px;
    top: 30px;
    transform: rotate(-45deg)
}

.wojo.ribbon.top.right {
    top: -10px;
    right: -10px
}

.wojo.ribbon.top-right::before,
.wojo.ribbon.top-right::after {
    border-top-color: transparent;
    border-right-color: transparent
}

.wojo.ribbon.top.right::before {
    top: 0;
    left: 0
}

.wojo.ribbon.top.right::after {
    bottom: 0;
    right: 0
}

.wojo.ribbon.top.right span {
    left: -20px;
    top: 30px;
    transform: rotate(45deg)
}

.wojo.primary.ribbon span {
    background-color: var(--primary-color);
    color: var(--primary-color-inverted)
}

.wojo.primary.ribbon::before,
.wojo.primary.ribbon::after {
    border: 5px solid var(--primary-color-active)
}

.wojo.secondary.ribbon span {
    background-color: var(--secondary-color);
    color: var(--secondary-color-inverted)
}

.wojo.secondary.ribbon::before,
.wojo.secondary.ribbon::after {
    border: 5px solid var(--secondary-color-inverted)
}

.wojo.positive.ribbon span {
    background-color: var(--positive-color);
    color: var(--positive-color-inverted)
}

.wojo.positive.ribbon::before,
.wojo.positive.ribbon::after {
    border: 5px solid var(--positive-color-inverted)
}

.wojo.negative.ribbon span {
    background-color: var(--negative-color);
    color: var(--negative-color-inverted)
}

.wojo.negative.ribbon::before,
.wojo.negative.ribbon::after {
    border: 5px solid var(--negative-color-inverted)
}

.wojo.alert.ribbon span {
    background-color: var(--alert-color);
    color: var(--alert-color-inverted)
}

.wojo.alert.ribbon::before,
.wojo.alert.ribbon::after {
    border: 5px solid var(--alert-color-inverted)
}

.wojo.bookmark {
    position: absolute;
    top: 1rem;
    right: -1rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    font-size: .875rem;
    font-weight: 500;
    background: var(--grey-color-700);
    opacity: .75;
    border-radius: .250rem 0 0 0;
    color: #fff;
    z-index: 2
}

.wojo.bookmark::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -2rem;
    border: 1rem solid;
    border-color: var(--grey-color-700) transparent var(--grey-color-700) var(--grey-color-700)
}

.wojo.bookmark.primary {
    background: var(--primary-color)
}

.wojo.bookmark.secondary {
    background: var(--secondary-color)
}

.wojo.bookmark.positive {
    background: var(--positive-color)
}

.wojo.bookmark.negative {
    background: var(--negative-color)
}

.wojo.bookmark.primary::after {
    border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color)
}

.wojo.bookmark.secondary::after {
    border-color: var(--secondary-color) transparent var(--secondary-color) var(--secondary-color)
}

.wojo.bookmark.positive::after {
    border-color: var(--positive-color) transparent var(--positive-color) var(--positive-color)
}

.wojo.bookmark.negative::after {
    border-color: var(--negative-color) transparent var(--negative-color) var(--negative-color)
}

.wojo.label {
    font-size: .750rem;
    padding: .375rem .5rem
}

.wojo.mini.label {
    font-size: .5rem;
    font-weight: 800;
    padding: .125rem .5rem
}

.wojo.small.label {
    font-size: .625rem;
    padding: .25rem .5rem
}

.wojo.small.empty.label {
    width: .750rem;
    height: .750rem;
    padding: 0
}

.wojo.big.label {
    font-size: .875rem
}

.wojo.large.label {
    font-size: 1rem
}

.wojo.form {
    position: relative;
    max-width: 100%
}

.wojo.form .field>label,
.wojo.form .field label.label {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 0.5rem 0;
    color: var(--grey-color);
    font-size: .875rem;
    font-weight: 700
}

.wojo.form .field label .icon.asterisk {
    font-size: .750em;
    margin-left: .250rem;
    color: var(--negative-color)
}

.wojo.form .field label span {
    line-height: 1;
    vertical-align: middle;
    margin-left: .250rem
}

.wojo.form .field label small {
    margin-left: .250rem;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace
}

.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: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    line-height: normal;
    vertical-align: middle;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    height: calc(2rem + 1rem + 2px);
    background: var(--white-color);
    border: 0 solid var(--grey-color-100);
    color: var(--body-color);
    border-radius: var(--radius);
    font-weight: 400;
    box-shadow: 0 0 0 1px var(--grey-color-500);
    transition: all 0.25s ease 0s
}

.wojo.form textarea:not([rows]) {
    height: 12em;
    min-height: 8em;
    max-height: 24em
}

.wojo.form input.basic {
    box-shadow: 0 2px 0 0 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);
    box-shadow: 0 0 1rem 0 var(--shadow-color), 0 0 0 1px var(--primary-color)
}

.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);
    box-shadow: 0 2px 0 0 var(--primary-color);
    background: rgba(255, 255, 255, 0);
    border-radius: 0
}

.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: calc(2rem + 1rem + 2px);
    border: 0 solid var(--grey-color-100);
    box-shadow: 0 0 0 1px var(--grey-color-500);
    vertical-align: middle;
    background: var(--white-color) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath d='M538.7 238.3c-9.8-14.7-30.2-18.8-44.9-9L320 344.9 146.3 229.3c-7.3-4.9-15.9-5.6-24-4-8 1.6-16.1 5.6-21 13-9.8 14.7-5.7 35.1 9 44.8L228.8 362l73.1 49.1c5.4 3.3 11.6 4.9 17.9 4.9s12.6-1.6 17.9-4.9l73.2-49.1 118.5-78.9c15-9.7 19.1-30.2 9.3-44.8z'/%3e%3c/svg%3e") no-repeat right 1rem center;
    background-size: 20px 20px;
    border-radius: var(--radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all .35s ease-in-out
}

.wojo.form select.basic {
    border: 0;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: 0 2px 0 0 var(--grey-color-500);
    background-color: rgba(255, 255, 255, 0)
}

.wojo.form select:focus {
    box-shadow: var(--shadow-color) 0 0 2px 0, var(--shadow-color) 0px 12px 24px -4px, 0 0 0 1px var(--primary-color);
    background: var(--white-color) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath d='M538.7 401.7c-9.8 14.7-30.2 18.8-44.9 9l-173.8-115.6-173.7 115.6c-7.3 4.9-15.9 5.6-24 4-8-1.6-16.1-5.6-21-13-9.8-14.7-5.7-35.1 9-44.8l118.5-78.9 73.1-49.1c5.4-3.3 11.6-4.9 17.9-4.9s12.6 1.6 17.9 4.9l73.2 49.1 118.5 78.9c15 9.7 19.1 30.2 9.3 44.8zz'/%3E%3C/svg%3E") no-repeat right 1rem center;
    background-size: 20px 20px
}

.wojo.form select.basic:focus {
    box-shadow: 0 1px 0 0 var(--primary-color)
}

.wojo.form select option {
    font-size: .913rem
}

.wojo.form select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--dark-color)
}

.wojo.form select:-moz-focusring * {
    color: var(--dark-color);
    text-shadow: none
}

.wojo.file {
    display: flex;
    flex-flow: row wrap;
    position: relative
}

.wojo.file>input,
.wojo.file>div {
    flex: 1 1 0;
    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: var(--radius);
    -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)
}

.wavatar-dropzone {
    position: relative;
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background-color: var(--white-color);
    border-radius: .5rem;
    padding: 0;
    margin: 0 auto;
    outline: var(--grey-color-500) dashed 2px;
    outline-offset: 0;
    align-items: center;
    transition: all 0.2s ease-in-out
}

.wavatar-dropzone.left {
    margin: 0
}

.wavatar-dropzone>div {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer
}

.wavatar-dropzone img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
    border-radius: .5rem;
    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);
    outline-color: var(--primary-color);
    box-shadow: 0 0 3rem 0 var(--shadow-color)
}

.wavatar-accept {
    outline-color: var(--positive-color);
    color: var(--positive-color)
}

.wavatar-enter {
    color: var(--secondary-color);
    outline-color: var(--secondary-color)
}

.wavatar-reject {
    color: var(--negative-color);
    outline-color: var(--negative-color)
}

.wojo.basic.uploader {
    border: 0;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    font-size: 1rem;
    text-align: left
}

.wojo.uploader-active {
    border-color: var(--secondary-color)
}

.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.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);
    font-weight: 500;
    -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;
    border-radius: .250rem;
    background: var(--white-color);
    border: 2px solid var(--grey-color-500);
    -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);
    border-radius: .125rem;
    -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.checkbox input[type="radio"]:disabled+label:after,
.wojo.checkbox input[type="checkbox"]:disabled+label:after,
.wojo.checkbox input[type="radio"]:disabled+label:before,
.wojo.checkbox input[type="checkbox"]:disabled+label:before {
    opacity: .25
}

.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-500);
    border-radius: .5rem;
    border: 0
}

.wojo.toggle.checkbox label::after {
    left: 0;
    opacity: 1;
    width: 1.250rem;
    height: 1.250rem;
    background-color: var(--white-color);
    border: 1px solid var(--grey-color-500);
    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
}

.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;
    align-self: auto;
    min-width: 0;
    padding-left: 0;
    margin-bottom: 2em
}

.wojo.fields .field.labeled>label {
    margin-bottom: 0;
    justify-content: flex-end
}

.wojo.fields .field>p {
    margin-top: 1rem
}

.wojo.fields .field.labeled>p {
    text-align: right;
    margin-top: .25rem
}

.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: -1rem
}

.wojo.small.fields .field {
    padding-left: 1rem;
    margin-bottom: 1rem
}

.wojo.fields .basic.field {
    margin-bottom: 0
}

.wojo.fields.disabled .field,
.wojo.fields .field :disabled {
    pointer-events: none;
    opacity: .85
}

.wojo.fields .field.disabled label {
    opacity: .5
}

.wojo.fields .field.disabled :disabled {
    opacity: 1
}

.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.static {
    position: relative;
    visibility: visible;
    opacity: 1;
    z-index: auto;
    overflow: inherit
}

.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: 1rem;
    -webkit-transform: translateX(-50%) scale(1.05) perspective(1px);
    transform: translateX(-50%) scale(1.05) perspective(1px);
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
    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: var(--white-color);
    background-color: var(--primary-color)
}

.wojo.calendar.static .calnav h3 {
    padding: 1rem;
    text-align: center;
    line-height: 2.5rem
}

.wojo.calendar.static .calnav h3 .year {
    margin-left: 1rem
}

.wojo.calendar.static .header {
    color: #fff;
    background-color: var(--primary-color);
    display: flex;
    flex-flow: wrap;
    border-radius: 1rem 1rem 0 0
}

.wojo.calendar.static .header>div {
    text-align: center;
    font-size: .750rem;
    flex: 0 0 Calc(100% / 7);
    max-width: Calc(100% / 7);
    font-weight: 700
}

.wojo.calendar.static section {
    display: flex;
    border-left: 1px solid var(--grey-color-500)
}

.wojo.calendar.static section>div {
    flex: 0 0 Calc(100% / 7);
    max-width: Calc(100% / 7);
    padding: 2rem;
    flex-flow: column;
    flex-flow: row wrap;
    border-right: 1px solid var(--grey-color-500);
    border-bottom: 1px solid var(--grey-color-500)
}

.wojo.calendar.static section>div.empty {
    background-color: var(--grey-color-100)
}

.wojo.calendar.static section>div.today {
    background-color: var(--primary-color-inverted)
}

.wojo.calendar.static section>div .data {
    display: flex;
    flex-flow: row wrap;
    align-items: center
}

.wojo.calendar.static section>div time {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 500;
    font-size: .750rem
}

.wojo.calendar.static section>div .event {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    padding: .5rem;
    line-height: .750rem;
    border-radius: .250rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--positive-color)
}

.wojo.calendar .header .current.year {
    display: block;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem
}

.wojo.calendar .header .current.year:hover {
    color: var(--white-color)
}

.wojo.calendar .header .current.date {
    font-size: 1.875rem;
    font-weight: 300
}

.wojo.calendar .content {
    position: relative;
    background-color: var(--white-color);
    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: var(--radius);
    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), -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), -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: var(--white-color);
    background-color: var(--primary-color);
    border-radius: var(--radius)
}

.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 var(--white-color);
    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: 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: .875rem;
    cursor: pointer;
    border-radius: var(--radius);
    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: var(--white-color);
    background-color: var(--primary-color)
}

.wojo.calendar .content .years {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    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: var(--white-color);
    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: var(--radius);
    border: 0;
    background-color: var(--white-color);
    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%;
    top: 50%;
    min-width: 280px;
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: var(--radius);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
    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 var(--radius)
}

.wojo.time.picker .header .hour.active,
.wojo.time.picker .header .minute.active {
    color: var(--white-color)
}

.wojo.time.picker .header .ampm {
    font-size: 1.5rem
}

.wojo.time.picker .content {
    position: relative;
    padding: 1.5rem;
    background-color: var(--white-color)
}

.wojo.time.picker .content .section {
    position: relative;
    width: 300px;
    height: 300px;
    margin-bottom: 1.5rem;
    border-radius: var(--radius)
}

.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: var(--radius);
    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: 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: var(--radius);
    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: var(--white-color);
    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: var(--radius);
    border: 0;
    background-color: var(--white-color);
    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
}

.wojocolors {
    position: relative
}

.wojocolors .input-swatch.is_input {
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), conic-gradient(rgb(204, 204, 204) 25%, rgb(255, 255, 255) 0deg, rgb(255, 255, 255) 50%, rgb(204, 204, 204) 0deg, rgb(204, 204, 204) 75%, rgb(255, 255, 255) 0deg) 0 0 / 8px 8px;
    left: 2px;
    top: 2px;
    cursor: text;
    padding: 0;
    margin: 0;
    border-radius: var(--radius);
    display: block
}

.wojocolors .input-swatch.is_button {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--radius);
    cursor: pointer
}

.wojocolors .input-swatch.is_button span::before,
.wojocolors .input-swatch.is_button span::after {
    font-family: "WojoIcons";
    position: absolute;
    content: "\ea45";
    color: var(--white-color);
    z-index: 5;
    opacity: .5;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.wojocolors .input-swatch.is_button span::before {
    content: "\ea46";
    opacity: 1
}

.wojocolors .input-swatch span {
    width: calc(100% + 2px);
    display: block;
    border-radius: var(--radius);
    height: calc(100% + 2px);
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.wojocolors .panel {
    position: absolute;
    padding: .5rem;
    width: calc(320px + 2px);
    height: auto;
    z-index: 99999;
    top: 100%;
    background-color: var(--white-color);
    border-radius: 1rem;
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 11px 15px -7px var(--shadow-color), 0 24px 38px 3px var(--shadow-color), 0 9px 46px 8px var(--shadow-color)
}

.wojocolors.top .panel {
    top: auto;
    bottom: calc(2rem + 1rem + 2px)
}

.wojocolors.right .panel {
    left: auto;
    right: 0
}

.wojocolors .panel .wrapper {
    display: flex;
    flex-flow: row wrap
}

.wojocolors .panel.minicolors-visible {
    display: block
}

.wojocolors .grid {
    position: relative;
    height: 150px;
    overflow: hidden;
    flex: 0 0 240px;
    max-width: 240px;
    border-radius: .875rem;
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    cursor: grab
}

.wojocolors .hue-slider,
.wojocolors .alpha-slider {
    border-radius: 1rem;
    position: relative;
    margin-left: .5rem;
    flex: 0 0 1.5rem;
    max-width: 1.5rem;
    background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 448 512'%3E%3Cpath d='M296 391.1a23.93 23.93 0 0 0-16.97 7.031L248 430.1v-86.06c0-13.25-10.75-24-24-24s-24 10.75-24 24v86.06l-31.03-31.03c-4.67-4.77-10.87-7.97-16.97-7.97-12.82 0-24 10.33-24 24a23.93 23.93 0 0 0 7.031 16.97l72 72.01C209.6 507.5 215.5 512 224 512s14.4-4.461 16.97-7.031l72-72.01C317.7 428.3 320 422.1 320 415.1c0-12.8-11.2-24-24-24zm-144-272a23.93 23.93 0 0 0 16.97-7.031L200 81.91v86.07c0 13.25 10.75 24 24 24s24-10.75 24-24V81.91l31.03 31.03c4.67 4.66 10.77 6.16 16.97 6.16 18.79 0 24-17.2 24-23.1a23.93 23.93 0 0 0-7.031-16.97l-72-72.01C234.9.977 227.7 0 223.1 0c-2.8 0-10 .969-16.1 7l-72 72.01c-4.7 4.69-7 10.83-7 16.97 0 13.72 11.2 23.12 24 23.12zM424 232H24c-13.25 0-24 10.7-24 23.1S10.75 280 24 280h400c13.25 0 24-10.76 24-24.01S437.3 232 424 232z'/%3E%3C/svg%3E") 16 16, row-resize
}

.wojocolors .alpha-slider {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%), conic-gradient(rgb(204, 204, 204) 25%, rgb(255, 255, 255) 0deg, rgb(255, 255, 255) 50%, rgb(204, 204, 204) 0deg, rgb(204, 204, 204) 75%, rgb(255, 255, 255) 0deg) 0 0 / 8px 8px;
    display: none
}

.wojocolors.has-opacity .alpha-slider {
    display: block
}

.wojocolors .grid .picker {
    position: absolute;
    top: 50%;
    left: 50%;
    border: .250rem solid rgba(255, 255, 255, 0.85);
    border-radius: 100%;
    width: 1.5rem;
    height: 1.5rem;
    box-shadow: 0 0 3px 1px var(--shadow-color);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: none
}

.wojocolors .grid .picker>div {
    box-sizing: content-box
}

.wojocolors .hue-slider .picker,
.wojocolors .alpha-slider .picker {
    position: absolute;
    top: 0;
    left: 50%;
    border: .250rem solid rgba(255, 255, 255, 0.85);
    border-radius: 100%;
    width: calc(1.5rem - 2px);
    height: calc(1.5rem - 2px);
    margin-top: calc((1.5rem / 2) * -1);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 0 11px 15px -7px var(--shadow-color), 0 24px 38px 3px var(--shadow-color), 0 9px 46px 8px var(--shadow-color);
    background: transparent
}

.wojocolors .swatches li .color {
    width: 2rem;
    display: block;
    height: 2rem;
    border-radius: var(--radius)
}

.wojocolors .swatches,
.wojocolors .swatches li {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden
}

.wojocolors .swatches {
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap
}

.wojocolors .swatches li {
    align-self: auto;
    padding-left: calc(var(--gutter) / 4);
    margin-bottom: calc(var(--gutter) / 4);
    flex: 0 0 calc(100% / 6);
    max-width: calc(100% / 6);
    cursor: pointer;
    border-radius: var(--radius)
}

.wojocolors .swatches li.selected span {
    box-shadow: inset 0 0 0 .250rem var(--light-color)
}

.wojo.range,
.wojo.range .fill {
    border-radius: var(--radius)
}

.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: var(--white-color) 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: var(--white-color)
}

.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: .5rem;
    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
}

[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: var(--white-color);
    border: 0;
    -webkit-appearance: none;
    padding: .125rem 1rem !important;
    outline: var(--primary-color) solid 2px;
    outline-offset: 0;
    border-radius: var(--radius);
    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.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.5rem + 1rem + 2px)
}

.wojo.small.form textarea:not([rows]),
.wojo.form textarea.small:not([rows]) {
    height: 6rem;
    min-height: 4rem;
    max-height: 12rem;
    padding: 1rem 1.5rem
}

.wojo.small.form select,
.wojo.form select.small {
    height: calc(1.5rem + 1rem + 2px)
}

.wojo.tiny.form textarea:not([rows]),
.wojo.form textarea.tiny:not([rows]) {
    height: 3.188rem;
    min-height: 3.188rem;
    max-height: 12rem;
    padding: .5rem 1rem
}

.wojo.small.form input.basic {
    padding: .875rem 0
}

.wojo.small.fields .field {
    margin-bottom: 1rem
}

.wojo.small.fields .field.basic {
    margin-bottom: 0
}

.wojo.form {
    font-size: 1rem
}

.wojo.small.range,
.wojo.small.range .fill {
    border-radius: .125rem
}

.wojo.small.range.horizontal {
    height: .25rem
}

.wojo.small.range .handle {
    width: 1rem;
    height: 1rem
}

@media screen and (max-width:768px) {
    .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 {
        justify-content: flex-start;
        margin-bottom: 1rem;
    }

    .wojo.inline.fields {
        flex-direction: row;
        align-items: center;
        margin-left: -2rem;
    }

    .wojo.inline.fields .field {
        flex: 0 1 auto;
        padding-left: 2em;
    }

    .wojo.calendar.static section>div {
        padding: 1rem;
    }
}

.wojo.input {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border-radius: var(--radius);
    border: 0 solid var(--grey-color-100);
    background-color: var(--white-color);
    box-shadow: 0 0 0 1px var(--grey-color-500);
    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 0;
    min-width: 0;
    border: 0;
    line-height: normal;
    vertical-align: middle;
    border-radius: var(--radius);
    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;
    align-self: auto;
    margin: 1px
}

.wojo.action.input>.icon.button,
.wojo.icon.input>.icon.button {
    padding: 0 1rem;
    border: 0;
    margin: 1px
}

.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;
    min-width: 8rem;
    box-shadow: none
}

.wojo.selection.input {
    align-items: center
}

.wojo.selection.input .icon {
    padding: 0 1.875rem;
    flex: 0 1 auto;
    align-self: center
}

.wojo.selection.input div {
    flex: 1 1 0
}

.wojo.selection.input select {
    width: 100%;
    box-shadow: 0 0 0 0 var(--grey-color-500)
}

.wojo.basic.input {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 2px 0 0 var(--grey-color-500);
    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.transparent.input {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 1px var(--light-color-shadow)
}

.wojo.transparent.input input {
    color: rgba(255, 255, 255, 0.8)
}

.wojo.transparent.input input,
.wojo.form .wojo.transparent.input input,
.wojo.form .wojo.transparent.input textarea {
    background: rgba(255, 255, 255, 0.05)
}

.wojo.input.transparent.focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 1rem 0 var(--shadow-color), 0 0 0 1px var(--light-color-shadow)
}

.wojo.transparent.input .icon {
    color: rgba(255, 255, 255, .5)
}

.wojo.form .wojo.input.transparent ::-webkit-input-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent :-ms-input-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent ::-moz-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent.focus :focus::-webkit-input-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent.focus :focus:-ms-input-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent.focus :focus::-moz-placeholder {
    color: var(--grey-color-300)
}

.wojo.form .wojo.input.transparent.focus input:-webkit-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    border-color: var(--white-color)
}

.wojo.inline.input {
    display: inline-flex
}

.wojo.input.stacked {
    display: flex;
    flex-direction: column
}

.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: var(--radius);
    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: var(--shadow-color) 0 0 2px 0, var(--shadow-color) 0 12px 24px -4px, 0 0 0 1px var(--primary-color)
}

.wojo.basic.input.focus {
    box-shadow: 0 2px 0 0 var(--primary-color)
}

.wojo.basic.input.focus input:focus {
    box-shadow: none
}

.wojo.transparent.input input:focus {
    color: rgba(255, 255, 255, 0.8)
}

.wojo.input ::placeholder {
    color: var(--grey-color-700)
}

.wojo.input :focus::placeholder {
    color: var(--grey-color)
}

.wojo.input input:-webkit-autofill,
.wojo.input input:autofill {
    box-shadow: 0 0 0 100px #fff inset;
    border-color: var(--white-color)
}

.wojo.input input:-webkit-autofill:focus,
.wojo.input input:autofill:focus {
    box-shadow: 0 0 0 100px #fff inset;
    border-color: var(--white-color)
}

.wojo.ajax.input {
    z-index: 2
}

.wojo.ajax.input .search.results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    background: var(--white-color);
    margin-top: 1px;
    width: 100%;
    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.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.5rem + 1rem + 2px)
}

.wojo.form .wojo.small.color.input input,
.wojo.small.color.input input {
    padding: 875rem 1.5rem 875rem 3.5rem
}

.wojo.form .wojo.input input,
.wojo.input input {
    line-height: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1rem;
    height: calc(3rem + 2px)
}

.wojo.form .wojo.color.input input,
.wojo.color.input input {
    padding: 1rem 1.5rem 1rem 3.5rem
}

.wojo.form .wojo.large.input input,
.wojo.large.input input {
    line-height: 1rem;
    padding: 2rem 1.5rem;
    font-size: 1.5rem;
    height: calc(1.75rem + 1rem + 2px)
}

.wojo.action.large.input>.icon.button,
.wojo.large.icon.input>.icon.button {
    padding: 0 1.5rem;
    margin: .5rem
}

.wojo.form .wojo.large.basic.input input,
.wojo.large.basic.input input {
    padding: 1rem 0;
    font-weight: 300
}

ul.wojo.list,
ol.wojo.list {
    list-style-type: none;
    margin: 0;
    padding: 0
}

ul.wojo.list li,
ol.wojo.list li {
    list-style-type: none;
    list-style-position: outside;
    padding: 0
}

ul.wojo.list ul,
ol.wojo.list ol,
ul ul,
ol ol {
    margin: 0;
    padding: 0 0 0 2rem
}

.wojo.styled.list li {
    position: relative;
    padding-left: 1.750rem
}

.wojo.styled.list li::before,
.wojo.styled.list li::after {
    font-family: 'WojoIcons';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.5
}

.wojo.styled.check.list li::before {
    content: "\e9c6"
}

.wojo.styled.check.list li::after {
    content: "\e9c7";
    opacity: 1
}

.wojo.styled.caret.list li::before {
    content: "\e9aa"
}

.wojo.styled.caret.list li::after {
    content: "\e9ab";
    opacity: 1
}

.wojo.styled.chevron.list li::before {
    content: "\e9f5";
    opacity: 1
}

.wojo.styled.primary.list li::before,
.wojo.styled.primary.list li::after {
    color: var(--primary-color)
}

.wojo.styled.secondary.list li::before,
.wojo.styled.secondary.list li::after {
    color: var(--secondary-color)
}

.wojo.styled.positive.list li::before,
.wojo.styled.positive.list li::after {
    color: var(--positive-color)
}

.wojo.styled.negative.list li::before,
.wojo.styled.negative.list li::after {
    color: var(--negative-color)
}

.wojo.list>.item {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    margin-bottom: .5rem
}

.wojo.list>.item>.image,
.wojo.list>.item>img,
.wojo.list>.item>svg {
    margin-right: 1rem
}

.wojo.list .item>.content,
.wojo.list .item>.icon:not(.button):not(.flag) {
    flex: 1 1 0;
    min-width: 0
}

.wojo.list .item>.icon:not(.button):not(.flag) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-right: 1rem
}

.wojo.list .item>.content.auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.wojo.list>.item.icon:only-child,
.wojo.list>.item .image:only-child {
    -ms-grid-row-align: center;
    align-self: center
}

.wojo.list>.item .heading,
.wojo.list>.content .item .heading {
    line-height: 1.5rem;
    font-size: 1.25rem;
    margin-bottom: .250rem;
    font-weight: 600;
    align-items: center;
    display: flex;
    flex-flow: row wrap
}

.wojo.list>.item .description,
.wojo.list>.content .item .description {
    margin-left: .5rem;
    font-weight: 500
}

.wojo.list>.item:last-child {
    margin-bottom: 0
}

.wojo.horizontal.list {
    display: inline-flex;
    flex-flow: row wrap
}

.wojo.horizontal.list>.item {
    margin-left: 1rem;
    align-items: center;
    margin-bottom: 0
}

.wojo.horizontal.list:not(.celled)>.item:first-child {
    margin-left: 0;
    padding-left: 0
}

.wojo.horizontal.divided.list>.item::before,
.wojo.horizontal.celled.list>.item::before,
.wojo.horizontal.celled.list>.item:first-child::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -1rem;
    height: 70%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    background-color: var(--grey-color-500)
}

.wojo.horizontal.divided.list>.item:last-child::before {
    display: none
}

.wojo.horizontal.celled.list>.item:first-child {
    padding-left: 1rem;
    margin-left: 0
}

.wojo.horizontal.celled.list>.item:last-child {
    padding-right: 0
}

.wojo.horizontal.celled.list>.item:first-child::after {
    right: auto;
    left: 0
}

.wojo.horizontal.divided.list>.item,
.wojo.horizontal.celled.list>.item {
    padding-left: 1rem
}

.wojo.divided.list:not(.horizontal)>.item {
    padding-top: .5rem;
    border-top: 1px solid var(--grey-color-500)
}

.wojo.divided.list:not(.horizontal)>.item:first-child {
    border-top: none;
    padding-top: 0
}

.wojo.horizontal.block.list {
    display: flex
}

.wojo.celled.list:not(.horizontal)>.item {
    padding-top: .5rem;
    border-top: 1px solid var(--grey-color-500)
}

.wojo.celled.list:not(.horizontal)>.item:last-child {
    border-bottom: 1px solid var(--grey-color-500);
    padding-bottom: .5rem
}

.wojo.mini.list {
    font-size: 0.750rem
}

.wojo.small.list,
.wojo.small.items {
    font-size: .875rem
}

.wojo.list,
.wojo.items {
    font-size: 1rem
}

.wojo.relaxed.list.horizontal>.item {
    margin-left: 2rem
}

.wojo.horizontal.divided.relaxed.list>.item::before,
.wojo.horizontal.celled.relaxed.list>.item::before,
.wojo.horizontal.celled.relaxed.list>.item:first-child::after {
    right: -1.5rem
}

.wojo.very.relaxed.list.horizontal>.item {
    margin-left: 4rem
}

.wojo.relaxed.list.horizontal>.item:first-child,
.wojo.very.relaxed.list.horizontal>.item:first-child {
    margin-left: 0
}

.wojo.horizontal.divided.very.relaxed.list>.item::before,
.wojo.horizontal.celled.very.relaxed.list>.item::before,
.wojo.horizontal.celled.very.relaxed.list>.item:first-child::after {
    right: -2.5em
}

.wojo.relaxed.list:not(.horizontal):not(.divided)>.item,
.wojo.very.relaxed.list:not(.horizontal):not(.divided)>.item,
.wojo.relaxed.list:not(.horizontal).divided>.item,
.wojo.very.relaxed.list:not(.horizontal).divided>.item,
.wojo.relaxed.list:not(.horizontal).celled>.item,
.wojo.very.relaxed.list:not(.horizontal).celled>.item {
    margin-bottom: 0
}

.wojo.relaxed.list:not(.horizontal):not(.divided):not(.celled)>.item {
    margin-bottom: 1rem
}

.wojo.very.relaxed.list:not(.horizontal):not(.divided):not(.celled)>.item {
    margin-bottom: 3rem
}

.wojo.relaxed.divided.list:not(.horizontal)>.item:first-child,
.wojo.very.relaxed.divided.list:not(.horizontal)>.item:first-child {
    padding-top: 0
}

.wojo.relaxed.divided.list:not(.horizontal)>.item:last-child,
.wojo.very.relaxed.divided.list:not(.horizontal)>.item:last-child {
    padding-bottom: 0
}

.wojo.relaxed.divided.list:not(.horizontal)>.item,
.wojo.relaxed.celled.list:not(.horizontal)>.item {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.wojo.very.relaxed.divided.list:not(.horizontal)>.item,
.wojo.very.relaxed.celled.list:not(.horizontal)>.item {
    padding-bottom: 2rem;
    padding-top: 2rem
}

.wojo.block.list {
    display: flex
}

.wojo.block.list>.content {
    margin-left: 1rem;
    flex-grow: 1
}

.wojo.block.list>.content .heading {
    font-size: 1.275rem
}

.wojo.nav.list {
    display: flex;
    flex-direction: column
}

.wojo.nav.list .item {
    margin: 0
}

.wojo.nav.list .item a {
    color: var(--grey-color);
    border-left: .1875rem solid var(--primary-color-inverted);
    font-size: 1.250rem;
    font-weight: 400;
    padding: .5rem 1rem
}

.wojo.nav.list .item a:hover {
    color: var(--primary-color)
}

.wojo.nav.list .item a.active {
    border-left: .1875rem solid var(--primary-color);
    color: var(--primary-color)
}

ul.vertical-menu li,
ul.vertical-menu,
ul.vertical-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

ul.vertical-menu li {
    border-top: 1px solid var(--grey-color-300);
    display: block;
    position: relative
}

ul.vertical-menu li:last-child {
    border-bottom: 1px solid var(--grey-color-300)
}

ul.vertical-menu li a {
    display: inline-block;
    position: relative;
    padding: .5rem 0;
    color: var(--dark-color);
    font-weight: 500
}

ul.vertical-menu li a:hover,
ul.vertical-menu li a.active {
    color: var(--primary-color)
}

ul.vertical-menu li a>i.icon {
    margin-right: .5rem
}

ul.vertical-menu li a span {
    display: inline-block;
    font-size: .750rem;
    padding: .5rem;
    margin-left: 1rem;
    line-height: .75;
    border-radius: .250rem;
    font-weight: 600
}

ul.vertical-menu .menu-submenu {
    display: none;
    top: 0
}

ul.vertical-menu .menu-submenu li {
    border-bottom: 0;
    border-top: 1px solid var(--grey-color-300);
    box-shadow: none;
    position: relative
}

ul.vertical-menu .menu-submenu li a {
    padding: .5rem 1.5rem
}

ul.vertical-menu .menu-submenu li ul li a {
    padding: .5rem 2.5rem
}

ul.vertical-menu .menu-submenu li ul li ul li a {
    padding: .5rem 4rem
}

ul.vertical-menu .icon.chevron.down {
    position: absolute;
    right: 0;
    display: block;
    cursor: pointer;
    padding: .875rem 0
}

.wojo.feed {
    margin: 1rem 0
}

.wojo.feed>.event {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: .250rem 0;
    margin: 0;
    background: none;
    border-top: none
}

.wojo.feed>.event:first-child {
    border-top: 0;
    padding-top: 0
}

.wojo.feed>.event:last-child {
    padding-bottom: 0
}

.wojo.feed>.event>.label {
    display: block;
    flex: 0 0 auto;
    width: 8rem;
    height: auto;
    align-self: stretch;
    text-align: left
}

.wojo.feed>.event>.label .icon {
    font-size: 1.5rem;
    width: 100%;
    padding: .25rem;
    background: none;
    border: none;
    border-radius: 0
}

.wojo.feed>.event>.label img {
    width: 100%;
    height: auto;
    border-radius: .5rem
}

.wojo.feed>.event>.label+.content {
    margin: 0 0 0 1.5rem
}

.wojo.feed>.event>.content {
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    text-align: left;
    word-wrap: break-word
}

.wojo.feed>.event:last-child>.content {
    padding-bottom: 0
}

.wojo.feed>.event>.content .date {
    margin: -.5rem 0 0;
    padding: 0;
    font-weight: normal;
    font-size: 1rem;
    font-style: normal
}

.wojo.feed>.event>.content .summary {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center
}

.wojo.feed>.event>.content .summary a {
    flex: 1 1 0;
    min-width: 0
}

.wojo.feed>.event>.content .summary>.date {
    font-weight: 500;
    font-size: .750rem;
    font-style: normal;
    margin: 0 0 0 .750rem;
    padding: 0;
    flex: 0 0 auto;
    align-self: end
}

.wojo.feed>.event>.content .summary>.date .icon {
    margin-right: .5rem
}

.wojo.feed>.event>.content .text {
    margin: .5rem 0 0;
    border-left: none;
    font-size: .875rem;
    max-width: max-content;
    line-height: 1.5rem
}

.wojo.feed>.event>.content .meta {
    display: inline-flex;
    font-size: .875rem;
    margin: .5rem 0 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: .25rem;
    border-top: 1px solid var(--grey-color-500);
    border-bottom: 1px solid var(--grey-color-500)
}

.wojo.divided.feed>.event {
    border-top: 1px solid var(--grey-color-500);
    padding-bottom: 2rem;
    padding-top: 2rem
}

.wojo.divided.feed>.event:first-child {
    border-top: none;
    padding-top: 0
}

.wojo.list>.item.active:not(.transparent) {
    font-weight: 700;
    color: var(--dark-color)
}

@media screen and (max-width:640px) {
    .wojo.horizontal.list.responsive {
        display: flex;
        flex-direction: column;
    }

    .wojo.list.responsive .item>.content {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .wojo.horizontal.list.responsive>.item {
        margin-left: 0;
    }

    .wojo.horizontal.divided.list.responsive>.item,
    .wojo.horizontal.celled.list.responsive>.item {
        padding: .125rem 0;
    }

    .wojo.horizontal.celled.list.responsive>.item:first-child {
        padding-left: 0;
    }

    .wojo.horizontal.celled.list:first-child>.item::before,
    .wojo.horizontal.divided.list:first-child>.item::before {
        display: none;
    }
}

.wojo.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 1rem 0;
    word-wrap: break-word;
    background-color: var(--white-color);
    border-radius: .375rem;
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.wojo.card>.content,
.wojo.card>.header,
.wojo.card>.footer {
    padding: calc(var(--unit-mini) * 3)
}

.wojo.card>.header.divided {
    box-shadow: 0 1px 0 0 var(--grey-color-500)
}

.wojo.card>.footer.divided {
    box-shadow: inset 0 1px 0 0 var(--grey-color-500)
}

.wojo.card .link+.link {
    margin-left: var(--margin)
}

.wojo.card>.header.small-gutters,
.wojo.card>.footer.small-gutters,
.wojo.segment.small-gutters {
    padding-bottom: calc(var(--gutter) / 2)
}

.wojo.card>.header.compact,
.wojo.card>.footer.compact {
    padding-bottom: 0
}

.wojo.segment {
    position: relative;
    padding: var(--unit);
    background-color: var(--white-color);
    border-radius: .375rem;
    border: 1px solid var(--grey-color-500)
}

.wojo.framed.segment,
.wojo.framed.card,
.wojo.framed.cards>.card,
.wojo .framed.card {
    border: 1px solid var(--grey-color-500)
}

.wojo.compact.segment {
    padding: 0
}

.wojo.spaced.card,
.wojo.spaced.segment {
    margin: 2rem 0
}

.wojo.basic.segment,
.wojo.basic.card,
.wojo.basic.cards>.card {
    box-shadow: none
}

.wojo.simple.segment {
    border: 0
}

.wojo.attached.segment,
.wojo.attached.card {
    margin: 0 0 0 0
}

.wojo.top.attached.segment,
.wojo.top.attached.card {
    margin: 0 0 1rem 0
}

.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
    margin: 0 0 1rem 0
}

.wojo.card.active,
.wojo.segment.active,
.wojo.cards .card.active {
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

a.wojo.segment {
    display: block
}

a.wojo.card,
a.wojo.segment {
    transition: all .2s ease-in-out
}

a.wojo.card:hover,
a.wojo.card:hover {
    -webkit-transform: translateY(-.1875rem);
    transform: translateY(-.1875rem)
}

.wojo.card.dimmed,
.wojo.cards .card.dimmed {
    overflow: hidden
}

.wojo.transparent.segment,
.wojo.transparent.card {
    background-color: rgba(255, 255, 255, 0.1)
}

.wojo.all.transparent.segment,
.wojo.all.transparent.card {
    background-color: rgba(255, 255, 255, 0)
}

.wojo.small.card>.content,
.wojo.small.card>.header,
.wojo.small.card>.footer,
.wojo.cards .card.small>.content,
.wojo.cards .card.small>.header,
.wojo.cards .card.small>.footer {
    padding: var(--unit-small)
}

.wojo.large.card>.content,
.wojo.large.card>.header,
.wojo.large.card>.footer,
.wojo.cards .card.large>.content,
.wojo.cards .card.large>.header,
.wojo.cards .card.large>.footer {
    padding: calc(var(--unit) * 1.5)
}

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

.wojo.large.cards {
    margin-left: calc(var(--gutter-compensation) * 2)
}

.wojo.small.cards .card {
    margin-left: calc(var(--gutter) / 2);
    margin-bottom: calc(var(--gutter) / 2)
}

.wojo.large.cards .card {
    margin-left: calc(var(--gutter) * 2);
    margin-bottom: calc(var(--gutter) * 2)
}

.wojo.small.segment {
    padding: calc(var(--gutter) / 2)
}

.wojo.cards {
    --card-gutter: var(--gutter)
}

.wojo.small.cards {
    --card-gutter: calc(var(--gutter) / 2)
}

.wojo.large.cards {
    --card-gutter: calc(var(--gutter) * 2)
}

.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: var(--white-color);
    background-clip: border-box;
    border-radius: .375rem;
    margin-left: var(--gutter);
    margin-bottom: var(--gutter);
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.wojo.cards .card>.content,
.wojo.cards .card>.header,
.wojo.cards .card>.footer {
    padding: calc(var(--unit-mini) * 3)
}

.wojo.cards .card>.header.divided {
    box-shadow: 0 1px 0 0 var(--grey-color-300)
}

.wojo.cards .card>.footer.divided {
    box-shadow: inset 0 1px 0 0 var(--grey-color-300)
}

.wojo.full.cards .card,
.wojo.full.card {
    flex-direction: column;
    display: flex
}

.wojo.full.cards .card>.footer,
.wojo.full.card>.footer {
    margin-top: auto
}

.wojo.fof.card {
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    margin: -2rem;
    overflow: hidden;
    border-radius: 1.5rem
}

.wojo.fof.card img {
    position: relative;
    z-index: 1
}

.wojo.fof.card .container {
    position: absolute;
    z-index: 2
}

.wojo.fof.card h1 {
    line-height: 1.5;
    margin: 0;
    color: var(--primary-color)
}

.wojo.fof.card p {
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--grey-color)
}

@media screen and (max-width:640px) {
    .wojo.cards {
        flex-wrap: wrap;
    }

    .wojo.cards .card {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .wojo.card>.header.compact {
        padding: 0;
    }
}

@media screen and (min-width:641px) and (max-width:768px) {
    .wojo.cards {
        flex-wrap: wrap;
    }

    .wojo.cards .card {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .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));
    }

    .wojo.card>.header.compact {
        padding: 0;
    }
}

@media screen and (min-width:769px) and (max-width:1199px) {

    .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(--card-gutter));
        max-width: calc(100% - var(--card-gutter));
    }

    .wojo.cards.tablet-2>.card {
        flex: 0 0 calc(50% - var(--card-gutter));
        max-width: calc(50% - var(--card-gutter));
    }

    .wojo.cards.tablet-3>.card {
        flex: 0 0 calc(100% / 3 - var(--card-gutter));
        max-width: calc(100% / 3 - var(--card-gutter));
    }

    .wojo.cards.tablet-4>.card {
        flex: 0 0 calc(25% - var(--card-gutter));
        max-width: calc(25% - var(--card-gutter));
    }

    .wojo.cards.tablet-5>.card {
        flex: 0 0 calc(20% - var(--card-gutter));
        max-width: calc(20% - var(--card-gutter));
    }
}

@media screen and (min-width:1200px) {

    .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(--card-gutter));
        max-width: calc(100% - var(--card-gutter));
    }

    .wojo.cards.screen-2>.card {
        flex: 0 0 calc(50% - var(--card-gutter));
        max-width: calc(50% - var(--card-gutter));
    }

    .wojo.cards.screen-3>.card {
        flex: 0 0 calc(100% / 3 - var(--card-gutter));
        max-width: calc(100% / 3 - var(--card-gutter));
    }

    .wojo.cards.screen-4>.card {
        flex: 0 0 calc(25% - var(--card-gutter));
        max-width: calc(25% - var(--card-gutter));
    }

    .wojo.cards.screen-5>.card {
        flex: 0 0 calc(20% - var(--card-gutter));
        max-width: calc(20% - var(--card-gutter));
    }
}

.wojo.table {
    width: 100%;
    background: var(--white-color);
    margin: 0;
    border: 1px solid var(--grey-color-300);
    box-shadow: none;
    border-radius: 1rem;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0
}

.wojo.table:first-child {
    margin-top: 0
}

.wojo.table:last-child {
    margin-bottom: 0
}

.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(--secondary-color-inverted);
    padding: 1rem 0.750em;
    vertical-align: inherit;
    font-size: .875rem;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 .125rem 0 0 var(--secondary-color);
    border-left: none
}

.wojo.table thead tr>th:first-child {
    border-left: none
}

.wojo.table thead tr:first-child>th:first-child {
    border-radius: 1rem 0 0 0
}

.wojo.table thead tr:first-child>th:last-child {
    border-radius: 0 1rem 0 0
}

.wojo.table thead tr:first-child>th:only-child {
    border-radius: 1rem 1rem 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: .750rem;
    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: 0 0 0 1rem
}

.wojo.table tfoot tr:first-child>th:last-child {
    border-radius: 0 0 1rem 0
}

.wojo.table tfoot tr:first-child>th:only-child {
    border-radius: 0 0 1rem 1em
}

.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.750rem;
    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 thead th {
    background: transparent;
    border-left: none;
    box-shadow: 0 .250rem 0 0 var(--grey-color-500);
    text-transform: uppercase;
    font-size: .813rem
}

.wojo.basic.table tr td {
    border-top: 1px solid var(--grey-color-500)
}

.wojo.basic.striped.table tbody tr:nth-child(2n) {
    background-color: var(--grey-color-300)
}

.wojo.table th.auto,
.wojo.table td.auto {
    width: 1px;
    white-space: nowrap
}

.wojo.compact.table th {
    padding: 0 .750rem
}

.wojo.compact.table td {
    padding: .5rem .75rem
}

.wojo[class*="very compact"].table th {
    padding: 0 .613rem
}

.wojo[class*="very compact"].table td {
    padding: 0.375rem 0.613rem
}

.wojo.compact.fitted.table td {
    padding: .25rem .375rem
}

.wojo.small.table {
    font-size: 0.875rem
}

.wojo.table {
    font-size: 1rem
}

.wojo.large.table {
    font-size: 1.25rem
}

@media screen and (max-width:768px) {
    .wojo.responsive.table td {
        white-space: nowrap
    }

    .wojo.responsive.table {
        overflow-x: auto;
        overflow-y: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }
}

.wojo.dropdown {
    position: absolute;
    z-index: 500;
    top: -5000px;
    left: -5000px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    pointer-events: none;
    padding: .5rem;
    border-radius: 1rem;
    background: var(--white-color);
    border: 1px solid var(--grey-color-300);
    box-shadow: 0 0 3rem 0 var(--shadow-color)
}

.wojo.dropdown.active {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.wojo.dropdown.static {
    padding: 1rem
}

.wojo.dropdown.fixed {
    position: fixed
}

.wojo.dropdown .pointer {
    height: 1rem;
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transform: translate(0px, -1rem);
    transform: translate(0px, -1rem)
}

.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: .5rem;
    background: var(--white-color);
    content: "";
    height: 1rem;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 1rem;
    margin-left: -.5rem
}

.wojo.dropdown.top-left .pointer::after {
    left: 0;
    margin-left: 1rem
}

.wojo.dropdown.top-right .pointer::after {
    left: auto;
    right: 0;
    margin-right: 1rem;
    margin-left: auto
}

.wojo.dropdown.open-top .pointer::after,
.wojo.dropdown.open-top.top-left .pointer::after,
.wojo.dropdown.open-top.top-center .pointer::after,
.wojo.dropdown.open-top.top-right .pointer::after {
    border: 0;
    box-shadow: 0 2px 1px 0 var(--dark-color-shadow);
    top: -4px;
    margin-left: -.5rem
}

.wojo.dropdown.open-top.top-left .pointer::after {
    margin-left: 1rem
}

.wojo.dropdown.open-top.top-right .pointer::after {
    margin-right: 1rem
}

.wojo.dropdown.open-top .pointer {
    bottom: -1.5rem;
    top: auto
}

.wojo.dropdown.top-left,
.wojo.dropdown.top-center,
.wojo.dropdown.top-right {
    margin-top: 0.5rem
}

.wojo.dropdown.pointing.top-left,
.wojo.dropdown.pointing.top-center,
.wojo.dropdown.pointing.top-right {
    margin-top: 1rem
}

.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 0;
    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>.item.image {
    padding: .5rem 0
}

.wojo.dropdown>.item.image.active {
    background-color: var(--white-color)
}

.wojo.dropdown>.item.image.active>img {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px
}

.wojo.dropdown>.item.image>img {
    margin-right: 0;
    flex: 1 1 0;
    height: 3rem;
    border-radius: var(--radius)
}

.wojo.dropdown.nowrap {
    white-space: nowrap
}

.wojo.dropdown a.item {
    position: relative;
    cursor: pointer;
    padding: 0.750rem 1.25rem;
    line-height: 1rem;
    border-radius: .5rem;
    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 {
    color: var(--primary-color);
    background-color: var(--grey-color-300)
}

.wojo.dropdown a.item.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    pointer-events: none
}

.wojo.dropdown .divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0;
    margin: 0.5rem 0
}

.wojo.dropdown .basic.divider {
    border-top: 1px solid var(--dark-color-shadow);
    height: 0;
    margin: 0
}

.wojo.dropdown .big.divider {
    margin: 1rem 0
}

.wojo.dropdown>.header {
    padding: .5rem 1.25rem;
    font-size: 1rem;
    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-wdropdown] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

[data-wdropdown]>.text {
    padding-right: .5rem
}

.wojo.dropdown a.item.disabled {
    pointer-events: none;
    opacity: .75
}

.wojo.dropdown.small a.item {
    padding: .5rem 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.message {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    padding: 1rem 1.5rem;
    background-color: var(--grey-color-100);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--grey-color-500);
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.wojo.message .heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem
}

.wojo.icon.message {
    display: flex;
    flex-flow: row wrap
}

.wojo.icon.message>.icon:not(.x),
.wojo.icon.message>.image {
    display: block;
    flex: 0 0 auto;
    margin-right: 1rem;
    align-self: center
}

.wojo.icon.align.top.message>.icon:not(.x),
.wojo.icon.align.top.message>.image {
    align-self: flex-start
}

.wojo.icon.message>.icon:not(.x) {
    width: auto
}

.wojo.icon.message>.content {
    display: block;
    flex: 1 1 auto
}

.wojo.message>.x.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: .750rem;
    right: .5rem;
    opacity: .7;
    transition: opacity .1s ease
}

.wojo.flex.message>.content {
    flex: 1 1 0;
    min-width: 0
}

.wojo.flex.message>.auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap
}

.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.info.message {
    background-color: var(--info-color);
    border: 1px solid var(--info-color);
    color: var(--info-color-inverted)
}

.wojo.alert.message {
    background-color: var(--alert-color);
    border: 1px solid var(--alert-color);
    color: var(--alert-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.info.inverted.message {
    background-color: var(--info-color-inverted);
    border: 1px solid var(--info-color);
    color: var(--info-color)
}

.wojo.alert.inverted.message {
    background-color: var(--alert-color-inverted);
    border: 1px solid var(--alert-color);
    color: var(--alert-color)
}

#wojo-overlay {
    position: fixed;
    width: auto;
    right: 1rem;
    top: 2rem;
    z-index: 5000
}

#wojo-overlay.bottom-left {
    bottom: 1rem;
    left: 1rem
}

#wojo-overlay.bottom-right {
    bottom: 1rem;
    right: 1rem
}

#wojo-overlay.top-left {
    top: 1.5rem;
    left: 1.5rem
}

#wojo-overlay.top-right {
    top: 1.5rem;
    right: 1.5rem
}

.wojo.notice {
    max-width: 100%;
    min-width: 300px;
    position: relative;
    border-radius: var(--radius);
    color: #fff;
    box-shadow: 0 4px 6px var(--shadow-color), 0 1px 3px var(--shadow-color)
}

.wojo.notice .content {
    padding: .5rem 1.25rem 1.25rem 1.25rem;
    margin-left: 2rem;
    font-size: .875rem;
    font-weight: 400
}

.wojo.notice .content .flag {
    margin-right: .5rem
}

.wojo.notice::before {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    position: absolute;
    border-radius: var(--radius);
    left: 1rem;
    top: -1.25rem;
    font-size: 1.25rem;
    font-family: 'WojoIcons';
    content: "\e954";
    background-color: var(--white-color);
    text-align: center;
    box-shadow: 0 10px 30px -12px var(--shadow-color), 0 4px 25px 0 var(--shadow-color), 0 8px 10px -5px var(--shadow-color);
    z-index: 3
}

.wojo.notice::after {
    font-family: 'WojoIcons';
    content: "\e955";
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    left: 1.75rem;
    top: -1.25rem;
    position: absolute;
    z-index: 3
}

.wojo.notice .wojo.progress,
.wojo.notice .wojo.progress.attached .bar {
    border-radius: var(--radius)
}

.wojo.notice h2 {
    color: inherit;
    font-size: 1rem;
    display: block;
    font-weight: 500;
    margin: 0;
    padding: 1rem 1rem 0 3.5rem
}

.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 .flag {
    margin-left: .5rem
}

.wojo.notice .item b {
    margin-right: .5rem
}

.wojo.notice .item {
    font-weight: 400
}

.wojo.notice.success {
    background-color: var(--positive-color);
    color: var(--positive-color-inverted)
}

.wojo.notice.success::before,
.wojo.notice.success::after {
    color: var(--positive-color)
}

.wojo.notice.info {
    background-color: var(--info-color);
    color: var(--info-color-inverted)
}

.wojo.notice.info::before,
.wojo.notice.info::after {
    color: var(--info-color)
}

.wojo.notice.alert {
    background-color: var(--alert-color);
    color: var(--alert-color-inverted)
}

.wojo.notice.alert::before,
.wojo.notice.alert::after {
    color: var(--alert-color)
}

.wojo.notice.error {
    background-color: var(--negative-color-hover);
    color: var(--negative-color-inverted)
}

.wojo.notice.error::before,
.wojo.notice.error::after {
    color: var(--negative-color)
}

.wojo.basic.message {
    padding: 0
}

.wojo.simple.message,
.wojo.simple.inverted.message {
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: none
}

.wojo.transparent.message {
    background-color: transparent
}

.wojo.attached.message {
    margin: 0 0 0 0
}

.wojo.top.attached.message {
    margin: 0 0 1rem 0
}

.wojo.bottom.attached.message {
    margin: 0 1rem 0 0
}

.wojo.small.message {
    font-size: .875rem
}

.wojo.message {
    font-size: 1rem
}

.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;
    align-items: center;
    min-height: calc(100% - (1.75rem * 2))
}

.wojo.modal .dialog>.content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--white-color);
    background-clip: padding-box;
    border-radius: 1rem;
    outline: 0
}

.wojo.modal .dialog>.content>.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--grey-color-500);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.wojo.modal .dialog>.content>.header>button {
    background: var(--grey-color-300);
    border: 0;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    border-radius: var(--radius);
    margin: 0;
    width: 2rem;
    height: 2rem;
    text-align: center
}

.wojo.modal .dialog>.content>.header h5 {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 600
}

.wojo.modal .dialog>.content>.header h5 span {
    margin: 0 .5rem;
    font-size: 1rem
}

.wojo.modal .dialog>.content>.body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem
}

.wojo.modal .dialog>.content>.footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--grey-color-500);
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem
}

.wojo.modal .dialog>.content>.footer> :not(:first-child) {
    margin-left: .250rem
}

.wojo.modal .dialog>.content>.footer> :not(:last-child) {
    margin-right: .250rem
}

.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:640px) {

    .wojo.small.modal .dialog,
    .wojo.modal .dialog,
    .wojo.medium.modal .dialog,
    .wojo.big.modal .dialog,
    .wojo.full.modal .dialog {
        width: 100%
    }
}

@media screen and (min-width:641px) and (max-width:768px) {

    .wojo.big.modal .dialog,
    .wojo.full.modal .dialog {
        width: 100%
    }
}

.wojo.comments {
    margin: 1.5rem 0
}

.wojo.comments .comment {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    position: relative;
    background-image: none;
    margin: 2rem 0 0;
    padding-left: 2rem
}

.wojo.comments .comment::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: .1rem;
    height: 100%;
    border: .1rem solid var(--grey-color-300)
}

.wojo.comments .comment:first-child {
    margin-top: 0
}

.wojo.comments .comment .comments {
    margin: 0 0 .5rem .5rem;
    padding: 1rem 0 1rem 1rem
}

.wojo.comments .comment .avatar {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
    width: 2.5rem
}

.wojo.comments .comment img.avatar,
.wojo.comments .comment .avatar img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.wojo.comments .comment>.content {
    flex: 0 1 100%;
    width: 100%;
    max-width: 100%
}

.wojo.comments .comment>.avatar~.content {
    margin-top: 1rem
}

.wojo.comments .comment .author {
    font-size: 1rem;
    font-weight: 500
}

.wojo.comments .comment a.author {
    cursor: pointer
}

.wojo.comments .comment a.author:hover {
    color: var(--primary-color-hover)
}

.wojo.comments .comment .metadata {
    display: inline-block;
    margin-left: .5rem;
    font-size: .875rem;
    vertical-align: middle
}

.wojo.comments .comment .metadata a.delete {
    margin-left: 1rem;
    vertical-align: middle
}

.wojo.comments .comment .metadata>* {
    display: inline-block;
    margin: 0 .5rem 0 0
}

.wojo.comments .comment .metadata> :last-child {
    margin-right: 0
}

.wojo.comments .comment .text:not(.wojo) {
    margin: .25rem 0 .5rem;
    font-size: 1rem;
    word-wrap: break-word;
    line-height: 1.3
}

.wojo.comments .comment .actions {
    font-size: .750rem;
    margin-top: 0
}

.wojo.comments .comment .actions a {
    cursor: pointer;
    font-weight: 600;
    font-size: .875rem
}

.wojo.comments .comment .actions a:last-child {
    margin-right: 0
}

.wojo.comments .comment .actions a.active,
.wojo.comments .comment .actions a:hover {
    color: var(--dark-color)
}

.wojo.threaded.comments .comment .comments {
    margin-left: .5rem
}

.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: 0;
    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;
    -webkit-transform: translateY(-50%);
    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: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white-color);
    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.tiny.progress {
    height: .25rem
}

.wojo.mini.progress {
    height: .5rem
}

.wojo.small.progress {
    height: 1rem
}

[data-tooltip] {
    position: relative;
    z-index: 10
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    bottom: calc(100% + 6px);
    pointer-events: none;
    transition: 0.1s;
    will-change: transform
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    padding: .5rem 1rem;
    min-width: 50px;
    width: max-content;
    border-radius: .250rem;
    font-size: .750rem;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    background-color: var(--white-color);
    color: var(--dark-color);
    text-align: center;
    white-space: pre-wrap;
    box-shadow: 0 5px 10px var(--shadow-color);
    transform: translate(-50%, calc(0px - 6px)) scale(0.5)
}

[data-tooltip]::after {
    content: '';
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: var(--white-color) transparent transparent transparent;
    transition-duration: 0s;
    transform: translateX(-50%) scaleY(0)
}

[data-tooltip]:hover::before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1
}

[data-tooltip]:hover::before {
    transform: translate(-50%, calc(0px - 6px))
}

[data-tooltip]:hover::after {
    transition-duration: 0.1s;
    transform: translateX(-50%) scaleY(1)
}

[data-position="left"]::before,
[data-position="left"]::after {
    left: auto;
    right: calc(100% + 6px);
    bottom: 50%
}

[data-position="left"]::before {
    transform: translate(calc(0px - 6px), 50%) scale(0.5)
}

[data-position="left"]:hover::before {
    transform: translate(calc(0px - 6px), 50%) scale(1)
}

[data-position="left"]::after {
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--white-color);
    transform-origin: left;
    transform: translateY(50%) scaleX(0)
}

[data-position="left"]:hover::after {
    transform: translateY(50%) scaleX(1)
}

[data-position="right"]::before,
[data-position="right"]::after {
    left: calc(100% + 6px);
    bottom: 50%
}

[data-position="right"]::before {
    transform: translate(6px, 50%) scale(0.5)
}

[data-position="right"]:hover::before {
    transform: translate(6px, 50%) scale(1)
}

[data-position="right"]::after {
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--white-color) transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0)
}

[data-position="right"]:hover::after {
    transform: translateY(50%) scaleX(1)
}

[data-position="bottom"]::before,
[data-position="bottom"]::after {
    top: calc(100% + 6px);
    bottom: auto
}

[data-position="bottom"]::before {
    transform: translate(-50%, 6px) scale(0.5)
}

[data-position="bottom"]:hover::before {
    transform: translate(-50%, 6px) scale(1)
}

[data-position="bottom"]::after {
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent var(--white-color) transparent;
    transform-origin: bottom
}

[data-tooltip][data-width="auto"]::after {
    width: auto;
    white-space: nowrap
}

.jqstooltip {
    background-color: var(--white-color);
    border-radius: .5rem;
    font-size: .750rem;
    max-width: 80px;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dark-color);
    visibility: hidden;
    text-align: left;
    white-space: nowrap;
    z-index: 10000;
    border: 1px solid var(--grey-color-500);
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.jqsfield {
    padding: .250rem;
    text-align: left
}

.morris-hover {
    position: absolute;
    z-index: 1000
}

.morris-hover.morris-default-style {
    background-color: var(--white-color);
    font-size: 0.875rem;
    text-align: center;
    min-width: min-content;
    z-index: 1000;
    line-height: 1.250em;
    padding: .5rem .750rem;
    border-radius: .5rem;
    border: 1px solid var(--grey-color-500);
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.morris-hover.morris-default-style .morris-hover-row-label {
    font-weight: 700;
    margin: .25rem 0;
    color: var(--dark-color)
}

.morris-hover.morris-default-style .morris-hover-point {
    white-space: nowrap;
    margin: .1rem 0
}

.text-size-tiny {
    font-size: 0.688rem
}

.text-size-mini {
    font-size: 0.750rem
}

.text-size-small {
    font-size: 0.875rem
}

.text-size-normal {
    font-size: 1rem
}

.text-size-medium {
    font-size: 1.25rem
}

.text-size-large {
    font-size: 1.625rem
}

.text-size-big {
    font-size: 2.250rem
}

.text-size-huge {
    font-size: 2.75rem
}

.text-size-massive {
    font-size: 3.250rem
}

.text-size-giant {
    font-size: clamp(3rem, 3vw + 1rem, 6rem)
}

.text-weight-200 {
    font-weight: 200
}

.text-weight-300 {
    font-weight: 300
}

.text-weight-400 {
    font-weight: 400
}

.text-weight-500 {
    font-weight: 500
}

.text-weight-600 {
    font-weight: 600
}

.text-weight-700 {
    font-weight: 700
}

.text-weight-800 {
    font-weight: 800
}

.text-weight-900 {
    font-weight: 900
}

.text-align-top {
    vertical-align: top
}

.text-align-bottom {
    vertical-align: bottom
}

.text-line-height {
    line-height: 1
}

.text-color-primary {
    color: var(--primary-color)
}

.text-color-primary-inverted {
    color: var(--primary-color-inverted)
}

.text-color-secondary {
    color: var(--secondary-color)
}

.text-color-secondary-inverted {
    color: var(--secondary-color-inverted)
}

.text-color-positive {
    color: var(--positive-color)
}

.text-color-positive-inverted {
    color: var(--positive-color-inverted)
}

.text-color-negative {
    color: var(--negative-color)
}

.text-color-negative-inverted {
    color: var(--negative-color-inverted)
}

.text-color-alert {
    color: var(--alert-color)
}

.text-color-alert-inverted {
    color: var(--alert-color-inverted)
}

.text-color-info {
    color: var(--info-color)
}

.text-color-info-inverted {
    color: var(--info-color-inverted)
}

.text-color-light {
    color: var(--light-color)
}

.text-color-white {
    color: var(--white-color)
}

.text-color-dark {
    color: var(--dark-color)
}

.text-color-grey {
    color: var(--grey-color)
}

.text-color-grey-300 {
    color: var(--grey-color-300)
}

.text-color-grey-500 {
    color: var(--grey-color-500)
}

.strike-text {
    text-decoration: line-through
}

.italic-text {
    font-style: italic
}

.underline-text {
    text-decoration: underline
}

.uppercase-text {
    text-transform: uppercase
}

.lowercase-text {
    text-transform: lowercase
}

.capitalize-text {
    text-transform: capitalize
}

.short-text {
    line-height: 1
}

.tall-text {
    line-height: 2
}

.dimmed-text {
    opacity: .75
}

.dimmed-text-more {
    opacity: .5
}

.wojo.border.radius {
    border-radius: 1rem
}

.wojo.outline {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px
}

.icon-text {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center
}

.icon-text>.icon,
.icon-text>.image,
.icon-text>.label {
    flex: 0 0 auto;
    max-width: 100%;
    margin-right: .5em
}

.icon-text.middle {
    display: flex;
    justify-content: center
}

.icon-text.right>.icon,
.icon-text.right>.image,
.icon-text.right>.label {
    margin-left: .5em;
    margin-right: auto
}

.bg-color-primary {
    background-color: var(--primary-color)
}

.bg-color-primary-active {
    background-color: var(--primary-color-active)
}

.bg-color-primary-inverted {
    background-color: var(--primary-color-inverted)
}

.bg-color-primary-gradient {
    background: linear-gradient(0deg, var(--primary-color-inverted) 0%, var(--primary-color) 100%)
}

.bg-color-secondary {
    background-color: var(--secondary-color)
}

.bg-color-secondary-active {
    background-color: var(--secondary-color-active)
}

.bg-color-secondary-inverted {
    background-color: var(--secondary-color-inverted)
}

.bg-color-secondary-gradient {
    background: linear-gradient(0deg, var(--secondary-color-inverted) 0%, var(--secondary-color) 100%)
}

.bg-color-positive {
    background-color: var(--positive-color)
}

.bg-color-positive-active {
    background-color: var(--positive-color-active)
}

.bg-color-positive-inverted {
    background-color: var(--positive-color-inverted)
}

.bg-color-negative {
    background-color: var(--negative-color)
}

.bg-color-negative-active {
    background-color: var(--negative-color-active)
}

.bg-color-negative-inverted {
    background-color: var(--negative-color-inverted)
}

.bg-color-info {
    background-color: var(--info-color)
}

.bg-color-info-inverted {
    background-color: var(--info-color-inverted)
}

.bg-color-alert {
    background-color: var(--alert-color)
}

.bg-color-alert-inverted {
    background-color: var(--alert-color-inverted)
}

.bg-color-light {
    background-color: var(--light-color)
}

.bg-color-dark {
    background-color: var(--dark-color)
}

.bg-color-grey-100 {
    background-color: var(--grey-color-100)
}

.bg-color-grey-300 {
    background-color: var(--grey-color-300)
}

.bg-color-grey-500 {
    background-color: var(--grey-color-500)
}

.fill-primary-color {
    fill: var(--primary-color)
}

.fill-secondary-color {
    fill: var(--secondary-color)
}

.fill-positive-color {
    fill: var(--positive-color)
}

.fill-negative-color {
    fill: var(--negative-color)
}

.boxed {
    border: 1px solid var(--grey-color-300);
    transition: 0.3s
}

.dashed {
    border: 0 !important;
    outline: var(--grey-color) dashed 2px;
    outline-offset: -2px
}

.dashed-primary {
    outline-color: var(--primary-color)
}

.dashed-secondary {
    outline-color: var(--secondary-color)
}

.dashed-positive {
    outline-color: var(--positive-color)
}

.dashed-negative {
    outline-color: var(--negative-color)
}

.dashed-info {
    outline-color: var(--info-color)
}

.dashed-alert {
    outline-color: var(--alert-color)
}

.shadow {
    box-shadow: 0 0 6rem 1px var(--shadow-color)
}

.shadow-soft {
    box-shadow: 0 0 4rem 1px var(--shadow-color)
}

.shadow-hard {
    box-shadow: 0 30px 60px -12px var(--shadow-color), 0 18px 36px -18px var(--shadow-color), 0 -12px 36px -8px var(--shadow-color)
}

.readonly {
    position: relative;
    cursor: not-allowed;
    pointer-events: none;
    text-shadow: none !important;
    color: transparent !important;
    transition: all 0s linear
}

.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
}

.highlight {
    background-color: var(--alert-color-inverted)
}

.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.button.draggable,
.wojo.label.draggable,
.draggable {
    cursor: grabbing
}

.border:not(.icon) {
    border-style: solid
}

.border-top {
    border-top: solid
}

.border-bottom {
    border-bottom-style: solid
}

.border-left {
    border-left: solid
}

.border-right {
    border-right: solid
}

.border-1 {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-3 {
    border-width: 3px
}

.border-4 {
    border-width: 4px
}

.border-5 {
    border-width: 5px
}

.rounded:not(.icon) {
    border-radius: var(--radius)
}

.rounded-top {
    border-radius: var(--radius) var(--radius) 0 0
}

.rounded-bottom {
    border-radius: 0 0 var(--radius) var(--radius)
}

.rounded-left {
    border-radius: var(--radius) 0 0 var(--radius)
}

.rounded-right {
    border-radius: 0 var(--radius) var(--radius) 0
}

.rounded-full {
    border-radius: 100%
}

.border-color-primary {
    border-color: var(--primary-color)
}

.border-color-primary-inverted {
    border-color: var(--primary-color-inverted)
}

.border-color-secondary {
    border-color: var(--secondary-color)
}

.border-color-secondary-inverted {
    border-color: var(--secondary-color-inverted)
}

.border-color-positive {
    border-color: var(--positive-color)
}

.border-color-positive-inverted {
    border-color: var(--positive-color-inverted)
}

.border-color-negative {
    border-color: var(--negative-color)
}

.border-color-negative-inverted {
    border-color: var(--negative-color-inverted)
}

.border-color-alert {
    border-color: var(--alert-color)
}

.border-color-alert-inverted {
    border-color: var(--alert-color-inverted)
}

.border-color-info {
    border-color: var(--info-color)
}

.border-color-info-inverted {
    border-color: var(--info-color-inverted)
}

.border-color-light {
    border-color: var(--light-color)
}

.border-color-dark {
    border-color: var(--dark-color)
}

.border-color-white {
    border-color: var(--white-color)
}

.border-color-light {
    border-color: var(--light-color)
}

.border-color-grey {
    border-color: var(--grey-color)
}

.border-color-grey-300 {
    border-color: var(--grey-color-300)
}

.border-color-grey-500 {
    border-color: var(--grey-color-500)
}

.bg-size-cover {
    background-size: cover
}

.bg-size-contain {
    background-size: contain
}

.bg-size-fit-x {
    background-size: 100% auto
}

.bg-size-fit-y {
    background-size: auto 100%
}

.bg-position-top-start {
    background-position: 0 0
}

.bg-position-top-center {
    background-position: 50% 0
}

.bg-position-top-end {
    background-position: 100% 0
}

.bg-position-center {
    background-position: 50% 50%
}

.bg-position-center-start {
    background-position: 0 50%
}

.bg-position-center-end {
    background-position: 100% 50%
}

.bg-position-bottom-start {
    background-position: 0 100%
}

.bg-position-bottom-center {
    background-position: 50% 100%
}

.bg-position-bottom-end {
    background-position: 100% 100%
}

.bg-fixed {
    background-attachment: fixed
}

.bg-repeat-none {
    background-repeat: no-repeat
}

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

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

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

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

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

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

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

.padding-right0 {
    padding-right: 0 !important
}

.padding-left0 {
    padding-left: 0 !important
}

.padding-top0 {
    padding-top: 0 !important
}

.padding-bottom0 {
    padding-bottom: 0 !important
}

.padding-right7 {
    padding-right: 7rem
}

.padding-left7 {
    padding-left: 7rem
}

.padding-top7 {
    padding-top: 7rem
}

.padding-bottom7 {
    padding-bottom: 7rem
}

.padding-right8 {
    padding-right: 8rem
}

.padding-left8 {
    padding-left: 8rem
}

.padding-top8 {
    padding-top: 8rem
}

.padding-bottom8 {
    padding-bottom: 8rem
}

.padding-mini {
    padding: calc(var(--padding) / 4)
}

.padding-mini-horizontal {
    padding: 0 calc(var(--padding) / 4)
}

.padding-mini-vertical {
    padding: calc(var(--padding) / 4) 0
}

.padding-mini-right {
    padding-right: calc(var(--padding) / 4)
}

.padding-mini-left {
    padding-left: calc(var(--padding) / 4)
}

.padding-mini-top {
    padding-top: calc(var(--padding) / 4)
}

.padding-mini-bottom {
    padding-bottom: calc(var(--padding) / 4)
}

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

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

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

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

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

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

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

.padding-medium {
    padding: calc(var(--padding) * 1.5)
}

.padding-medium-horizontal {
    padding: 0 calc(var(--padding) * 1.5)
}

.padding-medium-vertical {
    padding: calc(var(--padding) * 1.5) 0
}

.padding-medium-right {
    padding-right: calc(var(--padding) * 1.5)
}

.padding-medium-left {
    padding-left: calc(var(--padding) * 1.5)
}

.padding-medium-top {
    padding-top: calc(var(--padding) * 1.5)
}

.padding-medium-bottom {
    padding-bottom: calc(var(--padding) * 1.5)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.margin-auto {
    margin: 0 auto
}

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

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

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

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

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

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

.margin-right0 {
    margin-right: 0 !important
}

.margin-left0 {
    margin-left: 0 !important
}

.margin-top0 {
    margin-top: 0 !important
}

.margin-bottom0 {
    margin-bottom: 0 !important
}

.margin-right7 {
    margin-right: 7rem
}

.margin-left7 {
    margin-left: 7rem
}

.margin-top7 {
    margin-top: 7rem
}

.margin-bottom7 {
    margin-bottom: 7rem
}

.margin-right8 {
    margin-right: 8rem
}

.margin-left8 {
    margin-left: 8rem
}

.margin-top8 {
    margin-top: 8rem
}

.margin-bottom8 {
    margin-bottom: 8rem
}

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

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

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

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

.margin-top-5 {
    margin-top: calc(var(--padding) * -2.5)
}

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

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

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

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

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

.margin-right-5 {
    margin-right: calc(var(--padding) * -2.5)
}

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

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

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

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

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

.margin-left-5 {
    margin-left: calc(var(--padding) * -2.5)
}

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

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

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

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

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

.margin-bottom-5 {
    margin-bottom: calc(var(--padding) * -2.5)
}

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

.margin-mini {
    margin: calc(var(--padding) / 4)
}

.margin-mini-horizontal {
    margin: 0 calc(var(--padding) / 4)
}

.margin-mini-vertical {
    margin: calc(var(--padding) / 4) 0
}

.margin-mini-right {
    margin-right: calc(var(--padding) / 4)
}

.margin-mini-left {
    margin-left: calc(var(--padding) / 4)
}

.margin-mini-top {
    margin-top: calc(var(--padding) / 4)
}

.margin-mini-bottom {
    margin-bottom: calc(var(--padding) / 4)
}

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

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

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

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

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

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

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

.margin-medium {
    margin: calc(var(--padding) * 1.5)
}

.margin-medium-horizontal {
    margin: 0 calc(var(--padding) * 1.5)
}

.margin-medium-vertical {
    margin: calc(var(--padding) * 1.5) 0
}

.margin-medium-right {
    margin-right: calc(var(--padding) * 1.5)
}

.margin-medium-left {
    margin-left: calc(var(--padding) * 1.5)
}

.margin-medium-top {
    margin-top: calc(var(--padding) * 1.5)
}

.margin-medium-bottom {
    margin-bottom: calc(var(--padding) * 1.5)
}

.margin-large {
    margin: calc(var(--padding) * 2)
}

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

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

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

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

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

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

.margin-big {
    margin: calc(var(--padding) * 2.5)
}

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

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

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

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

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

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

.margin-huge {
    margin: calc(var(--padding) * 3)
}

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

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

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

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

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

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

.wojo.tabs .nav,
.wojo.navs .nav {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: .5rem;
    border-radius: var(--radius);
    background-color: var(--grey-color-300);
    list-style: none
}

.wojo.tabs .nav li,
.wojo.navs .nav li {
    margin-right: 1rem
}

.wojo.lang.tabs .nav {
    display: flex;
    margin-bottom: 1.5rem;
    background-color: var(--grey-color-100)
}

.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: 0;
    padding: .5rem 1.75rem;
    border-radius: var(--radius);
    display: flex;
    background: var(--grey-color-500);
    flex-flow: row wrap;
    font-weight: 500;
    color: var(--dark-color)
}

.wojo.lang.tabs .nav li a {
    padding: .750rem 2.5rem
}

.wojo.tabs .nav li a .icon,
.wojo.tabs .nav li a span,
.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%;
    -ms-grid-row-align: center;
    align-self: center;
    margin-right: .5rem
}

.wojo.tabs .nav li a span {
    margin-right: 0;
    margin-left: 1rem;
    display: inline-flex
}

.wojo.tabs .nav li a span .icon {
    margin: 0
}

.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 {
    color: var(--primary-color)
}

.wojo.tabs .nav li.active a,
.wojo.navs .nav li.active a {
    background-color: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0 .1875rem .375rem 0 var(--shadow-color)
}

.wojo.tabs .tab {
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 1rem;
    padding: 2rem;
    background: var(--white-color);
    border: 1px solid var(--grey-color-500)
}

.wojo.lang.tabs .tab {
    margin-top: 0;
    box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color)
}

.wojo.lang.tabs .tab.spaced {
    margin-bottom: 2rem
}

.wojo.lang.tabs .tab.compact {
    border-radius: 0;
    padding: 0;
    border: 0
}

.wojo.tabs .simple.tab {
    border: 0
}

.wojo.tabs .basic.tab {
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 0;
    padding: 0;
    background: none;
    border: 0
}

.wojo.fluid.tabs .nav {
    display: flex
}

.wojo.fluid.tabs .nav li,
.wojo.fluid.navs .nav li {
    flex: 1 1 0;
    min-width: 0
}

.wojo.small.tabs .nav li a,
.wojo.small.navs .nav li a {
    padding: .5rem 1rem
}

.wojo.accordion section {
    border-radius: var(--radius);
    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: var(--radius) var(--radius) 0 0
}

.wojo.accordion section h6.summary a::before {
    font-family: "WojoIcons";
    position: absolute;
    content: "\e9f5";
    top: 50%;
    right: 2rem;
    -webkit-transform: translateY(-50%);
    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: "\e9f2"
}

.wojo.accordion section.active {
    border: 1px solid var(--primary-color)
}

.wojo.accordion section .details {
    padding: 2rem
}

.wojo.breadcrumb {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center;
    font-weight: 400;
    color: var(--white-color);
    opacity: .85;
    text-transform: lowercase
}

.wojo.breadcrumb .divider {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 .750rem;
    line-height: 1;
    color: var(--light-color)
}

.wojo.breadcrumb .section {
    color: var(--white-color);
    opacity: .5
}

.wojo.breadcrumb .section:hover {
    opacity: 1
}

.wojo.breadcrumb .active.section {
    opacity: 1;
    font-weight: 600
}

.wojo.breadcrumb .icon {}

.wojo.small.breadcrumb {
    font-size: 0.875rem
}

.wojo.sticky {
    position: static;
    transition: none;
    z-index: 2
}

.wojo.sticky.bound {
    position: absolute;
    left: auto;
    right: auto
}

.wojo.sticky.fixed {
    position: fixed;
    left: auto;
    right: auto
}

.wojo.sticky.bound.top,
.wojo.sticky.fixed.top {
    top: 0;
    bottom: auto
}

.wojo.sticky.bound.bottom,
.wojo.sticky.fixed.bottom {
    top: auto;
    bottom: 0
}

.wojo.native.sticky {
    position: sticky;
    top: 100px
}

.wojo.pagination {
    display: inline-flex;
    flex-flow: row wrap;
    align-items: center
}

.wojo.pagination .item {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1rem;
    padding: .75rem 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--dark-color)
}

.wojo.pagination .item.active {
    position: relative;
    color: var(--primary-color);
    cursor: auto
}

.wojo.pagination .item.active::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: .250rem;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background-color: var(--primary-color);
    border-radius: 1rem
}

.wojo.pagination .item:not(.active):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-500);
    width: 50%;
    margin: 1rem auto
}

.wojo.wide.divider {
    border-top: 3px solid var(--grey-color-500)
}

.wojo.very.wide.divider {
    border-top: 5px solid var(--grey-color-500)
}

.wojo.relaxed.divider {
    margin: 1rem 0
}

.wojo.very.relaxed.divider {
    margin: 1.5rem 0
}

.wojo.inverted.divider {
    border-color: var(--light-color-shadow)
}

.wojo.white.divider {
    border-color: var(--white-color)
}

.wojo.backgrounds {
    position: relative;
    z-index: -1
}

.wojo.backgrounds::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    opacity: .5
}

.wojo.backgrounds .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    padding: 2rem;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2
}

.wojo.lightbox.overlay *,
.wojo.lightbox.overlay *:before,
.wojo.lightbox.overlay *:after {
    -webkit-backface-visibility: hidden;
    box-sizing: border-box
}

.wojo.lightbox.overlay * {
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.wojo.lightbox.overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: var(--dark-color);
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999999
}

.wojo.lightbox .header {
    position: fixed;
    z-index: 101;
    top: 0;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-end
}

.wojo.lightbox .header .title,
.wojo.lightbox .header .close,
.wojo.lightbox .header .counter {
    flex: 1 1 0;
    min-width: 0;
    padding: .5rem;
    color: var(--light-color);
    opacity: .55;
    transition: all .35s ease
}

.wojo.lightbox .header .close,
.wojo.lightbox .header .counter {
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap
}

.wojo.lightbox .header .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .750rem;
    font-weight: 400;
    text-align: center
}

.wojo.lightbox .header .close {
    padding: .5rem 2rem 0.5rem 1rem;
    cursor: pointer
}

.wojo.lightbox .header .close:hover {
    opacity: .95;
    color: var(--primary-color)
}

.wojo.lightbox .header .counter {
    font-size: .875rem
}

.wojo.lightbox .next,
.wojo.lightbox .prev {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;
    line-height: 1;
    color: var(--light-color);
    opacity: .5;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 99
}

.wojo.lightbox .next:hover,
.wojo.lightbox .prev:hover {
    opacity: 1
}

.wojo.lightbox .next .icon,
.wojo.lightbox .prev .icon {
    font-size: 2.5rem
}

.wojo.lightbox .prev {
    left: 1rem
}

.wojo.lightbox .next {
    right: 1rem
}

.wojo.lightbox .inline {
    max-width: 1200px;
    width: 80%;
    height: 70vh;
    padding: 1rem;
    background: var(--white-color);
    margin: 0 auto;
    overflow: auto;
    text-align: left
}

.wojo.lightbox iframe {
    border: none;
    max-width: 1200px;
    width: 100%;
    height: 70vh
}

.wojo.lightbox iframe.is_video {}

.wojo.lightbox.open {
    overflow: hidden
}

.wojo.lightbox .container {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: hidden;
    overflow-y: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
    width: 100%;
    height: 100%
}

.wojo.lightbox .container img {
    max-width: 100%;
    height: auto
}

.wojo.lightbox .container .content {
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 3rem 5%
}

.wojo.lightbox .target {
    box-shadow: 0 0 1.125em rgba(0, 0, 0, .5);
    max-width: 100%;
    background: var(--white-color);
    padding: 0;
    text-align: initial
}

.wojo.lightbox img.target {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.wojo.lightbox .container .content.swipe-left {
    -webkit-animation-name: driveOutRight;
    animation-name: driveOutRight;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

.wojo.lightbox .container .content.swipe-right {
    -webkit-animation-name: driveOutLeft;
    animation-name: driveOutLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s
}

.wojo.lightbox .done {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.animated {
    -webkit-transition: margin 300ms ease-out;
    transition: margin 300ms ease-out
}

.animate-in {
    opacity: 1
}

.animate-out {
    opacity: 0
}

.wojo.loading.form,
.wojo.loading.segment,
.wojo.loading.card,
.wojo.lightbox .preloader {
    position: relative;
    cursor: default;
    pointer-events: none
}

.wojo.loading.form::before,
.wojo.loading.segment::before,
.wojo.loading.card::before,
.wojo.lightbox .preloader::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    z-index: 10
}

.wojo.loading.form::after,
.wojo.loading.segment::after,
.wojo.loading.card::after,
.wojo.lightbox .preloader::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -1.5em 0 0 -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: 0 0 0 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);
    }
}

@media screen and (min-width:769px) and (max-width:1199px) {
    .margin-tablet {
        margin: var(--padding);
    }

    .margin-horizontal-tablet {
        margin: 0 var(--padding);
    }

    .margin-vertical-tablet {
        margin: var(--padding) 0;
    }

    .margin-right-tablet {
        margin-right: var(--padding);
    }

    .margin-left-tablet {
        margin-left: var(--padding);
    }

    .margin-top-tablet {
        margin-top: var(--padding);
    }

    .margin-bottom-tablet {
        margin-bottom: var(--padding);
    }

    .margin-right0-tablet {
        margin-right: 0
    }

    .margin-left0-tablet {
        margin-left: 0;
    }

    .margin-top0-tablet {
        margin-top: 0;
    }

    .margin-bottom0-tablet {
        margin-bottom: 0;
    }

    .margin-right7-tablet {
        margin-right: 7rem;
    }

    .margin-left7-tablet {
        margin-left: 7rem;
    }

    .margin-top7-tablet {
        margin-top: 7rem;
    }

    .margin-bottom7-tablet {
        margin-bottom: 7rem;
    }

    .margin-right8-tablet {
        margin-right: 8rem;
    }

    .margin-left8-tablet {
        margin-left: 8rem;
    }

    .margin-top8-tablet {
        margin-top: 8rem;
    }

    .margin-bottom8-tablet {
        margin-bottom: 8rem;
    }

    .margin-top-1-tablet {
        margin-top: calc(var(--padding) / -2);
    }

    .margin-top-2-tablet {
        margin-top: calc(var(--padding) / -1);
    }

    .margin-top-3-tablet {
        margin-top: calc(var(--padding) * -1.5);
    }

    .margin-top-4-tablet {
        margin-top: calc(var(--padding) * -2);
    }

    .margin-top-5-tablet {
        margin-top: calc(var(--padding) * -2.5);
    }

    .margin-top-6-tablet {
        margin-top: calc(var(--padding) * -3);
    }

    .margin-right-1-tablet {
        margin-right: calc(var(--padding) / -2);
    }

    .margin-right-2-tablet {
        margin-right: calc(var(--padding) / -1);
    }

    .margin-right-3-tablet {
        margin-right: calc(var(--padding) * -1.5);
    }

    .margin-right-4-tablet {
        margin-right: calc(var(--padding) * -2);
    }

    .margin-right-5-tablet {
        margin-right: calc(var(--padding) * -2.5);
    }

    .margin-right-6-tablet {
        margin-right: calc(var(--padding) * -3);
    }

    .margin-left-1-tablet {
        margin-left: calc(var(--padding) / -2);
    }

    .margin-left-2-tablet {
        margin-left: calc(var(--padding) / -1);
    }

    .margin-left-3-tablet {
        margin-left: calc(var(--padding) * -1.5);
    }

    .margin-left-4-tablet {
        margin-left: calc(var(--padding) * -2);
    }

    .margin-left-5-tablet {
        margin-left: calc(var(--padding) * -2.5);
    }

    .margin-left-6-tablet {
        margin-left: calc(var(--padding) * -3);
    }

    .margin-bottom-1-tablet {
        margin-bottom: calc(var(--padding) / -2);
    }

    .margin-bottom-2-tablet {
        margin-bottom: calc(var(--padding) / -1);
    }

    .margin-bottom-3-tablet {
        margin-bottom: calc(var(--padding) * -1.5);
    }

    .margin-bottom-4-tablet {
        margin-bottom: calc(var(--padding) * -2);
    }

    .margin-bottom-5-tablet {
        margin-bottom: calc(var(--padding) * -2.5);
    }

    .margin-bottom-6-tablet {
        margin-bottom: calc(var(--padding) * -3);
    }

    .margin-mini-tablet {
        margin: calc(var(--padding) / 4);
    }

    .margin-mini-horizontal-tablet {
        margin: 0 calc(var(--padding) / 4);
    }

    .margin-mini-vertical-tablet {
        margin: calc(var(--padding) / 4) 0;
    }

    .margin-mini-right-tablet {
        margin-right: calc(var(--padding) / 4);
    }

    .margin-mini-left-tablet {
        margin-left: calc(var(--padding) / 4);
    }

    .margin-mini-top-tablet {
        margin-top: calc(var(--padding) / 4);
    }

    .margin-mini-bottom-tablet {
        margin-bottom: calc(var(--padding) / 4);
    }

    .margin-small-tablet {
        margin: calc(var(--padding) / 2);
    }

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

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

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

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

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

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

    .margin-medium-tablet {
        margin: calc(var(--padding) * 1.5);
    }

    .margin-medium-horizontal-tablet {
        margin: 0 calc(var(--padding) * 1.5);
    }

    .margin-medium-vertical-tablet {
        margin: calc(var(--padding) * 1.5) 0;
    }

    .margin-medium-right-tablet {
        margin-right: calc(var(--padding) * 1.5);
    }

    .margin-medium-left-tablet {
        margin-left: calc(var(--padding) * 1.5);
    }

    .margin-medium-top-tablet {
        margin-top: calc(var(--padding) * 1.5);
    }

    .margin-medium-bottom-tablet {
        margin-bottom: calc(var(--padding) * 1.5);
    }

    .margin-large-tablet {
        margin: calc(var(--padding) * 2);
    }

    .margin-large-horizontal-tablet {
        margin: 0 calc(var(--padding) * 2);
    }

    .margin-large-vertical-tablet {
        margin: calc(var(--padding) * 2) 0;
    }

    .margin-large-right-tablet {
        margin-right: calc(var(--padding) * 2);
    }

    .margin-large-left-tablet {
        margin-left: calc(var(--padding) * 2);
    }

    .margin-large-top-tablet {
        margin-top: calc(var(--padding) * 2);
    }

    .margin-large-bottom-tablet {
        margin-bottom: calc(var(--padding) * 2);
    }

    .margin-big-tablet {
        margin: calc(var(--padding) * 2.5);
    }

    .margin-big-horizontal-tablet {
        margin: 0 calc(var(--padding) * 2.5);
    }

    .margin-big-vertical-tablet {
        margin: calc(var(--padding) * 2.5) 0;
    }

    .margin-big-right-tablet {
        margin-right: calc(var(--padding) * 2.5);
    }

    .margin-big-left-tablet {
        margin-left: calc(var(--padding) * 2.5);
    }

    .margin-big-top-tablet {
        margin-top: calc(var(--padding) * 2.5);
    }

    .margin-big-bottom-tablet {
        margin-bottom: calc(var(--padding) * 2.5);
    }

    .margin-huge-tablet {
        margin: calc(var(--padding) * 3);
    }

    .margin-huge-horizontal-tablet {
        margin: 0 calc(var(--padding) * 3);
    }

    .margin-huge-vertical-tablet {
        margin: calc(var(--padding) * 3) 0;
    }

    .margin-huge-right-tablet {
        margin-right: calc(var(--padding) * 3);
    }

    .margin-huge-left-tablet {
        margin-left: calc(var(--padding) * 3);
    }

    .margin-huge-top-tablet {
        margin-top: calc(var(--padding) * 3);
    }

    .margin-huge-bottom-tablet {
        margin-bottom: calc(var(--padding) * 3);
    }

    .padding-tablet {
        padding: var(--padding);
    }

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

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

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

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

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

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

    .padding-right0-tablet {
        padding-right: 0
    }

    .padding-left0-tablet {
        padding-left: 0;
    }

    .padding-top0-tablet {
        padding-top: 0;
    }

    .padding-bottom0-tablet {
        padding-bottom: 0;
    }

    .padding-right7-tablet {
        padding-right: 7rem;
    }

    .padding-left7-tablet {
        padding-left: 7rem;
    }

    .padding-top7-tablet {
        padding-top: 7rem;
    }

    .padding-bottom7-tablet {
        padding-bottom: 7rem;
    }

    .padding-right8-tablet {
        padding-right: 8rem;
    }

    .padding-left8-tablet {
        padding-left: 8rem;
    }

    .padding-top8-tablet {
        padding-top: 8rem;
    }

    .padding-bottom8-tablet {
        padding-bottom: 8rem;
    }

    .padding-mini-tablet {
        padding: calc(var(--padding) / 4);
    }

    .padding-mini-horizontal-tablet {
        padding: 0 calc(var(--padding) / 4);
    }

    .padding-mini-vertical-tablet {
        padding: calc(var(--padding) / 4) 0;
    }

    .padding-mini-right-tablet {
        padding-right: calc(var(--padding) / 4);
    }

    .padding-mini-left-tablet {
        padding-left: calc(var(--padding) / 4);
    }

    .padding-mini-top-tablet {
        padding-top: calc(var(--padding) / 4);
    }

    .padding-mini-bottom-tablet {
        padding-bottom: calc(var(--padding) / 4);
    }

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

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

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

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

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

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

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

    .padding-medium-tablet {
        padding: calc(var(--padding) * 1.5);
    }

    .padding-medium-horizontal-tablet {
        padding: 0 calc(var(--padding) * 1.5);
    }

    .padding-medium-vertical-tablet {
        padding: calc(var(--padding) * 1.5) 0;
    }

    .padding-medium-right-tablet {
        padding-right: calc(var(--padding) * 1.5);
    }

    .padding-medium-left-tablet {
        padding-left: calc(var(--padding) * 1.5);
    }

    .padding-medium-top-tablet {
        padding-top: calc(var(--padding) * 1.5);
    }

    .padding-medium-bottom-tablet {
        padding-bottom: calc(var(--padding) * 1.5);
    }

    .padding-large-tablet {
        padding: calc(var(--padding) * 2);
    }

    .padding-large-horizontal-tablet {
        padding: 0 calc(var(--padding) * 2);
    }

    .padding-large-vertical-tablet {
        padding: calc(var(--padding) * 2) 0;
    }

    .padding-large-right-tablet {
        padding-right: calc(var(--padding) * 2);
    }

    .padding-large-left-tablet {
        padding-left: calc(var(--padding) * 2);
    }

    .padding-large-top-tablet {
        padding-top: calc(var(--padding) * 2);
    }

    .padding-large-bottom-tablet {
        padding-bottom: calc(var(--padding) * 2);
    }

    .padding-big-tablet {
        padding: calc(var(--padding) * 2.5);
    }

    .padding-big-horizontal-tablet {
        padding: 0 calc(var(--padding) * 2.5);
    }

    .padding-big-vertical-tablet {
        padding: calc(var(--padding) * 2.5) 0;
    }

    .padding-big-right-tablet {
        padding-right: calc(var(--padding) * 2.5);
    }

    .padding-big-left-tablet {
        padding-left: calc(var(--padding) * 2.5);
    }

    .padding-big-top-tablet {
        padding-top: calc(var(--padding) * 2.5);
    }

    .padding-big-bottom-tablet {
        padding-bottom: calc(var(--padding) * 2.5);
    }

    .padding-huge-tablet {
        padding: calc(var(--padding) * 3);
    }

    .padding-huge-horizontal-tablet {
        padding: 0 calc(var(--padding) * 3);
    }

    .padding-huge-vertical-tablet {
        padding: calc(var(--padding) * 3) 0;
    }

    .padding-huge-right-tablet {
        padding-right: calc(var(--padding) * 3);
    }

    .padding-huge-left-tablet {
        padding-left: calc(var(--padding) * 3);
    }

    .padding-huge-top-tablet {
        padding-top: calc(var(--padding) * 3);
    }

    .padding-huge-bottom-tablet {
        padding-bottom: calc(var(--padding) * 3);
    }
}

@media screen and (max-width:768px) {

    .wojo.tabs .nav,
    .wojo.navs .nav {
        display: flex;
        flex-direction: column;
    }

    .wojo.tabs .nav li,
    .wojo.navs .nav li {
        margin-right: 0
    }

    .wojo.lang.tabs .nav {
        top: 0;
    }

    .wojo.lightbox .container .content {
        padding: 0 3rem;
    }

    .wojo.lightbox .inline {
        width: 100%;
    }

    .margin-mobile {
        margin: var(--padding);
    }

    .margin-horizontal-mobile {
        margin: 0 var(--padding);
    }

    .margin-vertical-mobile {
        margin: var(--padding) 0;
    }

    .margin-right-mobile {
        margin-right: var(--padding);
    }

    .margin-left-mobile {
        margin-left: var(--padding);
    }

    .margin-top-mobile {
        margin-top: var(--padding);
    }

    .margin-bottom-mobile {
        margin-bottom: var(--padding);
    }

    .margin-right0-mobile {
        margin-right: 0
    }

    .margin-left0-mobile {
        margin-left: 0;
    }

    .margin-top0-mobile {
        margin-top: 0;
    }

    .margin-bottom0-mobile {
        margin-bottom: 0;
    }

    .margin-right7-mobile {
        margin-right: 7rem;
    }

    .margin-left7-mobile {
        margin-left: 7rem;
    }

    .margin-top7-mobile {
        margin-top: 7rem;
    }

    .margin-bottom7-mobile {
        margin-bottom: 7rem;
    }

    .margin-right8-mobile {
        margin-right: 8rem;
    }

    .margin-left8-mobile {
        margin-left: 8rem;
    }

    .margin-top8-mobile {
        margin-top: 8rem;
    }

    .margin-bottom8-mobile {
        margin-bottom: 8rem;
    }

    .margin-top-1-mobile {
        margin-top: calc(var(--padding) / -2);
    }

    .margin-top-2-mobile {
        margin-top: calc(var(--padding) / -1);
    }

    .margin-top-3-mobile {
        margin-top: calc(var(--padding) * -1.5);
    }

    .margin-top-4-mobile {
        margin-top: calc(var(--padding) * -2);
    }

    .margin-top-5-mobile {
        margin-top: calc(var(--padding) * -2.5);
    }

    .margin-top-6-mobile {
        margin-top: calc(var(--padding) * -3);
    }

    .margin-right-1-mobile {
        margin-right: calc(var(--padding) / -2);
    }

    .margin-right-2-mobile {
        margin-right: calc(var(--padding) / -1);
    }

    .margin-right-3-mobile {
        margin-right: calc(var(--padding) * -1.5);
    }

    .margin-right-4-mobile {
        margin-right: calc(var(--padding) * -2);
    }

    .margin-right-5-mobile {
        margin-right: calc(var(--padding) * -2.5);
    }

    .margin-right-6-mobile {
        margin-right: calc(var(--padding) * -3);
    }

    .margin-left-1-mobile {
        margin-left: calc(var(--padding) / -2);
    }

    .margin-left-2-mobile {
        margin-left: calc(var(--padding) / -1);
    }

    .margin-left-3-mobile {
        margin-left: calc(var(--padding) * -1.5);
    }

    .margin-left-4-mobile {
        margin-left: calc(var(--padding) * -2);
    }

    .margin-left-5-mobile {
        margin-left: calc(var(--padding) * -2.5);
    }

    .margin-left-6-mobile {
        margin-left: calc(var(--padding) * -3);
    }

    .margin-bottom-1-mobile {
        margin-bottom: calc(var(--padding) / -2);
    }

    .margin-bottom-2-mobile {
        margin-bottom: calc(var(--padding) / -1);
    }

    .margin-bottom-3-mobile {
        margin-bottom: calc(var(--padding) * -1.5);
    }

    .margin-bottom-4-mobile {
        margin-bottom: calc(var(--padding) * -2);
    }

    .margin-bottom-5-mobile {
        margin-bottom: calc(var(--padding) * -2.5);
    }

    .margin-bottom-6-mobile {
        margin-bottom: calc(var(--padding) * -3);
    }

    .margin-mini-mobile {
        margin: calc(var(--padding) / 4);
    }

    .margin-mini-horizontal-mobile {
        margin: 0 calc(var(--padding) / 4);
    }

    .margin-mini-vertical-mobile {
        margin: calc(var(--padding) / 4) 0;
    }

    .margin-mini-right-mobile {
        margin-right: calc(var(--padding) / 4);
    }

    .margin-mini-left-mobile {
        margin-left: calc(var(--padding) / 4);
    }

    .margin-mini-top-mobile {
        margin-top: calc(var(--padding) / 4);
    }

    .margin-mini-bottom-mobile {
        margin-bottom: calc(var(--padding) / 4);
    }

    .margin-small-mobile {
        margin: calc(var(--padding) / 2);
    }

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

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

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

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

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

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

    .margin-medium-mobile {
        margin: calc(var(--padding) * 1.5);
    }

    .margin-medium-horizontal-mobile {
        margin: 0 calc(var(--padding) * 1.5);
    }

    .margin-medium-vertical-mobile {
        margin: calc(var(--padding) * 1.5) 0;
    }

    .margin-medium-right-mobile {
        margin-right: calc(var(--padding) * 1.5);
    }

    .margin-medium-left-mobile {
        margin-left: calc(var(--padding) * 1.5);
    }

    .margin-medium-top-mobile {
        margin-top: calc(var(--padding) * 1.5);
    }

    .margin-medium-bottom-mobile {
        margin-bottom: calc(var(--padding) * 1.5);
    }

    .margin-large-mobile {
        margin: calc(var(--padding) * 2);
    }

    .margin-large-horizontal-mobile {
        margin: 0 calc(var(--padding) * 2);
    }

    .margin-large-vertical-mobile {
        margin: calc(var(--padding) * 2) 0;
    }

    .margin-large-right-mobile {
        margin-right: calc(var(--padding) * 2);
    }

    .margin-large-left-mobile {
        margin-left: calc(var(--padding) * 2);
    }

    .margin-large-top-mobile {
        margin-top: calc(var(--padding) * 2);
    }

    .margin-large-bottom-mobile {
        margin-bottom: calc(var(--padding) * 2);
    }

    .margin-big-mobile {
        margin: calc(var(--padding) * 2.5);
    }

    .margin-big-horizontal-mobile {
        margin: 0 calc(var(--padding) * 2.5);
    }

    .margin-big-vertical-mobile {
        margin: calc(var(--padding) * 2.5) 0;
    }

    .margin-big-right-mobile {
        margin-right: calc(var(--padding) * 2.5);
    }

    .margin-big-left-mobile {
        margin-left: calc(var(--padding) * 2.5);
    }

    .margin-big-top-mobile {
        margin-top: calc(var(--padding) * 2.5);
    }

    .margin-big-bottom-mobile {
        margin-bottom: calc(var(--padding) * 2.5);
    }

    .margin-huge-mobile {
        margin: calc(var(--padding) * 3);
    }

    .margin-huge-horizontal-mobile {
        margin: 0 calc(var(--padding) * 3);
    }

    .margin-huge-vertical-mobile {
        margin: calc(var(--padding) * 3) 0;
    }

    .margin-huge-right-mobile {
        margin-right: calc(var(--padding) * 3);
    }

    .margin-huge-left-mobile {
        margin-left: calc(var(--padding) * 3);
    }

    .margin-huge-top-mobile {
        margin-top: calc(var(--padding) * 3);
    }

    .margin-huge-bottom-mobile {
        margin-bottom: calc(var(--padding) * 3);
    }

    .padding-mobile {
        padding: var(--padding);
    }

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

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

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

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

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

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

    .padding-right0-mobile {
        padding-right: 0
    }

    .padding-left0-mobile {
        padding-left: 0;
    }

    .padding-top0-mobile {
        padding-top: 0;
    }

    .padding-bottom0-mobile {
        padding-bottom: 0;
    }

    .padding-right7-mobile {
        padding-right: 7rem;
    }

    .padding-left7-mobile {
        padding-left: 7rem;
    }

    .padding-top7-mobile {
        padding-top: 7rem;
    }

    .padding-bottom7-mobile {
        padding-bottom: 7rem;
    }

    .padding-right8-mobile {
        padding-right: 8rem;
    }

    .padding-left8-mobile {
        padding-left: 8rem;
    }

    .padding-top8-mobile {
        padding-top: 8rem;
    }

    .padding-bottom8-mobile {
        padding-bottom: 8rem;
    }

    .padding-mini-mobile {
        padding: calc(var(--padding) / 4);
    }

    .padding-mini-horizontal-mobile {
        padding: 0 calc(var(--padding) / 4);
    }

    .padding-mini-vertical-mobile {
        padding: calc(var(--padding) / 4) 0;
    }

    .padding-mini-right-mobile {
        padding-right: calc(var(--padding) / 4);
    }

    .padding-mini-left-mobile {
        padding-left: calc(var(--padding) / 4);
    }

    .padding-mini-top-mobile {
        padding-top: calc(var(--padding) / 4);
    }

    .padding-mini-bottom-mobile {
        padding-bottom: calc(var(--padding) / 4);
    }

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

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

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

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

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

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

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

    .padding-medium-mobile {
        padding: calc(var(--padding) * 1.5);
    }

    .padding-medium-horizontal-mobile {
        padding: 0 calc(var(--padding) * 1.5);
    }

    .padding-medium-vertical-mobile {
        padding: calc(var(--padding) * 1.5) 0;
    }

    .padding-medium-right-mobile {
        padding-right: calc(var(--padding) * 1.5);
    }

    .padding-medium-left-mobile {
        padding-left: calc(var(--padding) * 1.5);
    }

    .padding-medium-top-mobile {
        padding-top: calc(var(--padding) * 1.5);
    }

    .padding-medium-bottom-mobile {
        padding-bottom: calc(var(--padding) * 1.5);
    }

    .padding-large-mobile {
        padding: calc(var(--padding) * 2);
    }

    .padding-large-horizontal-mobile {
        padding: 0 calc(var(--padding) * 2);
    }

    .padding-large-vertical-mobile {
        padding: calc(var(--padding) * 2) 0;
    }

    .padding-large-right-mobile {
        padding-right: calc(var(--padding) * 2);
    }

    .padding-large-left-mobile {
        padding-left: calc(var(--padding) * 2);
    }

    .padding-large-top-mobile {
        padding-top: calc(var(--padding) * 2);
    }

    .padding-large-bottom-mobile {
        padding-bottom: calc(var(--padding) * 2);
    }

    .padding-big-mobile {
        padding: calc(var(--padding) * 2.5);
    }

    .padding-big-horizontal-mobile {
        padding: 0 calc(var(--padding) * 2.5);
    }

    .padding-big-vertical-mobile {
        padding: calc(var(--padding) * 2.5) 0;
    }

    .padding-big-right-mobile {
        padding-right: calc(var(--padding) * 2.5);
    }

    .padding-big-left-mobile {
        padding-left: calc(var(--padding) * 2.5);
    }

    .padding-big-top-mobile {
        padding-top: calc(var(--padding) * 2.5);
    }

    .padding-big-bottom-mobile {
        padding-bottom: calc(var(--padding) * 2.5);
    }

    .padding-huge-mobile {
        padding: calc(var(--padding) * 3);
    }

    .padding-huge-horizontal-mobile {
        padding: 0 calc(var(--padding) * 3);
    }

    .padding-huge-vertical-mobile {
        padding: calc(var(--padding) * 3) 0;
    }

    .padding-huge-right-mobile {
        padding-right: calc(var(--padding) * 3);
    }

    .padding-huge-left-mobile {
        padding-left: calc(var(--padding) * 3);
    }

    .padding-huge-top-mobile {
        padding-top: calc(var(--padding) * 3);
    }

    .padding-huge-bottom-mobile {
        padding-bottom: calc(var(--padding) * 3);
    }
}

@media screen and (max-width:640px) {
    .margin-phone {
        margin: var(--padding);
    }

    .margin-horizontal-phone {
        margin: 0 var(--padding);
    }

    .margin-vertical-phone {
        margin: var(--padding) 0;
    }

    .margin-right-phone {
        margin-right: var(--padding);
    }

    .margin-left-phone {
        margin-left: var(--padding);
    }

    .margin-top-phone {
        margin-top: var(--padding);
    }

    .margin-bottom-phone {
        margin-bottom: var(--padding);
    }

    .margin-right0-phone {
        margin-right: 0
    }

    .margin-left0-phone {
        margin-left: 0;
    }

    .margin-top0-phone {
        margin-top: 0;
    }

    .margin-bottom0-phone {
        margin-bottom: 0;
    }

    .margin-right7-phone {
        margin-right: 7rem;
    }

    .margin-left7-phone {
        margin-left: 7rem;
    }

    .margin-top7-phone {
        margin-top: 7rem;
    }

    .margin-bottom7-phone {
        margin-bottom: 7rem;
    }

    .margin-right8-phone {
        margin-right: 8rem;
    }

    .margin-left8-phone {
        margin-left: 8rem;
    }

    .margin-top8-phone {
        margin-top: 8rem;
    }

    .margin-bottom8-phone {
        margin-bottom: 8rem;
    }

    .margin-top-1-phone {
        margin-top: calc(var(--padding) / -2);
    }

    .margin-top-2-phone {
        margin-top: calc(var(--padding) / -1);
    }

    .margin-top-3-phone {
        margin-top: calc(var(--padding) * -1.5);
    }

    .margin-top-4-phone {
        margin-top: calc(var(--padding) * -2);
    }

    .margin-top-5-phone {
        margin-top: calc(var(--padding) * -2.5);
    }

    .margin-top-6-phone {
        margin-top: calc(var(--padding) * -3);
    }

    .margin-right-1-phone {
        margin-right: calc(var(--padding) / -2);
    }

    .margin-right-2-phone {
        margin-right: calc(var(--padding) / -1);
    }

    .margin-right-3-phone {
        margin-right: calc(var(--padding) * -1.5);
    }

    .margin-right-4-phone {
        margin-right: calc(var(--padding) * -2);
    }

    .margin-right-5-phone {
        margin-right: calc(var(--padding) * -2.5);
    }

    .margin-right-6-phone {
        margin-right: calc(var(--padding) * -3);
    }

    .margin-left-1-phone {
        margin-left: calc(var(--padding) / -2);
    }

    .margin-left-2-phone {
        margin-left: calc(var(--padding) / -1);
    }

    .margin-left-3-phone {
        margin-left: calc(var(--padding) * -1.5);
    }

    .margin-left-4-phone {
        margin-left: calc(var(--padding) * -2);
    }

    .margin-left-5-phone {
        margin-left: calc(var(--padding) * -2.5);
    }

    .margin-left-6-phone {
        margin-left: calc(var(--padding) * -3);
    }

    .margin-bottom-1-phone {
        margin-bottom: calc(var(--padding) / -2);
    }

    .margin-bottom-2-phone {
        margin-bottom: calc(var(--padding) / -1);
    }

    .margin-bottom-3-phone {
        margin-bottom: calc(var(--padding) * -1.5);
    }

    .margin-bottom-4-phone {
        margin-bottom: calc(var(--padding) * -2);
    }

    .margin-bottom-5-phone {
        margin-bottom: calc(var(--padding) * -2.5);
    }

    .margin-bottom-6-phone {
        margin-bottom: calc(var(--padding) * -3);
    }

    .margin-mini-phone {
        margin: calc(var(--padding) / 4);
    }

    .margin-mini-horizontal-phone {
        margin: 0 calc(var(--padding) / 4);
    }

    .margin-mini-vertical-phone {
        margin: calc(var(--padding) / 4) 0;
    }

    .margin-mini-right-phone {
        margin-right: calc(var(--padding) / 4);
    }

    .margin-mini-left-phone {
        margin-left: calc(var(--padding) / 4);
    }

    .margin-mini-top-phone {
        margin-top: calc(var(--padding) / 4);
    }

    .margin-mini-bottom-phone {
        margin-bottom: calc(var(--padding) / 4);
    }

    .margin-small-phone {
        margin: calc(var(--padding) / 2);
    }

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

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

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

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

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

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

    .margin-medium-phone {
        margin: calc(var(--padding) * 1.5);
    }

    .margin-medium-horizontal-phone {
        margin: 0 calc(var(--padding) * 1.5);
    }

    .margin-medium-vertical-phone {
        margin: calc(var(--padding) * 1.5) 0;
    }

    .margin-medium-right-phone {
        margin-right: calc(var(--padding) * 1.5);
    }

    .margin-medium-left-phone {
        margin-left: calc(var(--padding) * 1.5);
    }

    .margin-medium-top-phone {
        margin-top: calc(var(--padding) * 1.5);
    }

    .margin-medium-bottom-phone {
        margin-bottom: calc(var(--padding) * 1.5);
    }

    .margin-large-phone {
        margin: calc(var(--padding) * 2);
    }

    .margin-large-horizontal-phone {
        margin: 0 calc(var(--padding) * 2);
    }

    .margin-large-vertical-phone {
        margin: calc(var(--padding) * 2) 0;
    }

    .margin-large-right-phone {
        margin-right: calc(var(--padding) * 2);
    }

    .margin-large-left-phone {
        margin-left: calc(var(--padding) * 2);
    }

    .margin-large-top-phone {
        margin-top: calc(var(--padding) * 2);
    }

    .margin-large-bottom-phone {
        margin-bottom: calc(var(--padding) * 2);
    }

    .margin-big-phone {
        margin: calc(var(--padding) * 2.5);
    }

    .margin-big-horizontal-phone {
        margin: 0 calc(var(--padding) * 2.5);
    }

    .margin-big-vertical-phone {
        margin: calc(var(--padding) * 2.5) 0;
    }

    .margin-big-right-phone {
        margin-right: calc(var(--padding) * 2.5);
    }

    .margin-big-left-phone {
        margin-left: calc(var(--padding) * 2.5);
    }

    .margin-big-top-phone {
        margin-top: calc(var(--padding) * 2.5);
    }

    .margin-big-bottom-phone {
        margin-bottom: calc(var(--padding) * 2.5);
    }

    .margin-huge-phone {
        margin: calc(var(--padding) * 3);
    }

    .margin-huge-horizontal-phone {
        margin: 0 calc(var(--padding) * 3);
    }

    .margin-huge-vertical-phone {
        margin: calc(var(--padding) * 3) 0;
    }

    .margin-huge-right-phone {
        margin-right: calc(var(--padding) * 3);
    }

    .margin-huge-left-phone {
        margin-left: calc(var(--padding) * 3);
    }

    .margin-huge-top-phone {
        margin-top: calc(var(--padding) * 3);
    }

    .margin-huge-bottom-phone {
        margin-bottom: calc(var(--padding) * 3);
    }

    .padding-huge,
    .padding-large,
    .padding-phone {
        padding: var(--padding);
    }

    .padding-huge-horizontal,
    .padding-big-horizontal,
    .padding-large-horizontal,
    .padding-horizontal-phone {
        padding: 0 var(--padding);
    }

    .padding-huge-vertical,
    .padding-big-vertical,
    .padding-large-vertical,
    .padding-vertical-phone {
        padding: var(--padding) 0;
    }

    .padding-huge-right,
    .padding-big-right,
    .padding-large-right,
    .padding-right-phone {
        padding-right: var(--padding);
    }

    .padding-huge-left,
    .padding-big-left,
    .padding-large-left,
    .padding-left-phone {
        padding-left: var(--padding);
    }

    .padding-huge-top,
    .padding-big-top,
    .padding-large-top,
    .padding-top-phone {
        padding-top: var(--padding);
    }

    .padding-huge-bottom,
    .padding-big-bottom,
    .padding-large-bottom,
    .padding-bottom-phone {
        padding-bottom: var(--padding);
    }

    .padding-right0-phone {
        padding-right: 0
    }

    .padding-left0-phone {
        padding-left: 0;
    }

    .padding-top0-phone {
        padding-top: 0;
    }

    .padding-bottom0-phone {
        padding-bottom: 0;
    }

    .padding-right7-phone {
        padding-right: 7rem;
    }

    .padding-left7-phone {
        padding-left: 7rem;
    }

    .padding-top7-phone {
        padding-top: 7rem;
    }

    .padding-bottom7-phone {
        padding-bottom: 7rem;
    }

    .padding-right8-phone {
        padding-right: 8rem;
    }

    .padding-left8-phone {
        padding-left: 8rem;
    }

    .padding-top8-phone {
        padding-top: 8rem;
    }

    .padding-bottom8-phone {
        padding-bottom: 8rem;
    }

    .padding-mini-phone {
        padding: calc(var(--padding) / 4);
    }

    .padding-mini-horizontal-phone {
        padding: 0 calc(var(--padding) / 4);
    }

    .padding-mini-vertical-phone {
        padding: calc(var(--padding) / 4) 0;
    }

    .padding-mini-right-phone {
        padding-right: calc(var(--padding) / 4);
    }

    .padding-mini-left-phone {
        padding-left: calc(var(--padding) / 4);
    }

    .padding-mini-top-phone {
        padding-top: calc(var(--padding) / 4);
    }

    .padding-mini-bottom-phone {
        padding-bottom: calc(var(--padding) / 4);
    }

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

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

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

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

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

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

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

    .padding-medium-phone {
        padding: calc(var(--padding) * 1.5);
    }

    .padding-medium-horizontal-phone {
        padding: 0 calc(var(--padding) * 1.5);
    }

    .padding-medium-vertical-phone {
        padding: calc(var(--padding) * 1.5) 0;
    }

    .padding-medium-right-phone {
        padding-right: calc(var(--padding) * 1.5);
    }

    .padding-medium-left-phone {
        padding-left: calc(var(--padding) * 1.5);
    }

    .padding-medium-top-phone {
        padding-top: calc(var(--padding) * 1.5);
    }

    .padding-medium-bottom-phone {
        padding-bottom: calc(var(--padding) * 1.5);
    }

    .padding-large-phone {
        padding: calc(var(--padding) * 2);
    }

    .padding-large-horizontal-phone {
        padding: 0 calc(var(--padding) * 2);
    }

    .padding-large-vertical-phone {
        padding: calc(var(--padding) * 2) 0;
    }

    .padding-large-right-phone {
        padding-right: calc(var(--padding) * 2);
    }

    .padding-large-left-phone {
        padding-left: calc(var(--padding) * 2);
    }

    .padding-large-top-phone {
        padding-top: calc(var(--padding) * 2);
    }

    .padding-large-bottom-phone {
        padding-bottom: calc(var(--padding) * 2);
    }

    .padding-big-phone {
        padding: calc(var(--padding) * 2.5);
    }

    .padding-big-horizontal-phone {
        padding: 0 calc(var(--padding) * 2.5);
    }

    .padding-big-vertical-phone {
        padding: calc(var(--padding) * 2.5) 0;
    }

    .padding-big-right-phone {
        padding-right: calc(var(--padding) * 2.5);
    }

    .padding-big-left-phone {
        padding-left: calc(var(--padding) * 2.5);
    }

    .padding-big-top-phone {
        padding-top: calc(var(--padding) * 2.5);
    }

    .padding-big-bottom-phone {
        padding-bottom: calc(var(--padding) * 2.5);
    }

    .padding-huge-phone {
        padding: calc(var(--padding) * 3);
    }

    .padding-huge-horizontal-phone {
        padding: 0 calc(var(--padding) * 3);
    }

    .padding-huge-vertical-phone {
        padding: calc(var(--padding) * 3) 0;
    }

    .padding-huge-right-phone {
        padding-right: calc(var(--padding) * 3);
    }

    .padding-huge-left-phone {
        padding-left: calc(var(--padding) * 3);
    }

    .padding-huge-top-phone {
        padding-top: calc(var(--padding) * 3);
    }

    .padding-huge-bottom-phone {
        padding-bottom: calc(var(--padding) * 3);
    }
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2')
}

html,
body {
    font-size: 16px;
    height: 100%
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: var(--body-color);
    background-color: var(--body-bg-color);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column
}

a,
a.dark,
a.white,
a.inverted,
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.dark {
    color: var(--dark-color)
}

a.dark:hover,
a.dark.hover,
a.dark:focus {
    color: var(--primary-color-hover)
}

a.white {
    color: var(--white-color)
}

a.white:hover,
a.white.hover,
a.white:focus {
    color: var(--primary-color-hover)
}

a.grey {
    color: var(--grey-color)
}

a.grey:hover,
a.grey.hover,
a.grey:focus {
    color: var(--primary-color)
}

a.inverted {
    color: rgba(255, 255, 255, 0.7)
}

a.inverted:hover,
a.inverted.hover,
a.inverted:focus {
    color: rgba(255, 255, 255, 1)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dark-color);
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 .5rem 0
}

h1 {
    font-size: var(--h1-size);
    line-height: 1.2;
    margin: 0 0 1rem 0
}

h2 {
    font-size: var(--h2-size);
    line-height: 1.1;
    font-weight: 500
}

h3 {
    font-size: var(--h3-size);
    line-height: 2.3rem
}

h4 {
    font-size: var(--h4-size);
    line-height: 2rem
}

h5 {
    font-size: var(--h5-size);
    line-height: 1.5rem;
    font-weight: 600
}

h6 {
    font-size: var(--h6-size);
    line-height: 1.3rem;
    font-weight: 700
}

h1.basic,
h2.basic,
h3.basic,
h4.basic,
h5.basic,
h6.basic,
p.basic {
    margin-bottom: 0
}

.lead {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--dark-color)
}

header#header {
    background-color: var(--white-color);
    padding: .750rem 0
}

header#header a.logo {
    display: inline-block;
    line-height: 1
}

header#header .logo img,
header#header .logo svg {
    width: 4rem
}

header#header .logo .logoshape3 {
    fill: var(--primary-color-inverted)
}

header#header .logo .logoshape1,
header#header .logo .logoshape2 {
    fill: var(--primary-color)
}

header#header.fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background: var(--white-color);
    -webkit-animation: smoothScroll 1s forwards;
    animation: smoothScroll 1s forwards;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(140, 152, 164, 0.125)
}

main {
    flex: 1 0 auto
}

nav.wojo.menu {}

.wojo.button.mobile-button {
    display: none
}

nav.wojo.menu>ul {
    width: 100%;
    justify-content: flex-end;
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    box-sizing: border-box
}

nav.wojo.menu>ul>li {
    padding: 0;
    margin: 0;
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    display: flex;
    align-items: center
}

nav.wojo.menu>ul>li a,
nav.wojo.menu>ul>li.has-dropdown>a {
    text-decoration: none;
    padding: 1rem 0 1rem 2rem;
    display: inline-flex;
    font-weight: 400;
    color: var(--dark-color)
}

nav.wojo.menu>ul>li a {
    padding: 1rem 2rem
}

nav.wojo.menu>ul>li a>.icon {
    margin-right: .375rem
}

nav.wojo.menu>ul>li a small {
    display: none
}

nav.wojo.menu>ul>li>span {
    padding: 0 .5rem;
    display: inline-flex;
    color: var(--dark-color)
}

nav.wojo.menu>ul>li a.active,
nav.wojo.menu>ul>li:hover {
    background: var(--primary-color-shadow);
    border-radius: .5rem
}

nav.wojo.menu>ul>li:hover>a,
nav.wojo.menu>ul>li:hover>span {
    color: var(--primary-color)
}

nav.wojo.menu>ul>li>ul {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-flow: row wrap;
    background: var(--white-color);
    padding: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none
}

nav.wojo.menu>ul>li>ul>li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    min-width: 0;
    background: none
}

nav.wojo.menu>ul>li>ul.cols-2>li,
nav.wojo.menu>ul>li>ul.cols-3>li,
nav.wojo.menu>ul>li>ul.cols-4>li {
    position: relative
}

nav.wojo.menu>ul>li>ul.cols-2>li::after,
nav.wojo.menu>ul>li>ul.cols-3>li::after,
nav.wojo.menu>ul>li>ul.cols-4>li::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -.875rem;
    width: 1px;
    height: 70%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--primary-color-inverted)
}

nav.wojo.menu>ul>li>ul.cols-2>li {
    flex: 0 0 calc((100% - 1.5rem) / 2);
    max-width: calc((100% - 1.5rem) / 2)
}

nav.wojo.menu>ul>li>ul.cols-3>li {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3)
}

nav.wojo.menu>ul>li>ul.cols-4>li {
    flex: 0 0 calc((100% - 4.5rem) / 4);
    max-width: calc((100% - 4.5rem) / 4)
}

nav.wojo.menu>ul>li>ul.cols-2>li:last-child::after,
nav.wojo.menu>ul>li>ul.cols-3>li:last-child::after,
nav.wojo.menu>ul>li>ul.cols-4>li:last-child::after {
    display: none
}

nav.wojo.menu>ul>li>ul>li:last-child {
    margin-right: 0
}

nav.wojo.menu>ul>li>ul>li a {
    color: var(--dark-color);
    padding: 1rem;
    display: block;
    font-weight: 600;
    font-size: .750rem
}

nav.wojo.menu>ul>li>ul>li>ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 1rem;
    list-style: none;
    box-sizing: border-box
}

nav.wojo.menu>ul>li>ul>li>ul>li {
    margin: 0
}

nav.wojo.menu>ul>li>ul>li>ul>li a {
    border: 0;
    padding: .5rem;
    font-weight: normal;
    font-size: .875rem
}

nav.wojo.menu>ul>li>ul>li>ul>li a:hover {
    color: var(--primary-color)
}

nav.wojo.menu>ul>li>ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 1rem;
    border-radius: .375rem;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    box-shadow: 0 .6125rem 2.5rem .6125rem rgba(140, 152, 164, .175)
}

nav.wojo.menu>ul>li>ul.mega-sub {
    border-radius: .375rem;
    box-shadow: 0 .6125rem 2.5rem .6125rem rgba(140, 152, 164, .175)
}

nav.wojo.menu>ul>li.has-dropdown:hover>ul {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

nav.wojo.menu>ul>li>ul.normal-sub>li {
    min-width: 0;
    flex: 0 0 100%;
    max-width: 100%
}

nav.wojo.menu>ul>li>ul.normal-sub>li a {
    border: 0;
    padding: .750rem 1rem .750rem 1.5rem;
    font-weight: 500;
    font-size: .875rem;
    border-radius: .5rem;
    position: relative
}

nav.wojo.menu>ul>li>ul.normal-sub>li a::before {
    position: absolute;
    z-index: 2;
    content: "";
    width: .25rem;
    height: .250rem;
    background-color: var(--grey-color);
    left: .5rem;
    top: 50%;
    border-radius: .5rem;
    transform: translate(0, -50%)
}

nav.wojo.menu>ul>li>ul.normal-sub>li a.active,
nav.wojo.menu>ul>li>ul.normal-sub>li a:hover {
    color: var(--primary-color);
    background-color: var(--grey-color-300)
}

nav.wojo.menu>ul>li>ul.normal-sub>li a:hover::before {
    background-color: var(--primary-color)
}

footer {
    background-color: var(--primary-color-active);
    z-index: 1;
    flex-shrink: 0;
    position: relative
}

footer .wrapper {
    position: relative;
    z-index: 2
}

footer .contents {
    padding: 4rem 0 2rem
}

footer .copyright {
    padding-top: 1rem;
    border-top: 1px solid var(--primary-color-shadow);
    font-size: .875rem;
    color: var(--primary-color-inverted)
}

footer .logo img,
footer .logo svg {
    width: 1.5rem;
    margin-right: .875rem
}

footer .logo .logoshape1,
footer .logo .logoshape2,
footer .logo .logoshape3 {
    fill: rgba(255, 255, 255, 0.4)
}

#back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    display: none;
    opacity: .5;
    transition: 0.3s ease-out
}

#gdpr-cookie-message {
    position: fixed;
    right: 4rem;
    bottom: 5rem;
    max-width: 420px;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: .5rem;
    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);
    z-index: 100
}

#gdpr-cookie-message h4 {
    font-size: 1.25rem;
    font-weight: 500
}

#gdpr-cookie-message h5 {
    font-size: 1rem;
    font-weight: 500
}

#gdpr-cookie-message button:disabled {
    opacity: 0.3
}

#gdpr-cookie-message .columns p {
    font-size: .875rem
}

@-webkit-keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

#pageCaption {
    padding: 9rem 0 6rem 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1
}

#pageCaption::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.75;
    z-index: -35;
    background: var(--primary-color-active)
}

#pageCaption figure {
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%
}

#moduleCaption {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
    background-color: var(--primary-color-active)
}

#moduleCaption .shape1,
#moduleCaption .shape2 {
    position: absolute
}

#moduleCaption .shape1 {
    width: 200px;
    left: 0;
    top: -4rem
}

#moduleCaption .shape2 {
    right: 0;
    bottom: -8rem;
    width: 200px
}

#pageCaption h1,
#moduleCaption h1 {
    color: var(--secondary-color-inverted)
}

#moduleCaption p {
    color: var(--secondary-color-inverted);
    opacity: .5
}

.banner-end {
    position: relative
}

.banner-end::after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 22%, rgba(80, 137, 145, .1) 22%);
    content: ""
}

.banner-end.banner-left::after {
    top: auto;
    right: auto;
    bottom: -3rem;
    left: -3rem;
    background: rgba(80, 137, 145, .1)
}

.overlay {
    position: relative;
    z-index: 1
}

.overlay.gradient::before,
.overlay.white::before,
.overlay.secondary::before,
.overlay.dark::before,
.overlay::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.75;
    z-index: -35;
    background: var(--primary-color-active)
}

.overlay.white::before {
    background: #fff
}

.overlay.dark::before {
    background: #111
}

.overlay.secondary::before {
    background: var(--secondary-color-active)
}

.overlay.gradient::before {
    background: linear-gradient(to left, #eff5f6 0%, #508991 100%)
}

#searchHero {
    padding: 4rem 0;
    overflow: hidden;
    background: var(--primary-color-active);
    position: relative
}

#searchHero .shape1,
#searchHero .shape2 {
    position: absolute
}

#searchHero .shape1 {
    width: 200px;
    left: 0;
    top: -4rem
}

#searchHero .shape2 {
    right: 0;
    bottom: -8rem;
    width: 200px
}

header#mheader {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 2rem 0
}

header#mheader a.logo {
    display: inline-flex
}

header#mheader a.logo img,
header#mheader a.logo svg {
    width: 4rem
}

header#mheader a.logo .logoshape3 {
    fill: var(--primary-color-inverted)
}

header#mheader a.logo .logoshape1,
header#mheader a.logo .logoshape2 {
    fill: var(--primary-color)
}

#mdashboard .dash {
    position: relative;
    padding: 0 1rem;
    text-align: center
}

#mdashboard .dash .digit {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    display: inline-flex;
    color: var(--primary-color)
}

#mdashboard .dash_title {
    display: block;
    font-size: .750rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 500;
    color: #77838F
}

#mfooter {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: .750rem;
    padding: 2rem 0
}

@media screen and (max-width:640px) {
    .banner-end::after {
        height: 80%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(80, 137, 145, .1) 0);
    }
}

@media screen and (min-width:641px) and (max-width:768px) {}

@media screen and (max-width:768px) {
    header .toolbar-phone {
        display: none;
    }

    .wojo.button.mobile-button {
        display: inline-flex;
    }

    nav.wojo.menu>ul>li>span {
        cursor: pointer;
    }

    nav.wojo.menu>ul>li {
        display: flex;
        flex-flow: row wrap;
    }

    nav.wojo.menu>ul>li a {
        flex: 1 1 0;
        min-width: 0;
        padding: 1rem;
    }

    nav.wojo.menu>ul>li>ul {
        display: none;
        flex-direction: column;
        opacity: 1;
        position: relative;
        visibility: visible;
    }

    nav.wojo.menu>ul>li>ul.normal-sub {
        box-shadow: none;
        opacity: 1;
        transition: none;
        visibility: visible;
        width: 100%;
    }

    nav.wojo.menu>ul>li.has-dropdown:hover>ul {
        -webkit-animation-duration: 0s;
        -webkit-animation-name: none;
        -webkit-backface-visibility: visible;
        animation-duration: 0s;
        animation-name: none;
        backface-visibility: visible;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    nav.wojo.menu>ul>li>ul.cols-2,
    nav.wojo.menu>ul>li>ul.cols-3,
    nav.wojo.menu>ul>li>ul.cols-4 {
        width: 100%;
    }

    nav.wojo.menu>ul>li>ul>li,
    nav.wojo.menu>ul>li>ul.cols-2 li,
    nav.wojo.menu>ul>li>ul.cols-3 li,
    nav.wojo.menu>ul>li>ul.cols-4 li {
        flex: 0 0 100%;
        margin: 0;
        max-width: 100%;
        min-width: 0;
    }

    nav.wojo.menu>ul>li>ul>li:first-child {
        margin: 0;
    }

    nav.wojo.menu>ul>li>ul>li>ul {
        position: relative;
    }

    nav.wojo.menu>ul>li>ul>li>ul>li {
        float: none;
    }

    nav.wojo.menu .show-on-mobile {
        display: flex;
        flex-direction: column;
    }

    nav.wojo.menu>ul,
    nav.wojo.menu>ul>li>ul.cols-2>li:after,
    nav.wojo.menu>ul>li>ul.cols-3>li::after,
    nav.wojo.menu>ul>li>ul.cols-4>li::after {
        display: none;
    }

    #moduleCaption {
        padding: 2.5rem 0
    }
}

@media screen and (min-width:769px) and (max-width:1199px) {}