html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q,
blockquote {
    quotes: none
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none
}

a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

body {
    background: #f9f8f8;
    color: #262626;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility
}

figcaption {
    margin: 1.25rem 0;
    border-top: 0.0625rem solid rgba(38, 38, 38, 0.05);
    color: #b9bebf;
    font-size: 10px;
    font-size: .625rem;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 20px;
    line-height: 1.25rem
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

::-webkit-scrollbar {
    display: none
}

::-moz-selection {
    background: #7ed3f7
}

::selection {
    background: #7ed3f7
}

input:-webkit-autofill {
    -moz-box-shadow: #f2ca30 0 0 0 3.125rem inset;
    -webkit-box-shadow: #f2ca30 0 0 0 3.125rem inset;
    box-shadow: #f2ca30 0 0 0 3.125rem inset
}

.small.btn,
.medium.btn,
.large.btn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 50px;
    height: 3.125rem;
    padding: 0 .625rem;
    outline: none;
    -moz-border-radius: .125rem;
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
    margin: .625rem 0;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    line-height: 50px;
    line-height: 3.125rem;
    overflow: hidden;
    white-space: nowrap;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    cursor: pointer
}

.primary.small.btn,
.primary.medium.btn,
.primary.large.btn {
    border: 0.0625rem solid #0066b3;
    background: #0066b3;
    color: #fff
}

.primary.small.btn:focus,
.primary.small.btn:hover,
.primary.medium.btn:focus,
.primary.medium.btn:hover,
.primary.large.btn:focus,
.primary.large.btn:hover {
    border: 0.0625rem solid #0083ca;
    background: #0083ca
}

@media only all and (min-width: 481px) {
    .small.btn,
    .medium.btn,
    .large.btn {
        font-size: 16px;
        font-size: 1rem
    }
    .small.btn {
        max-width: 16.66667%
    }
    .medium.btn {
        max-width: 25%
    }
    .large.btn {
        max-width: 50%
    }
}

.field.container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .625rem
}

.radio.container {
    position: relative;
    margin-bottom: 10px;
    margin-bottom: .625rem;
    padding-left: 34px;
    padding-left: 2.125rem
}

.radio.input {
    position: absolute;
    top: -1px;
    top: -.0625rem;
    left: 0;
    width: 20px;
    width: 1.25rem;
    height: 20px;
    height: 1.25rem;
    margin-right: 6px;
    margin-right: .375rem;
    outline: none;
    border: 0.0625rem solid #e3e3e3;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: none;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer
}

.radio.input.has.error {
    border: 0.0625rem solid #f36 !important
}

label {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.radio.input.has.error+label {
    color: #f36
}

ol>li:nth-child(6n+1) .radio.input:checked {
    border: 0.0625rem solid #7ed3f7
}

ol>li:nth-child(6n+2) .radio.input:checked {
    border: 0.0625rem solid #f58220
}

ol>li:nth-child(6n+3) .radio.input:checked {
    border: 0.0625rem solid #0066b3
}

ol>li:nth-child(6n+4) .radio.input:checked {
    border: 0.0625rem solid #f2ca30
}

ol>li:nth-child(6n+5) .radio.input:checked {
    border: 0.0625rem solid #0083ca
}

ol>li:nth-child(6n+6) .radio.input:checked {
    border: 0.0625rem solid #f15a22
}

.radio.input::after {
    content: '';
    position: absolute;
    top: 5px;
    top: .3125rem;
    left: 5px;
    left: .3125rem;
    width: 8px;
    width: .5rem;
    height: 8px;
    height: .5rem;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: #f9f8f8;
    cursor: pointer;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.radio.input:checked::after {
    background: #262626
}

.form.error::before {
    content: '\f00d';
    margin-right: 5px;
    margin-right: .3125rem;
    color: #f36;
    font-family: "FontAwesome"
}

.form.error * {
    color: #f36
}

.form.has.success::before {
    content: '\f00c';
    margin-right: 5px;
    margin-right: .3125rem;
    color: #31bc06;
    font-family: "FontAwesome"
}

.form.has.success * {
    color: #31bc06
}

.grid {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 60rem;
    margin: auto
}

.row {
    width: 100%
}

.row::before,
.row::after {
    content: '';
    display: table;
    clear: both
}

.column,
.columns {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: .0625rem
}

.fluid.row .one.column,
.fluid.row .one.columns {
    width: 25%
}

.fluid.row .two.columns {
    width: 50%
}

.fluid.row .three.columns,
.fluid.row .six.columns,
.row .one.column,
.row .one.columns,
.row .two.columns,
.row .three.columns,
.row .four.columns,
.row .five.columns,
.row .six.columns,
.row .seven.columns,
.row .eight.columns,
.row .nine.columns,
.row .ten.columns,
.row .eleven.columns,
.row .twelve.columns {
    width: 100%
}

.padded.grid {
    padding-right: .625rem;
    padding-left: .625rem
}

.padded .column,
.padded .columns {
    padding: .625rem
}

@media only all and (min-width: 481px) {
    .fluid.row .one.column,
    .fluid.row .one.columns {
        width: 16.66667%
    }
    .fluid.row .two.columns {
        width: 33.33333%
    }
    .fluid.row .three.columns,
    .fluid.row .four.columns {
        width: 50%
    }
    .fluid.row .six.columns {
        width: 100%
    }
    .row .one.column,
    .row .one.columns {
        width: 8.33333%
    }
    .row .two.columns {
        width: 16.66667%
    }
    .row .three.columns {
        width: 25%
    }
    .row .four.columns {
        width: 33.33333%
    }
    .row .five.columns {
        width: 41.66667%
    }
    .row .six.columns {
        width: 50%
    }
    .row .seven.columns {
        width: 58.33333%
    }
    .row .eight.columns {
        width: 66.66667%
    }
    .row .nine.columns {
        width: 75%
    }
    .row .ten.columns {
        width: 83.33333%
    }
    .row .eleven.columns {
        width: 91.66667%
    }
    .row .twelve.columns {
        width: 100%
    }
    .row .nudge.right.one-column,
    .row .nudge.right.one-columns {
        margin-left: 8.33333%
    }
    .row .nudge.right.two-columns {
        margin-left: 16.66667%
    }
    .row .nudge.right.three-columns {
        margin-left: 25%
    }
    .row .nudge.right.four-columns {
        margin-left: 33.33333%
    }
    .row .nudge.right.five-columns {
        margin-left: 41.66667%
    }
    .row .nudge.right.six-columns {
        margin-left: 50%
    }
    .row .nudge.right.seven-columns {
        margin-left: 58.33333%
    }
    .row .nudge.right.eight-columns {
        margin-left: 66.66667%
    }
    .row .nudge.right.nine-columns {
        margin-left: 75%
    }
    .row .nudge.right.ten-columns {
        margin-left: 83.33333%
    }
    .row .nudge.right.eleven-columns {
        margin-left: 91.66667%
    }
    .row .nudge.left.one-column,
    .row .nudge.left.one-columns {
        margin-left: -8.33333%
    }
    .row .nudge.left.two-columns {
        margin-left: -16.66667%
    }
    .row .nudge.left.three-columns {
        margin-left: -25%
    }
    .row .nudge.left.four-columns {
        margin-left: -33.33333%
    }
    .row .nudge.left.five-columns {
        margin-left: -41.66667%
    }
    .row .nudge.left.six-columns {
        margin-left: -50%
    }
    .row .nudge.left.seven-columns {
        margin-left: -58.33333%
    }
    .row .nudge.left.eight-columns {
        margin-left: -66.66667%
    }
    .row .nudge.left.nine-columns {
        margin-left: -75%
    }
    .row .nudge.left.ten-columns {
        margin-left: -83.33333%
    }
    .row .nudge.left.eleven-columns {
        margin-left: -91.66667%
    }
    .row .nudge.left.twelve-columns {
        margin-left: -100%
    }
    .row .centered.one.column,
    .row .centered.one.columns {
        margin: 0 45.83333%
    }
    .row .centered.two.columns {
        margin: 0 41.66667%
    }
    .row .centered.three.columns {
        margin: 0 37.5%
    }
    .row .centered.four.columns {
        margin: 0 33.33333%
    }
    .row .centered.five.columns {
        margin: 0 29.16667%
    }
    .row .centered.six.columns {
        margin: 0 25%
    }
    .row .centered.seven.columns {
        margin: 0 20.83333%
    }
    .row .centered.eight.columns {
        margin: 0 16.66667%
    }
    .row .centered.nine.columns {
        margin: 0 12.5%
    }
    .row .centered.ten.columns {
        margin: 0 8.33333%
    }
    .row .centered.eleven.columns {
        margin: 0 4.16667%
    }
}

@media only all and (min-width: 769px) {
    .fluid.row .one.column,
    .fluid.row .one.columns {
        width: 8.33333%
    }
    .fluid.row .two.columns {
        width: 16.66667%
    }
    .fluid.row .three.columns {
        width: 25%
    }
    .fluid.row .four.columns {
        width: 33.33333%
    }
    .fluid.row .six.columns {
        width: 50%
    }
}

.primary.table {
    width: 100%;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-size: .6875rem;
    line-height: 16px;
    line-height: 1rem
}

.primary.table tr {
    border-bottom: 0.0625rem solid #e3e3e3
}

.primary.table tbody tr:focus,
.primary.table tbody tr:hover {
    background: #e4f6fd
}

.primary.table th {
    font-weight: 800
}

.primary.table th,
.primary.table td {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    height: 2.8125rem;
    padding: 5px;
    padding: .3125rem
}

.primary.table .checked.cell::before {
    content: '\f00c';
    position: absolute;
    top: 50%;
    left: 20px;
    left: 1.25rem;
    font-size: 16px;
    font-size: 1rem;
    font-family: "FontAwesome";
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.primary.table .checked.cell {
    position: relative
}

.checked.cell:nth-child(6n+1)::before {
    color: #f15a22
}

.checked.cell:nth-child(6n+2)::before {
    color: #0083ca
}

.checked.cell:nth-child(6n+3)::before {
    color: #f2ca30
}

.checked.cell:nth-child(6n+4)::before {
    color: #0066b3
}

.checked.cell:nth-child(6n+5)::before {
    color: #f58220
}

.checked.cell:nth-child(6n+6)::before {
    color: #7ed3f7
}

.secondary.table {
    margin-bottom: 20px;
    margin-bottom: 1.25rem
}

.secondary.table tr td:first-child {
    text-align: right
}

.secondary.table tr:last-child td {
    border-top: 0.125rem solid #262626;
    font-weight: 900;
    line-height: 25px;
    line-height: 1.5625rem
}

.alt.table {
    width: 100%;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-size: .6875rem
}

.alt.table tr {
    height: 45px;
    height: 2.8125rem
}

.alt.table tr:focus,
.alt.table tr:hover {
    background: #e4f6fd
}

.alt.table thead tr:focus,
.alt.table thead tr:hover {
    background: none
}

.alt.table th {
    font-weight: 800;
    text-align: center
}

.alt.table td {
    width: 7.6923076923%;
    border: 0.0625rem solid #d1d1d1;
    font-weight: 300;
    text-align: center
}

.alt.table td:focus,
.alt.table td:hover {
    background: #7ed3f7 !important;
    font-weight: 800;
    cursor: default
}

@media only all and (min-width: 481px) {
    .primary.table {
        font-size: 12px;
        font-size: .75rem;
        line-height: 18px;
        line-height: 1.125rem
    }
    .alt.table {
        font-size: 12px;
        font-size: .75rem
    }
}

@media only all and (min-width: 769px) {
    .primary.table {
        font-size: 14px;
        font-size: .875rem;
        line-height: 20px;
        line-height: 1.25rem
    }
    .alt.table {
        font-size: 14px;
        font-size: .875rem
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    margin: 1.25rem 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    word-wrap: break-word
}

h1 {
    font-size: 32px;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 48px;
    line-height: 3rem
}

h2 {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 32px;
    line-height: 2rem
}

h3 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 26px;
    line-height: 1.625rem
}

h4 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 24px;
    line-height: 1.5rem
}

h5 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 22px;
    line-height: 1.375rem
}

h6 {
    font-size: 14px;
    font-size: .875rem;
    font-weight: 300;
    line-height: 20px;
    line-height: 1.25rem
}

p {
    margin-bottom: 10px;
    margin-bottom: .625rem;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 300;
    line-height: 20px;
    line-height: 1.25rem
}

ol.list,
ul.list {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 300;
    line-height: 20px;
    line-height: 1.25rem;
    counter-reset: number
}

ol.list>li,
ul.list>li {
    position: relative;
    margin-bottom: 10px;
    margin-bottom: .625rem;
    padding-left: 34px;
    padding-left: 2.125rem;
    counter-increment: number
}

ol.list>li::before {
    content: counter(number);
    position: absolute;
    top: -1px;
    top: -.0625rem;
    left: 0;
    width: 20px;
    width: 1.25rem;
    height: 20px;
    height: 1.25rem;
    margin-right: 6px;
    margin-right: .375rem;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: #fff;
    font-size: 12px;
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
    line-height: 20px;
    line-height: 1.25rem
}

ol.list>li:nth-child(6n+1)::before {
    border: 0.125rem solid #7ed3f7;
    color: #7ed3f7
}

ol.list>li:nth-child(6n+2)::before {
    border: 0.125rem solid #f58220;
    color: #f58220
}

ol.list>li:nth-child(6n+3)::before {
    border: 0.125rem solid #0066b3;
    color: #0066b3
}

ol.list>li:nth-child(6n+4)::before {
    border: 0.125rem solid #f2ca30;
    color: #f2ca30
}

ol.list>li:nth-child(6n+5)::before {
    border: 0.125rem solid #0083ca;
    color: #0083ca
}

ol.list>li:nth-child(6n+6)::before {
    border: 0.125rem solid #f15a22;
    color: #f15a22
}

ul.list>li::before {
    content: '';
    position: absolute;
    top: 7px;
    top: .4375rem;
    left: 0;
    width: 6px;
    width: .375rem;
    height: 6px;
    height: .375rem;
    border-radius: 100%;
    margin-right: 18px;
    margin-right: 1.125rem;
    margin-left: 8px;
    margin-left: .5rem
}

ul.list>li:nth-child(6n+1)::before {
    border: 0.0625rem solid #7ed3f7;
    background: #7ed3f7
}

ul.list>li:nth-child(6n+2)::before {
    border: 0.0625rem solid #f58220;
    background: #f58220
}

ul.list>li:nth-child(6n+3)::before {
    border: 0.0625rem solid #0066b3;
    background: #0066b3
}

ul.list>li:nth-child(6n+4)::before {
    border: 0.0625rem solid #f2ca30;
    background: #f2ca30
}

ul.list>li:nth-child(6n+5)::before {
    border: 0.0625rem solid #0083ca;
    background: #0083ca
}

ul.list>li:nth-child(6n+6)::before {
    border: 0.0625rem solid #f15a22;
    background: #f15a22
}

ol.list ol.list,
ol.list ul.list,
ul.list ol.list,
ul.list ul.list {
    margin: .625rem 0
}

ol.list ul.list>li:nth-child(6n+1)::before,
ul.list ul.list>li:nth-child(6n+1)::before,
ol.list ul.list>li:nth-child(6n+2)::before,
ul.list ul.list>li:nth-child(6n+2)::before,
ol.list ul.list>li:nth-child(6n+3)::before,
ul.list ul.list>li:nth-child(6n+3)::before,
ol.list ul.list>li:nth-child(6n+4)::before,
ul.list ul.list>li:nth-child(6n+4)::before,
ol.list ul.list>li:nth-child(6n+5)::before,
ul.list ul.list>li:nth-child(6n+5)::before,
ol.list ul.list>li:nth-child(6n+6)::before,
ul.list ul.list>li:nth-child(6n+6)::before {
    background: transparent
}

em {
    font-style: italic
}

small {
    font-size: 10px;
    font-size: .625rem;
    line-height: 100%
}

sub {
    vertical-align: sub
}

sup {
    vertical-align: super
}

sub,
sup {
    font-size: 10px;
    font-size: .625rem;
    line-height: 100%
}

strong {
    font-weight: 900
}

.fine {
    font-weight: 300
}

@media only all and (min-width: 481px) {
    h1 {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 48px;
        line-height: 3rem
    }
    h2 {
        font-size: 32px;
        font-size: 2rem;
        line-height: 40px;
        line-height: 2.5rem
    }
    h3 {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 32px;
        line-height: 2rem
    }
    h4 {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 26px;
        line-height: 1.625rem
    }
    h5 {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 24px;
        line-height: 1.5rem
    }
}

@media only all and (min-width: 769px) {
    h1 {
        font-size: 48px;
        font-size: 3rem;
        line-height: 60px;
        line-height: 3.75rem
    }
    h2 {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 48px;
        line-height: 3rem
    }
    h3 {
        font-size: 32px;
        font-size: 2rem;
        line-height: 40px;
        line-height: 2.5rem
    }
    h4 {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 32px;
        line-height: 2rem
    }
    h5 {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 26px;
        line-height: 1.625rem
    }
    h6 {
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem
    }
    p {
        margin-bottom: 11px;
        margin-bottom: .6875rem;
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem
    }
    ul.list,
    ol.list {
        margin-bottom: 11px;
        margin-bottom: .6875rem;
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem
    }
    small {
        font-size: 12px;
        font-size: .75rem
    }
    sub,
    sup {
        font-size: 12px;
        font-size: .75rem
    }
}

.footer.panel {
    position: fixed;
    bottom: 0px;
    bottom: 0rem;
    z-index: -100;
    width: 100%;
    height: 50px;
    height: 3.125rem;
    background: #262626;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.footer.logo {
    display: inline-block;
    width: 101px;
    width: 6.3125rem;
    height: 30px;
    height: 1.875rem;
    margin: 10px;
    margin: .625rem;
    background-image: url("../img/open-space-logo-mobile.png")
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3 / 2),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
    .footer.logo {
        background-image: url("../img/open-space-logo-mobile-2x.png");
        background-size: 101px 30px
    }
}

.footer.text {
    position: fixed;
    right: 10px;
    right: .625rem;
    bottom: 0px;
    bottom: 0rem;
    color: #fff;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-size: .6875rem;
    line-height: 50px;
    line-height: 3.125rem
}

.footer.link:active,
.footer.link:link,
.footer.link:visited {
    padding-bottom: 2px;
    padding-bottom: .125rem;
    border-bottom: none;
    color: #fff;
    text-decoration: none
}

.footer.link:focus,
.footer.link:hover {
    border-bottom: 0.0625rem dotted #fff
}

@media only all and (min-width: 481px) {
    .footer.panel {
        height: 60px;
        height: 3.75rem
    }
    .footer.logo {
        width: 135px;
        width: 8.4375rem;
        height: 40px;
        height: 2.5rem;
        background-image: url("../img/open-space-logo-tablet.png")
    }
}

@media only all and (min-width: 481px) and (-webkit-min-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (min--moz-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (-o-min-device-pixel-ratio: 3 / 2),
only all and (min-width: 481px) and (min-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (min-resolution: 1.5dppx) {
    .footer.logo {
        background-image: url("../img/open-space-logo-tablet-2x.png");
        background-size: 135px 40px
    }
}

@media only all and (min-width: 481px) {
    .footer.text {
        font-size: 12px;
        font-size: .75rem;
        line-height: 60px;
        line-height: 3.75rem
    }
}

@media only all and (min-width: 769px) {
    .footer.panel {
        height: 80px;
        height: 5rem
    }
    .footer.logo {
        margin: 1.25rem 1.25rem 1.25rem .625rem
    }
    .footer.text {
        font-size: 14px;
        font-size: .875rem;
        line-height: 80px;
        line-height: 5rem
    }
}

.breadcrumb.panel {
    display: none
}

@media only all and (min-width: 481px) {
    .breadcrumb.panel {
        position: fixed;
        top: 50px;
        top: 3.125rem;
        left: 50%;
        z-index: 200;
        display: initial;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        max-width: 960px;
        max-width: 60rem;
        height: auto;
        padding-left: 20px;
        padding-left: 1.25rem;
        border-bottom: 0.0625rem solid #f9f8f8;
        background: #f9f8f8;
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        -moz-transition: all .25s ease;
        -o-transition: all .25s ease;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }
    .breadcrumb.panel.active {
        border-bottom: 0.0625rem solid #e3e3e3
    }
    .breadcrumb.text {
        color: #b5b5b5;
        font-family: "Roboto", Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-size: .75rem;
        line-height: 50px;
        line-height: 3.125rem;
        text-transform: capitalize
    }
    .breadcrumb.link:active,
    .breadcrumb.link:link,
    .breadcrumb.link:visited {
        padding-bottom: 2px;
        padding-bottom: .125rem;
        border-bottom: none;
        color: #0083ca;
        text-decoration: none
    }
    .breadcrumb.link:focus,
    .breadcrumb.link:hover {
        border-bottom: 0.0625rem dotted #0083ca
    }
}

@media only all and (min-width: 769px) {
    .breadcrumb.text {
        font-size: 14px;
        font-size: .875rem
    }
}

@media only all and (min-width: 960px) {
    .breadcrumb.panel {
        box-sizing: content-box;
        padding: 0 .625rem
    }
    .breadcrumb.text {
        margin-left: 20px;
        margin-left: 1.25rem
    }
}

@media only all and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .breadcrumb.panel {
        display: none
    }
}

.nav.panel {
    position: fixed;
    top: 0px;
    top: 0rem;
    left: 0px;
    left: 0rem;
    z-index: 200;
    width: 100%;
    height: 50px;
    height: 3.125rem;
    background: #f9f8f8;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.nav.panel.active {
    background: #fff
}

.nav.logo {
    display: inline-block;
    width: 34px;
    width: 2.125rem;
    height: 30px;
    height: 1.875rem;
    margin: 10px;
    margin: .625rem;
    background-image: url("../img/flat-tradehub-logo-mobile.png")
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3 / 2),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
    .nav.logo {
        background-image: url("../img/flat-tradehub-logo-mobile-2x.png");
        background-size: 34px 30px
    }
}

.nav.hamburger {
    position: fixed;
    top: 2px;
    top: .125rem;
    right: 0px;
    right: 0rem;
    width: 48px;
    width: 3rem;
    height: 48px;
    height: 3rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.nav.hamburger span,
.nav.hamburger span::before,
.nav.hamburger span::after {
    display: block;
    width: 28px;
    width: 1.75rem;
    height: 1px;
    height: .0625rem;
    margin: auto;
    background: #b5b5b5;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.nav.hamburger span {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.nav.hamburger span::before {
    content: '';
    position: absolute;
    top: -9px;
    top: -.5625rem
}

.nav.hamburger span::after {
    content: '';
    position: absolute;
    top: 9px;
    top: .5625rem
}

.nav.hamburger.active span {
    background: transparent
}

.nav.hamburger.active span::before {
    background: #f15a22;
    -moz-transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
    -ms-transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
    -webkit-transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
    transform: rotate(45deg) translate(0.3125rem, 0.3125rem)
}

.nav.hamburger.active span::after {
    background: #f15a22;
    -moz-transform: rotate(-45deg) translate(0.4375rem, -0.5rem);
    -ms-transform: rotate(-45deg) translate(0.4375rem, -0.5rem);
    -webkit-transform: rotate(-45deg) translate(0.4375rem, -0.5rem);
    transform: rotate(-45deg) translate(0.4375rem, -0.5rem)
}

.primary.menu.panel {
    z-index: 400;
    position: fixed;
    top: 50px;
    top: 3.125rem;
    right: -1px;
    right: -.0625rem;
    overflow-y: auto;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-color: #e3e3e3;
    border-style: solid;
    border-width: 1px;
    border-width: .0625rem;
    background: #fff;
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.primary.menu.panel.active {
    right: 0;
    -moz-box-shadow: -.3125rem 0 0.8125rem rgba(160, 69, 36, 0.05);
    -webkit-box-shadow: -.3125rem 0 0.8125rem rgba(160, 69, 36, 0.05);
    box-shadow: -.3125rem 0 0.8125rem rgba(160, 69, 36, 0.05);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.primary.menu.container {
    position: relative
}

.primary.menu.container:nth-of-type(even) {
    background: #fbfbfb
}

.primary.menu.btn {
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    height: 3.125rem;
    padding-right: 70px;
    padding-right: 4.375rem;
    padding-left: 20px;
    padding-left: 1.25rem;
    border-bottom: 0.0625rem solid #e3e3e3;
    color: #3e3e3e;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 50px;
    line-height: 3.125rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.menu.btn:focus,
.primary.menu.btn:hover,
.primary.menu.btn.enabled:focus,
.primary.menu.btn.enabled:hover {
    border-bottom: 0.0625rem solid rgba(91, 142, 163, 0.13);
    background: #7ed3f7;
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(91, 142, 163, 0.13)
}

.primary.menu.btn.disabled {
    color: #b5b5b5;
    cursor: not-allowed
}

.primary.menu.btn.disabled:focus,
.primary.menu.btn.disabled:hover {
    border-bottom: 0.0625rem solid #e3e3e3;
    background: inherit;
    color: #b5b5b5;
    text-shadow: none
}

.primary.menu.btn::after {
    content: '\f111';
    position: absolute;
    top: 0px;
    top: 0rem;
    right: 0px;
    right: 0rem;
    display: block;
    width: 49px;
    width: 3.0625rem;
    height: 49px;
    height: 3.0625rem;
    color: #b5b5b5;
    font-family: 'FontAwesome';
    font-size: 10px;
    font-size: .625rem;
    text-align: center;
    line-height: 49px;
    line-height: 3.0625rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.menu.btn.disabled::after,
.primary.menu.btn.enabled::after {
    content: ''
}

.primary.menu.btn:focus::after,
.primary.menu.btn:hover::after {
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(91, 142, 163, 0.13)
}

.primary.menu.dropdown {
    position: absolute;
    top: 0px;
    top: 0rem;
    right: 0px;
    right: 0rem;
    width: 49px;
    width: 3.0625rem;
    height: 49px;
    height: 3.0625rem;
    border-bottom: 0.0625rem solid #e3e3e3;
    border-left: 0.0625rem solid #e3e3e3;
    background: #f4f4f4;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.menu.dropdown.active {
    border-bottom: 0.0625rem solid rgba(91, 142, 163, 0.13);
    border-left: 0.0625rem solid rgba(91, 142, 163, 0.13);
    background: #7ed3f7
}

.primary.menu.dropdown::after {
    position: absolute;
    top: 0px;
    top: 0rem;
    right: 0px;
    right: 0rem;
    display: block;
    width: 49px;
    width: 3.0625rem;
    height: 49px;
    height: 3.0625rem;
    color: #b5b5b5;
    font-family: 'FontAwesome';
    font-size: 12px;
    font-size: .75rem;
    text-align: center;
    line-height: 49px;
    line-height: 3.0625rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.menu.dropdown.active::after {
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(91, 142, 163, 0.13);
    -moz-transform: rotate(90deg) translate(0, 0.0625rem);
    -ms-transform: rotate(90deg) translate(0, 0.0625rem);
    -webkit-transform: rotate(90deg) translate(0, 0.0625rem);
    transform: rotate(90deg) translate(0, 0.0625rem)
}

.enabled+.primary.menu.dropdown:focus,
.enabled+.primary.menu.dropdown:hover {
    border-bottom: 0.0625rem solid rgba(91, 142, 163, 0.13);
    border-left: 0.0625rem solid rgba(91, 142, 163, 0.13);
    background: #7ed3f7
}

.enabled+.primary.menu.dropdown:focus::after,
.enabled+.primary.menu.dropdown:hover::after {
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(91, 142, 163, 0.13)
}

.disabled+.primary.menu.dropdown {
    cursor: not-allowed
}

.disabled+.primary.menu.dropdown::after {
    content: '\f023'
}

.enabled+.primary.menu.dropdown::after {
    content: '\f105';
    font-size: 16px;
    font-size: 1rem
}

.secondary.menu.panel {
    display: none
}

.secondary.menu.btn {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    height: 3.125rem;
    padding-right: 70px;
    padding-right: 4.375rem;
    padding-left: 20px;
    padding-left: 1.25rem;
    border-bottom: 0.0625rem solid #e3e3e3;
    background: #f4f4f4;
    color: #3e3e3e;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 50px;
    line-height: 3.125rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.secondary.menu.btn::after {
    content: '\f111';
    position: absolute;
    top: 0px;
    top: 0rem;
    right: 0px;
    right: 0rem;
    width: 49px;
    width: 3.0625rem;
    height: 49px;
    height: 3.0625rem;
    color: #b5b5b5;
    font-family: 'FontAwesome';
    font-size: 10px;
    font-size: .625rem;
    text-align: center;
    line-height: 49px;
    line-height: 3.0625rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.secondary.menu.btn:focus,
.secondary.menu.btn:hover {
    border-bottom: 0.0625rem solid rgba(15, 94, 136, 0.13);
    background: #0083ca;
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(15, 94, 136, 0.13)
}

.secondary.menu.btn:focus::after,
.secondary.menu.btn:hover::after {
    color: #fff;
    text-shadow: 0 0 0.3125rem rgba(15, 94, 136, 0.13)
}

@media only all and (min-width: 481px) {
    .nav.logo {
        display: inline-block;
        width: 166px;
        width: 10.375rem;
        background-image: url("../img/flat-tradehub-logo-tablet.png")
    }
}

@media only all and (min-width: 481px) and (-webkit-min-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (min--moz-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (-o-min-device-pixel-ratio: 3 / 2),
only all and (min-width: 481px) and (min-device-pixel-ratio: 1.5),
only all and (min-width: 481px) and (min-resolution: 1.5dppx) {
    .nav.logo {
        background-image: url("../img/flat-tradehub-logo-tablet-2x.png");
        background-size: 166px 30px
    }
}

@media only all and (min-width: 481px) {
    .primary.menu.panel {
        width: 250px;
        width: 15.625rem;
        -moz-transform: translate(250, 0);
        -ms-transform: translate(250, 0);
        -webkit-transform: translate(250, 0);
        transform: translate(250, 0)
    }
    .primary.menu.panel.active {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@media only all and (min-width: 769px) {
    .primary.menu.panel {
        width: 300px;
        width: 18.75rem;
        -moz-transform: translate(300, 0);
        -ms-transform: translate(300, 0);
        -webkit-transform: translate(300, 0);
        transform: translate(300, 0)
    }
}

.toggle.container {
    position: fixed;
    top: 13px;
    top: .8125rem;
    right: 48px;
    right: 3rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: auto;
    height: 24px;
    height: 1.5rem;
    cursor: pointer
}

.toggle.on {
    position: relative;
    display: inline-block;
    width: 24px;
    width: 1.5rem;
    height: 24px;
    height: 1.5rem
}

.toggle.on:after {
    content: '\f06e';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    width: 1.5rem;
    color: #e3e3e3;
    font-family: "FontAwesome";
    line-height: 24px;
    line-height: 1.5rem;
    text-align: center
}

.toggle.on::after {
    content: '\f06e';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    width: 1.5rem;
    color: #e3e3e3;
    font-family: "FontAwesome";
    line-height: 24px;
    line-height: 1.5rem;
    text-align: center
}

.toggle.on.active:after {
    color: #b5b5b5
}

.toggle.on.active::after {
    color: #b5b5b5
}

.toggle.off {
    position: relative;
    display: inline-block;
    width: 24px;
    width: 1.5rem;
    height: 24px;
    height: 1.5rem
}

.toggle.off:after {
    content: '\f070';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    width: 1.5rem;
    color: #e3e3e3;
    font-family: "FontAwesome";
    line-height: 24px;
    line-height: 1.5rem;
    text-align: center
}

.toggle.off::after {
    content: '\f070';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    width: 1.5rem;
    color: #e3e3e3;
    font-family: "FontAwesome";
    line-height: 24px;
    line-height: 1.5rem;
    text-align: center
}

.toggle.off.active:after {
    color: #b5b5b5
}

.toggle.off.active::after {
    color: #b5b5b5
}

.toggle.input {
    display: none;
    margin: 0
}

.toggle.input.active+.toggle.control.blue {
    border-color: #7ed3f7;
    background: #b8e7fb
}

.toggle.input.active+.toggle.control.yellow {
    border-color: #f2ca30;
    background: #f8e28d
}

.toggle.input.active+.toggle.control.red {
    border-color: #f15a22;
    background: #f7a485
}

.toggle.input.active+.toggle.control:after {
    left: 0
}

.toggle.input.active+.toggle.control::after {
    left: 0
}

.toggle.control {
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 48px;
    width: 3rem;
    height: 24px;
    height: 1.5rem;
    border-color: #e3e3e3;
    border-radius: 24px;
    border-radius: 1.5rem;
    border-style: solid;
    border-width: 1px;
    border-width: .0625rem;
    -webkit-box-shadow: inset 0 0 0.1875rem rgba(160, 69, 36, 0.05);
    -moz-box-shadow: inset 0 0 0.1875rem rgba(160, 69, 36, 0.05);
    box-shadow: inset 0 0 0.1875rem rgba(160, 69, 36, 0.05);
    background: #f9f8f8
}

.toggle.control:after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    left: 1.5rem;
    display: block;
    width: 22px;
    width: 1.375rem;
    height: 22px;
    height: 1.375rem;
    border-radius: 22px;
    border-radius: 1.375rem;
    -webkit-box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    background: #fff
}

.toggle.control::after {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    left: 1.5rem;
    display: block;
    width: 22px;
    width: 1.375rem;
    height: 22px;
    height: 1.375rem;
    border-radius: 22px;
    border-radius: 1.375rem;
    -webkit-box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    box-shadow: 0 0.0625rem 0.0625rem rgba(160, 69, 36, 0.08);
    background: #fff
}

.overlay.container {
    position: fixed;
    top: 0;
    right: 160px;
    right: 10rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 96px;
    width: 6rem;
    height: 48px;
    height: 3rem
}

.overlay.container.active .overlay.btn {
    top: 0
}

.overlay.btn {
    float: right;
    position: relative;
    top: -48px;
    top: -3rem;
    width: 32px;
    width: 2rem;
    height: 48px;
    height: 3rem;
    cursor: pointer
}

.overlay.btn:before {
    content: '';
    position: absolute;
    top: 53%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    width: 8px;
    width: .5rem;
    height: 8px;
    height: .5rem;
    border-radius: 8px;
    border-radius: .5rem
}

.overlay.btn::before {
    content: '';
    position: absolute;
    top: 53%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    width: 8px;
    width: .5rem;
    height: 8px;
    height: .5rem;
    border-radius: 8px;
    border-radius: .5rem
}

.overlay.btn:hover:before {
    -moz-transform: translate(-50%, -50%) scale(2);
    -ms-transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2)
}

.overlay.btn:hover::before {
    -moz-transform: translate(-50%, -50%) scale(2);
    -ms-transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    transform: translate(-50%, -50%) scale(2)
}

.overlay.btn:after {
    content: '';
    position: absolute;
    top: 53%;
    left: 50%;
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 16px;
    width: 1rem;
    height: 16px;
    height: 1rem;
    border-radius: 16px;
    border-radius: 1rem;
    border-style: solid;
    border-width: 1px;
    border-width: .0625rem
}

.overlay.btn::after {
    content: '';
    position: absolute;
    top: 53%;
    left: 50%;
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 16px;
    width: 1rem;
    height: 16px;
    height: 1rem;
    border-radius: 16px;
    border-radius: 1rem;
    border-style: solid;
    border-width: 1px;
    border-width: .0625rem
}

.overlay.btn.active:hover:before {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.overlay.btn.active:hover::before {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.overlay.btn.active:after {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.overlay.btn.active::after {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.overlay.btn.blue:before {
    background: #7ed3f7
}

.overlay.btn.blue::before {
    background: #7ed3f7
}

.overlay.btn.blue:after {
    border-color: #7ed3f7
}

.overlay.btn.blue::after {
    border-color: #7ed3f7
}

.overlay.btn.yellow:before {
    background: #f2ca30
}

.overlay.btn.yellow::before {
    background: #f2ca30
}

.overlay.btn.yellow:after {
    border-color: #f2ca30
}

.overlay.btn.yellow::after {
    border-color: #f2ca30
}

.overlay.btn.red:before {
    background: #f15a22
}

.overlay.btn.red::before {
    background: #f15a22
}

.overlay.btn.red:after {
    border-color: #f15a22
}

.overlay.btn.red::after {
    border-color: #f15a22
}

.transitionable .toggle.on:after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .125s;
    transition-delay: .125s
}

.transitionable .toggle.on::after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .125s;
    transition-delay: .125s
}

.transitionable .toggle.off:after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .125s;
    transition-delay: .125s
}

.transitionable .toggle.off::after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .125s;
    transition-delay: .125s
}

.transitionable .toggle.control {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.transitionable .toggle.control:after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.transitionable .toggle.control::after {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.transitionable .overlay.btn {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.transitionable .overlay.btn:before {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .0625s;
    transition-delay: .0625s
}

.transitionable .overlay.btn::before {
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-delay: .0625s;
    transition-delay: .0625s
}

.transitionable .overlay.btn:nth-of-type(1) {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.transitionable .overlay.btn:nth-of-type(2) {
    -webkit-transition-delay: .3125s;
    transition-delay: .3125s
}

.transitionable .overlay.btn:nth-of-type(3) {
    -webkit-transition-delay: .375s;
    transition-delay: .375s
}

.transitionable .overlay.btn:after {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.transitionable .overlay.btn::after {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.overlay.modal {
    z-index: 300;
    position: fixed;
    top: 50px;
    top: 3.125rem;
    left: 100%;
    width: 100%;
    height: calc(100% - 50px);
    height: calc(100% - 3.125rem);
    pointer-events: none
}

.overlay.modal.active {
    left: 0
}

.overlay.modal.transitionable {
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.overlay.modal.blue {
    background: rgba(126, 211, 247, 0.21)
}

.overlay.modal.yellow {
    background: rgba(242, 202, 48, 0.21)
}

.overlay.modal.red {
    background: rgba(241, 90, 34, 0.21)
}

@media only all and (min-width: 481px) {
    .toggle.container {
        right: 56px;
        right: 3.5rem
    }
    .overlay.container {
        right: 168px;
        right: 10.5rem
    }
}

.tile.btn.addition::after {
    background-image: url("http://tradehub.myitoc.com.au/img/addition-icon-2x.png")
}

.tile.btn.area::after {
    background-image: url("http://tradehub.myitoc.com.au/img/area-icon-2x.png")
}

.tile.btn.communication::after {
    background-image: url("http://tradehub.myitoc.com.au/img/communication-icon-2x.png")
}

.tile.btn.decimals::after {
    background-image: url("http://tradehub.myitoc.com.au/img/decimals-icon-2x.png")
}

.tile.btn.division::after {
    background-image: url("http://tradehub.myitoc.com.au/img/division-icon-2x.png")
}

.tile.btn.documentation::after {
    background-image: url("http://tradehub.myitoc.com.au/img/documentation-icon-2x.png")
}

.tile.btn.forms::after {
    background-image: url("http://tradehub.myitoc.com.au/img/forms-icon-2x.png")
}

.tile.btn.fractions::after {
    background-image: url("http://tradehub.myitoc.com.au/img/fractions-icon-2x.png")
}

.tile.btn.interpreting::after {
    background-image: url("http://tradehub.myitoc.com.au/img/interpreting-icon-2x.png")
}

.tile.btn.measurements::after {
    background-image: url("http://tradehub.myitoc.com.au/img/measurements-icon-2x.png")
}

.tile.btn.multiplication::after {
    background-image: url("http://tradehub.myitoc.com.au/img/multiplication-icon-2x.png")
}

.tile.btn.percentages::after {
    background-image: url("http://tradehub.myitoc.com.au/img/percentages-icon-2x.png")
}

.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/ratios-icon-2x.png")
}

.tile.btn.skim.and.scan::after {
    background-image: url("http://tradehub.myitoc.com.au/img/skim-and-scan-icon-2x.png")
}

.tile.btn.subtraction::after {
    background-image: url("http://tradehub.myitoc.com.au/img/subtraction-icon-2x.png")
}

.tile.btn.tallying::after {
    background-image: url("http://tradehub.myitoc.com.au/img/tallying-icon-2x.png")
}

.tile.btn.transposing::after {
    background-image: url("http://tradehub.myitoc.com.au/img/transposing-icon-2x.png")
}

.tile.btn.volume::after {
    background-image: url("http://tradehub.myitoc.com.au/img/volume-icon-2x.png")
}

.content.container {
    z-index: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 3.125rem 0 3.125rem;
    -moz-box-shadow: 0 0.3125rem 0.8125rem #000;
    -webkit-box-shadow: 0 0.3125rem 0.8125rem #000;
    box-shadow: 0 0.3125rem 0.8125rem #000;
    margin-bottom: 50px;
    margin-bottom: 3.125rem;
    background: #f9f8f8;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.tile.container {
    position: relative;
    width: 50%;
    padding-top: 50%;
    margin: 0 auto 3.125rem
}

.disabled .tile.btn,
.enabled .tile.btn {
    position: absolute;
    top: 0px;
    top: 0rem;
    left: 0px;
    left: 0rem;
    width: 100%;
    height: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background-color: #fff;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.disabled .js.tile.btn {
    cursor: not-allowed;
    -moz-box-shadow: 0 0 0.1875rem rgba(160, 69, 36, 0.08);
    -webkit-box-shadow: 0 0 0.1875rem rgba(160, 69, 36, 0.08);
    box-shadow: 0 0 0.1875rem rgba(160, 69, 36, 0.08)
}

.enabled .tile.btn {
    -moz-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    -webkit-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13)
}

.disabled .js.tile.btn:focus::after,
.disabled .js.tile.btn:hover::after {
    opacity: .21
}

.enabled .tile.btn:focus,
.enabled .tile.btn:hover {
    -moz-box-shadow: 0 0.5rem 1.3125rem rgba(160, 69, 36, 0.13);
    -webkit-box-shadow: 0 0.5rem 1.3125rem rgba(160, 69, 36, 0.13);
    box-shadow: 0 0.5rem 1.3125rem rgba(160, 69, 36, 0.13);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.disabled .js.tile.btn::after,
.enabled .tile.btn::after {
    content: '';
    position: absolute;
    top: 0px;
    top: 0rem;
    left: 0px;
    left: 0rem;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.disabled .js.tile.btn::after {
    opacity: .13
}

.agriculture.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/agriculture-icon-2x.png")
}

.automotive.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/automotive-icon-2x.png")
}

.construction.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/construction-icon-2x.png")
}

.electrotech.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/electrotech-icon-2x.png")
}

.horticulture.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/horticulture-icon-2x.png")
}

.hospitality.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/hospitality-icon-2x.png")
}

.plumbing.tile.btn::after {
    background-image: url("http://tradehub.myitoc.com.au/img/plumbing-icon-2x.png")
}

.disabled .tile.text,
.enabled .tile.text {
    position: absolute;
    left: 50%;
    margin: 0;
    white-space: nowrap;
    -moz-transform: translate(-50%, .625rem);
    -ms-transform: translate(-50%, .625rem);
    -webkit-transform: translate(-50%, .625rem);
    transform: translate(-50%, .625rem);
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.disabled .tile.text {
    color: #d1d1d1
}

@media only all and (min-width: 481px) {
    .content.container {
        padding: 6.25rem 0 3.75rem;
        margin-bottom: 60px;
        margin-bottom: 3.75rem
    }
    .tile.container {
        width: 60%;
        padding-top: 60%;
        margin: 0 auto 3.75rem
    }
}

@media only all and (min-width: 769px) {
    .content.container {
        padding: 6.25rem 0 5rem;
        margin-bottom: 80px;
        margin-bottom: 5rem
    }
    .tile.container {
        width: 80%;
        padding-top: 80%;
        margin: 0 auto 5rem
    }
    .disabled .tile.text,
    .enabled .tile.text {
        color: #262626;
        opacity: 0;
        -moz-transform: translate(-50%, 2.5rem);
        -ms-transform: translate(-50%, 2.5rem);
        -webkit-transform: translate(-50%, 2.5rem);
        transform: translate(-50%, 2.5rem)
    }
    .enabled .tile.btn:focus+.tile.text,
    .enabled .tile.btn:hover+.tile.text,
    .disabled .tile.btn:focus+.tile.text,
    .disabled .tile.btn:hover+.tile.text {
        -moz-transform: translate(-50%, 1.25rem);
        -ms-transform: translate(-50%, 1.25rem);
        -webkit-transform: translate(-50%, 1.25rem);
        transform: translate(-50%, 1.25rem)
    }
    .disabled .tile.btn:focus+.tile.text,
    .disabled .tile.btn:hover+.tile.text {
        opacity: .34
    }
    .enabled .tile.btn:focus+.tile.text,
    .enabled .tile.btn:hover+.tile.text {
        opacity: 1
    }
}

.primary.accordion.container {
    position: relative;
    height: auto;
    margin: 2.1875rem 0 2.8125rem;
    border: .0625rem solid transparent
}

.primary.accordion.btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    width: 3.125rem;
    height: 50px;
    height: 3.125rem;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -moz-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    -webkit-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    background: #fff;
    text-align: center;
    text-decoration: none;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.accordion.btn:focus,
.primary.accordion.btn:hover {
    -moz-box-shadow: 0 0.5rem 0.8125rem rgba(160, 69, 36, 0.13);
    -webkit-box-shadow: 0 0.5rem 0.8125rem rgba(160, 69, 36, 0.13);
    box-shadow: 0 0.5rem 0.8125rem rgba(160, 69, 36, 0.13);
    -moz-transform: translateY(-50%) scale(1.13);
    -ms-transform: translateY(-50%) scale(1.13);
    -webkit-transform: translateY(-50%) scale(1.13);
    transform: translateY(-50%) scale(1.13)
}

.primary.accordion.btn::after {
    content: '\f067';
    display: block;
    color: #d1d1d1;
    font-family: 'FontAwesome';
    font-size: 12px;
    font-size: .75rem;
    line-height: 50px;
    line-height: 3.125rem;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.primary.accordion.btn.active::after {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

ol>li:nth-child(6n+1) .primary.accordion.btn.active::after {
    color: #7ed3f7
}

ol>li:nth-child(6n+2) .primary.accordion.btn.active::after {
    color: #f58220
}

ol>li:nth-child(6n+3) .primary.accordion.btn.active::after {
    color: #0066b3
}

ol>li:nth-child(6n+4) .primary.accordion.btn.active::after {
    color: #f2ca30
}

ol>li:nth-child(6n+5) .primary.accordion.btn.active::after {
    color: #0083ca
}

ol>li:nth-child(6n+6) .primary.accordion.btn.active::after {
    color: #f15a22
}

.primary.accordion.text {
    display: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: auto;
    padding-right: 70px;
    padding-right: 4.375rem
}

.highlight.container {
    width: 100%;
    height: auto;
    padding: .625rem .625rem 1.5625rem;
    margin-left: -10px;
    margin-left: -.625rem;
    -moz-border-radius: .375rem;
    -webkit-border-radius: .375rem;
    border-radius: .375rem;
    -moz-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    -webkit-box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    box-shadow: 0 0.1875rem 0.3125rem rgba(160, 69, 36, 0.13);
    background: #fff
}

.highlight.active {
    background: #e4f6fd
}

ol>.tally.container {
    margin: 0 0 .625rem 2.125rem
}

.tally.data {
    display: inline-block;
    width: 3px;
    width: .1875rem;
    height: 25px;
    height: 1.5625rem;
    padding: 0px;
    padding: 0rem;
    border-radius: 6px;
    border-radius: .375rem;
    margin: 0 .125rem 0 0;
    background: #757e80
}

.tally.data:nth-child(5n+1) {
    margin-left: 5px;
    margin-left: .3125rem
}

.tally.data:nth-child(5n) {
    position: relative;
    top: -11px;
    top: -.6875rem;
    left: -41px;
    left: -2.5625rem;
    width: 42px;
    width: 2.625rem;
    height: 3px;
    height: .1875rem;
    margin: 0 -2rem 0 0;
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
}

.data.information {
    opacity: 0;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    pointer-events: none
}

.animated.svg.active .data.information {
    animation: 1.5s ease-out 1 forwards fade-in
}

.data.node {
    fill: #757e80;
    stroke: #757e80;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-width: .0625rem;
    pointer-events: none
}

.data.annotation {
    fill: #262626;
    font-size: 18px;
    font-size: 1.125rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .05px;
    letter-spacing: .00313rem;
    pointer-events: none
}

.data.annotation tspan {
    font-weight: 300
}

.animated.svg.one .data.segment {
    opacity: 0;
    transform-origin: 300px 200px
}

.animated.svg.one .data.segment.\31 {
    fill: #f15a22
}

.animated.svg.one.active .data.segment.\31 {
    animation: .25s ease-out 1 forwards explode
}

.animated.svg.one .data.segment.\32 {
    fill: #eee
}

.animated.svg.one.active .data.segment.\32 {
    animation: .25s ease-out .05s 1 forwards explode
}

.animated.svg.one .data.segment.\33 {
    fill: #e3e3e3
}

.animated.svg.one.active .data.segment.\33 {
    animation: .25s ease-out .1s 1 forwards explode
}

.animated.svg.one .data.segment.\34 {
    fill: #d1d1d1
}

.animated.svg.one.active .data.segment.\34 {
    animation: .25s ease-out .15s 1 forwards explode
}

.animated.svg.one .data.segment.\35 {
    fill: #b5b5b5
}

.animated.svg.one.active .data.segment.\35 {
    animation: .25s ease-out .2s 1 forwards explode
}

.animated.svg.one .data.segment.\36 {
    fill: #f58220
}

.animated.svg.one.active .data.segment.\36 {
    animation: .25s ease-out .25s 1 forwards explode
}

.animated.svg.two .data.segment {
    opacity: 0;
    transform-origin: 300px 200px
}

.animated.svg.two .data.segment.\31 {
    fill: #b5b5b5
}

.animated.svg.two.active .data.segment.\31 {
    animation: .25s ease-out 1 forwards explode
}

.animated.svg.two .data.segment.\32 {
    fill: #d1d1d1
}

.animated.svg.two.active .data.segment.\32 {
    animation: .25s ease-out .05s 1 forwards explode
}

.animated.svg.two .data.segment.\33 {
    fill: #e3e3e3
}

.animated.svg.two.active .data.segment.\33 {
    animation: .25s ease-out .1s 1 forwards explode
}

.animated.svg.two .data.segment.\34 {
    fill: #eee
}

.animated.svg.two.active .data.segment.\34 {
    animation: .25s ease-out .15s 1 forwards explode
}

.animated.svg.two .data.segment.\35 {
    fill: #7ed3f7
}

.animated.svg.two.active .data.segment.\35 {
    animation: .25s ease-out .2s 1 forwards explode
}

.animated.svg.three .data.segment {
    opacity: 0;
    transform-origin: 300px 200px
}

.animated.svg.three .data.segment.\31 {
    fill: #0066b3
}

.animated.svg.three.active .data.segment.\31 {
    animation: .25s ease-out 1 forwards explode
}

.animated.svg.three .data.segment.\32 {
    fill: #eee
}

.animated.svg.three.active .data.segment.\32 {
    animation: .25s ease-out .05s 1 forwards explode
}

.animated.svg.three .data.segment.\33 {
    fill: #e3e3e3
}

.animated.svg.three.active .data.segment.\33 {
    animation: .25s ease-out .1s 1 forwards explode
}

.animated.svg.three .data.segment.\34 {
    fill: #d1d1d1
}

.animated.svg.three.active .data.segment.\34 {
    animation: .25s ease-out .15s 1 forwards explode
}

.animated.svg.three .data.segment.\35 {
    fill: #b5b5b5
}

.animated.svg.three.active .data.segment.\35 {
    animation: .25s ease-out .2s 1 forwards explode
}

.animated.svg.three .data.segment.\36 {
    fill: #d1d1d1
}

.animated.svg.three.active .data.segment.\36 {
    animation: .25s ease-out .25s 1 forwards explode
}

.animated.svg.three .data.segment.\37 {
    fill: #e3e3e3
}

.animated.svg.three.active .data.segment.\37 {
    animation: .25s ease-out .3s 1 forwards explode
}

.animated.svg.three .data.segment.\38 {
    fill: #eee
}

.animated.svg.three.active .data.segment.\38 {
    animation: .25s ease-out .35s 1 forwards explode
}

.animated.svg.three .data.segment.\39 {
    fill: #e3e3e3
}

.animated.svg.three.active .data.segment.\39 {
    animation: .25s ease-out .4s 1 forwards explode
}

.animated.svg.three .data.segment.\31 0 {
    fill: #0083ca
}

.animated.svg.three.active .data.segment.\31 0 {
    animation: .25s ease-out .45s 1 forwards explode
}

.animated.svg.four .data.segment {
    opacity: 0;
    transform-origin: 50% 350px;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.animated.svg.four .data.segment:nth-of-type(2n+1) {
    fill: #7ed3f7
}

.animated.svg.four .data.segment:nth-of-type(2n+2) {
    fill: #71b9d8
}

.animated.svg.four.active .data.segment.\31 {
    animation: .25s ease-out 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 {
    animation: .25s ease-out .65s 1 forwards expand
}

.animated.svg.four.active .data.segment.\33 {
    animation: .25s ease-out .05s 1 forwards expand
}

.animated.svg.four.active .data.segment.\34 {
    animation: .25s ease-out .7s 1 forwards expand
}

.animated.svg.four.active .data.segment.\35 {
    animation: .25s ease-out .1s 1 forwards expand
}

.animated.svg.four.active .data.segment.\36 {
    animation: .25s ease-out .75s 1 forwards expand
}

.animated.svg.four.active .data.segment.\37 {
    animation: .25s ease-out .15s 1 forwards expand
}

.animated.svg.four.active .data.segment.\38 {
    animation: .25s ease-out .8s 1 forwards expand
}

.animated.svg.four.active .data.segment.\39 {
    animation: .25s ease-out .2s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 0 {
    animation: .25s ease-out .85s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 1 {
    animation: .25s ease-out .25s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 2 {
    animation: .25s ease-out .9s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 3 {
    animation: .25s ease-out .3s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 4 {
    animation: .25s ease-out .95s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 5 {
    animation: .25s ease-out .35s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 6 {
    animation: .25s ease-out 1s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 7 {
    animation: .25s ease-out .4s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 8 {
    animation: .25s ease-out 1.05s 1 forwards expand
}

.animated.svg.four.active .data.segment.\31 9 {
    animation: .25s ease-out .45s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 0 {
    animation: .25s ease-out 1.1s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 1 {
    animation: .25s ease-out .5s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 2 {
    animation: .25s ease-out 1.15s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 3 {
    animation: .25s ease-out .55s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 4 {
    animation: .25s ease-out 1.2s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 5 {
    animation: .25s ease-out .6s 1 forwards expand
}

.animated.svg.four.active .data.segment.\32 6 {
    animation: .25s ease-out 1.25s 1 forwards expand
}

@keyframes fade-in {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes expand {
    0% {
        transform: scale(1, 0)
    }
    50% {
        transform: scale(1, 1.21)
    }
    100% {
        opacity: 1;
        transform: scale(1, 1)
    }
}

@keyframes explode {
    0% {
        transform: scale(0)
    }
    50% {
        transform: scale(1.21)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@media only all and (min-width: 481px) {
    .data.information {
        opacity: 0
    }
    .data.container:hover+.data.information {
        opacity: 1
    }
    .animated.svg.active .data.information {
        animation: none
    }
    .animated.svg.four .data.segment:nth-of-type(2n+1) {
        fill: #e3e3e3
    }
    .animated.svg.four .data.segment:nth-of-type(2n+2) {
        fill: #d1d1d1
    }
    .animated.svg.four .data.container:hover .data.segment:nth-of-type(2n+1) {
        fill: #7ed3f7
    }
    .animated.svg.four .data.container:hover .data.segment:nth-of-type(2n+2) {
        fill: #71b9d8
    }
}

@media only all and (min-width: 960px) {
    .highlight.container {
        padding: 1.25rem 1.25rem 3.125rem;
        margin-left: -20px;
        margin-left: -1.25rem
    }
}

.wistia.container {
    position: relative;
    margin-bottom: 1.25rem;
    padding: 56.25% 0 0
}

.wistia.media {
    position: absolute;
    top: 0px;
    top: 0rem;
    left: 0px;
    left: 0rem;
    width: 100%;
    height: 100%
}

.wistia.btn {
    position: absolute;
    top: 0px;
    top: 0rem;
    left: 0px;
    left: 0rem;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.wistia.btn::after {
    content: 'Click to play!';
    position: absolute;
    left: 50%;
    bottom: 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 32px;
    line-height: 2rem;
    white-space: nowrap;
    -moz-transform: translate(-50%, 1.875rem);
    -ms-transform: translate(-50%, 1.875rem);
    -webkit-transform: translate(-50%, 1.875rem);
    transform: translate(-50%, 1.875rem);
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

@media only all and (min-width: 481px) {
    .wistia.btn::after {
        font-size: 32px;
        font-size: 2rem;
        line-height: 40px;
        line-height: 2.5rem
    }
}

@media only all and (min-width: 769px) {
    .wistia.btn::after {
        color: #262626;
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 48px;
        line-height: 3rem;
        opacity: 0;
        -moz-transform: translate(-50%, 3.125rem);
        -ms-transform: translate(-50%, 3.125rem);
        -webkit-transform: translate(-50%, 3.125rem);
        transform: translate(-50%, 3.125rem)
    }
    .wistia.btn:focus::after,
    .wistia.btn:hover::after {
        opacity: 1;
        -moz-transform: translate(-50%, 1.875rem);
        -ms-transform: translate(-50%, 1.875rem);
        -webkit-transform: translate(-50%, 1.875rem);
        transform: translate(-50%, 1.875rem)
    }
}