@font-face {
    font-family: 'Arial';
    src: url('./ArialMT.eot');
    src: local('Arial'), local('ArialMT'), url('./ArialMT.eot?#iefix') format('embedded-opentype'), url('./ArialMT.woff2') format('woff2'),
        url('./ArialMT.woff') format('woff'), url('./ArialMT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    font-family: 'Arial';
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    display: block;
    margin: 0;
    padding: 0;
}

:root {
    --c-background: #003b00;
    --c-sber-links: #fff200;
    --c-main: #ffffff;
    --c-button-gradient: rgb(5 94 3);
    --c-button-gradient2: rgb(62 200 0);
    --c-button-border: #ffefc8;
    --c-sber-links-shadow: rgba(41, 91, 1, 0.82);
    --c-sber-notice-bg: #015a0a;
}

body {
    background: var(--c-background);
    color: var(--c-main);
    font-family: 'Arial', sans-serif;
    font-size: 22px;
}

img {
    vertical-align: middle;
    border: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a,
span,
div,
input,
button {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

:active,
:hover,
:focus {
    outline: 0;
    outline-offset: 0;
}

.container {
    max-width: 480px;
    height: 100vh;
    min-height: 700px;
    margin: 0 auto;
    background: var(--c-container-bg);
    position: relative;
    overflow: hidden;
}

.landing-notice.sber-notice h2 {
    text-align: center;
    margin: 15px auto;
    font-weight: bold;
    font-size: 33px;
}

.landing-notice {
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 90%;
    position: absolute;
    top: 1%;
    left: 5%;
    z-index: 3;
    display: none;
    overflow: hidden;
    margin-top: 50px;
}

.landing-notice-description {
    position: relative;
    text-align: center;
    margin: auto;
    margin-bottom: 2%;
}

.landing-notice-agreement,
.landing-notice-confidentiality {
    position: relative;
    margin-top: 15px;
    color: var(--c-sber-links);
    text-align: left;
    display: block;
    font-weight: bold;
}

.landing-notice-button {
    text-align: center;
}

.landing-notice-button a {
    /* background-image: url('button.png'); */
    /* background-size: 100% auto; */
    /* background-repeat: no-repeat; */
    width: 45%;
    height: 85px;
    cursor: pointer;
    position: relative;
    margin: 6% auto;
    background: linear-gradient(0deg, var(--c-button-gradient) 0%, var(--c-button-gradient2) 100%);
    border: 8px solid var(--c-button-border);
    border-radius: 20px;
    box-sizing: border-box;
    filter: drop-shadow(0px 4px 6px black);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;
    color: var(--c-main);
    text-decoration: none;
}

.notice-show .landing-notice {
    display: block;
}

.sber-links {
    width: 90%;
    margin: 0 auto;
    color: var(--c-sber-links);
    font-weight: 700;
    font-size: 22px;
    line-height: 121.4%;
    text-shadow: 0px 4px 30px var(--c-sber-links-shadow);
}

.sber-notice .landing-notice-description {
    font-weight: 400;
    font-size: 22px;
    line-height: 121.4%;
    width: 85%;
}

.sb-hide .landing-notice-description {
    display: none;
}

.sb-hide .sber-links {
    display: none;
}

.sb-hide .landing-notice-button {
    display: none;
}

.landing-notice.sber-notice {
    width: 95%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background-color: var(--c-sber-notice-bg);
    border-radius: 20px;
    filter: drop-shadow(0px 4px 6px black);
}

.sber-notice .landing-notice-button a {
    background-size: auto 100%;
    background-position: center;
}

.sber-check {
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    z-index: 1;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAMFBMVEUAAAAAAAD/8gD16AAvLAD/7wD/8QD/8gCbkgCHfgD/7wD/7wD/8wD/8QD/8gD/8gDiSL58AAAAD3RSTlNMAJDpVxDP34R5QCDPoJ9bYcwhAAAAjUlEQVQ4y2MQFFxU/x8NfHstKMggGPQfC1AVZBA9j03iWyCD0H+sQJFh///PUxjQAIf9/18M9/+bMGAA5/+fGM7/b8CU4Pz/neH/fwZMwAIUxSrBMCoxKjEqAZFwwC5R/38CpjjH/28M+tgz5z+G9f8/Y+ROT/v/v3EXAKL52IsM3IWMoOBeDD3ftQQFAdT9Sf0vJtElAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    left: 0;
}

.sber-check-grup a {
    display: inline;
}

.sber-check-grup {
    display: block;
    position: relative;
    margin-top: 15px;
    text-align: left;
    padding-left: 35px;
}

.sber-check._sb-check {
    background: url('data:image/png;base64,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'),
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAMFBMVEUAAAAAAAD/8gD16AAvLAD/7wD/8QD/8gCbkgCHfgD/7wD/7wD/8wD/8QD/8gD/8gDiSL58AAAAD3RSTlNMAJDpVxDP34R5QCDPoJ9bYcwhAAAAjUlEQVQ4y2MQFFxU/x8NfHstKMggGPQfC1AVZBA9j03iWyCD0H+sQJFh///PUxjQAIf9/18M9/+bMGAA5/+fGM7/b8CU4Pz/neH/fwZMwAIUxSrBMCoxKjEqAZFwwC5R/38CpjjH/28M+tgz5z+G9f8/Y+ROT/v/v3EXAKL52IsM3IWMoOBeDD3ftQQFAdT9Sf0vJtElAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%, 80%;
}

a.disabled {
    pointer-events: none;
    opacity: 50%;
}

@media screen and (max-width: 480px) {
    .landing-notice.sber-notice h2 {
        margin: calc(100vw / (480 / 15)) auto;
        font-size: calc(100vw / (480 / 33));
    }

    .sber-notice .landing-notice-description {
        font-size: calc(100vw / (480 / 22));
    }

    .landing-notice.sber-notice {
        height: calc(100vw / (480 / 600));
    }

    .landing-notice {
        margin-top: calc(100vw / (480 / 50));
    }

    .sber-links {
        font-size: calc(100vw / (480 / 22));
        margin-top: calc(100vw / (480 / 15));
        line-height: 121.4%;
    }

    .sber-links a {
        margin-top: calc(100vw / (480 / 15));
    }

    .sber-notice .landing-notice-button a {
        height: calc(100vw / (480 / 85));
        border-radius: calc(100vw / (480 / 20));
        font-size: calc(100vw / (480 / 35));
        border: calc(100vw / (480 / 8)) solid #ffefc8;
    }

    .sber-check {
        width: calc(100vw / (480 / 26));
        height: calc(100vw / (480 / 26));
    }

    .sber-check-grup {
        margin-top: calc(100vw / (480 / 15));
        padding-left: calc(100vw / (480 / 35));
    }
}

.loading {
    display: block;
    position: absolute;
    width: 121px;
    height: 121px;
    top: 70%;
    left: calc(50% - 60px);
    margin: 10px auto;
    background: url('loader.png') 50% 50% no-repeat;
    -webkit-animation: rotateI 1.5s linear infinite;
    animation: rotateI 1.5s linear infinite;
}

@-webkit-keyframes rotateI {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotateI {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
