@media screen and (max-width: 1024px) {
    body {
        background: url(../images/bg-mob.jpg);
        background-size: cover;
        box-sizing: border-box;
        padding: 50px 30px;
    }

    .flex-container {
        width: 100%;
        height: 100%;
        /* min-height: calc(100vh - 100px); */
        height: calc(var(--vh, 1vh) * 100 - 100px);
        align-items: flex-end;
    }
}

@media screen and (max-width: 767px) {
    .credits {
        top: 50px;
        right: 30px;
    }
    .credits-text {
        width: calc(100vw - 60px - 50px);
        font-size: 16px;
        padding: 15px 30px;
        line-height: 19px;
        box-shadow: 0px 10px 15px rgba(0,0,0,.5);
    }

    .quiz-title {
        font-size: 22px;
        line-height: 27px;
    }
    .quiz-wrap {
        /* height: 350px; */
        box-sizing: border-box;
        padding: 30px;
    }
    .quiz-wrap.usernamed {
        background-position: -40%;
        background-size: cover;
    }
    #timer {
       font-size: 24px;
        line-height: 29px;
        top: -60px;
    }
    .quiz-input input {
        width: 100%;
        max-width: 320px;
    }
    .quiz-button {
        font-size: 16px;
        line-height: 19px;
        width: 100%;
        max-width: 253px;
        height: 50px;
        min-width: unset;
        margin: 0 auto;
    }
    .quiz-buttons {
        width: 100%;
    }
    .quiz-buttons-title {
        font-size: 22px;
        line-height: 27px;
    }
    .buttons-wrap {
        flex-direction: column-reverse;
        width: 100%;
    }
    .no,
    .yes {
        font-size: 16px;
        line-height: 19px;
        width: 100%;
        max-width: 253px;
        height: 50px;
        min-width: unset;
        margin: 0 auto;
    }
    .yes {
        margin: 0px auto 10px;
        background: #fff;
        border: 1px solid #000;
        color: #000;
    }
    .quiz-text {
        font-size: 18px;
        line-height: 22px;
    }
    a {
        display: block;
        width: 100%;
    }
    @media screen and (max-height: 660px) {
        .flex-container {
            padding-top: 50px;
        }
        .quiz-title {
            font-size: 17px;
            line-height: 20px;
        }
        .quiz-text {
            margin-bottom: 15px;
        }
        /* .quiz-wrap {
            height: 300px;
        } */
        .no,
        .yes {
            height: 40px;
        }
    }
}
@media (max-width:920px) and (max-height:500px) and (orientation: landscape) {
    .flex-container {
        height: 100%;
    }
}
@media screen and (max-width: 376px) and (max-height:555px) {
.flex-container {
    padding-top: 0px;
}
}
@media screen and (max-width: 321px) {
    .gps-marker {
        height:88px ;
    }
}