@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

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

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

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

a {
    background-color: transparent
}

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

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

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

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

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

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

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

* {
    box-sizing: border-box
}

body {
    min-width: 0;
    color: #000;
    font: 14px/1.5 Open Sans, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 400;
    background: #000
}

@media (min-width:375px) {
    body {
        font-size: 16px;
        font-size: calc(14px + 2*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {
    body {
        font-size: 16px
    }
}

body.ru-ru {
    font-family: Open Sans, Helvetica, Arial, sans-serif
}

body.ja-jp {
    font-family: メイリオ, Meiryo, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, 游ゴシック, Yu Gothic
}

body.ko-kr {
    font-family: 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum
}

body.ko-kr h1,
body.ko-kr h2,
body.ko-kr h3,
body.ko-kr h4,
body.ko-kr h5,
body.ko-kr h6 {
    font-weight: 500
}

body.ko-kr h1,
body.ko-kr h2,
body.ko-kr h3,
body.ko-kr h4,
body.ko-kr h5,
body.ko-kr h6,
body.ko-kr p {
    word-break: keep-all
}

body.th-th {
    font-family: Thonburi, Ayuthaya, Krungthep
}

body.zh-tw {
    font-family: 微軟正黑, Microsoft JhengHei, Tei TC
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    *zoom: 1
}

.h1:after,
.h1:before,
.h2:after,
.h2:before,
.h3:after,
.h3:before,
.h4:after,
.h4:before,
.h5:after,
.h5:before,
.h6:after,
.h6:before,
h1:after,
h1:before,
h2:after,
h2:before,
h3:after,
h3:before,
h4:after,
h4:before,
h5:after,
h5:before,
h6:after,
h6:before {
    display: table;
    content: "";
    line-height: 0
}

.h1:after,
.h2:after,
.h3:after,
.h4:after,
.h5:after,
.h6:after,
h1:after,
h2:after,
h3:after,
h4:after,
h5:after,
h6:after {
    clear: both
}

b,
strong {
    font-weight: 600
}

@font-face {
    font-family: Bliz Quadrata;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/bliz-quadrata.e0f90925e1d07f6b5e9d11cbb9dd66c5.woff);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Bliz Quadrata Bold;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/bliz-quadrata-bold.5a73bc27e200d0ea5b13b998ae163dd4.woff);
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Open Sans;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-400.90122d243fd7fe8aa52ee395fd9767f9.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-400.90122d243fd7fe8aa52ee395fd9767f9.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-400.04ab81a2d30594252d9062c3c75352bb.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-400.de8a44e33967fdcc35277c11da86217a.ttf) format("truetype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-400.1d582836ac88163231252bb88fcee0e1.svg#Open%20Sans) format("svg");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Open Sans Semibold;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-600.2bd263e8274505520fa22fa276ff9fdf.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-600.2bd263e8274505520fa22fa276ff9fdf.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-600.d94994a0ca5d4f7ac5dede315a3517f6.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-600.2f8fb890261632d722c377a7525053ee.ttf) format("truetype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/open-sans-600.86ad337fceab386dc5968726ec3bb316.svg#Open%20Sans%20Semibold) format("svg");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Heroes Icons;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/heroes.c63a1dd0dd31943e8bd3e14ddb1358fa.woff);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Belwe Bold;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/Belwe-Bold.d2b4eb84b1152050a61785779d69e8f3.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/Belwe-Bold.d2b4eb84b1152050a61785779d69e8f3.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/Belwe-Bold.375b8bbe5070785a402d704fab58d727.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/Belwe-Bold.c5a8c4f82bb7708f40dae984077289df.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Benguiat Bold;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/BLB85__W.dfa578ac401a856a0ca6d0e0a6514383.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/BLB85__W.dfa578ac401a856a0ca6d0e0a6514383.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/BLB85__W.1b61cdaed07a46ec1097f4b595132f4f.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/BLB85__W.63ee78e5c14c86c09adeec04235160cd.ttf) format("truetype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/BLB85__W.d9b105b45c0b9b1d47e73d69b9f5c324.svg#Benguiat%20Bold) format("svg");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Sapphire;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/YDISapphIIM.bf26dcf80aa826ce1d8c9283625e6c8c.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/YDISapphIIM.bf26dcf80aa826ce1d8c9283625e6c8c.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/YDISapphIIM.7c80b2e6e78348f21fdf561027730704.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/YDISapphIIM.5a88e0292e0f96e8596f3fa51ed80f3b.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Asadong;
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/PSLAsadongPro.ddc06225ae43a76c1fd75c4cab79040e.eot);
    src: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/PSLAsadongPro.ddc06225ae43a76c1fd75c4cab79040e.eot#iefix) format("embedded-opentype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/PSLAsadongPro.52a45d280c3a0a303ccf25bcc79a3469.woff) format("woff"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/PSLAsadongPro.e23f8b32c026459c482305bc0a546b0f.ttf) format("truetype"), url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/PSLAsadongPro.edd753f005804ef42845b49c2fa8afc8.svg#Asadong) format("svg");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

.h1,
h1 {
    font-size: 36.491px;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    color: #233a6e;
    font-weight: 700;
    text-transform: none;
    -webkit-font-smoothing: antialiased
}

@media (min-width:375px) {

    .h1,
    h1 {
        font-size: 48px;
        font-size: calc(36.491px + 11.509*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h1,
    h1 {
        font-size: 48px;
        margin-top: .625em;
        line-height: .75em;
        margin-bottom: .625em
    }
}

.h1 .small,
.h1 small,
.h2,
.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,
h2 .small,
h2 small,
h3 .small,
h3 small,
h4 .small,
h4 small,
h5 .small,
h5 small,
h6 .small,
h6 small {
    text-transform: none
}

.h2,
h2 {
    font-size: 28px;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    color: #233a6e;
    font-weight: 700;
    -webkit-font-smoothing: antialiased
}

@media (min-width:375px) {

    .h2,
    h2 {
        font-size: 39px;
        font-size: calc(28px + 11*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h2,
    h2 {
        font-size: 39px;
        margin-top: .76923em;
        line-height: .92308em;
        margin-bottom: .76923em
    }
}

.h3,
h3 {
    font-size: 22.781px;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    color: #233a6e;
    font-weight: 700;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    margin: .15em 0
}

@media (min-width:375px) {

    .h3,
    h3 {
        font-size: 31px;
        font-size: calc(22.781px + 8.219*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h3,
    h3 {
        font-size: 31px;
        margin-top: .96774em;
        line-height: 1.16129em;
        margin-bottom: .96774em
    }
}

.h4,
h4 {
    font-size: 20.25px;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    color: #233a6e;
    font-weight: 700;
    text-transform: none;
    -webkit-font-smoothing: antialiased
}

@media (min-width:375px) {

    .h4,
    h4 {
        font-size: 25px;
        font-size: calc(20.25px + 4.75*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h4,
    h4 {
        font-size: 25px;
        margin-top: 1.2em;
        line-height: 1.44em;
        margin-bottom: 1.2em
    }
}

.h5,
h5 {
    font-size: 18px;
    color: #233a6e;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    font-weight: 700;
    text-transform: none;
    -webkit-font-smoothing: antialiased
}

@media (min-width:375px) {

    .h5,
    h5 {
        font-size: 20px;
        font-size: calc(18px + 2*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h5,
    h5 {
        font-size: 20px;
        margin-top: 1.5em;
        line-height: 1.8em;
        margin-bottom: 1.5em
    }
}

.h6,
h6 {
    font-size: 16px;
    color: #233a6e;
    font-family: Belwe Bold, Georgia, Times, Times New Roman, serif;
    font-weight: 700;
    text-transform: none;
    -webkit-font-smoothing: antialiased
}

@media (min-width:375px) {

    .h6,
    h6 {
        font-size: 16px;
        font-size: calc(16px + 0*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {

    .h6,
    h6 {
        font-size: 16px;
        margin-top: 1.875em;
        line-height: 2.25em;
        margin-bottom: 1.875em
    }
}

body.ja-jp .h1,
body.ja-jp .h2,
body.ja-jp .h3,
body.ja-jp .h4,
body.ja-jp .h5,
body.ja-jp .h6,
body.ja-jp h1,
body.ja-jp h2,
body.ja-jp h3,
body.ja-jp h4,
body.ja-jp h5,
body.ja-jp h6 {
    font-family: メイリオ, Meiryo, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, 游ゴシック, Yu Gothic
}

body.ru-ru .h1,
body.ru-ru .h2,
body.ru-ru .h3,
body.ru-ru .h4,
body.ru-ru .h5,
body.ru-ru .h6,
body.ru-ru h1,
body.ru-ru h2,
body.ru-ru h3,
body.ru-ru h4,
body.ru-ru h5,
body.ru-ru h6 {
    font-family: Benguiat Bold, Georgia, Times, Times New Roman, serif
}

body.ko-kr .h1,
body.ko-kr .h2,
body.ko-kr .h3,
body.ko-kr .h4,
body.ko-kr .h5,
body.ko-kr .h6,
body.ko-kr h1,
body.ko-kr h2,
body.ko-kr h3,
body.ko-kr h4,
body.ko-kr h5,
body.ko-kr h6 {
    font-family: Sapphire, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum
}

body.th-th .h1,
body.th-th .h2,
body.th-th .h3,
body.th-th .h4,
body.th-th .h5,
body.th-th .h6,
body.th-th h1,
body.th-th h2,
body.th-th h3,
body.th-th h4,
body.th-th h5,
body.th-th h6 {
    font-family: Asadong, Thonburi, Ayuthaya, Krungthep
}

body.zh-tw .h1,
body.zh-tw .h2,
body.zh-tw .h3,
body.zh-tw .h4,
body.zh-tw .h5,
body.zh-tw .h6,
body.zh-tw h1,
body.zh-tw h2,
body.zh-tw h3,
body.zh-tw h4,
body.zh-tw h5,
body.zh-tw h6 {
    font-family: 微軟正黑, Microsoft JhengHei, Tei TC
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.15;
    margin-top: .15em;
    margin-bottom: .15em;
    display: block
}

.h1 .Heading--small,
.h1 small,
.h2 .Heading--small,
.h2 small,
.h3 .Heading--small,
.h3 small,
.h4 .Heading--small,
.h4 small,
.h5 .Heading--small,
.h5 small,
.h6 .Heading--small,
.h6 small,
h1 .Heading--small,
h1 small,
h2 .Heading--small,
h2 small,
h3 .Heading--small,
h3 small,
h4 .Heading--small,
h4 small,
h5 .Heading--small,
h5 small,
h6 .Heading--small,
h6 small {
    color: #614326;
    font-size: 75%;
    display: block
}

.h1.Heading--bulleted,
.h2.Heading--bulleted,
.h3.Heading--bulleted,
.h4.Heading--bulleted,
.h5.Heading--bulleted,
.h6.Heading--bulleted,
h1.Heading--bulleted,
h2.Heading--bulleted,
h3.Heading--bulleted,
h4.Heading--bulleted,
h5.Heading--bulleted,
h6.Heading--bulleted {
    padding: 0 0 0 1.2em
}

.h1.Heading--bulleted,
h1.Heading--bulleted {
    padding-left: 1em;
    background-size: 38px
}

.h2.Heading--bulleted,
h2.Heading--bulleted {
    padding-left: 1em;
    background-size: 28px
}

.h3.Heading--bulleted,
h3.Heading--bulleted {
    padding-left: 1em;
    background-size: 24px
}

.h4.Heading--bulleted,
h4.Heading--bulleted {
    padding-left: 1em;
    background-size: 19px
}

.h5.Heading--bulleted,
.h6.Heading--bulleted,
h5.Heading--bulleted,
h6.Heading--bulleted {
    padding-left: 1em;
    background-size: 15px
}

.Heading--underlined {
    padding-bottom: .25em;
    border-bottom: 1px solid rgba(97, 67, 38, .3)
}

.Heading--mediaSection {
    margin: 0 0 .5rem;
    padding-top: 1rem
}

code {
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
    background-color: rgba(116, 50, 0, .1);
    padding: 2px 4px;
    font-size: .8em;
    border-radius: 3px;
    margin: 0 2px
}

code,
mark {
    color: #000
}

mark {
    background-color: #d7bb93;
    padding: 0 .5em
}

em,
i {
    font-style: italic
}

@media (min-width:60em) {
    abbr[title] {
        border-bottom: 1px dotted rgba(0, 0, 0, .7);
        cursor: help
    }
}

abbr[title]:after,
sub,
sup {
    color: rgba(0, 0, 0, .7);
    font-size: 75%
}

abbr[title]:after {
    content: "("attr(title) ") "
}

@media (min-width:60em) {
    abbr[title]:after {
        content: ""
    }
}

sub,
sup {
    vertical-align: super
}

sub {
    vertical-align: baseline
}

a {
    color: #233a6e;
    font-weight: 700;
    text-decoration: none
}

a:active,
a:focus,
a:hover {
    text-decoration: underline;
    outline: 0 none;
    outline-offset: 0
}

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

ol,
ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-size: 14px;
    line-height: 1.75
}

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

ol ol,
ul ol {
    list-style: lower-roman
}

ul {
    list-style: square
}

ol {
    list-style: decimal
}

ol ul,
ul ul {
    list-style-type: circle
}

.List--unstyled {
    padding-left: 0;
    list-style: none
}

.List--inline {
    margin-left: -5px
}

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

.List--image,
.List--inline {
    padding-left: 0;
    list-style: none
}

.List--image li {
    position: relative;
    padding-left: 1.35em;
    display: block
}

.List--image li:before {
    content: " ";
    display: inline-block;
    text-indent: -9999px
}

.List--image ul {
    list-style: disc;
    padding-left: 1.75em
}

.List--image ul li {
    display: list-item;
    padding: 0
}

.List--image ul li:before {
    display: none
}

.List--mana li:before {
    position: absolute;
    top: 6px;
    left: 0;
    width: 13px;
    height: 13px;
    background-size: contain
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem
}

p.Lead {
    line-height: 1.5;
    font-size: 16px;
    margin-top: 26px;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: inherit
}

@media (min-width:375px) {
    p.Lead {
        font-size: 18px;
        font-size: calc(16px + 2*(100vw - 375px)/1225)
    }
}

@media (min-width:1600px) {
    p.Lead {
        font-size: 18px
    }
}

p.Caption {
    line-height: 1.5;
    font-size: 13px;
    margin-top: 22px;
    font-family: Open Sans, Helvetica, Arial, sans-serif
}

@media (min-width:375px) {
    p.Caption {
        font-size: 14px
    }
}

.u-belwe {
    font-family: Belwe Bold, Open Sans, Helvetica, Arial, sans-serif
}

.u-belweStroke,
.u-belweStroke--body {
    text-shadow: #000 2px 0 0, #000 1.75517px .95885px 0, #000 1.0806px 1.68294px 0, #000 .14147px 1.99499px 0, #000 -.83229px 1.81859px 0, #000 -1.60229px 1.19694px 0, #000 -1.97998px .28224px 0, #000 -1.87291px -.70157px 0, #000 -1.30729px -1.5136px 0, #000 -.42159px -1.95506px 0, #000 .56732px -1.91785px 0, #000 1.41734px -1.41108px 0, #000 1.92034px -.55883px 0;
    font-family: Belwe Bold;
    font-weight: 400
}

.Button {
    color: #fff;
    text-transform: uppercase;
    font-family: Bliz Quadrata, メイリオ, Meiryo, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, 游ゴシック, Yu Gothic, Siara, Times New Roman, Serif;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 1em 2.3em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .35);
    text-shadow: 0 0 4px #000, 0 0 8px #000;
    font-size: 1em;
    margin-bottom: 1.5rem;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1
}

.Button--link.is-underlined:active,
.Button--link.is-underlined:focus,
.Button--link.is-underlined:hover,
.Button:active,
.Button:focus,
.Button:hover {
    text-decoration: none
}

.Button:after,
.Button:before {
    content: "";
    position: absolute;
    z-index: -1
}

.Button:before {
    text-decoration: none;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 3px
}

.Button:after {
    background: grey;
    background-position: 50%;
    background-repeat: repeat-y;
    background-size: contain;
    box-shadow: 0 2px 6px 0 #331e0b;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    border: 3px solid;
    border-radius: 2px
}

.Button.block {
    margin: 0 auto 1.5rem;
    display: block
}

.Button.is-disabled {
    opacity: .5;
    pointer-events: none
}

.Button.Button--primary {
    background-color: #bc22c7;
    background: -webkit-linear-gradient(top, #ad9a90, #1c140d);
    background: linear-gradient(180deg, #ad9a90, #1c140d)
}

.Button.Button--primary:before {
    background-color: #6f5742;
    background: -webkit-linear-gradient(top, #6f5742, #81615d);
    background: linear-gradient(180deg, #6f5742, #81615d)
}

.Button.Button--primary:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAAABCAIAAADYRExeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQ0RDNCMUFBRDAyMTFFNjk1QTNGMkIwRTAwQjA3MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQ0RDNCMUJBRDAyMTFFNjk1QTNGMkIwRTAwQjA3MTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRDREM0IxOEFEMDIxMUU2OTVBM0YyQjBFMDBCMDcxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRDREM0IxOUFEMDIxMUU2OTVBM0YyQjBFMDBCMDcxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlJgqloAAACnSURBVHjazJCBFYMgEEMTNuiCHavblvQSRUAXKCrHy8/lVL5fHwINtdRIynvOoFBHQnSNruiIPujQGSds9pnNRrSq8n6i0p0/aXJCPf1B3TXpnuyB8e85mRL/lpzeNW368QdLdfmn9iqqheOup4s3RaKi4PB39UroTih3fdhQHr3WJ71yFuqcGz2mJHmZclG/ARnKjuB8jFMQPbSKdW70e3ZlD/0JMAB1DqoGNYybhQAAAABJRU5ErkJggg==);
    -webkit-border-image: -webkit-linear-gradient(top, #f756fe, #661f91) 1;
    border-image: linear-gradient(180deg, #f756fe, #661f91) 1;
    border-top-color: #f756fe;
    border-bottom-color: #661f91
}

.Button.Button--primary:active:after,
.Button.Button--primary:focus:after,
.Button.Button--primary:hover:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAAABCAIAAADYRExeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEE4QUUxM0RBRDAzMTFFNjhFMDRCNUZGQUY3NTFCMUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEE4QUUxM0VBRDAzMTFFNjhFMDRCNUZGQUY3NTFCMUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQThBRTEzQkFEMDMxMUU2OEUwNEI1RkZBRjc1MUIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQThBRTEzQ0FEMDMxMUU2OEUwNEI1RkZBRjc1MUIxRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjdlBcYAAACSSURBVHjavE5bDgQhCCvcYy++B9nj2VUeCjGZz9EEa6Gl8v38AKgICJnHC42Bf7DIgI7hdFGlFk1lzhoMXWVMUS0mVLqxnl259zicvT15c7jSbqw3X33w4uG8EHIkxuAMAfIBs/Kz0vBqpI9hU8FnxsYjVQgVt4N1e5LiwKYyT8kZ90RzyAyRtu4d0bTnmvwLMABZL5ltpZKYvwAAAABJRU5ErkJggg==)
}

.Button.Button--alternate,
.Button.Button--default {
    background-color: #7b7473;
    background: -webkit-linear-gradient(top, #ddd, #2f2e2d);
    background: linear-gradient(180deg, #ddd, #2f2e2d)
}

.Button.Button--alternate:before,
.Button.Button--default:before {
    background-color: #7b7473;
    background: -webkit-linear-gradient(top, #877e7c, #6f6b69);
    background: linear-gradient(180deg, #877e7c, #6f6b69)
}

.Button.Button--alternate:after,
.Button.Button--default:after {
    -webkit-border-image: -webkit-linear-gradient(top, #888, #3f3f3f) 1;
    border-image: linear-gradient(180deg, #888, #3f3f3f) 1;
    border-color: #888 currentcolor #3f3f3f;
    border-style: solid;
    border-width: 3px;
    background-color: #3f3f3f;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApEAAAABCAIAAAAJsGL2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTBFMUM0MjRBREQxMTFFNjhEQUJEQTM3NjNFOEZGNkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTBFMUM0MjVBREQxMTFFNjhEQUJEQTM3NjNFOEZGNkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMEUxQzQyMkFERDExMUU2OERBQkRBMzc2M0U4RkY2RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMEUxQzQyM0FERDExMUU2OERBQkRBMzc2M0U4RkY2RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjJPQgIAAADSSURBVHjapJXRDcQgDEPj7tGBrvvPU98nQcpTwh1fBYxjHKPqeT6xhqIea10AEWxoB7VnlU/orK5Ur9sB/CDN2yQGItYnwL3dkRxX3wrq0JUVr8NXJvKgFE9KDzXAo8+hNifZT+swb8Q5Wo/eN5G3h2+BIkb8G8Txa2icSU0YaqnLvOXHlvmVmmfQsHPWIgzXtScXqLURPmOMgoDG7Hqnea+bAwd1yZP37SDYX9phm916niuP+iX/UZc8r9dfG/I28aEO6P4bgZ6O3uDauO/7K8AAdWJtN0cRGOQAAAAASUVORK5CYII=)
}

.Button.Button--alternate:active:after,
.Button.Button--alternate:focus:after,
.Button.Button--alternate:hover:after,
.Button.Button--default:active:after,
.Button.Button--default:focus:after,
.Button.Button--default:hover:after {
    background-color: #5a5a5a;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAABCAIAAADfBpJLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjBBQ0RFQzdBREQzMTFFNkE0QjFDQUE4MzI0M0E3QTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjBBQ0RFQzhBREQzMTFFNkE0QjFDQUE4MzI0M0E3QTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMEFDREVDNUFERDMxMUU2QTRCMUNBQTgzMjQzQTdBMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMEFDREVDNkFERDMxMUU2QTRCMUNBQTgzMjQzQTdBMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk/ObhsAAACXSURBVHjaZE8BFsUgCAIP2f1PIj8lt/W+eysEwuJaC39Fcq/BqJ1VpvgU6iuZEVFq8K4Imxy1EQT7ZgYoO3rgM5UvAY8pStN87CcAr/+CtGQPbDx4Sv3vdAmqEaoDQsMiNqRsUwUJeTNo2/QfsreRKwc2OhzK7vpdypz7nAjXRnlgusvujyU709KcdMa+pdW+1/vanwADAEk6hANe8naWAAAAAElFTkSuQmCC)
}

.Button.Button--alternate.Button--small:after,
.Button.Button--alternate.Button--xsmall:after,
.Button.Button--default.Button--small:after,
.Button.Button--default.Button--xsmall:after {
    -webkit-border-image: -webkit-linear-gradient(top, #888, #3f3f3f) 1;
    border-image: linear-gradient(180deg, #888, #3f3f3f) 1;
    border-color: #888 currentcolor #3f3f3f;
    border-style: solid;
    border-width: 2px
}

.Button--link {
    color: #233a6e;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    text-shadow: none
}

.Button--link:after,
.Button--link:before {
    display: none
}

.Button--link:active,
.Button--link:focus,
.Button--link:hover {
    color: #233a6e;
    text-decoration: underline
}

.Button--link.is-underlined {
    text-decoration: underline
}

.Button--gradient {
    background-image: -webkit-linear-gradient(top, #ededed, #573b23);
    background-image: linear-gradient(180deg, #ededed, #573b23);
    border-radius: 6px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .45);
    text-shadow: 0 0 4px rgba(0, 0, 0, .3), 0 0 8px rgba(0, 0, 0, .3);
    padding: 1em 2.5em;
    letter-spacing: .85px
}

@media only screen and (max-width:375px) {
    .Button--gradient--mobileTextOnly {
        background: 0 0 !important;
        border: none !important;
        -webkit-border-image: none !important;
        border-image: none !important;
        box-shadow: none;
        padding: 0;
        text-decoration: underline;
        text-shadow: none;
        letter-spacing: 0
    }

    .Button--gradient--mobileTextOnly:hover {
        text-decoration: underline
    }

    .Button--gradient--mobileTextOnly .highlight,
    .Button--gradient--mobileTextOnly:after,
    .Button--gradient--mobileTextOnly:before {
        display: none !important
    }
}

.Button--gradient .text {
    font-family: Belwe Bold
}

.Button--gradient:before {
    border-radius: 6px
}

.Button--gradient:after,
.Button--gradient:before {
    content: "";
    position: absolute;
    z-index: -1
}

.Button--gradient:before {
    background-color: #7e5f58;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px
}

.Button--gradient .highlight,
.Button--gradient:after {
    box-shadow: 0 2px 6px 0 #331e0b;
    -webkit-border-image: -webkit-linear-gradient(top, #f756fe, #661f91) 3;
    border-image: linear-gradient(180deg, #f756fe, #661f91) 3;
    padding: 2px 3px;
    background-image: -webkit-linear-gradient(top, #f756fe, #661f91);
    background-image: linear-gradient(180deg, #f756fe, #661f91);
    border-radius: 6px;
    border: none
}

.Button--gradient .highlight {
    background-image: -webkit-linear-gradient(left, #4c0d7a, #b921c4, #4c0d7a);
    background-image: linear-gradient(90deg, #4c0d7a, #b921c4, #4c0d7a);
    opacity: 1;
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    position: absolute;
    top: 9px;
    left: 9px;
    right: 9px;
    bottom: 9px;
    box-shadow: none;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased
}

.Button--gradient .highlight:before {
    background-image: -webkit-linear-gradient(left, #921b9a, #b921c4, #921b9a);
    background-image: linear-gradient(90deg, #921b9a, #b921c4, #921b9a);
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    border-radius: 6px
}

.Button--gradient.Button--xsmall .highlight {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px
}

.Button--gradient.Button--small .highlight,
.Button--gradient:after {
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px
}

.Button--gradient .text {
    position: relative;
    z-index: 1;
    -webkit-font-smoothing: antialiased
}

.Button--gradient:hover .highlight:before {
    opacity: 1
}

.Button--small:before,
.Button--xsmall:before {
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px
}

.Button--small:after,
.Button--xsmall:after {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px
}

.Button--xsmall {
    font-size: .7em
}

.Button--small {
    font-size: .8em
}

.Button--large {
    font-size: 1.2em
}

.Button--xlarge {
    font-size: 1.3em
}

.Navigation-container {
    top: -51px;
    right: 0;
    left: 0;
    bottom: -51px;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #2c0903;
    min-height: calc(100vh + 51px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: none;
    padding: 0;
    opacity: 0
}

.headroom.headroom--not-top.slideDown .Navigation-container .Navigation .Menu-roseLogo:hover:after,
.headroom.headroom--not-top.slideDown .Navigation-container .Navigation .Menu-roseLogo:hover:before,
.Menu-cta:active:after,
.Menu-cta:hover:after,
.Menu-roseLogo:active:after,
.Menu-roseLogo:hover:after,
.Navigation-container--visible {
    opacity: 1
}

@media only screen and (min-width:1280px) {
    .Navigation-container {
        display: block;
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        min-height: 0;
        width: 100%;
        margin: 0 auto;
        max-width: 100%;
        background-color: transparent
    }
}

.Navigation-container:after,
.Navigation-container:before {
    content: "";
    position: absolute;
    top: 0
}

.Navigation-container:before {
    background-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/wood_left.46b5f6a13b39deaa5c91c64994ed5425.png);
    background-size: 134px 73px;
    background-position: top;
    background-repeat: repeat-x;
    left: -3px;
    width: 134px;
    height: 73px;
    z-index: 0
}

@media (-webkit-min-device-pixel-ratio:1.5),
all and (-o-min-device-pixel-ratio:3/2),
all and (min--moz-device-pixel-ratio:1.5),
all and (min-device-pixel-ratio:1.5) {
    .Navigation-container:before {
        background-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/wood_left@2x.69f2887a3f8eda6e225a331a97b59167.png)
    }
}

.Navigation-container:after {
    background-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/wood_right.299ad89b8940dc2167cc3fde3ee64eb1.png);
    background-size: 134px 73px;
    background-position: top;
    background-repeat: repeat-x;
    right: 0;
    width: 134px;
    height: 73px;
    z-index: 0
}

@media (-webkit-min-device-pixel-ratio:1.5),
all and (-o-min-device-pixel-ratio:3/2),
all and (min--moz-device-pixel-ratio:1.5),
all and (min-device-pixel-ratio:1.5) {
    .Navigation-container:after {
        background-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/wood_right@2x.78716013eb565e83e7e244dbde33bf70.png)
    }
}

.slideDown .Navigation-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.headroom--top .Navigation-container,
.slideDown .Navigation-container {
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out
}

.headroom.headroom--top .Navigation-container,
.Navigation-container {
    position: absolute;
    max-width: 1603px;
    width: 90%;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out
}

@media only screen and (min-width:1630px) {
    .Navigation-container {
        width: 100%
    }
}


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

    .fixed .headroom,
    .is-fixed .headroom {
        -webkit-animation-name: Nav--slideDown;
        animation-name: Nav--slideDown
    }

    .is-unFixed .headroom,
    .unfixed .headroom {
        -webkit-animation-name: Nav--slideUp;
        animation-name: Nav--slideUp
    }
}

.Navigation-wrapper.HideNav {
    visibility: hidden;
    opacity: 0
}

.Navigation-wrapper .Navigation-container {
    max-width: 1603px
}

@media only screen and (min-width:1280px) {
    .Navigation-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        z-index: 1000;
        -webkit-animation-duration: .25s;
        animation-duration: .25s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        top: 83px
    }

    .headroom--not-top .Navigation-wrapper {
        position: fixed;
        top: -2px;
        right: 0;
        bottom: auto;
        left: 0;
        margin: 0 auto
    }
}

@-webkit-keyframes Nav--slideDown {
    0% {
        -webkit-transform: translate3d(0, -150%, 1px);
        transform: translate3d(0, -150%, 1px)
    }

    to {
        -webkit-transform: translateZ(1px);
        transform: translateZ(1px)
    }
}

@keyframes Nav--slideDown {
    0% {
        -webkit-transform: translate3d(0, -150%, 1px);
        transform: translate3d(0, -150%, 1px)
    }

    to {
        -webkit-transform: translateZ(1px);
        transform: translateZ(1px)
    }
}

@-webkit-keyframes Nav--slideUp {
    0% {
        -webkit-transform: translateZ(1px);
        transform: translateZ(1px)
    }

    to {
        -webkit-transform: translate3d(0, -150%, 1px);
        transform: translate3d(0, -150%, 1px)
    }
}

@keyframes Nav--slideUp {
    0% {
        -webkit-transform: translateZ(1px);
        transform: translateZ(1px)
    }

    to {
        -webkit-transform: translate3d(0, -150%, 1px);
        transform: translate3d(0, -150%, 1px)
    }
}

@media only screen and (min-width:1280px) {
    .Navigation {
        height: 73px;
        padding-top: 8px;
        padding-bottom: 13px;
        background-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/wood_middle_repeat.b4458ce9f1d0c41bb51b9b8385c0943f.png);
        background-size: 1503px 73px;
        background-position: top;
        background-repeat: repeat-x;
        display: block;
        z-index: 5
    }

    .Navigation:after,
    .Navigation:before {
        content: "";
        position: absolute;
        left: 0;
        z-index: -1
    }

    .Navigation:after {
        top: 0;
        width: 100%;
        height: 93%;
        box-shadow: 0 6px 8px 0 rgba(0, 0, 0, .55)
    }

    .Navigation:before {
        bottom: 6px;
        height: 25px;
        width: 99%;
        box-shadow: 0 4px 10px 6px rgba(0, 0, 0, .7);
        right: 0;
        margin: auto
    }
}

@media (min-width:72.5em) {
    .Navigation {
        height: 73px;
        width: 100%
    }
}

@media (max-width:59.99em) {
    .Navigation {
        display: none
    }
}


#particleContainer {
    display: none;
    position: absolute;
    left: -90px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    top: -135px;
    z-index: 2;
    pointer-events: none;
    opacity: .001;
    -webkit-transition-property: ease;
    transition-property: ease;
    -webkit-transition: opacity .45s ease-out;
    transition: opacity .45s ease-out
}

@media only screen and (min-width:1450px) {
    #particleContainer {
        display: block
    }
}

@media only screen and (min-width:1630px) {
    #particleContainer {
        top: -123px;
        left: -53px;
        -webkit-transform: scale(1);
        transform: scale(1);
        display: block
    }
}

#Navigation-preload{
    display: none
}

.explore-nav-is-out .hack-stock-android-overflow {
    overflow: hidden
}

.NavigationCTA {
    text-align: center;
    margin: 2rem 0 4rem
}

.NavPlayNowContainer {
    background: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/sidebar_button@2x.ee679379ffef7d955fb665c641ef1407.png)
}

.StoreButton-container {
    border-style: solid;
    border-width: 13px 15px 12px 14px;
    -webkit-border-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/badge_bg@2x.26e18f6b6f843581dc1be90b6c040cb4.png) 13 15 12 14 repeat;
    border-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/badge_bg@2x.26e18f6b6f843581dc1be90b6c040cb4.png) 13 15 12 14 fill repeat
}

.StoreButton-container img {
    margin-top: 5px;
    display: block
}

.NavPlayNowText {
    font-weight: 700;
    font-family: Bliz Quadrata, メイリオ, Meiryo, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, 游ゴシック, Yu Gothic, Siara, Times New Roman, Serif;
    -ms-grid-row-align: center
}

.MobileSearchBarIcon {
    background: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/mobile-search-icon.c9dcc506cb23c1811d7f67d36a235142.png) 50% no-repeat
}

.MobileSearchBarInput {
    -ms-grid-row-align: center
}

.NewTagContainer {
    display: inline-block;
    padding: 0
}

.NewTagContainer .NewTag {
    padding: 0;
    line-height: 26px;
    border-top-width: 7px;
    border-bottom-width: 7px
}

@media only screen and (min-width:1280px) {
    .NewTagContainer {
        position: absolute;
        top: 0;
        left: 2px;
        margin-top: -19px;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        padding: 0
    }

    .NewTagContainer .NewTag {
        border-top-width: 4px;
        border-bottom-width: 2px
    }
}

.NewTagContainer-subnav .NewTag-subnav {
    position: relative;
    margin-top: 0;
    margin-left: 0;
    min-height: 26px;
    color: #fff;
    border-top-width: 7px;
    border-bottom-width: 7px
}

@media only screen and (min-width:1280px) {
    .NewTagContainer-subnav {
        margin-left: 10px
    }
}

.NewTagContainer-subnav.NewTag-seen,
.NewTagContainer.NewTag-seen {
    display: none
}

.NewTag {
    color: #fff;
    font-size: 13px;
    -webkit-border-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/new-tag.cf8f438d55c014ce8c7654ac11c99acd.png) 6 fill/auto;
    border-image: url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/new-tag.cf8f438d55c014ce8c7654ac11c99acd.png) 6 fill/auto;
    border-style: solid;
    border-width: 4px 10px 2px;
    white-space: nowrap
}


@media only screen and (min-width:1280px) {
    .headroom--not-top .NewTagContainer {
        padding: 0;
        display: inline-block;
        position: relative;
        width: auto;
        margin-left: 10px;
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    .headroom--not-top .NewTagContainer .NewTag {
        border-top-width: 7px;
        border-bottom-width: 7px
    }

    .headroom--not-top .NewTagContainer.NewTag-seen {
        display: none
    }
}


#navigationMobileMount {
    z-index: 99999
}


.NavPlayNowContainer {
    cursor: pointer;
    height: 63px;
    width: 320px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(23%, #bc22c7), color-stop(99%, #721c9d));
    background-image: -webkit-linear-gradient(top, #bc22c7 23%, #721c9d 99%);
    background-image: linear-gradient(-180deg, #bc22c7 23%, #721c9d 99%);
    position: relative;
    border-bottom: 3px solid #4c0d7a
}

.NavPlayNowContainer:before {
    width: 100%;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(247, 86, 254, 0)), color-stop(50%, #f756fe), color-stop(99%, rgba(247, 86, 254, 0)));
    background-image: -webkit-linear-gradient(right, rgba(247, 86, 254, 0), #f756fe 50%, rgba(247, 86, 254, 0) 99%);
    background-image: linear-gradient(-90deg, rgba(247, 86, 254, 0), #f756fe 50%, rgba(247, 86, 254, 0) 99%);
    height: 3px;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    content: "";
    position: absolute;
    z-index: 1
}

.NavPlayNowContainer:after {
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
    height: calc(100% + 3px);
    width: 5px;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #991db5), color-stop(94%, #4c0d7a));
    background-image: -webkit-linear-gradient(top, #991db5 3%, #4c0d7a 94%);
    background-image: linear-gradient(-180deg, #991db5 3%, #4c0d7a 94%);
    padding: 0;
    content: "";
    position: absolute
}

.NavPlayNowContainer:hover .NavPlayNowInner:after {
    opacity: 1
}

.NavPlayNowContainer .NavPlayNowText {
    position: relative;
    z-index: 1;
    font-size: 1rem
}

.NavPlayNowContainer .NavPlayNowInner {
    height: calc(100% + 3px)
}

.NavPlayNowContainer .NavPlayNowInner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(21%, #e235ee), to(#8c1da5));
    background-image: -webkit-linear-gradient(top, #e235ee 21%, #8c1da5);
    background-image: linear-gradient(-180deg, #e235ee 21%, #8c1da5);
    opacity: 0;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out;
    top: 0
}

.StoreButton-container {
    border: none;
    height: 75px;
    width: 165px;
    display: none
}

.StoreButton-container.AndroidButtons {
    width: 100%;
    padding-right: 10px;
    height: 68px
}

.StoreButton-container.AndroidButtons .StoreButton {
    -webkit-flex: 1 1;
    flex: 1 1
}

.StoreButton-container.AndroidButtons .StoreButton:not(:first-child) {
    margin-left: 0
}

.StoreButton-container--is-visible {
    display: inline-block
}

.StoreButton-container--is-visible.AndroidButtons {
    display: -webkit-flex;
    display: flex
}

.StoreButton-container .StoreButton {
    display: block;
    width: 100%;
    height: 100%;
    position: relative
}

.StoreButton-container .StoreButton .StoreButton-image {
    margin-top: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%
}

.NavPlayNowInner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
    height: 100%;
    padding: 3px;
    text-decoration: none
}

.NavPlayNowLink {
    border: 0
}

.NavPlayNowLink:hover {
    text-decoration: none
}

.NavPlayNowText {
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-weight: 400;
    text-shadow: 0 0 4px #000, 0 0 8px #000;
    letter-spacing: 2px;
    font-size: 1.25rem;
    font-family: Belwe Bold;
    -webkit-align-self: center;
    align-self: center;
    display: block;
    text-transform: uppercase
}

.MobileSearchBar {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .05)), color-stop(90%, rgba(0, 0, 0, .05)), to(transparent));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 90%, transparent);
    background: linear-gradient(90deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 90%, transparent);
    height: 44px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative
}

.MobileSearchBar:after,
.MobileSearchBar:before {
    content: "";
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .2)), color-stop(90%, rgba(0, 0, 0, .2)), to(transparent));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 90%, transparent);
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 90%, transparent)
}

.MobileSearchBarIcon {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 15px;
    width: 15px;
    pointer-events: none;
    display: inline-block;
    background: transparent url(https://hearthstone.nosdn.127.net/3/V2/gameguide/how-to-play/_next/static/media/mobile-search-icon.c9dcc506cb23c1811d7f67d36a235142.png) 50% no-repeat;
    background-size: contain
}

.MobileSearchBarInput {
    width: 100%;
    padding-left: 40px;
    height: 44px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .05)), color-stop(90%, rgba(0, 0, 0, .05)), to(transparent));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 90%, transparent);
    background: linear-gradient(90deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 90%, transparent);
    color: #fff;
    -webkit-align-self: center;
    align-self: center;
    border: none
}

.eu-cookie-compliance:not(.hide) {
    display: inline;
    display: initial
}


.slick-slider {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list,
.slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.CardPopUp {
    position: relative;
    font-weight: 700;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-self: center;
    align-self: center;
    vertical-align: top;
    text-decoration: none
}

.CardPopUp-Card {
    position: absolute;
    opacity: 0;
    display: none;
    bottom: 100%;
    left: 80%;
    width: 250px;
    z-index: 999
}

.CardPopUp-Card img {
    width: 100%;
    outline: none;
    border: none;
    -webkit-filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .45));
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .45))
}

.CardPopUp-Card.AlignLeft {
    left: auto;
    right: 80%
}

.CardPopUp-Card.AlignBottom {
    bottom: auto;
    top: 105%
}

.CardPopUp-Rarity5 .CardPopUp-Card {
    width: 267px;
    bottom: 100%
}

.CardPopUp-Rarity5 .CardPopUp-Card.AlignBottom {
    top: 105%;
    bottom: auto
}

.CardPopUp:active,
.CardPopUp:focus,
.CardPopUp:hover {
    text-decoration: none
}

.CardPopUp:not(.noHover):focus,
.CardPopUp:not(.noHover):hover {
    text-decoration: underline
}

.CardPopUp:not(.noHover):hover .CardPopUp-Card {
    opacity: 1;
    display: block
}

.CardPopUp:not(.noHover):hover .CardPopUp-Card.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.CardPopUp:not(.noHover):hover .CardPopUp-Card.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

.CardPopUp:not(.noHover):hover .CardPopUp-Card.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 75ms;
    animation-duration: 75ms
}

.CardPopUp:not(.noHover):hover .CardPopUp-Card.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: .1s;
    animation-duration: .1s
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.2, .2, .2);
        transform: scale3d(.2, .2, .2)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.2, .2, .2);
        transform: scale3d(.2, .2, .2)
    }

    50% {
        opacity: 1
    }
}

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

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

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

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.CardPopUp-Svg {
    width: 100px;
    display: inline-block;
    margin: auto 5px auto 0
}

#CardPopUp-Modal {
    background: rgba(0, 0, 0, .75);
    position: fixed;
    z-index: -10;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 75ms ease-out;
    transition: all 75ms ease-out
}

#CardPopUp-Modal.Modal--visible {
    opacity: 1;
    z-index: 9999
}

#CardPopUp-Modal .CardPopUp-ModalContainer {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    pointer-events: none
}

#CardPopUp-Modal .CardPopUp-ModalButton,
#CardPopUp-Modal .CardPopUp-ModalContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    z-index: 5
}

#CardPopUp-Modal .CardPopUp-ModalButton {
    color: #fcd144;
    margin: 1.5em 0 0;
    cursor: pointer;
    pointer-events: auto;
    font-weight: 400;
    -webkit-flex-direction: row;
    flex-direction: row
}

#CardPopUp-Modal .CardPopUp-ModalButton svg {
    margin-left: 10px;
    display: inline-block
}

#CardPopUp-Modal .CardPopUp-ModalCloseWrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

#CardPopUp-Modal .CardPopUp-ModalCard {
    max-width: 375px;
    width: 90%;
    margin: 0 auto
}

@media only screen and (orientation:landscape) and (max-device-width:1024px) {
    #CardPopUp-Modal .CardPopUp-ModalContainer {
        -webkit-flex-direction: row;
        flex-direction: row;
        width: 100%
    }

    #CardPopUp-Modal .CardPopUp-ModalCard {
        height: 90vh;
        max-height: 518px;
        max-width: 375px;
        width: auto;
        margin: auto 10px
    }
}

[data-simplebar] {
    position: relative;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}

.simplebar-mask {
    direction: inherit;
    overflow: hidden;
    width: auto !important;
    height: auto !important;
    z-index: 0
}

.simplebar-mask,
.simplebar-offset {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    -webkit-overflow-scrolling: touch
}

.simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    visibility: visible;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0
}

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

.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}

.simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    -webkit-flex-grow: inherit;
    flex-grow: inherit;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0
}

.simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    z-index: -1
}

.simplebar-height-auto-observer,
.simplebar-track {
    position: absolute;
    overflow: hidden;
    pointer-events: none
}

.simplebar-track {
    z-index: 1;
    right: 0;
    bottom: 0
}

[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}

.simplebar-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 10px
}

.simplebar-scrollbar:before {
    position: absolute;
    content: "";
    background: #000;
    border-radius: 7px;
    left: 2px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    -webkit-transition: opacity 0s linear;
    transition: opacity 0s linear
}

.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px
}

.simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0
}

.hs-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll
}

.simplebar-hide-scrollbar {
    position: fixed;
    left: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}