.colorPicker {
    display: block;
    margin-top: 20px
}

.app-color__inputs .controls {
    width: 50%;
    margin-left: 24px
}

.app-color__inputs .controls-title {
    margin: 1em 0 22px;
    font-weight: bold;
    font-size: 12px;
    color: #BBBFC5;
    letter-spacing: 0.2em;
    text-transform: uppercase
}

.app-color__inputs .extras {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 76px
}

.app-color__inputs .extras .currentColorContainer {
    overflow: hidden
}

.app-color__inputs .extras .currentColor {
    float: right;
    width: 65px;
    height: 30px;
    border: 1px solid #BBB;
    border-radius: .3em
}

.app-color__inputs .extras .colorFields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: auto
}

.app-color__inputs .extras .color {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    margin-left: 0.5em
}

.app-color__inputs .extras .color label {
    margin-top: 0.5em;
    font-weight: bold;
    font-size: 12px;
    color: #BBBFC5;
    letter-spacing: 0.2em;
    text-transform: uppercase
}

.app-color__inputs .extras .colorFields input {
    width: 48px;
    text-align: center
}

@media only screen and (max-width: 320px) {
    .app-color__inputs .extras .colorFields input {
        width: 40px;
        padding: 0
    }
}

.app-color__inputs .extras .hex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center
}

.app-color__inputs .extras .hex input {
    width: 92px
}

@media only screen and (max-width: 320px) {
    .app-color__inputs .extras .hex input {
        width: 84px;
        padding: 0
    }
}

.app-color__inputs .extras .hex label {
    margin-top: 0.5em;
    font-weight: bold;
    font-size: 12px;
    color: #BBBFC5;
    letter-spacing: 0.2em;
    text-transform: uppercase
}

.colorPicker .twod {
    position: relative;
    width: 100%;
    border-radius: 6px
}

.colorPicker .twod,
.colorPicker .twod .bg {
    width: 100%;
    height: 200px;
    border-radius: 6px
}

.app-color__inputs .oned,
.app-color__inputs .oned .bg {
    height: 32px
}

.app-color__inputs .oned,
.app-color__inputs .oned .bg,
.app-color__inputs .oned .pointer .shape {
    width: 100%
}

.colorPicker .twod .bg {
    position: absolute
}

.colorPicker .twod .pointer {
    position: relative;
    z-index: 2;
    width: 8px
}

.colorPicker .twod .pointer .shape {
    position: absolute
}

.colorPicker .twod .pointer .shape1 {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid black;
    border-radius: 10px
}

.colorPicker .twod .pointer .shape2 {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border: 3px solid white;
    border-radius: 8px
}

.app-color__inputs .oned {
    float: left;
    margin: 0.5em 0
}

.app-color__inputs .oned .bg {
    border-radius: 4px
}

.app-color__inputs .oned .pointer {
    position: relative;
    z-index: 2
}

.app-color__inputs .oned .pointer .shape {
    position: absolute;
    width: 12px;
    margin-left: -6px;
    margin-top: -4px;
    height: 40px;
    border: 3px solid black;
    border-radius: 6px
}

.app-color__inputs .oned .pointer .shape:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 2px
}

.app-color__inputs .oned .bg {
    background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, lime), color-stop(50%, cyan), color-stop(66%, blue), color-stop(83%, #f0f), to(red));
    background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%)
}

.colorPicker .twod .bg1 {
    z-index: 0;
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%)
}

.colorPicker .twod .bg2 {
    z-index: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
    background: linear-gradient(to bottom, transparent 0%, #000 100%)
}

.oned.alpha .bg {
    position: relative;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px
}

.oned.alpha .bg .bg-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left top, right top, from(#090979), to(rgba(9, 9, 121, 0)));
    background-image: linear-gradient(to right, #090979 0%, rgba(9, 9, 121, 0) 100%)
}

.native-js {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.native-js[data-state=visible] {
    visibility: visible;
    opacity: 1
}

.native-js._fixed-footer .native-flex {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.native-js._fixed-footer .native-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    padding: 14px 20px;
    max-width: 800px;
    text-decoration: none;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.native-js._fixed-footer .native-text {
    max-width: 600px
}

.native-js._fixed-footer .native-logo {
    margin-left: 20px;
    width: auto;
    height: 40px
}

.native-js._fixed-footer .native-company {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 12px
}

.native-js._fixed-footer .native-desc {
    font-size: 16px;
    line-height: 1.4
}

.native-js._fixed-footer .native-cta {
    padding-bottom: 2px;
    white-space: nowrap;
    font-weight: 600
}

.native-js._fixed-footer .native-close {
    position: absolute;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.row {
    width: 100%;
    max-width: 84rem;
    margin: 0 auto
}

.row:before,
.row:after {
    content: " ";
    display: table
}

.row:after {
    clear: both
}

@media only screen and (max-width: 770px) {
    .row .row {
        width: auto;
        margin-left: -1rem;
        margin-right: -1rem;
        max-width: none
    }
}

.row .row:before,
.row .row:after {
    content: " ";
    display: table
}

.row .row:after {
    clear: both
}

@media only screen {
    .col-xs-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 0%
    }

    .col-xs-offset-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 0% !important
    }

    .col-xs-push-0 {
        left: 0%
    }

    .col-xs-pull-0 {
        right: 0%
    }

    .col-xs-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 4.16667%
    }

    .col-xs-offset-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 4.16667% !important
    }

    .col-xs-push-1 {
        left: 4.16667%
    }

    .col-xs-pull-1 {
        right: 4.16667%
    }

    .col-xs-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 8.33333%
    }

    .col-xs-offset-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 8.33333% !important
    }

    .col-xs-push-2 {
        left: 8.33333%
    }

    .col-xs-pull-2 {
        right: 8.33333%
    }

    .col-xs-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 12.5%
    }

    .col-xs-offset-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 12.5% !important
    }

    .col-xs-push-3 {
        left: 12.5%
    }

    .col-xs-pull-3 {
        right: 12.5%
    }

    .col-xs-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 16.66667%
    }

    .col-xs-offset-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 16.66667% !important
    }

    .col-xs-push-4 {
        left: 16.66667%
    }

    .col-xs-pull-4 {
        right: 16.66667%
    }

    .col-xs-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20.83333%
    }

    .col-xs-offset-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 20.83333% !important
    }

    .col-xs-push-5 {
        left: 20.83333%
    }

    .col-xs-pull-5 {
        right: 20.83333%
    }

    .col-xs-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 25%
    }

    .col-xs-offset-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 25% !important
    }

    .col-xs-push-6 {
        left: 25%
    }

    .col-xs-pull-6 {
        right: 25%
    }

    .col-xs-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 29.16667%
    }

    .col-xs-offset-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 29.16667% !important
    }

    .col-xs-push-7 {
        left: 29.16667%
    }

    .col-xs-pull-7 {
        right: 29.16667%
    }

    .col-xs-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 33.33333%
    }

    .col-xs-offset-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 33.33333% !important
    }

    .col-xs-push-8 {
        left: 33.33333%
    }

    .col-xs-pull-8 {
        right: 33.33333%
    }

    .col-xs-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 37.5%
    }

    .col-xs-offset-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 37.5% !important
    }

    .col-xs-push-9 {
        left: 37.5%
    }

    .col-xs-pull-9 {
        right: 37.5%
    }

    .col-xs-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 41.66667%
    }

    .col-xs-offset-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 41.66667% !important
    }

    .col-xs-push-10 {
        left: 41.66667%
    }

    .col-xs-pull-10 {
        right: 41.66667%
    }

    .col-xs-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 45.83333%
    }

    .col-xs-offset-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 45.83333% !important
    }

    .col-xs-push-11 {
        left: 45.83333%
    }

    .col-xs-pull-11 {
        right: 45.83333%
    }

    .col-xs-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 50%
    }

    .col-xs-offset-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 50% !important
    }

    .col-xs-push-12 {
        left: 50%
    }

    .col-xs-pull-12 {
        right: 50%
    }

    .col-xs-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 54.16667%
    }

    .col-xs-offset-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 54.16667% !important
    }

    .col-xs-push-13 {
        left: 54.16667%
    }

    .col-xs-pull-13 {
        right: 54.16667%
    }

    .col-xs-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 58.33333%
    }

    .col-xs-offset-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 58.33333% !important
    }

    .col-xs-push-14 {
        left: 58.33333%
    }

    .col-xs-pull-14 {
        right: 58.33333%
    }

    .col-xs-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 62.5%
    }

    .col-xs-offset-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 62.5% !important
    }

    .col-xs-push-15 {
        left: 62.5%
    }

    .col-xs-pull-15 {
        right: 62.5%
    }

    .col-xs-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 66.66667%
    }

    .col-xs-offset-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 66.66667% !important
    }

    .col-xs-push-16 {
        left: 66.66667%
    }

    .col-xs-pull-16 {
        right: 66.66667%
    }

    .col-xs-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 70.83333%
    }

    .col-xs-offset-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 70.83333% !important
    }

    .col-xs-push-17 {
        left: 70.83333%
    }

    .col-xs-pull-17 {
        right: 70.83333%
    }

    .col-xs-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 75%
    }

    .col-xs-offset-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 75% !important
    }

    .col-xs-push-18 {
        left: 75%
    }

    .col-xs-pull-18 {
        right: 75%
    }

    .col-xs-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 79.16667%
    }

    .col-xs-offset-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 79.16667% !important
    }

    .col-xs-push-19 {
        left: 79.16667%
    }

    .col-xs-pull-19 {
        right: 79.16667%
    }

    .col-xs-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 83.33333%
    }

    .col-xs-offset-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 83.33333% !important
    }

    .col-xs-push-20 {
        left: 83.33333%
    }

    .col-xs-pull-20 {
        right: 83.33333%
    }

    .col-xs-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 87.5%
    }

    .col-xs-offset-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 87.5% !important
    }

    .col-xs-push-21 {
        left: 87.5%
    }

    .col-xs-pull-21 {
        right: 87.5%
    }

    .col-xs-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 91.66667%
    }

    .col-xs-offset-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 91.66667% !important
    }

    .col-xs-push-22 {
        left: 91.66667%
    }

    .col-xs-pull-22 {
        right: 91.66667%
    }

    .col-xs-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 95.83333%
    }

    .col-xs-offset-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 95.83333% !important
    }

    .col-xs-push-23 {
        left: 95.83333%
    }

    .col-xs-pull-23 {
        right: 95.83333%
    }

    .col-xs-24 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 100%
    }

    .col-xs-special {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20%
    }

    .col-xs-center {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .col-xs-center:last-child {
        float: none
    }

    .col-xs-uncenter {
        margin-left: 0;
        margin-right: 0;
        float: left
    }

    .col-xs-uncenter:last-child {
        float: left
    }
}

@media only screen and (min-width: 641px) {
    .col-sm-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 0%
    }

    .col-sm-offset-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 0% !important
    }

    .col-sm-push-0 {
        left: 0%
    }

    .col-sm-pull-0 {
        right: 0%
    }

    .col-sm-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 4.16667%
    }

    .col-sm-offset-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 4.16667% !important
    }

    .col-sm-push-1 {
        left: 4.16667%
    }

    .col-sm-pull-1 {
        right: 4.16667%
    }

    .col-sm-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 8.33333%
    }

    .col-sm-offset-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 8.33333% !important
    }

    .col-sm-push-2 {
        left: 8.33333%
    }

    .col-sm-pull-2 {
        right: 8.33333%
    }

    .col-sm-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 12.5%
    }

    .col-sm-offset-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 12.5% !important
    }

    .col-sm-push-3 {
        left: 12.5%
    }

    .col-sm-pull-3 {
        right: 12.5%
    }

    .col-sm-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 16.66667%
    }

    .col-sm-offset-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 16.66667% !important
    }

    .col-sm-push-4 {
        left: 16.66667%
    }

    .col-sm-pull-4 {
        right: 16.66667%
    }

    .col-sm-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20.83333%
    }

    .col-sm-offset-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 20.83333% !important
    }

    .col-sm-push-5 {
        left: 20.83333%
    }

    .col-sm-pull-5 {
        right: 20.83333%
    }

    .col-sm-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 25%
    }

    .col-sm-offset-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 25% !important
    }

    .col-sm-push-6 {
        left: 25%
    }

    .col-sm-pull-6 {
        right: 25%
    }

    .col-sm-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 29.16667%
    }

    .col-sm-offset-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 29.16667% !important
    }

    .col-sm-push-7 {
        left: 29.16667%
    }

    .col-sm-pull-7 {
        right: 29.16667%
    }

    .col-sm-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 33.33333%
    }

    .col-sm-offset-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 33.33333% !important
    }

    .col-sm-push-8 {
        left: 33.33333%
    }

    .col-sm-pull-8 {
        right: 33.33333%
    }

    .col-sm-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 37.5%
    }

    .col-sm-offset-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 37.5% !important
    }

    .col-sm-push-9 {
        left: 37.5%
    }

    .col-sm-pull-9 {
        right: 37.5%
    }

    .col-sm-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 41.66667%
    }

    .col-sm-offset-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 41.66667% !important
    }

    .col-sm-push-10 {
        left: 41.66667%
    }

    .col-sm-pull-10 {
        right: 41.66667%
    }

    .col-sm-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 45.83333%
    }

    .col-sm-offset-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 45.83333% !important
    }

    .col-sm-push-11 {
        left: 45.83333%
    }

    .col-sm-pull-11 {
        right: 45.83333%
    }

    .col-sm-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 50%
    }

    .col-sm-offset-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 50% !important
    }

    .col-sm-push-12 {
        left: 50%
    }

    .col-sm-pull-12 {
        right: 50%
    }

    .col-sm-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 54.16667%
    }

    .col-sm-offset-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 54.16667% !important
    }

    .col-sm-push-13 {
        left: 54.16667%
    }

    .col-sm-pull-13 {
        right: 54.16667%
    }

    .col-sm-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 58.33333%
    }

    .col-sm-offset-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 58.33333% !important
    }

    .col-sm-push-14 {
        left: 58.33333%
    }

    .col-sm-pull-14 {
        right: 58.33333%
    }

    .col-sm-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 62.5%
    }

    .col-sm-offset-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 62.5% !important
    }

    .col-sm-push-15 {
        left: 62.5%
    }

    .col-sm-pull-15 {
        right: 62.5%
    }

    .col-sm-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 66.66667%
    }

    .col-sm-offset-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 66.66667% !important
    }

    .col-sm-push-16 {
        left: 66.66667%
    }

    .col-sm-pull-16 {
        right: 66.66667%
    }

    .col-sm-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 70.83333%
    }

    .col-sm-offset-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 70.83333% !important
    }

    .col-sm-push-17 {
        left: 70.83333%
    }

    .col-sm-pull-17 {
        right: 70.83333%
    }

    .col-sm-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 75%
    }

    .col-sm-offset-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 75% !important
    }

    .col-sm-push-18 {
        left: 75%
    }

    .col-sm-pull-18 {
        right: 75%
    }

    .col-sm-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 79.16667%
    }

    .col-sm-offset-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 79.16667% !important
    }

    .col-sm-push-19 {
        left: 79.16667%
    }

    .col-sm-pull-19 {
        right: 79.16667%
    }

    .col-sm-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 83.33333%
    }

    .col-sm-offset-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 83.33333% !important
    }

    .col-sm-push-20 {
        left: 83.33333%
    }

    .col-sm-pull-20 {
        right: 83.33333%
    }

    .col-sm-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 87.5%
    }

    .col-sm-offset-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 87.5% !important
    }

    .col-sm-push-21 {
        left: 87.5%
    }

    .col-sm-pull-21 {
        right: 87.5%
    }

    .col-sm-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 91.66667%
    }

    .col-sm-offset-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 91.66667% !important
    }

    .col-sm-push-22 {
        left: 91.66667%
    }

    .col-sm-pull-22 {
        right: 91.66667%
    }

    .col-sm-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 95.83333%
    }

    .col-sm-offset-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 95.83333% !important
    }

    .col-sm-push-23 {
        left: 95.83333%
    }

    .col-sm-pull-23 {
        right: 95.83333%
    }

    .col-sm-24 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 100%
    }

    .col-sm-special {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20%
    }

    .col-sm-center {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .col-sm-center:last-child {
        float: none
    }

    .col-sm-uncenter {
        margin-left: 0;
        margin-right: 0;
        float: left
    }

    .col-sm-uncenter:last-child {
        float: left
    }
}

@media only screen and (min-width: 770px) {
    .col-md-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 0%
    }

    .col-md-offset-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 0% !important
    }

    .col-md-push-0 {
        left: 0%
    }

    .col-md-pull-0 {
        right: 0%
    }

    .col-md-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 4.16667%
    }

    .col-md-offset-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 4.16667% !important
    }

    .col-md-push-1 {
        left: 4.16667%
    }

    .col-md-pull-1 {
        right: 4.16667%
    }

    .col-md-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 8.33333%
    }

    .col-md-offset-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 8.33333% !important
    }

    .col-md-push-2 {
        left: 8.33333%
    }

    .col-md-pull-2 {
        right: 8.33333%
    }

    .col-md-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 12.5%
    }

    .col-md-offset-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 12.5% !important
    }

    .col-md-push-3 {
        left: 12.5%
    }

    .col-md-pull-3 {
        right: 12.5%
    }

    .col-md-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 16.66667%
    }

    .col-md-offset-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 16.66667% !important
    }

    .col-md-push-4 {
        left: 16.66667%
    }

    .col-md-pull-4 {
        right: 16.66667%
    }

    .col-md-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20.83333%
    }

    .col-md-offset-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 20.83333% !important
    }

    .col-md-push-5 {
        left: 20.83333%
    }

    .col-md-pull-5 {
        right: 20.83333%
    }

    .col-md-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 25%
    }

    .col-md-offset-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 25% !important
    }

    .col-md-push-6 {
        left: 25%
    }

    .col-md-pull-6 {
        right: 25%
    }

    .col-md-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 29.16667%
    }

    .col-md-offset-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 29.16667% !important
    }

    .col-md-push-7 {
        left: 29.16667%
    }

    .col-md-pull-7 {
        right: 29.16667%
    }

    .col-md-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 33.33333%
    }

    .col-md-offset-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 33.33333% !important
    }

    .col-md-push-8 {
        left: 33.33333%
    }

    .col-md-pull-8 {
        right: 33.33333%
    }

    .col-md-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 37.5%
    }

    .col-md-offset-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 37.5% !important
    }

    .col-md-push-9 {
        left: 37.5%
    }

    .col-md-pull-9 {
        right: 37.5%
    }

    .col-md-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 41.66667%
    }

    .col-md-offset-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 41.66667% !important
    }

    .col-md-push-10 {
        left: 41.66667%
    }

    .col-md-pull-10 {
        right: 41.66667%
    }

    .col-md-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 45.83333%
    }

    .col-md-offset-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 45.83333% !important
    }

    .col-md-push-11 {
        left: 45.83333%
    }

    .col-md-pull-11 {
        right: 45.83333%
    }

    .col-md-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 50%
    }

    .col-md-offset-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 50% !important
    }

    .col-md-push-12 {
        left: 50%
    }

    .col-md-pull-12 {
        right: 50%
    }

    .col-md-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 54.16667%
    }

    .col-md-offset-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 54.16667% !important
    }

    .col-md-push-13 {
        left: 54.16667%
    }

    .col-md-pull-13 {
        right: 54.16667%
    }

    .col-md-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 58.33333%
    }

    .col-md-offset-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 58.33333% !important
    }

    .col-md-push-14 {
        left: 58.33333%
    }

    .col-md-pull-14 {
        right: 58.33333%
    }

    .col-md-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 62.5%
    }

    .col-md-offset-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 62.5% !important
    }

    .col-md-push-15 {
        left: 62.5%
    }

    .col-md-pull-15 {
        right: 62.5%
    }

    .col-md-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 66.66667%
    }

    .col-md-offset-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 66.66667% !important
    }

    .col-md-push-16 {
        left: 66.66667%
    }

    .col-md-pull-16 {
        right: 66.66667%
    }

    .col-md-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 70.83333%
    }

    .col-md-offset-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 70.83333% !important
    }

    .col-md-push-17 {
        left: 70.83333%
    }

    .col-md-pull-17 {
        right: 70.83333%
    }

    .col-md-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 75%
    }

    .col-md-offset-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 75% !important
    }

    .col-md-push-18 {
        left: 75%
    }

    .col-md-pull-18 {
        right: 75%
    }

    .col-md-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 79.16667%
    }

    .col-md-offset-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 79.16667% !important
    }

    .col-md-push-19 {
        left: 79.16667%
    }

    .col-md-pull-19 {
        right: 79.16667%
    }

    .col-md-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 83.33333%
    }

    .col-md-offset-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 83.33333% !important
    }

    .col-md-push-20 {
        left: 83.33333%
    }

    .col-md-pull-20 {
        right: 83.33333%
    }

    .col-md-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 87.5%
    }

    .col-md-offset-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 87.5% !important
    }

    .col-md-push-21 {
        left: 87.5%
    }

    .col-md-pull-21 {
        right: 87.5%
    }

    .col-md-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 91.66667%
    }

    .col-md-offset-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 91.66667% !important
    }

    .col-md-push-22 {
        left: 91.66667%
    }

    .col-md-pull-22 {
        right: 91.66667%
    }

    .col-md-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 95.83333%
    }

    .col-md-offset-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 95.83333% !important
    }

    .col-md-push-23 {
        left: 95.83333%
    }

    .col-md-pull-23 {
        right: 95.83333%
    }

    .col-md-24 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 100%
    }

    .col-md-special {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20%
    }

    .col-md-center {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .col-md-center:last-child {
        float: none
    }

    .col-md-uncenter {
        margin-left: 0;
        margin-right: 0;
        float: left
    }

    .col-md-uncenter:last-child {
        float: left
    }
}

@media only screen and (min-width: 1025px) {
    .col-lg-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 0%
    }

    .col-lg-offset-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 0% !important
    }

    .col-lg-push-0 {
        left: 0%
    }

    .col-lg-pull-0 {
        right: 0%
    }

    .col-lg-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 4.16667%
    }

    .col-lg-offset-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 4.16667% !important
    }

    .col-lg-push-1 {
        left: 4.16667%
    }

    .col-lg-pull-1 {
        right: 4.16667%
    }

    .col-lg-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 8.33333%
    }

    .col-lg-offset-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 8.33333% !important
    }

    .col-lg-push-2 {
        left: 8.33333%
    }

    .col-lg-pull-2 {
        right: 8.33333%
    }

    .col-lg-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 12.5%
    }

    .col-lg-offset-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 12.5% !important
    }

    .col-lg-push-3 {
        left: 12.5%
    }

    .col-lg-pull-3 {
        right: 12.5%
    }

    .col-lg-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 16.66667%
    }

    .col-lg-offset-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 16.66667% !important
    }

    .col-lg-push-4 {
        left: 16.66667%
    }

    .col-lg-pull-4 {
        right: 16.66667%
    }

    .col-lg-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20.83333%
    }

    .col-lg-offset-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 20.83333% !important
    }

    .col-lg-push-5 {
        left: 20.83333%
    }

    .col-lg-pull-5 {
        right: 20.83333%
    }

    .col-lg-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 25%
    }

    .col-lg-offset-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 25% !important
    }

    .col-lg-push-6 {
        left: 25%
    }

    .col-lg-pull-6 {
        right: 25%
    }

    .col-lg-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 29.16667%
    }

    .col-lg-offset-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 29.16667% !important
    }

    .col-lg-push-7 {
        left: 29.16667%
    }

    .col-lg-pull-7 {
        right: 29.16667%
    }

    .col-lg-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 33.33333%
    }

    .col-lg-offset-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 33.33333% !important
    }

    .col-lg-push-8 {
        left: 33.33333%
    }

    .col-lg-pull-8 {
        right: 33.33333%
    }

    .col-lg-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 37.5%
    }

    .col-lg-offset-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 37.5% !important
    }

    .col-lg-push-9 {
        left: 37.5%
    }

    .col-lg-pull-9 {
        right: 37.5%
    }

    .col-lg-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 41.66667%
    }

    .col-lg-offset-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 41.66667% !important
    }

    .col-lg-push-10 {
        left: 41.66667%
    }

    .col-lg-pull-10 {
        right: 41.66667%
    }

    .col-lg-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 45.83333%
    }

    .col-lg-offset-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 45.83333% !important
    }

    .col-lg-push-11 {
        left: 45.83333%
    }

    .col-lg-pull-11 {
        right: 45.83333%
    }

    .col-lg-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 50%
    }

    .col-lg-offset-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 50% !important
    }

    .col-lg-push-12 {
        left: 50%
    }

    .col-lg-pull-12 {
        right: 50%
    }

    .col-lg-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 54.16667%
    }

    .col-lg-offset-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 54.16667% !important
    }

    .col-lg-push-13 {
        left: 54.16667%
    }

    .col-lg-pull-13 {
        right: 54.16667%
    }

    .col-lg-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 58.33333%
    }

    .col-lg-offset-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 58.33333% !important
    }

    .col-lg-push-14 {
        left: 58.33333%
    }

    .col-lg-pull-14 {
        right: 58.33333%
    }

    .col-lg-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 62.5%
    }

    .col-lg-offset-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 62.5% !important
    }

    .col-lg-push-15 {
        left: 62.5%
    }

    .col-lg-pull-15 {
        right: 62.5%
    }

    .col-lg-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 66.66667%
    }

    .col-lg-offset-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 66.66667% !important
    }

    .col-lg-push-16 {
        left: 66.66667%
    }

    .col-lg-pull-16 {
        right: 66.66667%
    }

    .col-lg-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 70.83333%
    }

    .col-lg-offset-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 70.83333% !important
    }

    .col-lg-push-17 {
        left: 70.83333%
    }

    .col-lg-pull-17 {
        right: 70.83333%
    }

    .col-lg-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 75%
    }

    .col-lg-offset-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 75% !important
    }

    .col-lg-push-18 {
        left: 75%
    }

    .col-lg-pull-18 {
        right: 75%
    }

    .col-lg-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 79.16667%
    }

    .col-lg-offset-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 79.16667% !important
    }

    .col-lg-push-19 {
        left: 79.16667%
    }

    .col-lg-pull-19 {
        right: 79.16667%
    }

    .col-lg-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 83.33333%
    }

    .col-lg-offset-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 83.33333% !important
    }

    .col-lg-push-20 {
        left: 83.33333%
    }

    .col-lg-pull-20 {
        right: 83.33333%
    }

    .col-lg-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 87.5%
    }

    .col-lg-offset-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 87.5% !important
    }

    .col-lg-push-21 {
        left: 87.5%
    }

    .col-lg-pull-21 {
        right: 87.5%
    }

    .col-lg-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 91.66667%
    }

    .col-lg-offset-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 91.66667% !important
    }

    .col-lg-push-22 {
        left: 91.66667%
    }

    .col-lg-pull-22 {
        right: 91.66667%
    }

    .col-lg-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 95.83333%
    }

    .col-lg-offset-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 95.83333% !important
    }

    .col-lg-push-23 {
        left: 95.83333%
    }

    .col-lg-pull-23 {
        right: 95.83333%
    }

    .col-lg-24 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 100%
    }

    .col-lg-special {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20%
    }

    .col-lg-center {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .col-lg-center:last-child {
        float: none
    }

    .col-lg-uncenter {
        margin-left: 0;
        margin-right: 0;
        float: left
    }

    .col-lg-uncenter:last-child {
        float: left
    }
}

@media only screen and (min-width: 1441px) {
    .col-xl-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 0%
    }

    .col-xl-offset-0 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 0% !important
    }

    .col-xl-push-0 {
        left: 0%
    }

    .col-xl-pull-0 {
        right: 0%
    }

    .col-xl-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 4.16667%
    }

    .col-xl-offset-1 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 4.16667% !important
    }

    .col-xl-push-1 {
        left: 4.16667%
    }

    .col-xl-pull-1 {
        right: 4.16667%
    }

    .col-xl-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 8.33333%
    }

    .col-xl-offset-2 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 8.33333% !important
    }

    .col-xl-push-2 {
        left: 8.33333%
    }

    .col-xl-pull-2 {
        right: 8.33333%
    }

    .col-xl-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 12.5%
    }

    .col-xl-offset-3 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 12.5% !important
    }

    .col-xl-push-3 {
        left: 12.5%
    }

    .col-xl-pull-3 {
        right: 12.5%
    }

    .col-xl-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 16.66667%
    }

    .col-xl-offset-4 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 16.66667% !important
    }

    .col-xl-push-4 {
        left: 16.66667%
    }

    .col-xl-pull-4 {
        right: 16.66667%
    }

    .col-xl-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20.83333%
    }

    .col-xl-offset-5 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 20.83333% !important
    }

    .col-xl-push-5 {
        left: 20.83333%
    }

    .col-xl-pull-5 {
        right: 20.83333%
    }

    .col-xl-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 25%
    }

    .col-xl-offset-6 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 25% !important
    }

    .col-xl-push-6 {
        left: 25%
    }

    .col-xl-pull-6 {
        right: 25%
    }

    .col-xl-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 29.16667%
    }

    .col-xl-offset-7 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 29.16667% !important
    }

    .col-xl-push-7 {
        left: 29.16667%
    }

    .col-xl-pull-7 {
        right: 29.16667%
    }

    .col-xl-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 33.33333%
    }

    .col-xl-offset-8 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 33.33333% !important
    }

    .col-xl-push-8 {
        left: 33.33333%
    }

    .col-xl-pull-8 {
        right: 33.33333%
    }

    .col-xl-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 37.5%
    }

    .col-xl-offset-9 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 37.5% !important
    }

    .col-xl-push-9 {
        left: 37.5%
    }

    .col-xl-pull-9 {
        right: 37.5%
    }

    .col-xl-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 41.66667%
    }

    .col-xl-offset-10 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 41.66667% !important
    }

    .col-xl-push-10 {
        left: 41.66667%
    }

    .col-xl-pull-10 {
        right: 41.66667%
    }

    .col-xl-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 45.83333%
    }

    .col-xl-offset-11 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 45.83333% !important
    }

    .col-xl-push-11 {
        left: 45.83333%
    }

    .col-xl-pull-11 {
        right: 45.83333%
    }

    .col-xl-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 50%
    }

    .col-xl-offset-12 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 50% !important
    }

    .col-xl-push-12 {
        left: 50%
    }

    .col-xl-pull-12 {
        right: 50%
    }

    .col-xl-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 54.16667%
    }

    .col-xl-offset-13 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 54.16667% !important
    }

    .col-xl-push-13 {
        left: 54.16667%
    }

    .col-xl-pull-13 {
        right: 54.16667%
    }

    .col-xl-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 58.33333%
    }

    .col-xl-offset-14 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 58.33333% !important
    }

    .col-xl-push-14 {
        left: 58.33333%
    }

    .col-xl-pull-14 {
        right: 58.33333%
    }

    .col-xl-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 62.5%
    }

    .col-xl-offset-15 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 62.5% !important
    }

    .col-xl-push-15 {
        left: 62.5%
    }

    .col-xl-pull-15 {
        right: 62.5%
    }

    .col-xl-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 66.66667%
    }

    .col-xl-offset-16 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 66.66667% !important
    }

    .col-xl-push-16 {
        left: 66.66667%
    }

    .col-xl-pull-16 {
        right: 66.66667%
    }

    .col-xl-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 70.83333%
    }

    .col-xl-offset-17 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 70.83333% !important
    }

    .col-xl-push-17 {
        left: 70.83333%
    }

    .col-xl-pull-17 {
        right: 70.83333%
    }

    .col-xl-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 75%
    }

    .col-xl-offset-18 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 75% !important
    }

    .col-xl-push-18 {
        left: 75%
    }

    .col-xl-pull-18 {
        right: 75%
    }

    .col-xl-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 79.16667%
    }

    .col-xl-offset-19 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 79.16667% !important
    }

    .col-xl-push-19 {
        left: 79.16667%
    }

    .col-xl-pull-19 {
        right: 79.16667%
    }

    .col-xl-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 83.33333%
    }

    .col-xl-offset-20 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 83.33333% !important
    }

    .col-xl-push-20 {
        left: 83.33333%
    }

    .col-xl-pull-20 {
        right: 83.33333%
    }

    .col-xl-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 87.5%
    }

    .col-xl-offset-21 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 87.5% !important
    }

    .col-xl-push-21 {
        left: 87.5%
    }

    .col-xl-pull-21 {
        right: 87.5%
    }

    .col-xl-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 91.66667%
    }

    .col-xl-offset-22 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 91.66667% !important
    }

    .col-xl-push-22 {
        left: 91.66667%
    }

    .col-xl-pull-22 {
        right: 91.66667%
    }

    .col-xl-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 95.83333%
    }

    .col-xl-offset-23 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        margin-left: 95.83333% !important
    }

    .col-xl-push-23 {
        left: 95.83333%
    }

    .col-xl-pull-23 {
        right: 95.83333%
    }

    .col-xl-24 {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 100%
    }

    .col-xl-special {
        position: relative;
        padding-right: 1rem;
        padding-left: 1rem;
        float: left;
        width: 20%
    }

    .col-xl-center {
        margin-left: auto;
        margin-right: auto;
        float: none
    }

    .col-xl-center:last-child {
        float: none
    }

    .col-xl-uncenter {
        margin-left: 0;
        margin-right: 0;
        float: left
    }

    .col-xl-uncenter:last-child {
        float: left
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 500
}

h3 {
    font-size: 1.5em;
    margin-top: 2em
}

blockquote {
    font-size: 1.6em;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    margin: 0.5em
}

blockquote cite {
    display: block;
    font-size: 16px;
    font-style: normal;
    color: #EA607E;
    margin-top: 1em
}

@media only screen and (min-width: 770px) {
    blockquote {
        font-size: 2em;
        margin: 1.5em 2em
    }
}

::-moz-selection {
    color: #fff;
    background: #002A3A;
}

::selection {
    color: #fff;
    background: #002A3A;
}

::-moz-selection {
    color: #fff;
    background: #002A3A;
}

.body-content {
    padding-bottom: 120px
}

.main-content {
    padding-bottom: 6em
}

.page-divider {
    border-top: 1px solid #DFE1E6;
    margin-top: 3em
}

img {
    max-width: 100%;
    vertical-align: middle
}

a {
    text-decoration: none;
    color: #002A3A;
    font-weight:bold;
}

a:active,
a:focus {
    outline: none
}

::-webkit-input-placeholder {
    color: #99ABC8
}

::-moz-placeholder {
    color: #99ABC8
}

:-ms-input-placeholder {
    color: #99ABC8
}

:-moz-placeholder {
    color: #99ABC8
}

input {
    color: #002A3A;
    font-weight: 500;
    border: 1px solid #002A3A;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}

input:focus {
    outline: none
}

input:focus ::-webkit-input-placeholder {
    color: #BCC9DE
}

input:focus ::-moz-placeholder {
    color: #BCC9DE
}

input:focus :-ms-input-placeholder {
    color: #BCC9DE
}

input:focus :-moz-placeholder {
    color: #BCC9DE
}

button:focus,
button:active {
    outline: none
}

canvas {
    width: 100%;
    height: 100%
}

.nav {
    position: relative;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #E1E5ED;
    z-index: 10
}

.nav-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px
}

.nav-logo__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.nav-logo__svg {
    margin-right: 2px;
    width: 26px
}

.nav-logo__title {
    display: none;
    margin: 0;
    padding: 0;
    font-weight: 500;
    padding-left: 6px
}

@media only screen and (min-width: 641px) {
    .nav-logo__title {
        display: inline-block;
        position: relative;
        top: 0px;
        font-size: 18px;
        padding-left: 8px
    }
}

.nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 24px
}

.nav-list__link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 36px;
    border-radius: 18px;
    padding: 0 12px 0 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid #E1E5ED;
    margin-right: 8px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000)
}

.nav-list__link.is-active {
    border-color: #002A3A;
}

.nav-list__image {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #000;
    margin-right: 6px;
    z-index: 1;
    -webkit-transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
    transition: -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 475ms cubic-bezier(0.8, 0, 0.2, 1);
    transition: transform 475ms cubic-bezier(0.8, 0, 0.2, 1), -webkit-transform 475ms cubic-bezier(0.8, 0, 0.2, 1)
}

.nav-list__link:hover .nav-list__image {
    -webkit-transform: scale(6.5);
    transform: scale(6.5)
}

.subnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 2;
    padding: 1.5em 0 .5em
}

.subnav-crumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    color: #8F92B3
}

.subnav-crumbs span {
    margin: 0 8px
}

.subnav-title {
    font-size: 42px
}

.carbon-ads {
    display: none;
    position: absolute;
    top: 0em;
    right: 2em;
    background: #fff;
    max-width: 370px;
    border-radius: 8px;
    -webkit-box-shadow: 0 10px 30px rgba(4, 40, 110, 0.2);
    box-shadow: 0 10px 30px rgba(4, 40, 110, 0.2)
}

@media (min-width: 770px) {
    .carbon-ads {
        display: block
    }
}

#carbonads {
    display: block;
    overflow: hidden;
    padding: 10px;
    max-width: 370px
}

#carbonads span {
    position: relative;
    display: block;
    overflow: hidden
}

.carbon-img {
    float: left;
    margin-right: 1em
}

.carbon-img img {
    display: block
}

.carbon-text {
    display: block;
    float: left;
    max-width: calc(100% - 146px) !important;
    text-align: left;
    line-height: 1.3;
    text-transform: none !important
}

.carbon-poweredby {
    position: absolute;
    bottom: 0;
    left: 146px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    line-height: 1
}

@media only screen and (min-width: 320px) and (max-width: 759px) {
    #carbonads {
        margin-bottom: 40px
    }
}

.page-header {
    position: relative;
    background: #fff;
    padding: 10em 0 4em;
    overflow: hidden;
    z-index: 1
}

@media only screen and (min-width: 770px) {
    .page-header {
        padding: 6em 0 8em
    }
}

.page-header__subtitle {
    color: #909DBA;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em
}

.page-header__title {
    font-size: 47px;
    clear: both
}

.page-header__square {
    position: absolute;
    top: -130px;
    right: 50px;
    width: 200px;
    height: 200px;
    background: -webkit-gradient(linear, left top, right top, from(#2336b6), to(rgba(31, 38, 103, 0.9)));
    background: linear-gradient(to right, #2336b6, rgba(31, 38, 103, 0.9));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out
}

@media only screen and (min-width: 770px) {
    .page-header__square {
        top: -50px;
        right: 50px;
        width: 300px;
        height: 300px
    }
}

@media only screen and (min-width: 1025px) {
    .page-header__square {
        top: -50px;
        right: 200px;
        width: 400px;
        height: 400px
    }
}

.page-header__circle {
    position: absolute;
    top: -60px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 110px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(49, 207, 171, 0.5)), to(#50e3c2));
    background: linear-gradient(to right, rgba(49, 207, 171, 0.5), #50e3c2);
    mix-blend-mode: multiply;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

@media only screen and (min-width: 770px) {
    .page-header__circle {
        top: -145px;
        right: -100px;
        width: 350px;
        height: 350px;
        border-radius: 175px
    }
}

@media only screen and (min-width: 1025px) {
    .page-header__circle {
        top: -145px;
        right: -30px;
        width: 350px;
        height: 350px;
        border-radius: 175px
    }
}

.header__breadcrumbs {
    margin-bottom: 3em;
    font-size: 12px
}

@media only screen and (min-width: 770px) {
    .header__breadcrumbs {
        margin-bottom: 2em
    }
}

.header__link {
    color: #909DBA;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    font-weight: 700;
    float: left;
    margin-right: 12px
}

.header__item {
    float: left
}

.header__caret {
    float: left;
    margin-right: 12px;
    font-size: 16px;
    position: relative;
    top: -4px
}


.page-center {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 76rem;
    margin: 0 auto;
    z-index: 1
}

.page-content {
    padding: 0 1em
}

.page-article {
    background: #fff;
    padding: 2em 1.5em 1em;
    margin-top: -2em;
    margin-bottom: 3em;
    border: 1px solid #DFE1E6;
    border-radius: 4px
}

.page-article h2 {
    font-size: 1.8em;
    margin: 2em 0 1em
}

.page-article h3 {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 0.5em
}

.page-article p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 1.5em
}

.page-article img {
    max-width: 100%
}

@media only screen and (min-width: 641px) {
    .page-article {
        padding: 2em 2.5em 1em
    }

    .page-article p {
        font-size: 21px
    }
}

.home-aside,
.page-aside,
.blog-aside {
    display: none
}

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

    .home-aside,
    .page-aside,
    .blog-aside {
        display: block;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 252px;
        flex: 0 0 252px;
        padding: 0 1em
    }
}

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

    .home-aside,
    .page-aside,
    .blog-aside {
        display: block;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 372px;
        flex: 0 0 372px;
        padding: 0 1em
    }
}

.home-aside h5,
.page-aside h5,
.blog-aside h5 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.3
}

.home-aside p,
.page-aside p,
.blog-aside p {
    margin: 0.5em auto 1.5em
}

.page-aside__card {
    background: #002A3A;
    color: #fff;
    margin-top: -2em;
    padding: 2em 2em;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1.4
}

.graphic-header {
    position: absolute;
    top: 0;
    left: 0
}

.app {
    position: relative;
    top: 12px;
    right: 0;
    width: 100%;
    height: 546px
}

@media only screen and (min-width: 770px) {
    .app {
        height: 760px;
        margin-bottom: 3em
    }
}

.app-nav {
    position: absolute;
    top: 12px;
    left: 0;
    width: 80px;
    z-index: 4
}

@media only screen and (min-width: 770px) {
    .app-nav {
        top: 32px
    }
}

.app-nav__list-item {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    -webkit-box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
    box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    cursor: pointer;
    -webkit-transition: all 275ms cubic-bezier(0.8, 0, 0.2, 1);
    transition: all 275ms cubic-bezier(0.8, 0, 0.2, 1)
}

.app-nav__list-item.is-active {
    width: 96px
}

@media only screen and (min-width: 770px) {
    .app-nav__list-item {
        width: 88px;
        height: 88px;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 12px
    }

    .app-nav__list-item:hover {
        width: 400px
    }

    .app-nav__list-item.is-active {
        width: 400px
    }
}

.app-nav li:nth-child(1) {
    -webkit-animation: bounceIn1 650ms ease-out;
    animation: bounceIn1 650ms ease-out
}

.app-nav li:nth-child(2) {
    -webkit-animation: bounceIn2 750ms ease-out;
    animation: bounceIn2 750ms ease-out
}

.app-nav li:nth-child(3) {
    -webkit-animation: bounceIn3 850ms ease-out;
    animation: bounceIn3 850ms ease-out
}

.app-nav li:nth-child(4) {
    -webkit-animation: bounceIn4 850ms ease-out;
    animation: bounceIn4 850ms ease-out
}

.app-nav li:nth-child(5) {
    -webkit-animation: bounceIn5 850ms ease-out;
    animation: bounceIn5 850ms ease-out
}

@-webkit-keyframes bounceIn1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    30% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    40% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes bounceIn2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn2 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes bounceIn3 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn3 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes bounceIn4 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    70% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn4 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    70% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes bounceIn5 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    80% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes bounceIn5 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    80% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

.app-nav__list-item-swatch {
    width: 100%;
    height: 100%;
    background: #cc3874;
    border-radius: 5px;
    -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2)
}

.app-nav__list-item-swatch img {
    width: 100%
}

.app-nav__list-item-swatch.particles {
    background: #0F1C70
}

.app-nav__list-item-swatch.gradient {
    background: linear-gradient(89deg, #FDDF46 0%, #17D5D1 100%)
}

.app-nav__list-item-swatch.topography {
    background: #031150
}

.app-nav__list-item-swatch.unsplash {
    background-size: cover;
    background-position: center
}

@media only screen and (min-width: 770px) {
    .app-nav__list-item-swatch {
        width: 56px;
        border-radius: 8px
    }
}

.black-background .app-nav__list-item-swatch {
    background: #333
}

.black-background .app-nav__list-item-swatch.gradient {
    background: linear-gradient(89deg, #777 0%, #000 100%)
}

.white-background .app-nav__list-item-swatch {
    background: #eee
}

.white-background .app-nav__list-item-swatch .triangle {
    fill: #000000
}

.white-background .app-nav__list-item-swatch .particles polyline {
    stroke: #999
}

.white-background .app-nav__list-item-swatch .particles circle {
    fill: #999
}

.white-background .app-nav__list-item-swatch .topo {
    fill: #000
}

.white-background .app-nav__list-item-swatch.gradient {
    background: -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff));
    background: linear-gradient(90deg, #ccc 0%, #fff 100%)
}

.blue-background .app-nav__list-item-swatch {
    background: #0258FF
}

.blue-background .app-nav__list-item-swatch.gradient {
    background: linear-gradient(89deg, #4D90F4 0%, #0258FF 100%)
}

.red-background .app-nav__list-item-swatch {
    background: #FC4343
}

.red-background .app-nav__list-item-swatch.gradient {
    background: linear-gradient(89deg, #FC4343 0%, #FFD1B0 100%)
}

.app-nav__list-item-content {
    position: absolute;
    top: 0;
    left: 96px;
    width: 300px;
    visibility: hidden
}

.app-nav__list-item-content h3 {
    font-size: 20px;
    margin-top: 1.5em;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.app-nav__list-item-content p {
    margin: 0.2em 0;
    color: #909DBA;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

@media only screen and (min-width: 770px) {
    .app-nav__list-item:not(.is-active):hover .app-nav__list-item-content {
        visibility: visible
    }

    .app-nav__list-item:not(.is-active):hover .app-nav__list-item-content h3 {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation: slideUp 400ms ease-out;
        animation: slideUp 400ms ease-out
    }

    .app-nav__list-item:not(.is-active):hover .app-nav__list-item-content p {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation: slideUp 450ms ease-out;
        animation: slideUp 450ms ease-out
    }
}

.app-nav__list-item.is-active .app-nav__list-item-content {
    width: 96px
}

@media only screen and (min-width: 770px) {
    .app-nav__list-item.is-active .app-nav__list-item-content {
        width: auto;
        visibility: visible
    }

    .app-nav__list-item.is-active .app-nav__list-item-content h3,
    .app-nav__list-item.is-active .app-nav__list-item-content p {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    50% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

.app-screen {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 60px);
    height: 420px;
    -webkit-box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
    box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3)
}

@media only screen and (min-width: 770px) {
    .app-screen {
        width: calc(100% - 120px);
        border-radius: 10px;
        height: 760px;
    }
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    background-size: cover;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    clip: rect(-100px, 1400px, 760px, -100px);
    -webkit-animation: wipe 850ms cubic-bezier(0.8, 0, 0.2, 1);
    animation: wipe 850ms cubic-bezier(0.8, 0, 0.2, 1)
}

@media only screen and (min-width: 770px) {
    .background {
        border-radius: 10px
    }
}

@-webkit-keyframes wipe {
    0% {
        clip: rect(-100px, 0px, 760px, -100px)
    }

    100% {
        clip: rect(-100px, 1400px, 760px, -100px)
    }
}

@keyframes wipe {
    0% {
        clip: rect(-100px, 0px, 760px, -100px)
    }

    100% {
        clip: rect(-100px, 1400px, 760px, -100px)
    }
}

.white-background .background {
    background: #fff !important
}

.canvas {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 650ms ease-in-out;
    transition: all 650ms ease-in-out;
    border-radius: 6px
}

.canvas.opacity {
    opacity: 0
}

.app-dropup {
    position: absolute;
    right: 0;
    bottom: 142px;
    height: 400px;
    width: 340px;
    -webkit-perspective: 500px;
    perspective: 500px;
    z-index: 8
}

@media only screen and (min-width: 770px) {
    .app-dropup {
        right: 40px;
    }
}

.app-dropup__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateX(10deg);
    transform: rotateX(10deg);
    opacity: 0;
    visibility: hidden;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transition: all 225ms ease-out;
    transition: all 225ms ease-out
}

.app-dropup__content.is-active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg)
}

.white-background .app-dropup__content {
    background: #f2f2f2
}

.app-dropup__content ul {
    height: calc(100% - 20px);
    padding: 1em 0 0 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.app-dropup__content ul::-webkit-scrollbar {
    width: 12px
}

.app-dropup__content ul::-webkit-scrollbar-thumb {
    background: #c6ccde;
    border-radius: 8px;
    border: 2px solid #fff
}

.app-dropup__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top: 1px solid #ccc;
    line-height: 40px;
    z-index: 10;
    font-size: 12px
}

.app-dropup__footer a {
    color: #EA607E
}

.app-dropup__footer span {
    display: none
}

@media only screen and (min-width: 770px) {
    .app-dropup__footer {
        font-size: 16px
    }

    .app-dropup__footer span {
        display: inline
    }
}

.app-menu {
    position: absolute;
    bottom: 44px;
    right: 0;
    width: 100%;
    z-index: 8
}

@media only screen and (min-width: 770px) {
    .app-menu {
        left: 0;
        right: 2em;
        bottom:5em;
    }
}

.app-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 246px;
    height: 72px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 225ms ease-out;
    transition: all 225ms ease-out
}

.app-options:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    z-index: -1
}

.text-background {
    overflow: hidden;
    z-index: 100;
    position: absolute;
    left: 150px;
    bottom: 50px;
}

.text-content input {
    background: transparent;
    border: none;
    width:100%;
}

.text-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.text-background {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 8em;
    width: 430px;
    height: 90px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 225ms ease-out;
    transition: all 225ms ease-out;
}

.app-share::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.app-share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 225ms ease-out;
    transition: all 225ms ease-out;
}

@media only screen and (min-width: 770px) {
    .app-options {
        right: 2em;
        width: 330px;
        height: 88px;
        padding: 0 1em 0 2em
    }
    
    .app-share {
        left: 28em;
        width: 470px;
        height: 90px;
    }
}

.white-background .app-options {
    background: #f2f2f2
}

.app-options__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.app-option__menu {
    padding: 0 1em
}

.app-option {
    display: block;
    position: relative;
    padding: 0.6em 0;
    margin: 0 0.8em;
    border: 1px solid transparent;
    border-radius: 6px;
    opacity: 0;
    cursor: pointer;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.app-option:after {
    content: '';
    position: absolute;
    top: 33px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-image: url(https://www.alburycity.nsw.gov.au/__data/assets/file/0009/326385/check.svg);
    background-repeat: no-repeat;
    background-position: 94% center;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
    opacity: 0
}

.app-option h3 {
    font-size: 12px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0
}

@media only screen and (min-width: 770px) {
    .app-option {
        padding: 0.6em 1em
    }

    .app-option.is-active:after {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}

.app-option__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.app-option__color {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0F1C70;
    margin-right: 0.5em
}

.app-option__color:last-child {
    margin-right: 0
}

@media only screen and (min-width: 770px) {
    .app-option__color {
        width: 40px;
        height: 40px
    }
}

.app-option__image {
    width: 100px;
    height: 66px;
    border-radius: 4px;
    background-size: cover;
    margin-right: 0.5em
}

.app-menu .app-option__image {
    margin-left: -10px;
    margin-right: 22px;
}

.app-option__symbol {
    display: none;
    padding: 0;
}

@media only screen and (min-width: 770px) {
    .app-option__symbol {
        display: block
    }
}

.app-download {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: auto;
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 8px
}

.app-download:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
    z-index: -1
}

@media only screen and (min-width: 770px) {
    .app-download {
        width: 88px;
        height: 88px;
        right: 2em
    }
}

/* -------------------------------- 

File#: _1_animated-headline
Title: Animated Headline
Descr: A collection of word replacement effects
Usage: codyhouse.co/license

-------------------------------- */
.text-anim__wrapper {
  position: relative;
  display: inline-block;
}

.js .text-anim__word {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-block;
  white-space: normal;
}
.js .text-anim__word--in {
  position: relative;
  z-index: 2;
}

.js .text-anim--rotate {
  --text-anim-duration: 0.85s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--rotate .text-anim__wrapper {
  -webkit-perspective: 300px;
          perspective: 300px;
}
.js .text-anim--rotate .text-anim__word {
  opacity: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}
.js .text-anim--rotate .text-anim__word--in {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.js .text-anim--rotate .text-anim__word--out {
  opacity: 0;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity calc(var(--text-anim-duration) / 6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}

.js .text-anim--loader {
  --text-anim-duration: 2.5s;
  --text-anim-pause: 0s;
}
.js .text-anim--loader .text-anim__word {
  color: transparent;
  transition: color 0.2s;
}
.js .text-anim--loader .text-anim__word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: translateY(100%) scaleX(0);
          transform: translateY(100%) scaleX(0);
  transition: -webkit-transform var(--text-anim-duration) var(--ease-out);
  transition: transform var(--text-anim-duration) var(--ease-out);
  transition: transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out);
}
.js .text-anim--loader .text-anim__word--in {
  color: currentColor;
}
.js .text-anim--loader .text-anim__word--in::after {
  -webkit-transform: translateY(100%) scaleX(1);
          transform: translateY(100%) scaleX(1);
}
.js .text-anim--loader .text-anim__word--out {
  color: transparent;
}
.js .text-anim--loader .text-anim__word--out::after {
  transition: none;
  -webkit-transform: translateY(100%) scaleX(0);
          transform: translateY(100%) scaleX(0);
}

.js .text-anim--slide {
  --text-anim-duration: 0.5s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--slide .text-anim__wrapper {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  padding: 0.1em 0;
}
.js .text-anim--slide .text-anim__word {
  height: 100%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.js .text-anim--slide .text-anim__word--in,
.js .text-anim--slide .text-anim__word--out {
  -webkit-animation-duration: var(--text-anim-duration);
          animation-duration: var(--text-anim-duration);
  -webkit-animation-timing-function: var(--ease-out-back);
          animation-timing-function: var(--ease-out-back);
}
.js .text-anim--slide .text-anim__word--in {
  -webkit-animation-name: text-anim-slide-in;
          animation-name: text-anim-slide-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.js .text-anim--slide .text-anim__word--out {
  -webkit-animation-name: text-anim-slide-out;
          animation-name: text-anim-slide-out;
}

@-webkit-keyframes text-anim-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes text-anim-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes text-anim-slide-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes text-anim-slide-out {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.js .text-anim--zoom {
  --text-anim-duration: 0.85s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--zoom .text-anim__wrapper {
  -webkit-perspective: 300px;
          perspective: 300px;
}
.js .text-anim--zoom .text-anim__word {
  opacity: 0;
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
  transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out);
}
.js .text-anim--zoom .text-anim__word--in {
  opacity: 1;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.js .text-anim--zoom .text-anim__word--out {
  opacity: 0;
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
}

.js .text-anim--push {
  --text-anim-duration: 0.65s;
  --text-anim-pause: 2.5s;
}
.js .text-anim--push .text-anim__word {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  transition: none;
}
.js .text-anim--push .text-anim__word--in,
.js .text-anim--push .text-anim__word--out {
  transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back);
  transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
}
.js .text-anim--push .text-anim__word--in {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.js .text-anim--push .text-anim__word--out {
  opacity: 0;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}

.js .text-anim--clip {
  --text-anim-duration: 0.7s;
  --text-anim-pause: 2s;
  --text-anim-border-width: 2px;
}
.js .text-anim--clip .text-anim__wrapper {
  overflow: hidden;
  vertical-align: top;
}
.js .text-anim--clip .text-anim__wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 0.7em);
  height: 1.4em;
  width: var(--text-anim-border-width);
  background-color: var(--color-accent);
}
.js .text-anim--clip .text-anim__wrapper--pulse::after {
  -webkit-animation: text-anim-pulse 0.8s infinite;
          animation: text-anim-pulse 0.8s infinite;
}
.js .text-anim--clip .text-anim__word {
  opacity: 0;
  padding-right: var(--text-anim-border-width);
}
.js .text-anim--clip .text-anim__word--in {
  opacity: 1;
}

@-webkit-keyframes text-anim-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes text-anim-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


/* -------------------------------- 

File#: _1_main-footer-v4
Title: Main Footer v4
Descr: Footer navigation template
Usage: codyhouse.co/license

-------------------------------- */
.footer-v4 {
  position: relative;
  z-index: 1;
}

.footer-v4__nav {
  margin-bottom: var(--space-lg);
}

.footer-v4__nav-item {
  margin-bottom: var(--space-sm);
}
.footer-v4__nav-item a {
  color: var(--color-contrast-high);
  font-size: 1.25em;
}
.footer-v4__nav-item a:hover {
  color: var(--color-primary);
}

.footer-v4__logo {
  margin-bottom: var(--space-sm);
}
.footer-v4__logo a, .footer-v4__logo svg, .footer-v4__logo img {
  width: 366px;
  height: 40px;
  display: block;
}

.footer-v4__print {
  color: var(--color-contrast-medium);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

.footer-v4__socials {
  display: flex;
  align-items: center;
}
.footer-v4__socials a {
  text-decoration: none;
  display: inline-block;
  margin-right: var(--space-xs);
  color: var(--color-contrast-medium);
}
.footer-v4__socials a:hover {
  color: var(--color-contrast-high);
}
.footer-v4__socials a svg {
  display: block;
  width: 1.25em;
  height: 1.25em;
  color: inherit;
}

@media (min-width: 64rem) {
  .footer-v4 {
    text-align: center;
  }

  .footer-v4__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-v4__nav-item {
    display: inline-block;
    margin: var(--space-xxxs) var(--space-xs);
  }
  .footer-v4__nav-item a {
    font-size: 0.75em;
  }
  .footer-v4__nav-item:first-child {
    padding-left: 0;
  }
  .footer-v4__nav-item:last-child {
    padding-right: 0;
  }

  .footer-v4__logo {
    display: inline-block;
  }

  .footer-v4__print {
    font-size: var(--text-xs);
  }

  .footer-v4__socials {
    justify-content: center;
  }
  .footer-v4__socials a {
    margin: 0 var(--space-xxxs);
  }
  .footer-v4__socials a svg {
    width: 1em;
    height: 1em;
  }
}
.js .text-anim__word {
  white-space: normal !important;
}

img.signature {
    margin: 0 !important;
}