/* =============================================
   MOBILE RESPONSIVE STYLES FOR MYMALLAPP.RU
   ============================================= */

@media (max-width: 1200px) {
    body { min-width: 0 !important; }
    .row {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {

    body {
        font-size: 16px !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #wrapper {
        overflow-x: hidden !important;
        padding-bottom: 70px !important;
    }

    p { margin: 0 0 12px !important; }

    h2 {
        font-size: 22px !important;
        line-height: 30px !important;
        margin: 0 0 20px !important;
    }

    /* ROW */
    .row {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
    }

    /* INTRO */
    .intro-block {
        height: auto !important;
        padding: 14px 0 20px !important;
        background-size: cover !important;
        margin-bottom: 16px !important;
    }

    .logo {
        width: 200px !important;
        height: 111px !important;
        background-size: contain !important;
        background-position: center !important;
        margin: 0 auto 24px !important;
    }

    .intro-block h1 {
        font-size: 15px !important;
        line-height: 22px !important;
        width: 100% !important;
        margin: 0 auto 12px !important;
        padding: 0 !important;
    }

    .languages-block { margin-bottom: 10px !important; }

    /* IMAGES - сброс всех float и отрицательных отступов */
    .alignleft,
    .alignright,
    img.alignleft,
    img.alignright {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px !important;
        max-width: 85% !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        z-index: auto !important;
    }

    .text-block {
        width: 100% !important;
        padding: 12px 0 0 !important;
        overflow: visible !important;
    }

    /* PERCENT SECTION */
    .percent-section { padding: 20px 0 !important; }

    .percent-section .alignright {
        margin: 0 auto 20px !important;
        float: none !important;
        position: static !important;
    }

    .percent-section .text-block {
        padding: 16px 0 0 !important;
        width: 100% !important;
    }

    .percent-column {
        width: 44% !important;
        float: left !important;
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 12px !important;
    }

    .percent-column:first-child { margin-right: 8% !important; }

    .percent-column canvas {
        max-width: 110px !important;
        height: auto !important;
    }

    .percent-section:after,
    .percent-section .text-block:after {
        display: block !important;
        clear: both !important;
        content: "" !important;
    }

    /* SECTION PRESENTS */
    .section-presents { padding: 20px 0 16px !important; }
    .section-presents .alignright { margin: 0 auto 20px !important; float: none !important; }
    .section-presents .text-block { width: 100% !important; padding: 12px 0 0 !important; }

    /* SECTION GRAY / SIMPLE */
    .section-gray { padding: 20px 0 !important; }

    .section-simple .alignleft {
        margin: 0 auto 20px !important;
        float: none !important;
        position: static !important;
    }
    .section-simple .text-block { width: 100% !important; padding: 12px 0 0 !important; }

    /* SECTION PERCENT */
    .section-percent .alignleft {
        margin: 0 auto 20px !important;
        float: none !important;
        position: static !important;
    }
    .section-percent .text-block { width: 100% !important; padding: 12px 0 0 !important; }

    /* SECTION GRAPH */
    .section-graph { padding: 20px 0 30px !important; }
    .section-graph .alignright { margin: 0 auto 20px !important; float: none !important; }
    .section-graph .text-block { width: 100% !important; padding: 12px 0 0 !important; }

    /* ICON */
    .icon {
        display: block !important;
        margin-bottom: 16px !important;
        max-width: 56px !important;
        height: auto !important;
    }

    /* SECTION VIDEO */
    .section-video { padding: 12px 0 0 !important; }
    .section-video h2 { margin-bottom: 16px !important; }

    .tabs-content { height: auto !important; }

    .start-video {
        height: 200px !important;
        position: relative !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #tab1 .start-video:before { display: none !important; }

    .start-video .play {
        width: 90px !important;
        height: 68px !important;
        border-radius: 18px !important;
        margin: -34px 0 0 -45px !important;
    }

    .start-video .play:before {
        top: 22px !important;
        left: 36px !important;
        border-left-width: 24px !important;
        border-bottom-width: 14px !important;
        border-top-width: 14px !important;
    }

    .tabset { font-size: 14px !important; margin: 0 0 20px !important; }

    /* POLL SECTION */
    .poll-section {
        padding: 30px 0 36px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .poll-section .columns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .poll-section .column {
        width: 130px !important;
        margin: 0 !important;
    }

    .poll-section canvas {
        max-width: 130px !important;
        height: auto !important;
    }

    .poll-section .text-more {
        font-size: 16px !important;
        line-height: 20px !important;
        top: 24px !important;
        margin-left: -30px !important;
        width: 60px !important;
    }

    /* DOWNLOAD */
    .section-download {
        padding: 30px 0 36px !important;
        margin-bottom: 36px !important;
    }

    .section-download h2 {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .section-download .aligncenter {
        margin: 0 auto 20px !important;
        position: static !important;
        max-width: 90% !important;
        height: auto !important;
    }

    .buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    .buttons li { float: none !important; margin: 0 !important; }

    .buttons a {
        width: 200px !important;
        height: 68px !important;
        background-size: auto 68px !important;
    }

    .buttons .google-play {
        background-position: -200px 0 !important;
    }

    /* FOOTER */
    #footer {
        font-size: 12px !important;
        line-height: 17px !important;
        padding: 10px 12px !important;
    }

    #footer .row { padding: 0 !important; width: 100% !important; }

    /* LIGHTBOX */
    .lightbox {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 16px !important;
        font-size: 15px !important;
    }

    .lightbox h2 { font-size: 22px !important; line-height: 28px !important; }

    .input-holder {
        width: 100% !important;
        max-width: 300px !important;
        margin: 16px auto 0 !important;
    }

    .input-holder input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .lightbox input[type="submit"] {
        width: 100% !important;
        max-width: 300px !important;
        background-size: 100% auto !important;
    }

    /* CAROUSEL */
    .carousel .mask { width: 100% !important; }
}

/* Маленькие экраны */
@media (max-width: 420px) {
    body { font-size: 14px !important; }
    h2 { font-size: 18px !important; line-height: 26px !important; }
    .intro-block h1 { font-size: 13px !important; line-height: 19px !important; }
    .percent-column { font-size: 13px !important; }
    .start-video { height: 170px !important; }
    .poll-section .column { width: 120px !important; }
    .poll-section canvas { max-width: 120px !important; }
}