.section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #f4cc57, #f4cc57)
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .section {
        background-repeat: repeat
    }
}

.section .splash {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    background: linear-gradient(180deg, #f4cc57, #f4cc57)
}

.section .splash img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.section .hidden1 {
    opacity: 0;
    visibility: hidden;
    z-index: -9999;
    animation: hide 2s ease-in
}

@keyframes hide {
    0% {
        opacity: 1;
        visibility: visible;
        z-index: 99999
    }
    99% {
        opacity: 0;
        visibility: hidden;
        z-index: -9999;
        height: 100%;
        width: 100%
    }
}

button:disabled {
    filter: grayscale(1);
    cursor: not-allowed !important
}

.mobile-screen {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.mobile-screen,
.mobile-screen .mobile-screen__close {
    position: absolute;
    background-position: 50%;
    background-repeat: no-repeat
}

.mobile-screen .mobile-screen__close {
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-size: contain
}

.mobile-screen p {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    color: #fff
}

.main {
    margin: 0 auto;
    width: 100%;
    padding-bottom: 56.25%;
    position: relative
}

.main .board__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.main .board__inner .board__body {
    position: relative;
    width: 100%;
    height: 100%
}

.connectModal {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .61);
    z-index: 99;
    display: none;
    opacity: 1
}

.connectModal.active {
    display: flex
}

.connectModal .modelContent {
    z-index: 5;
    width: 22rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    opacity: 1;
    padding: 2rem
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent {
        width: 20rem
    }
}

.connectModal .modelContent .connectWalletHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent .connectWalletHeader {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem
    }
}

.connectModal .modelContent .connectWalletHeader .connectWalletTitle {
    color: #5e4732;
    font-size: 1.8rem;
    padding-left: 20px;
    margin: 0
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent .connectWalletHeader .connectWalletTitle {
        font-size: 1.5rem
    }
}

.connectModal .modelContent .connectWalletHeader .connectModalCloseButton {
    font-size: 2rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    border-radius: 16px;
    cursor: pointer;
    color: #5e4732;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease
}

.connectModal .modelContent .connectWalletHeader .connectModalCloseButton:hover {
    animation: closeAni .5s ease 0s infinite
}

@keyframes closeAni {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(.5rem)
    }
    to {
        transform: translateX(0)
    }
}

.connectModal .modelContent .connectWalletWrapper {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column
}

.connectModal .modelContent .connectWalletWrapper .connectBtn {
    cursor: pointer;
    width: calc(100% - 1rem);
    padding: .5rem;
    display: flex;
    position: relative
}

.connectModal .modelContent .connectWalletWrapper .connectBtn:hover .left .icon img {
    filter: drop-shadow(3px 3px 3px #000)
}

.connectModal .modelContent .connectWalletWrapper .connectBtn:hover .middle h2 {
    text-shadow: 2px 2px 2px #000
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .btn_bg {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .left {
    flex: 0.2 1;
    margin-top: 0;
    z-index: 1
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .left .icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .left .icon {
        width: 3rem;
        height: 3rem
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .left .icon {
        width: 3rem;
        height: 3rem
    }
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .left .icon img {
    width: 80%;
    height: 80%;
    transition: all .3s ease;
    filter: drop-shadow(2px 2px 0 #000)
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .middle {
    flex: 0.8 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 0;
    z-index: 1
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .middle h2 {
    font-size: 1.3rem;
    width: 90%;
    color: #5e4732;
    transition: all .3s ease
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .middle h2 {
        font-size: 1.2rem
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .middle h2 {
        font-size: 1.2rem
    }
}

.connectModal .modelContent .connectWalletWrapper .connectBtn .middle p {
    font-size: 1rem;
    width: 90%;
    color: #5e4732
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .middle p {
        font-size: .8rem
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .connectModal .modelContent .connectWalletWrapper .connectBtn .middle p {
        font-size: .8rem
    }
}

.connectModal .modelContent .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 0
}

.castle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 53%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    width: 18%;
    height: 31%
}

.castle .castle__body {
    width: 70%;
    height: 70%
}

.castle .castle__body .castle__upgrade {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 14%;
    height: 14%;
    cursor: pointer
}

.castle .castle__body .castle__image {
    visibility: hidden;
    width: 0;
    height: 0;
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat
}

.castle .castle__body .castle__image.active {
    width: 110%;
    height: 110%;
    visibility: visible
}

.castle .castle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    height: 20%
}

.castle .castle__btn .main-button {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 100%;
    max-width: 180px;
    border: none;
    cursor: pointer
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .castle .castle__btn .main-button {
        font-size: 8px;
        line-height: 12px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .castle .castle__btn .main-button {
        font-size: 11px;
        line-height: 20px
    }
}

.castle .castle__progress {
    width: 39%;
    height: 8%;
    margin-top: 1px
}

.castle .progress {
    background-color: transparent;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 2% 3%
}

.castle .progress .progress__inner {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(54, 9, 10, 0);
    box-shadow: inset 0 -2px 6px rgba(112, 54, 0, .5686274509803921), inset 0 4px 14px rgba(0, 0, 0, .5686274509803921);
    border-radius: 5px
}

.castle .progress .progress__inner .progress__value {
    position: absolute;
    top: 47%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #5e4732;
    z-index: 5
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .castle .progress .progress__inner .progress__value {
        font-size: 8px;
        line-height: 12px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .castle .progress .progress__inner .progress__value {
        font-size: 11px;
        line-height: 14px
    }
}

.castle .progress .progress__inner .progress__body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #f90;
    box-shadow: inset 0 -2px 0 #a84700, inset 0 2px 0 #fff4bb;
    border-radius: 5px;
    z-index: 4
}

.treasury_modal {
    margin: 0 auto;
    color: #5e4732;
    padding: 60px 39px
}

.treasury_modal .treasury__label {
    font-weight: 400;
    font-size: 40px;
    line-height: 58px;
    text-align: center;
    margin-bottom: 40%
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .treasury_modal .treasury__label {
        margin-bottom: 1rem;
        font-size: 30px
    }
}

.treasury_modal .treasury__your-rate {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    margin: 0 auto 40%
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .treasury_modal .treasury__your-rate {
        margin-bottom: 1rem
    }
}

.treasury_modal .treasury__your-rate .treasury__wrapper {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center
}

.treasury_modal .treasury__your-rate .treasury__wrapper .treasury__icon {
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.treasury_modal .treasury__your-rate .treasury__wrapper .treasury__info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    grid-gap: 5px;
    gap: 5px
}

.treasury_modal .treasury__your-rate .treasury__wrapper .treasury__info span {
    color: #00d856
}

.treasury_modal .main-button {
    min-height: 69px;
    max-width: 150px
}

.treasury_modal .main-button .button__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    font-size: 24px
}

.main-button {
    min-width: auto;
    min-height: auto;
    height: 100%;
    max-width: 169px;
    max-height: 73px;
    padding-bottom: 18px;
    background-size: 100% 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 100%;
    max-width: 180px;
    border: none;
    cursor: pointer
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .main-button {
        font-size: 14px;
        line-height: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .main-button {
        font-size: 14px;
        line-height: 14px
    }
}

.mainModal {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .61);
    z-index: 99;
    display: none;
    opacity: 1
}

.mainModal.active {
    display: flex
}

.mainModal .modelContent {
    width: 80%;
    max-width: 427px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    position: relative;
    border-radius: 12px;
    background-color: transparent
}

.mainModal .modelContent,
.mainModal .modelContent .modal__close {
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.mainModal .modelContent .modal__close {
    position: absolute;
    top: 13px;
    right: 7px;
    width: 68px;
    height: 68px;
    cursor: pointer
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .mainModal .modelContent .modal__close {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .mainModal .modelContent .modal__close {
        width: 50px;
        height: 50px
    }
}

.mainModal .modelContent .modal_wrapper {
    width: calc(100% - 120px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 2;
    padding: 60px
}

.mainModal .modelContent .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0
}

.tower {
    position: absolute;
    width: 8%;
    height: 10%
}

.tower .tower__content {
    position: relative;
    width: 100%;
    height: 100%
}

.tower .tower__content .tower__build {
    position: absolute;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    width: 100%;
    height: 120%;
    z-index: 4;
    right: -35%;
    top: 13%;
    cursor: pointer
}

.tower .tower__content .tower__object {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    right: -34%;
    top: 8%
}

.tower .tower__content .tower__object .tower__upgrade {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translate(-30%, -50%);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    cursor: pointer
}

.tower .tower__content .tower__object .tower__body {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transform: scale(1.5)
}

.tower .tower__content .tower__warriors .tower__warrior-inner {
    width: 100%;
    height: 100%;
    position: relative
}

.tower .tower__content .tower__warriors .tower__warrior-inner .tower__warrior {
    position: absolute;
    width: 45%;
    height: 55%;
    background-repeat: no-repeat;
    background-size: 2000% 100%;
    background-position: 0 50%;
    animation: spriteAnimation 2.6s steps(19) infinite
}

.tower .tower__content .tower__orcs {
    width: 80%;
    height: 80%;
    position: absolute
}

.tower .tower__content .tower__orcs .tower__orc-inner {
    width: 100%;
    height: 100%;
    position: relative
}

.tower .tower__content .tower__orcs .tower__orc-inner .tower__orc {
    position: absolute;
    width: 45%;
    height: 55%;
    background-repeat: no-repeat;
    background-size: 2000% 100%;
    background-position: 0 50%;
    animation: walkAnimation 1.3s steps(19) infinite
}

.tower .tower__content .tower__fight {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 1000% 100%;
    background-position: 50%;
    background-position: 0 50%;
    z-index: 111
}

.tower .hidden {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none
}

.tower-0 {
    top: 20%;
    left: 51%;
    transform: translate(-30%, 10px)
}

.tower-0 .tower__upgrade_lock {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translate(-30%, -50%);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42%;
    height: 42%;
    cursor: pointer
}

.tower-0 .tower__object {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    right: -34%;
    top: 8%
}

.tower-0 .tower__fight {
    top: 31%;
    left: -30%
}

.tower-0 .tower__fight .tower__fight-inner {
    width: 100%;
    height: 100%;
    position: relative
}

.tower-0 .fight {
    animation: spriteAnimation 1.3s steps(9) infinite, fadeAnimation 12s infinite
}

.tower-0 .tower__warriors {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 40%;
    left: 0
}

.tower-0 .tower__warriors .tower__warrior-0 {
    left: 5%;
    top: 10%
}

.tower-0 .tower__warriors .tower__warrior-1 {
    left: 27%;
    top: 10%
}

.tower-0 .tower__warriors .tower__warrior-2 {
    left: 5%;
    top: 40%
}

.tower-0 .tower__warriors .tower__warrior-3 {
    left: 27%;
    top: 40%
}

.tower-0 .tower__warriors .tower__warrior-4 {
    left: 16%;
    top: 71%
}

.tower-0 .tower__orcs {
    width: 80%;
    height: 80%;
    position: absolute;
    top: -90%;
    left: -5%
}

.tower-0 .tower__orcs .tower__orc-4 {
    left: 16%;
    top: 71%
}

.tower-0 .tower__orcs .tower__orc-3 {
    left: 27%;
    top: 40%
}

.tower-0 .tower__orcs .tower__orc-2 {
    left: 5%;
    top: 40%
}

.tower-0 .tower__orcs .tower__orc-1 {
    left: 27%;
    top: 10%
}

.tower-0 .tower__orcs .tower__orc-0 {
    left: 5%;
    top: 10%
}

.tower-0 .orcs {
    animation: fightAnimation-1 12s infinite
}

.tower-1 {
    transform: rotate(270deg);
    top: 32%;
    right: 25%
}

.tower-1 .tower__upgrade_lock {
    position: absolute;
    top: 25%;
    left: 110%;
    transform: rotate(90deg);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42%;
    height: 42%;
    cursor: pointer
}

.tower-1 .tower__build,
.tower-1 .tower__object {
    transform: rotate(90deg)
}

.tower-1 .tower__warriors {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 40%;
    left: -18%;
    transform: rotate(90deg) scaleX(-1) translate(5%, 13%)
}

.tower-1 .tower__warriors .tower__warrior-0 {
    left: 5%;
    top: 10%
}

.tower-1 .tower__warriors .tower__warrior-1 {
    left: 27%;
    top: 10%
}

.tower-1 .tower__warriors .tower__warrior-2 {
    left: 5%;
    top: 40%
}

.tower-1 .tower__warriors .tower__warrior-3 {
    left: 27%;
    top: 40%
}

.tower-1 .tower__warriors .tower__warrior-4 {
    left: 16%;
    top: 71%
}

.tower-1 .tower__fight {
    top: 57%;
    left: -26%;
    transform: rotate(90deg) scaleX(-1) translate(5%, 13%)
}

.tower-1 .fight {
    animation: spriteAnimation 1.3s steps(9) infinite, fadeAnimation-2_4 30s infinite
}

.tower-1 .tower__orcs {
    top: 350%;
    left: 45%;
    transform: rotate(90deg) scaleX(-1)
}

.tower-1 .tower__orcs .tower__orc-3 {
    left: 27%;
    top: 40%
}

.tower-1 .tower__orcs .tower__orc-4 {
    left: 16%;
    top: 71%
}

.tower-1 .tower__orcs .tower__orc-2 {
    left: 5%;
    top: 40%
}

.tower-1 .tower__orcs .tower__orc-1 {
    left: 27%;
    top: 10%
}

.tower-1 .tower__orcs .tower__orc-0 {
    left: 5%;
    top: 10%
}

.tower-1 .orcs {
    animation: fightAnimation-2 30s infinite
}

.tower-2 {
    transform: rotate(331deg);
    bottom: 18%;
    right: 31%
}

.tower-2 .tower__upgrade_lock {
    position: absolute;
    top: -18%;
    left: 70%;
    transform: rotate(30deg);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42%;
    height: 42%;
    cursor: pointer
}

.tower-2 .tower__build,
.tower-2 .tower__object {
    transform: rotate(30deg)
}

.tower-2 .tower__warriors {
    width: 80%;
    height: 80%;
    position: absolute;
    top: -50%;
    left: -60%;
    transform: rotate(-30deg) translate(-110%, -85%) scaleXY(-1) scaleXZ(-1)
}

.tower-2 .tower__warriors .tower__warrior-0 {
    left: 5%;
    top: 10%
}

.tower-2 .tower__warriors .tower__warrior-1 {
    left: 27%;
    top: 10%
}

.tower-2 .tower__warriors .tower__warrior-2 {
    left: 5%;
    top: 40%
}

.tower-2 .tower__warriors .tower__warrior-3 {
    left: 27%;
    top: 40%
}

.tower-2 .tower__warriors .tower__warrior-4 {
    left: 16%;
    top: 71%
}

.tower-2 .tower__fight {
    top: 74%;
    left: -20%;
    transform: rotate(30deg) translate(-95%, -75%) scaleX(-1)
}

.tower-2 .fight {
    animation: spriteAnimation 1.3s steps(9) infinite, fadeAnimation-2_1 15s infinite
}

.tower-2 .tower__orcs {
    top: 66%;
    right: 100%;
    transform: rotate(30deg) scaleX(-1)
}

.tower-2 .tower__orcs .tower__orc-3 {
    left: 27%;
    top: 40%
}

.tower-2 .tower__orcs .tower__orc-4 {
    left: 16%;
    top: 71%
}

.tower-2 .tower__orcs .tower__orc-2 {
    left: 5%;
    top: 40%
}

.tower-2 .tower__orcs .tower__orc-1 {
    left: 5%;
    top: 10%
}

.tower-2 .tower__orcs .tower__orc-0 {
    left: 27%;
    top: 10%
}

.tower-2 .orcs {
    animation: fightAnimation-3 15s infinite
}

.tower-3 {
    transform: rotate(210deg);
    bottom: 17%;
    left: 30%
}

.tower-3 .tower__upgrade_lock {
    position: absolute;
    top: 98%;
    right: -45%;
    transform: rotate(150deg);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42%;
    height: 42%;
    cursor: pointer
}

.tower-3 .tower__build,
.tower-3 .tower__object {
    transform: rotate(150deg)
}

.tower-3 .tower__warriors {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 45%;
    left: -45%;
    transform: rotate(150deg) translate(57%, -33%)
}

.tower-3 .tower__warriors .tower__warrior-0 {
    left: 5%;
    top: 10%
}

.tower-3 .tower__warriors .tower__warrior-1 {
    left: 27%;
    top: 10%
}

.tower-3 .tower__warriors .tower__warrior-2 {
    left: 5%;
    top: 40%
}

.tower-3 .tower__warriors .tower__warrior-3 {
    left: 27%;
    top: 40%
}

.tower-3 .tower__warriors .tower__warrior-4 {
    left: 16%;
    top: 71%
}

.tower-3 .tower__fight {
    top: 0;
    left: -20%;
    transform: rotate(150deg) translate(57%, -33%)
}

.tower-3 .fight {
    animation: spriteAnimation 1.3s steps(9) infinite, fadeAnimation-2_5 15s infinite
}

.tower-3 .tower__orcs {
    top: -66%;
    left: -71%;
    transform: rotate(150deg)
}

.tower-3 .tower__orcs .tower__orc-3 {
    left: 27%;
    top: 40%
}

.tower-3 .tower__orcs .tower__orc-4 {
    left: 16%;
    top: 71%
}

.tower-3 .tower__orcs .tower__orc-2 {
    left: 5%;
    top: 40%
}

.tower-3 .tower__orcs .tower__orc-1 {
    left: 27%;
    top: 10%
}

.tower-3 .tower__orcs .tower__orc-0 {
    left: 5%;
    top: 10%
}

.tower-3 .orcs {
    animation: fightAnimation-4 15s infinite
}

.tower-4 {
    transform: rotate(290deg);
    top: 30%;
    left: 18%
}

.tower-4 .tower__upgrade_lock {
    position: absolute;
    top: 10%;
    right: -45%;
    transform: rotate(70deg);
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42%;
    height: 42%;
    cursor: pointer
}

.tower-4 .tower__build,
.tower-4 .tower__object {
    transform: rotate(69deg)
}

.tower-4 .tower__warriors {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 45%;
    left: -15%;
    transform: rotate(69deg) translate(9%, 18%)
}

.tower-4 .tower__warriors .tower__warrior-0 {
    left: 5%;
    top: 10%
}

.tower-4 .tower__warriors .tower__warrior-1 {
    left: 27%;
    top: 10%
}

.tower-4 .tower__warriors .tower__warrior-2 {
    left: 5%;
    top: 40%
}

.tower-4 .tower__warriors .tower__warrior-3 {
    left: 27%;
    top: 40%
}

.tower-4 .tower__warriors .tower__warrior-4 {
    left: 16%;
    top: 71%
}

.tower-4 .tower__fight {
    top: -47%;
    left: -78%;
    transform: rotate(69deg) translate(57%, -33%)
}

.tower-4 .fight {
    animation: spriteAnimation 1.3s steps(9) infinite, fadeAnimation-2_4 20s infinite
}

.tower-4 .tower__orcs {
    top: -222%;
    left: -20%;
    transform: rotate(69deg)
}

.tower-4 .tower__orcs .tower__orc-inner {
    width: 100%;
    height: 100%;
    position: relative
}

.tower-4 .tower__orcs .tower__orc-inner .tower__orc-3 {
    left: 27%;
    top: 40%
}

.tower-4 .tower__orcs .tower__orc-inner .tower__orc-4 {
    left: 16%;
    top: 71%
}

.tower-4 .tower__orcs .tower__orc-inner .tower__orc-2 {
    left: 5%;
    top: 40%
}

.tower-4 .tower__orcs .tower__orc-inner .tower__orc-1 {
    left: 27%;
    top: 10%
}

.tower-4 .tower__orcs .tower__orc-inner .tower__orc-0 {
    left: 5%;
    top: 10%
}

.tower-4 .orcs {
    animation: fightAnimation-5 20s infinite
}

.tower-upgrade .tower-upgrade_modal {
    padding: 60px 39px;
    margin: 0 auto;
    color: #5e4732;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal {
        padding: 60px 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal {
        padding: 5%
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__label {
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__level {
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__level {
        font-size: 14px
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    width: 80%;
    min-width: 200px;
    margin: 13px auto 0
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate {
        font-size: 18px;
        grid-gap: 0;
        gap: 0;
        margin-top: 5px;
        flex-direction: row
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper {
        margin-top: 0;
        margin-left: 10px
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__icon {
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__icon {
        display: none
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__icon img {
    width: 50px;
    height: 50px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__icon img {
        width: 40px;
        height: 40px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__info {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__info {
        font-size: 18px
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__your-rate .tower-upgrade__wrapper .tower-upgrade__info span {
    color: #00d856
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns {
    margin-top: 30px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__btns {
        margin-top: 10px;
        margin-bottom: 10px
    }
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button {
    min-height: 69px;
    max-width: 150px
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button .button__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 0
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button .button__wrapper h5 {
    font-size: 24px;
    line-height: 1;
    font-weight: 400
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button .button__wrapper p {
    font-size: 14px;
    line-height: 1
}

.tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button .button__wrapper img {
    width: 20px;
    height: 20px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .tower-upgrade .tower-upgrade_modal .tower-upgrade__btns .main-button .button__wrapper img {
        width: 20px;
        height: 20px
    }
}

@keyframes spriteAnimation {
    0% {
        background-position: 0 0
    }
    50% {
        background-position: 100% 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes fightAnimation-1 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        top: 40%
    }
    95% {
        opacity: 1
    }
    to {
        top: 40%;
        opacity: 0
    }
}

@keyframes fightAnimation-2 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        top: 40%;
        left: -23%
    }
    95% {
        opacity: 1
    }
    to {
        top: 40%;
        left: -13%;
        opacity: 0
    }
}

@keyframes fightAnimation-3 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        top: -74%;
        right: 100%
    }
    95% {
        opacity: 1
    }
    to {
        top: -74%;
        right: 100%;
        opacity: 0
    }
}

@keyframes fightAnimation-4 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        top: 72%;
        left: -60%
    }
    95% {
        opacity: 1
    }
    to {
        top: 72%;
        left: -60%;
        opacity: 0
    }
}

@keyframes fightAnimation-5 {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1
    }
    80% {
        top: 53%;
        left: -20%
    }
    95% {
        opacity: 1
    }
    to {
        top: 53%;
        left: -20%;
        opacity: 0
    }
}

@keyframes walkAnimation {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

@keyframes fadeAnimation {
    0% {
        opacity: 0
    }
    25% {
        opacity: 0
    }
    30% {
        opacity: 1
    }
    97% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeAnimation-2_1 {
    0% {
        opacity: 0
    }
    30% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    97% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeAnimation-2_4 {
    0% {
        opacity: 0
    }
    35% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    97% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeAnimation-2_5 {
    0% {
        opacity: 0
    }
    35% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    95% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.top-bar {
    position: absolute;
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translate(-50%)
}

.top-bar .top-bar__content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    grid-gap: 20px;
    gap: 20px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content {
        grid-gap: 10px;
        gap: 10px
    }
}

.top-bar .top-bar__content .label {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    font-family: "Minako";
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 29px;
    color: #5e4732;
    background-color: transparent;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 12px 20px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content .label {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-gap: 10px;
        gap: 10px;
        padding: 10px 12px
    }
}

.top-bar .top-bar__content .label span {
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content .label span {
        font-size: 14px;
        line-height: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .top-bar .top-bar__content .label span {
        font-size: 14px;
        line-height: 14px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content .label img {
        width: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .top-bar .top-bar__content .label img {
        width: 16px
    }
}

.top-bar .top-bar__content .label button {
    background-color: hsla(0, 0%, 100%, 0);
    border: none;
    cursor: pointer;
    padding: 0
}

.top-bar .top-bar__content .label button img {
    transition: all .3s ease
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content .label button img {
        width: 18px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .top-bar .top-bar__content .label button img {
        width: 18px
    }
}

.top-bar .top-bar__content .label button:hover img {
    filter: drop-shadow(0 0 5px #fff)
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .top-bar .top-bar__content .top-bar__wrapper {
        position: relative
    }
}

.top-bar .top-bar__content .top-bar__element {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;
    gap: 10px;
    padding: 10px 12px
}

.top-bar .top-bar__content .top-bar__rate {
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .49019607843137253);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25098039215686274), inset 0 4px 14px rgba(0, 0, 0, .5686274509803921);
    border-radius: 10px;
    margin-top: 5px;
    padding: 5px 11px;
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .top-bar .top-bar__content .top-bar__rate {
        font-size: 14px;
        line-height: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .top-bar .top-bar__content .top-bar__rate {
        font-size: 14px;
        line-height: 14px;
        position: absolute;
        right: -70%;
        top: 0
    }
}

.buy_cristal {
    margin: 0 auto;
    color: #5e4732;
    padding: 60px 90px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal {
        padding: 60px 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal {
        padding: 5% 80px
    }
}

.buy_cristal .buy__title {
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    color: #5e4732;
    margin-bottom: 2rem
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__title {
        font-size: 32px;
        margin-bottom: 1rem
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__title {
        font-size: 32px;
        margin-bottom: 10px
    }
}

.buy_cristal .buy__converter {
    display: block;
    width: 100%
}

.buy_cristal .buy__converter .buy__item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 20px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__converter .buy__item {
        margin-bottom: 0
    }
}

.buy_cristal .buy__converter .buy__item label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__converter .buy__item label {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__converter .buy__item label {
        font-size: 14px
    }
}

.buy_cristal .buy__converter .buy__item .buy__balance {
    flex: 1 1;
    text-align: right
}

.buy_cristal .buy__converter .buy__item input {
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 19px;
    color: #fff;
    padding: 10px;
    text-align: right;
    border: none;
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__converter .buy__item input {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__converter .buy__item input {
        font-size: 14px
    }
}

.buy_cristal .buy__converter .buy__item input[type=number]::-webkit-inner-spin-button,
.buy_cristal .buy__converter .buy__item input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.buy_cristal .buy__converter .buy__image {
    margin-top: 20px;
    margin-bottom: 1px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__converter .buy__image {
        display: none
    }
}

.buy_cristal .buy__converted {
    margin-top: 0;
    margin-bottom: 80px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__converted {
        margin-bottom: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .buy_cristal .buy__converted {
        margin-bottom: 10px
    }
}

.buy_cristal .buy__converted p {
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__converted p {
        font-size: 14px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .buy_cristal .buy__converted img {
        width: 18px
    }
}

.buy_cristal .main-button {
    font-size: 20px;
    min-height: 69px;
    max-width: 180px
}

.withdraw_modal {
    margin: 0 auto;
    color: #5e4732;
    padding: 60px 69px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal {
        padding: 60px 20px
    }
}

.withdraw_modal .withdraw__label {
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdraw__label {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__label {
        font-size: 32px;
        line-height: 40px
    }
}

.withdraw_modal .withdraw__rate {
    display: flex;
    justify-content: center;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    margin-bottom: 16px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdraw__rate {
        font-size: 18px;
        line-height: 24px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__rate {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 0
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdraw__rate img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__rate img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__image {
        display: none
    }
}

.withdraw_modal .withdraw__image img {
    margin: 0 auto
}

.withdraw_modal .withdraw__your-rate {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    margin: 0 auto 22px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdraw__your-rate {
        font-size: 18px;
        line-height: 24px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__your-rate {
        font-size: 18px;
        line-height: 24px
    }
}

.withdraw_modal .withdraw__your-rate .withdraw__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 5px;
    gap: 5px
}

.withdraw_modal .withdraw__your-rate .withdraw__wrapper img {
    width: 29px;
    height: 29px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdraw__your-rate .withdraw__wrapper img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__your-rate .withdraw__wrapper img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdraw__btns {
        display: flex;
        align-items: center
    }
}

.withdraw_modal .main-button {
    font-size: 20px;
    min-height: 69px;
    max-width: 180px
}

.withdraw_modal .withdrawBtn {
    font-size: 24px;
    margin-bottom: 20px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .withdrawBtn {
        font-size: 18px;
        line-height: 24px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .withdraw_modal .withdrawBtn {
        margin-bottom: 0
    }
}

.withdraw_modal .retreatBtn {
    font-size: 20px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .withdraw_modal .retreatBtn {
        font-size: 18px;
        line-height: 24px
    }
}

.sell {
    max-width: 887px !important
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell {
        max-width: 427px !important
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell {
        max-width: 427px !important
    }
}

.sell .sell_modal {
    margin: 0 auto;
    color: #5e4732;
    padding: 0 106px 106px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal {
        padding: 60px 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal {
        padding: 5%
    }
}

.sell .sell_modal .sell__image {
    width: 60%;
    margin: -120px auto 0
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__image {
        display: none
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__image {
        display: none
    }
}

.sell .sell_modal .sell__image img {
    max-width: 100%;
    display: block
}

.sell .sell_modal .sell__text {
    font-weight: 400;
    font-size: 64px;
    line-height: 77px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__text {
        font-size: 32px;
        line-height: 30px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__text {
        font-size: 24px;
        line-height: 30px
    }
}

.sell .sell_modal .sell__info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 5px;
    gap: 5px;
    margin-top: 40px;
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__info {
        font-size: 18px;
        line-height: 24px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__info {
        font-size: 16px;
        line-height: 24px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__info img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__info img {
        width: 20px;
        height: 20px
    }
}

.sell .sell_modal .sell__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 36px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__btns {
        flex-direction: column
    }
}

.sell .sell_modal .sell__btns .main-button {
    font-size: 20px;
    min-height: 69px;
    max-width: 180px
}

.sell .sell_modal .sell__btns .okBtn {
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__btns .okBtn {
        font-size: 20px;
        margin-bottom: 10px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__btns .okBtn {
        font-size: 20px
    }
}

.sell .sell_modal .sell__btns .cancelBtn {
    font-size: 20px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sell .sell_modal .sell__btns .cancelBtn {
        font-size: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sell .sell_modal .sell__btns .cancelBtn {
        font-size: 20px
    }
}

.infobar {
    position: absolute;
    left: 2%;
    bottom: 2%
}

.infobar .infobar__content {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    grid-gap: 5px;
    gap: 5px
}

.infobar .infobar__content .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, .49019607843137253);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25098039215686274), inset 0 4px 14px rgba(0, 0, 0, .5686274509803921);
    border-radius: 10px;
    padding: 10px 20px;
    font-family: "Minako";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #fff
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .infobar .infobar__content .info {
        font-size: 18px;
        line-height: 23px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .infobar .infobar__content .info {
        font-size: 12px;
        padding: 5px
    }
}

.infobar .infobar__content .info .info__title {
    margin-right: 30px
}

.sidebar {
    position: absolute;
    bottom: 2%;
    right: 2%
}

.sidebar .nav {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    grid-gap: 10px;
    gap: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sidebar .nav {
        grid-gap: 0;
        gap: 0
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sidebar .nav {
        grid-gap: 0;
        gap: 0
    }
}

.sidebar .nav .nav__item {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 155px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sidebar .nav .nav__item {
        width: 75px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sidebar .nav .nav__item {
        width: 90px;
        margin-top: 2px
    }
}

.sidebar .nav .nav__item .nav__icon {
    width: 110px;
    height: 110px;
    border-radius: 19px;
    margin-bottom: -15px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sidebar .nav .nav__item .nav__icon {
        width: 70px;
        height: 70px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sidebar .nav .nav__item .nav__icon {
        display: none
    }
}

.sidebar .nav .nav__item .nav__icon img {
    max-width: 100%;
    display: block
}

.sidebar .nav .nav__item .label {
    width: calc(100% - 40px);
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 29px;
    color: #5e4732;
    background-color: transparent;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .sidebar .nav .nav__item .label {
        width: calc(100% - 24px);
        font-size: 14px;
        line-height: 11px;
        padding: 10px 12px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .sidebar .nav .nav__item .label {
        width: calc(100% - 24px);
        font-size: 18px;
        line-height: 18px;
        padding: 10px 12px
    }
}

.sidebar .nav .nav__item .clickable {
    transition: all .3s ease;
    transform: scale(.8)
}

.partner {
    max-width: 887px !important
}

.partner .partner_modal {
    margin: 0 auto;
    color: #5e4732;
    padding: 101px 106px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal {
        padding: 60px 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal {
        padding: 5%
    }
}

.partner .partner_modal .partner__text {
    font-weight: 400;
    font-size: 48px;
    line-height: 57px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__text {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__text {
        font-size: 32px;
        line-height: 40px
    }
}

.partner .partner_modal .partner__info {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 15px;
    gap: 15px;
    margin-top: 27px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__info {
        flex-direction: column;
        margin-top: 10px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__info {
        flex-direction: column;
        margin-top: 10px
    }
}

.partner .partner_modal .partner__info .partner__link {
    flex: 1 1;
    background: rgba(0, 0, 0, .5019607843137255);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 19px;
    padding: 10px 20px;
    border: none;
    font-weight: 400;
    font-size: 36px;
    line-height: 43px;
    color: #fff;
    font-size: 18px;
    line-height: 24px
}

.partner .partner_modal .partner__info .main-button {
    min-height: 69px;
    font-size: 32px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__info .main-button {
        font-size: 18px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__info .main-button {
        font-size: 20px
    }
}

.partner .partner_modal .partner__details {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    color: #5e4732;
    margin-top: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__details {
        margin-top: 10px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__details {
        margin-top: 10px
    }
}

.partner .partner_modal .partner__statistic {
    margin-top: 30px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__statistic {
        margin-top: 10px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__statistic {
        margin-top: 10px
    }
}

.partner .partner_modal .partner__statistic h3 {
    font-size: 24px;
    line-height: 32px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__statistic h3 {
        font-size: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__statistic h3 {
        font-size: 20px
    }
}

.partner .partner_modal .partner__statistic .statistic__content {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 60px;
    gap: 60px;
    margin-top: 29px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .partner .partner_modal .partner__statistic .statistic__content {
        font-size: 18px;
        flex-direction: column;
        align-items: flex-start;
        grid-gap: 5px;
        gap: 5px;
        margin: 0 auto
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .partner .partner_modal .partner__statistic .statistic__content {
        margin-top: 10px
    }
}

.partner .partner_modal .partner__statistic .statistic__content .statistic__item {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 15px;
    gap: 15px
}

.partner .partner_modal .partner__statistic .statistic__content .statistic__item .statistic__image {
    width: auto;
    height: auto;
    padding: 9px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px
}

.partner .partner_modal .partner__statistic .statistic__content .statistic__item .statistic__image img {
    width: 29px;
    height: 29px
}

.partner .partner_modal .partner__statistic .statistic__content .statistic__item p {
    font-size: 18px;
    line-height: 24px
}

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

.loader-div {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center
}

.loader-div p {
    font-size: MIN(25px, 2.5vw)
}

@media screen and (max-width:576px) and (orientation:portrait) {
    .loader-div p {
        font-size: 18px
    }
}

.spinner-box {
    margin-top: 5%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5019607843137255);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 10px
}

.three-quarter-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .5s linear 0s infinite
}

.market {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 30%;
    left: 39%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 20%
}

.market .market__body {
    width: 100%;
    height: 100%
}

.market .market__body .market__upgrade {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translate(-50%);
    width: 21%;
    height: 21%
}

.market .market__body .market__image,
.market .market__body .market__upgrade {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer
}

.market .market__body .market__image {
    visibility: hidden;
    width: 0;
    height: 0
}

.market .market__body .market__image.active {
    width: 100%;
    height: 100%;
    visibility: visible
}

.market-upgrade .market-upgrade_modal {
    padding: 60px 39px;
    margin: 0 auto;
    color: #5e4732;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal {
        padding: 60px 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal {
        padding: 5%
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__label {
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__level {
    font-size: 28px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__level {
        font-size: 18px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__level {
        font-size: 22px
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__your-rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    width: 70%;
    min-width: 200px;
    margin: 13px auto 0
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate {
        font-size: 18px;
        grid-gap: 0;
        gap: 0;
        width: 40%;
        margin-top: 5px;
        flex-direction: row
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper {
        margin-top: 0;
        margin-left: 10px
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__icon {
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__icon {
        display: none
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__icon img {
    width: 50px;
    height: 50px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__icon img {
        width: 40px;
        height: 40px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__info {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__info {
        font-size: 18px
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__your-rate .market-upgrade__wrapper .market-upgrade__info span {
    color: #00d856
}

.market-upgrade .market-upgrade_modal .market-upgrade__btns {
    margin-top: 30px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .market-upgrade .market-upgrade_modal .market-upgrade__btns {
        margin-top: 10px;
        margin-bottom: 10px
    }
}

.market-upgrade .market-upgrade_modal .market-upgrade__btns .main-button {
    min-height: 69px;
    max-width: 150px
}

.market-upgrade .market-upgrade_modal .market-upgrade__btns .main-button .button__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .market-upgrade .market-upgrade_modal .market-upgrade__btns .main-button .button__wrapper img {
        width: 20px;
        height: 20px
    }
}

.airDrop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 14%;
    right: 17%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 28%
}

.airDrop .airDrop__body {
    width: 100%;
    height: 100%
}

.airDrop .airDrop__body .airDrop__image {
    visibility: hidden;
    width: 0;
    height: 0;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer
}

.airDrop .airDrop__body .airDrop__image.active {
    width: 100%;
    height: 100%;
    visibility: visible
}

.airDrop-upgrade {
    max-width: 687px !important
}

.airDrop-upgrade .airDrop-upgrade_modal {
    max-width: 687px !important;
    padding: 60px 49px;
    margin: 0 auto;
    color: #5e4732;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal {
        padding: 60px 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal {
        padding: 5%
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__label {
    font-weight: 400;
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    margin-bottom: 1rem
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__label {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 0
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__level {
    font-size: 28px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__level {
        font-size: 18px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__level {
        font-size: 22px
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    width: 90%;
    min-width: 200px;
    margin: 13px auto 0
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate {
        font-size: 18px;
        grid-gap: 0;
        gap: 0;
        margin-top: 0;
        width: 80%
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .label {
    font-size: 25px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .label {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .label {
        font-size: 18px
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper {
        margin-top: 0;
        margin-left: 10px
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__icon {
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__icon {
        display: none
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__icon img {
    width: 50px;
    height: 50px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__icon img {
        width: 40px;
        height: 40px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__info {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__info {
        font-size: 18px
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .airDrop-upgrade__wrapper .airDrop-upgrade__info span {
    color: #00d856
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .main-button {
    min-height: 69px;
    max-width: 150px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .main-button {
        min-height: 49px;
        max-width: 100px
    }
}

.airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .main-button .button__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    font-size: 24px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .airDrop-upgrade .airDrop-upgrade_modal .airDrop-upgrade__your-rate .main-button .button__wrapper img {
        width: 20px;
        height: 20px
    }
}

@font-face {
    font-family: Minako-Regular;
    src: url(/static/media/IMFellEnglishSC-Regular.8e2b617a.ttf)
}

.stable {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 25%
}

.stable .stable__body {
    width: 100%;
    height: 100%
}

.stable .stable__body .stable__upgrade {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%);
    width: 17%;
    height: 17%
}

.stable .stable__body .stable__image,
.stable .stable__body .stable__upgrade {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer
}

.stable .stable__body .stable__image {
    visibility: hidden;
    width: 0;
    height: 0
}

.stable .stable__body .stable__image.active {
    width: 100%;
    height: 100%;
    visibility: visible
}

.stable-upgrade {
    max-width: 687px !important
}

.stable-upgrade .stable-upgrade_modal {
    padding: 60px 39px;
    margin: 0 auto;
    color: #5e4732;
    text-align: center
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal {
        padding: 60px 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal {
        padding: 5%
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__label {
    font-weight: 400;
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    margin-bottom: 1rem
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__label {
        font-size: 32px;
        line-height: 40px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__label {
        font-size: 32px;
        line-height: 40px;
        padding-left: 2rem;
        padding-right: 2rem;
        text-align: center
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__level {
    font-size: 28px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__level {
        font-size: 18px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__level {
        font-size: 22px
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-gap: 5px;
    gap: 5px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    width: 100%;
    min-width: 200px;
    margin-top: 13px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate {
        font-size: 18px;
        grid-gap: 0;
        gap: 0;
        margin-top: 5px;
        flex-direction: row
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .label {
    display: none
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .label {
        display: flex
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper {
        margin-top: 0;
        margin-left: 10px
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__icon {
    width: 68px;
    height: 68px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 4px 10px #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__icon {
        display: none
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__icon img {
    width: 50px;
    height: 50px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__icon img {
        width: 40px;
        height: 40px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__info {
        font-size: 14px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__info {
        font-size: 18px
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__your-rate .stable-upgrade__wrapper .stable-upgrade__info span {
    color: #00d856
}

.stable-upgrade .stable-upgrade_modal .stable__progress {
    width: 150px;
    height: 20px;
    margin: 10px auto
}

.stable-upgrade .stable-upgrade_modal .progress {
    background-color: transparent;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 8px
}

.stable-upgrade .stable-upgrade_modal .progress .progress__inner {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(54, 9, 10, 0);
    box-shadow: inset 0 -2px 6px rgba(112, 54, 0, .5686274509803921), inset 0 4px 14px rgba(0, 0, 0, .5686274509803921);
    border-radius: 5px
}

.stable-upgrade .stable-upgrade_modal .progress .progress__inner .progress__value {
    position: absolute;
    top: 47%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #5e4732;
    z-index: 5
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .progress .progress__inner .progress__value {
        font-size: 8px;
        line-height: 12px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .progress .progress__inner .progress__value {
        font-size: 11px;
        line-height: 14px
    }
}

.stable-upgrade .stable-upgrade_modal .progress .progress__inner .progress__body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #f90;
    box-shadow: inset 0 -2px 0 #a84700, inset 0 2px 0 #fff4bb;
    border-radius: 5px;
    z-index: 4
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__btns {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 5px;
    gap: 5px
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__btns {
        margin-top: 10px;
        margin-bottom: 10px
    }
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button {
    min-height: 69px;
    max-width: 150px
}

.stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button .button__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    font-size: 32px
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button .button__wrapper {
        font-size: 16px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button .button__wrapper {
        font-size: 16px
    }
}

@media screen and (max-width:450px) and (orientation:portrait) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button .button__wrapper img {
        width: 20px;
        height: 20px
    }
}

@media screen and (max-height:450px) and (orientation:landscape) {
    .stable-upgrade .stable-upgrade_modal .stable-upgrade__btns .main-button .button__wrapper img {
        width: 20px;
        height: 20px
    }
}

/*# sourceMappingURL=main.4c7d284b.chunk.css.map */