@media screen and (max-width: 1024px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden
    }

    .maxwidth > .buckets,
    .bg-parallax > .buckets {
        margin-left: 0;
        margin-right: 0
    }

    .paddingt80,
    .paddingt100,
    .paddingt120,
    .paddingt160,
    .paddingt200 {
        padding-top: 56px
    }

    .paddingb80,
    .paddingb100,
    .paddingb120,
    .paddingb160,
    .paddingb200 {
        padding-bottom: 56px
    }
}

@media screen and (max-width: 736px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden
    }

    .wrapper {
        overflow: visible;
        width: 90%
    }

    section {
        min-width: 0
    }

    section.maxwidth > .wrapper,
    .bg-parallax > .wrapper,
    .section-check > .wrapper {
        box-sizing: border-box
    }

    .buckets {
        margin-left: 0;
        margin-right: 0;
        row-gap: 12px
    }

    .buckets [class^="large-"] {
        min-width: 0;
        padding: 12px 0
    }

    .buckets.lefttext:has(> [class^="large-"] > .heading-icon),
    .buckets.lefttext:has(> [class^="large-"] > .heading-icon-min),
    .buckets.lefttext:has(> [class^="large-"] > .heading-icon-medium),
    .buckets.lefttext:has(> [class*=" large-"] > .heading-icon),
    .buckets.lefttext:has(> [class*=" large-"] > .heading-icon-min),
    .buckets.lefttext:has(> [class*=" large-"] > .heading-icon-medium) {
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 22px
    }

    .buckets.lefttext > [class^="large-"]:has(> .heading-icon),
    .buckets.lefttext > [class^="large-"]:has(> .heading-icon-min),
    .buckets.lefttext > [class^="large-"]:has(> .heading-icon-medium),
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon),
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon-min),
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon-medium) {
        align-items: start;
        border-top: 1px solid var(--vpone-border);
        column-gap: 14px;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 16px 0;
        width: 100%
    }

    .buckets.lefttext > [class^="large-"]:has(> .heading-icon):first-child,
    .buckets.lefttext > [class^="large-"]:has(> .heading-icon-min):first-child,
    .buckets.lefttext > [class^="large-"]:has(> .heading-icon-medium):first-child,
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon):first-child,
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon-min):first-child,
    .buckets.lefttext > [class*=" large-"]:has(> .heading-icon-medium):first-child {
        border-top: 0
    }

    .buckets.lefttext > [class^="large-"] > .heading-icon,
    .buckets.lefttext > [class^="large-"] > .heading-icon-min,
    .buckets.lefttext > [class^="large-"] > .heading-icon-medium,
    .buckets.lefttext > [class*=" large-"] > .heading-icon,
    .buckets.lefttext > [class*=" large-"] > .heading-icon-min,
    .buckets.lefttext > [class*=" large-"] > .heading-icon-medium {
        grid-row: 1 / 5;
        margin: 2px 0 0 !important;
        max-width: 52px;
        width: 52px
    }

    .buckets.lefttext > [class^="large-"] > h2,
    .buckets.lefttext > [class^="large-"] > h3,
    .buckets.lefttext > [class^="large-"] > h4,
    .buckets.lefttext > [class^="large-"] > h5,
    .buckets.lefttext > [class^="large-"] > p,
    .buckets.lefttext > [class*=" large-"] > h2,
    .buckets.lefttext > [class*=" large-"] > h3,
    .buckets.lefttext > [class*=" large-"] > h4,
    .buckets.lefttext > [class*=" large-"] > h5,
    .buckets.lefttext > [class*=" large-"] > p {
        min-width: 0
    }

    .buckets.lefttext > [class^="large-"] > h3,
    .buckets.lefttext > [class*=" large-"] > h3 {
        font-size: 22px;
        line-height: 1.18;
        margin-top: 0 !important
    }

    .buckets.lefttext > [class^="large-"] > h4,
    .buckets.lefttext > [class*=" large-"] > h4,
    .buckets.lefttext > [class^="large-"] > p,
    .buckets.lefttext > [class*=" large-"] > p {
        font-size: 16px;
        line-height: 1.38;
        margin-top: 6px
    }

    .centert .buckets > [class^="large-"]:has(> .heading-icon),
    .centert .buckets > [class^="large-"]:has(> .heading-icon-min),
    .centert .buckets > [class^="large-"]:has(> .heading-icon-medium),
    .centert .buckets > [class*=" large-"]:has(> .heading-icon),
    .centert .buckets > [class*=" large-"]:has(> .heading-icon-min),
    .centert .buckets > [class*=" large-"]:has(> .heading-icon-medium) {
        padding-top: 18px;
        padding-bottom: 18px
    }

    .centert .buckets .heading-icon,
    .centert .buckets .heading-icon-min {
        margin-top: 0;
        margin-bottom: 12px;
        max-width: 64px;
        width: 64px
    }

    .centert .buckets .heading-icon-medium {
        margin-top: 0;
        margin-bottom: 12px;
        max-width: 84px;
        width: 84px
    }

    .buckets-large {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-left: 0;
        margin-right: 0
    }

    .buckets-large > [class^="large-"],
    .buckets-large > [class*=" large-"] {
        width: 100%
    }

    .full-img,
    .full-img-50 {
        display: block;
        height: auto;
        max-width: 100%
    }

    .paddingt40,
    .paddingt60 {
        padding-top: 32px
    }

    .paddingb40,
    .paddingb60 {
        padding-bottom: 32px
    }

    .paddingt80,
    .paddingt100,
    .paddingt120,
    .paddingt160,
    .paddingt200 {
        padding-top: 40px
    }

    .paddingb80,
    .paddingb100,
    .paddingb120,
    .paddingb160,
    .paddingb200 {
        padding-bottom: 40px
    }

    .margint40 {
        margin-top: 28px !important
    }

    .marginb40 {
        margin-bottom: 28px !important
    }

    .margint80,
    .margint100,
    .margint120,
    .margint160,
    .margint180,
    .margint200 {
        margin-top: 40px !important
    }

    .marginb80,
    .marginb100,
    .marginb120,
    .marginb160,
    .marginb180,
    .marginb200 {
        margin-bottom: 40px !important
    }

    .section_background_gradient,
    section#app-design-universale,
    section#app-connect-update {
        min-height: auto
    }

    .bg-parallax {
        padding-bottom: 0;
        padding-top: 0
    }

    .bg-parallax > .wrapper.section_background_black_opacity {
        padding: 32px 5%;
        width: 90%
    }

    .bg-parallax .offset-1,
    .bg-parallax .offset-2,
    .bg-parallax .offset-3,
    .bg-parallax .offset-4,
    .bg-parallax .offset-5,
    .bg-parallax .offset-6,
    .bg-parallax .offset-7,
    .bg-parallax .offset-8,
    .bg-parallax .offset-9,
    .bg-parallax .offset-10,
    .bg-parallax .offset-11,
    .bg-parallax .offset-12 {
        margin-left: 0;
        width: 100%
    }

    .slider .vpone-static-hero__caption {
        padding-right: 5%;
        padding-left: 5%
    }

    .violator,
    .violator_light,
    .violator-slider {
        line-height: 1.2;
        max-width: 100%;
        white-space: normal
    }

    .bg-fixed {
        background-attachment: scroll
    }

    .vpone-carousel--logos .vpone-carousel__slide {
        min-height: 120px
    }

    .vpone-footer__links {
        gap: 12px;
        padding-bottom: 32px
    }

    .vpone-footer__nav {
        gap: 6px 0
    }

    form p,
    p.form {
        flex-direction: column;
        gap: 8px
    }

    form input,
    p.form input,
    .inputstyle,
    textarea,
    select {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%
    }

    .btn {
        padding-right: 1em;
        padding-left: 1em;
        white-space: normal;
        width: 100%
    }

    div.button,
    .button label,
    input[type=range] {
        width: 100%
    }

    .checkmark-style label {
        line-height: 1.35
    }

    #cookieChoiceInfo {
        box-sizing: border-box;
        font-size: 13px;
        padding: 24px 5% !important
    }
}