.Button {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none
}

.Button-label {
    position: relative;
    z-index: 1
}

.Button--full {
    display: block
}

.Button--text {
    font-size: 1.08rem;
    line-height: 1.5;
    font-weight: 400;
    color: #f7b10a;
    min-width: 180px;
    text-transform: uppercase
}

@media (min-width: 720px) {
    .Button--text {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Button--text {
        font-size: 1.44rem
    }
}

.Button--text .Button-inner {
    padding: 12px 30px
}

.Button--text:active, html:not(.touch) .Button--text:hover {
    color: #fff
}

.Button--ghost {
    font-size: 1.08rem;
    line-height: 1.5;
    font-weight: 400;
    background: rgba(0, 0, 0, .4);
    border: 1px solid #000;
    color: #f7b10a;
    min-width: 180px;
    text-transform: uppercase;
    -webkit-transition: background .2s, color .2s;
    transition: background .2s, color .2s
}

@media (min-width: 720px) {
    .Button--ghost {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Button--ghost {
        font-size: 1.44rem
    }
}

.Button--ghost:focus, html:not(.touch) .Button--ghost:hover {
    background: #b06601;
    color: #ffd36b;
    outline-width: 0
}

.Button--ghost:active {
    background: #8a5000
}

.Button--ghost .Button-outer {
    border: 1px solid #c77e19
}

.Button--ghost .Button-inner {
    padding: 12px 30px
}

.Button--ghost.Button--medium {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Button--ghost.Button--medium {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Button--ghost.Button--medium {
        font-size: 1.2rem
    }
}

.Button--ghost.Button--medium .Button-inner {
    padding: 11px 52px
}

.Button--ghost.Button--small {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Button--ghost.Button--small {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Button--ghost.Button--small {
        font-size: 1rem
    }
}

.Button--ghost.Button--small .Button-inner {
    padding: 5px 16px
}

.Button--ghost.Button--small.Button--social {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Button--ghost.Button--small.Button--social {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Button--ghost.Button--small.Button--social {
        font-size: 1rem
    }
}

.Button--ghost.Button--small.Button--social .Button-inner {
    padding: 7px 16px
}

.Button--ghost.Button--purchase {
    background: rgba(159, 22, 0, .6)
}

.Button--ghost.Button--purchase:focus, html:not(.touch) .Button--ghost.Button--purchase:hover {
    background: #9f1600
}

.Button--ghost.Button--purchase:active {
    background: #7a1100
}

.Button--ghost.Button--purchase .Button-outer {
    border-color: #ea3012
}

.Button--ghost.Button--highlighted {
    background: rgba(248, 183, 0, .8);
    color: #000
}

html:not(.touch) .Button--ghost.Button--highlighted:hover {
    background: #f8b700
}

.Button--ghost.Button--highlighted .Button-outer {
    border: 1px solid #f8b700
}

.Button--ghost.Button--disabled, .Button--ghost.Button[disabled] {
    background: rgba(0, 0, 0, .4);
    background-image: none
}

.Button--ghost.Button--disabled .Button-outer, .Button--ghost.Button[disabled] .Button-outer {
    background-image: none;
    border-color: #000
}

.Button--ghost.Button--disabled .Button-inner, .Button--ghost.Button[disabled] .Button-inner {
    background-image: none;
    background: transparent
}

.Button--ghost .Icon--external {
    top: -1px;
    margin-left: .5em;
    width: 18px
}

.Button--noMinWidth {
    min-width: 0
}

.Button--play {
    background: rgba(0, 0, 0, .4);
    border: 1px solid #000;
    color: #f7b10a;
    padding: 0;
    position: relative;
    -webkit-transition: background .2s, color .2s;
    transition: background .2s, color .2s
}

html:not(.touch) .Button--play:hover {
    background: #b06601
}

.Button--play:active {
    background: #8a5000;
    -webkit-transition: none;
    transition: none
}

.Button--play .Button-outer {
    background-image: none;
    border: 1px solid #c77e19;
    position: relative
}

.Button--play .Button-outer:before {
    background-image: none
}

.Button--play .Button-inner {
    background-image: none;
    height: 90px;
    padding: 0;
    width: 90px
}

.Button--play .Button-inner:before {
    background-image: none
}

.Button--play .Button-label {
    display: inline-block;
    position: relative;
    border-color: transparent #fddeb4;
    border-style: solid;
    border-width: 20.5px 0 20.5px 30px;
    top: 27%;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
    left: 3%
}

@media (min-width: 320px) {
    .Button--play .Button-inner {
        width: 73px;
        height: 73px
    }

    .Button--play .Button-label {
        border-width: 16.5px 0 16.5px 24px
    }
}

@media (min-width: 540px) {
    .Button--play .Button-inner {
        width: 90px;
        height: 90px
    }

    .Button--play .Button-label {
        border-width: 20.5px 0 20.5px 30px
    }
}

@media (min-width: 720px) {
    .Button--play .Button-inner {
        width: 90px;
        height: 90px
    }

    .Button--play .Button-label {
        border-width: 20.5px 0 20.5px 30px
    }
}

.Button--prev .Button-label:before {
    content: "‹ "
}

.Button--next .Button-label:after {
    content: " ›"
}

.Button--ocho {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: #000;
    text-transform: uppercase;
    margin-bottom: -10px
}

.Button--ocho.zh-cn, .zh-cn .Button--ocho {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Button--ocho.ko-kr, .ko-kr .Button--ocho {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Button--ocho.ru-ru, .ru-ru .Button--ocho {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Button--ocho.zh-tw, .zh-tw .Button--ocho {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Button--ocho {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Button--ocho {
        font-size: 1.2rem
    }
}

.Button--ocho .Button-outer {
    padding: 0 87px 0 89px
}

.Button--ocho .Button-inner {
    line-height: 20px;
    padding: 35px 0 45px;
    background: url(../components/button/assets_subdomain/button-ocho.c455324d36331652b5d9da7447cacd33.png) no-repeat;
    background-size: auto 300px;
    background-position: center 0;
    position: relative;
    max-width: 367px;
    white-space: nowrap
}

.Button--ocho .Button-inner:after, .Button--ocho .Button-inner:before {
    content: "";
    background: url(../components/button/assets_subdomain/button-ocho.c455324d36331652b5d9da7447cacd33.png) no-repeat;
    background-size: auto 300px;
    width: 133px;
    height: 100px;
    position: absolute;
    top: 0
}

.Button--ocho .Button-inner:before {
    right: 100%;
    background-position: right 0;
    margin-right: -36.25px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.Button--ocho .Button-inner:after {
    left: 100%;
    background-position: right 0;
    margin-left: -36px
}

html:not(.touch) .Button--ocho:hover .Button-inner, html:not(.touch) .Button--ocho:hover .Button-inner:after, html:not(.touch) .Button--ocho:hover .Button-inner:before {
    background-position-y: -100px
}

.Button--ocho:active .Button-inner, .Button--ocho:active .Button-inner:after, .Button--ocho:active .Button-inner:before {
    background-position-y: -200px
}

.Button--ocho:active .Button-label {
    top: 1px
}

.Button--ocho .Button-label {
    margin: 0 -30px;
    min-width: 155px
}

.Button--ocho .Button-label:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.Achievement {
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.Achievement-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row
}

.Achievement-container[disabled] {
    opacity: .5
}

.Achievement-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.Achievement-right {
    margin-left: auto
}

.Achievement-icon {
    width: 48px;
    height: 48px
}

.Achievement-right {
    text-align: right;
    vertical-align: middle;
    min-width: 50px
}

.Achievement-points-value {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: inline-block
}

@media (min-width: 720px) {
    .Achievement-points-value {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Achievement-points-value {
        font-size: 1.728rem
    }
}

.Achievement-points-value.zh-cn, .zh-cn .Achievement-points-value {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Achievement-points-value.ko-kr, .ko-kr .Achievement-points-value {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Achievement-points-value.ru-ru, .ru-ru .Achievement-points-value {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Achievement-points-value.zh-tw, .zh-tw .Achievement-points-value {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Achievement-points-icon {
    color: #f8b700;
    display: inline-block
}

.Achievement-points-icon .Icon-svg {
    vertical-align: sub
}

.Achievement-reward {
    margin-top: 12px
}

.Achievement-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

@media (min-width: 720px) {
    .Achievement-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Achievement-title {
        font-size: 1.44rem
    }
}

.Achievement-title.zh-cn, .zh-cn .Achievement-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Achievement-title.ko-kr, .ko-kr .Achievement-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Achievement-title.ru-ru, .ru-ru .Achievement-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Achievement-title.zh-tw, .zh-tw .Achievement-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Link:focus .Achievement-title, html:not(.touch) .Link:hover .Achievement-title {
    color: #fff
}

.Achievement-description {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-align: left
}

@media (min-width: 720px) {
    .Achievement-description {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Achievement-description {
        font-size: 1.2rem
    }
}

.Achievement-description.zh-cn, .zh-cn .Achievement-description {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Achievement-description.ko-kr, .ko-kr .Achievement-description {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Achievement-description.zh-tw, .zh-tw .Achievement-description {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Achievement-date {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: block
}

@media (min-width: 720px) {
    .Achievement-date {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Achievement-date {
        font-size: 1rem
    }
}

.Achievement-date.zh-cn, .zh-cn .Achievement-date {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Achievement-date.ko-kr, .ko-kr .Achievement-date {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Achievement-date.zh-tw, .zh-tw .Achievement-date {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Achievement--noIcon .Achievement-icon {
    display: none
}

.Achievement--noIcon .Achievement-text {
    padding: 0
}

.Achievement-text {
    padding: 0 20px
}

.Achievement-text.gutter-vertical {
    padding: 20px 0
}

.Achievement-text.gutter-all {
    padding: 20px
}

.Achievement-text.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.Achievement-text.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.Achievement-text.gutter-negative.gutter-all {
    margin: -20px
}

.Achievement--noDescription .Achievement-description {
    display: none
}

.Achievement--noDescription .Achievement-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.Achievement--accountWide .Achievement-title {
    color: #0081ff
}

.Achievement--noReward .Achievement-reward {
    display: none
}

.AchievementModal {
    width: 100%
}

.AchievementModal-content {
    margin-top: 25px
}

.AchievementModal-content[disabled] .Achievement-item, .AchievementModal-content[disabled] .Achievement-item-icon {
    opacity: .5
}

.AchievementModal-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    margin: 10px
}

@media (min-width: 720px) {
    .AchievementModal-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-title {
        font-size: 1.728rem
    }
}

.AchievementModal-title.zh-cn, .zh-cn .AchievementModal-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-title.ko-kr, .ko-kr .AchievementModal-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.AchievementModal-title.ru-ru, .ru-ru .AchievementModal-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.AchievementModal-title.zh-tw, .zh-tw .AchievementModal-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementModal-desc {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin-bottom: 10px
}

@media (min-width: 720px) {
    .AchievementModal-desc {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-desc {
        font-size: 1.2rem
    }
}

.AchievementModal-desc.zh-cn, .zh-cn .AchievementModal-desc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-desc.ko-kr, .ko-kr .AchievementModal-desc {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementModal-desc.zh-tw, .zh-tw .AchievementModal-desc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementModal-points {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: inline-block;
    margin-top: 15px
}

@media (min-width: 720px) {
    .AchievementModal-points {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-points {
        font-size: 1.728rem
    }
}

.AchievementModal-points.zh-cn, .zh-cn .AchievementModal-points {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-points.ko-kr, .ko-kr .AchievementModal-points {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementModal-points.zh-tw, .zh-tw .AchievementModal-points {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementModal-icon {
    display: inline-block
}

.AchievementModal-date {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px
}

@media (min-width: 720px) {
    .AchievementModal-date {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-date {
        font-size: 1.2rem
    }
}

.AchievementModal-date.zh-cn, .zh-cn .AchievementModal-date {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-date.ko-kr, .ko-kr .AchievementModal-date {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementModal-date.zh-tw, .zh-tw .AchievementModal-date {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementModal-stepDesc {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .AchievementModal-stepDesc {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-stepDesc {
        font-size: 1.2rem
    }
}

.AchievementModal-stepDesc.zh-cn, .zh-cn .AchievementModal-stepDesc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-stepDesc.ko-kr, .ko-kr .AchievementModal-stepDesc {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementModal-stepDesc.zh-tw, .zh-tw .AchievementModal-stepDesc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementModal-stepDescLink {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .AchievementModal-stepDescLink {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .AchievementModal-stepDescLink {
        font-size: 1.2rem
    }
}

.AchievementModal-stepDescLink.zh-cn, .zh-cn .AchievementModal-stepDescLink {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementModal-stepDescLink.ko-kr, .ko-kr .AchievementModal-stepDescLink {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementModal-stepDescLink.zh-tw, .zh-tw .AchievementModal-stepDescLink {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementTile {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    border: 1px solid #444
}

.AchievementTile, .AchievementTile .AchievementTile-tile {
    position: relative
}

.AchievementTile .AchievementTile-tile:before {
    content: "";
    display: block;
    padding-top: 100%
}

.AchievementTile .AchievementTile-tile .Tile-bg {
    background: #000 url(../components/box/assets_subdomain/box-leather-grey-dark.0477a49460ddf3f97294112a1b372a06.jpg) 50%
}

.AchievementTile .AchievementTile-tile .Tile-bg:before {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0
}

.AchievementTile .AchievementTile-meta {
    text-align: center
}

.AchievementTile .AchievementTile-title {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    line-height: 1.1;
    padding: 3px 0
}

@media (min-width: 720px) {
    .AchievementTile .AchievementTile-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .AchievementTile .AchievementTile-title {
        font-size: 1.44rem
    }
}

.AchievementTile .AchievementTile-title.zh-cn, .zh-cn .AchievementTile .AchievementTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementTile .AchievementTile-title.ko-kr, .ko-kr .AchievementTile .AchievementTile-title {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.AchievementTile .AchievementTile-title.zh-tw, .zh-tw .AchievementTile .AchievementTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementTile .AchievementTile-content {
    position: relative;
    width: 70%;
    margin: 0 auto
}

.AchievementTile .AchievementTile-content .AchievementTile-noProgressIcon, .AchievementTile .AchievementTile-content .ProgressDonut-icon {
    position: relative;
    background-image: url(../components/achievementtile/assets_subdomain/achievementtile-gradient.872226e1f6800410af582452385d1731.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.AchievementTile .AchievementTile-content .AchievementTile-noProgressIcon:before, .AchievementTile .AchievementTile-content .ProgressDonut-icon:before {
    content: "";
    display: block;
    padding-top: 100%
}

.AchievementTile .AchievementTile-content .ProgressDonut-number {
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .AchievementTile .AchievementTile-content .ProgressDonut-number {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .AchievementTile .AchievementTile-content .ProgressDonut-number {
        font-size: 1.44rem
    }
}

.AchievementTile .AchievementTile-pointsArea {
    color: #f8b700
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media {
    width: auto;
    margin: 0 auto
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-image {
    padding-right: 4px
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
        font-size: 1.2rem
    }
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text.zh-cn, .zh-cn .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text.ko-kr, .ko-kr .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text.ru-ru, .ru-ru .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text.zh-tw, .zh-tw .AchievementTile .AchievementTile-pointsArea .AchievementTile-media .Media-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.AchievementTile:focus, html:not(.touch) .AchievementTile:hover {
    border-color: #f8b700
}

.AchievementTile:focus .AchievementTile-tile .Tile-bg:before, html:not(.touch) .AchievementTile:hover .AchievementTile-tile .Tile-bg:before {
    opacity: .04
}

.AchievementTile:focus .AchievementTile-title, html:not(.touch) .AchievementTile:hover .AchievementTile-title {
    color: #fff
}

.Activity-desc a {
    font-weight: 700
}

.Ad {
    position: relative;
    color: #fff
}

.Ad:before {
    content: "";
    display: block;
    padding-top: 50%
}

.Ad-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.Ad-area, .Ad-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.Ad-bg {
    background-color: #222;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

.Ad-content {
    color: #b1997f;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1.296rem;
    line-height: 1.5;
    color: #cacaca;
    margin: auto;
    position: relative
}

@media (min-width: 720px) {
    .Ad-content {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Ad-content {
        font-size: 1.728rem
    }
}

.Ad--fixed {
    width: 250px;
    width: 75vw
}

.Ad--thin {
    position: relative
}

.Ad--thin:before {
    content: "";
    display: block;
    padding-top: 25%
}

.Ad--wide {
    position: relative
}

.Ad--wide:before {
    content: "";
    display: block;
    padding-top: 33.33333333%
}

.Ad--tall {
    position: relative
}

.Ad--tall:before {
    content: "";
    display: block;
    padding-top: 200%
}

.Ad--square {
    position: relative
}

.Ad--square:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Ad--video {
    position: relative
}

.Ad--video:before {
    content: "";
    display: block;
    padding-top: 56.25%
}

.Ad--gutter > .Ad-area {
    margin: 10px
}

.ArtGroup {
    position: relative
}

.ArtGroup .Art {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 0ms ease;
    transition: all 0ms ease
}

html:not(.touch) .ArtGroup .Art:hover .ArtGroup-tooltip {
    opacity: 1
}

.ArtGroup-tooltip {
    opacity: 0
}

.ArtGroup--masked, .ArtGroup-tooltip {
    pointer-events: none
}

.ArtGroup--speedSlow .Art, .ArtGroup--speedSlow .ArtGroup-tooltip {
    -webkit-transition-duration: 1s;
    transition-duration: 1s
}

html:not(.touch) .ArtGroup--speedSlow .Art:hover .ArtGroup-tooltip {
    -webkit-transition-delay: .1s !important;
    transition-delay: .1s !important;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s, -webkit-transform 1s
}

.ArtGroup--speedNormal .Art, .ArtGroup--speedNormal .ArtGroup-tooltip {
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

html:not(.touch) .ArtGroup--speedNormal .Art:hover .ArtGroup-tooltip {
    -webkit-transition-delay: .1s !important;
    transition-delay: .1s !important;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, transform .5s;
    transition: opacity .5s, transform .5s, -webkit-transform .5s
}

.ArtGroup--speedFast .Art, .ArtGroup--speedFast .ArtGroup-tooltip {
    -webkit-transition-duration: .2s;
    transition-duration: .2s
}

html:not(.touch) .ArtGroup--speedFast .Art:hover .ArtGroup-tooltip {
    -webkit-transition-delay: .1s !important;
    transition-delay: .1s !important;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s, -webkit-transform .2s
}

html:not(.touch) .ArtGroup--hoverFocus:hover .Art {
    -webkit-filter: brightness(.6) grayscale(.6);
    filter: brightness(.6) grayscale(.6)
}

html:not(.touch) .ArtGroup--hoverFocus:hover .Art:hover {
    -webkit-filter: none;
    filter: none;
    z-index: 1
}

html:not(.touch) .ArtGroup--hoverFocus:hover .Position:hover {
    z-index: 1
}

html:not(.touch) .ArtGroup--hoverScale .Art:hover {
    -webkit-transform: scale(1.05) translateZ(0);
    transform: scale(1.05) translateZ(0)
}

html:not(.touch) .ArtGroup--hoverScale .Art:hover .Art-mask > use {
    stroke-width: 16;
    stroke: transparent
}

.ArtGroup--transformTooltips .ArtGroup-tooltip {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition: .2s;
    transition: .2s
}

html:not(.touch) .ArtGroup--transformTooltips .Art:hover .ArtGroup-tooltip {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.ArtTooltip {
    position: relative;
    text-align: center;
    display: inline-block;
    height: 38px
}

.ArtTooltip--horde {
    border-style: solid;
    border-image-source: url(../components/arttooltip/assets_subdomain/arttooltip-bg-horde.8648f6f082a5fbf7e6560979766f6382.png);
    border-image-repeat: round;
    border-image-slice: 0 120 fill;
    border-image-width: 0 60px;
    border-image-outset: 30px 0;
    border-width: 0 60px
}

.ArtTooltip--alliance {
    border-style: solid;
    border-image-source: url(../components/arttooltip/assets_subdomain/arttooltip-bg-alliance.e899b0de37c519ef1fd4291ff7f728ea.png);
    border-image-repeat: round;
    border-image-slice: 0 120 fill;
    border-image-width: 0 60px;
    border-image-outset: 30px 0;
    border-width: 0 60px
}

.ArtTooltip-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #fff, #c6c6c6 7%, #fff 20%, #cfcfcf 38%, #fef9ef 68%, #c7beac 83%, #dccdbc);
    background-size: 1em 1em;
    background-position: 50%;
    color: #c6c6c6;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative;
    text-transform: uppercase;
    padding-bottom: 3px;
    display: block;
    white-space: nowrap
}

@media (min-width: 720px) {
    .ArtTooltip-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .ArtTooltip-title {
        font-size: 1.44rem
    }
}

.ArtTooltip-title.zh-cn, .zh-cn .ArtTooltip-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArtTooltip-title.ko-kr, .ko-kr .ArtTooltip-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArtTooltip-title.ru-ru, .ru-ru .ArtTooltip-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.ArtTooltip-title.zh-tw, .zh-tw .ArtTooltip-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ArtTooltip-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #ede0c9 20%, #8a7e66);
    background-size: 1.3em 1.3em;
    background-position: top;
    color: #ede0c9;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative;
    text-transform: uppercase;
    display: block
}

@media (min-width: 720px) {
    .ArtTooltip-subtitle {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .ArtTooltip-subtitle {
        font-size: 1.2rem
    }
}

.ArtTooltip-subtitle.zh-cn, .zh-cn .ArtTooltip-subtitle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArtTooltip-subtitle.ko-kr, .ko-kr .ArtTooltip-subtitle {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArtTooltip-subtitle.ru-ru, .ru-ru .ArtTooltip-subtitle {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.ArtTooltip-subtitle.zh-tw, .zh-tw .ArtTooltip-subtitle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ArtTooltip--crest {
    position: relative
}

.ArtTooltip--crest .ArtTooltip-crest {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "";
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

.ArticleTile-content {
    position: relative
}

.ArticleTile-bottom {
    position: absolute;
    bottom: 0;
    width: 100%
}

.ArticleTile-bottomInner {
    display: table;
    position: relative;
    width: 100%;
    padding: 20px;
    pointer-events: none
}

.ArticleTile-left, .ArticleTile-right {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    vertical-align: bottom
}

.ArticleTile-right {
    text-align: right
}

.ArticleTile-comments {
    z-index: 1;
    pointer-events: all
}

.ArticleTile-title {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    color: #f8b700;
    line-height: 22px
}

@media (min-width: 720px) {
    .ArticleTile-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile-title {
        font-size: 1.44rem
    }
}

.ArticleTile-title.zh-cn, .zh-cn .ArticleTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile-title.ko-kr, .ko-kr .ArticleTile-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArticleTile-title.ru-ru, .ru-ru .ArticleTile-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.ArticleTile-title.zh-tw, .zh-tw .ArticleTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .ArticleTile:hover .ArticleTile-title {
    color: #fff
}

.ArticleTile-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: 22px
}

@media (min-width: 720px) {
    .ArticleTile-subtitle {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile-subtitle {
        font-size: 1.2rem
    }
}

.ArticleTile-subtitle.zh-cn, .zh-cn .ArticleTile-subtitle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile-subtitle.ko-kr, .ko-kr .ArticleTile-subtitle {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.ArticleTile-subtitle.zh-tw, .zh-tw .ArticleTile-subtitle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .ArticleTile-subtitle {
        line-height: 22px
    }
}

.ArticleTile-category {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap
}

@media (min-width: 720px) {
    .ArticleTile-category {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile-category {
        font-size: 1.2rem
    }
}

.ArticleTile-category.zh-cn, .zh-cn .ArticleTile-category {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile-category.ko-kr, .ko-kr .ArticleTile-category {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.ArticleTile-category.zh-tw, .zh-tw .ArticleTile-category {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .ArticleTile-category {
        line-height: 22px
    }
}

.ArticleTile--noFade .ArticleTile-fade {
    display: none
}

.ArticleTile-fade {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(90%, rgba(0, 0, 0, .8)));
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .8) 90%)
}

.ArticleTile-fade, .ArticleTile-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.ArticleTile-link {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    width: 100%;
    border: 1px solid #504137
}

html:not(.touch) .ArticleTile .ArticleTile-link:focus, html:not(.touch) .ArticleTile:hover .ArticleTile-link {
    outline: 0;
    border-color: #f8b700
}

.ArticleTile--thin .ArticleTile-tile {
    position: relative
}

.ArticleTile--thin .ArticleTile-tile:before {
    content: "";
    display: block;
    padding-top: 33.33333333%
}

.ArticleTile--wide .ArticleTile-tile {
    position: relative
}

.ArticleTile--wide .ArticleTile-tile:before {
    content: "";
    display: block;
    padding-top: 50%
}

.ArticleTile--tall .ArticleTile-tile {
    position: relative
}

.ArticleTile--tall .ArticleTile-tile:before {
    content: "";
    display: block;
    padding-top: 200%
}

.ArticleTile--square .ArticleTile-tile {
    position: relative
}

.ArticleTile--square .ArticleTile-tile:before {
    content: "";
    display: block;
    padding-top: 100%
}

.ArticleTile--photo .ArticleTile-tile {
    position: relative
}

.ArticleTile--photo .ArticleTile-tile:before {
    content: "";
    display: block;
    padding-top: 75%
}

.ArticleTile--gutter .ArticleTile-tile > .Tile-area {
    margin: 10px
}

.ArticleTile--fixed .ArticleTile-tile {
    width: 250px;
    width: 75vw
}

.ArticleTile--gutter .ArticleTile-fade, .ArticleTile--gutter .ArticleTile-link {
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 10px;
    width: calc(100% - 20px)
}

.ArticleTile--stacked.ArticleTile--gutter .ArticleTile-fade, .ArticleTile--stacked.ArticleTile--gutter .ArticleTile-link {
    bottom: 0
}

.ArticleTile--gutter .ArticleTile-bottom {
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto
}

.ArticleTile--highlight .ArticleTile-content {
    margin: 0
}

.ArticleTile--highlight .ArticleTile-category {
    font-weight: 700
}

.ArticleTile--highlight .ArticleTile-bottom, .ArticleTile--highlight .ArticleTile-top {
    padding: 20px
}

.ArticleTile--highlight .ArticleTile-bottom {
    text-align: center;
    background-color: rgba(0, 0, 0, .4)
}

.ArticleTile--highlight .ArticleTile-right {
    display: none
}

.ArticleTile--highlight .ArticleTile-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .ArticleTile--highlight .ArticleTile-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--highlight .ArticleTile-title {
        font-size: 1.728rem
    }
}

.ArticleTile--highlight .ArticleTile-title.zh-cn, .zh-cn .ArticleTile--highlight .ArticleTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile--highlight .ArticleTile-title.ko-kr, .ko-kr .ArticleTile--highlight .ArticleTile-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArticleTile--highlight .ArticleTile-title.ru-ru, .ru-ru .ArticleTile--highlight .ArticleTile-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.ArticleTile--highlight .ArticleTile-title.zh-tw, .zh-tw .ArticleTile--highlight .ArticleTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ArticleTile--featured .ArticleTile-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .ArticleTile--featured .ArticleTile-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--featured .ArticleTile-title {
        font-size: 1.728rem
    }
}

.ArticleTile--featured .ArticleTile-title.zh-cn, .zh-cn .ArticleTile--featured .ArticleTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile--featured .ArticleTile-title.ko-kr, .ko-kr .ArticleTile--featured .ArticleTile-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArticleTile--featured .ArticleTile-title.ru-ru, .ru-ru .ArticleTile--featured .ArticleTile-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.ArticleTile--featured .ArticleTile-title.zh-tw, .zh-tw .ArticleTile--featured .ArticleTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ArticleTile--featured .ArticleTile-category {
    font-size: 1.296rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .ArticleTile--featured .ArticleTile-category {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--featured .ArticleTile-category {
        font-size: 1.728rem
    }
}

.ArticleTile--stacked .ArticleTile-link {
    display: block
}

.ArticleTile--stacked .ArticleTile-fade {
    display: none
}

.ArticleTile--stacked .ArticleTile-bottom {
    background: #211510;
    border: 1px solid #504137;
    position: relative
}

.ArticleTile--stacked.ArticleTile--gutter .ArticleTile-bottom {
    bottom: 0;
    left: 0;
    margin: -10px 10px 10px;
    right: 0
}

.ArticleTile--stacked .ArticleTile-left {
    padding-right: 40px;
    vertical-align: top
}

.ArticleTile--stacked .ArticleTile-subtitle {
    color: #ebdec2;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 14px;
    text-shadow: none
}

.ArticleTile--stacked .ArticleTile-title {
    color: #f8b700;
    line-height: 21px;
    margin-top: 7px;
    min-height: 42px;
    text-shadow: none
}

.ArticleTile-commentTotal {
    z-index: 1
}

.ArticleTile--stacked .ArticleTile-commentTotal > .CommentTotal-number {
    line-height: 21px
}

.ArticleTile--stacked .ArticleTile-commentTotal > .CommentTotal-icon, .ArticleTile--stacked .ArticleTile-commentTotal > .CommentTotal-number {
    color: #b1997f
}

.ArticleTile--stackedLarge .ArticleTile-bottomInner {
    padding-top: 40px;
    padding-bottom: 40px
}

.ArticleTile--stackedLarge .ArticleTile-title {
    font-size: 1.866rem;
    line-height: 1.5;
    line-height: 42px
}

@media (min-width: 720px) {
    .ArticleTile--stackedLarge .ArticleTile-title {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--stackedLarge .ArticleTile-title {
        font-size: 2.488rem
    }
}

@media (min-width: 720px) {
    .ArticleTile--stackedLarge .ArticleTile-title {
        line-height: 42px
    }
}

.ArticleTile--stackedLarge .ArticleTile-subtitle {
    line-height: 28px
}

@media (min-width: 720px) {
    .ArticleTile--stackedLarge .ArticleTile-left {
        width: 80%
    }
}

.ArticleTile--legion {
    padding-bottom: 40px
}

.ArticleTile--legion .ArticleTile-bottom {
    bottom: auto;
    top: 100%
}

.ArticleTile--legion .ArticleTile-bottomInner {
    padding: 10px
}

.ArticleTile--legion .ArticleTile-title {
    font-size: 1rem;
    line-height: 1.5;
    color: #2be73c;
    text-transform: uppercase;
    -webkit-transition: color .2s ease;
    transition: color .2s ease
}

@media (min-width: 720px) {
    .ArticleTile--legion .ArticleTile-title {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--legion .ArticleTile-title {
        font-size: 1rem
    }
}

.ArticleTile--legion .ArticleTile-tile .Tile-bg {
    background-color: #262626
}

.ArticleTile--legion .ArticleTile-fade {
    background: none;
    -webkit-box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, .5)
}

.ArticleTile--legion .ArticleTile-link {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/articletile/assets_subdomain/articletile-legion.bdc834071d42d15c9a63aaa8185c9689.png);
    border-image-repeat: round;
    border-image-slice: 36 fill;
    border-image-width: 26px;
    border-image-outset: 6px
}

.ArticleTile--legion .ArticleTile-link:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/articletile/assets_subdomain/articletile-legion-hover.9bd91cd7593f6b48bd9bf1612b4c43cf.png);
    border-image-repeat: round;
    border-image-slice: 36 fill;
    border-image-width: 26px;
    border-image-outset: 6px;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease
}

html:not(.touch) .ArticleTile--legion .ArticleTile-link:hover:before {
    opacity: 1
}

.ArticleTile--ocho {
    padding-bottom: 30px;
    margin: 8px
}

@media (min-width: 720px) {
    .ArticleTile--ocho {
        padding-bottom: 50px
    }
}

.ArticleTile--ocho .ArticleTile-bottom {
    bottom: auto;
    top: 100%;
    margin-top: 10px;
    text-align: center;
    pointer-events: none
}

.ArticleTile--ocho .ArticleTile-bottomInner {
    padding: 10px
}

.ArticleTile--ocho .ArticleTile-title {
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca
}

@media (min-width: 720px) {
    .ArticleTile--ocho .ArticleTile-title {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .ArticleTile--ocho .ArticleTile-title {
        font-size: 1rem
    }
}

.ArticleTile--ocho .ArticleTile-title.zh-cn, .zh-cn .ArticleTile--ocho .ArticleTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ArticleTile--ocho .ArticleTile-title.ko-kr, .ko-kr .ArticleTile--ocho .ArticleTile-title {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ArticleTile--ocho .ArticleTile-title.ru-ru, .ru-ru .ArticleTile--ocho .ArticleTile-title {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.ArticleTile--ocho .ArticleTile-title.zh-tw, .zh-tw .ArticleTile--ocho .ArticleTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ArticleTile--ocho .ArticleTile-fade {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/articletile/assets_subdomain/articletile-ocho-border.747c647b878fba705664fec68f77bb19.png);
    border-image-repeat: round;
    border-image-slice: 108 fill;
    border-image-width: 54px;
    border-image-outset: 34px
}

.ArticleTile--ocho .ArticleTile-tile .Tile-bg {
    background-color: #1f1f1f
}

.ArticleTile--ocho .ArticleTile-fade, .ArticleTile--ocho .ArticleTile-tile .Tile-bg {
    -webkit-transition: -webkit-filter .2s ease;
    transition: -webkit-filter .2s ease;
    transition: filter .2s ease;
    transition: filter .2s ease, -webkit-filter .2s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.ArticleTile--ocho .ArticleTile-fade {
    background: none;
    -webkit-box-shadow: 0 0 20px 12px #000;
    box-shadow: 0 0 20px 12px #000
}

.ArticleTile--ocho .ArticleTile-link {
    border: none
}

html:not(.touch) .ArticleTile--ocho .ArticleTile-content:hover .ArticleTile-fade, html:not(.touch) .ArticleTile--ocho .ArticleTile-content:hover .ArticleTile-tile .Tile-bg {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2)
}

.ArticleTile--ocho.ArticleTile--video {
    position: relative
}

.ArticleTile--ocho.ArticleTile--video .ArticleTile-play {
    display: block;
    width: 35%;
    max-width: 200px;
    z-index: 1;
    pointer-events: none;
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.ArticleTile--ocho.ArticleTile--video .ArticleTile-play:before {
    content: "";
    display: block;
    padding-top: 100%
}

.ArticleTile--ocho.ArticleTile--video .ArticleTile-play .ArticleTile-playArrow:after, .ArticleTile--ocho.ArticleTile--video .ArticleTile-play .ArticleTile-playArrow:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 1;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease
}

.ArticleTile--ocho.ArticleTile--video .ArticleTile-play .ArticleTile-playArrow:before {
    background-image: url(../components/articletile/assets_subdomain/articletile-ocho-play-default.2cd94fc1a56d960047728d212d1e0aba.png);
    opacity: 1
}

.ArticleTile--ocho.ArticleTile--video .ArticleTile-play .ArticleTile-playArrow:after {
    background-image: url(../components/articletile/assets_subdomain/articletile-ocho-play-hover-no-shadow.f9b6da33b050918b2bb17449f692c569.png);
    opacity: 0
}

html:not(.touch) .ArticleTile--ocho.ArticleTile--video .ArticleTile-content:hover .ArticleTile-playArrow:after {
    opacity: 1
}

.ArticleTile--ocho-noTitle {
    padding-bottom: 0;
    margin-bottom: 0
}

.ArticleTile--ocho-noTitle .ArticleTile-bottom {
    display: none
}

.Avatar {
    z-index: 0;
    position: relative;
    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: opacity .3s cubic-bezier(.23, 1, .32, 1) 0s;
    background-color: #504137;
    background-image: linear-gradient(45deg, #352011, #504137, #352011);
    border-radius: 50%;
    display: inline-block;
    max-width: 192px;
    overflow: hidden;
    width: 64px
}

body.z-index-reset-full .Avatar, body.z-index-reset .Avatar {
    z-index: auto
}

.Avatar:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Avatar-image {
    border: 1px solid #211510;
    border-radius: 50%;
    bottom: 3px;
    left: 3px;
    right: 3px;
    top: 3px
}

.Avatar-image, .Avatar-image:before {
    background-size: cover;
    position: absolute
}

.Avatar-image:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #211510;
    background-image: url(../components/avatar/assets_subdomain/avatar-anon.69fa272ea4967d72aff9bb08d7d8a839.png);
    border-radius: 50%;
    content: "";
    z-index: -1
}

.Avatar--anon .Avatar-image {
    background-image: none !important
}

.Avatar--onDark {
    background-color: #211510;
    border-color: #211510
}

.Avatar--large {
    width: 200px
}

.Avatar--medium {
    width: 38px
}

.Avatar--small, .Avatar--tiny {
    width: 32px
}

.Avatar--full {
    width: 100%
}

.Avatar--tiny {
    margin: -8px;
    -webkit-transform: scale(.5);
    transform: scale(.5)
}

.Avatar--medium .Avatar-image, .Avatar--small .Avatar-image, .Avatar--tiny .Avatar-image {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 2px
}

.Avatar--square {
    border-radius: 0
}

.Avatar--square .Avatar-image {
    border: 0;
    border-radius: 0;
    bottom: 1px;
    left: 1px;
    right: 1px;
    top: 1px
}

.Avatar--square .Avatar-image:before {
    border-radius: 0
}

.Avatar--spotlight.Avatar {
    width: 96px;
    height: 96px
}

.Avatar--spotlight > .Avatar-overlay {
    width: 118px;
    height: 118px;
    left: -12px;
    top: -12px
}

.Avatar--spotlight-small > .Avatar-overlay, .Avatar--spotlight > .Avatar-overlay {
    background: url(../components/avatar/assets_subdomain/avatar-stylized.ad9e69945083b898709c55d68b24bc23.png) no-repeat 0 0;
    background-size: cover;
    position: absolute
}

.Avatar--spotlight-small > .Avatar-overlay {
    width: 78px;
    height: 72px;
    left: -7px;
    top: -7px
}

.Avatar--goldLarge, .Avatar--goldMedium {
    background: url(../components/avatar/assets_subdomain/avatar-gold.353c47772e26631a344321502910efc5.png) no-repeat 0 0;
    background-size: 100% 100%;
    border-radius: 0;
    overflow: visible;
    width: 73px
}

.Avatar--goldLarge > .Avatar-image, .Avatar--goldMedium > .Avatar-image {
    bottom: 9px;
    left: 8px;
    right: 8px;
    top: 7px
}

.Avatar--goldMedium {
    width: 66px
}

.Avatar--goldMedium > .Avatar-image {
    bottom: 8px;
    left: 7px;
    right: 7px;
    top: 6px
}

.Avatar--goldSmall {
    width: 37px
}

.Avatar--goldSmall > .Avatar-image {
    left: 5px;
    top: 4px;
    right: 5px;
    bottom: 6px
}

.Avatar--loading {
    opacity: .5
}

.BarGraph-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    width: 100%;
    position: relative
}

.BarGraph-error {
    width: 100%;
    max-width: 85%;
    color: #cacaca
}

.BarGraph-svg {
    display: block;
    border: 1px solid hsla(0, 0%, 66.7%, .2);
    background: hsla(0, 0%, 100%, .04)
}

.BarGraph-svg--error .BarGraph-barContainer, html:not(.touch) .BarGraph-svg:hover .BarGraph-barContainer {
    opacity: .5
}

.BarGraph-svg--error .BarGraph-barContainer:hover, html:not(.touch) .BarGraph-svg:hover .BarGraph-barContainer:hover {
    opacity: 1
}

.BarGraph-bar {
    stroke-width: 1px;
    -webkit-transition: height .3s cubic-bezier(.165, .84, .44, 1), y .3s cubic-bezier(.165, .84, .44, 1), x .3s cubic-bezier(.165, .84, .44, 1), width .3s cubic-bezier(.165, .84, .44, 1);
    transition: height .3s cubic-bezier(.165, .84, .44, 1), y .3s cubic-bezier(.165, .84, .44, 1), x .3s cubic-bezier(.165, .84, .44, 1), width .3s cubic-bezier(.165, .84, .44, 1)
}

.BarGraph-bar--background {
    fill: #f8b700;
    stroke: transparent
}

.BarGraph-bar--fade {
    fill: url(#BarGraph-verticalGradient);
    stroke: hsla(0, 0%, 100%, .1)
}

.BarGraph--horizontal .BarGraph-bar--fade {
    fill: url(#BarGraph-horizontalGradient)
}

.BarGraph-hoverArea {
    fill: transparent;
    stroke: transparent
}

.BarGraph-barContainer {
    -webkit-transition: opacity .15s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1);
    transition: opacity .15s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1);
    transition: opacity .15s cubic-bezier(.165, .84, .44, 1), transform .3s cubic-bezier(.165, .84, .44, 1);
    transition: opacity .15s cubic-bezier(.165, .84, .44, 1), transform .3s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1);
    cursor: pointer
}

.BarGraph-barContainer--DEATHKNIGHT .BarGraph-bar--background {
    stroke: #c41e3b;
    fill: #c41e3b
}

.BarGraph-barContainer--DEMONHUNTER .BarGraph-bar--background {
    stroke: #a330c9;
    fill: #a330c9
}

.BarGraph-barContainer--DRUID .BarGraph-bar--background {
    stroke: #ff7c0a;
    fill: #ff7c0a
}

.BarGraph-barContainer--HUNTER .BarGraph-bar--background {
    stroke: #7ba93d;
    fill: #aad372
}

.BarGraph-barContainer--MAGE .BarGraph-bar--background {
    stroke: #46b1d6;
    fill: #68ccef
}

.BarGraph-barContainer--MONK .BarGraph-bar--background {
    stroke: #0ac895;
    fill: #00ffba
}

.BarGraph-barContainer--PALADIN .BarGraph-bar--background {
    stroke: #f48cba;
    fill: #f48cba
}

.BarGraph-barContainer--PRIEST .BarGraph-bar--background {
    stroke: #817d73;
    fill: #f0ebe0
}

.BarGraph-barContainer--ROGUE .BarGraph-bar--background {
    stroke: #aba14f;
    fill: #fff468
}

.BarGraph-barContainer--SHAMAN .BarGraph-bar--background {
    stroke: #2359ff;
    fill: #2359ff
}

.BarGraph-barContainer--WARLOCK .BarGraph-bar--background {
    stroke: #9382c9;
    fill: #9382c9
}

.BarGraph-barContainer--WARRIOR .BarGraph-bar--background {
    stroke: #af7c46;
    fill: #c69b6d
}

.BarGraph-barContainer--TANK .BarGraph-bar--background {
    stroke: #285ac0;
    fill: #285ac0
}

.BarGraph-barContainer--HEALER .BarGraph-bar--background {
    stroke: #27a964;
    fill: #27a964
}

.BarGraph-barContainer--DAMAGE .BarGraph-bar--background {
    stroke: #9a0000;
    fill: #9a0000
}

.BinarySelector {
    background-image: url(../components/binaryselector/assets_subdomain/binaryselector-sprite-2.30b81871ace81534d8ba1d1d1ca97d21.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -5px;
    width: 198px;
    height: 70px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    pointer-events: auto
}

.BinarySelector-tabsLink {
    display: block;
    height: 64px;
    width: 50%;
    position: relative;
    z-index: 1
}

.BinarySelector-tabsLink:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-image: url(../components/binaryselector/assets_subdomain/binaryselector-sprite-2.30b81871ace81534d8ba1d1d1ca97d21.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    opacity: 0;
    display: block;
    pointer-events: none
}

html:not(.touch) .BinarySelector-tabsLink:not(.is-selected):hover:before {
    opacity: 1
}

.BinarySelector-tabsLink.BinarySelector-tabsLinkA:before {
    margin-right: -99px;
    padding-right: 99px;
    background-position: 0 -153.3px
}

.BinarySelector-tabsLink.BinarySelector-tabsLinkB:before {
    margin-left: -99px;
    padding-left: 99px;
    background-position: 0 -153.3px
}

.BinarySelector-option {
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    background-position: 0 -79px;
    width: 198px;
    height: 64px;
    display: none;
    pointer-events: none
}

.BinarySelector-optionA {
    margin-left: 0;
    padding-right: 99px
}

.BinarySelector-optionA, .BinarySelector-optionB {
    background-image: url(../components/binaryselector/assets_subdomain/binaryselector-sprite-2.30b81871ace81534d8ba1d1d1ca97d21.png)
}

.BinarySelector-optionB {
    margin-left: -99px;
    padding-left: 99px
}

.BinarySelector-tabsLink.is-selected .BinarySelector-option, .Box {
    display: block
}

.Box {
    background-color: #1a1a1a;
    padding: 20px;
    text-decoration: none
}

.Box--light {
    background-color: #fff
}

.Box--neutral {
    background-color: #eaeaea
}

.Box--dark {
    background-color: #222;
    color: #fff
}

.Box--paper {
    background-color: #ebdec2;
    color: #352011;
    -webkit-box-shadow: 0 0 16px 6px rgba(0, 0, 0, .5);
    box-shadow: 0 0 16px 6px rgba(0, 0, 0, .5);
    border: 12px solid #ebdec2;
    -o-border-image: url(../components/box/assets_subdomain/box-paper.de3476115a6c7796c6e9e07f61a160cc.png) 12 repeat;
    border-image: url(../components/box/assets_subdomain/box-paper.de3476115a6c7796c6e9e07f61a160cc.png) 12 repeat;
    border-image-outset: 3px;
    padding: 15px;
    margin: 3px
}

.Box--paper.Box--edge {
    border-width: 12px 0;
    margin: 2px 0
}

.Box--leather {
    background-color: #211510;
    color: #211510;
    background-image: url(../components/box/assets_subdomain/box-leather.18def74ed60ab9f1f4139f87349d2f79.jpg)
}

.Box--leatherGrey {
    background-image: url(../components/box/assets_subdomain/box-leather-grey.db668caee69fef46471e35733f930d3d.jpg)
}

.Box--leatherGrey, .Box--leatherGreyDark {
    background-color: #444;
    color: #444;
    background-position: 50%
}

.Box--leatherGreyDark {
    background-image: url(../components/box/assets_subdomain/box-leather-grey-dark.0477a49460ddf3f97294112a1b372a06.jpg)
}

.Box--leatherGreyLight {
    background-color: #444;
    color: #fff;
    background-image: url(../components/box/assets_subdomain/box-leather-grey-light.dbd081854d793025305828b523090901.jpg);
    background-position: 50%
}

.Box--leatherBlue {
    background-color: #211510;
    color: #211510;
    background-image: url(../components/box/assets_subdomain/box-leather-blue.27a12e492ebc7ab4e91ddaaa22b77fa4.jpg)
}

.Box--overlayDark {
    background: rgba(0, 0, 0, .75);
    border: 1px solid #504137;
    color: #504137
}

.Box--nearlyOpaque {
    background-color: rgba(0, 0, 0, .9)
}

.Box--brown {
    background: #211510;
    color: #ebdec2
}

.Box--borderBrown, .Box--brown {
    border: 1px solid #504137
}

.Box--borderGrey {
    border: 1px solid #444
}

.Box--borderGreyLight {
    border: 1px solid #777
}

.Box--transparent {
    background-color: transparent
}

.Box--translucent {
    background-color: rgba(0, 0, 0, .3)
}

.Box[disabled] {
    opacity: .5
}

.Box--flush {
    padding: 0
}

.Box--offLeft {
    position: relative
}

.Box--offLeft:before {
    content: "";
    background: inherit;
    width: 1600px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%
}

.Box--offRight {
    position: relative
}

.Box--offRight:after {
    content: "";
    background: inherit;
    width: 1600px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%
}

.Box--corinthian {
    position: relative;
    margin: 6px
}

.Box--corinthian:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-corinthianchrome.127807209b0ce1c314a9550e1d52b48a.png);
    border-image-repeat: repeat;
    border-image-slice: 96 fill;
    border-image-width: 48px;
    border-image-outset: 12px;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none
}

.Box--corinthianGoldOnHover .Box-divider:before, .Box--corinthianGoldOnHover:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../components/box/assets_subdomain/box-corinthiangold.ee9a239ef6cc508952790a5405599f64.png);
    content: "";
    opacity: 0;
    z-index: -1
}

html:not(.touch) .Box--corinthianGoldOnHover:hover:after {
    -o-border-image: url(../components/box/assets_subdomain/box-corinthiangold.ee9a239ef6cc508952790a5405599f64.png);
    border-image: url(../components/box/assets_subdomain/box-corinthiangold.ee9a239ef6cc508952790a5405599f64.png)
}

.Box--corinthianGoldOnHover .Box-divider:before, html:not(.touch) .Box--corinthianGoldOnHover:hover .Box-divider {
    background-image: url(../components/divider/assets_subdomain/divider-corinthiangold.1554726f9ab60212f8da7e33592ea29f.jpg)
}

.Box--DEATHKNIGHT-bg {
    background: rgba(8, 8, 18, .75)
}

.Box--DEMONHUNTER-bg {
    background: rgba(10, 16, 4, .75)
}

.Box--DRUID-bg {
    background: rgba(0, 13, 7, .75)
}

.Box--HUNTER-bg {
    background: rgba(7, 3, 13, .75)
}

.Box--MAGE-bg {
    background: rgba(17, 6, 23, .75)
}

.Box--MONK-bg {
    background: rgba(4, 17, 12, .75)
}

.Box--PALADIN-bg {
    background: rgba(19, 4, 10, .75)
}

.Box--PRIEST-bg {
    background: rgba(26, 8, 18, .75)
}

.Box--ROGUE-bg {
    background: rgba(21, 13, 26, .75)
}

.Box--SHAMAN-bg {
    background: rgba(4, 4, 20, .75)
}

.Box--WARLOCK-bg {
    background: rgba(21, 18, 31, .75)
}

.Box--WARRIOR-bg {
    background: rgba(26, 4, 7, .75)
}

.Box--bgTop {
    background-position: top
}

.Box--bgBottom {
    background-position: bottom
}

.Box--legion {
    background: rgba(0, 0, 0, .7);
    position: relative;
    margin: 17px
}

.Box--legion:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-legion.7907c7c9dcaed62ad0a0232350b4bc44.png);
    border-image-repeat: round;
    border-image-slice: 75 fill;
    border-image-width: 75px;
    border-image-outset: 28px;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none
}

.Box--ocho {
    background-image: url(../components/box/assets_subdomain/box-leather-blue.27a12e492ebc7ab4e91ddaaa22b77fa4.jpg);
    position: relative;
    margin: 17px
}

.Box--ocho:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/articletile/assets_subdomain/articletile-ocho-border.747c647b878fba705664fec68f77bb19.png);
    border-image-repeat: round;
    border-image-slice: 108 fill;
    border-image-width: 54px;
    border-image-outset: 34px;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none
}

.Box--ocho-slant {
    position: relative;
    height: 57px;
    top: -1px;
    padding: 8px;
    background-color: #cacaca;
    background-image: url(../components/box/assets_subdomain/box-ocho-slant-hover.f6aa7dc1ec3d33127d52c2257eaa1cbb.png);
    background-size: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-ocho-slant.f55ecfbfce6f522a6fa7a30affb159a0.png);
    border-image-repeat: round;
    border-image-slice: 0 130 fill;
    border-image-width: 0 130px;
    border-image-outset: 0 70px
}

html:not(.touch) .Box--ocho-slant:hover {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-ocho-slant-hover.f6aa7dc1ec3d33127d52c2257eaa1cbb.png);
    border-image-repeat: round;
    border-image-slice: 0 130 fill;
    border-image-width: 0 130px;
    border-image-outset: 0 70px
}

.Box--woodFrame {
    position: relative;
    padding: 23px
}

.Box--woodFrame:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-woodframe.54aee3ad5d39e33652ee3518edd1bc58.png);
    border-image-repeat: repeat;
    border-image-slice: 110 fill;
    border-image-width: 55px;
    border-image-outset: 0;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none
}

.Box--goldFrame {
    position: relative;
    padding: 5px
}

.Box--goldFrame:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/box/assets_subdomain/box-goldframe.ba86d98c543a96c5d7c12fcc3170644b.png);
    border-image-repeat: repeat;
    border-image-slice: 82 fill;
    border-image-width: 41px;
    border-image-outset: 0;
    content: "";
    display: block;
    z-index: 1;
    pointer-events: none
}

html:not(.touch) .Box--hover:not([disabled]) {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    cursor: pointer
}

html:not(.touch) .Box--hover:not([disabled]):hover {
    border: 1px solid #f8b700
}

.Box--shadow {
    -webkit-box-shadow: 0 0 48px -4px #000;
    box-shadow: 0 0 48px -4px #000
}

.Box--shadow-ALLIANCE {
    -webkit-box-shadow: 0 0 48px -4px #0078ff;
    box-shadow: 0 0 48px -4px #0078ff
}

.Box--shadow-HORDE {
    -webkit-box-shadow: 0 0 48px -4px #b30000;
    box-shadow: 0 0 48px -4px #b30000
}

.Card {
    background: #211510;
    color: #ebdec2;
    border: 1px solid #504137;
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: 0
}

body.z-index-reset-full .Card, body.z-index-reset .Card {
    z-index: auto
}

.Card-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Card-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Card-title {
        font-size: 1.728rem
    }
}

.Card-title.zh-cn, .zh-cn .Card-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Card-title.ko-kr, .ko-kr .Card-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Card-title.ru-ru, .ru-ru .Card-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Card-title.zh-tw, .zh-tw .Card-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Card-subtitle {
    color: #b1997f
}

.Card-subtitle, .Card-title {
    text-shadow: none
}

.Card--stacked .Card-content {
    border-width: 1px 0 0
}

.Card--hovered {
    border-color: #f8b700
}

.Card--hovered .Card-title {
    color: #fff
}

html:not(.touch) .Card:hover {
    border-color: #f8b700
}

html:not(.touch) .Card:hover .Card-title {
    color: #fff
}

.Card-link {
    display: block
}

.Card-content {
    width: 100%;
    border-left: 1px solid #504137
}

.Card--excerpt .Card-description, .Card-excerpt, .Card-image--full, .Card-image--half {
    display: none
}

.Card--excerpt .Card-excerpt--normal {
    display: block
}

.Card--excerptMedium .Card-description {
    display: none
}

.Card--excerptMedium .Card-excerpt--medium {
    display: block
}

.Card--excerptLong .Card-description {
    display: none
}

.Card--excerptLong .Card-excerpt--long {
    display: block
}

.Card--1of4 .Card-image {
    display: block;
    float: left;
    width: 25%
}

.Card--1of4 .Card-image .Card-image--full {
    display: block
}

.Card--1of4 .Card-content {
    width: 75%
}

.Card--1of3 .Card-image {
    display: block;
    float: left;
    width: 33%
}

.Card--1of3 .Card-image .Card-image--full {
    display: block
}

.Card--1of3 .Card-content {
    width: 67%
}

.Card--2of5 .Card-image {
    display: block;
    float: left;
    width: 40%
}

.Card--2of5 .Card-image .Card-image--full {
    display: block
}

.Card--2of5 .Card-content {
    width: 60%
}

.Card--2of3 .Card-image {
    display: block;
    float: left;
    width: 66%
}

.Card--2of3 .Card-image .Card-image--full {
    display: block
}

.Card--2of3 .Card-content {
    width: 33%
}

.Card--1of2 .Card-image {
    display: block;
    float: left;
    width: 50%
}

.Card--1of2 .Card-image .Card-image--full {
    display: block
}

.Card--1of2 .Card-content {
    width: 50%
}

.Card--1of2 .Card-content, .Card--1of3 .Card-content, .Card--1of4 .Card-content, .Card--2of3 .Card-content, .Card--2of5 .Card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Card--stacked .Card-image {
    float: none;
    width: 100%
}

.Card--stacked .Card-image .Card-image--full {
    display: none
}

.Card--stacked .Card-image .Card-image--half {
    width: 100%;
    display: block
}

.Card--stacked .Card-content {
    width: 100%;
    position: relative;
    border-left: none;
    border-top: 1px solid #504137
}

.Cards .Cards-card {
    margin-top: -1px
}

html:not(.touch) .Cards .Cards-card:hover {
    border-color: #f8b700
}

html:not(.touch) .Cards .Cards-card:hover .Card-title {
    color: #fff
}

.Cards.Cards--gutter {
    padding: 20px
}

.Cards--gutters {
    padding: -10px
}

.Cards--gutters .Cards-card {
    margin-bottom: 20px
}

.Cards--gutter.Cards--gutters {
    margin: 0
}

.Cards--1of4 .Cards-card .Card-image {
    display: block;
    float: left;
    width: 25%
}

.Cards--1of4 .Cards-card .Card-image .Card-image--full {
    display: block
}

.Cards--1of4 .Cards-card .Card-content {
    width: 75%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Cards--1of3 .Cards-card .Card-image {
    display: block;
    float: left;
    width: 33%
}

.Cards--1of3 .Cards-card .Card-image .Card-image--full {
    display: block
}

.Cards--1of3 .Cards-card .Card-content {
    width: 67%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Cards--2of5 .Cards-card .Card-image {
    display: block;
    float: left;
    width: 40%
}

.Cards--2of5 .Cards-card .Card-image .Card-image--full {
    display: block
}

.Cards--2of5 .Cards-card .Card-content {
    width: 60%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Cards--1of2 .Cards-card .Card-image {
    display: block;
    float: left;
    width: 50%
}

.Cards--1of2 .Cards-card .Card-image .Card-image--full {
    display: block
}

.Cards--1of2 .Cards-card .Card-content {
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Cards--2of3 .Cards-card .Card-image {
    display: block;
    float: left;
    width: 66%
}

.Cards--2of3 .Cards-card .Card-image .Card-image--full {
    display: block
}

.Cards--2of3 .Cards-card .Card-content {
    width: 33%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.Cards--stacked .Cards-card .Card-content {
    border-width: 1px 0 0
}

.Cards--stacked .Cards-card .Card-image {
    float: none;
    width: 100%
}

.Cards--stacked .Cards-card .Card-image .Card-image--full {
    display: none
}

.Cards--stacked .Cards-card .Card-image .Card-image--half {
    width: 100%;
    display: block
}

.Cards--stacked .Cards-card .Card-content {
    width: 100%;
    position: relative;
    border-left: none;
    border-top: 1px solid #504137
}

.Cards--excerpts .Cards-card .Card-description {
    display: none
}

.Cards--excerpts .Cards-card .Card-excerpt--normal {
    display: block
}

.Cards--excerptsMedium .Cards-card .Card-description {
    display: none
}

.Cards--excerptsMedium .Cards-card .Card-excerpt--medium {
    display: block
}

.Cards--excerptsLong .Cards-card .Card-description {
    display: none
}

.Cards--excerptsLong .Cards-card .Card-excerpt--long {
    display: block
}

.CarouselLink {
    cursor: pointer;
    opacity: 1
}

.CarouselLink.is-selected {
    cursor: default;
    opacity: 1
}

.Chakram {
    position: relative;
    background-image: url(../components/chakram/assets_subdomain/chakram.c1c46d3cec8529e2a05c50ed0d936706.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 128px;
    height: 128px
}

.Chakram:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Chakram-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Chakram-text {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Chakram-text {
        font-size: 1.44rem
    }
}

.Chakram-text.zh-cn, .zh-cn .Chakram-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Chakram-text.ko-kr, .ko-kr .Chakram-text {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Chakram-text.zh-tw, .zh-tw .Chakram-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Chakram--tiny {
    width: 72px;
    height: 72px
}

.Chakram--small {
    width: 100px;
    height: 100px
}

.Chakram--large {
    width: 219px;
    height: 219px
}

.Chakram--huge {
    width: 400px;
    height: 400px
}

.Chakram--pvpFrame {
    background-image: url(../components/chakram/assets_subdomain/chakram-pvp-frame.82d14121bcda558f464ed70048a42640.png)
}

.Chakram--textLarge .Chakram-text {
    font-size: 1.866rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Chakram--textLarge .Chakram-text {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .Chakram--textLarge .Chakram-text {
        font-size: 2.488rem
    }
}

.Chakram--textLarge .Chakram-text.zh-cn, .zh-cn .Chakram--textLarge .Chakram-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Chakram--textLarge .Chakram-text.ko-kr, .ko-kr .Chakram--textLarge .Chakram-text {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Chakram--textLarge .Chakram-text.ru-ru, .ru-ru .Chakram--textLarge .Chakram-text {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Chakram--textLarge .Chakram-text.zh-tw, .zh-tw .Chakram--textLarge .Chakram-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Chakram--textSmall .Chakram-text {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Chakram--textSmall .Chakram-text {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Chakram--textSmall .Chakram-text {
        font-size: 1.44rem
    }
}

.Chakram--textSmall .Chakram-text.zh-cn, .zh-cn .Chakram--textSmall .Chakram-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Chakram--textSmall .Chakram-text.ko-kr, .ko-kr .Chakram--textSmall .Chakram-text {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Chakram--textSmall .Chakram-text.ru-ru, .ru-ru .Chakram--textSmall .Chakram-text {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Chakram--textSmall .Chakram-text.zh-tw, .zh-tw .Chakram--textSmall .Chakram-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Chakram--textTiny .Chakram-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Chakram--textTiny .Chakram-text {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Chakram--textTiny .Chakram-text {
        font-size: 1.2rem
    }
}

.Chakram--textTiny .Chakram-text.zh-cn, .zh-cn .Chakram--textTiny .Chakram-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Chakram--textTiny .Chakram-text.ko-kr, .ko-kr .Chakram--textTiny .Chakram-text {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Chakram--textTiny .Chakram-text.ru-ru, .ru-ru .Chakram--textTiny .Chakram-text {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Chakram--textTiny .Chakram-text.zh-tw, .zh-tw .Chakram--textTiny .Chakram-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Character {
    clear: both;
    display: inline-block;
    position: relative
}

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

.Character-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.Character.Character--vertical .Character-table {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.Character.Character--vertical .Character-details {
    text-align: center
}

.Character-link {
    display: block
}

.Character-name, .Character-role {
    display: none
}

.Character-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #b1997f;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: normal;
    margin: 0
}

@media (min-width: 720px) {
    .Character-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Character-name {
        font-size: 1.44rem
    }
}

.Character-name.zh-cn, .zh-cn .Character-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character-name.ko-kr, .ko-kr .Character-name {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Character-name.zh-tw, .zh-tw .Character-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Character-level {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: none
}

@media (min-width: 720px) {
    .Character-level {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Character-level {
        font-size: 1.2rem
    }
}

.Character-level.zh-cn, .zh-cn .Character-level {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character-level.ko-kr, .ko-kr .Character-level {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Character-level.zh-tw, .zh-tw .Character-level {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Character-realm {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: none
}

@media (min-width: 720px) {
    .Character-realm {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Character-realm {
        font-size: 1.2rem
    }
}

.Character-realm.zh-cn, .zh-cn .Character-realm {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character-realm.ko-kr, .ko-kr .Character-realm {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Character-realm.zh-tw, .zh-tw .Character-realm {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Character-bust {
    width: 196px;
    display: none
}

.Character-avatar {
    display: none;
    font-style: normal;
    height: 100%;
    line-height: 0;
    vertical-align: middle
}

.Character-avatar > .Avatar {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Character-details {
    line-height: 22px
}

.Character-avatar-role {
    display: none;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: -18px
}

.Character-spinner {
    opacity: .4
}

.Character.Character--TANK .Character-avatar-role {
    background-image: url(../components/character/assets_subdomain/role-tank.08fa1eea5a29d846256225be08918123.png)
}

.Character.Character--HEALER .Character-avatar-role {
    background-image: url(../components/character/assets_subdomain/role-healer.6986b936d3743da01d74541f86209f27.png)
}

.Character.Character--DAMAGE .Character-avatar-role {
    background-image: url(../components/character/assets_subdomain/role-damage.8a1efbae28142180b94af651bed7e1a5.png)
}

.Character.Character--avatar .Character-avatar, .Character.Character--avatar .Character-details {
    display: block
}

.Character.Character--avatar .Character-details {
    padding: 0 10px
}

.Character.Character--avatar.Character--avatarRole .Character-avatar-role {
    display: inline-block
}

.Character.Character--bust .Character-bust, .Character.Character--level .Character-level, .Character.Character--name .Character-name, .Character.Character--realm .Character-realm {
    display: block
}

.Character.Character--role .Character-details, .Character.Character--role .Character-role {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.Character.Character--role.Character--name .Character-name {
    display: inline-block
}

.Character.Character--role .Character-role {
    padding-right: 10px
}

.Character.Character--DEATHKNIGHT .Character-name {
    color: #c41e3b
}

.Character.Character--DEMONHUNTER .Character-name {
    color: #a330c9
}

.Character.Character--DRUID .Character-name {
    color: #ff7c0a
}

.Character.Character--HUNTER .Character-name {
    color: #aad372
}

.Character.Character--MAGE .Character-name {
    color: #68ccef
}

.Character.Character--MONK .Character-name {
    color: #00ffba
}

.Character.Character--PALADIN .Character-name {
    color: #f48cba
}

.Character.Character--PRIEST .Character-name {
    color: #f0ebe0
}

.Character.Character--ROGUE .Character-name {
    color: #fff468
}

.Character.Character--SHAMAN .Character-name {
    color: #2359ff
}

.Character.Character--WARLOCK .Character-name {
    color: #9382c9
}

.Character.Character--WARRIOR .Character-name {
    color: #c69b6d
}

.Character.Character--square .Character-avatar > .Avatar {
    border-radius: 0
}

.Character.Character--square .Character-avatar > .Avatar .Avatar-image {
    border: 0;
    border-radius: 0;
    bottom: 1px;
    left: 1px;
    right: 1px;
    top: 1px
}

.Character.Character--square .Character-avatar > .Avatar .Avatar-image:before {
    border-radius: 0
}

.Character.Character--inline.Character--name .Character-name {
    display: inline-block
}

.Character.Character--inline.Character--level .Character-level, .Character.Character--inline.Character--realm .Character-realm {
    display: inline-block;
    margin-left: .5em
}

.Character.Character--large .Character-bust {
    width: 320px
}

.Character.Character--large .Character-name {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2.2395rem;
    line-height: 1.5;
    margin: 10px 0
}

.Character.Character--large .Character-name.zh-cn, .zh-cn .Character.Character--large .Character-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character.Character--large .Character-name.ko-kr, .ko-kr .Character.Character--large .Character-name {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Character.Character--large .Character-name.ru-ru, .ru-ru .Character.Character--large .Character-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Character.Character--large .Character-name.zh-tw, .zh-tw .Character.Character--large .Character-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Character.Character--large .Character-name {
        font-size: 2.5381rem
    }
}

@media (min-width: 1280px) {
    .Character.Character--large .Character-name {
        font-size: 2.986rem
    }
}

.Character.Character--large .Character-details {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.296rem;
    line-height: 1.5;
    padding-left: 20px;
    padding-right: 20px
}

.Character.Character--large .Character-details.zh-cn, .zh-cn .Character.Character--large .Character-details {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character.Character--large .Character-details.ko-kr, .ko-kr .Character.Character--large .Character-details {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Character.Character--large .Character-details.ru-ru, .ru-ru .Character.Character--large .Character-details {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Character.Character--large .Character-details.zh-tw, .zh-tw .Character.Character--large .Character-details {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Character.Character--large .Character-details {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Character.Character--large .Character-details {
        font-size: 1.728rem
    }
}

.Character.Character--large .Character-details, .Character.Character--large .Character-name {
    text-shadow: 0 0 1px transparent, 0 0 5px rgba(0, 0, 0, .8)
}

.Character--spotlight, .Character--spotlight .Character-details {
    max-width: 96px
}

.Character--spotlight .Character-name {
    word-wrap: wrap
}

.Character--spotlight .Character-avatar-role {
    width: 36px;
    height: 36px;
    margin-top: -20px
}

.Character--compact-spotlight .Character-name {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700
}

.Character--compact-spotlight .Character-name.zh-cn, .zh-cn .Character--compact-spotlight .Character-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Character--compact-spotlight .Character-name.ko-kr, .ko-kr .Character--compact-spotlight .Character-name {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Character--compact-spotlight .Character-name.ru-ru, .ru-ru .Character--compact-spotlight .Character-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Character--compact-spotlight .Character-name.zh-tw, .zh-tw .Character--compact-spotlight .Character-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .Character-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Character-link:hover html:not(.touch) .Character-name {
    color: #fff
}

.Character-link:focus, html:not(.touch) .Character-link:hover {
    outline: 0
}

.Character-link:focus .Character-avatar > .Avatar, html:not(.touch) .Character-link:hover .Character-avatar > .Avatar {
    background-image: linear-gradient(45deg, #5a361c, #6d594c, #58351c)
}

.Character-link:focus .Character-name, html:not(.touch) .Character-link:hover .Character-name {
    color: #fff
}

.CommentTotal {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 28px
}

.CommentTotal-icon {
    width: 18px;
    height: 24px;
    color: #aaa;
    position: relative
}

.CommentTotal-number {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    position: relative;
    text-align: center
}

.CommentTotal-number.zh-cn, .zh-cn .CommentTotal-number {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.CommentTotal-number.ko-kr, .ko-kr .CommentTotal-number {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.CommentTotal-number.zh-tw, .zh-tw .CommentTotal-number {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .CommentTotal-number {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .CommentTotal-number {
        font-size: 1rem
    }
}

.CommentTotal--light > .CommentTotal-icon {
    color: #fff
}

.CommentTotal--light > .CommentTotal-number {
    color: #000
}

.CommentTotal--dark > .CommentTotal-icon {
    color: #222
}

.CommentTotal--gold > .CommentTotal-icon {
    color: #f8b700
}

.CommentTotal--gold > .CommentTotal-number {
    color: #000
}

.CommentTotal--horizontal {
    display: table;
    position: relative;
    width: auto;
    height: auto
}

.CommentTotal--horizontal > .List-item {
    vertical-align: middle
}

.CommentTotal--horizontal > .CommentTotal-icon {
    display: table-cell;
    height: 100%;
    color: #fff
}

.CommentTotal--horizontal > .CommentTotal-number {
    display: table-cell;
    height: 100%;
    color: #fff;
    padding-left: 8px
}

html:not(.touch) .CommentTotal--horizontal:hover > .CommentTotal-icon, html:not(.touch) .CommentTotal--horizontal:hover > .CommentTotal-number {
    color: #f8b700
}

.CommentTotal--horizontal.CommentTotal--right {
    margin-left: auto;
    text-align: right
}

.CommentTotal--horizontal.CommentTotal--right.List--greenChecks > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.CommentTotal--horizontal.CommentTotal--right.List--greenChecks > .List-item:before {
    display: none
}

.CommentTotal--horizontal.CommentTotal--right.List--greenChecks > .List-item:after {
    background: url(../components/list/assets_subdomain/list-greencheck.cc6d210abb78a47b25a380b818acf95c.png) no-repeat 50% 50%;
    background-size: auto 16px;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 18px
}

.CommentTotal--horizontal.CommentTotal--right.List--bulleted > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.CommentTotal--horizontal.CommentTotal--right.List--bulleted > .List-item:before {
    display: none
}

.CommentTotal--horizontal.CommentTotal--right.List--bulleted > .List-item:after {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

.CommentTotal--vertical {
    background-color: rgba(34, 34, 34, .8);
    padding: 6px;
    height: 46px
}

.CommentTotal--vertical > .CommentTotal-icon {
    width: 18px;
    height: 12px
}

.CommentTotal--vertical > .CommentTotal-number {
    position: absolute;
    bottom: 1px
}

.CommentTotal--beigeDark > .CommentTotal-icon, .CommentTotal--beigeDark > .CommentTotal-number {
    color: #b1997f
}

.CommentTotal--black > .CommentTotal-icon, .CommentTotal--black > .CommentTotal-number {
    color: #000
}

.CommentTotal--transition > .CommentTotal-icon:after, .CommentTotal--transition > .CommentTotal-icon:before, .CommentTotal--transition > .CommentTotal-number {
    -webkit-transition: all .2s;
    transition: all .2s
}

html:not(.touch) .CommentTotal--transition:hover > .CommentTotal-icon:after, html:not(.touch) .CommentTotal--transition:hover > .CommentTotal-icon:before, html:not(.touch) .CommentTotal--transition:hover > .CommentTotal-number {
    -webkit-transition-duration: 0s;
    transition-duration: 0s
}

.Content {
    overflow: hidden
}

.Content p {
    margin: 0
}

.Content p + p {
    margin-top: 1.5em
}

.Content h1 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.866rem;
    line-height: 1.5
}

.Content h1.zh-cn, .zh-cn .Content h1 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h1.ko-kr, .ko-kr .Content h1 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h1.ru-ru, .ru-ru .Content h1 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h1.zh-tw, .zh-tw .Content h1 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Content h1 {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .Content h1 {
        font-size: 2.488rem
    }
}

.Content h2 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.296rem;
    line-height: 1.5
}

.Content h2.zh-cn, .zh-cn .Content h2 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h2.ko-kr, .ko-kr .Content h2 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h2.ru-ru, .ru-ru .Content h2 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h2.zh-tw, .zh-tw .Content h2 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Content h2 {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Content h2 {
        font-size: 1.728rem
    }
}

.Content h3 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.08rem;
    line-height: 1.5
}

.Content h3.zh-cn, .zh-cn .Content h3 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h3.ko-kr, .ko-kr .Content h3 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h3.ru-ru, .ru-ru .Content h3 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h3.zh-tw, .zh-tw .Content h3 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Content h3 {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Content h3 {
        font-size: 1.44rem
    }
}

.Content h4 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1rem;
    line-height: 1.5
}

.Content h4.zh-cn, .zh-cn .Content h4 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h4.ko-kr, .ko-kr .Content h4 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h4.ru-ru, .ru-ru .Content h4 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h4.zh-tw, .zh-tw .Content h4 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Content h4 {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Content h4 {
        font-size: 1.2rem
    }
}

.Content h5 {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #09273e;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Content h5 {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Content h5 {
        font-size: 1.2rem
    }
}

.Content h5.zh-cn, .zh-cn .Content h5 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h5.ko-kr, .ko-kr .Content h5 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h5.ru-ru, .ru-ru .Content h5 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h5.zh-tw, .zh-tw .Content h5 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Content h6 {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #09273e;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Content h6 {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Content h6 {
        font-size: 1rem
    }
}

.Content h6.zh-cn, .zh-cn .Content h6 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Content h6.ko-kr, .ko-kr .Content h6 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Content h6.ru-ru, .ru-ru .Content h6 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Content h6.zh-tw, .zh-tw .Content h6 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Content h1, .Content h2, .Content h3, .Content h4, .Content h5, .Content h6 {
    margin: 1.5em 0;
    padding: 0;
    text-shadow: none
}

.Content ol, .Content ul {
    padding-left: 1em
}

.Content ol ol, .Content ol ul, .Content ul ol, .Content ul ul {
    margin-top: 0;
    margin-bottom: 0
}

.Content ol > li {
    counter-increment: counter-level0;
    display: block;
    padding-left: 1.5em;
    position: relative
}

.Content ol > li:before {
    content: counter(counter-level0) ".";
    display: inline-block;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0
}

.Content ol ol > li {
    counter-increment: counter-level1;
    margin-left: 1.5em
}

.Content ol ol > li:before {
    content: counter(counter-level1, lower-latin) "."
}

.Content ol ol ol > li {
    counter-increment: counter-level2
}

.Content ol ol ol > li:before {
    content: counter(counter-level2, lower-roman) "."
}

.Content ul > li {
    display: block;
    padding-left: 2.5em;
    position: relative
}

.Content ul > li:before {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

.Content ul ul > li {
    margin-left: 1.5em
}

.Content ul ul > li:before {
    background-position: -20px 50%
}

.Content ul ul ul > li:before {
    background-position: -40px 50%
}

.Content dl > dt {
    font-weight: 700
}

.Content table {
    border-color: transparent
}

.Content a {
    color: #f8b700 !important
}

html:not(.touch) .Content a:hover {
    text-decoration: underline
}

.Content a[disabled] {
    cursor: default;
    opacity: .5
}

.Content hr {
    border: none;
    border-top: 1px solid #b1997f
}

.Cookies .Content a {
    cursor: pointer
}

.Cookies .Content h1 {
    font-size: 2.2395rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Cookies .Content h1 {
        font-size: 2.5381rem
    }
}

@media (min-width: 1280px) {
    .Cookies .Content h1 {
        font-size: 2.986rem
    }
}

.Cookies .Content h1.zh-cn, .zh-cn .Cookies .Content h1 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Cookies .Content h1.ko-kr, .ko-kr .Cookies .Content h1 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Cookies .Content h1.ru-ru, .ru-ru .Cookies .Content h1 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Cookies .Content h1.zh-tw, .zh-tw .Cookies .Content h1 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Cookies .Content p {
    color: #ebdec2
}

.Cookies .Content ul {
    list-style: square !important;
    padding-left: 30px
}

.Cookies .Content li {
    color: #ebdec2;
    display: list-item;
    position: inherit;
    padding-left: 1em
}

.Cookies .Content li:before {
    content: none
}

.Cookies .Content #optanon-cookie-policy table, .Cookies .Content #optanon-cookie-policy td, .Cookies .Content #optanon-cookie-policy th {
    background: rgba(10, 12, 16, .5) !important;
    border: 1px solid hsla(0, 0%, 100%, .08) !important
}

.Cookies .Content #optanon-cookie-policy td, .Cookies .Content #optanon-cookie-policy th {
    padding: 20px !important
}

.Cookies .Content #optanon-cookie-policy th {
    font-weight: 700;
    text-transform: uppercase
}

.Cookies .Content #optanon-cookie-policy .optanon-cookie-policy-subgroup-description {
    display: none
}

.Corner {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #211510;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    text-transform: uppercase
}

@media (min-width: 720px) {
    .Corner {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Corner {
        font-size: 1rem
    }
}

.Corner.zh-cn, .zh-cn .Corner {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Corner.ko-kr, .ko-kr .Corner {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Corner.ru-ru, .ru-ru .Corner {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Corner.zh-tw, .zh-tw .Corner {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Corner-bg {
    right: -120%;
    bottom: -100%;
    overflow: hidden
}

.Corner-bg, .Corner-bg:before {
    position: absolute;
    top: 0;
    left: 0
}

.Corner-bg:before {
    content: "";
    background: #ebdec2;
    right: -20%;
    bottom: 0;
    -webkit-transform: rotate(-31deg);
    transform: rotate(-31deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.Corner-label {
    padding: 10px;
    line-height: 1em;
    top: 2px;
    left: 2px
}

.Corner-label, .DataTile, .DataTile .DataTile-tile {
    position: relative
}

.DataTile .DataTile-tile:before {
    content: "";
    display: block;
    padding-top: 100%
}

.DataTile-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #504137;
    z-index: 1
}

html:not(.touch) .DataTile:hover .DataTile-link {
    border-color: #f8b700
}

.DataTile-meta {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 24px
}

.DataTile-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .DataTile-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .DataTile-title {
        font-size: 1.728rem
    }
}

.DataTile-title.zh-cn, .zh-cn .DataTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DataTile-title.ko-kr, .ko-kr .DataTile-title {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.DataTile-title.zh-tw, .zh-tw .DataTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.DataTile-label {
    color: #f8b700;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    text-transform: uppercase
}

.DataTile-label.zh-cn, .zh-cn .DataTile-label {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DataTile-label.ko-kr, .ko-kr .DataTile-label {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.DataTile-label.ru-ru, .ru-ru .DataTile-label {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.DataTile-label.zh-tw, .zh-tw .DataTile-label {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .DataTile-label {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .DataTile-label {
        font-size: 1rem
    }
}

.DataTile-content {
    bottom: 30%;
    left: 20%;
    position: absolute;
    right: 20%;
    top: 10%
}

.DataTile--large .DataTile-meta {
    padding-bottom: 36px
}

.DataTile--large .DataTile-title {
    color: #f8b700;
    font-size: 2.2395rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700
}

@media (min-width: 720px) {
    .DataTile--large .DataTile-title {
        font-size: 2.5381rem
    }
}

@media (min-width: 1280px) {
    .DataTile--large .DataTile-title {
        font-size: 2.986rem
    }
}

.DataTile--large .DataTile-title.zh-cn, .zh-cn .DataTile--large .DataTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DataTile--large .DataTile-title.ko-kr, .ko-kr .DataTile--large .DataTile-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.DataTile--large .DataTile-title.ru-ru, .ru-ru .DataTile--large .DataTile-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.DataTile--large .DataTile-title.zh-tw, .zh-tw .DataTile--large .DataTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.DataTile--large .DataTile-label {
    color: #fff;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1.296rem;
    line-height: 1.5;
    font-weight: 400;
    text-transform: capitalize;
    margin-top: 12px
}

.DataTile--large .DataTile-label.zh-cn, .zh-cn .DataTile--large .DataTile-label {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DataTile--large .DataTile-label.ko-kr, .ko-kr .DataTile--large .DataTile-label {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.DataTile--large .DataTile-label.ru-ru, .ru-ru .DataTile--large .DataTile-label {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.DataTile--large .DataTile-label.zh-tw, .zh-tw .DataTile--large .DataTile-label {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .DataTile--large .DataTile-label {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .DataTile--large .DataTile-label {
        font-size: 1.728rem
    }
}

.DataTile--goldTitle .DataTile-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .DataTile--goldTitle .DataTile-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .DataTile--goldTitle .DataTile-title {
        font-size: 1.728rem
    }
}

.DataTile--goldTitle .DataTile-title.zh-cn, .zh-cn .DataTile--goldTitle .DataTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DataTile--goldTitle .DataTile-title.ko-kr, .ko-kr .DataTile--goldTitle .DataTile-title {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.DataTile--goldTitle .DataTile-title.ru-ru, .ru-ru .DataTile--goldTitle .DataTile-title {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.DataTile--goldTitle .DataTile-title.zh-tw, .zh-tw .DataTile--goldTitle .DataTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.DataTile--addOneDividerHeight .DataTile-tile:before {
    padding-bottom: 4px
}

.DataTile--addTwoDividerHeight .DataTile-tile:before {
    padding-bottom: 8px
}

.DataTile--addThreeDividerHeight .DataTile-tile:before {
    padding-bottom: 12px
}

.DataTile--gutter .DataTile-tile > .Tile-area {
    margin: 10px
}

.DataTile--gutter .DataTile-link {
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 10px
}

.Divider {
    height: 4px;
    margin: 0 auto;
    width: 100%;
    background-color: #000;
    position: relative;
    pointer-events: none
}

.Divider--thin {
    height: 1px
}

.Divider--thick {
    height: 3px
}

.Divider--short {
    width: 33%
}

.Divider--medium {
    width: 66%
}

.Divider--dark {
    background-color: #fff
}

.Divider--lightBrown {
    background-color: #504137
}

.Divider--silver {
    background-color: hsla(0, 0%, 66.7%, .4)
}

.Divider--paperInset {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #fdf3d3), color-stop(50%, #c6b390));
    background-image: linear-gradient(0deg, #fdf3d3 50%, #c6b390 0)
}

.Divider--opaque {
    background: hsla(0, 0%, 100%, .25)
}

.Divider--borders {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 1px 0;
    height: 2px
}

.Divider--shadowTop:before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    border-bottom: 1px solid #000
}

.Divider--shadowBottom:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    border-top: 1px solid #000
}

.Divider--legion {
    background: #69ba0f -webkit-gradient(linear, left top, right top, from(#b4e119), to(#1e9204));
    background: #69ba0f linear-gradient(90deg, #b4e119 0, #1e9204);
    height: 2px
}

.Divider--legionSwirl, .Divider--legionTribal {
    height: 13px;
    background: transparent
}

.Divider--legionSwirl:before, .Divider--legionTribal:before {
    content: "";
    position: absolute;
    top: -52px;
    left: 0;
    right: 0;
    background: transparent url(../components/divider/assets_subdomain/divider-legion-swirl.f6a96f3617ea7521df4f547daac0ecb5.png);
    background-size: 1600px;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 116px;
    z-index: 1
}

@media (min-width: 1600px) {
    .Divider--legionSwirl:before, .Divider--legionTribal:before {
        background-size: 100%
    }
}

.Divider--legionTribal:before {
    background-image: url(../components/divider/assets_subdomain/divider-legion-tribal.5fd4bd30b305187ab0fc566ead6b302d.png)
}

.Divider--goldFrame {
    background-image: url(../components/divider/assets_subdomain/divider-goldframe.e7955252c1aafbb499cdf78fa428c000.png);
    height: 5px
}

.Divider--corinthian, .Divider--goldFrame {
    background-repeat: repeat-x;
    background-size: auto 100%
}

.Divider--corinthian {
    background-image: url(../components/divider/assets_subdomain/divider-corinthianchrome.2091bfb4f4ec6cef598a70ff077fc4ec.jpg);
    height: 6px
}

.Divider--ochoThickDown, .Divider--ochoThickUp, .Divider--ochoThin {
    height: 6px;
    background: transparent
}

.Divider--ochoThickDown:before, .Divider--ochoThickUp:before, .Divider--ochoThin:before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    background-size: 1600px;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 115px;
    z-index: 1
}

@media (min-width: 1600px) {
    .Divider--ochoThickDown:before, .Divider--ochoThickUp:before, .Divider--ochoThin:before {
        background-size: 100%
    }
}

.Divider--ochoThickUp:before {
    background-image: url(../components/divider/assets_subdomain/divider-ocho-thickup.2f840a5539afc4a43798c60e9010ad0d.png)
}

.Divider--ochoThickDown:before {
    background-image: url(../components/divider/assets_subdomain/divider-ocho-thickdown.e1367b9e73ad90671b4fefc96b5b4c08.png);
    top: -46px
}

.Divider--ochoThin {
    height: 10px
}

.Divider--ochoThin:before {
    top: -52px;
    background-image: url(../components/divider/assets_subdomain/divider-ocho-thin.295b144519591ef361653bfb7436da61.png)
}

.DropdownLink:not(input) {
    cursor: pointer
}

.is-active > .DropdownLink.DropdownLink--opacity {
    opacity: .4
}

.is-active > .DropdownLink .DropdownLink-indicator {
    background-position: -100% 0
}

.is-active > .DropdownLink.DropdownLink--goldWithHover .DropdownLink-indicator, html:not(.touch) .is-active > .DropdownLink.DropdownLink--goldWithHover:hover .DropdownLink-indicator {
    background-position: -300% 0
}

.DropdownLink-indicator {
    background-image: url(../components/dropdownlink/assets_subdomain/dropdownlink-indicator-sprite.54f27285668e572afef3e332007f4c60.png);
    background-size: 200% 100%;
    display: inline-block;
    height: 8px;
    margin-left: .35em;
    position: relative;
    text-align: right;
    top: -1px;
    width: 13px
}

.DropdownLink--gold .DropdownLink-indicator {
    background-image: url(../components/dropdownlink/assets_subdomain/dropdownlink-indicator-gold-sprite.380e7d876447864be9ecac8bf7764e22.png);
    background-size: 400% 100%;
    height: 11px;
    left: -2px;
    width: 16px
}

html:not(.touch) .DropdownLink--goldWithHover:hover .DropdownLink-indicator {
    background-position: -200% 0
}

.Esports-textBlock .Content ul {
    list-style: square !important;
    padding-left: 30px
}

.Esports-textBlock .Content li {
    color: #ebdec2;
    display: list-item;
    position: inherit;
    padding-left: .5em
}

.Esports-textBlock .Content li:before {
    content: none
}

.EsportsEventList-event-date {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ff7200;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: inline-block !important
}

@media (min-width: 720px) {
    .EsportsEventList-event-date {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .EsportsEventList-event-date {
        font-size: 1.2rem
    }
}

.EsportsEventList-event-date.zh-cn, .zh-cn .EsportsEventList-event-date {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.EsportsEventList-event-date.ko-kr, .ko-kr .EsportsEventList-event-date {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.EsportsEventList-event-date.ru-ru, .ru-ru .EsportsEventList-event-date {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.EsportsEventList-event-date.zh-tw, .zh-tw .EsportsEventList-event-date {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.EsportsEventList-event--finished .EsportsEventList-event-date, .EsportsEventList-event--live .EsportsEventList-event-date {
    display: inline-block !important
}

.EsportsEventList-event--finished .EsportsEventList-event-date {
    color: hsla(0, 0%, 100%, .6)
}

.EsportsEventList-event {
    position: relative
}

.EsportsEventList-event-vod {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0
}

.EsportsEventStatusLabel {
    display: inline-block !important;
    margin-right: 10px !important;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    color: #fff;
    padding: 3px 6px;
    font-weight: 700;
    letter-spacing: .5px
}

@media (min-width: 720px) {
    .EsportsEventStatusLabel {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .EsportsEventStatusLabel {
        font-size: 1.2rem
    }
}

.EsportsEventStatusLabel.zh-cn, .zh-cn .EsportsEventStatusLabel {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

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

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

.EsportsEventStatusLabel.zh-tw, .zh-tw .EsportsEventStatusLabel {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .EsportsEventStatusLabel {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .EsportsEventStatusLabel {
        font-size: 1rem
    }
}

.EsportsEventStatusLabel--finished {
    background-color: hsla(0, 0%, 100%, .1)
}

.EsportsEventStatusLabel--live {
    background-color: #d21313
}

.Event {
    background-color: #aaa;
    padding: 10px
}

.Event-time {
    font-size: 8pt
}

.Events-event {
    margin-top: 10px
}

.Events-event:first-child {
    margin-top: 0
}

.FactionTile {
    display: inline-block;
    position: relative
}

.FactionTile-content {
    position: relative;
    display: block;
    cursor: pointer
}

.FactionTile-content:before {
    content: "";
    display: block;
    padding-top: 133.33333333%
}

.FactionTile-background {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: 80%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #000;
    background-image: url(../components/factiontile/assets_subdomain/factiontile-background.47c3e8cd54ec66965c668752f1992505.jpg);
    border: 1px solid transparent
}

.FactionTile--horde .FactionTile-background {
    border-color: #b30000
}

.FactionTile--alliance .FactionTile-background {
    border-color: #0078ff
}

html:not(.touch) .FactionTile:hover .FactionTile-background {
    border-color: #f8b700
}

.FactionTile-foreground.Logo {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    width: 110%;
    max-width: none;
    height: 110%;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

html:not(.touch) .FactionTile-content:hover .FactionTile-foreground.Logo {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) .01s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) .01s;
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    transform: translate(-50%, -50%) scale(1.05)
}

.FactionTile-nameContainer {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    position: absolute;
    bottom: -25px;
    width: 100%;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

@media (min-width: 720px) {
    .FactionTile-nameContainer {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .FactionTile-nameContainer {
        font-size: 1.44rem
    }
}

.FactionTile-nameContainer.zh-cn, .zh-cn .FactionTile-nameContainer {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.FactionTile-nameContainer.ko-kr, .ko-kr .FactionTile-nameContainer {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.FactionTile-nameContainer.ru-ru, .ru-ru .FactionTile-nameContainer {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.FactionTile-nameContainer.zh-tw, .zh-tw .FactionTile-nameContainer {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.FactionTile:hover .FactionTile-nameContainer {
    color: #fff
}

.Float {
    float: left
}

.Float--right {
    float: right
}

.Float--gutter {
    padding-right: 20px
}

.Float--gutter.Float--right {
    padding-right: 0;
    padding-left: 20px
}

.Float-1of2 {
    float: left;
    width: 50%
}

.Float-1of2.Float--right {
    float: right
}

.Float-1of2--prefix {
    margin-left: 50%
}

.Float-1of2--suffix {
    margin-right: 50%
}

.Float-1of2--push {
    position: relative;
    left: 50%
}

.Float-1of2--pull {
    position: relative;
    left: -50%
}

.Float-1of3 {
    float: left;
    width: 33.33333333%
}

.Float-1of3.Float--right {
    float: right
}

.Float-1of3--prefix {
    margin-left: 33.33333333%
}

.Float-1of3--suffix {
    margin-right: 33.33333333%
}

.Float-1of3--push {
    position: relative;
    left: 33.33333333%
}

.Float-1of3--pull {
    position: relative;
    left: -33.33333333%
}

.Float-2of3 {
    float: left;
    width: 66.66666667%
}

.Float-2of3.Float--right {
    float: right
}

.Float-2of3--prefix {
    margin-left: 66.66666667%
}

.Float-2of3--suffix {
    margin-right: 66.66666667%
}

.Float-2of3--push {
    position: relative;
    left: 66.66666667%
}

.Float-2of3--pull {
    position: relative;
    left: -66.66666667%
}

.Float-1of4 {
    float: left;
    width: 25%
}

.Float-1of4.Float--right {
    float: right
}

.Float-1of4--prefix {
    margin-left: 25%
}

.Float-1of4--suffix {
    margin-right: 25%
}

.Float-1of4--push {
    position: relative;
    left: 25%
}

.Float-1of4--pull {
    position: relative;
    left: -25%
}

.Float-2of4 {
    float: left;
    width: 50%
}

.Float-2of4.Float--right {
    float: right
}

.Float-2of4--prefix {
    margin-left: 50%
}

.Float-2of4--suffix {
    margin-right: 50%
}

.Float-2of4--push {
    position: relative;
    left: 50%
}

.Float-2of4--pull {
    position: relative;
    left: -50%
}

.Float-3of4 {
    float: left;
    width: 75%
}

.Float-3of4.Float--right {
    float: right
}

.Float-3of4--prefix {
    margin-left: 75%
}

.Float-3of4--suffix {
    margin-right: 75%
}

.Float-3of4--push {
    position: relative;
    left: 75%
}

.Float-3of4--pull {
    position: relative;
    left: -75%
}

.Float-1of5 {
    float: left;
    width: 20%
}

.Float-1of5.Float--right {
    float: right
}

.Float-1of5--prefix {
    margin-left: 20%
}

.Float-1of5--suffix {
    margin-right: 20%
}

.Float-1of5--push {
    position: relative;
    left: 20%
}

.Float-1of5--pull {
    position: relative;
    left: -20%
}

.Float-2of5 {
    float: left;
    width: 40%
}

.Float-2of5.Float--right {
    float: right
}

.Float-2of5--prefix {
    margin-left: 40%
}

.Float-2of5--suffix {
    margin-right: 40%
}

.Float-2of5--push {
    position: relative;
    left: 40%
}

.Float-2of5--pull {
    position: relative;
    left: -40%
}

.Float-3of5 {
    float: left;
    width: 60%
}

.Float-3of5.Float--right {
    float: right
}

.Float-3of5--prefix {
    margin-left: 60%
}

.Float-3of5--suffix {
    margin-right: 60%
}

.Float-3of5--push {
    position: relative;
    left: 60%
}

.Float-3of5--pull {
    position: relative;
    left: -60%
}

.Float-4of5 {
    float: left;
    width: 80%
}

.Float-4of5.Float--right {
    float: right
}

.Float-4of5--prefix {
    margin-left: 80%
}

.Float-4of5--suffix {
    margin-right: 80%
}

.Float-4of5--push {
    position: relative;
    left: 80%
}

.Float-4of5--pull {
    position: relative;
    left: -80%
}

.Float-1of6 {
    float: left;
    width: 16.66666667%
}

.Float-1of6.Float--right {
    float: right
}

.Float-1of6--prefix {
    margin-left: 16.66666667%
}

.Float-1of6--suffix {
    margin-right: 16.66666667%
}

.Float-1of6--push {
    position: relative;
    left: 16.66666667%
}

.Float-1of6--pull {
    position: relative;
    left: -16.66666667%
}

.Float-2of6 {
    float: left;
    width: 33.33333333%
}

.Float-2of6.Float--right {
    float: right
}

.Float-2of6--prefix {
    margin-left: 33.33333333%
}

.Float-2of6--suffix {
    margin-right: 33.33333333%
}

.Float-2of6--push {
    position: relative;
    left: 33.33333333%
}

.Float-2of6--pull {
    position: relative;
    left: -33.33333333%
}

.Float-3of6 {
    float: left;
    width: 50%
}

.Float-3of6.Float--right {
    float: right
}

.Float-3of6--prefix {
    margin-left: 50%
}

.Float-3of6--suffix {
    margin-right: 50%
}

.Float-3of6--push {
    position: relative;
    left: 50%
}

.Float-3of6--pull {
    position: relative;
    left: -50%
}

.Float-4of6 {
    float: left;
    width: 66.66666667%
}

.Float-4of6.Float--right {
    float: right
}

.Float-4of6--prefix {
    margin-left: 66.66666667%
}

.Float-4of6--suffix {
    margin-right: 66.66666667%
}

.Float-4of6--push {
    position: relative;
    left: 66.66666667%
}

.Float-4of6--pull {
    position: relative;
    left: -66.66666667%
}

.Float-5of6 {
    float: left;
    width: 83.33333333%
}

.Float-5of6.Float--right {
    float: right
}

.Float-5of6--prefix {
    margin-left: 83.33333333%
}

.Float-5of6--suffix {
    margin-right: 83.33333333%
}

.Float-5of6--push {
    position: relative;
    left: 83.33333333%
}

.Float-5of6--pull {
    position: relative;
    left: -83.33333333%
}

.Float-1of7 {
    float: left;
    width: 14.28571429%
}

.Float-1of7.Float--right {
    float: right
}

.Float-1of7--prefix {
    margin-left: 14.28571429%
}

.Float-1of7--suffix {
    margin-right: 14.28571429%
}

.Float-1of7--push {
    position: relative;
    left: 14.28571429%
}

.Float-1of7--pull {
    position: relative;
    left: -14.28571429%
}

.Float-2of7 {
    float: left;
    width: 28.57142857%
}

.Float-2of7.Float--right {
    float: right
}

.Float-2of7--prefix {
    margin-left: 28.57142857%
}

.Float-2of7--suffix {
    margin-right: 28.57142857%
}

.Float-2of7--push {
    position: relative;
    left: 28.57142857%
}

.Float-2of7--pull {
    position: relative;
    left: -28.57142857%
}

.Float-3of7 {
    float: left;
    width: 42.85714286%
}

.Float-3of7.Float--right {
    float: right
}

.Float-3of7--prefix {
    margin-left: 42.85714286%
}

.Float-3of7--suffix {
    margin-right: 42.85714286%
}

.Float-3of7--push {
    position: relative;
    left: 42.85714286%
}

.Float-3of7--pull {
    position: relative;
    left: -42.85714286%
}

.Float-4of7 {
    float: left;
    width: 57.14285714%
}

.Float-4of7.Float--right {
    float: right
}

.Float-4of7--prefix {
    margin-left: 57.14285714%
}

.Float-4of7--suffix {
    margin-right: 57.14285714%
}

.Float-4of7--push {
    position: relative;
    left: 57.14285714%
}

.Float-4of7--pull {
    position: relative;
    left: -57.14285714%
}

.Float-5of7 {
    float: left;
    width: 71.42857143%
}

.Float-5of7.Float--right {
    float: right
}

.Float-5of7--prefix {
    margin-left: 71.42857143%
}

.Float-5of7--suffix {
    margin-right: 71.42857143%
}

.Float-5of7--push {
    position: relative;
    left: 71.42857143%
}

.Float-5of7--pull {
    position: relative;
    left: -71.42857143%
}

.Float-6of7 {
    float: left;
    width: 85.71428571%
}

.Float-6of7.Float--right {
    float: right
}

.Float-6of7--prefix {
    margin-left: 85.71428571%
}

.Float-6of7--suffix {
    margin-right: 85.71428571%
}

.Float-6of7--push {
    position: relative;
    left: 85.71428571%
}

.Float-6of7--pull {
    position: relative;
    left: -85.71428571%
}

.Float-1of8 {
    float: left;
    width: 12.5%
}

.Float-1of8.Float--right {
    float: right
}

.Float-1of8--prefix {
    margin-left: 12.5%
}

.Float-1of8--suffix {
    margin-right: 12.5%
}

.Float-1of8--push {
    position: relative;
    left: 12.5%
}

.Float-1of8--pull {
    position: relative;
    left: -12.5%
}

.Float-2of8 {
    float: left;
    width: 25%
}

.Float-2of8.Float--right {
    float: right
}

.Float-2of8--prefix {
    margin-left: 25%
}

.Float-2of8--suffix {
    margin-right: 25%
}

.Float-2of8--push {
    position: relative;
    left: 25%
}

.Float-2of8--pull {
    position: relative;
    left: -25%
}

.Float-3of8 {
    float: left;
    width: 37.5%
}

.Float-3of8.Float--right {
    float: right
}

.Float-3of8--prefix {
    margin-left: 37.5%
}

.Float-3of8--suffix {
    margin-right: 37.5%
}

.Float-3of8--push {
    position: relative;
    left: 37.5%
}

.Float-3of8--pull {
    position: relative;
    left: -37.5%
}

.Float-4of8 {
    float: left;
    width: 50%
}

.Float-4of8.Float--right {
    float: right
}

.Float-4of8--prefix {
    margin-left: 50%
}

.Float-4of8--suffix {
    margin-right: 50%
}

.Float-4of8--push {
    position: relative;
    left: 50%
}

.Float-4of8--pull {
    position: relative;
    left: -50%
}

.Float-5of8 {
    float: left;
    width: 62.5%
}

.Float-5of8.Float--right {
    float: right
}

.Float-5of8--prefix {
    margin-left: 62.5%
}

.Float-5of8--suffix {
    margin-right: 62.5%
}

.Float-5of8--push {
    position: relative;
    left: 62.5%
}

.Float-5of8--pull {
    position: relative;
    left: -62.5%
}

.Float-6of8 {
    float: left;
    width: 75%
}

.Float-6of8.Float--right {
    float: right
}

.Float-6of8--prefix {
    margin-left: 75%
}

.Float-6of8--suffix {
    margin-right: 75%
}

.Float-6of8--push {
    position: relative;
    left: 75%
}

.Float-6of8--pull {
    position: relative;
    left: -75%
}

.Float-7of8 {
    float: left;
    width: 87.5%
}

.Float-7of8.Float--right {
    float: right
}

.Float-7of8--prefix {
    margin-left: 87.5%
}

.Float-7of8--suffix {
    margin-right: 87.5%
}

.Float-7of8--push {
    position: relative;
    left: 87.5%
}

.Float-7of8--pull {
    position: relative;
    left: -87.5%
}

.Float-1of9 {
    float: left;
    width: 11.11111111%
}

.Float-1of9.Float--right {
    float: right
}

.Float-1of9--prefix {
    margin-left: 11.11111111%
}

.Float-1of9--suffix {
    margin-right: 11.11111111%
}

.Float-1of9--push {
    position: relative;
    left: 11.11111111%
}

.Float-1of9--pull {
    position: relative;
    left: -11.11111111%
}

.Float-2of9 {
    float: left;
    width: 22.22222222%
}

.Float-2of9.Float--right {
    float: right
}

.Float-2of9--prefix {
    margin-left: 22.22222222%
}

.Float-2of9--suffix {
    margin-right: 22.22222222%
}

.Float-2of9--push {
    position: relative;
    left: 22.22222222%
}

.Float-2of9--pull {
    position: relative;
    left: -22.22222222%
}

.Float-3of9 {
    float: left;
    width: 33.33333333%
}

.Float-3of9.Float--right {
    float: right
}

.Float-3of9--prefix {
    margin-left: 33.33333333%
}

.Float-3of9--suffix {
    margin-right: 33.33333333%
}

.Float-3of9--push {
    position: relative;
    left: 33.33333333%
}

.Float-3of9--pull {
    position: relative;
    left: -33.33333333%
}

.Float-4of9 {
    float: left;
    width: 44.44444444%
}

.Float-4of9.Float--right {
    float: right
}

.Float-4of9--prefix {
    margin-left: 44.44444444%
}

.Float-4of9--suffix {
    margin-right: 44.44444444%
}

.Float-4of9--push {
    position: relative;
    left: 44.44444444%
}

.Float-4of9--pull {
    position: relative;
    left: -44.44444444%
}

.Float-5of9 {
    float: left;
    width: 55.55555556%
}

.Float-5of9.Float--right {
    float: right
}

.Float-5of9--prefix {
    margin-left: 55.55555556%
}

.Float-5of9--suffix {
    margin-right: 55.55555556%
}

.Float-5of9--push {
    position: relative;
    left: 55.55555556%
}

.Float-5of9--pull {
    position: relative;
    left: -55.55555556%
}

.Float-6of9 {
    float: left;
    width: 66.66666667%
}

.Float-6of9.Float--right {
    float: right
}

.Float-6of9--prefix {
    margin-left: 66.66666667%
}

.Float-6of9--suffix {
    margin-right: 66.66666667%
}

.Float-6of9--push {
    position: relative;
    left: 66.66666667%
}

.Float-6of9--pull {
    position: relative;
    left: -66.66666667%
}

.Float-7of9 {
    float: left;
    width: 77.77777778%
}

.Float-7of9.Float--right {
    float: right
}

.Float-7of9--prefix {
    margin-left: 77.77777778%
}

.Float-7of9--suffix {
    margin-right: 77.77777778%
}

.Float-7of9--push {
    position: relative;
    left: 77.77777778%
}

.Float-7of9--pull {
    position: relative;
    left: -77.77777778%
}

.Float-8of9 {
    float: left;
    width: 88.88888889%
}

.Float-8of9.Float--right {
    float: right
}

.Float-8of9--prefix {
    margin-left: 88.88888889%
}

.Float-8of9--suffix {
    margin-right: 88.88888889%
}

.Float-8of9--push {
    position: relative;
    left: 88.88888889%
}

.Float-8of9--pull {
    position: relative;
    left: -88.88888889%
}

.Float-1of10 {
    float: left;
    width: 10%
}

.Float-1of10.Float--right {
    float: right
}

.Float-1of10--prefix {
    margin-left: 10%
}

.Float-1of10--suffix {
    margin-right: 10%
}

.Float-1of10--push {
    position: relative;
    left: 10%
}

.Float-1of10--pull {
    position: relative;
    left: -10%
}

.Float-2of10 {
    float: left;
    width: 20%
}

.Float-2of10.Float--right {
    float: right
}

.Float-2of10--prefix {
    margin-left: 20%
}

.Float-2of10--suffix {
    margin-right: 20%
}

.Float-2of10--push {
    position: relative;
    left: 20%
}

.Float-2of10--pull {
    position: relative;
    left: -20%
}

.Float-3of10 {
    float: left;
    width: 30%
}

.Float-3of10.Float--right {
    float: right
}

.Float-3of10--prefix {
    margin-left: 30%
}

.Float-3of10--suffix {
    margin-right: 30%
}

.Float-3of10--push {
    position: relative;
    left: 30%
}

.Float-3of10--pull {
    position: relative;
    left: -30%
}

.Float-4of10 {
    float: left;
    width: 40%
}

.Float-4of10.Float--right {
    float: right
}

.Float-4of10--prefix {
    margin-left: 40%
}

.Float-4of10--suffix {
    margin-right: 40%
}

.Float-4of10--push {
    position: relative;
    left: 40%
}

.Float-4of10--pull {
    position: relative;
    left: -40%
}

.Float-5of10 {
    float: left;
    width: 50%
}

.Float-5of10.Float--right {
    float: right
}

.Float-5of10--prefix {
    margin-left: 50%
}

.Float-5of10--suffix {
    margin-right: 50%
}

.Float-5of10--push {
    position: relative;
    left: 50%
}

.Float-5of10--pull {
    position: relative;
    left: -50%
}

.Float-6of10 {
    float: left;
    width: 60%
}

.Float-6of10.Float--right {
    float: right
}

.Float-6of10--prefix {
    margin-left: 60%
}

.Float-6of10--suffix {
    margin-right: 60%
}

.Float-6of10--push {
    position: relative;
    left: 60%
}

.Float-6of10--pull {
    position: relative;
    left: -60%
}

.Float-7of10 {
    float: left;
    width: 70%
}

.Float-7of10.Float--right {
    float: right
}

.Float-7of10--prefix {
    margin-left: 70%
}

.Float-7of10--suffix {
    margin-right: 70%
}

.Float-7of10--push {
    position: relative;
    left: 70%
}

.Float-7of10--pull {
    position: relative;
    left: -70%
}

.Float-8of10 {
    float: left;
    width: 80%
}

.Float-8of10.Float--right {
    float: right
}

.Float-8of10--prefix {
    margin-left: 80%
}

.Float-8of10--suffix {
    margin-right: 80%
}

.Float-8of10--push {
    position: relative;
    left: 80%
}

.Float-8of10--pull {
    position: relative;
    left: -80%
}

.Float-9of10 {
    float: left;
    width: 90%
}

.Float-9of10.Float--right {
    float: right
}

.Float-9of10--prefix {
    margin-left: 90%
}

.Float-9of10--suffix {
    margin-right: 90%
}

.Float-9of10--push {
    position: relative;
    left: 90%
}

.Float-9of10--pull {
    position: relative;
    left: -90%
}

.Float-1of11 {
    float: left;
    width: 9.09090909%
}

.Float-1of11.Float--right {
    float: right
}

.Float-1of11--prefix {
    margin-left: 9.09090909%
}

.Float-1of11--suffix {
    margin-right: 9.09090909%
}

.Float-1of11--push {
    position: relative;
    left: 9.09090909%
}

.Float-1of11--pull {
    position: relative;
    left: -9.09090909%
}

.Float-2of11 {
    float: left;
    width: 18.18181818%
}

.Float-2of11.Float--right {
    float: right
}

.Float-2of11--prefix {
    margin-left: 18.18181818%
}

.Float-2of11--suffix {
    margin-right: 18.18181818%
}

.Float-2of11--push {
    position: relative;
    left: 18.18181818%
}

.Float-2of11--pull {
    position: relative;
    left: -18.18181818%
}

.Float-3of11 {
    float: left;
    width: 27.27272727%
}

.Float-3of11.Float--right {
    float: right
}

.Float-3of11--prefix {
    margin-left: 27.27272727%
}

.Float-3of11--suffix {
    margin-right: 27.27272727%
}

.Float-3of11--push {
    position: relative;
    left: 27.27272727%
}

.Float-3of11--pull {
    position: relative;
    left: -27.27272727%
}

.Float-4of11 {
    float: left;
    width: 36.36363636%
}

.Float-4of11.Float--right {
    float: right
}

.Float-4of11--prefix {
    margin-left: 36.36363636%
}

.Float-4of11--suffix {
    margin-right: 36.36363636%
}

.Float-4of11--push {
    position: relative;
    left: 36.36363636%
}

.Float-4of11--pull {
    position: relative;
    left: -36.36363636%
}

.Float-5of11 {
    float: left;
    width: 45.45454545%
}

.Float-5of11.Float--right {
    float: right
}

.Float-5of11--prefix {
    margin-left: 45.45454545%
}

.Float-5of11--suffix {
    margin-right: 45.45454545%
}

.Float-5of11--push {
    position: relative;
    left: 45.45454545%
}

.Float-5of11--pull {
    position: relative;
    left: -45.45454545%
}

.Float-6of11 {
    float: left;
    width: 54.54545455%
}

.Float-6of11.Float--right {
    float: right
}

.Float-6of11--prefix {
    margin-left: 54.54545455%
}

.Float-6of11--suffix {
    margin-right: 54.54545455%
}

.Float-6of11--push {
    position: relative;
    left: 54.54545455%
}

.Float-6of11--pull {
    position: relative;
    left: -54.54545455%
}

.Float-7of11 {
    float: left;
    width: 63.63636364%
}

.Float-7of11.Float--right {
    float: right
}

.Float-7of11--prefix {
    margin-left: 63.63636364%
}

.Float-7of11--suffix {
    margin-right: 63.63636364%
}

.Float-7of11--push {
    position: relative;
    left: 63.63636364%
}

.Float-7of11--pull {
    position: relative;
    left: -63.63636364%
}

.Float-8of11 {
    float: left;
    width: 72.72727273%
}

.Float-8of11.Float--right {
    float: right
}

.Float-8of11--prefix {
    margin-left: 72.72727273%
}

.Float-8of11--suffix {
    margin-right: 72.72727273%
}

.Float-8of11--push {
    position: relative;
    left: 72.72727273%
}

.Float-8of11--pull {
    position: relative;
    left: -72.72727273%
}

.Float-9of11 {
    float: left;
    width: 81.81818182%
}

.Float-9of11.Float--right {
    float: right
}

.Float-9of11--prefix {
    margin-left: 81.81818182%
}

.Float-9of11--suffix {
    margin-right: 81.81818182%
}

.Float-9of11--push {
    position: relative;
    left: 81.81818182%
}

.Float-9of11--pull {
    position: relative;
    left: -81.81818182%
}

.Float-10of11 {
    float: left;
    width: 90.90909091%
}

.Float-10of11.Float--right {
    float: right
}

.Float-10of11--prefix {
    margin-left: 90.90909091%
}

.Float-10of11--suffix {
    margin-right: 90.90909091%
}

.Float-10of11--push {
    position: relative;
    left: 90.90909091%
}

.Float-10of11--pull {
    position: relative;
    left: -90.90909091%
}

.Float-1of12 {
    float: left;
    width: 8.33333333%
}

.Float-1of12.Float--right {
    float: right
}

.Float-1of12--prefix {
    margin-left: 8.33333333%
}

.Float-1of12--suffix {
    margin-right: 8.33333333%
}

.Float-1of12--push {
    position: relative;
    left: 8.33333333%
}

.Float-1of12--pull {
    position: relative;
    left: -8.33333333%
}

.Float-2of12 {
    float: left;
    width: 16.66666667%
}

.Float-2of12.Float--right {
    float: right
}

.Float-2of12--prefix {
    margin-left: 16.66666667%
}

.Float-2of12--suffix {
    margin-right: 16.66666667%
}

.Float-2of12--push {
    position: relative;
    left: 16.66666667%
}

.Float-2of12--pull {
    position: relative;
    left: -16.66666667%
}

.Float-3of12 {
    float: left;
    width: 25%
}

.Float-3of12.Float--right {
    float: right
}

.Float-3of12--prefix {
    margin-left: 25%
}

.Float-3of12--suffix {
    margin-right: 25%
}

.Float-3of12--push {
    position: relative;
    left: 25%
}

.Float-3of12--pull {
    position: relative;
    left: -25%
}

.Float-4of12 {
    float: left;
    width: 33.33333333%
}

.Float-4of12.Float--right {
    float: right
}

.Float-4of12--prefix {
    margin-left: 33.33333333%
}

.Float-4of12--suffix {
    margin-right: 33.33333333%
}

.Float-4of12--push {
    position: relative;
    left: 33.33333333%
}

.Float-4of12--pull {
    position: relative;
    left: -33.33333333%
}

.Float-5of12 {
    float: left;
    width: 41.66666667%
}

.Float-5of12.Float--right {
    float: right
}

.Float-5of12--prefix {
    margin-left: 41.66666667%
}

.Float-5of12--suffix {
    margin-right: 41.66666667%
}

.Float-5of12--push {
    position: relative;
    left: 41.66666667%
}

.Float-5of12--pull {
    position: relative;
    left: -41.66666667%
}

.Float-6of12 {
    float: left;
    width: 50%
}

.Float-6of12.Float--right {
    float: right
}

.Float-6of12--prefix {
    margin-left: 50%
}

.Float-6of12--suffix {
    margin-right: 50%
}

.Float-6of12--push {
    position: relative;
    left: 50%
}

.Float-6of12--pull {
    position: relative;
    left: -50%
}

.Float-7of12 {
    float: left;
    width: 58.33333333%
}

.Float-7of12.Float--right {
    float: right
}

.Float-7of12--prefix {
    margin-left: 58.33333333%
}

.Float-7of12--suffix {
    margin-right: 58.33333333%
}

.Float-7of12--push {
    position: relative;
    left: 58.33333333%
}

.Float-7of12--pull {
    position: relative;
    left: -58.33333333%
}

.Float-8of12 {
    float: left;
    width: 66.66666667%
}

.Float-8of12.Float--right {
    float: right
}

.Float-8of12--prefix {
    margin-left: 66.66666667%
}

.Float-8of12--suffix {
    margin-right: 66.66666667%
}

.Float-8of12--push {
    position: relative;
    left: 66.66666667%
}

.Float-8of12--pull {
    position: relative;
    left: -66.66666667%
}

.Float-9of12 {
    float: left;
    width: 75%
}

.Float-9of12.Float--right {
    float: right
}

.Float-9of12--prefix {
    margin-left: 75%
}

.Float-9of12--suffix {
    margin-right: 75%
}

.Float-9of12--push {
    position: relative;
    left: 75%
}

.Float-9of12--pull {
    position: relative;
    left: -75%
}

.Float-10of12 {
    float: left;
    width: 83.33333333%
}

.Float-10of12.Float--right {
    float: right
}

.Float-10of12--prefix {
    margin-left: 83.33333333%
}

.Float-10of12--suffix {
    margin-right: 83.33333333%
}

.Float-10of12--push {
    position: relative;
    left: 83.33333333%
}

.Float-10of12--pull {
    position: relative;
    left: -83.33333333%
}

.Float-11of12 {
    float: left;
    width: 91.66666667%
}

.Float-11of12.Float--right {
    float: right
}

.Float-11of12--prefix {
    margin-left: 91.66666667%
}

.Float-11of12--suffix {
    margin-right: 91.66666667%
}

.Float-11of12--push {
    position: relative;
    left: 91.66666667%
}

.Float-11of12--pull {
    position: relative;
    left: -91.66666667%
}

.GameIcon {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #000;
    display: inline-block;
    max-width: 168px;
    width: 48px;
    border: 1px solid #504137
}

.GameIcon:before {
    content: "";
    display: block;
    padding-top: 100%
}

.GameIcon-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    background-size: cover;
    border-radius: 9%
}

.GameIcon--huge {
    width: 64px
}

.GameIcon--large {
    width: 56px
}

.GameIcon--medium {
    width: 32px
}

.GameIcon--small {
    width: 24px
}

.GameIcon--tiny {
    width: 16px
}

.GameIcon--full {
    width: 100%
}

.GameIcon--check {
    opacity: .6
}

.GameIcon--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.GameIcon--check:after {
    content: "";
    display: block;
    border: 3px solid #fff;
    border-width: 0 0 4px 4px;
    height: 16px;
    width: 32px;
    margin: 6px 0;
    -webkit-transform: rotate(-45deg) scale(.5);
    transform: rotate(-45deg) scale(.5);
    position: absolute;
    top: 8px;
    left: 8px
}

.GameIcon[disabled] {
    opacity: .5
}

.GameIcon--slot {
    border: 1px solid #333
}

.GameIcon--slot .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-slots.b5a41393be458e65e0c3c2b6c4c2f94d.png);
    border-radius: 0
}

.GameIcon--slotHead .GameIcon-icon {
    background-position: 0 0
}

.GameIcon--slotNeck .GameIcon-icon {
    background-position: 0 -100%
}

.GameIcon--slotShoulder .GameIcon-icon {
    background-position: 0 -200%
}

.GameIcon--slotBack .GameIcon-icon, .GameIcon--slotChest .GameIcon-icon {
    background-position: 0 -300%
}

.GameIcon--slotTabard .GameIcon-icon {
    background-position: 0 -400%
}

.GameIcon--slotShirt .GameIcon-icon {
    background-position: 0 -500%
}

.GameIcon--slotWrist .GameIcon-icon {
    background-position: 0 -600%
}

.GameIcon--slotHand .GameIcon-icon {
    background-position: 0 -700%
}

.GameIcon--slotWaist .GameIcon-icon {
    background-position: 0 -800%
}

.GameIcon--slotLeg .GameIcon-icon {
    background-position: 0 -900%
}

.GameIcon--slotFoot .GameIcon-icon {
    background-position: 0 -1000%
}

.GameIcon--slotLeftFinger .GameIcon-icon, .GameIcon--slotRightFinger .GameIcon-icon {
    background-position: 0 -1100%
}

.GameIcon--slotLeftTrinket .GameIcon-icon, .GameIcon--slotRightTrinket .GameIcon-icon {
    background-position: 0 -1200%
}

.GameIcon--slotWeapon .GameIcon-icon {
    background-position: 0 -1300%
}

.GameIcon--slotOffhand .GameIcon-icon {
    background-position: 0 -1400%
}

.GameIcon--POOR {
    border-color: #9d9d9d
}

.GameIcon--COMMON {
    border-color: #fff
}

.GameIcon--UNCOMMON {
    border-color: #1eff00
}

.GameIcon--RARE {
    border-color: #0081ff
}

.GameIcon--EPIC {
    border-color: #c600ff
}

.GameIcon--LEGENDARY {
    border-color: #ff8000
}

.GameIcon--ARTIFACT {
    border-color: #e5cc80
}

.GameIcon--HEIRLOOM {
    border-color: #0cf
}

.GameIcon--AZERITE, .GameIcon--AZERITE .GameIcon-level {
    border-color: #e5cc80
}

.GameIcon--WARRIOR .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-warrior.f9310c779f51ca1611930f9eb86bdeca.jpg)
}

.GameIcon--WARLOCK .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-warlock.dcbbb3e8f5e2c3af8f0c5f5baa71bb38.jpg)
}

.GameIcon--SHAMAN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-shaman.40a418365a413ef0461d33237893935e.jpg)
}

.GameIcon--ROGUE .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-rogue.0a5602d9729ecdbc3172825aeff16fd5.jpg)
}

.GameIcon--PRIEST .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-priest.09fd89f3873d109e57fa5b7432ca8271.jpg)
}

.GameIcon--PALADIN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-paladin.757b9e4cc4307ea896a837427d298dbf.jpg)
}

.GameIcon--MONK .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-monk.870f768c07bd258d02e4e37342901d93.jpg)
}

.GameIcon--MAGE .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-mage.b7bef9b6851bfff0f651ad096e3acf8a.jpg)
}

.GameIcon--HUNTER .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-hunter.5d71a070acda3d216034bf5316b954e4.jpg)
}

.GameIcon--DRUID .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-druid.df841860a62527c6f58aaed88949d622.jpg)
}

.GameIcon--DEATHKNIGHT .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-death-knight.678f39727d295e7f6c822bfb59221631.jpg)
}

.GameIcon--DEMONHUNTER .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-demon-hunter.43fb9b4b59dd51367eca4acf58008726.jpg)
}

.GameIcon--vector, .GameIcon--vector .GameIcon-icon {
    border: none;
    background-color: transparent
}

.GameIcon--vector .GameIcon-icon {
    border-radius: 0
}

.GameIcon--vector.GameIcon--WARRIOR .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-warrior-vector.f346a16523efa8fc66ba0c72b3d8d9b5.png)
}

.GameIcon--vector.GameIcon--WARLOCK .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-warlock-vector.26da6762460b000b91d4d748d8274e35.png)
}

.GameIcon--vector.GameIcon--SHAMAN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-shaman-vector.d07d941c902b378020a1aa9b857dd5f8.png)
}

.GameIcon--vector.GameIcon--ROGUE .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-rogue-vector.cc2ea8017b7df7c6d19f37640f627485.png)
}

.GameIcon--vector.GameIcon--PRIEST .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-priest-vector.d7f94632cf32cb6d4e332549f7c8347a.png)
}

.GameIcon--vector.GameIcon--PALADIN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-paladin-vector.9665329a4454328f61097d121f0939df.png)
}

.GameIcon--vector.GameIcon--MONK .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-monk-vector.81ff0f1d52de3b292098b613e2b190b9.png)
}

.GameIcon--vector.GameIcon--MAGE .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-mage-vector.f1ed288e03decd9919134a5de08d94d1.png)
}

.GameIcon--vector.GameIcon--HUNTER .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-hunter-vector.095639e31b058f024eaf9fa96758cfdb.png)
}

.GameIcon--vector.GameIcon--DRUID .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-druid-vector.43960391b0b03a656707fe7b9873a526.png)
}

.GameIcon--vector.GameIcon--DEATHKNIGHT .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-death-knight-vector.b4acffabf7e866f1b7bd9cd9e59e3595.png)
}

.GameIcon--vector.GameIcon--DEMONHUNTER .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gameicon-class-demon-hunter-vector.b1210d9369c8d59a2d0750db65bd044f.png)
}

.GameIcon--vulpera_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/vulpera_male.48c7b116a6b812608381b3cef9bdb4c2.jpg)
}

.GameIcon--vulpera_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/vulpera_female.e58a8a9bd75e7daabc2c31cfc817e1ce.jpg)
}

.GameIcon--mechagnome_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/mechagnome_male.83c765356c71bb289fcec30b036881a4.jpg)
}

.GameIcon--mechagnome_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/mechagnome_female.4029f3392541244c6463fe7479f17b1b.jpg)
}

.GameIcon--zandalaritroll_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/zandalaritroll_male.864405e7ef407ba483359391c1584e1f.jpg)
}

.GameIcon--zandalaritroll_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/zandalaritroll_female.86b5da29e9f242e5021fc35247365868.jpg)
}

.GameIcon--voidelf_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/voidelf_male.cb6e4d4ccba1489b1fba8da440ac443e.jpg)
}

.GameIcon--voidelf_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/voidelf_female.924fcfe0faaa21f1ef73ef909a614cd4.jpg)
}

.GameIcon--nightborne_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/nightborne_male.74748dfd48b63ba6dafd7b90867dfa3b.jpg)
}

.GameIcon--nightborne_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/nightborne_female.26f7db011c9a69f7778a73faea2a8de6.jpg)
}

.GameIcon--magharorc_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/magharorc_male.e51953d48a31210af2291d25a5f50c8d.jpg)
}

.GameIcon--magharorc_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/magharorc_female.a897c08018c8505bcf9d6e213f90115c.jpg)
}

.GameIcon--lightforgeddraenei_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/lightforgeddraenei_male.8df568db89e58a0ae24a9ae447a76fe9.jpg)
}

.GameIcon--lightforgeddraenei_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/lightforgeddraenei_female.f36132a39470fa15b68e49a209960a93.jpg)
}

.GameIcon--kultiran_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/kultiran_male.d03db900ca05dbb6bf151f2f509efd72.jpg)
}

.GameIcon--kultiran_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/kultiran_female.52e6a51f1842aad38b9a505016c90941.jpg)
}

.GameIcon--highmountaintauren_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/highmountaintauren_male.c2aae22ab89059a20ef7f4e2a2f5830f.jpg)
}

.GameIcon--highmountaintauren_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/highmountaintauren_female.b3782b1a57ae0393a5f2bed8edb26b13.jpg)
}

.GameIcon--darkirondwarf_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/darkirondwarf_male.b4e7831968fecb991a92018974c68c9e.jpg)
}

.GameIcon--darkirondwarf_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/darkirondwarf_female.5a7ba197f2ce1ae4fdc013ed14c33c2a.jpg)
}

.GameIcon--goblin_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/goblin_male.c13d8b71b2ddd68e030f2335719f40ac.jpg)
}

.GameIcon--goblin_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/goblin_female.e7c9caca62d81d97cf89e9dcddb17fe1.jpg)
}

.GameIcon--bloodelf_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/bloodelf_male.73b1b13405312be92a648077a4b69e4f.jpg)
}

.GameIcon--bloodelf_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/bloodelf_female.376d72cf572bd29ae270221d8a8912e0.jpg)
}

.GameIcon--troll_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/troll_male.f951b655929e4bca38cfa1ca1b5fa73f.jpg)
}

.GameIcon--troll_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/troll_female.78af9dd660331ecbc3f6c4cdfe5f8701.jpg)
}

.GameIcon--tauren_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/tauren_male.795ed031c66c419a59e6a6cf83eee869.jpg)
}

.GameIcon--tauren_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/tauren_female.ecc535c824dc2e5ee51ad9f8903185d6.jpg)
}

.GameIcon--undead_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/undead_male.4e07602bb628453767390c9997b468db.jpg)
}

.GameIcon--undead_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/undead_female.581387001e47173ef601e1c33c225cfc.jpg)
}

.GameIcon--pandaren_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/pandaren_male.efca67d5f15e17946db126631b9ff963.jpg)
}

.GameIcon--pandaren_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/pandaren_female.c971b7eba613e55585637d214106fda5.jpg)
}

.GameIcon--worgen_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/worgen_male.7e44f492d7059be8bf1d7777b0825d69.jpg)
}

.GameIcon--worgen_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/worgen_female.5f6928b4303e78fd791c2008c1b4ee83.jpg)
}

.GameIcon--draenei_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/draenei_male.8da320f4878656cd30e631f75bba6f81.jpg)
}

.GameIcon--draenei_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/draenei_female.84f07bce1a7956db962eac2e2e6b228a.jpg)
}

.GameIcon--gnome_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gnome_male.70e739cf515481dd0b2c2d22cf04819a.jpg)
}

.GameIcon--gnome_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/gnome_female.d2331355a56be5e3a36b46f54ac115e2.jpg)
}

.GameIcon--nightelf_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/nightelf_male.3e952ffeb7888e2e397c992533632114.jpg)
}

.GameIcon--nightelf_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/nightelf_female.645345888ab408e3a100f1bec7a43f99.jpg)
}

.GameIcon--dwarf_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/dwarf_male.6bf72d3636dc1d30c0619afeff854f2f.jpg)
}

.GameIcon--dwarf_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/dwarf_female.fae7a24c86d87891f1e20c36028a969e.jpg)
}

.GameIcon--human_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/human_male.178762d9f388679a5d7e78de86d7f09a.jpg)
}

.GameIcon--human_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/human_female.bbd348b0da568bb2e573084cac9e6cbe.jpg)
}

.GameIcon--orc_male .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/orc_male.2794c8927ab6e6ad7ebd95534b8e312b.jpg)
}

.GameIcon--orc_female .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/orc_female.ed64b038bc4b277650a855feed14f4f5.jpg)
}

.GameIcon--RACE_GENDER_UNKNOWN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/race_gender_unknown.0a2884964f7333e0c5d33cbf39a06cd1.jpg)
}

.GameIcon--UNKNOWN .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/role-unknown.a20e756f6bf849792624fcf6b88f605c.png)
}

.GameIcon--TANK .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/role-tank.a5c6af3385bd985b092d22eebbbb8523.png)
}

.GameIcon--HEALER .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/role-healer.5c36036cc47e1e9e19cdcf4fd3876815.png)
}

.GameIcon--DAMAGE .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/role-damage.b67209c0fafd79b46e0428e74d9e7331.png)
}

.GameIcon-level, .GameIcon-transmog {
    display: none
}

.GameIcon--transmog .GameIcon-transmog {
    position: absolute;
    left: -1px;
    bottom: -1px;
    height: 24px;
    width: 24px;
    display: block;
    background-image: url(../components/gameicon/assets_subdomain/gameicon-transmogcorner.42744d4b18cfaa370d2983c31d9a731e.png);
    background-size: contain
}

.GameIcon--transmog.GameIcon--transmogRight .GameIcon-transmog {
    right: -1px;
    bottom: -1px;
    background-image: url(../components/gameicon/assets_subdomain/gameicon-transmogcornerright.a26c28e2343069aa3058c1c65af33f6f.png)
}

.GameIcon--checkmark .GameIcon-icon {
    background-image: url(../components/gameicon/assets_subdomain/ui_icon_check.a9c162b47bb0aed5821e998f8c824e42.jpg)
}

.GameIcon--level .GameIcon-level {
    position: absolute;
    left: 50%;
    bottom: -8px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    background: #000;
    padding: 1px 8px;
    border-width: 1px;
    border-style: solid;
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .GameIcon--level .GameIcon-level {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .GameIcon--level .GameIcon-level {
        font-size: 1rem
    }
}

.GameIcon--borderGrey {
    border: 1px solid #444
}

.GameIcon--azerite .GameIcon-borderImage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/gameicon/assets_subdomain/gameicon-azerite.5efbaa28ef1c11a8cd9d492787bc2786.png);
    border-image-repeat: initial;
    border-image-slice: 48 fill;
    border-image-width: 48px;
    border-image-outset: 4px 11px 4px 11px
}

.GameIcon--azerite.GameIcon--huge {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/gameicon/assets_subdomain/gameicon-azerite.5efbaa28ef1c11a8cd9d492787bc2786.png);
    border-image-repeat: round;
    border-image-slice: 64 fill;
    border-image-width: 64px;
    border-image-outset: 1px 8px
}

html:not(.touch) .GameIcon--hoverGoldLightBorder:hover {
    border-color: #f8b700
}

.GameIcon--rounded {
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .4)
}

.GameIcon--rounded .GameIcon-icon {
    position: relative;
    position: absolute;
    border-radius: 50%;
    border: none;
    right: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: center;
    transform-origin: center
}

.GameIcon--rounded .GameIcon-icon:before {
    content: "";
    display: block;
    padding-top: 100%
}

.GameIcon--rounded.GameIcon--huge, .GameIcon--rounded.GameIcon--large, .GameIcon--rounded.GameIcon--medium {
    border-width: 2px
}

.GameIcon--rounded.GameIcon--tiny {
    width: 18px
}

.GameIcon--rounded.GameIcon--tiny .GameIcon-icon {
    width: 16px
}

.GameIcon--rounded.GameIcon--small {
    width: 26px
}

.GameIcon--rounded.GameIcon--small .GameIcon-icon {
    width: 24px
}

.GameIcon--rounded.GameIcon--medium {
    width: 36px
}

.GameIcon--rounded.GameIcon--medium .GameIcon-icon {
    width: 32px
}

.GameIcon--rounded.GameIcon--large {
    width: 60px
}

.GameIcon--rounded.GameIcon--large .GameIcon-icon {
    width: 56px
}

.GameIcon--rounded.GameIcon--huge {
    width: 68px
}

.GameIcon--rounded.GameIcon--huge .GameIcon-icon {
    width: 64px
}

.GameIcon--rounded.GameIcon--bordered {
    border: none
}

.GameIcon--rounded.GameIcon--bordered .GameIcon-borderImage {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(../components/gameicon/assets_subdomain/border-medium.dec270972b3a61cb595a6cf92941904f.png) 50% no-repeat;
    background-size: contain
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--large .GameIcon-borderImage {
    background-image: url(../components/gameicon/assets_subdomain/border-large.a0e6fc2b0030917f0da87e302915c5e0.png)
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--full .GameIcon-borderImage, .GameIcon--rounded.GameIcon--bordered.GameIcon--huge .GameIcon-borderImage {
    background-image: url(../components/gameicon/assets_subdomain/border-huge.9ca8e1f0b3ca27c424e8ac2636c18dcd.png)
}

.GameIcon--rounded.GameIcon--bordered .GameIcon-borderImage {
    display: block
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--tiny {
    width: 18px
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--small {
    width: 32px
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--medium {
    width: 38px
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--large {
    width: 64px
}

.GameIcon--rounded.GameIcon--bordered.GameIcon--huge {
    width: 74px
}

a > .GameIcon--rounded.GameIcon--bordered .GameIcon-borderImage {
    background-image: url(../components/gameicon/assets_subdomain/border-medium-linked.d7beed799a6a37b42e55d37529b6ee25.png)
}

a:focus > .GameIcon--rounded.GameIcon--bordered, html:not(.touch) a:hover > .GameIcon--rounded.GameIcon--bordered {
    -webkit-box-shadow: 0 1px 8px hsla(0, 0%, 100%, .4);
    box-shadow: 0 1px 8px hsla(0, 0%, 100%, .4)
}

a:focus > .GameIcon--rounded.GameIcon--bordered .GameIcon-borderImage, html:not(.touch) a:hover > .GameIcon--rounded.GameIcon--bordered .GameIcon-borderImage {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5)
}

.Grid {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.Grid:after, .Grid:before {
    content: "";
    display: table;
    clear: both
}

.Grid--gutter {
    padding: 20px
}

.Grid--gutters {
    margin: -10px
}

.Grid--gutters > * {
    padding: 10px
}

.Grid--gutter.Grid--gutters {
    padding: 10px;
    margin: 0
}

.Grid--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.Grid--flex:after, .Grid--flex:before {
    display: none
}

.Grid--center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.Grid--center:after, .Grid--center:before {
    display: none
}

.Grid-col, .Grid-full, .Grid > * {
    width: 100%;
    clear: both;
    position: relative
}

.Grid-1of2 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-1of2-right {
    float: right
}

.Grid-1of2--prefix {
    margin-left: 50%
}

.Grid-1of2--suffix {
    margin-right: 50%
}

.Grid-1of2--push {
    left: 50%
}

.Grid-1of2--pull {
    left: -50%
}

.Grid-1of3 {
    clear: none;
    float: left;
    width: 33.33333333%
}

.Grid-1of3-right {
    float: right
}

.Grid-1of3--prefix {
    margin-left: 33.33333333%
}

.Grid-1of3--suffix {
    margin-right: 33.33333333%
}

.Grid-1of3--push {
    left: 33.33333333%
}

.Grid-1of3--pull {
    left: -33.33333333%
}

.Grid-2of3 {
    clear: none;
    float: left;
    width: 66.66666667%
}

.Grid-2of3-right {
    float: right
}

.Grid-2of3--prefix {
    margin-left: 66.66666667%
}

.Grid-2of3--suffix {
    margin-right: 66.66666667%
}

.Grid-2of3--push {
    left: 66.66666667%
}

.Grid-2of3--pull {
    left: -66.66666667%
}

.Grid-1of4 {
    clear: none;
    float: left;
    width: 25%
}

.Grid-1of4-right {
    float: right
}

.Grid-1of4--prefix {
    margin-left: 25%
}

.Grid-1of4--suffix {
    margin-right: 25%
}

.Grid-1of4--push {
    left: 25%
}

.Grid-1of4--pull {
    left: -25%
}

.Grid-2of4 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-2of4-right {
    float: right
}

.Grid-2of4--prefix {
    margin-left: 50%
}

.Grid-2of4--suffix {
    margin-right: 50%
}

.Grid-2of4--push {
    left: 50%
}

.Grid-2of4--pull {
    left: -50%
}

.Grid-3of4 {
    clear: none;
    float: left;
    width: 75%
}

.Grid-3of4-right {
    float: right
}

.Grid-3of4--prefix {
    margin-left: 75%
}

.Grid-3of4--suffix {
    margin-right: 75%
}

.Grid-3of4--push {
    left: 75%
}

.Grid-3of4--pull {
    left: -75%
}

.Grid-1of5 {
    clear: none;
    float: left;
    width: 20%
}

.Grid-1of5-right {
    float: right
}

.Grid-1of5--prefix {
    margin-left: 20%
}

.Grid-1of5--suffix {
    margin-right: 20%
}

.Grid-1of5--push {
    left: 20%
}

.Grid-1of5--pull {
    left: -20%
}

.Grid-2of5 {
    clear: none;
    float: left;
    width: 40%
}

.Grid-2of5-right {
    float: right
}

.Grid-2of5--prefix {
    margin-left: 40%
}

.Grid-2of5--suffix {
    margin-right: 40%
}

.Grid-2of5--push {
    left: 40%
}

.Grid-2of5--pull {
    left: -40%
}

.Grid-3of5 {
    clear: none;
    float: left;
    width: 60%
}

.Grid-3of5-right {
    float: right
}

.Grid-3of5--prefix {
    margin-left: 60%
}

.Grid-3of5--suffix {
    margin-right: 60%
}

.Grid-3of5--push {
    left: 60%
}

.Grid-3of5--pull {
    left: -60%
}

.Grid-4of5 {
    clear: none;
    float: left;
    width: 80%
}

.Grid-4of5-right {
    float: right
}

.Grid-4of5--prefix {
    margin-left: 80%
}

.Grid-4of5--suffix {
    margin-right: 80%
}

.Grid-4of5--push {
    left: 80%
}

.Grid-4of5--pull {
    left: -80%
}

.Grid-1of6 {
    clear: none;
    float: left;
    width: 16.66666667%
}

.Grid-1of6-right {
    float: right
}

.Grid-1of6--prefix {
    margin-left: 16.66666667%
}

.Grid-1of6--suffix {
    margin-right: 16.66666667%
}

.Grid-1of6--push {
    left: 16.66666667%
}

.Grid-1of6--pull {
    left: -16.66666667%
}

.Grid-2of6 {
    clear: none;
    float: left;
    width: 33.33333333%
}

.Grid-2of6-right {
    float: right
}

.Grid-2of6--prefix {
    margin-left: 33.33333333%
}

.Grid-2of6--suffix {
    margin-right: 33.33333333%
}

.Grid-2of6--push {
    left: 33.33333333%
}

.Grid-2of6--pull {
    left: -33.33333333%
}

.Grid-3of6 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-3of6-right {
    float: right
}

.Grid-3of6--prefix {
    margin-left: 50%
}

.Grid-3of6--suffix {
    margin-right: 50%
}

.Grid-3of6--push {
    left: 50%
}

.Grid-3of6--pull {
    left: -50%
}

.Grid-4of6 {
    clear: none;
    float: left;
    width: 66.66666667%
}

.Grid-4of6-right {
    float: right
}

.Grid-4of6--prefix {
    margin-left: 66.66666667%
}

.Grid-4of6--suffix {
    margin-right: 66.66666667%
}

.Grid-4of6--push {
    left: 66.66666667%
}

.Grid-4of6--pull {
    left: -66.66666667%
}

.Grid-5of6 {
    clear: none;
    float: left;
    width: 83.33333333%
}

.Grid-5of6-right {
    float: right
}

.Grid-5of6--prefix {
    margin-left: 83.33333333%
}

.Grid-5of6--suffix {
    margin-right: 83.33333333%
}

.Grid-5of6--push {
    left: 83.33333333%
}

.Grid-5of6--pull {
    left: -83.33333333%
}

.Grid-1of7 {
    clear: none;
    float: left;
    width: 14.28571429%
}

.Grid-1of7-right {
    float: right
}

.Grid-1of7--prefix {
    margin-left: 14.28571429%
}

.Grid-1of7--suffix {
    margin-right: 14.28571429%
}

.Grid-1of7--push {
    left: 14.28571429%
}

.Grid-1of7--pull {
    left: -14.28571429%
}

.Grid-2of7 {
    clear: none;
    float: left;
    width: 28.57142857%
}

.Grid-2of7-right {
    float: right
}

.Grid-2of7--prefix {
    margin-left: 28.57142857%
}

.Grid-2of7--suffix {
    margin-right: 28.57142857%
}

.Grid-2of7--push {
    left: 28.57142857%
}

.Grid-2of7--pull {
    left: -28.57142857%
}

.Grid-3of7 {
    clear: none;
    float: left;
    width: 42.85714286%
}

.Grid-3of7-right {
    float: right
}

.Grid-3of7--prefix {
    margin-left: 42.85714286%
}

.Grid-3of7--suffix {
    margin-right: 42.85714286%
}

.Grid-3of7--push {
    left: 42.85714286%
}

.Grid-3of7--pull {
    left: -42.85714286%
}

.Grid-4of7 {
    clear: none;
    float: left;
    width: 57.14285714%
}

.Grid-4of7-right {
    float: right
}

.Grid-4of7--prefix {
    margin-left: 57.14285714%
}

.Grid-4of7--suffix {
    margin-right: 57.14285714%
}

.Grid-4of7--push {
    left: 57.14285714%
}

.Grid-4of7--pull {
    left: -57.14285714%
}

.Grid-5of7 {
    clear: none;
    float: left;
    width: 71.42857143%
}

.Grid-5of7-right {
    float: right
}

.Grid-5of7--prefix {
    margin-left: 71.42857143%
}

.Grid-5of7--suffix {
    margin-right: 71.42857143%
}

.Grid-5of7--push {
    left: 71.42857143%
}

.Grid-5of7--pull {
    left: -71.42857143%
}

.Grid-6of7 {
    clear: none;
    float: left;
    width: 85.71428571%
}

.Grid-6of7-right {
    float: right
}

.Grid-6of7--prefix {
    margin-left: 85.71428571%
}

.Grid-6of7--suffix {
    margin-right: 85.71428571%
}

.Grid-6of7--push {
    left: 85.71428571%
}

.Grid-6of7--pull {
    left: -85.71428571%
}

.Grid-1of8 {
    clear: none;
    float: left;
    width: 12.5%
}

.Grid-1of8-right {
    float: right
}

.Grid-1of8--prefix {
    margin-left: 12.5%
}

.Grid-1of8--suffix {
    margin-right: 12.5%
}

.Grid-1of8--push {
    left: 12.5%
}

.Grid-1of8--pull {
    left: -12.5%
}

.Grid-2of8 {
    clear: none;
    float: left;
    width: 25%
}

.Grid-2of8-right {
    float: right
}

.Grid-2of8--prefix {
    margin-left: 25%
}

.Grid-2of8--suffix {
    margin-right: 25%
}

.Grid-2of8--push {
    left: 25%
}

.Grid-2of8--pull {
    left: -25%
}

.Grid-3of8 {
    clear: none;
    float: left;
    width: 37.5%
}

.Grid-3of8-right {
    float: right
}

.Grid-3of8--prefix {
    margin-left: 37.5%
}

.Grid-3of8--suffix {
    margin-right: 37.5%
}

.Grid-3of8--push {
    left: 37.5%
}

.Grid-3of8--pull {
    left: -37.5%
}

.Grid-4of8 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-4of8-right {
    float: right
}

.Grid-4of8--prefix {
    margin-left: 50%
}

.Grid-4of8--suffix {
    margin-right: 50%
}

.Grid-4of8--push {
    left: 50%
}

.Grid-4of8--pull {
    left: -50%
}

.Grid-5of8 {
    clear: none;
    float: left;
    width: 62.5%
}

.Grid-5of8-right {
    float: right
}

.Grid-5of8--prefix {
    margin-left: 62.5%
}

.Grid-5of8--suffix {
    margin-right: 62.5%
}

.Grid-5of8--push {
    left: 62.5%
}

.Grid-5of8--pull {
    left: -62.5%
}

.Grid-6of8 {
    clear: none;
    float: left;
    width: 75%
}

.Grid-6of8-right {
    float: right
}

.Grid-6of8--prefix {
    margin-left: 75%
}

.Grid-6of8--suffix {
    margin-right: 75%
}

.Grid-6of8--push {
    left: 75%
}

.Grid-6of8--pull {
    left: -75%
}

.Grid-7of8 {
    clear: none;
    float: left;
    width: 87.5%
}

.Grid-7of8-right {
    float: right
}

.Grid-7of8--prefix {
    margin-left: 87.5%
}

.Grid-7of8--suffix {
    margin-right: 87.5%
}

.Grid-7of8--push {
    left: 87.5%
}

.Grid-7of8--pull {
    left: -87.5%
}

.Grid-1of9 {
    clear: none;
    float: left;
    width: 11.11111111%
}

.Grid-1of9-right {
    float: right
}

.Grid-1of9--prefix {
    margin-left: 11.11111111%
}

.Grid-1of9--suffix {
    margin-right: 11.11111111%
}

.Grid-1of9--push {
    left: 11.11111111%
}

.Grid-1of9--pull {
    left: -11.11111111%
}

.Grid-2of9 {
    clear: none;
    float: left;
    width: 22.22222222%
}

.Grid-2of9-right {
    float: right
}

.Grid-2of9--prefix {
    margin-left: 22.22222222%
}

.Grid-2of9--suffix {
    margin-right: 22.22222222%
}

.Grid-2of9--push {
    left: 22.22222222%
}

.Grid-2of9--pull {
    left: -22.22222222%
}

.Grid-3of9 {
    clear: none;
    float: left;
    width: 33.33333333%
}

.Grid-3of9-right {
    float: right
}

.Grid-3of9--prefix {
    margin-left: 33.33333333%
}

.Grid-3of9--suffix {
    margin-right: 33.33333333%
}

.Grid-3of9--push {
    left: 33.33333333%
}

.Grid-3of9--pull {
    left: -33.33333333%
}

.Grid-4of9 {
    clear: none;
    float: left;
    width: 44.44444444%
}

.Grid-4of9-right {
    float: right
}

.Grid-4of9--prefix {
    margin-left: 44.44444444%
}

.Grid-4of9--suffix {
    margin-right: 44.44444444%
}

.Grid-4of9--push {
    left: 44.44444444%
}

.Grid-4of9--pull {
    left: -44.44444444%
}

.Grid-5of9 {
    clear: none;
    float: left;
    width: 55.55555556%
}

.Grid-5of9-right {
    float: right
}

.Grid-5of9--prefix {
    margin-left: 55.55555556%
}

.Grid-5of9--suffix {
    margin-right: 55.55555556%
}

.Grid-5of9--push {
    left: 55.55555556%
}

.Grid-5of9--pull {
    left: -55.55555556%
}

.Grid-6of9 {
    clear: none;
    float: left;
    width: 66.66666667%
}

.Grid-6of9-right {
    float: right
}

.Grid-6of9--prefix {
    margin-left: 66.66666667%
}

.Grid-6of9--suffix {
    margin-right: 66.66666667%
}

.Grid-6of9--push {
    left: 66.66666667%
}

.Grid-6of9--pull {
    left: -66.66666667%
}

.Grid-7of9 {
    clear: none;
    float: left;
    width: 77.77777778%
}

.Grid-7of9-right {
    float: right
}

.Grid-7of9--prefix {
    margin-left: 77.77777778%
}

.Grid-7of9--suffix {
    margin-right: 77.77777778%
}

.Grid-7of9--push {
    left: 77.77777778%
}

.Grid-7of9--pull {
    left: -77.77777778%
}

.Grid-8of9 {
    clear: none;
    float: left;
    width: 88.88888889%
}

.Grid-8of9-right {
    float: right
}

.Grid-8of9--prefix {
    margin-left: 88.88888889%
}

.Grid-8of9--suffix {
    margin-right: 88.88888889%
}

.Grid-8of9--push {
    left: 88.88888889%
}

.Grid-8of9--pull {
    left: -88.88888889%
}

.Grid-1of10 {
    clear: none;
    float: left;
    width: 10%
}

.Grid-1of10-right {
    float: right
}

.Grid-1of10--prefix {
    margin-left: 10%
}

.Grid-1of10--suffix {
    margin-right: 10%
}

.Grid-1of10--push {
    left: 10%
}

.Grid-1of10--pull {
    left: -10%
}

.Grid-2of10 {
    clear: none;
    float: left;
    width: 20%
}

.Grid-2of10-right {
    float: right
}

.Grid-2of10--prefix {
    margin-left: 20%
}

.Grid-2of10--suffix {
    margin-right: 20%
}

.Grid-2of10--push {
    left: 20%
}

.Grid-2of10--pull {
    left: -20%
}

.Grid-3of10 {
    clear: none;
    float: left;
    width: 30%
}

.Grid-3of10-right {
    float: right
}

.Grid-3of10--prefix {
    margin-left: 30%
}

.Grid-3of10--suffix {
    margin-right: 30%
}

.Grid-3of10--push {
    left: 30%
}

.Grid-3of10--pull {
    left: -30%
}

.Grid-4of10 {
    clear: none;
    float: left;
    width: 40%
}

.Grid-4of10-right {
    float: right
}

.Grid-4of10--prefix {
    margin-left: 40%
}

.Grid-4of10--suffix {
    margin-right: 40%
}

.Grid-4of10--push {
    left: 40%
}

.Grid-4of10--pull {
    left: -40%
}

.Grid-5of10 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-5of10-right {
    float: right
}

.Grid-5of10--prefix {
    margin-left: 50%
}

.Grid-5of10--suffix {
    margin-right: 50%
}

.Grid-5of10--push {
    left: 50%
}

.Grid-5of10--pull {
    left: -50%
}

.Grid-6of10 {
    clear: none;
    float: left;
    width: 60%
}

.Grid-6of10-right {
    float: right
}

.Grid-6of10--prefix {
    margin-left: 60%
}

.Grid-6of10--suffix {
    margin-right: 60%
}

.Grid-6of10--push {
    left: 60%
}

.Grid-6of10--pull {
    left: -60%
}

.Grid-7of10 {
    clear: none;
    float: left;
    width: 70%
}

.Grid-7of10-right {
    float: right
}

.Grid-7of10--prefix {
    margin-left: 70%
}

.Grid-7of10--suffix {
    margin-right: 70%
}

.Grid-7of10--push {
    left: 70%
}

.Grid-7of10--pull {
    left: -70%
}

.Grid-8of10 {
    clear: none;
    float: left;
    width: 80%
}

.Grid-8of10-right {
    float: right
}

.Grid-8of10--prefix {
    margin-left: 80%
}

.Grid-8of10--suffix {
    margin-right: 80%
}

.Grid-8of10--push {
    left: 80%
}

.Grid-8of10--pull {
    left: -80%
}

.Grid-9of10 {
    clear: none;
    float: left;
    width: 90%
}

.Grid-9of10-right {
    float: right
}

.Grid-9of10--prefix {
    margin-left: 90%
}

.Grid-9of10--suffix {
    margin-right: 90%
}

.Grid-9of10--push {
    left: 90%
}

.Grid-9of10--pull {
    left: -90%
}

.Grid-1of11 {
    clear: none;
    float: left;
    width: 9.09090909%
}

.Grid-1of11-right {
    float: right
}

.Grid-1of11--prefix {
    margin-left: 9.09090909%
}

.Grid-1of11--suffix {
    margin-right: 9.09090909%
}

.Grid-1of11--push {
    left: 9.09090909%
}

.Grid-1of11--pull {
    left: -9.09090909%
}

.Grid-2of11 {
    clear: none;
    float: left;
    width: 18.18181818%
}

.Grid-2of11-right {
    float: right
}

.Grid-2of11--prefix {
    margin-left: 18.18181818%
}

.Grid-2of11--suffix {
    margin-right: 18.18181818%
}

.Grid-2of11--push {
    left: 18.18181818%
}

.Grid-2of11--pull {
    left: -18.18181818%
}

.Grid-3of11 {
    clear: none;
    float: left;
    width: 27.27272727%
}

.Grid-3of11-right {
    float: right
}

.Grid-3of11--prefix {
    margin-left: 27.27272727%
}

.Grid-3of11--suffix {
    margin-right: 27.27272727%
}

.Grid-3of11--push {
    left: 27.27272727%
}

.Grid-3of11--pull {
    left: -27.27272727%
}

.Grid-4of11 {
    clear: none;
    float: left;
    width: 36.36363636%
}

.Grid-4of11-right {
    float: right
}

.Grid-4of11--prefix {
    margin-left: 36.36363636%
}

.Grid-4of11--suffix {
    margin-right: 36.36363636%
}

.Grid-4of11--push {
    left: 36.36363636%
}

.Grid-4of11--pull {
    left: -36.36363636%
}

.Grid-5of11 {
    clear: none;
    float: left;
    width: 45.45454545%
}

.Grid-5of11-right {
    float: right
}

.Grid-5of11--prefix {
    margin-left: 45.45454545%
}

.Grid-5of11--suffix {
    margin-right: 45.45454545%
}

.Grid-5of11--push {
    left: 45.45454545%
}

.Grid-5of11--pull {
    left: -45.45454545%
}

.Grid-6of11 {
    clear: none;
    float: left;
    width: 54.54545455%
}

.Grid-6of11-right {
    float: right
}

.Grid-6of11--prefix {
    margin-left: 54.54545455%
}

.Grid-6of11--suffix {
    margin-right: 54.54545455%
}

.Grid-6of11--push {
    left: 54.54545455%
}

.Grid-6of11--pull {
    left: -54.54545455%
}

.Grid-7of11 {
    clear: none;
    float: left;
    width: 63.63636364%
}

.Grid-7of11-right {
    float: right
}

.Grid-7of11--prefix {
    margin-left: 63.63636364%
}

.Grid-7of11--suffix {
    margin-right: 63.63636364%
}

.Grid-7of11--push {
    left: 63.63636364%
}

.Grid-7of11--pull {
    left: -63.63636364%
}

.Grid-8of11 {
    clear: none;
    float: left;
    width: 72.72727273%
}

.Grid-8of11-right {
    float: right
}

.Grid-8of11--prefix {
    margin-left: 72.72727273%
}

.Grid-8of11--suffix {
    margin-right: 72.72727273%
}

.Grid-8of11--push {
    left: 72.72727273%
}

.Grid-8of11--pull {
    left: -72.72727273%
}

.Grid-9of11 {
    clear: none;
    float: left;
    width: 81.81818182%
}

.Grid-9of11-right {
    float: right
}

.Grid-9of11--prefix {
    margin-left: 81.81818182%
}

.Grid-9of11--suffix {
    margin-right: 81.81818182%
}

.Grid-9of11--push {
    left: 81.81818182%
}

.Grid-9of11--pull {
    left: -81.81818182%
}

.Grid-10of11 {
    clear: none;
    float: left;
    width: 90.90909091%
}

.Grid-10of11-right {
    float: right
}

.Grid-10of11--prefix {
    margin-left: 90.90909091%
}

.Grid-10of11--suffix {
    margin-right: 90.90909091%
}

.Grid-10of11--push {
    left: 90.90909091%
}

.Grid-10of11--pull {
    left: -90.90909091%
}

.Grid-1of12 {
    clear: none;
    float: left;
    width: 8.33333333%
}

.Grid-1of12-right {
    float: right
}

.Grid-1of12--prefix {
    margin-left: 8.33333333%
}

.Grid-1of12--suffix {
    margin-right: 8.33333333%
}

.Grid-1of12--push {
    left: 8.33333333%
}

.Grid-1of12--pull {
    left: -8.33333333%
}

.Grid-2of12 {
    clear: none;
    float: left;
    width: 16.66666667%
}

.Grid-2of12-right {
    float: right
}

.Grid-2of12--prefix {
    margin-left: 16.66666667%
}

.Grid-2of12--suffix {
    margin-right: 16.66666667%
}

.Grid-2of12--push {
    left: 16.66666667%
}

.Grid-2of12--pull {
    left: -16.66666667%
}

.Grid-3of12 {
    clear: none;
    float: left;
    width: 25%
}

.Grid-3of12-right {
    float: right
}

.Grid-3of12--prefix {
    margin-left: 25%
}

.Grid-3of12--suffix {
    margin-right: 25%
}

.Grid-3of12--push {
    left: 25%
}

.Grid-3of12--pull {
    left: -25%
}

.Grid-4of12 {
    clear: none;
    float: left;
    width: 33.33333333%
}

.Grid-4of12-right {
    float: right
}

.Grid-4of12--prefix {
    margin-left: 33.33333333%
}

.Grid-4of12--suffix {
    margin-right: 33.33333333%
}

.Grid-4of12--push {
    left: 33.33333333%
}

.Grid-4of12--pull {
    left: -33.33333333%
}

.Grid-5of12 {
    clear: none;
    float: left;
    width: 41.66666667%
}

.Grid-5of12-right {
    float: right
}

.Grid-5of12--prefix {
    margin-left: 41.66666667%
}

.Grid-5of12--suffix {
    margin-right: 41.66666667%
}

.Grid-5of12--push {
    left: 41.66666667%
}

.Grid-5of12--pull {
    left: -41.66666667%
}

.Grid-6of12 {
    clear: none;
    float: left;
    width: 50%
}

.Grid-6of12-right {
    float: right
}

.Grid-6of12--prefix {
    margin-left: 50%
}

.Grid-6of12--suffix {
    margin-right: 50%
}

.Grid-6of12--push {
    left: 50%
}

.Grid-6of12--pull {
    left: -50%
}

.Grid-7of12 {
    clear: none;
    float: left;
    width: 58.33333333%
}

.Grid-7of12-right {
    float: right
}

.Grid-7of12--prefix {
    margin-left: 58.33333333%
}

.Grid-7of12--suffix {
    margin-right: 58.33333333%
}

.Grid-7of12--push {
    left: 58.33333333%
}

.Grid-7of12--pull {
    left: -58.33333333%
}

.Grid-8of12 {
    clear: none;
    float: left;
    width: 66.66666667%
}

.Grid-8of12-right {
    float: right
}

.Grid-8of12--prefix {
    margin-left: 66.66666667%
}

.Grid-8of12--suffix {
    margin-right: 66.66666667%
}

.Grid-8of12--push {
    left: 66.66666667%
}

.Grid-8of12--pull {
    left: -66.66666667%
}

.Grid-9of12 {
    clear: none;
    float: left;
    width: 75%
}

.Grid-9of12-right {
    float: right
}

.Grid-9of12--prefix {
    margin-left: 75%
}

.Grid-9of12--suffix {
    margin-right: 75%
}

.Grid-9of12--push {
    left: 75%
}

.Grid-9of12--pull {
    left: -75%
}

.Grid-10of12 {
    clear: none;
    float: left;
    width: 83.33333333%
}

.Grid-10of12-right {
    float: right
}

.Grid-10of12--prefix {
    margin-left: 83.33333333%
}

.Grid-10of12--suffix {
    margin-right: 83.33333333%
}

.Grid-10of12--push {
    left: 83.33333333%
}

.Grid-10of12--pull {
    left: -83.33333333%
}

.Grid-11of12 {
    clear: none;
    float: left;
    width: 91.66666667%
}

.Grid-11of12-right {
    float: right
}

.Grid-11of12--prefix {
    margin-left: 91.66666667%
}

.Grid-11of12--suffix {
    margin-right: 91.66666667%
}

.Grid-11of12--push {
    left: 91.66666667%
}

.Grid-11of12--pull {
    left: -91.66666667%
}

.HorizontalNav-item {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: #f8b700;
    padding: 6.66666667px 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    -webkit-transition: all .2s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .2s cubic-bezier(.23, 1, .32, 1) 0s
}

.HorizontalNav-item.zh-cn, .zh-cn .HorizontalNav-item {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.HorizontalNav-item.ko-kr, .ko-kr .HorizontalNav-item {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.HorizontalNav-item.ru-ru, .ru-ru .HorizontalNav-item {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.HorizontalNav-item.zh-tw, .zh-tw .HorizontalNav-item {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .HorizontalNav-item {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .HorizontalNav-item {
        font-size: 1.2rem
    }
}

.HorizontalNav-item:focus {
    outline: 5px auto -webkit-focus-ring-color
}

.HorizontalNav-link--slide.is-selected-slide .HorizontalNav-item, .HorizontalNav-link.is-active .HorizontalNav-item, .HorizontalNav-link.is-selected:not(.HorizontalNav-link--slide) .HorizontalNav-item, html:not(.touch) .HorizontalNav-link:hover .HorizontalNav-item {
    background-color: #f8b700;
    color: #211510
}

.HorizontalNav--gutters .HorizontalNav-link {
    display: inline-block;
    margin-left: 6.66666667px;
    margin-right: 6.66666667px
}

.HorizontalNav--gutters .HorizontalNav-link:first-of-type {
    margin-left: 0
}

.HorizontalNav--gutters .HorizontalNav-link:last-of-type {
    margin-right: 0
}

.HorizontalNav--underline {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2)
}

.HorizontalNav--slider .HorizontalNav-link, .HorizontalNav--underlineItems .HorizontalNav-link {
    display: inline-block;
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    padding-left: 5px;
    padding-right: 5px
}

.HorizontalNav--slider .HorizontalNav-link:first-of-type, .HorizontalNav--underlineItems .HorizontalNav-link:first-of-type {
    padding-left: 0
}

.HorizontalNav--slider .HorizontalNav-link:last-of-type, .HorizontalNav--underlineItems .HorizontalNav-link:last-of-type {
    padding-right: 0
}

.HorizontalNav--slider .HorizontalNav-link.HorizontalNav-link--slide, .HorizontalNav--underlineItems .HorizontalNav-link.HorizontalNav-link--slide {
    border-bottom: none
}

.HorizontalNav--slider .HorizontalNav-link .HorizontalNav-item, .HorizontalNav--underlineItems .HorizontalNav-link .HorizontalNav-item {
    display: block;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 8px;
    margin-bottom: -3px;
    border-bottom: 3px solid transparent
}

html:not(.touch) .HorizontalNav--slider .HorizontalNav-link:hover .HorizontalNav-item, html:not(.touch) .HorizontalNav--underlineItems .HorizontalNav-link:hover .HorizontalNav-item {
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent
}

.HorizontalNav--slider .HorizontalNav-link--slide.is-selected-slide .HorizontalNav-item, .HorizontalNav--slider .HorizontalNav-link.is-active .HorizontalNav-item, .HorizontalNav--slider .HorizontalNav-link.is-selected:not(.HorizontalNav-link--slide) .HorizontalNav-item, .HorizontalNav--underlineItems .HorizontalNav-link--slide.is-selected-slide .HorizontalNav-item, .HorizontalNav--underlineItems .HorizontalNav-link.is-active .HorizontalNav-item, .HorizontalNav--underlineItems .HorizontalNav-link.is-selected:not(.HorizontalNav-link--slide) .HorizontalNav-item {
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent;
    border-bottom-color: #f8b700
}

.HorizontalNav--slider.HorizontalNav--gutters .HorizontalNav-link, .HorizontalNav--underlineItems.HorizontalNav--gutters .HorizontalNav-link {
    padding: 0 15px;
    margin-left: 0;
    margin-right: 0
}

.HorizontalNav--slider.HorizontalNav--gutters .HorizontalNav-link:first-of-type, .HorizontalNav--underlineItems.HorizontalNav--gutters .HorizontalNav-link:first-of-type {
    padding-left: 0
}

.HorizontalNav--slider.HorizontalNav--gutters .HorizontalNav-link:last-of-type, .HorizontalNav--underlineItems.HorizontalNav--gutters .HorizontalNav-link:last-of-type {
    padding-right: 0
}

.HorizontalNav--slider.HorizontalNav--gutters .HorizontalNav-items, .HorizontalNav--underlineItems.HorizontalNav--gutters .HorizontalNav-items {
    margin-left: 0
}

.HorizontalNav--slider .HorizontalNav-items--infinite .HorizontalNav-link.HorizontalNav-link--slide, .HorizontalNav--slider .HorizontalNav-link--slide, .HorizontalNav--underlineItems .HorizontalNav-items--infinite .HorizontalNav-link.HorizontalNav-link--slide, .HorizontalNav--underlineItems .HorizontalNav-link--slide {
    padding: 0 12px
}

.HorizontalNav-items.Slider {
    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    overflow: hidden;
    position: relative;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 22px;
    padding-right: 22px
}

.HorizontalNav-items.Slider--infinite {
    padding: 0
}

.HorizontalNav-items.Slider:before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 30px;
    background: red;
    background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, .1)), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .1) 0, hsla(0, 0%, 100%, 0))
}

.HorizontalNav-items.Slider .flickity-viewport:after, .HorizontalNav-items.Slider .flickity-viewport:before {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    content: "";
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    display: block;
    width: 30px;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .7)), to(transparent));
    background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0, transparent)
}

.HorizontalNav-items.Slider .flickity-viewport:after {
    width: 80px;
    left: auto;
    right: 0;
    background: -webkit-gradient(linear, right top, left top, from(#000), to(transparent));
    background: linear-gradient(270deg, #000 0, transparent)
}

.HorizontalNav-items.Slider.HorizontalNav-items--centered .flickity-viewport:before {
    width: 80px;
    background: -webkit-gradient(linear, left top, right top, from(#000), to(transparent));
    background: linear-gradient(90deg, #000 0, transparent)
}

.HorizontalNav-items.Slider[data-left-more=true] .flickity-viewport:before, .HorizontalNav-items.Slider[data-right-more=true] .flickity-viewport:after {
    opacity: 1
}

.HorizontalNav-items.Slider .HorizontalNav-item, .HorizontalNav-items.Slider .HorizontalNav-link {
    display: block
}

.HorizontalNav-items.Slider .HorizontalNav-item {
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    position: relative;
    white-space: nowrap;
    border-bottom: none;
    margin-bottom: 0
}

@media (min-width: 720px) {
    .HorizontalNav-items.Slider .HorizontalNav-item {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .HorizontalNav-items.Slider .HorizontalNav-item {
        font-size: 1.44rem
    }
}

.HorizontalNav-items.Slider .HorizontalNav-item:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    background: #f8b700;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0
}

.HorizontalNav-items.Slider .HorizontalNav-link.is-selected-slide .HorizontalNav-item, .HorizontalNav-items.Slider .HorizontalNav-link:active .HorizontalNav-item {
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    color: #fff
}

.HorizontalNav-items.Slider .HorizontalNav-link.is-selected-slide .HorizontalNav-item:after, .HorizontalNav-items.Slider .HorizontalNav-link:active .HorizontalNav-item:after {
    -webkit-transition: all .6s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .6s cubic-bezier(.23, 1, .32, 1) 0s;
    height: 3px;
    opacity: 1
}

.HorizontalNav--upper .HorizontalNav-item {
    text-transform: uppercase
}

.HorizontalNav--center.HorizontalNav--underlineItems .HorizontalNav-items, .HorizontalNav--center .HorizontalNav-items {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.HorizontalNav--flex .HorizontalNav-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.HorizontalNav--ocho {
    display: inline-block;
    position: relative;
    padding-right: 134px;
    padding-left: 134px
}

.HorizontalNav--ocho:after, .HorizontalNav--ocho:before {
    content: "";
    position: absolute;
    top: 0;
    width: 134px;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 82px;
    z-index: 1
}

.HorizontalNav--ocho:before {
    left: 0;
    background: url(../components/horizontalnav/assets_subdomain/horizontalnav-ocho-ends.2c2f53b3cb0b957b6c8dc0059a71cf69.png) 0 0
}

.HorizontalNav--ocho:after {
    right: 0;
    background: url(../components/horizontalnav/assets_subdomain/horizontalnav-ocho-ends.2c2f53b3cb0b957b6c8dc0059a71cf69.png) 134px 0
}

.HorizontalNav--ocho .HorizontalNav-itemsContainer {
    background-image: url(../components/horizontalnav/assets_subdomain/horizontalnav-ocho-bg.a302ac709af2eefff000cdde948d833b.png);
    background-repeat: repeat-x
}

.HorizontalNav--ocho .HorizontalNav-link .HorizontalNav-item {
    padding: 0 10px;
    margin-top: 32px;
    margin-bottom: 37px;
    background: transparent;
    background-size: 100%;
    font-size: 15px;
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #ede0c9 20%, #8a7e66);
    background-size: 1.3em 1.3em;
    background-position: top;
    color: #ede0c9;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative
}

.HorizontalNav--ocho .HorizontalNav-link.is-active, .HorizontalNav--ocho .HorizontalNav-link.is-selected {
    position: relative
}

.HorizontalNav--ocho .HorizontalNav-link.is-active .HorizontalNav-item, .HorizontalNav--ocho .HorizontalNav-link.is-selected .HorizontalNav-item {
    color: #fff;
    background-image: -webkit-linear-gradient(top, #fff, #fff)
}

.HorizontalNav--ocho .HorizontalNav-link.is-active:before, .HorizontalNav--ocho .HorizontalNav-link.is-selected:before {
    content: "";
    position: absolute;
    bottom: 8px;
    right: 50%;
    width: 116px;
    height: 47px;
    margin-right: -56px;
    background-image: url(../components/horizontalnav/assets_subdomain/horizontalnav-ocho-arrow.798f625408aeae45659939ebefd5664b.png);
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none
}

html:not(.touch) .HorizontalNav--ocho .HorizontalNav-link:hover .HorizontalNav-item {
    color: #fff;
    background-image: -webkit-linear-gradient(top, #fff, #fff)
}

.HorizontalNav--ocho.HorizontalNav--full {
    display: block
}

.Icon {
    display: inline-block;
    position: relative
}

.Icon--inline {
    display: inline
}

.Icon--invert {
    -webkit-filter: invert(100%);
    filter: invert(100%)
}

.Icon--placeholder, .Icon--wireframe {
    border: 4px solid #000;
    border-radius: 50%;
    height: 32px;
    width: 32px
}

.Icon--placeholder.Icon--small, .Icon--wireframe.Icon--small {
    border-width: 2px;
    height: 16px;
    width: 16px
}

.Icon--placeholder.Icon--medium, .Icon--wireframe.Icon--medium {
    border-width: 3px;
    height: 26px;
    width: 26px
}

.Icon--placeholder.Icon--large, .Icon--wireframe.Icon--large {
    border-width: 5px;
    height: 56px;
    width: 56px
}

.Icon--play {
    border-color: transparent #000;
    border-style: solid;
    border-width: 32px 0 32px 50px
}

.Icon--vod {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-vod.c2e0ef49599112d004f204529cec950c.png);
    background-position: 50%;
    position: relative;
    width: 27px;
    height: 27px;
    background-repeat: no-repeat
}

.Icon--vod:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--pause {
    height: 50px;
    width: 18px
}

.Icon--pause:after, .Icon--pause:before {
    content: "";
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0
}

.Icon--pause:before {
    right: 90%
}

.Icon--pause:after {
    left: 90%
}

.Icon--bluepost {
    background: #01b2f1;
    border-radius: 50%;
    color: #fff;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px
}

.Icon--star {
    margin: 50px 0;
    display: block;
    position: relative;
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #000;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(35deg) scale(.5);
    transform: rotate(35deg) scale(.5)
}

.Icon--star:before {
    border-bottom: 80px solid #000;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg)
}

.Icon--star:after, .Icon--star:before {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: 0
}

.Icon--star:after {
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #000;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg)
}

.Icon--star.Icon--small {
    -webkit-transform: rotate(35deg) scale(.1);
    transform: rotate(35deg) scale(.1)
}

.Icon--badge {
    height: 26px;
    width: 26px;
    margin: 3px;
    background-color: #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.Icon--badge:after, .Icon--badge:before {
    content: "";
    display: block;
    border-color: transparent #000;
    border-style: solid;
    border-width: 18px;
    height: 0;
    width: 0;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0
}

.Icon--badge:before {
    top: -4px;
    left: -12px;
    border-width: 10px 0 18px 18px
}

.Icon--badge:after {
    top: -17px;
    left: 1px;
    border-width: 10px 18px 18px 0
}

.Icon--badge.Icon--small {
    margin: -7px;
    -webkit-transform: rotate(45deg) scale(.3);
    transform: rotate(45deg) scale(.3)
}

.Icon--check {
    border: 3px solid #000;
    border-width: 0 0 4px 4px;
    height: 16px;
    width: 32px;
    margin: 6px 0;
    -webkit-transform: rotate(-45deg) scale(.5);
    transform: rotate(-45deg) scale(.5)
}

.Icon--checkCircleGreen {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-checkcirclegreen.fbe1f39b8334d8228bf6120bc6d33692.png);
    background-position: 50%;
    position: relative;
    width: 18px
}

.Icon--checkCircleGreen:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--readmore {
    width: 10px;
    height: 2px;
    background-color: #000;
    margin: 3px
}

.Icon--readmore:before {
    border: 2px solid #000;
    border-width: 1px 1px 0 0;
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    right: 0;
    top: -2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 6px
}

.Icon--dropdown {
    height: 16px;
    top: -3px;
    -webkit-transform: rotate(-45deg) scale(.5);
    transform: rotate(-45deg) scale(.5);
    width: 16px
}

.Icon--dropdown, .Icon--dropright {
    border: 2px solid #000;
    border-width: 0 0 3px 3px;
    margin: -4px 0
}

.Icon--dropright, .Icon--droprightGold {
    height: 14px;
    top: -2px;
    left: -4px;
    -webkit-transform: rotate(-135deg) scale(.5);
    transform: rotate(-135deg) scale(.5);
    width: 14px
}

.Icon--droprightGold {
    margin: -4px 0;
    border: 2px solid #f8b700;
    border-width: 0 0 3px 3px
}

.Icon--dropleft {
    border: 2px solid #000;
    border-width: 0 0 3px 3px
}

.Icon--dropleft, .Icon--dropleftGold {
    height: 14px;
    margin: -4px 0;
    top: -2px;
    left: -4px;
    -webkit-transform: rotate(45deg) scale(.5);
    transform: rotate(45deg) scale(.5);
    width: 14px
}

.Icon--dropleftGold {
    border: 2px solid #f8b700;
    border-width: 0 0 3px 3px
}

.Icon--menu {
    top: -4px
}

.Icon--menu, .Icon--menu:after, .Icon--menu:before {
    width: 20px;
    height: 3px;
    background-color: #000
}

.Icon--menu:before {
    top: -5px
}

.Icon--menu:after, .Icon--menu:before {
    content: "";
    display: block;
    position: relative
}

.Icon--menu:after {
    top: 2px
}

.Icon--wowMenu {
    top: -4px
}

.Icon--wowMenu, .Icon--wowMenu:after, .Icon--wowMenu:before {
    width: 24px;
    height: 3px;
    background-color: #e7cf43
}

.Icon--wowMenu:before {
    content: "";
    display: block;
    position: relative;
    top: -7px
}

.Icon--wowMenu:after {
    content: "";
    display: block;
    position: relative;
    top: 4px
}

.Icon--search {
    border: 2px solid #000;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    top: -1px;
    margin: 7px
}

.Icon--search:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    top: 14px;
    left: -8px;
    width: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.Icon--search.Icon--large {
    border-width: 3px;
    height: 28px;
    width: 28px
}

.Icon--search.Icon--large:before {
    height: 4px;
    top: 21px;
    left: -10px;
    width: 14px
}

.Icon--horde {
    color: #b30000
}

.Icon--alliance {
    color: #0078ff
}

.Icon--closeGold, .Icon--closeMedium, .Icon--closeSmall {
    height: 18px;
    width: 18px;
    margin: 0 3px 2px 0
}

.Icon--closeGold:after, .Icon--closeGold:before, .Icon--closeMedium:after, .Icon--closeMedium:before, .Icon--closeSmall:after, .Icon--closeSmall:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 27px
}

.Icon--closeGold:before, .Icon--closeMedium:before, .Icon--closeSmall:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 8px;
    left: -3px
}

.Icon--closeGold:after, .Icon--closeMedium:after, .Icon--closeSmall:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: -3px
}

.Icon--closeMedium {
    margin: 0
}

.Icon--closeMedium:after, .Icon--closeMedium:before {
    width: 18px
}

.Icon--closeMedium:before {
    top: 9px;
    left: -2px
}

.Icon--closeMedium:after {
    top: 6px;
    left: -2px
}

.Icon--closeSmall {
    margin: 0
}

.Icon--closeSmall:after, .Icon--closeSmall:before {
    width: 9px
}

.Icon--closeSmall:after, .Icon--closeSmall:before {
    left: 4px
}

.Icon--closeGold:after, .Icon--closeGold:before {
    background: #f8b700
}

.Icon--closeCircleRed {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-closecirclered.51a0f996ac8b43a4314d4d5f2d67803d.png);
    background-position: 50%;
    position: relative;
    width: 18px
}

.Icon--closeCircleRed:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--closeSwitchOff {
    height: 19px;
    width: 19px;
    margin: 0
}

.Icon--closeSwitchOff:after, .Icon--closeSwitchOff:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 19px
}

.Icon--closeSwitchOff:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 8px;
    left: 0
}

.Icon--closeSwitchOff:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: 0
}

.Icon--closeSwitchOn {
    height: 19px;
    width: 19px;
    margin: 0
}

.Icon--closeSwitchOn:after, .Icon--closeSwitchOn:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 19px
}

.Icon--closeSwitchOn:before {
    top: 8px;
    left: 0
}

.Icon--closeSwitchOn:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 5px;
    left: 0
}

.Icon--plus {
    height: 19px;
    width: 19px;
    margin: 0
}

.Icon--plus:after, .Icon--plus:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 19px
}

.Icon--plus:before {
    top: 8px;
    left: 0
}

.Icon--plus:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 5px;
    left: 0
}

.Icon--minus {
    height: 19px;
    width: 19px;
    margin: 0
}

.Icon--minus:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 19px;
    top: 8px;
    left: 0
}

.Icon--expand {
    height: 28px;
    width: 34px;
    border: 3px solid #000;
    top: 2px;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    margin: -7px -8px
}

.Icon--expand:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 9px;
    top: 10px;
    left: 9px;
    -webkit-box-shadow: -17px -19px #000, 17px -19px #000, -17px 18px #000, 17px 18px #000;
    box-shadow: -17px -19px #000, 17px -19px #000, -17px 18px #000, 17px 18px #000
}

.Icon--expand:after {
    content: "";
    position: absolute;
    height: 9px;
    width: 3px;
    top: 7px;
    left: 11px;
    -webkit-box-shadow: -20px -16px #000, 23px -16px #000, -20px 15px #000, 23px 15px #000;
    box-shadow: -20px -16px #000, 23px -16px #000, -20px 15px #000, 23px 15px #000
}

.Icon--plus, .Icon--plusMedium, .Icon--plusSmall {
    height: 18px;
    width: 18px;
    margin: 0 3px 2px 0
}

.Icon--plus:after, .Icon--plus:before, .Icon--plusMedium:after, .Icon--plusMedium:before, .Icon--plusSmall:after, .Icon--plusSmall:before {
    background: #000;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 27px
}

.Icon--plus:before, .Icon--plusMedium:before, .Icon--plusSmall:before {
    top: 8px;
    left: -3px
}

.Icon--plus:after, .Icon--plusMedium:after, .Icon--plusSmall:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 5px;
    left: -3px
}

.Icon--plusMedium {
    margin: 0
}

.Icon--plusMedium:after, .Icon--plusMedium:before {
    width: 18px
}

.Icon--plusSmall {
    margin: 0
}

.Icon--plusSmall:after, .Icon--plusSmall:before {
    width: 9px
}

.Icon--plusSmall:after, .Icon--plusSmall:before {
    left: 4px
}

.Icon--minus, .Icon--minusMedium, .Icon--minusSmall {
    border-radius: 8px;
    width: 20px;
    height: 20px;
    position: relative;
    top: 0;
    left: 0
}

.Icon--minus:after, .Icon--minusMedium:after, .Icon--minusSmall:after {
    background-color: #000;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    position: absolute;
    top: 9px;
    left: 4px;
    content: ""
}

.Icon--minusMedium:after {
    width: 18px
}

.Icon--minusSmall:after {
    width: 9px
}

.Icon--calendar {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-calendar.6b347d226e304161f81c621275ee3452.png);
    background-position: 50%;
    position: relative
}

.Icon--calendar:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--cat {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-cat.efb1efd3c9d9f24bd42068b2e05cc6c8.png);
    background-position: 50%;
    position: relative
}

.Icon--cat:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--chart {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-chart.e7144483f5e7199d6c6bf7d3bb7c8582.png);
    background-position: 50%;
    position: relative
}

.Icon--chart:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--people {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-people.73cffca0387c43d605909ff4167dbe1f.png);
    background-position: 50%;
    position: relative
}

.Icon--people:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--scope {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-scope.abdf7c15c3ef7fd248cb85bc199168c0.png);
    background-position: 50%;
    position: relative
}

.Icon--scope:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--trophy {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-trophy.ae9d67967228329200982732184af7f0.png);
    background-position: 50%;
    position: relative
}

.Icon--trophy:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--photo {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-photo.2a688f9616075622d873dc7cee1ac30c.png);
    background-position: 50%;
    position: relative
}

.Icon--photo:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--prev {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-prev.3fded894f1bf069dc622086fe17dc2a7.png);
    background-position: 50%;
    position: relative
}

.Icon--prev:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--next {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-next.0ad78b7f16480a8fd531a0e4aa10fbbb.png);
    background-position: 50%;
    position: relative
}

.Icon--next:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Photoswipe--ocho .Photoswipe-next .Icon--next, .Photoswipe--ocho .Photoswipe-next .Icon--prev, .Photoswipe--ocho .Photoswipe-prev .Icon--next, .Photoswipe--ocho .Photoswipe-prev .Icon--prev {
    width: 65px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-next-ocho.c36e54d5d6ced61f7f484817a18208d2.png);
    background-position: 50%;
    position: relative
}

.Photoswipe--ocho .Photoswipe-next .Icon--next:before, .Photoswipe--ocho .Photoswipe-next .Icon--prev:before, .Photoswipe--ocho .Photoswipe-prev .Icon--next:before, .Photoswipe--ocho .Photoswipe-prev .Icon--prev:before {
    content: "";
    display: block;
    padding-top: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-next-ocho.c36e54d5d6ced61f7f484817a18208d2.png);
    visibility: hidden
}

.Photoswipe--ocho .Photoswipe-next .Icon--prev, .Photoswipe--ocho .Photoswipe-prev .Icon--prev {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

html:not(.touch) .Photoswipe--ocho .Photoswipe-next:hover .Icon--next, html:not(.touch) .Photoswipe--ocho .Photoswipe-next:hover .Icon--prev, html:not(.touch) .Photoswipe--ocho .Photoswipe-prev:hover .Icon--next, html:not(.touch) .Photoswipe--ocho .Photoswipe-prev:hover .Icon--prev {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-next-hover-ocho.c3d18c8faff6a60691f3c24e3db8fc37.png);
    background-position: 50%;
    position: relative
}

html:not(.touch) .Photoswipe--ocho .Photoswipe-next:hover .Icon--next:before, html:not(.touch) .Photoswipe--ocho .Photoswipe-next:hover .Icon--prev:before, html:not(.touch) .Photoswipe--ocho .Photoswipe-prev:hover .Icon--next:before, html:not(.touch) .Photoswipe--ocho .Photoswipe-prev:hover .Icon--prev:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--helmet {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-helmet.17be4eb3c8019befc47e1c6a0d62f69b.png);
    background-position: 50%;
    position: relative
}

.Icon--helmet:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--levelLow {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-level-low.0a9ab26892c87eb6a498a310aa477432.png);
    background-position: 50%;
    position: relative
}

.Icon--levelLow:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--levelMedium {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-level-medium.da51f6c01ef130a8f4bdb68d437bbb1d.png);
    background-position: 50%;
    position: relative
}

.Icon--levelMedium:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--levelHigh {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-level-high.aa4aae4a63720ddf9aa139d9d46fa806.png);
    background-position: 50%;
    position: relative
}

.Icon--levelHigh:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--large.Icon--calendar, .Icon--large.Icon--cat {
    width: 96px
}

.Icon--huge.Icon--cat {
    width: 192px
}

.Icon--large.Icon--chart, .Icon--large.Icon--helmet, .Icon--large.Icon--levelHigh, .Icon--large.Icon--levelLow, .Icon--large.Icon--levelMedium, .Icon--large.Icon--people, .Icon--large.Icon--photo, .Icon--large.Icon--scope, .Icon--large.Icon--trophy {
    width: 96px
}

.Icon--floralLeft, .Icon--floralRight {
    margin-bottom: -18px;
    width: 28px;
    top: -3px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-floral.d2bd4f0dcb40c2e6093cba18e1b524bb.png);
    background-position: 50%;
    position: relative;
    background-size: auto 100%
}

.Icon--floralLeft:before, .Icon--floralRight:before {
    padding-top: 100%;
    content: "";
    display: block;
    padding-top: 200%
}

.Icon--floralLeft {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.Icon--searchGold {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-search-gold.39a918438bf176aa9e86d746beb9c97e.png);
    background-position: 50%;
    position: relative;
    width: 24px
}

.Icon--searchGold:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--wow-ocho {
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-wow-ocho.f10d12c74dac879367bf2ab77050ec5e.png);
    background-position: 50%;
    position: relative;
    width: 39px;
    height: 39px;
    margin: -5px -10px -15px 0
}

.Icon--wow-ocho:before {
    content: "";
    display: block;
    padding-top: 100%
}

html:not(.touch) .Link:hover .Icon--wow-ocho {
    -webkit-filter: brightness(2);
    filter: brightness(2)
}

.Icon--wallpaper-4K-ocho, .Icon--wallpaper-MOBILE-ocho, .Icon--wallpaper-STANDARD-ocho, .Icon--wallpaper-TABLET-ocho, .Icon--wallpaper-WIDE-ocho {
    background: url(../components/icon/assets_subdomain/icon-wallpaper-ocho.e6203db3df66eec4f07729bcddfda577.png) no-repeat 0 0;
    width: 64px;
    height: 64px;
    background-size: auto 128px
}

html:not(.touch) .Link:hover .Icon--wallpaper-4K-ocho, html:not(.touch) .Link:hover .Icon--wallpaper-MOBILE-ocho, html:not(.touch) .Link:hover .Icon--wallpaper-STANDARD-ocho, html:not(.touch) .Link:hover .Icon--wallpaper-TABLET-ocho, html:not(.touch) .Link:hover .Icon--wallpaper-WIDE-ocho {
    background-position-y: -63px
}

.Icon--wallpaper-MOBILE-ocho {
    background-position-x: 0
}

.Icon--wallpaper-TABLET-ocho {
    background-position-x: -64px
}

.Icon--wallpaper-STANDARD-ocho {
    background-position-x: -128px
}

.Icon--wallpaper-WIDE-ocho {
    background-position-x: -192px
}

.Icon--wallpaper-4K-ocho {
    background-position-x: -256px
}

.Icon-svg {
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 64px;
    height: 64px
}

.Icon-svg:not(.Icon--color) {
    fill: currentColor
}

.Icon--tiny .Icon-svg {
    width: 12px;
    height: 12px
}

.Icon--small .Icon-svg {
    width: 18px;
    height: 18px
}

.Icon--medium .Icon-svg {
    width: 32px;
    height: 32px
}

.Icon--large .Icon-svg {
    width: 48px;
    height: 48px
}

.Icon--huge .Icon-svg {
    width: 96px;
    height: 96px
}

.Icon--full .Icon, .Icon--full .Icon-svg {
    width: 100%;
    height: auto
}

.Icon--roleDamage {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-game-role-damage-dealer.8a1efbae28142180b94af651bed7e1a5.png);
    background-position: 50%;
    position: relative
}

.Icon--roleDamage:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--roleTank {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-game-role-tank.08fa1eea5a29d846256225be08918123.png);
    background-position: 50%;
    position: relative
}

.Icon--roleTank:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Icon--roleHealer {
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-game-role-healer.6986b936d3743da01d74541f86209f27.png);
    background-position: 50%;
    position: relative
}

.Icon--roleHealer:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Image {
    background-color: #333;
    color: #fff;
    position: relative;
    width: 100%;
    overflow: hidden
}

.Image-image {
    background-position: 50%;
    background-size: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.Image-center, .Image-image {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%
}

.Image-center {
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    text-align: center
}

.Image-placeholder {
    display: inline-block;
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-photo.2a688f9616075622d873dc7cee1ac30c.png);
    background-position: 50%;
    position: relative;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    opacity: .8;
    width: 120px;
    margin: -20px
}

.Image-placeholder:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Image-caption {
    color: #b1997f;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1.08rem;
    line-height: 1.5;
    cursor: default;
    font-style: italic;
    padding: 0 10px
}

@media (min-width: 720px) {
    .Image-caption {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Image-caption {
        font-size: 1.44rem
    }
}

.Image--transparent {
    background-color: transparent
}

.Image--transparent .Image-center {
    -webkit-filter: brightness(.5);
    filter: brightness(.5)
}

.Image--transparent .Image-caption, .Image--transparent .Image-placeholder {
    opacity: .9
}

.Image--pullLeft {
    clear: both;
    padding: 2em .5em;
    position: relative
}

@media (min-width: 980px) {
    .Image--pullLeft {
        float: left;
        left: -11.111em;
        margin-right: -8.33em
    }
}

.Image--pullRight {
    clear: both;
    padding: 2em .5em;
    position: relative
}

@media (min-width: 980px) {
    .Image--pullRight {
        float: right;
        left: 11.111em;
        margin-left: -8.333em
    }
}

.Image--clear {
    clear: both;
    padding: 2em .5em;
    position: relative
}

@media (min-width: 320px) {
    .Image--clear {
        padding-left: 3em;
        padding-right: 3em
    }
}

@media (min-width: 720px) {
    .Image--clear {
        padding-left: 4em;
        padding-right: 4em
    }
}

@media (min-width: 1280px) {
    .Image--clear {
        padding-left: 6em;
        padding-right: 6em
    }
}

.Image--shadow {
    -webkit-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000
}

.Image--borderBrown {
    border: 1px solid #504137
}

.InfoTile {
    position: relative
}

.InfoTile-content {
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px
}

.InfoTile-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

html:not(.touch) .InfoTile:hover .InfoTile-bg {
    opacity: 1
}

.InfoTile-hitbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.InfoTile-info {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    padding: 20px;
    pointer-events: none
}

.InfoTile-title {
    font-size: 1.866rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .InfoTile-title {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .InfoTile-title {
        font-size: 2.488rem
    }
}

.InfoTile-title.zh-cn, .zh-cn .InfoTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.InfoTile-title.ko-kr, .ko-kr .InfoTile-title {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.InfoTile-title.ru-ru, .ru-ru .InfoTile-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.InfoTile-title.zh-tw, .zh-tw .InfoTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 980px) {
    .InfoTile-title {
        font-size: 2.2395rem;
        line-height: 1.5;
        font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
        color: #fff;
        text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
        font-weight: 700
    }

    .InfoTile-title.zh-cn, .zh-cn .InfoTile-title {
        font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
    }

    .InfoTile-title.ko-kr, .ko-kr .InfoTile-title {
        font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
    }

    .InfoTile-title.ru-ru, .ru-ru .InfoTile-title {
        font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
    }

    .InfoTile-title.zh-tw, .zh-tw .InfoTile-title {
        font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
    }
}

@media (min-width: 980px) and (min-width: 720px) {
    .InfoTile-title {
        font-size: 2.5381rem
    }
}

@media (min-width: 980px) and (min-width: 1280px) {
    .InfoTile-title {
        font-size: 2.986rem
    }
}

@media (min-width: 1280px) {
    .InfoTile-title {
        font-size: 3.2249999999999996rem;
        line-height: 1.5;
        font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
        color: #fff;
        text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
        font-weight: 700
    }

    .InfoTile-title.zh-cn, .zh-cn .InfoTile-title {
        font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
    }

    .InfoTile-title.ko-kr, .ko-kr .InfoTile-title {
        font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
    }

    .InfoTile-title.ru-ru, .ru-ru .InfoTile-title {
        font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
    }

    .InfoTile-title.zh-tw, .zh-tw .InfoTile-title {
        font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
    }
}

@media (min-width: 1280px) and (min-width: 720px) {
    .InfoTile-title {
        font-size: 3.655rem
    }
}

@media (min-width: 1280px) and (min-width: 1280px) {
    .InfoTile-title {
        font-size: 4.3rem
    }
}

.InfoTile-link {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .InfoTile-link {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .InfoTile-link {
        font-size: 1.728rem
    }
}

.InfoTile-link.zh-cn, .zh-cn .InfoTile-link {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.InfoTile-link.ko-kr, .ko-kr .InfoTile-link {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.InfoTile-link.ru-ru, .ru-ru .InfoTile-link {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.InfoTile-link.zh-tw, .zh-tw .InfoTile-link {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.InfoTile-desc {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin-left: 10%;
    margin-right: 10%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .8s;
    transition: max-height .8s
}

@media (min-width: 720px) {
    .InfoTile-desc {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .InfoTile-desc {
        font-size: 1.44rem
    }
}

.InfoTile-desc.zh-cn, .zh-cn .InfoTile-desc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.InfoTile-desc.ko-kr, .ko-kr .InfoTile-desc {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.InfoTile-desc.zh-tw, .zh-tw .InfoTile-desc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .InfoTile:hover .InfoTile-desc {
    max-height: 800px
}

.InfoTile-desc p {
    margin: 0
}

.InfoTile-desc p + p {
    margin-top: 1em
}

.InfoTile--wide > .InfoTile-container {
    position: relative
}

.InfoTile--wide > .InfoTile-container:before {
    content: "";
    display: block;
    padding-top: 50%
}

.InfoTile--tall > .InfoTile-container {
    position: relative
}

.InfoTile--tall > .InfoTile-container:before {
    content: "";
    display: block;
    padding-top: 200%
}

.InfoTile--square > .InfoTile-container {
    position: relative
}

.InfoTile--square > .InfoTile-container:before {
    content: "";
    display: block;
    padding-top: 100%
}

.InfoTile--photo > .InfoTile-container {
    position: relative
}

.InfoTile--photo > .InfoTile-container:before {
    content: "";
    display: block;
    padding-top: 75%
}

.InfoTile--gutter > .InfoTile-container > .Tile-area {
    margin: 10px
}

.InfoTile--fixed > .InfoTile-container {
    width: 250px;
    width: 75vw
}

.ItemSocket {
    position: relative;
    display: inline-block;
    height: 15px;
    width: 15px
}

.ItemSocket-frame {
    background: url(../../wow-render-us/icons/tooltips/sockets.png) -45px 0 no-repeat
}

.ItemSocket-frame, .ItemSocket-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.ItemSocket-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

.ItemSocket--block {
    display: block
}

.ItemSocket--inline {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.ItemSocket--PUNCHCARDRED > .ItemSocket-frame, .ItemSocket--RED > .ItemSocket-frame {
    background-position: 0 0
}

.ItemSocket--PUNCHCARDYELLOW > .ItemSocket-frame, .ItemSocket--YELLOW > .ItemSocket-frame {
    background-position: -15px 0
}

.ItemSocket--BLUE > .ItemSocket-frame, .ItemSocket--PUNCHCARDBLUE > .ItemSocket-frame {
    background-position: -30px 0
}

.ItemSocket--PRISMATIC > .ItemSocket-frame {
    background-position: -60px 0
}

.LinkBox {
    text-align: center;
    display: block;
    position: relative;
    padding: 30px;
    border: 1px solid #444;
    background: #000 url(../components/box/assets_subdomain/box-leather-grey-dark.0477a49460ddf3f97294112a1b372a06.jpg) 50%;
    color: #ebdec2
}

.LinkBox, .LinkBox:before {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.LinkBox:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0
}

.LinkBox-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.LinkBox-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.LinkBox-icon {
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    max-width: 110px
}

.LinkBox-icon .Icon-svg {
    width: 96px;
    height: 96px
}

@media (min-width: 720px) {
    .LinkBox-icon {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .LinkBox-icon {
        font-size: 1.728rem
    }
}

.LinkBox-icon.zh-cn, .zh-cn .LinkBox-icon {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .LinkBox-icon, .LinkBox-icon.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.LinkBox-icon.ru-ru, .ru-ru .LinkBox-icon {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.LinkBox-icon.zh-tw, .zh-tw .LinkBox-icon {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.LinkBox-description, .LinkBox-title {
    width: 100%
}

.LinkBox-title {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.296rem;
    line-height: 1.5;
    color: #f8b700
}

.LinkBox-title.zh-cn, .zh-cn .LinkBox-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .LinkBox-title, .LinkBox-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.LinkBox-title.ru-ru, .ru-ru .LinkBox-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.LinkBox-title.zh-tw, .zh-tw .LinkBox-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .LinkBox-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .LinkBox-title {
        font-size: 1.728rem
    }
}

.LinkBox-titleIcon {
    top: -2px;
    margin-left: 5px
}

.LinkBox:focus, html:not(.touch) .LinkBox:hover {
    border-color: #f8b700
}

.LinkBox:focus:before, html:not(.touch) .LinkBox:hover:before {
    opacity: .04
}

.LinkBox:focus .LinkBox-icon, html:not(.touch) .LinkBox:hover .LinkBox-icon {
    -webkit-transform: scale(1.075);
    transform: scale(1.075)
}

.LinkBox:focus .LinkBox-title, html:not(.touch) .LinkBox:hover .LinkBox-title {
    color: #fff
}

.LinkBox--brown {
    border: 1px solid #504137;
    background: #211510;
    color: #ebdec2
}

.LinkBox--containSmall .LinkBox-desc, .LinkBox--containSmall .LinkBox-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px
}

.LinkBox---containMedium .LinkBox-desc, .LinkBox---containMedium .LinkBox-title, .LinkBox--containLarge .LinkBox-desc, .LinkBox--containLarge .LinkBox-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 540px
}

.LinkBox--overlayDark {
    background: rgba(0, 0, 0, .75);
    border: 1px solid #504137;
    margin: 2px;
    -webkit-transition: background .2s, -webkit-box-shadow .2s;
    transition: background .2s, -webkit-box-shadow .2s;
    transition: background .2s, box-shadow .2s;
    transition: background .2s, box-shadow .2s, -webkit-box-shadow .2s
}

.LinkBox--overlayDark .LinkBox-title {
    color: #fff
}

.LinkBox--overlayDark:focus, html:not(.touch) .LinkBox--overlayDark:hover {
    background: #211510;
    -webkit-box-shadow: inset 0 -20px 0 -10px #f8b700;
    box-shadow: inset 0 -20px 0 -10px #f8b700;
    border-color: #f8b700
}

.LinkBox--overlayDark:focus .LinkBox-icon, html:not(.touch) .LinkBox--overlayDark:hover .LinkBox-icon {
    color: #f8b700
}

.LinkBox--overlayDark:focus .LinkBox-title, html:not(.touch) .LinkBox--overlayDark:hover .LinkBox-title {
    color: #fff
}

.LinkBox--overlayDark:focus .LinkBox-desc, html:not(.touch) .LinkBox--overlayDark:hover .LinkBox-desc {
    color: #ebdec2
}

.List {
    display: table;
    position: relative
}

.List > .List-item {
    vertical-align: middle
}

.List-item {
    display: table-cell;
    height: 100%
}

.List--gutter {
    padding: 20px
}

.List--gutterSmall {
    padding: 10px
}

.List--guttersTiny {
    margin: -3.33333333px
}

.List--guttersTiny > .List-item {
    padding: 3.33333333px
}

.List--guttersSmall {
    margin: -5px
}

.List--guttersSmall > .List-item {
    padding: 5px
}

.List--gutters {
    margin: -10px
}

.List--gutters > .List-item {
    padding: 10px
}

.List--guttersMedium {
    margin: -20px
}

.List--guttersMedium > .List-item {
    padding: 20px !important
}

.List--gutter.List--gutters {
    padding: 10px;
    margin: 0
}

.List--bulleted > .List-item, .List--greenChecks > .List-item, .List--numbered > .List-item, .List--vertical > .List-item {
    display: block;
    height: auto
}

.List--full {
    width: 100%
}

.List--fullFixed {
    table-layout: fixed
}

.List--left {
    margin-right: auto;
    text-align: left
}

.List--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.List--right {
    margin-left: auto;
    text-align: right
}

.List--right.List--greenChecks > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.List--right.List--greenChecks > .List-item:before {
    display: none
}

.List--right.List--greenChecks > .List-item:after {
    background: url(../components/list/assets_subdomain/list-greencheck.cc6d210abb78a47b25a380b818acf95c.png) no-repeat 50% 50%;
    background-size: auto 16px;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 18px
}

.List--right.List--bulleted > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.List--right.List--bulleted > .List-item:before {
    display: none
}

.List--right.List--bulleted > .List-item:after {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

.List--top > .List-item {
    vertical-align: top
}

.List--middle > .List-item {
    vertical-align: middle
}

.List--bottom > .List-item {
    vertical-align: bottom
}

.List--separator > .List-item {
    border: solid hsla(0, 0%, 66.7%, .4);
    border-width: 0 0 0 1px
}

.List--separator > .List-item:first-child {
    border-width: 0
}

.List--separatorAll > .List-item {
    border: solid hsla(0, 0%, 66.7%, .4);
    border-width: 0 0 0 1px
}

.List--separatorAll > .List-item:last-child {
    border-width: 0 1px
}

.List-item--separator {
    border: solid hsla(0, 0%, 66.7%, .4);
    border-width: 0 1px 0 0
}

.List--separatorBrownMedium > .List-item, .List-item--separatorBrownMedium {
    border-color: #352011
}

.List--separatorBrownLight > .List-item, .List-item--separatorBrownLight {
    border-color: #504137
}

.List--separatorGoldLight > .List-item, .List-item--separatorGoldLight {
    border-color: #f8b700
}

.List-item--separatorWhite {
    border-color: #fff
}

.List-item--separatorGray {
    border-color: #cacaca
}

.List--separatorWhite > .List-item {
    border-color: #fff
}

.List--vertical.List--separator > .List-item {
    border-width: 1px 0 0
}

.List--vertical.List--separator > .List-item:first-child {
    border-width: 0
}

.List--vertical.List--separatorAll > .List-item {
    border-width: 1px 0 0
}

.List--vertical.List--separatorAll > .List-item:last-child {
    border-width: 1px 0
}

.List--bulleted, .List--greenChecks, .List--numbered {
    margin-left: 0;
    padding-left: 0
}

.List--numbered > .List-item {
    counter-increment: counter-level0;
    padding-left: 2em;
    position: relative
}

.List--numbered > .List-item:before {
    content: counter(counter-level0) ".";
    display: inline-block;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0
}

.List--numbered .List--numbered > .List-item {
    counter-increment: counter-level1;
    margin-left: 2em
}

.List--numbered .List--numbered > .List-item:before {
    content: counter(counter-level1, lower-latin) "."
}

.List--numbered .List--numbered .List--numbered > .List-item {
    counter-increment: counter-level2
}

.List--numbered .List--numbered .List--numbered > .List-item:before {
    content: counter(counter-level2, lower-roman) "."
}

.List--bulleted > .List-item {
    padding-left: 2em;
    position: relative
}

.List--bulleted > .List-item:before {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

.List--bulleted .List--bulleted > .List-item {
    margin-left: 2em
}

.List--bulleted .List--bulleted > .List-item:before {
    background-position: -20px 50%
}

.List--bulleted .List--bulleted .List--bulleted > .List-item:before {
    background-position: -40px 50%
}

.List--bulletedOnDark > .List-item:before {
    background-position: -60px 50%
}

.List--bulletedOnDark .List--bulletedOnDark > .List-item:before {
    background-position: -80px 50%
}

.List--bulletedOnDark .List--bulletedOnDark .List--bulletedOnDark > .List-item:before {
    background-position: -100px 50%
}

.List--greenChecks > .List-item {
    padding: 4px 0 4px 2em;
    position: relative
}

.List--greenChecks > .List-item:before {
    background: url(../components/list/assets_subdomain/list-greencheck.cc6d210abb78a47b25a380b818acf95c.png) no-repeat 50% 50%;
    background-size: auto 16px;
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 25%;
    width: 18px
}

.List--greenChecks .List--greenChecks > .List-item {
    margin-left: 2em
}

.List-item.List-item--greenCheck {
    padding: 4px 0 0 30px;
    position: relative
}

.List-item.List-item--greenCheck:before {
    background: url(../components/list/assets_subdomain/list-greencheck.cc6d210abb78a47b25a380b818acf95c.png) no-repeat 50% 50%;
    background-size: auto 16px;
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 25%;
    width: 18px
}

.List-item.List-item--greenUnchecked {
    padding: 4px 0 0 30px;
    position: relative
}

.List-item.List-item--greenUnchecked:before {
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 4px;
    width: 18px
}

.List.List--inline {
    display: block
}

.List--inline > .List-item {
    display: inline-block;
    width: 100%
}

.List--middledMarks > .List-item:before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ListTable {
    border: 1px solid #ebdec2
}

.ListTable-item {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 10px 20px;
    position: relative
}

.ListTable-item:nth-child(2n) {
    background: #f3eee2
}

.ListTable-item--offline {
    color: #cacaca
}

.ListTable-key {
    float: left;
    font-weight: 700;
    max-width: 150px;
    padding-right: 10px;
    width: 50%
}

.ListTable-key--status {
    display: none
}

.ListTable-value--status {
    position: absolute;
    right: 10px;
    top: 9px
}

.Logo {
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    max-width: 100%;
    overflow: hidden
}

.Logo, .Logo--wow {
    position: relative
}

.Logo--wow {
    background-image: url(../components/logo/assets_subdomain/logo-wow.63b808d4a38e2d5399612d6a710215f4.png);
    width: 330px
}

.Logo--wow:before {
    content: "";
    display: block;
    padding-top: 39.24242424%
}

html:not(.touch) .SiteNav-logo:hover .Logo--wow {
    -webkit-filter: brightness(122%);
    filter: brightness(122%)
}

.Logo--wow.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow.63b808d4a38e2d5399612d6a710215f4.png);
    position: relative;
    width: 479.65116279px
}

.Logo--wow.Logo--large:before {
    content: "";
    display: block;
    padding-top: 39.24242424%
}

.zh-tw .Logo--wow {
    background-image: url(../components/logo/assets_subdomain/logo-wow-tw.226beb0af664d18525d4cd3ac226f765.png);
    position: relative;
    width: 324px
}

.zh-tw .Logo--wow:before {
    content: "";
    display: block;
    padding-top: 40.27777778%
}

.zh-tw .Logo--wow.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow-tw.226beb0af664d18525d4cd3ac226f765.png);
    position: relative;
    width: 470.93023256px
}

.zh-tw .Logo--wow.Logo--large:before {
    content: "";
    display: block;
    padding-top: 40.27777778%
}

.zh-cn .Logo--wow {
    background-image: url(../components/logo/assets_subdomain/logo-wow-cn.490d3a4830ebfef92a1ecb1c327c041e.png);
    position: relative;
    width: 324px
}

.zh-cn .Logo--wow:before {
    content: "";
    display: block;
    padding-top: 40.27777778%
}

.zh-cn .Logo--wow.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow-cn.490d3a4830ebfef92a1ecb1c327c041e.png);
    position: relative;
    width: 470.93023256px
}

.zh-cn .Logo--wow.Logo--large:before {
    content: "";
    display: block;
    padding-top: 40.27777778%
}

.Logo--wow.Logo--wowAnniversary {
    background-image: url(../components/logo/assets_subdomain/logo-wow-anniversary.34ca86bc85241b99ef245e0782caa70b.png);
    position: relative;
    width: 330px
}

.Logo--wow.Logo--wowAnniversary:before {
    content: "";
    display: block;
    padding-top: 50.90909091%
}

.Logo--wow.Logo--wowAnniversary.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow-anniversary.34ca86bc85241b99ef245e0782caa70b.png);
    position: relative;
    width: 479.65116279px
}

.Logo--wow.Logo--wowAnniversary.Logo--large:before {
    content: "";
    display: block;
    padding-top: 50.90909091%
}

.zh-tw .Logo--wow.Logo--wowAnniversary {
    background-image: url(../components/logo/assets_subdomain/logo-wow-anniversary-tw.11dfa9368a7046e8d60bfd170b643cee.png);
    position: relative;
    width: 330px
}

.zh-tw .Logo--wow.Logo--wowAnniversary:before {
    content: "";
    display: block;
    padding-top: 50.90909091%
}

.zh-cn .Logo--wow.Logo--wowAnniversary {
    background-image: url(../components/logo/assets_subdomain/logo-wow-anniversary-cn.24001c6a32fef5bf6b77541f2ea7aa7b.png);
    position: relative;
    width: 330px
}

.zh-cn .Logo--wow.Logo--wowAnniversary:before {
    content: "";
    display: block;
    padding-top: 50.90909091%
}

.Logo--wow.Logo--wowSitenav {
    background-image: url(../components/logo/assets_subdomain/logo-wow-sitenav.596840db77b4d485a44d65e897e3de57.png);
    position: relative;
    width: 293px
}

.Logo--wow.Logo--wowSitenav:before {
    content: "";
    display: block;
    padding-top: 39.24914676%
}

.zh-tw .Logo--wow.Logo--wowSitenav {
    background-image: url(../components/logo/assets_subdomain/logo-wow-tw-sitenav.fe2825d394f7a271d72a809790ce43c2.png);
    position: relative;
    width: 293px
}

.zh-tw .Logo--wow.Logo--wowSitenav:before {
    content: "";
    display: block;
    padding-top: 39.24914676%
}

.zh-cn .Logo--wow.Logo--wowSitenav {
    background-image: url(../components/logo/assets_subdomain/logo-wow-cn-sitenav.14150bab24811438ac4d82c5e5506d24.png);
    position: relative;
    width: 293px
}

.zh-cn .Logo--wow.Logo--wowSitenav:before {
    content: "";
    display: block;
    padding-top: 39.24914676%
}

.Logo--wowWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-wowwireframe.b6abbf57753b884fbcfbc96e7f3984a9.png);
    position: relative;
    width: 324px
}

.Logo--wowWireframe:before {
    content: "";
    display: block;
    padding-top: 40.27777778%
}

.Logo--wowIcon {
    background-image: url(../components/logo/assets_subdomain/logo-wowicon.01e2c443798558c38d8e3b143a6f0d03.png);
    position: relative;
    width: 50px
}

.Logo--wowIcon:before {
    content: "";
    display: block;
    padding-top: 100%
}

html:not(.touch) .SiteNav-logo:hover .Logo--wowIcon {
    -webkit-filter: brightness(122%);
    filter: brightness(122%)
}

.Logo--anniversarySmall {
    background-image: url(../components/logo/assets_subdomain/logo-wow-anniversary-small.2c0e47b94115ae855d9e6fed0b8bad02.png);
    position: relative;
    width: 80px
}

.Logo--anniversarySmall:before {
    content: "";
    display: block;
    padding-top: 52.5%
}

html:not(.touch) .SiteNav-logo:hover .Logo--anniversarySmall {
    -webkit-filter: brightness(200%) grayscale();
    filter: brightness(200%) grayscale()
}

.Logo--wowMenu {
    background-image: url(../components/logo/assets_subdomain/logo-wowmenu.17c65a62fd89c2c9098225210dbeafdb.png);
    position: relative;
    width: 32px
}

.Logo--wowMenu:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--wowMenuWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-wowmenuwireframe.6daf4d336b92b6e0b21ecc8e8b63c72f.png);
    position: relative;
    width: 32px
}

.Logo--wowMenuWireframe:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--blizzard {
    background-image: url(../components/logo/assets_subdomain/logo-blizzard.f8fb3f43f2599f3161e0e5815c4324c1.png);
    position: relative;
    width: 200px
}

.Logo--blizzard:before {
    content: "";
    display: block;
    padding-top: 58%
}

.Logo--blizzardGold {
    background-image: url(../components/logo/assets_subdomain/logo-blizzardgold.fa279ba5b21817e784fc1c8c6c330e1d.png);
    position: relative;
    width: 101px
}

.Logo--blizzardGold:before {
    content: "";
    display: block;
    padding-top: 51.48514851%
}

.Logo--blizzardWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-blizzardwireframe.db539a6e96c6fb856fef3a3a40ea69cf.png);
    position: relative;
    width: 200px
}

.Logo--blizzardWireframe:before {
    content: "";
    display: block;
    padding-top: 58%
}

.Logo--bnet {
    background-image: url(../components/logo/assets_subdomain/logo-bnet.614ce20af5b0b88c742f895eb30a77a2.png);
    position: relative;
    width: 32px
}

.Logo--bnet:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--bnetWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-bnetwireframe.8fe6195398fb4972ee10c65162814cb7.png);
    position: relative;
    width: 32px
}

.Logo--bnetWireframe:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--esrb {
    background-image: url(../components/logo/assets_subdomain/logo-esrb.ef29cc47458d55bf8e757675a42a64a2.png);
    position: relative;
    width: 65px
}

.Logo--esrb:before {
    content: "";
    display: block;
    padding-top: 149.23076923%
}

.Logo--wowArena {
    background-image: url(../components/logo/assets_subdomain/logo-wow-arena.445785aa7cf24cc0021ed23f0f1cc9c8.png);
    position: relative;
    width: 200px
}

.Logo--wowArena:before {
    content: "";
    display: block;
    padding-top: 92.5%
}

.Logo--wowArena.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow-arena.445785aa7cf24cc0021ed23f0f1cc9c8.png);
    position: relative;
    width: 400px
}

.Logo--wowArena.Logo--large:before {
    content: "";
    display: block;
    padding-top: 92.5%
}

.Logo--wowMdi {
    background-image: url(../components/logo/assets_subdomain/logo-wow-mdi.cb73e9c1f330be16a8aeff417b466054.png);
    position: relative;
    width: 500px
}

.Logo--wowMdi:before {
    content: "";
    display: block;
    padding-top: 73.9%
}

.Logo--wowMdi.Logo--large {
    background-image: url(../components/logo/assets_subdomain/logo-wow-mdi.cb73e9c1f330be16a8aeff417b466054.png);
    position: relative;
    width: 500px
}

.Logo--wowMdi.Logo--large:before {
    content: "";
    display: block;
    padding-top: 73.9%
}

.Logo--patch-7-3 {
    position: relative;
    width: 803px
}

.Logo--patch-7-3:before {
    content: "";
    display: block;
    padding-top: 62.39103362%
}

.Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3.6ffe2179ba3df36f91cc6b6ef2901024.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%;
    content: "";
    position: absolute;
    top: -9.98003992%;
    right: -12.45330012%;
    bottom: -15.96806387%;
    left: -12.45330012%
}

.de-de .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-de.cadfd22e7870e27811d774a1d7b1696f.png)
}

.es-es .Logo--patch-7-3:after, .es-mx .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-es.d5bce27f0b8c760c7c1a8ce847ff1d2e.png)
}

.fr-fr .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-fr.c1c5195bc7d15112dd866802472a1a4e.png)
}

.it-it .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-it.18bc67c63ce753354cfc322bdd4af0ce.png)
}

.ko-kr .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-ko.141e13984260f4d53d9a6566c0d84bfe.png)
}

.pt-br .Logo--patch-7-3:after, .pt-pt .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-pt.d5bce27f0b8c760c7c1a8ce847ff1d2e.png)
}

.ru-ru .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-ru.f870f85b51663337397317597b1090c6.png)
}

.zh-cn .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-cn.d567ee798cf77e8000e27ff63a4711a9.png)
}

.zh-tw .Logo--patch-7-3:after {
    background-image: url(../components/logo/assets_subdomain/logo-patch-7.3-tw.631c395273d431a8cfc3a65bb877b0af.png)
}

.Logo--alliance {
    background-image: url(../components/logo/assets_subdomain/logo-alliance.bb36e70f5f690a5fc510ed03e80aa259.png);
    position: relative;
    width: 232.5px
}

.Logo--alliance:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--alliance.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-alliance.bb36e70f5f690a5fc510ed03e80aa259.png);
    position: relative;
    width: 116.25px
}

.Logo--alliance.Logo--small:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--alliance.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-alliance.bb36e70f5f690a5fc510ed03e80aa259.png);
    position: relative;
    width: 77.5px
}

.Logo--alliance.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--alliance.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-alliance.bb36e70f5f690a5fc510ed03e80aa259.png);
    position: relative;
    width: 58.125px
}

.Logo--alliance.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--allianceShadow {
    background-image: url(../components/logo/assets_subdomain/logo-alliance-drop-shadow.5b2e493b7187e3f003a31ba2c3ece5f7.png);
    position: relative;
    width: 279px
}

.Logo--allianceShadow:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--allianceShadow.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-alliance-drop-shadow.5b2e493b7187e3f003a31ba2c3ece5f7.png);
    position: relative;
    width: 139.5px
}

.Logo--allianceShadow.Logo--small:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--allianceShadow.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-alliance-drop-shadow.5b2e493b7187e3f003a31ba2c3ece5f7.png);
    position: relative;
    width: 93px
}

.Logo--allianceShadow.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--allianceShadow.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-alliance-drop-shadow.5b2e493b7187e3f003a31ba2c3ece5f7.png);
    position: relative;
    width: 69.75px
}

.Logo--allianceShadow.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--allianceWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-alliancewireframe.e928aa9eb31303d039b1d3a09eee84b0.png);
    position: relative;
    width: 200px
}

.Logo--allianceWireframe:before {
    content: "";
    display: block;
    padding-top: 129.25%
}

.Logo--allianceWireframe.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-alliancewireframe.e928aa9eb31303d039b1d3a09eee84b0.png);
    position: relative;
    width: 100px
}

.Logo--allianceWireframe.Logo--small:before {
    content: "";
    display: block;
    padding-top: 129.25%
}

.Logo--allianceWireframe.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-alliancewireframe.e928aa9eb31303d039b1d3a09eee84b0.png);
    position: relative;
    width: 66.66666667px
}

.Logo--allianceWireframe.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 129.25%
}

.Logo--allianceWireframe.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-alliancewireframe.e928aa9eb31303d039b1d3a09eee84b0.png);
    position: relative;
    width: 50px
}

.Logo--allianceWireframe.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 129.25%
}

.Logo--allianceEmblem {
    background-image: url(../components/logo/assets_subdomain/logo-allianceemblem.cd827b18a7766edbf05f09d66bc10e22.png);
    position: relative;
    width: 64px
}

.Logo--allianceEmblem:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--allianceEmblem.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-allianceemblem.cd827b18a7766edbf05f09d66bc10e22.png);
    position: relative;
    width: 32px
}

.Logo--allianceEmblem.Logo--small:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--allianceEmblem.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-allianceemblem.cd827b18a7766edbf05f09d66bc10e22.png);
    position: relative;
    width: 21.33333333px
}

.Logo--allianceEmblem.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--allianceEmblem.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-allianceemblem.cd827b18a7766edbf05f09d66bc10e22.png);
    position: relative;
    width: 16px
}

.Logo--allianceEmblem.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--horde {
    background-image: url(../components/logo/assets_subdomain/logo-horde.2a80e0466e51d85c8cf60336e16fe8b8.png);
    position: relative;
    width: 232.5px
}

.Logo--horde:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--horde.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-horde.2a80e0466e51d85c8cf60336e16fe8b8.png);
    position: relative;
    width: 116.25px
}

.Logo--horde.Logo--small:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--horde.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-horde.2a80e0466e51d85c8cf60336e16fe8b8.png);
    position: relative;
    width: 77.5px
}

.Logo--horde.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--horde.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-horde.2a80e0466e51d85c8cf60336e16fe8b8.png);
    position: relative;
    width: 58.125px
}

.Logo--horde.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--hordeShadow {
    background-image: url(../components/logo/assets_subdomain/logo-horde-drop-shadow.0142949f4769996df3e2cfe24bcf5da4.png);
    position: relative;
    width: 279px
}

.Logo--hordeShadow:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--hordeShadow.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-horde-drop-shadow.0142949f4769996df3e2cfe24bcf5da4.png);
    position: relative;
    width: 139.5px
}

.Logo--hordeShadow.Logo--small:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--hordeShadow.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-horde-drop-shadow.0142949f4769996df3e2cfe24bcf5da4.png);
    position: relative;
    width: 93px
}

.Logo--hordeShadow.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--hordeShadow.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-horde-drop-shadow.0142949f4769996df3e2cfe24bcf5da4.png);
    position: relative;
    width: 69.75px
}

.Logo--hordeShadow.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 129.03225806%
}

.Logo--hordeWireframe {
    background-image: url(../components/logo/assets_subdomain/logo-hordewireframe.51bf1d2589b91aca431ac26323d3f003.png);
    position: relative;
    width: 200px
}

.Logo--hordeWireframe:before {
    content: "";
    display: block;
    padding-top: 122%
}

.Logo--hordeWireframe.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-hordewireframe.51bf1d2589b91aca431ac26323d3f003.png);
    position: relative;
    width: 100px
}

.Logo--hordeWireframe.Logo--small:before {
    content: "";
    display: block;
    padding-top: 122%
}

.Logo--hordeWireframe.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-hordewireframe.51bf1d2589b91aca431ac26323d3f003.png);
    position: relative;
    width: 66.66666667px
}

.Logo--hordeWireframe.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 122%
}

.Logo--hordeWireframe.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-hordewireframe.51bf1d2589b91aca431ac26323d3f003.png);
    position: relative;
    width: 50px
}

.Logo--hordeWireframe.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 122%
}

.Logo--hordeEmblem {
    background-image: url(../components/logo/assets_subdomain/logo-hordeemblem.e6d11863f6c65b2a875091c1ac01cb3f.png);
    position: relative;
    width: 64px
}

.Logo--hordeEmblem:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--hordeEmblem.Logo--small {
    background-image: url(../components/logo/assets_subdomain/logo-hordeemblem.e6d11863f6c65b2a875091c1ac01cb3f.png);
    position: relative;
    width: 32px
}

.Logo--hordeEmblem.Logo--small:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--hordeEmblem.Logo--smaller {
    background-image: url(../components/logo/assets_subdomain/logo-hordeemblem.e6d11863f6c65b2a875091c1ac01cb3f.png);
    position: relative;
    width: 21.33333333px
}

.Logo--hordeEmblem.Logo--smaller:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--hordeEmblem.Logo--tiny {
    background-image: url(../components/logo/assets_subdomain/logo-hordeemblem.e6d11863f6c65b2a875091c1ac01cb3f.png);
    position: relative;
    width: 16px
}

.Logo--hordeEmblem.Logo--tiny:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--twitter {
    background-image: url(../components/logo/assets_subdomain/logo-twitter.7695dbeab284a4f460d5a0344f3f81b2.png);
    position: relative;
    width: 36px
}

.Logo--twitter:before {
    content: "";
    display: block;
    padding-top: 80.55555556%
}

.Logo--facebook {
    background-image: url(../components/logo/assets_subdomain/logo-facebook.b3b9c263903bab66b9d4b5045d5cc4c1.png);
    position: relative;
    width: 33px
}

.Logo--facebook:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--youtube {
    background-image: url(../components/logo/assets_subdomain/logo-youtube.1354b23f18bcf22906aa4fbf02f8746d.png);
    position: relative;
    width: 66.5px
}

.Logo--youtube:before {
    content: "";
    display: block;
    padding-top: 41.35338346%
}

.Logo--reddit {
    background-image: url(../components/logo/assets_subdomain/logo-reddit.c50523060b2bcb8bc51ac3ff0969fd61.png);
    position: relative;
    width: 39px
}

.Logo--reddit:before {
    content: "";
    display: block;
    padding-top: 84.61538462%
}

.Logo--vkontakte {
    background-image: url(../components/logo/assets_subdomain/logo-vkontakte.31e5f42c167b523b0278fb246ec61e10.png);
    position: relative;
    width: 33px
}

.Logo--vkontakte:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--weibo {
    background-image: url(../components/logo/assets_subdomain/logo-weibo.fda85764c3a3fd1c8f8679255c10399b.png);
    position: relative;
    width: 38.5px
}

.Logo--weibo:before {
    content: "";
    display: block;
    padding-top: 80.51948052%
}

.Logo--tencentqq {
    background-image: url(../components/logo/assets_subdomain/logo-tencentqq.27f059674d134702e5d2b5af7778966a.png);
    position: relative;
    width: 29px
}

.Logo--tencentqq:before {
    content: "";
    display: block;
    padding-top: 113.79310345%
}

.Logo--wechatmobile {
    background-image: url(../components/logo/assets_subdomain/logo-wechatmobile.6ea796307a6926eb80f33242c57ecd52.png);
    position: relative;
    width: 33px
}

.Logo--wechatmobile:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Logo--youku {
    background-image: url(../components/logo/assets_subdomain/logo-youku.80fd06aacb195e8ca765bccf182c4d69.png);
    position: relative;
    width: 34px
}

.Logo--youku:before {
    content: "";
    display: block;
    padding-top: 97.05882353%
}

.Logo--flagUsa {
    background-image: url(../components/logo/assets_subdomain/logo-flagusa.a7853d20c619c1db681c32ffd8651c74.png);
    position: relative;
    width: 28px
}

.Logo--flagUsa:before {
    content: "";
    display: block;
    padding-top: 64.28571429%
}

.Logo--blizz {
    background-image: url(../components/logo/assets_subdomain/logo-blizz.66dba0fc818888461578639d0262e5e9.png);
    position: relative;
    width: 29px
}

.Logo--blizz:before {
    content: "";
    display: block;
    padding-top: 68.96551724%
}

.Logo--absolute {
    position: absolute
}

.Logo--small {
    width: 140px
}

.Logo--background {
    -webkit-filter: saturate(.5);
    filter: saturate(.5);
    opacity: .25
}

.Wireframe .Logo--invert {
    -webkit-filter: invert(100%);
    filter: invert(100%)
}

.Media {
    display: table;
    width: 100%;
    border-collapse: collapse
}

.Media-container {
    display: table-row
}

.Media-image {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 48px;
    height: 48px
}

.Media-icon {
    display: inline-block
}

.Media-preText {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    min-width: 51px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding-right: 15px
}

@media (min-width: 720px) {
    .Media-preText {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Media-preText {
        font-size: 1.728rem
    }
}

.Media-preText.zh-cn, .zh-cn .Media-preText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Media-preText, .Media-preText.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Media-preText.zh-tw, .zh-tw .Media-preText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Media--disabled {
    opacity: .5
}

.Media-text {
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle
}

.Media-text.gutter-vertical {
    padding: 10px 0
}

.Media-text.gutter-all {
    padding: 10px
}

.Media-text.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.Media-text.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.Media-text.gutter-negative.gutter-all {
    margin: -10px
}

.Media--tiny .Icon-svg, .Media--tiny .Media-icon, .Media--tiny .Media-image {
    width: 16px;
    height: 16px
}

.Media--small .Icon-svg, .Media--small .Media-icon, .Media--small .Media-image {
    width: 24px;
    height: 24px
}

.Media--small .Media-preText {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: 1.4;
    min-width: 38px
}

@media (min-width: 720px) {
    .Media--small .Media-preText {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Media--small .Media-preText {
        font-size: 1.44rem
    }
}

.Media--small .Media-preText.zh-cn, .zh-cn .Media--small .Media-preText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Media--small .Media-preText, .Media--small .Media-preText.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Media--small .Media-preText.ru-ru, .ru-ru .Media--small .Media-preText {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Media--small .Media-preText.zh-tw, .zh-tw .Media--small .Media-preText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Media--medium .Icon-svg, .Media--medium .Media-icon, .Media--medium .Media-image {
    width: 32px;
    height: 32px
}

.Media--large .Icon-svg, .Media--large .Media-icon, .Media--large .Media-image {
    width: 48px;
    height: 48px
}

.Media--huge .Icon-svg, .Media--huge .Media-icon, .Media--huge .Media-image {
    width: 80px;
    height: 80px
}

.Media--quarter .Media-image {
    width: 25%;
    height: auto
}

.Media--quarter .Media-icon {
    width: 100%
}

.Media--third .Media-image {
    width: 33%;
    height: auto
}

.Media--third .Media-icon {
    width: 100%
}

.Media--half .Media-image {
    width: 50%;
    height: auto
}

.Media--half .Media-icon {
    width: 100%
}

.Media--full .Media-image {
    width: 100%;
    height: auto
}

.Media--full .Media-icon {
    width: 100%
}

.Media.Media--inline {
    width: auto;
    display: inline-block
}

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

.Media--vertical {
    display: block;
    width: auto
}

.Media--vertical .Media-container {
    display: block
}

.Media--vertical .Media-image {
    display: block;
    width: 100%;
    height: auto
}

.Media--vertical .Media-text {
    display: block;
    text-align: center
}

.Media--border {
    border: 1px solid #000
}

.Media--borderPaper {
    border: 1px solid #ccbb9a
}

.Media--iconBorderSteel .Media-icon {
    border: 1px solid #3f4f56
}

.Media--iconBorderGrey .Media-icon {
    border: 1px solid #444
}

.Media--nowrap .Media-text {
    white-space: nowrap
}

.Media--alignTop .Media-image, .Media--alignTop .Media-text {
    vertical-align: top
}

.Media--flush .Media-text {
    padding: 0
}

.Media--gutterLarge .Media-text {
    padding: 0 20px
}

.Media--gutterLarge .Media-text.gutter-vertical {
    padding: 20px 0
}

.Media--gutterLarge .Media-text.gutter-all {
    padding: 20px
}

.Media--gutterLarge .Media-text.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.Media--gutterLarge .Media-text.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.Media--gutterLarge .Media-text.gutter-negative.gutter-all {
    margin: -20px
}

.Media--noIcon .Media-image, .Media--noText .Media-text {
    display: none
}

.Media--grayscale .Media-image {
    -webkit-filter: brightness(.87) grayscale(1);
    filter: brightness(.87) grayscale(1)
}

.Menu-list {
    display: table;
    position: relative
}

.Menu-list > .List-item {
    vertical-align: middle
}

.Menu-item {
    display: table-cell;
    height: 100%
}

.Menu-link {
    padding: 10px;
    display: block
}

.Menu-link.gutter-vertical {
    padding: 10px 0
}

.Menu-link.gutter-all {
    padding: 10px
}

.Menu-link.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.Menu-link.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.Menu-link.gutter-negative.gutter-all {
    margin: -10px
}

.Menu-name {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1rem;
    line-height: 1.5;
    white-space: nowrap
}

.Menu-name.zh-cn, .zh-cn .Menu-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Menu-name, .Menu-name.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Menu-name.ru-ru, .ru-ru .Menu-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Menu-name.zh-tw, .zh-tw .Menu-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Menu-name {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Menu-name {
        font-size: 1.2rem
    }
}

.Menu--onDark .Menu-name {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1rem;
    line-height: 1.5
}

.Menu--onDark .Menu-name.zh-cn, .zh-cn .Menu--onDark .Menu-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Menu--onDark .Menu-name, .Menu--onDark .Menu-name.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Menu--onDark .Menu-name.ru-ru, .ru-ru .Menu--onDark .Menu-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Menu--onDark .Menu-name.zh-tw, .zh-tw .Menu--onDark .Menu-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Menu--onDark .Menu-name {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Menu--onDark .Menu-name {
        font-size: 1.2rem
    }
}

.Menu-desc {
    display: none
}

.Menu-link.is-selected .Menu-name {
    font-weight: 700
}

.Menu--full .Menu-list {
    width: 100%
}

.Menu--desc .Menu-desc {
    display: block
}

.Menu--overlayDark .Menu-link {
    background: rgba(0, 0, 0, .75);
    border: 1px solid #504137;
    color: #504137;
    margin: 0 2px;
    position: relative;
    -webkit-transition: border-color .2s, color .2s;
    transition: border-color .2s, color .2s
}

html:not(.touch) .Menu--overlayDark .Menu-link:hover {
    border-color: #b1997f;
    color: #b1997f
}

.Menu--overlayDark .Menu-link.is-selected {
    background: #211510;
    border-color: #f8b700;
    -webkit-box-shadow: inset 0 -10px 0 #f8b700;
    box-shadow: inset 0 -10px 0 #f8b700;
    color: #f8b700;
    -webkit-transition: none;
    transition: none
}

.Menu--overlayDark .Menu-name {
    font-size: 1.296rem;
    line-height: 1.5;
    color: inherit;
    text-shadow: none
}

@media (min-width: 720px) {
    .Menu--overlayDark .Menu-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Menu--overlayDark .Menu-name {
        font-size: 1.728rem
    }
}

.Menu--overlayDark .Menu-link.is-selected .Menu-name {
    color: #fff
}

.Menu--overlayDark .Menu-itemIcon {
    display: block;
    fill: currentColor;
    padding: 6px 0 12px
}

.Menu--overlayDarkBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 40px
}

.Menu--overlayDarkBottom .Menu-item {
    padding-top: 20px
}

.Menu--overlayDarkBottom .Menu-link.is-selected:after, .Menu--overlayDarkBottom .Menu-link.is-selected:before {
    border-color: transparent transparent #211510;
    border-style: solid;
    border-width: 0 18px 20px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin: -18px 0 0 -18px;
    position: absolute;
    top: 0;
    width: 0
}

.Menu--overlayDarkBottom .Menu-link.is-selected:before {
    border-color: transparent transparent #f8b700;
    top: -2px
}

.Menu--overlayDarkTop {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 40px
}

.Menu--overlayDarkTop .Menu-item {
    padding-bottom: 20px
}

.Menu--overlayDarkTop .Menu-link.is-selected:after, .Menu--overlayDarkTop .Menu-link.is-selected:before {
    border-color: #211510 transparent transparent;
    border-style: solid;
    border-width: 20px 18px 0;
    bottom: -19px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin: -18px 0 0 -18px;
    position: absolute;
    width: 0
}

.Menu--overlayDarkTop .Menu-link.is-selected:before {
    border-color: #f8b700 transparent transparent;
    bottom: -21px
}

.Menu--tabs {
    background: #211510;
    border-top: 1px solid #504137;
    border-bottom: 1px solid #504137;
    position: relative
}

.Menu--tabs .Menu-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px
}

.Menu--tabs .Menu-desc, .Menu--tabs .Menu-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    color: #ebdec2
}

.Menu--tabs .Menu-name {
    font-size: 1.296rem;
    line-height: 1.5;
    font-weight: 700;
    line-height: 3em;
    color: #f8b700;
    text-shadow: none
}

@media (min-width: 720px) {
    .Menu--tabs .Menu-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Menu--tabs .Menu-name {
        font-size: 1.728rem
    }
}

.Menu--tabs.Menu--desc .Menu-name {
    font-size: 1.296rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Menu--tabs.Menu--desc .Menu-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Menu--tabs.Menu--desc .Menu-name {
        font-size: 1.728rem
    }
}

.Menu--tabs .Menu-link {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Menu--tabs .Menu-link.is-selected, html:not(.touch) .Menu--tabs .Menu-link:hover {
    background: #f8b700
}

.Menu--tabs .Menu-link.is-selected .Menu-desc, .Menu--tabs .Menu-link.is-selected .Menu-name, html:not(.touch) .Menu--tabs .Menu-link:hover .Menu-desc, html:not(.touch) .Menu--tabs .Menu-link:hover .Menu-name {
    color: #211510
}

@media (min-width: 980px) {
    .Menu--overlayClasses .Menu-list {
        table-layout: fixed
    }
}

.Menu--overlayClasses .Menu-item {
    padding: 0 10px;
    vertical-align: top
}

.Menu--overlayClasses .Menu-item.gutter-vertical {
    padding: 10px 0
}

.Menu--overlayClasses .Menu-item.gutter-all {
    padding: 10px
}

.Menu--overlayClasses .Menu-item.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.Menu--overlayClasses .Menu-item.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.Menu--overlayClasses .Menu-item.gutter-negative.gutter-all {
    margin: -10px
}

.Menu--overlayClassesAlignBottom .Menu-item {
    vertical-align: bottom
}

.Menu--overlayClasses .Menu-link {
    padding: 40px 0;
    opacity: .4;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.Menu--overlayClasses .Menu-link.gutter-vertical {
    padding: 40px 0
}

.Menu--overlayClasses .Menu-link.gutter-all {
    padding: 40px
}

.Menu--overlayClasses .Menu-link.gutter-negative {
    padding: 0;
    margin: 0 -40px
}

.Menu--overlayClasses .Menu-link.gutter-negative.gutter-vertical {
    margin: -40px 0
}

.Menu--overlayClasses .Menu-link.gutter-negative.gutter-all {
    margin: -40px
}

.Menu--overlayClasses .Menu-link.is-selected, html:not(.touch) .Menu--overlayClasses .Menu-link:hover {
    opacity: 1
}

.Menu--overlayClasses .Menu-itemIcon {
    max-width: 100px
}

.Menu--overlayClasses .Menu-link.is-selected .Menu-itemIcon {
    border-color: #f8b700
}

.Menu--overlayClasses .Menu-link.is-selected .Menu-name, .Menu--overlayClasses .Menu-name {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #f8b700;
    text-shadow: none;
    white-space: normal
}

.Menu--overlayClasses .Menu-link.is-selected .Menu-name.zh-cn, .Menu--overlayClasses .Menu-name.zh-cn, .zh-cn .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .zh-cn .Menu--overlayClasses .Menu-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .ko-kr .Menu--overlayClasses .Menu-name, .Menu--overlayClasses .Menu-link.is-selected .Menu-name.ko-kr, .Menu--overlayClasses .Menu-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Menu--overlayClasses .Menu-link.is-selected .Menu-name.ru-ru, .Menu--overlayClasses .Menu-name.ru-ru, .ru-ru .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .ru-ru .Menu--overlayClasses .Menu-name {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Menu--overlayClasses .Menu-link.is-selected .Menu-name.zh-tw, .Menu--overlayClasses .Menu-name.zh-tw, .zh-tw .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .zh-tw .Menu--overlayClasses .Menu-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .Menu--overlayClasses .Menu-name {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Menu--overlayClasses .Menu-link.is-selected .Menu-name, .Menu--overlayClasses .Menu-name {
        font-size: 1rem
    }
}

.Menu--overlayClassesBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .6)), to(transparent));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    padding-top: 100px
}

.Menu--overlayClassesTop {
    position: absolute;
    top: 0;
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(transparent));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
    padding-bottom: 100px
}

.Menu--splitThree .Menu-item {
    width: 33%
}

.Mount {
    border: 1px solid #444;
    background-color: #181818;
    overflow: hidden
}

.Mount:after {
    content: "";
    display: table;
    clear: both
}

.Mount:not(.Mount--modal)[disabled] {
    opacity: .3
}

.Mount-render {
    position: relative;
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-color: #181818;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 600px;
    margin: 0 auto
}

.Mount-render:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Mount-info {
    padding: 20px;
    position: relative;
    text-align: center;
    height: auto
}

.Mount-info.gutter-vertical {
    padding: 20px 0
}

.Mount-info.gutter-all {
    padding: 20px
}

.Mount-info.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.Mount-info.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.Mount-info.gutter-negative.gutter-all {
    margin: -20px
}

.Mount-meta {
    position: relative
}

.Mount-favorite.Icon.Icon--small {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(35deg) scale(.1);
    transform: translateX(-50%) rotate(35deg) scale(.1);
    margin: 0;
    top: -45px
}

.Mount-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-shadow: none;
    margin: 0
}

@media (min-width: 720px) {
    .Mount-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Mount-name {
        font-size: 1.44rem
    }
}

.Mount-name.zh-cn, .zh-cn .Mount-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Mount-name, .Mount-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Mount-name.zh-tw, .zh-tw .Mount-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Mount-icon {
    margin-right: 4px
}

html:not(.touch) .Mount--hover {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    cursor: pointer
}

html:not(.touch) .Mount--hover:hover {
    border-color: #f8b700;
    background-color: #1a1a1a
}

html:not(.touch) .Mount--hover:hover .Mount-name {
    color: #f8b700
}

html:not(.touch) .Mount--hover:hover .Mount-render {
    -webkit-transform: translateZ(0) scale(1.15);
    transform: translateZ(0) scale(1.15);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.Mount--POOR .Mount-name {
    color: #9d9d9d
}

.Mount--COMMON .Mount-name {
    color: #fff
}

.Mount--UNCOMMON .Mount-name {
    color: #1eff00
}

.Mount--RARE .Mount-name {
    color: #0081ff
}

.Mount--EPIC .Mount-name {
    color: #c600ff
}

.Mount--LEGENDARY .Mount-name {
    color: #ff8000
}

.Mount--ARTIFACT .Mount-name {
    color: #e5cc80
}

.Mount--HEIRLOOM .Mount-name {
    color: #0cf
}

.Mount--modal {
    border: 0
}

.Mount--large .Mount-favorite.Icon.Icon--small {
    left: 0;
    top: -30px
}

.Mount--large .Mount-name {
    font-size: 1.296rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Mount--large .Mount-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Mount--large .Mount-name {
        font-size: 1.728rem
    }
}

.Msg {
    display: inline
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary) {
    background: url(../components/mythickeystonedungeonrun/assets_subdomain/mythickeystonedungeonrun-background.ee8e1e8d1ca604e2fc28a8e14877bc62.jpg);
    background-position: top;
    border: 1px solid #3f4f56
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--POOR {
    border-color: #9d9d9d
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--COMMON {
    border-color: #fff
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--UNCOMMON {
    border-color: #1eff00
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--RARE {
    border-color: #0081ff
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--EPIC {
    border-color: #c600ff
}

.MythicKeystoneDungeonRun:not(.MythicKeystoneDungeonRun--summary):not([disabled]).MythicKeystoneDungeonRun--LEGENDARY {
    border-color: #ff8000
}

.MythicKeystoneDungeonRun-name {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-name {
        font-size: 1.44rem
    }
}

.MythicKeystoneDungeonRun-name.zh-cn, .zh-cn .MythicKeystoneDungeonRun-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-name, .MythicKeystoneDungeonRun-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.MythicKeystoneDungeonRun-name.zh-tw, .zh-tw .MythicKeystoneDungeonRun-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .ControlledModalToggle:hover .MythicKeystoneDungeonRun-name {
    color: #fff;
    cursor: pointer
}

.MythicKeystoneDungeonRun-difficulties {
    width: 100%
}

.MythicKeystoneDungeonRun-partyLink {
    color: #f8b700;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    cursor: pointer
}

html:not(.touch) .MythicKeystoneDungeonRun-partyLink:hover {
    color: #fff
}

.MythicKeystoneDungeonRun-header {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    padding-top: 33%;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #3f4f56
}

html:not(.touch) .ControlledModalToggle:hover .MythicKeystoneDungeonRun-header {
    cursor: pointer;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.MythicKeystoneDungeonRun--summary .MythicKeystoneDungeonRun-header {
    border: 1px solid #3f4f56;
    padding-top: 45%
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--POOR {
    border-color: #9d9d9d
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--COMMON {
    border-color: #fff
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--UNCOMMON {
    border-color: #1eff00
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--RARE {
    border-color: #0081ff
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--EPIC {
    border-color: #c600ff
}

.MythicKeystoneDungeonRun--summary:not([disabled]) .MythicKeystoneDungeonRun-header.MythicKeystoneDungeonRun-header--LEGENDARY {
    border-color: #ff8000
}

.MythicKeystoneDungeonRun-level.Chakram {
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.MythicKeystoneDungeonRun--summary .MythicKeystoneDungeonRun-level.Chakram {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.MythicKeystoneDungeonRun-duration {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-duration {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-duration {
        font-size: 1.44rem
    }
}

.MythicKeystoneDungeonRun-duration.zh-cn, .zh-cn .MythicKeystoneDungeonRun-duration {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-duration, .MythicKeystoneDungeonRun-duration.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.MythicKeystoneDungeonRun-duration.zh-tw, .zh-tw .MythicKeystoneDungeonRun-duration {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.MythicKeystoneDungeonRun-overage-duration {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #777;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-overage-duration {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-overage-duration {
        font-size: 1.44rem
    }
}

.MythicKeystoneDungeonRun-overage-duration.zh-cn, .zh-cn .MythicKeystoneDungeonRun-overage-duration {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-overage-duration, .MythicKeystoneDungeonRun-overage-duration.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.MythicKeystoneDungeonRun-overage-duration.ru-ru, .ru-ru .MythicKeystoneDungeonRun-overage-duration {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.MythicKeystoneDungeonRun-overage-duration.zh-tw, .zh-tw .MythicKeystoneDungeonRun-overage-duration {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.MythicKeystoneDungeonRun-overage-over-time {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #777;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-overage-over-time {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-overage-over-time {
        font-size: 1.2rem
    }
}

.MythicKeystoneDungeonRun-overage-over-time.zh-cn, .zh-cn .MythicKeystoneDungeonRun-overage-over-time {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-overage-over-time, .MythicKeystoneDungeonRun-overage-over-time.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.MythicKeystoneDungeonRun-overage-over-time.ru-ru, .ru-ru .MythicKeystoneDungeonRun-overage-over-time {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.MythicKeystoneDungeonRun-overage-over-time.zh-tw, .zh-tw .MythicKeystoneDungeonRun-overage-over-time {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.MythicKeystoneDungeonRun--summary .MythicKeystoneDungeonRun-overage-over-time {
    display: block
}

.MythicKeystoneDungeonRun-affixesContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.MythicKeystoneDungeonRun-affix {
    cursor: pointer;
    margin-top: 4px;
    margin-right: 10px
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-header {
    padding: 2%;
    border: 1px solid #3f4f56
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
        font-size: 1.728rem
    }
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name.zh-cn, .zh-cn .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name, .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name.ru-ru, .ru-ru .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name.zh-tw, .zh-tw .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
        font-size: 1.728rem
    }
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration.zh-cn, .zh-cn .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration, .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration.ru-ru, .ru-ru .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration.zh-tw, .zh-tw .MythicKeystoneDungeonRun-modal-party .MythicKeystoneDungeonRun-duration {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.MythicKeystoneDungeonRun-noDataSection {
    display: none
}

.MythicKeystoneDungeonRun[disabled] {
    opacity: .5
}

.MythicKeystoneDungeonRun[disabled] .MythicKeystoneDungeonRun-affixesContainer, .MythicKeystoneDungeonRun[disabled] .MythicKeystoneDungeonRun-duration, .MythicKeystoneDungeonRun[disabled] .MythicKeystoneDungeonRun-level, .MythicKeystoneDungeonRun[disabled] .MythicKeystoneDungeonRun-partyLink {
    display: none
}

.MythicKeystoneDungeonRun[disabled] .MythicKeystoneDungeonRun-noDataSection {
    display: block
}

.MythicKeystoneDungeonRun-slide {
    width: 66%
}

.NPC {
    display: block;
    position: relative
}

.NPC-table {
    display: table;
    min-height: 56px
}

.NPC-avatar {
    display: table-cell;
    vertical-align: middle;
    width: 56px
}

.NPC-avatar, .NPC-image {
    min-height: 56px
}

.NPC-details {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle
}

.NPC-name {
    color: #cacaca;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .NPC-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .NPC-name {
        font-size: 1.44rem
    }
}

.NPC--onDark .NPC-name {
    color: #b1997f;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .NPC--onDark .NPC-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .NPC--onDark .NPC-name {
        font-size: 1.44rem
    }
}

.NewsBlog {
    position: relative
}

html:not(.touch) .NewsBlog:hover {
    background-color: #211510
}

html:not(.touch) .NewsBlog:hover .NewsBlog-tile {
    border-color: #f8b700
}

.NewsBlog-content {
    padding: 10px
}

.NewsBlog-content.gutter-vertical {
    padding: 10px 0
}

.NewsBlog-content.gutter-all {
    padding: 10px
}

.NewsBlog-content.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.NewsBlog-content.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.NewsBlog-content.gutter-negative.gutter-all {
    margin: -10px
}

.NewsBlog-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.NewsBlog-comments {
    position: relative;
    z-index: 1
}

.NewsBlog-edit {
    z-index: 1
}

.NewsBlog-title {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    text-shadow: none
}

@media (min-width: 720px) {
    .NewsBlog-title {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .NewsBlog-title {
        font-size: 1.728rem
    }
}

.NewsBlog-title.zh-cn, .zh-cn .NewsBlog-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .NewsBlog-title, .NewsBlog-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.NewsBlog-title.ru-ru, .ru-ru .NewsBlog-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.NewsBlog-title.zh-tw, .zh-tw .NewsBlog-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .NewsBlog:hover .NewsBlog-title {
    color: #fff
}

.PageNavbar {
    z-index: 4
}

.PageNavbar, .PageNavbar-area {
    position: relative
}

.PageNavbar-container {
    display: table;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px
}

.PageNavbar-left, .PageNavbar-right {
    display: table-cell;
    vertical-align: middle;
    height: 100%
}

.PageNavbar-right {
    text-align: right
}

.PageNavbar-leftContent {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px 10px 40px
}

.PageNavbar-leftContent, .PageNavbar-leftContent:before {
    background: transparent;
    -webkit-transition: background .25s ease;
    transition: background .25s ease
}

.PageNavbar-rightContent {
    padding-right: 40px
}

.PageNavbar--overlay .PageNavbar-area {
    position: absolute;
    top: 0;
    width: 100%
}

.PageNavbar--overlay .PageNavbar-leftContent {
    position: relative
}

.PageNavbar--overlay .PageNavbar-leftContent:before {
    content: "";
    background: inherit;
    width: 1600px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%
}

.PageNavbar--overlay .PageNavbar-leftContent, .PageNavbar--overlay .PageNavbar-leftContent:before {
    background: transparent;
    -webkit-transition: background .25s ease;
    transition: background .25s ease
}

.PageNavbar--overlay .PageNavbar-sticky.is-active .PageNavbar-leftContent, .PageNavbar--overlay .PageNavbar-sticky.is-active .PageNavbar-leftContent:before {
    background: rgba(0, 0, 0, .8);
    -webkit-transition: background 1.2s ease;
    transition: background 1.2s ease
}

.PageNavbar--solid .PageNavbar-area {
    background: #111
}

.PageNavbar--center .PageNavbar-left {
    text-align: center
}

.PageNavbar--ocho .PageNavbar-area {
    background: url(../components/pagenavbar/assets_subdomain/pagenavbar-ocho.3f9d96ebad1c8ff76b665058fe654668.png) top;
    height: 68px;
    margin-bottom: -2px;
    z-index: 1
}

.PageNavbar--ocho .PageNavbar-area:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    bottom: 2px;
    -webkit-box-shadow: 0 0 40px #000;
    box-shadow: 0 0 40px #000
}

.PageNavbar--ocho .PageNavbar-leftContent {
    padding-top: 4px;
    padding-bottom: 12px
}

.PageNavbar--ocho .PageNav-link {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #ede0c9 20%, #8a7e66);
    background-size: 1.3em 1.3em;
    background-position: top;
    color: #ede0c9;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative;
    font-size: 15px
}

.PageNavbar--ocho .PageNav-link.is-active, html:not(.touch) .PageNavbar--ocho .PageNav-link:hover {
    background-image: -webkit-linear-gradient(top, #fff, #fff)
}

.PageNavbar--ocho .PageNav-link.is-active:before {
    content: "";
    display: block;
    width: 126px;
    height: 68px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -63px;
    z-index: -1;
    background: url(../components/pagenavbar/assets_subdomain/pagenavbar-ocho-arrow.d9b6638dbdb092e3982d1410506a1662.png) bottom
}

.PageNavbar--ocho .PageNav-link--cta:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -26px;
    left: 0;
    right: 0;
    height: 67px;
    z-index: -1;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/pagenavbar/assets_subdomain/pagenavbar-ocho-glow.7b1e37bd9ec6f5e17a09af10347b8947.png);
    border-image-repeat: stretch;
    border-image-slice: 0 111 fill;
    border-image-width: 0 111px;
    border-image-outset: 0 40px 0 40px
}

.PagedTable-rowsPerPage {
    margin: 20px 0 0
}

@media (min-width: 980px) {
    .PagedTable-controls {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

    .PagedTable-rowsPerPage {
        margin: 0 0 0 20px
    }
}

.Pagination {
    display: table;
    position: relative;
    margin-left: auto;
    text-align: right;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px
}

.Pagination > .List-item {
    vertical-align: middle
}

.Pagination.List--greenChecks > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.Pagination.List--greenChecks > .List-item:before {
    display: none
}

.Pagination.List--greenChecks > .List-item:after {
    background: url(../components/list/assets_subdomain/list-greencheck.cc6d210abb78a47b25a380b818acf95c.png) no-repeat 50% 50%;
    background-size: auto 16px;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 18px
}

.Pagination.List--bulleted > .List-item {
    padding-left: 0;
    padding-right: 2em;
    position: relative
}

.Pagination.List--bulleted > .List-item:before {
    display: none
}

.Pagination.List--bulleted > .List-item:after {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    color: transparent;
    display: inline-block;
    right: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

@media (min-width: 720px) {
    .Pagination {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Pagination {
        font-size: 1rem
    }
}

.Pagination-page {
    text-align: center;
    display: table-cell;
    width: 40px
}

.Pagination-page .Button-inner {
    padding: 5px 12px
}

.Pagination-dots {
    width: 20px
}

.Pagination-button.Button {
    border: none;
    background: transparent !important;
    display: block;
    min-width: 0;
    white-space: nowrap;
    -webkit-transition: background-color .15s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: background-color .15s cubic-bezier(.23, 1, .32, 1) 0s
}

.Pagination-button:focus, html:not(.touch) .Pagination-button:hover {
    background: #b06601 !important;
    color: #ffd36b;
    outline-width: 0
}

.Pagination-button.Button--small {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Pagination-button.Button--small {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Pagination-button.Button--small {
        font-size: 1.2rem
    }
}

.Pagination-button.Button .Button-inner {
    display: block;
    min-width: 0;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px
}

.Pagination-button.Button .Button-outer {
    border: 1px solid transparent;
    display: block;
    min-width: 0
}

.Pagination-button:focus {
    outline-width: 5px
}

.Pagination-button--selected, .Pagination-button--selected:hover {
    cursor: default;
    color: #fff !important;
    background: transparent;
    -webkit-transition: none;
    transition: none
}

.Pagination-button--direction.Button--ghost.Button--small .Button-inner {
    padding-left: 10px;
    padding-right: 10px
}

.Pagination-button[disabled] {
    opacity: .3;
    color: #fff
}

.Pagination--noMargin {
    margin-top: 0;
    margin-bottom: 0
}

.Pair {
    display: table;
    position: relative;
    width: 100%
}

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

.Pair-left, .Pair-right {
    display: table-cell;
    vertical-align: middle;
    height: 100%
}

.Pair-right {
    text-align: right
}

.Pair--flex.Pair--gutter-small .Pair-left {
    padding-right: 10px
}

.Pair-center {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.PartyCharacter-role {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: -18px
}

.PartyCharacter-name {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

@media (min-width: 720px) {
    .PartyCharacter-name {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .PartyCharacter-name {
        font-size: 1.2rem
    }
}

.PartyCharacter-name.zh-cn, .zh-cn .PartyCharacter-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .PartyCharacter-name, .PartyCharacter-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.PartyCharacter-name.zh-tw, .zh-tw .PartyCharacter-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.PartyCharacter-link:focus .PartyCharacter-name, html:not(.touch) .PartyCharacter-link:hover .PartyCharacter-name {
    color: #fff;
    text-decoration: underline
}

.PartyCharacter--DEATHKNIGHT .PartyCharacter-name {
    color: #c41e3b
}

.PartyCharacter--DEMONHUNTER .PartyCharacter-name {
    color: #a330c9
}

.PartyCharacter--DRUID .PartyCharacter-name {
    color: #ff7c0a
}

.PartyCharacter--HUNTER .PartyCharacter-name {
    color: #aad372
}

.PartyCharacter--MAGE .PartyCharacter-name {
    color: #68ccef
}

.PartyCharacter--MONK .PartyCharacter-name {
    color: #00ffba
}

.PartyCharacter--PALADIN .PartyCharacter-name {
    color: #f48cba
}

.PartyCharacter--PRIEST .PartyCharacter-name {
    color: #f0ebe0
}

.PartyCharacter--ROGUE .PartyCharacter-name {
    color: #fff468
}

.PartyCharacter--SHAMAN .PartyCharacter-name {
    color: #2359ff
}

.PartyCharacter--WARLOCK .PartyCharacter-name {
    color: #9382c9
}

.PartyCharacter--WARRIOR .PartyCharacter-name {
    color: #c69b6d
}

.Pet {
    border: 1px solid #444;
    background-color: #181818;
    overflow: hidden
}

.Pet:after {
    content: "";
    display: table;
    clear: both
}

.Pet .Pet-uncollected-text {
    display: none;
    opacity: .5
}

.Pet.Pet--unassigned {
    opacity: .8
}

.Pet:not(.Pet--modal)[disabled] {
    opacity: .3
}

.Pet[disabled] .Pet-companion-text, .Pet[disabled] .Pet-family-icon, .Pet[disabled] .Pet-family-text, .Pet[disabled] .Pet-level, .Pet[disabled] .Pet-stat, .Pet[disabled] .Pet-stats {
    display: none !important
}

.Pet[disabled] .Pet-uncollected-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: block
}

@media (min-width: 720px) {
    .Pet[disabled] .Pet-uncollected-text {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Pet[disabled] .Pet-uncollected-text {
        font-size: 1rem
    }
}

.Pet[disabled] .Pet-uncollected-text.zh-cn, .zh-cn .Pet[disabled] .Pet-uncollected-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet[disabled] .Pet-uncollected-text, .Pet[disabled] .Pet-uncollected-text.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet[disabled] .Pet-uncollected-text.ru-ru, .ru-ru .Pet[disabled] .Pet-uncollected-text {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Pet[disabled] .Pet-uncollected-text.zh-tw, .zh-tw .Pet[disabled] .Pet-uncollected-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-render, .Pet-render-none, .Pet-render-shadow {
    position: relative;
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-color: #181818;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto
}

.Pet-render-none:before, .Pet-render-shadow:before, .Pet-render:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Pet-render-none {
    background-size: 0
}

.Pet-render-shadow {
    background-image: url(../components/pet/assets_subdomain/pet-shadow.afe70512b177215a576844faf5028a67.jpg)
}

.Pet-info {
    padding: 20px;
    height: auto
}

.Pet-meta {
    position: relative
}

.Pet-info-details {
    display: none
}

.Pet-companion-text, .Pet-level, .Pet-name-subheading, .Pet-unassigned-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    text-shadow: none;
    font-weight: 700;
    padding-right: 4px
}

@media (min-width: 720px) {
    .Pet-companion-text, .Pet-level, .Pet-name-subheading, .Pet-unassigned-text {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Pet-companion-text, .Pet-level, .Pet-name-subheading, .Pet-unassigned-text {
        font-size: 1rem
    }
}

.Pet-companion-text.zh-cn, .Pet-level.zh-cn, .Pet-name-subheading.zh-cn, .Pet-unassigned-text.zh-cn, .zh-cn .Pet-companion-text, .zh-cn .Pet-level, .zh-cn .Pet-name-subheading, .zh-cn .Pet-unassigned-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-companion-text, .ko-kr .Pet-level, .ko-kr .Pet-name-subheading, .ko-kr .Pet-unassigned-text, .Pet-companion-text.ko-kr, .Pet-level.ko-kr, .Pet-name-subheading.ko-kr, .Pet-unassigned-text.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-companion-text.ru-ru, .Pet-level.ru-ru, .Pet-name-subheading.ru-ru, .Pet-unassigned-text.ru-ru, .ru-ru .Pet-companion-text, .ru-ru .Pet-level, .ru-ru .Pet-name-subheading, .ru-ru .Pet-unassigned-text {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Pet-companion-text.zh-tw, .Pet-level.zh-tw, .Pet-name-subheading.zh-tw, .Pet-unassigned-text.zh-tw, .zh-tw .Pet-companion-text, .zh-tw .Pet-level, .zh-tw .Pet-name-subheading, .zh-tw .Pet-unassigned-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-unassigned-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Pet-unassigned-text {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Pet-unassigned-text {
        font-size: 1rem
    }
}

.Pet-unassigned-text.zh-cn, .zh-cn .Pet-unassigned-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-unassigned-text, .Pet-unassigned-text.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-unassigned-text.ru-ru, .ru-ru .Pet-unassigned-text {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Pet-unassigned-text.zh-tw, .zh-tw .Pet-unassigned-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Pet-name, .Pet-unassigned-slot {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-shadow: none;
    margin: 0;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-word
}

@media (min-width: 720px) {
    .Pet-name, .Pet-unassigned-slot {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Pet-name, .Pet-unassigned-slot {
        font-size: 1.44rem
    }
}

.Pet-name.zh-cn, .Pet-unassigned-slot.zh-cn, .zh-cn .Pet-name, .zh-cn .Pet-unassigned-slot {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-name, .ko-kr .Pet-unassigned-slot, .Pet-name.ko-kr, .Pet-unassigned-slot.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-name.ru-ru, .Pet-unassigned-slot.ru-ru, .ru-ru .Pet-name, .ru-ru .Pet-unassigned-slot {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Pet-name.zh-tw, .Pet-unassigned-slot.zh-tw, .zh-tw .Pet-name, .zh-tw .Pet-unassigned-slot {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-name.Pet-unassigned-slot {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Pet-name.Pet-unassigned-slot {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Pet-name.Pet-unassigned-slot {
        font-size: 1.44rem
    }
}

.Pet-name.Pet-unassigned-slot.zh-cn, .zh-cn .Pet-name.Pet-unassigned-slot {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-name.Pet-unassigned-slot, .Pet-name.Pet-unassigned-slot.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-name.Pet-unassigned-slot.ru-ru, .ru-ru .Pet-name.Pet-unassigned-slot {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Pet-name.Pet-unassigned-slot.zh-tw, .zh-tw .Pet-name.Pet-unassigned-slot {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-avatar .Pet-icon {
    vertical-align: middle;
    margin-right: 10px
}

.Pet-favorite .Icon--favorite {
    color: #aaa;
    vertical-align: middle;
    margin-left: 8px
}

.Pet-favorite .Icon-svg {
    width: 14px;
    height: 14px
}

.Pet-icon-stat {
    margin-right: 4px;
    vertical-align: middle
}

.Pet-icon-stat.Icon--heart {
    color: #b30000
}

.Pet-icon-stat .Icon-svg {
    width: 18px;
    height: 18px;
    vertical-align: sub
}

.Pet-family {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    text-shadow: none;
    margin: 0
}

@media (min-width: 720px) {
    .Pet-family {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Pet-family {
        font-size: 1.44rem
    }
}

.Pet-family.zh-cn, .zh-cn .Pet-family {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-family, .Pet-family.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-family.ru-ru, .ru-ru .Pet-family {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Pet-family.zh-tw, .zh-tw .Pet-family {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-stat.List-item {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Pet-stat.List-item {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Pet-stat.List-item {
        font-size: 1.2rem
    }
}

.Pet-stat.List-item.zh-cn, .zh-cn .Pet-stat.List-item {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-stat.List-item, .Pet-stat.List-item.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-stat.List-item.ru-ru, .ru-ru .Pet-stat.List-item {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Pet-stat.List-item.zh-tw, .zh-tw .Pet-stat.List-item {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-family-text, .Pet-info-details .Pet-companion-text {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Pet-family-text, .Pet-info-details .Pet-companion-text {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Pet-family-text, .Pet-info-details .Pet-companion-text {
        font-size: 1.2rem
    }
}

.Pet-family-text.zh-cn, .Pet-info-details .Pet-companion-text.zh-cn, .zh-cn .Pet-family-text, .zh-cn .Pet-info-details .Pet-companion-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pet-family-text, .ko-kr .Pet-info-details .Pet-companion-text, .Pet-family-text.ko-kr, .Pet-info-details .Pet-companion-text.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pet-family-text.ru-ru, .Pet-info-details .Pet-companion-text.ru-ru, .ru-ru .Pet-family-text, .ru-ru .Pet-info-details .Pet-companion-text {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Pet-family-text.zh-tw, .Pet-info-details .Pet-companion-text.zh-tw, .zh-tw .Pet-family-text, .zh-tw .Pet-info-details .Pet-companion-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Pet-info-basic {
    position: relative;
    bottom: 0;
    text-align: center
}

.Pet-info-basic .Pet-name {
    display: table-cell;
    vertical-align: middle
}

.Pet-info-icon {
    display: none;
    vertical-align: middle
}

.Pet-family-icon {
    display: inline-block;
    height: 18px;
    width: 18px;
    background: transparent no-repeat;
    background-size: contain
}

.Pet--BEAST .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-beast.33b30750d00865c29dd847aca3e974a8.png)
}

.Pet--CRITTER .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-critter.9755f688957a828e1e9da31dfa606c87.png)
}

.Pet--DRAGONKIN .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-dragonkin.47be5c28e75970ff438c4b153685cf60.png)
}

.Pet--ELEMENTAL .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-elemental.427b34e2cbdc11723f169bd3ee7416ce.png)
}

.Pet--FLYING .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-flying.cd27deb525784fecde668bc7bccb493f.png)
}

.Pet--HUMANOID .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-humanoid.87ff1eca5723c94e441dcbba1a872a4a.png)
}

.Pet--MECHANICAL .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-mechanical.3f1f19bb90e6fc3a399e3b8aed044331.png)
}

.Pet--MAGIC .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-magic.ec2917cb9927e77230b14ea98a75435d.png)
}

.Pet--UNDEAD .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-undead.8cf4e9814d51d451fc5ac776988b3d44.png)
}

.Pet--AQUATIC .Pet-family-icon {
    background-image: url(../components/pet/assets_subdomain/pet-family-aquatic.3ae750ee0120cb736424696284665685.png)
}

html:not(.touch) .Pet--hover {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    cursor: pointer
}

html:not(.touch) .Pet--hover:hover {
    border-color: #f8b700;
    background-color: #1a1a1a
}

html:not(.touch) .Pet--hover:hover .Pet-name {
    color: #f8b700
}

html:not(.touch) .Pet--hover:hover .Pet-render {
    -webkit-transform: translateZ(0) scale(1.15);
    transform: translateZ(0) scale(1.15);
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.Pet--POOR .Pet-name {
    color: #9d9d9d
}

.Pet--POOR .Pet-avatar .Pet-icon {
    border-color: #9d9d9d
}

.Pet--COMMON .Pet-name {
    color: #fff
}

.Pet--COMMON .Pet-avatar .Pet-icon {
    border-color: #fff
}

.Pet--UNCOMMON .Pet-name {
    color: #1eff00
}

.Pet--UNCOMMON .Pet-avatar .Pet-icon {
    border-color: #1eff00
}

.Pet--RARE .Pet-name {
    color: #0081ff
}

.Pet--RARE .Pet-avatar .Pet-icon {
    border-color: #0081ff
}

.Pet--EPIC .Pet-name {
    color: #c600ff
}

.Pet--EPIC .Pet-avatar .Pet-icon {
    border-color: #c600ff
}

.Pet--LEGENDARY .Pet-name {
    color: #ff8000
}

.Pet--LEGENDARY .Pet-avatar .Pet-icon {
    border-color: #ff8000
}

.Pet--ARTIFACT .Pet-name {
    color: #e5cc80
}

.Pet--ARTIFACT .Pet-avatar .Pet-icon {
    border-color: #e5cc80
}

.Pet--HEIRLOOM .Pet-name {
    color: #0cf
}

.Pet--HEIRLOOM .Pet-avatar .Pet-icon {
    border-color: #0cf
}

.Pet--large .Pet-info-basic {
    display: none
}

.Pet--large .Pet-info-details {
    display: block
}

.Pet--noRender .Pet-details-divider, .Pet--noRender .Pet-render-container {
    display: none
}

.Pet--modal {
    background-color: #181818;
    border: none
}

.Pet--modal .Pet-info {
    margin-right: 2px;
    padding: 0
}

.Pet--hunter .Pet-family-icon {
    display: none
}

.Pet--hunter .Pet-info-icon {
    display: inline-block;
    margin-right: 4px
}

.Pet--hunter .Pet-family-text {
    vertical-align: middle
}

.Pet-slide {
    width: 66%
}

.Portal:not(.Portal *) {
    font-size: 0;
    line-height: 0
}

.Position {
    position: absolute;
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.Position--masked {
    pointer-events: none
}

.Position--relative {
    position: relative
}

.Position--above {
    z-index: 1
}

.Position--below {
    z-index: -1
}

.Position--anchorCenter {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.Position--anchorTopLeft {
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.Position--anchorTop {
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

.Position--anchorTopRight {
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.Position--anchorRight {
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

.Position--anchorBottomRight {
    -webkit-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

.Position--anchorBottom {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

.Position--anchorBottomLeft {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.Position--anchorLeft {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
}

.PriceButton {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media (min-width: 720px) {
    .PriceButton {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .PriceButton {
        font-size: 1.728rem
    }
}

.PriceButton.zh-cn, .zh-cn .PriceButton {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

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

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

.PriceButton.zh-tw, .zh-tw .PriceButton {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.PriceButton-name, .PriceButton-priceArea {
    display: inline-block;
    position: relative;
    z-index: 1
}

.PriceButton-retail {
    font-size: 1rem;
    line-height: 1.5;
    color: #cacaca;
    text-decoration: line-through
}

@media (min-width: 720px) {
    .PriceButton-retail {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .PriceButton-retail {
        font-size: 1.2rem
    }
}

.PriceButton-price {
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .PriceButton-price {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .PriceButton-price {
        font-size: 1.44rem
    }
}

.PriceButton-price-currency {
    font-size: .6em
}

.PriceButton-price-currency:after {
    content: " "
}

.PriceButton:not(.PriceButton--onSale) .PriceButton-retail {
    display: none
}

.PriceButton--legion {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/pricebutton/assets_subdomain/pricebutton-legion.5944ba4fc362c4dc9df9e960ddfb6c9e.png);
    border-image-repeat: round;
    border-image-slice: 0 138 fill;
    border-image-width: 0 138px;
    border-image-outset: 0;
    position: relative;
    padding: 0 75px
}

@media (min-width: 720px) {
    .PriceButton--legion {
        padding: 0 85px
    }
}

@media (min-width: 1280px) {
    .PriceButton--legion {
        padding: 0 100px
    }
}

.PriceButton--legion:after, .PriceButton--legion:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/pricebutton/assets_subdomain/pricebutton-legion-hover.9fc5c3a317018fc6db581547ed727475.png);
    border-image-repeat: round;
    border-image-slice: 0 138 fill;
    border-image-width: 0 138px;
    border-image-outset: 0;
    content: "";
    display: block;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    transition: opacity 1.2s ease
}

.PriceButton--legion:before {
    -webkit-animation: PriceButton--legion 3s linear infinite;
    animation: PriceButton--legion 3s linear infinite
}

html:not(.touch) .PriceButton--legion:hover:after {
    opacity: 1
}

.PriceButton--legion .PriceButton-name {
    text-transform: uppercase;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    color: #000;
    line-height: 5.5em;
    text-shadow: 1px 0 0 #000, 0 1px 0 #000, 0 0 10px #e6ff42, 0 0 5px #e6ff42
}

@media (min-width: 720px) {
    .PriceButton--legion .PriceButton-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .PriceButton--legion .PriceButton-name {
        font-size: 1.44rem
    }
}

.PriceButton--legion .PriceButton-name.zh-cn, .zh-cn .PriceButton--legion .PriceButton-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .PriceButton--legion .PriceButton-name, .PriceButton--legion .PriceButton-name.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.PriceButton--legion .PriceButton-name.ru-ru, .ru-ru .PriceButton--legion .PriceButton-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.PriceButton--legion .PriceButton-name.zh-tw, .zh-tw .PriceButton--legion .PriceButton-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.PriceButton--legion .PriceButton-priceArea {
    position: absolute;
    background-size: 100%;
    background-image: url(../components/pricebutton/assets_subdomain/pricebutton-legion-badge.4f2c970ea31b4810888128dce67aa417.png);
    background-repeat: no-repeat;
    padding: 30px 20px 50px;
    margin-left: 5px;
    margin-bottom: -10px;
    margin-right: -20px;
    right: 100px
}

.PriceButton--legion.PriceButton--hasPrice .PriceButton-name {
    margin-right: 100px
}

.PriceButton--legion.PriceButton--onSale .PriceButton-priceArea {
    padding-top: 20px
}

.PriceButton--legion .PriceButton-price, .PriceButton--legion .PriceButton-retail {
    line-height: 1em
}

.PriceButton--legion .PriceButton-price {
    color: #13ff29
}

@-webkit-keyframes PriceButton--legion {
    0% {
        opacity: 0
    }
    50% {
        opacity: .4
    }
    to {
        opacity: 0
    }
}

@keyframes PriceButton--legion {
    0% {
        opacity: 0
    }
    50% {
        opacity: .4
    }
    to {
        opacity: 0
    }
}

.Progressbar {
    background-color: #181818;
    -webkit-box-shadow: inset 0 0 16px #000;
    box-shadow: inset 0 0 16px #000;
    color: #000;
    position: relative;
    min-height: 28px
}

.Progressbar-border {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: transparent;
    z-index: 1
}

.Progressbar-progress {
    background-color: #01b2f1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%
}

.Progressbar-content {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    position: relative;
    text-align: center;
    padding: 5px;
    min-height: 1.5em
}

@media (min-width: 720px) {
    .Progressbar-content {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Progressbar-content {
        font-size: 1.2rem
    }
}

.Progressbar-content.zh-cn, .zh-cn .Progressbar-content {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Progressbar-content, .Progressbar-content.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Progressbar-content.ru-ru, .ru-ru .Progressbar-content {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Progressbar-content.zh-tw, .zh-tw .Progressbar-content {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Progressbar-fraction {
    display: none
}

.Progressbar-percent {
    display: none;
    margin-left: 10px
}

.Progressbar-body {
    color: #cacaca;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Progressbar-body {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Progressbar-body {
        font-size: 1.44rem
    }
}

.Progressbar--ACHIEVEMENT > .Progressbar-progress {
    background: #a6d6ac;
    background: -webkit-gradient(linear, left top, right top, from(#72be7b), to(#a6d6ac));
    background: linear-gradient(90deg, #72be7b 0, #a6d6ac)
}

.Progressbar--HEALTH > .Progressbar-progress {
    background: #91c24e;
    background: -webkit-gradient(linear, left top, right top, from(#699132), to(#91c24e));
    background: linear-gradient(90deg, #699132 0, #91c24e)
}

.Progressbar--MANA > .Progressbar-progress {
    background: #0081ff;
    background: -webkit-gradient(linear, left top, right top, from(#005ab3), to(#0081ff));
    background: linear-gradient(90deg, #005ab3 0, #0081ff)
}

.Progressbar--FOCUS > .Progressbar-progress {
    background: #ece25d;
    background: -webkit-gradient(linear, left top, right top, from(#e2d41b), to(#ece25d));
    background: linear-gradient(90deg, #e2d41b 0, #ece25d)
}

.Progressbar--RAGE > .Progressbar-progress {
    background: #9d1e1e;
    background: -webkit-gradient(linear, left top, right top, from(#5d1212), to(#9d1e1e));
    background: linear-gradient(90deg, #5d1212 0, #9d1e1e)
}

.Progressbar--RUNIC > .Progressbar-progress {
    background: #00accb;
    background: -webkit-gradient(linear, left top, right top, from(#006b7e), to(#00accb));
    background: linear-gradient(90deg, #006b7e 0, #00accb)
}

.Progressbar--EXALTED > .Progressbar-progress {
    background: #28a687;
    background: -webkit-gradient(linear, left top, right top, from(#196855), to(#28a687));
    background: linear-gradient(90deg, #196855 0, #28a687)
}

.Progressbar--FRIENDLY > .Progressbar-progress, .Progressbar--HONORED > .Progressbar-progress, .Progressbar--REVERED > .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Progressbar--NEUTRAL > .Progressbar-progress {
    background: #edba03;
    background: -webkit-gradient(linear, left top, right top, from(#a17f02), to(#edba03));
    background: linear-gradient(90deg, #a17f02 0, #edba03)
}

.Progressbar--UNFRIENDLY > .Progressbar-progress {
    background: #cc3609;
    background: -webkit-gradient(linear, left top, right top, from(#832306), to(#cc3609));
    background: linear-gradient(90deg, #832306 0, #cc3609)
}

.Progressbar--HATED > .Progressbar-progress, .Progressbar--HOSTILE > .Progressbar-progress {
    background: #d90e03;
    background: -webkit-gradient(linear, left top, right top, from(#8e0902), to(#d90e03));
    background: linear-gradient(90deg, #8e0902 0, #d90e03)
}

.Progressbar--STRANGER > .Progressbar-progress {
    background: #cc3609;
    background: -webkit-gradient(linear, left top, right top, from(#832306), to(#cc3609));
    background: linear-gradient(90deg, #832306 0, #cc3609)
}

.Progressbar--ACQUAINTANCE > .Progressbar-progress {
    background: #edba03;
    background: -webkit-gradient(linear, left top, right top, from(#a17f02), to(#edba03));
    background: linear-gradient(90deg, #a17f02 0, #edba03)
}

.Progressbar--BUDDY > .Progressbar-progress, .Progressbar--FRIEND > .Progressbar-progress, .Progressbar--GOOD_FRIEND > .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Progressbar--BEST_FRIEND > .Progressbar-progress {
    background: #28a687;
    background: -webkit-gradient(linear, left top, right top, from(#196855), to(#28a687));
    background: linear-gradient(90deg, #196855 0, #28a687)
}

.Progressbar--BODYGUARD > .Progressbar-progress, .Progressbar--TRUSTED_BODYGUARD > .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Progressbar--PERSONAL_WINGMAN > .Progressbar-progress {
    background: #28a687;
    background: -webkit-gradient(linear, left top, right top, from(#196855), to(#28a687));
    background: linear-gradient(90deg, #196855 0, #28a687)
}

.Reputation--BRONZE_ALLY .Progressbar-progress, .Reputation--CHRONO-FRIEND .Progressbar-progress, .Reputation--EPOCH-MENDER .Progressbar-progress, .Reputation--TEMPORAL_TRAINEE .Progressbar-progress, .Reputation--TIMEHOPPER .Progressbar-progress, .Reputation--WHELPLING .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Progressbar--TIMELORD .Progressbar-progress {
    background: #28a687;
    background: -webkit-gradient(linear, left top, right top, from(#196855), to(#28a687));
    background: linear-gradient(90deg, #196855 0, #28a687)
}

.Reputation--RANK_1 .Progressbar-progress, .Reputation--RANK_2 .Progressbar-progress, .Reputation--RANK_3 .Progressbar-progress, .Reputation--RANK_4 .Progressbar-progress, .Reputation--RANK_5 .Progressbar-progress, .Reputation--RANK_6 .Progressbar-progress, .Reputation--RANK_7 .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Reputation--RANK_8 .Progressbar-progress {
    background: #28a687;
    background: -webkit-gradient(linear, left top, right top, from(#196855), to(#28a687));
    background: linear-gradient(90deg, #196855 0, #28a687)
}

.Progressbar--reputation-default > .Progressbar-progress {
    background: #0f9601;
    background: -webkit-gradient(linear, left top, right top, from(#074a00), to(#0f9601));
    background: linear-gradient(90deg, #074a00 0, #0f9601)
}

.Progressbar--red > .Progressbar-progress {
    background: #b30000;
    background: -webkit-gradient(linear, left top, right top, from(#600), to(#b30000));
    background: linear-gradient(90deg, #600 0, #b30000)
}

.Progressbar--yellow > .Progressbar-progress {
    background: #fff468;
    background: -webkit-gradient(linear, left top, right top, from(#ffee1b), to(#fff468));
    background: linear-gradient(90deg, #ffee1b 0, #fff468)
}

.Progressbar--green > .Progressbar-progress {
    background: #91c24e;
    background: -webkit-gradient(linear, left top, right top, from(#699132), to(#91c24e));
    background: linear-gradient(90deg, #699132 0, #91c24e)
}

.Progressbar--blue > .Progressbar-progress {
    background: #0081ff;
    background: -webkit-gradient(linear, left top, right top, from(#005ab3), to(#0081ff));
    background: linear-gradient(90deg, #005ab3 0, #0081ff)
}

.Progressbar--orange > .Progressbar-progress {
    background: #f63;
    background: -webkit-gradient(linear, left top, right top, from(#e53900), to(#f63));
    background: linear-gradient(90deg, #e53900 0, #f63)
}

.Progressbar--grey > .Progressbar-progress {
    background: #444;
    background: -webkit-gradient(linear, left top, right top, from(#1e1e1e), to(#444));
    background: linear-gradient(90deg, #1e1e1e 0, #444)
}

.Progressbar--levelColor > .Progressbar-progress[data-progressLevel=low], .Progressbar--low > .Progressbar-progress {
    background: #99755c;
    background: -webkit-gradient(linear, left top, right top, from(#69503f), to(#99755c));
    background: linear-gradient(90deg, #69503f 0, #99755c)
}

.Progressbar--levelColor > .Progressbar-progress[data-progressLevel=medium], .Progressbar--medium > .Progressbar-progress {
    background: #c76700;
    background: -webkit-gradient(linear, left top, right top, from(#7b3f00), to(#c76700));
    background: linear-gradient(90deg, #7b3f00 0, #c76700)
}

.Progressbar--high > .Progressbar-progress, .Progressbar--levelColor > .Progressbar-progress[data-progressLevel=high] {
    background: #1b9601;
    background: -webkit-gradient(linear, left top, right top, from(#0d4a00), to(#1b9601));
    background: linear-gradient(90deg, #0d4a00 0, #1b9601)
}

.Progressbar--fraction .Progressbar-fraction, .Progressbar--percent .Progressbar-percent {
    display: inline-block
}

.Progressbar--poll .Progressbar-progress {
    background-color: #fcab00
}

.Progressbar--poll .Progressbar-content {
    min-height: 20px
}

.Progressbar--large .Progressbar-content {
    padding: 10px
}

.Progressbar--leftText .Progressbar-content {
    text-align: left;
    margin-left: 10px
}

.Progressbar--border {
    border: 1px solid rgba(177, 153, 127, .5)
}

.Quote {
    color: #cacaca;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.296rem;
    line-height: 1.5;
    margin: 20px 40px
}

@media (min-width: 720px) {
    .Quote {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Quote {
        font-size: 1.728rem
    }
}

.Quote--addQuotationMarks:before {
    content: "“"
}

.Quote--addQuotationMarks:after {
    content: "”"
}

.ru-ru .Quote--addQuotationMarks:before {
    content: "«"
}

.ru-ru .Quote--addQuotationMarks:after {
    content: "»"
}

.de-de .Quote--addQuotationMarks:before {
    content: "„"
}

.de-de .Quote--addQuotationMarks:after {
    content: "”"
}

.es-es .Quote--addQuotationMarks:before {
    content: "„"
}

.es-es .Quote--addQuotationMarks:after {
    content: "”"
}

.fr-fr .Quote--addQuotationMarks:before {
    content: "« "
}

.fr-fr .Quote--addQuotationMarks:after {
    content: " »"
}

.pt-br .Quote--addQuotationMarks:before, .pt-pt .Quote--addQuotationMarks:before {
    content: "“"
}

.pt-br .Quote--addQuotationMarks:after, .pt-pt .Quote--addQuotationMarks:after {
    content: "”"
}

.Quote--small {
    font-size: 1.08rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Quote--small {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Quote--small {
        font-size: 1.44rem
    }
}

.Quote--large {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1.866rem;
    line-height: 1.5;
    font-weight: 400
}

.Quote--large.zh-cn, .zh-cn .Quote--large {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Quote--large, .Quote--large.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Quote--large.ru-ru, .ru-ru .Quote--large {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Quote--large.zh-tw, .zh-tw .Quote--large {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Quote--large {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .Quote--large {
        font-size: 2.488rem
    }
}

.Quote--overImage {
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    line-height: 2em
}

.Quote--overImage .Quote-text {
    background-color: rgba(0, 0, 0, .75);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #fff;
    display: inline;
    padding: .125em .5em
}

.Quote--pullLeft, .Quote--pullRight {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    clear: both;
    display: block;
    font-weight: 700;
    left: 15%;
    line-height: 2em;
    margin-left: 30px;
    padding: .125em .5em;
    position: relative;
    text-align: center;
    width: 200px
}

@media (min-width: 720px) {
    .Quote--pullLeft, .Quote--pullRight {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Quote--pullLeft, .Quote--pullRight {
        font-size: 1.728rem
    }
}

.Quote--pullLeft.zh-cn, .Quote--pullRight.zh-cn, .zh-cn .Quote--pullLeft, .zh-cn .Quote--pullRight {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Quote--pullLeft, .ko-kr .Quote--pullRight, .Quote--pullLeft.ko-kr, .Quote--pullRight.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Quote--pullLeft.ru-ru, .Quote--pullRight.ru-ru, .ru-ru .Quote--pullLeft, .ru-ru .Quote--pullRight {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Quote--pullLeft.zh-tw, .Quote--pullRight.zh-tw, .zh-tw .Quote--pullLeft, .zh-tw .Quote--pullRight {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 540px) {
    .Quote--pullLeft, .Quote--pullRight {
        left: 20%
    }
}

@media (min-width: 720px) {
    .Quote--pullLeft, .Quote--pullRight {
        left: 30%
    }
}

@media (min-width: 980px) {
    .Quote--pullLeft {
        float: left;
        left: -200px;
        margin: 10px -150px 10px 10px;
        text-align: left;
        width: 400px
    }
}

@media (min-width: 980px) {
    .Quote--pullRight {
        float: right;
        left: 200px;
        margin: 10px 10px 10px -150px;
        text-align: left;
        width: 400px
    }
}

.RaceTile-content {
    position: relative;
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    border: 1px solid #333;
    background: url(../components/racetile/assets_subdomain/racetile-background.47c3e8cd54ec66965c668752f1992505.jpg) 50% no-repeat;
    background-size: cover
}

.RaceTile-content:before {
    content: "";
    display: block;
    padding-top: 133.33333333%
}

.RaceTile.fixed-static-small .RaceTile-content {
    border-width: 2px
}

.RaceTile-backWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.RaceTile-back, .RaceTile-front {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 123.5%;
    height: 119.25%;
    background-size: cover;
    background-position: 50%;
    -webkit-transform: translate(-50%) scale(1);
    transform: translate(-50%) scale(1);
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s
}

.RaceTile-front {
    pointer-events: none
}

.RaceTile-name {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .RaceTile-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .RaceTile-name {
        font-size: 1.44rem
    }
}

.RaceTile-name.zh-cn, .zh-cn .RaceTile-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .RaceTile-name, .RaceTile-name.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.RaceTile-name.ru-ru, .ru-ru .RaceTile-name {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.RaceTile-name.zh-tw, .zh-tw .RaceTile-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.RaceTile-emblem {
    position: relative;
    width: 56px;
    height: 56px;
    background-size: cover;
    background-position: 50%
}

.RaceTile-emblem:before {
    content: "";
    display: block;
    padding-top: 100%
}

.RaceTile--horde .RaceTile-content {
    border-color: #b30000
}

.RaceTile--horde .RaceTile-content .RaceTile-emblem {
    background-image: url(../components/racetile/assets_subdomain/racetile-emblem-horde.92e86624e796446ef43ed3fe08f6d45f.png)
}

.RaceTile--alliance .RaceTile-content {
    border-color: #0078ff
}

.RaceTile--alliance .RaceTile-content .RaceTile-emblem {
    background-image: url(../components/racetile/assets_subdomain/racetile-emblem-alliance.fdb465cb222deb6db535f901ff2239c6.png)
}

html:not(.touch) .RaceTile-link:hover .RaceTile-content {
    border-color: #f8b700
}

html:not(.touch) .RaceTile-link:hover .RaceTile-back, html:not(.touch) .RaceTile-link:hover .RaceTile-front {
    -webkit-transform: translate3d(-50%, 0, 0) scale(1.1);
    transform: translate3d(-50%, 0, 0) scale(1.1)
}

html:not(.touch) .RaceTile-link:hover .RaceTile-name {
    color: #fff
}

.RaidDifficultyDetails--noProgressbar .RaidDifficultyDetails-progressbar {
    display: none
}

.RaidDifficultyDetails-bossKills {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    grid-column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px
}

.RaidDifficultyDetails--stackBossKills .RaidDifficultyDetails-bossKills {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    grid-column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px
}

.RaidProgress {
    background: url(../components/raidprogress/assets_subdomain/raidprogress-background.ee8e1e8d1ca604e2fc28a8e14877bc62.jpg);
    background-position: top;
    border: 1px solid #3f4f56
}

.RaidProgress-header {
    padding: 0 20px
}

.RaidProgress-header.gutter-vertical {
    padding: 20px 0
}

.RaidProgress-header.gutter-all {
    padding: 20px
}

.RaidProgress-header.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.RaidProgress-header.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.RaidProgress-header.gutter-negative.gutter-all {
    margin: -20px
}

.RaidProgress-image {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

html:not(.touch) .ControlledModalToggle:hover .RaidProgress-image {
    cursor: pointer;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1)
}

.RaidProgress-name {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .RaidProgress-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .RaidProgress-name {
        font-size: 1.44rem
    }
}

.RaidProgress-name.zh-cn, .zh-cn .RaidProgress-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .RaidProgress-name, .RaidProgress-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.RaidProgress-name.zh-tw, .zh-tw .RaidProgress-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .RaidProgress-name.ControlledModalToggle:hover, html:not(.touch) .RaidProgress-title:hover .RaidProgress-name {
    cursor: pointer;
    color: #fff
}

.RaidProgress-level {
    text-align: left;
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #b1997f;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    padding: 0
}

@media (min-width: 720px) {
    .RaidProgress-level {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .RaidProgress-level {
        font-size: 1rem
    }
}

.RaidProgress-level.zh-cn, .zh-cn .RaidProgress-level {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .RaidProgress-level, .RaidProgress-level.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.RaidProgress-level.zh-tw, .zh-tw .RaidProgress-level {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.RaidProgress-body {
    padding: 0 20px
}

.RaidProgress-body.gutter-vertical {
    padding: 20px 0
}

.RaidProgress-body.gutter-all {
    padding: 20px
}

.RaidProgress-body.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.RaidProgress-body.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.RaidProgress-body.gutter-negative.gutter-all {
    margin: -20px
}

.RaidProgress-difficulty {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    text-transform: uppercase
}

@media (min-width: 720px) {
    .RaidProgress-difficulty {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .RaidProgress-difficulty {
        font-size: 1rem
    }
}

.RaidProgress-difficulty.zh-cn, .zh-cn .RaidProgress-difficulty {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .RaidProgress-difficulty, .RaidProgress-difficulty.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.RaidProgress-difficulty.ru-ru, .ru-ru .RaidProgress-difficulty {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.RaidProgress-difficulty.zh-tw, .zh-tw .RaidProgress-difficulty {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.RaidProgress--bgFade .RaidProgress-head {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, rgba(0, 0, 0, .5)), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 80%, hsla(0, 0%, 100%, 0))
}

.RaidProgress-difficulties {
    width: 100%
}

.RaidProgress-difficulty {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    border-bottom: 16px solid transparent
}

html:not(.touch) .RaidProgress-difficulty:hover {
    color: #fff;
    cursor: pointer
}

.RaidProgress-difficulty-name {
    width: 25%
}

.RaidProgress-difficulty-progress {
    width: 75%
}

.RaidProgress-slide {
    width: 66%
}

.Ratiobar {
    background-color: #181818;
    color: #fff;
    position: relative;
    display: table;
    width: 100%;
    height: 30px
}

.Ratiobar-left, .Ratiobar-right {
    display: table-cell;
    position: relative;
    vertical-align: middle
}

.Ratiobar-left {
    text-align: left;
    padding-left: 20px
}

.Ratiobar-right {
    text-align: right;
    padding-right: 20px
}

.Ratiobar-value {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    display: inline-block
}

@media (min-width: 720px) {
    .Ratiobar-value {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Ratiobar-value {
        font-size: 1.44rem
    }
}

.Ratiobar-value.zh-cn, .zh-cn .Ratiobar-value {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Ratiobar-value, .Ratiobar-value.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Ratiobar-value.ru-ru, .ru-ru .Ratiobar-value {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Ratiobar-value.zh-tw, .zh-tw .Ratiobar-value {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Ratiobar-percent {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: inline-block;
    padding-right: 10px
}

@media (min-width: 720px) {
    .Ratiobar-percent {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Ratiobar-percent {
        font-size: 1.44rem
    }
}

.Ratiobar-percent.zh-cn, .zh-cn .Ratiobar-percent {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Ratiobar-percent, .Ratiobar-percent.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Ratiobar-percent.zh-tw, .zh-tw .Ratiobar-percent {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Ratiobar-value + .Ratiobar-percent {
    padding-left: 10px;
    padding-right: 0
}

.Ratiobar--separator .Ratiobar-right:before, .Ratiobar--winLoss .Ratiobar-right:before {
    background-color: #504137;
    content: "";
    height: 100%;
    left: -2px;
    position: absolute;
    top: 0;
    width: 4px
}

.Ratiobar--winLoss .Ratiobar-left {
    background-color: #0f0
}

.Ratiobar--winLoss .Ratiobar-right {
    background-color: #db2300
}

.Reputation {
    position: relative
}

.Reputation-title {
    padding-top: 5px
}

.Reputation-title > * {
    display: inline-block
}

.Reputation-progress {
    padding: 6.66666667px 0
}

.Reputation-name.Reputation-subsection {
    color: #fff;
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 400
}

@media (min-width: 720px) {
    .Reputation-name.Reputation-subsection {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Reputation-name.Reputation-subsection {
        font-size: 1.728rem
    }
}

.Reputation-name.Reputation-subsection.zh-cn, .zh-cn .Reputation-name.Reputation-subsection {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Reputation-name.Reputation-subsection, .Reputation-name.Reputation-subsection.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Reputation-name.Reputation-subsection.ru-ru, .ru-ru .Reputation-name.Reputation-subsection {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Reputation-name.Reputation-subsection.zh-tw, .zh-tw .Reputation-name.Reputation-subsection {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Reputation-name, .Reputation-standing {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-shadow: none;
    line-height: 1.6;
    margin: 0
}

@media (min-width: 720px) {
    .Reputation-name, .Reputation-standing {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Reputation-name, .Reputation-standing {
        font-size: 1.44rem
    }
}

.Reputation-name.zh-cn, .Reputation-standing.zh-cn, .zh-cn .Reputation-name, .zh-cn .Reputation-standing {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Reputation-name, .ko-kr .Reputation-standing, .Reputation-name.ko-kr, .Reputation-standing.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Reputation-name.ru-ru, .Reputation-standing.ru-ru, .ru-ru .Reputation-name, .ru-ru .Reputation-standing {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Reputation-name.zh-tw, .Reputation-standing.zh-tw, .zh-tw .Reputation-name, .zh-tw .Reputation-standing {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Reputation-standing {
    position: absolute;
    right: 0;
    text-align: right
}

.Reputation-progress .Progressbar-body {
    line-height: 1.5em;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-align: left;
    padding-left: 10px
}

@media (min-width: 720px) {
    .Reputation-progress .Progressbar-body {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Reputation-progress .Progressbar-body {
        font-size: 1rem
    }
}

.Reputation-progress .Progressbar-body.zh-cn, .zh-cn .Reputation-progress .Progressbar-body {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Reputation-progress .Progressbar-body, .Reputation-progress .Progressbar-body.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Reputation-progress .Progressbar-body.ru-ru, .ru-ru .Reputation-progress .Progressbar-body {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Reputation-progress .Progressbar-body.zh-tw, .zh-tw .Reputation-progress .Progressbar-body {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Reputation--DEFAULT .Reputation-standing {
    color: #0f9601
}

.Reputation--EXALTED .Reputation-standing {
    color: #28a687
}

.Reputation--FRIENDLY .Reputation-standing, .Reputation--HONORED .Reputation-standing, .Reputation--REVERED .Reputation-standing {
    color: #0f9601
}

.Reputation--NEUTRAL .Reputation-standing {
    color: #edba03
}

.Reputation--UNFRIENDLY .Reputation-standing {
    color: #cc3609
}

.Reputation--HATED .Reputation-standing, .Reputation--HOSTILE .Reputation-standing {
    color: #d90e03
}

.Reputation--STRANGER .Reputation-standing {
    color: #cc3609
}

.Reputation--ACQUAINTANCE .Reputation-standing {
    color: #edba03
}

.Reputation--BUDDY .Reputation-standing, .Reputation--FRIEND .Reputation-standing, .Reputation--GOOD_FRIEND .Reputation-standing {
    color: #0f9601
}

.Reputation--BEST_FRIEND .Reputation-standing {
    color: #28a687
}

.Reputation--BODYGUARD .Reputation-standing, .Reputation--TRUSTED_BODYGUARD .Reputation-standing {
    color: #0f9601
}

.Reputation--PERSONAL_WINGMAN .Reputation-standing {
    color: #28a687
}

.Reputation--BRONZE_ALLY .Reputation-standing, .Reputation--CHRONO-FRIEND .Reputation-standing, .Reputation--EPOCH-MENDER .Reputation-standing, .Reputation--TEMPORAL_TRAINEE .Reputation-standing, .Reputation--TIMEHOPPER .Reputation-standing, .Reputation--WHELPLING .Reputation-standing {
    color: #0f9601
}

.Reputation--TIMELORD .Reputation-standing {
    color: #28a687
}

.Reputation--RANK_1 .Reputation-standing, .Reputation--RANK_2 .Reputation-standing, .Reputation--RANK_3 .Reputation-standing, .Reputation--RANK_4 .Reputation-standing, .Reputation--RANK_5 .Reputation-standing, .Reputation--RANK_6 .Reputation-standing, .Reputation--RANK_7 .Reputation-standing {
    color: #0f9601
}

.Reputation--RANK_8 .Reputation-standing {
    color: #28a687
}

.Reputation--wide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.Reputation--wide:after, .Reputation--wide:before {
    content: "";
    display: table;
    clear: both
}

.Reputation--wide .Reputation-title {
    text-align: center;
    padding-top: 24px
}

.Reputation--wide .Reputation-name {
    clear: none;
    float: left;
    width: 25%;
    text-align: right;
    padding: 6.66666667px
}

.Reputation--wide .Reputation-progress {
    clear: none;
    float: left;
    width: 50%;
    padding: 6.66666667px
}

.Reputation--wide .Reputation-standing {
    clear: none;
    float: left;
    width: 25%;
    padding: 6.66666667px;
    text-align: left
}

.Separator > * {
    position: relative
}

.Separator > :after, .Separator > :before {
    content: "";
    top: 0;
    bottom: 0;
    width: 2px;
    position: absolute;
    background: #000;
    z-index: 1
}

.Separator > :before {
    left: 0
}

.Separator > :after {
    right: 0
}

.Separator > :first-child:before, .Separator > :last-child:after {
    display: none
}

.Separator > * > .bordered:before {
    left: 2px;
    right: 2px
}

.Separator > :first-child > .bordered:before {
    left: 0
}

.Separator > :last-child > .bordered:before {
    right: 0
}

.Separator--borders > :before {
    border-left: 1px solid #504137
}

.Separator--borders > :after {
    border-right: 1px solid #504137
}

.Separator--bordersFadeTop > :before {
    border: solid #504137;
    border-width: 0 0 0 1px;
    -o-border-image: linear-gradient(180deg, rgba(80, 65, 55, 0) 0, #504137) 1;
    border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 65, 55, 0)), to(#504137)) 1;
    border-image: linear-gradient(180deg, rgba(80, 65, 55, 0) 0, #504137) 1
}

.Separator--bordersFadeTop > :after, .Separator--bordersFadeTop > :before {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
    background: linear-gradient(180deg, transparent 0, #000);
    background-clip: content-box
}

.Separator--bordersFadeTop > :after {
    border: solid #504137;
    border-width: 0 1px 0 0;
    -o-border-image: linear-gradient(180deg, rgba(80, 65, 55, 0) 0, #504137) 1;
    border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 65, 55, 0)), to(#504137)) 1;
    border-image: linear-gradient(180deg, rgba(80, 65, 55, 0) 0, #504137) 1
}

.Separator--bordersFadeBottom > :before {
    border: solid #504137;
    border-width: 0 0 0 1px;
    -o-border-image: linear-gradient(180deg, #504137 0, rgba(80, 65, 55, 0)) 1;
    border-image: -webkit-gradient(linear, left top, left bottom, from(#504137), to(rgba(80, 65, 55, 0))) 1;
    border-image: linear-gradient(180deg, #504137 0, rgba(80, 65, 55, 0)) 1
}

.Separator--bordersFadeBottom > :after, .Separator--bordersFadeBottom > :before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
    background: linear-gradient(180deg, #000 0, transparent);
    background-clip: content-box
}

.Separator--bordersFadeBottom > :after {
    border: solid #504137;
    border-width: 0 1px 0 0;
    -o-border-image: linear-gradient(180deg, #504137 0, rgba(80, 65, 55, 0)) 1;
    border-image: -webkit-gradient(linear, left top, left bottom, from(#504137), to(rgba(80, 65, 55, 0))) 1;
    border-image: linear-gradient(180deg, #504137 0, rgba(80, 65, 55, 0)) 1
}

.Separator--fade > :after, .Separator--fade > :before {
    width: 1px;
    border: 0
}

.Separator--fade > :before {
    background: #504137;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 65, 55, 0)), color-stop(40%, #504137), color-stop(60%, #504137), to(rgba(80, 65, 55, 0)));
    background: linear-gradient(180deg, rgba(80, 65, 55, 0) 0, #504137 40%, #504137 60%, rgba(80, 65, 55, 0))
}

.Separator--fade > :after {
    background: #211510;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, #000), color-stop(60%, #000), to(transparent));
    background: linear-gradient(180deg, transparent 0, #000 40%, #000 60%, transparent)
}

.Separator--fade > * > .bordered:before {
    left: 1px;
    right: 1px
}

.Separator--vertical > :after, .Separator--vertical > :before {
    top: auto;
    bottom: auto;
    width: 100%;
    left: 0;
    right: 0;
    height: 2px
}

.Separator--vertical > :before {
    top: 0
}

.Separator--vertical > :after {
    bottom: 0
}

.Separator--vertical > * > .bordered:before {
    left: 0;
    right: 0;
    top: 2px;
    bottom: 2px
}

.Separator--vertical > :first-child > .bordered:before {
    top: 0
}

.Separator--vertical > :last-child > .bordered:before {
    bottom: 0
}

.Separator--vertical.Separator--borders > :before {
    border-top: 1px solid #504137
}

.Separator--vertical.Separator--borders > :after {
    border-bottom: 1px solid #504137
}

.SiteFooter {
    padding: 30px 0
}

.SiteFooter > .NavbarFooter {
    margin-top: 0;
    margin-bottom: 0
}

.SiteFooter > .NavbarFooter > .NavbarFooter-legal {
    padding-bottom: 0
}

.SocialLinks {
    color: #ebdec2;
    text-align: center
}

@media (min-width: 720px) {
    .SocialLinks {
        display: table;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .SocialLinks > .List-item {
        vertical-align: middle
    }
}

.SocialLinks-title {
    text-transform: uppercase;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.5;
    padding: 10px 0
}

.SocialLinks-title.zh-cn, .zh-cn .SocialLinks-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SocialLinks-title, .SocialLinks-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SocialLinks-title, .SocialLinks-title.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SocialLinks-title.zh-tw, .zh-tw .SocialLinks-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .SocialLinks-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .SocialLinks-title {
        font-size: 1.44rem
    }
}

@media (min-width: 720px) {
    .SocialLinks-links {
        display: table-cell;
        height: 100%;
        padding: 0 20px
    }
}

.SocialLinks-link {
    color: #f8b700;
    padding: 0 10px;
    display: inline-block
}

html:not(.touch) .SocialLinks-link:hover {
    color: #fff
}

.SocialLinks--onLight, .SocialLinks--onLight > .SocialLinks-links .SocialLinks-link {
    color: #211510
}

.SocialLinks--stacked .SocialLinks-links {
    display: block;
    padding: 10px 0
}

.SocialLinks--legion .SocialLinks-title {
    color: #fff
}

.SocialLinks--legion .SocialLinks-link {
    color: #13ff29
}

html:not(.touch) .SocialLinks--legion .SocialLinks-link:hover {
    color: #fff
}

.SocialLinks--ocho .SocialLinks-title {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #ede0c9 20%, #8a7e66);
    background-size: 1.3em 1.3em;
    background-position: top;
    color: #ede0c9;
    display: inline-block;
    line-height: 1.3em;
    text-shadow: none;
    position: relative
}

.SocialLinks--ocho .SocialLinks-link {
    color: #cacaca
}

html:not(.touch) .SocialLinks--ocho .SocialLinks-link:hover {
    color: #fff
}

.StatDetails-name, .StatDetails-rating-name {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .StatDetails-name, .StatDetails-rating-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .StatDetails-name, .StatDetails-rating-name {
        font-size: 1.44rem
    }
}

.StatDetails-name.zh-cn, .StatDetails-rating-name.zh-cn, .zh-cn .StatDetails-name, .zh-cn .StatDetails-rating-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .StatDetails-name, .ko-kr .StatDetails-rating-name, .StatDetails-name.ko-kr, .StatDetails-rating-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .StatDetails-name, .ru-ru .StatDetails-rating-name, .StatDetails-name.ru-ru, .StatDetails-rating-name.ru-ru {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.StatDetails-name.zh-tw, .StatDetails-rating-name.zh-tw, .zh-tw .StatDetails-name, .zh-tw .StatDetails-rating-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.StatDetails-body {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .StatDetails-body {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .StatDetails-body {
        font-size: 1.2rem
    }
}

.StatDetails-body.zh-cn, .zh-cn .StatDetails-body {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

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

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

.StatDetails-body.zh-tw, .zh-tw .StatDetails-body {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

span.StatDetails-name + span.StatDetails-basic-value, span.StatDetails-name + span.StatDetails-effective, span.StatDetails-rating-name + span.StatDetails-rating-value {
    padding-left: 4px
}

.StatDetails-rating-name {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .StatDetails-rating-name {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .StatDetails-rating-name {
        font-size: 1.2rem
    }
}

.StatDetails-rating-name.zh-cn, .zh-cn .StatDetails-rating-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .StatDetails-rating-name, .StatDetails-rating-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .StatDetails-rating-name, .StatDetails-rating-name.ru-ru {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.StatDetails-rating-name.zh-tw, .zh-tw .StatDetails-rating-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Status {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    display: inline-block !important
}

@media (min-width: 720px) {
    .Status {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Status {
        font-size: 1.44rem
    }
}

.Status.zh-cn, .zh-cn .Status {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

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

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

.Status.zh-tw, .zh-tw .Status {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Status--smallGutter {
    padding: 0 10px
}

.Status--smallGutter.gutter-vertical {
    padding: 10px 0
}

.Status--smallGutter.gutter-all {
    padding: 10px
}

.Status--smallGutter.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.Status--smallGutter.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.Status--smallGutter.gutter-negative.gutter-all {
    margin: -10px
}

.Status--upper {
    text-transform: uppercase
}

.Status--live {
    background-color: #d21313
}

.Status--offline {
    background-color: #476371
}

.Table {
    display: table;
    margin: 0 auto;
    position: relative
}

.Table-head {
    display: table-header-group
}

.Table-noData {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin: 12px auto;
    position: absolute;
    width: 100%;
    max-width: 600px;
    bottom: 0;
    left: 0
}

@media (min-width: 720px) {
    .Table-noData {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Table-noData {
        font-size: 1.44rem
    }
}

.Table-noData.zh-cn, .zh-cn .Table-noData {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Table-noData, .Table-noData.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Table-noData.zh-tw, .zh-tw .Table-noData {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Table-body {
    display: table-row-group
}

.Table-row {
    color: #b1997f;
    display: table-row
}

.Table--animated .Table-row {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s
}

.Table-row--empty {
    position: relative;
    height: 100px
}

.Table-row--highlighted .Table-data {
    background-color: hsla(0, 0%, 100%, .1);
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.Table-row--highlighted .Table-data:first-of-type {
    border-left: 1px solid hsla(0, 0%, 100%, .1)
}

.Table-row--highlighted .Table-data:last-of-type {
    border-right: 1px solid hsla(0, 0%, 100%, .1)
}

.Table-row:nth-child(odd) .Table-data {
    background: hsla(0, 0%, 100%, .04)
}

.Table-row[disabled] {
    color: #cacaca
}

.Table-data {
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    padding: 10px;
    vertical-align: middle;
    position: relative
}

@media (min-width: 720px) {
    .Table-data {
        height: 48px;
        padding: 0 20px
    }
}

.Table-col {
    display: table-cell
}

.Table-col.is-hidden {
    display: none !important
}

.Table-col--hardEdges {
    padding-left: 0;
    padding-right: 0
}

.Table-label {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.5;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
    border: 0;
    color: #fff;
    cursor: default;
    padding: 1px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1px transparent, 1px 1px 0 #000, 1px 1px 0 #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: table-cell
}

.Table-label.zh-cn, .zh-cn .Table-label {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Table-label, .Table-label.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .Table-label, .Table-label.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Table-label.zh-tw, .zh-tw .Table-label {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Table-label {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Table-label {
        font-size: 1.44rem
    }
}

.Table-label.is-interactive {
    color: #f8b700;
    cursor: pointer
}

.Table-label:active .Table-labelOuter {
    top: 0
}

.Table-label, .Table-labelOuter {
    padding-right: 0
}

.Table-labelOuter {
    display: block;
    padding: 1px;
    position: relative;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Table-labelOuter:focus, html:not(.touch) .Table-labelOuter:hover {
    color: #fff
}

.Table-labelInner {
    display: block;
    padding: 13px 58px;
    position: relative
}

.Table-labelText {
    display: inline;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 0 #000, 1px 1px 0 #000
}

.Table-label:last-child, .Table-label:last-child .Table-labelOuter {
    padding-right: 1px
}

.Table-labelInner, .Table-labelOuter {
    display: block;
    width: 100%
}

.Table-label .Table-labelInner {
    padding-right: 10px;
    padding-left: 10px
}

.Table-label.is-sorted, .Table-label.is-sorted-reverse {
    color: #fff;
    position: relative
}

.Table-label.is-sorted-reverse .Table-labelText:after, .Table-label.is-sorted .Table-labelText:after {
    border-top: 5px solid #f8b700;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: 25%;
    content: "";
    height: 0;
    right: -15px;
    position: absolute;
    width: 0
}

.Table-label.is-sorted-reverse .Table-labelText:after {
    border-top: none;
    border-bottom: 5px solid #f8b700;
    bottom: auto;
    top: 45%
}

.Table--alignTop .Table-data {
    vertical-align: top
}

.Table--dataPadding .Table-data {
    padding: 10px
}

.Table-row:last-child:nth-child(odd) .Table-data {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.Table-row:last-child:nth-child(2n) .Table-data {
    border-bottom: 0
}

.Table-status {
    vertical-align: middle
}

.Table.is-resizing .Table-col {
    display: inline-block !important;
    width: auto !important
}

.Table--vertical-align-middle .Table-col, .Table--vertical-align-middle .Table-label {
    vertical-align: middle
}

.Table--flex, .Table--stretch, .Table--stretch .Table-col[data-priority="1"] {
    width: 100%
}

.Table-row.Table-row--noDividers .Table-data {
    border-top: 0
}

.Table-row:last-child:nth-child(odd).Table-row--noDividers .Table-data {
    border-bottom: 0
}

.Table-row.Table-row--tall .Table-data {
    padding-top: 15px;
    padding-bottom: 20px
}

.Table-row.Table-row--ghost {
    background: hsla(0, 0%, 100%, .02)
}

.Table-row--bordered > .Table-data, .Table-row--bordered > .Table-label {
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.Table-label--left {
    text-align: left
}

.Table-label--right {
    text-align: right
}

.Table-label--beige .Table-labelText {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Table-label--beige .Table-labelText {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Table-label--beige .Table-labelText {
        font-size: 1rem
    }
}

.Table-label--beige .Table-labelText.zh-cn, .zh-cn .Table-label--beige .Table-labelText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Table-label--beige .Table-labelText, .Table-label--beige .Table-labelText.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .Table-label--beige .Table-labelText, .Table-label--beige .Table-labelText.ru-ru {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.Table-label--beige .Table-labelText.zh-tw, .zh-tw .Table-label--beige .Table-labelText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Table-label--white .Table-labelText {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Table-label--white .Table-labelText {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Table-label--white .Table-labelText {
        font-size: 1.44rem
    }
}

.Table-label--white .Table-labelText.zh-cn, .zh-cn .Table-label--white .Table-labelText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Table-label--white .Table-labelText, .Table-label--white .Table-labelText.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .Table-label--white .Table-labelText, .Table-label--white .Table-labelText.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Table-label--white .Table-labelText.zh-tw, .zh-tw .Table-label--white .Table-labelText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Table-data.Table-data--bg > div {
    background-color: #2a4b71;
    width: 35px;
    height: 24px
}

.Table-data.Table-data--mediumBg > div {
    background-color: #2a4b71;
    width: 26px;
    height: 18px
}

.Table-data.Table-data--smallBg > div {
    background-color: #2a4b71;
    width: 23px;
    height: 17px
}

.Table--disabled .Table-label, .Table--disabled .Table-labelOuter, .Table--disabled html:not(.touch) .Table-label:hover {
    color: #fff;
    cursor: default
}

.Table--disabled .Table-label.is-sorted-reverse .Table-labelText:after, .Table--disabled .Table-label.is-sorted .Table-labelText:after {
    display: none
}

.Tags-tag, .Tags-title {
    display: inline-block;
    margin: 3px 3px 0 0;
    text-transform: uppercase
}

.Tags-tag {
    color: #f8b700;
    padding: 0 8px
}

html:not(.touch) .Tags-tag:hover {
    text-decoration: underline
}

.Tile {
    position: relative;
    color: #fff
}

.Tile:before {
    content: "";
    display: block;
    padding-top: 56.25%
}

.Tile-area {
    overflow: hidden
}

.Tile-area, .Tile-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.Tile-bg {
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.Tile-content {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% - 40px)
}

body.z-index-reset-full .Tile-content, body.z-index-reset .Tile-content {
    z-index: auto
}

.Tile--fixed {
    width: 250px;
    width: 75vw
}

.Tile--thin {
    position: relative
}

.Tile--thin:before {
    content: "";
    display: block;
    padding-top: 33.33333333%
}

.Tile--wide {
    position: relative
}

.Tile--wide:before {
    content: "";
    display: block;
    padding-top: 50%
}

.Tile--tall {
    position: relative
}

.Tile--tall:before {
    content: "";
    display: block;
    padding-top: 200%
}

.Tile--square {
    position: relative
}

.Tile--square:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Tile--photo {
    position: relative
}

.Tile--photo:before {
    content: "";
    display: block;
    padding-top: 75%
}

.Tile--gutter > .Tile-area {
    margin: 10px
}

.Tile--transparent .Tile-bg {
    background-color: transparent
}

.Tile--border {
    border: 1px solid #504137
}

html:not(.touch) .Tile--border:hover {
    border-color: #f8b700
}

.TrapezoidLabel {
    text-align: center
}

.TrapezoidLabel-content {
    position: relative;
    display: block;
    height: 32px;
    background-color: #000;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px
}

.TrapezoidLabel-icon {
    margin-right: 8px;
    padding-top: 2px
}

.TrapezoidLabel-desc, .TrapezoidLabel-icon {
    display: inline-block;
    vertical-align: middle
}

.TrapezoidLabel-desc {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5
}

.TrapezoidLabel-desc.zh-cn, .zh-cn .TrapezoidLabel-desc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .TrapezoidLabel-desc, .TrapezoidLabel-desc.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.TrapezoidLabel-desc.zh-tw, .zh-tw .TrapezoidLabel-desc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .TrapezoidLabel-desc {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .TrapezoidLabel-desc {
        font-size: 1rem
    }
}

.TrapezoidLabel--centered .TrapezoidLabel-content {
    display: inline-block;
    padding-top: 2px
}

.TrapezoidLabel--centered .TrapezoidLabel-content:before {
    position: absolute;
    bottom: 0;
    left: -20px;
    border-bottom: 32px solid #000;
    border-left: 20px solid transparent;
    opacity: 1;
    content: ""
}

.TrapezoidLabel--centered .TrapezoidLabel-content:after {
    border-bottom: 32px solid #000;
    border-right: 20px solid transparent;
    bottom: 0;
    content: "";
    opacity: 1;
    position: absolute;
    right: -20px
}

.TrapezoidLabel--inModal {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0
}

.VideoTile-content {
    position: relative
}

.VideoTile-bottom {
    position: absolute;
    bottom: 0;
    width: 100%
}

.VideoTile-bottomInner {
    display: table;
    position: relative;
    width: 100%;
    padding: 20px;
    pointer-events: none
}

.VideoTile-left, .VideoTile-right {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    vertical-align: bottom
}

.VideoTile-right {
    text-align: right
}

.VideoTile-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    line-height: 22px
}

@media (min-width: 720px) {
    .VideoTile-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .VideoTile-title {
        font-size: 1.44rem
    }
}

.VideoTile-title.zh-cn, .zh-cn .VideoTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .VideoTile-title, .VideoTile-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .VideoTile-title, .VideoTile-title.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.VideoTile-title.zh-tw, .zh-tw .VideoTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.VideoTile--link .VideoTile-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    line-height: 22px
}

@media (min-width: 720px) {
    .VideoTile--link .VideoTile-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .VideoTile--link .VideoTile-title {
        font-size: 1.44rem
    }
}

.VideoTile--link .VideoTile-title.zh-cn, .zh-cn .VideoTile--link .VideoTile-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .VideoTile--link .VideoTile-title, .VideoTile--link .VideoTile-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .VideoTile--link .VideoTile-title, .VideoTile--link .VideoTile-title.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.VideoTile--link .VideoTile-title.zh-tw, .zh-tw .VideoTile--link .VideoTile-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .VideoTile--link:hover .VideoTile-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    line-height: 22px
}

@media (min-width: 720px) {
    html:not(.touch) .VideoTile--link:hover .VideoTile-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    html:not(.touch) .VideoTile--link:hover .VideoTile-title {
        font-size: 1.44rem
    }
}

.zh-cn html:not(.touch) .VideoTile--link:hover .VideoTile-title, html:not(.touch) .VideoTile--link:hover .VideoTile-title.zh-cn {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr html:not(.touch) .VideoTile--link:hover .VideoTile-title, html:not(.touch) .VideoTile--link:hover .VideoTile-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru html:not(.touch) .VideoTile--link:hover .VideoTile-title, html:not(.touch) .VideoTile--link:hover .VideoTile-title.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.zh-tw html:not(.touch) .VideoTile--link:hover .VideoTile-title, html:not(.touch) .VideoTile--link:hover .VideoTile-title.zh-tw {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.VideoTile-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    line-height: 22px
}

@media (min-width: 720px) {
    .VideoTile-subtitle {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .VideoTile-subtitle {
        font-size: 1.2rem
    }
}

.VideoTile-subtitle.zh-cn, .zh-cn .VideoTile-subtitle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .VideoTile-subtitle, .VideoTile-subtitle.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.VideoTile-subtitle.zh-tw, .zh-tw .VideoTile-subtitle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .VideoTile-subtitle {
        line-height: 22px
    }
}

.VideoTile-overlay {
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%
}

.VideoTile-overlayText {
    font-size: 2.2395rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-align: center
}

@media (min-width: 720px) {
    .VideoTile-overlayText {
        font-size: 2.5381rem
    }
}

@media (min-width: 1280px) {
    .VideoTile-overlayText {
        font-size: 2.986rem
    }
}

.VideoTile-overlayText.zh-cn, .zh-cn .VideoTile-overlayText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .VideoTile-overlayText, .VideoTile-overlayText.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.VideoTile-overlayText.zh-tw, .zh-tw .VideoTile-overlayText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.VideoTile-duration {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    text-align: center;
    background-color: #211510;
    outline: 1px solid #504137;
    padding: 5px 10px
}

@media (min-width: 720px) {
    .VideoTile-duration {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .VideoTile-duration {
        font-size: 1.2rem
    }
}

.VideoTile-duration.zh-cn, .zh-cn .VideoTile-duration {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .VideoTile-duration, .VideoTile-duration.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.VideoTile-duration.zh-tw, .zh-tw .VideoTile-duration {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.VideoTile-fade {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(90%, rgba(0, 0, 0, .8)));
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .8) 90%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.VideoTile--link .VideoTile-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #504137
}

html:not(.touch) .VideoTile:hover.VideoTile--link .VideoTile-link {
    border-color: #f8b700
}

.VideoTile:hover html:not(.touch) .VideoTile:hover.VideoTile--link .VideoTile-link {
    color: #fff
}

.VideoTile-play {
    display: none;
    background: rgba(0, 0, 0, .4);
    border: 1px solid #000;
    color: #f7b10a;
    padding: 0;
    position: relative;
    -webkit-transition: background .2s, color .2s;
    transition: background .2s, color .2s;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%
}

.VideoTile-play .VideoTile-playOuter {
    background-image: none;
    border: 1px solid #c77e19;
    position: relative
}

.VideoTile-play .VideoTile-playOuter:before {
    background-image: none
}

.VideoTile-play .VideoTile-playInner {
    background-image: none;
    height: 90px;
    padding: 0;
    width: 90px;
    text-align: center
}

.VideoTile-play .VideoTile-playInner:before {
    background-image: none
}

.VideoTile-play .VideoTile-playArrow {
    display: inline-block;
    position: relative;
    border-color: transparent #fddeb4;
    border-style: solid;
    border-width: 20.5px 0 20.5px 30px;
    top: 27%;
    left: 3%;
    -webkit-transition: border-color .2s;
    transition: border-color .2s
}

@media (min-width: 320px) {
    .VideoTile-play .VideoTile-playInner {
        width: 73px;
        height: 73px
    }

    .VideoTile-play .VideoTile-playArrow {
        border-width: 16.5px 0 16.5px 24px
    }
}

@media (min-width: 540px) {
    .VideoTile-play .VideoTile-playInner {
        width: 90px;
        height: 90px
    }

    .VideoTile-play .VideoTile-playArrow {
        border-width: 20.5px 0 20.5px 30px
    }
}

@media (min-width: 720px) {
    .VideoTile-play .VideoTile-playInner {
        width: 90px;
        height: 90px
    }

    .VideoTile-play .VideoTile-playArrow {
        border-width: 20.5px 0 20.5px 30px
    }
}

.VideoTile--link .VideoTile-play {
    display: inline-block
}

html:not(.touch) .VideoTile--link:hover .VideoTile-play {
    background: #b06601
}

.VideoTile--link:active .VideoTile-play {
    background: #8a5000;
    -webkit-transition: none;
    transition: none
}

.VideoTile[disabled] .VideoTile-content {
    opacity: .3
}

.VodLink {
    color: #f8b700;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

html:not(.touch) .VodLink:hover {
    color: #fff;
    cursor: pointer
}

.AjaxContent, .Anchor--offset {
    position: relative
}

.Anchor--offset {
    top: -100px;
    display: block
}

.Art {
    cursor: default;
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none
}

.Art-image {
    background-position: 50%;
    background-size: cover
}

.Art-image, .Art-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.Art-mask > path, .Art-mask > use {
    pointer-events: painted;
    fill: transparent;
    cursor: pointer
}

.Art-video.VideoPane {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%
}

.Art-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: all
}

.Art-center {
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    width: 100%
}

.Art-placeholder {
    display: inline-block;
    width: 56px;
    background-size: 100%;
    background-image: url(../components/icon/assets_subdomain/icon-photo.2a688f9616075622d873dc7cee1ac30c.png);
    background-position: 50%;
    position: relative;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    opacity: .8;
    width: 120px;
    margin: -20px
}

.Art-placeholder:before {
    content: "";
    display: block;
    padding-top: 100%
}

.Art-caption {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    font-style: italic;
    padding: 0 10px
}

@media (min-width: 720px) {
    .Art-caption {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Art-caption {
        font-size: 1.44rem
    }
}

.Art-caption.zh-cn, .zh-cn .Art-caption {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.Art-caption.ko-kr, .ko-kr .Art-caption {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Art-caption.ru-ru, .ru-ru .Art-caption {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Art-caption.zh-tw, .zh-tw .Art-caption {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Art--above {
    z-index: 1
}

.Art--fadeBottom .Art-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 -100px 100px -50px #000;
    box-shadow: inset 0 -100px 100px -50px #000
}

.Art--fadeBottomLarge .Art-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 -200px 200px -50px rgba(0, 0, 0, .7);
    box-shadow: inset 0 -200px 200px -50px rgba(0, 0, 0, .7)
}

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

.Art--backgroundContain .Art-image {
    background-size: contain;
    background-repeat: no-repeat
}

.Art--contentPassthrough .Art-content {
    pointer-events: none
}

.Art--overflow, .Art--overflow .Art-content {
    overflow: visible
}

.Art--fitToHeight {
    width: auto;
    height: 100%
}

.Photoswipe {
    z-index: 7 !important
}

.Photoswipe .pswp__button {
    opacity: 1;
    background-image: url(../components/photoswipe/assets_subdomain/photoswipe.0dee239be01185766eb6eef9711ba730.png);
    -webkit-transition: -webkit-filter .2s ease;
    transition: -webkit-filter .2s ease;
    transition: filter .2s ease;
    transition: filter .2s ease, -webkit-filter .2s ease
}

html:not(.touch) .Photoswipe .pswp__button:hover {
    -webkit-filter: brightness(200%) saturate(0);
    filter: brightness(200%) saturate(0)
}

@media (min-width: 980px) {
    .Photoswipe .pswp__ui:not(.pswp__ui--one-slide) .Photoswipe-next, .Photoswipe .pswp__ui:not(.pswp__ui--one-slide) .Photoswipe-prev {
        display: block;
        -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1), -webkit-filter .2s ease;
        transition: opacity 333ms cubic-bezier(.4, 0, .22, 1), -webkit-filter .2s ease;
        transition: opacity 333ms cubic-bezier(.4, 0, .22, 1), filter .2s ease;
        transition: opacity 333ms cubic-bezier(.4, 0, .22, 1), filter .2s ease, -webkit-filter .2s ease
    }

    html:not(.touch) .Photoswipe .pswp__ui:not(.pswp__ui--one-slide) .Photoswipe-next:hover, html:not(.touch) .Photoswipe .pswp__ui:not(.pswp__ui--one-slide) .Photoswipe-prev:hover {
        -webkit-filter: brightness(200%) saturate(0);
        filter: brightness(200%) saturate(0)
    }

    .Photoswipe .pswp__ui.pswp__ui--hidden .Photoswipe-next, .Photoswipe .pswp__ui.pswp__ui--hidden .Photoswipe-prev, .Photoswipe .pswp__ui.pswp__ui--idle .Photoswipe-next, .Photoswipe .pswp__ui.pswp__ui--idle .Photoswipe-prev {
        opacity: 0
    }
}

.Photoswipe .pswp__caption {
    padding: 10px 0;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, #000));
    background: linear-gradient(180deg, transparent 0, #000 50%)
}

.ControlledModal-portal--group .Photoswipe .pswp__caption {
    bottom: 60px;
    border-bottom: 1px solid #444
}

@media (min-width: 980px) {
    .ControlledModal-portal--group .Photoswipe .pswp__caption {
        bottom: 0;
        border-bottom: none
    }
}

.Photoswipe .pswp__caption__center {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #cacaca;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    max-width: 700px;
    text-align: center
}

@media (min-width: 720px) {
    .Photoswipe .pswp__caption__center {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Photoswipe .pswp__caption__center {
        font-size: 1.2rem
    }
}

.Photoswipe .pswp__caption__center.zh-cn, .zh-cn .Photoswipe .pswp__caption__center {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Photoswipe .pswp__caption__center, .Photoswipe .pswp__caption__center.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Photoswipe .pswp__caption__center.zh-tw, .zh-tw .Photoswipe .pswp__caption__center {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Photoswipe .pswp__caption__center html:not(.touch) .Link:hover {
    color: #fff
}

.Photoswipe .PhotoSwipe-caption-title {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    margin-bottom: 10px
}

@media (min-width: 720px) {
    .Photoswipe .PhotoSwipe-caption-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Photoswipe .PhotoSwipe-caption-title {
        font-size: 1.44rem
    }
}

.Photoswipe .PhotoSwipe-caption-title.zh-cn, .zh-cn .Photoswipe .PhotoSwipe-caption-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Photoswipe .PhotoSwipe-caption-title, .Photoswipe .PhotoSwipe-caption-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Photoswipe .PhotoSwipe-caption-title.ru-ru, .ru-ru .Photoswipe .PhotoSwipe-caption-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Photoswipe .PhotoSwipe-caption-title.zh-tw, .zh-tw .Photoswipe .PhotoSwipe-caption-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Photoswipe-wrap {
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll
}

.Photoswipe-item {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%
}

.Photoswipe-item > .Modal:not(.Modal--video) {
    position: relative;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

@media not all and ((min-width:

540px

)) {
    .Photoswipe-item {
        width: 100%;
        height: 100%
    }

    .Photoswipe-item > .Modal {
        margin: 0
    }
}

.Photoswipe-next, .Photoswipe-prev {
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    padding: 20px
}

.Photoswipe-prev {
    left: -15px
}

.Photoswipe-next {
    right: -15px
}

.Photoswipe--modal .Photoswipe-top {
    display: none
}

.Photoswipe--modal .Photoswipe-prev {
    left: 0
}

.Photoswipe--modal .Photoswipe-next {
    right: 0
}

.Photoswipe--ocho .pswp__button {
    -webkit-filter: brightness(100%) saturate(0);
    filter: brightness(100%) saturate(0)
}

html:not(.touch) .Photoswipe--ocho .pswp__button:hover {
    -webkit-filter: brightness(200%) saturate(0);
    filter: brightness(200%) saturate(0)
}

.Photoswipe--ocho .Photoswipe-next, .Photoswipe--ocho .Photoswipe-prev {
    -webkit-filter: none !important;
    filter: none !important
}

.Photoswipe--ocho .Photoswipe-prev {
    left: 0
}

.Photoswipe--ocho .Photoswipe-next {
    right: 0
}

.Blog a {
    font-weight: 400
}

.Blog .detail > p:first-child {
    font-style: italic;
    font-weight: 700;
    margin-top: 0
}

.Blog .centered {
    margin-bottom: 0 !important
}

.Blog .centered > iframe {
    border-bottom: none !important;
    display: block;
    margin: 0 auto;
    max-width: 100%
}

.Blog h2:before {
    display: block;
    content: " ";
    margin-top: -50px;
    height: 50px;
    visibility: hidden;
    pointer-events: none
}

.BnetNav {
    position: relative;
    z-index: 5
}

body.z-index-reset .BnetNav {
    z-index: 0
}

.BnetNav .Navbar.is-compact {
    z-index: 5
}

.BnetNav .Navbar-mobile .Navbar-customLogo {
    top: 6px !important
}

.BnetNav .Navbar-mobile .Navbar-customLogo img {
    top: 5px;
    height: 35px !important
}

.BnetNav-dropdown {
    z-index: 5
}

.BnetNav-navbar {
    height: 48px
}

@media (min-width: 970px) {
    .BnetNav-navbar {
        height: 40px
    }
}

.BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalContent {
    background-color: #211510;
    border-right: 1px solid #352011
}

.BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalClose, .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalClose:hover {
    color: #f8b700
}

@media (max-width: 969px) {
    .BnetNav-navbar > .Navbar.is-compact.is-auto {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0
    }
    .Subnav-sticky.Subnav-sticky--onion{
        display: none !important;
    }
    .Portal.menue.fixed-flex{
        display: none !important;
    }
    .OnionIntroduction-video.OnionIntroduction-video--left.Grid-1of4{
        display: none !important;
    }
    .OnionIntroduction-video.OnionIntroduction-video--right.Grid-1of4{
        display: none !important;
    }
    .Pane-bg{
        background-image: url("https://images.blz-contentstack.com/v3/assets/blt3452e3b114fab0cd/bltbec1bc41c5965be2/5dbb292ebf77333841036339/Masthead_Fallback_Mobile_Image.jpg");
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto:after {
        display: none
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile {
        display: block;
        background: -webkit-gradient(linear, left top, left bottom, from(#261812), to(#1a0f0b));
        background: linear-gradient(180deg, #261812 0, #1a0f0b);
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
        box-shadow: 0 0 10px rgba(0, 0, 0, .6);
        border-bottom: 1px solid #352011
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-desktop {
        display: none
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile .Navbar-mobileIcon.Navbar-siteMenuIcon {
        width: 44px;
        height: 44px;
        color: #f8b700
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile .Navbar-customLogo {
        top: 3px
    }

    .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile .Navbar-customLogo img {
        height: 42px
    }
}

.BnetNav-searchIcon.Icon {
    margin-top: 14px;
    margin-left: 14px;
    position: absolute;
    z-index: 1
}

.BnetNav-searchInlineInput {
    background-color: #000;
    border: 1px solid #352011;
    border-right: none;
    border-left: none;
    color: #fff;
    outline: none;
    padding: 15px 20px 15px 54px;
    position: relative;
    width: 100%;
    font-size: 12px
}

.BnetNav-searchInlineInput::-webkit-input-placeholder {
    color: #d79e0d;
    font-style: italic
}

.BnetNav-searchInlineInput::-moz-placeholder {
    color: #d79e0d;
    font-style: italic
}

.BnetNav-searchInlineInput:-ms-input-placeholder {
    color: #d79e0d;
    font-style: italic
}

.BnetNav-searchInlineInput::-ms-input-placeholder {
    color: #d79e0d;
    font-style: italic
}

.BnetNav-searchInlineInput::placeholder {
    color: #d79e0d;
    font-style: italic
}

.BnetNav-searchInlineInput::-moz-selection {
    background-color: #f8b700;
    color: #352011
}

.BnetNav-searchInlineInput::selection {
    background-color: #f8b700;
    color: #352011
}

.BnetNav-mobileSiteMenuLogo {
    text-align: center;
    max-width: 230px;
    width: 60%;
    margin: 20px auto
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-size: 14px;
    line-height: 22px;
    padding: 12px 25px;
    width: 100%
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuListItem:last-child .BnetNav-mobileSiteMenuLink {
    border-bottom-color: #352011
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList--noSectionTitle .BnetNav-mobileSiteMenuLink {
    padding-left: 40px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList {
    background-color: #000;
    position: relative
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList:after, .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList:before {
    background-color: #1f0f09;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: -1px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    border-top: 1px solid #352011;
    border-bottom: 1px solid #1f0f09;
    color: #cacaca;
    padding: 11px 25px 11px 40px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.zh-cn, .zh-cn .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.ko-kr, .ko-kr .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.ru-ru, .ru-ru .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.zh-tw, .zh-tw .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.is-active {
    border-bottom: none;
    padding-bottom: 10px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuListItem:last-child .BnetNav-mobileSiteMenuLink {
    border-bottom-color: #352011
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList--noSectionTitle {
    border-top: 1px solid #352011;
    border-bottom: 1px solid #1f0f09
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList--noSectionTitle .BnetNav-mobileSiteMenuLink {
    padding-left: 40px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList {
    padding-bottom: 20px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList:after, .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList:before {
    display: none
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 400;
    border: none;
    color: #f8b700;
    font-size: 14px;
    padding: 10px 25px 10px 55px
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.zh-cn, .zh-cn .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.ko-kr, .ko-kr .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.ru-ru, .ru-ru .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink.zh-tw, .zh-tw .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

html:not(.touch) .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink:hover {
    background-color: #f8b700;
    color: #000;
    text-decoration: none
}

html:not(.touch) .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink:hover .Character-name {
    color: #000 !important;
    text-shadow: none
}

html:not(.touch) .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuList .BnetNav-mobileSiteMenuLink:hover .Character-level {
    color: #000
}

.BnetNav-mobileSiteMenuListItem {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700
}

.BnetNav-mobileSiteMenuListItem.zh-cn, .zh-cn .BnetNav-mobileSiteMenuListItem {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BnetNav-mobileSiteMenuListItem.ko-kr, .ko-kr .BnetNav-mobileSiteMenuListItem {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BnetNav-mobileSiteMenuListItem.ru-ru, .ru-ru .BnetNav-mobileSiteMenuListItem {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BnetNav-mobileSiteMenuListItem.zh-tw, .zh-tw .BnetNav-mobileSiteMenuListItem {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BnetNav-mobileSiteMenuListItem--user {
    background: url(../components/sitenav/assets_subdomain/sitenav-bar-user-bg.a5aceeed07718f696e26dc7b9c75f188.jpg) repeat-x 0 0;
    background-size: auto 90px;
    position: relative;
    z-index: 1
}

.BnetNav-mobileSiteMenuListItem--user .BnetNav-mobileSiteMenuLink {
    padding: 0 25px 0 15px
}

.BnetNav-mobileSiteMenuListItem--user .BnetNav-mobileSiteMenuLink--signup {
    padding: 22px 0 23px
}

.BnetNav-mobileSiteMenuListItem--user > .BnetNav-mobileSiteMenuListItemWrap {
    position: relative
}

.BnetNav-mobileSiteMenuListItem--user > .BnetNav-mobileSiteMenuListItemWrap:after, .BnetNav-mobileSiteMenuListItem--user > .BnetNav-mobileSiteMenuListItemWrap:before {
    background: rgba(179, 61, 38, .5);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.BnetNav-mobileSiteMenuListItem--user > .BnetNav-mobileSiteMenuListItemWrap:after {
    background: rgba(135, 43, 25, .5);
    bottom: 0;
    top: auto
}

.BnetNav-mobileSiteMenuListItem--user > .BnetNav-mobileSiteMenuListItemWrap .List-item {
    vertical-align: middle
}

.BnetNav-mobileMenuListUserInfo {
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 18px
}

.BnetNav-mobileSiteMenuLinkText {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #efd100, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #fff 51%, #fff);
    background-size: 1em 2em;
    color: #f8b700;
    display: inline-block;
    line-height: 1em;
    position: relative;
    z-index: auto
}

.BnetNav-mobileSiteMenuLinkText:after {
    background: none;
    content: attr(data-text);
    display: inline-block;
    left: 0;
    position: absolute;
    text-shadow: 0 1px 5px #000;
    top: 0;
    z-index: -1
}

.BnetNav-mobileDropdownIndicator.DropdownLink-indicator {
    top: 1px
}

.BnetNav-mobileAvatar {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px;
    margin-right: 5px;
    position: relative;
    top: 4px
}

.BnetNav-mobileAvatar.zh-cn, .zh-cn .BnetNav-mobileAvatar {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BnetNav-mobileAvatar.ko-kr, .ko-kr .BnetNav-mobileAvatar {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BnetNav-mobileAvatar.ru-ru, .ru-ru .BnetNav-mobileAvatar {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BnetNav-mobileAvatar.zh-tw, .zh-tw .BnetNav-mobileAvatar {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BnetNav--legion .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile {
    background: #0f1d0d;
    border-color: #1b3e13
}

.BnetNav--legion .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalContent {
    background-color: #0f1d0d;
    border-color: #1b3e13
}

.BnetNav--ocho .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile {
    background: #1d1d1d;
    border-color: #111
}

.BnetNav--ocho .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-mobile .Navbar-mobileIcon.Navbar-siteMenuIcon {
    color: #c6c6c6
}

.BnetNav--ocho .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalContent {
    background: url(../components/bnetnav/assets_subdomain/bnetnav-ocho.81c84d8da00670ca0bf99f6cecfb23a0.jpg);
    background-size: 342px;
    border-color: #222
}

.BnetNav--ocho .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalClose {
    color: #c6c6c6
}

html:not(.touch) .BnetNav--ocho .BnetNav-navbar > .Navbar.is-compact.is-auto .Navbar-siteMenu .Navbar-modalClose:hover {
    color: #fff
}

.BrowserWarning, .Navbar-cookieCompliance {
    display: none
}

.BrowserWarning-content {
    overflow: hidden;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    padding: 10px 0
}

.BrowserWarning-content p {
    margin: 0
}

.BrowserWarning-content p + p {
    margin-top: 1.5em
}

.BrowserWarning-content h1 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.866rem;
    line-height: 1.5
}

.BrowserWarning-content h1.zh-cn, .zh-cn .BrowserWarning-content h1 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h1.ko-kr, .ko-kr .BrowserWarning-content h1 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h1.ru-ru, .ru-ru .BrowserWarning-content h1 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h1.zh-tw, .zh-tw .BrowserWarning-content h1 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .BrowserWarning-content h1 {
        font-size: 2.1148rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h1 {
        font-size: 2.488rem
    }
}

.BrowserWarning-content h2 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.296rem;
    line-height: 1.5
}

.BrowserWarning-content h2.zh-cn, .zh-cn .BrowserWarning-content h2 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h2.ko-kr, .ko-kr .BrowserWarning-content h2 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h2.ru-ru, .ru-ru .BrowserWarning-content h2 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h2.zh-tw, .zh-tw .BrowserWarning-content h2 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .BrowserWarning-content h2 {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h2 {
        font-size: 1.728rem
    }
}

.BrowserWarning-content h3 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1.08rem;
    line-height: 1.5
}

.BrowserWarning-content h3.zh-cn, .zh-cn .BrowserWarning-content h3 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h3.ko-kr, .ko-kr .BrowserWarning-content h3 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h3.ru-ru, .ru-ru .BrowserWarning-content h3 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h3.zh-tw, .zh-tw .BrowserWarning-content h3 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .BrowserWarning-content h3 {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h3 {
        font-size: 1.44rem
    }
}

.BrowserWarning-content h4 {
    color: #fff;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-size: 1rem;
    line-height: 1.5
}

.BrowserWarning-content h4.zh-cn, .zh-cn .BrowserWarning-content h4 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h4.ko-kr, .ko-kr .BrowserWarning-content h4 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h4.ru-ru, .ru-ru .BrowserWarning-content h4 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h4.zh-tw, .zh-tw .BrowserWarning-content h4 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .BrowserWarning-content h4 {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h4 {
        font-size: 1.2rem
    }
}

.BrowserWarning-content h5 {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #09273e;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .BrowserWarning-content h5 {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h5 {
        font-size: 1.2rem
    }
}

.BrowserWarning-content h5.zh-cn, .zh-cn .BrowserWarning-content h5 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h5.ko-kr, .ko-kr .BrowserWarning-content h5 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h5.ru-ru, .ru-ru .BrowserWarning-content h5 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h5.zh-tw, .zh-tw .BrowserWarning-content h5 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BrowserWarning-content h6 {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #09273e;
    text-shadow: 0 0 1px transparent, 0 1px 2px hsla(0, 0%, 100%, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .BrowserWarning-content h6 {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content h6 {
        font-size: 1rem
    }
}

.BrowserWarning-content h6.zh-cn, .zh-cn .BrowserWarning-content h6 {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BrowserWarning-content h6.ko-kr, .ko-kr .BrowserWarning-content h6 {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.BrowserWarning-content h6.ru-ru, .ru-ru .BrowserWarning-content h6 {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.BrowserWarning-content h6.zh-tw, .zh-tw .BrowserWarning-content h6 {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BrowserWarning-content h1, .BrowserWarning-content h2, .BrowserWarning-content h3, .BrowserWarning-content h4, .BrowserWarning-content h5, .BrowserWarning-content h6 {
    margin: 1.5em 0;
    padding: 0;
    text-shadow: none
}

.BrowserWarning-content ol, .BrowserWarning-content ul {
    padding-left: 1em
}

.BrowserWarning-content ol ol, .BrowserWarning-content ol ul, .BrowserWarning-content ul ol, .BrowserWarning-content ul ul {
    margin-top: 0;
    margin-bottom: 0
}

.BrowserWarning-content ol > li {
    counter-increment: counter-level0;
    display: block;
    padding-left: 1.5em;
    position: relative
}

.BrowserWarning-content ol > li:before {
    content: counter(counter-level0) ".";
    display: inline-block;
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0
}

.BrowserWarning-content ol ol > li {
    counter-increment: counter-level1;
    margin-left: 1.5em
}

.BrowserWarning-content ol ol > li:before {
    content: counter(counter-level1, lower-latin) "."
}

.BrowserWarning-content ol ol ol > li {
    counter-increment: counter-level2
}

.BrowserWarning-content ol ol ol > li:before {
    content: counter(counter-level2, lower-roman) "."
}

.BrowserWarning-content ul > li {
    display: block;
    padding-left: 2.5em;
    position: relative
}

.BrowserWarning-content ul > li:before {
    background: url(../components/list/assets_subdomain/list-bullet-sprite.33b76a300709e812b894824c33fb6cb4.png) no-repeat 0 50%;
    content: ".";
    display: inline-block;
    left: 0;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 20px
}

.BrowserWarning-content ul ul > li {
    margin-left: 1.5em
}

.BrowserWarning-content ul ul > li:before {
    background-position: -20px 50%
}

.BrowserWarning-content ul ul ul > li:before {
    background-position: -40px 50%
}

.BrowserWarning-content dl > dt {
    font-weight: 700
}

.BrowserWarning-content table {
    border-color: transparent
}

.BrowserWarning-content a {
    color: #f8b700 !important
}

html:not(.touch) .BrowserWarning-content a:hover {
    text-decoration: underline
}

.BrowserWarning-content a[disabled] {
    cursor: default;
    opacity: .5
}

.BrowserWarning-content hr {
    border: none;
    border-top: 1px solid #b1997f
}

@media (min-width: 720px) {
    .BrowserWarning-content {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .BrowserWarning-content {
        font-size: 1.2rem
    }
}

.BrowserWarning.is-active {
    display: block
}

.Carousel {
    position: relative
}

.Carousel-next, .Carousel-prev {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 8
}

.Carousel-prev {
    left: 0
}

.Carousel-next {
    right: 0
}

.Carousel-item {
    display: none;
    overflow: hidden
}

.Carousel-item.is-selected {
    display: block
}

.Carousel--sticky .Carousel-prev {
    height: 100vh;
    left: 0;
    top: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    width: 60px
}

.Carousel--sticky .Carousel-prevIcon {
    left: 0;
    position: absolute;
    top: 45%
}

.Carousel--sticky .Carousel-next {
    height: 100vh;
    right: 0;
    top: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    width: 60px
}

.Carousel--sticky .Carousel-nextIcon {
    position: absolute;
    right: 0;
    top: 45%
}

.Carousel--gold .Carousel-nextIcon, .Carousel--gold .Carousel-prevIcon {
    border-color: rgba(248, 183, 0, .8);
    border-width: 7px 7px 0 0;
    -webkit-filter: none;
    filter: none;
    height: 80px;
    margin: 20px;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
    width: 80px
}

html:not(.touch) .Carousel--gold .Carousel-nextIcon:hover, html:not(.touch) .Carousel--gold .Carousel-prevIcon:hover {
    border-color: #f8b700
}

.Carousel--gold .Carousel-nextIcon:after, .Carousel--gold .Carousel-prevIcon:after {
    -webkit-box-shadow: 0 0 50px 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 50px 20px rgba(0, 0, 0, .5);
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: -1
}

.Carousel--ghost .Carousel-nextIcon, .Carousel--ghost .Carousel-prevIcon {
    border-color: rgba(0, 0, 0, .25);
    border-width: 10px 10px 0 0;
    margin: 20px
}

.Carousel--animated .Carousel-transitioning {
    -webkit-transition: -webkit-transform .25s;
    transition: -webkit-transform .25s;
    transition: transform .25s;
    transition: transform .25s, -webkit-transform .25s
}

.Carousel--animated .Carousel-currentFrame {
    display: block;
    -webkit-transform: translate(0);
    transform: translate(0);
    z-index: 2
}

.Carousel--animated .Carousel-nextFrame, .Carousel--animated .Carousel-prevFrame {
    display: block;
    position: absolute;
    top: 0;
    -webkit-transform: translate(0);
    transform: translate(0);
    width: 100%;
    z-index: 0
}

body.z-index-reset-full .Carousel--animated .Carousel-nextFrame, body.z-index-reset-full .Carousel--animated .Carousel-prevFrame, body.z-index-reset .Carousel--animated .Carousel-nextFrame, body.z-index-reset .Carousel--animated .Carousel-prevFrame {
    z-index: auto
}

.Carousel--sticky .Carousel-nextFrame, .Carousel--sticky .Carousel-prevFrame {
    position: fixed
}

.Carousel--animated .Carousel-nextFrame .Sticky, .Carousel--animated .Carousel-prevFrame .Sticky {
    display: none
}

.Carousel--animated .Carousel-item.is-active {
    z-index: 1
}

.Carousel--hasLayout .Carousel-item:not(.Carousel-transitioning) {
    display: block;
    left: -99999px;
    position: absolute;
    top: -99999px;
    visibility: hidden;
    width: 100%
}

.Carousel--hasLayout .Carousel-item.is-selected:not(.Carousel-transitioning) {
    position: static;
    visibility: visible;
    width: auto
}

.Carousel--hasLayout .Carousel-item:not(.is-selected):not(.preload):not(.Carousel-transitioning) .Pane-bg {
    background-image: none !important
}

.Carousel--noArrows .Carousel-next, .Carousel--noArrows .Carousel-prev {
    display: none
}

.Carousel--bottom {
    position: absolute;
    bottom: 0;
    width: 100%
}

html:not(.touch) .Carousel-prev:hover .Carousel-prevIcon {
    -webkit-animation: Carousel-Animation-BounceLeft .25s;
    animation: Carousel-Animation-BounceLeft .25s
}

html:not(.touch) .Carousel-next:hover .Carousel-nextIcon {
    -webkit-animation: Carousel-Animation-BounceRight .25s;
    animation: Carousel-Animation-BounceRight .25s
}

.Carousel--indicatorArrows .Carousel-next, .Carousel--indicatorArrows .Carousel-prev {
    top: auto;
    bottom: -13px;
    padding-left: 0;
    padding-right: 0
}

.Carousel--indicatorArrows .Carousel-next {
    top: auto;
    bottom: -13px
}

.Carousel--bottomArrows .Carousel-next, .Carousel--bottomArrows .Carousel-prev {
    top: auto;
    bottom: auto;
    padding-bottom: 60px;
    padding-left: 0;
    padding-right: 0
}

.Carousel--smallArrows .Carousel-nextIcon, .Carousel--smallArrows .Carousel-prevIcon {
    height: 40px;
    width: 40px
}

.Carousel--mediumArrows .Carousel-nextIcon, .Carousel--mediumArrows .Carousel-prevIcon {
    height: 60px;
    width: 60px
}

.Carousel--largeArrows .Carousel-nextIcon, .Carousel--largeArrows .Carousel-prevIcon {
    height: 100px;
    width: 100px
}

.Carousel--animatedCrossfade .Carousel-item {
    opacity: 0
}

.Carousel--animatedCrossfade .Carousel-item.is-selected {
    opacity: 1
}

.Carousel--animatedCrossfade .Carousel-nextFrame, .Carousel--animatedCrossfade .Carousel-prevFrame {
    -webkit-animation: Carousel-Animation-FadeIn .25s;
    animation: Carousel-Animation-FadeIn .25s
}

.Carousel--animatedCrossfade .Carousel-currentFrame {
    -webkit-animation: Carousel-Animation-FadeOut .25s;
    animation: Carousel-Animation-FadeOut .25s
}

.Carousel--animatedCrossfade.is-swiping .Carousel-item {
    -webkit-animation: none;
    animation: none
}

@-webkit-keyframes Carousel-Animation-FadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes Carousel-Animation-FadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes Carousel-Animation-FadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes Carousel-Animation-FadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes Carousel-Animation-BounceLeft {
    0% {
        left: 0
    }
    50% {
        left: -10px
    }
    85% {
        left: 4px
    }
    to {
        left: 0
    }
}

@keyframes Carousel-Animation-BounceLeft {
    0% {
        left: 0
    }
    50% {
        left: -10px
    }
    85% {
        left: 4px
    }
    to {
        left: 0
    }
}

@-webkit-keyframes Carousel-Animation-BounceRight {
    0% {
        right: 0
    }
    50% {
        right: -10px
    }
    85% {
        right: 4px
    }
    to {
        right: 0
    }
}

@keyframes Carousel-Animation-BounceRight {
    0% {
        right: 0
    }
    50% {
        right: -10px
    }
    85% {
        right: 4px
    }
    to {
        right: 0
    }
}

.Carousel--timeline .Carousel-next, .Carousel--timeline .Carousel-prev {
    position: absolute;
    top: 342px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3
}

@media (min-width: 1280px) {
    .Carousel--timeline .Carousel-next, .Carousel--timeline .Carousel-prev {
        top: 442px
    }
}

.CarouselIndicator {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 2
}

.CarouselIndicator-container {
    padding: 20px 0
}

.CarouselIndicator-node {
    padding: 0 5px
}

.CarouselIndicator-node.gutter-vertical {
    padding: 5px 0
}

.CarouselIndicator-node.gutter-all {
    padding: 5px
}

.CarouselIndicator-node.gutter-negative {
    padding: 0;
    margin: 0 -5px
}

.CarouselIndicator-node.gutter-negative.gutter-vertical {
    margin: -5px 0
}

.CarouselIndicator-node.gutter-negative.gutter-all {
    margin: -5px
}

.CarouselIndicator-node:first-child {
    padding-left: 0
}

.CarouselIndicator-node:last-child {
    padding-right: 0
}

.CarouselIndicator-link, .CarouselIndicator-node {
    display: inline-block
}

.CarouselIndicator-dot {
    background-image: url(../components/carouselindicator/assets_subdomain/icon-shield.66938ea0fc74c03a0cc79fdbd0412ac3.png);
    background-size: 100%;
    height: 15px;
    width: 15px
}

.CarouselIndicator--bottomCenter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.CarouselIndicator--bottomCenter .CarouselIndicator-container {
    text-align: center
}

.CarouselIndicator--outlines .CarouselIndicator-dot {
    height: 21px;
    width: 21px
}

.CarouselIndicator--outlines .CarouselLink.is-selected .CarouselIndicator-dot, .CarouselIndicator .CarouselLink.is-selected .CarouselIndicator-dot, html:not(.touch) .CarouselIndicator--outlines .CarouselLink:hover .CarouselIndicator-dot, html:not(.touch) .CarouselIndicator .CarouselLink:hover .CarouselIndicator-dot {
    background-image: url(../components/carouselindicator/assets_subdomain/icon-shield-solid.d0dfd5e616409e151b1af2ce5ee504b9.png)
}

.CarouselTimeline {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.CarouselTimeline-sticky {
    background-color: rgba(29, 17, 11, .9)
}

.CarouselTimeline .CarouselTimeline-container {
    height: 91px;
    padding: 20px 0;
    text-align: center
}

.CarouselTimeline:not(.CarouselTimeline--inline) .CarouselTimeline-container {
    overflow: visible !important
}

.CarouselTimeline-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(29, 17, 11, .6);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 17, 11, 0)), color-stop(25%, rgba(29, 17, 11, .6)), to(rgba(29, 17, 11, .6)));
    background: linear-gradient(180deg, rgba(29, 17, 11, 0) 0, rgba(29, 17, 11, .6) 25%, rgba(29, 17, 11, .6));
    pointer-events: none
}

.CarouselTimeline-bar {
    display: inline-block;
    height: 51px;
    position: relative;
    white-space: nowrap
}

.CarouselTimeline-guide {
    background-color: #fff;
    height: 3px;
    left: 22px;
    position: absolute;
    right: 22px;
    top: 24px
}

.CarouselTimeline .CarouselTimeline-endCap {
    border: 0;
    color: #f8b700;
    height: 48px;
    position: absolute;
    top: 3px;
    width: 48px
}

.CarouselTimeline .CarouselTimeline-endCap.left {
    left: -2px
}

.CarouselTimeline .CarouselTimeline-endCap.right {
    right: -2px
}

.CarouselTimeline-node {
    display: inline-block;
    height: 51px;
    position: relative;
    width: 25px
}

.CarouselTimeline-link {
    display: inline-block;
    height: 51px;
    text-align: center;
    width: 100%
}

.CarouselTimeline-dot {
    border-radius: 50%;
    height: 15px;
    margin-left: -7.5px;
    top: 18px;
    width: 15px
}

.CarouselTimeline-dot, .CarouselTimeline-tick {
    background-color: #fff;
    left: 50%;
    position: absolute
}

.CarouselTimeline-tick {
    display: none;
    height: 13px;
    margin-left: -6.5px;
    top: 16px;
    -webkit-transform: rotate(45deg) skew(10deg, 10deg);
    transform: rotate(45deg) skew(10deg, 10deg);
    width: 13px
}

.CarouselTimeline-node:first-child, .CarouselTimeline-node:last-child {
    width: 45px;
    height: 51px
}

.CarouselTimeline-nodes.is-constrained .CarouselTimeline-node:first-child {
    margin-right: -10px
}

.CarouselTimeline-nodes.is-constrained .CarouselTimeline-node:last-child {
    margin-left: -10px
}

.CarouselTimeline-nodes.is-compact .CarouselTimeline-dot {
    opacity: 0
}

.CarouselTimeline-nodes.is-compact .CarouselTimeline-node:first-child .CarouselTimeline-dot, .CarouselTimeline-nodes.is-compact .CarouselTimeline-node:last-child .CarouselTimeline-dot {
    opacity: 1
}

.CarouselTimeline-tooltip {
    bottom: 51px;
    display: none;
    left: 50%;
    margin-left: -75px;
    position: absolute;
    width: 150px
}

.CarouselTimeline-tooltip > img {
    border: 0;
    width: 150px
}

.CarouselTimeline-node.is-selected .CarouselTimeline-dot, html:not(.touch) .CarouselTimeline-node:hover .CarouselTimeline-dot {
    opacity: 1
}

.CarouselTimeline-node.is-selected .CarouselTimeline-tick, .CarouselTimeline-node.is-selected .CarouselTimeline-tooltip, html:not(.touch) .CarouselTimeline-node:hover .CarouselTimeline-tick, html:not(.touch) .CarouselTimeline-node:hover .CarouselTimeline-tooltip {
    display: block
}

.CarouselTimeline-node.is-selected .CarouselLink.is-selected .CarouselTimeline-tick, html:not(.touch) .CarouselTimeline-node:hover .CarouselLink.is-selected .CarouselTimeline-tick {
    background-color: #f8b700
}

.CarouselLink.is-selected .CarouselTimeline-dot {
    opacity: 1
}

.CarouselTimeline .CarouselLink, .CarouselTimeline .CarouselLink.is-selected {
    background: none;
    border: 0
}

.CarouselLink.is-selected .CarouselTimeline-dot {
    background-color: #f8b700
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-container {
    overflow-x: scroll
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-bar {
    margin: 0 20px;
    padding: 0
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes {
    white-space: nowrap
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes:after {
    content: "";
    display: table;
    clear: both
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node {
    display: inline-block;
    height: 51px;
    margin: 0 20px;
    cursor: pointer;
    width: 130px !important
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-link {
    display: none
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-tooltip {
    bottom: auto;
    display: block;
    left: auto;
    margin: 0;
    position: relative;
    width: auto
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-tooltip > img {
    height: 51px;
    width: auto
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:first-child {
    margin-left: 0;
    width: 45px !important
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:last-child {
    margin-right: 0;
    width: 45px !important
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:first-child .CarouselTimeline-link, .CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:last-child .CarouselTimeline-link {
    display: block
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:first-child .CarouselTimeline-tooltip, .CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:last-child .CarouselTimeline-tooltip {
    width: 45px
}

.CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:first-child .CarouselTimeline-tooltip > img, .CarouselTimeline.CarouselTimeline--inline .CarouselTimeline-nodes .CarouselTimeline-node:last-child .CarouselTimeline-tooltip > img {
    display: none
}

.CharacterProfile {
    height: 500px;
    position: relative
}

@media (min-width: 540px) {
    .CharacterProfile {
        height: 600px
    }
}

@media (min-width: 720px) {
    .CharacterProfile {
        height: 640px
    }
}

@media (min-width: 970px) {
    .CharacterProfile {
        height: 700px
    }
}

@media (min-width: 980px) {
    .CharacterProfile {
        height: 840px
    }
}

.CharacterProfile-render {
    margin: -36% -80px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1
}

@media (min-width: 540px) {
    .CharacterProfile-render {
        margin: -36% -50px 0
    }
}

@media (min-width: 998px) {
    .CharacterProfile-render {
        width: 100%;
        margin: 0 auto;
        top: -33.5%;
        max-width: 940px
    }
}

.CharacterProfile-bg {
    position: absolute
}

.CharacterProfile-image {
    z-index: -1
}

.CharacterProfile-gear {
    position: absolute
}

.CharacterProfile-item {
    position: relative
}

.CharacterProfile-textModal {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    padding-right: 30px
}

@media (min-width: 720px) {
    .CharacterProfile-textModal {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .CharacterProfile-textModal {
        font-size: 1rem
    }
}

.CharacterProfile-textModal.zh-cn, .zh-cn .CharacterProfile-textModal {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.CharacterProfile-textModal.ko-kr, .ko-kr .CharacterProfile-textModal {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.CharacterProfile-textModal.zh-tw, .zh-tw .CharacterProfile-textModal {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.CharacterProfile-itemIcon {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    -webkit-box-shadow: 0 0 7px -4px hsla(0, 0%, 100%, .25);
    box-shadow: 0 0 7px -4px hsla(0, 0%, 100%, .25)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon {
    -webkit-box-shadow: 0 0 7px 5px hsla(0, 0%, 100%, .25);
    box-shadow: 0 0 7px 5px hsla(0, 0%, 100%, .25)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--ARTIFACT, .CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--AZERITE, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--ARTIFACT, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--AZERITE {
    -webkit-box-shadow: 0 0 7px 5px rgba(229, 204, 128, .3);
    box-shadow: 0 0 7px 5px rgba(229, 204, 128, .3)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--HEIRLOOM, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--HEIRLOOM {
    -webkit-box-shadow: 0 0 7px 5px rgba(0, 204, 255, .25);
    box-shadow: 0 0 7px 5px rgba(0, 204, 255, .25)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--LEGENDARY, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--LEGENDARY {
    -webkit-box-shadow: 0 0 7px 5px rgba(255, 128, 0, .25);
    box-shadow: 0 0 7px 5px rgba(255, 128, 0, .25)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--EPIC, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--EPIC {
    -webkit-box-shadow: 0 0 7px 5px rgba(198, 0, 255, .4);
    box-shadow: 0 0 7px 5px rgba(198, 0, 255, .4)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--RARE, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--RARE {
    -webkit-box-shadow: 0 0 7px 5px rgba(0, 129, 255, .35);
    box-shadow: 0 0 7px 5px rgba(0, 129, 255, .35)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--UNCOMMON, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--UNCOMMON {
    -webkit-box-shadow: 0 0 7px 5px rgba(30, 255, 0, .3);
    box-shadow: 0 0 7px 5px rgba(30, 255, 0, .3)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--COMMON, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--COMMON {
    -webkit-box-shadow: 0 0 7px 5px hsla(0, 0%, 100%, .25);
    box-shadow: 0 0 7px 5px hsla(0, 0%, 100%, .25)
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemIcon.GameIcon--POOR, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemIcon.GameIcon--POOR {
    -webkit-box-shadow: 0 0 7px 5px hsla(0, 0%, 61.6%, .25);
    box-shadow: 0 0 7px 5px hsla(0, 0%, 61.6%, .25)
}

.CharacterProfile-itemName {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.CharacterProfile-itemLink:focus .CharacterProfile-itemName, html:not(.touch) .CharacterProfile-itemLink:hover .CharacterProfile-itemName {
    color: #fff
}

.CharacterProfile-itemDetails {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    line-height: 1.5em;
    display: none;
    position: absolute;
    top: 0;
    width: 300px;
    padding: 4px 16px;
    min-height: 58px
}

.CharacterProfile-itemDetails.zh-cn, .zh-cn .CharacterProfile-itemDetails {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.CharacterProfile-itemDetails.ko-kr, .ko-kr .CharacterProfile-itemDetails {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.CharacterProfile-itemDetails.zh-tw, .zh-tw .CharacterProfile-itemDetails {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .CharacterProfile-itemDetails {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .CharacterProfile-itemDetails {
        font-size: 1.2rem
    }
}

@media (min-width: 980px) {
    .CharacterProfile-itemDetails {
        display: block
    }
}

@media (min-width: 1280px) {
    .CharacterProfile-itemDetails {
        padding: 0 16px
    }
}

html.filter .CharacterProfile-itemDetails:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 300px;
    background-color: rgba(0, 0, 0, .8);
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: -1
}

.CharacterProfile-itemLevel {
    color: #cacaca;
    font-size: 1rem;
    line-height: 1.5;
    display: table-cell
}

@media (min-width: 720px) {
    .CharacterProfile-itemLevel {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .CharacterProfile-itemLevel {
        font-size: 1rem
    }
}

.CharacterProfile-itemSockets {
    display: table-cell
}

.CharacterProfile-gear--left {
    left: 0
}

.CharacterProfile-gear--right, .CharacterProfile-gear--right:before {
    right: 0
}

.CharacterProfile-gear--left, .CharacterProfile-gear--right {
    top: 0
}

.CharacterProfile-gear--left .CharacterProfile-item, .CharacterProfile-gear--right .CharacterProfile-item {
    margin: 5px 0
}

@media (min-width: 540px) {
    .CharacterProfile-gear--left .CharacterProfile-item, .CharacterProfile-gear--right .CharacterProfile-item {
        margin: 10px 0
    }
}

.CharacterProfile-gear--bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    align-items: space-around;
    bottom: 80px;
    width: 100%
}

.CharacterProfile-gear--bottom .CharacterProfile-item {
    margin: 0 80px
}

@media (min-width: 540px) {
    .CharacterProfile-gear--bottom .CharacterProfile-item {
        margin: 0 3px
    }
}

.CharacterProfile-gear--bottom .CharacterProfile-item {
    position: absolute
}

.CharacterProfile-gear--bottom .CharacterProfile-item:first-child {
    left: 50%;
    margin-left: -60px
}

@media (min-width: 980px) {
    .CharacterProfile-gear--bottom .CharacterProfile-item:first-child {
        margin-left: -80px
    }
}

.CharacterProfile-gear--bottom .CharacterProfile-item:last-child {
    right: 50%;
    margin-right: -60px
}

@media (min-width: 980px) {
    .CharacterProfile-gear--bottom .CharacterProfile-item:last-child {
        margin-right: -80px
    }
}

.CharacterProfile-gear--bottom .CharacterProfile-item:last-child .CharacterProfile-itemDetails, .CharacterProfile-gear--left .CharacterProfile-itemDetails {
    left: 100%
}

.CharacterProfile-gear--bottom .CharacterProfile-item:first-child .CharacterProfile-itemDetails, .CharacterProfile-gear--right .CharacterProfile-itemDetails {
    right: 100%;
    text-align: right
}

.CharacterProfile-itemEnchantment {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .CharacterProfile-itemEnchantment {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .CharacterProfile-itemEnchantment {
        font-size: 1rem
    }
}

.CharacterProfile-itemEnchantment--ARTIFACT, .CharacterProfile-itemEnchantment--COMMON, .CharacterProfile-itemEnchantment--EPIC, .CharacterProfile-itemEnchantment--HEIRLOOM, .CharacterProfile-itemEnchantment--LEGENDARY, .CharacterProfile-itemEnchantment--POOR, .CharacterProfile-itemEnchantment--RARE, .CharacterProfile-itemEnchantment--UNCOMMON {
    color: #1eff00
}

html:not(.touch) .CharacterProfile-stat:hover .CharacterProfile-statName {
    text-decoration: underline
}

.CopyToClipboard .CopyToClipboard-text {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    border: 2px solid #504137;
    padding: 16px 22px
}

@media (min-width: 720px) {
    .CopyToClipboard .CopyToClipboard-text {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .CopyToClipboard .CopyToClipboard-text {
        font-size: 1.728rem
    }
}

.CopyToClipboard .CopyToClipboard-text.zh-cn, .zh-cn .CopyToClipboard .CopyToClipboard-text {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.CopyToClipboard .CopyToClipboard-text.ko-kr, .ko-kr .CopyToClipboard .CopyToClipboard-text {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.CopyToClipboard .CopyToClipboard-text.ru-ru, .ru-ru .CopyToClipboard .CopyToClipboard-text {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.CopyToClipboard .CopyToClipboard-text.zh-tw, .zh-tw .CopyToClipboard .CopyToClipboard-text {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.CopyToClipboard .CopyToClipboard-text-container {
    width: 100%
}

.CopyToClipboard .CopyToClipboard-text {
    background-color: #000
}

.CopyToClipboard .CopyToClipboard-button {
    min-width: 0;
    word-break: keep-all;
    background: rgba(159, 22, 0, .9)
}

.CopyToClipboard .CopyToClipboard-button .Button-inner {
    padding: 19px 30px
}

.CopyToClipboard.CopyToClipboard--ALLIANCE .CopyToClipboard-text {
    color: #0078ff
}

.CopyToClipboard.CopyToClipboard--HORDE .CopyToClipboard-text {
    color: #b30000
}

.CopyToClipboard.CopyToClipboard--NEUTRAL .CopyToClipboard-text {
    color: #f8b700
}

.CopyToClipboard.CopyToClipboard[disabled] .CopyToClipboard-text {
    color: #444
}

.CopyToClipboard.CopyToClipboard[disabled] .CopyToClipboard-button {
    cursor: default
}

.CopyToClipboard.CopyToClipboard[disabled] .CopyToClipboard-button .Button-outer {
    border-color: #444
}

.CopyToClipboard.CopyToClipboard[disabled] .CopyToClipboard-button .Button-label {
    color: #444
}

.Dropdown {
    display: none
}

.Dropdown.is-active {
    display: block
}

.Dropdown.Dropdown--overlap {
    position: absolute;
    z-index: 3
}

.DropdownMenu {
    margin-left: auto;
    margin-right: auto;
    max-width: 540px
}

.DropdownMenu, .DropdownMenu-toggle {
    text-align: center;
    position: relative
}

.DropdownMenu-toggle {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1.08rem;
    line-height: 1.5;
    font-weight: 700;
    padding: 10px;
    background: #f8b700;
    color: #211510;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.DropdownMenu-toggle.zh-cn, .zh-cn .DropdownMenu-toggle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DropdownMenu-toggle.ko-kr, .ko-kr .DropdownMenu-toggle {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.DropdownMenu-toggle.ru-ru, .ru-ru .DropdownMenu-toggle {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.DropdownMenu-toggle.zh-tw, .zh-tw .DropdownMenu-toggle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .DropdownMenu-toggle {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .DropdownMenu-toggle {
        font-size: 1.44rem
    }
}

.DropdownMenu-toggle.gutter-vertical {
    padding: 10px 0
}

.DropdownMenu-toggle.gutter-all {
    padding: 10px
}

.DropdownMenu-toggle.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.DropdownMenu-toggle.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.DropdownMenu-toggle.gutter-negative.gutter-all {
    margin: -10px
}

.DropdownMenu-toggle:after, .DropdownMenu-toggle:before {
    content: "";
    height: 10px;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 10px
}

.DropdownMenu-toggle:before {
    border: 5px solid transparent;
    border-bottom-color: #211510;
    margin-top: -14px
}

.DropdownMenu-toggle:after {
    border: 5px solid transparent;
    border-top-color: #211510;
    margin-top: 1px
}

.DropdownMenu-menu {
    text-align: center;
    background: #211510;
    border: 1px solid #504137;
    position: absolute;
    width: 100%;
    z-index: 3
}

.DropdownMenu-menuLink {
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 5px;
    color: #f8b700
}

.DropdownMenu-menuLink.zh-cn, .zh-cn .DropdownMenu-menuLink {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.DropdownMenu-menuLink.ko-kr, .ko-kr .DropdownMenu-menuLink {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.DropdownMenu-menuLink.zh-tw, .zh-tw .DropdownMenu-menuLink {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .DropdownMenu-menuLink {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .DropdownMenu-menuLink {
        font-size: 1.2rem
    }
}

.DropdownMenu-menuLink.gutter-vertical {
    padding: 5px 0
}

.DropdownMenu-menuLink.gutter-all {
    padding: 5px
}

.DropdownMenu-menuLink.gutter-negative {
    padding: 0;
    margin: 0 -5px
}

.DropdownMenu-menuLink.gutter-negative.gutter-vertical {
    margin: -5px 0
}

.DropdownMenu-menuLink.gutter-negative.gutter-all {
    margin: -5px
}

.DropdownMenu-menuLink.is-selected, html:not(.touch) .DropdownMenu-menuLink:hover {
    color: #fff
}

.DropdownMenu--overlayBottom, .DropdownMenu--overlayTop {
    bottom: 20px;
    left: 20px;
    position: absolute;
    right: 20px
}

.DropdownMenu--overlayTop {
    bottom: auto;
    top: 20px
}

.DropdownMenu--small {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px
}

.DropdownMenu--timelineAbsolute {
    padding: 0 20px;
    text-align: center;
    left: 50%;
    position: absolute;
    top: 200px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    z-index: 3
}

.DropdownMenu--timelineAbsolute.gutter-vertical {
    padding: 20px 0
}

.DropdownMenu--timelineAbsolute.gutter-all {
    padding: 20px
}

.DropdownMenu--timelineAbsolute.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.DropdownMenu--timelineAbsolute.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.DropdownMenu--timelineAbsolute.gutter-negative.gutter-all {
    margin: -20px
}

@media (min-width: 540px) {
    .DropdownMenu--timelineAbsolute {
        top: 257px
    }
}

@media (min-width: 720px) {
    .DropdownMenu--timelineAbsolute {
        top: 317px
    }
}

@media (min-width: 970px) {
    .DropdownMenu--timelineAbsolute {
        top: 387px
    }
}

.DropdownMenu--timelineAbsolute .DropdownLink.DropdownMenu-toggle {
    padding-left: 5px;
    padding-right: 35px
}

.DropdownMenu--dark > .DropdownMenu-toggle {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 1, 2, .97)), to(rgba(21, 13, 6, .97)));
    background: linear-gradient(180deg, rgba(1, 1, 2, .97), rgba(21, 13, 6, .97));
    border: 1px solid #504137;
    color: #fff
}

.DropdownMenu--dark > .DropdownMenu-toggle:before {
    border-color: transparent transparent #f8b700
}

.DropdownMenu--dark > .DropdownMenu-toggle:after {
    border-color: #f8b700 transparent transparent
}

.DropdownMenu--alignable {
    display: inline-block;
    width: 100%
}

.Expand {
    display: none
}

.Expand.is-active {
    display: block
}

.Expand--fade.is-active.is-fading-in {
    -webkit-animation: Expand-Animation-Fade-In .75s ease-in-out 1 normal both;
    animation: Expand-Animation-Fade-In .75s ease-in-out 1 normal both
}

.Expand--fade.is-active.is-fading-out {
    -webkit-animation: Expand-Animation-Fade-Out .75s ease-in-out 1 alternate both;
    animation: Expand-Animation-Fade-Out .75s ease-in-out 1 alternate both
}

@-webkit-keyframes Expand-Animation-Fade-In {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 1
    }
}

@keyframes Expand-Animation-Fade-In {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes Expand-Animation-Fade-Out {
    0% {
        display: block;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 0
    }
}

@keyframes Expand-Animation-Fade-Out {
    0% {
        display: block;
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 0
    }
}

.Expand--grow {
    display: block;
    overflow: hidden;
    height: 0;
    -webkit-transition: height .55s ease-out;
    transition: height .55s ease-out
}

.Expand--grow.is-active {
    -webkit-transition: height .55s ease-in;
    transition: height .55s ease-in
}

.GameTooltip {
    padding: 20px;
    display: inline-block;
    max-width: 400px;
    color: #fff;
    background-color: rgba(17, 17, 17, .9);
    border-radius: 5px;
    -webkit-box-shadow: #000 0 0 10px, inset 0 1px 0 hsla(0, 0%, 100%, .5);
    box-shadow: 0 0 10px #000, inset 0 1px 0 hsla(0, 0%, 100%, .5);
    border: 1px solid rgba(0, 0, 0, .1)
}

.GameTooltip.gutter-vertical {
    padding: 20px 0
}

.GameTooltip.gutter-all {
    padding: 20px
}

.GameTooltip.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.GameTooltip.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.GameTooltip.gutter-negative.gutter-all {
    margin: -20px
}

.GameTooltip {
    font-size: 13px;
    line-height: 20px
}

.GameTooltip .character-tooltip {
    min-width: 150px
}

.GameTooltip .wiki-tooltip {
    min-width: 250px
}

.GameTooltip .wiki-tooltip .wiki-list {
    margin-top: 10px
}

.GameTooltip .wiki-tooltip .wiki-list li {
    margin: 2px 0
}

.GameTooltip .wiki-tooltip .wiki-list .item-link {
    line-height: 16px
}

.GameTooltip .wiki-tooltip .wiki-list .item-link .frame-14 {
    float: left;
    margin-right: 5px
}

.GameTooltip .wiki-tooltip .indent {
    padding-left: 10px
}

.GameTooltip .wiki-tooltip .indent-small {
    padding-left: 5px
}

.GameTooltip .item-specs .item-link {
    height: 22px;
    line-height: 22px;
    margin: 2px 0;
    font-weight: 400;
    background-repeat: no-repeat
}

.GameTooltip .item-specs {
    margin-top: 10px
}

.GameTooltip .item-specs li {
    margin: 1px 0;
    padding: 0
}

.GameTooltip .item-specs .indent {
    padding-left: 10px
}

.GameTooltip .item-specs .indent-small {
    padding-left: 5px
}

.GameTooltip .item-specs .indent-top {
    padding-top: 10px
}

.GameTooltip .item-specs .icon-socket {
    float: left;
    margin-right: 4px;
    margin-top: 1px
}

.GameTooltip .item-specs .reforge-arrow {
    position: relative;
    top: -1px;
    font-size: 10px
}

html:not(.touch) .GameTooltip .item-specs a.color-q1:hover {
    text-decoration: underline
}

.GameTooltip .item-specs .transmog-name {
    color: #ff80ff
}

.GameTooltip .item-specs {
    margin-bottom: 0
}

.GameTooltip li.item-spec-group {
    margin-top: 10px
}

.GameTooltip .character-tooltip .character-achievementpoints {
    margin-top: 4px
}

.GameTooltip .character-tooltip .character-spec {
    margin-top: 10px
}

.GameTooltip .character-spec {
    display: block
}

.GameTooltip .character-spec .icon, .GameTooltip .character-spec .name {
    float: left;
    height: 14px;
    line-height: 15px
}

.GameTooltip .character-spec .icon {
    margin-right: 5px
}

.GameTooltip .character-spec .name {
    color: #f5ebd1
}

.GameTooltip .character-achievementpoints {
    display: block;
    float: left;
    padding-right: 11px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-achievements.d35c9a64a55168d6dc3f08e07e7c6d31.gif) no-repeat 100%
}

.GameTooltip .item-link {
    display: inline-block;
    line-height: 22px;
    vertical-align: top;
    white-space: nowrap
}

.GameTooltip .item-link .frame-18 {
    float: left;
    margin-right: 5px
}

.GameTooltip .item-link .tip {
    border-bottom: 0
}

.GameTooltip .item-link-large {
    height: 38px;
    line-height: 38px
}

.GameTooltip .item-link-large .frame-36 {
    float: left;
    margin-right: 10px
}

.GameTooltip .item-link-small, .GameTooltip .item-link-small-right {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    vertical-align: top
}

.GameTooltip .item-link-small .frame-14 {
    float: left;
    margin-right: 3px
}

.GameTooltip .item-link-small-right .count {
    float: left
}

.GameTooltip .item-link-small-right .frame-14 {
    float: left;
    margin-left: 4px
}

.GameTooltip .price {
    text-align: right
}

.GameTooltip .price .icon-gold {
    color: #c28a13;
    display: inline-block
}

.GameTooltip .price .icon-silver {
    color: #63625d;
    width: 13px;
    display: inline-block
}

.GameTooltip .price .icon-copper {
    color: #a04d00;
    width: 13px;
    display: inline-block
}

.GameTooltip .summary-item-list li {
    line-height: 15px;
    padding: 4px 0
}

.GameTooltip .summary-item-list .icon {
    float: left;
    height: 16px;
    margin-right: 3px
}

.GameTooltip .ui-tooltip .summary-item-list {
    white-space: nowrap
}

.GameTooltip .ui-tooltip .summary-item-list .icon {
    margin-right: 5px
}

.GameTooltip .ui-tooltip h3 {
    font-size: 16px;
    font-weight: 400
}

.GameTooltip .ui-tooltip h4 {
    font-size: 14px;
    font-weight: 400
}

.GameTooltip .color-q0, .GameTooltip .color-q0 a {
    color: #9d9d9d !important
}

.GameTooltip .color-q1, .GameTooltip .color-q1 a {
    color: #fff !important
}

.GameTooltip .color-q2, .GameTooltip .color-q2 a {
    color: #1eff00 !important
}

.GameTooltip .color-q3, .GameTooltip .color-q3 a {
    color: #0081ff !important
}

.GameTooltip .color-q4, .GameTooltip .color-q4 a {
    color: #c600ff !important
}

.GameTooltip .color-q5, .GameTooltip .color-q5 a {
    color: #ff8000 !important
}

.GameTooltip .color-q6, .GameTooltip .color-q6 a {
    color: #e5cc80 !important
}

.GameTooltip .color-q7, .GameTooltip .color-q7 a {
    color: #0cf !important
}

.GameTooltip .color-d1, .GameTooltip .color-d1 a {
    color: #ff8040 !important
}

.GameTooltip .color-d2, .GameTooltip .color-d2 a {
    color: #ff0 !important
}

.GameTooltip .color-d3, .GameTooltip .color-d3 a {
    color: #40bf40 !important
}

.GameTooltip .color-d4, .GameTooltip .color-d4 a {
    color: grey !important
}

.GameTooltip .color-d5, .GameTooltip .color-d5 a {
    color: #8af !important
}

.GameTooltip .color-d6, .GameTooltip .color-d6 a {
    color: red !important
}

.GameTooltip .color-s0 {
    color: red
}

.GameTooltip .color-s1 {
    color: #ff8040
}

.GameTooltip .color-s2 {
    color: #ff0
}

.GameTooltip .color-s3 {
    color: #40bf40
}

.GameTooltip .color-s4 {
    color: grey
}

.GameTooltip .color-tooltip-yellow {
    color: #ffd100 !important
}

.GameTooltip .color-tooltip-red {
    color: red !important
}

.GameTooltip .color-tooltip-green {
    color: #0f0 !important
}

.GameTooltip .color-tooltip-blue {
    color: #71d5ff !important
}

.GameTooltip .color-tooltip-beige {
    color: #ffff98 !important
}

.GameTooltip .color-tooltip-gray {
    color: #6d6e70 !important
}

.GameTooltip h3 {
    margin: 0
}

.GameTooltip .ui-tooltip .item-specs {
    padding: 0;
    list-style: none
}

.GameTooltip .float-right {
    float: right
}

.GameTooltip .icon-gold {
    padding-right: 15px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-gold.075b76fba2df68d91b2e52f4a01f1ebe.gif) 100% no-repeat
}

.GameTooltip .icon-silver {
    padding-right: 15px;
    padding-left: 3px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-silver.4554a0c6bbb6f5b3fef5a8e9e2bb0f24.gif) 100% no-repeat
}

.GameTooltip .icon-copper {
    padding-right: 15px;
    padding-left: 3px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-copper.cd018dd85f8e9acf3845724cfac66387.gif) 100% no-repeat
}

.GameTooltip .icon-socket {
    position: relative
}

.GameTooltip .icon-socket, .GameTooltip .icon-socket a.gem {
    display: block;
    width: 15px;
    height: 15px
}

.GameTooltip .icon-socket a.gem img {
    display: block;
    width: 13px;
    height: 13px;
    padding: 1px 0 0 1px
}

.GameTooltip .icon-socket .empty {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 13px;
    height: 13px
}

.GameTooltip .icon-socket .frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-sockets.8ac57ac65688702daa31cc8dda00a2ef.png) no-repeat
}

.GameTooltip .icon-socket.socket-1 .empty {
    background-color: #29292a
}

.GameTooltip .icon-socket.socket-2 .empty {
    background-color: #301010
}

.GameTooltip .icon-socket.socket-4 .empty {
    background-color: #403010
}

.GameTooltip .icon-socket.socket-8 .empty {
    background-color: #102040
}

.GameTooltip .icon-socket.socket-14 .empty {
    background-color: #29292a
}

.GameTooltip .icon-socket.socket-16 .empty {
    background-color: #000
}

.GameTooltip .icon-socket.socket-32 .empty {
    background-color: #29292a
}

.GameTooltip .icon-socket.socket-1 .frame {
    background-position: -45px 0
}

.GameTooltip .icon-socket.socket-2 .frame {
    background-position: 0 0
}

.GameTooltip .icon-socket.socket-4 .frame {
    background-position: -15px 0
}

.GameTooltip .icon-socket.socket-8 .frame {
    background-position: -30px 0
}

.GameTooltip .icon-socket.socket-6 .frame {
    background-position: -90px 0
}

.GameTooltip .icon-socket.socket-10 .frame {
    background-position: -75px 0
}

.GameTooltip .icon-socket.socket-12 .frame {
    background-position: -105px 0
}

.GameTooltip .icon-socket.socket-14 .frame {
    background-position: -60px 0
}

.GameTooltip .icon-socket.socket-16 .frame {
    background-position: -120px 0
}

.GameTooltip .icon-socket.socket-32 .frame {
    background-position: -45px 0
}

.GameTooltip .icon-socket.socket-type-1 .empty {
    background-color: #29292a
}

.GameTooltip .icon-socket.socket-type-2 .empty {
    background-color: #301010
}

.GameTooltip .icon-socket.socket-type-3 .empty {
    background-color: #403010
}

.GameTooltip .icon-socket.socket-type-4 .empty {
    background-color: #102040
}

.GameTooltip .icon-socket.socket-type-5 .empty, .GameTooltip .icon-socket.socket-type-6 .empty, .GameTooltip .icon-socket.socket-type-7 .empty, .GameTooltip .icon-socket.socket-type-8 .empty, .GameTooltip .icon-socket.socket-type-9 .empty, .GameTooltip .icon-socket.socket-type-10 .empty, .GameTooltip .icon-socket.socket-type-11 .empty, .GameTooltip .icon-socket.socket-type-12 .empty, .GameTooltip .icon-socket.socket-type-13 .empty, .GameTooltip .icon-socket.socket-type-14 .empty, .GameTooltip .icon-socket.socket-type-15 .empty, .GameTooltip .icon-socket.socket-type-16 .empty, .GameTooltip .icon-socket.socket-type-17 .empty, .GameTooltip .icon-socket.socket-type-18 .empty {
    background-color: #29292a
}

.GameTooltip .icon-socket.socket-type-1 .frame {
    background-position: -45px 0
}

.GameTooltip .icon-socket.socket-type-2 .frame {
    background-position: 0 0
}

.GameTooltip .icon-socket.socket-type-3 .frame {
    background-position: -15px 0
}

.GameTooltip .icon-socket.socket-type-4 .frame {
    background-position: -30px 0
}

.GameTooltip .icon-socket.socket-type-5 .frame, .GameTooltip .icon-socket.socket-type-6 .frame {
    background-position: -45px 0
}

.GameTooltip .icon-socket.socket-type-7 .frame {
    background-position: -60px 0
}

.GameTooltip .icon-socket.socket-type-8 .frame, .GameTooltip .icon-socket.socket-type-9 .frame, .GameTooltip .icon-socket.socket-type-10 .frame, .GameTooltip .icon-socket.socket-type-11 .frame, .GameTooltip .icon-socket.socket-type-12 .frame, .GameTooltip .icon-socket.socket-type-13 .frame, .GameTooltip .icon-socket.socket-type-14 .frame, .GameTooltip .icon-socket.socket-type-15 .frame, .GameTooltip .icon-socket.socket-type-16 .frame, .GameTooltip .icon-socket.socket-type-17 .frame, .GameTooltip .icon-socket.socket-type-18 .frame {
    background-position: -45px 0
}

.GameTooltip a {
    pointer-events: none
}

html:not(.touch) .GameTooltip a:hover {
    text-decoration: underline
}

.GameTooltip--noBackground {
    background-color: transparent;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none
}

.GameTooltip--flush {
    padding: 0
}

.GameTooltip--block {
    display: block;
    max-width: 100%
}

.GameTooltip--azerite {
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/gametooltip/assets_subdomain/gametooltip-azerite.6bf56eb65727fd15b4692fc8881793bb.png);
    border-image-repeat: stretch;
    border-image-slice: 36 fill;
    border-image-width: 26px;
    border-image-outset: 0
}

.GameTooltip--corruption {
    -webkit-box-shadow: #000 0 0 10px, inset 0 0 0 hsla(0, 0%, 100%, .5);
    box-shadow: 0 0 10px #000, inset 0 0 0 hsla(0, 0%, 100%, .5);
    position: relative;
    border-style: solid;
    border-width: 0;
    border-image-source: url(../components/gametooltip/assets_subdomain/gametooltip-corruption.1d43b6f99285c15591d895f9543ad3eb.png);
    border-image-repeat: stretch;
    border-image-slice: 36 fill;
    border-image-width: 26px;
    border-image-outset: 0
}

.GameTooltip--corruption:before {
    content: "";
    display: block;
    width: 68px;
    height: 25px;
    background: url(../components/gametooltip/assets_subdomain/gametooltip-corruption-eye.87f930232082bfc0d17384bce6c016cf.png);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@-webkit-keyframes ImageNav-Animation-BounceUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    85% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes ImageNav-Animation-BounceUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    85% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.ImageNav {
    margin: -100px 0;
    overflow: hidden;
    padding: 100px 0;
    position: relative
}

.ImageNav-container {
    background: #211510;
    border-color: #504137;
    border-style: solid;
    border-width: 1px 0;
    height: 100px
}

.ImageNav-list {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    margin-left: -310px;
    width: 99999px
}

.ImageNav-listItem {
    float: left;
    height: 200px;
    padding: 0 60px;
    position: relative;
    width: 280px
}

.ImageNav-listItem--selected {
    width: 620px
}

.ImageNav-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    left: 60px;
    right: 60px
}

html:not(.touch) .ImageNav-listItem:not(.ImageNav-listItem--selected) .ImageNav-link:hover {
    -webkit-animation: ImageNav-Animation-BounceUp .25s;
    animation: ImageNav-Animation-BounceUp .25s
}

.ImageNav-image {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.ImageNav-absolutePositionContainer {
    position: absolute;
    top: 550px;
    width: 100%;
    z-index: 3
}

@media (min-width: 1280px) {
    .ImageNav-absolutePositionContainer {
        top: 750px
    }
}

@media (min-width: 1600px) {
    .ImageNav-absolutePositionContainer {
        top: 1010px
    }
}

.NeteaseVideoPlayer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@-webkit-keyframes spinneranim-orange {
    0% {
        background-position: 0
    }
    to {
        background-position: -160px
    }
}

@keyframes spinneranim-orange {
    0% {
        background-position: 0
    }
    to {
        background-position: -160px
    }
}

@-webkit-keyframes spinneranim-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spinneranim-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes spinneranim-donut-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes spinneranim-donut-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg)
    }
    to {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

.Spinner {
    display: inline-block
}

.Spinner-donut, .Spinner-orange {
    display: none
}

.Spinner--orange .Spinner-orange {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../components/spinner/assets_subdomain/spinner-orange.6f8afcadf761b07a259ce718344c8bda.png);
    -webkit-animation: spinneranim-orange .4s steps(8) infinite;
    animation: spinneranim-orange .4s steps(8) infinite
}

.Spinner--donut {
    width: 14px;
    display: block
}

.Spinner--donut .Spinner-donut {
    display: inline-block
}

.Spinner--donut .Spinner-donut-icon {
    opacity: .75;
    width: 14px;
    height: 14px;
    margin: 0;
    -webkit-animation: spinneranim-clockwise .5s linear infinite;
    animation: spinneranim-clockwise .5s linear infinite
}

.Spinner--donut .Spinner-donut-cut {
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
    top: 0;
    left: 0
}

.Spinner--donut .Spinner-donut-donut {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border-color: #fff #fff transparent transparent;
    border-style: solid;
    border-width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    margin: 0;
    -webkit-animation: spinneranim-donut-rotate 1s cubic-bezier(.4, 0, .22, 1) infinite;
    animation: spinneranim-donut-rotate 1s cubic-bezier(.4, 0, .22, 1) infinite
}

.Spinner--large.Spinner--orange .Spinner-orange {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../components/spinner/assets_subdomain/spinner-orange.6f8afcadf761b07a259ce718344c8bda.png);
    background-size: cover;
    -webkit-animation: spinneranim-orange-large .4s steps(8) infinite;
    animation: spinneranim-orange-large .4s steps(8) infinite
}

.Spinner--large.Spinner--donut {
    width: 64px
}

.Spinner--large.Spinner--donut .Spinner-donut-donut {
    border-width: 4px
}

.Spinner--large.Spinner--donut .Spinner-donut-cut, .Spinner--large.Spinner--donut .Spinner-donut-donut, .Spinner--large.Spinner--donut .Spinner-donut-icon {
    width: 64px;
    height: 64px
}

.Link, .Link > .Art {
    cursor: pointer
}

.Link.is-selected:not(.is-toggle), .Link[data-tab].is-selected:not(.is-toggle) {
    cursor: default
}

.Link--cursor {
    cursor: pointer
}

.Link--inline {
    display: inline-block
}

.Link--block {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%
}

.Link--text {
    font-size: 1rem;
    line-height: 1.5;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8)
}

@media (min-width: 720px) {
    .Link--text {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Link--text {
        font-size: 1.2rem
    }
}

html:not(.touch) .Link--text:hover {
    text-decoration: underline
}

.Link--text[disabled] {
    cursor: default;
    opacity: .5
}

.Link--text > .Icon:first-child {
    margin-right: .3em
}

.Link--text > .Icon:last-child {
    margin-left: .3em
}

.Link--opacity {
    opacity: .4
}

.Link--opacity.is-selected {
    opacity: 1
}

.Link--masked {
    pointer-events: none;
    display: block
}

html:not(.touch) .Link--hoverGoldLightBorder:hover .Link-child {
    border-color: #f8b700
}

.Link--underline {
    text-decoration: underline
}

.Link-icon {
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-box-shadow: 0 4px 5px -2px transparent;
    box-shadow: 0 4px 5px -2px transparent
}

html:not(.touch) .Link:hover .Link-icon {
    border-color: #cacaca;
    -webkit-box-shadow: 0 4px 5px -3px #333;
    box-shadow: 0 4px 5px -3px #333
}

.Tooltip {
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    pointer-events: none;
    position: fixed;
    z-index: 6
}

.Tooltip.is-active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.Tooltip.is-active:not(.Tooltip--react) {
    -webkit-transition: opacity .2s cubic-bezier(.165, .84, .44, 1) 0s, -webkit-transform .2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition: opacity .2s cubic-bezier(.165, .84, .44, 1) 0s, -webkit-transform .2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition: opacity .2s cubic-bezier(.165, .84, .44, 1) 0s, transform .2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition: opacity .2s cubic-bezier(.165, .84, .44, 1) 0s, transform .2s cubic-bezier(.165, .84, .44, 1) 0s, -webkit-transform .2s cubic-bezier(.165, .84, .44, 1) 0s
}

.Modal, .Modal.iziModal {
    -webkit-animation-duration: 333ms;
    animation-duration: 333ms;
    background: #181818;
    border-radius: 0 !important;
    max-width: none !important;
    min-height: 100%;
    -webkit-transition: none;
    transition: none;
    width: 100%;
    z-index: 7 !important
}

@media (min-width: 540px) {
    .Modal, .Modal.iziModal {
        border: 1px solid #444;
        min-height: 0;
        width: 340px
    }
}

@media (min-width: 720px) {
    .Modal, .Modal.iziModal {
        width: 540px
    }
}

@media (min-width: 980px) {
    .Modal, .Modal.iziModal {
        width: 720px
    }
}

.Modal.fadeOutLeft, .Modal.fadeOutRight, .Modal.iziModal.fadeOutLeft, .Modal.iziModal.fadeOutRight {
    overflow: hidden
}

.Modal.iziModal * {
    -webkit-font-smoothing: auto
}

.Modal .iziModal-wrap {
    background: transparent;
    height: 100% !important
}

@media (min-width: 540px) {
    .Modal .iziModal-wrap {
        height: auto !important;
        max-height: 100%
    }
}

.Modal .iziModal-content {
    position: relative;
    padding: 40px !important
}

.Modal .Modal-close {
    color: #f8b700;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    z-index: 1;
    top: 5px;
    right: 5px;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    fill: #f8b700
}

html:not(.touch) .Modal .Modal-close:hover {
    color: #fff
}

.Modal .Modal-close:hover {
    fill: #fff
}

.Modal .Modal-iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden
}

.Modal .Modal-back {
    color: #f8b700;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    z-index: 1;
    display: none;
    left: -1px;
    top: 5px
}

html:not(.touch) .Modal .Modal-back:hover {
    color: #fff
}

.Modal .Modal-back .Modal-icon {
    float: left;
    margin-right: 2px
}

.Modal .Modal-icon {
    pointer-events: none;
    line-height: 0;
    display: block
}

.Modal .Modal-backText {
    display: inline-block
}

.iziModal-overlay {
    background-color: transparent !important;
    z-index: 6 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.Modal--modalWide.iziModal {
    width: 100%
}

@media (min-width: 980px) {
    .Modal--modalWide.iziModal {
        max-width: 1600px !important;
        width: 97.5vw
    }
}

.Modal[data-history] .iziModal-content {
    padding-top: 55px !important
}

.Modal[data-history] .Modal-back {
    display: inline-block
}

.Modal--comic.iziModal {
    background-color: #000;
    height: calc(134.93253vw + 64px) !important;
    max-height: calc(90vh + 64px);
    max-width: 60.03vh !important;
    min-height: 510px;
    min-width: 300px;
    width: 90vw
}

@media (min-width: 1024px) {
    .Modal--comic.iziModal {
        height: 1599.23238px !important;
        width: 1024px
    }
}

.Modal--comic .iziModal-content, .Modal--comic .iziModal-wrap {
    bottom: 0;
    left: 0;
    padding: 0 !important;
    position: absolute;
    right: 0;
    top: 0
}

.Modal--comic .Modal-close {
    display: none
}

.Modal-scrollbarMeasure {
    height: 50px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
    width: 50px
}

html.iziModal-isAttached {
    overflow: visible
}

.iziModal.hasShadow:after, .ModalNav {
    display: none
}

.ModalNav {
    -webkit-animation: iziM-fadeIn 333ms;
    animation: iziM-fadeIn 333ms;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 8
}

@media (min-width: 540px) {
    .ModalNav {
        display: block
    }
}

.ModalNav.is-fadingOut {
    -webkit-animation: iziM-fadeOut 333ms;
    animation: iziM-fadeOut 333ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.ModalNav-next, .ModalNav-prev {
    cursor: pointer;
    height: 96px;
    width: 96px;
    padding: 20px;
    pointer-events: all;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-filter .2s ease;
    transition: -webkit-filter .2s ease;
    transition: filter .2s ease;
    transition: filter .2s ease, -webkit-filter .2s ease
}

html:not(.touch) .ModalNav-next:hover, html:not(.touch) .ModalNav-prev:hover {
    -webkit-filter: brightness(200%) saturate(0);
    filter: brightness(200%) saturate(0)
}

@media (min-width: 980px) {
    .Modal--modalCompact {
        width: 540px
    }
}

.ModalNav-next {
    right: 0
}

.ModalNav-prev {
    left: 0
}

.Modal--transparent.iziModal {
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.Modal--centered .iziModal-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100%
}

.ControlledModalToggle {
    cursor: pointer
}

.ControlledModal-portal .ReactModal-content.ReactModal-content--noPadding, .ControlledModal-portal .ReactModal.ReactModal--noPadding {
    padding: 0
}

.ControlledModal-portal.ControlledModal-portal--animating-left, .ControlledModal-portal.ControlledModal-portal--animating-right {
    background: #181818;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 540px) {
    .ControlledModal-portal.ControlledModal-portal--animating-left, .ControlledModal-portal.ControlledModal-portal--animating-right {
        background-color: transparent;
        position: static
    }
}

.ControlledModal-portal .ControlledModal-overlay {
    z-index: 7
}

.ControlledModal-portal .ControlledModal-overlay, .ControlledModal-portal .ControlledModal-overlay--entered, .ControlledModal-portal .ControlledModal-overlay--exiting {
    background-color: transparent
}

.ControlledModal-portal .ControlledModal-content {
    padding-bottom: 100px
}

@media (min-width: 540px) {
    .ControlledModal-portal .ControlledModal-content {
        padding-bottom: 40px
    }
}

html:not(.touch) .ControlledModal-portal .ControlledModal-close:hover {
    opacity: 1
}

.ControlledModal-portal .ControlledModal-controls {
    z-index: 8
}

.ControlledModal-portal .ControlledModal-next, .ControlledModal-portal .ControlledModal-prev {
    height: 60px;
    width: 50%;
    background: rgba(24, 24, 24, .8);
    bottom: 0
}

@media (min-width: 540px) {
    .ControlledModal-portal .ControlledModal-next, .ControlledModal-portal .ControlledModal-prev {
        height: 96px;
        width: 96px;
        background: transparent;
        bottom: 20px
    }
}

.ControlledModal-portal .ControlledModal-prev {
    left: 0
}

@media (min-width: 980px) {
    .ControlledModal-portal .ControlledModal-prev {
        left: 20px
    }
}

.ControlledModal-portal .ControlledModal-next {
    right: 0
}

@media (min-width: 980px) {
    .ControlledModal-portal .ControlledModal-next {
        right: 20px
    }
}

.ControlledModal-portal .ControlledModal-controlIcon {
    font-size: 0;
    line-height: 0;
    width: 40px
}

@media (min-width: 540px) {
    .ControlledModal-portal .ControlledModal-controlIcon {
        width: 56px
    }
}

html:not(.touch) .ControlledModal-portal .ControlledModal-prev:hover .ControlledModal-controlIcon {
    -webkit-filter: brightness(200%) saturate(0);
    filter: brightness(200%) saturate(0);
    -webkit-transform: translate(-60%, -50%);
    transform: translate(-60%, -50%);
    opacity: 1
}

html:not(.touch) .ControlledModal-portal .ControlledModal-next:hover .ControlledModal-controlIcon {
    -webkit-filter: brightness(200%) saturate(0);
    filter: brightness(200%) saturate(0);
    -webkit-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%);
    opacity: 1
}

.ControlledModal-portal .ReactModal--noPadding .ReactModal-close {
    right: -45px;
    top: -45px;
    background: transparent
}

.Lightbox {
    display: none
}

.Photoswipe .Lightbox {
    display: block
}

.Lightbox-content {
    cursor: default;
    display: block
}

.Lightbox-button {
    color: #f8b700;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    z-index: 1
}

html:not(.touch) .Lightbox-button:hover {
    color: #fff
}

.Lightbox-close {
    color: #f8b700;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    z-index: 1;
    top: 5px;
    right: 5px
}

html:not(.touch) .Lightbox-close:hover {
    color: #fff
}

.Lightbox-back {
    color: #f8b700;
    cursor: pointer;
    position: absolute;
    padding: 10px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    z-index: 1;
    display: none;
    top: 5px;
    left: -1px
}

html:not(.touch) .Lightbox-back:hover {
    color: #fff
}

.Lightbox-back .Lightbox-icon {
    float: left;
    margin-right: 2px
}

.Lightbox--hasHistory .Lightbox-back, .Lightbox-back-text {
    display: inline-block
}

.Lightbox-icon {
    pointer-events: none;
    line-height: 0;
    display: block
}

.Lightbox-comic, .Lightbox-video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden
}

.Lightbox--video {
    background-color: #000;
    bottom: 0;
    height: 50.625vw;
    left: 0;
    margin: auto;
    max-height: 90vh;
    max-width: 160vh;
    position: absolute;
    right: 0;
    top: 0;
    width: 90vw;
    background: #000;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
    -webkit-transform: none;
    transform: none
}

.Lightbox--video .Lightbox-close {
    z-index: 1;
    color: #fff;
    top: 6px;
    right: 6px
}

.Lightbox--comic {
    background-color: #000;
    height: calc(134.93253vw + 64px);
    width: 90vw;
    max-height: calc(90vh + 64px);
    max-width: 60.03vh;
    min-height: 510px;
    min-width: 300px
}

@media (min-width: 1024px) {
    .Lightbox--comic {
        width: 1024px;
        height: 1599.23238px
    }
}

.Lightbox--comic .Lightbox-close {
    display: none
}

.Lightbox--modal {
    background: #181818;
    border: 1px solid #444;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 30px;
    width: 340px
}

@media (min-width: 720px) {
    .Lightbox--modal {
        width: 540px
    }
}

@media (min-width: 980px) {
    .Lightbox--modal {
        width: 720px
    }
}

.Lightbox--modal.Lightbox--hasHistory {
    padding-top: 60px
}

.Lightbox--comic, .Lightbox--video {
    border: 1px solid #444
}

.Lightbox--comic, .Lightbox--modal, .Lightbox--video {
    -webkit-box-shadow: 5px 5px 100px rgba(0, 0, 0, .25), 5px 5px 60px rgba(0, 0, 0, .25), 5px 5px 20px rgba(0, 0, 0, .25);
    box-shadow: 5px 5px 100px rgba(0, 0, 0, .25), 5px 5px 60px rgba(0, 0, 0, .25), 5px 5px 20px rgba(0, 0, 0, .25)
}

@media not all and (min-width: 540px) {
    .Lightbox--modal {
        width: 100%;
        min-height: 100%
    }

    .Lightbox--video {
        border: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%
    }

    .Lightbox-video {
        width: 90vw;
        max-width: 160vh;
        height: 50.625vw;
        max-height: 90vh;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .pswp__bg {
        opacity: 1 !important
    }
}

.pswp--fs .pswp__bg {
    opacity: 1 !important
}

.Lightbox--lightboxWide {
    border-right-width: 0;
    border-left-width: 0;
    width: 100%;
    min-height: 100%
}

@media (min-width: 980px) {
    .Lightbox--lightboxWide {
        border-right-width: 1px;
        border-left-width: 1px;
        max-width: 1600px;
        width: 97.5vw
    }
}

.Tab {
    display: none
}

.Tab.is-selected {
    display: block
}

.Tab--inline.is-selected {
    display: inline-block
}

.Tab--hasLayout {
    display: block;
    left: -99999px;
    position: absolute;
    top: -99999px;
    visibility: hidden;
    width: 100%
}

.Tab--hasLayout.is-selected {
    position: static;
    visibility: visible
}

.Tab--hasLayout.Tab--inline {
    display: inline-block
}

.Tab--hasLayout:not(.is-selected):not(.preload) * {
    background-image: none !important;
    -o-border-image: none !important;
    border-image: none !important
}

.ModalLink {
    cursor: pointer
}

.Pane {
    display: block;
    position: relative
}

.Pane:after {
    content: "";
    display: table;
    clear: both
}

.Pane-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    overflow: hidden
}

.Pane-bg, .Pane-bg:after, .Pane-bg:before {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.Pane-bg:after, .Pane-bg:before {
    content: "";
    display: block;
    position: relative
}

.Pane-content {
    padding: 0 20px;
    position: relative;
    margin: 0 auto;
    max-width: 1600px;
    z-index: 0
}

.Pane--no-z-index .Pane-content, body.z-index-reset-full .Pane-content, body.z-index-reset .Pane-content {
    z-index: auto
}

.Pane--flush > .Pane-content, .Pane--noInnerSpacing > .Pane-content {
    max-width: none;
    padding: 0
}

.Pane--repeat > .Pane-bg, .Pane--repeat > .Pane-bg:after, .Pane--repeat > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--repeatY > .Pane-bg, .Pane--repeatY > .Pane-bg:after, .Pane--repeatY > .Pane-bg:before {
    background-position: 50% 0;
    background-repeat: repeat-y;
    background-size: contain
}

.Pane--fixed > .Pane-bg {
    background-attachment: fixed
}

.Pane--breakout > .Pane-bg {
    overflow: visible
}

.Pane--parallax {
    overflow: hidden
}

.Pane--parallax .Pane-bg {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    min-height: 150%;
    background-position: 50%;
    background-size: cover
}

.Pane--cropSmall > .Pane-bg {
    background-position: top;
    background-size: 750%
}

@media (min-width: 320px) {
    .Pane--cropSmall > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropMedium > .Pane-bg {
    background-position: top;
    background-size: 444.44444444%
}

@media (min-width: 540px) {
    .Pane--cropMedium > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropLarge > .Pane-bg {
    background-position: top;
    background-size: 333.33333333%
}

@media (min-width: 720px) {
    .Pane--cropLarge > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropWide > .Pane-bg {
    background-position: top;
    background-size: 244.89795918%
}

@media (min-width: 980px) {
    .Pane--cropWide > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropHuge > .Pane-bg {
    background-position: top;
    background-size: 187.5%
}

@media (min-width: 1280px) {
    .Pane--cropHuge > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropMax > .Pane-bg {
    background-position: top;
    background-size: 150%
}

@media (min-width: 1600px) {
    .Pane--cropMax > .Pane-bg {
        background-size: 2400px
    }
}

.Pane--cropEdge > .Pane-bg {
    background-position: top;
    background-size: 100%
}

.Pane--bgSetWidthEdge > .Pane-bg, .Pane--bgSetWidthHuge > .Pane-bg, .Pane--bgSetWidthLarge > .Pane-bg, .Pane--bgSetWidthMax > .Pane-bg, .Pane--bgSetWidthMedium > .Pane-bg, .Pane--bgSetWidthNav > .Pane-bg, .Pane--bgSetWidthSmall > .Pane-bg, .Pane--bgSetWidthWide > .Pane-bg {
    background-position: top
}

.Pane--bgSetWidthSmall > .Pane-bg {
    background-size: 320px auto
}

.Pane--bgSetWidthMedium > .Pane-bg {
    background-size: 540px auto
}

.Pane--bgSetWidthLarge > .Pane-bg {
    background-size: 720px auto
}

.Pane--bgSetWidthNav > .Pane-bg {
    background-size: 970px auto
}

.Pane--bgSetWidthWide > .Pane-bg {
    background-size: 980px auto
}

.Pane--bgSetWidthHuge > .Pane-bg {
    background-size: 1280px auto
}

.Pane--bgSetWidthMax > .Pane-bg {
    background-size: 1600px auto
}

.Pane--bgSetWidthEdge > .Pane-bg {
    background-size: 2400px auto
}

.Pane--bgTop > .Pane-bg {
    background-position: top
}

.Pane--bgBottom > .Pane-bg {
    background-position: bottom
}

.Pane--bgCenter > .Pane-bg {
    background-position: 50%
}

.Pane--staticContent > .Pane-content {
    position: static
}

.Pane--overlapped > .Pane-content {
    padding-bottom: 50px
}

@media (min-width: 540px) {
    .Pane--overlapped > .Pane-content {
        padding-bottom: 100px
    }
}

@media (min-width: 720px) {
    .Pane--overlapped > .Pane-content {
        padding-bottom: 120px
    }
}

.Pane--overlap > .Pane-content {
    top: -50px;
    margin-bottom: -50px
}

@media (min-width: 540px) {
    .Pane--overlap > .Pane-content {
        top: -100px;
        margin-bottom: -100px
    }
}

@media (min-width: 720px) {
    .Pane--overlap > .Pane-content {
        top: -120px;
        margin-bottom: -120px
    }
}

.Pane--autumn > .Pane-bg {
    background-color: #170e09;
    background-image: url(../components/pane/assets_subdomain/pane-autumn.062699d806d55e1a944d2dc381cd0d42.jpg);
    background-position: top;
    background-size: 200%
}

@media (min-width: 980px) {
    .Pane--autumn > .Pane-bg {
        background-size: 100%
    }
}

.Pane--paper {
    -webkit-box-shadow: 0 -27px 16px -16px #000, 0 27px 16px -16px #000;
    box-shadow: 0 -27px 16px -16px #000, 0 27px 16px -16px #000;
    color: #352011;
    margin-top: 11px;
    margin-bottom: 11px
}

.Pane--paper > .Pane-bg {
    background-color: #ebdec2;
    overflow: visible
}

.Pane--paper > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-papertop.d350a92b0b788da1eb187837d9a37ee7.png);
    top: -11px
}

.Pane--paper > .Pane-bg:after, .Pane--paper > .Pane-bg:before {
    width: 100%;
    height: 11px;
    background-size: auto;
    background-size: initial;
    background-repeat: repeat-x;
    position: absolute
}

.Pane--paper > .Pane-bg:after {
    background-image: url(../components/pane/assets_subdomain/pane-paperbottom.e9283d9014fa6f172a5c97f2464dd0cb.png);
    bottom: -11px
}

.Pane--dirt {
    color: #ebdec2
}

.Pane--dirt > .Pane-bg {
    background-color: #211510;
    background-image: url(../components/pane/assets_subdomain/pane-dirt.497581a92b43ac20d46178632fbe5420.jpg);
    background-position: top;
    background-size: 200%
}

@media (min-width: 980px) {
    .Pane--dirt > .Pane-bg {
        background-size: 100%
    }
}

.Pane--dirtDark {
    color: #ebdec2
}

.Pane--dirtDark > .Pane-bg {
    background-color: #211510;
    background-image: url(../components/pane/assets_subdomain/pane-dirtdark.ea235926d6487091ac2d6786fd7d2615.jpg);
    background-position: top;
    background-size: 200%;
    background-repeat: repeat
}

@media (min-width: 980px) {
    .Pane--dirtDark > .Pane-bg {
        background-size: 100%
    }
}

.Pane--dirtLight {
    color: #ebdec2
}

.Pane--dirtLight > .Pane-bg {
    background-color: #211510;
    background-image: url(../components/pane/assets_subdomain/pane-dirtlight.18def74ed60ab9f1f4139f87349d2f79.jpg);
    background-position: top;
    background-size: 200%
}

@media (min-width: 980px) {
    .Pane--dirtLight > .Pane-bg {
        background-size: 100%
    }
}

.Pane--dirtBlue {
    color: #ebdec2
}

.Pane--dirtBlue > .Pane-bg {
    background-color: #040f1a;
    background-image: url(../components/pane/assets_subdomain/pane-dirtblue.27a12e492ebc7ab4e91ddaaa22b77fa4.jpg);
    background-position: top;
    background-size: 200%;
    background-repeat: repeat
}

@media (min-width: 980px) {
    .Pane--dirtBlue > .Pane-bg {
        background-size: 100%
    }
}

.Pane--leather {
    color: #967a53;
    padding-top: 7px
}

.Pane--leather > .Pane-bg, .Pane--leather > .Pane-bg:after, .Pane--leather > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leather > .Pane-bg {
    background-color: #1d110b;
    background-image: url(../components/pane/assets_subdomain/bg-leather.758a6f667d2a70af8d590dbb9ff1b179.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leather > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/hr-leather.82bf0416f5345dc681c9904a902070ba.png);
    background-size: auto;
    background-size: initial;
    -webkit-box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    height: 7px
}

.Pane--leatherBlue {
    color: #967a53
}

.Pane--leatherBlue > .Pane-bg, .Pane--leatherBlue > .Pane-bg:after, .Pane--leatherBlue > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leatherBlue > .Pane-bg {
    background-color: #1d110b
}

.Pane--leatherBlue > .Pane-bg, .Pane--leatherBlue > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-blue.9de312ba15472b63bc7e9d3f62b64c65.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leatherBlue > .Pane-bg:before {
    height: 1080px
}

.Pane--leatherRed {
    color: #967a53
}

.Pane--leatherRed > .Pane-bg, .Pane--leatherRed > .Pane-bg:after, .Pane--leatherRed > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leatherRed > .Pane-bg {
    background-color: #1d110b
}

.Pane--leatherRed > .Pane-bg, .Pane--leatherRed > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-red.ed195e1c1da9da078315cae0469323e1.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leatherRed > .Pane-bg:before {
    height: 1080px
}

.Pane--leatherGray {
    color: #967a53
}

.Pane--leatherGray > .Pane-bg, .Pane--leatherGray > .Pane-bg:after, .Pane--leatherGray > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leatherGray > .Pane-bg {
    background-color: #1d110b
}

.Pane--leatherGray > .Pane-bg, .Pane--leatherGray > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-gray.db668caee69fef46471e35733f930d3d.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leatherGray > .Pane-bg:before {
    -webkit-box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    height: 1080px
}

.Pane--leatherGrayMap {
    color: #967a53
}

.Pane--leatherGrayMap > .Pane-bg, .Pane--leatherGrayMap > .Pane-bg:after, .Pane--leatherGrayMap > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leatherGrayMap > .Pane-bg {
    background-color: #1d110b
}

.Pane--leatherGrayMap > .Pane-bg, .Pane--leatherGrayMap > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-gray-map.4f5e5cedac63202812029039fc0832f2.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leatherGrayMap > .Pane-bg:before {
    -webkit-box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    height: 2160px
}

.Pane--leatherGrayMapLight {
    color: #967a53
}

.Pane--leatherGrayMapLight > .Pane-bg, .Pane--leatherGrayMapLight > .Pane-bg:after, .Pane--leatherGrayMapLight > .Pane-bg:before {
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto
}

.Pane--leatherGrayMapLight > .Pane-bg {
    background-color: #1d110b
}

.Pane--leatherGrayMapLight > .Pane-bg, .Pane--leatherGrayMapLight > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-gray-map.4f5e5cedac63202812029039fc0832f2.jpg);
    background-size: auto;
    background-size: initial
}

.Pane--leatherGrayMapLight > .Pane-bg:before {
    -webkit-box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    box-shadow: 0 0 5px 1px rgba(29, 17, 11, .8);
    height: 2160px
}

.Pane--leatherGrayMapLight > .Pane-bg, .Pane--leatherGrayMapLight > .Pane-bg:before {
    background-image: url(../components/pane/assets_subdomain/pane-leather-gray-map-light.3dc414265e62a3bfa6f5238e24f901c0.jpg)
}

.Pane--beigeLight {
    color: #211510
}

.Pane--beigeLight > .Pane-bg {
    background-color: #f3eee2
}

.Pane--brown {
    color: #ebdec2
}

.Pane--brown > .Pane-bg {
    background-color: #211510
}

.Pane--light {
    color: #222
}

.Pane--light > .Pane-bg {
    background-color: #fff
}

.Pane--lightish {
    color: #222
}

.Pane--lightish > .Pane-bg {
    background-color: #eaeaea
}

.Pane--neutral {
    color: #222
}

.Pane--neutral > .Pane-bg {
    background-color: #aaa
}

.Pane--dark {
    color: #fff
}

.Pane--dark > .Pane-bg {
    background-color: #222
}

.Pane--gold {
    color: #211510;
    border: 1px solid rgba(177, 153, 127, .5)
}

.Pane--gold > .Pane-bg {
    background-color: #f3eee2
}

.Pane--gold > .Pane-bg:after, .Pane--gold > .Pane-bg:before {
    content: "";
    height: 9px;
    width: 100%;
    background-color: #f8b700;
    position: absolute
}

.Pane--gold > .Pane-bg:before {
    top: 0
}

.Pane--gold > .Pane-bg:after {
    bottom: 0
}

.Pane--gold > .Pane-content {
    padding-top: 10px;
    padding-bottom: 10px
}

.Pane--gradient {
    color: #222
}

.Pane--gradient > .Pane-bg {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), to(hsla(0, 0%, 66.7%, .5)));
    background-image: linear-gradient(180deg, #fff 50%, hsla(0, 0%, 66.7%, .5))
}

.Pane--gradient > .Pane-bg:after {
    position: absolute;
    height: 10px;
    width: 100%;
    background-color: #fff;
    bottom: 0
}

.Pane--sticky > .Pane-bg {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    max-height: 100vh
}

.Pane--sticky > .Pane-bg.is-active {
    position: fixed;
    top: 0
}

.Pane--verticalAlign {
    display: table;
    width: 100%
}

.Pane--verticalAlign > .Pane-content {
    display: table-cell;
    vertical-align: middle
}

.Pane--full > .Pane-content {
    padding: 0;
    max-width: none;
    margin: 0
}

.Pane--panel > .Pane-content {
    padding: 0;
    margin: 0 10%
}

@media (min-width: 1600px) {
    .Pane--panel > .Pane-content {
        padding: 0 160px;
        margin: 0 auto
    }
}

.Pane--underSiteNav > .Pane-content {
    padding-top: 0
}

@media (min-width: 970px) {
    .Pane--underSiteNav > .Pane-content {
        padding-top: 90px
    }
}

@media (min-width: 1080px) {
    .Pane--underSiteNav > .Pane-content {
        padding-top: 100px
    }
}

@media (min-width: 1280px) {
    .Pane--underSiteNav > .Pane-content {
        padding-top: 105px
    }
}

@media (min-width: 1450px) {
    .Pane--underSiteNav > .Pane-content {
        padding-top: 120px
    }
}

.Pane--disabled > .Pane-bg {
    background-image: none !important
}

.Pane--gold .Pane-tag {
    border: 1px solid rgba(177, 153, 127, .5);
    border-bottom: none;
    left: -1px;
    position: absolute;
    top: -37px
}

.Pane--gold .Pane-tagInner {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
    background: #f8b700;
    height: 35px;
    padding: 9px 20px 0;
    position: relative
}

.Pane--gold .Pane-tagInner.zh-cn, .zh-cn .Pane--gold .Pane-tagInner {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Pane--gold .Pane-tagInner, .Pane--gold .Pane-tagInner.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Pane--gold .Pane-tagInner.ru-ru, .ru-ru .Pane--gold .Pane-tagInner {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Pane--gold .Pane-tagInner.zh-tw, .zh-tw .Pane--gold .Pane-tagInner {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .Pane--gold .Pane-tagInner {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .Pane--gold .Pane-tagInner {
        font-size: 1rem
    }
}

.Pane--gold .Pane-tagInner:after {
    background: #f8b700;
    bottom: -1px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0
}

.Pane-comments {
    position: absolute;
    top: -39px;
    right: 0
}

.Pane-comments--leftTop {
    left: -113px;
    right: auto;
    text-align: right;
    top: 0;
    width: 100px
}

.Pane--gold .Pane-comments--leftTop {
    top: 9px
}

.Pane--fadeBottom .Pane-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 -180px 200px rgba(0, 0, 0, .6);
    box-shadow: inset 0 -180px 200px rgba(0, 0, 0, .6)
}

.Pane--dimmed .Pane-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5)
}

.Pane--bordered {
    border: 1px solid rgba(177, 153, 127, .5)
}

.Pane--borderedOverlay .Pane-overlay {
    position: relative;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.Pane--borderedOverlay .Pane-overlay:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .08);
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .08);
    content: "";
    display: block;
    pointer-events: none;
    z-index: 1
}

.Pane--above .Pane-content {
    z-index: 2
}

.Pane--abover .Pane-content {
    z-index: 3
}

.Pane--below .Pane-content {
    z-index: -1
}

.Pane--transparent > .Pane-bg {
    background-color: transparent
}

.Pane--reset .Pane-content {
    z-index: auto
}

.Pane--overflowHidden {
    overflow: hidden
}

.PageNav {
    display: table;
    position: relative
}

.PageNav > .List-item {
    vertical-align: middle
}

.PageNav-link {
    display: table-cell;
    height: 100%;
    font-size: 1rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    padding: 0 10px
}

@media (min-width: 720px) {
    .PageNav-link {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .PageNav-link {
        font-size: 1.2rem
    }
}

.PageNav-link.zh-cn, .zh-cn .PageNav-link {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .PageNav-link, .PageNav-link.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.PageNav-link.ru-ru, .ru-ru .PageNav-link {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.PageNav-link.zh-tw, .zh-tw .PageNav-link {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.PageNav-link:first-child {
    padding-left: 0
}

.PageNav-link:last-child {
    padding-right: 0
}

.PageNav-link.is-active, html:not(.touch) .PageNav-link:hover {
    color: #fff
}

.PageNav-item {
    padding: 6.66666667px 0
}

.Paginator, .Panel {
    position: relative
}

.Panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.Panel:after {
    content: "";
    display: table;
    clear: both
}

.Panel:before {
    content: "";
    display: block;
    pointer-events: none;
    z-index: 1
}

.Panel-bg, .Panel:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.Panel-bg {
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 150%;
    overflow: hidden
}

@media (min-width: 1600px) {
    .Panel-bg {
        background-size: 2400px
    }
}

.Panel-bg:after, .Panel-bg:before {
    content: "";
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    position: relative
}

.Panel-bgContent {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    max-width: none;
    width: 150%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (min-width: 1600px) {
    .Panel-bgContent {
        width: 2400px
    }
}

.Panel-area {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto
}

.Panel-box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10%;
    left: 10%
}

.Panel-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    color: #fff;
    z-index: 0
}

body.z-index-reset-full .Panel-content, body.z-index-reset .Panel-content {
    z-index: auto
}

.Panel-subtitle {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase
}

@media (min-width: 720px) {
    .Panel-subtitle {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Panel-subtitle {
        font-size: 1.44rem
    }
}

.Panel-subtitle.zh-cn, .zh-cn .Panel-subtitle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Panel-subtitle, .Panel-subtitle.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Panel-subtitle.zh-tw, .zh-tw .Panel-subtitle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Panel-title {
    font-size: 3.2249999999999996rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0
}

@media (min-width: 720px) {
    .Panel-title {
        font-size: 3.655rem
    }
}

@media (min-width: 1280px) {
    .Panel-title {
        font-size: 4.3rem
    }
}

.Panel-title.zh-cn, .zh-cn .Panel-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Panel-title, .Panel-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Panel-title.ru-ru, .ru-ru .Panel-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Panel-title.zh-tw, .zh-tw .Panel-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Panel-desc {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    margin: 0 auto 10px
}

@media (min-width: 720px) {
    .Panel-desc {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Panel-desc {
        font-size: 1.44rem
    }
}

.Panel-desc.zh-cn, .zh-cn .Panel-desc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Panel-desc, .Panel-desc.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Panel-desc.zh-tw, .zh-tw .Panel-desc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Panel-buttons {
    margin: -10px
}

.Panel-button, .Panel-button.Button, .Panel-button.IronButton {
    margin: 10px
}

.Panel-desc + .Panel-buttons:not(:empty), .Panel-subtitle + .Panel-buttons:not(:empty), .Panel-subtitle + .Panel-desc:not(:empty), .Panel-title + .Panel-buttons:not(:empty), .Panel-title + .Panel-desc:not(:empty) {
    margin-top: 20px
}

.Panel-desc + .Panel-buttons:empty, .Panel-subtitle + .Panel-buttons:empty, .Panel-subtitle + .Panel-desc:empty, .Panel-title + .Panel-buttons:empty, .Panel-title + .Panel-desc:empty {
    margin: 0
}

.Panel--normal:not(.Panel--stacked) .Panel-area, .Panel:not(.Panel--stacked) .Panel-area {
    position: relative;
    max-height: 480px
}

.Panel--normal:not(.Panel--stacked) .Panel-area:before, .Panel:not(.Panel--stacked) .Panel-area:before {
    content: "";
    display: block;
    padding-top: 30%
}

.Panel--tiny:not(.Panel--stacked) .Panel-area {
    position: relative;
    max-height: 300px
}

.Panel--tiny:not(.Panel--stacked) .Panel-area:before {
    content: "";
    display: block;
    padding-top: 18.75%
}

.Panel--small:not(.Panel--stacked) .Panel-area {
    position: relative;
    max-height: 380px
}

.Panel--small:not(.Panel--stacked) .Panel-area:before {
    content: "";
    display: block;
    padding-top: 23.75%
}

.Panel--large:not(.Panel--stacked) .Panel-area {
    position: relative;
    max-height: 600px
}

.Panel--large:not(.Panel--stacked) .Panel-area:before {
    content: "";
    display: block;
    padding-top: 37.5%
}

.Panel--huge:not(.Panel--stacked) .Panel-area {
    position: relative;
    max-height: 740px
}

.Panel--huge:not(.Panel--stacked) .Panel-area:before {
    content: "";
    display: block;
    padding-top: 46.25%
}

.Panel--bgTop > .Panel-bg {
    background-position: top
}

.Panel--bgTop .Panel-bgContent {
    -o-object-position: center top;
    object-position: center top
}

.Panel--bgBottom > .Panel-bg {
    background-position: bottom
}

.Panel--bgBottom .Panel-bgContent {
    -o-object-position: center bottom;
    object-position: center bottom
}

.Panel--left .Panel-content {
    width: 50%;
    position: absolute;
    left: 0;
    text-align: left
}

.Panel--left .Panel-title {
    width: 200%
}

.Panel--center .Panel-content {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

.Panel--center .Panel-title {
    width: 200%;
    margin-left: -50%
}

.Panel--right .Panel-content {
    width: 50%;
    position: absolute;
    right: 0;
    text-align: right
}

.Panel--right.Panel--alignRight .Panel-title {
    width: 200%;
    margin-left: -100%
}

.Panel--alignLeft .Panel-content {
    text-align: left
}

.Panel--alignCenter .Panel-content {
    text-align: center
}

.Panel--alignRight .Panel-content {
    text-align: right
}

.Panel--stacked .Panel-bg {
    position: relative;
    width: 100%;
    background-size: cover;
    max-height: 600px
}

.Panel--stacked .Panel-bg:before {
    content: "";
    display: block;
    padding-top: 50%
}

.Panel--stacked.Panel--tiny .Panel-bg {
    max-height: 375px
}

.Panel--stacked.Panel--small .Panel-bg {
    max-height: 475px
}

.Panel--stacked.Panel--normal .Panel-bg {
    max-height: 600px
}

.Panel--stacked.Panel--large .Panel-bg {
    max-height: 750px
}

.Panel--stacked.Panel--huge .Panel-bg {
    max-height: 925px
}

.Panel--stacked .Panel-bgContent {
    width: 100%
}

.Panel--stacked .Panel-area {
    background: #211510 url(../components/panel/assets_subdomain/panel-bg-stacked.18def74ed60ab9f1f4139f87349d2f79.jpg) 0 0;
    height: auto;
    max-width: none;
    position: relative;
    padding: 20px 10%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (min-width: 720px) {
    .Panel--stacked .Panel-area {
        padding-left: 30px;
        padding-right: 30px
    }
}

.Panel--stacked .Panel-box {
    position: static
}

.Panel--stacked .Panel-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    position: relative;
    top: 0;
    -webkit-transform: none;
    transform: none
}

.Panel--stacked .Panel-desc {
    max-width: 720px
}

.Panel--stacked .Panel-title {
    font-size: 2.2395rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Panel--stacked .Panel-title {
        font-size: 2.5381rem
    }
}

@media (min-width: 1280px) {
    .Panel--stacked .Panel-title {
        font-size: 2.986rem
    }
}

.Panel--stacked .Panel-title.zh-cn, .zh-cn .Panel--stacked .Panel-title {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Panel--stacked .Panel-title, .Panel--stacked .Panel-title.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Panel--stacked .Panel-title.ru-ru, .ru-ru .Panel--stacked .Panel-title {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Panel--stacked .Panel-title.zh-tw, .zh-tw .Panel--stacked .Panel-title {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Panel--stacked.Panel--overlayed .Panel-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: top;
    max-height: none
}

.Panel--stacked.Panel--overlayed .Panel-area {
    position: relative;
    background: transparent
}

.Panel--stacked.Panel--overlayed .Panel-area:before {
    content: "";
    display: block;
    padding-top: 50%
}

.Panel--above .Panel-content {
    z-index: 2
}

.Panel--link.bordered:before {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    -webkit-box-shadow: inset 0 0 0 1px #504137;
    box-shadow: inset 0 0 0 1px #504137
}

.Panel--link:focus.bordered:before, html:not(.touch) .Panel--link:hover.bordered:before {
    -webkit-box-shadow: inset 0 0 0 1px #f8b700;
    box-shadow: inset 0 0 0 1px #f8b700
}

.Panel--link .Panel-area {
    background-image: none
}

.Panel--link .Panel-title {
    color: #f8b700
}

.Panel--link .Panel-area {
    border-top: 1px solid #504137
}

@media screen and (min-width: 980px) and (max-width: 1280px) {
    .Panel--stretched .Panel-bg {
        background-size: cover
    }

    .Panel--stretched .Panel-bgContent {
        width: 100%;
        height: 100%
    }

    .Panel--stretched.Panel--tiny:not(.Panel--stacked) .Panel-area {
        position: relative;
        max-height: 375px
    }

    .Panel--stretched.Panel--tiny:not(.Panel--stacked) .Panel-area:before {
        content: "";
        display: block;
        padding-top: 20%
    }

    .Panel--stretched.Panel--small:not(.Panel--stacked) .Panel-area {
        position: relative;
        max-height: 475px
    }

    .Panel--stretched.Panel--small:not(.Panel--stacked) .Panel-area:before {
        content: "";
        display: block;
        padding-top: 33.33333333%
    }

    .Panel--stretched.Panel--normal:not(.Panel--stacked) .Panel-area {
        position: relative;
        max-height: 600px
    }

    .Panel--stretched.Panel--normal:not(.Panel--stacked) .Panel-area:before {
        content: "";
        display: block;
        padding-top: 40%
    }

    .Panel--stretched.Panel--large:not(.Panel--stacked) .Panel-area {
        position: relative;
        max-height: 750px
    }

    .Panel--stretched.Panel--large:not(.Panel--stacked) .Panel-area:before {
        content: "";
        display: block;
        padding-top: 50%
    }

    .Panel--stretched.Panel--huge:not(.Panel--stacked) .Panel-area {
        position: relative;
        max-height: 925px
    }

    .Panel--stretched.Panel--huge:not(.Panel--stacked) .Panel-area:before {
        content: "";
        display: block;
        padding-top: 52.63157895%
    }
}

.Panel--overflowing, .Panel--overflowing .Panel-bg {
    overflow: visible
}

.Panel--overflowing .Panel-fg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none
}

.PatchNotes {
    position: relative;
    height: 100%
}

.PatchNotes-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #222;
    color: #fff;
    overflow: hidden
}

.PatchNotes-header {
    background-color: hsla(0, 0%, 100%, .1);
    padding: 10px 20px
}

.PatchNotes-title {
    color: #b1997f;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1.08rem;
    line-height: 1.5;
    text-transform: uppercase
}

@media (min-width: 720px) {
    .PatchNotes-title {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .PatchNotes-title {
        font-size: 1.44rem
    }
}

.PatchNotes-expand {
    cursor: pointer;
    display: inline-block
}

.PatchNotes-collapse {
    cursor: pointer;
    display: none;
    position: relative;
    top: 2px;
    left: 6px
}

.PatchNotes-body {
    overflow-y: scroll;
    margin-right: -17px;
    font-size: 80%;
    height: 90%;
    height: calc(100% - 70px)
}

.PatchNotes-body ol, .PatchNotes-body ul {
    padding-left: 1em
}

html.touch .PatchNotes-body {
    margin-right: 0
}

.PatchNotes-innerBody {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px
}

.PatchNotes-body > :first-child {
    margin-top: 0
}

.PatchNotes-fade {
    -webkit-box-shadow: 0 -10px 30px 20px #222;
    box-shadow: 0 -10px 30px 20px #222;
    position: relative;
    height: 10px
}

.PatchNotes.is-expanded {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    height: auto !important;
    width: auto !important;
    z-index: 7
}

.PatchNotes.is-expanded .PatchNotes-expand {
    display: none
}

.PatchNotes.is-expanded .PatchNotes-collapse {
    display: inline-block
}

.PatchNotes.is-expanded .PatchNotes-body {
    overflow-y: auto;
    font-size: 100%
}

.PatchNotes.is-expanded .PatchNotes-body ol, .PatchNotes.is-expanded .PatchNotes-body ul {
    padding-left: 3em
}

.Poll {
    position: relative;
    border: 1px solid #504137
}

.Poll-content {
    padding: 30px
}

.Poll-description {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    text-shadow: none
}

@media (min-width: 720px) {
    .Poll-description {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Poll-description {
        font-size: 1.728rem
    }
}

.Poll-description.zh-cn, .zh-cn .Poll-description {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Poll-description, .Poll-description.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.Poll-description.ru-ru, .ru-ru .Poll-description {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Poll-description.zh-tw, .zh-tw .Poll-description {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Poll-time {
    text-transform: uppercase
}

.Poll-option {
    padding: 5px 0
}

.Poll-optionText {
    padding-left: 8px
}

.Poll-selectionBox {
    width: 16px;
    height: 16px;
    border: 1px solid #504137;
    cursor: pointer;
    position: relative
}

.Poll-selectionBox.Poll-radioSelection {
    border-radius: 8px
}

.Poll-selectionBox .Poll-selectionBoxInput {
    opacity: 0;
    cursor: inherit
}

.Poll-selectionBox .Poll-inputLabel {
    position: absolute;
    cursor: inherit;
    width: 14px;
    height: 14px;
    top: 0;
    left: 0;
    border-radius: inherit
}

.Poll-selectionBox .Poll-inputLabel:after {
    opacity: 0;
    content: "";
    position: absolute;
    background: #f8b700;
    width: 8px;
    height: 8px;
    left: 3px;
    top: 3px;
    border-radius: inherit
}

html:not(.touch) .Poll-selectionBox .Poll-selectionBoxInput:hover + .Poll-inputLabel:after {
    opacity: .3
}

.Poll-selectionBox .Poll-selectionBoxInput:checked + .Poll-inputLabel:after {
    opacity: 1
}

.Poll-results {
    display: table;
    position: relative
}

.Poll-result {
    display: table-row
}

.Poll-resultItem {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    white-space: nowrap;
    padding: 5px 0
}

@media (min-width: 720px) {
    .Poll-resultItem {
        padding: 0
    }
}

@media (min-width: 320px) {
    .Poll-resultItem--optionText {
        width: 80%;
        white-space: normal
    }
}

@media (min-width: 720px) {
    .Poll-resultItem--optionText {
        width: auto;
        white-space: nowrap
    }
}

@media (min-width: 320px) {
    .Poll-resultItem--progressbar > .Progressbar--poll {
        display: none
    }
}

@media (min-width: 720px) {
    .Poll-resultItem--progressbar > .Progressbar--poll {
        display: block
    }
}

.Poll-resultItem--percentage {
    text-align: right
}

.Poll-resultItem--stretch {
    width: 100%;
    padding: 0 15px
}

.Poll-buttonBar {
    background: #211510;
    border-top: 1px solid #504137;
    border-bottom: 1px solid #504137
}

.Poll-button {
    min-width: 100px;
    padding: 0
}

.Poll--wide .Poll-option {
    padding: 0
}

.ProgressDonut-number {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center
}

@media (min-width: 720px) {
    .ProgressDonut-number {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .ProgressDonut-number {
        font-size: 1.728rem
    }
}

.ProgressDonut-number.zh-cn, .zh-cn .ProgressDonut-number {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .ProgressDonut-number, .ProgressDonut-number.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.ProgressDonut-number.zh-tw, .zh-tw .ProgressDonut-number {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.ProgressDonut-content {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0
}

.ProgressDonut-border {
    fill: none;
    stroke: #444;
    stroke-width: 18;
    stroke-linecap: butt
}

.ProgressDonut-unfilled {
    fill: none;
    stroke: #000;
    stroke-width: 16;
    stroke-linecap: butt
}

.ProgressDonut-filled {
    fill: none;
    stroke-width: 16;
    stroke-linecap: butt
}

.ProgressDonut-filled--brown {
    stroke: #99755c
}

.ProgressDonut-filled--orange {
    stroke: #c76700
}

.ProgressDonut-filled--green {
    stroke: #1b9601
}

.ScrollAnchor-space {
    height: 60vh
}

.ScrollAnchor-control {
    height: 71px
}

.ScrollAnchor-icon {
    position: relative;
    margin: 0 auto;
    width: 48px;
    height: 48px;
    cursor: pointer
}

.ScrollAnchor-border {
    position: absolute;
    top: 0;
    left: 0;
    border: 0
}

.ScrollAnchor-bar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    height: 71px;
    padding-top: 10px
}

.Sticky.is-active .ScrollAnchor-bar {
    background-color: rgba(29, 17, 11, .8);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 17, 11, .8)), color-stop(75%, rgba(29, 17, 11, .8)), to(rgba(29, 17, 11, 0)));
    background: linear-gradient(180deg, rgba(29, 17, 11, .8) 0, rgba(29, 17, 11, .8) 75%, rgba(29, 17, 11, 0))
}

.ScrollAnchor-control .ScrollAnchor-indicator {
    margin-top: 11px
}

.ScrollAnchor-control .ScrollAnchor-indicator:after, .ScrollAnchor-control .ScrollAnchor-indicator:before {
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

.ScrollAnchor-container {
    position: relative
}

.ScrollAnchor-content {
    position: relative;
    min-height: 100vh
}

.ScrollAnchor-overlay {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(29, 17, 11, .8);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 17, 11, 0)), color-stop(20%, rgba(29, 17, 11, .9)), to(rgba(29, 17, 11, .9)));
    background: linear-gradient(180deg, rgba(29, 17, 11, 0) 0, rgba(29, 17, 11, .9) 20%, rgba(29, 17, 11, .9))
}

.Scrollable {
    overflow: hidden;
    cursor: -webkit-grab;
    cursor: grab
}

.Scrollable--flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.Scrollable.is-active *, .Scrollable.is-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

html.touch .Scrollable {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
}

html.touch .Scrollable::-webkit-scrollbar {
    width: 0
}

.SelectMenu {
    min-width: 250px;
    position: relative
}

.SelectMenu-toggle {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-size: 1.08rem;
    line-height: 1.5;
    font-weight: 700;
    padding: 10px;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    display: block;
    width: 100%;
    background-color: #f8b700;
    color: #211510;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden
}

.SelectMenu-toggle.zh-cn, .zh-cn .SelectMenu-toggle {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SelectMenu-toggle, .SelectMenu-toggle.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SelectMenu-toggle, .SelectMenu-toggle.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SelectMenu-toggle.zh-tw, .zh-tw .SelectMenu-toggle {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .SelectMenu-toggle {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu-toggle {
        font-size: 1.44rem
    }
}

.SelectMenu-toggle.gutter-vertical {
    padding: 10px 0
}

.SelectMenu-toggle.gutter-all {
    padding: 10px
}

.SelectMenu-toggle.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.SelectMenu-toggle.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.SelectMenu-toggle.gutter-negative.gutter-all {
    margin: -10px
}

.SelectMenu-toggle:after, .SelectMenu-toggle:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    border: 4px solid transparent;
    border-bottom-color: #211510;
    margin-top: -10px
}

.SelectMenu-toggle:after {
    border-color: #211510 transparent transparent;
    margin-top: 2px
}

@media (min-width: 980px) {
    .SelectMenu-toggle:after, .SelectMenu-toggle:before {
        height: 10px;
        right: 15px;
        width: 10px
    }

    .SelectMenu-toggle:before {
        border-width: 5px;
        margin-top: -14px
    }

    .SelectMenu-toggle:after {
        border-width: 5px;
        margin-top: 1px
    }
}

html:not(.touch) .SelectMenu-toggle:hover {
    cursor: pointer
}

.SelectMenu-toggle:focus {
    outline-width: 0
}

.SelectMenu-toggle--native {
    background-image: url(../components/selectmenu/assets_subdomain/double-arrow.ae6e7bc6db37f7ddd89677fb7fb92ee5.svg);
    background-size: 10px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.SelectMenu--ghost .SelectMenu-toggle--native {
    background-image: url(../components/selectmenu/assets_subdomain/double-arrow-gold.7a8052c2bc4ace886e41ec5cde9375b0.svg)
}

.SelectMenu-toggle--native:after, .SelectMenu-toggle--native:before {
    content: none
}

.SelectMenu--toggleSearch .SelectMenu-toggle {
    padding: 0
}

.SelectMenu--toggleSearch .SelectMenu-toggleInput:focus::-webkit-input-placeholder {
    color: transparent
}

.SelectMenu--toggleSearch .SelectMenu-toggleInput:focus::-moz-placeholder {
    color: transparent
}

.SelectMenu--toggleSearch .SelectMenu-toggleInput:focus:-ms-input-placeholder {
    color: transparent
}

.SelectMenu--toggleSearch .SelectMenu-toggleInput:focus::-ms-input-placeholder {
    color: transparent
}

.SelectMenu--toggleSearch .SelectMenu-toggleInput:focus::placeholder {
    color: transparent
}

.SelectMenu-toggleInput {
    padding: 10px;
    outline: 0;
    width: 100%;
    background: transparent;
    border: transparent;
    white-space: nowrap;
    position: relative;
    display: block
}

.SelectMenu-toggleInput.gutter-vertical {
    padding: 10px 0
}

.SelectMenu-toggleInput.gutter-all {
    padding: 10px
}

.SelectMenu-toggleInput.gutter-negative {
    padding: 0;
    margin: 0 -10px
}

.SelectMenu-toggleInput.gutter-negative.gutter-vertical {
    margin: -10px 0
}

.SelectMenu-toggleInput.gutter-negative.gutter-all {
    margin: -10px
}

.SelectMenu-toggleInput::-webkit-input-placeholder {
    color: #000
}

.SelectMenu-toggleInput::-moz-placeholder {
    color: #000
}

.SelectMenu-toggleInput:-ms-input-placeholder {
    color: #000
}

.SelectMenu-toggleInput::-ms-input-placeholder {
    color: #000
}

.SelectMenu-toggleInput::placeholder {
    color: #000
}

.ScrollMenu--scrollMenu .SelectMenu-menu {
    max-height: 300px;
    overflow-y: auto
}

.SelectMenu-menu {
    opacity: 0;
    background-color: #211510;
    border: 1px solid #504137;
    position: absolute;
    top: 47px;
    width: 100%;
    z-index: 3;
    display: none
}

.SelectMenu-menu.is-active {
    display: block;
    -webkit-animation: keyframe-fade-in .18s ease-out;
    animation: keyframe-fade-in .18s ease-out;
    opacity: 1;
    overflow: auto;
    overflow-y: auto !important
}

.SelectMenu-menu.simplebar-menu {
    overflow: visible !important;
    position: absolute;
    width: 100%
}

.SelectMenu-menu.simplebar-menu .simplebar-track {
    background: #000
}

.SelectMenu-menu.simplebar-menu .simplebar-track.simplebar-vertical {
    -webkit-box-shadow: 0 0 48px 2px #000;
    box-shadow: 0 0 48px 2px #000
}

.SelectMenu-menu.simplebar-menu .simplebar-scrollbar:before {
    background: #f8b700
}

.SelectMenu-menu.simplebar-menu .simplebar-scrollbar.simplebar-visible:before {
    opacity: 1
}

.SelectMenu-items {
    padding-top: 10px;
    padding-bottom: 10px
}

.SelectMenu--flushItems .SelectMenu-items {
    padding: 10px 0
}

.SelectMenu-item {
    -webkit-transition: all .2s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .2s cubic-bezier(.23, 1, .32, 1) 0s;
    color: #f8b700;
    cursor: pointer
}

.SelectMenu-item:first-child {
    border-top: none
}

html:not(.touch) .SelectMenu-item:hover {
    color: #fff
}

.SelectMenu-item.is-highlighted {
    background-color: #b06601;
    color: #fff
}

.SelectMenu-item.is-selected {
    color: #fff
}

.SelectMenu--multiple .SelectMenu-item {
    padding-left: 28px;
    position: relative
}

.SelectMenu--multiple .SelectMenu-item:after, .SelectMenu--multiple .SelectMenu-item:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: 1px solid #504137;
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.SelectMenu--multiple .SelectMenu-item:after {
    background-color: #f8b700;
    border: none;
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    -webkit-transition: all .2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition: all .2s cubic-bezier(.165, .84, .44, 1) 0s
}

.SelectMenu--multiple .SelectMenu-item.is-selected:after {
    -webkit-transform: translateY(-50%) scale(.5);
    transform: translateY(-50%) scale(.5)
}

.SelectMenu-header {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700;
    line-height: 48px;
    margin-top: 10px
}

@media (min-width: 720px) {
    .SelectMenu-header {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu-header {
        font-size: 1.728rem
    }
}

.SelectMenu-header.zh-cn, .zh-cn .SelectMenu-header {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SelectMenu-header, .SelectMenu-header.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SelectMenu-header, .SelectMenu-header.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SelectMenu-header.zh-tw, .zh-tw .SelectMenu-header {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.SelectMenu-group.is-active .SelectMenu-header, .SelectMenu-header.is-active {
    display: block
}

.SelectMenu-link, .SelectMenu-tabsLink {
    display: block;
    padding: 10px
}

.SelectMenu-inputContainer {
    padding: 20px 20px 0;
    display: none
}

.SelectMenu-input {
    width: 100%;
    padding: 10px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border: 1px solid #504137
}

.SelectMenu-input:focus {
    outline: none
}

.SelectMenu-noMatches {
    color: #fff
}

.SelectMenu-exception {
    color: #fff;
    display: none;
    padding-top: 20px
}

.SelectMenu-exception.is-active {
    display: block
}

.SelectMenu--search .SelectMenu-menu {
    padding-bottom: 20px
}

.SelectMenu--search .SelectMenu-inputContainer {
    display: block
}

.SelectMenu--search .SelectMenu-defaults {
    display: block;
    padding-top: 20px
}

.SelectMenu--search .SelectMenu-defaults .SelectMenu-header, .SelectMenu--search .SelectMenu-defaults .SelectMenu-item {
    display: block
}

.SelectMenu--search .SelectMenu-header {
    display: none;
    margin-top: 0
}

.SelectMenu--search .SelectMenu-header.is-active {
    display: block
}

.SelectMenu--search .SelectMenu-items {
    padding: 0 20px
}

.SelectMenu--search .SelectMenu-item {
    display: none
}

.SelectMenu--search .SelectMenu-item.is-active {
    display: block
}

.SelectMenu--search.has-matches .SelectMenu-menu {
    padding-bottom: 0
}

.SelectMenu--search.has-matches .SelectMenu-items {
    padding-top: 10px;
    padding-bottom: 10px
}

.SelectMenu--search.has-input .SelectMenu-defaults {
    display: none
}

.SelectMenu--alignable {
    display: inline-block
}

.SelectMenu--alignable .SelectMenu-toggle {
    padding-right: 36px;
    text-align: left
}

.SelectMenu--alignable .SelectMenu-item {
    padding-left: 10px;
    text-align: left
}

.SelectMenu-close {
    display: none;
    position: fixed;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    z-index: 2;
    cursor: pointer
}

.SelectMenu-close .SelectMenu-close-icon {
    position: absolute;
    top: 10px;
    left: 10px
}

.SelectMenu--fullscreen .SelectMenu-menu {
    padding-top: 40px
}

.SelectMenu--fullscreen .SelectMenu-menu .SelectMenu-close {
    display: block
}

.SelectMenu--fullscreen .SelectMenu-menu.is-active {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
    overflow: auto;
    z-index: 7
}

.SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item {
    font-size: 1.296rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item {
        font-size: 1.728rem
    }
}

.SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item.zh-cn, .zh-cn .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item, .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item, .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item.zh-tw, .zh-tw .SelectMenu--fullscreen .SelectMenu-menu.is-active .SelectMenu-item {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.SelectMenu--dark > .SelectMenu-toggle {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 1, 2, .97)), to(rgba(21, 13, 6, .97)));
    background: linear-gradient(180deg, rgba(1, 1, 2, .97), rgba(21, 13, 6, .97));
    border: 1px solid #504137;
    color: #fff
}

.SelectMenu--dark > .SelectMenu-toggle:before {
    border-color: transparent transparent #f8b700
}

.SelectMenu--dark > .SelectMenu-toggle:after {
    border-color: #f8b700 transparent transparent
}

.SelectMenu--upper {
    text-transform: uppercase
}

.SelectMenu--ocho .SelectMenu-toggle {
    background-color: #fff;
    border-color: #cacaca
}

.SelectMenu--ocho .SelectMenu-menu {
    background-color: #000;
    border-color: #222
}

.SelectMenu--ocho .SelectMenu-item.is-highlighted {
    background-color: #09273e
}

.SelectMenu--ocho .SelectMenu-item.is-selected {
    color: #fff
}

.SelectMenu--ocho .SelectMenu-toggleInput::-webkit-input-placeholder {
    color: #000;
    opacity: .7
}

.SelectMenu--ocho .SelectMenu-toggleInput::-moz-placeholder {
    color: #000;
    opacity: .7
}

.SelectMenu--ocho .SelectMenu-toggleInput:-ms-input-placeholder {
    color: #000;
    opacity: .7
}

.SelectMenu--ocho .SelectMenu-toggleInput::-ms-input-placeholder {
    color: #000;
    opacity: .7
}

.SelectMenu--ocho .SelectMenu-toggleInput::placeholder {
    color: #000;
    opacity: .7
}

.SelectMenu--ghost .SelectMenu-toggle {
    background-color: #000;
    border: 1px solid #f8b700;
    color: #f8b700
}

.SelectMenu--ghost .SelectMenu-toggle:before {
    border-color: transparent transparent #f8b700
}

.SelectMenu--ghost .SelectMenu-toggle:after {
    border-color: #f8b700 transparent transparent
}

html:not(.touch) .SelectMenu--ghost .SelectMenu-toggle:focus, html:not(.touch) .SelectMenu--ghost .SelectMenu-toggle:hover {
    border-color: #fff
}

.SelectMenu--ghost .SelectMenu-menu {
    top: 100%;
    background-color: #000
}

.SelectMenu--ghost .SelectMenu-toggleInput::-webkit-input-placeholder {
    color: #f8b700
}

.SelectMenu--ghost .SelectMenu-toggleInput::-moz-placeholder {
    color: #f8b700
}

.SelectMenu--ghost .SelectMenu-toggleInput:-ms-input-placeholder {
    color: #f8b700
}

.SelectMenu--ghost .SelectMenu-toggleInput::-ms-input-placeholder {
    color: #f8b700
}

.SelectMenu--ghost .SelectMenu-toggleInput::placeholder {
    color: #f8b700
}

.SelectMenu--medium .SelectMenu-menu, .SelectMenu--medium .SelectMenu-toggle, .SelectMenu--medium .SelectMenu-toggleInput {
    font-size: 1rem;
    line-height: 1.5;
    text-align: left
}

@media (min-width: 720px) {
    .SelectMenu--medium .SelectMenu-menu, .SelectMenu--medium .SelectMenu-toggle, .SelectMenu--medium .SelectMenu-toggleInput {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu--medium .SelectMenu-menu, .SelectMenu--medium .SelectMenu-toggle, .SelectMenu--medium .SelectMenu-toggleInput {
        font-size: 1.2rem
    }
}

.SelectMenu--medium .SelectMenu-toggle {
    padding-top: 6px;
    padding-bottom: 7px;
    color: #fff
}

.SelectMenu--medium .SelectMenu-toggle:after, .SelectMenu--medium .SelectMenu-toggle:before {
    width: 6px;
    border-width: 3px;
    right: 10px;
    margin-top: -11px
}

.SelectMenu--medium .SelectMenu-toggle:after {
    margin-top: 2px
}

.SelectMenu--medium .SelectMenu-link {
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .SelectMenu--medium .SelectMenu-link {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu--medium .SelectMenu-link {
        font-size: 1rem
    }
}

.SelectMenu--small {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
    min-width: 70px
}

.SelectMenu--small .SelectMenu-menu, .SelectMenu--small .SelectMenu-toggle, .SelectMenu--small .SelectMenu-toggleInput {
    font-size: 1rem;
    line-height: 1.5;
    text-align: left
}

@media (min-width: 720px) {
    .SelectMenu--small .SelectMenu-menu, .SelectMenu--small .SelectMenu-toggle, .SelectMenu--small .SelectMenu-toggleInput {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .SelectMenu--small .SelectMenu-menu, .SelectMenu--small .SelectMenu-toggle, .SelectMenu--small .SelectMenu-toggleInput {
        font-size: 1rem
    }
}

.SelectMenu--small .SelectMenu-toggle {
    padding-top: 6px;
    padding-bottom: 7px;
    color: #fff
}

.SelectMenu--small .SelectMenu-toggle:after, .SelectMenu--small .SelectMenu-toggle:before {
    width: 6px;
    border-width: 3px;
    right: 10px;
    margin-top: -11px
}

.SelectMenu--small .SelectMenu-toggle:after {
    margin-top: 2px
}

.SelectMenu--small.SelectMenu--alignable .SelectMenu-toggle {
    padding-right: 36px
}

.SelectMenu--small.SelectMenu--full {
    max-width: none
}

.SiteNav-sticky, .space-sitenav {
    height: 0
}

@media (min-width: 970px) {
    .SiteNav-sticky, .space-sitenav {
        height: 90px
    }
}

@media (min-width: 1080px) {
    .SiteNav-sticky, .space-sitenav {
        height: 100px
    }
}

@media (min-width: 1280px) {
    .SiteNav-sticky, .space-sitenav {
        height: 105px
    }
}

@media (min-width: 1450px) {
    .SiteNav-sticky, .space-sitenav {
        height: 120px
    }
}

.SiteNav {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 4;
    height: 0
}

@media (max-width: 969px) {
    .SiteNav {
        display: none
    }
}

@media (min-width: 970px) and (max-width: 1079px) {
    .SiteNav {
        display: block
    }

    .SiteNav .SiteNav-bar {
        margin: 40px 30px 0
    }

    .SiteNav .SiteNav-menu {
        height: 50px;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        position: relative;
        max-width: 1600px;
        margin: 0 auto;
        background: none
    }

    .SiteNav .SiteNav-menu:after, .SiteNav .SiteNav-menu:before {
        display: none
    }

    .SiteNav .SiteNav-sectionLeft {
        left: 60px
    }

    .SiteNav .SiteNav-menuListItem {
        font-size: 1rem;
        height: 50px
    }

    .SiteNav .SiteNav-menuListLink {
        line-height: 50px
    }

    .SiteNav .SiteNav-searchLink {
        height: 50px;
        width: 50px
    }

    .SiteNav .SiteNav-avatar {
        display: block;
        width: 37px
    }

    .SiteNav .SiteNav-avatar > .Avatar-image {
        left: 5px;
        top: 4px;
        right: 5px;
        bottom: 6px
    }

    .SiteNav .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink {
        margin-top: 0
    }

    .SiteNav .SiteNav-logo {
        margin-left: 0;
        width: 60px;
        height: 60px;
        left: 0
    }

    .SiteNav .SiteNav-logo, .SiteNav .SiteNav-logo-icon {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .SiteNav .SiteNav-logo-icon {
        opacity: 1;
        pointer-events: auto
    }

    .SiteNav .SiteNav-logo-full {
        opacity: 0;
        max-width: 150px;
        pointer-events: none;
        top: 3px
    }

    .SiteNav .SiteNav-doormat {
        margin-top: 0
    }

    .SiteNav .SiteNav-logo:before, .SiteNav .SiteNav-menuListUserInfo {
        display: none
    }
}

@media (min-width: 970px) and (max-width: 1079px) and (min-width: 1080px) {
    .SiteNav .SiteNav-menu {
        padding-left: 481px;
        padding-right: 161px
    }
}

@media (min-width: 970px) and (max-width: 1079px) and (min-width: 1280px) {
    .SiteNav .SiteNav-menu {
        padding-right: 240px;
        padding-left: 681px
    }
}

@media (min-width: 970px) and (max-width: 1079px) and (min-width: 1280px) {
    .SiteNav .SiteNav-menuListItem {
        font-size: 1.2rem
    }
}

@media (min-width: 970px) and (max-width: 1079px) and (min-width: 1450px) {
    .SiteNav .SiteNav-menuListItem {
        font-size: 1.44rem
    }
}

.SiteNav .Sticky-content {
    height: 50px
}

.SiteNav-area {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px
}

.SiteNav-bar {
    margin: 40px 30px 0;
    background: #211510 url(../components/sitenav/assets_subdomain/sitenav-bar-bg.1fce1b9a3f4b7c90fb331726baa8c3ed.jpg) repeat-x 80px 0;
    background-size: auto 100%;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6)
}

@media (min-width: 1080px) {
    .SiteNav-bar {
        margin-left: 110px
    }
}

.SiteNav-menu {
    color: #fff;
    height: 60px;
    position: relative
}

.SiteNav-menu:after, .SiteNav-menu:before {
    background: rgba(68, 47, 38, .5);
    content: "";
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.SiteNav-menu:after {
    background: rgba(51, 33, 25, .5);
    bottom: 0;
    top: auto
}

@media (min-width: 1280px) {
    .SiteNav-menu {
        height: 65px
    }
}

@media (min-width: 1450px) {
    .SiteNav-menu {
        height: 80px
    }
}

.SiteNav-sectionLeft {
    position: absolute;
    left: 0;
    top: 0
}

@media (min-width: 1080px) {
    .SiteNav-sectionLeft {
        left: 140px
    }
}

@media (min-width: 1280px) {
    .SiteNav-sectionLeft {
        left: 168px
    }
}

@media (min-width: 1450px) {
    .SiteNav-sectionLeft {
        left: 198px
    }
}

.SiteNav-sectionRight {
    position: absolute;
    right: 0;
    top: 0
}

.SiteNav-logo {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    left: -86px;
    top: -15px;
    text-align: center;
    width: 219px;
    z-index: 1
}

@media (min-width: 1280px) {
    .SiteNav-logo {
        top: -15px;
        width: 245px
    }
}

@media (min-width: 1450px) {
    .SiteNav-logo {
        top: -11px;
        width: 272px
    }
}

.SiteNav-logo-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 0;
    pointer-events: none;
    width: 40px
}

.SiteNav-logo-menu {
    top: 4px;
    left: 4px;
    width: 34px
}

.SiteNav-logo-bnet, .SiteNav-logo-menu {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    opacity: 0
}

.SiteNav-logo-bnet {
    right: 8px;
    top: 8px;
    width: 32px
}

.SiteNav-logo-full {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none
}

@media (min-width: 1080px) {
    .SiteNav-logo-full {
        display: block
    }
}

.SiteNav-menuList, .SiteNav-sectionLeft, .SiteNav-sectionRight {
    height: 100%
}

.SiteNav-menuList {
    position: relative
}

.SiteNav-menuList:after, .SiteNav-menuList:before {
    background: rgba(21, 13, 9, .8);
    bottom: 1px;
    content: "";
    position: absolute;
    left: -1px;
    top: 1px;
    width: 1px
}

.SiteNav-menuList:after {
    background: rgba(68, 47, 38, .5);
    left: auto;
    right: -1px
}

.SiteNav-menuListItem {
    font-size: 1rem
}

.SiteNav-menuListItem > * {
    padding: 0 8px
}

@media (min-width: 1280px) {
    .SiteNav-menuListItem {
        font-size: 1.2rem
    }
}

@media (min-width: 1450px) {
    .SiteNav-menuListItem {
        font-size: 1.44rem
    }
}

.SiteNav-menuListLink {
    white-space: nowrap;
    line-height: 60px;
    position: relative;
    text-align: center
}

.SiteNav-menuListLink:after, .SiteNav-menuListLink:before {
    background: rgba(68, 47, 38, .5);
    bottom: 1px;
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 1px
}

.SiteNav-menuListLink:after {
    background: rgba(21, 13, 9, .8);
    left: auto;
    right: 0
}

@media (min-width: 1280px) {
    .SiteNav-menuListLink {
        line-height: 65px
    }
}

@media (min-width: 1450px) {
    .SiteNav-menuListLink {
        line-height: 80px
    }
}

.SiteNav-menuListLink.is-active {
    background: rgba(68, 47, 38, .5)
}

.SiteNav-searchLink {
    padding: 0;
    height: 60px;
    width: 40px
}

@media (min-width: 1280px) {
    .SiteNav-searchLink {
        height: 65px;
        width: 65px
    }
}

@media (min-width: 1450px) {
    .SiteNav-searchLink {
        height: 80px;
        width: 80px
    }
}

.SiteNav-menuListItem--subscribe .SiteNav-menuListLink.is-active, .SiteNav-menuListItem--user .SiteNav-menuListLink.is-active {
    background: transparent
}

.SiteNav-menuListItem--user {
    background: url(../components/sitenav/assets_subdomain/sitenav-bar-user-bg.a5aceeed07718f696e26dc7b9c75f188.jpg) repeat-x 0 0
}

.SiteNav-menuListItem--subscribe {
    background: url(../components/sitenav/assets_subdomain/sitenav-bar-subscribe-bg.162c5eb038c3052183669edced8e349a.jpg) repeat-x 0 0
}

.SiteNav-menuListItem--subscribe, .SiteNav-menuListItem--user {
    background-size: auto 100%
}

.SiteNav-menuListItem--userLoggedIn {
    font-size: 1.08rem;
    line-height: 1.5;
    padding: 0 8px;
    text-align: left
}

@media (min-width: 720px) {
    .SiteNav-menuListItem--userLoggedIn {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .SiteNav-menuListItem--userLoggedIn {
        font-size: 1.44rem
    }
}

.SiteNav-menuListItem--subscribe .SiteNav-menuListLink, .SiteNav-menuListItem--user .SiteNav-menuListLink, .SiteNav-menuListItem--userLoggedIn {
    position: relative;
    z-index: 1
}

.SiteNav-menuListItem--subscribe .SiteNav-menuListLink:after, .SiteNav-menuListItem--subscribe .SiteNav-menuListLink:before, .SiteNav-menuListItem--user .SiteNav-menuListLink:after, .SiteNav-menuListItem--user .SiteNav-menuListLink:before, .SiteNav-menuListItem--userLoggedIn:after, .SiteNav-menuListItem--userLoggedIn:before {
    background: rgba(179, 61, 38, .5);
    bottom: 1px;
    content: "";
    left: -8px;
    position: absolute;
    top: 1px;
    width: 1px
}

.SiteNav-menuListItem--subscribe .SiteNav-menuListLink:after, .SiteNav-menuListItem--user .SiteNav-menuListLink:after, .SiteNav-menuListItem--userLoggedIn:after {
    background: rgba(179, 61, 38, .5);
    left: auto;
    right: -8px
}

.SiteNav-menuListItem--userLoggedIn:before {
    left: 0
}

.SiteNav-menuListItem--userLoggedIn:after {
    right: 0
}

.SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink {
    line-height: 18px;
    text-align: left
}

.SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink:after, .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink:before {
    display: none
}

.SiteNav-menuListItem--userLoggedIn .SiteNav-menuListItemWrap {
    padding: 5px 8px 8px
}

@media (min-width: 1280px) {
    .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListItemWrap {
        padding-top: 7px;
        padding-bottom: 8px
    }
}

@media (min-width: 1450px) {
    .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListItemWrap {
        padding-top: 8px;
        padding-bottom: 9px
    }
}

.has-overlapping-elements .SiteNav-menuListItem--subscribe {
    display: none
}

.SiteNav-avatar {
    display: block;
    margin-right: 5px;
    position: relative;
    top: 1px;
    width: 47px
}

@media (min-width: 1280px) {
    .SiteNav-avatar {
        width: 50px
    }
}

@media (min-width: 1450px) {
    .SiteNav-avatar {
        width: 63px
    }
}

.SiteNav-searchClose, .SiteNav-searchOpen {
    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: opacity .3s cubic-bezier(.23, 1, .32, 1) 0s;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    line-height: 24px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1
}

.SiteNav-searchClose .Icon-svg, .SiteNav-searchOpen .Icon-svg {
    width: 20px
}

.SiteNav-searchClose {
    opacity: 0;
    color: #fff
}

.SiteNav-searchLink.is-active > .SiteNav-searchOpen {
    opacity: 0
}

.SiteNav-searchLink.is-active > .SiteNav-searchClose {
    opacity: 1
}

.SiteNav-doormat {
    -webkit-transition: all .4s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .4s cubic-bezier(.23, 1, .32, 1) 0s;
    background: #150d06;
    background: rgba(21, 13, 6, .97);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 1, 2, .97)), to(rgba(21, 13, 6, .97)));
    background: linear-gradient(180deg, rgba(1, 1, 2, .97), rgba(21, 13, 6, .97));
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    border: 0 solid #241505;
    border-top: none;
    border-bottom: 0 solid #311c06;
    display: block;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    width: calc(100% - 60px);
    left: 30px;
    margin: 0;
    opacity: .5;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.SiteNav-doormat.is-active {
    -webkit-transition: max-height .7s ease-out, opacity .4s cubic-bezier(.23, 1, .32, 1);
    transition: max-height .7s ease-out, opacity .4s cubic-bezier(.23, 1, .32, 1);
    max-height: 750px;
    border-width: 1px;
    opacity: 1
}

.SiteNav-doormat.is-active .SiteNav-doormatContent {
    -webkit-transition: all .75s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .75s cubic-bezier(.23, 1, .32, 1) 0s;
    padding-top: 45px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.SiteNav--thinFull .SiteNav-doormat.is-active .SiteNav-doormatContent {
    padding-top: 45px
}

.SiteNav-doormatContent {
    -webkit-transition: all .4s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .4s cubic-bezier(.23, 1, .32, 1) 0s;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    padding: 20px 40px 40px
}

.SiteNav--thinFull .SiteNav-doormatContent {
    padding-top: 20px
}

.SiteNav-sectionTitle {
    color: #cacaca
}

.SiteNav-searchBox {
    position: relative
}

.SiteNav-searchIcon {
    left: 20px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    z-index: 1
}

.SiteNav-searchInput {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 1, 2, .97)), to(rgba(21, 13, 6, .97)));
    background: linear-gradient(180deg, rgba(1, 1, 2, .97), rgba(21, 13, 6, .97));
    border: 1px solid #352011;
    color: #fff;
    outline: none;
    padding: 15px 20px 15px 54px;
    position: relative;
    width: 100%
}

.SiteNav-searchInput:active, .SiteNav-searchInput:focus {
    border-color: #674024
}

.SiteNav-searchInput::-webkit-input-placeholder {
    color: #d79e0d;
    font-style: italic
}

.SiteNav-searchInput:-moz-placeholder, .SiteNav-searchInput::-moz-placeholder {
    color: #d79e0d;
    font-style: italic
}

.SiteNav-searchInput::-moz-selection {
    background-color: #f8b700;
    color: #352011
}

.SiteNav-searchInput::selection {
    background-color: #f8b700;
    color: #352011
}

.SiteNav-pageLink {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

html:not(.touch) .SiteNav-pageLink:hover {
    color: #fff
}

.SiteNav-body {
    color: #cacaca;
    font-size: 1.2rem;
    margin-right: 1em
}

.SiteNav-menuListUserInfo {
    font-size: 12px;
    position: relative;
    margin-top: -2px;
    display: none
}

@media (min-width: 1280px) {
    .SiteNav-menuListUserInfo {
        display: block
    }
}

.SiteNav-characterLevelLabel {
    display: none;
    margin-right: 4px
}

@media (min-width: 1450px) {
    .SiteNav-characterLevelLabel {
        display: inline-block
    }
}

.SiteNav-menuListItemWrap, .SiteNav-sectionRight, .SiteNav-sectionRight > .SiteNav-menuList {
    z-index: auto
}

.SiteNav-menuListItem--subscribe > .SiteNav-menuListItemWrap, .SiteNav-menuListItem--user > .SiteNav-menuListItemWrap {
    position: relative
}

.SiteNav-menuListItem--subscribe > .SiteNav-menuListItemWrap:after, .SiteNav-menuListItem--subscribe > .SiteNav-menuListItemWrap:before, .SiteNav-menuListItem--user > .SiteNav-menuListItemWrap:after, .SiteNav-menuListItem--user > .SiteNav-menuListItemWrap:before {
    background: rgba(179, 61, 38, .5);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.SiteNav-menuListItem--subscribe > .SiteNav-menuListItemWrap:after, .SiteNav-menuListItem--user > .SiteNav-menuListItemWrap:after {
    background: rgba(135, 43, 25, .5);
    bottom: 0;
    top: auto
}

.SiteNav-menuListItem--userLoggedIn > .SiteNav-menuListItemWrap:after, .SiteNav-menuListItem--userLoggedIn > .SiteNav-menuListItemWrap:before {
    left: -10px;
    right: -10px
}

.SiteNav-menuListItem {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700
}

.SiteNav-menuListItem.zh-cn, .zh-cn .SiteNav-menuListItem {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SiteNav-menuListItem, .SiteNav-menuListItem.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SiteNav-menuListItem, .SiteNav-menuListItem.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SiteNav-menuListItem.zh-tw, .zh-tw .SiteNav-menuListItem {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.SiteNav-pageLink {
    color: #f8b700;
    font-size: 1rem;
    line-height: 1.5em
}

@media (min-width: 1280px) {
    .SiteNav-pageLink {
        font-size: 1.2rem
    }
}

.SiteNav-menuListLinkText {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top, #efd100, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #fff 51%, #fff);
    background-size: 1em 2.5em;
    color: #f8b700;
    display: inline-block;
    line-height: 1.5em;
    position: relative;
    z-index: auto;
    background-position: center 0
}

.SiteNav-menuListLinkText:after {
    background: none;
    content: attr(data-text);
    display: inline-block;
    left: 0;
    position: absolute;
    text-shadow: 0 0 1px transparent, 0 1px 5px #000;
    top: 0;
    z-index: -1
}

.SiteNav-menuListLink.is-active .SiteNav-menuListLinkText, .SiteNav-menuListLinkText--white, html:not(.touch) .SiteNav-menuListLink:hover .SiteNav-menuListLinkText {
    color: #fff;
    background-position: center 100%
}

.SiteNav-dropdownIndicator {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    background-position: 0 0 !important
}

.SiteNav-menuListLink .SiteNav-dropdownIndicator {
    top: 1px
}

@media (min-width: 1450px) {
    .SiteNav-menuListLink .SiteNav-dropdownIndicator {
        top: 0
    }
}

.SiteNav-menuListLink.is-active .SiteNav-dropdownIndicator {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.SiteNav-menuListLink.is-active .SiteNav-dropdownIndicator, html:not(.touch) .SiteNav-menuListLink:hover .SiteNav-dropdownIndicator {
    -webkit-filter: brightness(200%) grayscale();
    filter: brightness(200%) grayscale()
}

.SiteNav--thin .SiteNav-bar {
    margin: 40px 30px 0
}

.SiteNav--thin .SiteNav-menu {
    height: 50px;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    background: none
}

.SiteNav--thin .SiteNav-menu:after, .SiteNav--thin .SiteNav-menu:before {
    display: none
}

@media (min-width: 1080px) {
    .SiteNav--thin .SiteNav-menu {
        padding-left: 481px;
        padding-right: 161px
    }
}

@media (min-width: 1280px) {
    .SiteNav--thin .SiteNav-menu {
        padding-right: 240px;
        padding-left: 681px
    }
}

.SiteNav--thin .SiteNav-sectionLeft {
    left: 60px
}

.SiteNav--thin .SiteNav-menuListItem {
    font-size: 1rem;
    height: 50px
}

@media (min-width: 1280px) {
    .SiteNav--thin .SiteNav-menuListItem {
        font-size: 1.2rem
    }
}

@media (min-width: 1450px) {
    .SiteNav--thin .SiteNav-menuListItem {
        font-size: 1.44rem
    }
}

.SiteNav--thin .SiteNav-menuListLink {
    line-height: 50px
}

.SiteNav--thin .SiteNav-searchLink {
    height: 50px;
    width: 50px
}

.SiteNav--thin .SiteNav-avatar {
    display: block;
    width: 37px
}

.SiteNav--thin .SiteNav-avatar > .Avatar-image {
    left: 5px;
    top: 4px;
    right: 5px;
    bottom: 6px
}

.SiteNav--thin .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink {
    margin-top: 0
}

.SiteNav--thin .SiteNav-logo {
    margin-left: 0;
    width: 60px;
    height: 60px;
    left: 0
}

.SiteNav--thin .SiteNav-logo, .SiteNav--thin .SiteNav-logo-icon {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.SiteNav--thin .SiteNav-logo-icon {
    opacity: 1;
    pointer-events: auto
}

.SiteNav--thin .SiteNav-logo-full {
    opacity: 0;
    max-width: 150px;
    pointer-events: none;
    top: 3px
}

.SiteNav--thin .SiteNav-doormat {
    margin-top: 0
}

.SiteNav--thin .SiteNav-logo:before, .SiteNav--thin .SiteNav-menuListUserInfo {
    display: none
}

@media (min-width: 970px) {
    .SiteNav--thinFull .SiteNav-bar {
        margin: 40px 30px 0
    }

    .SiteNav--thinFull .SiteNav-menu {
        height: 50px;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        position: relative;
        max-width: 1600px;
        margin: 0 auto;
        background: none
    }

    .SiteNav--thinFull .SiteNav-menu:after, .SiteNav--thinFull .SiteNav-menu:before {
        display: none
    }

    .SiteNav--thinFull .SiteNav-sectionLeft {
        left: 60px
    }

    .SiteNav--thinFull .SiteNav-menuListItem {
        font-size: 1rem;
        height: 50px
    }

    .SiteNav--thinFull .SiteNav-menuListLink {
        line-height: 50px
    }

    .SiteNav--thinFull .SiteNav-searchLink {
        height: 50px;
        width: 50px
    }

    .SiteNav--thinFull .SiteNav-avatar {
        display: block;
        width: 37px
    }

    .SiteNav--thinFull .SiteNav-avatar > .Avatar-image {
        left: 5px;
        top: 4px;
        right: 5px;
        bottom: 6px
    }

    .SiteNav--thinFull .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListLink {
        margin-top: 0
    }

    .SiteNav--thinFull .SiteNav-logo {
        margin-left: 0;
        width: 60px;
        height: 60px;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .SiteNav--thinFull .SiteNav-logo-icon {
        opacity: 1;
        pointer-events: auto;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .SiteNav--thinFull .SiteNav-logo-full {
        opacity: 0;
        max-width: 150px;
        pointer-events: none;
        top: 3px
    }

    .SiteNav--thinFull .SiteNav-doormat {
        margin-top: 0
    }

    .SiteNav--thinFull .SiteNav-logo:before, .SiteNav--thinFull .SiteNav-menuListUserInfo {
        display: none
    }

    .SiteNav--thinFull .SiteNav-area {
        max-width: 100%
    }

    .SiteNav--thinFull .SiteNav-bar {
        margin: 0
    }

    .SiteNav--thinFull .SiteNav-doormat {
        width: 100%;
        left: 0
    }

    .SiteNav--thinFull .SiteNav-logo:after {
        display: none
    }

    .SiteNav--thinFull .SiteNav-menuListItem--userLoggedIn .SiteNav-menuListItemWrap {
        padding: 0 8px
    }
}

@media (min-width: 970px) and (min-width: 1080px) {
    .SiteNav--thinFull .SiteNav-menu {
        padding-left: 481px;
        padding-right: 161px
    }
}

@media (min-width: 970px) and (min-width: 1280px) {
    .SiteNav--thinFull .SiteNav-menu {
        padding-right: 240px;
        padding-left: 681px
    }
}

@media (min-width: 970px) and (min-width: 1280px) {
    .SiteNav--thinFull .SiteNav-menuListItem {
        font-size: 1.2rem
    }
}

@media (min-width: 970px) and (min-width: 1450px) {
    .SiteNav--thinFull .SiteNav-menuListItem {
        font-size: 1.44rem
    }
}

@media (min-width: 970px) and (min-width: 1280px) {
    .SiteNav--thinFull .SiteNav-menuListUserInfo {
        display: none
    }
}

@media (min-width: 970px) and (min-width: 1280px) {
    .SiteNav--thinFull .SiteNav-menu {
        padding-right: 160px
    }
}

.SiteNav-bar, .SiteNav-logo-menu, .SiteNav-menu, .SiteNav-menuList, .SiteNav-menuList:after, .SiteNav-menuListItem, .SiteNav-menuListItem:after, .SiteNav-menuListLink, .SiteNav-sectionLeft {
    -webkit-transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .3s cubic-bezier(.23, 1, .32, 1) 0s
}

.SiteNav-logo, .SiteNav-logo-full, .SiteNav-logo-icon {
    -webkit-transition: width .3s, opacity .3s, -webkit-filter .3s;
    transition: width .3s, opacity .3s, -webkit-filter .3s;
    transition: width .3s, opacity .3s, filter .3s;
    transition: width .3s, opacity .3s, filter .3s, -webkit-filter .3s
}

.SkipLink {
    background: #000
}

.Slider {
    overflow: visible;
    outline: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s
}

.Slider.flickity-enabled {
    height: auto;
    opacity: 1
}

.Slider .flickity-viewport {
    cursor: -webkit-grab;
    cursor: grab
}

.Slider .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.Slider--topOverflow {
    padding-top: 100px;
    margin-top: -100px
}

.Slider:after {
    content: "flickity";
    display: none
}

.Slider--disabled {
    height: auto;
    opacity: 1
}

.Slider--disabled:after {
    content: ""
}

html.touch .Slider {
    -webkit-overflow-scrolling: touch
}

html.touch .Slider::-webkit-scrollbar {
    width: 0
}

.Slider-slide {
    margin: 0;
    float: left;
    display: inline-block
}

.Slider-slide--gutters {
    margin: 0 10px
}

.Slider-slide--guttersMedium {
    margin: 0 20px
}

.SocialButtons-button, .SocialButtons-link {
    display: inline-block
}

.SocialButtons-link {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    background: #b1997f;
    color: #fff;
    margin: 5px 10px 5px 0;
    padding: 4px 16px;
    position: relative;
    line-height: 2.2rem;
    cursor: pointer
}

html:not(.touch) .SocialButtons-link:hover {
    background: #f8b700
}

.SocialButtons-link * {
    pointer-events: none
}

.SocialButtons-link--facebook {
    background: #3a5795;
    padding-left: 36px
}

html:not(.touch) .SocialButtons-link--facebook:hover {
    background: #25375e
}

.SocialButtons-link--twitter {
    background: #55acee;
    padding-left: 41px
}

html:not(.touch) .SocialButtons-link--twitter:hover {
    background: #1689e0
}

.SocialButtons-link--vkontakte {
    background: #4d75a3;
    padding-left: 50px
}

html:not(.touch) .SocialButtons-link--vkontakte:hover {
    background: #34506f
}

.SocialButtons-link--tencentqq {
    background: #ec5252;
    padding-left: 38px
}

html:not(.touch) .SocialButtons-link--tencentqq:hover {
    background: #da1818
}

.SocialButtons-link--whatsapp {
    background: #25d366;
    padding-left: 38px
}

html:not(.touch) .SocialButtons-link--whatsapp:hover {
    background: #1a9247
}

.SocialButtons-icon {
    left: 0;
    position: absolute;
    top: 0
}

.SocialButtons-icon--facebook {
    left: 9px;
    margin-top: -9px;
    top: 50%
}

.SocialButtons-icon--facebook > .Icon-svg {
    display: block;
    height: 21px;
    width: 21px
}

.SocialButtons-icon--twitter {
    left: 8px;
    margin-top: -12px;
    top: 50%
}

.SocialButtons-icon--twitter > .Icon-svg {
    display: block;
    height: 24px;
    width: 24px
}

.SocialButtons-icon--vkontakte {
    left: 7px;
    margin-top: -19px;
    top: 50%
}

.SocialButtons-icon--vkontakte > .Icon-svg {
    display: block;
    height: 38px;
    width: 38px
}

.SocialButtons-icon--tencentqq {
    left: 7px;
    margin-top: -13px;
    top: 50%
}

.SocialButtons-icon--tencentqq > .Icon-svg {
    display: block;
    height: 26px;
    width: 26px
}

.SocialButtons-icon--whatsapp {
    left: 8px;
    margin-top: -11px;
    top: 50%
}

.SocialButtons-icon--whatsapp > .Icon-svg {
    display: block;
    height: 22px;
    width: 22px
}

.SocialButtons--stacked .SocialButtons-button {
    display: block;
    margin: 0 0 20px
}

.SocialButtons--stacked .SocialButtons-link {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    display: block
}

.SortTable {
    display: table;
    margin: 0 auto
}

.SortTable-head {
    display: table-header-group
}

.SortTable-body {
    display: table-row-group
}

.SortTable-row {
    color: #b1997f;
    display: table-row
}

.SortTable--animated .SortTable-row {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s
}

.SortTable-body .SortTable-row:nth-child(odd) {
    background: hsla(0, 0%, 100%, .02)
}

.SortTable-row[disabled] {
    color: #cacaca
}

.SortTable-col {
    display: table-cell
}

.SortTable-col.is-hidden {
    display: none !important
}

.SortTable-label {
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.5;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
    border: 0;
    color: #f8b700;
    cursor: pointer;
    padding: 1px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 1px transparent, 1px 1px 0 #000, 1px 1px 0 #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: table-cell
}

.SortTable-label.zh-cn, .zh-cn .SortTable-label {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SortTable-label, .SortTable-label.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SortTable-label, .SortTable-label.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SortTable-label.zh-tw, .zh-tw .SortTable-label {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

@media (min-width: 720px) {
    .SortTable-label {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .SortTable-label {
        font-size: 1.44rem
    }
}

html:not(.touch) .SortTable-label {
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

html:not(.touch) .SortTable-label:hover {
    color: #fff
}

.SortTable-label:active .SortTable-labelOuter {
    top: 0
}

.SortTable-label, .SortTable-labelOuter {
    padding-right: 0
}

.SortTable-labelOuter {
    display: block;
    padding: 1px;
    position: relative
}

.SortTable-labelInner {
    display: block;
    padding: 13px 58px;
    position: relative
}

.SortTable-labelText {
    display: inline;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 0 #000, 1px 1px 0 #000
}

.SortTable-label:last-child, .SortTable-label:last-child .SortTable-labelOuter {
    padding-right: 1px
}

.SortTable-labelInner, .SortTable-labelOuter {
    display: block;
    width: 100%
}

.SortTable-label .SortTable-labelInner {
    padding-right: 10px;
    padding-left: 10px
}

.SortTable-label.is-sorted, .SortTable-label.is-sorted-reverse {
    color: #fff;
    position: relative
}

.SortTable-label.is-sorted-reverse .SortTable-labelText:after, .SortTable-label.is-sorted .SortTable-labelText:after {
    border-top: 5px solid #f8b700;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: 25%;
    content: "";
    height: 0;
    right: -15px;
    position: absolute;
    width: 0
}

.SortTable-label.is-sorted-reverse .SortTable-labelText:after {
    border-top: none;
    border-bottom: 5px solid #f8b700;
    bottom: auto;
    top: 45%
}

.SortTable-data {
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    padding: 10px;
    vertical-align: middle;
    position: relative
}

@media (min-width: 720px) {
    .SortTable-data {
        height: 48px;
        padding: 0 20px
    }
}

.SortTable--alignTop .SortTable-data {
    vertical-align: top
}

.SortTable--dataPadding .SortTable-data {
    padding: 10px
}

.SortTable-row:last-child:nth-child(odd) .SortTable-data {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.SortTable-row:last-child:nth-child(2n) .SortTable-data {
    border-bottom: 0
}

.SortTable-status {
    vertical-align: middle
}

.SortTable.is-resizing .SortTable-col {
    display: inline-block !important;
    width: auto !important
}

.SortTable--flex, .SortTable--stretch, .SortTable--stretch .SortTable-col[data-priority="1"] {
    width: 100%
}

.SortTable-row.SortTable-row--noDividers .SortTable-data {
    border-top: 0
}

.SortTable-row:last-child:nth-child(odd).SortTable-row--noDividers .SortTable-data {
    border-bottom: 0
}

.SortTable-row.SortTable-row--tall .SortTable-data {
    padding-top: 15px;
    padding-bottom: 20px
}

.SortTable-row.SortTable-row--ghost {
    background: hsla(0, 0%, 100%, .02)
}

.SortTable-row--bordered > .SortTable-data, .SortTable-row--bordered > .SortTable-label {
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.SortTable-label--left {
    text-align: left
}

.SortTable-label--right {
    text-align: right
}

.SortTable-label--beige .SortTable-labelText {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .SortTable-label--beige .SortTable-labelText {
        font-size: 1rem
    }
}

@media (min-width: 1280px) {
    .SortTable-label--beige .SortTable-labelText {
        font-size: 1rem
    }
}

.SortTable-label--beige .SortTable-labelText.zh-cn, .zh-cn .SortTable-label--beige .SortTable-labelText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SortTable-label--beige .SortTable-labelText, .SortTable-label--beige .SortTable-labelText.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SortTable-label--beige .SortTable-labelText, .SortTable-label--beige .SortTable-labelText.ru-ru {
    font-family: Open Sans, Arial, Helvetica, sans-serif
}

.SortTable-label--beige .SortTable-labelText.zh-tw, .zh-tw .SortTable-label--beige .SortTable-labelText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.SortTable-label--white .SortTable-labelText {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .SortTable-label--white .SortTable-labelText {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .SortTable-label--white .SortTable-labelText {
        font-size: 1.44rem
    }
}

.SortTable-label--white .SortTable-labelText.zh-cn, .zh-cn .SortTable-label--white .SortTable-labelText {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .SortTable-label--white .SortTable-labelText, .SortTable-label--white .SortTable-labelText.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .SortTable-label--white .SortTable-labelText, .SortTable-label--white .SortTable-labelText.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.SortTable-label--white .SortTable-labelText.zh-tw, .zh-tw .SortTable-label--white .SortTable-labelText {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.SortTable-data.SortTable-data--bg > div {
    background-color: hsla(0, 0%, 100%, .08);
    width: 35px;
    height: 24px
}

.SortTable-data.SortTable-data--mediumBg > div {
    background-color: hsla(0, 0%, 100%, .08);
    width: 26px;
    height: 18px
}

.SortTable-data.SortTable-data--smallBg > div {
    background-color: hsla(0, 0%, 100%, .08);
    width: 23px;
    height: 17px
}

.SortTable--disabled .SortTable-label, .SortTable--disabled html:not(.touch) .SortTable-label:hover {
    color: #fff;
    cursor: default
}

.SortTable--disabled .SortTable-label.is-sorted-reverse .SortTable-labelText:after, .SortTable--disabled .SortTable-label.is-sorted .SortTable-labelText:after {
    display: none
}

.Sticky {
    position: relative
}

.Sticky:after {
    content: "";
    display: table;
    clear: both
}

.Sticky-content {
    position: relative
}

.Sticky-content--active, .Sticky.is-active .Sticky-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2
}

.Sticky--reverse.is-active .Sticky-content {
    bottom: 0;
    top: auto
}

body:not(.is-scrollLocked) .Sticky.is-active .Sticky-content {
    right: 0 !important
}

.Talent {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, .8);
    min-width: 170px;
    position: relative;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s
}

.Talent-desc {
    font-size: 1rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #ebdec2;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Talent-desc {
        font-size: 1.02rem
    }
}

@media (min-width: 1280px) {
    .Talent-desc {
        font-size: 1.2rem
    }
}

.Talent-desc.zh-cn, .zh-cn .Talent-desc {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Talent-desc, .Talent-desc.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Talent-desc.zh-tw, .zh-tw .Talent-desc {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Talent--gutter {
    padding: 20px
}

.Talent--gutter.gutter-vertical {
    padding: 20px 0
}

.Talent--gutter.gutter-all {
    padding: 20px
}

.Talent--gutter.gutter-negative {
    padding: 0;
    margin: 0 -20px
}

.Talent--gutter.gutter-negative.gutter-vertical {
    margin: -20px 0
}

.Talent--gutter.gutter-negative.gutter-all {
    margin: -20px
}

.Talent--fixed {
    width: 240px
}

html:not(.touch) .Talent:not(.Talent--noHover):hover {
    border: 1px solid #f8b700
}

.Talent.Talent--selectedGutter {
    padding-bottom: 13px
}

.Talent.is-selected {
    background-color: rgba(53, 32, 17, .8);
    border-color: #f8b700;
    -webkit-box-shadow: inset 0 -8px 0 #f8b700;
    box-shadow: inset 0 -8px 0 #f8b700
}

.Talent-name {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400
}

@media (min-width: 720px) {
    .Talent-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Talent-name {
        font-size: 1.44rem
    }
}

.Talent-name.zh-cn, .zh-cn .Talent-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Talent-name, .Talent-name.ko-kr {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.Talent-name.zh-tw, .zh-tw .Talent-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Talent--nameLarge .Talent-name {
    font-size: 1.296rem;
    line-height: 1.5
}

@media (min-width: 720px) {
    .Talent--nameLarge .Talent-name {
        font-size: 1.4687999999999999rem
    }
}

@media (min-width: 1280px) {
    .Talent--nameLarge .Talent-name {
        font-size: 1.728rem
    }
}

.Talent-active {
    display: inline-block;
    position: relative;
    border: 3px solid #000;
    border-width: 0 0 4px 4px;
    height: 16px;
    width: 32px;
    margin: 6px 0;
    -webkit-transform: rotate(-45deg) scale(.5);
    transform: rotate(-45deg) scale(.5);
    display: none;
    position: absolute;
    top: 12px;
    right: 12px
}

.Talent.is-active .Talent-active {
    display: block
}

.Talent--small > .Talent-body {
    display: none
}

.Talent-body {
    padding-top: 20px
}

.Talent.Talent--wide > .Talent-body {
    padding-top: 0;
    padding-bottom: 0
}

.Talent-head {
    position: relative
}

.Talent-head .Talent-data {
    display: none
}

.Talent-checkbox {
    display: none;
    width: 28px;
    height: 28px;
    background: #504137;
    position: relative
}

.Talent-checkbox .Talent-checkboxInput {
    z-index: 1;
    position: absolute;
    width: 28px;
    height: 28px;
    opacity: 0;
    cursor: pointer
}

.Talent-checkbox .Talent-checkboxLabel {
    z-index: 0;
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #000
}

.Talent-checkbox .Talent-checkboxLabel:after {
    opacity: 0;
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #f8b700;
    top: 5px;
    left: 5px
}

html:not(.touch) .Talent-checkbox .Talent-checkboxInput:hover + .Talent-checkboxLabel:after {
    opacity: .3
}

.Talent-checkbox .Talent-checkboxInput:checked + .Talent-checkboxLabel:after {
    opacity: 1
}

.Talent--checkbox .Talent-head .Talent-checkbox {
    position: absolute;
    right: 16px;
    top: 4px;
    display: block
}

.Talent--wide .Talent-head .Talent-data {
    display: block
}

.Talent--wide .Talent-body .Talent-data {
    display: none
}

.Talent--wide .Talent-head {
    vertical-align: middle;
    display: inline-block
}

.Talent--wide .Talent-body {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block
}

.Talent--transparent {
    border: 1px solid transparent;
    background: transparent
}

.Talent--fontGold .Talent-name {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Semplicita Pro, Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 700
}

@media (min-width: 720px) {
    .Talent--fontGold .Talent-name {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Talent--fontGold .Talent-name {
        font-size: 1.44rem
    }
}

.Talent--fontGold .Talent-name.zh-cn, .zh-cn .Talent--fontGold .Talent-name {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.ko-kr .Talent--fontGold .Talent-name, .Talent--fontGold .Talent-name.ko-kr {
    font-family: Nanum Gothic, Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

.ru-ru .Talent--fontGold .Talent-name, .Talent--fontGold .Talent-name.ru-ru {
    font-family: Futura Demi, Open Sans, Arial, Helvetica, sans-serif
}

.Talent--fontGold .Talent-name.zh-tw, .zh-tw .Talent--fontGold .Talent-name {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.Talent--border {
    border: 1px solid #504137
}

.Talent--DEATHKNIGHT-bg {
    background: rgba(8, 8, 18, .75)
}

.Talent--DEMONHUNTER-bg {
    background: rgba(10, 16, 4, .75)
}

.Talent--DRUID-bg {
    background: rgba(0, 13, 7, .75)
}

.Talent--HUNTER-bg {
    background: rgba(7, 3, 13, .75)
}

.Talent--MAGE-bg {
    background: rgba(17, 6, 23, .75)
}

.Talent--MONK-bg {
    background: rgba(4, 17, 12, .75)
}

.Talent--PALADIN-bg {
    background: rgba(19, 4, 10, .75)
}

.Talent--PRIEST-bg {
    background: rgba(26, 8, 18, .75)
}

.Talent--ROGUE-bg {
    background: rgba(21, 13, 26, .75)
}

.Talent--SHAMAN-bg {
    background: rgba(4, 4, 20, .75)
}

.Talent--WARLOCK-bg {
    background: rgba(21, 18, 31, .75)
}

.Talent--WARRIOR-bg {
    background: rgba(26, 4, 7, .75)
}

.Talent--leatherGrey {
    background-color: #211510;
    background-image: url(../components/talent/assets_subdomain/talent-leather-grey.db668caee69fef46471e35733f930d3d.jpg);
    background-position: 50%
}

.Talent--leatherGrey, .Talent--leatherGrey .Talent-icon, .Talent-icon {
    border: 1px solid #444
}

.Typeahead-defaultContent, .Typeahead-loadingMask {
    display: none
}

.Typeahead-defaultContent.is-active, .Typeahead-loadingMask.is-active, .Typeahead-resultsContent.is-active, .Video {
    display: block
}

.Video {
    background-color: #222;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 100%
}

.Video:after {
    content: "";
    display: table;
    clear: both
}

.Video:before {
    content: "";
    display: block;
    padding-top: 56.25%
}

.Video-fade {
    -webkit-box-shadow: inset 0 -40px 200px #000;
    box-shadow: inset 0 -40px 200px #000;
    opacity: .6
}

.Video-fade, .Video-iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.Video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1
}

.Video-video {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
    height: 100%;
    top: 0
}

.Video-poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50%;
    background-size: 100%
}

.Video-play {
    display: inline-block;
    border-color: transparent #000;
    border-style: solid;
    border-width: 32px 0 32px 50px;
    opacity: .8
}

.Video-pause, .Video-play {
    position: relative;
    -webkit-filter: invert(100%);
    filter: invert(100%)
}

.Video-pause {
    display: inline-block;
    height: 50px;
    width: 18px;
    display: none;
    opacity: 0
}

.Video-pause:after, .Video-pause:before {
    content: "";
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0
}

.Video-pause:before {
    right: 90%
}

.Video-pause:after {
    left: 90%
}

.Video-center {
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    width: 100%
}

.Video-fade, .Video-pause, .Video-play {
    -webkit-transition: opacity .12s ease;
    transition: opacity .12s ease
}

.Video-caption {
    color: #b1997f;
    font-weight: 400;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-size: 1.08rem;
    line-height: 1.5;
    font-style: italic;
    padding: 0 10px
}

@media (min-width: 720px) {
    .Video-caption {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .Video-caption {
        font-size: 1.44rem
    }
}

.Video.is-started .Video-caption, .Video.is-started .Video-poster {
    display: none
}

.Video.is-started .Video-video {
    display: block
}

.Video.is-started .Video-play {
    opacity: .8
}

html:not(.touch) .Video.is-started:hover .Video-fade {
    opacity: .6
}

html:not(.touch) .Video.is-started:hover .Video-pause, html:not(.touch) .Video.is-started:hover .Video-play {
    opacity: 1
}

.Video.is-playing .Video-fade {
    opacity: 0
}

.Video.is-playing .Video-play {
    display: none
}

.Video.is-playing .Video-pause {
    display: inline-block
}

.Video--borderLightBrown {
    border: 1px solid #504137
}

.VideoPane {
    color: #fff;
    display: block;
    position: relative
}

.VideoPane:after {
    content: "";
    display: table;
    clear: both
}

.VideoPane-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    overflow: hidden
}

.VideoPane-video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: auto;
    min-height: 100%;
    min-width: 100%;
    width: auto
}

.VideoPane-content {
    padding: 0 20px;
    position: relative;
    margin: 0 auto;
    max-width: 1600px;
    z-index: 0
}

body.z-index-reset-full .VideoPane-content, body.z-index-reset .VideoPane-content {
    z-index: auto
}

.VideoPane-fallback {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 2400px auto;
    background-color: #000;
    background-position: top;
    background-repeat: no-repeat
}

.VideoPane--disabled .VideoPane-bg > .VideoPane-video {
    display: none
}

.VideoPane--underSiteNav > .VideoPane-content {
    padding-top: 0
}

@media (min-width: 970px) {
    .VideoPane--underSiteNav > .VideoPane-content {
        padding-top: 90px
    }
}

@media (min-width: 1080px) {
    .VideoPane--underSiteNav > .VideoPane-content {
        padding-top: 100px
    }
}

@media (min-width: 1280px) {
    .VideoPane--underSiteNav > .VideoPane-content {
        padding-top: 105px
    }
}

@media (min-width: 1450px) {
    .VideoPane--underSiteNav > .VideoPane-content {
        padding-top: 120px
    }
}

.VideoPane--alignTop .VideoPane-video {
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.VideoPane--alignBottom .VideoPane-video {
    top: auto;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.VideoPane--fadeBottom .VideoPane-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: inset 0 -180px 200px rgba(0, 0, 0, .6);
    box-shadow: inset 0 -180px 200px rgba(0, 0, 0, .6)
}

.VideoPane--dimmed .VideoPane-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5)
}

.VideoPane--flush .VideoPane-content {
    padding: 0
}

.VideoPane--fit .VideoPane-video {
    height: 100%;
    min-width: 0
}

.VideoPane--fit .VideoPane-fallback {
    background-size: auto 100%
}

.VideoPane--cover .VideoPane-fallback {
    background-size: cover
}

.BackgroundVideo-fallback {
    -webkit-transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .5s cubic-bezier(.23, 1, .32, 1) 0s;
    opacity: 0;
    margin: 0
}

.BackgroundVideo-fallback--visible {
    opacity: 1
}

.BackgroundVideo-pause {
    font-size: 1.08rem;
    line-height: 1.5;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #f8b700;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8);
    font-weight: 400;
    -webkit-transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    z-index: 1;
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 5px
}

@media (min-width: 720px) {
    .BackgroundVideo-pause {
        font-size: 1.224rem
    }
}

@media (min-width: 1280px) {
    .BackgroundVideo-pause {
        font-size: 1.44rem
    }
}

.BackgroundVideo-pause.zh-cn, .zh-cn .BackgroundVideo-pause {
    font-family: Arial, Helvetica, 微软雅黑, Microsoft YaHei, Hei SC, sans-serif
}

.BackgroundVideo-pause.ko-kr, .ko-kr .BackgroundVideo-pause {
    font-family: Arial, Helvetica, 맑은 고딕, Malgun Gothic, 애플산돌고딕네오, AppleSDGothicNeo, 애플고딕, AppleGothic, 돋움, Dotum, sans-serif
}

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

.BackgroundVideo-pause.zh-tw, .zh-tw .BackgroundVideo-pause {
    font-family: Arial, Helvetica, 黑體-繁, Heiti TC, 微軟正黑, Microsoft JhengHei, Tei TC, sans-serif
}

.BackgroundVideo-pause:focus, html:not(.touch) .BackgroundVideo-pause:hover {
    color: #fff !important
}

.BackgroundVideo-pauseIcon {
    display: inline-block;
    padding-left: 5px;
    fill: #f8b700
}