h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 400;
    font-family: Sawarabi Mincho, serif
}

h1, .h1 {
    font-size: 1.5rem;
    font-family: Sawarabi Mincho, serif
}

@media (min-width: 992px) {
    h1, .h1 {
        font-size: 2.5rem
    }
}

h2, .h2 {
    font-size: 1rem;
    font-family: Sawarabi Mincho, serif
}

@media (min-width: 992px) {
    h2, .h2 {
        font-size: 1.5rem
    }
}

h3, .h3 {
    font-size: 1rem
}

.text-light {
    color: #fff
}

.text-yellow {
    color: #ffba00
}

.text-small {
    font-size: .9rem
}

.text-shadow {
    text-shadow: 0 0 8px black
}

.text-success-light {
    color: #65e485
}

.serif {
    font-family: Sawarabi Mincho, serif
}

.sans-serif {
    font-family: Outfit, sans-serif
}

.Link--darkBold {
    font-weight: 700;
    color: #2c4656;
    transition: .3s;
    text-decoration: none
}

.Link--darkBold:hover {
    color: #090f13
}

.Link--lightBold {
    font-weight: 700;
    color: #e1bb80;
    transition: .3s;
    text-decoration: none
}

.Link--lightBold:hover {
    color: #cb8e30
}

.Link--primary {
    color: #e1bb80;
    transition: .3s;
    text-decoration: none
}

.Link--primary:hover {
    color: #cb8e30
}

.Link--sm {
    font-size: .8rem
}

.alert {
    border-radius: 0
}

.form-control {
    border-radius: 5px;
    background: #161616;
    border: 1px solid #525252;
    padding: .9rem 1rem;
    color: #bbb
}

.form-control:disabled {
    background-color: #afafaf
}

.form-control::placeholder {
    color: #818181
}

.form-control label {
    color: #fefdff
}

.form-select:disabled {
    background-color: #afafaf
}

.form-control-rounded {
    border-radius: 100px;
    padding: 15px 20px
}

.card {
    border-radius: 15px;
    border: none
}

.card--dark {
    background: rgb(41.75, 41.75, 41.75)
}

.card--dark .card-body {
    color: #fefdff
}

.card--dark a:not(.btn) {
    color: #e1bb80;
    transition: .3s;
    text-decoration: none
}

.card--dark a:not(.btn):hover {
    color: #cb8e30
}

.card--light {
    background: #f9f9f9
}

.card--light .card-body {
    color: #1d1d1d
}

.card--light a {
    color: #2c4656;
    transition: .3s;
    text-decoration: none
}

.card--light a:hover {
    color: #090f13
}

.card-status {
    padding: 20px
}

.card-status-alive {
    background: #ADC178;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #fff
}

.card-status-dead {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: #551414;
    color: #fff
}

.card--imageHorizontal {
    border-radius: 15px 0 0 15px
}

.card--evenTimer {
    border: none
}

.card--evenTimer .card-body {
    padding: 40px
}

.card--evenTimer .card-text {
    font-size: 12px;
    color: #fefdff
}

.Badge, .Card--image .Card__label-new {
    padding: 5px 10px;
    font-size: .9rem;
    border-radius: 5px
}

.Badge--success, .Card--image .Card__label-new {
    color: #75b798;
    background: #051b11;
    border: 1px solid #0f5132
}

.Badge--warning {
    color: #ffda6a;
    background: #332701;
    border: 1px solid #997404
}

.Badge--info {
    color: #6edff6;
    background: #032830;
    border: 1px solid #6edff6
}

.Badge--danger {
    color: #ea868f;
    background: #2c0b0e;
    border: 1px solid #842029
}

.aspectRatio {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.stdBorderRadius {
    border-radius: 40px
}

.border-radius-small {
    border-radius: 15px
}

body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    margin: 0
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.hero_overlay {
    position: absolute;
    right: auto;
    background: #000;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6) 7%, rgba(255, 254, 254, 0) 100%);
    top: 0;
    width: 100%;
    z-index: 0;
    height: 100%
}

.affix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none
}

.Line--light {
    border-top-color: #fefdff;
    background: #FEFDFF
}

.Line--dark {
    border-top-color: #1f2c3d;
    background: #1f2c3d
}

.Line--decor {
    background: linear-gradient(90deg, #e0ccb1, #b78f6d) 50%;
    height: 1px;
    left: 6px;
    position: relative;
    width: 100%;
    margin: 10px 0
}

.Line--decor:before {
    background-size: contain;
    bottom: -3px;
    content: "";
    height: 7px;
    position: absolute;
    width: 8px;
    background-image: url(/build/assets/line-decor-9df63e34.svg);
    left: -5px;
    right: 100%
}

.news-block {
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    width: 100%;
    border: 1px solid #504137;
    min-height: 200px;
    height: auto;
    position: relative;
    color: #fff;
    margin: 0 0 20px
}

.news-block:hover {
    border: 1px solid #ffba00
}

.news-block .news-content {
    position: absolute;
    padding: 20px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 1
}

.news-block .news-content:hover {
    color: #ffba00
}

.news-block .news-content__meta {
    display: block;
    position: absolute;
    bottom: 20px
}

.news-block .news-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.border-radius-lg {
    border-radius: 40px
}

.eqaulize-padding-40 {
    padding: 40px !important
}

.standard-font {
    font-family: Outfit, sans-serif
}

#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px #0003;
    z-index: 2;
    border-radius: 40px
}

#popup img {
    max-width: 300px;
    border-radius: 40px
}

@media (min-width: 992px) {
    #popup img {
        max-width: 700px
    }
}

#popup #closeBtn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    background: white;
    padding: 5px 10px;
    font-size: 2rem;
    line-height: 1;
    border-radius: 12px
}

.Title {
    position: relative;
    z-index: 2
}

.Title--heading {
    font-size: 2rem;
    font-family: Sawarabi Mincho, serif;
    font-weight: 700;
    letter-spacing: 2px
}

.Title--small {
    font-size: 1rem;
    font-family: Sawarabi Mincho, serif;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e1bb80
}

.Title--streamer {
    color: #fefdff;
    margin-top: 20px;
    text-shadow: 0px 1px 10px #000000
}

@media (min-width: 992px) {
    .Title--streamer {
        color: #fff;
        margin-top: 180px
    }
}

.Title__subtitle--secondary {
    color: #e1bb80
}

.Title__subtitle--success {
    color: #adc178
}

.Title__highlight--pvpChampion {
    font-style: italic;
    font-weight: 400;
    font-size: 2rem;
    line-height: normal
}

.Title__highlight--pvpChampion span {
    color: #fefdff;
    font-weight: 600
}

.Title__highlight--pvpChampion a {
    color: #3f82a1;
    align-self: center;
    position: relative
}

.Title__highlight--pvpChampion a:hover {
    text-decoration: none;
    color: #3f82a1
}

.Title__highlight--pvpChampion a:hover:after {
    transform: scaleX(1);
    transform-origin: right
}

.Title__highlight--pvpChampion a:after {
    transition: all .21s ease-in-out;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #3f82a1;
    position: absolute;
    left: 0;
    bottom: -10px;
    transform: scaleX(0);
    transform-origin: left
}

.Button {
    font-family: Outfit, sans-serif;
    border-radius: .5em;
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: .3s;
    padding: .475rem 2.75rem;
    text-decoration: none;
    border: none
}

.Button:hover {
    text-decoration: none
}

.Button--d-block {
    display: block;
    align-items: unset
}

.Button--large {
    padding: 1rem 3rem;
    font-size: 1.4rem
}

.Button--wide {
    width: 100%;
    text-align: center
}

.Button--success {
    background: #198754;
    border-color: #09311e;
    padding: .475rem 2.75rem;
    color: #fefdff
}

.Button--success:hover {
    background: rgb(9.0625, 48.9375, 30.45);
    border-color: #09311e;
    color: #fefdff
}

.Button--success-outline {
    background: transparent;
    border: 1px solid rgb(9.0625, 48.9375, 30.45);
    padding: .475rem 2.75rem;
    color: #fefdff
}

.Button--success-outline:hover {
    background: rgb(9.0625, 48.9375, 30.45);
    border-color: #09311e;
    color: #fefdff
}

.Button--danger {
    background: #dc3545;
    border-color: #921925;
    padding: .475rem 2.75rem;
    color: #fefdff
}

.Button--danger:hover {
    background: rgb(145.746835443, 25.253164557, 36.7974683544);
    border-color: #921925;
    color: #fefdff
}

.Button--danger-outline {
    background: transparent;
    border: 1px solid rgb(145.746835443, 25.253164557, 36.7974683544);
    padding: .475rem 2.75rem;
    color: #dc3545
}

.Button--danger-outline:hover {
    background: rgb(145.746835443, 25.253164557, 36.7974683544);
    border-color: #921925;
    color: #fefdff
}

.Button--warning {
    background: #dcb535;
    border-color: #927619;
    padding: .475rem 2.75rem;
    color: #1d1d1d
}

.Button--warning:hover {
    background: rgb(145.746835443, 117.6075949367, 25.253164557);
    border-color: #927619;
    color: #1d1d1d
}

.Button--primary, .Button--primary-outline.active {
    background: #E1BB80;
    border-color: #cb8e30;
    padding: .475rem 2.75rem;
    color: #1d1d1d
}

.Button--primary:hover, .Button--primary-outline.active:hover {
    background: rgb(203.0382165605, 142.2866242038, 47.9617834395);
    border-color: #cb8e30;
    color: #1d1d1d
}

.Button--primary.active, .active.Button--primary-outline {
    background: rgb(161.7834394904, 113.3757961783, 38.2165605096);
    color: #fefdff
}

.Button--primary-outline {
    background: transparent;
    border: 1px solid #E1BB80;
    padding: .475rem 2.75rem;
    color: #fefdff
}

.Button--primary-outline:hover {
    background: #E1BB80;
    border-color: #e1bb80;
    color: #1d1d1d
}

.Button--info {
    background: #126bda;
    border-color: #0a3d7c;
    padding: .475rem 2.75rem;
    color: #fefdff;
    font-weight: 400;
    letter-spacing: 1px
}

.Button--info:hover {
    background: rgb(10.2203389831, 60.7542372881, 123.7796610169);
    border-color: #0a3d7c;
    color: #fefdff
}

.Button--dark {
    background: #080a0a;
    border-color: #080a0a;
    padding: .475rem 2.75rem;
    color: #fff
}

.Button--dark:hover {
    background: #FEFDFF;
    border-color: #fefdff;
    color: #000
}

.Button--icon {
    color: #e1bb80;
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid #685634;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    padding: 0
}

.Button--icon:hover {
    background: #685634;
    border: 1px solid #685634;
    color: #fefdff
}

.Button--hasIcon {
    justify-content: space-between;
    padding: .7rem 1rem;
    min-width: auto
}

@media (min-width: 1200px) {
    .Button--hasIcon {
        min-width: 250px
    }
}

.Button--outline-light {
    border: 1px solid #FEFDFF;
    color: #fefdff;
    font-weight: 400;
    letter-spacing: 1px
}

.Button--outline-light:hover {
    background: #FEFDFF;
    border-color: #fefdff;
    color: #000
}

.Button--bg-transparent-black {
    background: rgba(0, 0, 0, .2);
    z-index: 0
}

.Button--rich {
    background: rgba(29, 29, 29, .7);
    border-radius: 12px;
    border: 1px solid rgb(64, 51, 39);
    color: #e1bb80;
    margin-bottom: 20px;
    font-size: .9rem;
    padding: 15px 25px;
    text-align: left
}

.Button--rich:hover {
    background: rgba(3.5, 3.5, 3.5, .7);
    color: #fff;
    text-decoration: none
}

.Button--rich.active {
    background: rgba(3.5, 3.5, 3.5, .7);
    border: 1px solid #E1BB80
}

.Button--flex {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.Button--wide {
    width: 100%;
    justify-content: center
}

.Button--lg {
    padding: .9rem 1rem
}

.btn {
    font-family: Outfit, sans-serif;
    border-radius: .5em;
    font-size: .8rem;
    font-weight: 600
}

.btn-large {
    padding: 1rem 3rem !important;
    font-size: 1.4rem
}

.btn-primary {
    background: #080a0a;
    border-color: #080a0a;
    padding: .475rem 2.75rem;
    color: #fff
}

.btn-primary:hover {
    background: #313232;
    border-color: #313232
}

.btn-responsive {
    width: 100%
}

@media (min-width: 1200px) {
    .btn-responsive {
        width: auto
    }
}

.btn-secondary {
    background: #E1BB80;
    border-color: #e1bb80;
    padding: .475rem 2.75rem;
    color: #000
}

.btn-secondary:hover {
    background: rgb(203.0382165605, 142.2866242038, 47.9617834395);
    border-color: #cb8e30;
    color: #000
}

.btn-outline-yellow {
    border-color: #f7db2d;
    padding: .475rem 2.75rem;
    color: #000
}

.btn-outline-yellow:hover {
    background: #dfc727;
    border-color: #dfc727;
    color: #000
}

.btn-hasbg {
    border-color: #fff;
    color: #fff;
    padding: 2rem 4rem !important
}

.btn-hasbg:hover {
    color: #ccc
}

.btn-success {
    background: #ADC178;
    border-color: #adc178;
    padding: .475rem 2.75rem
}

.btn-danger {
    padding: .475rem 2.75rem
}

.btn-icon-dark {
    padding: .475rem .9rem
}

.btn-icon-dark:hover {
    background: white;
    color: #000;
    border-color: #fff
}

.btn-rich {
    background: #16171e;
    border-radius: 12px;
    border: 1px solid #22293e;
    color: #fff;
    margin-bottom: 20px;
    font-size: .9rem;
    padding: 15px 25px;
    text-align: left
}

.btn-rich:hover {
    background: rgb(13.8152173913, 19.6086956522, 27.1847826087);
    color: #fff
}

.btn-rich.active {
    background: #1f2c3d
}

.btn-sroApi {
    width: 100%;
    border-radius: 0;
    border: 1px solid #E1BB80;
    color: #fff
}

.btn-sroApi:hover {
    background: #E1BB80;
    color: #000
}

.btn-sroApi.active {
    color: #000;
    background: #E1BB80
}

.Logo__main {
    width: 160px
}

@media (min-width: 992px) {
    .Logo__main {
        width: 150px
    }
}

@media (min-width: 1400px) {
    .Logo__main {
        width: 250px
    }
}

.Navigation--ingame .icon {
    color: #e1bb80;
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid #685634;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s
}

.Navigation--ingame .icon:hover {
    background: #685634;
    border: 1px solid #685634;
    color: #fefdff
}

.Navigation--ingame span {
    margin-left: 10px;
    color: #e1bb80
}

.Navigation__main {
    display: none;
    align-items: center;
    padding: 1vw 3vw;
    position: fixed;
    z-index: 3;
    width: 100%
}

@media (min-width: 1200px) {
    .Navigation__main {
        display: flex;
        justify-content: space-between
    }
}

.Navigation__items {
    justify-content: center;
    align-items: center;
    margin: 0 0 0 40px
}

.Navigation__items:before {
    content: " ";
    background: url(/build/assets/cloud-right-4d26c012.png);
    height: 260px;
    width: 80%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    background-size: cover;
    pointer-events: none
}

.Navigation__item {
    margin-right: 20px;
    font-size: .8rem
}

.Navigation__item .Button--success, .Navigation__item .Button--danger-outline {
    padding: .475rem 1.75rem
}

@media (min-width: 1400px) {
    .Navigation__item {
        margin-right: 40px;
        padding: 15px 0;
        position: relative;
        display: flex
    }

    .Navigation__item:last-child {
        margin-right: 0
    }
}

@media (min-width: 1536px) {
    .Navigation__item {
        font-size: .9rem
    }
}

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

.Navigation__item--link {
    color: #efefef;
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
    align-self: center;
    text-decoration: none
}

.Navigation__item--link:hover {
    text-decoration: none;
    color: #fff
}

.Navigation__item--link:hover:after {
    transform-origin: center;
    left: 50%;
    transform: translate(-50%)
}

.Navigation__item--link:after {
    transition: all .21s ease-in-out;
    content: "";
    height: 10px;
    background-color: #e1bb80;
    position: absolute;
    left: 0;
    bottom: -15px;
    transform-origin: center;
    transform: scaleX(0);
    width: 10px;
    border-radius: 100px;
    z-index: 10
}

.Navigation__item--link .flag {
    margin-right: 10px;
    height: 15px
}

.Navigation__item--link.active:after {
    transition: all .21s ease-in-out;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translate(-50%);
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background-color: #e1bb80;
    z-index: 10
}

.Navigation__dropdown--modern {
    padding: 15px 0;
    position: relative;
    display: flex
}

.Navigation__dropdown--modern .Navigation__item--link:hover {
    text-decoration: none;
    color: #fff
}

.Navigation__dropdown--modern .Navigation__item--link:hover:after {
    transform-origin: unset;
    left: unset;
    transform: unset
}

.Navigation__dropdown--modern .Navigation__item--link:after {
    content: unset
}

.Navigation__dropdown--modern .dropdown-content {
    background: #FEFDFF;
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    border-radius: 1.8em;
    min-width: 450px;
    box-shadow: 0 4px 12px #0000001a;
    padding: 40px;
    z-index: 2;
    transition: opacity 1s ease-out
}

.Navigation__dropdown--modern .dropdown-content--dark {
    border: none;
    background: #1D1D1D
}

.Navigation__dropdown--modern .dropdown-content--transparent {
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.Navigation__dropdown--modern .dropdown-content--light {
    border: 1px solid #FEFDFF
}

.Navigation__dropdown--modern .dropdown-content--locale {
    border-radius: 1.8em;
    min-width: 200px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.Navigation__dropdown--modern:hover .dropdown-content {
    display: block
}

.Navigation__dropdownLink {
    font-weight: 600;
    margin: 0 0 .25em;
    transition: .3s;
    text-decoration: none
}

.Navigation__dropdownLink:hover {
    text-decoration: none
}

.Navigation__dropdownLink--dark {
    color: #2c4656
}

.Navigation__dropdownLink--dark:hover {
    color: #090f13
}

.Navigation__dropdownLink--dark p {
    color: #717172;
    font-weight: 400
}

.Navigation__dropdownLink--light {
    color: #e1bb80
}

.Navigation__dropdownLink--light:hover {
    color: #cb8e30
}

.Navigation__dropdownLink--light p {
    color: #fefdff;
    font-weight: 400
}

.Navigation__dropdownLink .flag {
    margin-right: 10px;
    height: 15px
}

.Navigation__rightSide {
    margin-left: auto
}

.Navigation__rightSide a {
    margin-right: 30px
}

.Navigation__rightSide a:last-child {
    margin-right: 0
}

.HamburgerWrapper {
    width: 100%;
    padding: 10px;
    background: #1c1c1c;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (min-width: 1200px) {
    .HamburgerWrapper {
        display: none
    }
}

.Hamburger {
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    margin: 0
}

.Hamburger--active {
    transform: translate(250px)
}

.Hamburger--active .Hamburger__inner {
    background-color: transparent
}

.Hamburger--active .Hamburger__inner:before {
    transform: translateY(10px) rotate(45deg)
}

.Hamburger--active .Hamburger__inner:after {
    transform: translateY(-10px) rotate(-45deg)
}

.Hamburger__box {
    width: 35px;
    height: 24px;
    display: inline-block;
    position: relative
}

.Hamburger__inner {
    width: 100%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .1s .2s ease-in-out
}

.Hamburger__inner:before, .Hamburger__inner:after {
    width: 100%;
    height: 3px;
    background-color: #fff;
    position: absolute;
    content: "";
    left: 0;
    transition: transform .2s .2s ease-in-out
}

.Hamburger__inner:before {
    top: -10px
}

.Hamburger__inner:after {
    top: 10px
}

.Hamburger, .MobileNavigation {
    transition: transform .3s .1s ease-in-out
}

.MobileNavigation {
    height: 100vh;
    width: 250px;
    background-color: #080a0a;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-250px);
    z-index: 20
}

.MobileNavigation--active {
    transform: translate(0)
}

.MobileNavigation--active ::-webkit-scrollbar {
    -webkit-appearance: none
}

.MobileNavigation__list {
    margin-top: 50px;
    list-style: none
}

.MobileNavigation__item {
    margin-bottom: 20px
}

.MobileNavigation__item a {
    text-decoration: none;
    color: #a2aeb9
}

.MobileNavigation__item a:hover {
    color: #697b8c
}

.MobileNavigation__logo {
    width: 200px;
    margin: 2.5em auto 0;
    display: block
}

.Content {
    width: 100%;
    position: relative;
    padding: 20px 0;
    color: #ebdec2
}

.Content h1, .Content .h1 {
    color: inherit
}

.Content--hasBackground {
    background-image: url(/build/assets/redsea_content_bg-1e1f476f.png);
    background-color: #ebf2fd;
    background-position: top;
    background-size: 100%;
    background-repeat: repeat
}

.Content--hasBackground hr {
    border-top: 1px solid #ffba00
}

.Content--eventTimers {
    width: 100%;
    position: relative;
    padding: 20px 0;
    color: #080a0a
}

.content-block {
    width: 100%;
    color: #151c37;
    background: #ffffff;
    margin: 20px 0;
    border-radius: 15px
}

.content-block--hasShadow {
    box-shadow: #000000bf 0 6px 20px -6px
}

.content-block--dark {
    background: #1D1D1D;
    color: #fefdff
}

.content-block--hasBackgroundImage {
    background-image: url(https://image.freepik.com/free-vector/cartoon-treasure-elements-set_1284-37631.jpg);
    background-size: cover;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px
}

.content-block--hasBackgroundImage__title {
    font-variant: small-caps
}

.content-block--widgetTable {
    background-size: cover;
    display: block;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .31), rgba(0, 0, 0, .5)), url(/build/assets/pricing-background-1521f9fe.png);
    padding: 60px 40px
}

.content-block--widgetTable .title {
    font-size: 1.5rem;
    font-family: Sawarabi Mincho, serif;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 4px black
}

.content-block--widgetTable .highlight {
    font-size: 20px;
    font-family: Outfit, sans-serif;
    font-weight: 300;
    display: block;
    color: #ffba00;
    line-height: 1
}

.content-block--widgetTable .subtitle {
    font-size: 14px;
    color: #eaff00;
    display: block
}

.content-block--widgetTable:hover {
    text-decoration: none
}

.content-block--widgetTable .content-block__inner-content {
    padding: 0
}

.content-block--widgetFortress {
    background-image: url(/build/assets/widget_fw_bg-1a969273.png);
    background-size: cover;
    padding-bottom: 40px
}

.content-block--widgetFortress .title {
    font-size: 2rem;
    font-family: Sawarabi Mincho, serif;
    color: #fff;
    font-weight: 700
}

.content-block--widgetFortress .highlight {
    font-size: 20px;
    font-family: Outfit, sans-serif;
    font-weight: 300;
    display: block;
    color: #ffba00;
    line-height: 1
}

.content-block--widgetFortress .subtitle {
    font-size: 14px;
    color: #eaff00
}

.content-block--widgetPvp {
    background-image: url(/build/assets/pvp-champion-f8e21526.png);
    background-size: cover;
    padding: 40px
}

.content-block--widgetPvp .title {
    font-size: 2rem;
    font-family: Sawarabi Mincho, serif;
    font-variant: small-caps;
    color: #fff;
    font-weight: 700
}

.content-block--widgetPvp .highlight {
    font-size: 20px;
    font-family: Outfit, sans-serif;
    font-weight: 300;
    display: block;
    color: #ffba00;
    line-height: 1
}

.content-block--widgetPvp .subtitle {
    font-size: 14px;
    color: #eaff00
}

.content-block--small {
    border-radius: 15px;
    padding: 20px
}

.content-block-kb-content img {
    max-width: 100%;
    height: auto
}

.content-block__inner-content {
    padding: 40px 40px 0
}

.content-block__inner-content-max-padding {
    padding: 40px 40px 20px
}

.content-block__title {
    font-size: 1.5rem;
    font-family: Sawarabi Mincho, serif;
    color: #151c37
}

.content-block__title--light {
    color: #fefdff
}

.content-block__date {
    float: right
}

.content-block__ctaInformation {
    background: #fff;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 0 40px 20px
}

.content-block__ctaInformation--dark {
    background: #1D1D1D
}

.content-block .header {
    background: #0d0d0d;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    font-variant: small-caps;
    font-family: Outfit, sans-serif
}

.content-block .header i {
    font-size: 2rem
}

.News--usp {
    border-radius: 15px;
    height: 140px;
    margin-bottom: 20px
}

@media (min-width: 992px) {
    .News--usp {
        margin-bottom: unset
    }
}

.News__block--usp {
    height: 100%;
    width: 100%;
    position: relative
}

.News__content--usp {
    position: absolute;
    padding: 20px;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    border-radius: 15px;
    color: #fff;
    transition: .3s
}

.News__meta--usp {
    display: flex;
    height: 100%;
    top: 0;
    justify-content: center;
    flex-direction: column
}

.News__meta--usp span {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.5rem
}

.News__image--usp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.uniqueList--main {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px #d9d9d9
}

.uniqueList--dark {
    background: #05090e;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px #000
}

.uniqueList__image img {
    position: relative;
    box-shadow: inset 0 0 10px 10px #000;
    border-radius: 15px
}

.uniqueList__uniqueName {
    font-family: Sawarabi Mincho, serif;
    color: #151c37;
    font-weight: 700;
    display: block
}

@media (min-width: 768px) {
    .uniqueList__uniqueName {
        max-width: 150px
    }
}

.uniqueList__uniqueName--light {
    color: #fefdff
}

.uniqueList__status.alive {
    color: #4da252
}

.uniqueList__status.dead {
    color: #b52a35
}

.uniqueList small, .uniqueList .small {
    font-size: 11px
}

.profileList__item {
    padding: 15px 25px;
    background: #ebf2fd;
    color: #2a2a2a;
    font-size: .9rem;
    text-decoration: none;
    transition: .3s;
    border-radius: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.profileList__item:hover {
    text-decoration: none;
    background: #c7cad3
}

.profileList__item small, .profileList__item .small {
    display: block
}

.footer {
    background: #101010;
    padding: 100px 40px
}

.footer ul li {
    margin: 5px 0
}

.footer__masterLinks {
    padding: 40px;
    background: #000;
    color: #f1f1f1;
    height: 100%;
    text-decoration: none
}

.footer__generic {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: #e8e8e8;
    height: 100%;
    padding: 40px
}

.footer__generic a {
    color: #fff;
    font-family: Outfit, sans-serif;
    text-decoration: none
}

.ctaInformation {
    background: #180e0c;
    padding: 20px
}

.rankingBlocks {
    border-radius: 15px;
    background: rgba(200, 148, 70, .1);
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80;
    font-size: 25px;
    text-align: center;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px
}

.rankingBlocks span {
    display: block
}

.cTable--main {
    font-family: Outfit, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden
}

.cTable--main thead {
    background-color: #685634;
    padding: 15px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: none;
    color: #e1bb80;
    font-weight: 700;
    text-shadow: #313131 0 2px
}

.cTable--main th, .cTable--main td {
    padding: 15px;
    text-align: left
}

.cTable--main td {
    border-bottom: 1px solid #111111
}

.cTable--main tbody tr {
    background-color: #1d1d1d;
    color: #fefdff;
    transition: background-color .3s ease
}

.cTable--main tbody tr:hover {
    background: rgb(34.1, 34.1, 34.1)
}

.cTable--fortress {
    font-family: Outfit, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    overflow: hidden
}

.cTable--fortress thead {
    background-color: transparent;
    padding: 2px 0;
    border: none;
    color: #e1bb80;
    font-weight: 700;
    text-shadow: #313131 0 2px;
    font-size: .8rem
}

.cTable--fortress th, .cTable--fortress td {
    padding: 2px 0;
    text-align: left
}

.cTable--fortress td {
    border-bottom: 1px solid rgb(54.6734693878, 48.9183673469, 39.3265306122)
}

.cTable--fortress tbody tr {
    background-color: transparent;
    color: #fefdff;
    transition: background-color .3s ease;
    font-size: .8rem
}

.cTable--fortress tbody tr:hover {
    background: rgb(34.1, 34.1, 34.1)
}

.table .thead-dark th {
    color: #fff;
    background-color: #1f2c3d;
    border-color: #1f2c3d
}

.table .thead-primary th {
    color: #e1bb80;
    background-color: #685634;
    text-shadow: #313131 0 2px;
    border-bottom: 1px solid rgba(10, 10, 10, .74)
}

.table--main tr:hover {
    background: rgb(34.1, 34.1, 34.1)
}

.table--main tbody tr th, .table--main tbody tr td {
    color: #fefdff;
    background-color: #1d1d1d;
    border-bottom: 1px solid rgba(10, 10, 10, .74)
}

.CustomTable {
    font-family: Outfit, sans-serif
}

.CustomTable--ingame .CustomTable__header {
    background: #685634;
    padding: 15px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #e1bb80;
    font-weight: 700;
    text-shadow: #313131 0 2px
}

.CustomTable--ingame .CustomTable__row {
    background: #1D1D1D;
    padding: 10px 20px;
    transition: .3s;
    margin-bottom: 1px;
    color: #fefdff
}

.CustomTable--ingame .CustomTable__row:last-child {
    margin-bottom: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px
}

.CustomTable--ingame .CustomTable__row:hover {
    background: rgb(34.1, 34.1, 34.1)
}

.Slider__container {
    padding: 0 3rem;
    overflow: hidden;
    position: relative
}

.Slider__timerPiece {
    position: relative
}

.Slider__time {
    color: #eaff00;
    font-size: 1.5rem;
    font-weight: 300
}

.Slider__name {
    color: #ffba00
}

.Slider img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%
}

.Slider__item {
    padding: 1.5rem .75rem;
    position: relative
}

.Slider__controls {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translatey(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.Slider__controls:focus {
    outline: none
}

.Slider__controls li:hover {
    cursor: pointer
}

.Waves {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1
}

.Waves--top {
    top: 0
}

.Waves--relative {
    position: relative
}

.Waves .waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px
}

.Waves .parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.Waves .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s
}

.Waves .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s
}

.Waves .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s
}

.Waves .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0)
    }
    to {
        transform: translate3d(85px, 0, 0)
    }
}

@media (max-width: 768px) {
    .Waves .waves {
        height: 40px;
        min-height: 40px
    }

    .Waves .content {
        height: 30vh
    }
}

.SmokeEmpire {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1
}

.Overlay {
    position: absolute;
    right: auto;
    background: #000;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6) 7%, rgba(255, 254, 254, 0) 100%);
    top: 0;
    width: 100%;
    z-index: 2;
    height: 100%;
    left: 0
}

.Overlay--characterCard {
    background: #fff;
    background: linear-gradient(270deg, rgb(247, 247, 247) 7%, rgba(255, 254, 254, 0) 100%)
}

.Overlay--characterCard--dark {
    background: #05090e;
    background: linear-gradient(270deg, #05090e 7%, rgba(0, 0, 0, .5) 100%)
}

.Overlay--ingameBanner {
    border-radius: 40px;
    z-index: 0
}

.Overlay--trackerList {
    z-index: -1;
    background: rgba(0, 0, 0, .9)
}

.Overlay--ingameOverviewBottom {
    position: fixed;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(19, 15, 7, .8) 34%, rgba(40, 30, 14, .95) 100%);
    height: 300px;
    bottom: 0;
    width: 100%;
    left: 0;
    top: unset
}

.Overlay--ingameOverviewBottom span {
    display: flex;
    text-align: center;
    padding: 40px;
    justify-content: center;
    align-items: flex-end;
    height: 80%;
    font-weight: 700;
    color: #e1bb80
}

.Loading {
    display: none;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #5f972d;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

.Loading--medium {
    width: 50px;
    height: 50px;
    margin-bottom: 20px
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.ServerStats {
    display: flex;
    justify-content: center;
    gap: 20px;
    height: auto;
    color: #fff
}

@media (min-width: 992px) {
    .ServerStats {
        padding-top: 50px;
        flex-direction: initial;
        align-items: flex-end;
        height: 200px
    }
}

.ServerStats .Block {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px 3px #0003;
    min-height: auto
}

@media (min-width: 1280px) {
    .ServerStats .Block {
        min-height: 165px
    }
}

.ServerStats .Blob {
    margin: 0
}

.ServerStats__time {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: rgba(0, 0, 0, .3);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, .2);
    width: 100%;
    margin-bottom: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

@media (min-width: 992px) {
    .ServerStats__time {
        width: auto;
        margin-bottom: unset
    }
}

.ServerStats__time .ServerStats__title {
    font-family: Sawarabi Mincho, serif;
    color: #ebdec2
}

.ServerStats__players {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: rgba(0, 0, 0, .3);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.ServerStats__players .ServerStats__title {
    font-family: Sawarabi Mincho, serif;
    color: #ebdec2
}

.ServerStats__title {
    font-weight: 700;
    letter-spacing: 2px
}

.ServerStats__stat {
    font-size: 1.5rem;
    letter-spacing: 2px
}

.ServerStats__divider {
    margin: 0 10px
}

.Blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 #000;
    margin: 10px;
    height: 20px;
    width: 20px;
    transform: scale(1);
    animation: pulse-black 2s infinite
}

.Blob--populated {
    background: rgb(255, 232, 82);
    box-shadow: 0 0 #ffe852;
    animation: pulse-red 2s infinite
}

.Blob--crowded {
    background: rgb(220, 132, 31);
    box-shadow: 0 0 #dc841f;
    animation: pulse-red 2s infinite
}

.Blob--full {
    background: rgb(165, 24, 24);
    box-shadow: 0 0 #a51818;
    animation: pulse-red 2s infinite
}

.Blob--danger {
    background: rgb(255, 82, 82);
    box-shadow: 0 0 #ff5252;
    animation: pulse-red 2s infinite
}

.Blob--success {
    background: rgb(51, 217, 178);
    box-shadow: 0 0 #33d9b2;
    animation: pulse-green 2s infinite
}

.Blob--small {
    height: 10px;
    width: 10px
}

.Blob--medium {
    height: 15px;
    width: 15px
}

.Blob--center {
    margin: 0 auto
}

@keyframes pulse-black {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 #000000b3
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px #0000
    }
    to {
        transform: scale(.95);
        box-shadow: 0 0 #0000
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 #ff5252b3
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px #ff525200
    }
    to {
        transform: scale(.95);
        box-shadow: 0 0 #ff525200
    }
}

@keyframes pulse-green {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 #33d9b2b3
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px #33d9b200
    }
    to {
        transform: scale(.95);
        box-shadow: 0 0 #33d9b200
    }
}

.BlobVariant {
    animation: blob-turn var(--time, 30s) linear infinite;
    fill: var(--fill, #7600f8);
    position: relative;
    transform-origin: center;
    max-width: 400px
}

.BlobVariant svg {
    animation: blob-skew calc(var(--time, 30s) * .5) linear 0s infinite;
    transform-origin: center
}

.BlobVariant svg path {
    animation: blob-scale calc(var(--time, 30s) * .5) ease-in-out 0s infinite;
    transform-origin: center
}

.BlobVariant--small {
    width: 400px
}

.BlobVariant--green {
    fill: #ceefb6
}

@keyframes blob-turn {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes blob-skew {
    0% {
        transform: skewY(0)
    }
    13% {
        transform: skewY(calc(1.8deg * var(--amount, 2)))
    }
    18% {
        transform: skewY(calc(2.2deg * var(--amount, 2)))
    }
    24% {
        transform: skewY(calc(2.48deg * var(--amount, 2)))
    }
    25% {
        transform: skewY(calc(2.5deg * var(--amount, 2)))
    }
    26% {
        transform: skewY(calc(2.48deg * var(--amount, 2)))
    }
    32% {
        transform: skewY(calc(2.2deg * var(--amount, 2)))
    }
    37% {
        transform: skewY(calc(1.8deg * var(--amount, 2)))
    }
    50% {
        transform: skewY(0)
    }
    63% {
        transform: skewY(calc(-1.8deg * var(--amount, 2)))
    }
    68% {
        transform: skewY(calc(-2.2deg * var(--amount, 2)))
    }
    74% {
        transform: skewY(calc(-2.48deg * var(--amount, 2)))
    }
    75% {
        transform: skewY(calc(-2.5deg * var(--amount, 2)))
    }
    76% {
        transform: skewY(calc(-2.48deg * var(--amount, 2)))
    }
    82% {
        transform: skewY(calc(-2.2deg * var(--amount, 2)))
    }
    87% {
        transform: skewY(calc(-1.8deg * var(--amount, 2)))
    }
    to {
        transform: skewY(0)
    }
}

@keyframes blob-scale {
    0% {
        transform: scaleX(.9) scaleY(1)
    }
    25% {
        transform: scaleX(.9) scaleY(.9)
    }
    50% {
        transform: scaleX(1) scaleY(.9)
    }
    75% {
        transform: scaleX(.9) scaleY(.9)
    }
    to {
        transform: scaleX(.9) scaleY(1)
    }
}

.Section--hasBackground {
    min-height: 500px;
    position: relative;
    padding: 60px
}

.Section--flexCenter {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.Section--pvpChampion {
    background: #1D1D1D;
    border-radius: 40px;
    margin: 20px 15px;
    padding: 20px
}

@media (min-width: 992px) {
    .Section--pvpChampion {
        background-size: contain;
        background: url(/build/assets/pvp-champion-f8e21526.png) no-repeat;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
        padding: 60px
    }
}

.Section--pvpChampion .content-block--dark {
    background: rgb(150, 0, 0)
}

.Section--pvpChampion .content-block--dark a {
    color: #fefdff;
    text-decoration: none
}

.Section--pvpChampion .tournament-stats {
    font-weight: 700;
    color: #080a0a
}

.morphsearch {
    width: 200px;
    min-height: 40px;
    background: #dfdfdf;
    position: fixed;
    z-index: 10000;
    top: 50px;
    right: 50px;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition-property: min-height, width, top, right;
    transition-property: min-height, width, top, right;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(.7, 0, .3, 1);
    transition-timing-function: cubic-bezier(.7, 0, .3, 1)
}

.morphsearch.open {
    width: 100%;
    min-height: 100%;
    top: 0;
    right: 0;
    display: block
}

.morphsearch-form {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    -webkit-transition-property: width, height, -webkit-transform;
    transition-property: width, height, transform;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(.7, 0, .3, 1);
    transition-timing-function: cubic-bezier(.7, 0, .3, 1)
}

.morphsearch.open .morphsearch-form {
    width: 80%;
    height: 160px;
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0)
}

.morphsearch-input {
    width: 100%;
    height: 100%;
    padding: 0 10% 0 10px;
    font-weight: 700;
    border: none;
    background: transparent;
    font-size: .8em;
    color: #ec5a62;
    -webkit-transition: font-size 1s cubic-bezier(.7, 0, .3, 1);
    transition: font-size 1s cubic-bezier(.7, 0, .3, 1)
}

.morphsearch-input::-ms-clear {
    display: none
}

.morphsearch.open .morphsearch-input {
    font-size: 7em
}

.morphsearch-input::-webkit-input-placeholder, .morphsearch-input:-moz-placeholder, .morphsearch-input::-moz-placeholder, .morphsearch-input:-ms-input-placeholder {
    color: #c2c2c2
}

.gn-search:focus::-webkit-input-placeholder {
    color: transparent
}

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

.morphsearch-input:focus, .morphsearch-submit:focus {
    outline: none
}

.morphsearch-submit {
    position: absolute;
    width: 80px;
    height: 80px;
    color: #454545;
    overflow: hidden;
    right: 0;
    top: 50%;
    border: none;
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0;
    -webkit-transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1)
}

.morphsearch.open .morphsearch-submit {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(-30px, -50%, 0) scale3d(1, 1, 1);
    transform: translate3d(-30px, -50%, 0) scaleZ(1);
    -webkit-transition: opacity .6s, -webkit-transform .6s;
    transition: opacity .6s, transform .6s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.morphsearch-close {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    color: #ec5a62;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1)
}

.morphsearch.open .morphsearch-close {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scaleZ(1);
    -webkit-transition: opacity .6s, -webkit-transform .6s;
    transition: opacity .6s, transform .6s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.morphsearch-content {
    color: #333;
    margin-top: 4.5em;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0 10.5%;
    background: #f0f0f0;
    position: absolute;
    pointer-events: none;
    opacity: 0
}

.morphsearch.open .morphsearch-content {
    opacity: 1;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    -webkit-transition: opacity .6s 1s;
    transition: opacity .6s 1s
}

.dummy-column {
    width: 30%;
    padding: 0 0 6em;
    float: left;
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translateY(100px);
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s
}

.morphsearch.open .dummy-column:first-child {
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

.morphsearch.open .dummy-column:nth-child(2) {
    -webkit-transition-delay: .9s;
    transition-delay: .9s
}

.morphsearch.open .dummy-column:nth-child(3) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.morphsearch.open .dummy-column {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0)
}

.dummy-column:nth-child(2) {
    margin: 0 5%
}

.dummy-column h2, .dummy-column .h2 {
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
    color: #47c9af;
    padding: .5em 0
}

.round {
    border-radius: 50%
}

.dummy-media-object {
    padding: .75em;
    display: block;
    margin: .3em 0;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(118, 117, 128, .05)
}

.dummy-media-object:hover, .dummy-media-object:focus {
    background: rgba(118, 117, 128, .1)
}

.dummy-media-object img {
    display: inline-block;
    width: 50px;
    margin: 0 10px 0 0;
    vertical-align: middle
}

.dummy-media-object h3, .dummy-media-object .h3 {
    vertical-align: middle;
    font-size: .85em;
    display: inline-block;
    font-weight: 700;
    margin: 0;
    width: calc(100% - 70px);
    color: #454545
}

.dummy-media-object:hover h3, .dummy-media-object:hover .h3 {
    color: #ec5a62
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .5);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    -webkit-transition-timing-function: cubic-bezier(.7, 0, .3, 1);
    transition-timing-function: cubic-bezier(.7, 0, .3, 1)
}

.morphsearch.open ~ .overlay {
    opacity: 1
}

@media screen and (max-width: 53.125em) {
    .morphsearch-input {
        padding: 0 25% 0 10px
    }

    .morphsearch.open .morphsearch-input {
        font-size: 2em
    }

    .dummy-column {
        float: none;
        width: auto;
        padding: 0 0 2em
    }

    .dummy-column:nth-child(2) {
        margin: 0
    }

    .morphsearch.open .morphsearch-submit {
        -webkit-transform: translate3d(0, -50%, 0) scale3d(.5, .5, 1);
        transform: translate3d(0, -50%, 0) scale3d(.5, .5, 1)
    }
}

@media screen and (max-width: 60.625em) {
    .morphsearch {
        width: 80%;
        top: 10%;
        right: 10%
    }
}

@media screen and (max-width: 60.625em) {
    .codrops-header, .sidebar {
        float: none;
        max-width: 100%;
        padding: 20px;
        text-align: center
    }

    .sidebar > nav {
        float: none;
        margin: 100px .5em 0
    }
}

.TrackerList--globals {
    background: #f7f7f7;
    box-shadow: 0 0 8px #d9d9d9;
    border-radius: 15px;
    margin-bottom: 20px;
    padding: 15px
}

.TrackerList--dark {
    background: #05090e;
    box-shadow: 0 0 8px #000
}

.TrackerList--levelBattle {
    position: relative
}

.TrackerList--hasFrame {
    position: relative;
    z-index: 2
}

.TrackerList--hasFrame-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: -1
}

.TrackerList--hasFrame-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: -1
}

.TrackerList--hasFrame-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: -1
}

.TrackerList--hasFrame-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: -1
}

.TrackerList__item--global {
    word-break: break-word
}

.TrackerList__item--levelBattle {
    border-radius: 40px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px #d9d9d9;
    word-break: break-word;
    background-size: cover
}

.TrackerList__item--levelBattle.first {
    padding: 60px 40px
}

.TrackerList__item--levelBattle.small {
    padding: 20px;
    border-radius: 15px
}

.TrackerList__item--levelBattle-second {
    background: #f7db2d
}

.TrackerList__item--levelBattle--dark {
    box-shadow: 0 0 8px #000
}

.TrackerList__image--global {
    overflow: hidden;
    position: relative;
    border-radius: 15px
}

.TrackerList__image--global div {
    border-radius: 15px
}

.TrackerList__image--levelBattleWidget {
    position: absolute;
    width: 160px;
    bottom: -20px
}

.TrackerList__image--levelBattleWidget.even {
    right: 15px
}

.TrackerList__image--levelBattleWidget.odd {
    left: 15px
}

.TrackerList__image--levelBattleWidget.small {
    right: -10px;
    position: absolute;
    width: 55px;
    top: -40px;
    border-radius: 15px
}

.TrackerList__image--fortressWidget {
    position: absolute;
    width: 70px;
    bottom: 15px
}

.TrackerList__image--fortressWidget.even {
    right: 20px
}

.TrackerList__image--fortressWidget.odd {
    left: 20px
}

.TrackerList__name--global {
    font-size: 12px;
    font-weight: 700
}

.TrackerList__name--levelBattle.first {
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 4px black
}

.TrackerList__name--levelBattle.first a {
    text-decoration: none;
    color: #e1bb80
}

.TrackerList__name--levelBattle.first a:hover {
    color: #cb8e30
}

.TrackerList__name--levelBattle.small {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px black
}

.TrackerList__name--levelBattle.small a {
    text-decoration: none;
    color: #e1bb80
}

.TrackerList__name--levelBattle.small a:hover {
    color: #cb8e30
}

.TrackerList__value--global {
    font-size: 12px
}

.TrackerList__value--levelBattle {
    font-size: 12px;
    color: #fff;
    font-weight: 400
}

.TrackerList__value--levelBattle.percent {
    color: #65e485;
    font-size: 1.5rem;
    font-weight: 200
}

.Video__radius--main {
    border-radius: 40px
}

.Image--pvpChampion {
    width: 100%;
    height: 150px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 0 12px #8f8f8f
}

.Image--pvpChampion img {
    object-fit: cover;
    object-position: -13px 30%;
    height: 100%;
    width: 120%;
    border-radius: 25px
}

.Hero--home {
    align-items: end;
    display: flex;
    height: 800px;
    justify-content: center;
    min-height: 760px;
    position: relative;
    width: 100%;
    overflow: hidden
}

.Hero--page {
    align-items: end;
    display: flex;
    height: 400px;
    justify-content: center;
    min-height: 400px;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px
}

.Hero--page .Hero__mask {
    -webkit-mask-position: center bottom;
    mask-position: center bottom
}

.Hero--page .Hero__title {
    color: #fefdff;
    display: flex;
    justify-content: center;
    text-shadow: #0a0100 0 2px 5px;
    font-size: 1.5rem;
    margin-top: 10px
}

@media (min-width: 992px) {
    .Hero--page .Hero__title {
        font-size: 2rem
    }
}

.Hero--page .Hero__tagline {
    color: #fefdff;
    display: flex;
    justify-content: center;
    text-shadow: #0a0100 0 2px 5px;
    font-size: 1rem;
    margin-top: 0
}

.Hero__mask {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    -webkit-mask-image: url(/build/assets/about-hero-mask-d0389ac7.png);
    mask-image: url(/build/assets/about-hero-mask-d0389ac7.png);
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    max-width: 2400px;
    position: absolute;
    top: 0;
    width: 100%
}

.Hero__mask img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.Hero__content {
    width: 100%;
    z-index: 2;
    position: relative;
    top: 0;
    padding: 0 3vw;
    display: flex;
    height: 100%;
    align-items: center
}

.pageHero {
    padding: 20px;
    position: relative;
    color: #fff
}

.pageHero--heroStandard {
    height: 400px;
    background: url(/build/assets/hero_page_banner-266dfd1f.png);
    background-size: cover;
    background-position: center center
}

.pageHero--heroRich {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.pageHero--minimal {
    height: 350px
}

@media (min-width: 992px) {
    .pageHero--minimal {
        height: 500px
    }
}

.pageHero--minimal h1, .pageHero--minimal .h1 {
    margin-top: 50px
}

.pageHero--rounded {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0
}

.pageHero--rounded .Navigation__main {
    padding: 20px
}

.pageHero--dark {
    background: #101012
}

.pageHero__borderedBottom {
    border-top-right-radius: 65px;
    border-top-left-radius: 65px;
    min-height: 50px;
    background: #101012
}

.pageHero .logo {
    margin-top: 30px;
    max-width: 250px
}

.pageHero .hero_nav {
    box-shadow: none
}

.pageHero__title {
    margin: 50px 0 10px
}

.pageHero__title--large {
    color: #fefdff;
    text-align: center;
    font-size: 85px
}

.pageHero__headline--minimal {
    font-size: 3rem;
    font-weight: 700;
    color: #151c37
}

.pageHero__introShort--standard {
    width: 100%;
    color: #ebdec2
}

@media (min-width: 768px) {
    .pageHero__introShort--standard {
        width: 75%
    }
}

.pageHero__introShort--minimal {
    width: 100%;
    color: #080a0a
}

.pageHero__introShort--medium {
    width: 100%
}

@media (min-width: 992px) {
    .pageHero__introShort--medium {
        width: 50%
    }
}

.pageHero__introContent--minimal {
    margin-top: 20px;
    color: #080a0a
}

.flatContent {
    width: 100%;
    color: #ebdec2;
    background: #111111;
    border: 1px solid #504137;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    margin-top: 20px
}

.flatContent .inner-content {
    padding-top: 10px
}

.flatContent--timerWidget {
    background-image: url(/build/assets/widget_timer_bg-910bf00c.png);
    background-size: cover
}

.flatContent--timerWidget .highlight {
    font-size: 16px;
    font-family: Outfit, sans-serif;
    font-weight: 300;
    display: block;
    color: #ffba00;
    line-height: 1
}

.flatContent--timerWidget .subtitle {
    font-size: 14px;
    color: #eaff00
}

.avatar__image {
    border: 1px solid #504137;
    transition: all .25s cubic-bezier(.23, 1, .32, 1) 0s;
    position: relative;
    -webkit-box-shadow: inset 0 0 10px 10px #000;
    -moz-box-shadow: inset 0 0 10px 10px #000;
    box-shadow: inset 0 0 10px 10px #000
}

.avatar__image:hover {
    border: 1px solid #E1BB80
}

.Pane--flex {
    display: flex
}

.Pane--timepiece {
    background: url(/resources/img/backgrounds/timepieceBG.png);
    border: 1px solid #312b2b;
    margin-bottom: 20px;
    height: auto;
    color: #ebdec2;
    border-radius: 40px
}

.Pane--bestUniqueKiller {
    background: url(/build/assets/bestUniqueKillerBG-b1adf213.png) center;
    background-size: cover;
    margin-bottom: 20px;
    color: #ebdec2;
    border-radius: 40px;
    padding: 40px
}

.Pane__heading {
    font-size: .9rem
}

.Pane__heading--bestKiller {
    font-size: 1.5rem;
    color: #151c37;
    text-shadow: 0 0 1px transparent, 0 1px 2px rgba(0, 0, 0, .8)
}

.Pane__highlighted {
    font-size: 1.5rem;
    font-family: Sawarabi Mincho, serif;
    color: #151c37
}

.Pane__stats {
    font-size: .8rem;
    color: #ebdec2
}

.Pane__avatar {
    margin-right: 40px
}

.Pane__info--leftSpacing {
    padding-left: 40px;
    border-right: none
}

.Pane__info--borderRight {
    border-right: 1px solid #312b2b;
    padding-right: 40px
}

.Pane__info--flexCenter {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: column
}

.Pane__info--bestUniqueKiller {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    flex-direction: column
}

.Unique.fancybox-content {
    background: #181818;
    min-width: 600px;
    max-width: 800px;
    color: #ebdec2
}

.scrollInformation {
    display: none;
    width: 100%;
    background: #0a0100;
    position: fixed;
    top: 60px;
    z-index: 2;
    padding: 20px
}

.scrollInformation__content {
    color: #ebdec2;
    margin: 0
}

.scrollInformation__title {
    color: #ffba00;
    font-family: Sawarabi Mincho, serif;
    margin: 0
}

.Tooltip--eligibleEventCharacters {
    background: rgba(16, 16, 16, .9);
    color: #fefdff;
    padding: 40px;
    border-radius: 30px;
    font-size: 14px;
    position: absolute;
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid #1D1D1D
}

.Tooltip--inventory {
    z-index: 9999;
    max-width: 290px;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
    border-radius: 15px;
    border: 1px solid #1D1D1D
}

.Tooltip--inventory .tooltip-inner {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-size: .75rem !important;
    line-height: 20px;
    font-weight: lighter;
    font-style: normal;
    text-shadow: 1px 1px #000;
    color: #fff;
    background: transparent;
    text-align: left
}

.Tooltip--inventory .tooltip-inner .title {
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .title-blue {
    color: #50cecd;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .title-sox {
    color: #f2e43d;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .sox-green {
    color: #6df23d;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .sox-yellow {
    color: #f2e43d;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .inv-red {
    color: #ff2f51;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .inv-blue {
    color: #50cecd;
    font-weight: 700
}

.Tooltip--inventory .tooltip-inner .inv-brownish {
    color: #efdaa4;
    font-weight: 700
}

.Inventory__image--charImage {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.Inventory__image--charImage img {
    border-radius: 15px
}

.slots {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center
}

.itemslot {
    width: 40px;
    height: 40px
}

.equip-suit-slot {
    margin-top: 20px
}

.equip-suit-slot .itemslot {
    background: url(/build/assets/equip_slot_specialdress-f9cb4ae5.PNG) no-repeat !important
}

.weapon .itemslot {
    margin-bottom: 25px;
    background: url(/build/assets/empty-4ee233aa.png) repeat !important
}

.shield .itemslot {
    margin-bottom: 25px;
    background: url(/build/assets/empty-4ee233aa.png) repeat !important
}

.head .itemslot {
    background: url(/build/assets/equip_slot_helm-ee750230.PNG) no-repeat !important
}

.chest .itemslot {
    background: url(/build/assets/equip_slot_mail-5bd17366.PNG) no-repeat !important
}

.shoulder .itemslot {
    background: url(/build/assets/equip_slot_shoulderguard-68517f71.PNG) no-repeat !important
}

.hands .itemslot {
    background: url(/build/assets/equip_slot_gauntlet-dc6875f4.PNG) no-repeat !important
}

.legs .itemslot {
    background: url(/build/assets/equip_slot_pants-271c512b.PNG) no-repeat !important
}

.foot .itemslot {
    background: url(/build/assets/equip_slot_boots-c315c359.PNG) no-repeat !important
}

.earring .itemslot {
    background: url(/build/assets/equip_slot_earring-0a214db5.PNG) no-repeat !important
}

.necklace .itemslot {
    background: url(/build/assets/equip_slot_necklace-8b9d0d6f.PNG) no-repeat !important
}

.lring .itemslot {
    background: url(/build/assets/equip_slot_l_ring-403b83d6.PNG) no-repeat !important
}

.rring .itemslot {
    background: url(/build/assets/equip_slot_r_ring-ebff8e0b.PNG) no-repeat !important
}

.specdress .itemslot {
    margin-top: 10px !important
}

.hat .itemslot {
    background: url(/build/assets/equip_slot_helm-ee750230.PNG) no-repeat !important
}

.dress .itemslot {
    background: url(/build/assets/equip_slot_cloth-55b939a5.PNG) no-repeat !important
}

.attach .itemslot {
    background: url(/build/assets/equip_slot_pandernt-2090c157.PNG) no-repeat !important
}

.flag .itemslot {
    background: url(/build/assets/equip_slot_plag-82e63388.PNG) no-repeat !important
}

.spec .itemslot {
    background: url(/build/assets/equip_slot_extraneous01-e6cccdaf.PNG) no-repeat !important
}

.slots, .bg-equipment-avatar .slots {
    width: 100% !important;
    margin-bottom: 3px !important
}

.slots.weapon, .slots.shield {
    width: 100% !important;
    margin-bottom: 20px !important
}

.image .itemslot .image {
    margin: 3px
}

.itemslot .image .qinfo {
    font-size: 9px;
    font-weight: lighter;
    font-style: normal;
    text-shadow: 0 -.5px #000;
    color: #fff;
    padding: 0;
    float: left
}

.itemslot .image {
    width: 100%;
    height: 100%;
    float: left;
    padding: 0 !important;
    margin: 3px
}

.weapon .itemslot .image, .shield .itemslot .image {
    width: 100%;
    height: 100%;
    float: left;
    margin: 2px;
    padding: 0 !important
}

.itemInfo {
    color: #fff;
    z-index: 80;
    position: absolute;
    left: 34px;
    top: 3px;
    width: 210px;
    background: rgba(88, 98, 170, .85);
    border: 2px solid #303d4d;
    padding: 5px;
    display: none;
    line-height: 18px;
    font-size: 10px
}

.ui-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 290px;
    padding: 15px;
    background: rgba(0, 0, 0, .6);
    background-size: 100% 100% !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-border-radius: 1px !important;
    -moz-border-radius: 1px !important;
    border-radius: 1px !important
}

.ui-tooltip-content {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px !important;
    line-height: 15px;
    font-weight: lighter;
    font-style: normal;
    text-shadow: 1px 1px #000;
    color: #fff
}

.empty-slot {
    background: url(/build/assets/empty-4ee233aa.png) no-repeat !important;
    width: 40px !important;
    height: 40px !important
}

.bg-equipment-avatar .equip-suit-slot {
    background: url(/resources/img/sroapi/equipment/equipment/equip_slot_specialdress.PNG) no-repeat !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: 96px;
    float: right;
    clear: right
}

.equip-suit-slot .image {
    width: 34px !important;
    height: 34px !important;
    margin-left: 2px !important;
    margin-top: 2px !important
}

div.image span.plus {
    display: block;
    width: 32px;
    height: 32px;
    background: url(/build/assets/itemplus-8c94094a.png) left top;
    -webkit-animation: play 1.8s steps(32) infinite;
    -moz-animation: play 1.8s steps(32) infinite;
    -ms-animation: play 1.8s steps(32) infinite;
    -o-animation: play 1.8s steps(32) infinite;
    animation: play 1.8s steps(32) infinite
}

@-webkit-keyframes play {
    to {
        background-position: -1024px
    }
}

@-moz-keyframes play {
    to {
        background-position: -1024px
    }
}

@-ms-keyframes play {
    to {
        background-position: -1024px
    }
}

@-o-keyframes play {
    to {
        background-position: -1024px
    }
}

@keyframes play {
    to {
        background-position: -1024px
    }
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

.image {
    background-repeat: no-repeat !important;
    background-size: 34px 34px !important
}

.Character__basics--dark {
    background-color: #080a0a;
    padding: 60px;
    border-radius: 40px;
    color: #fff
}

.Character__basics--image {
    background-image: url(/build/assets/character-view-the-basics-ae6f8a9e.png);
    padding: 100px 60px;
    border-radius: 40px;
    color: #fff
}

.Character__icon {
    border: 1px solid white;
    width: 100%;
    display: flex;
    min-height: 60px;
    max-height: 100px;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding: 20px
}

.Character__icon--health {
    color: #27cc4e;
    border: 1px solid #27cc4e
}

.Character__icon--mana {
    color: #2750cc;
    border: 1px solid #2750cc
}

.Character__icon--strength {
    color: #da4453;
    border: 1px solid #da4453
}

.Character__icon--intellect {
    color: #44dabc;
    border: 1px solid #44dabc
}

.Character__icon--guild {
    color: #ccc927;
    border: 1px solid #ccc927
}

.Character__statInfo {
    line-height: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.Character__statInfo p {
    font-family: Outfit, sans-serif;
    margin: 0
}

.Character__statInfo span {
    font-size: 1.5rem;
    font-family: Outfit, sans-serif;
    color: #fff;
    margin: 0;
    font-weight: 700
}

.Character__statInfo a {
    font-size: 1.5rem;
    font-family: Outfit, sans-serif;
    color: #ffba00 !important;
    margin: 0
}

.Character__anchor {
    font-size: 1.5rem;
    font-family: Outfit, sans-serif;
    color: #ffba00;
    margin: 0
}

.Fancybox--rounded {
    border-radius: 40px
}

.Fancybox--big {
    min-width: 100%
}

@media (min-width: 992px) {
    .Fancybox--big {
        min-width: 800px
    }
}

.Fancybox--prices.fancybox__content {
    background: #1D1D1D;
    min-width: 600px;
    max-width: 800px;
    color: #fefdff;
    border-radius: 40px
}

.Fancybox--teaser-video.fancybox__content {
    background: #1D1D1D;
    width: 90vw;
    height: 90vh;
    color: #fefdff;
    border-radius: 40px;
    padding: 0
}

.fancybox-content {
    background: #1D1D1D;
    min-width: 600px;
    max-width: 800px;
    color: #fefdff
}

.Banner--ranking {
    width: 100%;
    position: relative;
    margin-top: 20px;
    border-radius: 40px;
    padding: 40px
}

@media (min-width: 1200px) {
    .Banner--ranking {
        margin-top: 60px;
        margin-bottom: 60px
    }
}

.Banner--hasBackground {
    min-height: 200px;
    color: #fff;
    display: flex;
    padding: 20px 40px;
    flex-direction: column;
    justify-content: center
}

.Banner--hasShadow {
    box-shadow: 1px 1px 11px #c8944642
}

.Banner__image--absolute {
    position: absolute;
    right: 0;
    width: 150px;
    bottom: 0
}

@media (min-width: 992px) {
    .Banner__image--absolute {
        width: 160px;
        bottom: -15px
    }
}

@media (min-width: 1200px) {
    .Banner__image--absolute {
        width: 190px;
        bottom: -25px
    }
}

.Banner__title--ranking {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e1bb80;
    text-shadow: 0 0 4px black
}

.Banner__title--ranking a {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e1bb80;
    text-shadow: 0 0 4px black;
    text-decoration: none;
    transition: .3s
}

.Banner__title--ranking a:hover {
    color: #cb8e30
}

.Banner__tagline--ranking {
    font-size: 1.5rem
}

.Banner__value--percent {
    color: #65e485;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 4px black
}

.Card--primary {
    background: #16171e;
    border-radius: 15px;
    border: 1px solid #22293e;
    color: #fff
}

.Card--character {
    position: relative;
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D
}

.Card--character .Card__title {
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80
}

.Card--character .Card__body {
    color: #fefdff
}

.Card--character .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px;
    position: relative;
    z-index: 3
}

.Card--character-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0
}

.Card--character-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0
}

.Card--character-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0
}

.Card--character-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0
}

.Card--character-row {
    position: relative;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D;
    background: rgba(28, 20, 10, .3);
    display: block;
    text-decoration: none;
    transition: .3s
}

.Card--character-row:hover {
    background: rgba(9.2105263158, 6.5789473684, 3.2894736842, .3)
}

.Card--character-row .Card__title {
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80;
    font-weight: 700
}

.Card--character-row .Card__body {
    color: #fefdff;
    display: flex;
    justify-content: space-between
}

.Card--character-row .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px;
    position: relative;
    z-index: 3
}

.Card--character-row-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0
}

.Card--character-row-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0
}

.Card--character-row-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0
}

.Card--character-row-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0
}

.Card--row-main {
    position: relative;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D;
    transition: .3s
}

.Card--row-main:hover {
    background: black
}

.Card--row-main .Card__title {
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80
}

.Card--row-main .Card__image {
    width: 50px;
    border-radius: 100%;
    margin-right: 10px
}

.Card--main {
    position: relative;
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D;
    z-index: 10
}

.Card--main .Card__title {
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80
}

.Card--main .Card__body {
    color: #fefdff;
    padding: 0
}

.Card--main .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px;
    position: relative;
    z-index: 3
}

.Card--main .Card__tagline {
    font-family: Outfit, sans-serif;
    color: #d2b475;
    font-size: .9rem
}

.Card--main-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: -1
}

.Card--main-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: -1
}

.Card--main-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: -1
}

.Card--main-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: -1
}

.Card--main .Card__title {
    position: relative;
    font-size: 1rem;
    font-family: Sawarabi Mincho, serif;
    color: #ebdec2;
    z-index: 2
}

.Card--main .Card__title--center {
    text-align: center
}

.Card--main .Card__title--sm {
    font-size: 1rem
}

.Card--main .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px
}

.Card--image {
    position: relative;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D;
    z-index: 1
}

.Card--image .Card__image {
    position: relative
}

.Card--image .Card__image img {
    border-radius: 20px
}

.Card--image .Card__title {
    font-family: Sawarabi Mincho, serif;
    color: #e1bb80
}

.Card--image .Card__body {
    color: #fefdff;
    padding: 40px
}

.Card--image .Card__label-new {
    position: absolute;
    top: 20px;
    left: 20px
}

.Card--image .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px;
    position: relative;
    z-index: 3
}

.Card--image .Card__tagline {
    font-family: Outfit, sans-serif;
    color: #d2b475;
    font-size: .9rem
}

.Card--image-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: 11
}

.Card--image-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: 11
}

.Card--image-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: 11
}

.Card--image-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: 11
}

.Card--image .Card__title {
    position: relative;
    font-size: 1rem;
    font-family: Sawarabi Mincho, serif;
    color: #ebdec2;
    z-index: 2
}

.Card--image .Card__title--center {
    text-align: center
}

.Card--image .Card__title--sm {
    font-size: 1rem
}

.Card--image .Card__footer {
    padding: 20px;
    color: #fefdff;
    background: rgba(28, 20, 10, .3);
    border-radius: 15px
}

.Card--ingame {
    position: relative;
    z-index: 2;
    border-radius: 40px;
    padding: 60px;
    border: 1px solid #453b30;
    margin-bottom: 20px;
    height: 230px
}

@media (min-width: 1200px) {
    .Card--ingame {
        padding: 60px
    }
}

.Card--ingame:hover {
    background: green
}

.Card--ingame .Card__body {
    position: relative;
    z-index: 2;
    padding: 0
}

.Card--ingame .Card__tagline {
    font-weight: 400;
    line-height: 0;
    letter-spacing: 1.5px
}

.Card--ingame .Card__title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 1.5px
}

.Card--ingame-narrow {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    padding: 40px;
    height: 230px
}

@media (min-width: 1200px) {
    .Card--ingame-narrow {
        padding: 60px;
        justify-content: space-between
    }
}

.Card--ingame-narrow .Card__body {
    position: relative;
    z-index: 2;
    padding: 0
}

.Card--ingame-narrow .Card__tagline {
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
    font-size: 1rem
}

.Card--ingame-narrow .Card__title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0;
    letter-spacing: 1.5px;
    text-transform: unset
}

.Card--ingame-narrow .Card__subtitle {
    color: #adc178;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: normal
}

.Card--ingame-narrow .Card__bottom {
    position: relative;
    z-index: 2
}

.Card--ingame-timers {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    padding: 40px;
    min-height: 230px
}

@media (min-width: 1200px) {
    .Card--ingame-timers {
        padding: 60px;
        justify-content: space-between
    }
}

.Card--ingame-timers .Card__tagline {
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.5px;
    font-size: 1rem
}

.Card--ingame-timers .Card__body {
    position: relative;
    z-index: 2;
    padding: 0
}

.Card--ingame-timers .Card__title {
    color: #adc178;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0;
    letter-spacing: 1.5px;
    text-transform: unset
}

.Card--ingame-timers .Card__subtitle {
    color: #adc178;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: normal
}

.Card--ingame-timers .Card__bottom {
    position: relative;
    z-index: 2
}

.Card--fortress {
    position: relative
}

.Card--flexBetween {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.Card__image--header {
    height: 200px;
    overflow: hidden;
    width: 100%;
    position: relative
}

.Card__image--header img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.Card__image--roundedTop img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px
}

.Card__image--avatar {
    display: flex;
    align-items: center
}

.Card__image--avatar img {
    border: 1px solid #22293e;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-right: 10px;
    object-fit: cover
}

.Card__image--avatar small, .Card__image--avatar .small {
    font-size: .7rem
}

.Card__image--avatar-center {
    justify-content: center
}

.Card__image--avatar-center img {
    margin-right: 0
}

.Card__image--sm img {
    width: 50px;
    height: 50px
}

.Card__image--rounded img {
    border-radius: 100%
}

.Card__body {
    padding: 20px
}

.Card__tags {
    margin: 20px 0
}

.Card__tags span {
    border-radius: 20px;
    font-size: .7rem;
    border: 1px solid #22293e;
    padding: 5px 10px;
    display: block;
    margin-right: 10px
}

.Card__tags--flex {
    display: flex
}

.Card__level--difficulty {
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 20px
}

.Card__level--difficulty span {
    font-size: .9rem
}

.Card__label {
    font-size: .8rem;
    text-transform: capitalize;
    font-weight: 700
}

.Card__label--new {
    border-radius: 20px;
    padding: .3rem 1rem;
    background: #ADC178
}

.Card__label--absolute-top {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px
}

.Card__content {
    font-size: .9rem;
    color: #fefdff;
    line-height: 1.5;
    letter-spacing: 1.08px
}

.Card__content p {
    margin: 0
}

.Card__content--fixHeight {
    height: 100px
}

.Card__footer {
    padding: 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.Card__footer-primary {
    background: #010205
}

.Card__footer-rounded-bottom {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px
}

.Modal--primary .modal-header {
    border-bottom: none
}

.Modal--primary .modal-content {
    background: #1D1D1D;
    border-radius: 40px;
    padding: 40px
}

.Modal--primary .modal-title {
    font-family: Sawarabi Mincho, serif;
    font-size: 1rem;
    color: #ebdec2
}

.Modal--primary .modal-body label {
    color: #fefdff
}

.Modal--primary .modal-footer {
    border-top: none
}

.Modal--primary .modal-fw {
    max-width: 100%;
    width: 90%
}

.Tabs--management .nav-pills .nav-link.active, .Tabs--management .nav-pills .show > .nav-link {
    color: #ebdec2;
    background-color: #3f82a1;
    border: none
}

.Tabs--management .nav-pills .nav-link.active:hover, .Tabs--management .nav-pills .show > .nav-link:hover {
    border: none;
    background-color: #080a0a;
    color: #fff
}

.Tabs--management .nav-pills .nav-link {
    border-radius: 20px;
    font-size: .8rem;
    padding: .475rem 2.75rem;
    font-family: Outfit, sans-serif;
    font-weight: 400;
    background-color: #080a0a;
    color: #fff;
    transition: background .2s, color .2s
}

.Tabs--management .nav-pills .nav-link:hover {
    border: none;
    color: #080a0a;
    background-color: #3f82a1
}

.Tabs--management .nav-item:first-child {
    margin-right: 20px
}

.Tabs__character .nav-pills .nav-link.active, .Tabs__character .nav-pills .show > .nav-link {
    color: #080a0a;
    background-color: #e1bb80;
    border: none
}

.Tabs__character .nav-pills .nav-link.active:hover, .Tabs__character .nav-pills .show > .nav-link:hover {
    border: none;
    background-color: #080a0a;
    color: #fff
}

.Tabs__character .nav-pills .nav-link {
    border-radius: 20px;
    font-size: .8rem;
    padding: .475rem 2.75rem;
    font-family: Outfit, sans-serif;
    font-weight: 400;
    background-color: #080a0a;
    color: #fff;
    transition: background .2s, color .2s
}

.Tabs__character .nav-pills .nav-link:hover {
    border: none;
    color: #080a0a;
    background-color: #e1bb80
}

.Tabs__character .nav-item:first-child {
    margin-right: 20px
}

.Tabs__inventory {
    padding: 60px 20px;
    position: relative;
    background: #f7f7f7;
    border-radius: 40px;
    margin-top: 20px
}

.Tabs__inventory--dark {
    background: #05090e
}

.Tabs--main {
    border-radius: 40px;
    position: relative;
    padding: 20px 0
}

.Tabs--main-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: -1
}

.Tabs--main-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: -1
}

.Tabs--main-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: -1
}

.Tabs--main-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: -1
}

.Tabs__message {
    padding: 0 25px
}

.List {
    list-style: none;
    padding: 0;
    margin: 20px 0 0
}

.List__item {
    padding-left: 20px;
    position: relative;
    margin: 10px 0
}

.List__item:last-child {
    margin: 0
}

.List__item:before {
    content: "• ";
    font-weight: 600;
    left: 0;
    position: absolute
}

.List__item--yellowDisc:before {
    color: #eaff00
}

.multi-select {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    user-select: none
}

.multi-select .multi-select-header {
    border: 1px solid #dee2e6;
    padding: 7px 30px 7px 12px;
    overflow: hidden;
    gap: 7px;
    min-height: 45px
}

.multi-select .multi-select-header:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
    height: 12px;
    width: 12px
}

.multi-select .multi-select-header.multi-select-header-active {
    border-color: #c1c9d0
}

.multi-select .multi-select-header.multi-select-header-active:after {
    transform: translateY(-50%) rotate(180deg)
}

.multi-select .multi-select-header.multi-select-header-active + .multi-select-options {
    display: flex
}

.multi-select .multi-select-header .multi-select-header-placeholder {
    color: #65727e
}

.multi-select .multi-select-header .multi-select-header-option {
    display: inline-flex;
    align-items: center;
    background-color: #f3f4f7;
    font-size: 14px;
    padding: 3px 8px;
    border-radius: 5px
}

.multi-select .multi-select-header .multi-select-header-max {
    font-size: 14px;
    color: #65727e
}

.multi-select .multi-select-options {
    display: none;
    box-sizing: border-box;
    flex-flow: wrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px #0000001a;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden
}

.multi-select .multi-select-options::-webkit-scrollbar {
    width: 5px
}

.multi-select .multi-select-options::-webkit-scrollbar-track {
    background: #f0f1f3
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb {
    background: #cdcfd1
}

.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
    background: #b2b6b9
}

.multi-select .multi-select-options .multi-select-option, .multi-select .multi-select-options .multi-select-all {
    padding: 4px 12px;
    height: 42px
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
    margin-right: 14px;
    height: 16px;
    width: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px
}

.multi-select .multi-select-options .multi-select-option .multi-select-option-text, .multi-select .multi-select-options .multi-select-all .multi-select-option-text {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 16px;
    line-height: 20px
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
    border-color: #40c979;
    background-color: #40c979
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio:after, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio:after {
    content: "";
    display: block;
    width: 3px;
    height: 7px;
    margin: .12em 0 0 .27em;
    border: solid #fff;
    border-width: 0 .15em .15em 0;
    transform: rotate(45deg)
}

.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
    color: #40c979
}

.multi-select .multi-select-options .multi-select-option:hover, .multi-select .multi-select-options .multi-select-option:active, .multi-select .multi-select-options .multi-select-all:hover, .multi-select .multi-select-options .multi-select-all:active {
    background-color: #f3f4f7
}

.multi-select .multi-select-options .multi-select-all {
    border-bottom: 1px solid #f1f3f5;
    border-radius: 0
}

.multi-select .multi-select-options .multi-select-search {
    padding: 7px 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin: 10px 10px 5px;
    width: 100%;
    outline: none;
    font-size: 16px
}

.multi-select .multi-select-options .multi-select-search::placeholder {
    color: #b2b5b9
}

.multi-select .multi-select-header, .multi-select .multi-select-option, .multi-select .multi-select-all {
    flex-wrap: wrap;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    color: #212529
}

.mainLayout {
    background: rgb(235, 242, 253);
    transition: opacity 60s ease;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover
}

.mainLayout--dark {
    background: #101012
}

.mainLayout--darkGradient {
    background: linear-gradient(to bottom, #101012, #101012, #1b1c22, #1f212a, #242732)
}

.mainLayout--image {
    background: url(/build/assets/smoke-163e9237.png)
}

.authLayout {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    background: #1D1D1D
}

.authLayout .AuthBlock {
    padding: 40px 30px
}

.authLayout .AuthBlock--form {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto
}

@media (min-width: 1280px) {
    .authLayout .AuthBlock--form {
        width: 650px
    }
}

.authLayout .AuthBlock--form h1, .authLayout .AuthBlock--form .h1 {
    color: #e1bb80
}

.authLayout .AuthBlock--form p {
    color: #fefdff;
    margin: 0
}

.authLayout .AuthBlock--form hr {
    margin: 40px 0
}

.authLayout .AuthBlock--image {
    height: 100vh
}

.authLayout .AuthBlock--image img {
    object-fit: cover;
    height: 100%;
    border-radius: 40px;
    object-position: left
}

@media (min-width: 1280px) {
    .authLayout .AuthBlock--image img {
        object-position: center
    }
}

.authLayout .AuthBlock--rounded {
    border-radius: .375rem
}

.authLayout__shell {
    height: 100vh;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.authLayout__shell-dark {
    background: #101012
}

.authLayout__shell-dark .authLayout__link {
    color: #e1bb80;
    text-decoration: none
}

.authLayout__shell-dark .authLayout__link:hover {
    color: #cb8e30;
    border-bottom: 2px solid #E1BB80
}

.authLayout__shell-dark h1, .authLayout__shell-dark .h1, .authLayout__shell-dark p, .authLayout__shell-dark label {
    color: #fefdff
}

.authLayout__shell-light {
    background: whitesmoke
}

.authLayout__shell-light .authLayout__link {
    color: #080a0a;
    text-decoration: none
}

.authLayout__shell-light .authLayout__link:hover {
    color: #080a0a;
    border-bottom: 2px solid #080a0a
}

.authLayout__shell-loginImage {
    background: url(/build/assets/loginPageShell-29192f2d.png);
    background-size: cover;
    height: 100%
}

.authLayout__shell-registerImage {
    background: url(/build/assets/regPageShell-16b0c64f.png);
    background-size: cover;
    height: 100%
}

.authLayout__shell-generalImage {
    background: url(/resources/img/backgrounds/duoGeneralShell.png);
    background-size: cover;
    height: 100%
}

.authLayout__shell-form {
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center
}

.authLayout__shell-form--center {
    align-self: center
}

.authLayout__link {
    font-weight: bolder
}

.authLayout__link:hover {
    text-decoration: none
}

.LandingPage--light {
    background: #ebf2fd
}

.LandingPage--dark {
    background: #101012
}

.LandingPage--image {
    background: url(/build/assets/smoke-163e9237.png)
}

.LandingPage h1, .LandingPage .h1 {
    font-weight: lighter;
    color: #151c37
}

.LandingPage__promoBanner--minimal {
    width: 100%;
    position: relative;
    z-index: 3;
    margin-top: 0;
    border-radius: 15px;
    padding: 40px
}

.LandingPage__promoBanner--hasBackground {
    min-height: 200px;
    color: #fff;
    display: flex;
    padding: 20px 40px;
    flex-direction: column;
    justify-content: space-evenly
}

.LandingPage__promoBanner .badge {
    border-radius: 15px;
    padding: 10px 20px
}

.LandingPage__promoBanner--hasShadow {
    box-shadow: 1px 1px 11px #a9a9a9
}

.Home__hero {
    height: 350px;
    padding: 20px;
    position: relative;
    color: #fff;
    background-size: cover
}

@media (min-width: 992px) {
    .Home__hero {
        height: 600px
    }
}

.Home__hero-content {
    width: 100%;
    z-index: 2;
    position: relative
}

.home-hero {
    height: 600px;
    padding: 0;
    position: relative;
    color: #fff
}

.home-hero .hero-content {
    position: absolute;
    width: 100%;
    z-index: 2
}

.home-hero .hero-content .logo {
    margin-top: 50px;
    max-width: 250px
}

.home-hero .hero-content .server-stats {
    font-family: Sawarabi Mincho, serif;
    line-height: normal;
    border-bottom: 1px solid white;
    padding: 20px;
    width: 100%;
    margin: 70px auto 0
}

@media (min-width: 992px) {
    .home-hero .hero-content .server-stats {
        width: 40%
    }
}

.home-hero .hero-content .server-stats .time {
    text-align: right;
    font-size: 1.2rem
}

.home-hero .hero-content .server-stats .players {
    font-size: 1.2rem
}

.home-hero .hero-content .server-status {
    font-family: Sawarabi Mincho, serif;
    line-height: normal;
    padding: 20px;
    margin: 0 auto 70px;
    font-size: 1.2rem;
    font-variant: small-caps;
    letter-spacing: 1px
}

.home-hero .hero-content .server-status .status {
    text-align: center
}

.home-hero .hero-content .server-status .status .online {
    color: #84ff00
}

.home-hero .hero-content .server-status .status .offline {
    color: #ff0008
}

.home-hero .hero_image {
    width: 100%;
    z-index: -1;
    position: absolute
}

.single-news {
    width: 80%;
    background: rgb(235, 242, 253);
    color: #ebdec2
}

@media (min-width: 992px) {
    .single-news {
        width: 60%
    }
}

.single-news.fancybox-content {
    padding: 0
}

.single-news h1, .single-news .h1 {
    color: #ffba00
}

.single-news hr {
    background: #ffba00
}

.serverChoice {
    font-family: Outfit, sans-serif
}

.serverChoice .side {
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 100vh;
    flex-wrap: wrap
}

.serverChoice .side.left {
    animation: fadein 2s;
    animation-delay: 0s;
    justify-content: center
}

.serverChoice .side.right {
    animation: fadein 3s;
    animation-delay: 0s;
    justify-content: center
}

.serverChoice .side.right .content {
    background: rgba(17, 17, 17, .7)
}

.serverChoice .side .content {
    padding: 40px;
    background: rgba(41, 32, 20, .7);
    width: 50%;
    max-height: 400px;
    border: 1px solid #504137;
    transition: .3s;
    box-shadow: inset 0 0 10px #000
}

.serverChoice .side .content:hover {
    border: 1px solid #ffba00;
    box-shadow: inset 0 0 40px #000
}

.serverChoice .side .slide-in-bck-center {
    -webkit-animation: slide-in-bck-center .7s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-bck-center .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-ms-keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-o-keyframes fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.ComingSoon--winter {
    background: black
}

.ComingSoon__header--persian {
    height: 100vh;
    padding: 20px 0;
    position: relative;
    background: url(/build/assets/persian_main-5a459100.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

@media (min-width: 992px) {
    .ComingSoon__header--persian {
        height: 100vh
    }
}

.ComingSoon__header--persian p {
    width: 80%;
    text-align: center
}

@media (min-width: 992px) {
    .ComingSoon__header--persian p {
        width: 50%
    }
}

.ComingSoon__header--persian h1, .ComingSoon__header--persian .h1 {
    color: #ececec;
    text-shadow: 1px 1px 2px black;
    font-size: 4rem
}

.ComingSoon__header--persian svg {
    color: #fff;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__header--persian svg:hover {
    color: #ccc
}

.ComingSoon__header--persian:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%23e1e0e0'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__header--persian .promo-wrapper {
    aspect-ratio: 16/9;
    background: #0b0b0b;
    border: 0;
    cursor: pointer;
    margin: 0;
    min-width: 80%;
    padding: 0;
    position: relative;
    order: 1;
    z-index: 4;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 615' preserveAspectRatio='none'%3E%3Cpath d='M1335.2 0H24.8c0 13.7-11.1 24.8-24.8 24.8V590.2c13.7 0 24.8 11.1 24.8 24.8h1310.4c0-13.7 11.1-24.8 24.8-24.8V24.8c-13.7 0-24.8-11.1-24.8-24.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 615' preserveAspectRatio='none'%3E%3Cpath d='M1335.2 0H24.8c0 13.7-11.1 24.8-24.8 24.8V590.2c13.7 0 24.8 11.1 24.8 24.8h1310.4c0-13.7 11.1-24.8 24.8-24.8V24.8c-13.7 0-24.8-11.1-24.8-24.8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

@media (min-width: 992px) {
    .ComingSoon__header--persian .promo-wrapper {
        min-width: 40%
    }
}

.ComingSoon__header--persian .promo-wrapper:after {
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4BAMAAADLSivhAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAADHRSTlMA0FBAwO4UpTCIc2TPMYKpAAAA70lEQVRYw+3ZKw/CQBAE4ElDWh4Ogi8oLAKPoHiShhIwFdTXVOAISQUOBxKDx/D/sA10c0vWAJl17d53t2fnANYPlj9UVCpgL545KwoF3Mnd0wV3odE6ubG4phG6sTcVGlnqxv5SaJzdFtgJm640eFI/XpBrsLDqprgy4K/r/rZVUwPltWbHYq/DzeR9wsdcZ4Ht5uXYQ9HVWmCQjKqH9+OL3gLHaFH56n1CAWBMTExMTExMTExMTExMTExMTPwv2BQsmSItWMI0GGM8U4Boiy5toakuri2F+SxBsS2iNoXjplje9CBgeoowPYKwvrqeb75VOVBLwh0AAAAASUVORK5CYII=);
    border-image-slice: 40 40 40 40;
    border-image-width: 40px 40px 40px 40px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-style: solid;
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    margin-left: 0;
    pointer-events: none;
    width: calc(100% - 10px);
    height: calc(100% - 10px)
}

.ComingSoon__header--moa {
    height: 100vh;
    padding: 20px 0;
    position: relative;
    background: url(/build/assets/moa_main-5fffbd2b.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

@media (min-width: 992px) {
    .ComingSoon__header--moa {
        height: 100vh
    }
}

.ComingSoon__header--moa p {
    width: 80%;
    text-align: center
}

@media (min-width: 992px) {
    .ComingSoon__header--moa p {
        width: 50%
    }
}

.ComingSoon__header--moa h1, .ComingSoon__header--moa .h1 {
    color: #ffd451;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__header--moa:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%23e1e0e0'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__header--moa .promo-wrapper {
    aspect-ratio: 16/9;
    background: #0b0b0b;
    border: 0;
    cursor: pointer;
    margin: 0;
    min-width: 80%;
    padding: 0;
    position: relative;
    order: 1;
    z-index: 4;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 615' preserveAspectRatio='none'%3E%3Cpath d='M1335.2 0H24.8c0 13.7-11.1 24.8-24.8 24.8V590.2c13.7 0 24.8 11.1 24.8 24.8h1310.4c0-13.7 11.1-24.8 24.8-24.8V24.8c-13.7 0-24.8-11.1-24.8-24.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1360 615' preserveAspectRatio='none'%3E%3Cpath d='M1335.2 0H24.8c0 13.7-11.1 24.8-24.8 24.8V590.2c13.7 0 24.8 11.1 24.8 24.8h1310.4c0-13.7 11.1-24.8 24.8-24.8V24.8c-13.7 0-24.8-11.1-24.8-24.8z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

@media (min-width: 992px) {
    .ComingSoon__header--moa .promo-wrapper {
        min-width: 40%
    }
}

.ComingSoon__header--moa .promo-wrapper:after {
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4BAMAAADLSivhAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAADHRSTlMA0FBAwO4UpTCIc2TPMYKpAAAA70lEQVRYw+3ZKw/CQBAE4ElDWh4Ogi8oLAKPoHiShhIwFdTXVOAISQUOBxKDx/D/sA10c0vWAJl17d53t2fnANYPlj9UVCpgL545KwoF3Mnd0wV3odE6ubG4phG6sTcVGlnqxv5SaJzdFtgJm640eFI/XpBrsLDqprgy4K/r/rZVUwPltWbHYq/DzeR9wsdcZ4Ht5uXYQ9HVWmCQjKqH9+OL3gLHaFH56n1CAWBMTExMTExMTExMTExMTExMTPwv2BQsmSItWMI0GGM8U4Boiy5toakuri2F+SxBsS2iNoXjplje9CBgeoowPYKwvrqeb75VOVBLwh0AAAAASUVORK5CYII=);
    border-image-slice: 40 40 40 40;
    border-image-width: 40px 40px 40px 40px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-style: solid;
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    margin-left: 0;
    pointer-events: none;
    width: calc(100% - 10px);
    height: calc(100% - 10px)
}

.ComingSoon__hero--cap100 {
    position: relative;
    overflow: hidden;
    width: 100%
}

@media (min-width: 992px) {
    .ComingSoon__hero--cap100 {
        aspect-ratio: 16/14;
        pointer-events: none
    }
}

.ComingSoon__hero--cap100 iframe {
    display: none
}

@media (min-width: 992px) {
    .ComingSoon__hero--cap100 iframe {
        display: block;
        width: 300%;
        height: 70%;
        margin-left: -100%;
        margin-top: -8%
    }
}

.ComingSoon__videoContent--cap100 {
    position: relative;
    padding: 20px;
    max-width: 100%;
    color: #fff;
    text-shadow: 1px 2px 2px black;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (min-width: 992px) {
    .ComingSoon__videoContent--cap100 {
        position: absolute;
        left: 50%;
        top: 25%;
        max-width: 50%;
        transform: translate(-50%, -50%)
    }
}

.ComingSoon__videoContent--cap100 h1, .ComingSoon__videoContent--cap100 .h1 {
    font-family: Sawarabi Mincho, serif
}

.ComingSoon__videoContent--cap100 img {
    width: 250px
}

@media (min-width: 992px) {
    .ComingSoon__videoContent--cap100 img {
        width: 500px
    }
}

.ComingSoon__contentBlock {
    width: 100%;
    position: relative
}

.ComingSoon__contentBlock--moa .ComingSoon__contentBlock--medusa {
    background-image: url(/build/assets/moa_block_two-8056d369.png);
    background-size: cover;
    padding: 60px
}

.ComingSoon__contentBlock--moa .ComingSoon__contentBlock--medusa ul li {
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__contentBlock--moa .ComingSoon__contentBlock--alternative {
    background-image: url(/build/assets/moa_block_alternative-5227d8c7.png);
    background-size: cover;
    padding: 60px
}

.ComingSoon__contentBlock--moa .ComingSoon__contentBlock--alternative ul li {
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__contentBlock--moa .ComingSoon__contentBlock--info {
    background-image: url(/build/assets/moa_footer-3e990d31.png);
    background-size: cover
}

.ComingSoon__contentBlock--moa:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%23e1e0e0'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__contentBlock--persian .ComingSoon__contentBlock--medusa {
    background-image: url(/build/assets/landing_section_one-952e7e7c.png);
    background-size: cover;
    padding: 60px
}

.ComingSoon__contentBlock--persian .ComingSoon__contentBlock--medusa ul li {
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__contentBlock--persian .ComingSoon__contentBlock--alternative {
    background-image: url(/build/assets/landing_section_three-df675a0b.png);
    background-size: cover;
    padding: 60px
}

.ComingSoon__contentBlock--persian .ComingSoon__contentBlock--alternative ul li {
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px black
}

.ComingSoon__contentBlock--persian .ComingSoon__contentBlock--info {
    background-image: url(/build/assets/landing_section_two-05993f7d.png);
    background-size: cover
}

.ComingSoon__contentBlock--persian:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%23e1e0e0'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__contentBlock--last:after {
    content: unset
}

.ComingSoon__contentBlock--main {
    margin-top: 0;
    z-index: 20;
    background: black;
    padding: 2px
}

@media (min-width: 992px) {
    .ComingSoon__contentBlock--main {
        margin-top: -800px
    }
}

.ComingSoon__contentBlock--bgWithImage {
    position: relative;
    border: 1px solid white;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    flex-direction: column
}

.ComingSoon__contentBlock--generic {
    align-items: unset;
    padding: 100px
}

.ComingSoon__contentBlock--generic-moa {
    background-image: url(/build/assets/moa_main-3a4d1457.png);
    background-size: cover;
    background-position: bottom
}

.ComingSoon__contentBlock--generic-moa:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%000000'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__contentBlock--generic-persian {
    background-image: url(/build/assets/moa_main-3a4d1457.png);
    background-size: cover;
    background-position: bottom
}

.ComingSoon__contentBlock--generic-persian:after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 50'%3E%3Cpath d='M14.4 16.2C20.6 11 24.6 4.1 26.8.2c1.2 2.2 4.5 8.6 9.3 13.4 5.7 5.7 12.8 9.8 16.5 11.4-2.9 1.7-9.3 4.7-15 9.8-4.6 4.2-9.3 11.5-10.9 15C24.2 46 21 39 14.4 33.8 7.1 28.1 3.5 26 .4 25c2.6-1.6 9.4-5 14-8.8z' fill='%000000'/%3E%3C/svg%3E");
    display: block;
    height: 50px;
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    z-index: 200
}

.ComingSoon__contentBlock--roc {
    background-image: url(/build/assets/roc_block_one-954c86fa.png);
    background-size: cover
}

.ComingSoon__contentBlock--roc img {
    display: none
}

@media (min-width: 992px) {
    .ComingSoon__contentBlock--roc img {
        display: block;
        position: absolute;
        right: -240px;
        clip-path: inset(0 0 100px 0);
        bottom: -100px;
        z-index: 1
    }
}

.ComingSoon__contentBlock--info {
    background-image: url(/build/assets/block_info_bg-3240b2ff.png);
    background-size: cover;
    align-items: unset;
    padding: 0 60px
}

.ComingSoon__contentBlock--info p {
    width: 100%
}

@media (min-width: 992px) {
    .ComingSoon__contentBlock--info p {
        width: 40%
    }
}

.ComingSoon__contentBlock--medusa {
    background-image: url(/build/assets/medusa_block_two-5efb315d.png);
    background-size: cover
}

.ComingSoon__contentBlock--medusa img {
    display: none
}

@media (min-width: 992px) {
    .ComingSoon__contentBlock--medusa img {
        display: block;
        position: absolute;
        right: -240px;
        clip-path: inset(0 0 100px 0);
        bottom: -100px;
        z-index: 1
    }
}

.ComingSoon__wrapper--moa .content {
    align-items: center;
    background: #e1e0e0;
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4BAMAAADLSivhAAAAJFBMVEVHcEzh4eHh4ODg4ODi4ODh4eHh4eHg4ODh4eHf39/h4ODh4OBhceB7AAAAC3RSTlMAf9oju0OYX28Q74DQp+AAAAK5SURBVFjD7ZnPaxNBFMe3+yNj2kuVgoVc+kMKupdlwXroRQXTWC8Bi4i5aNIWsZcIRTxGqRX1EqSCxIs/4sGbiT+q2X9ObfbH7Ga+82ZdxMu8U5KXTyYz897Mvu8zDM6mAtJmDWRT2EV/o9ShYHYbuuw6BTsXocv0KNhagK6eQdon6Nmk4SvQc5eGD6BnmYZ7f7GU9IbYbRpmaADfULCP4PN1FXgf/KNxADCUE2EgiSfte/LUCldVHCZ3iLzsjv1bwmwLw9ZGcBj4tigrH4dOE8HhRlqLk+yJKLzeIDhKZX9y6FNROjYQHGXj5NCHcVzvIvhnvC2tTFivxC9dBA+Sf5mKY+dyvPUwRoIhNxR35DgbyRrY+NhNYoutRK/LN/rPkh9qYJhLKLa0/Sdm7u+cu8SHq4vhI/4k3B9W543BU0/10hh1UwfpzYrxOb3sa7K7JnMQzGTgsiuDf8hhU37NtaXwrhw+ksGH1A3bwbDlUvAAw8/py30ZwZuBgrXEsBIbDFsC+NW9QNHWvTTMDpqBuo2q8x4HzwQ5bVbDGtawhjWsYQ1rWMMa/g/wdF64wz9vl8+rPzOPatcnnvQvuGpsvy4qExwl+l1XXKAwBfqrh0qjVXq+dVzRVfKUVVmYUXVRV1aINuTwWWkVy3IM/BsePPGUa+DUjK2HFePRllvjcFux9nbm3u+cPpY6lpJPLQn7PWFfb2xHU3CabZXd+pJoGn1uv61m/KaH4Vieds6khEC2qCCUxEvTzIiIq9FKlukp+1ehmHYNwd+gmJbIeC8Q/DYauIMFxDVC3BEJiLF0OU1oJKawoVAlYixc4jmh4vpy7C3Jd8oSK+jOgorWawIRvDZedjm8B6TrW8exbp0EJtf9C8nyhRoCxgca9os0QR78m/ZLocZPoZZToWZXidxoSZutUIMvb2vxF2h8C0YZIQ6sAAAAAElFTkSuQmCC);
    border-image-slice: 40 40 40 40;
    border-image-width: 40px 40px 40px 40px;
    border-image-outset: 40px 40px 40px 40px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    display: flex;
    flex-direction: column;
    margin: 0 40px;
    position: relative;
    text-align: center;
    justify-content: center;
    grid-row-start: 1;
    font-family: din-pro, Noto Sans, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem
}

.ComingSoon__wrapper--persian .content {
    align-items: center;
    background: #e1e0e0;
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4BAMAAADLSivhAAAAJFBMVEVHcEzh4eHh4ODg4ODi4ODh4eHh4eHg4ODh4eHf39/h4ODh4OBhceB7AAAAC3RSTlMAf9oju0OYX28Q74DQp+AAAAK5SURBVFjD7ZnPaxNBFMe3+yNj2kuVgoVc+kMKupdlwXroRQXTWC8Bi4i5aNIWsZcIRTxGqRX1EqSCxIs/4sGbiT+q2X9ObfbH7Ga+82ZdxMu8U5KXTyYz897Mvu8zDM6mAtJmDWRT2EV/o9ShYHYbuuw6BTsXocv0KNhagK6eQdon6Nmk4SvQc5eGD6BnmYZ7f7GU9IbYbRpmaADfULCP4PN1FXgf/KNxADCUE2EgiSfte/LUCldVHCZ3iLzsjv1bwmwLw9ZGcBj4tigrH4dOE8HhRlqLk+yJKLzeIDhKZX9y6FNROjYQHGXj5NCHcVzvIvhnvC2tTFivxC9dBA+Sf5mKY+dyvPUwRoIhNxR35DgbyRrY+NhNYoutRK/LN/rPkh9qYJhLKLa0/Sdm7u+cu8SHq4vhI/4k3B9W543BU0/10hh1UwfpzYrxOb3sa7K7JnMQzGTgsiuDf8hhU37NtaXwrhw+ksGH1A3bwbDlUvAAw8/py30ZwZuBgrXEsBIbDFsC+NW9QNHWvTTMDpqBuo2q8x4HzwQ5bVbDGtawhjWsYQ1rWMMa/g/wdF64wz9vl8+rPzOPatcnnvQvuGpsvy4qExwl+l1XXKAwBfqrh0qjVXq+dVzRVfKUVVmYUXVRV1aINuTwWWkVy3IM/BsePPGUa+DUjK2HFePRllvjcFux9nbm3u+cPpY6lpJPLQn7PWFfb2xHU3CabZXd+pJoGn1uv61m/KaH4Vieds6khEC2qCCUxEvTzIiIq9FKlukp+1ehmHYNwd+gmJbIeC8Q/DYauIMFxDVC3BEJiLF0OU1oJKawoVAlYixc4jmh4vpy7C3Jd8oSK+jOgorWawIRvDZedjm8B6TrW8exbp0EJtf9C8nyhRoCxgca9os0QR78m/ZLocZPoZZToWZXidxoSZutUIMvb2vxF2h8C0YZIQ6sAAAAAElFTkSuQmCC);
    border-image-slice: 40 40 40 40;
    border-image-width: 40px 40px 40px 40px;
    border-image-outset: 40px 40px 40px 40px;
    border-image-repeat: stretch stretch;
    border-style: solid;
    display: flex;
    flex-direction: column;
    margin: 0 40px;
    position: relative;
    text-align: center;
    justify-content: center;
    grid-row-start: 1;
    font-family: din-pro, Noto Sans, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem
}

.ComingSoon__text {
    position: relative;
    z-index: 99
}

.ComingSoon__text--default {
    color: #fff
}

.ComingSoon__text--default .h1 {
    font-size: 1.5rem;
    text-shadow: 1px 2px 2px black
}

@media (min-width: 992px) {
    .ComingSoon__text--default .h1 {
        font-size: 3.5rem
    }
}

.ComingSoon__text--default .h2 {
    font-size: 2.5rem;
    font-family: Sawarabi Mincho, serif;
    text-shadow: 1px 2px 2px black
}

.ComingSoon__text--default p {
    max-width: 100%;
    text-shadow: 1px 2px 2px black;
    margin: 0
}

@media (min-width: 992px) {
    .ComingSoon__text--default p {
        max-width: 90%
    }
}

.ComingSoon__block--persian {
    border-radius: 40px;
    background: rgba(0, 0, 0, .3);
    padding: 40px;
    border: 1px solid rgba(110, 98, 31, .3);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.Block {
    word-wrap: break-word
}

.Block--transparent {
    background: rgba(29, 29, 29, .15)
}

.Block--transparent .Block__title {
    font-size: 1.2rem;
    font-weight: 400
}

.Block--transparent .Block__title--xs {
    font-size: .8rem
}

.Block--transparent .Block__body {
    color: #fefdff;
    position: relative;
    z-index: 1
}

.Block--transparent .form-label {
    color: #fefdff
}

.Block--outline-primary {
    border: 1px solid #1D1D1D
}

.Block--outline-light {
    border: 1px solid #FEFDFF
}

.Block--outline-subtle {
    border: 1px solid rgb(64, 51, 39)
}

.Block--subtle {
    background: rgba(64, 51, 39, .22)
}

.Block--generic {
    background: #f7f7f7;
    border-radius: 15px;
    padding: 20px
}

.Block--primary, .Block--trackerList {
    position: relative;
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid #1D1D1D
}

.Block--trackerList .Block__image {
    background-size: cover;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url(/build/assets/general-image-mask-599cfc9b.png);
    mask-image: url(/build/assets/general-image-mask-599cfc9b.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    max-width: unset
}

.Block--trackerList .Block__content {
    color: #fefdff
}

.Block--trackerList .Block__spawnTime {
    color: #e1bb80;
    font-size: .8rem
}

.Block--trackerList .Block__charName {
    display: block;
    text-align: center
}

.Block--hasContent {
    padding: 40px
}

.Block--isImageWithFrame {
    position: relative;
    z-index: 2
}

.Block--isImageWithFrame-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: 2
}

.Block--isImageWithFrame-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: 2
}

.Block--isImageWithFrame-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: 2
}

.Block--isImageWithFrame-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: 2
}

.Block--hasFrame {
    position: relative;
    z-index: 2
}

.Block--hasFrame-bottom-left {
    background: url(/build/assets/corner-left-bottom-f7947bb4.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    left: 0;
    z-index: -1
}

.Block--hasFrame-bottom-right {
    background: url(/build/assets/corner-right-bottom-8adc5d2c.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    bottom: 0;
    right: 0;
    z-index: -1
}

.Block--hasFrame-top-right {
    background: url(/build/assets/corner-right-top-16dfafd1.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    right: 0;
    z-index: -1
}

.Block--hasFrame-top-left {
    background: url(/build/assets/corner-left-top-87103a93.svg);
    background-position: 50%;
    background-size: contain;
    height: 94px;
    position: absolute;
    width: 94px;
    top: 0;
    left: 0;
    z-index: -1
}

.Block--main {
    background: #1D1D1D
}

.Block--main .Block__title {
    color: #fefdff
}

.Block--main .Block__body {
    color: #fefdff;
    position: relative;
    z-index: 1
}

.Block--dark {
    background: #05090e
}

.Block--dark .Block__title {
    color: #fefdff
}

.Block--light {
    background: #FEFDFF
}

.Block--light .Block__title {
    color: #1d1d1d
}

.Block--avatar {
    display: flex;
    justify-content: center;
    padding: 20px
}

.Block--kbSearch {
    padding: 60px;
    background-image: url(/build/assets/search-knowledgebase-2c4fc251.png);
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    width: 100%
}

@media (min-width: 1200px) {
    .Block--kbSearch {
        width: 85%;
        margin: 0 auto 60px
    }
}

.Block--kbSearch .Block__title {
    color: #fefdff
}

.Block--kbSearch input {
    background: #16171e;
    border: 1px solid #22293e;
    padding: 25px 30px
}

.Block--armourySearch {
    padding: 60px;
    background-image: url(/build/assets/search-armoury-f10b86c3.png);
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    width: 100%;
    position: relative
}

@media (min-width: 1200px) {
    .Block--armourySearch {
        width: 85%;
        margin: 0 auto 60px
    }
}

.Block--armourySearch .Block__title {
    color: #fefdff
}

.Block--hasShadow {
    box-shadow: #000000bf 0 6px 20px -6px
}

.Block--dirty {
    padding: 20px;
    position: relative;
    background: rgba(11, 10, 8, .41)
}

.Block--hasBackground {
    padding: 20px;
    position: relative
}

.Block--rounded {
    border-radius: 40px
}

.Block--rounded--sm {
    border-radius: 15px
}

.Block--ingame {
    color: #fefdff
}

.Block--adjust-top {
    margin-top: 20px
}

.Block--uniquePoints {
    background-image: url(/build/assets/widget_uniquepoints_bg-e5bdc2b0.png);
    background-size: cover;
    padding: 70px 20px;
    position: relative;
    border-radius: 40px
}

.Block__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 0
}

.Block--lastUniqueInfo {
    padding: 70px 20px;
    position: relative;
    border-radius: 40px
}

.Block--lastUniqueInfo .Block__overlay {
    border-radius: 40px
}

.Block--perk {
    position: relative;
    height: 220px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    padding: 3vw;
    flex-direction: column;
    justify-content: center;
    color: #fff
}

.Block--perk small, .Block--perk .small {
    color: #fff
}

.Block__avatar--user {
    object-fit: cover;
    border-radius: 100%;
    max-width: 100px;
    display: block;
    margin: 0 auto
}

.Block__title {
    position: relative;
    font-size: 1.5rem;
    font-family: Sawarabi Mincho, serif;
    color: #ebdec2;
    font-weight: 700;
    z-index: 2
}

.Block__title--center {
    text-align: center
}

.Block__title--sm {
    font-size: 1rem
}

.Block__title--xs {
    font-size: .8rem
}

.Block__tagline {
    font-family: Outfit, sans-serif;
    color: #d2b475
}

.Block__dot {
    width: 10px;
    height: 10px;
    background: #0A5E5B;
    border-radius: 100%;
    margin-right: 10px
}

.Block__content {
    position: relative;
    z-index: 12
}

.Block__value {
    position: relative;
    z-index: 2;
    display: block;
    text-align: center;
    font-weight: 700;
    color: #ffba00
}

.Block__value--large {
    font-size: 3rem
}

.Block__value--medium {
    font-size: 1.5rem
}

.Block__value--small {
    font-size: .9rem
}

.Block__image {
    position: relative;
    z-index: 2;
    max-width: 150px
}

.Block__image--center {
    margin: 0 auto
}

.Block--ticketReply {
    margin-bottom: 20px
}

.Block--ticketReply-user {
    color: #fefdff;
    background: rgba(14, 36, 38, .26)
}

.Block--ticketReply-support {
    color: #fefdff;
    background: rgba(38, 29, 14, .26)
}

.CharacterCard--7seas {
    border-radius: 15px;
    position: relative;
    overflow: hidden
}

.CharacterCard__info--main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.CharacterCard--light {
    background: #f7f7f7;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px #d9d9d9;
    z-index: 0;
    height: 110px
}

.CharacterCard--light .CharacterCard + __characterName {
    color: #000;
    text-shadow: 0 0 4px black
}

.CharacterCard--dark {
    background: #05090e;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 0 8px #000;
    z-index: 0;
    height: 110px;
    border: 1px solid #1f2c3d
}

.CharacterCard--dark .CharacterCard + __characterName {
    color: #000;
    text-shadow: 0 0 4px black
}

.CharacterCard--dark .CharacterCard__characterName {
    font-size: 1rem;
    font-weight: 700;
    color: #fefdff;
    font-family: Outfit, sans-serif
}

.CharacterCard--dark .CharacterCard__itemPoints, .CharacterCard--dark .CharacterCard__level {
    font-weight: bolder;
    font-size: .9rem;
    color: #fefdff
}

.CharacterCard--dark .CharacterCard__link a {
    font-size: 1.5rem;
    color: #e1bb80;
    transition: .3s
}

.CharacterCard--dark .CharacterCard__link a:hover {
    color: #e1bb80
}

.CharacterCard__characterName {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    font-family: Outfit, sans-serif
}

.CharacterCard__link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.CharacterCard__link a {
    font-size: 1.5rem;
    color: #000;
    transition: .3s
}

.CharacterCard__link a:hover {
    color: #e1bb80
}

.CharacterCard__level {
    font-weight: bolder;
    font-size: .9rem;
    color: #080a0a
}

.CharacterCard__guild {
    display: block
}

.CharacterCard__guild--link a {
    font-weight: 700;
    color: #000;
    transition: .3s;
    font-size: .9rem
}

.CharacterCard__hwanTitle {
    font-size: .9rem;
    color: #ffc107;
    font-weight: 700;
    text-shadow: 0 0 2px #000
}

.CharacterCard__itemPoints {
    font-weight: bolder;
    font-size: .9rem;
    color: #080a0a
}

.CharacterCard__hasCharBackground {
    position: absolute;
    width: 45%;
    overflow: hidden;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0
}

.CharacterCard__hasCharBackground img {
    position: absolute;
    width: 100%;
    z-index: -1
}

.Alert {
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px
}

.Alert a {
    font-weight: 700;
    color: #fefdff;
    text-decoration: none
}

.Alert a:hover {
    text-decoration: underline
}

.Alert--success {
    color: #75b798;
    background: #051b11;
    border: 1px solid #0f5132
}

.Alert--warning {
    color: #ffda6a;
    background: #332701;
    border: 1px solid #997404
}

.Alert--danger {
    color: #ea868f;
    background: #2c0b0e;
    border: 1px solid #842029
}

.Alert--info {
    color: #6edff6;
    background: #032830;
    border: 1px solid #087990
}

.Alert--blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.Alert--dark {
    background: #16171e
}

.Alert--dark a {
    color: #5be9ff;
    text-decoration: none
}

.Alert--dark a:hover {
    text-decoration: underline
}

.Alert--hero {
    position: absolute;
    top: 50px;
    width: 350px;
    font-size: .8rem;
    padding: 0
}

@media (min-width: 1200px) {
    .Alert--hero {
        top: 150px
    }
}

.Alert--small {
    display: block;
    max-height: 100px;
    margin-bottom: 20px;
    padding: 5px 10px
}

.Form--inlineHasButtons {
    display: flex;
    flex-direction: row;
    border: 1px solid grey;
    padding: 1px
}

.Form--inlineHasButtons:focus-within {
    outline: 1px solid blue
}

.Form--inlineHasButtons input {
    flex-grow: 2;
    border: none
}

.Form--inlineHasButtons input:focus {
    outline: none
}

.Form--inlineHasButtons button {
    border: 1px solid blue;
    background: blue;
    color: #fff
}

.Game {
    padding: 0;
    background: url(/build/assets/smoke-163e9237.png)
}

.Game::-webkit-scrollbar {
    width: 15px
}

.Game::-webkit-scrollbar-track {
    background: #1D1D1D
}

.Game::-webkit-scrollbar-thumb {
    background-color: #685634;
    border-radius: 20px;
    border: 3px solid #1D1D1D
}