/* #region fonts */

@font-face {
    font-family: "Product Sans";
    font-weight: 400;
    src: local("Product Sans"), local("Google Sans"), url("../fonts/ProductSans-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: local("Roboto"), url("../fonts/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    src: local("Roboto-Medium"), url("../fonts/Roboto-Medium.ttf");
}

@font-face {
    font-family: "Proxima Nova";
    font-weight: 700;
    src: local("Proxima Nova Bold"), url("../fonts/Proxima-Nova-Bold.otf")
}

/* #endregion */

/* #region main */

:root {
    --mono-color: #F55053;
    --mpwa-color: #506AF2;
    --app-height: 100vh;
}

* {
    scroll-behavior: smooth;
}

html {
    overflow: hidden;
    width: 100%;
}

body {
    font-family: Roboto, 'Segoe UI', -apple-system, BlinkMacSystemFont, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #000;
    padding: 0;
    margin: 0;
    color: #fff;
    overscroll-behavior: contain;
    -ms-overflow-style: scroll;
    -webkit-overflow-style: scroll;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.blocklist {
    display: flex;
    flex-direction: column;
    height: var(--app-height);
    max-height: var(--app-height);
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.block {
    width: calc(100vw - (100vw - 100%));
    height: var(--app-height);
    max-width: calc(100vw - (100vw - 100%));
    max-height: var(--app-height);
    min-height: var(--app-height);
    position: relative;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.twoparts {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: space-evenly;
}

.twoparts>.left, .twoparts>.right {
    flex-grow: 1;
}

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

.monofont {
    font-family: "Proxima Nova";
    font-weight: 400;
}

.highlight {
    background: #F55053;
    padding: .1em;
}

.highlight.blue {
    background: #506AF2;
}

.promoblock:not(.shift):not(.endshift) {
    font-size: 1.5em;
}

.promoblock.shift {
    margin-bottom: 25vh;
}

.smalltitle {
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: .5em;
}

.bigtitle {
    font-size: 2em;
    font-weight: 500;
    max-width: 8em;
    line-height: 1.3;
}

.promo-buttons {
    margin-top: 3em;
    display: flex;
}

.redbutton, .blackbutton {
    cursor: pointer;
    transition: transform .2s;
    color: white;
    display: block;
    text-decoration: none;
}

.redbutton:hover, .blackbutton:hover {
    transform: translateY(-4%);
}

.redbutton {
    background: #F55053;
    border-radius: 2em;
    font-size: 2em;
    font-family: "Product Sans";
    padding: .5em .7em;
    box-shadow: rgba(245, 80, 83, .65) 0 20px 40px;
    display: flex;
    z-index: 2;
}

.redbutton>img:first-child {
    margin-right: .4em;
}

.blackbutton {
    background: #2B2B2B;
    border-radius: 2em;
    font-size: 2em;
    font-family: "Product Sans";
    padding: .5em;
    box-shadow: #fff 0 20px 100px;
    display: flex;
    margin-left: -.3em;
    z-index: 1;
}

.hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5vh;
}

.hint.top {
    bottom: auto !important;
    top: 5vh;
}

.transparent-hint {
    background: rgba(255, 255, 255, .2);
    padding: .5em 1.5em;
    border-radius: 2em;
    display: flex;
    font-family: "Product Sans";
    cursor: pointer;
    white-space: nowrap;
}

.transparent-hint>img:first-child {
    margin-right: .5em;
}

.details {
    max-width: 14em;
    margin-top: 1em;
}

.go-hint {
    height: 4vmin;
    width: 4vmin;
    background-image: url("../vector/down.svg");
    background-size: 105%;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: rgba(255, 255, 255, 0.8) 0 10px 30px;
    cursor: pointer;
    background-position: 50% 50%;
}

.top>.go-hint {
    background-image: url("../vector/up.svg");
}

.mpwalogo {
    max-width: 10em;
    margin-bottom: 1em;
}

.action {
    display: flex;
    align-items: center;
    margin: .2em;
    padding: .5em 1em;
    border-radius: 2em;
    transition: background .2s;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.action:hover {
    background: rgba(255, 255, 255, .2);
}

.blue-icon {
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .5em;
}

/* #endregion */

/* #region bgs */

.block.welcome {
    background-image: url("../pictures/pc.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto 90%;
}

.block.currencies {
    background-image: url("../pictures/currencies.png");
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: auto 70%;
}

.block.statement {
    background-image: url("../pictures/statement.png");
    background-repeat: no-repeat;
    background-position: 90% 70%;
    background-size: auto 70%;
}

.block.multiaccount {
    background-image: url("../pictures/cards.png");
    background-repeat: no-repeat;
    background-position: 90% 70%;
    background-size: auto 70%;
}

.block.notifications {
    background-image: url("../pictures/notifications.png");
    background-repeat: no-repeat;
    background-position: 90% 70%;
    background-size: auto 70%;
}

.block.partbuy {
    background-image: url("../pictures/coins.png");
    background-repeat: no-repeat;
    background-position: 98% 70%;
    background-size: auto 85%;
}

/* #endregion */