html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

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

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

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

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

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

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

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

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

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

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

td, th {
    padding: 0
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
    background-color: #f1f3f4
}

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

a {
    color: #3197D6;
    text-decoration: none
}

a:focus, a:hover {
    color: #1f6c9c;
    text-decoration: underline
}

a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

figure {
    margin: 0
}

img {
    vertical-align: middle
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto
}

.img-rounded {
    border-radius: 6px
}

.img-thumbnail {
    padding: 4px;
    line-height: 1.42857;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: auto
}

.img-circle {
    border-radius: 50%
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

[role=button] {
    cursor: pointer
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-weight: 400;
    line-height: 1;
    color: #999
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
    font-size: 65%
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px
}

.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-size: 75%
}

.h1, h1 {
    font-size: 36px
}

.h2, h2 {
    font-size: 30px
}

.h3, h3 {
    font-size: 24px
}

.h4, h4 {
    font-size: 18px
}

.h5, h5 {
    font-size: 14px
}

.h6, h6 {
    font-size: 12px
}

p {
    margin: 0 0 10px
}

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4
}

@media (min-width: 768px) {
    .lead {
        font-size: 21px
    }
}

.small, small {
    font-size: 85%
}

.mark, mark {
    background-color: #fcf8e3;
    padding: .2em
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-justify {
    text-align: justify
}

.text-nowrap {
    white-space: nowrap
}

.text-lowercase {
    text-transform: lowercase
}

.initialism, .text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-muted {
    color: #999
}

.text-primary {
    color: #3197D6
}

a.text-primary:focus, a.text-primary:hover {
    color: #237bb1
}

.text-success {
    color: #3c763d
}

a.text-success:focus, a.text-success:hover {
    color: #2b542c
}

.text-info {
    color: #31708f
}

a.text-info:focus, a.text-info:hover {
    color: #245269
}

.text-warning {
    color: #8a6d3b
}

a.text-warning:focus, a.text-warning:hover {
    color: #66512c
}

.text-danger {
    color: #D21B14
}

a.text-danger:focus, a.text-danger:hover {
    color: #a31510
}

.bg-primary {
    color: #fff
}

.bg-primary {
    background-color: #3197D6
}

a.bg-primary:focus, a.bg-primary:hover {
    background-color: #237bb1
}

.bg-success {
    background-color: #dff0d8
}

a.bg-success:focus, a.bg-success:hover {
    background-color: #c1e2b3
}

.bg-info {
    background-color: #d9edf7
}

a.bg-info:focus, a.bg-info:hover {
    background-color: #afd9ee
}

.bg-warning {
    background-color: #fcf8e3
}

a.bg-warning:focus, a.bg-warning:hover {
    background-color: #f7ecb5
}

.bg-danger {
    background-color: #f2dede
}

a.bg-danger:focus, a.bg-danger:hover {
    background-color: #e4b9b9
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee
}

ol, ul {
    margin-top: 0;
    margin-bottom: 10px
}

ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0
}

#contact-form .parsley-errors-list, #plus-sub-form .parsley-errors-list.filled, #sub-form .parsley-errors-list.filled, .list-unstyled {
    padding-left: 0;
    list-style: none
}

.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px
}

.list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px
}

dl {
    margin-top: 0;
    margin-bottom: 20px
}

dd, dt {
    line-height: 1.42857
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

.dl-horizontal dd:after, .dl-horizontal dd:before {
    content: " ";
    display: table
}

.dl-horizontal dd:after {
    clear: both
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .dl-horizontal dd {
        margin-left: 180px
    }
}

abbr[data-original-title], abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #999
}

.initialism {
    font-size: 90%
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee
}

blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
    margin-bottom: 0
}

blockquote .small, blockquote footer, blockquote small {
    display: block;
    font-size: 80%;
    line-height: 1.42857;
    color: #999
}

blockquote .small:before, blockquote footer:before, blockquote small:before {
    content: '\2014 \00A0'
}

.blockquote-reverse, blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid #eee;
    border-left: 0;
    text-align: right
}

.blockquote-reverse .small:before, .blockquote-reverse footer:before, .blockquote-reverse small:before, blockquote.pull-right .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before {
    content: ''
}

.blockquote-reverse .small:after, .blockquote-reverse footer:after, .blockquote-reverse small:after, blockquote.pull-right .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after {
    content: '\00A0 \2014'
}

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857
}

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

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px
}

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25)
}

kbd kbd {
    padding: 0;
    font-size: 100%;
    font-weight: 700;
    box-shadow: none
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px
}

pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0
}

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

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

.container:after {
    clear: both
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
}

.container-fluid:after, .container-fluid:before {
    content: " ";
    display: table
}

.container-fluid:after {
    clear: both
}

.row {
    margin-left: -15px;
    margin-right: -15px
}

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

.row:after {
    clear: both
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px
}

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left
}

.col-xs-1 {
    width: 8.33333%
}

.col-xs-2 {
    width: 16.66667%
}

.col-xs-3 {
    width: 25%
}

.col-xs-4 {
    width: 33.33333%
}

.col-xs-5 {
    width: 41.66667%
}

.col-xs-6 {
    width: 50%
}

.col-xs-7 {
    width: 58.33333%
}

.col-xs-8 {
    width: 66.66667%
}

.col-xs-9 {
    width: 75%
}

.col-xs-10 {
    width: 83.33333%
}

.col-xs-11 {
    width: 91.66667%
}

.col-xs-12 {
    width: 100%
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-xs-offset-0 {
    margin-left: 0
}

.col-xs-offset-1 {
    margin-left: 8.33333%
}

.col-xs-offset-2 {
    margin-left: 16.66667%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-4 {
    margin-left: 33.33333%
}

.col-xs-offset-5 {
    margin-left: 41.66667%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-7 {
    margin-left: 58.33333%
}

.col-xs-offset-8 {
    margin-left: 66.66667%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-10 {
    margin-left: 83.33333%
}

.col-xs-offset-11 {
    margin-left: 91.66667%
}

.col-xs-offset-12 {
    margin-left: 100%
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left
    }

    .col-sm-1 {
        width: 8.33333%
    }

    .col-sm-2 {
        width: 16.66667%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-4 {
        width: 33.33333%
    }

    .col-sm-5 {
        width: 41.66667%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-7 {
        width: 58.33333%
    }

    .col-sm-8 {
        width: 66.66667%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-10 {
        width: 83.33333%
    }

    .col-sm-11 {
        width: 91.66667%
    }

    .col-sm-12 {
        width: 100%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .col-sm-offset-0 {
        margin-left: 0
    }

    .col-sm-offset-1 {
        margin-left: 8.33333%
    }

    .col-sm-offset-2 {
        margin-left: 16.66667%
    }

    .col-sm-offset-3 {
        margin-left: 25%
    }

    .col-sm-offset-4 {
        margin-left: 33.33333%
    }

    .col-sm-offset-5 {
        margin-left: 41.66667%
    }

    .col-sm-offset-6 {
        margin-left: 50%
    }

    .col-sm-offset-7 {
        margin-left: 58.33333%
    }

    .col-sm-offset-8 {
        margin-left: 66.66667%
    }

    .col-sm-offset-9 {
        margin-left: 75%
    }

    .col-sm-offset-10 {
        margin-left: 83.33333%
    }

    .col-sm-offset-11 {
        margin-left: 91.66667%
    }

    .col-sm-offset-12 {
        margin-left: 100%
    }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left
    }

    .col-md-1 {
        width: 8.33333%
    }

    .col-md-2 {
        width: 16.66667%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-4 {
        width: 33.33333%
    }

    .col-md-5 {
        width: 41.66667%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-7 {
        width: 58.33333%
    }

    .col-md-8 {
        width: 66.66667%
    }

    .col-md-9 {
        width: 75%
    }

    .col-md-10 {
        width: 83.33333%
    }

    .col-md-11 {
        width: 91.66667%
    }

    .col-md-12 {
        width: 100%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .col-md-offset-0 {
        margin-left: 0
    }

    .col-md-offset-1 {
        margin-left: 8.33333%
    }

    .col-md-offset-2 {
        margin-left: 16.66667%
    }

    .col-md-offset-3 {
        margin-left: 25%
    }

    .col-md-offset-4 {
        margin-left: 33.33333%
    }

    .col-md-offset-5 {
        margin-left: 41.66667%
    }

    .col-md-offset-6 {
        margin-left: 50%
    }

    .col-md-offset-7 {
        margin-left: 58.33333%
    }

    .col-md-offset-8 {
        margin-left: 66.66667%
    }

    .col-md-offset-9 {
        margin-left: 75%
    }

    .col-md-offset-10 {
        margin-left: 83.33333%
    }

    .col-md-offset-11 {
        margin-left: 91.66667%
    }

    .col-md-offset-12 {
        margin-left: 100%
    }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
        float: left
    }

    .col-lg-1 {
        width: 8.33333%
    }

    .col-lg-2 {
        width: 16.66667%
    }

    .col-lg-3 {
        width: 25%
    }

    .col-lg-4 {
        width: 33.33333%
    }

    .col-lg-5 {
        width: 41.66667%
    }

    .col-lg-6 {
        width: 50%
    }

    .col-lg-7 {
        width: 58.33333%
    }

    .col-lg-8 {
        width: 66.66667%
    }

    .col-lg-9 {
        width: 75%
    }

    .col-lg-10 {
        width: 83.33333%
    }

    .col-lg-11 {
        width: 91.66667%
    }

    .col-lg-12 {
        width: 100%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .col-lg-offset-0 {
        margin-left: 0
    }

    .col-lg-offset-1 {
        margin-left: 8.33333%
    }

    .col-lg-offset-2 {
        margin-left: 16.66667%
    }

    .col-lg-offset-3 {
        margin-left: 25%
    }

    .col-lg-offset-4 {
        margin-left: 33.33333%
    }

    .col-lg-offset-5 {
        margin-left: 41.66667%
    }

    .col-lg-offset-6 {
        margin-left: 50%
    }

    .col-lg-offset-7 {
        margin-left: 58.33333%
    }

    .col-lg-offset-8 {
        margin-left: 66.66667%
    }

    .col-lg-offset-9 {
        margin-left: 75%
    }

    .col-lg-offset-10 {
        margin-left: 83.33333%
    }

    .col-lg-offset-11 {
        margin-left: 91.66667%
    }

    .col-lg-offset-12 {
        margin-left: 100%
    }
}

table {
    background-color: transparent
}

caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #999;
    text-align: left
}

th {
    text-align: left
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd
}

.table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
    border-top: 0
}

.table > tbody + tbody {
    border-top: 2px solid #ddd
}

.table .table {
    background-color: #f1f3f4
}

.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 5px
}

.table-bordered {
    border: 1px solid #ddd
}

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #ddd
}

.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border-bottom-width: 2px
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5
}

table col[class*=col-] {
    position: static;
    float: none;
    display: table-column
}

table td[class*=col-], table th[class*=col-] {
    position: static;
    float: none;
    display: table-cell
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active {
    background-color: #f5f5f5
}

.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover {
    background-color: #e8e8e8
}

.table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
    background-color: #dff0d8
}

.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover {
    background-color: #d0e9c6
}

.table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info {
    background-color: #d9edf7
}

.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover {
    background-color: #c4e3f3
}

.table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning {
    background-color: #fcf8e3
}

.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover {
    background-color: #faf2cc
}

.table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
    background-color: #f2dede
}

.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover {
    background-color: #ebcccc
}

.table-responsive {
    overflow-x: auto;
    min-height: .01%
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd
    }

    .table-responsive > .table {
        margin-bottom: 0
    }

    .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
        white-space: nowrap
    }

    .table-responsive > .table-bordered {
        border: 0
    }

    .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > thead > tr > th:first-child {
        border-left: 0
    }

    .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > thead > tr > th:last-child {
        border-right: 0
    }

    .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > th {
        border-bottom: 0
    }
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700
}

input[type=search] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal
}

input[type=file] {
    display: block
}

input[type=range] {
    display: block;
    width: 100%
}

select[multiple], select[size] {
    height: auto
}

input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

output {
    display: block;
    padding-top: 7px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.form-control::-ms-expand {
    border: 0;
    background-color: transparent
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1
}

.form-control[disabled], fieldset[disabled] .form-control {
    cursor: not-allowed
}

textarea.form-control {
    height: auto
}

input[type=search] {
    -webkit-appearance: none
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
        line-height: 34px
    }

    .input-group-sm input[type=date], .input-group-sm input[type=time], .input-group-sm input[type=datetime-local], .input-group-sm input[type=month], input[type=date].input-sm, input[type=time].input-sm, input[type=datetime-local].input-sm, input[type=month].input-sm {
        line-height: 30px
    }

    .input-group-lg input[type=date], .input-group-lg input[type=time], .input-group-lg input[type=datetime-local], .input-group-lg input[type=month], input[type=date].input-lg, input[type=time].input-lg, input[type=datetime-local].input-lg, input[type=month].input-lg {
        line-height: 46px
    }
}

.form-group {
    margin-bottom: 15px
}

.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px \9
}

.checkbox + .checkbox, .radio + .radio {
    margin-top: -5px
}

.checkbox-inline, .radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: 400;
    cursor: pointer
}

.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline {
    margin-top: 0;
    margin-left: 10px
}

fieldset[disabled] input[type=checkbox], fieldset[disabled] input[type=radio], input[type=checkbox].disabled, input[type=checkbox][disabled], input[type=radio].disabled, input[type=radio][disabled] {
    cursor: not-allowed
}

.checkbox-inline.disabled, .radio-inline.disabled, fieldset[disabled] .checkbox-inline, fieldset[disabled] .radio-inline {
    cursor: not-allowed
}

.checkbox.disabled label, .radio.disabled label, fieldset[disabled] .checkbox label, fieldset[disabled] .radio label {
    cursor: not-allowed
}

.form-control-static {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
    min-height: 34px
}

.form-control-static.input-lg, .form-control-static.input-sm {
    padding-left: 0;
    padding-right: 0
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

select.input-sm {
    height: 30px;
    line-height: 30px
}

select[multiple].input-sm, textarea.input-sm {
    height: auto
}

.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.form-group-sm select.form-control {
    height: 30px;
    line-height: 30px
}

.form-group-sm select[multiple].form-control, .form-group-sm textarea.form-control {
    height: auto
}

.form-group-sm .form-control-static {
    height: 30px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px
}

select.input-lg {
    height: 46px;
    line-height: 46px
}

select[multiple].input-lg, textarea.input-lg {
    height: auto
}

.form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px
}

.form-group-lg select.form-control {
    height: 46px;
    line-height: 46px
}

.form-group-lg select[multiple].form-control, .form-group-lg textarea.form-control {
    height: auto
}

.form-group-lg .form-control-static {
    height: 46px;
    min-height: 38px;
    padding: 11px 16px;
    font-size: 18px;
    line-height: 1.33
}

.has-feedback {
    position: relative
}

.has-feedback .form-control {
    padding-right: 42.5px
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none
}

.form-group-lg .form-control + .form-control-feedback, .input-group-lg + .form-control-feedback, .input-lg + .form-control-feedback {
    width: 46px;
    height: 46px;
    line-height: 46px
}

.form-group-sm .form-control + .form-control-feedback, .input-group-sm + .form-control-feedback, .input-sm + .form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label {
    color: #3c763d
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168
}

.has-success .input-group-addon {
    color: #3c763d;
    border-color: #3c763d;
    background-color: #dff0d8
}

.has-success .form-control-feedback {
    color: #3c763d
}

.has-warning .checkbox, .has-warning .checkbox-inline, .has-warning .control-label, .has-warning .help-block, .has-warning .radio, .has-warning .radio-inline, .has-warning.checkbox label, .has-warning.checkbox-inline label, .has-warning.radio label, .has-warning.radio-inline label {
    color: #8a6d3b
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-warning .form-control:focus {
    border-color: #66512c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b
}

.has-warning .input-group-addon {
    color: #8a6d3b;
    border-color: #8a6d3b;
    background-color: #fcf8e3
}

.has-warning .form-control-feedback {
    color: #8a6d3b
}

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: #D21B14
}

.has-error .form-control {
    border-color: #D21B14;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-error .form-control:focus {
    border-color: #a31510;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #f0625c;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #f0625c
}

.has-error .input-group-addon {
    color: #D21B14;
    border-color: #D21B14;
    background-color: #f2dede
}

.has-error .form-control-feedback {
    color: #D21B14
}

.has-feedback label ~ .form-control-feedback {
    top: 25px
}

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373
}

@media (min-width: 768px) {
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle
    }

    .form-inline .form-control-static {
        display: inline-block
    }

    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle
    }

    .form-inline .input-group .form-control, .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn {
        width: auto
    }

    .form-inline .input-group > .form-control {
        width: 100%
    }

    .form-inline .control-label {
        margin-bottom: 0;
        vertical-align: middle
    }

    .form-inline .checkbox, .form-inline .radio {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle
    }

    .form-inline .checkbox label, .form-inline .radio label {
        padding-left: 0
    }

    .form-inline .checkbox input[type=checkbox], .form-inline .radio input[type=radio] {
        position: relative;
        margin-left: 0
    }

    .form-inline .has-feedback .form-control-feedback {
        top: 0
    }
}

.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 7px
}

.form-horizontal .checkbox, .form-horizontal .radio {
    min-height: 27px
}

.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px
}

.form-horizontal .form-group:after, .form-horizontal .form-group:before {
    content: " ";
    display: table
}

.form-horizontal .form-group:after {
    clear: both
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: right;
        margin-bottom: 0;
        padding-top: 7px
    }
}

.form-horizontal .has-feedback .form-control-feedback {
    right: 15px
}

@media (min-width: 768px) {
    .form-horizontal .form-group-lg .control-label {
        padding-top: 11px;
        font-size: 18px
    }
}

@media (min-width: 768px) {
    .form-horizontal .form-group-sm .control-label {
        padding-top: 6px;
        font-size: 12px
    }
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none
}

.btn.active, .btn:active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none
}

a.btn.disabled, fieldset[disabled] a.btn {
    pointer-events: none
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.btn-default.focus, .btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .btn-default.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c
}

.btn-default.active, .btn-default:active, .open > .btn-default.dropdown-toggle {
    background-image: none
}

.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
    background-color: #fff;
    border-color: #ccc
}

.btn-default .badge {
    color: #fff;
    background-color: #333
}

.btn-primary {
    color: #fff;
    background-color: #3197D6;
    border-color: #3197d6
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #237bb1;
    border-color: #164e71
}

.btn-primary:hover {
    color: #fff;
    background-color: #237bb1;
    border-color: #2175a8
}

.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #237bb1;
    border-color: #2175a8
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
    color: #fff;
    background-color: #1d6693;
    border-color: #164e71
}

.btn-primary.active, .btn-primary:active, .open > .btn-primary.dropdown-toggle {
    background-image: none
}

.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #3197D6;
    border-color: #3197d6
}

.btn-primary .badge {
    color: #3197D6;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: #449d44;
    border-color: #255625
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .btn-success.dropdown-toggle.focus, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle:hover {
    color: #fff;
    background-color: #398439;
    border-color: #255625
}

.btn-success.active, .btn-success:active, .open > .btn-success.dropdown-toggle {
    background-image: none
}

.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success .badge {
    color: #5cb85c;
    background-color: #fff
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info.focus, .btn-info:focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85
}

.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85
}

.btn-info.active, .btn-info:active, .open > .btn-info.dropdown-toggle {
    background-image: none
}

.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info .badge {
    color: #5bc0de;
    background-color: #fff
}

.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning.focus, .btn-warning:focus {
    color: #fff;
    background-color: #ec971f;
    border-color: #985f0d
}

.btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .btn-warning.dropdown-toggle.focus, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle:hover {
    color: #fff;
    background-color: #d58512;
    border-color: #985f0d
}

.btn-warning.active, .btn-warning:active, .open > .btn-warning.dropdown-toggle {
    background-image: none
}

.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger.focus, .btn-danger:focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #761c19
}

.btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .btn-danger.dropdown-toggle.focus, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle:hover {
    color: #fff;
    background-color: #ac2925;
    border-color: #761c19
}

.btn-danger.active, .btn-danger:active, .open > .btn-danger.dropdown-toggle {
    background-image: none
}

.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger .badge {
    color: #d9534f;
    background-color: #fff
}

.btn-link {
    color: #3197D6;
    font-weight: 400;
    border-radius: 0
}

.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent
}

.btn-link:focus, .btn-link:hover {
    color: #1f6c9c;
    text-decoration: underline;
    background-color: transparent
}

.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
    color: #999;
    text-decoration: none
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.btn-block {
    display: block;
    width: 100%
}

.btn-block + .btn-block {
    margin-top: 5px
}

input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
    width: 100%
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in {
    opacity: 1
}

.collapse {
    display: none
}

.collapse.in {
    display: block
}

tr.collapse.in {
    display: table-row
}

tbody.collapse.in {
    display: table-row-group
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.dropdown, .dropup {
    position: relative
}

.dropdown-toggle:focus {
    outline: 0
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-clip: padding-box
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857;
    color: #333;
    white-space: nowrap
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #3197D6
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:focus, .dropdown-menu > .disabled > a:hover {
    color: #999
}

.dropdown-menu > .disabled > a:focus, .dropdown-menu > .disabled > a:hover {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed
}

.open > .dropdown-menu {
    display: block
}

.open > a {
    outline: 0
}

.dropdown-menu-right {
    left: auto;
    right: 0
}

.dropdown-menu-left {
    left: 0;
    right: auto
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857;
    color: #999;
    white-space: nowrap
}

.dropdown-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 990
}

.pull-right > .dropdown-menu {
    right: 0;
    left: auto
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    content: ""
}

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu {
        right: 0;
        left: auto
    }

    .navbar-right .dropdown-menu-left {
        left: 0;
        right: auto
    }
}

.nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none
}

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

.nav:after {
    clear: both
}

.nav > li {
    position: relative;
    display: block
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #eee
}

.nav > li.disabled > a {
    color: #999
}

.nav > li.disabled > a:focus, .nav > li.disabled > a:hover {
    color: #999;
    text-decoration: none;
    background-color: transparent;
    cursor: not-allowed
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: #eee;
    border-color: #3197D6
}

.nav .nav-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}

.nav > li > a > img {
    max-width: none
}

.nav-tabs {
    border-bottom: 1px solid #ddd
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0
}

.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default
}

.nav-pills > li {
    float: left
}

.nav-pills > li > a {
    border-radius: 4px
}

.nav-pills > li + li {
    margin-left: 2px
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #3197D6
}

.nav-stacked > li {
    float: none
}

.nav-stacked > li + li {
    margin-top: 2px;
    margin-left: 0
}

.nav-justified, .nav-tabs.nav-justified {
    width: 100%
}

.nav-justified > li, .nav-tabs.nav-justified > li {
    float: none
}

.nav-justified > li > a, .nav-tabs.nav-justified > li > a {
    text-align: center;
    margin-bottom: 5px
}

.nav-justified > .dropdown .dropdown-menu {
    top: auto;
    left: auto
}

@media (min-width: 768px) {
    .nav-justified > li, .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%
    }

    .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
        margin-bottom: 0
    }
}

.nav-tabs-justified, .nav-tabs.nav-justified {
    border-bottom: 0
}

.nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
    margin-right: 0;
    border-radius: 4px
}

.nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:focus, .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
    border: 1px solid #ddd
}

@media (min-width: 768px) {
    .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0
    }

    .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:focus, .nav-tabs-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
        border-bottom-color: #fff
    }
}

.tab-content > .tab-pane {
    display: none
}

.tab-content > .active {
    display: block
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent
}

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

.navbar:after {
    clear: both
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 4px
    }
}

.navbar-header:after, .navbar-header:before {
    content: " ";
    display: table
}

.navbar-header:after {
    clear: both
}

@media (min-width: 768px) {
    .navbar-header {
        float: left
    }
}

.navbar-collapse {
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    -webkit-overflow-scrolling: touch
}

.navbar-collapse:after, .navbar-collapse:before {
    content: " ";
    display: table
}

.navbar-collapse:after {
    clear: both
}

.navbar-collapse.in {
    overflow-y: auto
}

@media (min-width: 768px) {
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important
    }

    .navbar-collapse.in {
        overflow-y: visible
    }

    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse {
        padding-left: 0;
        padding-right: 0
    }
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 340px
}

@media (max-device-width: 480px) and (orientation: landscape) {
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
        max-height: 200px
    }
}

.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
    margin-right: -15px;
    margin-left: -15px
}

@media (min-width: 768px) {
    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
        margin-right: 0;
        margin-left: 0
    }
}

.navbar-static-top {
    z-index: 1000;
    border-width: 0 0 1px
}

@media (min-width: 768px) {
    .navbar-static-top {
        border-radius: 0
    }
}

.navbar-fixed-bottom, .navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030
}

@media (min-width: 768px) {
    .navbar-fixed-bottom, .navbar-fixed-top {
        border-radius: 0
    }
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0
}

.navbar-brand {
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px
}

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration: none
}

.navbar-brand > img {
    display: block
}

@media (min-width: 768px) {
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: -15px
    }
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px
}

.navbar-toggle:focus {
    outline: 0
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none
    }
}

.navbar-nav {
    margin: 7.5px -15px
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none
    }

    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px
    }

    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px
    }

    .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-nav .open .dropdown-menu > li > a:hover {
        background-image: none
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        float: left;
        margin: 0
    }

    .navbar-nav > li {
        float: left
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

.navbar-form {
    margin-left: -15px;
    margin-right: -15px;
    padding: 10px 15px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
    margin-top: 8px;
    margin-bottom: 8px
}

@media (min-width: 768px) {
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle
    }

    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle
    }

    .navbar-form .form-control-static {
        display: inline-block
    }

    .navbar-form .input-group {
        display: inline-table;
        vertical-align: middle
    }

    .navbar-form .input-group .form-control, .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn {
        width: auto
    }

    .navbar-form .input-group > .form-control {
        width: 100%
    }

    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle
    }

    .navbar-form .checkbox, .navbar-form .radio {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle
    }

    .navbar-form .checkbox label, .navbar-form .radio label {
        padding-left: 0
    }

    .navbar-form .checkbox input[type=checkbox], .navbar-form .radio input[type=radio] {
        position: relative;
        margin-left: 0
    }

    .navbar-form .has-feedback .form-control-feedback {
        top: 0
    }
}

@media (max-width: 767px) {
    .navbar-form .form-group {
        margin-bottom: 5px
    }

    .navbar-form .form-group:last-child {
        margin-bottom: 0
    }
}

@media (min-width: 768px) {
    .navbar-form {
        width: auto;
        border: 0;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
    margin-bottom: 0;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.navbar-btn {
    margin-top: 8px;
    margin-bottom: 8px
}

.navbar-btn.btn-sm {
    margin-top: 10px;
    margin-bottom: 10px
}

.navbar-btn.btn-xs {
    margin-top: 14px;
    margin-bottom: 14px
}

.navbar-text {
    margin-top: 15px;
    margin-bottom: 15px
}

@media (min-width: 768px) {
    .navbar-text {
        float: left;
        margin-left: 15px;
        margin-right: 15px
    }
}

@media (min-width: 768px) {
    .navbar-left {
        float: left !important
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px
    }

    .navbar-right ~ .navbar-right {
        margin-right: 0
    }
}

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7
}

.navbar-default .navbar-brand {
    color: #777
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #5e5e5e;
    background-color: transparent
}

.navbar-default .navbar-text {
    color: #777
}

.navbar-default .navbar-nav > li > a {
    color: #777
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: transparent
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #555;
    background-color: #e7e7e7
}

.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:focus, .navbar-default .navbar-nav > .disabled > a:hover {
    color: #ccc;
    background-color: transparent
}

.navbar-default .navbar-toggle {
    border-color: #ddd
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #ddd
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: #e7e7e7;
    color: #555
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #333;
        background-color: transparent
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
        color: #555;
        background-color: #e7e7e7
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover {
        color: #ccc;
        background-color: transparent
    }
}

.navbar-default .navbar-link {
    color: #777
}

.navbar-default .navbar-link:hover {
    color: #333
}

.navbar-default .btn-link {
    color: #777
}

.navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
    color: #333
}

.navbar-default .btn-link[disabled]:focus, .navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:focus, fieldset[disabled] .navbar-default .btn-link:hover {
    color: #ccc
}

.navbar-inverse {
    background-color: #222;
    border-color: #090909
}

.navbar-inverse .navbar-brand {
    color: #999
}

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
    color: #fff;
    background-color: transparent
}

.navbar-inverse .navbar-text {
    color: #999
}

.navbar-inverse .navbar-nav > li > a {
    color: #999
}

.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #fff;
    background-color: transparent
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: #090909
}

.navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:focus, .navbar-inverse .navbar-nav > .disabled > a:hover {
    color: #444;
    background-color: transparent
}

.navbar-inverse .navbar-toggle {
    border-color: #333
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #333
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #101010
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: #090909;
    color: #fff
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #090909
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #090909
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #999
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
        background-color: transparent
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover {
        color: #fff;
        background-color: #090909
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover {
        color: #444;
        background-color: transparent
    }
}

.navbar-inverse .navbar-link {
    color: #999
}

.navbar-inverse .navbar-link:hover {
    color: #fff
}

.navbar-inverse .btn-link {
    color: #999
}

.navbar-inverse .btn-link:focus, .navbar-inverse .btn-link:hover {
    color: #fff
}

.navbar-inverse .btn-link[disabled]:focus, .navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:focus, fieldset[disabled] .navbar-inverse .btn-link:hover {
    color: #444
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination > li {
    display: inline
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    color: #3197D6;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    z-index: 2;
    color: #1f6c9c;
    background-color: #eee;
    border-color: #ddd
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    background-color: #3197D6;
    border-color: #3197D6;
    cursor: default
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #999;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed
}

.pagination-lg > li > a, .pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33
}

.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

.pagination-sm > li > a, .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    background-color: #999;
    border-radius: 10px
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.btn-group-xs > .btn .badge, .btn-xs .badge {
    top: 0;
    padding: 1px 5px
}

.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
    color: #3197D6;
    background-color: #fff
}

.list-group-item > .badge {
    float: right
}

.list-group-item > .badge + .badge {
    margin-right: 5px
}

.nav-pills > li > a > .badge {
    margin-left: 3px
}

a.badge:focus, a.badge:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20)
}

.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50)
}

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none
}

.modal-open {
    overflow: hidden
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    background-clip: padding-box;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0)
}

.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50)
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
}

.modal-header:after, .modal-header:before {
    content: " ";
    display: table
}

.modal-header:after {
    clear: both
}

.modal-header .close {
    margin-top: -2px
}

.modal-title {
    margin: 0;
    line-height: 1.42857
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.modal-footer:after, .modal-footer:before {
    content: " ";
    display: table
}

.modal-footer:after {
    clear: both
}

.modal-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0
}

.modal-footer .btn-group .btn + .btn {
    margin-left: -1px
}

.modal-footer .btn-block + .btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px
    }
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.42857;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 12px;
    opacity: 0;
    filter: alpha(opacity=0)
}

.tooltip.in {
    opacity: .9;
    filter: alpha(opacity=90)
}

.tooltip.top {
    margin-top: -3px;
    padding: 5px 0
}

.tooltip.right {
    margin-left: 3px;
    padding: 0 5px
}

.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0
}

.tooltip.left {
    margin-left: -3px;
    padding: 0 5px
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    right: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.42857;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 14px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.popover.top {
    margin-top: -10px
}

.popover.right {
    margin-left: 10px
}

.popover.bottom {
    margin-top: 10px
}

.popover.left {
    margin-left: -10px
}

.popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0
}

.popover-content {
    padding: 9px 14px
}

.popover > .arrow, .popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.popover > .arrow {
    border-width: 11px
}

.popover > .arrow:after {
    border-width: 10px;
    content: ""
}

.popover.top > .arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #999;
    border-top-color: fadein(rgba(0, 0, 0, .2), 5%);
    bottom: -11px
}

.popover.top > .arrow:after {
    content: " ";
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff
}

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: #999;
    border-right-color: fadein(rgba(0, 0, 0, .2), 5%)
}

.popover.right > .arrow:after {
    content: " ";
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #fff
}

.popover.bottom > .arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: fadein(rgba(0, 0, 0, .2), 5%);
    top: -11px
}

.popover.bottom > .arrow:after {
    content: " ";
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff
}

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: fadein(rgba(0, 0, 0, .2), 5%)
}

.popover.left > .arrow:after {
    content: " ";
    right: 1px;
    border-right-width: 0;
    border-left-color: #fff;
    bottom: -10px
}

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

.clearfix:after {
    clear: both
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.pull-right {
    float: right !important
}

.pull-left {
    float: left !important
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

.hidden {
    display: none !important
}

.affix {
    position: fixed
}

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

.visible-xs {
    display: none !important
}

.visible-sm {
    display: none !important
}

.visible-md {
    display: none !important
}

.visible-lg {
    display: none !important
}

.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block {
    display: none !important
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important
    }

    table.visible-xs {
        display: table !important
    }

    tr.visible-xs {
        display: table-row !important
    }

    td.visible-xs, th.visible-xs {
        display: table-cell !important
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important
    }

    table.visible-sm {
        display: table !important
    }

    tr.visible-sm {
        display: table-row !important
    }

    td.visible-sm, th.visible-sm {
        display: table-cell !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display: inline !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important
    }

    table.visible-md {
        display: table !important
    }

    tr.visible-md {
        display: table-row !important
    }

    td.visible-md, th.visible-md {
        display: table-cell !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display: block !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display: inline !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display: inline-block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important
    }

    table.visible-lg {
        display: table !important
    }

    tr.visible-lg {
        display: table-row !important
    }

    td.visible-lg, th.visible-lg {
        display: table-cell !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display: block !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display: inline !important
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display: inline-block !important
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important
    }
}

.visible-print {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }

    table.visible-print {
        display: table !important
    }

    tr.visible-print {
        display: table-row !important
    }

    td.visible-print, th.visible-print {
        display: table-cell !important
    }
}

.visible-print-block {
    display: none !important
}

@media print {
    .visible-print-block {
        display: block !important
    }
}

.visible-print-inline {
    display: none !important
}

@media print {
    .visible-print-inline {
        display: inline !important
    }
}

.visible-print-inline-block {
    display: none !important
}

@media print {
    .visible-print-inline-block {
        display: inline-block !important
    }
}

@media print {
    .hidden-print {
        display: none !important
    }
}

.pagination {
    border-radius: initial;
    display: block;
    margin: initial;
    padding-left: initial
}

.pad {
    padding: 3.5em 0
}

.u-pad-top-xsm {
    padding-top: .5em
}

@media (min-width: 768px) {
    .u-pad-top-xsm {
        padding-top: 1em
    }
}

.u-pad-top-sm {
    padding-top: 1em
}

@media (min-width: 768px) {
    .u-pad-top-sm {
        padding-top: 2em
    }
}

.u-pad-top-md {
    padding-top: 2em
}

@media (min-width: 768px) {
    .u-pad-top-md {
        padding-top: 4em
    }
}

.u-pad-top-lg {
    padding-top: 3.5em
}

@media (min-width: 768px) {
    .u-pad-top-lg {
        padding-top: 7em
    }
}

.u-pad-left-xsm {
    padding-left: .5em
}

@media (min-width: 768px) {
    .u-pad-left-xsm {
        padding-left: 1em
    }
}

.u-pad-left-sm {
    padding-left: 1em
}

@media (min-width: 768px) {
    .u-pad-left-sm {
        padding-left: 2em
    }
}

.u-pad-left-md {
    padding-left: 2em
}

@media (min-width: 768px) {
    .u-pad-left-md {
        padding-left: 4em
    }
}

.u-pad-left-lg {
    padding-left: 3.5em
}

@media (min-width: 768px) {
    .u-pad-left-lg {
        padding-left: 7em
    }
}

.u-pad-left-xl {
    padding-left: 5em
}

@media (min-width: 768px) {
    .u-pad-left-xl {
        padding-left: 10em
    }
}

.u-pad-bottom-xsm {
    padding-bottom: .5em
}

@media (min-width: 768px) {
    .u-pad-bottom-xsm {
        padding-bottom: 1em
    }
}

.u-pad-bottom-sm {
    padding-bottom: 1em
}

@media (min-width: 768px) {
    .u-pad-bottom-sm {
        padding-bottom: 2em
    }
}

.u-pad-bottom-md {
    padding-bottom: 2em
}

@media (min-width: 768px) {
    .u-pad-bottom-md {
        padding-bottom: 4em
    }
}

.u-pad-bottom-lg {
    padding-bottom: 3.5em
}

@media (min-width: 768px) {
    .u-pad-bottom-lg {
        padding-bottom: 7em
    }
}

.u-pad-bottom-xl {
    padding-bottom: 5em
}

@media (min-width: 768px) {
    .u-pad-bottom-xl {
        padding-bottom: 10em
    }
}

.u-pad-bottom-xxl {
    padding-bottom: 10em
}

@media (min-width: 768px) {
    .u-pad-bottom-xxl {
        padding-bottom: 16em
    }
}

.u-pad-right-xsm {
    padding-right: .5em
}

@media (min-width: 768px) {
    .u-pad-right-xsm {
        padding-right: 1em
    }
}

.u-pad-right-sm {
    padding-right: 1em
}

@media (min-width: 768px) {
    .u-pad-right-sm {
        padding-right: 2em
    }
}

.u-pad-right-md {
    padding-right: 2em
}

@media (min-width: 768px) {
    .u-pad-right-md {
        padding-right: 4em
    }
}

.u-pad-right-lg {
    padding-right: 3.5em
}

@media (min-width: 768px) {
    .u-pad-right-lg {
        padding-right: 7em
    }
}

.u-pad-right-xl {
    padding-right: 5em
}

@media (min-width: 768px) {
    .u-pad-right-xl {
        padding-right: 10em
    }
}

.u-pad-xsm {
    padding: .5em 0
}

@media (min-width: 768px) {
    .u-pad-xsm {
        padding: 1em 0
    }
}

.u-pad-xsm-all {
    padding: .5em
}

@media (min-width: 768px) {
    .u-pad-xsm-all {
        padding: 1em
    }
}

.u-pad-sm {
    padding: 1em 0
}

@media (min-width: 768px) {
    .u-pad-sm {
        padding: 2em 0
    }
}

.u-pad-sm-all {
    padding: 1em
}

@media (min-width: 768px) {
    .u-pad-sm-all {
        padding: 2em
    }
}

.u-pad-md {
    padding: 2em 0
}

@media (min-width: 768px) {
    .u-pad-md {
        padding: 4em 0
    }
}

.u-pad-md-all {
    padding: 2em
}

@media (min-width: 768px) {
    .u-pad-md-all {
        padding: 4em
    }
}

.u-pad-lg {
    padding: 3.5em 0
}

@media (min-width: 768px) {
    .u-pad-lg {
        padding: 7em 0
    }
}

.u-pad-lg-all {
    padding: 3.5em
}

@media (min-width: 768px) {
    .u-pad-lg-all {
        padding: 7em
    }
}

.u-pad-xl {
    padding: 5em 0
}

@media (min-width: 768px) {
    .u-pad-xl {
        padding: 10em 0
    }
}

.u-pad-xl-all {
    padding: 5em
}

@media (min-width: 768px) {
    .u-pad-xl-all {
        padding: 10em
    }
}

.u-margin-xsm {
    margin: .5em 0
}

@media (min-width: 768px) {
    .u-margin-xsm {
        margin: 1em auto
    }
}

.u-margin-sm {
    margin: 1em 0
}

@media (min-width: 768px) {
    .u-margin-sm {
        margin: 2em auto
    }
}

.u-margin-md {
    margin: 2em auto
}

@media (min-width: 768px) {
    .u-margin-md {
        margin: 4em auto
    }
}

.u-margin-lg {
    margin: 3.5em auto
}

@media (min-width: 768px) {
    .u-margin-lg {
        margin: 7em auto
    }
}

.u-margin-xl {
    margin: 5em auto
}

@media (min-width: 768px) {
    .u-margin-xl {
        margin: 10em auto
    }
}

.u-margin-bottom-xsm {
    margin-bottom: .5em
}

@media (min-width: 768px) {
    .u-margin-bottom-xsm {
        margin-bottom: 1em
    }
}

.u-margin-bottom-sm {
    margin-bottom: 1em
}

@media (min-width: 768px) {
    .u-margin-bottom-sm {
        margin-bottom: 2em
    }
}

.u-margin-bottom-md {
    margin-bottom: 2em
}

@media (min-width: 768px) {
    .u-margin-bottom-md {
        margin-bottom: 4em
    }
}

.u-margin-bottom-lg {
    margin-bottom: 3.5em
}

@media (min-width: 768px) {
    .u-margin-bottom-lg {
        margin-bottom: 7em
    }
}

.u-margin-bottom-xl {
    margin-bottom: 5em
}

@media (min-width: 768px) {
    .u-margin-bottom-xl {
        margin-bottom: 10em
    }
}

.u-margin-top-xsm {
    margin-top: .5em
}

@media (min-width: 768px) {
    .u-margin-top-xsm {
        margin-top: 1em
    }
}

.u-margin-top-sm {
    margin-top: 1em
}

@media (min-width: 768px) {
    .u-margin-top-sm {
        margin-top: 2em
    }
}

.u-margin-top-md {
    margin-top: 2em
}

@media (min-width: 768px) {
    .u-margin-top-md {
        margin-top: 4em
    }
}

.u-margin-top-lg {
    margin-top: 3.5em
}

@media (min-width: 768px) {
    .u-margin-top-lg {
        margin-top: 7em
    }
}

.u-margin-top-xl {
    margin-top: 5em
}

@media (min-width: 768px) {
    .u-margin-top-xl {
        margin-top: 10em
    }
}

.bordered {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0
}

.container-bordered {
    position: relative
}

.container-bordered:after {
    border: 1px solid rgba(0, 0, 0, .08);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.container-bordered > img {
    max-width: 100%
}

.container-bordered.bordered-top-bottom:after {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(0, 0, 0, .08)
}

.container-bordered.bordered-bottom:after {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.container-bordered.bordered-top:after {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .08)
}

.container-bordered.rounded-corner {
    border-radius: 4px
}

.container-bordered.rounded-corner:after {
    border-radius: 4px
}

.container-bordered.rounded-corner > img {
    border-radius: 4px
}

.container-bordered.rounded-corner-lg {
    border-radius: 8px
}

.container-bordered.rounded-corner-lg:after {
    border-radius: 8px
}

.container-bordered.rounded-corner-lg > img {
    border-radius: 8px
}

.container-bordered.rounded {
    border-radius: 100%
}

.container-bordered.rounded:after {
    border-radius: 100%
}

.container-bordered.rounded > img {
    border-radius: 100%
}

.c-avatar {
    background-color: #f1f3f5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 1px 0 0 #e3e8eb;
    display: block;
    overflow: hidden;
    position: relative;
    height: 50px;
    width: 50px
}

.c-avatar__image {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    box-sizing: border-box;
    display: block;
    height: auto;
    left: 50%;
    margin: auto;
    max-width: 200%;
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    width: auto
}

.c-avatar--rounded {
    border-radius: 50%
}

.c-avatar--lg {
    height: 50px;
    width: 50px
}

.c-avatar--md {
    height: 40px;
    width: 40px
}

.c-avatar--sm {
    height: 32px;
    width: 32px
}

.c-avatar--xs {
    height: 28px;
    width: 28px
}

@media (min-width: 544px) {
    .c-avatar--lg\@sm {
        height: 50px;
        width: 50px
    }

    .c-avatar--md\@sm {
        height: 40px;
        width: 40px
    }

    .c-avatar--sm\@sm {
        height: 32px;
        width: 32px
    }

    .c-avatar--xs\@sm {
        height: 28px;
        width: 28px
    }
}

@media (min-width: 768px) {
    .c-avatar--lg\@md {
        height: 50px;
        width: 50px
    }

    .c-avatar--md\@md {
        height: 40px;
        width: 40px
    }

    .c-avatar--sm\@md {
        height: 32px;
        width: 32px
    }

    .c-avatar--xs\@md {
        height: 28px;
        width: 28px
    }
}

@media (min-width: 992px) {
    .c-avatar--lg\@lg {
        height: 50px;
        width: 50px
    }

    .c-avatar--md\@lg {
        height: 40px;
        width: 40px
    }

    .c-avatar--sm\@lg {
        height: 32px;
        width: 32px
    }

    .c-avatar--xs\@lg {
        height: 28px;
        width: 28px
    }
}

@media (min-width: 1200px) {
    .c-avatar--lg\@xl {
        height: 50px;
        width: 50px
    }

    .c-avatar--md\@xl {
        height: 40px;
        width: 40px
    }

    .c-avatar--sm\@xl {
        height: 32px;
        width: 32px
    }

    .c-avatar--xs\@xl {
        height: 28px;
        width: 28px
    }
}

.c-badge {
    box-sizing: border-box;
    background-color: #A5B2BD;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    padding: 3px 4px 2px;
    text-transform: uppercase;
    vertical-align: middle
}

.c-badge.is-error {
    background-color: #e52f28
}

.c-badge.is-info {
    background-color: #3197d6
}

.c-badge.is-success {
    background-color: #4bc27d
}

.c-badge.is-warning {
    background-color: #ffc646
}

.t-bdr {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #eee !important
}

@media (min-width: 544px) {
    .t-bdr\@sm {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 768px) {
    .t-bdr\@md {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 992px) {
    .t-bdr\@lg {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 1200px) {
    .t-bdr\@xl {
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

.t-bdr-top {
    border-top-style: solid !important;
    border-width: 1px !important;
    border-color: #eee !important
}

@media (min-width: 544px) {
    .t-bdr-top\@sm {
        border-top-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 768px) {
    .t-bdr-top\@md {
        border-top-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 992px) {
    .t-bdr-top\@lg {
        border-top-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 1200px) {
    .t-bdr-top\@xl {
        border-top-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

.t-bdr-right {
    border-right-style: solid !important;
    border-width: 1px !important;
    border-color: #eee !important
}

@media (min-width: 544px) {
    .t-bdr-right\@sm {
        border-right-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 768px) {
    .t-bdr-right\@md {
        border-right-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 992px) {
    .t-bdr-right\@lg {
        border-right-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 1200px) {
    .t-bdr-right\@xl {
        border-right-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

.t-bdr-bottom {
    border-bottom-style: solid !important;
    border-width: 1px !important;
    border-color: #eee !important
}

@media (min-width: 544px) {
    .t-bdr-bottom\@sm {
        border-bottom-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 768px) {
    .t-bdr-bottom\@md {
        border-bottom-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 992px) {
    .t-bdr-bottom\@lg {
        border-bottom-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 1200px) {
    .t-bdr-bottom\@xl {
        border-bottom-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

.t-bdr-left {
    border-left-style: solid !important;
    border-width: 1px !important;
    border-color: #eee !important
}

@media (min-width: 544px) {
    .t-bdr-left\@sm {
        border-left-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 768px) {
    .t-bdr-left\@md {
        border-left-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 992px) {
    .t-bdr-left\@lg {
        border-left-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

@media (min-width: 1200px) {
    .t-bdr-left\@xl {
        border-left-style: solid !important;
        border-width: 1px !important;
        border-color: #eee !important
    }
}

.t-bdr-none {
    border-style: solid !important;
    border-width: 0 !important
}

@media (min-width: 544px) {
    .t-bdr-none\@sm {
        border-style: solid !important;
        border-width: 0 !important
    }
}

@media (min-width: 768px) {
    .t-bdr-none\@md {
        border-style: solid !important;
        border-width: 0 !important
    }
}

@media (min-width: 992px) {
    .t-bdr-none\@lg {
        border-style: solid !important;
        border-width: 0 !important
    }
}

@media (min-width: 1200px) {
    .t-bdr-none\@xl {
        border-style: solid !important;
        border-width: 0 !important
    }
}

.c-button {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #ddd;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
    box-sizing: border-box;
    color: #2b2b2b;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    height: 48px;
    line-height: 46px;
    outline: 0;
    padding: 0 2.5em;
    transition: all .2s ease;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none
}

button.c-button {
    font-family: inherit;
    overflow: visible;
    outline: 0
}

button.c-button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button.c-button:-moz-focus-ring {
    outline: 1px dotted Buttontext
}

button.c-button:focus {
    outline: 0
}

.c-button:hover {
    background-color: #f9f9f9;
    border-color: #ddd;
    color: #2b2b2b;
    text-decoration: none
}

.c-button:active {
    background-color: #f4f4f4;
    border-color: #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset
}

.c-button:focus {
    border-color: #3197D6;
    box-shadow: none
}

.c-button:focus:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2) inset
}

.c-button.is-disabled, .c-button:disabled {
    background-color: #fff;
    border-color: #ddd;
    text-decoration: none
}

.c-button.is-disabled, .c-button[disabled] {
    cursor: not-allowed;
    opacity: .65
}

.c-button.is-disabled:active, .c-button.is-disabled:focus, .c-button.is-disabled:hover, .c-button[disabled]:active, .c-button[disabled]:focus, .c-button[disabled]:hover {
    cursor: not-allowed;
    opacity: .65
}

.c-button.is-error {
    background-color: #e52f28;
    border-color: #cc1f19;
    color: #fff
}

.c-button.is-error:hover {
    background-color: #de221b;
    border-color: #cc1f19;
    color: #fff
}

.c-button.is-error:active {
    background-color: #cc1f19;
    border-color: #cc1f19
}

.c-button.is-error:focus {
    border-color: #cc1f19;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset
}

.c-button.is-error.is-disabled, .c-button.is-error:disabled {
    background-color: #e52f28;
    border-color: #cc1f19
}

.c-button.is-success {
    background-color: #4bc27d;
    border-color: #3aaa69;
    color: #fff
}

.c-button.is-success:hover {
    background-color: #3fba73;
    border-color: #3aaa69;
    color: #fff
}

.c-button.is-success:active {
    background-color: #3aaa69;
    border-color: #3aaa69
}

.c-button.is-success:focus {
    border-color: #3aaa69;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset
}

.c-button.is-success.is-disabled, .c-button.is-success:disabled {
    background-color: #4bc27d;
    border-color: #3aaa69
}

.c-button.is-warning {
    background-color: #ffc646;
    border-color: #ffb91d;
    color: #fff
}

.c-button.is-warning:hover {
    background-color: #ffc032;
    border-color: #ffb91d;
    color: #fff
}

.c-button.is-warning:active {
    background-color: #ffb91d;
    border-color: #ffb91d
}

.c-button.is-warning:focus {
    border-color: #ffb91d;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset
}

.c-button.is-warning.is-disabled, .c-button.is-warning:disabled {
    background-color: #ffc646;
    border-color: #ffb91d
}

.c-button--sm {
    font-size: .875rem;
    height: 28px;
    line-height: 26px;
    padding: 0 .5em
}

.c-button--md {
    font-size: 1rem;
    height: 36px;
    line-height: 34px;
    padding: 0 1em
}

.c-button--lg {
    font-size: 1.25rem;
    height: 52px;
    line-height: 50px;
    padding: 0 1.5em
}

.c-button--primary {
    background-color: #3197D6;
    border-color: #237AB3;
    color: #fff
}

.c-button--primary:hover {
    background-color: #288cca;
    border-color: #237AB3;
    color: #fff
}

.c-button--primary:active {
    background-color: #2581b9;
    border-color: #237AB3;
    color: #fff
}

.c-button--primary:focus {
    border-color: #237AB3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
    color: #fff
}

.c-button--primary:focus:active {
    color: #fff
}

.c-button--primary.is-disabled, .c-button--primary:disabled {
    background-color: #3197D6;
    border-color: #237AB3
}

.c-button--link {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #3197D6
}

.c-button--link:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    color: #3197D6
}

.c-button--link:active {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none
}

.c-button--link:focus {
    border-color: #237AB3;
    box-shadow: none
}

.c-button--link:focus:active {
    box-shadow: none, none
}

.c-button--link.is-disabled, .c-button--link:disabled {
    background-color: transparent;
    border-color: transparent;
    text-decoration: none
}

.c-button--link.is-error {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #cc1f19
}

.c-button--link.is-error:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #cc1f19
}

.c-button--link.is-error:active {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #cc1f19
}

.c-button--link.is-error:focus {
    background-color: transparent;
    border-color: #cc1f19;
    box-shadow: none;
    color: #cc1f19
}

.c-button--link.is-error:focus:active {
    box-shadow: none
}

.c-button--link.is-error.is-disabled, .c-button--link.is-error:disabled {
    background-color: transparent;
    border-color: transparent
}

.c-button--link.is-success {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #3aaa69
}

.c-button--link.is-success:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #3aaa69
}

.c-button--link.is-success:active {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #3aaa69
}

.c-button--link.is-success:focus {
    background-color: transparent;
    border-color: #3aaa69;
    box-shadow: none;
    color: #3aaa69
}

.c-button--link.is-success:focus:active {
    box-shadow: none
}

.c-button--link.is-success.is-disabled, .c-button--link.is-success:disabled {
    background-color: transparent;
    border-color: transparent
}

.c-button--link.is-warning {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #ffb91d
}

.c-button--link.is-warning:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #ffb91d
}

.c-button--link.is-warning:active {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #ffb91d
}

.c-button--link.is-warning:focus {
    background-color: transparent;
    border-color: #ffb91d;
    box-shadow: none;
    color: #ffb91d
}

.c-button--link.is-warning:focus:active {
    box-shadow: none
}

.c-button--link.is-warning.is-disabled, .c-button--link.is-warning:disabled {
    background-color: transparent;
    border-color: transparent
}

.c-button--navy {
    background-color: #1f5e89;
    border-color: #1f5e89;
    color: #fff
}

.c-button--navy:hover {
    background-color: #237ab3;
    border-color: #237AB3;
    color: #fff
}

.c-button--navy:active {
    background-color: #237ab3;
    border-color: #1f5e89;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--navy:focus {
    border-color: #1f5e89;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
    color: #fff
}

.c-button--navy:focus:active {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--navy.is-disabled, .c-button--navy:disabled {
    background-color: #1f5e89;
    border-color: #1f5e89
}

.c-button--action {
    background-color: #ffb91d;
    border-color: #ffb91d;
    color: #fff
}

.c-button--action:hover {
    background-color: #ffbd29;
    border-color: #ffb91d;
    color: #fff
}

.c-button--action:active {
    background-color: #ffbd29;
    border-color: #ffb91d;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--action:focus {
    border-color: #ffb91d;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
    color: #fff
}

.c-button--action:focus:active {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--action.is-disabled, .c-button--action:disabled {
    background-color: #ffb91d;
    border-color: #ffb91d
}

.c-button--trans {
    background-color: transparent;
    border-color: #fff;
    color: #fff
}

.c-button--trans:hover {
    background-color: transparent;
    border-color: #e0e0e0;
    color: #fff
}

.c-button--trans:active {
    background-color: transparent;
    border-color: #e0e0e0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--trans:focus {
    border-color: #e0e0e0;
    color: #fff
}

.c-button--trans:focus:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #fff
}

.c-button--trans.is-disabled, .c-button--trans:disabled {
    background-color: transparent;
    border-color: #fff
}

.c-button--block {
    display: block;
    width: 100%
}

.c-card {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px
}

.c-card > :first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.c-card > :last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.c-card--square {
    border-radius: 0
}

.c-card--square > :first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.c-card--square > :last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.c-card__block {
    box-sizing: border-box;
    padding: 20px 20px
}

.c-card__block + .c-card__block {
    border-top: 1px solid #eee
}

.c-card__block--md {
    padding: 20px 20px
}

.c-card__block--sm {
    padding: 12px 20px
}

.c-card__block--xs {
    padding: 8px 20px
}

@media (min-width: 544px) {
    .c-card__block--md\@sm {
        padding: 20px 20px
    }

    .c-card__block--sm\@sm {
        padding: 12px 20px
    }

    .c-card__block--xs\@sm {
        padding: 8px 20px
    }
}

@media (min-width: 768px) {
    .c-card__block--md\@md {
        padding: 20px 20px
    }

    .c-card__block--sm\@md {
        padding: 12px 20px
    }

    .c-card__block--xs\@md {
        padding: 8px 20px
    }
}

@media (min-width: 992px) {
    .c-card__block--md\@lg {
        padding: 20px 20px
    }

    .c-card__block--sm\@lg {
        padding: 12px 20px
    }

    .c-card__block--xs\@lg {
        padding: 8px 20px
    }
}

@media (min-width: 1200px) {
    .c-card__block--md\@xl {
        padding: 20px 20px
    }

    .c-card__block--sm\@xl {
        padding: 12px 20px
    }

    .c-card__block--xs\@xl {
        padding: 8px 20px
    }
}

.u-centralize {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important
}

@media (min-width: 544px) {
    .u-centralize\@sm {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important
    }
}

@media (min-width: 768px) {
    .u-centralize\@md {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important
    }
}

@media (min-width: 992px) {
    .u-centralize\@lg {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important
    }
}

@media (min-width: 1200px) {
    .u-centralize\@xl {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important
    }
}

.u-d-initial {
    display: initial !important
}

.u-d-none {
    display: none !important
}

.u-d-block {
    display: block !important
}

.u-d-inline {
    display: inline !important
}

.u-d-inline-block {
    display: inline-block !important
}

@media (min-width: 544px) {
    .u-d-initial\@sm {
        display: initial !important
    }

    .u-d-none\@sm {
        display: none !important
    }

    .u-d-block\@sm {
        display: block !important
    }

    .u-d-inline\@sm {
        display: inline !important
    }

    .u-d-inline-block\@sm {
        display: inline-block !important
    }
}

@media (min-width: 768px) {
    .u-d-initial\@md {
        display: initial !important
    }

    .u-d-none\@md {
        display: none !important
    }

    .u-d-block\@md {
        display: block !important
    }

    .u-d-inline\@md {
        display: inline !important
    }

    .u-d-inline-block\@md {
        display: inline-block !important
    }
}

@media (min-width: 992px) {
    .u-d-initial\@lg {
        display: initial !important
    }

    .u-d-none\@lg {
        display: none !important
    }

    .u-d-block\@lg {
        display: block !important
    }

    .u-d-inline\@lg {
        display: inline !important
    }

    .u-d-inline-block\@lg {
        display: inline-block !important
    }
}

@media (min-width: 1200px) {
    .u-d-initial\@xl {
        display: initial !important
    }

    .u-d-none\@xl {
        display: none !important
    }

    .u-d-block\@xl {
        display: block !important
    }

    .u-d-inline\@xl {
        display: inline !important
    }

    .u-d-inline-block\@xl {
        display: inline-block !important
    }
}

.o-flexy {
    box-sizing: border-box;
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media (min-width: 544px) {
    .o-flexy\@sm {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

@media (min-width: 768px) {
    .o-flexy\@md {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

@media (min-width: 992px) {
    .o-flexy\@lg {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

@media (min-width: 1200px) {
    .o-flexy\@xl {
        align-items: center;
        display: flex;
        justify-content: space-between
    }
}

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

.o-flexy--middle {
    align-items: center
}

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

.o-flexy--stretch {
    align-items: stretch
}

@media (min-width: 544px) {
    .o-flexy--top\@sm {
        align-items: flex-start
    }

    .o-flexy--middle\@sm {
        align-items: center
    }

    .o-flexy--bottom\@sm {
        align-items: flex-end
    }

    .o-flexy--stretch\@sm {
        align-items: stretch
    }
}

@media (min-width: 768px) {
    .o-flexy--top\@md {
        align-items: flex-start
    }

    .o-flexy--middle\@md {
        align-items: center
    }

    .o-flexy--bottom\@md {
        align-items: flex-end
    }

    .o-flexy--stretch\@md {
        align-items: stretch
    }
}

@media (min-width: 992px) {
    .o-flexy--top\@lg {
        align-items: flex-start
    }

    .o-flexy--middle\@lg {
        align-items: center
    }

    .o-flexy--bottom\@lg {
        align-items: flex-end
    }

    .o-flexy--stretch\@lg {
        align-items: stretch
    }
}

@media (min-width: 1200px) {
    .o-flexy--top\@xl {
        align-items: flex-start
    }

    .o-flexy--middle\@xl {
        align-items: center
    }

    .o-flexy--bottom\@xl {
        align-items: flex-end
    }

    .o-flexy--stretch\@xl {
        align-items: stretch
    }
}

.o-flexy--reset {
    max-width: 100%;
    min-width: 0
}

.o-flexy__block {
    box-sizing: border-box;
    flex: 1;
    flex-basis: auto
}

@media (min-width: 544px) {
    .o-flexy__block\@sm {
        flex: 1;
        flex-basis: auto
    }
}

@media (min-width: 768px) {
    .o-flexy__block\@md {
        flex: 1;
        flex-basis: auto
    }
}

@media (min-width: 992px) {
    .o-flexy__block\@lg {
        flex: 1;
        flex-basis: auto
    }
}

@media (min-width: 1200px) {
    .o-flexy__block\@xl {
        flex: 1;
        flex-basis: auto
    }
}

.o-flexy__item {
    box-sizing: border-box
}

.u-clearfix::after {
    content: " ";
    clear: both;
    display: table
}

.u-clear-none {
    clear: none !important
}

.u-clear-left {
    clear: left !important
}

.u-clear-right {
    clear: right !important
}

.u-clear-both {
    clear: both !important
}

@media (min-width: 544px) {
    .u-clear-none\@sm {
        clear: none !important
    }

    .u-clear-left\@sm {
        clear: left !important
    }

    .u-clear-right\@sm {
        clear: right !important
    }

    .u-clear-both\@sm {
        clear: both !important
    }
}

@media (min-width: 768px) {
    .u-clear-none\@md {
        clear: none !important
    }

    .u-clear-left\@md {
        clear: left !important
    }

    .u-clear-right\@md {
        clear: right !important
    }

    .u-clear-both\@md {
        clear: both !important
    }
}

@media (min-width: 992px) {
    .u-clear-none\@lg {
        clear: none !important
    }

    .u-clear-left\@lg {
        clear: left !important
    }

    .u-clear-right\@lg {
        clear: right !important
    }

    .u-clear-both\@lg {
        clear: both !important
    }
}

@media (min-width: 1200px) {
    .u-clear-none\@xl {
        clear: none !important
    }

    .u-clear-left\@xl {
        clear: left !important
    }

    .u-clear-right\@xl {
        clear: right !important
    }

    .u-clear-both\@xl {
        clear: both !important
    }
}

.u-pull-left {
    float: left !important
}

.u-pull-right {
    float: right !important
}

.u-pull-none {
    float: none !important
}

@media (min-width: 544px) {
    .u-pull-left\@sm {
        float: left !important
    }

    .u-pull-right\@sm {
        float: right !important
    }

    .u-pull-none\@sm {
        float: none !important
    }
}

@media (min-width: 768px) {
    .u-pull-left\@md {
        float: left !important
    }

    .u-pull-right\@md {
        float: right !important
    }

    .u-pull-none\@md {
        float: none !important
    }
}

@media (min-width: 992px) {
    .u-pull-left\@lg {
        float: left !important
    }

    .u-pull-right\@lg {
        float: right !important
    }

    .u-pull-none\@lg {
        float: none !important
    }
}

@media (min-width: 1200px) {
    .u-pull-left\@xl {
        float: left !important
    }

    .u-pull-right\@xl {
        float: right !important
    }

    .u-pull-none\@xl {
        float: none !important
    }
}

.o-container {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px
}

.o-container--fluid {
    max-width: 100%
}

.o-container--responsive {
    max-width: 100%
}

@media (min-width: 544px) {
    .o-container--responsive {
        max-width: 576px
    }
}

@media (min-width: 768px) {
    .o-container--responsive {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .o-container--responsive {
        max-width: 940px
    }
}

@media (min-width: 1200px) {
    .o-container--responsive {
        max-width: 1140px
    }
}

[class*=o-col] {
    box-sizing: border-box;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    width: 100%
}

.o-col-1 {
    width: 8.33333%
}

.o-col-2 {
    width: 16.66667%
}

.o-col-3 {
    width: 25%
}

.o-col-4 {
    width: 33.33333%
}

.o-col-5 {
    width: 41.66667%
}

.o-col-6 {
    width: 50%
}

.o-col-7 {
    width: 58.33333%
}

.o-col-8 {
    width: 66.66667%
}

.o-col-9 {
    width: 75%
}

.o-col-10 {
    width: 83.33333%
}

.o-col-11 {
    width: 91.66667%
}

.o-col-12 {
    width: 100%
}

.o-col-offset-1 {
    margin-left: 8.33333%
}

.o-col-pull-1 {
    right: 8.33333%
}

.o-col-push-1 {
    left: 8.33333%
}

.o-col-offset-2 {
    margin-left: 16.66667%
}

.o-col-pull-2 {
    right: 16.66667%
}

.o-col-push-2 {
    left: 16.66667%
}

.o-col-offset-3 {
    margin-left: 25%
}

.o-col-pull-3 {
    right: 25%
}

.o-col-push-3 {
    left: 25%
}

.o-col-offset-4 {
    margin-left: 33.33333%
}

.o-col-pull-4 {
    right: 33.33333%
}

.o-col-push-4 {
    left: 33.33333%
}

.o-col-offset-5 {
    margin-left: 41.66667%
}

.o-col-pull-5 {
    right: 41.66667%
}

.o-col-push-5 {
    left: 41.66667%
}

.o-col-offset-6 {
    margin-left: 50%
}

.o-col-pull-6 {
    right: 50%
}

.o-col-push-6 {
    left: 50%
}

.o-col-offset-7 {
    margin-left: 58.33333%
}

.o-col-pull-7 {
    right: 58.33333%
}

.o-col-push-7 {
    left: 58.33333%
}

.o-col-offset-8 {
    margin-left: 66.66667%
}

.o-col-pull-8 {
    right: 66.66667%
}

.o-col-push-8 {
    left: 66.66667%
}

.o-col-offset-9 {
    margin-left: 75%
}

.o-col-pull-9 {
    right: 75%
}

.o-col-push-9 {
    left: 75%
}

.o-col-offset-10 {
    margin-left: 83.33333%
}

.o-col-pull-10 {
    right: 83.33333%
}

.o-col-push-10 {
    left: 83.33333%
}

.o-col-offset-11 {
    margin-left: 91.66667%
}

.o-col-pull-11 {
    right: 91.66667%
}

.o-col-push-11 {
    left: 91.66667%
}

@media (min-width: 544px) {
    .o-col-1\@sm {
        width: 8.33333%
    }

    .o-col-2\@sm {
        width: 16.66667%
    }

    .o-col-3\@sm {
        width: 25%
    }

    .o-col-4\@sm {
        width: 33.33333%
    }

    .o-col-5\@sm {
        width: 41.66667%
    }

    .o-col-6\@sm {
        width: 50%
    }

    .o-col-7\@sm {
        width: 58.33333%
    }

    .o-col-8\@sm {
        width: 66.66667%
    }

    .o-col-9\@sm {
        width: 75%
    }

    .o-col-10\@sm {
        width: 83.33333%
    }

    .o-col-11\@sm {
        width: 91.66667%
    }

    .o-col-12\@sm {
        width: 100%
    }

    .o-col-offset-0\@sm {
        margin-left: 0
    }

    .o-col-pull-0\@sm {
        right: auto
    }

    .o-col-push-0\@sm {
        left: auto
    }

    .o-col-offset-1\@sm {
        margin-left: 8.33333%
    }

    .o-col-pull-1\@sm {
        right: 8.33333%
    }

    .o-col-push-1\@sm {
        left: 8.33333%
    }

    .o-col-offset-2\@sm {
        margin-left: 16.66667%
    }

    .o-col-pull-2\@sm {
        right: 16.66667%
    }

    .o-col-push-2\@sm {
        left: 16.66667%
    }

    .o-col-offset-3\@sm {
        margin-left: 25%
    }

    .o-col-pull-3\@sm {
        right: 25%
    }

    .o-col-push-3\@sm {
        left: 25%
    }

    .o-col-offset-4\@sm {
        margin-left: 33.33333%
    }

    .o-col-pull-4\@sm {
        right: 33.33333%
    }

    .o-col-push-4\@sm {
        left: 33.33333%
    }

    .o-col-offset-5\@sm {
        margin-left: 41.66667%
    }

    .o-col-pull-5\@sm {
        right: 41.66667%
    }

    .o-col-push-5\@sm {
        left: 41.66667%
    }

    .o-col-offset-6\@sm {
        margin-left: 50%
    }

    .o-col-pull-6\@sm {
        right: 50%
    }

    .o-col-push-6\@sm {
        left: 50%
    }

    .o-col-offset-7\@sm {
        margin-left: 58.33333%
    }

    .o-col-pull-7\@sm {
        right: 58.33333%
    }

    .o-col-push-7\@sm {
        left: 58.33333%
    }

    .o-col-offset-8\@sm {
        margin-left: 66.66667%
    }

    .o-col-pull-8\@sm {
        right: 66.66667%
    }

    .o-col-push-8\@sm {
        left: 66.66667%
    }

    .o-col-offset-9\@sm {
        margin-left: 75%
    }

    .o-col-pull-9\@sm {
        right: 75%
    }

    .o-col-push-9\@sm {
        left: 75%
    }

    .o-col-offset-10\@sm {
        margin-left: 83.33333%
    }

    .o-col-pull-10\@sm {
        right: 83.33333%
    }

    .o-col-push-10\@sm {
        left: 83.33333%
    }

    .o-col-offset-11\@sm {
        margin-left: 91.66667%
    }

    .o-col-pull-11\@sm {
        right: 91.66667%
    }

    .o-col-push-11\@sm {
        left: 91.66667%
    }
}

@media (min-width: 768px) {
    .o-col-1\@md {
        width: 8.33333%
    }

    .o-col-2\@md {
        width: 16.66667%
    }

    .o-col-3\@md {
        width: 25%
    }

    .o-col-4\@md {
        width: 33.33333%
    }

    .o-col-5\@md {
        width: 41.66667%
    }

    .o-col-6\@md {
        width: 50%
    }

    .o-col-7\@md {
        width: 58.33333%
    }

    .o-col-8\@md {
        width: 66.66667%
    }

    .o-col-9\@md {
        width: 75%
    }

    .o-col-10\@md {
        width: 83.33333%
    }

    .o-col-11\@md {
        width: 91.66667%
    }

    .o-col-12\@md {
        width: 100%
    }

    .o-col-offset-0\@md {
        margin-left: 0
    }

    .o-col-pull-0\@md {
        right: auto
    }

    .o-col-push-0\@md {
        left: auto
    }

    .o-col-offset-1\@md {
        margin-left: 8.33333%
    }

    .o-col-pull-1\@md {
        right: 8.33333%
    }

    .o-col-push-1\@md {
        left: 8.33333%
    }

    .o-col-offset-2\@md {
        margin-left: 16.66667%
    }

    .o-col-pull-2\@md {
        right: 16.66667%
    }

    .o-col-push-2\@md {
        left: 16.66667%
    }

    .o-col-offset-3\@md {
        margin-left: 25%
    }

    .o-col-pull-3\@md {
        right: 25%
    }

    .o-col-push-3\@md {
        left: 25%
    }

    .o-col-offset-4\@md {
        margin-left: 33.33333%
    }

    .o-col-pull-4\@md {
        right: 33.33333%
    }

    .o-col-push-4\@md {
        left: 33.33333%
    }

    .o-col-offset-5\@md {
        margin-left: 41.66667%
    }

    .o-col-pull-5\@md {
        right: 41.66667%
    }

    .o-col-push-5\@md {
        left: 41.66667%
    }

    .o-col-offset-6\@md {
        margin-left: 50%
    }

    .o-col-pull-6\@md {
        right: 50%
    }

    .o-col-push-6\@md {
        left: 50%
    }

    .o-col-offset-7\@md {
        margin-left: 58.33333%
    }

    .o-col-pull-7\@md {
        right: 58.33333%
    }

    .o-col-push-7\@md {
        left: 58.33333%
    }

    .o-col-offset-8\@md {
        margin-left: 66.66667%
    }

    .o-col-pull-8\@md {
        right: 66.66667%
    }

    .o-col-push-8\@md {
        left: 66.66667%
    }

    .o-col-offset-9\@md {
        margin-left: 75%
    }

    .o-col-pull-9\@md {
        right: 75%
    }

    .o-col-push-9\@md {
        left: 75%
    }

    .o-col-offset-10\@md {
        margin-left: 83.33333%
    }

    .o-col-pull-10\@md {
        right: 83.33333%
    }

    .o-col-push-10\@md {
        left: 83.33333%
    }

    .o-col-offset-11\@md {
        margin-left: 91.66667%
    }

    .o-col-pull-11\@md {
        right: 91.66667%
    }

    .o-col-push-11\@md {
        left: 91.66667%
    }
}

@media (min-width: 992px) {
    .o-col-1\@lg {
        width: 8.33333%
    }

    .o-col-2\@lg {
        width: 16.66667%
    }

    .o-col-3\@lg {
        width: 25%
    }

    .o-col-4\@lg {
        width: 33.33333%
    }

    .o-col-5\@lg {
        width: 41.66667%
    }

    .o-col-6\@lg {
        width: 50%
    }

    .o-col-7\@lg {
        width: 58.33333%
    }

    .o-col-8\@lg {
        width: 66.66667%
    }

    .o-col-9\@lg {
        width: 75%
    }

    .o-col-10\@lg {
        width: 83.33333%
    }

    .o-col-11\@lg {
        width: 91.66667%
    }

    .o-col-12\@lg {
        width: 100%
    }

    .o-col-offset-0\@lg {
        margin-left: 0
    }

    .o-col-pull-0\@lg {
        right: auto
    }

    .o-col-push-0\@lg {
        left: auto
    }

    .o-col-offset-1\@lg {
        margin-left: 8.33333%
    }

    .o-col-pull-1\@lg {
        right: 8.33333%
    }

    .o-col-push-1\@lg {
        left: 8.33333%
    }

    .o-col-offset-2\@lg {
        margin-left: 16.66667%
    }

    .o-col-pull-2\@lg {
        right: 16.66667%
    }

    .o-col-push-2\@lg {
        left: 16.66667%
    }

    .o-col-offset-3\@lg {
        margin-left: 25%
    }

    .o-col-pull-3\@lg {
        right: 25%
    }

    .o-col-push-3\@lg {
        left: 25%
    }

    .o-col-offset-4\@lg {
        margin-left: 33.33333%
    }

    .o-col-pull-4\@lg {
        right: 33.33333%
    }

    .o-col-push-4\@lg {
        left: 33.33333%
    }

    .o-col-offset-5\@lg {
        margin-left: 41.66667%
    }

    .o-col-pull-5\@lg {
        right: 41.66667%
    }

    .o-col-push-5\@lg {
        left: 41.66667%
    }

    .o-col-offset-6\@lg {
        margin-left: 50%
    }

    .o-col-pull-6\@lg {
        right: 50%
    }

    .o-col-push-6\@lg {
        left: 50%
    }

    .o-col-offset-7\@lg {
        margin-left: 58.33333%
    }

    .o-col-pull-7\@lg {
        right: 58.33333%
    }

    .o-col-push-7\@lg {
        left: 58.33333%
    }

    .o-col-offset-8\@lg {
        margin-left: 66.66667%
    }

    .o-col-pull-8\@lg {
        right: 66.66667%
    }

    .o-col-push-8\@lg {
        left: 66.66667%
    }

    .o-col-offset-9\@lg {
        margin-left: 75%
    }

    .o-col-pull-9\@lg {
        right: 75%
    }

    .o-col-push-9\@lg {
        left: 75%
    }

    .o-col-offset-10\@lg {
        margin-left: 83.33333%
    }

    .o-col-pull-10\@lg {
        right: 83.33333%
    }

    .o-col-push-10\@lg {
        left: 83.33333%
    }

    .o-col-offset-11\@lg {
        margin-left: 91.66667%
    }

    .o-col-pull-11\@lg {
        right: 91.66667%
    }

    .o-col-push-11\@lg {
        left: 91.66667%
    }
}

@media (min-width: 1200px) {
    .o-col-1\@xl {
        width: 8.33333%
    }

    .o-col-2\@xl {
        width: 16.66667%
    }

    .o-col-3\@xl {
        width: 25%
    }

    .o-col-4\@xl {
        width: 33.33333%
    }

    .o-col-5\@xl {
        width: 41.66667%
    }

    .o-col-6\@xl {
        width: 50%
    }

    .o-col-7\@xl {
        width: 58.33333%
    }

    .o-col-8\@xl {
        width: 66.66667%
    }

    .o-col-9\@xl {
        width: 75%
    }

    .o-col-10\@xl {
        width: 83.33333%
    }

    .o-col-11\@xl {
        width: 91.66667%
    }

    .o-col-12\@xl {
        width: 100%
    }

    .o-col-offset-0\@xl {
        margin-left: 0
    }

    .o-col-pull-0\@xl {
        right: auto
    }

    .o-col-push-0\@xl {
        left: auto
    }

    .o-col-offset-1\@xl {
        margin-left: 8.33333%
    }

    .o-col-pull-1\@xl {
        right: 8.33333%
    }

    .o-col-push-1\@xl {
        left: 8.33333%
    }

    .o-col-offset-2\@xl {
        margin-left: 16.66667%
    }

    .o-col-pull-2\@xl {
        right: 16.66667%
    }

    .o-col-push-2\@xl {
        left: 16.66667%
    }

    .o-col-offset-3\@xl {
        margin-left: 25%
    }

    .o-col-pull-3\@xl {
        right: 25%
    }

    .o-col-push-3\@xl {
        left: 25%
    }

    .o-col-offset-4\@xl {
        margin-left: 33.33333%
    }

    .o-col-pull-4\@xl {
        right: 33.33333%
    }

    .o-col-push-4\@xl {
        left: 33.33333%
    }

    .o-col-offset-5\@xl {
        margin-left: 41.66667%
    }

    .o-col-pull-5\@xl {
        right: 41.66667%
    }

    .o-col-push-5\@xl {
        left: 41.66667%
    }

    .o-col-offset-6\@xl {
        margin-left: 50%
    }

    .o-col-pull-6\@xl {
        right: 50%
    }

    .o-col-push-6\@xl {
        left: 50%
    }

    .o-col-offset-7\@xl {
        margin-left: 58.33333%
    }

    .o-col-pull-7\@xl {
        right: 58.33333%
    }

    .o-col-push-7\@xl {
        left: 58.33333%
    }

    .o-col-offset-8\@xl {
        margin-left: 66.66667%
    }

    .o-col-pull-8\@xl {
        right: 66.66667%
    }

    .o-col-push-8\@xl {
        left: 66.66667%
    }

    .o-col-offset-9\@xl {
        margin-left: 75%
    }

    .o-col-pull-9\@xl {
        right: 75%
    }

    .o-col-push-9\@xl {
        left: 75%
    }

    .o-col-offset-10\@xl {
        margin-left: 83.33333%
    }

    .o-col-pull-10\@xl {
        right: 83.33333%
    }

    .o-col-push-10\@xl {
        left: 83.33333%
    }

    .o-col-offset-11\@xl {
        margin-left: 91.66667%
    }

    .o-col-pull-11\@xl {
        right: 91.66667%
    }

    .o-col-push-11\@xl {
        left: 91.66667%
    }
}

.o-row {
    box-sizing: border-box;
    margin-left: -15px;
    margin-right: -15px
}

.o-row::after {
    clear: both;
    content: "";
    display: table
}

.o-row > [class*=o-col] {
    float: left
}

.o-row-flex {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px
}

.t-bg-black {
    background-color: #000 !important
}

.t-bg-white {
    background-color: #fff !important
}

.t-bg-blue-100 {
    background-color: #f7fcfe !important
}

.t-bg-blue-200 {
    background-color: #daf1ff !important
}

.t-bg-blue-300 {
    background-color: #aedfff !important
}

.t-bg-blue-400 {
    background-color: #71bff1 !important
}

.t-bg-blue-500 {
    background-color: #3197d6 !important
}

.t-bg-blue-600 {
    background-color: #237ab3 !important
}

.t-bg-blue-700 {
    background-color: #1f5e89 !important
}

.t-bg-blue-800 {
    background-color: #194c6e !important
}

.t-bg-blue-900 {
    background-color: #143d57 !important
}

.t-bg-charcoal-200 {
    background-color: #93a1af !important
}

.t-bg-charcoal-300 {
    background-color: #72808e !important
}

.t-bg-charcoal-400 {
    background-color: #4f5d6b !important
}

.t-bg-charcoal-500 {
    background-color: #394956 !important
}

.t-bg-charcoal-600 {
    background-color: #2a3b47 !important
}

.t-bg-charcoal-700 {
    background-color: #253540 !important
}

.t-bg-charcoal-800 {
    background-color: #1d2b36 !important
}

.t-bg-grey-200 {
    background-color: #f9fafa !important
}

.t-bg-grey-300 {
    background-color: #f1f3f5 !important
}

.t-bg-grey-400 {
    background-color: #e3e8eb !important
}

.t-bg-grey-500 {
    background-color: #d6dde3 !important
}

.t-bg-grey-600 {
    background-color: #c1cbd4 !important
}

.t-bg-grey-700 {
    background-color: #b4c0ca !important
}

.t-bg-grey-800 {
    background-color: #a5b2bd !important
}

.t-bg-yellow-100 {
    background-color: #fffdf6 !important
}

.t-bg-yellow-200 {
    background-color: #fff6e2 !important
}

.t-bg-yellow-300 {
    background-color: #ffe8b5 !important
}

.t-bg-yellow-400 {
    background-color: #ffd56d !important
}

.t-bg-yellow-500 {
    background-color: #ffc646 !important
}

.t-bg-yellow-600 {
    background-color: #f5b126 !important
}

.t-bg-yellow-700 {
    background-color: #d79400 !important
}

.t-bg-yellow-800 {
    background-color: #b37100 !important
}

.t-bg-yellow-900 {
    background-color: #875200 !important
}

.t-bg-green-100 {
    background-color: #fafdfb !important
}

.t-bg-green-200 {
    background-color: #e4fbe6 !important
}

.t-bg-green-300 {
    background-color: #c4f0ce !important
}

.t-bg-green-400 {
    background-color: #81dc9e !important
}

.t-bg-green-500 {
    background-color: #4bc27d !important
}

.t-bg-green-600 {
    background-color: #3cb170 !important
}

.t-bg-green-700 {
    background-color: #2f9f62 !important
}

.t-bg-green-800 {
    background-color: #228350 !important
}

.t-bg-green-900 {
    background-color: #23633e !important
}

.t-bg-red-100 {
    background-color: #fef7f6 !important
}

.t-bg-red-200 {
    background-color: #ffe3e2 !important
}

.t-bg-red-300 {
    background-color: #ffa2a2 !important
}

.t-bg-red-400 {
    background-color: #f45b55 !important
}

.t-bg-red-500 {
    background-color: #e52f28 !important
}

.t-bg-red-600 {
    background-color: #d21b14 !important
}

.t-bg-red-700 {
    background-color: #ba1f19 !important
}

.t-bg-red-800 {
    background-color: #9d1f1a !important
}

.t-bg-red-900 {
    background-color: #731814 !important
}

.t-bg-purple-100 {
    background-color: #fbfbfe !important
}

.t-bg-purple-200 {
    background-color: #eaeafc !important
}

.t-bg-purple-300 {
    background-color: #d1d2f6 !important
}

.t-bg-purple-400 {
    background-color: #a3a4f3 !important
}

.t-bg-purple-500 {
    background-color: #7e80e7 !important
}

.t-bg-purple-600 {
    background-color: #696aca !important
}

.t-bg-purple-700 {
    background-color: #585b9e !important
}

.t-bg-purple-800 {
    background-color: #45467d !important
}

.t-bg-purple-900 {
    background-color: #383966 !important
}

.t-bg-orange-100 {
    background-color: #fff8f2 !important
}

.t-bg-orange-200 {
    background-color: #ffead8 !important
}

.t-bg-orange-300 {
    background-color: #ffd3ae !important
}

.t-bg-orange-400 {
    background-color: #ffa75a !important
}

.t-bg-orange-500 {
    background-color: #ff9139 !important
}

.t-bg-orange-600 {
    background-color: #e87800 !important
}

.t-bg-orange-700 {
    background-color: #c76400 !important
}

.t-bg-orange-800 {
    background-color: #a45300 !important
}

.t-bg-orange-900 {
    background-color: #813c00 !important
}

.t-tx-black {
    color: #000 !important
}

.t-tx-white {
    color: #fff !important
}

.t-tx-blue-100 {
    color: #f7fcfe !important
}

.t-tx-blue-200 {
    color: #daf1ff !important
}

.t-tx-blue-300 {
    color: #aedfff !important
}

.t-tx-blue-400 {
    color: #71bff1 !important
}

.t-tx-blue-500 {
    color: #3197d6 !important
}

.t-tx-blue-600 {
    color: #237ab3 !important
}

.t-tx-blue-700 {
    color: #1f5e89 !important
}

.t-tx-blue-800 {
    color: #194c6e !important
}

.t-tx-blue-900 {
    color: #143d57 !important
}

.t-tx-charcoal-100 {
    color: #bcc5ce !important
}

.t-tx-charcoal-200 {
    color: #93a1af !important
}

.t-tx-charcoal-300 {
    color: #72808e !important
}

.t-tx-charcoal-400 {
    color: #4f5d6b !important
}

.t-tx-charcoal-500 {
    color: #394956 !important
}

.t-tx-charcoal-600 {
    color: #2a3b47 !important
}

.t-tx-charcoal-700 {
    color: #253540 !important
}

.t-tx-charcoal-800 {
    color: #1d2b36 !important
}

.t-tx-grey-200 {
    color: #f9fafa !important
}

.t-tx-grey-300 {
    color: #f1f3f5 !important
}

.t-tx-grey-400 {
    color: #e3e8eb !important
}

.t-tx-grey-500 {
    color: #d6dde3 !important
}

.t-tx-grey-600 {
    color: #c1cbd4 !important
}

.t-tx-grey-700 {
    color: #b4c0ca !important
}

.t-tx-grey-800 {
    color: #a5b2bd !important
}

.t-tx-yellow-100 {
    color: #fffdf6 !important
}

.t-tx-yellow-200 {
    color: #fff6e2 !important
}

.t-tx-yellow-300 {
    color: #ffe8b5 !important
}

.t-tx-yellow-400 {
    color: #ffd56d !important
}

.t-tx-yellow-500 {
    color: #ffc646 !important
}

.t-tx-yellow-600 {
    color: #f5b126 !important
}

.t-tx-yellow-700 {
    color: #d79400 !important
}

.t-tx-yellow-800 {
    color: #b37100 !important
}

.t-tx-yellow-900 {
    color: #875200 !important
}

.t-tx-green-100 {
    color: #fafdfb !important
}

.t-tx-green-200 {
    color: #e4fbe6 !important
}

.t-tx-green-300 {
    color: #c4f0ce !important
}

.t-tx-green-400 {
    color: #81dc9e !important
}

.t-tx-green-500 {
    color: #4bc27d !important
}

.t-tx-green-600 {
    color: #3cb170 !important
}

.t-tx-green-700 {
    color: #2f9f62 !important
}

.t-tx-green-800 {
    color: #228350 !important
}

.t-tx-green-900 {
    color: #23633e !important
}

.t-tx-red-100 {
    color: #fef7f6 !important
}

.t-tx-red-200 {
    color: #ffe3e2 !important
}

.t-tx-red-300 {
    color: #ffa2a2 !important
}

.t-tx-red-400 {
    color: #f45b55 !important
}

.t-tx-red-500 {
    color: #e52f28 !important
}

.t-tx-red-600 {
    color: #d21b14 !important
}

.t-tx-red-700 {
    color: #ba1f19 !important
}

.t-tx-red-800 {
    color: #9d1f1a !important
}

.t-tx-red-900 {
    color: #731814 !important
}

.t-tx-purple-100 {
    color: #fbfbfe !important
}

.t-tx-purple-200 {
    color: #eaeafc !important
}

.t-tx-purple-300 {
    color: #d1d2f6 !important
}

.t-tx-purple-400 {
    color: #a3a4f3 !important
}

.t-tx-purple-500 {
    color: #7e80e7 !important
}

.t-tx-purple-600 {
    color: #696aca !important
}

.t-tx-purple-700 {
    color: #585b9e !important
}

.t-tx-purple-800 {
    color: #45467d !important
}

.t-tx-purple-900 {
    color: #383966 !important
}

.t-tx-orange-100 {
    color: #fff8f2 !important
}

.t-tx-orange-200 {
    color: #ffead8 !important
}

.t-tx-orange-300 {
    color: #ffd3ae !important
}

.t-tx-orange-400 {
    color: #ffa75a !important
}

.t-tx-orange-500 {
    color: #ff9139 !important
}

.t-tx-orange-600 {
    color: #e87800 !important
}

.t-tx-orange-700 {
    color: #c76400 !important
}

.t-tx-orange-800 {
    color: #a45300 !important
}

.t-tx-orange-900 {
    color: #813c00 !important
}

.c-hr, hr {
    border: 0;
    border-top-color: #E3E8EB;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: content-box;
    display: block;
    height: 0;
    margin: 20px 0
}

.o-inline {
    list-style: none;
    margin-bottom: -4px;
    margin-left: 0
}

.o-inline::after {
    content: " ";
    clear: both;
    display: table
}

.o-inline:last-child {
    margin-bottom: -4px
}

.o-inline__item {
    display: inline-block;
    margin: 0 0 4px;
    padding: 0;
    vertical-align: middle
}

.o-inline--xs {
    margin-bottom: -4px;
    margin-right: -4px
}

.o-inline--xs:last-child {
    margin-bottom: -4px
}

.o-inline--xs .o-inline__item {
    margin-bottom: 4px;
    margin-right: 4px
}

.o-inline--sm {
    margin-bottom: -8px;
    margin-right: -8px
}

.o-inline--sm:last-child {
    margin-bottom: -8px
}

.o-inline--sm .o-inline__item {
    margin-bottom: 8px;
    margin-right: 8px
}

.o-inline--md {
    margin-bottom: -16px;
    margin-right: -16px
}

.o-inline--md:last-child {
    margin-bottom: -16px
}

.o-inline--md .o-inline__item {
    margin-bottom: 16px;
    margin-right: 16px
}

.o-inline--lg {
    margin-bottom: -24px;
    margin-right: -24px
}

.o-inline--lg:last-child {
    margin-bottom: -24px
}

.o-inline--lg .o-inline__item {
    margin-bottom: 24px;
    margin-right: 24px
}

.o-inline--xl {
    margin-bottom: -32px;
    margin-right: -32px
}

.o-inline--xl:last-child {
    margin-bottom: -32px
}

.o-inline--xl .o-inline__item {
    margin-bottom: 32px;
    margin-right: 32px
}

.c-list {
    list-style: none;
    padding-left: 0;
    box-sizing: border-box
}

.c-list > li, .c-list__item {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 4px 0
}

.c-list--bordered .c-list__item, .c-list--bordered > li {
    border-bottom: 1px solid;
    border-color: #eee
}

.c-list--block .c-list__item, .c-list--block > li {
    display: block
}

@media (min-width: 544px) {
    .c-list--block\@sm .c-list__item, .c-list--block\@sm > li {
        display: block
    }
}

@media (min-width: 768px) {
    .c-list--block\@md .c-list__item, .c-list--block\@md > li {
        display: block
    }
}

@media (min-width: 992px) {
    .c-list--block\@lg .c-list__item, .c-list--block\@lg > li {
        display: block
    }
}

@media (min-width: 1200px) {
    .c-list--block\@xl .c-list__item, .c-list--block\@xl > li {
        display: block
    }
}

.c-list--dotted .c-list__item, .c-list--dotted > li {
    border-bottom: 1px dotted;
    border-color: #eee
}

.c-list--inline .c-list__item, .c-list--inline > li {
    display: inline-block;
    padding-left: 4px
}

.c-list--inline .c-list__item:first-child, .c-list--inline > li:first-child {
    padding-left: 0
}

@media (min-width: 544px) {
    .c-list--inline\@sm .c-list__item, .c-list--inline\@sm > li {
        display: inline-block;
        padding-left: 4px
    }

    .c-list--inline\@sm .c-list__item:first-child, .c-list--inline\@sm > li:first-child {
        padding-left: 0
    }
}

@media (min-width: 768px) {
    .c-list--inline\@md .c-list__item, .c-list--inline\@md > li {
        display: inline-block;
        padding-left: 4px
    }

    .c-list--inline\@md .c-list__item:first-child, .c-list--inline\@md > li:first-child {
        padding-left: 0
    }
}

@media (min-width: 992px) {
    .c-list--inline\@lg .c-list__item, .c-list--inline\@lg > li {
        display: inline-block;
        padding-left: 4px
    }

    .c-list--inline\@lg .c-list__item:first-child, .c-list--inline\@lg > li:first-child {
        padding-left: 0
    }
}

@media (min-width: 1200px) {
    .c-list--inline\@xl .c-list__item, .c-list--inline\@xl > li {
        display: inline-block;
        padding-left: 4px
    }

    .c-list--inline\@xl .c-list__item:first-child, .c-list--inline\@xl > li:first-child {
        padding-left: 0
    }
}

.c-list--xs .c-list__item, .c-list--xs > li {
    padding-bottom: 0;
    padding-top: 0
}

.c-list--sm .c-list__item, .c-list--sm > li {
    padding-bottom: 2px;
    padding-top: 2px
}

.c-list--md .c-list__item, .c-list--md > li {
    padding-bottom: 4px;
    padding-top: 4px
}

.c-list--lg .c-list__item, .c-list--lg > li {
    padding-bottom: 8px;
    padding-top: 8px
}

.c-list--xl .c-list__item, .c-list--xl > li {
    padding-bottom: 16px;
    padding-top: 16px
}

.u-op-0 {
    opacity: 0 !important
}

.u-op-1 {
    opacity: .1 !important
}

.u-op-2 {
    opacity: .2 !important
}

.u-op-3 {
    opacity: .3 !important
}

.u-op-4 {
    opacity: .4 !important
}

.u-op-5 {
    opacity: .5 !important
}

.u-op-6 {
    opacity: .6 !important
}

.u-op-7 {
    opacity: .7 !important
}

.u-op-8 {
    opacity: .8 !important
}

.u-op-9 {
    opacity: .9 !important
}

.u-op-10 {
    opacity: 1 !important
}

.u-overflow-visible {
    overflow: visible !important
}

.u-overflow-hidden {
    overflow: hidden !important
}

.u-overflow-scroll {
    overflow: scroll !important
}

.u-overflow-auto {
    overflow: auto !important
}

.u-overflow-x-visible {
    overflow: visible !important
}

.u-overflow-x-hidden {
    overflow: hidden !important
}

.u-overflow-x-scroll {
    overflow: scroll !important
}

.u-overflow-x-auto {
    overflow: auto !important
}

.u-overflow-y-visible {
    overflow: visible !important
}

.u-overflow-y-hidden {
    overflow: hidden !important
}

.u-overflow-y-scroll {
    overflow: scroll !important
}

.u-overflow-y-auto {
    overflow: auto !important
}

@media (min-width: 544px) {
    .u-overflow-visible\@sm {
        overflow: visible !important
    }

    .u-overflow-hidden\@sm {
        overflow: hidden !important
    }

    .u-overflow-scroll\@sm {
        overflow: scroll !important
    }

    .u-overflow-auto\@sm {
        overflow: auto !important
    }

    .u-overflow-x-visible\@sm {
        overflow: visible !important
    }

    .u-overflow-x-hidden\@sm {
        overflow: hidden !important
    }

    .u-overflow-x-scroll\@sm {
        overflow: scroll !important
    }

    .u-overflow-x-auto\@sm {
        overflow: auto !important
    }

    .u-overflow-y-visible\@sm {
        overflow: visible !important
    }

    .u-overflow-y-hidden\@sm {
        overflow: hidden !important
    }

    .u-overflow-y-scroll\@sm {
        overflow: scroll !important
    }

    .u-overflow-y-auto\@sm {
        overflow: auto !important
    }
}

@media (min-width: 768px) {
    .u-overflow-visible\@md {
        overflow: visible !important
    }

    .u-overflow-hidden\@md {
        overflow: hidden !important
    }

    .u-overflow-scroll\@md {
        overflow: scroll !important
    }

    .u-overflow-auto\@md {
        overflow: auto !important
    }

    .u-overflow-x-visible\@md {
        overflow: visible !important
    }

    .u-overflow-x-hidden\@md {
        overflow: hidden !important
    }

    .u-overflow-x-scroll\@md {
        overflow: scroll !important
    }

    .u-overflow-x-auto\@md {
        overflow: auto !important
    }

    .u-overflow-y-visible\@md {
        overflow: visible !important
    }

    .u-overflow-y-hidden\@md {
        overflow: hidden !important
    }

    .u-overflow-y-scroll\@md {
        overflow: scroll !important
    }

    .u-overflow-y-auto\@md {
        overflow: auto !important
    }
}

@media (min-width: 992px) {
    .u-overflow-visible\@lg {
        overflow: visible !important
    }

    .u-overflow-hidden\@lg {
        overflow: hidden !important
    }

    .u-overflow-scroll\@lg {
        overflow: scroll !important
    }

    .u-overflow-auto\@lg {
        overflow: auto !important
    }

    .u-overflow-x-visible\@lg {
        overflow: visible !important
    }

    .u-overflow-x-hidden\@lg {
        overflow: hidden !important
    }

    .u-overflow-x-scroll\@lg {
        overflow: scroll !important
    }

    .u-overflow-x-auto\@lg {
        overflow: auto !important
    }

    .u-overflow-y-visible\@lg {
        overflow: visible !important
    }

    .u-overflow-y-hidden\@lg {
        overflow: hidden !important
    }

    .u-overflow-y-scroll\@lg {
        overflow: scroll !important
    }

    .u-overflow-y-auto\@lg {
        overflow: auto !important
    }
}

@media (min-width: 1200px) {
    .u-overflow-visible\@xl {
        overflow: visible !important
    }

    .u-overflow-hidden\@xl {
        overflow: hidden !important
    }

    .u-overflow-scroll\@xl {
        overflow: scroll !important
    }

    .u-overflow-auto\@xl {
        overflow: auto !important
    }

    .u-overflow-x-visible\@xl {
        overflow: visible !important
    }

    .u-overflow-x-hidden\@xl {
        overflow: hidden !important
    }

    .u-overflow-x-scroll\@xl {
        overflow: scroll !important
    }

    .u-overflow-x-auto\@xl {
        overflow: auto !important
    }

    .u-overflow-y-visible\@xl {
        overflow: visible !important
    }

    .u-overflow-y-hidden\@xl {
        overflow: hidden !important
    }

    .u-overflow-y-scroll\@xl {
        overflow: scroll !important
    }

    .u-overflow-y-auto\@xl {
        overflow: auto !important
    }
}

.u-pos-absolute {
    position: absolute !important
}

.u-pos-fixed {
    position: fixed !important
}

.u-pos-inherit {
    position: inherit !important
}

.u-pos-initial {
    position: initial !important
}

.u-pos-relative {
    position: relative !important
}

.u-pos-static {
    position: static !important
}

@media (min-width: 544px) {
    .u-pos-absolute\@sm {
        position: absolute !important
    }

    .u-pos-fixed\@sm {
        position: fixed !important
    }

    .u-pos-inherit\@sm {
        position: inherit !important
    }

    .u-pos-initial\@sm {
        position: initial !important
    }

    .u-pos-relative\@sm {
        position: relative !important
    }

    .u-pos-static\@sm {
        position: static !important
    }
}

@media (min-width: 768px) {
    .u-pos-absolute\@md {
        position: absolute !important
    }

    .u-pos-fixed\@md {
        position: fixed !important
    }

    .u-pos-inherit\@md {
        position: inherit !important
    }

    .u-pos-initial\@md {
        position: initial !important
    }

    .u-pos-relative\@md {
        position: relative !important
    }

    .u-pos-static\@md {
        position: static !important
    }
}

@media (min-width: 992px) {
    .u-pos-absolute\@lg {
        position: absolute !important
    }

    .u-pos-fixed\@lg {
        position: fixed !important
    }

    .u-pos-inherit\@lg {
        position: inherit !important
    }

    .u-pos-initial\@lg {
        position: initial !important
    }

    .u-pos-relative\@lg {
        position: relative !important
    }

    .u-pos-static\@lg {
        position: static !important
    }
}

@media (min-width: 1200px) {
    .u-pos-absolute\@xl {
        position: absolute !important
    }

    .u-pos-fixed\@xl {
        position: fixed !important
    }

    .u-pos-inherit\@xl {
        position: inherit !important
    }

    .u-pos-initial\@xl {
        position: initial !important
    }

    .u-pos-relative\@xl {
        position: relative !important
    }

    .u-pos-static\@xl {
        position: static !important
    }
}

.t-shadow-0 {
    box-shadow: 0 1px 1px transparent
}

.t-shadow-1 {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

.t-shadow-2 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.t-shadow-3 {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .12)
}

.t-shadow-4 {
    box-shadow: 0 8px 10px rgba(0, 0, 0, .12)
}

.t-shadow-5 {
    box-shadow: 0 12px 16px rgba(0, 0, 0, .12)
}

.t-shadow-hover-0 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-0:hover {
    box-shadow: 0 1px 1px transparent
}

.t-shadow-hover-1 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-1:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

.t-shadow-hover-2 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-2:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.t-shadow-hover-3 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-3:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .12)
}

.t-shadow-hover-4 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-4:hover {
    box-shadow: 0 8px 10px rgba(0, 0, 0, .12)
}

.t-shadow-hover-5 {
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease
}

.t-shadow-hover-5:hover {
    box-shadow: 0 12px 16px rgba(0, 0, 0, .12)
}

.u-mrg-0 {
    margin: 0 !important
}

@media (min-width: 544px) {
    .u-mrg-0\@sm {
        margin: 0 !important
    }
}

@media (min-width: 768px) {
    .u-mrg-0\@md {
        margin: 0 !important
    }
}

@media (min-width: 992px) {
    .u-mrg-0\@lg {
        margin: 0 !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-0\@xl {
        margin: 0 !important
    }
}

.u-mrg-0 {
    margin: 0 !important
}

.u-mrg-1 {
    margin: 4px !important
}

.u-mrg-2 {
    margin: 8px !important
}

.u-mrg-3 {
    margin: 12px !important
}

.u-mrg-4 {
    margin: 16px !important
}

.u-mrg-5 {
    margin: 20px !important
}

.u-mrg-6 {
    margin: 24px !important
}

.u-mrg-7 {
    margin: 28px !important
}

.u-mrg-8 {
    margin: 32px !important
}

.u-mrg-9 {
    margin: 36px !important
}

.u-mrg-10 {
    margin: 40px !important
}

.u-mrg-1m {
    margin: 1em !important
}

.u-mrg-2m {
    margin: 2em !important
}

.u-mrg-3m {
    margin: 3em !important
}

.u-mrg-4m {
    margin: 4em !important
}

.u-mrg-5m {
    margin: 5em !important
}

.u-mrg-auto {
    margin: auto !important
}

.u-mrg-6m {
    margin: 6em !important
}

.u-mrg-7m {
    margin: 7em !important
}

.u-mrg-8m {
    margin: 8em !important
}

.u-mrg-9m {
    margin: 9em !important
}

.u-mrg-10m {
    margin: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-0\@sm {
        margin: 0 !important
    }

    .u-mrg-1\@sm {
        margin: 4px !important
    }

    .u-mrg-2\@sm {
        margin: 8px !important
    }

    .u-mrg-3\@sm {
        margin: 12px !important
    }

    .u-mrg-4\@sm {
        margin: 16px !important
    }

    .u-mrg-5\@sm {
        margin: 20px !important
    }

    .u-mrg-6\@sm {
        margin: 24px !important
    }

    .u-mrg-7\@sm {
        margin: 28px !important
    }

    .u-mrg-8\@sm {
        margin: 32px !important
    }

    .u-mrg-9\@sm {
        margin: 36px !important
    }

    .u-mrg-10\@sm {
        margin: 40px !important
    }

    .u-mrg-1m\@sm {
        margin: 1em !important
    }

    .u-mrg-2m\@sm {
        margin: 2em !important
    }

    .u-mrg-3m\@sm {
        margin: 3em !important
    }

    .u-mrg-4m\@sm {
        margin: 4em !important
    }

    .u-mrg-5m\@sm {
        margin: 5em !important
    }

    .u-mrg-auto\@sm {
        margin: auto !important
    }

    .u-mrg-6m\@sm {
        margin: 6em !important
    }

    .u-mrg-7m\@sm {
        margin: 7em !important
    }

    .u-mrg-8m\@sm {
        margin: 8em !important
    }

    .u-mrg-9m\@sm {
        margin: 9em !important
    }

    .u-mrg-10m\@sm {
        margin: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-0\@md {
        margin: 0 !important
    }

    .u-mrg-1\@md {
        margin: 4px !important
    }

    .u-mrg-2\@md {
        margin: 8px !important
    }

    .u-mrg-3\@md {
        margin: 12px !important
    }

    .u-mrg-4\@md {
        margin: 16px !important
    }

    .u-mrg-5\@md {
        margin: 20px !important
    }

    .u-mrg-6\@md {
        margin: 24px !important
    }

    .u-mrg-7\@md {
        margin: 28px !important
    }

    .u-mrg-8\@md {
        margin: 32px !important
    }

    .u-mrg-9\@md {
        margin: 36px !important
    }

    .u-mrg-10\@md {
        margin: 40px !important
    }

    .u-mrg-1m\@md {
        margin: 1em !important
    }

    .u-mrg-2m\@md {
        margin: 2em !important
    }

    .u-mrg-3m\@md {
        margin: 3em !important
    }

    .u-mrg-4m\@md {
        margin: 4em !important
    }

    .u-mrg-5m\@md {
        margin: 5em !important
    }

    .u-mrg-auto\@md {
        margin: auto !important
    }

    .u-mrg-6m\@md {
        margin: 6em !important
    }

    .u-mrg-7m\@md {
        margin: 7em !important
    }

    .u-mrg-8m\@md {
        margin: 8em !important
    }

    .u-mrg-9m\@md {
        margin: 9em !important
    }

    .u-mrg-10m\@md {
        margin: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-0\@lg {
        margin: 0 !important
    }

    .u-mrg-1\@lg {
        margin: 4px !important
    }

    .u-mrg-2\@lg {
        margin: 8px !important
    }

    .u-mrg-3\@lg {
        margin: 12px !important
    }

    .u-mrg-4\@lg {
        margin: 16px !important
    }

    .u-mrg-5\@lg {
        margin: 20px !important
    }

    .u-mrg-6\@lg {
        margin: 24px !important
    }

    .u-mrg-7\@lg {
        margin: 28px !important
    }

    .u-mrg-8\@lg {
        margin: 32px !important
    }

    .u-mrg-9\@lg {
        margin: 36px !important
    }

    .u-mrg-10\@lg {
        margin: 40px !important
    }

    .u-mrg-1m\@lg {
        margin: 1em !important
    }

    .u-mrg-2m\@lg {
        margin: 2em !important
    }

    .u-mrg-3m\@lg {
        margin: 3em !important
    }

    .u-mrg-4m\@lg {
        margin: 4em !important
    }

    .u-mrg-5m\@lg {
        margin: 5em !important
    }

    .u-mrg-auto\@lg {
        margin: auto !important
    }

    .u-mrg-6m\@lg {
        margin: 6em !important
    }

    .u-mrg-7m\@lg {
        margin: 7em !important
    }

    .u-mrg-8m\@lg {
        margin: 8em !important
    }

    .u-mrg-9m\@lg {
        margin: 9em !important
    }

    .u-mrg-10m\@lg {
        margin: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-0\@xl {
        margin: 0 !important
    }

    .u-mrg-1\@xl {
        margin: 4px !important
    }

    .u-mrg-2\@xl {
        margin: 8px !important
    }

    .u-mrg-3\@xl {
        margin: 12px !important
    }

    .u-mrg-4\@xl {
        margin: 16px !important
    }

    .u-mrg-5\@xl {
        margin: 20px !important
    }

    .u-mrg-6\@xl {
        margin: 24px !important
    }

    .u-mrg-7\@xl {
        margin: 28px !important
    }

    .u-mrg-8\@xl {
        margin: 32px !important
    }

    .u-mrg-9\@xl {
        margin: 36px !important
    }

    .u-mrg-10\@xl {
        margin: 40px !important
    }

    .u-mrg-1m\@xl {
        margin: 1em !important
    }

    .u-mrg-2m\@xl {
        margin: 2em !important
    }

    .u-mrg-3m\@xl {
        margin: 3em !important
    }

    .u-mrg-4m\@xl {
        margin: 4em !important
    }

    .u-mrg-5m\@xl {
        margin: 5em !important
    }

    .u-mrg-auto\@xl {
        margin: auto !important
    }

    .u-mrg-6m\@xl {
        margin: 6em !important
    }

    .u-mrg-7m\@xl {
        margin: 7em !important
    }

    .u-mrg-8m\@xl {
        margin: 8em !important
    }

    .u-mrg-9m\@xl {
        margin: 9em !important
    }

    .u-mrg-10m\@xl {
        margin: 10em !important
    }
}

.u-mrg-t-0 {
    margin-top: 0 !important
}

.u-mrg-t-1 {
    margin-top: 4px !important
}

.u-mrg-t-2 {
    margin-top: 8px !important
}

.u-mrg-t-3 {
    margin-top: 12px !important
}

.u-mrg-t-4 {
    margin-top: 16px !important
}

.u-mrg-t-5 {
    margin-top: 20px !important
}

.u-mrg-t-6 {
    margin-top: 24px !important
}

.u-mrg-t-7 {
    margin-top: 28px !important
}

.u-mrg-t-8 {
    margin-top: 32px !important
}

.u-mrg-t-9 {
    margin-top: 36px !important
}

.u-mrg-t-10 {
    margin-top: 40px !important
}

.u-mrg-t-1m {
    margin-top: 1em !important
}

.u-mrg-t-2m {
    margin-top: 2em !important
}

.u-mrg-t-3m {
    margin-top: 3em !important
}

.u-mrg-t-4m {
    margin-top: 4em !important
}

.u-mrg-t-5m {
    margin-top: 5em !important
}

.u-mrg-t-auto {
    margin-top: auto !important
}

.u-mrg-t-6m {
    margin-top: 6em !important
}

.u-mrg-t-7m {
    margin-top: 7em !important
}

.u-mrg-t-8m {
    margin-top: 8em !important
}

.u-mrg-t-9m {
    margin-top: 9em !important
}

.u-mrg-t-10m {
    margin-top: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-t-0\@sm {
        margin-top: 0 !important
    }

    .u-mrg-t-1\@sm {
        margin-top: 4px !important
    }

    .u-mrg-t-2\@sm {
        margin-top: 8px !important
    }

    .u-mrg-t-3\@sm {
        margin-top: 12px !important
    }

    .u-mrg-t-4\@sm {
        margin-top: 16px !important
    }

    .u-mrg-t-5\@sm {
        margin-top: 20px !important
    }

    .u-mrg-t-6\@sm {
        margin-top: 24px !important
    }

    .u-mrg-t-7\@sm {
        margin-top: 28px !important
    }

    .u-mrg-t-8\@sm {
        margin-top: 32px !important
    }

    .u-mrg-t-9\@sm {
        margin-top: 36px !important
    }

    .u-mrg-t-10\@sm {
        margin-top: 40px !important
    }

    .u-mrg-t-1m\@sm {
        margin-top: 1em !important
    }

    .u-mrg-t-2m\@sm {
        margin-top: 2em !important
    }

    .u-mrg-t-3m\@sm {
        margin-top: 3em !important
    }

    .u-mrg-t-4m\@sm {
        margin-top: 4em !important
    }

    .u-mrg-t-5m\@sm {
        margin-top: 5em !important
    }

    .u-mrg-t-auto\@sm {
        margin-top: auto !important
    }

    .u-mrg-t-6m\@sm {
        margin-top: 6em !important
    }

    .u-mrg-t-7m\@sm {
        margin-top: 7em !important
    }

    .u-mrg-t-8m\@sm {
        margin-top: 8em !important
    }

    .u-mrg-t-9m\@sm {
        margin-top: 9em !important
    }

    .u-mrg-t-10m\@sm {
        margin-top: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-t-0\@md {
        margin-top: 0 !important
    }

    .u-mrg-t-1\@md {
        margin-top: 4px !important
    }

    .u-mrg-t-2\@md {
        margin-top: 8px !important
    }

    .u-mrg-t-3\@md {
        margin-top: 12px !important
    }

    .u-mrg-t-4\@md {
        margin-top: 16px !important
    }

    .u-mrg-t-5\@md {
        margin-top: 20px !important
    }

    .u-mrg-t-6\@md {
        margin-top: 24px !important
    }

    .u-mrg-t-7\@md {
        margin-top: 28px !important
    }

    .u-mrg-t-8\@md {
        margin-top: 32px !important
    }

    .u-mrg-t-9\@md {
        margin-top: 36px !important
    }

    .u-mrg-t-10\@md {
        margin-top: 40px !important
    }

    .u-mrg-t-1m\@md {
        margin-top: 1em !important
    }

    .u-mrg-t-2m\@md {
        margin-top: 2em !important
    }

    .u-mrg-t-3m\@md {
        margin-top: 3em !important
    }

    .u-mrg-t-4m\@md {
        margin-top: 4em !important
    }

    .u-mrg-t-5m\@md {
        margin-top: 5em !important
    }

    .u-mrg-t-auto\@md {
        margin-top: auto !important
    }

    .u-mrg-t-6m\@md {
        margin-top: 6em !important
    }

    .u-mrg-t-7m\@md {
        margin-top: 7em !important
    }

    .u-mrg-t-8m\@md {
        margin-top: 8em !important
    }

    .u-mrg-t-9m\@md {
        margin-top: 9em !important
    }

    .u-mrg-t-10m\@md {
        margin-top: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-t-0\@lg {
        margin-top: 0 !important
    }

    .u-mrg-t-1\@lg {
        margin-top: 4px !important
    }

    .u-mrg-t-2\@lg {
        margin-top: 8px !important
    }

    .u-mrg-t-3\@lg {
        margin-top: 12px !important
    }

    .u-mrg-t-4\@lg {
        margin-top: 16px !important
    }

    .u-mrg-t-5\@lg {
        margin-top: 20px !important
    }

    .u-mrg-t-6\@lg {
        margin-top: 24px !important
    }

    .u-mrg-t-7\@lg {
        margin-top: 28px !important
    }

    .u-mrg-t-8\@lg {
        margin-top: 32px !important
    }

    .u-mrg-t-9\@lg {
        margin-top: 36px !important
    }

    .u-mrg-t-10\@lg {
        margin-top: 40px !important
    }

    .u-mrg-t-1m\@lg {
        margin-top: 1em !important
    }

    .u-mrg-t-2m\@lg {
        margin-top: 2em !important
    }

    .u-mrg-t-3m\@lg {
        margin-top: 3em !important
    }

    .u-mrg-t-4m\@lg {
        margin-top: 4em !important
    }

    .u-mrg-t-5m\@lg {
        margin-top: 5em !important
    }

    .u-mrg-t-auto\@lg {
        margin-top: auto !important
    }

    .u-mrg-t-6m\@lg {
        margin-top: 6em !important
    }

    .u-mrg-t-7m\@lg {
        margin-top: 7em !important
    }

    .u-mrg-t-8m\@lg {
        margin-top: 8em !important
    }

    .u-mrg-t-9m\@lg {
        margin-top: 9em !important
    }

    .u-mrg-t-10m\@lg {
        margin-top: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-t-0\@xl {
        margin-top: 0 !important
    }

    .u-mrg-t-1\@xl {
        margin-top: 4px !important
    }

    .u-mrg-t-2\@xl {
        margin-top: 8px !important
    }

    .u-mrg-t-3\@xl {
        margin-top: 12px !important
    }

    .u-mrg-t-4\@xl {
        margin-top: 16px !important
    }

    .u-mrg-t-5\@xl {
        margin-top: 20px !important
    }

    .u-mrg-t-6\@xl {
        margin-top: 24px !important
    }

    .u-mrg-t-7\@xl {
        margin-top: 28px !important
    }

    .u-mrg-t-8\@xl {
        margin-top: 32px !important
    }

    .u-mrg-t-9\@xl {
        margin-top: 36px !important
    }

    .u-mrg-t-10\@xl {
        margin-top: 40px !important
    }

    .u-mrg-t-1m\@xl {
        margin-top: 1em !important
    }

    .u-mrg-t-2m\@xl {
        margin-top: 2em !important
    }

    .u-mrg-t-3m\@xl {
        margin-top: 3em !important
    }

    .u-mrg-t-4m\@xl {
        margin-top: 4em !important
    }

    .u-mrg-t-5m\@xl {
        margin-top: 5em !important
    }

    .u-mrg-t-auto\@xl {
        margin-top: auto !important
    }

    .u-mrg-t-6m\@xl {
        margin-top: 6em !important
    }

    .u-mrg-t-7m\@xl {
        margin-top: 7em !important
    }

    .u-mrg-t-8m\@xl {
        margin-top: 8em !important
    }

    .u-mrg-t-9m\@xl {
        margin-top: 9em !important
    }

    .u-mrg-t-10m\@xl {
        margin-top: 10em !important
    }
}

.u-mrg-r-0 {
    margin-right: 0 !important
}

.u-mrg-r-1 {
    margin-right: 4px !important
}

.u-mrg-r-2 {
    margin-right: 8px !important
}

.u-mrg-r-3 {
    margin-right: 12px !important
}

.u-mrg-r-4 {
    margin-right: 16px !important
}

.u-mrg-r-5 {
    margin-right: 20px !important
}

.u-mrg-r-6 {
    margin-right: 24px !important
}

.u-mrg-r-7 {
    margin-right: 28px !important
}

.u-mrg-r-8 {
    margin-right: 32px !important
}

.u-mrg-r-9 {
    margin-right: 36px !important
}

.u-mrg-r-10 {
    margin-right: 40px !important
}

.u-mrg-r-1m {
    margin-right: 1em !important
}

.u-mrg-r-2m {
    margin-right: 2em !important
}

.u-mrg-r-3m {
    margin-right: 3em !important
}

.u-mrg-r-4m {
    margin-right: 4em !important
}

.u-mrg-r-5m {
    margin-right: 5em !important
}

.u-mrg-r-auto {
    margin-right: auto !important
}

.u-mrg-r-6m {
    margin-right: 6em !important
}

.u-mrg-r-7m {
    margin-right: 7em !important
}

.u-mrg-r-8m {
    margin-right: 8em !important
}

.u-mrg-r-9m {
    margin-right: 9em !important
}

.u-mrg-r-10m {
    margin-right: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-r-0\@sm {
        margin-right: 0 !important
    }

    .u-mrg-r-1\@sm {
        margin-right: 4px !important
    }

    .u-mrg-r-2\@sm {
        margin-right: 8px !important
    }

    .u-mrg-r-3\@sm {
        margin-right: 12px !important
    }

    .u-mrg-r-4\@sm {
        margin-right: 16px !important
    }

    .u-mrg-r-5\@sm {
        margin-right: 20px !important
    }

    .u-mrg-r-6\@sm {
        margin-right: 24px !important
    }

    .u-mrg-r-7\@sm {
        margin-right: 28px !important
    }

    .u-mrg-r-8\@sm {
        margin-right: 32px !important
    }

    .u-mrg-r-9\@sm {
        margin-right: 36px !important
    }

    .u-mrg-r-10\@sm {
        margin-right: 40px !important
    }

    .u-mrg-r-1m\@sm {
        margin-right: 1em !important
    }

    .u-mrg-r-2m\@sm {
        margin-right: 2em !important
    }

    .u-mrg-r-3m\@sm {
        margin-right: 3em !important
    }

    .u-mrg-r-4m\@sm {
        margin-right: 4em !important
    }

    .u-mrg-r-5m\@sm {
        margin-right: 5em !important
    }

    .u-mrg-r-auto\@sm {
        margin-right: auto !important
    }

    .u-mrg-r-6m\@sm {
        margin-right: 6em !important
    }

    .u-mrg-r-7m\@sm {
        margin-right: 7em !important
    }

    .u-mrg-r-8m\@sm {
        margin-right: 8em !important
    }

    .u-mrg-r-9m\@sm {
        margin-right: 9em !important
    }

    .u-mrg-r-10m\@sm {
        margin-right: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-r-0\@md {
        margin-right: 0 !important
    }

    .u-mrg-r-1\@md {
        margin-right: 4px !important
    }

    .u-mrg-r-2\@md {
        margin-right: 8px !important
    }

    .u-mrg-r-3\@md {
        margin-right: 12px !important
    }

    .u-mrg-r-4\@md {
        margin-right: 16px !important
    }

    .u-mrg-r-5\@md {
        margin-right: 20px !important
    }

    .u-mrg-r-6\@md {
        margin-right: 24px !important
    }

    .u-mrg-r-7\@md {
        margin-right: 28px !important
    }

    .u-mrg-r-8\@md {
        margin-right: 32px !important
    }

    .u-mrg-r-9\@md {
        margin-right: 36px !important
    }

    .u-mrg-r-10\@md {
        margin-right: 40px !important
    }

    .u-mrg-r-1m\@md {
        margin-right: 1em !important
    }

    .u-mrg-r-2m\@md {
        margin-right: 2em !important
    }

    .u-mrg-r-3m\@md {
        margin-right: 3em !important
    }

    .u-mrg-r-4m\@md {
        margin-right: 4em !important
    }

    .u-mrg-r-5m\@md {
        margin-right: 5em !important
    }

    .u-mrg-r-auto\@md {
        margin-right: auto !important
    }

    .u-mrg-r-6m\@md {
        margin-right: 6em !important
    }

    .u-mrg-r-7m\@md {
        margin-right: 7em !important
    }

    .u-mrg-r-8m\@md {
        margin-right: 8em !important
    }

    .u-mrg-r-9m\@md {
        margin-right: 9em !important
    }

    .u-mrg-r-10m\@md {
        margin-right: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-r-0\@lg {
        margin-right: 0 !important
    }

    .u-mrg-r-1\@lg {
        margin-right: 4px !important
    }

    .u-mrg-r-2\@lg {
        margin-right: 8px !important
    }

    .u-mrg-r-3\@lg {
        margin-right: 12px !important
    }

    .u-mrg-r-4\@lg {
        margin-right: 16px !important
    }

    .u-mrg-r-5\@lg {
        margin-right: 20px !important
    }

    .u-mrg-r-6\@lg {
        margin-right: 24px !important
    }

    .u-mrg-r-7\@lg {
        margin-right: 28px !important
    }

    .u-mrg-r-8\@lg {
        margin-right: 32px !important
    }

    .u-mrg-r-9\@lg {
        margin-right: 36px !important
    }

    .u-mrg-r-10\@lg {
        margin-right: 40px !important
    }

    .u-mrg-r-1m\@lg {
        margin-right: 1em !important
    }

    .u-mrg-r-2m\@lg {
        margin-right: 2em !important
    }

    .u-mrg-r-3m\@lg {
        margin-right: 3em !important
    }

    .u-mrg-r-4m\@lg {
        margin-right: 4em !important
    }

    .u-mrg-r-5m\@lg {
        margin-right: 5em !important
    }

    .u-mrg-r-auto\@lg {
        margin-right: auto !important
    }

    .u-mrg-r-6m\@lg {
        margin-right: 6em !important
    }

    .u-mrg-r-7m\@lg {
        margin-right: 7em !important
    }

    .u-mrg-r-8m\@lg {
        margin-right: 8em !important
    }

    .u-mrg-r-9m\@lg {
        margin-right: 9em !important
    }

    .u-mrg-r-10m\@lg {
        margin-right: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-r-0\@xl {
        margin-right: 0 !important
    }

    .u-mrg-r-1\@xl {
        margin-right: 4px !important
    }

    .u-mrg-r-2\@xl {
        margin-right: 8px !important
    }

    .u-mrg-r-3\@xl {
        margin-right: 12px !important
    }

    .u-mrg-r-4\@xl {
        margin-right: 16px !important
    }

    .u-mrg-r-5\@xl {
        margin-right: 20px !important
    }

    .u-mrg-r-6\@xl {
        margin-right: 24px !important
    }

    .u-mrg-r-7\@xl {
        margin-right: 28px !important
    }

    .u-mrg-r-8\@xl {
        margin-right: 32px !important
    }

    .u-mrg-r-9\@xl {
        margin-right: 36px !important
    }

    .u-mrg-r-10\@xl {
        margin-right: 40px !important
    }

    .u-mrg-r-1m\@xl {
        margin-right: 1em !important
    }

    .u-mrg-r-2m\@xl {
        margin-right: 2em !important
    }

    .u-mrg-r-3m\@xl {
        margin-right: 3em !important
    }

    .u-mrg-r-4m\@xl {
        margin-right: 4em !important
    }

    .u-mrg-r-5m\@xl {
        margin-right: 5em !important
    }

    .u-mrg-r-auto\@xl {
        margin-right: auto !important
    }

    .u-mrg-r-6m\@xl {
        margin-right: 6em !important
    }

    .u-mrg-r-7m\@xl {
        margin-right: 7em !important
    }

    .u-mrg-r-8m\@xl {
        margin-right: 8em !important
    }

    .u-mrg-r-9m\@xl {
        margin-right: 9em !important
    }

    .u-mrg-r-10m\@xl {
        margin-right: 10em !important
    }
}

.u-mrg-b-0 {
    margin-bottom: 0 !important
}

.u-mrg-b-1 {
    margin-bottom: 4px !important
}

.u-mrg-b-2 {
    margin-bottom: 8px !important
}

.u-mrg-b-3 {
    margin-bottom: 12px !important
}

.u-mrg-b-4 {
    margin-bottom: 16px !important
}

.u-mrg-b-5 {
    margin-bottom: 20px !important
}

.u-mrg-b-6 {
    margin-bottom: 24px !important
}

.u-mrg-b-7 {
    margin-bottom: 28px !important
}

.u-mrg-b-8 {
    margin-bottom: 32px !important
}

.u-mrg-b-9 {
    margin-bottom: 36px !important
}

.u-mrg-b-10 {
    margin-bottom: 40px !important
}

.u-mrg-b-1m {
    margin-bottom: 1em !important
}

.u-mrg-b-2m {
    margin-bottom: 2em !important
}

.u-mrg-b-3m {
    margin-bottom: 3em !important
}

.u-mrg-b-4m {
    margin-bottom: 4em !important
}

.u-mrg-b-5m {
    margin-bottom: 5em !important
}

.u-mrg-b-auto {
    margin-bottom: auto !important
}

.u-mrg-b-6m {
    margin-bottom: 6em !important
}

.u-mrg-b-7m {
    margin-bottom: 7em !important
}

.u-mrg-b-8m {
    margin-bottom: 8em !important
}

.u-mrg-b-9m {
    margin-bottom: 9em !important
}

.u-mrg-b-10m {
    margin-bottom: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-b-0\@sm {
        margin-bottom: 0 !important
    }

    .u-mrg-b-1\@sm {
        margin-bottom: 4px !important
    }

    .u-mrg-b-2\@sm {
        margin-bottom: 8px !important
    }

    .u-mrg-b-3\@sm {
        margin-bottom: 12px !important
    }

    .u-mrg-b-4\@sm {
        margin-bottom: 16px !important
    }

    .u-mrg-b-5\@sm {
        margin-bottom: 20px !important
    }

    .u-mrg-b-6\@sm {
        margin-bottom: 24px !important
    }

    .u-mrg-b-7\@sm {
        margin-bottom: 28px !important
    }

    .u-mrg-b-8\@sm {
        margin-bottom: 32px !important
    }

    .u-mrg-b-9\@sm {
        margin-bottom: 36px !important
    }

    .u-mrg-b-10\@sm {
        margin-bottom: 40px !important
    }

    .u-mrg-b-1m\@sm {
        margin-bottom: 1em !important
    }

    .u-mrg-b-2m\@sm {
        margin-bottom: 2em !important
    }

    .u-mrg-b-3m\@sm {
        margin-bottom: 3em !important
    }

    .u-mrg-b-4m\@sm {
        margin-bottom: 4em !important
    }

    .u-mrg-b-5m\@sm {
        margin-bottom: 5em !important
    }

    .u-mrg-b-auto\@sm {
        margin-bottom: auto !important
    }

    .u-mrg-b-6m\@sm {
        margin-bottom: 6em !important
    }

    .u-mrg-b-7m\@sm {
        margin-bottom: 7em !important
    }

    .u-mrg-b-8m\@sm {
        margin-bottom: 8em !important
    }

    .u-mrg-b-9m\@sm {
        margin-bottom: 9em !important
    }

    .u-mrg-b-10m\@sm {
        margin-bottom: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-b-0\@md {
        margin-bottom: 0 !important
    }

    .u-mrg-b-1\@md {
        margin-bottom: 4px !important
    }

    .u-mrg-b-2\@md {
        margin-bottom: 8px !important
    }

    .u-mrg-b-3\@md {
        margin-bottom: 12px !important
    }

    .u-mrg-b-4\@md {
        margin-bottom: 16px !important
    }

    .u-mrg-b-5\@md {
        margin-bottom: 20px !important
    }

    .u-mrg-b-6\@md {
        margin-bottom: 24px !important
    }

    .u-mrg-b-7\@md {
        margin-bottom: 28px !important
    }

    .u-mrg-b-8\@md {
        margin-bottom: 32px !important
    }

    .u-mrg-b-9\@md {
        margin-bottom: 36px !important
    }

    .u-mrg-b-10\@md {
        margin-bottom: 40px !important
    }

    .u-mrg-b-1m\@md {
        margin-bottom: 1em !important
    }

    .u-mrg-b-2m\@md {
        margin-bottom: 2em !important
    }

    .u-mrg-b-3m\@md {
        margin-bottom: 3em !important
    }

    .u-mrg-b-4m\@md {
        margin-bottom: 4em !important
    }

    .u-mrg-b-5m\@md {
        margin-bottom: 5em !important
    }

    .u-mrg-b-auto\@md {
        margin-bottom: auto !important
    }

    .u-mrg-b-6m\@md {
        margin-bottom: 6em !important
    }

    .u-mrg-b-7m\@md {
        margin-bottom: 7em !important
    }

    .u-mrg-b-8m\@md {
        margin-bottom: 8em !important
    }

    .u-mrg-b-9m\@md {
        margin-bottom: 9em !important
    }

    .u-mrg-b-10m\@md {
        margin-bottom: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-b-0\@lg {
        margin-bottom: 0 !important
    }

    .u-mrg-b-1\@lg {
        margin-bottom: 4px !important
    }

    .u-mrg-b-2\@lg {
        margin-bottom: 8px !important
    }

    .u-mrg-b-3\@lg {
        margin-bottom: 12px !important
    }

    .u-mrg-b-4\@lg {
        margin-bottom: 16px !important
    }

    .u-mrg-b-5\@lg {
        margin-bottom: 20px !important
    }

    .u-mrg-b-6\@lg {
        margin-bottom: 24px !important
    }

    .u-mrg-b-7\@lg {
        margin-bottom: 28px !important
    }

    .u-mrg-b-8\@lg {
        margin-bottom: 32px !important
    }

    .u-mrg-b-9\@lg {
        margin-bottom: 36px !important
    }

    .u-mrg-b-10\@lg {
        margin-bottom: 40px !important
    }

    .u-mrg-b-1m\@lg {
        margin-bottom: 1em !important
    }

    .u-mrg-b-2m\@lg {
        margin-bottom: 2em !important
    }

    .u-mrg-b-3m\@lg {
        margin-bottom: 3em !important
    }

    .u-mrg-b-4m\@lg {
        margin-bottom: 4em !important
    }

    .u-mrg-b-5m\@lg {
        margin-bottom: 5em !important
    }

    .u-mrg-b-auto\@lg {
        margin-bottom: auto !important
    }

    .u-mrg-b-6m\@lg {
        margin-bottom: 6em !important
    }

    .u-mrg-b-7m\@lg {
        margin-bottom: 7em !important
    }

    .u-mrg-b-8m\@lg {
        margin-bottom: 8em !important
    }

    .u-mrg-b-9m\@lg {
        margin-bottom: 9em !important
    }

    .u-mrg-b-10m\@lg {
        margin-bottom: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-b-0\@xl {
        margin-bottom: 0 !important
    }

    .u-mrg-b-1\@xl {
        margin-bottom: 4px !important
    }

    .u-mrg-b-2\@xl {
        margin-bottom: 8px !important
    }

    .u-mrg-b-3\@xl {
        margin-bottom: 12px !important
    }

    .u-mrg-b-4\@xl {
        margin-bottom: 16px !important
    }

    .u-mrg-b-5\@xl {
        margin-bottom: 20px !important
    }

    .u-mrg-b-6\@xl {
        margin-bottom: 24px !important
    }

    .u-mrg-b-7\@xl {
        margin-bottom: 28px !important
    }

    .u-mrg-b-8\@xl {
        margin-bottom: 32px !important
    }

    .u-mrg-b-9\@xl {
        margin-bottom: 36px !important
    }

    .u-mrg-b-10\@xl {
        margin-bottom: 40px !important
    }

    .u-mrg-b-1m\@xl {
        margin-bottom: 1em !important
    }

    .u-mrg-b-2m\@xl {
        margin-bottom: 2em !important
    }

    .u-mrg-b-3m\@xl {
        margin-bottom: 3em !important
    }

    .u-mrg-b-4m\@xl {
        margin-bottom: 4em !important
    }

    .u-mrg-b-5m\@xl {
        margin-bottom: 5em !important
    }

    .u-mrg-b-auto\@xl {
        margin-bottom: auto !important
    }

    .u-mrg-b-6m\@xl {
        margin-bottom: 6em !important
    }

    .u-mrg-b-7m\@xl {
        margin-bottom: 7em !important
    }

    .u-mrg-b-8m\@xl {
        margin-bottom: 8em !important
    }

    .u-mrg-b-9m\@xl {
        margin-bottom: 9em !important
    }

    .u-mrg-b-10m\@xl {
        margin-bottom: 10em !important
    }
}

.u-mrg-l-0 {
    margin-left: 0 !important
}

.u-mrg-l-1 {
    margin-left: 4px !important
}

.u-mrg-l-2 {
    margin-left: 8px !important
}

.u-mrg-l-3 {
    margin-left: 12px !important
}

.u-mrg-l-4 {
    margin-left: 16px !important
}

.u-mrg-l-5 {
    margin-left: 20px !important
}

.u-mrg-l-6 {
    margin-left: 24px !important
}

.u-mrg-l-7 {
    margin-left: 28px !important
}

.u-mrg-l-8 {
    margin-left: 32px !important
}

.u-mrg-l-9 {
    margin-left: 36px !important
}

.u-mrg-l-10 {
    margin-left: 40px !important
}

.u-mrg-l-1m {
    margin-left: 1em !important
}

.u-mrg-l-2m {
    margin-left: 2em !important
}

.u-mrg-l-3m {
    margin-left: 3em !important
}

.u-mrg-l-4m {
    margin-left: 4em !important
}

.u-mrg-l-5m {
    margin-left: 5em !important
}

.u-mrg-l-auto {
    margin-left: auto !important
}

.u-mrg-l-6m {
    margin-left: 6em !important
}

.u-mrg-l-7m {
    margin-left: 7em !important
}

.u-mrg-l-8m {
    margin-left: 8em !important
}

.u-mrg-l-9m {
    margin-left: 9em !important
}

.u-mrg-l-10m {
    margin-left: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-l-0\@sm {
        margin-left: 0 !important
    }

    .u-mrg-l-1\@sm {
        margin-left: 4px !important
    }

    .u-mrg-l-2\@sm {
        margin-left: 8px !important
    }

    .u-mrg-l-3\@sm {
        margin-left: 12px !important
    }

    .u-mrg-l-4\@sm {
        margin-left: 16px !important
    }

    .u-mrg-l-5\@sm {
        margin-left: 20px !important
    }

    .u-mrg-l-6\@sm {
        margin-left: 24px !important
    }

    .u-mrg-l-7\@sm {
        margin-left: 28px !important
    }

    .u-mrg-l-8\@sm {
        margin-left: 32px !important
    }

    .u-mrg-l-9\@sm {
        margin-left: 36px !important
    }

    .u-mrg-l-10\@sm {
        margin-left: 40px !important
    }

    .u-mrg-l-1m\@sm {
        margin-left: 1em !important
    }

    .u-mrg-l-2m\@sm {
        margin-left: 2em !important
    }

    .u-mrg-l-3m\@sm {
        margin-left: 3em !important
    }

    .u-mrg-l-4m\@sm {
        margin-left: 4em !important
    }

    .u-mrg-l-5m\@sm {
        margin-left: 5em !important
    }

    .u-mrg-l-auto\@sm {
        margin-left: auto !important
    }

    .u-mrg-l-6m\@sm {
        margin-left: 6em !important
    }

    .u-mrg-l-7m\@sm {
        margin-left: 7em !important
    }

    .u-mrg-l-8m\@sm {
        margin-left: 8em !important
    }

    .u-mrg-l-9m\@sm {
        margin-left: 9em !important
    }

    .u-mrg-l-10m\@sm {
        margin-left: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-l-0\@md {
        margin-left: 0 !important
    }

    .u-mrg-l-1\@md {
        margin-left: 4px !important
    }

    .u-mrg-l-2\@md {
        margin-left: 8px !important
    }

    .u-mrg-l-3\@md {
        margin-left: 12px !important
    }

    .u-mrg-l-4\@md {
        margin-left: 16px !important
    }

    .u-mrg-l-5\@md {
        margin-left: 20px !important
    }

    .u-mrg-l-6\@md {
        margin-left: 24px !important
    }

    .u-mrg-l-7\@md {
        margin-left: 28px !important
    }

    .u-mrg-l-8\@md {
        margin-left: 32px !important
    }

    .u-mrg-l-9\@md {
        margin-left: 36px !important
    }

    .u-mrg-l-10\@md {
        margin-left: 40px !important
    }

    .u-mrg-l-1m\@md {
        margin-left: 1em !important
    }

    .u-mrg-l-2m\@md {
        margin-left: 2em !important
    }

    .u-mrg-l-3m\@md {
        margin-left: 3em !important
    }

    .u-mrg-l-4m\@md {
        margin-left: 4em !important
    }

    .u-mrg-l-5m\@md {
        margin-left: 5em !important
    }

    .u-mrg-l-auto\@md {
        margin-left: auto !important
    }

    .u-mrg-l-6m\@md {
        margin-left: 6em !important
    }

    .u-mrg-l-7m\@md {
        margin-left: 7em !important
    }

    .u-mrg-l-8m\@md {
        margin-left: 8em !important
    }

    .u-mrg-l-9m\@md {
        margin-left: 9em !important
    }

    .u-mrg-l-10m\@md {
        margin-left: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-l-0\@lg {
        margin-left: 0 !important
    }

    .u-mrg-l-1\@lg {
        margin-left: 4px !important
    }

    .u-mrg-l-2\@lg {
        margin-left: 8px !important
    }

    .u-mrg-l-3\@lg {
        margin-left: 12px !important
    }

    .u-mrg-l-4\@lg {
        margin-left: 16px !important
    }

    .u-mrg-l-5\@lg {
        margin-left: 20px !important
    }

    .u-mrg-l-6\@lg {
        margin-left: 24px !important
    }

    .u-mrg-l-7\@lg {
        margin-left: 28px !important
    }

    .u-mrg-l-8\@lg {
        margin-left: 32px !important
    }

    .u-mrg-l-9\@lg {
        margin-left: 36px !important
    }

    .u-mrg-l-10\@lg {
        margin-left: 40px !important
    }

    .u-mrg-l-1m\@lg {
        margin-left: 1em !important
    }

    .u-mrg-l-2m\@lg {
        margin-left: 2em !important
    }

    .u-mrg-l-3m\@lg {
        margin-left: 3em !important
    }

    .u-mrg-l-4m\@lg {
        margin-left: 4em !important
    }

    .u-mrg-l-5m\@lg {
        margin-left: 5em !important
    }

    .u-mrg-l-auto\@lg {
        margin-left: auto !important
    }

    .u-mrg-l-6m\@lg {
        margin-left: 6em !important
    }

    .u-mrg-l-7m\@lg {
        margin-left: 7em !important
    }

    .u-mrg-l-8m\@lg {
        margin-left: 8em !important
    }

    .u-mrg-l-9m\@lg {
        margin-left: 9em !important
    }

    .u-mrg-l-10m\@lg {
        margin-left: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-l-0\@xl {
        margin-left: 0 !important
    }

    .u-mrg-l-1\@xl {
        margin-left: 4px !important
    }

    .u-mrg-l-2\@xl {
        margin-left: 8px !important
    }

    .u-mrg-l-3\@xl {
        margin-left: 12px !important
    }

    .u-mrg-l-4\@xl {
        margin-left: 16px !important
    }

    .u-mrg-l-5\@xl {
        margin-left: 20px !important
    }

    .u-mrg-l-6\@xl {
        margin-left: 24px !important
    }

    .u-mrg-l-7\@xl {
        margin-left: 28px !important
    }

    .u-mrg-l-8\@xl {
        margin-left: 32px !important
    }

    .u-mrg-l-9\@xl {
        margin-left: 36px !important
    }

    .u-mrg-l-10\@xl {
        margin-left: 40px !important
    }

    .u-mrg-l-1m\@xl {
        margin-left: 1em !important
    }

    .u-mrg-l-2m\@xl {
        margin-left: 2em !important
    }

    .u-mrg-l-3m\@xl {
        margin-left: 3em !important
    }

    .u-mrg-l-4m\@xl {
        margin-left: 4em !important
    }

    .u-mrg-l-5m\@xl {
        margin-left: 5em !important
    }

    .u-mrg-l-auto\@xl {
        margin-left: auto !important
    }

    .u-mrg-l-6m\@xl {
        margin-left: 6em !important
    }

    .u-mrg-l-7m\@xl {
        margin-left: 7em !important
    }

    .u-mrg-l-8m\@xl {
        margin-left: 8em !important
    }

    .u-mrg-l-9m\@xl {
        margin-left: 9em !important
    }

    .u-mrg-l-10m\@xl {
        margin-left: 10em !important
    }
}

.u-mrg-h-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.u-mrg-h-1 {
    margin-left: 4px !important;
    margin-right: 4px !important
}

.u-mrg-h-2 {
    margin-left: 8px !important;
    margin-right: 8px !important
}

.u-mrg-h-3 {
    margin-left: 12px !important;
    margin-right: 12px !important
}

.u-mrg-h-4 {
    margin-left: 16px !important;
    margin-right: 16px !important
}

.u-mrg-h-5 {
    margin-left: 20px !important;
    margin-right: 20px !important
}

.u-mrg-h-6 {
    margin-left: 24px !important;
    margin-right: 24px !important
}

.u-mrg-h-7 {
    margin-left: 28px !important;
    margin-right: 28px !important
}

.u-mrg-h-8 {
    margin-left: 32px !important;
    margin-right: 32px !important
}

.u-mrg-h-9 {
    margin-left: 36px !important;
    margin-right: 36px !important
}

.u-mrg-h-10 {
    margin-left: 40px !important;
    margin-right: 40px !important
}

.u-mrg-h-1m {
    margin-left: 1em !important;
    margin-right: 1em !important
}

.u-mrg-h-2m {
    margin-left: 2em !important;
    margin-right: 2em !important
}

.u-mrg-h-3m {
    margin-left: 3em !important;
    margin-right: 3em !important
}

.u-mrg-h-4m {
    margin-left: 4em !important;
    margin-right: 4em !important
}

.u-mrg-h-5m {
    margin-left: 5em !important;
    margin-right: 5em !important
}

.u-mrg-h-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.u-mrg-h-6m {
    margin-left: 6em !important;
    margin-right: 6em !important
}

.u-mrg-h-7m {
    margin-left: 7em !important;
    margin-right: 7em !important
}

.u-mrg-h-8m {
    margin-left: 8em !important;
    margin-right: 8em !important
}

.u-mrg-h-9m {
    margin-left: 9em !important;
    margin-right: 9em !important
}

.u-mrg-h-10m {
    margin-left: 10em !important;
    margin-right: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-h-0\@sm {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .u-mrg-h-1\@sm {
        margin-left: 4px !important;
        margin-right: 4px !important
    }

    .u-mrg-h-2\@sm {
        margin-left: 8px !important;
        margin-right: 8px !important
    }

    .u-mrg-h-3\@sm {
        margin-left: 12px !important;
        margin-right: 12px !important
    }

    .u-mrg-h-4\@sm {
        margin-left: 16px !important;
        margin-right: 16px !important
    }

    .u-mrg-h-5\@sm {
        margin-left: 20px !important;
        margin-right: 20px !important
    }

    .u-mrg-h-6\@sm {
        margin-left: 24px !important;
        margin-right: 24px !important
    }

    .u-mrg-h-7\@sm {
        margin-left: 28px !important;
        margin-right: 28px !important
    }

    .u-mrg-h-8\@sm {
        margin-left: 32px !important;
        margin-right: 32px !important
    }

    .u-mrg-h-9\@sm {
        margin-left: 36px !important;
        margin-right: 36px !important
    }

    .u-mrg-h-10\@sm {
        margin-left: 40px !important;
        margin-right: 40px !important
    }

    .u-mrg-h-1m\@sm {
        margin-left: 1em !important;
        margin-right: 1em !important
    }

    .u-mrg-h-2m\@sm {
        margin-left: 2em !important;
        margin-right: 2em !important
    }

    .u-mrg-h-3m\@sm {
        margin-left: 3em !important;
        margin-right: 3em !important
    }

    .u-mrg-h-4m\@sm {
        margin-left: 4em !important;
        margin-right: 4em !important
    }

    .u-mrg-h-5m\@sm {
        margin-left: 5em !important;
        margin-right: 5em !important
    }

    .u-mrg-h-auto\@sm {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .u-mrg-h-6m\@sm {
        margin-left: 6em !important;
        margin-right: 6em !important
    }

    .u-mrg-h-7m\@sm {
        margin-left: 7em !important;
        margin-right: 7em !important
    }

    .u-mrg-h-8m\@sm {
        margin-left: 8em !important;
        margin-right: 8em !important
    }

    .u-mrg-h-9m\@sm {
        margin-left: 9em !important;
        margin-right: 9em !important
    }

    .u-mrg-h-10m\@sm {
        margin-left: 10em !important;
        margin-right: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-h-0\@md {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .u-mrg-h-1\@md {
        margin-left: 4px !important;
        margin-right: 4px !important
    }

    .u-mrg-h-2\@md {
        margin-left: 8px !important;
        margin-right: 8px !important
    }

    .u-mrg-h-3\@md {
        margin-left: 12px !important;
        margin-right: 12px !important
    }

    .u-mrg-h-4\@md {
        margin-left: 16px !important;
        margin-right: 16px !important
    }

    .u-mrg-h-5\@md {
        margin-left: 20px !important;
        margin-right: 20px !important
    }

    .u-mrg-h-6\@md {
        margin-left: 24px !important;
        margin-right: 24px !important
    }

    .u-mrg-h-7\@md {
        margin-left: 28px !important;
        margin-right: 28px !important
    }

    .u-mrg-h-8\@md {
        margin-left: 32px !important;
        margin-right: 32px !important
    }

    .u-mrg-h-9\@md {
        margin-left: 36px !important;
        margin-right: 36px !important
    }

    .u-mrg-h-10\@md {
        margin-left: 40px !important;
        margin-right: 40px !important
    }

    .u-mrg-h-1m\@md {
        margin-left: 1em !important;
        margin-right: 1em !important
    }

    .u-mrg-h-2m\@md {
        margin-left: 2em !important;
        margin-right: 2em !important
    }

    .u-mrg-h-3m\@md {
        margin-left: 3em !important;
        margin-right: 3em !important
    }

    .u-mrg-h-4m\@md {
        margin-left: 4em !important;
        margin-right: 4em !important
    }

    .u-mrg-h-5m\@md {
        margin-left: 5em !important;
        margin-right: 5em !important
    }

    .u-mrg-h-auto\@md {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .u-mrg-h-6m\@md {
        margin-left: 6em !important;
        margin-right: 6em !important
    }

    .u-mrg-h-7m\@md {
        margin-left: 7em !important;
        margin-right: 7em !important
    }

    .u-mrg-h-8m\@md {
        margin-left: 8em !important;
        margin-right: 8em !important
    }

    .u-mrg-h-9m\@md {
        margin-left: 9em !important;
        margin-right: 9em !important
    }

    .u-mrg-h-10m\@md {
        margin-left: 10em !important;
        margin-right: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-h-0\@lg {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .u-mrg-h-1\@lg {
        margin-left: 4px !important;
        margin-right: 4px !important
    }

    .u-mrg-h-2\@lg {
        margin-left: 8px !important;
        margin-right: 8px !important
    }

    .u-mrg-h-3\@lg {
        margin-left: 12px !important;
        margin-right: 12px !important
    }

    .u-mrg-h-4\@lg {
        margin-left: 16px !important;
        margin-right: 16px !important
    }

    .u-mrg-h-5\@lg {
        margin-left: 20px !important;
        margin-right: 20px !important
    }

    .u-mrg-h-6\@lg {
        margin-left: 24px !important;
        margin-right: 24px !important
    }

    .u-mrg-h-7\@lg {
        margin-left: 28px !important;
        margin-right: 28px !important
    }

    .u-mrg-h-8\@lg {
        margin-left: 32px !important;
        margin-right: 32px !important
    }

    .u-mrg-h-9\@lg {
        margin-left: 36px !important;
        margin-right: 36px !important
    }

    .u-mrg-h-10\@lg {
        margin-left: 40px !important;
        margin-right: 40px !important
    }

    .u-mrg-h-1m\@lg {
        margin-left: 1em !important;
        margin-right: 1em !important
    }

    .u-mrg-h-2m\@lg {
        margin-left: 2em !important;
        margin-right: 2em !important
    }

    .u-mrg-h-3m\@lg {
        margin-left: 3em !important;
        margin-right: 3em !important
    }

    .u-mrg-h-4m\@lg {
        margin-left: 4em !important;
        margin-right: 4em !important
    }

    .u-mrg-h-5m\@lg {
        margin-left: 5em !important;
        margin-right: 5em !important
    }

    .u-mrg-h-auto\@lg {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .u-mrg-h-6m\@lg {
        margin-left: 6em !important;
        margin-right: 6em !important
    }

    .u-mrg-h-7m\@lg {
        margin-left: 7em !important;
        margin-right: 7em !important
    }

    .u-mrg-h-8m\@lg {
        margin-left: 8em !important;
        margin-right: 8em !important
    }

    .u-mrg-h-9m\@lg {
        margin-left: 9em !important;
        margin-right: 9em !important
    }

    .u-mrg-h-10m\@lg {
        margin-left: 10em !important;
        margin-right: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-h-0\@xl {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .u-mrg-h-1\@xl {
        margin-left: 4px !important;
        margin-right: 4px !important
    }

    .u-mrg-h-2\@xl {
        margin-left: 8px !important;
        margin-right: 8px !important
    }

    .u-mrg-h-3\@xl {
        margin-left: 12px !important;
        margin-right: 12px !important
    }

    .u-mrg-h-4\@xl {
        margin-left: 16px !important;
        margin-right: 16px !important
    }

    .u-mrg-h-5\@xl {
        margin-left: 20px !important;
        margin-right: 20px !important
    }

    .u-mrg-h-6\@xl {
        margin-left: 24px !important;
        margin-right: 24px !important
    }

    .u-mrg-h-7\@xl {
        margin-left: 28px !important;
        margin-right: 28px !important
    }

    .u-mrg-h-8\@xl {
        margin-left: 32px !important;
        margin-right: 32px !important
    }

    .u-mrg-h-9\@xl {
        margin-left: 36px !important;
        margin-right: 36px !important
    }

    .u-mrg-h-10\@xl {
        margin-left: 40px !important;
        margin-right: 40px !important
    }

    .u-mrg-h-1m\@xl {
        margin-left: 1em !important;
        margin-right: 1em !important
    }

    .u-mrg-h-2m\@xl {
        margin-left: 2em !important;
        margin-right: 2em !important
    }

    .u-mrg-h-3m\@xl {
        margin-left: 3em !important;
        margin-right: 3em !important
    }

    .u-mrg-h-4m\@xl {
        margin-left: 4em !important;
        margin-right: 4em !important
    }

    .u-mrg-h-5m\@xl {
        margin-left: 5em !important;
        margin-right: 5em !important
    }

    .u-mrg-h-auto\@xl {
        margin-left: auto !important;
        margin-right: auto !important
    }

    .u-mrg-h-6m\@xl {
        margin-left: 6em !important;
        margin-right: 6em !important
    }

    .u-mrg-h-7m\@xl {
        margin-left: 7em !important;
        margin-right: 7em !important
    }

    .u-mrg-h-8m\@xl {
        margin-left: 8em !important;
        margin-right: 8em !important
    }

    .u-mrg-h-9m\@xl {
        margin-left: 9em !important;
        margin-right: 9em !important
    }

    .u-mrg-h-10m\@xl {
        margin-left: 10em !important;
        margin-right: 10em !important
    }
}

.u-mrg-v-0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important
}

.u-mrg-v-1 {
    margin-bottom: 4px !important;
    margin-top: 4px !important
}

.u-mrg-v-2 {
    margin-bottom: 8px !important;
    margin-top: 8px !important
}

.u-mrg-v-3 {
    margin-bottom: 12px !important;
    margin-top: 12px !important
}

.u-mrg-v-4 {
    margin-bottom: 16px !important;
    margin-top: 16px !important
}

.u-mrg-v-5 {
    margin-bottom: 20px !important;
    margin-top: 20px !important
}

.u-mrg-v-6 {
    margin-bottom: 24px !important;
    margin-top: 24px !important
}

.u-mrg-v-7 {
    margin-bottom: 28px !important;
    margin-top: 28px !important
}

.u-mrg-v-8 {
    margin-bottom: 32px !important;
    margin-top: 32px !important
}

.u-mrg-v-9 {
    margin-bottom: 36px !important;
    margin-top: 36px !important
}

.u-mrg-v-10 {
    margin-bottom: 40px !important;
    margin-top: 40px !important
}

.u-mrg-v-1m {
    margin-bottom: 1em !important;
    margin-top: 1em !important
}

.u-mrg-v-2m {
    margin-bottom: 2em !important;
    margin-top: 2em !important
}

.u-mrg-v-3m {
    margin-bottom: 3em !important;
    margin-top: 3em !important
}

.u-mrg-v-4m {
    margin-bottom: 4em !important;
    margin-top: 4em !important
}

.u-mrg-v-5m {
    margin-bottom: 5em !important;
    margin-top: 5em !important
}

.u-mrg-v-auto {
    margin-bottom: auto !important;
    margin-top: auto !important
}

.u-mrg-v-6m {
    margin-bottom: 6em !important;
    margin-top: 6em !important
}

.u-mrg-v-7m {
    margin-bottom: 7em !important;
    margin-top: 7em !important
}

.u-mrg-v-8m {
    margin-bottom: 8em !important;
    margin-top: 8em !important
}

.u-mrg-v-9m {
    margin-bottom: 9em !important;
    margin-top: 9em !important
}

.u-mrg-v-10m {
    margin-bottom: 10em !important;
    margin-top: 10em !important
}

@media (min-width: 544px) {
    .u-mrg-v-0\@sm {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }

    .u-mrg-v-1\@sm {
        margin-bottom: 4px !important;
        margin-top: 4px !important
    }

    .u-mrg-v-2\@sm {
        margin-bottom: 8px !important;
        margin-top: 8px !important
    }

    .u-mrg-v-3\@sm {
        margin-bottom: 12px !important;
        margin-top: 12px !important
    }

    .u-mrg-v-4\@sm {
        margin-bottom: 16px !important;
        margin-top: 16px !important
    }

    .u-mrg-v-5\@sm {
        margin-bottom: 20px !important;
        margin-top: 20px !important
    }

    .u-mrg-v-6\@sm {
        margin-bottom: 24px !important;
        margin-top: 24px !important
    }

    .u-mrg-v-7\@sm {
        margin-bottom: 28px !important;
        margin-top: 28px !important
    }

    .u-mrg-v-8\@sm {
        margin-bottom: 32px !important;
        margin-top: 32px !important
    }

    .u-mrg-v-9\@sm {
        margin-bottom: 36px !important;
        margin-top: 36px !important
    }

    .u-mrg-v-10\@sm {
        margin-bottom: 40px !important;
        margin-top: 40px !important
    }

    .u-mrg-v-1m\@sm {
        margin-bottom: 1em !important;
        margin-top: 1em !important
    }

    .u-mrg-v-2m\@sm {
        margin-bottom: 2em !important;
        margin-top: 2em !important
    }

    .u-mrg-v-3m\@sm {
        margin-bottom: 3em !important;
        margin-top: 3em !important
    }

    .u-mrg-v-4m\@sm {
        margin-bottom: 4em !important;
        margin-top: 4em !important
    }

    .u-mrg-v-5m\@sm {
        margin-bottom: 5em !important;
        margin-top: 5em !important
    }

    .u-mrg-v-auto\@sm {
        margin-bottom: auto !important;
        margin-top: auto !important
    }

    .u-mrg-v-6m\@sm {
        margin-bottom: 6em !important;
        margin-top: 6em !important
    }

    .u-mrg-v-7m\@sm {
        margin-bottom: 7em !important;
        margin-top: 7em !important
    }

    .u-mrg-v-8m\@sm {
        margin-bottom: 8em !important;
        margin-top: 8em !important
    }

    .u-mrg-v-9m\@sm {
        margin-bottom: 9em !important;
        margin-top: 9em !important
    }

    .u-mrg-v-10m\@sm {
        margin-bottom: 10em !important;
        margin-top: 10em !important
    }
}

@media (min-width: 768px) {
    .u-mrg-v-0\@md {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }

    .u-mrg-v-1\@md {
        margin-bottom: 4px !important;
        margin-top: 4px !important
    }

    .u-mrg-v-2\@md {
        margin-bottom: 8px !important;
        margin-top: 8px !important
    }

    .u-mrg-v-3\@md {
        margin-bottom: 12px !important;
        margin-top: 12px !important
    }

    .u-mrg-v-4\@md {
        margin-bottom: 16px !important;
        margin-top: 16px !important
    }

    .u-mrg-v-5\@md {
        margin-bottom: 20px !important;
        margin-top: 20px !important
    }

    .u-mrg-v-6\@md {
        margin-bottom: 24px !important;
        margin-top: 24px !important
    }

    .u-mrg-v-7\@md {
        margin-bottom: 28px !important;
        margin-top: 28px !important
    }

    .u-mrg-v-8\@md {
        margin-bottom: 32px !important;
        margin-top: 32px !important
    }

    .u-mrg-v-9\@md {
        margin-bottom: 36px !important;
        margin-top: 36px !important
    }

    .u-mrg-v-10\@md {
        margin-bottom: 40px !important;
        margin-top: 40px !important
    }

    .u-mrg-v-1m\@md {
        margin-bottom: 1em !important;
        margin-top: 1em !important
    }

    .u-mrg-v-2m\@md {
        margin-bottom: 2em !important;
        margin-top: 2em !important
    }

    .u-mrg-v-3m\@md {
        margin-bottom: 3em !important;
        margin-top: 3em !important
    }

    .u-mrg-v-4m\@md {
        margin-bottom: 4em !important;
        margin-top: 4em !important
    }

    .u-mrg-v-5m\@md {
        margin-bottom: 5em !important;
        margin-top: 5em !important
    }

    .u-mrg-v-auto\@md {
        margin-bottom: auto !important;
        margin-top: auto !important
    }

    .u-mrg-v-6m\@md {
        margin-bottom: 6em !important;
        margin-top: 6em !important
    }

    .u-mrg-v-7m\@md {
        margin-bottom: 7em !important;
        margin-top: 7em !important
    }

    .u-mrg-v-8m\@md {
        margin-bottom: 8em !important;
        margin-top: 8em !important
    }

    .u-mrg-v-9m\@md {
        margin-bottom: 9em !important;
        margin-top: 9em !important
    }

    .u-mrg-v-10m\@md {
        margin-bottom: 10em !important;
        margin-top: 10em !important
    }
}

@media (min-width: 992px) {
    .u-mrg-v-0\@lg {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }

    .u-mrg-v-1\@lg {
        margin-bottom: 4px !important;
        margin-top: 4px !important
    }

    .u-mrg-v-2\@lg {
        margin-bottom: 8px !important;
        margin-top: 8px !important
    }

    .u-mrg-v-3\@lg {
        margin-bottom: 12px !important;
        margin-top: 12px !important
    }

    .u-mrg-v-4\@lg {
        margin-bottom: 16px !important;
        margin-top: 16px !important
    }

    .u-mrg-v-5\@lg {
        margin-bottom: 20px !important;
        margin-top: 20px !important
    }

    .u-mrg-v-6\@lg {
        margin-bottom: 24px !important;
        margin-top: 24px !important
    }

    .u-mrg-v-7\@lg {
        margin-bottom: 28px !important;
        margin-top: 28px !important
    }

    .u-mrg-v-8\@lg {
        margin-bottom: 32px !important;
        margin-top: 32px !important
    }

    .u-mrg-v-9\@lg {
        margin-bottom: 36px !important;
        margin-top: 36px !important
    }

    .u-mrg-v-10\@lg {
        margin-bottom: 40px !important;
        margin-top: 40px !important
    }

    .u-mrg-v-1m\@lg {
        margin-bottom: 1em !important;
        margin-top: 1em !important
    }

    .u-mrg-v-2m\@lg {
        margin-bottom: 2em !important;
        margin-top: 2em !important
    }

    .u-mrg-v-3m\@lg {
        margin-bottom: 3em !important;
        margin-top: 3em !important
    }

    .u-mrg-v-4m\@lg {
        margin-bottom: 4em !important;
        margin-top: 4em !important
    }

    .u-mrg-v-5m\@lg {
        margin-bottom: 5em !important;
        margin-top: 5em !important
    }

    .u-mrg-v-auto\@lg {
        margin-bottom: auto !important;
        margin-top: auto !important
    }

    .u-mrg-v-6m\@lg {
        margin-bottom: 6em !important;
        margin-top: 6em !important
    }

    .u-mrg-v-7m\@lg {
        margin-bottom: 7em !important;
        margin-top: 7em !important
    }

    .u-mrg-v-8m\@lg {
        margin-bottom: 8em !important;
        margin-top: 8em !important
    }

    .u-mrg-v-9m\@lg {
        margin-bottom: 9em !important;
        margin-top: 9em !important
    }

    .u-mrg-v-10m\@lg {
        margin-bottom: 10em !important;
        margin-top: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-mrg-v-0\@xl {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }

    .u-mrg-v-1\@xl {
        margin-bottom: 4px !important;
        margin-top: 4px !important
    }

    .u-mrg-v-2\@xl {
        margin-bottom: 8px !important;
        margin-top: 8px !important
    }

    .u-mrg-v-3\@xl {
        margin-bottom: 12px !important;
        margin-top: 12px !important
    }

    .u-mrg-v-4\@xl {
        margin-bottom: 16px !important;
        margin-top: 16px !important
    }

    .u-mrg-v-5\@xl {
        margin-bottom: 20px !important;
        margin-top: 20px !important
    }

    .u-mrg-v-6\@xl {
        margin-bottom: 24px !important;
        margin-top: 24px !important
    }

    .u-mrg-v-7\@xl {
        margin-bottom: 28px !important;
        margin-top: 28px !important
    }

    .u-mrg-v-8\@xl {
        margin-bottom: 32px !important;
        margin-top: 32px !important
    }

    .u-mrg-v-9\@xl {
        margin-bottom: 36px !important;
        margin-top: 36px !important
    }

    .u-mrg-v-10\@xl {
        margin-bottom: 40px !important;
        margin-top: 40px !important
    }

    .u-mrg-v-1m\@xl {
        margin-bottom: 1em !important;
        margin-top: 1em !important
    }

    .u-mrg-v-2m\@xl {
        margin-bottom: 2em !important;
        margin-top: 2em !important
    }

    .u-mrg-v-3m\@xl {
        margin-bottom: 3em !important;
        margin-top: 3em !important
    }

    .u-mrg-v-4m\@xl {
        margin-bottom: 4em !important;
        margin-top: 4em !important
    }

    .u-mrg-v-5m\@xl {
        margin-bottom: 5em !important;
        margin-top: 5em !important
    }

    .u-mrg-v-auto\@xl {
        margin-bottom: auto !important;
        margin-top: auto !important
    }

    .u-mrg-v-6m\@xl {
        margin-bottom: 6em !important;
        margin-top: 6em !important
    }

    .u-mrg-v-7m\@xl {
        margin-bottom: 7em !important;
        margin-top: 7em !important
    }

    .u-mrg-v-8m\@xl {
        margin-bottom: 8em !important;
        margin-top: 8em !important
    }

    .u-mrg-v-9m\@xl {
        margin-bottom: 9em !important;
        margin-top: 9em !important
    }

    .u-mrg-v-10m\@xl {
        margin-bottom: 10em !important;
        margin-top: 10em !important
    }
}

.u-pad-0 {
    padding: 0 !important
}

@media (min-width: 544px) {
    .u-pad-0\@sm {
        padding: 0 !important
    }
}

@media (min-width: 768px) {
    .u-pad-0\@md {
        padding: 0 !important
    }
}

@media (min-width: 992px) {
    .u-pad-0\@lg {
        padding: 0 !important
    }
}

@media (min-width: 1200px) {
    .u-pad-0\@xl {
        padding: 0 !important
    }
}

.u-pad-0 {
    padding: 0 !important
}

.u-pad-1 {
    padding: 4px !important
}

.u-pad-2 {
    padding: 8px !important
}

.u-pad-3 {
    padding: 12px !important
}

.u-pad-4 {
    padding: 16px !important
}

.u-pad-5 {
    padding: 20px !important
}

.u-pad-6 {
    padding: 24px !important
}

.u-pad-7 {
    padding: 28px !important
}

.u-pad-8 {
    padding: 32px !important
}

.u-pad-9 {
    padding: 36px !important
}

.u-pad-10 {
    padding: 40px !important
}

.u-pad-1m {
    padding: 1em !important
}

.u-pad-2m {
    padding: 2em !important
}

.u-pad-3m {
    padding: 3em !important
}

.u-pad-4m {
    padding: 4em !important
}

.u-pad-5m {
    padding: 5em !important
}

.u-pad-6m {
    padding: 6em !important
}

.u-pad-7m {
    padding: 7em !important
}

.u-pad-8m {
    padding: 8em !important
}

.u-pad-9m {
    padding: 9em !important
}

.u-pad-10m {
    padding: 10em !important
}

@media (min-width: 544px) {
    .u-pad-0\@sm {
        padding: 0 !important
    }

    .u-pad-1\@sm {
        padding: 4px !important
    }

    .u-pad-2\@sm {
        padding: 8px !important
    }

    .u-pad-3\@sm {
        padding: 12px !important
    }

    .u-pad-4\@sm {
        padding: 16px !important
    }

    .u-pad-5\@sm {
        padding: 20px !important
    }

    .u-pad-6\@sm {
        padding: 24px !important
    }

    .u-pad-7\@sm {
        padding: 28px !important
    }

    .u-pad-8\@sm {
        padding: 32px !important
    }

    .u-pad-9\@sm {
        padding: 36px !important
    }

    .u-pad-10\@sm {
        padding: 40px !important
    }

    .u-pad-1m\@sm {
        padding: 1em !important
    }

    .u-pad-2m\@sm {
        padding: 2em !important
    }

    .u-pad-3m\@sm {
        padding: 3em !important
    }

    .u-pad-4m\@sm {
        padding: 4em !important
    }

    .u-pad-5m\@sm {
        padding: 5em !important
    }

    .u-pad-6m\@sm {
        padding: 6em !important
    }

    .u-pad-7m\@sm {
        padding: 7em !important
    }

    .u-pad-8m\@sm {
        padding: 8em !important
    }

    .u-pad-9m\@sm {
        padding: 9em !important
    }

    .u-pad-10m\@sm {
        padding: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-0\@md {
        padding: 0 !important
    }

    .u-pad-1\@md {
        padding: 4px !important
    }

    .u-pad-2\@md {
        padding: 8px !important
    }

    .u-pad-3\@md {
        padding: 12px !important
    }

    .u-pad-4\@md {
        padding: 16px !important
    }

    .u-pad-5\@md {
        padding: 20px !important
    }

    .u-pad-6\@md {
        padding: 24px !important
    }

    .u-pad-7\@md {
        padding: 28px !important
    }

    .u-pad-8\@md {
        padding: 32px !important
    }

    .u-pad-9\@md {
        padding: 36px !important
    }

    .u-pad-10\@md {
        padding: 40px !important
    }

    .u-pad-1m\@md {
        padding: 1em !important
    }

    .u-pad-2m\@md {
        padding: 2em !important
    }

    .u-pad-3m\@md {
        padding: 3em !important
    }

    .u-pad-4m\@md {
        padding: 4em !important
    }

    .u-pad-5m\@md {
        padding: 5em !important
    }

    .u-pad-6m\@md {
        padding: 6em !important
    }

    .u-pad-7m\@md {
        padding: 7em !important
    }

    .u-pad-8m\@md {
        padding: 8em !important
    }

    .u-pad-9m\@md {
        padding: 9em !important
    }

    .u-pad-10m\@md {
        padding: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-0\@lg {
        padding: 0 !important
    }

    .u-pad-1\@lg {
        padding: 4px !important
    }

    .u-pad-2\@lg {
        padding: 8px !important
    }

    .u-pad-3\@lg {
        padding: 12px !important
    }

    .u-pad-4\@lg {
        padding: 16px !important
    }

    .u-pad-5\@lg {
        padding: 20px !important
    }

    .u-pad-6\@lg {
        padding: 24px !important
    }

    .u-pad-7\@lg {
        padding: 28px !important
    }

    .u-pad-8\@lg {
        padding: 32px !important
    }

    .u-pad-9\@lg {
        padding: 36px !important
    }

    .u-pad-10\@lg {
        padding: 40px !important
    }

    .u-pad-1m\@lg {
        padding: 1em !important
    }

    .u-pad-2m\@lg {
        padding: 2em !important
    }

    .u-pad-3m\@lg {
        padding: 3em !important
    }

    .u-pad-4m\@lg {
        padding: 4em !important
    }

    .u-pad-5m\@lg {
        padding: 5em !important
    }

    .u-pad-6m\@lg {
        padding: 6em !important
    }

    .u-pad-7m\@lg {
        padding: 7em !important
    }

    .u-pad-8m\@lg {
        padding: 8em !important
    }

    .u-pad-9m\@lg {
        padding: 9em !important
    }

    .u-pad-10m\@lg {
        padding: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-0\@xl {
        padding: 0 !important
    }

    .u-pad-1\@xl {
        padding: 4px !important
    }

    .u-pad-2\@xl {
        padding: 8px !important
    }

    .u-pad-3\@xl {
        padding: 12px !important
    }

    .u-pad-4\@xl {
        padding: 16px !important
    }

    .u-pad-5\@xl {
        padding: 20px !important
    }

    .u-pad-6\@xl {
        padding: 24px !important
    }

    .u-pad-7\@xl {
        padding: 28px !important
    }

    .u-pad-8\@xl {
        padding: 32px !important
    }

    .u-pad-9\@xl {
        padding: 36px !important
    }

    .u-pad-10\@xl {
        padding: 40px !important
    }

    .u-pad-1m\@xl {
        padding: 1em !important
    }

    .u-pad-2m\@xl {
        padding: 2em !important
    }

    .u-pad-3m\@xl {
        padding: 3em !important
    }

    .u-pad-4m\@xl {
        padding: 4em !important
    }

    .u-pad-5m\@xl {
        padding: 5em !important
    }

    .u-pad-6m\@xl {
        padding: 6em !important
    }

    .u-pad-7m\@xl {
        padding: 7em !important
    }

    .u-pad-8m\@xl {
        padding: 8em !important
    }

    .u-pad-9m\@xl {
        padding: 9em !important
    }

    .u-pad-10m\@xl {
        padding: 10em !important
    }
}

.u-pad-t-0 {
    padding-top: 0 !important
}

.u-pad-t-1 {
    padding-top: 4px !important
}

.u-pad-t-2 {
    padding-top: 8px !important
}

.u-pad-t-3 {
    padding-top: 12px !important
}

.u-pad-t-4 {
    padding-top: 16px !important
}

.u-pad-t-5 {
    padding-top: 20px !important
}

.u-pad-t-6 {
    padding-top: 24px !important
}

.u-pad-t-7 {
    padding-top: 28px !important
}

.u-pad-t-8 {
    padding-top: 32px !important
}

.u-pad-t-9 {
    padding-top: 36px !important
}

.u-pad-t-10 {
    padding-top: 40px !important
}

.u-pad-t-1m {
    padding-top: 1em !important
}

.u-pad-t-2m {
    padding-top: 2em !important
}

.u-pad-t-3m {
    padding-top: 3em !important
}

.u-pad-t-4m {
    padding-top: 4em !important
}

.u-pad-t-5m {
    padding-top: 5em !important
}

.u-pad-t-6m {
    padding-top: 6em !important
}

.u-pad-t-7m {
    padding-top: 7em !important
}

.u-pad-t-8m {
    padding-top: 8em !important
}

.u-pad-t-9m {
    padding-top: 9em !important
}

.u-pad-t-10m {
    padding-top: 10em !important
}

@media (min-width: 544px) {
    .u-pad-t-0\@sm {
        padding-top: 0 !important
    }

    .u-pad-t-1\@sm {
        padding-top: 4px !important
    }

    .u-pad-t-2\@sm {
        padding-top: 8px !important
    }

    .u-pad-t-3\@sm {
        padding-top: 12px !important
    }

    .u-pad-t-4\@sm {
        padding-top: 16px !important
    }

    .u-pad-t-5\@sm {
        padding-top: 20px !important
    }

    .u-pad-t-6\@sm {
        padding-top: 24px !important
    }

    .u-pad-t-7\@sm {
        padding-top: 28px !important
    }

    .u-pad-t-8\@sm {
        padding-top: 32px !important
    }

    .u-pad-t-9\@sm {
        padding-top: 36px !important
    }

    .u-pad-t-10\@sm {
        padding-top: 40px !important
    }

    .u-pad-t-1m\@sm {
        padding-top: 1em !important
    }

    .u-pad-t-2m\@sm {
        padding-top: 2em !important
    }

    .u-pad-t-3m\@sm {
        padding-top: 3em !important
    }

    .u-pad-t-4m\@sm {
        padding-top: 4em !important
    }

    .u-pad-t-5m\@sm {
        padding-top: 5em !important
    }

    .u-pad-t-6m\@sm {
        padding-top: 6em !important
    }

    .u-pad-t-7m\@sm {
        padding-top: 7em !important
    }

    .u-pad-t-8m\@sm {
        padding-top: 8em !important
    }

    .u-pad-t-9m\@sm {
        padding-top: 9em !important
    }

    .u-pad-t-10m\@sm {
        padding-top: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-t-0\@md {
        padding-top: 0 !important
    }

    .u-pad-t-1\@md {
        padding-top: 4px !important
    }

    .u-pad-t-2\@md {
        padding-top: 8px !important
    }

    .u-pad-t-3\@md {
        padding-top: 12px !important
    }

    .u-pad-t-4\@md {
        padding-top: 16px !important
    }

    .u-pad-t-5\@md {
        padding-top: 20px !important
    }

    .u-pad-t-6\@md {
        padding-top: 24px !important
    }

    .u-pad-t-7\@md {
        padding-top: 28px !important
    }

    .u-pad-t-8\@md {
        padding-top: 32px !important
    }

    .u-pad-t-9\@md {
        padding-top: 36px !important
    }

    .u-pad-t-10\@md {
        padding-top: 40px !important
    }

    .u-pad-t-1m\@md {
        padding-top: 1em !important
    }

    .u-pad-t-2m\@md {
        padding-top: 2em !important
    }

    .u-pad-t-3m\@md {
        padding-top: 3em !important
    }

    .u-pad-t-4m\@md {
        padding-top: 4em !important
    }

    .u-pad-t-5m\@md {
        padding-top: 5em !important
    }

    .u-pad-t-6m\@md {
        padding-top: 6em !important
    }

    .u-pad-t-7m\@md {
        padding-top: 7em !important
    }

    .u-pad-t-8m\@md {
        padding-top: 8em !important
    }

    .u-pad-t-9m\@md {
        padding-top: 9em !important
    }

    .u-pad-t-10m\@md {
        padding-top: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-t-0\@lg {
        padding-top: 0 !important
    }

    .u-pad-t-1\@lg {
        padding-top: 4px !important
    }

    .u-pad-t-2\@lg {
        padding-top: 8px !important
    }

    .u-pad-t-3\@lg {
        padding-top: 12px !important
    }

    .u-pad-t-4\@lg {
        padding-top: 16px !important
    }

    .u-pad-t-5\@lg {
        padding-top: 20px !important
    }

    .u-pad-t-6\@lg {
        padding-top: 24px !important
    }

    .u-pad-t-7\@lg {
        padding-top: 28px !important
    }

    .u-pad-t-8\@lg {
        padding-top: 32px !important
    }

    .u-pad-t-9\@lg {
        padding-top: 36px !important
    }

    .u-pad-t-10\@lg {
        padding-top: 40px !important
    }

    .u-pad-t-1m\@lg {
        padding-top: 1em !important
    }

    .u-pad-t-2m\@lg {
        padding-top: 2em !important
    }

    .u-pad-t-3m\@lg {
        padding-top: 3em !important
    }

    .u-pad-t-4m\@lg {
        padding-top: 4em !important
    }

    .u-pad-t-5m\@lg {
        padding-top: 5em !important
    }

    .u-pad-t-6m\@lg {
        padding-top: 6em !important
    }

    .u-pad-t-7m\@lg {
        padding-top: 7em !important
    }

    .u-pad-t-8m\@lg {
        padding-top: 8em !important
    }

    .u-pad-t-9m\@lg {
        padding-top: 9em !important
    }

    .u-pad-t-10m\@lg {
        padding-top: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-t-0\@xl {
        padding-top: 0 !important
    }

    .u-pad-t-1\@xl {
        padding-top: 4px !important
    }

    .u-pad-t-2\@xl {
        padding-top: 8px !important
    }

    .u-pad-t-3\@xl {
        padding-top: 12px !important
    }

    .u-pad-t-4\@xl {
        padding-top: 16px !important
    }

    .u-pad-t-5\@xl {
        padding-top: 20px !important
    }

    .u-pad-t-6\@xl {
        padding-top: 24px !important
    }

    .u-pad-t-7\@xl {
        padding-top: 28px !important
    }

    .u-pad-t-8\@xl {
        padding-top: 32px !important
    }

    .u-pad-t-9\@xl {
        padding-top: 36px !important
    }

    .u-pad-t-10\@xl {
        padding-top: 40px !important
    }

    .u-pad-t-1m\@xl {
        padding-top: 1em !important
    }

    .u-pad-t-2m\@xl {
        padding-top: 2em !important
    }

    .u-pad-t-3m\@xl {
        padding-top: 3em !important
    }

    .u-pad-t-4m\@xl {
        padding-top: 4em !important
    }

    .u-pad-t-5m\@xl {
        padding-top: 5em !important
    }

    .u-pad-t-6m\@xl {
        padding-top: 6em !important
    }

    .u-pad-t-7m\@xl {
        padding-top: 7em !important
    }

    .u-pad-t-8m\@xl {
        padding-top: 8em !important
    }

    .u-pad-t-9m\@xl {
        padding-top: 9em !important
    }

    .u-pad-t-10m\@xl {
        padding-top: 10em !important
    }
}

.u-pad-r-0 {
    padding-right: 0 !important
}

.u-pad-r-1 {
    padding-right: 4px !important
}

.u-pad-r-2 {
    padding-right: 8px !important
}

.u-pad-r-3 {
    padding-right: 12px !important
}

.u-pad-r-4 {
    padding-right: 16px !important
}

.u-pad-r-5 {
    padding-right: 20px !important
}

.u-pad-r-6 {
    padding-right: 24px !important
}

.u-pad-r-7 {
    padding-right: 28px !important
}

.u-pad-r-8 {
    padding-right: 32px !important
}

.u-pad-r-9 {
    padding-right: 36px !important
}

.u-pad-r-10 {
    padding-right: 40px !important
}

.u-pad-r-1m {
    padding-right: 1em !important
}

.u-pad-r-2m {
    padding-right: 2em !important
}

.u-pad-r-3m {
    padding-right: 3em !important
}

.u-pad-r-4m {
    padding-right: 4em !important
}

.u-pad-r-5m {
    padding-right: 5em !important
}

.u-pad-r-6m {
    padding-right: 6em !important
}

.u-pad-r-7m {
    padding-right: 7em !important
}

.u-pad-r-8m {
    padding-right: 8em !important
}

.u-pad-r-9m {
    padding-right: 9em !important
}

.u-pad-r-10m {
    padding-right: 10em !important
}

@media (min-width: 544px) {
    .u-pad-r-0\@sm {
        padding-right: 0 !important
    }

    .u-pad-r-1\@sm {
        padding-right: 4px !important
    }

    .u-pad-r-2\@sm {
        padding-right: 8px !important
    }

    .u-pad-r-3\@sm {
        padding-right: 12px !important
    }

    .u-pad-r-4\@sm {
        padding-right: 16px !important
    }

    .u-pad-r-5\@sm {
        padding-right: 20px !important
    }

    .u-pad-r-6\@sm {
        padding-right: 24px !important
    }

    .u-pad-r-7\@sm {
        padding-right: 28px !important
    }

    .u-pad-r-8\@sm {
        padding-right: 32px !important
    }

    .u-pad-r-9\@sm {
        padding-right: 36px !important
    }

    .u-pad-r-10\@sm {
        padding-right: 40px !important
    }

    .u-pad-r-1m\@sm {
        padding-right: 1em !important
    }

    .u-pad-r-2m\@sm {
        padding-right: 2em !important
    }

    .u-pad-r-3m\@sm {
        padding-right: 3em !important
    }

    .u-pad-r-4m\@sm {
        padding-right: 4em !important
    }

    .u-pad-r-5m\@sm {
        padding-right: 5em !important
    }

    .u-pad-r-6m\@sm {
        padding-right: 6em !important
    }

    .u-pad-r-7m\@sm {
        padding-right: 7em !important
    }

    .u-pad-r-8m\@sm {
        padding-right: 8em !important
    }

    .u-pad-r-9m\@sm {
        padding-right: 9em !important
    }

    .u-pad-r-10m\@sm {
        padding-right: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-r-0\@md {
        padding-right: 0 !important
    }

    .u-pad-r-1\@md {
        padding-right: 4px !important
    }

    .u-pad-r-2\@md {
        padding-right: 8px !important
    }

    .u-pad-r-3\@md {
        padding-right: 12px !important
    }

    .u-pad-r-4\@md {
        padding-right: 16px !important
    }

    .u-pad-r-5\@md {
        padding-right: 20px !important
    }

    .u-pad-r-6\@md {
        padding-right: 24px !important
    }

    .u-pad-r-7\@md {
        padding-right: 28px !important
    }

    .u-pad-r-8\@md {
        padding-right: 32px !important
    }

    .u-pad-r-9\@md {
        padding-right: 36px !important
    }

    .u-pad-r-10\@md {
        padding-right: 40px !important
    }

    .u-pad-r-1m\@md {
        padding-right: 1em !important
    }

    .u-pad-r-2m\@md {
        padding-right: 2em !important
    }

    .u-pad-r-3m\@md {
        padding-right: 3em !important
    }

    .u-pad-r-4m\@md {
        padding-right: 4em !important
    }

    .u-pad-r-5m\@md {
        padding-right: 5em !important
    }

    .u-pad-r-6m\@md {
        padding-right: 6em !important
    }

    .u-pad-r-7m\@md {
        padding-right: 7em !important
    }

    .u-pad-r-8m\@md {
        padding-right: 8em !important
    }

    .u-pad-r-9m\@md {
        padding-right: 9em !important
    }

    .u-pad-r-10m\@md {
        padding-right: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-r-0\@lg {
        padding-right: 0 !important
    }

    .u-pad-r-1\@lg {
        padding-right: 4px !important
    }

    .u-pad-r-2\@lg {
        padding-right: 8px !important
    }

    .u-pad-r-3\@lg {
        padding-right: 12px !important
    }

    .u-pad-r-4\@lg {
        padding-right: 16px !important
    }

    .u-pad-r-5\@lg {
        padding-right: 20px !important
    }

    .u-pad-r-6\@lg {
        padding-right: 24px !important
    }

    .u-pad-r-7\@lg {
        padding-right: 28px !important
    }

    .u-pad-r-8\@lg {
        padding-right: 32px !important
    }

    .u-pad-r-9\@lg {
        padding-right: 36px !important
    }

    .u-pad-r-10\@lg {
        padding-right: 40px !important
    }

    .u-pad-r-1m\@lg {
        padding-right: 1em !important
    }

    .u-pad-r-2m\@lg {
        padding-right: 2em !important
    }

    .u-pad-r-3m\@lg {
        padding-right: 3em !important
    }

    .u-pad-r-4m\@lg {
        padding-right: 4em !important
    }

    .u-pad-r-5m\@lg {
        padding-right: 5em !important
    }

    .u-pad-r-6m\@lg {
        padding-right: 6em !important
    }

    .u-pad-r-7m\@lg {
        padding-right: 7em !important
    }

    .u-pad-r-8m\@lg {
        padding-right: 8em !important
    }

    .u-pad-r-9m\@lg {
        padding-right: 9em !important
    }

    .u-pad-r-10m\@lg {
        padding-right: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-r-0\@xl {
        padding-right: 0 !important
    }

    .u-pad-r-1\@xl {
        padding-right: 4px !important
    }

    .u-pad-r-2\@xl {
        padding-right: 8px !important
    }

    .u-pad-r-3\@xl {
        padding-right: 12px !important
    }

    .u-pad-r-4\@xl {
        padding-right: 16px !important
    }

    .u-pad-r-5\@xl {
        padding-right: 20px !important
    }

    .u-pad-r-6\@xl {
        padding-right: 24px !important
    }

    .u-pad-r-7\@xl {
        padding-right: 28px !important
    }

    .u-pad-r-8\@xl {
        padding-right: 32px !important
    }

    .u-pad-r-9\@xl {
        padding-right: 36px !important
    }

    .u-pad-r-10\@xl {
        padding-right: 40px !important
    }

    .u-pad-r-1m\@xl {
        padding-right: 1em !important
    }

    .u-pad-r-2m\@xl {
        padding-right: 2em !important
    }

    .u-pad-r-3m\@xl {
        padding-right: 3em !important
    }

    .u-pad-r-4m\@xl {
        padding-right: 4em !important
    }

    .u-pad-r-5m\@xl {
        padding-right: 5em !important
    }

    .u-pad-r-6m\@xl {
        padding-right: 6em !important
    }

    .u-pad-r-7m\@xl {
        padding-right: 7em !important
    }

    .u-pad-r-8m\@xl {
        padding-right: 8em !important
    }

    .u-pad-r-9m\@xl {
        padding-right: 9em !important
    }

    .u-pad-r-10m\@xl {
        padding-right: 10em !important
    }
}

.u-pad-b-0 {
    padding-bottom: 0 !important
}

.u-pad-b-1 {
    padding-bottom: 4px !important
}

.u-pad-b-2 {
    padding-bottom: 8px !important
}

.u-pad-b-3 {
    padding-bottom: 12px !important
}

.u-pad-b-4 {
    padding-bottom: 16px !important
}

.u-pad-b-5 {
    padding-bottom: 20px !important
}

.u-pad-b-6 {
    padding-bottom: 24px !important
}

.u-pad-b-7 {
    padding-bottom: 28px !important
}

.u-pad-b-8 {
    padding-bottom: 32px !important
}

.u-pad-b-9 {
    padding-bottom: 36px !important
}

.u-pad-b-10 {
    padding-bottom: 40px !important
}

.u-pad-b-1m {
    padding-bottom: 1em !important
}

.u-pad-b-2m {
    padding-bottom: 2em !important
}

.u-pad-b-3m {
    padding-bottom: 3em !important
}

.u-pad-b-4m {
    padding-bottom: 4em !important
}

.u-pad-b-5m {
    padding-bottom: 5em !important
}

.u-pad-b-6m {
    padding-bottom: 6em !important
}

.u-pad-b-7m {
    padding-bottom: 7em !important
}

.u-pad-b-8m {
    padding-bottom: 8em !important
}

.u-pad-b-9m {
    padding-bottom: 9em !important
}

.u-pad-b-10m {
    padding-bottom: 10em !important
}

@media (min-width: 544px) {
    .u-pad-b-0\@sm {
        padding-bottom: 0 !important
    }

    .u-pad-b-1\@sm {
        padding-bottom: 4px !important
    }

    .u-pad-b-2\@sm {
        padding-bottom: 8px !important
    }

    .u-pad-b-3\@sm {
        padding-bottom: 12px !important
    }

    .u-pad-b-4\@sm {
        padding-bottom: 16px !important
    }

    .u-pad-b-5\@sm {
        padding-bottom: 20px !important
    }

    .u-pad-b-6\@sm {
        padding-bottom: 24px !important
    }

    .u-pad-b-7\@sm {
        padding-bottom: 28px !important
    }

    .u-pad-b-8\@sm {
        padding-bottom: 32px !important
    }

    .u-pad-b-9\@sm {
        padding-bottom: 36px !important
    }

    .u-pad-b-10\@sm {
        padding-bottom: 40px !important
    }

    .u-pad-b-1m\@sm {
        padding-bottom: 1em !important
    }

    .u-pad-b-2m\@sm {
        padding-bottom: 2em !important
    }

    .u-pad-b-3m\@sm {
        padding-bottom: 3em !important
    }

    .u-pad-b-4m\@sm {
        padding-bottom: 4em !important
    }

    .u-pad-b-5m\@sm {
        padding-bottom: 5em !important
    }

    .u-pad-b-6m\@sm {
        padding-bottom: 6em !important
    }

    .u-pad-b-7m\@sm {
        padding-bottom: 7em !important
    }

    .u-pad-b-8m\@sm {
        padding-bottom: 8em !important
    }

    .u-pad-b-9m\@sm {
        padding-bottom: 9em !important
    }

    .u-pad-b-10m\@sm {
        padding-bottom: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-b-0\@md {
        padding-bottom: 0 !important
    }

    .u-pad-b-1\@md {
        padding-bottom: 4px !important
    }

    .u-pad-b-2\@md {
        padding-bottom: 8px !important
    }

    .u-pad-b-3\@md {
        padding-bottom: 12px !important
    }

    .u-pad-b-4\@md {
        padding-bottom: 16px !important
    }

    .u-pad-b-5\@md {
        padding-bottom: 20px !important
    }

    .u-pad-b-6\@md {
        padding-bottom: 24px !important
    }

    .u-pad-b-7\@md {
        padding-bottom: 28px !important
    }

    .u-pad-b-8\@md {
        padding-bottom: 32px !important
    }

    .u-pad-b-9\@md {
        padding-bottom: 36px !important
    }

    .u-pad-b-10\@md {
        padding-bottom: 40px !important
    }

    .u-pad-b-1m\@md {
        padding-bottom: 1em !important
    }

    .u-pad-b-2m\@md {
        padding-bottom: 2em !important
    }

    .u-pad-b-3m\@md {
        padding-bottom: 3em !important
    }

    .u-pad-b-4m\@md {
        padding-bottom: 4em !important
    }

    .u-pad-b-5m\@md {
        padding-bottom: 5em !important
    }

    .u-pad-b-6m\@md {
        padding-bottom: 6em !important
    }

    .u-pad-b-7m\@md {
        padding-bottom: 7em !important
    }

    .u-pad-b-8m\@md {
        padding-bottom: 8em !important
    }

    .u-pad-b-9m\@md {
        padding-bottom: 9em !important
    }

    .u-pad-b-10m\@md {
        padding-bottom: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-b-0\@lg {
        padding-bottom: 0 !important
    }

    .u-pad-b-1\@lg {
        padding-bottom: 4px !important
    }

    .u-pad-b-2\@lg {
        padding-bottom: 8px !important
    }

    .u-pad-b-3\@lg {
        padding-bottom: 12px !important
    }

    .u-pad-b-4\@lg {
        padding-bottom: 16px !important
    }

    .u-pad-b-5\@lg {
        padding-bottom: 20px !important
    }

    .u-pad-b-6\@lg {
        padding-bottom: 24px !important
    }

    .u-pad-b-7\@lg {
        padding-bottom: 28px !important
    }

    .u-pad-b-8\@lg {
        padding-bottom: 32px !important
    }

    .u-pad-b-9\@lg {
        padding-bottom: 36px !important
    }

    .u-pad-b-10\@lg {
        padding-bottom: 40px !important
    }

    .u-pad-b-1m\@lg {
        padding-bottom: 1em !important
    }

    .u-pad-b-2m\@lg {
        padding-bottom: 2em !important
    }

    .u-pad-b-3m\@lg {
        padding-bottom: 3em !important
    }

    .u-pad-b-4m\@lg {
        padding-bottom: 4em !important
    }

    .u-pad-b-5m\@lg {
        padding-bottom: 5em !important
    }

    .u-pad-b-6m\@lg {
        padding-bottom: 6em !important
    }

    .u-pad-b-7m\@lg {
        padding-bottom: 7em !important
    }

    .u-pad-b-8m\@lg {
        padding-bottom: 8em !important
    }

    .u-pad-b-9m\@lg {
        padding-bottom: 9em !important
    }

    .u-pad-b-10m\@lg {
        padding-bottom: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-b-0\@xl {
        padding-bottom: 0 !important
    }

    .u-pad-b-1\@xl {
        padding-bottom: 4px !important
    }

    .u-pad-b-2\@xl {
        padding-bottom: 8px !important
    }

    .u-pad-b-3\@xl {
        padding-bottom: 12px !important
    }

    .u-pad-b-4\@xl {
        padding-bottom: 16px !important
    }

    .u-pad-b-5\@xl {
        padding-bottom: 20px !important
    }

    .u-pad-b-6\@xl {
        padding-bottom: 24px !important
    }

    .u-pad-b-7\@xl {
        padding-bottom: 28px !important
    }

    .u-pad-b-8\@xl {
        padding-bottom: 32px !important
    }

    .u-pad-b-9\@xl {
        padding-bottom: 36px !important
    }

    .u-pad-b-10\@xl {
        padding-bottom: 40px !important
    }

    .u-pad-b-1m\@xl {
        padding-bottom: 1em !important
    }

    .u-pad-b-2m\@xl {
        padding-bottom: 2em !important
    }

    .u-pad-b-3m\@xl {
        padding-bottom: 3em !important
    }

    .u-pad-b-4m\@xl {
        padding-bottom: 4em !important
    }

    .u-pad-b-5m\@xl {
        padding-bottom: 5em !important
    }

    .u-pad-b-6m\@xl {
        padding-bottom: 6em !important
    }

    .u-pad-b-7m\@xl {
        padding-bottom: 7em !important
    }

    .u-pad-b-8m\@xl {
        padding-bottom: 8em !important
    }

    .u-pad-b-9m\@xl {
        padding-bottom: 9em !important
    }

    .u-pad-b-10m\@xl {
        padding-bottom: 10em !important
    }
}

.u-pad-l-0 {
    padding-left: 0 !important
}

.u-pad-l-1 {
    padding-left: 4px !important
}

.u-pad-l-2 {
    padding-left: 8px !important
}

.u-pad-l-3 {
    padding-left: 12px !important
}

.u-pad-l-4 {
    padding-left: 16px !important
}

.u-pad-l-5 {
    padding-left: 20px !important
}

.u-pad-l-6 {
    padding-left: 24px !important
}

.u-pad-l-7 {
    padding-left: 28px !important
}

.u-pad-l-8 {
    padding-left: 32px !important
}

.u-pad-l-9 {
    padding-left: 36px !important
}

.u-pad-l-10 {
    padding-left: 40px !important
}

.u-pad-l-1m {
    padding-left: 1em !important
}

.u-pad-l-2m {
    padding-left: 2em !important
}

.u-pad-l-3m {
    padding-left: 3em !important
}

.u-pad-l-4m {
    padding-left: 4em !important
}

.u-pad-l-5m {
    padding-left: 5em !important
}

.u-pad-l-6m {
    padding-left: 6em !important
}

.u-pad-l-7m {
    padding-left: 7em !important
}

.u-pad-l-8m {
    padding-left: 8em !important
}

.u-pad-l-9m {
    padding-left: 9em !important
}

.u-pad-l-10m {
    padding-left: 10em !important
}

@media (min-width: 544px) {
    .u-pad-l-0\@sm {
        padding-left: 0 !important
    }

    .u-pad-l-1\@sm {
        padding-left: 4px !important
    }

    .u-pad-l-2\@sm {
        padding-left: 8px !important
    }

    .u-pad-l-3\@sm {
        padding-left: 12px !important
    }

    .u-pad-l-4\@sm {
        padding-left: 16px !important
    }

    .u-pad-l-5\@sm {
        padding-left: 20px !important
    }

    .u-pad-l-6\@sm {
        padding-left: 24px !important
    }

    .u-pad-l-7\@sm {
        padding-left: 28px !important
    }

    .u-pad-l-8\@sm {
        padding-left: 32px !important
    }

    .u-pad-l-9\@sm {
        padding-left: 36px !important
    }

    .u-pad-l-10\@sm {
        padding-left: 40px !important
    }

    .u-pad-l-1m\@sm {
        padding-left: 1em !important
    }

    .u-pad-l-2m\@sm {
        padding-left: 2em !important
    }

    .u-pad-l-3m\@sm {
        padding-left: 3em !important
    }

    .u-pad-l-4m\@sm {
        padding-left: 4em !important
    }

    .u-pad-l-5m\@sm {
        padding-left: 5em !important
    }

    .u-pad-l-6m\@sm {
        padding-left: 6em !important
    }

    .u-pad-l-7m\@sm {
        padding-left: 7em !important
    }

    .u-pad-l-8m\@sm {
        padding-left: 8em !important
    }

    .u-pad-l-9m\@sm {
        padding-left: 9em !important
    }

    .u-pad-l-10m\@sm {
        padding-left: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-l-0\@md {
        padding-left: 0 !important
    }

    .u-pad-l-1\@md {
        padding-left: 4px !important
    }

    .u-pad-l-2\@md {
        padding-left: 8px !important
    }

    .u-pad-l-3\@md {
        padding-left: 12px !important
    }

    .u-pad-l-4\@md {
        padding-left: 16px !important
    }

    .u-pad-l-5\@md {
        padding-left: 20px !important
    }

    .u-pad-l-6\@md {
        padding-left: 24px !important
    }

    .u-pad-l-7\@md {
        padding-left: 28px !important
    }

    .u-pad-l-8\@md {
        padding-left: 32px !important
    }

    .u-pad-l-9\@md {
        padding-left: 36px !important
    }

    .u-pad-l-10\@md {
        padding-left: 40px !important
    }

    .u-pad-l-1m\@md {
        padding-left: 1em !important
    }

    .u-pad-l-2m\@md {
        padding-left: 2em !important
    }

    .u-pad-l-3m\@md {
        padding-left: 3em !important
    }

    .u-pad-l-4m\@md {
        padding-left: 4em !important
    }

    .u-pad-l-5m\@md {
        padding-left: 5em !important
    }

    .u-pad-l-6m\@md {
        padding-left: 6em !important
    }

    .u-pad-l-7m\@md {
        padding-left: 7em !important
    }

    .u-pad-l-8m\@md {
        padding-left: 8em !important
    }

    .u-pad-l-9m\@md {
        padding-left: 9em !important
    }

    .u-pad-l-10m\@md {
        padding-left: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-l-0\@lg {
        padding-left: 0 !important
    }

    .u-pad-l-1\@lg {
        padding-left: 4px !important
    }

    .u-pad-l-2\@lg {
        padding-left: 8px !important
    }

    .u-pad-l-3\@lg {
        padding-left: 12px !important
    }

    .u-pad-l-4\@lg {
        padding-left: 16px !important
    }

    .u-pad-l-5\@lg {
        padding-left: 20px !important
    }

    .u-pad-l-6\@lg {
        padding-left: 24px !important
    }

    .u-pad-l-7\@lg {
        padding-left: 28px !important
    }

    .u-pad-l-8\@lg {
        padding-left: 32px !important
    }

    .u-pad-l-9\@lg {
        padding-left: 36px !important
    }

    .u-pad-l-10\@lg {
        padding-left: 40px !important
    }

    .u-pad-l-1m\@lg {
        padding-left: 1em !important
    }

    .u-pad-l-2m\@lg {
        padding-left: 2em !important
    }

    .u-pad-l-3m\@lg {
        padding-left: 3em !important
    }

    .u-pad-l-4m\@lg {
        padding-left: 4em !important
    }

    .u-pad-l-5m\@lg {
        padding-left: 5em !important
    }

    .u-pad-l-6m\@lg {
        padding-left: 6em !important
    }

    .u-pad-l-7m\@lg {
        padding-left: 7em !important
    }

    .u-pad-l-8m\@lg {
        padding-left: 8em !important
    }

    .u-pad-l-9m\@lg {
        padding-left: 9em !important
    }

    .u-pad-l-10m\@lg {
        padding-left: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-l-0\@xl {
        padding-left: 0 !important
    }

    .u-pad-l-1\@xl {
        padding-left: 4px !important
    }

    .u-pad-l-2\@xl {
        padding-left: 8px !important
    }

    .u-pad-l-3\@xl {
        padding-left: 12px !important
    }

    .u-pad-l-4\@xl {
        padding-left: 16px !important
    }

    .u-pad-l-5\@xl {
        padding-left: 20px !important
    }

    .u-pad-l-6\@xl {
        padding-left: 24px !important
    }

    .u-pad-l-7\@xl {
        padding-left: 28px !important
    }

    .u-pad-l-8\@xl {
        padding-left: 32px !important
    }

    .u-pad-l-9\@xl {
        padding-left: 36px !important
    }

    .u-pad-l-10\@xl {
        padding-left: 40px !important
    }

    .u-pad-l-1m\@xl {
        padding-left: 1em !important
    }

    .u-pad-l-2m\@xl {
        padding-left: 2em !important
    }

    .u-pad-l-3m\@xl {
        padding-left: 3em !important
    }

    .u-pad-l-4m\@xl {
        padding-left: 4em !important
    }

    .u-pad-l-5m\@xl {
        padding-left: 5em !important
    }

    .u-pad-l-6m\@xl {
        padding-left: 6em !important
    }

    .u-pad-l-7m\@xl {
        padding-left: 7em !important
    }

    .u-pad-l-8m\@xl {
        padding-left: 8em !important
    }

    .u-pad-l-9m\@xl {
        padding-left: 9em !important
    }

    .u-pad-l-10m\@xl {
        padding-left: 10em !important
    }
}

.u-pad-h-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.u-pad-h-1 {
    padding-left: 4px !important;
    padding-right: 4px !important
}

.u-pad-h-2 {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.u-pad-h-3 {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.u-pad-h-4 {
    padding-left: 16px !important;
    padding-right: 16px !important
}

.u-pad-h-5 {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.u-pad-h-6 {
    padding-left: 24px !important;
    padding-right: 24px !important
}

.u-pad-h-7 {
    padding-left: 28px !important;
    padding-right: 28px !important
}

.u-pad-h-8 {
    padding-left: 32px !important;
    padding-right: 32px !important
}

.u-pad-h-9 {
    padding-left: 36px !important;
    padding-right: 36px !important
}

.u-pad-h-10 {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.u-pad-h-1m {
    padding-left: 1em !important;
    padding-right: 1em !important
}

.u-pad-h-2m {
    padding-left: 2em !important;
    padding-right: 2em !important
}

.u-pad-h-3m {
    padding-left: 3em !important;
    padding-right: 3em !important
}

.u-pad-h-4m {
    padding-left: 4em !important;
    padding-right: 4em !important
}

.u-pad-h-5m {
    padding-left: 5em !important;
    padding-right: 5em !important
}

.u-pad-h-6m {
    padding-left: 6em !important;
    padding-right: 6em !important
}

.u-pad-h-7m {
    padding-left: 7em !important;
    padding-right: 7em !important
}

.u-pad-h-8m {
    padding-left: 8em !important;
    padding-right: 8em !important
}

.u-pad-h-9m {
    padding-left: 9em !important;
    padding-right: 9em !important
}

.u-pad-h-10m {
    padding-left: 10em !important;
    padding-right: 10em !important
}

@media (min-width: 544px) {
    .u-pad-h-0\@sm {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .u-pad-h-1\@sm {
        padding-left: 4px !important;
        padding-right: 4px !important
    }

    .u-pad-h-2\@sm {
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .u-pad-h-3\@sm {
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .u-pad-h-4\@sm {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

    .u-pad-h-5\@sm {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .u-pad-h-6\@sm {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .u-pad-h-7\@sm {
        padding-left: 28px !important;
        padding-right: 28px !important
    }

    .u-pad-h-8\@sm {
        padding-left: 32px !important;
        padding-right: 32px !important
    }

    .u-pad-h-9\@sm {
        padding-left: 36px !important;
        padding-right: 36px !important
    }

    .u-pad-h-10\@sm {
        padding-left: 40px !important;
        padding-right: 40px !important
    }

    .u-pad-h-1m\@sm {
        padding-left: 1em !important;
        padding-right: 1em !important
    }

    .u-pad-h-2m\@sm {
        padding-left: 2em !important;
        padding-right: 2em !important
    }

    .u-pad-h-3m\@sm {
        padding-left: 3em !important;
        padding-right: 3em !important
    }

    .u-pad-h-4m\@sm {
        padding-left: 4em !important;
        padding-right: 4em !important
    }

    .u-pad-h-5m\@sm {
        padding-left: 5em !important;
        padding-right: 5em !important
    }

    .u-pad-h-6m\@sm {
        padding-left: 6em !important;
        padding-right: 6em !important
    }

    .u-pad-h-7m\@sm {
        padding-left: 7em !important;
        padding-right: 7em !important
    }

    .u-pad-h-8m\@sm {
        padding-left: 8em !important;
        padding-right: 8em !important
    }

    .u-pad-h-9m\@sm {
        padding-left: 9em !important;
        padding-right: 9em !important
    }

    .u-pad-h-10m\@sm {
        padding-left: 10em !important;
        padding-right: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-h-0\@md {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .u-pad-h-1\@md {
        padding-left: 4px !important;
        padding-right: 4px !important
    }

    .u-pad-h-2\@md {
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .u-pad-h-3\@md {
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .u-pad-h-4\@md {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

    .u-pad-h-5\@md {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .u-pad-h-6\@md {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .u-pad-h-7\@md {
        padding-left: 28px !important;
        padding-right: 28px !important
    }

    .u-pad-h-8\@md {
        padding-left: 32px !important;
        padding-right: 32px !important
    }

    .u-pad-h-9\@md {
        padding-left: 36px !important;
        padding-right: 36px !important
    }

    .u-pad-h-10\@md {
        padding-left: 40px !important;
        padding-right: 40px !important
    }

    .u-pad-h-1m\@md {
        padding-left: 1em !important;
        padding-right: 1em !important
    }

    .u-pad-h-2m\@md {
        padding-left: 2em !important;
        padding-right: 2em !important
    }

    .u-pad-h-3m\@md {
        padding-left: 3em !important;
        padding-right: 3em !important
    }

    .u-pad-h-4m\@md {
        padding-left: 4em !important;
        padding-right: 4em !important
    }

    .u-pad-h-5m\@md {
        padding-left: 5em !important;
        padding-right: 5em !important
    }

    .u-pad-h-6m\@md {
        padding-left: 6em !important;
        padding-right: 6em !important
    }

    .u-pad-h-7m\@md {
        padding-left: 7em !important;
        padding-right: 7em !important
    }

    .u-pad-h-8m\@md {
        padding-left: 8em !important;
        padding-right: 8em !important
    }

    .u-pad-h-9m\@md {
        padding-left: 9em !important;
        padding-right: 9em !important
    }

    .u-pad-h-10m\@md {
        padding-left: 10em !important;
        padding-right: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-h-0\@lg {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .u-pad-h-1\@lg {
        padding-left: 4px !important;
        padding-right: 4px !important
    }

    .u-pad-h-2\@lg {
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .u-pad-h-3\@lg {
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .u-pad-h-4\@lg {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

    .u-pad-h-5\@lg {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .u-pad-h-6\@lg {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .u-pad-h-7\@lg {
        padding-left: 28px !important;
        padding-right: 28px !important
    }

    .u-pad-h-8\@lg {
        padding-left: 32px !important;
        padding-right: 32px !important
    }

    .u-pad-h-9\@lg {
        padding-left: 36px !important;
        padding-right: 36px !important
    }

    .u-pad-h-10\@lg {
        padding-left: 40px !important;
        padding-right: 40px !important
    }

    .u-pad-h-1m\@lg {
        padding-left: 1em !important;
        padding-right: 1em !important
    }

    .u-pad-h-2m\@lg {
        padding-left: 2em !important;
        padding-right: 2em !important
    }

    .u-pad-h-3m\@lg {
        padding-left: 3em !important;
        padding-right: 3em !important
    }

    .u-pad-h-4m\@lg {
        padding-left: 4em !important;
        padding-right: 4em !important
    }

    .u-pad-h-5m\@lg {
        padding-left: 5em !important;
        padding-right: 5em !important
    }

    .u-pad-h-6m\@lg {
        padding-left: 6em !important;
        padding-right: 6em !important
    }

    .u-pad-h-7m\@lg {
        padding-left: 7em !important;
        padding-right: 7em !important
    }

    .u-pad-h-8m\@lg {
        padding-left: 8em !important;
        padding-right: 8em !important
    }

    .u-pad-h-9m\@lg {
        padding-left: 9em !important;
        padding-right: 9em !important
    }

    .u-pad-h-10m\@lg {
        padding-left: 10em !important;
        padding-right: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-h-0\@xl {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .u-pad-h-1\@xl {
        padding-left: 4px !important;
        padding-right: 4px !important
    }

    .u-pad-h-2\@xl {
        padding-left: 8px !important;
        padding-right: 8px !important
    }

    .u-pad-h-3\@xl {
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .u-pad-h-4\@xl {
        padding-left: 16px !important;
        padding-right: 16px !important
    }

    .u-pad-h-5\@xl {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .u-pad-h-6\@xl {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .u-pad-h-7\@xl {
        padding-left: 28px !important;
        padding-right: 28px !important
    }

    .u-pad-h-8\@xl {
        padding-left: 32px !important;
        padding-right: 32px !important
    }

    .u-pad-h-9\@xl {
        padding-left: 36px !important;
        padding-right: 36px !important
    }

    .u-pad-h-10\@xl {
        padding-left: 40px !important;
        padding-right: 40px !important
    }

    .u-pad-h-1m\@xl {
        padding-left: 1em !important;
        padding-right: 1em !important
    }

    .u-pad-h-2m\@xl {
        padding-left: 2em !important;
        padding-right: 2em !important
    }

    .u-pad-h-3m\@xl {
        padding-left: 3em !important;
        padding-right: 3em !important
    }

    .u-pad-h-4m\@xl {
        padding-left: 4em !important;
        padding-right: 4em !important
    }

    .u-pad-h-5m\@xl {
        padding-left: 5em !important;
        padding-right: 5em !important
    }

    .u-pad-h-6m\@xl {
        padding-left: 6em !important;
        padding-right: 6em !important
    }

    .u-pad-h-7m\@xl {
        padding-left: 7em !important;
        padding-right: 7em !important
    }

    .u-pad-h-8m\@xl {
        padding-left: 8em !important;
        padding-right: 8em !important
    }

    .u-pad-h-9m\@xl {
        padding-left: 9em !important;
        padding-right: 9em !important
    }

    .u-pad-h-10m\@xl {
        padding-left: 10em !important;
        padding-right: 10em !important
    }
}

.u-pad-v-0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important
}

.u-pad-v-1 {
    padding-bottom: 4px !important;
    padding-top: 4px !important
}

.u-pad-v-2 {
    padding-bottom: 8px !important;
    padding-top: 8px !important
}

.u-pad-v-3 {
    padding-bottom: 12px !important;
    padding-top: 12px !important
}

.u-pad-v-4 {
    padding-bottom: 16px !important;
    padding-top: 16px !important
}

.u-pad-v-5 {
    padding-bottom: 20px !important;
    padding-top: 20px !important
}

.u-pad-v-6 {
    padding-bottom: 24px !important;
    padding-top: 24px !important
}

.u-pad-v-7 {
    padding-bottom: 28px !important;
    padding-top: 28px !important
}

.u-pad-v-8 {
    padding-bottom: 32px !important;
    padding-top: 32px !important
}

.u-pad-v-9 {
    padding-bottom: 36px !important;
    padding-top: 36px !important
}

.u-pad-v-10 {
    padding-bottom: 40px !important;
    padding-top: 40px !important
}

.u-pad-v-1m {
    padding-bottom: 1em !important;
    padding-top: 1em !important
}

.u-pad-v-2m {
    padding-bottom: 2em !important;
    padding-top: 2em !important
}

.u-pad-v-3m {
    padding-bottom: 3em !important;
    padding-top: 3em !important
}

.u-pad-v-4m {
    padding-bottom: 4em !important;
    padding-top: 4em !important
}

.u-pad-v-5m {
    padding-bottom: 5em !important;
    padding-top: 5em !important
}

.u-pad-v-6m {
    padding-bottom: 6em !important;
    padding-top: 6em !important
}

.u-pad-v-7m {
    padding-bottom: 7em !important;
    padding-top: 7em !important
}

.u-pad-v-8m {
    padding-bottom: 8em !important;
    padding-top: 8em !important
}

.u-pad-v-9m {
    padding-bottom: 9em !important;
    padding-top: 9em !important
}

.u-pad-v-10m {
    padding-bottom: 10em !important;
    padding-top: 10em !important
}

@media (min-width: 544px) {
    .u-pad-v-0\@sm {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }

    .u-pad-v-1\@sm {
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .u-pad-v-2\@sm {
        padding-bottom: 8px !important;
        padding-top: 8px !important
    }

    .u-pad-v-3\@sm {
        padding-bottom: 12px !important;
        padding-top: 12px !important
    }

    .u-pad-v-4\@sm {
        padding-bottom: 16px !important;
        padding-top: 16px !important
    }

    .u-pad-v-5\@sm {
        padding-bottom: 20px !important;
        padding-top: 20px !important
    }

    .u-pad-v-6\@sm {
        padding-bottom: 24px !important;
        padding-top: 24px !important
    }

    .u-pad-v-7\@sm {
        padding-bottom: 28px !important;
        padding-top: 28px !important
    }

    .u-pad-v-8\@sm {
        padding-bottom: 32px !important;
        padding-top: 32px !important
    }

    .u-pad-v-9\@sm {
        padding-bottom: 36px !important;
        padding-top: 36px !important
    }

    .u-pad-v-10\@sm {
        padding-bottom: 40px !important;
        padding-top: 40px !important
    }

    .u-pad-v-1m\@sm {
        padding-bottom: 1em !important;
        padding-top: 1em !important
    }

    .u-pad-v-2m\@sm {
        padding-bottom: 2em !important;
        padding-top: 2em !important
    }

    .u-pad-v-3m\@sm {
        padding-bottom: 3em !important;
        padding-top: 3em !important
    }

    .u-pad-v-4m\@sm {
        padding-bottom: 4em !important;
        padding-top: 4em !important
    }

    .u-pad-v-5m\@sm {
        padding-bottom: 5em !important;
        padding-top: 5em !important
    }

    .u-pad-v-6m\@sm {
        padding-bottom: 6em !important;
        padding-top: 6em !important
    }

    .u-pad-v-7m\@sm {
        padding-bottom: 7em !important;
        padding-top: 7em !important
    }

    .u-pad-v-8m\@sm {
        padding-bottom: 8em !important;
        padding-top: 8em !important
    }

    .u-pad-v-9m\@sm {
        padding-bottom: 9em !important;
        padding-top: 9em !important
    }

    .u-pad-v-10m\@sm {
        padding-bottom: 10em !important;
        padding-top: 10em !important
    }
}

@media (min-width: 768px) {
    .u-pad-v-0\@md {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }

    .u-pad-v-1\@md {
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .u-pad-v-2\@md {
        padding-bottom: 8px !important;
        padding-top: 8px !important
    }

    .u-pad-v-3\@md {
        padding-bottom: 12px !important;
        padding-top: 12px !important
    }

    .u-pad-v-4\@md {
        padding-bottom: 16px !important;
        padding-top: 16px !important
    }

    .u-pad-v-5\@md {
        padding-bottom: 20px !important;
        padding-top: 20px !important
    }

    .u-pad-v-6\@md {
        padding-bottom: 24px !important;
        padding-top: 24px !important
    }

    .u-pad-v-7\@md {
        padding-bottom: 28px !important;
        padding-top: 28px !important
    }

    .u-pad-v-8\@md {
        padding-bottom: 32px !important;
        padding-top: 32px !important
    }

    .u-pad-v-9\@md {
        padding-bottom: 36px !important;
        padding-top: 36px !important
    }

    .u-pad-v-10\@md {
        padding-bottom: 40px !important;
        padding-top: 40px !important
    }

    .u-pad-v-1m\@md {
        padding-bottom: 1em !important;
        padding-top: 1em !important
    }

    .u-pad-v-2m\@md {
        padding-bottom: 2em !important;
        padding-top: 2em !important
    }

    .u-pad-v-3m\@md {
        padding-bottom: 3em !important;
        padding-top: 3em !important
    }

    .u-pad-v-4m\@md {
        padding-bottom: 4em !important;
        padding-top: 4em !important
    }

    .u-pad-v-5m\@md {
        padding-bottom: 5em !important;
        padding-top: 5em !important
    }

    .u-pad-v-6m\@md {
        padding-bottom: 6em !important;
        padding-top: 6em !important
    }

    .u-pad-v-7m\@md {
        padding-bottom: 7em !important;
        padding-top: 7em !important
    }

    .u-pad-v-8m\@md {
        padding-bottom: 8em !important;
        padding-top: 8em !important
    }

    .u-pad-v-9m\@md {
        padding-bottom: 9em !important;
        padding-top: 9em !important
    }

    .u-pad-v-10m\@md {
        padding-bottom: 10em !important;
        padding-top: 10em !important
    }
}

@media (min-width: 992px) {
    .u-pad-v-0\@lg {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }

    .u-pad-v-1\@lg {
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .u-pad-v-2\@lg {
        padding-bottom: 8px !important;
        padding-top: 8px !important
    }

    .u-pad-v-3\@lg {
        padding-bottom: 12px !important;
        padding-top: 12px !important
    }

    .u-pad-v-4\@lg {
        padding-bottom: 16px !important;
        padding-top: 16px !important
    }

    .u-pad-v-5\@lg {
        padding-bottom: 20px !important;
        padding-top: 20px !important
    }

    .u-pad-v-6\@lg {
        padding-bottom: 24px !important;
        padding-top: 24px !important
    }

    .u-pad-v-7\@lg {
        padding-bottom: 28px !important;
        padding-top: 28px !important
    }

    .u-pad-v-8\@lg {
        padding-bottom: 32px !important;
        padding-top: 32px !important
    }

    .u-pad-v-9\@lg {
        padding-bottom: 36px !important;
        padding-top: 36px !important
    }

    .u-pad-v-10\@lg {
        padding-bottom: 40px !important;
        padding-top: 40px !important
    }

    .u-pad-v-1m\@lg {
        padding-bottom: 1em !important;
        padding-top: 1em !important
    }

    .u-pad-v-2m\@lg {
        padding-bottom: 2em !important;
        padding-top: 2em !important
    }

    .u-pad-v-3m\@lg {
        padding-bottom: 3em !important;
        padding-top: 3em !important
    }

    .u-pad-v-4m\@lg {
        padding-bottom: 4em !important;
        padding-top: 4em !important
    }

    .u-pad-v-5m\@lg {
        padding-bottom: 5em !important;
        padding-top: 5em !important
    }

    .u-pad-v-6m\@lg {
        padding-bottom: 6em !important;
        padding-top: 6em !important
    }

    .u-pad-v-7m\@lg {
        padding-bottom: 7em !important;
        padding-top: 7em !important
    }

    .u-pad-v-8m\@lg {
        padding-bottom: 8em !important;
        padding-top: 8em !important
    }

    .u-pad-v-9m\@lg {
        padding-bottom: 9em !important;
        padding-top: 9em !important
    }

    .u-pad-v-10m\@lg {
        padding-bottom: 10em !important;
        padding-top: 10em !important
    }
}

@media (min-width: 1200px) {
    .u-pad-v-0\@xl {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }

    .u-pad-v-1\@xl {
        padding-bottom: 4px !important;
        padding-top: 4px !important
    }

    .u-pad-v-2\@xl {
        padding-bottom: 8px !important;
        padding-top: 8px !important
    }

    .u-pad-v-3\@xl {
        padding-bottom: 12px !important;
        padding-top: 12px !important
    }

    .u-pad-v-4\@xl {
        padding-bottom: 16px !important;
        padding-top: 16px !important
    }

    .u-pad-v-5\@xl {
        padding-bottom: 20px !important;
        padding-top: 20px !important
    }

    .u-pad-v-6\@xl {
        padding-bottom: 24px !important;
        padding-top: 24px !important
    }

    .u-pad-v-7\@xl {
        padding-bottom: 28px !important;
        padding-top: 28px !important
    }

    .u-pad-v-8\@xl {
        padding-bottom: 32px !important;
        padding-top: 32px !important
    }

    .u-pad-v-9\@xl {
        padding-bottom: 36px !important;
        padding-top: 36px !important
    }

    .u-pad-v-10\@xl {
        padding-bottom: 40px !important;
        padding-top: 40px !important
    }

    .u-pad-v-1m\@xl {
        padding-bottom: 1em !important;
        padding-top: 1em !important
    }

    .u-pad-v-2m\@xl {
        padding-bottom: 2em !important;
        padding-top: 2em !important
    }

    .u-pad-v-3m\@xl {
        padding-bottom: 3em !important;
        padding-top: 3em !important
    }

    .u-pad-v-4m\@xl {
        padding-bottom: 4em !important;
        padding-top: 4em !important
    }

    .u-pad-v-5m\@xl {
        padding-bottom: 5em !important;
        padding-top: 5em !important
    }

    .u-pad-v-6m\@xl {
        padding-bottom: 6em !important;
        padding-top: 6em !important
    }

    .u-pad-v-7m\@xl {
        padding-bottom: 7em !important;
        padding-top: 7em !important
    }

    .u-pad-v-8m\@xl {
        padding-bottom: 8em !important;
        padding-top: 8em !important
    }

    .u-pad-v-9m\@xl {
        padding-bottom: 9em !important;
        padding-top: 9em !important
    }

    .u-pad-v-10m\@xl {
        padding-bottom: 10em !important;
        padding-top: 10em !important
    }
}

.c-thumbnail {
    background-color: #eee;
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%
}

.c-thumbnail--top .c-thumbnail > img, .c-thumbnail--top .c-thumbnail__image {
    bottom: inherit;
    top: 0
}

.c-thumbnail--center .c-thumbnail > img, .c-thumbnail--center .c-thumbnail__image {
    bottom: -100%;
    top: -100%
}

.c-thumbnail--bottom .c-thumbnail > img, .c-thumbnail--bottom .c-thumbnail__image {
    bottom: 0;
    top: inherit
}

.c-thumbnail--wide {
    padding-bottom: 56.25%
}

.c-thumbnail--wide .c-thumbnail > img, .c-thumbnail--wide .c-thumbnail__image {
    height: auto;
    width: 102%
}

.c-thumbnail--sd {
    padding-bottom: 75%
}

.c-thumbnail--sd .c-thumbnail > img, .c-thumbnail--sd .c-thumbnail__image {
    height: 102%;
    width: auto
}

.c-thumbnail--square {
    padding-bottom: 100%
}

.c-thumbnail--square .c-thumbnail > img, .c-thumbnail--square .c-thumbnail__image {
    height: 102%;
    width: auto
}

@media (min-width: 544px) {
    .c-thumbnail--wide\@sm {
        padding-bottom: 56.25%
    }

    .c-thumbnail--wide\@sm .c-thumbnail__image, .c-thumbnail--wide\@sm .c-thumbnail > img {
        height: auto;
        width: 102%
    }

    .c-thumbnail--sd\@sm {
        padding-bottom: 75%
    }

    .c-thumbnail--sd\@sm .c-thumbnail__image, .c-thumbnail--sd\@sm .c-thumbnail > img {
        height: 102%;
        width: auto
    }

    .c-thumbnail--square\@sm {
        padding-bottom: 100%
    }

    .c-thumbnail--square\@sm .c-thumbnail__image, .c-thumbnail--square\@sm .c-thumbnail > img {
        height: 102%;
        width: auto
    }
}

@media (min-width: 768px) {
    .c-thumbnail--wide\@md {
        padding-bottom: 56.25%
    }

    .c-thumbnail--wide\@md .c-thumbnail__image, .c-thumbnail--wide\@md .c-thumbnail > img {
        height: auto;
        width: 102%
    }

    .c-thumbnail--sd\@md {
        padding-bottom: 75%
    }

    .c-thumbnail--sd\@md .c-thumbnail__image, .c-thumbnail--sd\@md .c-thumbnail > img {
        height: 102%;
        width: auto
    }

    .c-thumbnail--square\@md {
        padding-bottom: 100%
    }

    .c-thumbnail--square\@md .c-thumbnail__image, .c-thumbnail--square\@md .c-thumbnail > img {
        height: 102%;
        width: auto
    }
}

@media (min-width: 992px) {
    .c-thumbnail--wide\@lg {
        padding-bottom: 56.25%
    }

    .c-thumbnail--wide\@lg .c-thumbnail__image, .c-thumbnail--wide\@lg .c-thumbnail > img {
        height: auto;
        width: 102%
    }

    .c-thumbnail--sd\@lg {
        padding-bottom: 75%
    }

    .c-thumbnail--sd\@lg .c-thumbnail__image, .c-thumbnail--sd\@lg .c-thumbnail > img {
        height: 102%;
        width: auto
    }

    .c-thumbnail--square\@lg {
        padding-bottom: 100%
    }

    .c-thumbnail--square\@lg .c-thumbnail__image, .c-thumbnail--square\@lg .c-thumbnail > img {
        height: 102%;
        width: auto
    }
}

@media (min-width: 1200px) {
    .c-thumbnail--wide\@xl {
        padding-bottom: 56.25%
    }

    .c-thumbnail--wide\@xl .c-thumbnail__image, .c-thumbnail--wide\@xl .c-thumbnail > img {
        height: auto;
        width: 102%
    }

    .c-thumbnail--sd\@xl {
        padding-bottom: 75%
    }

    .c-thumbnail--sd\@xl .c-thumbnail__image, .c-thumbnail--sd\@xl .c-thumbnail > img {
        height: 102%;
        width: auto
    }

    .c-thumbnail--square\@xl {
        padding-bottom: 100%
    }

    .c-thumbnail--square\@xl .c-thumbnail__image, .c-thumbnail--square\@xl .c-thumbnail > img {
        height: 102%;
        width: auto
    }
}

.c-thumbnail > img, .c-thumbnail__image {
    bottom: -100%;
    height: auto;
    left: -100%;
    margin: auto;
    max-width: none;
    position: absolute;
    right: -100%;
    top: -100%;
    width: 102%
}

.tx-justify {
    text-align: justify !important
}

.tx-left {
    text-align: left !important
}

.tx-center {
    text-align: center !important
}

.tx-right {
    text-align: right !important
}

@media (min-width: 544px) {
    .tx-justify\@sm {
        text-align: justify !important
    }

    .tx-left\@sm {
        text-align: left !important
    }

    .tx-center\@sm {
        text-align: center !important
    }

    .tx-right\@sm {
        text-align: right !important
    }
}

@media (min-width: 768px) {
    .tx-justify\@md {
        text-align: justify !important
    }

    .tx-left\@md {
        text-align: left !important
    }

    .tx-center\@md {
        text-align: center !important
    }

    .tx-right\@md {
        text-align: right !important
    }
}

@media (min-width: 992px) {
    .tx-justify\@lg {
        text-align: justify !important
    }

    .tx-left\@lg {
        text-align: left !important
    }

    .tx-center\@lg {
        text-align: center !important
    }

    .tx-right\@lg {
        text-align: right !important
    }
}

@media (min-width: 1200px) {
    .tx-justify\@xl {
        text-align: justify !important
    }

    .tx-left\@xl {
        text-align: left !important
    }

    .tx-center\@xl {
        text-align: center !important
    }

    .tx-right\@xl {
        text-align: right !important
    }
}

.tx-break-all {
    word-break: break-all !important
}

.tx-break-keep-all {
    word-break: keep-all !important
}

.tx-break-normal {
    word-break: normal !important
}

.tx-overline {
    text-decoration: overline !important
}

.tx-strikethrough {
    text-decoration: line-through !important
}

.tx-underline {
    text-decoration: underline !important
}

.tx-no-decoration {
    text-decoration: none !important
}

.tx-no-underline {
    text-decoration: none !important
}

.tx-h1 {
    font-size: 3rem !important
}

.tx-h2 {
    font-size: 2.25rem !important
}

.tx-h3 {
    font-size: 1.5rem !important
}

.tx-h4 {
    font-size: 1.25rem !important
}

.tx-h5 {
    font-size: 1rem !important
}

.tx-h6 {
    font-size: .875rem !important
}

@media (min-width: 544px) {
    .tx-h1\@sm {
        font-size: 3rem !important
    }

    .tx-h2\@sm {
        font-size: 2.25rem !important
    }

    .tx-h3\@sm {
        font-size: 1.5rem !important
    }

    .tx-h4\@sm {
        font-size: 1.25rem !important
    }

    .tx-h5\@sm {
        font-size: 1rem !important
    }

    .tx-h6\@sm {
        font-size: .875rem !important
    }
}

@media (min-width: 768px) {
    .tx-h1\@md {
        font-size: 3rem !important
    }

    .tx-h2\@md {
        font-size: 2.25rem !important
    }

    .tx-h3\@md {
        font-size: 1.5rem !important
    }

    .tx-h4\@md {
        font-size: 1.25rem !important
    }

    .tx-h5\@md {
        font-size: 1rem !important
    }

    .tx-h6\@md {
        font-size: .875rem !important
    }
}

@media (min-width: 992px) {
    .tx-h1\@lg {
        font-size: 3rem !important
    }

    .tx-h2\@lg {
        font-size: 2.25rem !important
    }

    .tx-h3\@lg {
        font-size: 1.5rem !important
    }

    .tx-h4\@lg {
        font-size: 1.25rem !important
    }

    .tx-h5\@lg {
        font-size: 1rem !important
    }

    .tx-h6\@lg {
        font-size: .875rem !important
    }
}

@media (min-width: 1200px) {
    .tx-h1\@xl {
        font-size: 3rem !important
    }

    .tx-h2\@xl {
        font-size: 2.25rem !important
    }

    .tx-h3\@xl {
        font-size: 1.5rem !important
    }

    .tx-h4\@xl {
        font-size: 1.25rem !important
    }

    .tx-h5\@xl {
        font-size: 1rem !important
    }

    .tx-h6\@xl {
        font-size: .875rem !important
    }
}

.tx-headline-1 {
    font-size: 5rem !important
}

.tx-headline-2 {
    font-size: 4.5rem !important
}

.tx-headline-3 {
    font-size: 4rem !important
}

.tx-headline-4 {
    font-size: 3.5rem !important
}

@media (min-width: 544px) {
    .tx-headline-1\@sm {
        font-size: 5rem !important
    }

    .tx-headline-2\@sm {
        font-size: 4.5rem !important
    }

    .tx-headline-3\@sm {
        font-size: 4rem !important
    }

    .tx-headline-4\@sm {
        font-size: 3.5rem !important
    }
}

@media (min-width: 768px) {
    .tx-headline-1\@md {
        font-size: 5rem !important
    }

    .tx-headline-2\@md {
        font-size: 4.5rem !important
    }

    .tx-headline-3\@md {
        font-size: 4rem !important
    }

    .tx-headline-4\@md {
        font-size: 3.5rem !important
    }
}

@media (min-width: 992px) {
    .tx-headline-1\@lg {
        font-size: 5rem !important
    }

    .tx-headline-2\@lg {
        font-size: 4.5rem !important
    }

    .tx-headline-3\@lg {
        font-size: 4rem !important
    }

    .tx-headline-4\@lg {
        font-size: 3.5rem !important
    }
}

@media (min-width: 1200px) {
    .tx-headline-1\@xl {
        font-size: 5rem !important
    }

    .tx-headline-2\@xl {
        font-size: 4.5rem !important
    }

    .tx-headline-3\@xl {
        font-size: 4rem !important
    }

    .tx-headline-4\@xl {
        font-size: 3.5rem !important
    }
}

.tx-lh-heading {
    line-height: 1.2 !important
}

.tx-lh-body {
    line-height: 1.5 !important
}

.tx-lh-copy {
    line-height: 1.6 !important
}

.tx-lh-reset {
    line-height: 1 !important
}

.tx-lh-none {
    line-height: 0 !important
}

@media (min-width: 544px) {
    .tx-lh-heading\@sm {
        line-height: 1.2 !important
    }

    .tx-lh-body\@sm {
        line-height: 1.5 !important
    }

    .tx-lh-copy\@sm {
        line-height: 1.6 !important
    }

    .tx-lh-reset\@sm {
        line-height: 1 !important
    }

    .tx-lh-none\@sm {
        line-height: 0 !important
    }
}

@media (min-width: 768px) {
    .tx-lh-heading\@md {
        line-height: 1.2 !important
    }

    .tx-lh-body\@md {
        line-height: 1.5 !important
    }

    .tx-lh-copy\@md {
        line-height: 1.6 !important
    }

    .tx-lh-reset\@md {
        line-height: 1 !important
    }

    .tx-lh-none\@md {
        line-height: 0 !important
    }
}

@media (min-width: 992px) {
    .tx-lh-heading\@lg {
        line-height: 1.2 !important
    }

    .tx-lh-body\@lg {
        line-height: 1.5 !important
    }

    .tx-lh-copy\@lg {
        line-height: 1.6 !important
    }

    .tx-lh-reset\@lg {
        line-height: 1 !important
    }

    .tx-lh-none\@lg {
        line-height: 0 !important
    }
}

@media (min-width: 1200px) {
    .tx-lh-heading\@xl {
        line-height: 1.2 !important
    }

    .tx-lh-body\@xl {
        line-height: 1.5 !important
    }

    .tx-lh-copy\@xl {
        line-height: 1.6 !important
    }

    .tx-lh-reset\@xl {
        line-height: 1 !important
    }

    .tx-lh-none\@xl {
        line-height: 0 !important
    }
}

.tx-lead {
    font-size: 2.5em !important
}

.tx-xl {
    font-size: 1.28em !important
}

.tx-lg {
    font-size: 1.14em !important
}

.tx-md {
    font-size: 1em !important
}

.tx-sm {
    font-size: .92em !important
}

.tx-xs {
    font-size: .78em !important
}

.tx-60 {
    font-size: 60px !important
}

.tx-26 {
    font-size: 26px !important
}

.tx-22 {
    font-size: 22px !important
}

.tx-20 {
    font-size: 20px !important
}

.tx-18 {
    font-size: 18px !important
}

.tx-16 {
    font-size: 16px !important
}

.tx-14 {
    font-size: 14px !important
}

.tx-13 {
    font-size: 13px !important
}

.tx-12 {
    font-size: 12px !important
}

.tx-11 {
    font-size: 11px !important
}

@media (min-width: 544px) {
    .tx-lead\@sm {
        font-size: 2.5em !important
    }

    .tx-xl\@sm {
        font-size: 1.28em !important
    }

    .tx-lg\@sm {
        font-size: 1.14em !important
    }

    .tx-md\@sm {
        font-size: 1em !important
    }

    .tx-sm\@sm {
        font-size: .92em !important
    }

    .tx-xs\@sm {
        font-size: .78em !important
    }

    .tx-60\@sm {
        font-size: 60px !important
    }

    .tx-26\@sm {
        font-size: 26px !important
    }

    .tx-22\@sm {
        font-size: 22px !important
    }

    .tx-20\@sm {
        font-size: 20px !important
    }

    .tx-18\@sm {
        font-size: 18px !important
    }

    .tx-16\@sm {
        font-size: 16px !important
    }

    .tx-14\@sm {
        font-size: 14px !important
    }

    .tx-13\@sm {
        font-size: 13px !important
    }

    .tx-12\@sm {
        font-size: 12px !important
    }

    .tx-11\@sm {
        font-size: 11px !important
    }
}

@media (min-width: 768px) {
    .tx-lead\@md {
        font-size: 2.5em !important
    }

    .tx-xl\@md {
        font-size: 1.28em !important
    }

    .tx-lg\@md {
        font-size: 1.14em !important
    }

    .tx-md\@md {
        font-size: 1em !important
    }

    .tx-sm\@md {
        font-size: .92em !important
    }

    .tx-xs\@md {
        font-size: .78em !important
    }

    .tx-60\@md {
        font-size: 60px !important
    }

    .tx-26\@md {
        font-size: 26px !important
    }

    .tx-22\@md {
        font-size: 22px !important
    }

    .tx-20\@md {
        font-size: 20px !important
    }

    .tx-18\@md {
        font-size: 18px !important
    }

    .tx-16\@md {
        font-size: 16px !important
    }

    .tx-14\@md {
        font-size: 14px !important
    }

    .tx-13\@md {
        font-size: 13px !important
    }

    .tx-12\@md {
        font-size: 12px !important
    }

    .tx-11\@md {
        font-size: 11px !important
    }
}

@media (min-width: 992px) {
    .tx-lead\@lg {
        font-size: 2.5em !important
    }

    .tx-xl\@lg {
        font-size: 1.28em !important
    }

    .tx-lg\@lg {
        font-size: 1.14em !important
    }

    .tx-md\@lg {
        font-size: 1em !important
    }

    .tx-sm\@lg {
        font-size: .92em !important
    }

    .tx-xs\@lg {
        font-size: .78em !important
    }

    .tx-60\@lg {
        font-size: 60px !important
    }

    .tx-26\@lg {
        font-size: 26px !important
    }

    .tx-22\@lg {
        font-size: 22px !important
    }

    .tx-20\@lg {
        font-size: 20px !important
    }

    .tx-18\@lg {
        font-size: 18px !important
    }

    .tx-16\@lg {
        font-size: 16px !important
    }

    .tx-14\@lg {
        font-size: 14px !important
    }

    .tx-13\@lg {
        font-size: 13px !important
    }

    .tx-12\@lg {
        font-size: 12px !important
    }

    .tx-11\@lg {
        font-size: 11px !important
    }
}

@media (min-width: 1200px) {
    .tx-lead\@xl {
        font-size: 2.5em !important
    }

    .tx-xl\@xl {
        font-size: 1.28em !important
    }

    .tx-lg\@xl {
        font-size: 1.14em !important
    }

    .tx-md\@xl {
        font-size: 1em !important
    }

    .tx-sm\@xl {
        font-size: .92em !important
    }

    .tx-xs\@xl {
        font-size: .78em !important
    }

    .tx-60\@xl {
        font-size: 60px !important
    }

    .tx-26\@xl {
        font-size: 26px !important
    }

    .tx-22\@xl {
        font-size: 22px !important
    }

    .tx-20\@xl {
        font-size: 20px !important
    }

    .tx-18\@xl {
        font-size: 18px !important
    }

    .tx-16\@xl {
        font-size: 16px !important
    }

    .tx-14\@xl {
        font-size: 14px !important
    }

    .tx-13\@xl {
        font-size: 13px !important
    }

    .tx-12\@xl {
        font-size: 12px !important
    }

    .tx-11\@xl {
        font-size: 11px !important
    }
}

.tx-smooth {
    -moz-osx-font-smoothing: antialiased !important;
    -webkit-font-smoothing: antialiased !important
}

.tx-smooth-auto {
    -moz-osx-font-smoothing: auto !important;
    -webkit-font-smoothing: auto !important
}

.tx-smooth-none {
    -moz-osx-font-smoothing: none !important;
    -webkit-font-smoothing: none !important
}

.tx-initial {
    -moz-osx-font-smoothing: initial !important;
    -webkit-font-smoothing: initial !important
}

.tx-capitalize {
    text-transform: capitalize !important
}

.tx-lowercase {
    text-transform: lowercase !important
}

.tx-uppercase {
    text-transform: uppercase !important
}

.tx-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important
}

.tx-truncate-block {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block
}

.tx-100 {
    font-weight: 100 !important
}

.tx-200 {
    font-weight: 200 !important
}

.tx-300 {
    font-weight: 300 !important
}

.tx-400 {
    font-weight: 400 !important
}

.tx-500 {
    font-weight: 500 !important
}

.tx-600 {
    font-weight: 600 !important
}

.tx-700 {
    font-weight: 700 !important
}

.tx-800 {
    font-weight: 800 !important
}

.tx-900 {
    font-weight: 900 !important
}

.tx-lighter {
    font-weight: lighter !important
}

.tx-normal {
    font-weight: 400 !important
}

.tx-bold {
    font-weight: 700 !important
}

.tx-bolder {
    font-weight: bolder !important
}

.tx-ws-nowrap {
    white-space: nowrap !important
}

.tx-ws-pre {
    white-space: pre !important
}

.tx-ws-pre-line {
    white-space: pre-line !important
}

.tx-ws-normal {
    white-space: normal !important
}

.tx-wrap-break {
    word-wrap: break-word !important
}

.tx-wrap-normal {
    word-wrap: normal !important
}

.u-invisible {
    visibility: hidden !important
}

@media (min-width: 544px) {
    .u-invisible\@sm {
        visibility: hidden !important
    }
}

@media (min-width: 768px) {
    .u-invisible\@md {
        visibility: hidden !important
    }
}

@media (min-width: 992px) {
    .u-invisible\@lg {
        visibility: hidden !important
    }
}

@media (min-width: 1200px) {
    .u-invisible\@xl {
        visibility: hidden !important
    }
}

.u-visible {
    visibility: visible !important
}

@media (min-width: 544px) {
    .u-visible\@sm {
        visibility: visible !important
    }
}

@media (min-width: 768px) {
    .u-visible\@md {
        visibility: visible !important
    }
}

@media (min-width: 992px) {
    .u-visible\@lg {
        visibility: visible !important
    }
}

@media (min-width: 1200px) {
    .u-visible\@xl {
        visibility: visible !important
    }
}

.u-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.u-sr-only + * {
    margin-top: 0
}

[class*=u-width-] {
    max-width: 100%
}

.u-width-0 {
    width: 0 !important
}

.u-width-1 {
    width: 8.33333% !important
}

.u-width-2 {
    width: 16.66667% !important
}

.u-width-3 {
    width: 25% !important
}

.u-width-4 {
    width: 33.33333% !important
}

.u-width-5 {
    width: 41.66667% !important
}

.u-width-6 {
    width: 50% !important
}

.u-width-7 {
    width: 58.33333% !important
}

.u-width-8 {
    width: 66.66667% !important
}

.u-width-9 {
    width: 75% !important
}

.u-width-10 {
    width: 83.33333% !important
}

.u-width-11 {
    width: 91.66667% !important
}

.u-width-12 {
    width: 100% !important
}

.u-width-1m {
    width: 1em !important
}

.u-width-2m {
    width: 2em !important
}

.u-width-3m {
    width: 3em !important
}

.u-width-4m {
    width: 4em !important
}

.u-width-5m {
    width: 5em !important
}

@media (min-width: 544px) {
    .u-width-0\@sm {
        width: 0 !important
    }

    .u-width-1\@sm {
        width: 8.33333% !important
    }

    .u-width-2\@sm {
        width: 16.66667% !important
    }

    .u-width-3\@sm {
        width: 25% !important
    }

    .u-width-4\@sm {
        width: 33.33333% !important
    }

    .u-width-5\@sm {
        width: 41.66667% !important
    }

    .u-width-6\@sm {
        width: 50% !important
    }

    .u-width-7\@sm {
        width: 58.33333% !important
    }

    .u-width-8\@sm {
        width: 66.66667% !important
    }

    .u-width-9\@sm {
        width: 75% !important
    }

    .u-width-10\@sm {
        width: 83.33333% !important
    }

    .u-width-11\@sm {
        width: 91.66667% !important
    }

    .u-width-12\@sm {
        width: 100% !important
    }

    .u-width-1m\@sm {
        width: 1em !important
    }

    .u-width-2m\@sm {
        width: 2em !important
    }

    .u-width-3m\@sm {
        width: 3em !important
    }

    .u-width-4m\@sm {
        width: 4em !important
    }

    .u-width-5m\@sm {
        width: 5em !important
    }
}

@media (min-width: 768px) {
    .u-width-0\@md {
        width: 0 !important
    }

    .u-width-1\@md {
        width: 8.33333% !important
    }

    .u-width-2\@md {
        width: 16.66667% !important
    }

    .u-width-3\@md {
        width: 25% !important
    }

    .u-width-4\@md {
        width: 33.33333% !important
    }

    .u-width-5\@md {
        width: 41.66667% !important
    }

    .u-width-6\@md {
        width: 50% !important
    }

    .u-width-7\@md {
        width: 58.33333% !important
    }

    .u-width-8\@md {
        width: 66.66667% !important
    }

    .u-width-9\@md {
        width: 75% !important
    }

    .u-width-10\@md {
        width: 83.33333% !important
    }

    .u-width-11\@md {
        width: 91.66667% !important
    }

    .u-width-12\@md {
        width: 100% !important
    }

    .u-width-1m\@md {
        width: 1em !important
    }

    .u-width-2m\@md {
        width: 2em !important
    }

    .u-width-3m\@md {
        width: 3em !important
    }

    .u-width-4m\@md {
        width: 4em !important
    }

    .u-width-5m\@md {
        width: 5em !important
    }
}

@media (min-width: 992px) {
    .u-width-0\@lg {
        width: 0 !important
    }

    .u-width-1\@lg {
        width: 8.33333% !important
    }

    .u-width-2\@lg {
        width: 16.66667% !important
    }

    .u-width-3\@lg {
        width: 25% !important
    }

    .u-width-4\@lg {
        width: 33.33333% !important
    }

    .u-width-5\@lg {
        width: 41.66667% !important
    }

    .u-width-6\@lg {
        width: 50% !important
    }

    .u-width-7\@lg {
        width: 58.33333% !important
    }

    .u-width-8\@lg {
        width: 66.66667% !important
    }

    .u-width-9\@lg {
        width: 75% !important
    }

    .u-width-10\@lg {
        width: 83.33333% !important
    }

    .u-width-11\@lg {
        width: 91.66667% !important
    }

    .u-width-12\@lg {
        width: 100% !important
    }

    .u-width-1m\@lg {
        width: 1em !important
    }

    .u-width-2m\@lg {
        width: 2em !important
    }

    .u-width-3m\@lg {
        width: 3em !important
    }

    .u-width-4m\@lg {
        width: 4em !important
    }

    .u-width-5m\@lg {
        width: 5em !important
    }
}

@media (min-width: 1200px) {
    .u-width-0\@xl {
        width: 0 !important
    }

    .u-width-1\@xl {
        width: 8.33333% !important
    }

    .u-width-2\@xl {
        width: 16.66667% !important
    }

    .u-width-3\@xl {
        width: 25% !important
    }

    .u-width-4\@xl {
        width: 33.33333% !important
    }

    .u-width-5\@xl {
        width: 41.66667% !important
    }

    .u-width-6\@xl {
        width: 50% !important
    }

    .u-width-7\@xl {
        width: 58.33333% !important
    }

    .u-width-8\@xl {
        width: 66.66667% !important
    }

    .u-width-9\@xl {
        width: 75% !important
    }

    .u-width-10\@xl {
        width: 83.33333% !important
    }

    .u-width-11\@xl {
        width: 91.66667% !important
    }

    .u-width-12\@xl {
        width: 100% !important
    }

    .u-width-1m\@xl {
        width: 1em !important
    }

    .u-width-2m\@xl {
        width: 2em !important
    }

    .u-width-3m\@xl {
        width: 3em !important
    }

    .u-width-4m\@xl {
        width: 4em !important
    }

    .u-width-5m\@xl {
        width: 5em !important
    }
}

.u-width-max-0 {
    max-width: 0 !important
}

.u-width-max-1 {
    max-width: 8.33333% !important
}

.u-width-max-2 {
    max-width: 16.66667% !important
}

.u-width-max-3 {
    max-width: 25% !important
}

.u-width-max-4 {
    max-width: 33.33333% !important
}

.u-width-max-5 {
    max-width: 41.66667% !important
}

.u-width-max-6 {
    max-width: 50% !important
}

.u-width-max-7 {
    max-width: 58.33333% !important
}

.u-width-max-8 {
    max-width: 66.66667% !important
}

.u-width-max-9 {
    max-width: 75% !important
}

.u-width-max-10 {
    max-width: 83.33333% !important
}

.u-width-max-11 {
    max-width: 91.66667% !important
}

.u-width-max-12 {
    max-width: 100% !important
}

.u-width-max-1m {
    max-width: 1em !important
}

.u-width-max-2m {
    max-width: 2em !important
}

.u-width-max-3m {
    max-width: 3em !important
}

.u-width-max-4m {
    max-width: 4em !important
}

.u-width-max-5m {
    max-width: 5em !important
}

@media (min-width: 544px) {
    .u-width-max-0\@sm {
        max-width: 0 !important
    }

    .u-width-max-1\@sm {
        max-width: 8.33333% !important
    }

    .u-width-max-2\@sm {
        max-width: 16.66667% !important
    }

    .u-width-max-3\@sm {
        max-width: 25% !important
    }

    .u-width-max-4\@sm {
        max-width: 33.33333% !important
    }

    .u-width-max-5\@sm {
        max-width: 41.66667% !important
    }

    .u-width-max-6\@sm {
        max-width: 50% !important
    }

    .u-width-max-7\@sm {
        max-width: 58.33333% !important
    }

    .u-width-max-8\@sm {
        max-width: 66.66667% !important
    }

    .u-width-max-9\@sm {
        max-width: 75% !important
    }

    .u-width-max-10\@sm {
        max-width: 83.33333% !important
    }

    .u-width-max-11\@sm {
        max-width: 91.66667% !important
    }

    .u-width-max-12\@sm {
        max-width: 100% !important
    }

    .u-width-max-1m\@sm {
        max-width: 1em !important
    }

    .u-width-max-2m\@sm {
        max-width: 2em !important
    }

    .u-width-max-3m\@sm {
        max-width: 3em !important
    }

    .u-width-max-4m\@sm {
        max-width: 4em !important
    }

    .u-width-max-5m\@sm {
        max-width: 5em !important
    }
}

@media (min-width: 768px) {
    .u-width-max-0\@md {
        max-width: 0 !important
    }

    .u-width-max-1\@md {
        max-width: 8.33333% !important
    }

    .u-width-max-2\@md {
        max-width: 16.66667% !important
    }

    .u-width-max-3\@md {
        max-width: 25% !important
    }

    .u-width-max-4\@md {
        max-width: 33.33333% !important
    }

    .u-width-max-5\@md {
        max-width: 41.66667% !important
    }

    .u-width-max-6\@md {
        max-width: 50% !important
    }

    .u-width-max-7\@md {
        max-width: 58.33333% !important
    }

    .u-width-max-8\@md {
        max-width: 66.66667% !important
    }

    .u-width-max-9\@md {
        max-width: 75% !important
    }

    .u-width-max-10\@md {
        max-width: 83.33333% !important
    }

    .u-width-max-11\@md {
        max-width: 91.66667% !important
    }

    .u-width-max-12\@md {
        max-width: 100% !important
    }

    .u-width-max-1m\@md {
        max-width: 1em !important
    }

    .u-width-max-2m\@md {
        max-width: 2em !important
    }

    .u-width-max-3m\@md {
        max-width: 3em !important
    }

    .u-width-max-4m\@md {
        max-width: 4em !important
    }

    .u-width-max-5m\@md {
        max-width: 5em !important
    }
}

@media (min-width: 992px) {
    .u-width-max-0\@lg {
        max-width: 0 !important
    }

    .u-width-max-1\@lg {
        max-width: 8.33333% !important
    }

    .u-width-max-2\@lg {
        max-width: 16.66667% !important
    }

    .u-width-max-3\@lg {
        max-width: 25% !important
    }

    .u-width-max-4\@lg {
        max-width: 33.33333% !important
    }

    .u-width-max-5\@lg {
        max-width: 41.66667% !important
    }

    .u-width-max-6\@lg {
        max-width: 50% !important
    }

    .u-width-max-7\@lg {
        max-width: 58.33333% !important
    }

    .u-width-max-8\@lg {
        max-width: 66.66667% !important
    }

    .u-width-max-9\@lg {
        max-width: 75% !important
    }

    .u-width-max-10\@lg {
        max-width: 83.33333% !important
    }

    .u-width-max-11\@lg {
        max-width: 91.66667% !important
    }

    .u-width-max-12\@lg {
        max-width: 100% !important
    }

    .u-width-max-1m\@lg {
        max-width: 1em !important
    }

    .u-width-max-2m\@lg {
        max-width: 2em !important
    }

    .u-width-max-3m\@lg {
        max-width: 3em !important
    }

    .u-width-max-4m\@lg {
        max-width: 4em !important
    }

    .u-width-max-5m\@lg {
        max-width: 5em !important
    }
}

@media (min-width: 1200px) {
    .u-width-max-0\@xl {
        max-width: 0 !important
    }

    .u-width-max-1\@xl {
        max-width: 8.33333% !important
    }

    .u-width-max-2\@xl {
        max-width: 16.66667% !important
    }

    .u-width-max-3\@xl {
        max-width: 25% !important
    }

    .u-width-max-4\@xl {
        max-width: 33.33333% !important
    }

    .u-width-max-5\@xl {
        max-width: 41.66667% !important
    }

    .u-width-max-6\@xl {
        max-width: 50% !important
    }

    .u-width-max-7\@xl {
        max-width: 58.33333% !important
    }

    .u-width-max-8\@xl {
        max-width: 66.66667% !important
    }

    .u-width-max-9\@xl {
        max-width: 75% !important
    }

    .u-width-max-10\@xl {
        max-width: 83.33333% !important
    }

    .u-width-max-11\@xl {
        max-width: 91.66667% !important
    }

    .u-width-max-12\@xl {
        max-width: 100% !important
    }

    .u-width-max-1m\@xl {
        max-width: 1em !important
    }

    .u-width-max-2m\@xl {
        max-width: 2em !important
    }

    .u-width-max-3m\@xl {
        max-width: 3em !important
    }

    .u-width-max-4m\@xl {
        max-width: 4em !important
    }

    .u-width-max-5m\@xl {
        max-width: 5em !important
    }
}

.u-zi-inherit {
    z-index: inherit !important
}

.u-zi-initial {
    z-index: initial !important
}

.u-zi-unset {
    z-index: unset !important
}

.u-zi-hidden {
    z-index: -1 !important
}

.u-zi-0 {
    z-index: 0 !important
}

.u-zi-1 {
    z-index: 1 !important
}

.u-zi-2 {
    z-index: 2 !important
}

.u-zi-3 {
    z-index: 3 !important
}

.u-zi-5 {
    z-index: 5 !important
}

.u-zi-10 {
    z-index: 10 !important
}

.u-zi-100 {
    z-index: 100 !important
}

.u-zi-200 {
    z-index: 200 !important
}

.u-zi-1000 {
    z-index: 1000 !important
}

.u-zi-max {
    z-index: 9999999 !important
}

.c-badge {
    position: relative;
    bottom: 1px
}

.c-browser {
    position: relative;
    overflow: hidden
}

.c-browser__screen {
    background-image: -webkit-linear-gradient(#fff 1%, #eef1f3 4%);
    background-image: linear-gradient(to, #eef1f3 4%);
    box-shadow: 0 30px 30px rgba(0, 0, 0, .2);
    border-radius: 4px;
    opacity: 0;
    overflow: hidden;
    padding-top: 26px;
    position: absolute;
    transition: opacity .3s linear;
    will-change: opacity
}

.c-browser__screen:before {
    color: #d6dde3;
    content: "...";
    display: block;
    font-family: georgia;
    font-size: 20px;
    font-weight: 700;
    left: 0;
    letter-spacing: 4px;
    line-height: 0;
    padding: 8px 0 20px 10px;
    position: absolute;
    right: 0;
    text-align: left;
    text-shadow: -1px -1px 0 #b4c0ca, 1px -1px 0 #b4c0ca, -1px 1px 0 #b4c0ca, 1px 1px 0 #b4c0ca;
    top: 0
}

.c-browser__screen--top {
    z-index: 100
}

.c-browser__screen--bottom {
    z-index: 90
}

.c-browser__image {
    width: 100%
}

.c-browser .c-browser__screen--bottom + .c-browser__screen--top {
    box-shadow: -20px 40px 40px rgba(0, 0, 0, .2)
}

.btn-navy {
    background: #1f5e89;
    border-color: #1f5e89;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
}

.c-button {
    letter-spacing: .5px;
    position: relative;
    text-decoration: none
}

.c-button:focus {
    text-decoration: none
}

.c-button--shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
}

.c-button--shadow:not([disabled]):not(.is-disabled):hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
}

.c-button--shadow:not([disabled]):not(.is-disabled):active {
    box-shadow: 0 0 0 transparent, inset 0 3px 5px rgba(0, 0, 0, .125)
}

.c-button--shadow:not([disabled]):not(.is-disabled):focus {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2)
}

.c-button--shadow:not([disabled]):not(.is-disabled):focus:active {
    box-shadow: 0 0 0 transparent, inset 0 3px 5px rgba(0, 0, 0, .125)
}

.c-card--link {
    border-color: #e3e8eb;
    display: block
}

.c-card--link:hover {
    border-color: #3197d6
}

.c-card--simple {
    background: 0 0;
    border: 1px solid #eee;
    box-shadow: none
}

.c-caret {
    border-top-width: 2px;
    border-top-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
    display: inline-block;
    position: relative;
    pointer-events: none;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    transition: right .15s;
    vertical-align: middle
}

.c-caret--up {
    transform: rotate(-45deg)
}

.c-caret--down {
    transform: rotate(135deg)
}

.c-caret--left {
    transform: rotate(-135deg)
}

.c-caret--1px {
    border-top-width: 2px;
    border-right-width: 2px
}

.c-crossfader {
    position: relative
}

.c-crossfader__item {
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: all 1.5s ease;
    visibility: hidden
}

.c-crossfader__item:first-child {
    position: relative
}

.c-crossfader__item.is-active {
    opacity: 1;
    visibility: visible
}

.dropdown-menu li {
    margin-bottom: 0;
    margin-top: 0
}

.header-content {
    margin-top: 6%
}

.header-title-small, .hero .header-title-small {
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    -webkit-font-smoothing: auto
}

.header-title-small:after, .hero .header-title-small:after {
    background: rgba(255, 255, 255, .4);
    bottom: -6px;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    width: 100%
}

.header-title-small.header-dark, .hero .header-title-small.header-dark {
    color: #C1CBD4
}

.header-title-small.header-dark:after, .hero .header-title-small.header-dark:after {
    background: #C1CBD4
}

.c-image {
    height: auto;
    max-width: 100%
}

.c-hero {
    padding: 3em 0;
    text-align: center
}

@media (min-width: 768px) {
    .c-hero {
        padding: 4.5em 0
    }
}

#hs-footer h4 {
    color: #4f5d6b
}

#hs-footer a {
    color: #93a1af
}

#hs-footer a:hover {
    color: #394956
}

#hs-footer p {
    font-size: 16px
}

#hs-footer .logo-svg {
    margin: -6px 0 11px;
    width: 120px;
    height: 24px
}

#hs-footer .logo-svg path, #hs-footer .logo-svg polygon, #hs-footer .logo-svg rect {
    fill: #72808e
}

#hs-footer .social a svg {
    position: relative;
    height: 16px;
    width: 18px
}

#hs-footer .social a.icon-facebook {
    color: #8d98a1;
    font-size: 21px;
    position: relative;
    top: 1px
}

.c-main-nav {
    border: none;
    position: relative;
    margin-bottom: 0;
    min-height: 50px;
    padding-top: 0;
    z-index: 10
}

@media (min-width: 768px) {
    .c-main-nav {
        margin-bottom: 20px;
        padding-top: 16px
    }
}

@media (min-width: 992px) {
    .c-main-nav {
        padding-top: 20px
    }
}

.c-main-nav a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none
}

.c-main-nav a:hover {
    color: #fff;
    text-decoration: none
}

@media (min-width: 768px) {
    .c-main-nav .bl-search {
        float: left;
        top: 2px
    }
}

.c-main-nav .btn-primary {
    background: 0 0;
    border: 1px solid #fff;
    color: #fff;
    height: 34px;
    line-height: 30px;
    padding: 0 12px !important
}

@-moz-document url-prefix() {
    .c-main-nav .btn-primary {
        line-height: 32px
    }
}

.c-main-nav .btn-primary::-moz-focus-inner {
    margin: 0;
    padding: 0
}

.c-main-nav .btn-primary:focus, .c-main-nav .btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: #3197d6 !important
}

.c-main-nav .dropdown-menu {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    opacity: 0;
    pointer-events: none;
    top: 30px
}

@media (min-width: 768px) {
    .c-main-nav .dropdown-menu {
        left: 10px;
        margin-left: 0;
        margin-right: 0
    }

    .c-main-nav .dropdown-menu.dropdown-menu-right {
        left: auto !important
    }
}

.c-main-nav .dropdown-menu > li > a {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 6px;
    padding-top: 6px
}

.c-main-nav .dropdown-menu .divider {
    margin: 9px 0 4px
}

.c-main-nav .open .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    top: 35px
}

@media (max-width: 767px) {
    .c-main-nav .open .dropdown-menu {
        border-radius: 0;
        border: 0;
        box-shadow: none;
        float: none;
        margin-bottom: 5px;
        position: static
    }
}

.c-main-nav .logo-svg {
    height: 30px;
    margin: 5px 25px 0 0;
    padding: 0;
    width: 152px
}

@media (min-width: 768px) {
    .c-main-nav .logo-svg {
        margin: 0
    }
}

.c-main-nav .c-list > li > a:not(.btn) {
    padding: 7px 18px;
    text-align: center
}

.c-main-nav .c-list li {
    padding: 0;
    position: relative
}

.c-main-nav .c-list a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased
}

.c-main-nav .c-list li.open > a {
    color: #fff
}

.c-main-nav .c-list li.active > a {
    color: #fff;
    font-weight: 500
}

.c-main-nav .navbar-brand {
    margin-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px
}

@media (min-width: 768px) and (max-width: 991px) {
    .c-main-nav .navbar-brand {
        height: 60px;
        margin-right: 10px;
        overflow: hidden;
        padding: 15px 0;
        /*width: 30px*/
    }
}

@media (min-width: 992px) {
    .c-main-nav .navbar-brand {
        margin-right: 10px
    }
}

@media (max-width: 767px) {
    .c-main-nav .navbar-collapse {
        border-bottom: 1px solid rgba(255, 255, 255, .55);
        border-top: 1px solid rgba(255, 255, 255, .55);
        margin-top: 0;
        max-height: none;
        overflow: hidden
    }
}

.c-main-nav .navbar-collapse .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
    margin: 0 auto 15px;
    width: 100%
}

.c-main-nav .navbar-nav {
    float: inherit;
    margin: 0
}

.c-main-nav .navbar-nav > li > .dropdown-menu {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.c-main-nav .navbar-nav .open .dropdown-menu {
    background-color: #fff
}

@media (max-width: 767px) {
    .c-main-nav .navbar-toggle {
        margin: 15px
    }
}

.c-main-nav .navbar-toggle span {
    background: #fff
}

.c-main-nav .nl-subscribe {
    display: none;
    margin-left: 12px;
    margin-right: 12px
}

@media (min-width: 768px) {
    .c-main-nav .nl-subscribe {
        margin-right: 0
    }
}

.c-main-nav .c-product-dropdown {
    min-width: 320px
}

.c-main-nav .c-product-dropdown > li h3 {
    font-weight: 500
}

.c-main-nav .c-product-dropdown > li.active a {
    background: #daf1ff
}

.c-main-nav .c-product-dropdown > li.active h3 {
    font-weight: 600
}

.c-main-nav .c-product-dropdown > li.active h3, .c-main-nav .c-product-dropdown > li.active p {
    color: #237ab3
}

.c-main-nav .c-product-dropdown > li.active svg path {
    fill: #fff;
    stroke: #237ab3
}

.c-main-nav .c-product-dropdown > li:last-child.active a {
    background: #3197d6
}

.c-main-nav .dropdown-menu.c-product-dropdown > li > a {
    white-space: normal
}

.c-main-nav .o-container {
    padding: 0
}

@media (min-width: 768px) {
    .c-main-nav .o-container {
        padding: 0 15px
    }
}

@media (min-width: 992px) {
    .c-main-nav .o-container {
        padding-left: 0;
        padding-right: 15px
    }
}

.c-main-nav--dark a {
    color: #93a1af
}

.c-main-nav--dark a:hover {
    color: #394956
}

.c-main-nav--dark .c-list a {
    font-weight: 400
}

.c-main-nav--dark .c-list > li.open > a {
    color: #394956
}

.c-main-nav--dark .c-list > li.active {
    font-weight: 500
}

.c-main-nav--dark .c-list > li.active > a {
    color: #394956
}

@media (max-width: 767px) {
    .c-main-nav--dark .navbar-collapse {
        border-bottom-color: rgba(0, 0, 0, .15);
        border-top-color: rgba(0, 0, 0, .15)
    }
}

.c-main-nav--dark .navbar-toggle span {
    background: #394956
}

.c-main-nav--dark .btn-primary {
    background: #3197d6;
    border: 1px solid #3197d6;
    color: #fff;
    -webkit-font-smoothing: auto !important
}

.c-main-nav--dark .btn-primary:focus, .c-main-nav--dark .btn-primary:hover {
    background: #237ab3;
    border-color: #237ab3;
    color: #fff
}

.popover {
    max-width: 150px
}

.c-info-popover {
    display: inline-block;
    height: 16px;
    position: relative;
    right: -3px;
    top: 3px;
    width: 16px
}

.c-info-popover circle, .c-info-popover path {
    fill: #c1cbd4
}

.c-info-popover:hover {
    cursor: help
}

.c-info-popover:hover circle, .c-info-popover:hover path {
    fill: #93a1af
}

.c-post-card {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    transition: opacity .8s ease-in-out;
    width: 100%;
    z-index: 1
}

.c-post-card__content {
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.c-post-card__content > * {
    max-width: 100%
}

.c-post-card__overlay {
    background-color: rgba(35, 78, 105, .5);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.c-post-card--wide {
    padding-bottom: calc(50% - 8px)
}

.c-post-card--gr {
    padding-bottom: 62.5%
}

.c-post-card--square {
    padding-bottom: 100%
}

.c-post-card--portrait {
    padding-bottom: 137%
}

@media (min-width: 544px) {
    .c-post-card--wide\@sm {
        padding-bottom: calc(50% - 8px)
    }

    .c-post-card--gr\@sm {
        padding-bottom: 62.5%
    }

    .c-post-card--square\@sm {
        padding-bottom: 100%
    }

    .c-post-card--portrait\@sm {
        padding-bottom: 137%
    }
}

@media (min-width: 768px) {
    .c-post-card--wide\@md {
        padding-bottom: calc(50% - 8px)
    }

    .c-post-card--gr\@md {
        padding-bottom: 62.5%
    }

    .c-post-card--square\@md {
        padding-bottom: 100%
    }

    .c-post-card--portrait\@md {
        padding-bottom: 137%
    }
}

@media (min-width: 992px) {
    .c-post-card--wide\@lg {
        padding-bottom: calc(50% - 8px)
    }

    .c-post-card--gr\@lg {
        padding-bottom: 62.5%
    }

    .c-post-card--square\@lg {
        padding-bottom: 100%
    }

    .c-post-card--portrait\@lg {
        padding-bottom: 137%
    }
}

@media (min-width: 1200px) {
    .c-post-card--wide\@xl {
        padding-bottom: calc(50% - 8px)
    }

    .c-post-card--gr\@xl {
        padding-bottom: 62.5%
    }

    .c-post-card--square\@xl {
        padding-bottom: 100%
    }

    .c-post-card--portrait\@xl {
        padding-bottom: 137%
    }
}

.screen-fade-out {
    position: relative
}

.screen-fade-out::after {
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%, #fff);
    bottom: -30px;
    content: "";
    display: block;
    height: 125px;
    left: -20px;
    position: absolute;
    right: -20px
}

.screen-fade-out.screen-fade-out-grey::after {
    background: linear-gradient(rgba(249, 250, 250, 0), #f9fafa 70%, #F9FAFA)
}

.c-tab-hilite__image {
    width: 100%
}

.c-tab-hilite__link {
    border-radius: 6px;
    color: #2a3b47;
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    padding: 1em;
    transition: all .3s ease-in-out
}

.c-tab-hilite__link.is-active {
    background: #f1f3f5
}

.c-tab-hilite__link:hover {
    color: #2a3b47;
    background: #f9fafa;
    text-decoration: none
}

.c-tab-hilite__link:active, .c-tab-hilite__link:focus {
    color: #2a3b47;
    background: #f1f3f5;
    text-decoration: none
}

@media (min-width: 768px) {
    .c-tab-hilite__link {
        font-size: 18px;
        padding: .75em 1em
    }
}

.c-tab-hilite__title {
    font-weight: 600;
    margin: 0 0 .5em
}

.c-tab-hilite__text {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    min-height: auto
}

@media (min-width: 768px) {
    .c-tab-hilite__text {
        min-height: 50px
    }
}

@media (min-width: 992px) {
    .c-tab-hilite__text {
        font-size: 16px;
        min-height: auto
    }
}

.c-tab-hilite__content {
    border-radius: 6px;
    border: 1px solid #d6dde3;
    margin: 0 auto;
    margin-top: 2em;
    padding: 3em .5em 2em;
    text-align: center
}

@media (min-width: 544px) {
    .c-tab-hilite__content {
        padding: 3em 1em
    }
}

@media (min-width: 768px) {
    .c-tab-hilite__content {
        padding: 3em 2em
    }
}

@media (min-width: 992px) {
    .c-tab-hilite__content {
        margin-top: 0
    }
}

.c-tab-hilite__tab-pane {
    position: relative
}

.c-tab-hilite__icon {
    -webkit-transform: translate(-50%, -50%) scale3d(.7, .7, .7);
    -moz-transform: translate(-50%, -50%) scale3d(.7, .7, .7);
    -ms-transform: translate(-50%, -50%) scale3d(.7, .7, .7);
    -o-transform: translate(-50%, -50%) scale3d(.7, .7, .7);
    transform: translate(-50%, -50%) scale3d(.7, .7, .7);
    -webkit-transition: all cubic-bezier(.4, .1, .1, 1) .3s;
    -o-transition: all cubic-bezier(.4, .1, .1, 1) .3s;
    transition: all cubic-bezier(.4, .1, .1, 1) .3s;
    background: #fff;
    border-radius: 100%;
    border: 1px solid #E3E8EB;
    box-shadow: 0 5px 17px 0 #F1F3F5;
    display: block;
    height: 64px;
    left: 50%;
    position: absolute;
    top: -42px;
    width: 64px
}

.c-tab-hilite__icon img {
    display: inline-block;
    padding: 17px;
    width: 100%
}

.c-tab-hilite__tab-pane.active.in .c-tab-hilite__icon {
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -moz-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -ms-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -o-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform: translate(-50%, -50%) scale3d(1, 1, 1)
}

.c-thumbnail > img, .c-thumbnail__image {
    min-height: 100%
}

.c-thumbnail--gr {
    padding-bottom: 62.5%
}

.c-thumbnail--rounded {
    border-radius: 3px;
    z-index: 1
}

.c-video-container {
    height: 0;
    margin-bottom: 3em;
    margin-top: 3em;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 0;
    position: relative;
    width: 100%
}

.c-video-container embed, .c-video-container iframe, .c-video-container object, .c-video-container__embed {
    height: 100%;
    left: 0;
    margin: 0 !important;
    position: absolute;
    top: 0;
    width: 100%
}

.o-col-fifth {
    width: 20%
}

@media (min-width: 544px) {
    .o-col-fifth\@sm {
        width: 20%
    }
}

@media (min-width: 768px) {
    .o-col-fifth\@md {
        width: 20%
    }
}

@media (min-width: 992px) {
    .o-col-fifth\@lg {
        width: 20%
    }
}

@media (min-width: 1200px) {
    .o-col-fifth\@xl {
        width: 20%
    }
}

.o-flexy__block {
    width: 100%;
    -webkit-flex: 1
}

.o-row--sm {
    margin-left: -10px;
    margin-right: -10px
}

.o-row--sm > [class*=o-col] {
    padding-left: 10px;
    padding-right: 10px
}

.o-row--0 {
    margin-left: 0;
    margin-right: 0
}

.o-row--0 > [class*=o-col] {
    padding-left: 0;
    padding-right: 0
}

.o-row--2 {
    margin-left: -8px !important;
    margin-right: -8px !important
}

.o-row--2 > [class*=o-col] {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.t-shadow-blue {
    box-shadow: 0 1px 4px rgba(165, 178, 189, .9), 0 4px 15px rgba(193, 203, 212, .2), 0 10px 30px rgba(165, 178, 189, .4) !important
}

.u-hover-fade {
    -webkit-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    transition: opacity .2s ease;
    opacity: 1
}

.u-hover-fade:hover {
    opacity: .6
}

.u-text-no-underline {
    text-decoration: none !important
}

.u-transition {
    transition: all .2s ease-in-out
}

.u-transition-within * {
    transition: all .2s ease-in-out
}

.can-fade {
    display: none
}

.can-fade.is-fade, .can-fade.show {
    animation-name: fade-in-from-none;
    animation-duration: .5s;
    animation-timing-function: ease;
    display: block
}

.can-fade--slow .can-fade.is-fade {
    animation-duration: 1s
}

.can-fade--slow .can-fade.show {
    animation-duration: 1s
}

.can-fade--slower .can-fade.is-fade {
    animation-duration: 2s
}

.can-fade--slower .can-fade.show {
    animation-duration: 2s
}

@keyframes fade-in-from-none {
    0% {
        display: none;
        opacity: 0
    }
    0.1% {
        display: block;
        opacity: 0
    }
    100% {
        display: block;
        opacity: 1
    }
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_Bd.eot);
    src: url(../fonts/AktivGrotesk_W_Bd.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_Bd.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_Bd.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_BdIt.eot);
    src: url(../fonts/AktivGrotesk_W_BdIt.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_BdIt.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_BdIt.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_Md.eot);
    src: url(../fonts/AktivGrotesk_W_Md.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_Md.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_Md.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_MdIt.eot);
    src: url(../fonts/AktivGrotesk_W_MdIt.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_MdIt.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_MdIt.woff) format("woff");
    font-family: 'sofia-pro-soft';
    font-weight: 500;
    font-style: italic;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_Rg.eot);
    src: url(../fonts/AktivGrotesk_W_Rg.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_Rg.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_Rg.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_It.eot);
    src: url(../fonts/AktivGrotesk_W_It.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_It.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_It.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_Lt.eot);
    src: url(../fonts/AktivGrotesk_W_Lt.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_Lt.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_Lt.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-stretch: normal
}

@font-face {
    font-family: 'sofia-pro-soft';
    src: url(../fonts/AktivGrotesk_W_LtIt.eot);
    src: url(../fonts/AktivGrotesk_W_LtIt.eot) format("embedded-opentype"), url(../fonts/AktivGrotesk_W_LtIt.woff2) format("woff2"), url(../fonts/AktivGrotesk_W_LtIt.woff) format("woff");
    font-weight: 300;
    font-style: italic;
    font-stretch: normal
}

.btn-trans {
    color: #fff;
    background-color: transparent;
    border-color: #fff
}

.btn-trans.active, .btn-trans:active, .btn-trans:focus, .btn-trans:hover, .open > .dropdown-toggle .btn-trans {
    color: #fff;
    background-color: transparent;
    border-color: #e0e0e0
}

.btn-trans.active, .btn-trans:active, .open > .dropdown-toggle .btn-trans {
    background-image: none
}

.btn-trans.disabled, .btn-trans.disabled.active, .btn-trans.disabled:active, .btn-trans.disabled:focus, .btn-trans.disabled:hover, .btn-trans[disabled], .btn-trans[disabled].active, .btn-trans[disabled]:active, .btn-trans[disabled]:focus, .btn-trans[disabled]:hover, fieldset[disabled] .btn-trans, fieldset[disabled] .btn-trans.active, fieldset[disabled] .btn-trans:active, fieldset[disabled] .btn-trans:focus, fieldset[disabled] .btn-trans:hover {
    background-color: transparent;
    border-color: #fff
}

.btn-trans .badge {
    color: transparent;
    background-color: #fff
}

.btn-trans-dk {
    color: #9098a0;
    background-color: transparent;
    border-color: #b9bec3
}

.btn-trans-dk.active, .btn-trans-dk:active, .btn-trans-dk:focus, .btn-trans-dk:hover, .open > .dropdown-toggle .btn-trans-dk {
    color: #9098a0;
    background-color: transparent;
    border-color: #989fa7
}

.btn-trans-dk.active, .btn-trans-dk:active, .open > .dropdown-toggle .btn-trans-dk {
    background-image: none
}

.btn-trans-dk.disabled, .btn-trans-dk.disabled.active, .btn-trans-dk.disabled:active, .btn-trans-dk.disabled:focus, .btn-trans-dk.disabled:hover, .btn-trans-dk[disabled], .btn-trans-dk[disabled].active, .btn-trans-dk[disabled]:active, .btn-trans-dk[disabled]:focus, .btn-trans-dk[disabled]:hover, fieldset[disabled] .btn-trans-dk, fieldset[disabled] .btn-trans-dk.active, fieldset[disabled] .btn-trans-dk:active, fieldset[disabled] .btn-trans-dk:focus, fieldset[disabled] .btn-trans-dk:hover {
    background-color: transparent;
    border-color: #b9bec3
}

.btn-trans-dk .badge {
    color: transparent;
    background-color: #9098a0
}

.btn {
    padding: 13px 34px;
    font-size: 14.5px;
    line-height: 1.42857;
    border-radius: 4px;
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif
}

.btn-sm {
    padding: 7px 13px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.icon-logo:before {
    content: "\e676"
}

.icon-airplane:before {
    content: "\e60c"
}

.icon-book:before {
    content: "\e600"
}

.icon-checkmark:before {
    content: "\e606"
}

.icon-checkmark-hand:before {
    content: "\e622"
}

.icon-compass:before {
    content: "\e61f"
}

.icon-cross:before {
    content: "\e604"
}

.icon-email:before {
    content: "\e655"
}

.icon-export:before {
    content: "\e605"
}

.icon-heart:before {
    content: "\e60a"
}

.icon-location:before {
    content: "\e609"
}

.icon-trophy:before {
    content: "\e607"
}

.icon-screen:before {
    content: "\e608"
}

.icon-search:before {
    content: "\e60b"
}

.icon-user:before {
    content: "\e60d"
}

.icon-reddit:before {
    content: "\e901"
}

.icon-stumbleupon:before {
    content: "\e900"
}

.icon-twitter:before {
    content: "\e601"
}

.icon-facebook:before {
    content: "\e602"
}

.icon-googleplus:before, .icon-gplus:before {
    content: "\e603"
}

a:hover {
    text-decoration: none
}

a:focus {
    outline: 0 !important
}

cite {
    font-style: normal
}

#resources #feature-content .resource span, #video p, .all-caps, .all-caps-title, .careers .caps, .compare.help-desk-system .hero h1, .get-help .s-free-class .event h3 > span, .hs-love p, .online-retailers .hero .watch a, .online-services .hero .watch a, .product-section .learn, .product-section h3 > span, .section-trust h3, .software .headline h1 span, .text-link, .why-help-scout .caps {
    text-transform: uppercase;
    letter-spacing: .5px
}

.all-caps-title {
    font-weight: 300
}

.form-control:focus {
    border: 1px solid #66afe9;
    box-shadow: none !important
}

.btn {
    letter-spacing: .5px;
    position: relative
}

.btn-trans {
    border-radius: 5px
}

.col-lg-5ths, .col-md-5ths, .col-sm-5ths, .col-xs-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col-xs-5ths {
    width: 20%;
    float: left
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left
    }
}

.customer-story h4 .story-logo, .customer-story p, .partner-logo, .replace, .vertical .hero .logo {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden
}

.popover-content {
    color: #333;
    font-size: 12px
}

.modal {
    overflow-y: auto
}

.modal-backdrop {
    background-color: #143d57
}

.modal-backdrop.in {
    opacity: .9
}

.modal.img .modal-body {
    padding: 0
}

.modal.img .close {
    color: #fff;
    font-weight: 400;
    opacity: .8;
    position: absolute;
    right: -21px;
    top: -25px;
    text-shadow: none
}

.modal.img .close:hover {
    opacity: 1
}

.modal.img .close:focus {
    outline: 0
}

.modal.img img {
    max-width: 100%
}

.help-block {
    font-size: 12px;
    font-style: italic
}

.container-filled {
    background: #fff
}

.caret.up {
    border-top: 0;
    border-bottom: 4px solid
}

#bodyWrap {
    background: #fff;
    margin: 0 auto;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0
}

#bodyWrap.full {
    max-width: 100%
}

.container-fluid {
    max-width: 1050px
}

.content-featured, .hero {
    background: #3197d6;
    position: relative;
    text-align: center
}

.content-featured h1, .content-featured h2, .hero h1, .hero h2 {
    -webkit-transition: font-size .3s ease-out;
    -o-transition: font-size .3s ease-out;
    transition: font-size .3s ease-out
}

.content-featured h1, .hero h1 {
    color: #fff;
    font-size: 2.125em;
    -webkit-font-smoothing: antialiased
}

@media (min-width: 544px) {
    .content-featured h1, .hero h1 {
        font-size: 2.5em
    }
}

.content-featured h2, .hero h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    margin: 20px auto 2.25em;
    -webkit-transition: margin .3s ease-out;
    -o-transition: margin .3s ease-out;
    transition: margin .3s ease-out;
    -webkit-font-smoothing: antialiased
}

.content-featured strong, .hero strong {
    color: #fff
}

.content-featured h1 {
    margin-bottom: 20px
}

h1, h2, h3 {
    font-style: normal;
    font-weight: 400;
    letter-spacing: .2px
}

h1 {
    line-height: 1.3em
}

h2 {
    line-height: 1.5em
}

h3 {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: .75em
}

h4 {
    font-weight: 600;
    line-height: 1.4em
}

h5 {
    font-weight: 600
}

h5, p {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6em
}

h1, h2, h3, h4, h5 {
    color: #333
}

hgroup {
    text-align: center
}

p {
    color: #72808E;
    margin-bottom: 1.6em
}

a, a > strong {
    -webkit-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

a > strong {
    color: #3197D6
}

a:hover > strong {
    color: #237bb1
}

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: 400
}

.center-text {
    text-align: center
}

.text-link {
    font-size: 12.5px;
    font-weight: 600
}

.text-link:hover.link-caret-right:after {
    right: -3px !important
}

.text-link:focus {
    text-decoration: none
}

.text-link.no-caps {
    letter-spacing: 0;
    text-transform: none
}

.text-link-padded {
    padding: 13px 34px
}

@media (max-width: 992px) {
    .text-link-padded {
        display: block
    }
}

.link-caret-down:after, .link-caret-left:after, .link-caret-right:after, .link-caret-up:after {
    border-top-width: 2px;
    border-top-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
    content: "";
    display: inline-block;
    margin-left: .3em;
    position: relative;
    pointer-events: none;
    width: 6px;
    height: 6px;
    transition: right .15s;
    vertical-align: middle
}

.link-caret-left:after, .link-caret-right:after {
    right: 0;
    top: -2px
}

.link-caret-right:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.link-caret-down:after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.link-caret-down:after, .link-caret-up:after {
    left: 2px;
    top: -2px;
    vertical-align: middle
}

.bullet-list-item, .careers .c-perks__list li, .features.help-desk .content-list h4 {
    position: relative;
    display: inline-block
}

.bullet-list-item:before, .careers .c-perks__list li:before, .features.help-desk .content-list h4:before {
    border: 2px solid #3197d6;
    border-radius: 100%;
    content: "";
    display: inline-block;
    left: 5px;
    position: absolute;
    width: 8px;
    height: 8px;
    top: 6px
}

.action-callout {
    position: relative
}

.action-callout:before {
    border-radius: inherit;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.action-callout:before {
    border: 1px solid #d8dee0;
    transition: border .2s
}

.action-callout:hover {
    background: #fff
}

.action-callout:hover:before {
    border-color: #3197D6
}

.action-callout.link-caret-right:after {
    position: absolute;
    right: 5%;
    width: 10px;
    height: 10px;
    top: 46%;
    transition: right .15s
}

.action-callout:hover.link-caret-right:after {
    right: 4%
}

.action-callout p:last-child {
    margin-bottom: 0
}

.action-callout .action-callout-link {
    color: #3197D6
}

.action-callout-white {
    color: #fff
}

.action-callout-white:before {
    border: 1px solid #fff
}

.action-callout-white:after {
    color: #fff
}

.action-callout-white span {
    color: #fff;
    font-weight: 700
}

.action-callout-white:active, .action-callout-white:focus, .action-callout-white:hover {
    background: #7F83E4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.action-callout-white:active:before, .action-callout-white:focus:before, .action-callout-white:hover:before {
    border: 1px solid #fff
}

.content-callout {
    border-radius: 4px;
    display: block;
    margin: 3em 0;
    padding: 8% 15% 8% 8%
}

@media (min-width: 992px) {
    .content-callout {
        padding: 6% 15%
    }
}

@media (min-width: 768px) {
    .content-callout {
        text-align: center
    }
}

blockquote, blockquote p {
    border-left: 0;
    font-style: italic;
    line-height: 1.6em;
    padding: 0
}

blockquote small {
    margin-top: 1em
}

hr {
    border-top-color: #e0e0e0
}

strong {
    font-weight: 600
}

figure img {
    width: 100%
}

.mobile-hide {
    display: none
}

.hs-tabs-nav {
    border-bottom: 0;
    font-size: 0;
    margin-bottom: 0;
    padding: 15px
}

@media (min-width: 680px) {
    .hs-tabs-nav {
        padding: 0
    }
}

.hs-tabs-nav > li {
    display: block
}

@media (min-width: 680px) {
    .hs-tabs-nav > li {
        display: inline-block
    }
}

.hs-tabs-nav > li > a {
    border-radius: 5px;
    color: #93A1AF;
    display: block;
    font-size: 16px;
    padding: .8em 0
}

@media (min-width: 680px) {
    .hs-tabs-nav > li > a {
        background: 0 0;
        border-bottom: 3px solid transparent;
        border-radius: 0
    }
}

@media (min-width: 680px) {
    .hs-tabs-nav > li > a {
        margin: 0 15px;
        padding: 1.5em 1em 1.2em
    }
}

.hs-tabs-nav > li > a:hover {
    color: #394956
}

@media (min-width: 680px) {
    .hs-tabs-nav > li > a:hover {
        border-bottom-color: #E4E9EC
    }
}

.hs-tabs-nav > li > a:focus {
    text-decoration: none
}

.hs-tabs-nav > li.active > a {
    color: #fff
}

@media (max-width: 680px) {
    .hs-tabs-nav > li.active > a {
        background: #3197D6
    }
}

@media (min-width: 680px) {
    .hs-tabs-nav > li.active > a {
        border-bottom-color: #3197D6;
        color: #394956
    }
}

.hs-tabs-container {
    background: #F9FAFA;
    border-bottom: 1px solid #E4E9EC
}

.logo-mark-svg {
    margin: 0;
    width: 45px;
    height: 40px
}

.generic .hero {
    padding-bottom: 1.5em
}

.generic .hero h2 {
    padding: 0 1.25em
}

.generic .hero h2 > strong {
    color: rgba(255, 255, 255, .85)
}

.dropdown-header {
    color: #555;
    font-weight: 600;
    text-align: left
}

.lowercase {
    text-transform: lowercase !important
}

.screenshot, .screenshot-wrap {
    border-radius: .3em .3em 0 0;
    margin: 0 auto
}

.screenshot-wrap {
    background: #e6e8eb;
    border-top: 1px solid rgba(255, 255, 255, .5);
    margin: 0 auto;
    overflow: hidden;
    position: relative
}

.screenshot-wrap img {
    padding-top: 3%
}

.screenshot img {
    border-radius: .3em .3em 0 0
}

.convo-screen, .docs-screen {
    max-width: 778px
}

.screen-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08)
}

.screen-shadow-short {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08)
}

.browser, .browser-bar {
    border: 1px solid #d8dee0;
    overflow: hidden;
    position: relative
}

.browser-bar:before, .browser:before {
    color: #E6EAEE;
    content: "...";
    display: block;
    font-family: georgia;
    font-size: 1em;
    font-weight: 700;
    padding: 4px 0 20px 5px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0;
    letter-spacing: 4px;
    right: 0;
    text-align: left;
    text-shadow: -1px -1px 0 #d8dee0, 1px -1px 0 #d8dee0, -1px 1px 0 #d8dee0, 1px 1px 0 #d8dee0
}

@media (min-width: 768px) {
    .browser-bar:before, .browser:before {
        font-size: 2em;
        padding: 6px 0 20px 10px
    }
}

.browser-bar.header-browser, .browser.header-browser {
    border: 0;
    border-radius: .4em .4em 0 0;
    max-width: 778px;
    margin: 0 auto;
    margin-left: 30px
}

@media (max-width: 768px) {
    .browser-bar.header-browser, .browser.header-browser {
        margin: 0 auto
    }
}

.browser-bar.header-browser img, .browser.header-browser img {
    width: 100%;
    height: auto
}

.headless-browser {
    border-radius: 5px;
    border: 1px solid #d8dee0;
    overflow: hidden;
    position: relative
}

.headless-browser img {
    width: 100%;
    height: auto
}

.zoomer {
    -webkit-transition: all .4s cubic-bezier(.4, .1, .1, 1);
    -o-transition: all .4s cubic-bezier(.4, .1, .1, 1);
    transition: all .4s cubic-bezier(.4, .1, .1, 1);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    opacity: 0;
    display: none;
    border-radius: 100%;
    border: 2px solid #A5B2BD;
    box-shadow: 0 14px 20px 0 rgba(0, 0, 0, .14);
    height: 254px;
    overflow: hidden;
    position: absolute;
    width: 254px;
    z-index: 10
}

@media (min-width: 992px) {
    .zoomer {
        display: block
    }
}

.zoomer:before {
    border-radius: 100%;
    bottom: 0;
    box-shadow: inset 0 0 0 6px rgba(193, 203, 211, .15);
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.zoomer img {
    width: 100%;
    height: auto
}

.zoomer.zoomer-center-left {
    left: -40px;
    top: 50%;
    margin-top: -125px
}

.zoomer.shown {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.browser, .browser-bar {
    border-radius: .3em
}

@media (min-width: 768px) {
    .browser, .browser-bar {
        border-radius: .4em
    }
}

.browser {
    padding-top: 26px
}

.browser:before {
    border-bottom: 1px solid #dfe4e6
}

.browser-bar {
    background: linear-gradient(#fff 1%, #eef1f3 4%)
}

.browser-bar img {
    padding-top: 15px;
    width: auto
}

@media (min-width: 768px) {
    .browser-bar img {
        padding-top: 26px
    }
}

.product-section {
    overflow: hidden;
    padding: 10% 0;
    position: relative;
    text-align: left
}

@media (min-width: 768px) and (max-width: 991px) {
    .product-section {
        padding: 10% 15px
    }
}

.product-section:last-child {
    border-bottom: 0
}

.product-section h3:after {
    background: #dadcdf;
    border-radius: 4px;
    content: "";
    display: block;
    margin-top: 20px;
    width: 50px;
    height: 3px
}

.product-section h3 > span {
    color: #bec2c8;
    display: block;
    font-size: 12px;
    margin-bottom: 15px
}

@media (min-width: 768px) {
    .product-section h3 {
        margin-bottom: 1em
    }
}

.product-section .icon {
    display: inline;
    padding-right: 10px;
    position: relative;
    top: 7px
}

.product-section .icon svg {
    width: 25px
}

.product-section .learn {
    font-size: 13px
}

.image-side {
    display: block;
    left: auto;
    margin-right: 0;
    margin-left: 0;
    min-height: 0;
    position: relative;
    right: auto;
    width: 100%;
    height: 17em;
    top: 3em
}

.image-side .image {
    width: 100%;
    height: 100%
}

@media (min-width: 768px) {
    .image-side {
        position: absolute
    }

    .image-side.right {
        margin-right: -765px;
        right: 50%
    }

    .image-side.left {
        margin-left: -785px;
        left: 50%
    }
}

@media (max-width: 767px) {
    .image-side {
        margin: 0 auto;
        width: 95%
    }
}

.hs-love {
    text-align: center
}

.hs-love .testi {
    margin: 3em 0
}

.hs-love .testi > img {
    border-radius: 100%;
    margin: 0 auto 1.25em;
    width: 95px
}

.hs-love p {
    font-size: 12px
}

.hs-love blockquote {
    border-left: 0;
    color: #868f9a;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5em;
    margin: 2em auto 0
}

.hs-love blockquote:before {
    background: #dadcdf;
    content: "";
    display: block;
    margin: auto;
    position: relative;
    width: 80px;
    height: 2px;
    top: -22px
}

.next {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 3px;
    position: relative;
    top: 2px
}

.next, polygon {
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.get-started {
    padding: 6em 0;
    text-align: center
}

.get-started h3 {
    margin: 0 0 10px
}

.get-started p {
    line-height: 1.8;
    margin-bottom: 2em
}

.get-started .cta-one {
    margin-bottom: 1.5em
}

.compare .icon-play, .features .icon-play {
    left: 2px;
    top: 3px;
    width: 20px
}

.compare .play, .features .play {
    -webkit-transition: background .25s ease;
    -o-transition: background .25s ease;
    transition: background .25s ease
}

.svg {
    border-radius: 100%;
    padding: 12px;
    width: 50px;
    height: 50px
}

.svg.live-chat, .svg.notes, .svg.phone, .svg.replies, .svg.tags {
    margin: 0 auto 1em
}

.features, .partner, .remarket {
    text-align: center
}

.features .overflow {
    overflow: hidden
}

.features h3 {
    margin-top: 0
}

.features h4 {
    font-size: 16px
}

.features .hero .screenshot-wrap {
    box-shadow: 0 25px 60px rgba(0, 0, 0, .55)
}

.features .hero-vid .play {
    width: 85px;
    height: 85px;
    background: rgba(86, 154, 191, .9);
    border: 4px solid #fff;
    border-radius: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 26.5%
}

.features .hero-vid .play .icon-play {
    width: 35.5%
}

.features .hero-vid:hover .play {
    background: #569abf
}

.features .fader {
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%, #fff);
    bottom: -12px;
    display: block;
    height: 105px;
    left: 0;
    position: absolute;
    right: 0
}

.relationship-history, .section-same-page, .section-workflows {
    padding: 3em 0
}

.customer-story {
    display: block;
    height: 360px;
    overflow: hidden;
    position: relative;
    text-align: center
}

.customer-story.active:hover {
    cursor: default
}

.customer-story .overlay {
    background: 0 0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.customer-story .overlay, .customer-story .play-video, .customer-story .story {
    -webkit-transition: background .25s ease;
    -o-transition: background .25s ease;
    transition: background .25s ease
}

.customer-story .story {
    background: rgba(255, 255, 255, .9);
    display: block;
    height: 360px;
    padding: 3em 2em
}

.customer-story h4 {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 2em 0
}

.customer-story h4 .story-logo {
    display: block;
    margin: 1em 0;
    background-position: center, center
}

.customer-story .play-video {
    background: #c2c2c2;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    padding: 16px;
    position: relative;
    width: 65px;
    height: 65px
}

.customer-story .play {
    width: 33px;
    height: 25px
}

.customer-story:hover > .overlay {
    background: rgba(0, 0, 0, .15)
}

.customer-story:hover .play-video {
    background: #3197D6
}

.customer-story.active:hover > .overlay {
    background: 0 0
}

.customer-story.tattly .story-logo {
    padding: 20px 0
}

.customer-story.tattly .play-video {
    margin-top: -7px
}

.customer-story p {
    width: 160px;
    height: 28px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAA2CAYAAAC2nEDCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAClpJREFUeNrsnc9rFVcUxyfBUBWlKkoNKNSFUgsWBV2IdCFdiC0uuyl205KFurB/RkGUoqu2S0FwUVoQ2pUI2QTqQlFoSl1YMJKAooK/Ukx/zDedE05O7p25c+dH3pv5fuCavLz3Zu49597vPffXODI5OflbkiR7E0II6RfTo+k/B9P0D21BCOkR0LyDEMBXafqR9iCE9Aho3qvR7MV52oMQ0iMWNU8E8Nc0TdEmhJAeMJVp3pIA/p2mi7QLIaQHXMw0b0kAwU9pekjbEEI6zMNM6xIrgPNpukT7EEI6zKVM61YIIPg+TS9pI0JIB3mZaVziE8AnabpMOxFCOsjlTOO8Agi+oZ0IIR1khba5BPCPNF2jrQghHeJapm2FAvhvms7RXoSQDnEu07ZCAQTYKHibNiOEdIDbieegh08AFxIejyOEdIPzmaYFCyDAYeEZ2o4QMsTMJDkPe8kTwBV7ZgghZMjI3ds8WvDl7xK1a3q1WbNmTbJ27Vq6lDYi9HcI85mG+e1XcIG5NF1J0xerVYLt27cnmzdvTjZs2LDM0QsLC8mzZ8+SBw8eJC9evHBWjAMHDiy9xufm5ua899m1a1eydevWpdc3b970fhb52LlzZ7Jp06alPCE/8/Pzi3manZ1d/F2D/O/dG/fgbVxvZsY/G7Fjx45k48aNy2yE/MAuSCg7XofYGuXS3L9/P3n8+HHhd3Hfffv2Lfsbvofvh9zHh8tvvu+jjOKHp0+fBuU7hBh/7969e/HzMeTVvTr9fejQIeffpWzPnz9ftL3rWrj3+Pj44v3xOz7n8nVeG5uenna23Rq5kmlYtACCc6shgDBsXiWCwMGYSDCkrey2Z8TrOnpSND7ky/V9VAQkfGZqaspZphhQ2X02gqjinq78wHZIyA9shMaax7p161bkEZU8REikMdg8hN4nzy8x30eZ0bju3btXqZHF+hv5i/U3vmcFtQl/5+UP90DbgvC7xA35w/viH4iyqyPQ18NnBOStYfET7cplNOAiv6fpepviByciegvtQUN6uzqAE12Nwd7fVwmqdAY+G9nGIL23bRyIznQFLOOLkIase/ZBQaLuos5v0PztEri2/O0SVlzHXgv3taKICC8v+tOgY2qY65l2JVUjQPB1mj5qq+Ki0ulKK2E9fsLZEnajd8LPFnqSReywS3pZVAbkCZUUn3E1CPzt7t27zsjJDgtCBN3aSIabcm/kB9fVFQ+/x/S8uE7eEDxUJH3ALr4yh4gLhozyfakX0nkiXyh3TIOr4m/4wgovXutpEJnCCSlz0/7WUZ6MrlA2uSeuhXvqvOE7qL8iyvgObGIjT4lMBdSlujsNj2YldQngjTTdSdMHTecaPY1uTDA6Kq9uIDAeEt6D0duMALXz9dAQ+cHfkFxiIHOWFsxvaqSBlbERKpRriCIVTTc6VGSXEBcNb/MEEO9XAQ20ig9l7k/sh4T5LbFR7FxcFX+HiI7MIZZtE035W2yIn7gWfuoIGPawwoW2qefacb9bt255oz9c0yX6NXMn06xCRgMviKenXmg61+htdK8LY1nxs9Q10R07FI2NWuqyEe6VN/kM+2gb2d44ZFpBop28udi2pyOK0GVG/mOGwX3yd0jbcs1FQ+j1IpXMHeo5VN2RIO8t1JELmWbVJoDghzTNNh1h6YoauprVFrpXh2NXY97L2ggTz0XYHtc1x+Sq/Nr2vihP2wDRTAtDm+gokf6uxps3b5x/t6ImEZ8VbyuWDTGbaVUQZQQQteHbNiOskOFBmzx69GjZaww1EP632TBibGSHmL5VZde8kI4kXFGUFkZrn1AkStGpSqO1UWnsHHHf/J3XueVFunZYizxj2I5OQ+e/hYWPJNOoYIeXHRc8aTLn1lGDFk1gXgRzdnpIISuNslDT9JA81kaopCJgoUM7CICs/omo2OGOCBWuj7LHzAe69keiXEX74VzCJ4sguowhURP9vVx0ZRFE3zevrLCV3gplF5BQb1parCylUWUFsNH9gNZRgzT8FTChjBDfbguQhoEeGj1dU+IdayNZPS/TIGRjrYgcKrgWwG3btnmHzHWUEw045JqHDx/OHcpXGXb1xd+I1pB8YhoSveEzshlejxZcW2YaBBoV/H8blRkCo5btbzLnrv1MgwiciY2vslJmh3OoBE3lPdZG+nNlGquOnuxpHN1gYqMsEVpZvdWpig2l0WHrCv0dL87wAzqBkKE3PuOKEluey9+faVXtEeDZpnP++vXrFb1fW3v8YhsYnCtHs/SQA6+b6PVibaSFq0yDQIVGBCRlQxSIculTALheFT/l7QMMFVB7kgdRX97WHfp7ZfkkapRySeRXpr5I3dD3rtMPJbRqqs4I8J00nWg619axscv3LsbGxhoTQjgYe590I64z73k2ClkssNtAcMazTPl07y+VWw9/q0R/dU1LwP66oWLI2oQPuupvdHQokxZxXMN1EqYoYrV7dleBE5lm1SaAn6dpfdO5tsbSvWxMRW1zOG0niZt6Qoe1Uciig52QLhutaYFDueyWkBa2NgT5285T2dMT9Hcx8KXu8ORs8ZCxPtOsWgQQNWiijVzL7notWnnnC+UzvpMXuvLk9dChe7zKbM1oquezNpLD+Hl51u/LfFvZeSBdHu2Tuhc/qoB86uGWHIOLpa/+tocPYMMhfOTWRBIwxRcigB+maU9bubabKuFMTDLbyojXcAyOPPnETVdKeZKGXhmD6OHaoZECPot9YHZ/kwhsHXvPYmyE/LsaupTPVu4YdBSobRW79892YnmpDJij036vsoG5r/62p03sGeYhYU+mXYXRXRFftT2UgfH13IM8CUOcYysjHo/kawxaHOXxWVUaqX5CiGviuI15MZeN5IkdsgnWniCQ4U1sQ5XFEJuPOvbB+Z5LJ1FdmbPLMhTWQgA7hZyxpr+XfxfzvNJ+5HFWq7CgUQVo140qESA2Px1vO9cwPiq975lorsrqazwh81OylysP331dFa/qM+iq2Aj5sac2RBSq7MR3HdwfhLm/EL/HTOb33d++oXBdx+pa4nimYdEC+GWaxlarEmNVKq8Xk+ggz9F4D3vBbMWR1U28h2sURTLIA/Lje5SPREM4vdCWMGgb+R7BJat7deTJRjmrvfpbNGwUm+hHRoVCfy8fCkt7GTIBHMs0zMvI5OSk7723kv8fKPjuoJRGel95HFYMaAT68UlV567k6b2DsBAgEYo04CbyZCONQSb0JAn9XdxmBvUhFwH8mab30vRXWQFE+PhzQgghw83Hafql7BD4LO1GCOkAXi3zCSCGvcdoN0JIBziWeKbyfAJ4ijYjhHSIU6ECGHyMhBBChgTncV6XAH6SpnHaixDSIcYzbcsVwBEOfwkhHR4Gj+QJILbLH6WdCCEd5GimcV4BPEMbEUI6zBmfAGKC8CTtQwjpMCcTtRiiBfDTNG2hfQghHWZLpnXLBBA/J2gbQkgPmBDtEwF8P01HaBdCSA84kmnekgCepk0IIT3itAggHpL2Ge1BCOkR0Ly1EMCraXqb9iCE9Aho3tX/BBgAxZoG1kL7rVkAAAAASUVORK5CYII=) no-repeat;
    background-size: contain;
    margin: 0 auto
}

.vid-container-main {
    display: none;
    padding-top: 3%
}

.vid-container {
    left: 0;
    margin: -9999px auto;
    max-width: 860px;
    opacity: 0;
    position: absolute;
    padding: 10px 30px;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 20
}

.vid-bg {
    background: rgba(0, 0, 0, .6);
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.hero .vid-close {
    padding: 4px;
    width: 28px;
    height: 28px
}

.hero .vid-close svg polygon {
    fill: rgba(0, 0, 0, .7)
}

.customer-story .vid-close {
    padding: 13px;
    width: 50px;
    height: 50px
}

.customer-story .vid-close svg polygon {
    fill: rgba(255, 255, 255, .7)
}

.vid-close {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    z-index: 100
}

.vid-close:hover {
    cursor: pointer
}

.vid-close:hover svg polygon {
    fill: #fff
}

.home-content > .vid-close {
    width: 28px;
    height: 28px
}

.home-content > .vid-close svg polygon {
    fill: rgba(255, 255, 255, .7)
}

#collaboration-features {
    text-align: left
}

@media (min-width: 768px) {
    #collaboration-features {
        text-align: center
    }
}

#collaboration-features #highlight-images div {
    position: absolute
}

#collaboration-features #highlight-images img {
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    transform: scale3d(.85, .85, .85)
}

#collaboration-features #highlight-images .reply-detail-one {
    left: 350px;
    top: -60px
}

#collaboration-features #highlight-images .reply-detail-two {
    left: 175px;
    top: -52px
}

#collaboration-features #highlight-images .reply-detail-three {
    left: 245px;
    top: 80px
}

#collaboration-features #highlight-images .reply-detail-four {
    bottom: -85px;
    left: 22px
}

#collaboration-features #highlight-images.detail-one div:first-child img {
    opacity: 1;
    transform: scale3d(1, 1, 1)
}

#collaboration-features #highlight-images.detail-two div:nth-child(2) img {
    opacity: 1;
    transform: scale3d(1, 1, 1)
}

#collaboration-features #highlight-images.detail-three div:nth-child(3) img {
    opacity: 1;
    transform: scale3d(1, 1, 1)
}

#collaboration-features #highlight-images.detail-four div:nth-child(4) img {
    opacity: 1;
    transform: scale3d(1, 1, 1)
}

#collaboration-features .collab-item-group {
    margin-bottom: 2em;
    text-align: left
}

#collaboration-features .collab-item-group h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px
}

#collaboration-features .collab-item-group p {
    font-size: 16px;
    margin-bottom: 0
}

#collaboration-features .collab-item {
    border-radius: 6px;
    padding: 1em 0
}

@media (min-width: 768px) {
    #collaboration-features .collab-item {
        margin-bottom: 1em;
        padding: 1.5em
    }

    #collaboration-features .collab-item.is-active {
        background: #F1F3F5
    }

    #collaboration-features .collab-item.is-active p {
        color: #394956
    }
}

#collaboration-features > .collaboration, #personal-touch {
    border-bottom: 1px solid #E3E8EB
}

#relationships {
    text-align: left
}

@media (min-width: 768px) {
    #relationships {
        text-align: center
    }
}

#relationships h4 {
    margin-top: 0
}

#relationships ul {
    text-align: left
}

@media (min-width: 991px) {
    #relationships ul {
        margin: 5em 0 0 20px
    }
}

#relationships ul > li {
    margin-bottom: 2.5em
}

@media (min-width: 991px) {
    #relationships ul > li {
        margin: 2.5em 0
    }
}

#relationships ul p {
    font-size: 16px;
    margin-bottom: 0
}

#smooch {
    background: #FBFBFC;
    border-bottom: 1px solid #d8dee0;
    border-top: 1px solid #d8dee0;
    padding: 3em 0 5em
}

#smooch .content {
    margin-top: 3.7em
}

#smooch h3 {
    position: relative
}

#smooch h3:before {
    content: "";
    display: block;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    top: -60px;
    width: 50px;
    height: 50px
}

.smooch-integration {
    text-align: left
}

.smooch-integration .hero {
    background: #6bb2dd
}

.smooch-integration .hero h2, .smooch-integration .hero strong {
    color: #eaf7fd
}

.smooch-integration .hero h2 {
    margin-bottom: 2em
}

@media (min-width: 992px) {
    .smooch-integration .hero h2 {
        margin-bottom: 3em
    }
}

.smooch-integration .in-sync h3, .smooch-integration .in-sync p, .smooch-integration .set-up h3, .smooch-integration .set-up p, .smooch-integration .smooch h3, .smooch-integration .smooch p {
    text-align: left
}

@media (max-width: 768px) {
    .smooch-integration .in-sync h3, .smooch-integration .in-sync p, .smooch-integration .set-up h3, .smooch-integration .set-up p, .smooch-integration .smooch h3, .smooch-integration .smooch p {
        padding: 0 10px
    }
}

.smooch-integration .in-sync, .smooch-integration .set-up {
    padding: 4em 0
}

@media (min-width: 992px) {
    .smooch-integration .in-sync, .smooch-integration .set-up {
        padding: 8em 0
    }
}

.smooch-integration .set-up h3 + p, .smooch-integration .smooch h3 + p {
    margin-bottom: 2.5em
}

.smooch-integration .in-sync figure {
    margin: 0 auto 2em;
    max-width: 230px
}

.smooch-integration .smooch {
    border-bottom: 1px solid #efecec;
    border-top: 1px solid #efecec;
    padding-bottom: 0;
    padding-top: 5em;
    text-align: center
}

.smooch-integration .smooch h3 {
    color: #fff
}

.smooch-integration .smooch p {
    color: #ead5e7
}

.smooch-integration .smooch .filter img {
    display: none
}

.smooch-integration .smooch .phone img {
    width: 90%
}

@media (max-width: 768px) {
    .smooch-integration .smooch .phone img {
        max-width: 325px
    }
}

@media (min-width: 768px) {
    .smooch-integration .smooch {
        padding-top: 5em
    }

    .smooch-integration .smooch h3, .smooch-integration .smooch p {
        padding-right: 5em
    }

    .smooch-integration .smooch .filter img {
        display: block
    }
}

@media (min-width: 992px) {
    .smooch-integration .smooch h3 {
        margin-top: 3em
    }
}

.smooch-integration .set-up {
    border-bottom: 1px solid #e8ebee;
    padding-bottom: 0
}

.smooch-integration .set-up .btn {
    float: left;
    margin-bottom: 4em
}

@media (max-width: 768px) {
    .smooch-integration .set-up .btn {
        margin-left: 10px
    }
}

.smooch-integration .set-up img {
    display: none
}

@media (min-width: 768px) {
    .smooch-integration .set-up img {
        display: block
    }
}

@media (min-width: 992px) {
    .smooch-integration .set-up h3 {
        margin-top: 2.5em
    }
}

.section-same-page .screenshot {
    display: none
}

.section-workflows h3 {
    margin-top: 0
}

.section-workflows strong {
    font-weight: 600
}

.section-workflows .examples {
    margin-top: .75em
}

.section-workflows .examples:before {
    display: none
}

.section-workflows .wflow {
    margin: 0 1em 1.5em;
    border-top: 6px solid;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    padding: 20px 26px 15px
}

.section-workflows .wflow.automate {
    border-top-color: #6aaecf
}

.section-workflows .wflow.automate h4 {
    color: #6aaecf
}

.section-workflows .wflow.bulk {
    border-top-color: #7d669e
}

.section-workflows .wflow.bulk h4 {
    color: #7d669e
}

.section-workflows .wflow.custom {
    border-top-color: #43ac6d
}

.section-workflows .wflow.custom h4 {
    color: #43ac6d
}

.docs .works-brandable {
    padding: 4em 0 2.5em
}

.docs .brandable, .docs .works {
    padding: 0 1em
}

.docs .brandable img, .docs .works img {
    margin-bottom: 1.2em;
    padding: 0 1.5em
}

.docs .works {
    margin-bottom: 4em
}

.docs .works figure img {
    max-width: 292px
}

.docs .brandable figure img {
    max-width: 265px
}

.docs .collab figure, .docs .integrated figure, .docs .manage figure {
    margin-top: 1em
}

.docs .collab .screenshot, .docs .integrated .screenshot {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    overflow: hidden
}

.docs .collab .screenshot > img, .docs .integrated .screenshot > img {
    width: 190%
}

.docs .collab .screenshot > video, .docs .integrated .screenshot > video {
    border-radius: 4px 4px 0 0;
    margin-bottom: -1.75%
}

.docs .integrated, .docs .manage {
    padding: 3.5em 0 0
}

.docs .integrated {
    background: #86b4cc;
    overflow: hidden
}

.docs .integrated h3 {
    color: #fff
}

.docs .integrated p {
    color: #cdeeff
}

.docs .integrated .screenshot {
    max-width: 734px
}

.docs .collab {
    padding: 3.5em 0
}

.docs .collab .svg {
    background: #ed5a5a
}

.docs .collab .screenshot {
    overflow: hidden
}

.docs .collab .lock, .docs .collab .lock-ref {
    display: none
}

.docs .manage {
    background: #EBE9E7
}

.section-trust {
    padding-bottom: 3em;
    padding-top: 2.5em
}

.section-trust h3 {
    color: #676e75;
    line-height: 1.5em;
    max-width: inherit
}

@media (min-width: 768px) {
    .section-trust h3 {
        margin-bottom: 2em
    }
}

.section-trust img {
    max-width: 100%
}

.section-trust .logo {
    margin: .75em 0;
    min-height: 60px;
    padding: 0 8px
}

.partner .sign-up {
    margin-bottom: 10em
}

#video {
    position: relative;
    margin-bottom: 4em
}

#video p {
    bottom: -85px;
    color: #a0aab2;
    font-weight: 400;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    width: 300px;
    z-index: 1
}

#video .help-desk-vid {
    display: block;
    max-width: 100%;
    padding: 2.5em 3em .15em
}

#video .help-desk-vid:hover .play {
    background: rgba(255, 255, 255, .3)
}

#video .play-video {
    margin-bottom: 2.5em
}

#video .play {
    width: 100px;
    margin: 0 auto;
    border: 4px solid #fff;
    border-radius: 100%;
    height: 100px
}

#video .icon-play {
    left: 3px;
    top: 30px;
    width: 26px;
    height: 34px
}

#video .vid-close {
    right: 4%;
    top: -11%
}

#video .vid-close svg {
    width: 15px;
    height: 15px
}

.iphone-container {
    max-width: 265px;
    padding: 60px 0 70px;
    border-radius: 30px;
    position: relative;
    z-index: 100;
    background: #fff;
    border: 2px solid #c1cbd4;
    margin: 0 auto
}

@media (max-width: 768px) {
    .iphone-container {
        padding: 40px 0
    }
}

@media (min-width: 992px) {
    .iphone-container.has-hover-up {
        -webkit-transition: all cubic-bezier(.4, .1, .1, 1) .4s;
        -o-transition: all cubic-bezier(.4, .1, .1, 1) .4s;
        transition: all cubic-bezier(.4, .1, .1, 1) .4s;
        transform: translate3d(0, 0, 0)
    }

    .iphone-container.has-hover-up:hover {
        transform: translate3d(0, -15px, 0)
    }
}

@media (min-width: 992px) and (max-width: 768px) {
    .iphone-container.has-hover-up:hover {
        transform: translate3d(0, 0, 0)
    }
}

.iphone-container .iphone-camera {
    background: #D6DDE3;
    position: absolute;
    height: 0;
    left: 50%;
    top: 5%;
    width: 6px;
    padding-top: 6px;
    border-radius: 50%;
    margin-left: -12%
}

.iphone-container .iphone-camera:after {
    background: #D6DDE3;
    content: '';
    display: block;
    width: 50px;
    height: 80%;
    position: absolute;
    top: 7%;
    left: 200%;
    border-radius: 18px
}

@media (max-width: 768px) {
    .iphone-container .iphone-camera {
        display: none
    }
}

.iphone-container .iphone-homebtn {
    position: absolute;
    height: 0;
    left: 50%;
    bottom: 15px;
    margin-bottom: 0;
    width: 45px;
    padding-top: 45px;
    margin-left: -8%;
    box-shadow: 0 0 0 2px #D6DDE3 inset;
    border-radius: 50%
}

@media (max-width: 768px) {
    .iphone-container .iphone-homebtn {
        display: none
    }
}

.iphone-container .iphone-screen {
    width: 92%;
    margin: 0 auto
}

@media (max-width: 768px) {
    .iphone-container .iphone-screen {
        width: 95%
    }
}

.iphone-container .iphone-screen img {
    border: 1px solid #93a1af;
    height: auto;
    width: 100%
}

@media (min-width: 992px) {
    .iphone-container.iphone-in-background {
        z-index: 90;
        position: absolute;
        left: -100px;
        bottom: -40px
    }
}

.iphone-with-browser {
    position: absolute;
    right: 50px;
    top: 63px;
    z-index: 100
}

@media (max-width: 767px) {
    .iphone-with-browser {
        display: none
    }
}

.btn-w-icon {
    position: relative;
    display: inline-block;
    padding: 13px 30px 13px 60px
}

.btn-light-border {
    border-color: #D6DDE3
}

.apple-icon {
    display: block
}

.apple-icon:before {
    content: '';
    position: absolute;
    left: 32px;
    top: 50%;
    width: 18px;
    height: 22px;
    margin-top: -13px
}

.apple-icon.apple-icon-white:before {
    background: url(../fonts/icon-apple.svg) top left no-repeat
}

.apple-icon.apple-icon-blue:before {
    background: url(../fonts/icon-apple--blue.svg) top left no-repeat
}

#iphone {
    overflow: hidden;
    background: #FFF;
    border-bottom: 1px solid #d8dee0;
    border-top: 1px solid #d8dee0;
    padding: 3em 0 5em;
    text-align: center
}

#iphone .content {
    margin-top: 3.7em
}

@media (min-width: 991px) {
    #iphone {
        text-align: left
    }
}

@media (min-width: 768px) {
    #iphone {
        padding: 6em 0 0;
        height: 500px
    }
}

@media (max-width: 992px) {
    #iphone {
        height: auto;
        padding: 6em 0
    }
}

@media (max-width: 991px) {
    #iphone .iphone-container {
        display: inline-block
    }

    #iphone .iphone-container:last-child {
        margin-left: 30px
    }
}

.product-section.beacon .browser {
    padding: 2em 0 0;
    width: 95%;
    margin: 0 auto
}

@media (min-width: 992px) {
    .product-section.beacon .browser {
        min-height: 635px;
        padding: 10em 1em;
        width: 100%
    }
}

.product-section.beacon .beacon-gif {
    position: relative;
    bottom: auto;
    right: auto;
    top: auto;
    margin: 0 auto
}

@media (min-width: 992px) {
    .product-section.beacon .beacon-gif {
        position: absolute;
        top: -70px;
        right: 0;
        bottom: auto;
        width: 440px
    }
}

@media (min-width: 544px) and (max-width: 991px) {
    .product-section.beacon .beacon-gif {
        float: right
    }
}

@media (min-width: 992px) {
    .product-section.beacon .beacon-gif {
        position: absolute;
        bottom: 0;
        right: 0
    }
}

.product-section.beacon .beacon-gif .gif, .product-section.beacon .beacon-gif .static {
    float: right;
    width: 440px
}

.product-section.beacon .beacon-gif .gif {
    display: none
}

@media (min-width: 768px) {
    .product-section.beacon .beacon-gif .gif {
        display: block
    }
}

.product-section.beacon .beacon-gif .static {
    max-width: 100%;
    width: 460px
}

@media (min-width: 768px) {
    .product-section.beacon .beacon-gif .static {
        display: none
    }
}

.section-trust h3 {
    font-size: 22px
}

.section-trust h3 span {
    color: #bcc3c9;
    display: block;
    font-size: 17px;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    margin: 6px 0
}

#screenshot-modal.modal.fade.in {
    top: 0
}

#screenshot-modal .modal-dialog {
    margin-top: 3em
}

#screenshot-modal .modal-content {
    border-radius: 0;
    border: 0;
    margin-top: 5%
}

#screenshot-modal .modal-body {
    padding: 0
}

#screenshot-modal .modal-body img {
    max-width: 100%
}

#screenshot-modal button.close {
    color: #fff;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 50px;
    font-weight: 100;
    line-height: .75em;
    opacity: 1;
    position: absolute;
    right: 8px;
    text-shadow: none;
    top: 0
}

#screenshot-modal button.close:focus {
    outline: 0
}

@-webkit-keyframes ring-pulse {
    0% {
        -webkit-transform: scale(.1);
        opacity: 0
    }
    50% {
        -webkit-transform: scale(.5);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@-moz-keyframes ring-pulse {
    0% {
        -moz-transform: scale(.1);
        opacity: 0
    }
    50% {
        -moz-transform: scale(.5);
        opacity: 1
    }
    100% {
        -moz-transform: scale(1);
        opacity: 0
    }
}

@keyframes ring-pulse {
    0% {
        -webkit-transform: scale(.1);
        -moz-transform: scale(.1);
        -ms-transform: scale(.1);
        -o-transform: scale(.1);
        transform: scale(.1);
        opacity: 0
    }
    50% {
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -ms-transform: scale(.5);
        -o-transform: scale(.5);
        transform: scale(.5);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.tweet-wall {
    background: #F9FAFA;
    width: 100%
}

.tweet-wall h2 {
    text-align: center
}

.tweet-wall .tweet-card {
    background: #fff;
    border-radius: 5px;
    border: 2px solid #E3E8EB;
    list-style-type: none;
    margin: 0 20px;
    min-height: 300px;
    padding: 3.5em 2em;
    position: relative;
    text-align: center
}

.tweet-wall .tweet-card h3 {
    color: #394956;
    font-size: 16px;
    margin-bottom: .2em
}

.tweet-wall .tweet-card h4 {
    margin: 0 0 1.5em;
    font-size: 14px
}

.tweet-wall .tweet-card p {
    font-size: 16px;
    margin: 0;
    line-height: 1.8em
}

.tweet-wall .tweet-card a {
    color: #3197d6
}

.tweet-wall .tweet-list {
    margin: 0;
    padding: 0
}

.tweet-wall .avatar {
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    left: 50%;
    margin-left: -30px;
    overflow: hidden;
    padding: 2px;
    position: absolute;
    top: -32px;
    width: 64px;
    height: 64px
}

.tweet-wall .avatar img {
    border-radius: 100%;
    width: 100%
}

.customer-sign-up {
    margin: 0 auto 5em;
    text-align: center
}

@media (min-width: 992px) {
    .customer-sign-up {
        margin-bottom: 8em
    }
}

.slick-slider {
    display: block;
    position: relative
}

.slick-list {
    display: block;
    margin: 0;
    overflow: hidden;
    padding-bottom: 2.5em !important;
    padding-top: 2.5em !important;
    padding: 0;
    position: relative
}

.slick-list:focus {
    outline: 0
}

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    display: block;
    left: 0;
    position: relative;
    top: 0
}

.slick-track:after, .slick-track:before {
    content: '';
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

.slick-slide:active, .slick-slide:focus {
    outline: 0
}

.slick-slide img {
    display: block
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-arrow {
    -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    background: #F1F3F4;
    border: 0;
    margin-top: -30px;
    padding: 20px 25px;
    position: absolute;
    text-indent: -9999px;
    top: 50%;
    z-index: 100
}

.slick-arrow:before {
    border-color: #BBC1C3;
    border-top-width: 3px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-right-style: solid;
    border-right-width: 3px;
    border-top-style: solid;
    content: "";
    height: 10px;
    width: 10px
}

.slick-arrow.slick-prev {
    border-radius: 0 3px 3px 0;
    left: 0
}

.slick-arrow.slick-prev:before {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.slick-arrow.slick-next {
    border-radius: 3px 0 0 3px;
    right: 0
}

.slick-arrow.slick-next:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.slick-arrow:active, .slick-arrow:focus, .slick-arrow:hover {
    outline: 0
}

.slick-arrow:hover {
    background: #e3e7e9
}

#free-features {
    color: #c9e9f8
}

#free-features:hover {
    text-decoration: underline
}

.circle-bullets {
    margin-bottom: 0;
    list-style-type: none;
    padding: 0
}

.circle-bullets li {
    display: block;
    padding-left: 15px;
    position: relative;
    text-align: left
}

@media (min-width: 768px) {
    .circle-bullets li {
        display: inline-block;
        text-align: center
    }
}

.circle-bullets li + li {
    margin-top: 1em
}

@media (min-width: 768px) {
    .circle-bullets li + li {
        margin-left: 1.5em
    }
}

@media (min-width: 992px) {
    .circle-bullets li + li {
        margin-top: 0
    }
}

.circle-bullets li:before {
    border-radius: 100%;
    border: 2px solid #3197D6;
    content: "";
    height: 6px;
    left: 0;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 6px
}

.line-break {
    border-top: 1px solid #E3E8EB;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto
}

.calendly-overlay {
    background: rgba(0, 0, 0, .5)
}

.calendly-overlay .calendly-popup {
    height: 575px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    border-radius: 6px !important
}

@media screen and (max-width: 975px) {
    .calendly-overlay .calendly-popup {
        margin: 0 auto;
        width: 90%
    }
}

.calendly-popup-content {
    border-radius: 6px !important;
    overflow: hidden
}

.calendly-overlay .calendly-popup .calendly-popup-close {
    top: -32px;
    right: -26px;
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700
}

.calendly-overlay .calendly-popup .calendly-popup-close:before {
    opacity: .7
}

.calendly-overlay .calendly-popup .calendly-popup-close:hover:before {
    opacity: 1
}

.generic.awwbout .hero {
    padding-bottom: 5%;
    margin-bottom: 3em
}

.generic.awwbout .hero h2 {
    color: #fff
}

@media (min-width: 768px) and (max-width: 991px) {
    .generic.awwbout .hero h2 {
        padding: 0
    }
}

.careers .hero h2, .why-help-scout .hero h2 {
    font-size: 26px
}

@media (min-width: 768px) {
    .careers .hero h2, .why-help-scout .hero h2 {
        font-size: 30px
    }
}

.careers h3, .why-help-scout h3 {
    margin-top: 2em
}

.careers h3:first-child, .why-help-scout h3:first-child {
    margin-top: 0
}

.careers h3 + p, .why-help-scout h3 + p {
    margin-bottom: 1.6em
}

.careers p, .why-help-scout p {
    font-size: 16px;
    line-height: 1.7em
}

.careers p:last-child, .why-help-scout p:last-child {
    margin-bottom: 0
}

.careers .caps, .why-help-scout .caps {
    color: #4f5d6a;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.75em;
    text-align: center
}

.careers .action-callout, .why-help-scout .action-callout {
    margin-top: 0
}

@media (min-width: 992px) {
    .careers .action-callout, .why-help-scout .action-callout {
        margin: 3em 0
    }
}

.generic.content-team .hero {
    padding-bottom: 55%;
    position: relative
}

@media (min-width: 1000px) {
    .generic.content-team .hero {
        padding-bottom: 35%
    }
}

.generic.content-team .hero h1 {
    font-size: 26px;
    font-weight: 400;
    position: relative;
    z-index: 5
}

@media (min-width: 768px) {
    .generic.content-team .hero h1 {
        font-size: 32px
    }
}

.generic.content-team .hero:after {
    background: linear-gradient(rgba(30, 42, 51, .35) 0, transparent 50%);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.generic.content-team .team {
    text-align: center
}

.generic.content-team .titles-signatures {
    padding: 3em 0 4em;
    text-align: center
}

@media (min-width: 1199px) {
    .generic.content-team .titles-signatures {
        padding: 4em 0 3em
    }
}

.generic.content-team .titles-signatures li {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2.5em;
    width: 45%
}

@media (min-width: 480px) and (max-width: 991px) {
    .generic.content-team .titles-signatures li {
        width: 30%
    }
}

@media (min-width: 650px) and (max-width: 992px) {
    .generic.content-team .titles-signatures li {
        width: 18%
    }
}

@media (min-width: 993px) {
    .generic.content-team .titles-signatures li {
        width: 13.8%
    }
}

.generic.content-team .titles-signatures span {
    color: #868f9a;
    display: block;
    font-size: 12px;
    font-style: italic;
    font-weight: 400
}

.generic.content-team .titles-signatures img {
    max-width: 100px;
    width: 100%
}

.generic.content-team .content-video {
    padding-bottom: 8em
}

.partner .logo-svg {
    margin: 0 auto;
    width: 245px;
    height: 45px
}

.partner .hero {
    padding: 4em 0
}

.partner .hero h2 {
    color: rgba(255, 255, 255, .85)
}

.partner .hero h2 em {
    color: #fff;
    font-weight: 600
}

.partner h1 > strong {
    color: #fff
}

.partner .logo-svg, .remarket .logo-svg {
    margin: 0 auto;
    width: 200px;
    height: 38px
}

.partner .about-hs, .remarket .about-hs {
    padding-top: 2em
}

.partner .about-hs .browser-bar img, .remarket .about-hs .browser-bar img {
    max-width: 100%
}

.partner .hs-customers, .remarket .hs-customers {
    padding: 1em 0 4em
}

.partner .hs-customers img, .remarket .hs-customers img {
    padding: 20px 5px
}

#hs-apps {
    padding-top: 3em;
    padding-bottom: 4em
}

.remarket .hero {
    background: #fafafa;
    border-top: 8px solid #199CD8;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 6%;
    padding-top: 4em
}

.remarket .hero h1 {
    color: #A0AAB2;
    font-size: 1.8em;
    font-weight: 400;
    padding: 3.5% 5%
}

.remarket #video {
    position: relative;
    margin: 0 auto 4em
}

.remarket #video p {
    display: none
}

.remarket #video .help-desk-vid {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    padding: 0;
    position: relative
}

.remarket #video .help-desk-vid:hover {
    box-shadow: 0 10px 50px 4px rgba(0, 0, 0, .2)
}

.remarket #video .help-desk-vid:hover .play {
    background: rgba(25, 156, 216, .8)
}

.remarket #video .help-desk-vid > img {
    max-width: 100%
}

.remarket #video .help-desk-vid > figure {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 22%
}

.remarket #video .play {
    background: rgba(0, 0, 0, .4);
    -webkit-transition: background .2s ease-in-out;
    -o-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out
}

.remarket #video .vid-container-main {
    box-shadow: 0 10px 50px 4px rgba(0, 0, 0, .2);
    padding-top: 0
}

.remarket #video .play-video {
    margin-bottom: 0
}

.remarket #video .vid-close {
    right: 3%;
    top: -15%
}

.remarket #video .vid-close svg {
    width: 20px;
    height: 20px
}

.remarket #video .vid-close svg polygon {
    fill: #999
}

.remarket #video .vid-close:hover svg polygon {
    fill: #333
}

.remarket .sign-up {
    margin-bottom: 6em
}

.section-docs a, .section-reports a {
    color: #fff;
    text-decoration: underline
}

.section-docs a:hover, .section-reports a:hover {
    text-decoration: none
}

.newsletter-cta {
    border-bottom: 1px solid #e8ebee;
    margin-bottom: 4em;
    text-align: center
}

.newsletter-cta .parsley-errors-list {
    padding: 6px 0 0 0
}

.newsletter-cta .parsley-errors-list li {
    color: #E52F28;
    list-style: none
}

@media (min-width: 768px) {
    .newsletter-cta {
        min-height: 650px;
        padding-top: 120px;
        text-align: left
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .newsletter-cta .content {
        padding-left: 5%;
        padding-right: 15%
    }
}

@media (max-width: 768px) {
    .newsletter-cta .content {
        padding: 42% 0 5em
    }
}

.newsletter-cta .content h2 {
    font-size: 37px;
    letter-spacing: -.5px;
    line-height: 1.25;
    margin-bottom: 17px
}

@media (max-width: 991px) {
    .newsletter-cta .content h2 {
        font-size: 35px
    }
}

.newsletter-cta .content p {
    font-size: 18px;
    margin-bottom: 1em
}

.newsletter-cta #email-cta form {
    margin: 28px 0 15px;
    max-width: 400px
}

@media (max-width: 768px) {
    .newsletter-cta #email-cta form {
        margin: 28px auto 15px
    }
}

.newsletter-cta #email-cta form .btn {
    right: 0
}

.newsletter-cta small {
    color: #b0b6bd
}

#update-freq {
    border-radius: 4px;
    position: static
}

.section-docs {
    background: #6cb2dd;
    padding-top: 2em;
    text-align: center
}

.section-docs figure {
    margin-top: .7em
}

.section-docs img {
    max-width: 846px
}

.section-docs h3 {
    color: #fff
}

.section-docs p {
    color: rgba(255, 255, 255, .75)
}

.section-reports {
    padding-top: 1.5em
}

.section-reports h3 {
    color: #fff
}

.section-reports p {
    color: rgba(255, 255, 255, .75)
}

.section-reports img {
    max-width: 1000px
}

.section-multi-mailbox {
    background: linear-gradient(to top, #ccd5dd 0, #b5c1cc 100%);
    overflow: hidden;
    padding: 2em 0 0;
    position: relative
}

.section-multi-mailbox h3, .section-multi-mailbox p {
    color: #fff
}

.section-multi-mailbox .browser-bar {
    border-radius: .4em .4em 0 0
}

.section-multi-mailbox .browser-bar img {
    max-width: 100%
}

.section-multi-mailbox .iphone-with-browser {
    right: -100px
}

.partner-logo {
    background-size: 100%;
    display: inline-block;
    position: relative;
    top: 19px
}

.vm-app {
    display: block;
    margin-bottom: 20px
}

.vm-app .app-icon {
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    display: block;
    float: left;
    margin-right: 5%;
    max-width: 24px;
    overflow: hidden;
    position: relative
}

.vm-app .spacer {
    height: auto;
    width: 100%
}

.vm-app .sprite {
    left: 0;
    max-width: none;
    max-height: 100%;
    position: absolute;
    top: 0
}

.vm-app .sprite.call-ruby {
    left: -3400%
}

.vm-app .sprite.callrail {
    left: -4300%
}

.vm-app .sprite.cisco {
    left: -1200%
}

.vm-app .sprite.conversant {
    left: -3500%
}

.vm-app .sprite.digium {
    left: -4000%
}

.vm-app .sprite.dmclub {
    left: -100%
}

.vm-app .sprite.eightbyeight {
    left: -2200%
}

.vm-app .sprite.e-receptionist {
    left: -2100%
}

.vm-app .sprite.evoice {
    left: -5100%
}

.vm-app .sprite.fluentstream {
    left: -5000%
}

.vm-app .sprite.fonality {
    left: -1300%
}

.vm-app .sprite.forti-voice {
    left: -3000%
}

.vm-app .sprite.freedom-voice {
    left: -2800%
}

.vm-app .sprite.google-voice {
    left: -200%
}

.vm-app .sprite.gradwell {
    left: -4600%
}

.vm-app .sprite.grasshopper {
    left: -300%
}

.vm-app .sprite.halloo {
    left: -4400%
}

.vm-app .sprite.intermedia {
    left: -5300%
}

.vm-app .sprite.jive {
    left: -2500%
}

.vm-app .sprite.kall8 {
    left: -3200%
}

.vm-app .sprite.line2 {
    left: -2300%
}

.vm-app .sprite.nextiva {
    left: -4200%
}

.vm-app .sprite.nuvio {
    left: -5500%
}

.vm-app .sprite.mitel {
    left: -1400%
}

.vm-app .sprite.mvoice {
    left: -4100%
}

.vm-app .sprite.my-scribbit {
    left: -2900%
}

.vm-app .sprite.onebox {
    left: -2600%
}

.vm-app .sprite.ooma {
    left: -400%
}

.vm-app .sprite.openvbx {
    left: -5600%
}

.vm-app .sprite.optimum-voice {
    left: -3900%
}

.vm-app .sprite.ovh {
    left: -4700%
}

.vm-app .sprite.phone-com {
    left: -500%
}

.vm-app .sprite.phonetag {
    left: -4500%
}

.vm-app .sprite.phonebooth {
    left: -1900%
}

.vm-app .sprite.pure-jam {
    left: -600%
}

.vm-app .sprite.ring-by-name {
    left: -2000%
}

.vm-app .sprite.ring-central {
    left: -700%
}

.vm-app .sprite.ringio {
    left: -1800%
}

.vm-app .sprite.sendhub {
    left: -5700%
}

.vm-app .sprite.sipgate {
    left: -1700%
}

.vm-app .sprite.soho66 {
    left: -1600%
}

.vm-app .sprite.sonetel {
    left: -3800%
}

.vm-app .sprite.speak-up {
    left: -3700%
}

.vm-app .sprite.switch {
    left: -5800%
}

.vm-app .sprite.switchboard {
    left: -5200%
}

.vm-app .sprite.telzio {
    left: -3600%
}

.vm-app .sprite.threecx {
    left: -3300%
}

.vm-app .sprite.twilio {
    left: -5400%
}

.vm-app .sprite.virtual-pbx {
    left: -800%
}

.vm-app .sprite.vocalocity {
    left: -900%
}

.vm-app .sprite.voice-cloud {
    left: -2700%
}

.vm-app .sprite.voiceNation {
    left: -4900%
}

.vm-app .sprite.voipfone {
    left: -1500%
}

.vm-app .sprite.voip-ms {
    left: -1000%
}

.vm-app .sprite.vonage {
    left: -1100%
}

.vm-app .sprite.windsor {
    left: -3100%
}

.vm-app .sprite.you-mail {
    left: -2400%
}

.vm-app span {
    display: inline;
    font-size: 11.5px
}

#voicemail {
    text-align: left
}

#voicemail .modal-body {
    height: 500px;
    overflow-y: auto
}

#resources .hero {
    background: #3197D6
}

#resources .hero h1 {
    margin-top: 0
}

#resources #feature-content .resource {
    background: #F9FAFA;
    padding: 2em
}

#resources #feature-content .resource span {
    color: #A5B2BD;
    font-size: 12px
}

@media (min-width: 768px) {
    #resources #feature-content .resource h4 {
        font-size: 22px
    }

    #resources #feature-content .resource p {
        font-size: 16px
    }
}

@media (min-width: 1000px) {
    #resources #feature-content .resource {
        padding: 3em 5em
    }
}

#resources #feature-content .resource figure img {
    max-width: 225px
}

@media (max-width: 768px) {
    #resources #feature-content .resource figure {
        margin-bottom: 2em
    }
}

.content-featured {
    padding: 45px 0
}

.content-featured h1 {
    margin-top: 0
}

.content-featured h2 {
    margin: .5em 0 0
}

.content-featured .form-group {
    margin-top: 30px
}

.share-button {
    display: inline-block;
    height: 0
}

.share-button label {
    border: 0;
    border-radius: 3px !important;
    padding: 9px 21px 17px !important
}

.share-button label:hover {
    background: #acb4bc;
    border-color: #a5a5a5;
    opacity: 1 !important
}

.share-button label:before {
    font-size: 20px;
    position: relative;
    top: 2px
}

.share-button label span {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-weight: 600 !important;
    letter-spacing: .25px
}

.share-button .social {
    -webkit-transform-origin: 50% 0 !important;
    -ms-transform-origin: 50% 0 !important;
    transform-origin: 50% 0 !important
}

.share-button .social [class^=icon-] {
    color: #fff
}

.share-button .social.active {
    -webkit-transform: scale(1) translateY(-96px) !important;
    -ms-transform: scale(1) translateY(-96px) !important;
    transform: scale(1) translateY(-96px) !important
}

.newsletter {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
    text-align: left
}

.newsletter input {
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease
}

.newsletter .btn, .newsletter .email-add {
    height: 50px
}

.newsletter .email-add {
    background: #f2f2f2;
    border-radius: 5px;
    box-shadow: none;
    color: #555;
    overflow: hidden;
    padding: 13px 35% 13px 15px;
    text-overflow: ellipsis
}

.newsletter .email-add:focus, .newsletter .email-add:hover {
    border: 1px solid #5e92ad
}

.newsletter .email-add:focus {
    background: #fff;
    color: #333
}

.newsletter .email-add > .form-group {
    width: 100%
}

.newsletter .btn {
    border: 0;
    border-radius: 0 4px 4px 0;
    color: #fff !important;
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    padding: 15px 20px;
    position: absolute;
    right: 15px;
    top: 0
}

.newsletter-success-icon {
    margin: 20px auto 30px;
    width: 70px;
    height: 70px
}

.newsletter-success-title {
    color: #2A3B47;
    font-size: 22px;
    font-weight: 600;
    line-height: 36px;
    margin-bottom: 1em;
    padding: 0 2em;
    text-align: center;
    -webkit-font-smoothing: antialiased
}

#nl-pop {
    background: #fff;
    border: 1px solid #d5d5d5;
    bottom: -1px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
    padding: 25px;
    position: fixed;
    right: -1px;
    text-align: left;
    width: 330px;
    z-index: 2
}

#nl-pop > p {
    color: #414141;
    margin-bottom: 8px
}

#nl-pop > p.success {
    color: #5cb85c;
    font-weight: 600
}

#nl-pop .newsletter {
    margin: 10px 0
}

#nl-pop .btn, #nl-pop .email-add {
    font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
    height: 40px
}

#nl-pop .email-add {
    border-radius: 4px 0 0 4px;
    font-size: 12.5px;
    padding: 13px 10px;
    width: 200px
}

#nl-pop .btn {
    font-size: 11px;
    padding: 12px 15px;
    right: 0
}

#nl-pop .disabled {
    background: #86c2e7;
    opacity: 1
}

#nl-pop .no-thanks {
    color: #999;
    text-decoration: underline
}

#nl-pop .no-thanks:hover {
    text-decoration: none
}

#nl-pop .parsley-errors-list {
    padding: 6px 0 0 0;
    margin: 0
}

#nl-pop .parsley-errors-list li {
    color: #E52F28;
    font-size: 14px;
    list-style: none
}

#nl-pop .newsletter-success-icon {
    margin: 20px auto 15px;
    width: 55px;
    height: 55px
}

#nl-pop .newsletter-success-title {
    font-size: 18px;
    margin-bottom: 1em
}

.js-error > .go-back {
    color: #fff;
    font-size: 16px;
    text-decoration: underline
}

.js-error > .go-back:hover {
    text-decoration: none
}

.infographics > .content-featured {
    padding-bottom: 15px
}

@media (min-width: 768px) {
    .infographics > .content-featured {
        margin-top: -15px
    }
}

.infographics h2 {
    padding: 0 4%
}

.infographics .ig {
    padding: 1em 0
}

.infographics figure > img {
    max-width: 850px
}

.infographics .ig-cta {
    margin: 25px 0 35px
}

.infographics .ig-cta .share-button, .infographics .ig-cta > .btn {
    margin: 10px 0
}

#plus-sub-form img, #sub-form img {
    margin-top: 10px;
    max-width: 315px;
    width: 85%
}

#plus-sub-form .modal-content, #sub-form .modal-content {
    text-align: center
}

#plus-sub-form .modal-header, #sub-form .modal-header {
    border-bottom: 0
}

#plus-sub-form .modal-header h4, #sub-form .modal-header h4 {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 12px
}

#plus-sub-form .modal-header .close, #sub-form .modal-header .close {
    position: absolute;
    right: 10px;
    top: 8px
}

#plus-sub-form .modal-body, #sub-form .modal-body {
    padding: 5px 20px 20px
}

#plus-sub-form .modal-body .btn, #sub-form .modal-body .btn {
    margin-top: 10px;
    width: 100%
}

#plus-sub-form .modal-body .help-block, #sub-form .modal-body .help-block {
    line-height: 20px
}

#plus-sub-form .form-control, #sub-form .form-control {
    height: 46px
}

#plus-sub-form .form-control:first-child, #sub-form .form-control:first-child {
    margin-bottom: 10px
}

@media (min-width: 768px) {
    #plus-sub-form .modal-dialog, #sub-form .modal-dialog {
        width: 475px
    }

    #plus-sub-form .modal-body, #sub-form .modal-body {
        padding: 10px 35px 30px
    }

    #plus-sub-form .modal-body form, #sub-form .modal-body form {
        margin: 0 40px
    }
}

#plus-sub-form .hide-me, #sub-form .hide-me {
    display: none
}

#plus-sub-form .parsley-errors-list, #sub-form .parsley-errors-list {
    margin: 0
}

#plus-sub-form .parsley-errors-list.filled, #sub-form .parsley-errors-list.filled {
    background: #e52f28;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    margin: 10px 0;
    padding: 8px
}

@media (min-width: 768px) {
    #sub-form .modal-body form {
        margin: 0
    }

    #sub-form p {
        font-size: 16px
    }
}

@media (min-width: 768px) and (min-width: 768px) {
    #sub-form p {
        padding: 0 1em
    }
}

.resource-section h3 {
    font-weight: 400;
    text-align: center
}

.resource-section .post-list #post-list {
    padding-top: 0
}

@media (min-width: 992px) {
    .resource-section .post-box {
        min-height: 270px
    }
}

#quote-nav #post-tabs {
    padding: 2.5em 2.5em
}

#quote-nav #post-tabs > li.active a, #quote-nav #post-tabs > li.active a:hover {
    background: #fff;
    color: #555
}

#quote-nav #post-tabs > li > a {
    color: #81a3c5;
    padding: 10px 20px
}

#quote-nav #post-tabs > li > a:hover {
    background: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8)
}

.quote-head {
    margin-bottom: 35px;
    padding: 2.5em 0 0
}

.csquote > blockquote {
    background: #f4f8fd;
    border-left: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 4px;
    display: table;
    margin: 0 -15px 30px;
    padding: 32px 25px;
    text-align: center
}

.csquote .quote {
    display: table-cell
}

.csquote .quote-text {
    color: #555;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    font-style: normal;
    line-height: 23px;
    margin-bottom: 8px
}

.csquote small {
    display: block;
    font-size: 75%;
    font-style: normal;
    line-height: 1.4em
}

.contact-info {
    padding-top: 3em
}

@media (min-width: 768px) {
    .contact-info {
        padding-top: 0
    }
}

.contact-info h4 {
    font-size: 15px;
    margin: 25px 0 8px
}

.contact-info h4:first-child {
    margin-top: 0
}

.contact-info svg {
    width: 36px;
    height: 36px
}

#contact-form label {
    font-weight: 400
}

#contact-form textarea {
    height: 185px;
    resize: none
}

#contact-form .checkbox {
    margin-bottom: 20px
}

#contact-form .help-inline {
    font-size: 12px;
    font-style: italic
}

#contact-form .hide-me {
    display: none
}

#contact-form .parsley-errors-list {
    display: none;
    color: #D21B14;
    font-size: 12px;
    padding: .75em 0
}

#contact-form .parsley-errors-list.filled {
    display: block
}

#contact-form .form-control.parsley-error {
    border-color: #D21B14
}

.branding {
    background: #71BFF1;
    overflow: hidden;
    position: relative
}

.branding:before {
    content: "";
    z-index: 100;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-image: -webkit-linear-gradient(-180deg, transparent 0, rgba(0, 0, 0, .08) 78%);
    background-image: linear-gradient(-180deg, transparent 0, rgba(0, 0, 0, .08) 78%)
}

.branding h2, .branding p {
    color: #fff
}

.branding h2 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased
}

.branding p {
    font-size: 18px
}

@media (min-width: 768px) {
    .docs-samples {
        position: absolute;
        width: 1200px;
        height: 320px;
        left: 50%;
        margin-left: -600px;
        bottom: 0
    }
}

.docs-samples .sample {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    max-width: 445px;
    overflow: hidden;
    position: absolute
}

.docs-samples .sample img {
    width: 100%;
    height: auto
}

@media (min-width: 768px) {
    .docs-samples .sample img {
        width: inherit;
        height: inherit
    }
}

.docs-samples .sample-1 {
    bottom: -90px;
    left: 0;
    z-index: 20
}

.docs-samples .sample-2 {
    box-shadow: none;
    display: inline-block;
    margin: 0 auto;
    margin-top: 4em;
    max-width: 80%;
    position: relative;
    z-index: 30
}

@media (min-width: 768px) {
    .docs-samples .sample-2 {
        max-width: none;
        margin-bottom: -4em
    }
}

@media (min-width: 992px) {
    .docs-samples .sample-2 {
        bottom: -60px;
        left: 160px;
        margin: 0;
        position: absolute
    }
}

.docs-samples .sample-3 {
    bottom: -103px;
    left: 500px;
    z-index: 40
}

.docs-samples .sample-4 {
    z-index: 10;
    left: 630px;
    bottom: -60px
}

.docs-samples .sample-5 {
    z-index: 50;
    left: 740px;
    bottom: -82px
}

.measure {
    overflow: hidden;
    padding: 3em 0;
    background-color: #ebf8ff;
    background-image: url(../images/reports-bg.png);
    background-image: url(../images/reports-bg.png), linear-gradient(90deg, #ebf8ff 0, #f7fcfe 100%);
    background-image: url(../images/reports-bg.png), -moz-linear-gradient(top, #ebf8ff 0, #f7fcfe 100%);
    background-image: url(../images/reports-bg.png), -webkit-linear-gradient(top, #ebf8ff 0, #f7fcfe 100%);
    background-image: url(../images/reports-bg.png), -o-linear-gradient(top, #ebf8ff 0, #f7fcfe 100%);
    background-image: url(../images/reports-bg.png), -ms-linear-gradient(top, #ebf8ff 0, #f7fcfe 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative
}

@media (min-width: 768px) {
    .measure {
        padding: 13em 0
    }
}

@media (min-width: 768px) {
    .measure .image-side {
        width: 600px
    }
}

.measure .productivity {
    left: -130px;
    top: 60px
}

@media (min-width: 768px) {
    .measure .report {
        position: absolute;
        width: 600px
    }
}

.measure img {
    max-width: 100%
}

@media (min-width: 992px) {
    h3 {
        margin: 0 auto 1em
    }

    .home-header h1 {
        margin-top: 3.5em
    }

    .hs-love {
        padding-top: 3em;
        padding-bottom: 3em
    }

    .mobile-hide {
        display: block
    }

    .svg.notes, .svg.replies, .svg.tags {
        float: left
    }

    .svg.live-chat, .svg.phone {
        margin: 0 0 1em
    }

    .features h3 + p {
        margin: 0 auto 3em;
        max-width: 40em
    }

    .features .relationship-history .screenshot-wrap {
        margin: 0;
        max-width: 960px
    }

    .features .relationship-history .benefit {
        text-align: left
    }

    .features .relationship-history .benefit-svg {
        display: block;
        position: absolute;
        width: 390px;
        height: 210px;
        top: -186px;
        left: 164px
    }

    .section-same-page {
        padding: 8em 0
    }

    .section-same-page h3 {
        margin-bottom: 2em
    }

    .customer-story {
        height: 400px
    }

    .customer-story .story {
        height: 400px;
        padding: 4.3em 2em
    }

    .docs .works-brandable {
        padding: 3em 1em
    }

    .docs .collab .lock-ref {
        display: block;
        left: -8px;
        position: absolute;
        top: 98px;
        transform: rotate(-5deg);
        width: 43px;
        z-index: 100
    }

    .docs .collab .screenshot {
        max-width: 720px
    }

    .item {
        min-height: 100px;
        padding: 0 20px
    }

    #hs-apps h3 {
        margin-top: 2.25em
    }

    .section-trust {
        padding: 6em 0
    }

    .section-trust h3 {
        margin-bottom: 2em
    }

    .section-trust .logo {
        padding: 1.5em .5em
    }

    .section-reports {
        padding: 6.5em 0 0
    }

    .overview {
        margin: 6em 0;
        padding: 3em
    }

    .assets {
        margin-top: 2.5em;
        padding: 2.5em 10% 2em
    }

    .quote-head {
        padding: 4.5em 0 2.5em
    }

    #quote-nav #post-tabs {
        padding: 3.5em 2em 1em
    }

    .infographics .ig {
        padding: 3em 0
    }

    #video {
        margin: -20em auto 2em
    }

    #video .help-desk-vid {
        padding: 8em 3em
    }

    #video .vid-close {
        right: 15%;
        top: -7%
    }

    .remarket .hero h1 {
        padding-left: 0;
        padding-right: 0
    }
}

@media (min-width: 768px) {
    .modal.fade.in {
        top: 12%
    }

    .generic .hero {
        padding-bottom: 3.5em
    }

    h3 + p {
        font-size: 17px;
        margin-bottom: 2.6em
    }

    .content-featured h1, .hero h1 {
        font-size: 2.75em
    }

    .home-header h1 {
        font-size: 35px
    }

    .home-header h1 > span {
        font-size: 55px;
        line-height: 60px
    }

    .features .hero-vid .play {
        top: 40%
    }

    .features .relationship-history {
        padding: 6.5em 0
    }

    .features .section-same-page {
        padding: 2em 0 7em
    }

    .section-same-page .screenshot {
        display: block;
        width: 547px
    }

    .section-same-page .screenshot img {
        border-radius: 5px 5px 0 0;
        border: 1px solid #dadada;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
    }

    .section-workflows {
        padding: 6em 0 7em
    }

    .section-workflows .examples {
        margin-top: .75em
    }

    .section-workflows .examples:before {
        content: "";
        width: 667px;
        height: 76px;
        display: block;
        margin: -2em auto 1.5em
    }

    .section-workflows .examples .row {
        padding: 0 1.15em
    }

    .section-workflows .examples .wflow {
        margin: 0;
        padding: 20px 20px 15px
    }

    .docs .works-brandable {
        padding: 6em 0 5em
    }

    .docs .works-brandable figure {
        min-height: 195px
    }

    .docs .brandable, .docs .works {
        margin: 0 2em
    }

    .docs .collab .screenshot img, .docs .integrated .screenshot img {
        width: 100%
    }

    .docs .integrated, .docs .manage {
        padding: 5em 0 0
    }

    .docs .collab {
        padding: 4em 0
    }

    .docs .collab p {
        text-align: left
    }

    .docs .collab .lock {
        display: block
    }

    .docs .collab .lock svg {
        width: 18px
    }

    .customer-story .story {
        margin: 0 1.5em
    }

    #screenshot-modal .modal-dialog {
        width: 90%;
        max-width: 1000px
    }

    #screenshot-modal .modal-dialog img {
        width: 100%
    }

    .remarket .hero h1 {
        font-size: 2.3em
    }

    #quote-nav #post-tabs > li {
        display: inline-block;
        float: none
    }

    #quote-nav #post-tabs > li > a {
        border-radius: 50px
    }

    .csquote > blockquote {
        margin: 0 0 30px;
        padding: 45px 35px;
        width: 100%
    }

    .vm-app {
        margin-bottom: 25px
    }

    .vm-app .app-icon {
        margin-right: 5%;
        max-width: 32px
    }

    .vm-app span {
        font-size: 13px
    }

    .resource-section:last-child {
        margin-bottom: 3em
    }

    .resource-section h3 {
        padding-left: 15px;
        text-align: left
    }

    .section-trust {
        text-align: center
    }

    .section-trust .logo {
        padding: .8em .5em
    }

    .section-reports img {
        margin-top: 2em
    }

    .online-retailers .own img + p br {
        display: none
    }

    .standard-plan {
        padding: 0
    }

    .standard-plan .price {
        left: 0;
        margin-top: 36.5%;
        width: 155px;
        height: 120px
    }

    .standard-plan .includes {
        text-align: left
    }

    #contact-form .standard-plan .parsley-errors-list, #plus-sub-form .standard-plan .parsley-errors-list.filled, #sub-form .standard-plan .parsley-errors-list.filled, .standard-plan #contact-form .parsley-errors-list, .standard-plan #plus-sub-form .parsley-errors-list.filled, .standard-plan #sub-form .parsley-errors-list.filled, .standard-plan .list-unstyled {
        margin: 3.5em 0 2em;
        padding-left: 0
    }

    #contact-form .standard-plan .parsley-errors-list > li, #plus-sub-form .standard-plan .parsley-errors-list.filled > li, #sub-form .standard-plan .parsley-errors-list.filled > li, .standard-plan #contact-form .parsley-errors-list > li, .standard-plan #plus-sub-form .parsley-errors-list.filled > li, .standard-plan #sub-form .parsley-errors-list.filled > li, .standard-plan .list-unstyled > li {
        font-size: 13.5px;
        margin-bottom: 15px
    }

    .standard-plan .btn {
        margin-bottom: 3em
    }

    .partner .hero {
        padding: 6em 0
    }

    .partner .logo-svg {
        width: 290px;
        height: 55px
    }

    .partner .about-hs {
        padding-top: 7.5%
    }

    .partner .hs-customers img, .remarket .hs-customers img {
        padding: 25px 10px
    }

    #hs-apps {
        padding-top: 6em;
        padding-bottom: 6em;
        text-align: left
    }

    .section-docs, .section-help-desk, .section-multi-mailbox, .section-reports {
        padding-top: 7.5%
    }

    .section-multi-mailbox figure > img {
        width: 100%
    }

    .compare #video .vid-close polygon {
        fill: #fff
    }

    .remarket #video p {
        bottom: 10px;
        color: rgba(255, 255, 255, .8);
        display: block;
        font-style: italic;
        left: 15px;
        letter-spacing: 0;
        margin: 0;
        text-align: left;
        text-transform: none;
        -webkit-font-smoothing: auto
    }

    .remarket #video .help-desk-vid > figure {
        top: 37%
    }

    .remarket #video .vid-close {
        right: 7%;
        top: -8%
    }
}

@media (min-width: 480px) and (max-width: 991px) {
    .hero h2 {
        max-width: 35em
    }

    .hs-love .testi {
        padding: 0 2em
    }

    .features .hero-vid .play-button {
        top: 33%
    }

    .section-workflows .examples:before {
        display: none
    }

    .feature-highlights {
        display: none
    }

    .section-trust {
        padding: 4em 15px 3em
    }

    .overview {
        margin: 4em .75em 4em .75em
    }

    .assets {
        margin-top: 2.5em;
        padding: 2.5em 10% 2em
    }

    .remarket #video .help-desk-vid > figure {
        top: 35%
    }

    #quote-nav #post-tabs > li {
        display: inline-block;
        float: none
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .section-reports {
        padding: 4em 0 0
    }

    .customer-story.vhx {
        background-position: -100px 0
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .section-trust .logo {
        padding: .8em 3.5em
    }
}

@media (max-width: 767px) {
    .partner h1 span {
        display: block;
        margin: 0 auto .6em
    }
}

.about h3 {
    margin-top: 2em
}

.about p {
    font-size: 16px;
    line-height: 1.7
}

.about p:last-child {
    margin-bottom: 0
}

.about .action-callout {
    margin-top: 0
}

@media (min-width: 992px) {
    .about .action-callout {
        margin: 3em 0
    }
}

.about .caps {
    color: #4f5d6a;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .5px;
    line-height: 1.75em;
    text-align: center;
    text-transform: uppercase
}

@media (min-width: 992px) {
    .about .caps {
        padding-left: 10%;
        padding-right: 10%
    }
}

.about .hero {
    padding-bottom: 5%;
    margin-bottom: 3em
}

@media (min-width: 544px) and (max-width: 991px) {
    .about .hero h2 {
        padding: 0
    }
}

.about .pull-quote {
    color: #26353f;
    float: right;
    font-size: 20px;
    font-weight: 700;
    margin: 50px 0;
    position: relative;
    text-indent: -.55em
}

@media (min-width: 544px) and (max-width: 991px) {
    .about .pull-quote {
        margin: 45px 10%
    }
}

@media (min-width: 992px) {
    .about .pull-quote {
        float: right;
        margin: 65px -100px 45px 75px;
        max-width: 300px
    }
}

.about .pull-quote::before {
    background: #26353f;
    content: "";
    display: block;
    height: 3px;
    margin-bottom: 25px;
    position: absolute;
    top: -20px;
    width: 100px
}

.about .c-teammate__location {
    font-size: 10px;
    letter-spacing: .5px;
    margin-top: 2px
}

.about .c-teammate__location svg {
    height: 12px;
    width: 10px
}

.about .c-teammate__twitter {
    display: none
}

.about .c-teammate .c-thumbnail {
    border-radius: 4px;
    padding-bottom: 130px;
    width: 130px
}

@media (min-width: 768px) {
    .about .c-teammate .c-thumbnail {
        padding-bottom: 140px;
        width: 140px
    }
}

.about .c-teammate:hover .c-teammate__title {
    display: none
}

.about .c-teammate:hover .c-teammate__twitter {
    display: inline-block
}

.features.all-features .c-feature-section {
    margin-bottom: 3.5em;
    padding-bottom: 2em
}

.features.all-features .c-feature-section:last-child {
    border-bottom: 0;
    margin-bottom: 0
}

.features.all-features .c-feature-section h3 {
    padding-left: 15px;
    margin-bottom: 1em
}

.features.all-features .c-feature-section h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    margin-bottom: 2px
}

.features.all-features .c-feature-section p {
    border-bottom: 1px dotted #c1cbd4;
    font-size: 13px;
    margin-bottom: 0;
    padding-bottom: 2.5em
}

.features.all-features .c-feature-section li {
    margin-bottom: 0;
    font-size: 13px;
    margin-bottom: 0
}

.features.all-features .c-feature-section__item {
    margin-bottom: 2em;
    right: 0
}

.features.all-features .c-feature-section__item img {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%
}

.features.all-features .hero {
    padding-bottom: 3.5em
}

.careers h1 {
    color: #3197d6
}

.careers h3 {
    text-align: center
}

.careers h4 {
    font-size: 20px;
    font-weight: 400;
    margin: 1em 0 1.5em;
    position: relative
}

.careers .c-collage [class^=col-] {
    padding-left: 10px;
    padding-right: 10px
}

.careers .c-collage__row {
    margin-left: -10px;
    margin-right: -10px
}

.careers .c-collage [class^=image-] {
    background-size: cover;
    margin-bottom: 20px;
    padding-bottom: 100%
}

.careers .c-collage .image-wide {
    padding-bottom: 50%
}

.careers .c-collage .image-right {
    background-position: right top
}

.careers .c-features-list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.careers .c-features-list li {
    padding-bottom: 4em;
    text-align: left
}

.careers .c-features-list li:last-child {
    padding-bottom: 0
}

@media (min-width: 768px) {
    .careers .c-features-list li {
        display: inline-block;
        vertical-align: top;
        width: 48.5%
    }

    .careers .c-features-list li:first-child, .careers .c-features-list li:nth-child(3) {
        padding-right: 3.5em
    }

    .careers .c-features-list li:nth-child(2), .careers .c-features-list li:nth-child(4) {
        padding-left: 3.5em
    }

    .careers .c-features-list li:first-child, .careers .c-features-list li:nth-child(2) {
        padding-bottom: 3.5em
    }

    .careers .c-features-list li:nth-child(3), .careers .c-features-list li:nth-child(4) {
        padding-bottom: 0;
        padding-top: 3.5em
    }
}

.careers .feature-icon {
    display: inline-block
}

.careers .feature-icon .st0 {
    fill: none
}

.careers .feature-icon .st1 {
    fill: #3197d6
}

.careers .feature-icon .st2 {
    fill: #aedfff
}

.careers .hero {
    background-size: cover;
    padding-bottom: 120px;
    text-align: center
}

.careers .hero h1 {
    -webkit-font-smoothing: auto;
    border-bottom: 2px solid #3197d6;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    margin: 15px 0;
    padding-bottom: 5px;
    position: relative;
    text-transform: uppercase
}

.careers .hero h2 {
    color: #2a3b47;
    margin: 15px 0 45px
}

.careers .c-openings {
    background: #3197d6
}

.careers .c-openings h3 {
    color: #fff
}

.careers .c-perks h3 {
    text-align: left
}

.careers .c-perks__list {
    list-style: none;
    padding-left: 0
}

.careers .c-perks__list li {
    color: #72808e;
    display: block;
    font-size: 15px;
    padding-left: 2em;
    position: relative;
    text-align: left
}

.careers .c-perks__list li + li {
    margin-top: 1.5em
}

.careers .c-psuedo-grid::after, .careers .c-psuedo-grid::before {
    background: #d8dee0;
    content: "";
    display: none;
    position: absolute
}

@media (min-width: 768px) {
    .careers .c-psuedo-grid::after, .careers .c-psuedo-grid::before {
        display: block
    }
}

.careers .c-psuedo-grid::before {
    height: 1px;
    left: 0;
    margin-top: -1px;
    top: 50%;
    width: 100%
}

.careers .c-psuedo-grid::after {
    height: 100%;
    left: 50%;
    margin-left: -1px;
    top: 0;
    width: 1px
}

.careers .whr-items {
    list-style: none;
    padding-left: 0
}

.careers .whr-info {
    color: #a5b2bd;
    left: 28px;
    list-style: none;
    padding-left: 0;
    position: absolute;
    text-align: left;
    top: 28px
}

.careers .whr-info > li > span {
    display: none
}

.careers .whr-title {
    color: #3197d6;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 1em;
    text-align: left
}

@media (min-width: 768px) {
    .careers .whr-title {
        margin-bottom: 0
    }
}

.careers .whr-title > a {
    background: #f4fbff;
    border-radius: 4px;
    display: block;
    margin-bottom: 25px;
    min-height: 130px;
    padding: 3em 3.5em 1.3em 1.5em;
    position: relative;
    text-align: left;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.careers .whr-title > a:after {
    border-color: #3197d6;
    border-top-width: 1px;
    border-top-style: solid;
    border-right-width: 1px;
    border-right-style: solid;
    content: "";
    display: inline-block;
    margin-left: .3em;
    position: relative;
    pointer-events: none;
    vertical-align: middle;
    position: absolute;
    right: 8%;
    width: 10px;
    height: 10px;
    top: 46%;
    -webkit-transition: right .2s ease-in-out;
    -o-transition: right .2s ease-in-out;
    transition: right .2s ease-in-out;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.careers .whr-title > a:hover {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 12px 16px rgba(0, 0, 0, .08), 0 5px 25px rgba(0, 0, 0, .08), 0 18px 30px rgba(0, 0, 0, .08)
}

.careers .whr-title > a:hover:after {
    right: 5%
}

.careers .whr-item {
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: top;
    width: 100%
}

@media (min-width: 768px) {
    .careers .whr-item {
        margin: 0 10px
    }
}

@media (min-width: 992px) {
    .careers .whr-item {
        float: left;
        width: 47.45%
    }
}

.careers .whr-date, .careers .whr-location {
    display: none
}

.careers .whr-empty-text {
    background: #e3e8eb;
    padding: 1.5em;
    text-align: center;
    border-radius: 4px
}

.model-clauses li, .model-clauses p, .privacy li, .privacy p, .security li, .security p, .terms-of-service li, .terms-of-service p {
    font-size: 16px
}

.model-clauses h3, .model-clauses h4, .privacy h3, .privacy h4, .security h3, .security h4, .terms-of-service h3, .terms-of-service h4 {
    color: #1d2b36;
    font-weight: 500
}

.model-clauses h3, .privacy h3, .security h3, .terms-of-service h3 {
    font-size: 26px
}

.model-clauses h4, .privacy h4, .security h4, .terms-of-service h4 {
    font-size: 20px
}

.model-clauses em, .model-clauses li, .model-clauses p, .model-clauses strong, .privacy em, .privacy li, .privacy p, .privacy strong, .security em, .security li, .security p, .security strong, .terms-of-service em, .terms-of-service li, .terms-of-service p, .terms-of-service strong {
    color: #394956
}

.model-clauses ul, .privacy ul, .security ul, .terms-of-service ul {
    padding-left: .1em
}

@media (min-width: 544px) {
    .model-clauses ul, .privacy ul, .security ul, .terms-of-service ul {
        padding-left: 1em
    }
}

.model-clauses ul li > ul, .privacy ul li > ul, .security ul li > ul, .terms-of-service ul li > ul {
    padding-left: 1em
}

@media (min-width: 544px) {
    .model-clauses ul li > ul, .privacy ul li > ul, .security ul li > ul, .terms-of-service ul li > ul {
        padding-left: 1em
    }
}

.model-clauses .c-clauses, .privacy .c-clauses, .security .c-clauses, .terms-of-service .c-clauses {
    background: #f1f3f5;
    border: 1px solid #d6dde3
}

.model-clauses .c-clauses .parsley-errors-list, .privacy .c-clauses .parsley-errors-list, .security .c-clauses .parsley-errors-list, .terms-of-service .c-clauses .parsley-errors-list {
    list-style: none;
    margin-top: 12px;
    padding-left: 0
}

.model-clauses .c-clauses .parsley-required, .privacy .c-clauses .parsley-required, .security .c-clauses .parsley-required, .terms-of-service .c-clauses .parsley-required {
    color: #e52f28;
    font-size: 13px
}

.model-clauses .c-clauses .hide-me, .model-clauses .c-clauses .parsley-type, .privacy .c-clauses .hide-me, .privacy .c-clauses .parsley-type, .security .c-clauses .hide-me, .security .c-clauses .parsley-type, .terms-of-service .c-clauses .hide-me, .terms-of-service .c-clauses .parsley-type {
    display: none
}

.model-clauses .c-clauses .checkbox, .model-clauses .c-clauses .form-group, .model-clauses .c-clauses button, .model-clauses .c-clauses label + input, .privacy .c-clauses .checkbox, .privacy .c-clauses .form-group, .privacy .c-clauses button, .privacy .c-clauses label + input, .security .c-clauses .checkbox, .security .c-clauses .form-group, .security .c-clauses button, .security .c-clauses label + input, .terms-of-service .c-clauses .checkbox, .terms-of-service .c-clauses .form-group, .terms-of-service .c-clauses button, .terms-of-service .c-clauses label + input {
    margin-top: .5em
}

.model-clauses .hero, .privacy .hero, .security .hero, .terms-of-service .hero {
    background: #3197d6
}

.model-clauses .s-content * + *, .privacy .s-content * + *, .security .s-content * + *, .terms-of-service .s-content * + * {
    margin-top: 2em
}

.compare {
    text-align: center
}

.compare .hero {
    padding-bottom: 1em;
    margin-bottom: 4em
}

@media (min-width: 544px) {
    .compare .hero {
        padding-bottom: 15em
    }
}

.compare .list {
    margin-bottom: 2em
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare .list {
        padding-left: 18px;
        padding-right: 18px
    }
}

.compare .list h3 {
    display: inline-block;
    padding-bottom: 8px
}

.compare .item {
    margin: 1em 0 4em;
    text-align: left
}

.compare .item > h4 {
    font-size: 15px
}

.compare .s-import {
    padding: 2em 0 3.5em
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare .s-import {
        padding: 5em 0
    }
}

@media (min-width: 992px) {
    .compare .s-import {
        padding: 6em 0 5em
    }
}

.compare .s-import a {
    color: rgba(255, 255, 255, .7);
    text-decoration: underline
}

.compare .s-import a:hover {
    color: #fff
}

.compare .s-import h3, .compare .s-import p {
    color: #fff
}

.compare .s-import h3 {
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #ffcd5e
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare .s-import p {
        font-size: 18px
    }
}

@media (min-width: 768px) {
    .compare .s-import p {
        font-size: 18px;
        line-height: 1.75em
    }
}

.compare .breakdown {
    background: #fff;
    padding: 7.5em 0
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare .breakdown {
        padding: 3em 20px
    }
}

.compare .breakdown h3 {
    margin-top: 1em
}

.compare .breakdown table {
    text-align: left
}

.compare .vertical-video {
    position: relative
}

.compare .vertical-video .vid-container-main {
    padding-top: 0
}

.compare .pricing {
    padding: 3em 0
}

@media (min-width: 992px) {
    .compare .pricing {
        padding: 5em 0 7em
    }
}

@media (min-width: 544px) {
    .compare #video p {
        font-size: 22px;
        color: #fff;
        bottom: 6px;
        left: 50%;
        margin-left: -215px;
        width: 430px
    }
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare #video {
        margin: -18em auto 2em
    }

    .compare #video .help-desk-vid {
        padding: 8em 3em
    }

    .compare #video .vid-close {
        right: 7%;
        top: -7%
    }

    .compare #video .vid-close polygon {
        fill: #fff
    }
}

.compare #price-compare {
    color: #cdd4da;
    display: inline-table;
    font-size: 14px;
    margin: 1.75em auto 0
}

@media (min-width: 544px) and (max-width: 991px) {
    .compare #price-compare {
        font-size: 16px;
        margin: 0 auto 3em;
        width: 75%
    }
}

@media (min-width: 992px) {
    .compare #price-compare {
        font-size: 18px;
        margin: 0 auto;
        width: 85%
    }
}

@media (min-width: 768px) {
    .compare #price-compare br {
        display: none
    }
}

.compare #price-compare .us, .compare #price-compare thead {
    border-bottom: 1px solid #e0e5ea
}

.compare #price-compare .comp, .compare #price-compare td > span, .compare #price-compare th {
    color: #343b41
}

.compare #price-compare th {
    border-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    padding: 0 0 10px 10px
}

@media (min-width: 992px) {
    .compare #price-compare th {
        padding: 10px 20px 10px 0
    }
}

.compare #price-compare tr > td {
    border: 0;
    padding: 16px 8px 16px 5px;
    text-align: left
}

@media (min-width: 992px) {
    .compare #price-compare tr > td {
        padding: 20px 20px 20px 0
    }
}

.compare #price-compare .comp {
    font-weight: 600
}

.compare #price-compare .comp p {
    color: #8a939b;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 0
}

.compare #price-compare .annual {
    border-top: 3px solid #fdbe50
}

.compare #price-compare tfoot {
    color: #8a939b
}

.section-app-screenshots {
    background: #fff;
    padding: 2em 0 3.5em
}

@media (min-width: 992px) {
    .section-app-screenshots {
        padding: 6em 0
    }
}

.section-app-screenshots .screen {
    margin-bottom: 1em
}

@media (min-width: 992px) {
    .section-app-screenshots .screen {
        margin-bottom: 2em
    }
}

.section-app-screenshots a {
    display: block
}

.section-app-screenshots a:focus {
    text-decoration: none
}

.section-app-screenshots a:hover .icon-search {
    opacity: 1
}

.section-app-screenshots a:hover figure:after {
    background: rgba(49, 151, 214, .9)
}

.section-app-screenshots a:hover h4 {
    opacity: 1
}

.section-app-screenshots figure {
    margin-bottom: 15px;
    position: relative;
    text-align: center
}

.section-app-screenshots figure:after {
    background: 0 0;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

.section-app-screenshots img {
    border: 1px solid #e3e8eb;
    border-radius: 3px;
    width: 100%
}

@media (min-width: 768px) {
    .section-app-screenshots h3 {
        margin-bottom: 60px
    }
}

@media (min-width: 992px) {
    .section-app-screenshots h3 {
        margin-bottom: 2em
    }
}

.section-app-screenshots h4 {
    font-size: 12px;
    font-weight: 400;
    opacity: .6;
    padding-bottom: 10px;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

@media (min-width: 992px) {
    .section-app-screenshots h4 {
        padding: 10px 0
    }
}

.section-app-screenshots .icon-search {
    color: rgba(255, 255, 255, .7);
    font-size: 30px;
    left: 40%;
    opacity: 0;
    position: absolute;
    top: 20%;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out
}

@media (min-width: 992px) {
    .section-app-screenshots .icon-search {
        left: 45%;
        top: 32%
    }
}

.section-app-screenshots .sign-up {
    margin-bottom: 3em
}

.section-app-screenshots .sign-up .btn {
    margin-bottom: 1em
}

@media (min-width: 992px) {
    .section-app-screenshots .desc {
        padding: 18px 20px 10px
    }
}

@media (min-width: 544px) {
    .compare.email-management-software .hero {
        padding-bottom: 6em
    }
}

@media (min-width: 544px) and (max-width: 767px) {
    .compare.email-management-software .hero {
        padding-bottom: 1.5em
    }
}

@media (min-width: 992px) {
    .compare.email-management-software .hero h1 {
        margin-top: 6.5%
    }
}

.compare.email-management-software .hero h2 {
    color: #ace2fd
}

.compare.email-management-software hr {
    max-width: 970px
}

.compare.email-management-software .sign-up {
    margin-bottom: 3em
}

.compare.email-management-software > .section-same-page {
    padding-bottom: 0;
    padding-top: 0
}

@media (min-width: 768px) {
    .compare.email-management-software > .section-same-page {
        padding-bottom: 5em
    }
}

.compare.email-management-software .section-multi-mailbox {
    background: linear-gradient(to top, #ccd5dd 0, #b5c1cc 100%)
}

.compare.email-management-software > .personal-touch {
    background: -webkit-linear-gradient(bottom, #f5f7f9 0, #fff 100%);
    background: -o-linear-gradient(bottom, #f5f7f9 0, #fff 100%);
    background: linear-gradient(to top, #f5f7f9 0, #fff 100%);
    padding-top: 1em
}

@media (min-width: 992px) {
    .compare.email-management-software > .personal-touch {
        padding-top: 5em
    }
}

@media (min-width: 544px) and (max-width: 767px) {
    .compare.email-management-software > .personal-touch {
        padding-top: 3em
    }
}

@media (min-width: 544px) {
    .compare.email-management-software > .section-app-screenshots h4 {
        font-size: 14px
    }
}

.compare.email-management-software .svg {
    background: #a5b2bd
}

.compare.email-management-software .feature-highlights {
    position: absolute;
    top: 0;
    width: 100%
}

.compare.email-management-software .highlight {
    background: #a5b2bd;
    display: none;
    height: 2px;
    position: absolute;
    top: 33px;
    z-index: 1
}

@media (min-width: 992px) {
    .compare.email-management-software .highlight {
        display: block
    }
}

.compare.email-management-software .highlight:before {
    background: #a5b2bd;
    border-radius: 100%;
    content: "";
    display: block;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 12px;
    height: 12px
}

.compare.email-management-software .tag-highlight {
    left: -269px;
    width: 60%;
    top: 83px
}

.compare.email-management-software .replies-highlight {
    left: -201px;
    width: 48%
}

.compare.email-management-software .note-highlight {
    left: -105px;
    width: 26%
}

.compare.help-desk-system .hero {
    background: #daf1ff;
    margin-bottom: 4em;
    padding-bottom: 0
}

@media (min-width: 544px) {
    .compare.help-desk-system .hero {
        margin-bottom: 5em
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .hero {
        margin-bottom: 10em
    }
}

.compare.help-desk-system .hero h1 {
    font-size: 2.4em;
    line-height: 1.4em
}

.compare.help-desk-system .hd-illo img {
    width: 95%;
    position: relative;
    bottom: -1.6em
}

@media (min-width: 544px) {
    .compare.help-desk-system .hd-illo img {
        width: 75%
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .hd-illo img {
        bottom: -3em;
        max-width: 662px;
        position: relative;
        width: 100%
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .image-side {
        height: auto
    }
}

.compare.help-desk-system .multi-mailbox .image-side img {
    max-width: 95%;
    width: 688px
}

@media (min-width: 544px) {
    .compare.help-desk-system .multi-mailbox .image-side img {
        width: 100%
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .multi-mailbox .image-side {
        margin-right: -830px;
        width: 812px;
        height: 386px;
        top: 15%
    }
}

.compare.help-desk-system .multi-mailbox .iphone-container.screen-fade-out:after {
    bottom: 115px
}

.compare.help-desk-system .multi-mailbox .iphone-with-browser {
    left: 50%;
    right: auto;
    top: 30%
}

.compare.help-desk-system .reports .image-side {
    top: 15%
}

@media (min-width: 768px) and (max-width: 991px) {
    .compare.help-desk-system .reports .left {
        margin-left: -760px
    }
}

@media (min-width: 992px) {
    .compare.help-desk-system .reports .left {
        margin-left: -835px
    }
}

.compare.help-desk-system .reports .conversation img {
    width: 100%
}

@media (min-width: 768px) {
    .compare.help-desk-system .reports .conversation {
        width: 689px;
        height: 650px
    }
}

.compare.help-desk-system .reports .productivity {
    left: 70px;
    width: 689px;
    height: 620px;
    top: 45px
}

.compare.help-desk-system .reports .report {
    position: absolute
}

@media (min-width: 768px) {
    .compare.help-desk-system .reports:after {
        bottom: 0;
        content: "";
        display: block;
        width: 1502px;
        height: 195px;
        margin-right: -751px;
        position: absolute;
        right: 50%
    }
}

@media (min-width: 992px) {
    .compare.help-desk-system .reports:after {
        height: 350px
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .docs.product-section h3:after {
        margin: 20px auto
    }
}

.compare.help-desk-system .docs .docs-screenshots {
    margin: 0 auto;
    width: 95%
}

@media (min-width: 768px) {
    .compare.help-desk-system .docs .docs-screenshots {
        width: 845px;
        height: 475px
    }
}

@media (min-width: 768px) {
    .compare.help-desk-system .docs .docs-desktop-screen, .compare.help-desk-system .docs .docs-mobile-screen {
        position: absolute
    }
}

.compare.help-desk-system .docs .docs-desktop-screen img {
    width: 100%
}

@media (min-width: 768px) {
    .compare.help-desk-system .docs .docs-desktop-screen {
        right: 0
    }
}

.compare.help-desk-system .docs .docs-mobile-screen {
    display: none
}

@media (min-width: 768px) {
    .compare.help-desk-system .docs .docs-mobile-screen {
        display: block;
        left: 0;
        max-width: 212px;
        top: 100px
    }
}

.compare.help-desk-system .beacon {
    padding-bottom: 3%
}

.compare.help-desk-system #iphone {
    border-top: 0
}

.customers p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
    position: relative;
    z-index: 2
}

.customers .hero {
    background: #fff url(../images/map.png) center center no-repeat
}

@media only screen and (-o-min-device-pixel-ratio: 5 / 4), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx) {
    .customers .hero {
        background-image: url(../images/map@2x.png);
        background-size: 1001px 483px
    }
}

.customers .hero h1, .customers .hero strong {
    color: #394956
}

.customers .hero h1 {
    line-height: 1.4
}

@media (min-width: 0) {
    .customers .hero {
        background-position: center top
    }
}

@media (min-width: 768px) {
    .customers .hero {
        background-position: center 125px
    }
}

.customers .c-pins__pin {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 100%;
    display: none;
    height: 12px;
    opacity: 0;
    position: absolute;
    width: 12px;
    z-index: 2
}

@media (min-width: 992px) {
    .customers .c-pins__pin {
        display: block
    }
}

.customers .c-pins__pin:after, .customers .c-pins__pin:before {
    border-radius: 100%;
    content: "";
    position: absolute
}

.customers .c-pins__pin:after {
    background: #fff;
    border: 3px solid #72808e;
    height: 12px;
    left: 0;
    top: 0;
    width: 12px;
    z-index: 3
}

.customers .c-pins__pin:before {
    -webkit-animation: ring-pulse 3s linear infinite;
    -o-animation: ring-pulse 3s linear infinite;
    animation: ring-pulse 3s linear infinite;
    background: #72808e;
    height: 50px;
    left: -19px;
    opacity: 0;
    top: -19px;
    width: 50px;
    z-index: -1
}

.customers .c-pins__pin.is-in-view {
    opacity: 1
}

.customers .c-pins__pin--blue:after {
    border-color: #3197d6
}

.customers .c-pins__pin--blue:before {
    background: rgba(0, 170, 255, .19);
    animation-delay: 1.5s
}

.customers .c-pins__pin--green:after {
    border-color: #4bc27d
}

.customers .c-pins__pin--green:before {
    background: rgba(75, 194, 125, .19);
    animation-delay: .5s
}

.customers .c-pins__pin--purple:after {
    border-color: #7e80e7
}

.customers .c-pins__pin--purple:before {
    background: rgba(127, 31, 228, .19);
    animation-delay: 2.5s
}

.customers .c-quote {
    display: inline-block;
    position: relative
}

.customers .c-quote:before {
    border-radius: 5px;
    border: 2px solid #e3e8eb;
    bottom: 0;
    content: "";
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 8%;
    z-index: 0
}

@media (min-width: 768px) {
    .customers .c-quote:before {
        display: block
    }
}

.customers .c-quote__logo {
    z-index: 2
}

@media (min-width: 768px) {
    .customers .c-quote__logo {
        background: #fff;
        position: absolute;
        left: 4px;
        top: -8px
    }
}

.customers .c-video {
    border-radius: 6px;
    display: block;
    background: #f9fafa;
    margin-bottom: 2em;
    width: 100%
}

@media (min-width: 992px) {
    .customers .c-video {
        display: inline-block;
        width: 90%
    }
}

.customers .c-video__box {
    border-radius: 6px;
    height: 350px;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    width: 100%
}

.customers .c-video__box:before {
    background: rgba(0, 0, 0, .05);
    border-radius: 6px;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    transition: opacity .3s ease-in-out
}

.customers .c-video__box:hover:before {
    opacity: 0
}

@media (min-width: 992px) {
    .customers .c-video__box {
        height: 350px;
        margin-bottom: 0
    }
}

.customers .c-video:hover {
    box-shadow: 0 22px 44px rgba(0, 0, 0, .17)
}

.customers .c-video__image {
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0
}

.customers .c-video cite {
    bottom: 20px;
    color: #fff;
    font-size: 14px;
    left: 24px;
    line-height: 22px;
    position: absolute;
    text-align: left;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    z-index: 2
}

.customers .c-video cite strong {
    color: #fff
}

.customers .tweet-wall h4, .customers .tweet-wall p {
    font-size: 16px;
    line-height: 1.8em
}

.customers .c-customer-list__logo {
    text-align: center;
    min-height: 60px
}

@media (max-width: 767px) and (min-width: 480px) {
    .customers .c-customer-list__logo {
        padding: 0
    }
}

.customers .c-customer-list h3 {
    color: #72808e;
    line-height: 1.5;
    text-align: center
}

@media (max-width: 543px) {
    .customers .c-customer-list h3 {
        font-size: 18px
    }
}

.customers .c-customer-list img {
    margin: 0 auto;
    max-width: 100%;
    width: 160px
}

.wistia_popover_overlay {
    left: 0;
    right: 0;
    max-width: 100%
}

.s-features h3 {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -.4px
}

.s-features h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px
}

.s-features p {
    font-size: 16px;
    line-height: 1.6em
}

.s-features .btn--white {
    background: #f9fafa;
    border: 1px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .08), 0 12px 16px rgba(0, 0, 0, .08);
    color: #1f5e89;
    font-weight: 600
}

.s-features .btn--white:hover {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 12px 16px rgba(0, 0, 0, .08), 0 5px 25px rgba(0, 0, 0, .08), 0 18px 30px rgba(0, 0, 0, .08)
}

.s-features .hero {
    background-image: -webkit-linear-gradient(-359deg, #0072C6 0, #3197d6 73%);
    background-image: linear-gradient(89deg, #0072C6 0, #3197d6 73%);
    overflow: hidden;
    position: relative
}

@media (min-width: 768px) {
    .s-features .hero {
        padding-bottom: 11.5em;
        text-align: left
    }
}

.s-features .hero .nav > li .btn-primary {
    background: #1f5e89;
    border-color: #1f5e89
}

.s-features .hero h1, .s-features .hero h2, .s-features .hero strong {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    -webkit-font-smoothing: antialiased
}

.s-features .hero h1 {
    color: #fff;
    font-size: 2.25em;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -1.15px
}

@media (min-width: 768px) {
    .s-features .hero h1 {
        font-size: 2.5em;
        padding-top: 3em
    }
}

.s-features .hero h2 {
    color: #daf1ff;
    font-weight: 500;
    max-width: inherit;
    letter-spacing: -.5px
}

@media (min-width: 768px) and (max-width: 990px) {
    .s-features .hero .content {
        padding-left: 5%
    }
}

.s-features .hero .image-side {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all ease-out .7s;
    -moz-transition: all ease-out .7s;
    transition: all ease-out .7s;
    transition-delay: .6s;
    height: 150px;
    opacity: 0;
    top: 0;
    width: 90%
}

@media (min-width: 768px) {
    .s-features .hero .image-side {
        margin-right: -990px;
        width: 840px;
        height: 500px;
        top: 25%
    }
}

.s-features .hero .image-side img {
    width: 100%
}

.s-features .hero .image-side.is-visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.s-features .hero .iphone-container {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all ease-out .7s;
    -moz-transition: all ease-out .7s;
    transition: all ease-out .7s;
    background-image: linear-gradient(white, #f1f3f4);
    opacity: 0
}

.s-features .hero .iphone-container.is-visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.s-features .hero .iphone-with-browser {
    left: 51%;
    position: absolute;
    right: auto;
    top: 42%
}

.s-features .hero .screen-shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.s-features .c-personal {
    position: relative;
    text-align: left
}

@media (min-width: 768px) {
    .s-features .c-personal {
        min-height: 650px;
        text-align: center
    }
}

.s-features .c-personal h3 + p {
    margin-bottom: 2em
}

@media (min-width: 768px) {
    .s-features .c-personal h3 + p {
        margin-bottom: 3em
    }
}

.s-features .c-personal .browser-bar {
    overflow: hidden;
    width: 100%
}

.s-features .c-personal .browser-bar img {
    width: 100%;
    max-width: 545px
}

@media (min-width: 768px) {
    .s-features .c-personal .browser-bar img {
        width: auto
    }
}

.s-features .c-personal .convo-app {
    margin: 1em auto 4em;
    max-width: 388px
}

.s-features .c-relationships {
    text-align: left
}

@media (min-width: 768px) {
    .s-features .c-relationships {
        text-align: center
    }
}

.s-features .c-relationships ul {
    text-align: left;
    margin: 1em 0 3em 1.5em
}

@media (min-width: 992px) {
    .s-features .c-relationships ul {
        margin: 5em 0 0 2em
    }
}

.s-features .c-relationships ul li + li {
    margin-top: 3.5em
}

.s-features .c-relationships h3 {
    margin-bottom: 2em
}

.s-features .c-relationships h4 {
    position: relative
}

.s-features .c-relationships .content-list h4:before {
    border-radius: 100%;
    border: 2px solid #3197d6;
    content: "";
    display: inline-block;
    height: 8px;
    left: -20px;
    position: absolute;
    top: 8px;
    width: 8px
}

.s-features .c-relationships .screen-fade-out img {
    width: 100%
}

.s-features .c-collaboration .src-image {
    width: 100%
}

@media (min-width: 768px) {
    .s-features .c-collaboration .src-image {
        width: 545px
    }
}

.s-features .c-collaboration h3 + p {
    margin: 0 auto 2em
}

@media (min-width: 768px) {
    .s-features .c-collaboration h3 + p {
        margin: 0 auto 4em
    }
}

.s-features .c-get-started ul {
    padding: 0 3em 0
}

@media (min-width: 768px) {
    .s-features .c-get-started ul {
        padding: 3em 0
    }
}

.s-features .c-get-started li {
    font-size: 16px;
    line-height: 30px;
    margin: 0;
    text-align: left
}

@media (min-width: 768px) {
    .s-features .c-get-started li {
        padding-right: 20px
    }
}

.s-features .c-get-started li.last {
    margin-bottom: 3em
}

@media (min-width: 768px) {
    .s-features .c-get-started li.last {
        margin-bottom: 0
    }
}

.s-features .c-get-started .price {
    border-top: 3px solid #3197d6
}

.s-features .c-get-started .price-box {
    border-bottom: 0;
    display: inline-block;
    font-size: 125px;
    font-weight: 400;
    line-height: 100%;
    position: relative;
    padding: 30px 0
}

@media (min-width: 768px) {
    .s-features .c-get-started .price-box {
        font-size: 160px;
        padding: 40px 0 40px
    }
}

.s-features .c-get-started .price-box:after, .s-features .c-get-started .price-box:before {
    line-height: 100%;
    position: absolute;
    color: #93a1af
}

.s-features .c-get-started .price-box:before {
    content: attr(data-currency);
    font-size: 26px;
    left: 50%;
    margin-left: -60px;
    top: 50%;
    margin-top: -50px
}

.s-features .c-get-started .price-box:after {
    bottom: 58%;
    content: attr(data-length);
    font-size: 18px;
    left: 50%;
    margin-bottom: -90px;
    margin-left: -30px
}

@media (min-width: 768px) {
    .s-features .c-get-started .price-box:after {
        bottom: 50%
    }
}

.s-features .c-get-started .btn {
    margin: 0 5px 10px
}

.s-features .c-get-started .btn-container {
    background: #f9fafa;
    border-top: 1px solid #e3e8eb;
    padding: 1.5em 0
}

.s-features .c-get-started .btn-pricing {
    background: #3197d6;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .08), 0 12px 16px rgba(0, 0, 0, .08);
    color: #fff
}

.s-features .c-get-started .btn-pricing:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 12px 16px rgba(0, 0, 0, .08), 0 5px 25px rgba(0, 0, 0, .08), 0 18px 30px rgba(0, 0, 0, .08)
}

.s-features .c-get-started .btn-trans-dk:hover {
    background: #fff;
    color: #4f5d6b
}

.s-features .c-mobile {
    background-color: #402F27;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
    height: 500px
}

@media (min-width: 768px) {
    .s-features .c-mobile {
        height: 750px
    }
}

.s-features .c-mobile h2, .s-features .c-mobile p {
    color: #fff;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .4)
}

.s-features .c-mobile h2 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased
}

.s-features .c-mobile p {
    font-size: 18px
}

.s-features .c-mobile img {
    border: 2px solid #72808e;
    width: 100%
}

.s-features .c-mobile .c-mobile-ipad {
    background: #fff url(../images/ipad-cam-home.png) no-repeat center center;
    border-radius: 1.5em;
    background-size: contain;
    border: 1px solid #a5b2bd;
    padding: 15px 8%;
    position: relative;
    z-index: 100
}

@media (min-width: 544px) {
    .s-features .c-mobile .c-mobile-ipad {
        padding: 20px 8%;
        border-radius: 2em
    }
}

@media (min-width: 768px) {
    .s-features .c-mobile .c-mobile-ipad {
        padding: 25px 8.25%;
        border-width: 2px;
        border-radius: 3em
    }
}

.s-features .c-mobile .c-mobile-ipad:after {
    background: linear-gradient(180deg, transparent 40%, rgba(73, 84, 97, .15) 80%);
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.s-features .c-mobile .screen-shadow {
    box-shadow: 0 15px 60px rgba(0, 0, 0, .75), 0 10px 6px 2px rgba(0, 0, 0, .8)
}

.s-features .c-more-to-love {
    text-align: left
}

@media (min-width: 768px) {
    .s-features .c-more-to-love h3 {
        text-align: center
    }
}

.s-features .c-more-to-love h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 15px
}

.s-features .c-more-to-love h4::before {
    left: -20px;
    top: 8px
}

.s-features .c-more-to-love .content-list-item {
    margin-bottom: 3em;
    min-height: 128px;
    padding-left: 20px;
    text-align: left
}

@media (min-width: 992px) {
    .s-features .c-more-to-love .content-list-wrap {
        padding: 0 60px
    }
}

.s-features .c-search .headless-browser {
    margin: 0 auto;
    max-width: 636px
}

.s-features .c-users {
    text-align: left
}

.s-features .c-users h3 {
    padding-top: 2em
}

.s-features .c-users h3 + p {
    margin: 0
}

.s-features .c-users img {
    max-width: 100%
}

.s-features .c-workflows img {
    max-width: 90%
}

.s-features .c-workflows h3 + p {
    max-width: 42em
}

.s-features .c-workflows li {
    margin-bottom: 20px
}

@media (min-width: 768px) {
    .s-features .c-workflows li {
        margin-bottom: 10px
    }
}

.s-features .c-workflows li.active {
    background: #f1f3f5;
    border-radius: 6px
}

.s-features .c-workflows li a {
    color: #2a3b47;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: .5em 1em
}

@media (min-width: 768px) {
    .s-features .c-workflows li a {
        font-size: 18px;
        padding: .75em 1em
    }
}

.s-features .c-workflows .tab-content {
    height: 272px;
    overflow: hidden
}

.s-features .c-workflows .tab-content-container {
    background: linear-gradient(#fff, #f9fafa);
    border: 1px solid #d6dde3;
    border-radius: 6px;
    margin: 0 auto;
    max-width: 425px;
    padding: 4.5em 0 0;
    text-align: center
}

@media (min-width: 768px) {
    .s-features .c-workflows .tab-content-container {
        padding: 4em 0 3.5em
    }
}

.s-features .c-workflows .icon {
    background: #fff;
    height: 36px;
    left: 45%;
    position: absolute;
    top: 18px;
    width: 36px
}

@media (min-width: 768px) {
    .get-help .c-call-box {
        background-image: -webkit-linear-gradient(bottom, #f9fafa 46%, #fff 100%);
        background-image: linear-gradient(to top, #f9fafa 46%, #fff 100%);
        border-radius: 4px;
        border: 1px solid #d6dde3
    }
}

.get-help .hero {
    background-image: -webkit-linear-gradient(bottom, #f9fafa 46%, #fff 100%);
    background-image: linear-gradient(to top, #f9fafa 46%, #fff 100%);
    border-bottom: 1px solid #e3e8eb;
    overflow: hidden;
    position: relative
}

@media (min-width: 768px) {
    .get-help .hero {
        min-height: 530px
    }
}

.get-help .hero:before {
    background: url(../images/support-team.png) top left no-repeat;
    background-size: 803px 228px;
    bottom: 0;
    content: "";
    display: none;
    height: 228px;
    left: 50%;
    margin-left: -401px;
    opacity: 0;
    position: absolute;
    width: 803px;
    z-index: 2
}

@media (min-width: 768px) {
    .get-help .hero:before {
        display: block
    }
}

.get-help .hero:after {
    background: url(../images/icon-pattern.png) top left repeat-x;
    bottom: -30px;
    content: "";
    height: 190px;
    left: 30px;
    opacity: .6;
    position: absolute;
    width: 100%;
    z-index: 1
}

.get-help .hero.animate:before {
    opacity: 1;
    animation: screen-up .8s cubic-bezier(.4, .1, .1, 1)
}

.get-help .c-nav-tabs {
    border: 0;
    box-shadow: 0 1px 0 rgba(6, 8, 8, .1);
    display: none;
    width: 100%
}

@media (min-width: 768px) {
    .get-help .c-nav-tabs {
        display: block
    }
}

.get-help .c-nav-tabs.affix {
    position: relative
}

@media (min-width: 544px) {
    .get-help .c-nav-tabs.affix {
        box-shadow: 0 3px 4px -3px rgba(6, 8, 8, .3), 0 6px 12px 2px rgba(223, 230, 236, .3);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000
    }
}

.get-help .c-nav-tabs .hs-tabs-nav {
    text-align: center
}

.get-help .c-nav-tabs .hs-tabs-nav > li {
    float: none
}

.get-help .c-nav-tabs .hs-tabs-nav > li > a, .get-help .c-nav-tabs .hs-tabs-nav > li > a:active, .get-help .c-nav-tabs .hs-tabs-nav > li > a:focus, .get-help .c-nav-tabs .hs-tabs-nav > li > a:hover {
    border: 0;
    border-bottom: 3px solid transparent
}

.get-help .c-nav-tabs .hs-tabs-nav > li.active > a {
    background: #f1f3f5;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #fff
}

@media (min-width: 544px) {
    .get-help .c-nav-tabs .hs-tabs-nav > li.active > a {
        border-radius: 0;
        background: 0 0;
        border-bottom: 3px solid #3197d6;
        color: #143d57
    }
}

.get-help #fixed-nav.affix + #talk-to-sales {
    margin-top: 60px
}

.get-help .c-tweets {
    margin: 0 auto;
    max-width: 1160px
}

@media (min-width: 0) and (max-width: 767px) {
    .get-help .tweet-wall .tweet-card {
        display: block;
        margin: 0;
        width: 100% !important
    }
}

@media (min-width: 768px) {
    .get-help .tweet-wall .tweet-card {
        margin: 30px 20px 0
    }
}

@media (min-width: 0) and (max-width: 767px) {
    .get-help .tweet-wall .tweet-card + .tweet-card {
        margin-top: 5em
    }
}

.get-help .s-free-class .event {
    background: #fff;
    border-top: 0;
    border: 1px solid #e3e8eb;
    box-shadow: 0 2px 12px 2px rgba(223, 230, 236, .2);
    margin-bottom: 1em;
    margin-top: 3em;
    position: relative;
    text-align: left
}

@media (min-width: 768px) {
    .get-help .s-free-class .event {
        margin-top: 5em
    }
}

.get-help .s-free-class .event:before {
    content: "";
    height: 4px;
    left: -1px;
    position: absolute;
    right: -1px;
    top: 0
}

.get-help .s-free-class .event .icon {
    width: 58px;
    height: 58px;
    border-radius: 100%;
    left: 50%;
    margin-left: -29px;
    padding: 16px;
    position: absolute;
    top: -27px
}

.get-help .s-free-class .event .icon svg {
    width: 25px
}

.get-help .s-free-class .event .icon svg path {
    fill: #fff
}

.get-help .s-free-class .event .details {
    padding: 3em 2em .5em;
    text-align: center
}

.get-help .s-free-class .event .classes {
    background: #f9fafa;
    border-top: 1px solid #e3e8eb;
    padding: 0 2em
}

.get-help .s-free-class .event h3 {
    font-size: 22px;
    font-weight: 400
}

.get-help .s-free-class .event h3 > span {
    color: #b4c0ca;
    display: block;
    font-size: 12px
}

.get-help .s-free-class .event h3 + p {
    margin-bottom: 2em
}

.get-help .s-free-class .event p {
    color: #72808e;
    font-size: 14px;
    margin: 0
}

.get-help .s-free-class .event h4 {
    color: #4f5d6b;
    font-weight: 500;
    font-size: 14px;
    margin: 0
}

.get-help .s-free-class .event.help-desk:before {
    background: #ffc646
}

.get-help .s-free-class .event.help-desk h3 {
    color: #ffc646
}

.get-help .s-free-class .event.help-desk .icon {
    background: #ffc646
}

.get-help .s-free-class .event.docs:before {
    background: #3197d6
}

.get-help .s-free-class .event.docs h3 {
    color: #3197d6
}

.get-help .s-free-class .event.docs .icon {
    background: #3197d6
}

.get-help .s-free-class .event.docs .icon svg {
    left: 3px;
    position: relative
}

.get-help .s-free-class .event .demo-class {
    border-bottom: 1px solid #e3e8eb
}

.get-help .s-free-class .event .demo-class:last-child {
    border-bottom: 0
}

.get-help .s-free-class .event .demo-class span.date {
    display: block
}

@media (min-width: 544px) {
    .get-help .s-free-class .event .demo-class span.date {
        display: inline-block
    }
}

.get-help .s-free-class .btn:hover {
    background: #72808e;
    border-color: #72808e;
    color: #fff
}

.get-help .wistia_embed {
    margin-top: 2em
}

.s-gmail.s-features .hero {
    background-image: -webkit-linear-gradient(-360deg, #DD5347 0, #E96A5F 100%);
    background-image: linear-gradient(90deg, #DD5347 0, #E96A5F 100%);
    padding-bottom: 0
}

.s-gmail #collaboration-features > .collaboration {
    border: 0
}

.features.apps .hero {
    padding-bottom: 3.5em
}

.features.apps .app-list li, .features.apps .app-list p {
    font-size: 13px;
    margin-bottom: 0
}

.features.apps .app {
    border-radius: 4px;
    position: relative
}

.features.apps .app > :first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.features.apps .app > :last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.features.apps .app .view-screen {
    display: none
}

.features.apps .name-top {
    border-radius: 4px 4px 0 0;
    border: 1px solid #e9e9e9;
    position: relative;
    min-height: 106px;
    transition: border .15s ease-in-out;
    z-index: 2
}

.features.apps .name-top .app__thumbnail {
    height: 60px;
    width: 60px
}

.features.apps .name-top .app__thumbnail.custom {
    background-position: -60px -239px
}

.features.apps .name-top .app__thumbnail.docs {
    background-position: -60px 0
}

.features.apps .name-top .app__thumbnail.voicemail {
    background-position: -120px 0
}

.features.apps .name-top .app__thumbnail.webhooks {
    background-position: -180px 0
}

.features.apps .name-top .app__thumbnail.zendesk {
    background-position: -240px 0
}

.features.apps .name-top .app__thumbnail.agilecrm {
    background-position: 0 -240px
}

.features.apps .name-top .app__thumbnail.capsule {
    background-position: -300px 0
}

.features.apps .name-top .app__thumbnail.highrise {
    background-position: -360px 0
}

.features.apps .name-top .app__thumbnail.onepage {
    background-position: -540px -120px
}

.features.apps .name-top .app__thumbnail.pipedrive {
    background-position: 0 -180px
}

.features.apps .name-top .app__thumbnail.pipeline {
    background-position: -60px -180px
}

.features.apps .name-top .app__thumbnail.sourcingio {
    background-position: -420px 0
}

.features.apps .name-top .app__thumbnail.aircall {
    background-position: -118px -298px
}

.features.apps .name-top .app__thumbnail.campfire {
    background-position: -480px 0
}

.features.apps .name-top .app__thumbnail.chatra {
    background-position: -177px -295px
}

.features.apps .name-top .app__thumbnail.clickdesk {
    background-position: -120px -180px
}

.features.apps .name-top .app__thumbnail.elevio {
    background-position: -300px -295px
}

.features.apps .name-top .app__thumbnail.hall {
    background-position: -540px 0
}

.features.apps .name-top .app__thumbnail.hipchat {
    background-position: 0 -60px
}

.features.apps .name-top .app__thumbnail.kato {
    background-position: -60px -60px
}

.features.apps .name-top .app__thumbnail.slack {
    background-position: -120px -60px
}

.features.apps .name-top .app__thumbnail.sleek {
    background-position: 0 -290px
}

.features.apps .name-top .app__thumbnail.smooch {
    background-position: -540px -240px
}

.features.apps .name-top .app__thumbnail.talkdesk {
    background-position: -180px -60px
}

.features.apps .name-top .app__thumbnail.teckst {
    background-position: -241px -294px
}

.features.apps .name-top .app__thumbnail.transifex {
    background-position: -480px -240px
}

.features.apps .name-top .app__thumbnail.trello {
    background-position: -60px -295px
}

.features.apps .name-top .app__thumbnail.userlike {
    background-position: -180px -240px
}

.features.apps .name-top .app__thumbnail.bronto {
    background-position: -180px -180px
}

.features.apps .name-top .app__thumbnail.campaign-monitor {
    background-position: -240px -60px
}

.features.apps .name-top .app__thumbnail.constant-contact {
    background-position: -300px -60px
}

.features.apps .name-top .app__thumbnail.infusionsoft {
    background-position: -240px -180px
}

.features.apps .name-top .app__thumbnail.klaviyo {
    background-position: -360px -60px
}

.features.apps .name-top .app__thumbnail.mailchimp {
    background-position: -420px -60px
}

.features.apps .name-top .app__thumbnail.tropical {
    background-position: -300px -180px
}

.features.apps .name-top .app__thumbnail.olark {
    background-position: -480px -60px
}

.features.apps .name-top .app__thumbnail.snap {
    background-position: -540px -60px
}

.features.apps .name-top .app__thumbnail.bigcommerce {
    background-position: 0 -120px
}

.features.apps .name-top .app__thumbnail.chargedesk {
    background-position: -420px -240px
}

.features.apps .name-top .app__thumbnail.freshbooks {
    background-position: -540px -180px
}

.features.apps .name-top .app__thumbnail.magento {
    background-position: -60px -120px
}

.features.apps .name-top .app__thumbnail.shopify {
    background-position: -120px -120px
}

.features.apps .name-top .app__thumbnail.woocommerce {
    background-position: -360px -180px
}

.features.apps .name-top .app__thumbnail.fullstory {
    background-position: -120px -240px
}

.features.apps .name-top .app__thumbnail.hookfeed {
    background-position: -300px -240px
}

.features.apps .name-top .app__thumbnail.kissmetrics {
    background-position: -180px -120px
}

.features.apps .name-top .app__thumbnail.mixpanel {
    background-position: -240px -120px
}

.features.apps .name-top .app__thumbnail.segment {
    background-position: -420px -180px
}

.features.apps .name-top .app__thumbnail.hively {
    background-position: -300px -120px
}

.features.apps .name-top .app__thumbnail.nicereply {
    background-position: -360px -120px
}

.features.apps .name-top .app__thumbnail.screensteps {
    background-position: -480px -180px
}

.features.apps .name-top .app__thumbnail.wordpress {
    background-position: -360px -240px
}

.features.apps .name-top .app__thumbnail.briteverify {
    background-position: -240px -240px
}

.features.apps .name-top .app__thumbnail.google-apps {
    background-position: -420px -120px
}

.features.apps .name-top .app__thumbnail.zapier {
    background-position: -480px -120px
}

.features.apps .details-bottom {
    background: #f1f3f4;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    border-top: none;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    transition: all .15s ease-in-out
}

.features.apps .details-bottom a {
    color: #3197d6;
    float: none
}

.features.apps .details-bottom a:hover {
    text-decoration: none
}

.features.apps .details-bottom a, .features.apps .details-bottom h5, .features.apps .details-bottom li, .features.apps .details-bottom p {
    line-height: 0;
    color: transparent
}

.features.apps .details-bottom h5 {
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #555;
    font-size: 11px;
    margin-top: 8px
}

.features.apps .details-bottom .icon-search {
    font-size: 18px;
    position: absolute;
    right: 20px;
    top: 18px
}

@media (min-width: 992px) {
    .features.apps .app:hover {
        z-index: 5
    }

    .features.apps .app:hover .name-top {
        border: 1px solid #d0d0d0
    }

    .features.apps .app:hover .view-screen {
        opacity: 1
    }

    .features.apps .app:hover .details-bottom {
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .15);
        height: auto;
        top: 104px
    }

    .features.apps .app:hover .details-bottom a, .features.apps .app:hover .details-bottom li, .features.apps .app:hover .details-bottom p {
        color: #777;
        line-height: 1.5;
        margin-bottom: 1em;
        transition: all .1s ease-out
    }

    .features.apps .app:hover .details-bottom a:last-child, .features.apps .app:hover .details-bottom li:last-child, .features.apps .app:hover .details-bottom p:last-child {
        margin-bottom: 0
    }

    .features.apps .app:hover .details-bottom a {
        color: #3197d6
    }

    .features.apps .app:hover .details-bottom em {
        color: #a5b2bd;
        font-size: 12px
    }

    .features.apps .app:hover .details-bottom h5 {
        margin-bottom: 1.5em
    }

    .features.apps .app .view-screen {
        display: block;
        background: rgba(155, 162, 171, .85);
        border-radius: 4px 4px 0 0;
        border: 1px solid #829199;
        bottom: -1px;
        opacity: 0;
        left: -1px;
        position: absolute;
        right: -1px;
        top: -1px;
        transition: opacity .15s ease-out
    }

    .features.apps .app .view-screen:focus {
        text-decoration: none
    }

    .features.apps .app .view-screen svg {
        display: block;
        height: 25px;
        margin-left: 45%;
        margin-top: 40px;
        width: 30px
    }

    .features.apps .name-top:only-child .view-screen {
        border-radius: 4px
    }
}

#screenshot-modal.apps-screens .modal-dialog {
    max-width: 635px
}

.features.help-desk img {
    max-width: 100%
}

@media (min-width: 768px) {
    .features.help-desk .hero {
        height: 655px;
        overflow: hidden
    }
}

.features.help-desk .hero .browser-bar {
    max-width: 850px;
    animation: screen-up .5s ease-in-out
}

@keyframes screen-up {
    0% {
        transform: translate3d(0, 10px, 0);
        opacity: 0
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.features.help-desk h4 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 8px
}

.features.help-desk #iphone {
    border-top: 0;
    border-bottom: 1px solid #e3e8eb
}

.features.help-desk .content-list h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 15px
}

.features.help-desk .content-list h4:before {
    left: -20px;
    top: 8px
}

.features.help-desk #more-help-desk-features .content-list-item {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 3em
}

@media (min-width: 768px) {
    .features.help-desk #more-help-desk-features .content-list-item {
        padding: 0 60px;
        min-height: 128px
    }
}

.features.help-desk #more-help-desk-features .content-list-item p {
    font-size: 16px
}

.features.help-desk #plus-plan p {
    color: #fff
}

.features.help-desk #plus-plan h3 {
    font-size: 38px
}

.features.help-desk #plus-plan .feature-icon svg {
    height: 50px;
    width: 50px
}

.features.help-desk #plus-plan .feature-icon svg path {
    fill: #fff
}

.features.help-desk .s-workflows img {
    max-width: 90%
}

.features.help-desk .s-workflows h3 + p {
    max-width: 42em
}

.features.help-desk .s-workflows li {
    margin-bottom: 20px
}

@media (min-width: 768px) {
    .features.help-desk .s-workflows li {
        margin-bottom: 10px
    }
}

.features.help-desk .s-workflows li.active {
    background: #f1f3f5;
    border-radius: 6px
}

.features.help-desk .s-workflows li a {
    color: #2a3b47;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: .5em 1em
}

@media (min-width: 768px) {
    .features.help-desk .s-workflows li a {
        font-size: 18px;
        padding: .75em 1em
    }
}

.features.help-desk .s-workflows .tab-content {
    height: 272px;
    overflow: hidden
}

.features.help-desk .s-workflows .tab-content-container {
    background: linear-gradient(#fff, #f9fafa);
    border: 1px solid #d6dde3;
    border-radius: 6px;
    margin: 0 auto;
    max-width: 425px;
    padding: 4.5em 0 0;
    text-align: center
}

@media (min-width: 768px) {
    .features.help-desk .s-workflows .tab-content-container {
        padding: 4em 0 3.5em
    }
}

.features.help-desk .s-workflows .icon {
    background: #fff;
    height: 36px;
    left: 45%;
    position: absolute;
    top: 18px;
    width: 36px
}

.home .hero {
    overflow: hidden
}

.home .hero .c-button--trans:focus, .home .hero .c-button--trans:hover {
    background: #fff
}

.home .hero .c-button--trans.active, .home .hero .c-button--trans:focus, .home .hero .c-button--trans:hover {
    color: #3197d6 !important
}

.home .left {
    height: 563px;
    left: 50%;
    margin-left: 0;
    opacity: .3;
    top: 70px;
    width: 568px
}

@media (min-width: 992px) {
    .home .left {
        margin-left: -1240px;
        opacity: 1
    }
}

.home .right {
    height: 563px;
    margin-right: -1110px;
    overflow: hidden;
    top: 70px;
    width: 1169px
}

.home .hero-water {
    transition: 1s all ease-in-out;
    opacity: 0;
    transform: translate3d(0, 5px, 0)
}

.home .illo {
    position: absolute
}

.home .illo__icon {
    height: 51px;
    width: 54px;
    animation-iteration-count: infinite;
    animation-name: illo-scale-message;
    animation-timing-function: ease-in-out;
    background-size: 100%;
    opacity: 0
}

.home .illo__message {
    animation-delay: 5s;
    animation-duration: 15s;
    background: url(../fonts/header-illo__message.svg);
    cursor: pointer;
    left: 543px;
    top: 225px
}

.home .illo__heart {
    animation-delay: 4s;
    animation-duration: 15s;
    background: url(../fonts/header-illo__heart.svg);
    cursor: pointer;
    left: 50px;
    top: 0;
    z-index: 100
}

.home .illo__water {
    overflow: hidden
}

.home .illo__water::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 579px
}

.home .illo__water--small::before {
    background: url(../fonts/header-illo__water-lg.svg) repeat-x;
    animation: water-scroll-sm 3s linear infinite
}

.home .illo__water--large::before {
    background: url(../fonts/header-illo__water-lg-tall.svg) repeat-x;
    background-size: contain;
    animation: water-scroll-lg 8s linear infinite;
    cursor: pointer
}

.home .illo__canoe-holder {
    bottom: 51px;
    height: 143px;
    left: 41px;
    width: 232px;
    z-index: 100
}

.home .illo__canoe {
    background: url(../fonts/header-illo__canoe.svg) no-repeat;
    background-size: 100%;
    bottom: 0;
    cursor: pointer;
    height: 144px;
    left: 0;
    width: 222px
}

.home .illo__oar {
    background: url(../fonts/header-illo__oar.svg);
    background-size: 100%;
    bottom: -31px;
    cursor: pointer;
    height: 118px;
    left: 100px;
    width: 22px;
    z-index: 15
}

.home .illo__fish {
    background: url(../fonts/header-illo__fish.svg) no-repeat;
    background-size: 100%;
    height: 55px;
    width: 55px
}

.home .illo__fish-holder {
    width: 200px;
    height: 200px;
    bottom: -70px;
    left: 430px
}

.home .illo__fish--reg {
    right: 0;
    bottom: 0;
    z-index: -1
}

.home .illo__fish--secret {
    bottom: -30px;
    left: 590px
}

.home .illo__ballon {
    background-size: 100%;
    background: url(../fonts/header-illo__balloon.svg) no-repeat;
    cursor: pointer;
    height: 87px;
    left: 80px;
    top: 80px;
    width: 63px
}

@keyframes illo-scale-message {
    0% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
    1% {
        opacity: 1;
        transform: scale3d(1.2, 1.2, 1.2)
    }
    2% {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
    45% {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
    46% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }
    47% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
    100% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
}

@keyframes illo-scale-heart {
    0% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
    1% {
        opacity: 1;
        transform: scale3d(1.2, 1.2, 1.2)
    }
    2% {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
    45% {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
    46% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }
    47% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
    100% {
        opacity: 0;
        transform: scale3d(.5, .5, .5)
    }
}

@keyframes water-scroll-lg {
    from {
        transform: translate3d(0, 0, 0)
    }
    to {
        transform: translate3d(-70px, 0, 0)
    }
}

@keyframes water-scroll-sm {
    from {
        transform: translate3d(0, 0, 0)
    }
    to {
        transform: translate3d(-22px, 0, 0)
    }
}

@keyframes illo-fish-jump {
    90% {
        transform: rotate(0) translate3d(70px, 70px, 70px) rotate(0)
    }
    100% {
        transform: rotate(-360deg) translate3d(70px, 70px, 70px) rotate(280deg)
    }
}

.home .c-compare__email:hover svg path {
    stroke: #4bc27d
}

.home .c-compare__hd:hover svg path {
    stroke: #7e80e7
}

.ios h2 {
    color: #93a1af;
    font-size: 1.1em;
    line-height: 1.65
}

@media (min-width: 768px) {
    .ios h2 {
        font-size: 1.3em
    }
}

.ios h3 {
    text-align: center
}

.ios .c-bullet-list {
    list-style-type: none;
    padding: 0
}

@media (min-width: 544px) {
    .ios .c-bullet-list {
        margin: 40px 0 0
    }
}

.ios .c-bullet-list li {
    color: #93a1af;
    display: inline-block;
    position: relative;
    text-align: left;
    padding: 20px 20px 20px 54px;
    vertical-align: top;
    width: 100%;
    font-size: 16px;
    line-height: 1.92857
}

@media (min-width: 544px) {
    .ios .c-bullet-list li {
        width: 49%
    }
}

.ios .c-bullet-list li:before {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid #93a1af;
    left: 27px;
    top: 26px;
    height: 7px;
    width: 7px
}

.ios .hero {
    background: #fff;
    margin-bottom: 0
}

.ios .hero h1 {
    color: #394956;
    font-weight: 400;
    line-height: 1.4em
}

@media (min-width: 768px) {
    .ios .hero h1 {
        font-size: 2.4em
    }
}

.ios .c-ipad {
    background: #fff url(../images/ipad-cam-home_1.png) no-repeat center center;
    background-size: contain;
    border-radius: 1.5em;
    border: 1px solid #c1cbd4;
    padding: 15px 8%;
    position: relative;
    z-index: 5
}

@media (min-width: 768px) {
    .ios .c-ipad {
        padding: 25px 8.25%;
        border-width: 2px;
        border-radius: 30px
    }
}

.ios .c-ipad img {
    border: 1px solid #b4c0ca;
    width: 100%
}

.ios .c-iphone {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #c1cbd4;
    margin: 0 auto;
    max-width: 265px;
    padding: 30px 0;
    position: relative;
    z-index: 100
}

@media (min-width: 768px) {
    .ios .c-iphone {
        border: 2px solid #c1cbd4;
        border-radius: 30px;
        padding: 55px 0 70px
    }
}

.ios .c-iphone__camera {
    background: #d6dde3;
    border-radius: 50%;
    display: none;
    height: 0;
    left: 50%;
    margin-left: -30px;
    padding-top: 6px;
    position: absolute;
    top: 5%;
    width: 6px
}

@media (min-width: 768px) {
    .ios .c-iphone__camera {
        display: block
    }
}

.ios .c-iphone__camera:after {
    background: #d6dde3;
    border-radius: 18px;
    content: '';
    display: block;
    height: 80%;
    left: 200%;
    position: absolute;
    top: 7%;
    width: 50px
}

.ios .c-iphone__home {
    border-radius: 50%;
    bottom: 15px;
    box-shadow: 0 0 0 2px #d6dde3 inset;
    display: none;
    height: 0;
    left: 50%;
    margin-bottom: 0;
    margin-left: -8%;
    padding-top: 45px;
    position: absolute;
    width: 45px
}

@media (min-width: 768px) {
    .ios .c-iphone__home {
        display: block
    }
}

.ios .c-iphone__screen {
    width: 95%;
    margin: 0 auto
}

@media (min-width: 768px) {
    .ios .c-iphone__screen {
        width: 92%
    }
}

.ios .c-iphone__screen img {
    border: 1px solid #b4c0ca;
    height: auto;
    width: 100%
}

@media (min-width: 992px) {
    .ios .c-iphone--positioned {
        position: absolute;
        right: -145px;
        top: -15px;
        z-index: 6
    }
}

.s-branding {
    background: #71BFF1;
    overflow: hidden;
    position: relative
}

@media (min-width: 768px) {
    .s-branding {
        padding-bottom: 16em
    }
}

.s-branding::before {
    background-image: linear-gradient(-180deg, transparent 0, rgba(0, 0, 0, .08) 78%);
    bottom: 0;
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 100
}

.s-branding h2, .s-branding p {
    color: #fff
}

.s-branding p {
    font-size: 18px
}

.s-outlook.s-features .hero {
    padding-bottom: 0
}

.page-not-found {
    background: url(../images/stars.png) left top repeat, radial-gradient(closest-corner, rgba(16, 47, 70, 0) 40%, rgba(16, 35, 70, .35)), linear-gradient(#383966, #7E80E7);
    overflow: hidden;
    padding-bottom: 28em;
    position: relative
}

.page-not-found .hero {
    background: 0 0;
    overflow: visible
}

.page-not-found img {
    max-width: 100%
}

.page-not-found .c-learn-link {
    border: 1px dotted #7e80e7
}

.page-not-found .c-learn-link svg {
    position: relative;
    top: 1px
}

.page-not-found .c-learn-link p {
    line-height: 1.3
}

.page-not-found .c-learn-link:hover {
    background: #696aca
}

.page-not-found .c-learn-link:hover g, .page-not-found .c-learn-link:hover path {
    stroke: #fff
}

.page-not-found .c-illo {
    position: absolute
}

.page-not-found .c-illo__desert-bg {
    background: url(../images/desert-bg.png) repeat-x;
    background-position: bottom 0 left 55%;
    background-size: 1280px;
    bottom: 0;
    height: 360px;
    width: 100%
}

@media (min-width: 992px) {
    .page-not-found .c-illo__desert-bg {
        background-position: bottom center;
        background-size: auto;
        height: 666px
    }
}

.page-not-found .c-illo__telescope {
    background: url(../images/satellite.png) no-repeat;
    background-size: 100%;
    bottom: 246px;
    height: 72px;
    left: 55%;
    margin-left: 0;
    transform: rotateZ(-13deg);
    width: 73px
}

@media (min-width: 768px) {
    .page-not-found .c-illo__telescope {
        bottom: 252px
    }
}

@media (min-width: 992px) {
    .page-not-found .c-illo__telescope {
        animation: satellite 60s infinite;
        bottom: 510px;
        left: 50%;
        margin-left: 136px;
        height: 144px;
        width: 146px
    }
}

.page-not-found .c-illo__tumbleweed {
    animation: tumble 24s linear infinite;
    animation-delay: 7s;
    background: url(../images/tumbleweed.png) no-repeat;
    background-size: 100%;
    display: none;
    height: 121px;
    left: -100px;
    opacity: 0;
    top: 800px;
    width: 142px
}

@media (min-width: 992px) {
    .page-not-found .c-illo__tumbleweed {
        display: block
    }
}

.page-not-found .c-illo__shooting-star {
    background: url(../images/shooting-star.png) no-repeat;
    background-size: 100%;
    height: 145px;
    opacity: 0;
    right: 70%;
    top: 500px;
    transform: scale3d(.45, .45, .45);
    width: 145px
}

@media (min-width: 992px) {
    @keyframes satellite {
        0%, 100% {
            transform: rotateZ(-13deg)
        }
        25%, 75% {
            transform: translate3d(28px, -35px, 0) rotateZ(3deg)
        }
        50% {
            transform: translate3d(90px, -75px, 0) rotateZ(24deg)
        }
    }
}

@keyframes tumble {
    1%, 13%, 8% {
        opacity: 1;
        top: 820px;
        animation-timing-function: ease-out
    }
    5% {
        top: 760px;
        animation-timing-function: ease-in
    }
    11% {
        top: 770px;
        animation-timing-function: ease-in
    }
    15% {
        top: 780px;
        animation-timing-function: ease-in
    }
    18% {
        transform: rotate(1150deg);
        top: 790px;
        animation-timing-function: ease-out;
        left: 120%
    }
    20% {
        opacity: 0
    }
}

@keyframes shooting-star {
    0% {
        opacity: 0
    }
    4% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform: translate3d(1000px, -580px, 0)
    }
    5% {
        opacity: 0
    }
}

.features.plus img {
    max-width: 100%
}

.features.plus .hero {
    background: linear-gradient(#5A5EB9, #7f83e4);
    padding-bottom: 2em;
    position: relative
}

.features.plus .hero .header-content {
    margin-top: 4%
}

.features.plus .hero h1 {
    font-size: 2em;
    letter-spacing: -.5px
}

@media (min-width: 768px) {
    .features.plus .hero h1 {
        font-size: 3em
    }
}

.features.plus .hero__logo-bg {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
}

.features.plus .plus-icon {
    display: block
}

.features.plus .plus-icon svg {
    height: 50px;
    width: 50px
}

.features.plus .plus-icon svg path {
    fill: #b4c0ca
}

.features.plus .plus-pricing {
    border-top: 4px solid #7e80e7
}

.features.plus .plus-product-shot {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #D6DDE3;
    overflow: hidden;
    padding: 10px
}

.features.plus .plus-product-shot img {
    max-width: 100%
}

.features.plus .price-box {
    display: block;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
    padding: 35px 0 20px;
    text-align: center;
    -webkit-font-smoothing: antialiased
}

@media (min-width: 768px) {
    .features.plus .price-box {
        border-bottom: 0;
        font-size: 90px;
        padding: 70px 0 85px
    }
}

.features.plus .price-box span {
    letter-spacing: -7px;
    position: relative;
    -webkit-font-smoothing: antialiased
}

.features.plus .price-box span::after, .features.plus .price-box span::before {
    position: absolute;
    -webkit-font-smoothing: initial
}

.features.plus .price-box span::before {
    content: "$";
    font-size: 24px;
    left: -8px;
    top: 25px
}

@media (min-width: 768px) and (min-width: 768px) {
    .features.plus .price-box span::before {
        font-size: 30px
    }
}

.features.plus .price-box span::after {
    bottom: -8px;
    content: "/user/month";
    color: #a5b2bd;
    font-size: 14px;
    letter-spacing: normal;
    right: 2px
}

@media (min-width: 768px) {
    .features.plus .price-box span::after {
        font-size: 16px
    }
}

.features.plus .screen {
    margin: 0 auto;
    max-width: 462px
}

.features.plus .thanks-message {
    margin: 0 auto
}

.features.plus .thanks-message .avatar {
    height: 100px;
    margin: 0 auto 20px;
    width: 100px
}

.features.plus .s-teams .zoom-one {
    bottom: 1.5%;
    left: -65px
}

.features.plus .s-docs .zoom-one {
    right: -50px;
    top: -20px
}

.features.plus .screen .zoom-one {
    display: none;
    max-width: 100%;
    position: absolute;
    z-index: 1
}

@media (min-width: 992px) {
    .features.plus .screen .zoom-one {
        display: block
    }
}

.btn-plus {
    color: #696aca;
    background: #f9fafa;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .08), 0 12px 16px rgba(0, 0, 0, .08);
    border-color: #f9fafa;
    font-weight: 500;
    margin: 0 auto;
    transition: all .2s ease
}

.btn-plus:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 12px 16px rgba(0, 0, 0, .08), 0 5px 25px rgba(0, 0, 0, .08), 0 18px 30px rgba(0, 0, 0, .08);
    color: #7e80e7
}

.btn-plus:active, .btn-plus:focus {
    background: #fff;
    border-color: #fff;
    box-shadow: 8px 0 16px rgba(0, 0, 0, .08), -8px 0 16px rgba(0, 0, 0, .08);
    color: #7e80e7;
    transform: translateY(1px)
}

.btn-plus.-dark {
    background: #7e80e7;
    border-color: #7e80e7;
    color: #fbfbfe
}

.btn-plus.-dark:active, .btn-plus.-dark:focus, .btn-plus.-dark:hover {
    background: #8e91e7;
    border-color: #8e91e7;
    color: #fff
}

#plus-badge {
    color: #696aca;
    background: linear-gradient(white 0, #f1f3f5 50%, #e3e8eb 100%);
    border-radius: 4px;
    box-shadow: 0 0 2px rgba(0, 0, 0, .045), 0 12px 16px rgba(0, 0, 0, .045), 0 10px 25px rgba(0, 0, 0, .045), 0 18px 30px rgba(0, 0, 0, .045);
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1;
    margin: 0 auto;
    padding: 4px 8px 6px;
    text-transform: uppercase
}

.plus-plan-feature {
    background-image: -webkit-linear-gradient(-180deg, #6A6DC7 0, #7F83E4 87%);
    background-image: linear-gradient(-180deg, #6A6DC7 0, #7F83E4 87%);
    text-align: center
}

@media (min-width: 768px) {
    .plus-plan-feature {
        text-align: left
    }
}

.plus-plan-feature h3, .plus-plan-feature p, .plus-plan-feature p > a {
    color: #fff
}

.plus-plan-feature p > a {
    text-decoration: underline
}

.plus-plan-feature h4 {
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #d1d2f6;
    display: block;
    font-size: 12px
}

.plus-plan-feature h4 + h3 {
    margin-top: .4em
}

.plus-plan-feature .plus-image {
    padding: 0 0 3em;
    margin: 0 auto
}

@media (min-width: 768px) {
    .plus-plan-feature .plus-image {
        margin: auto;
        padding: 3em 0
    }
}

#plus-logo-mark-bg .logo-mark-svg {
    height: auto;
    left: 0;
    margin: auto;
    max-width: 500px;
    opacity: .5;
    position: absolute;
    top: 100px;
    width: 100%
}

@media (min-width: 768px) {
    #plus-logo-mark-bg .logo-mark-svg {
        left: 50%;
        max-width: 400px;
        margin-left: -200px;
        width: 100%
    }
}

#plus-logo-mark-bg .logo-mark-svg path {
    fill: #7e80e7
}

.pricing a, .pricing h2, .pricing p {
    position: relative;
    z-index: 8
}

.pricing .hero {
    background: #fff
}

.pricing .hero strong {
    color: inherit
}

@media (min-width: 768px) and (max-width: 900px) {
    .pricing .c-card {
        min-height: 345px
    }
}

.pricing .s-pricing-info a:not(.c-button) {
    color: inherit
}

.pricing .s-pricing-features a:not(.c-button) {
    color: inherit;
    border-bottom: 1px dotted #93a1af
}

.pricing .s-pricing-features a:not(.c-button):hover {
    border-bottom-color: #1d2b36
}

@media (min-width: 768px) {
    .pricing .s-pricing-features {
        margin-top: -120px;
        padding-bottom: 40px;
        padding-top: 140px
    }
}

.pricing .s-pricing-features .c-pricing__features {
    border-top: none
}

@media (min-width: 768px) {
    .pricing .s-pricing-features .c-pricing__features {
        padding: 0
    }
}

@media (min-width: 992px) {
    .pricing .s-pricing-features .c-pricing__features {
        padding: 0 30px
    }
}

.pricing .c-pricing__features {
    border-top: 1px solid #eee;
    font-size: 15px
}

.pricing .c-card--plan {
    border-color: #d6dde3
}

@media (min-width: 992px) {
    .pricing .c-card--plan .c-card__description {
        padding: 0 20px
    }
}

.pricing .c-card__price {
    font-size: 52px;
    font-weight: 300;
    letter-spacing: -1px
}

.pricing .c-card__block-head {
    padding: 30px
}

@media (min-width: 992px) {
    .pricing .c-card__block-head {
        padding: 40px
    }
}

@media (min-width: 768px) {
    .pricing .c-card--free {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }
}

@media (min-width: 768px) {
    .pricing .c-card--plus {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }
}

.pricing .c-card--recommended {
    border-radius: 0;
    position: relative;
    z-index: 2
}

@media (min-width: 768px) {
    .pricing .c-card--recommended {
        box-shadow: 0 15px 45px -5px rgba(39, 55, 74, .15), 0 15px 40px -20px rgba(39, 55, 74, .1);
        margin: 0 -1px 0
    }
}

@media (min-width: 992px) {
    .pricing .c-card--recommended {
        border-radius: 4px;
        margin: -21px -1px 0
    }
}

@media (min-width: 992px) {
    .pricing .c-card--recommended .c-card__block-head {
        padding-bottom: 50px;
        padding-top: 50px
    }
}

@media (min-width: 992px) {
    .pricing .c-card--recommended .c-card__block-head {
        padding-bottom: 60px;
        padding-top: 60px
    }
}

.pricing .c-card--free .c-button, .pricing .c-card--plus .c-button {
    border-color: #3197d6;
    color: #3197d6
}

.pricing .c-card--free .c-button:hover, .pricing .c-card--plus .c-button:hover {
    background-color: #288cca;
    border-color: #237AB3;
    color: #fff
}

.pricing .c-features-container {
    background: #f9fafa;
    text-decoration: none;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -30px !important;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #d6dde3
}

.pricing .c-features-container__toggle .c-caret-down {
    display: inline-block;
    transition: all .2s ease;
    width: 24px
}

.pricing .c-features-container__toggle .c-caret-down .link-caret-down::after {
    left: -2px;
    top: -3px
}

.pricing .c-features-container__toggle.is-active .c-caret-down {
    transform: rotate(180deg)
}

.pricing .c-info-popover + .popover .arrow {
    top: 100% !important
}

.reports .hero {
    background-size: 1000px;
    padding-bottom: 13em
}

@media (max-width: 585px) {
    .reports .hero {
        background-size: 1000px;
        background-position: bottom 0 left 70%
    }
}

@media (min-width: 768px) {
    .reports .hero {
        background-size: 1500px;
        background-position: bottom 0 left 70%;
        padding-bottom: 19em
    }
}

.reports .hero .header-content {
    margin-top: 4%
}

#reports-overview p {
    font-size: 14px
}

#reports-overview .tab-dots .tab-dot {
    border: 1px solid #A5B2BD;
    border-radius: 5px;
    display: inline-block;
    height: 12px;
    margin-right: 20px;
    width: 12px
}

#reports-overview .tab-dots .tab-dot:last-child {
    margin-right: 0
}

#reports-overview .tab-dots .tab-dot:hover {
    border-color: #8899a7
}

#reports-overview #convo-report .tab-dots .is-active {
    background: #5EAAD7;
    border-color: #5EAAD7
}

#reports-overview #prod-report .tab-dots .is-active {
    background: #67C583;
    border-color: #67C583
}

#reports-overview #user-report .tab-dots .is-active {
    background: #EEAE56;
    border-color: #EEAE56
}

#reports-overview #happiness-report .tab-dots .is-active {
    background: #8572AC;
    border-color: #8572AC
}

#reports-overview #docs-report .tab-dots .is-active {
    background: #EB706C;
    border-color: #EB706C
}

#reports-overview .s-reports-pane:before {
    content: " ";
    display: block;
    height: 308px;
    margin-top: -268px;
    pointer-events: none;
    visibility: hidden
}

@media (min-width: 768px) {
    #reports-overview .s-reports-pane:before {
        height: 140px;
        margin-top: -67px
    }
}

#reports-overview .image-side {
    height: auto;
    margin: 0 auto 4em;
    max-width: 95%;
    position: relative;
    right: 0;
    width: 600px;
    top: 0
}

@media (min-width: 768px) {
    #reports-overview .image-side {
        margin-right: -600px;
        right: 50%;
        height: 650px
    }
}

#reports-overview .image-side img {
    max-width: 100%
}

#reports-overview .report-item {
    border-radius: 6px;
    padding: 2em 0
}

@media (min-width: 768px) {
    #reports-overview .report-item {
        padding: 2em
    }
}

@media (min-width: 768px) {
    #reports-overview .report-item.is-active {
        background: #f1f3f5
    }

    #reports-overview .report-item.is-active p {
        color: #394956
    }
}

@media (max-width: 767px) {
    #reports-overview .report-item {
        display: none
    }
}

#reports-overview .highlight-images {
    display: none;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@media (min-width: 650px) {
    #reports-overview .highlight-images {
        display: block
    }
}

#reports-overview .highlight-images img {
    height: 321px;
    opacity: 0;
    transform: scale(.85);
    transition: all .2s ease-in-out;
    width: 321px
}

#reports-overview .detail-one .highlight-images div:first-child img {
    opacity: 1;
    transform: scale(1)
}

#reports-overview .detail-one .report-list div:first-child {
    display: block
}

#reports-overview .detail-two .highlight-images div:nth-child(2) img {
    opacity: 1;
    transform: scale(1)
}

#reports-overview .detail-two .report-list div:nth-child(2) {
    display: block
}

#reports-overview .detail-three .highlight-images div:nth-child(3) img {
    opacity: 1;
    transform: scale(1)
}

#reports-overview .detail-three .report-list div:nth-child(3) {
    display: block
}

#reports-overview .conversations-detail-one {
    left: 68px;
    top: 105px
}

#reports-overview .conversations-detail-two {
    left: -50px;
    top: 240px
}

#reports-overview .conversations-detail-three {
    left: 230px;
    top: 240px
}

#reports-overview .productivity-detail-one {
    right: -50px;
    top: 165px
}

#reports-overview .productivity-detail-two {
    left: 265px;
    top: 265px
}

#reports-overview .productivity-detail-three {
    left: -50px;
    top: 400px
}

#reports-overview .user-detail-one {
    left: -50px;
    top: -15px
}

#reports-overview .user-detail-two {
    left: -50px;
    top: 70px
}

#reports-overview .user-detail-three {
    left: -50px;
    top: 315px
}

#reports-overview .happiness-detail-one {
    left: 140px;
    top: 165px
}

#reports-overview .happiness-detail-two {
    left: 195px;
    top: 325px
}

#reports-overview .happiness-detail-three {
    left: -50px;
    top: 315px
}

#reports-overview .happiness-detail-three > img {
    height: 225px;
    width: 449px
}

#reports-overview .docs-detail-one {
    left: 250px;
    top: 120px
}

#reports-overview .docs-detail-two {
    left: -50px;
    top: 220px
}

#reports-overview .docs-detail-three {
    left: -50px;
    top: 375px
}

.report-view-image-container {
    max-width: 720px;
    width: 95%
}

#trust-factors a:hover {
    border-bottom: 1px solid
}

#trust-factors svg {
    height: 38px;
    width: 38px
}

#trust-factors svg path {
    fill: #8d98a1
}

.vertical {
    text-align: center
}

.vertical h4 {
    font-size: 16px
}

.vertical p {
    font-size: 14px
}

.vertical img {
    max-width: 100%
}

.vertical #mainNav {
    background: #4f5d6b
}

.vertical .hero {
    position: relative
}

.vertical .hero .logo {
    background-size: 100%;
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    position: relative
}

.vertical .hero a, .vertical .hero h2 {
    color: #fff
}

.vertical .hero.fadeBg:after {
    background: rgba(0, 0, 0, .65);
    bottom: 0;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.vertical .hero .vid-close {
    right: 15px;
    top: 22px
}

.vertical .hero .vid-close svg polygon {
    fill: rgba(255, 255, 255, .8)
}

.vertical .hero .vertical-video .vid-container-main {
    padding-top: 25%
}

.feature-block {
    margin-left: -15px;
    margin-right: -15px
}

@media (min-width: 992px) {
    .feature-block {
        margin: 3.6em 0 0
    }
}

.feature-block h4 {
    margin-top: 0
}

.feature-block .feature-item {
    margin: 1.5em 0 3.5em;
    position: relative;
    z-index: 2
}

@media (min-width: 544px) and (max-width: 991px) {
    .feature-block .feature-item {
        margin-bottom: 2.5em;
        padding: 0 20px
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .feature-block .feature-item {
        float: left;
        width: 33%
    }
}

@media (min-width: 992px) {
    .feature-block .feature-item {
        margin: 0 0 2.9em;
        padding-left: .5em;
        text-align: left;
        width: 100%
    }

    .feature-block .feature-item h4, .feature-block .feature-item p {
        padding-left: 70px
    }

    .feature-block .feature-item h4 {
        font-size: 16px
    }
}

.feature-block .feature-item:last-child {
    margin-bottom: 2em
}

.feature-block .svg {
    background: #a5b2bd
}

@media (min-width: 768px) and (max-width: 991px) {
    .vertical .hero .vertical-video .vid-container-main {
        padding-top: 10%
    }
}

@media (min-width: 768px) {
    .vertical #mainNav {
        margin-bottom: 0;
        padding-bottom: 24px
    }

    .vertical h3 {
        padding: 0 2.8em
    }

    .vertical .intro {
        margin-bottom: 3em;
        text-align: center
    }
}

@media (min-width: 992px) {
    .vertical .headline {
        margin: 110px 0 0;
        padding: 0
    }

    .vertical .hero {
        height: 595px
    }

    .vertical .hero .vertical-video .vid-container-main {
        padding-top: 7%
    }
}

.designers .headline, .designers .watch, .software .headline, .software .watch {
    margin-top: 10%
}

.designers .headline svg, .software .headline svg {
    display: none
}

.designers .content-container, .software .content-container {
    padding-bottom: 10%
}

.designers .watch figure, .software .watch figure {
    position: relative;
    margin: 0 auto;
    max-width: 470px
}

.designers .watch .frame, .software .watch .frame {
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .52);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.designers .watch img, .software .watch img {
    max-width: 100%;
    -webkit-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.designers .watch .play-video, .software .watch .play-video {
    background: rgba(255, 255, 255, .4);
    border: 5px solid #fff;
    border-radius: 100%;
    left: 50%;
    margin: -40px 0 0 -40px;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    -webkit-transition: background .25s ease;
    -o-transition: background .25s ease;
    transition: background .25s ease
}

.designers .watch .play, .software .watch .play {
    left: 39%;
    position: relative;
    top: 32%;
    width: 20px;
    height: 20px
}

.designers .watch:hover .play-video, .software .watch:hover .play-video {
    background: #3197D6
}

.software .headline h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1em;
    margin-bottom: 1em;
    text-shadow: 0 2px 2px #db6f48
}

.software .headline h1 span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    margin-bottom: 5px
}

.software .headline h2 {
    font-size: 20px;
    line-height: 1.65em;
    margin-bottom: 0
}

@media (min-width: 992px) {
    .software .headline h2 {
        margin-bottom: 2.25em
    }
}

.software .headline .grabcad {
    display: inline-block;
    top: 1px;
    width: 140px;
    height: 20px
}

.software .watch .help-desk-vid {
    z-index: 2
}

.software .help-desk img {
    margin: 2em 0
}

.software .section-docs {
    background: linear-gradient(160deg, #e0e4e7, #f3f4f6)
}

.software .section-docs h3 {
    color: inherit
}

.software .section-docs p {
    color: #777
}

.software .section-docs a {
    color: #199cd8
}

@media (min-width: 544px) and (max-width: 991px) {
    .software .hero h2 {
        max-width: 25em
    }

    .software .headline h1 {
        font-size: 50px
    }

    .software .headline h1 span {
        font-size: 24px
    }
}

@media (min-width: 992px) {
    .software .hero {
        height: 525px;
        -webkit-transition: height .1s ease-in-out;
        -o-transition: height .1s ease-in-out;
        transition: height .1s ease-in-out
    }

    .software .hero.fadeBg {
        height: 570px
    }

    .software .headline h1 {
        font-size: 48px
    }

    .software .headline svg {
        right: -275px;
        width: 185px
    }

    .designers .headline, .software .headline {
        margin: 30% 20px 0 0;
        text-align: left
    }

    .designers .headline svg, .software .headline svg {
        bottom: 30px;
        display: block;
        position: relative
    }

    .designers .watch, .software .watch {
        margin-top: 25%
    }

    .feature-highlights {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }

    .feature-highlights .highlight {
        background: #afb7c1;
        display: block;
        height: 2px;
        position: absolute
    }

    .feature-highlights .highlight:before {
        background: #afb7c1;
        content: "";
        display: block;
        border-radius: 100%;
        left: -5px;
        position: absolute;
        top: -5px;
        width: 12px;
        height: 12px
    }

    .feature-highlights .tag-highlight {
        left: -285px;
        width: 69%;
        top: 24px
    }

    .feature-highlights .replies-highlight {
        left: -190px;
        width: 48%;
        top: 163px
    }

    .feature-highlights .note-highlight {
        left: -100px;
        width: 26%;
        top: 300px
    }
}

@media (min-width: 992px) {
    .designers .hero {
        height: 545px
    }

    .designers .hero .vertical-video .vid-container-main {
        padding-top: 5%
    }
}

.designers .hero h1 {
    color: #222;
    font-size: 1.75em;
    line-height: 1.5em
}

@media (min-width: 768px) {
    .designers .hero h1 {
        font-size: 2.25em
    }
}

.designers .hero h2 {
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600
}

.designers .hero a, .designers .hero h2 {
    color: #c00
}

.designers .headline > a:hover {
    text-decoration: underline
}

.designers .headline > svg {
    fill: gray
}

@media (min-width: 992px) {
    .designers .headline > svg {
        right: -175px;
        width: 220px
    }
}

.designers .headline > svg path {
    fill: #cac3c3
}

@media (min-width: 544px) and (max-width: 991px) {
    .designers .headline h1 {
        padding: 0 2em
    }
}

.designers .headline .tattly {
    display: block;
    height: 55px;
    margin: 0 auto 20px;
    top: 1px;
    width: 140px
}

.designers #mainNav {
    background: #143d57
}

.online-services .hero {
    background-position: -165px 0
}

.online-services .hero .headline {
    padding: 6.5em 0 6em
}

.online-services .vhx {
    width: 65px;
    height: 26px
}

.online-retailers .hero .headline, .online-services .hero .headline {
    padding: 4em 0 6em
}

.online-retailers .hero h1, .online-services .hero h1 {
    font-size: 34px;
    margin: .3em 0 1em
}

.online-retailers .hero .watch a, .online-services .hero .watch a {
    border: 2px solid #fff;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 8px 25px 15px 20px;
    position: relative;
    -webkit-transition: background .25s ease;
    -o-transition: background .25s ease;
    transition: background .25s ease
}

.online-retailers .hero .watch a:hover, .online-services .hero .watch a:hover {
    background: rgba(255, 255, 255, .1)
}

.online-retailers .hero .play, .online-services .hero .play {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 20px;
    height: 16px
}

.online-retailers h3 {
    padding: 0 .5em
}

.online-retailers .hero .timbuk2 {
    display: block;
    margin: 0 auto 10px;
    width: 200px;
    height: 25px
}

.online-retailers .help-desk, .online-retailers .manage {
    overflow-y: auto
}

.online-retailers .works {
    margin: 1em -15px 3.5em
}

.online-retailers .no {
    margin-bottom: 3em
}

.online-retailers .no img {
    margin: 1em 0
}

.online-retailers .no:last-child {
    margin-bottom: 0
}

.online-retailers .section-same-page {
    padding-bottom: 1em
}

.online-retailers .section-same-page h3 {
    margin-top: 0
}

.online-retailers .profile {
    padding-bottom: 1em
}

.online-retailers .profile img {
    max-width: 619px
}

.online-retailers .cart-logos {
    margin-top: 2.5em
}

.online-retailers .cart-logos > div {
    background-size: 85%;
    height: 36px;
    margin-bottom: 1.8em;
    padding: 0 19px
}

@media (min-width: 544px) {
    .online-retailers .cart-logos > div {
        background-size: contain
    }
}

@media (min-width: 544px) and (max-width: 991px) {
    .online-retailers .hero .headline, .online-services .hero .headline {
        padding: 4em 1em 6em
    }

    .online-retailers .hero h1, .online-services .hero h1 {
        font-size: 30px;
        line-height: 42px
    }

    .online-services .hero {
        background-position: 0 0
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .online-retailers .hero .headline {
        padding: 4em 0 6em
    }

    .online-retailers .no img {
        width: 75%
    }

    .online-retailers .profile, .online-retailers .section-same-page {
        padding: 4.5em 15px
    }

    .online-retailers .profile img {
        margin-bottom: 3em
    }
}

@media (min-width: 992px) {
    .online-services .hero {
        background-position: 0, 0
    }

    .online-services .vhx {
        width: 80px;
        height: 32px
    }

    .online-retailers .hero .headline {
        padding: 4.5em 0
    }

    .online-retailers .help-desk p {
        padding: 0 3em
    }

    .online-retailers .help-desk .screenshot-wrap {
        margin-top: 2em
    }

    .online-retailers .profile, .online-retailers .section-same-page {
        padding: 8em 0
    }

    .online-retailers .profile img {
        margin-top: 3em
    }
}

.generic.why-help-scout .content-callout p, .generic.why-help-scout .content-callout strong {
    color: #1F5E89
}

.generic.why-help-scout .content-callout .caps, .generic.why-help-scout .content-callout p {
    font-size: 22px
}

.generic.why-help-scout .everything {
    margin: 3em 0 5em
}

@media (min-width: 1000px) {
    .generic.why-help-scout .everything {
        margin: 5em 0 10em;
        padding-bottom: 0
    }
}

.generic.why-help-scout .product {
    background: #fff;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    padding: 3.4em 30px;
    text-align: center;
    width: 250px;
    height: 250px
}

@media (max-width: 599px) {
    .generic.why-help-scout .product {
        margin: 0 auto 3em
    }
}

.generic.why-help-scout .product svg {
    width: 25px;
    height: 25px
}

.generic.why-help-scout .product .container-bordered {
    padding: 6em 3em
}

.generic.why-help-scout .product p {
    color: #a2a9b1;
    font-size: 12px
}

.generic.why-help-scout .product h4 {
    font-size: 22px
}

.generic.why-help-scout .product h4:after {
    background: #E3E8EB;
    content: "";
    display: block;
    margin: 14px auto 18px;
    width: 50px;
    height: 2px
}

.generic.why-help-scout .help-desk h4 {
    color: #FFC646
}

.generic.why-help-scout .help-desk .connection {
    left: -258px;
    text-align: right;
    top: 135px
}

.generic.why-help-scout .help-desk path {
    fill: #FFC646
}

.generic.why-help-scout .help-desk .action-callout:hover:before {
    border-color: #FFC646
}

.generic.why-help-scout .docs h4 {
    color: #3196D5
}

.generic.why-help-scout .docs .connection {
    bottom: -70px;
    right: -100px;
    text-align: center
}

.generic.why-help-scout .docs path {
    fill: #3196D5
}

.generic.why-help-scout .docs .action-callout:hover:before {
    border-color: #3196D5
}

.generic.why-help-scout .beacon .product {
    margin-bottom: 0
}

.generic.why-help-scout .beacon h4 {
    color: #62CBB1
}

.generic.why-help-scout .beacon .connection {
    right: -88px;
    text-align: left;
    top: -115px
}

.generic.why-help-scout .beacon path {
    fill: #62CBB1
}

.generic.why-help-scout .beacon .action-callout:hover:before {
    border-color: #62CBB1
}

@media (min-width: 600px) and (max-width: 999px) {
    .generic.why-help-scout .product {
        display: none
    }
}

.generic.why-help-scout .connection {
    display: none
}

@media (min-width: 1000px) {
    .generic.why-help-scout .connection {
        display: block;
        position: absolute;
        width: 210px
    }

    .generic.why-help-scout .connection p {
        font-size: 16px;
        color: #868f9a
    }
}

@media (min-width: 600px) and (max-width: 999px) {
    .generic.why-help-scout .everything {
        background: url(../images/all-products-bg.png) no-repeat center;
        background-size: 92%;
        padding-bottom: 65%
    }
}

@media (min-width: 1000px) {
    .generic.why-help-scout .everything {
        background: url(../images/product-circle-bg.png) no-repeat center 65px;
        background-size: 410px, 434px
    }
}

.generic.why-help-scout .hero {
    background: #fff;
    margin-bottom: 4em;
    padding-bottom: 0
}

.generic.why-help-scout .hero h2, .generic.why-help-scout .hero h2 strong {
    color: #2a4258
}

.generic.why-help-scout .hero h2 {
    margin-bottom: 20px
}

.generic.why-help-scout .hero img {
    max-width: 100%
}

.generic.why-help-scout .hero strong {
    font-weight: 500
}

.generic.why-help-scout .logo-mark-svg path {
    fill: #C1CBD4
}

.generic.why-help-scout .section:after {
    clear: both;
    content: "";
    display: block;
    margin-bottom: 3em
}

@media (min-width: 767px) {
    .generic.why-help-scout .section:after {
        margin-bottom: 5em
    }
}

.generic.why-help-scout .section:last-child:after {
    margin-bottom: 0
}

@media (min-width: 767px) {
    .generic.why-help-scout .section-content.m--content-left {
        float: left;
        width: 55%
    }

    .generic.why-help-scout .section-content.m--content-right {
        float: right;
        width: 55%
    }

    .generic.why-help-scout .m--img-right {
        float: right;
        margin-right: -150px;
        width: 55%
    }

    .generic.why-help-scout .m--img-left {
        float: left;
        margin-left: -150px;
        width: 55%
    }
}

.generic.why-help-scout .browser-bar {
    margin-top: 3em
}

@media (min-width: 767px) {
    .generic.why-help-scout .browser-bar {
        margin-top: 10px
    }
}

.generic.why-help-scout .browser-bar > img {
    max-width: 100%
}

.generic.why-help-scout .section-divider {
    border: 0;
    display: block;
    margin: 4em 0 5em;
    text-align: center
}

.generic.why-help-scout .section-divider:after {
    color: rgba(0, 0, 0, .3);
    content: '.....';
    display: inline-block;
    font-family: georgia, serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 12px;
    line-height: 0;
    width: 80px
}

.s-workflows .hero {
    background: #3197d6;
    background-image: -webkit-linear-gradient(304deg, #3197D6 0, #6A6DC7 82%);
    background-image: -o-linear-gradient(304deg, #3197D6 0, #6A6DC7 82%);
    background-image: linear-gradient(34deg, #3197D6 0, #6A6DC7 82%)
}

.s-workflows .path {
    animation: draw 10s infinite linear
}

@keyframes draw {
    50% {
        stroke-dashoffset: 0
    }
}

@media (min-width: 992px) {
    .s-workflows p + p {
        font-size: 17px
    }
}

.s-workflows .workflows-svg {
    display: none
}

@media (min-width: 768px) {
    .s-workflows .workflows-svg {
        display: block
    }
}

.s-workflows .workflows-svg svg {
    width: 100%
}

.s-workflows .link-caret-right::after {
    top: -1px
}

@media (min-width: 992px) {
    .s-workflows .c-tab-hilite__content {
        height: 389px
    }
}

@media print {
    .blog-featured {
        -webkit-print-color-adjust: exact
    }

    .blog-featured * {
        -webkit-print-color-adjust: exact
    }

    .c-main-nav__menu-icon {
        display: none !important
    }

    .c-main-nav__nav-right {
        display: none !important
    }

    .c-main-nav .o-flexy, .c-main-nav .o-flexy\@md {
        display: block
    }

    .c-main-nav .o-flexy__item, .c-main-nav .o-flexy__block, .c-main-nav .o-flexy\@md__item, .c-main-nav .o-flexy\@md__block {
        display: inline
    }

    .c-main-nav .navbar-brand {
        width: auto
    }

    .c-main-nav a[href]:after {
        display: none
    }

    #disqus_thread {
        display: none
    }

    .share-this-post {
        display: none
    }

    .hs-shareberry-share {
        display: none !important
    }

    #nl-pop {
        display: none !important
    }
}

.icon-text-spacing {
    margin-bottom: 6px;
}