* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
body,
html {
    height: 100%;
}
html {
    font-size: 10px;
}
img {
    width: 90%;
    display: block;
    height: auto;
    margin: auto;
}

.page {
    font-family: 'Montserrat', Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
    background: url('../img/bg-desk.jpg') 50% 0 no-repeat #000;
    background-size: 192em 90em;
    line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
}
#layout {
    min-height: 100%;
    position: relative;
    z-index: 2;
    overflow-x: hidden;
}
.reducer {
    width: 132em;
    margin: 0 auto;
}
#content {
    width: 82em;
}
#logo {
    margin: 0 auto -3em;
    display: block;
    width: 48.1em;
    height: 17.9em;
}
.txt_wrap {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3em;
    font-weight: 700;
    font-style: italic;
}
.txt_1 {
    color: #fff;
    font-size: 4.5em;
    margin-bottom: -0.1em;
}
.txt_1 span {    
color: #ff7d00;
}
.txt_2 {
    color: #fff;
    font-size: 4.5em;
    display: inline-block;
    position: relative;
    padding-right: 0.85em;
}
.code_wrap {
    margin-bottom: -5em;
    position: relative;
    z-index: 2;
}
.code_wrap p {
    text-transform: uppercase;
    color: #fff;
    font-size: 3.2em;
    margin-bottom: -2.75em;
    text-align: center;
}
.code {
    background: url('../img/code-riskfree.png') 0 0 no-repeat;
    width: 57.5em;
    height: 24.8em;
    background-size: contain;
    margin: 0 auto;
}
.btn {
    display: block;
    text-align: center;
    box-sizing: border-box;
    width: 32.7em;
    height: 7em;
    padding: 1.95em 1em;
    background-color: #2ac844;
    box-shadow: 0 0 2em #2ac844;
    border-radius: 0.4em;
    text-decoration: none;
    margin: 0 auto;
    transition: all .2s ease;
}
.btn span {
    text-transform: uppercase;
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.8em;
}
.btn:hover {
    background-color: #2dd849;
    box-shadow: 0 0 2em #2dd849;
}
.tnc {
    text-align: center;
    padding-top: 0.75em;
    position: relative;
    z-index: 2;
}
.tnc a {
    color: #ff7d00;
    font-size: 1.7em;
    font-family: 'Roboto', Arial, sans-serif;
}
.btn_wrap {
    margin-bottom: 3.5em;
    position: relative;
    z-index: 3;
}
.app_logo {
    margin: 0 auto;
    background: url('../img/android-logo.png') 0 0 no-repeat;
    background-size: 10.5em 21em;
    width: 10.5em;
    height: 10.5em;
    display: block;
}
.app_logo:hover {
    background-position: 0 -10.5em;
}
.steps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    font-family: 'Roboto', Arial, sans-serif;
    z-index: 1;
    padding: 2em 0 0 0;
}
.steps div {
    margin: 0 1em 0 0;
}
.steps div:nth-child(4) {
    margin: 0;
}
.steps i {
    font-style: normal;
    color: #ff7d00;
}
.steps p {
    color: #fff;
    font-size: 2.1em;
    display: inline-block;
    position: relative;
    left: 0.25em;
    top: 0.1em;
}
.steps span {
    display: inline-block;
    background-image: url('../img/nums.png');
    width: 9.9em;
    height: 11.2em;
    margin: -3.75em -3em;
    background-size: 9.9em 44.8em;
}
.step_1_num {
    background-position: 0 0;
}
.step_2_num {
    background-position: 0 -11.2em;
}
.step_3_num {
    background-position: 0 -22.4em;
}
.step_4_num {
    background-position: 0 -33.6em;
    position: relative;
    top: 0.25em;
}

#footer {
    text-align: center;
    padding: 8em 0 2em;
}
#footer img {
    margin: 0 auto 2.5em;
    width: 95%;
    height: auto;
}
#footer img.desk {
    max-width: 94.5em;
    display: block;
}
#footer img.mob {
    max-width: 46.2em;
    display: none;
}
#footer div {
    font-family: 'Roboto', Arial, sans-serif;
    color: #6e2947;
    font-size: 1.1em;
    max-width: 100em;
    width: 95%;
    margin: 0 auto;
    text-transform: uppercase;
}

.popup_overlay {
    position: absolute;
    left: 0;
    width: 100%;
    display: none;
    min-height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 5;
}
.popup_window {
    margin: 1.5em auto;
    width: 85%;
    max-width: 117.5em;
    box-sizing: border-box;
    position: relative;
    background: rgba(3,11,29, 0.5);
    border: 0.2em solid #2e4872;
    border-radius: 0.8em;
    padding: 4.5em 5em;
}
.popup_close {
    position: absolute;
    top: 0;
    right: -2.3em;
    width: 1.3em;
    height: 1.3em;
    background-image: url('../img/popup-close.png');
    background-size: 1.3em 2.6em;
    cursor: pointer;
    background-position: 0 0;
}
.popup_close:hover {
    background-position: 0 -1.3em;
}
.popup_content div,
.popup_content p {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.5em;
    margin-bottom: 1em;
}
.popup_content div {
    color: #fff;
    text-transform: uppercase;
}
.popup_content p {
    color: #5d6a82;
}




@media (max-width: 1366px) and (orientation: landscape) {
    .page {
        font-size: 9px;
    }
}
@media (max-width: 1280px) and (orientation: landscape) {
    .page {
        font-size: 8.5px;
    }
}
@media (max-width: 1170px) and (orientation: landscape) {
    .page {
        font-size: 8px;
    }
}

@media (max-width: 930px) and (orientation: landscape) {
    .page {
        font-size: 5px;
    }
}
@media (max-width: 812px) and (orientation: landscape) {
    .page {
        font-size: 4.75px;
    }
}
@media (max-width: 736px) and (orientation: landscape) {
    .page {
        font-size: 4.5px;
    }
}
@media (max-width: 667px) and (orientation: landscape) {
    .page {
        font-size: 4.25px;
    }
}
@media (max-width: 568px) and (orientation: landscape) {
    .page {
        font-size: 4px;
    }
}


@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
    .page {
        font-size: 5.8px;
    }
}
@media (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
    .page {
        font-size: 7px;
    }
}


@media (max-width: 551px) and (orientation: portrait) {
    .page {
        font-size: 9.5px;
        background: #000 url('../img/bg-mob.jpg') 50% -100px no-repeat;
        background-size: 551px;
    }
    .reducer,
    #content {
        width: auto;
    }
    #logo {
        font-size: 80%;
    }
    .txt_wrap {
        margin-bottom: 1.5em;
        white-space: nowrap;
        font-size: 75%;
    }
    .txt_1,
    .txt_2 {
        font-size: 5.8em;
        margin-bottom: 0;
    }
    .code_wrap {
        margin-bottom: 50em;
        font-size: 80%;
    }
    .code {
        margin: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .steps {
        flex-direction: column;
        width: 42em;
        margin: 0 auto;
        padding: 2em 0;
    }
    .steps p {
        font-size: 2.8em;
        line-height: 1.1;
        left: 0.5em;
    }
    .steps div {
        margin-bottom: 4em;
    }
    .steps span {
        font-size: 85%;
        position: relative;
        top: 0.9em;
    }
    .steps span.step_4_num {
        top: -0.25em;
    }
    .steps div:nth-child(1) br,
    .steps div:nth-child(2) br,
    .steps div:nth-child(3) br {
        display: none;
    }
    #footer {
        padding: 2em 0;
    }
    #footer div {
        font-size: 1.35em;
        width: 85%;
    }
    #footer img.desk {
        display: none;
    }
    #footer img.mob {
        display: block;
    }
    .popup_window {
        margin: 3em auto 0;
    }
}
@media (max-width: 535px) and (orientation: portrait) {
    .page {
        font-size: 9px;
        background-size: 535px;
    }
}
@media (max-width: 485px) and (orientation: portrait) {
    .page {
        font-size: 8.25px;
        background-size: 485px;
    }
}
@media (max-width: 445px) and (orientation: portrait) {
    .page {
        font-size: 7.5px;
        background-size: 445px;
    }
}
@media (max-width: 415px) and (orientation: portrait) {
    .page {
        font-size: 6.25px;
        background-size: 415px;
        background-position-y: -120px;
    }
    .code_wrap {
        margin-bottom: 56em;
    }
}
@media (max-width: 375px) and (orientation: portrait) {
    .page {
        font-size: 5.75px;
        background-size: 390px;
    }
}
@media (max-width: 360px) and (orientation: portrait) {
    .page {
        font-size: 5.25px;
        background-size: 360px;
    }
    .popup_window {
        width: 75%;
    }
}
@media (max-width: 320px) and (orientation: portrait) {
    .page {
        font-size: 4.25px;
        background-size: 330px;
    }
    .code_wrap {
        margin-bottom: 65em;
    }
}