@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: #1C4268;
    background-image: url("/front-assets/img/bg-gradient.png");
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
    font-size: 20px;
}
p {
    margin: 0;
    padding: 0;
}

.content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    /*max-width: 1280px;*/
    /*margin: 0 auto;*/
}
.x-logo {
    margin-top: 35px;
}
.t-title {
    text-align: center;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    margin-top: 25px;
}
.app-logo {
    width: 260px;
    height: auto;
    margin: 0 auto;
}
.t-desc {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    margin: 25px 0 50px 0;
}
.t-steps {
    display: flex;
    justify-content: center;
    margin-right: 100px;
}
.t-steps div {
    text-align: center;
}
.t-steps div p {
    font-weight: 400;
    font-size: 20px;
    padding: 15px 0;
}
.t-steps div .t-dowload {
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, #14A0FF 37.5%, #2966E9 100%);
    border-radius: 5px;
    padding: 10px 17px;
    display: block;
    margin: 10px 0;
    font-size: 15px;
}
.t-steps div .t-dowload:hover {
    background: #2966E9;
}
.t-steps div .t-dowload-gren {
    background: #92C738;
}
.t-steps div .t-promo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    border: 1px dashed #fff;
    border-radius: 5px;
    width: 130px;
    margin: 15px auto 10px;
}
.t-steps div .t-promo:hover {
    border: 1px solid #fff;
}
.t-steps div .t-promo span {
    background: url('data:image/svg+xml;utf8, <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.5897 0H5.76809C4.83079 0 4.07162 0.759169 4.07162 1.69646V4.07162H1.69646C0.759169 4.07162 0 4.83079 0 5.76809V17.304C0 17.7536 0.178977 18.1854 0.497072 18.5034C0.815149 18.8215 1.2469 19.0005 1.69646 19.0005H10.5181C10.9676 19.0005 11.3994 18.8215 11.7175 18.5034C12.0355 18.1854 12.2145 17.7536 12.2145 17.304V14.9289H14.5897C15.0393 14.9289 15.471 14.7499 15.7891 14.4318C16.1072 14.1137 16.2862 13.682 16.2862 13.2324V1.69646C16.2862 1.2469 16.1072 0.815149 15.7891 0.497072C15.471 0.178995 15.0393 0 14.5897 0ZM10.8574 17.304C10.8574 17.394 10.8217 17.4805 10.7581 17.5441C10.6945 17.6077 10.608 17.6433 10.5181 17.6433H1.69646C1.509 17.6433 1.35716 17.4915 1.35716 17.304V5.76809C1.35716 5.58063 1.509 5.4288 1.69646 5.4288H10.5181C10.608 5.4288 10.6945 5.46442 10.7581 5.52804C10.8217 5.59166 10.8574 5.67818 10.8574 5.7681V17.304ZM14.9289 13.2325C14.9255 13.4183 14.7754 13.5684 14.5896 13.5718H12.2144V5.76798C12.2144 5.31842 12.0355 4.88666 11.7174 4.56859C11.3993 4.25051 10.9675 4.07151 10.518 4.07151H5.42847V1.69636C5.43186 1.51059 5.582 1.36045 5.76776 1.35706H14.5894C14.7751 1.36046 14.9253 1.51059 14.9287 1.69636L14.9289 13.2325Z" fill="white"/> </svg>') no-repeat center center;
    background-size: 17px 19px;
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}
.t-more-m {
    display: none;
}
.t-more-d {
    font-weight: 700;
    color: #fff;
    margin-top: 35px;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: center;
    display: block;
}
.t-more-d-text {
    display: none;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.5em;
    text-align: justify;
}
.t-more-d-text a {
    color: #fff;
}
.t-more-d-text p {
    margin: 10px 0;
}
.t-more-d-text h3 {
    font-size: 1.4em;
}
.tooltippromo {
    display: none;
    font-size: 14px;
    /*text-transform: uppercase;*/
}
.active {
    display: block;
}
.vr {
    height: 230px;
    background: #fff;
    width: 0.5px;
    opacity: 0.5;
    margin: 0 25px;
}

@media (max-width: 980px) {

    .content {
        padding: 0 15px;
    }
    .t-title {
        font-size: 24px;
    }
    .t-title br {
       display: none;
    }
    .t-desc {
        font-size: 18px;
        margin: 25px 0;
    }
    .t-desc br {
        display: none;
    }
    .t-steps div p {
        font-size: 16px;
    }
    .t-steps {
        flex-direction: column;
        margin-right: 0;
    }
    .t-steps div .t-promo {
        margin: 5px auto;
    }
    .vr {display: none}
    /*.t-more-d {*/
    /*    display: none;*/
    /*}*/
    .t-more-m {
        font-weight: 700;
        color: #fff;
        margin-top: 30px;
        margin-bottom: 10px;
        font-size: 15px;
        text-align: center;
        display: block;
    }
    .t-steps div .t-dowload {
        margin: 5px auto;
        max-width: 240px;
    }
    .t-more-d-text {
        text-align: left;
        width: 500px;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    body {
        background-image: url("/front-assets/img/bg-gradient-m.png");
        background-repeat:no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
    .t-more-d-text {
        text-align: left;
        width: 300px;
        word-wrap: break-word;
    }
}