@charset "UTF-8";
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/*
 * Normalization
 */

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
}

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

b,
strong {
    font-weight: bolder;
}


details {
    display: block;
}

hr {
    overflow: visible;
}

/*html {*/
    /*-ms-overflow-style: -ms-autohiding-scrollbar;*/
    /*overflow-y: scroll;*/
    /*-webkit-text-size-adjust: 100%;*/
/*}*/

/*input {*/
    /*-webkit-border-radius: 0;*/
/*}*/

/*input[type="number"] {*/
    /*width: auto;*/
/*}*/

/*input[type="search"] {*/
    /*-webkit-appearance: textfield;*/
/*}*/

/*main {*/
    /*display: block;*/
/*}*/

/*pre {*/
    /*overflow: auto;*/
/*}*/

/*progress {*/
    /*display: inline-block;*/
/*}*/

/*summary {*/
    /*display: block;*/
/*}*/

/*svg:not(:root) {*/
    /*overflow: hidden;*/
/*}*/

/*template {*/
    /*display: none;*/
/*}*/

/*textarea {*/
    /*overflow: auto;*/
/*}*/

/*[hidden] {*/
    /*display: none;*/
/*}*/

/*
 * Universal inheritance
 */
*,
::before,
::after {
    box-sizing: inherit;
}

* {
    font-size: inherit;
    line-height: inherit;
}

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

/*
 * Opinionated defaults
 */
* {
    margin: 0;
    padding: 0;
}

*,
::before,
::after {
    border-style: solid;
    border-width: 0;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand {
    display: none;
}

select::-ms-value {
    color: currentColor;
}

svg {
    fill: currentColor;
}

[aria-busy="true"] {
    cursor: progress;
}

[aria-controls] {
    cursor: pointer;
}

[aria-disabled] {
    cursor: default;
}

[hidden][aria-hidden="false"] {
    clip: rect(0 0 0 0);
    display: inherit;
    position: absolute;
}

[hidden][aria-hidden="false"]:focus {
    clip: auto;
}

/*
 * Configurable defaults
 */
* {
    background-repeat: no-repeat;
}

:root {
    background-color: #ffffff;
    box-sizing: border-box;
    color: #000000;
    cursor: default;
    font: 66.66667% sans-serif;
}

a {
    text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}



small {
    font-size: 75%;
}


textarea {
    resize: vertical;
}

::-moz-selection {
    background-color: #b3d4fc;
    color: #ffffff;
    text-shadow: none;
}

::selection {
    background-color: #b3d4fc;
    color: #ffffff;
    text-shadow: none;
}

/* Note: This either needs to be completely replaced or needs to go away entirely.
 * There are much better approaches to handling REM font sizing (and REM fallbacks)
 * using off-the-shelf libraries + PostCSS processors
 */
/* Note: this keeps the margins consistent on the text elements between mobile and desktop
 * Adding a breakpoint will create unified control across breakpoints
 */
/* Note: this is just to streamline styling placeholders.
 */
/* Note: the palette function is included here (vs in the tools directory)
 * since both of these needed in order to work properly
 */
/** Ex. Light brown
p {
  color: palette(brown, light);
}
**/

@font-face {
    font-family: "icomoon";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/icomoon.woff") format("woff")
}



.wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wrapper:after {
    content: " ";
    display: block;
    clear: both;
}

.row {
    display: block;
}

.clearfix:after, .row:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* Note: Add the .hidden class to GNorm, this class is intended to be used on links
 * that should not display their text, ex. a icon button.
 */
.hidden {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

/* Note: This mixin adds top and bottom margins to elements.
 * This maintain a consistent layout from breakpoint to breakpoint and a singular place to update.
 * The option "margin-control-center" will maintain the top and bottom margins and add auto to the left and right
 * The option "margin-control-override" will remove all margins from the element (useful for scoped HTML tags)
 */

/*h1, h2, h3, h4, h5, h6, hgroup,*/
/*ul, ol, dd,*/
/*p, figure,*/
/*pre, table, fieldset, hr {*/
    /*margin: 1.5rem 0;*/
/*}*/

@media (max-width: 800px) {
    .desktop-show {
        display: none !important;
    }
}

@media (min-width: 800px) {
    .mobile-show {
        display: none !important;
    }
}

/* Note: Will be replaced once SVG feature branch is completed */
[class^='icon-'],
[class*=' icon-'] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^='icon-']:before,
[class*=' icon-']:before {
    font-size: inherit;
    vertical-align: middle;
    display: inline-block;
    margin-right: 1.5rem;
}

.icon {
    font-size: 2rem;
}

.icon-check:before {
    content: "\e900";
}

.icon-star:before {
    content: "\e901";
}

.icon-comment-square:before {
    content: "\e902";
}

.icon-arrow-right:before {
    content: "\e903";
}

.icon-arrow-left:before {
    content: "\e904";
}

.icon-arrow-down:before {
    content: "\e905";
}

.icon-arrow-up:before {
    content: "\e906";
}

.arrow-link:after,
.icon-long-arrow-right:before {
    content: "\e907";
}

.icon-long-arrow-left:before {
    content: "\e908";
}

.icon-long-arrow-up:before {
    content: "\e909";
}

.icon-long-arrow-down:before {
    content: "\e90a";
}

.icon-share:before {
    content: "\e90c";
}

.icon-triangle-up:before {
    content: "\e90d";
}

dl dt:before,
.icon-triangle-right:before {
    content: "\e90e";
}

.icon-triangle-left:before {
    content: "\e90f";
}

.icon-triangle-down:before {
    content: "\e910";
}

.icon-plus:before {
    content: "\e911";
}

.icon-chevron-thin-up:before {
    content: "\e912";
}

.icon-chevron-thin-right:before {
    content: "\e913";
}

.icon-chevron-thin-left:before {
    content: "\e914";
}

.select-container:after, .accordion-toggle:after,
.icon-chevron-thin-down:before {
    content: "\e915";
}

.icon-twitter:before {
    content: "\e916";
}

.icon-facebook:before {
    content: "\e917";
}

.icon-instagram:before {
    content: "\e918";
}

.icon-linkedin:before {
    content: "\e919";
}

.icon-wechat:before {
    content: "\e91a";
}

.icon-sina-weibo:before {
    content: "\e91b";
}

/* Note: The ":root" selector allows you to target the highest-level "parent"
 * element in the DOM, or document tree.
 * (https://css-tricks.com/almanac/selectors/r/root)
 */
:root {
    position: relative;
}

:root:before {
    bottom: 0;
    content: "";
    left: 0;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 1400px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    position: relative;
    width: 100%;
}

.wrapper.main-wrapper {
    padding-bottom: 15px;
    z-index: 1;
}

/*.wrapper.main-wrapper:after {*/
    /*background-color: #241f20;*/
    /*bottom: 0;*/
    /*content: '';*/
    /*height: 15px;*/
    /*left: 0;*/
    /*position: absolute;*/
    /*right: 0;*/
/*}*/

@media (min-width: 1000px) {
    .wrapper.main-wrapper {
        padding-bottom: 60px;
    }

    .wrapper.main-wrapper:after {
        height: 60px;
    }
}

.section-container {
    background-color: #fff;
    margin: 0;
    padding: 20px 0;
    position: relative;
}

.section-container.dark {
    background-color: #f8f7f6;
}

.section-container.gray {
    background-color: #f8f7f6;
}

.section-container.light-blue {
    background-color: #d8f6f6;
}

.section-container.remove-space {
    padding: 0;
    margin-bottom: 0;
}

.section-container.show-background {
    margin-bottom: 20px;
}

@media (min-width: 600px) {
    .section-container.show-background {
        margin-bottom: 60px;
    }
}

@media (min-width: 600px) {
    .section-container {
        padding: 60px 45px;
    }
}

button {
    border: none;
}



/*dl,*/
/*ol,*/
/*ul {*/
    /*margin-left: 3rem;*/
/*}*/

/*dl {*/
    /*display: block;*/
    /*margin: 0 0 30px;*/
    /*width: 100%;*/
/*}*/

/*@media (min-width: 800px) {*/
    /*dl {*/
        /*margin: 0 0 50px;*/
    /*}*/
/*}*/

/*dl dd,*/
/*dl dt {*/
    /*font-size: 14px !important;*/
    /*line-height: 20px !important;*/
    /*font-size: 1.4rem !important;*/
    /*line-height: 2rem !important;*/
    /*padding-left: 20px;*/
/*}*/

@media (min-width: 800px) {
    dl dd,
    dl dt {
        font-size: 16px !important;
        line-height: 25px !important;
        font-size: 1.6rem !important;
        line-height: 2.5rem !important;
        padding-left: 38px;
    }
}

dl dt {
    border-top: 2px solid #f8f7f6;
    display: block;
    color: #5a5a5a;
    cursor: pointer;
    font-family: "Source Han Sans CN normal", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-top: 30px;
    padding-top: 30px;
    position: relative;
}

@media (min-width: 800px) {
    dl dt {
        margin-top: 50px;
        padding-top: 50px;
    }
}

dl dt:hover {
    color: RGB(237,28,131);
}

dl dt:before {
    color: currentColor;
    font-family: "icomoon";
    font-size: 15px;
    left: -6px;
    line-height: 12px;
    position: absolute;
    transition: color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    top: 36px;
}

@media (min-width: 800px) {
    dl dt:before {
        font-size: 20px;
        top: 56px;
    }
}

dl dt:after {
    background-color: #5a5a5a;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    top: -2px;
    transition: background-color 0.3s ease-in-out;
    width: 18px;
}

@media (min-width: 800px) {
    dl dt:after {
        width: 26px;
    }
}

dl dt.active-dd:before {
    color: RGB(237,28,131);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

dl dt.active-dd:after {
    background-color: RGB(237,28,131);
}

dl dd {
    color: #444444;
    display: none;
    font-family: "Source Han Sans CN normal", "Circular", Helvetica, Arial, sans-serif;
    margin: 0;
}

/*ol,*/
/*ul {*/
    /*padding: 10px 0;*/
/*}*/

/*ol li,*/
/*ul li {*/
    /*line-height: 18px;*/
    /*margin-bottom: 20px;*/
    /*position: relative;*/
/*}*/

/*ol li:last-child,*/
/*ul li:last-child {*/
    /*margin-bottom: 0;*/
/*}*/

/*ol {*/
    /*counter-reset: ol-counter;*/
/*}*/

/*ol li {*/
    /*list-style-type: none;*/
    /*padding-left: 35px;*/
/*}*/

/*ol li:before {*/
    /*background-color: transparent;*/
    /*border: 1px solid #5a5a5a;*/
    /*border-radius: 50%;*/
    /*color: #5a5a5a;*/
    /*content: counter(ol-counter, decimal);*/
    /*counter-increment: ol-counter;*/
    /*display: block;*/
    /*font-family: "Source Han Sans CN normal", "Circular", Helvetica, Arial, sans-serif;*/
    /*font-size: 12px;*/
    /*font-weight: 400;*/
    /*height: 16px;*/
    /*left: 0;*/
    /*line-height: 13px;*/
    /*margin-right: 8px;*/
    /*position: absolute;*/
    /*text-align: center;*/
    /*top: 0;*/
    /*width: 16px;*/
/*}*/

/*ul li {*/
    /*list-style-position: inside;*/
/*}*/

/** {*/
    /*box-sizing: border-box;*/
    /*word-wrap: normal;*/
    /*-webkit-tap-highlight-color: transparent;*/
/*}*/

/*html {*/
    /*font-size: 62.5%;*/
    /*height: 100%;*/
    /*min-height: 100vh;*/
/*}*/

body {
    font-size: 16px !important;
    line-height: 24px !important;
    font-size: 1.6rem !important;
    line-height: 2.4rem !important;
    background-color: #fff;
    font-family: "Source Han Sans CN normal", Helvetica, Arial, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.fonts-loaded body {
    font-family: "Source Han Sans CN normal", "Circular", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

table [data-toggle] {
    display: none;
}


em {
    font-style: italic;
}

strong {
    font-weight: 700;
}

.arrow-link {
    color: #6ba4a4;
    position: relative;
}

.arrow-link:after {
    color: currentColor;
    font-family: "icomoon";
    font-size: 80%;
    margin-left: 2%;
    transition: margin-left 0.3s ease-in-out;
}

.arrow-link:active, .arrow-link:hover {
    color: #5a5a5a;
}

.arrow-link:active:after, .arrow-link:hover:after {
    margin-left: 2.2%;
}





.section-content .sidebar, .section-content .main {
    border-top: 1px solid RGB(237,28,131);
    padding-top: 30px;
}

@media (min-width: 800px) {
    .section-content .sidebar, .section-content .main {
        padding-top: 45px;
    }
}

.section-content .sidebar {
    padding-bottom: 30px;
}

@media (min-width: 800px) {
    .section-content .sidebar {
        padding-bottom: 45px;
    }
}

.section-content .sidebar *:first-child {
    margin: 0;
}

@media (min-width: 800px) {
    .section-content .sidebar *:first-child {
        margin: 1.5rem 0 30px;
    }
}

.section-content h3 {
    font-size: 18px !important;
    line-height: 22px !important;
    font-size: 1.8rem !important;
    line-height: 2.2rem !important;
    margin: 0 0 15px;
}

@media (min-width: 800px) {
    .section-content h3 {
        font-size: 24px !important;
        line-height: 30px !important;
        font-size: 2.4rem !important;
        line-height: 3rem !important;
        margin: 0 0 30px;
    }
}

.section-content .main:first-child {
    width: 100%;
}

.section-content .main img {
    max-width: 100%;
    width: auto;
}

.section-content .main h2 {
    font-size: 20px !important;
    line-height: 26px !important;
    font-size: 2rem !important;
    line-height: 2.6rem !important;
    margin: 0 0 25px;
}

@media (min-width: 800px) {
    .section-content .main h2 {
        font-size: 24px !important;
        line-height: 30px !important;
        font-size: 2.4rem !important;
        line-height: 3rem !important;
        margin: 0 0 25px;
    }
}

.section-content .main h3 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-size: 1.6rem !important;
    line-height: 2.4rem !important;
    margin: 0 0 15px;
}

@media (min-width: 800px) {
    .section-content .main h3 {
        font-size: 18px !important;
        line-height: 24px !important;
        font-size: 1.8rem !important;
        line-height: 2.4rem !important;
        margin: 0 0 30px;
    }
}

.section-content .main h3:first-child, .section-content .main p:first-child, .section-content .main hr:first-child, .section-content .main figure:first-child, .section-content .main blockquote:first-child {
    margin-top: 15px;
}

.section-content .main h3:last-child, .section-content .main p:last-child, .section-content .main hr:last-child, .section-content .main figure:last-child, .section-content .main blockquote:last-child {
    margin-bottom: 0;
}

.section-content .main p {
    margin: 15px 0;
}

@media (min-width: 800px) {
    .section-content .main p {
        margin: 30px 0;
    }

    .section-content .main p + p {
        margin-top: -30px;
    }
}

.section-content .main p:first-child:last-child {
    margin-bottom: 0;
}

.section-content .main hr {
    border-bottom: 1px solid #cc2649;
    margin: 30px 0;
}

@media (min-width: 800px) {
    .section-content .main hr {
        margin: 60px 0;
    }
}

.section-content .main figure {
    margin: 30px 0;
}

.section-content .main figure img {
    margin-bottom: 15px;
}

.section-content .main figure figcaption {
    font-size: 13px !important;
    line-height: 18px !important;
    font-size: 1.3rem !important;
    line-height: 1.8rem !important;
    color: #9b9b9b;
    letter-spacing: 0.01em;
    max-width: 500px;
}

@media (min-width: 800px) {
    .section-content .main figure {
        margin: 60px 0;
    }

    .section-content .main figure img {
        margin-bottom: 30px;
    }
}


.section-content .main blockquote {
    font-size: 20px !important;
    line-height: 36px !important;
    font-size: 2rem !important;
    line-height: 3.6rem !important;
    background-color: #faf8e6;
    color: #f5bd47;
    font-family: "Source Han Sans CN normal", "Utopia", Helvetica, Arial, sans-serif;
    margin: 30px 0;
    padding: 30px;
}

.section-content .main blockquote span {
    font-size: 10px !important;
    line-height: 16px !important;
    font-size: 1rem !important;
    line-height: 1.6rem !important;
    color: #000;
    display: block;
    font-family: "Source Han Sans CN normal", "Circular", Helvetica, Arial, sans-serif;
    letter-spacing: 0.18em;
    margin: 45px 0 0;
    text-transform: uppercase;
}

.section-content .main blockquote span strong {
    display: block;
}

@media (min-width: 1000px) {
    .section-content .main blockquote span {
        font-size: 12px !important;
        line-height: 20px !important;
        font-size: 1.2rem !important;
        line-height: 2rem !important;
    }
}

@media (min-width: 800px) {
    .section-content .main blockquote {
        font-size: 30px !important;
        line-height: 45px !important;
        font-size: 3rem !important;
        line-height: 4.5rem !important;
        margin: 60px 0;
        padding: 60px;
    }
}

.section-content .main ul {
    margin: 0;
    padding: 0;
}

.section-content .main ul li {
    font-size: 14px !important;
    line-height: 23px !important;
    font-size: 1.4rem !important;
    line-height: 2.3rem !important;
    display: block;
    margin: 0 0 30px;
    padding-left: 30px;
    position: relative;
}

.section-content .main ul li:before {
    font-size: 15px !important;
    line-height: 15px !important;
    font-size: 1.5rem !important;
    line-height: 1.5rem !important;
    color: RGB(237,28,131);
    content: '\e903';
    font-family: icomoon;
    left: 0;
    position: absolute;
    top: 4px;
}

@media (min-width: 800px) {
    .section-content .main ul li {
        font-size: 16px !important;
        line-height: 24px !important;
        font-size: 1.6rem !important;
        line-height: 2.4rem !important;
        padding-left: 45px;
    }
}

.section-content .main ol {
    margin: 0;
    padding: 0;
}

.section-content .main ol li {
    font-size: 14px !important;
    line-height: 23px !important;
    font-size: 1.4rem !important;
    line-height: 2.3rem !important;
    display: block;
    margin: 0 0 30px;
    padding-left: 30px;
    position: relative;
}

.section-content .main ol li:before {
    border: 0;
    color: #000;
    content: counter(ol-counter, decimal) ".";
    font-size: inherit;
    line-height: inherit;
}

@media (min-width: 800px) {
    .section-content .main ol li {
        font-size: 16px !important;
        line-height: 24px !important;
        font-size: 1.6rem !important;
        line-height: 2.4rem !important;
        padding-left: 45px;
    }
}


.blog-landing .wrapper.main-wrapper {
    z-index: 2;
}

.blog-landing .wrapper.main-wrapper:after {
    display: none;
}

.blog-landing .section-container {
    margin-bottom: 0;
}

@media (min-width: 600px) {
    .blog-landing .section-container {
        padding: 20px 0;
    }
}

@media (min-width: 1000px) {
    .blog-landing .section-container {
        padding: 60px 45px 0;
    }
}