:root {
    --site-width: 1228px;
    --site-gutter: 32px;
    --brand-red: #cd1719;
    --ink: #111827;
}

html {
    background: #fff;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: none;
    overflow-x: hidden;
    background: #fff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    box-sizing: border-box;
}

.mobile-menu-toggle {
    display: none;
}

body > section.wrapper {
    width: 100%;
    overflow: clip;
}

@media (max-width: 1450px) {
    body > header {
        height: 96px;
        padding: 0 24px;
        align-items: stretch;
    }

    body > header div.logo {
        flex: 0 0 210px;
        padding: 0;
    }

    body > header div.logo img {
        display: block;
        width: 205px;
        height: auto;
    }

    body > header nav.main {
        min-width: 0;
        margin-left: 12px;
    }

    body > header nav.main ul.main {
        justify-content: center;
        margin: 0;
    }

    body > header nav.main ul li a,
    body > header nav.main ul li a:first-child {
        padding: 0 10px;
        line-height: 96px;
        font-size: 14px;
        white-space: nowrap;
    }

    body > header div.languages {
        display: none;
    }

    body > header div.telephone {
        flex: 0 0 210px;
        padding-left: 16px;
        justify-content: flex-end;
    }

    body > header div.telephone img {
        padding-right: 10px;
    }

    body > header div.telephone div.telephone-number {
        white-space: nowrap;
    }

    section.slider,
    section.slider.opacity {
        height: min(700px, calc(100vh - 96px));
        min-height: 590px;
    }

    section.slider div.brightness {
        height: 100%;
    }

    section.slider div.main {
        width: 70%;
        padding-left: 13%;
        padding-right: 13%;
    }

    section.slider h1.first {
        padding-top: 130px;
    }

    section.boxes article.boxes {
        padding-left: max(32px, 7vw);
        padding-right: max(32px, 7vw);
    }

    footer section.top,
    footer section.bottom {
        width: min(var(--site-width), calc(100% - 64px));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1100px) {
    body > header {
        height: 72px;
        padding: 0 20px;
        position: relative;
        z-index: 100;
    }

    body > header.sticky {
        position: sticky;
    }

    body > header div.logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    body > header div.logo img {
        width: 176px;
    }

    .mobile-menu-toggle {
        position: relative;
        display: inline-flex;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin: 13px 0 13px 14px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 4px;
        background: #f4f4f4;
        cursor: pointer;
        z-index: 3;
    }

    .mobile-menu-toggle span,
    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        position: absolute;
        display: block;
        width: 22px;
        height: 2px;
        background: #1f2937;
        content: "";
        transition: transform .2s ease, opacity .2s ease;
    }

    .mobile-menu-toggle::before { transform: translateY(-7px); }
    .mobile-menu-toggle::after { transform: translateY(7px); }

    body.nav-open .mobile-menu-toggle span { opacity: 0; }
    body.nav-open .mobile-menu-toggle::before { transform: rotate(45deg); }
    body.nav-open .mobile-menu-toggle::after { transform: rotate(-45deg); }

    body > header nav.main {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        width: 100%;
        max-height: calc(100vh - 72px);
        margin: 0;
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    }

    body.nav-open > header nav.main {
        display: block;
    }

    body > header nav.main ul.main {
        display: block;
        height: auto;
        padding: 8px 20px 18px;
    }

    body > header nav.main ul li.main {
        display: block;
        border-bottom: 1px solid #ececec;
    }

    body > header nav.main ul li a,
    body > header nav.main ul li a:first-child {
        display: block;
        height: auto;
        padding: 16px 8px;
        line-height: 1.25;
        font-size: 16px;
        overflow: visible;
    }

    body > header nav.main ul li.main a::after {
        height: 2px;
    }

    body > header div.telephone {
        flex: 0 0 auto;
        padding: 0;
    }

    body > header div.telephone img {
        width: 28px;
        padding: 0;
    }

    body > header div.telephone p,
    body > header div.telephone a span {
        display: none;
    }

    body > header div.telephone a {
        padding: 0 6px;
        font-size: 14px;
    }

    body.nav-open {
        overflow: hidden;
    }

    section.slider,
    section.slider.opacity {
        height: min(680px, calc(100svh - 72px));
        min-height: 580px;
    }

    section.slider div.main {
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        animation: none !important;
    }

    section.slider h1.first,
    section.slider h1.second {
        padding-left: 0;
        font-size: clamp(40px, 6vw, 54px);
    }

    section.slider h1.first { padding-top: 120px; }
    section.slider h2,
    section.slider h2.second {
        padding-left: 0;
        font-size: clamp(25px, 4vw, 32px);
    }

    section.slider div.description {
        width: min(620px, 90%);
    }

    section.slider div.description p {
        padding: 24px 32px;
        font-size: 17px;
    }

    section.slider div.main img.icon,
    section.slider img.icon.slider {
        display: none;
    }

    section.slider > a {
        right: 40px;
        left: auto;
        bottom: 38px;
        transform: none;
    }

    section.boxes article.boxes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 32px;
    }

    section.boxes article.boxes > div {
        min-width: 0;
        width: auto;
        border-bottom: 1px solid #fff;
    }

    section.questions div.title,
    section.support div.title,
    section.contact div.title {
        display: block;
    }

    section.questions div.title > div.gap,
    section.support div.title > div.gap,
    section.contact div.title > div.gap,
    section.configurator > .container > .gap {
        display: none;
    }

    section.questions div.wrapper,
    section.support div.wrapper,
    section.contact div.wrapper {
        width: min(var(--site-width), calc(100% - 64px));
        margin: 0 auto;
    }

    section.questions div.wrapper .show,
    section.questions div.wrapper .question,
    section.questions div.wrapper .show div.disabled,
    section.questions div.wrapper .show div.disabled.active,
    section.questions div.wrapper .question p,
    section.questions div.wrapper div.disabled p {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    section.questions div.wrapper .question p {
        margin-left: 0;
        padding: 15px 64px;
    }

    section.questions div.wrapper div.disabled p {
        padding: 26px 60px;
    }

    section.configurator > .container {
        display: block;
        width: min(var(--site-width), calc(100% - 48px));
        margin: 0 auto;
    }

    section.configurator .block {
        width: 100%;
    }

    section.configurator .configurator,
    section.configurator .configurator .title,
    section.configurator .configurator .application,
    section.configurator .configurator .application .stepLevel,
    section.configurator .configurator .application .step.typeApplication {
        width: 100%;
        max-width: 100%;
    }

    section.configurator .configurator .typeApplication {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    section.configurator .configurator .typeApplication .card {
        min-width: 0;
    }

    section.contact div.wrapper {
        display: grid;
        grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
    }

    section.contact div.wrapper > div,
    section.contact div.description {
        min-width: 0;
        max-width: 100%;
    }

    section.contact div.description {
        padding: 0 36px 80px;
    }

    section.contact form,
    section.contact div.form {
        display: block;
        width: 100%;
        text-align: left;
    }

    section.contact form input,
    section.contact form textarea,
    section.contact form div.checkbox {
        width: 100%;
    }

    section.contact form label:not(.message) {
        display: block;
        padding: 0 0 7px;
    }

    section.contact label.message {
        position: static;
    }

    section.contact form .checkbox div.label {
        width: auto;
        margin-left: 64px;
        padding-right: 16px;
    }

    footer section.top {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    footer section.top > div,
    footer section.top div.first,
    footer section.top div.last {
        padding: 20px 28px;
        border-right: 0;
        border-bottom: 1px solid #d5d5d5;
    }

    footer section.bottom {
        flex-wrap: wrap;
        align-items: center;
    }
}

@media (max-width: 767px) {
    :root { --site-gutter: 20px; }

    body > header {
        padding: 0 14px;
    }

    body > header div.logo img { width: 158px; }
    body > header div.telephone a { display: none; }

    section.slider,
    section.slider.opacity {
        min-height: 560px;
        height: min(700px, calc(100svh - 72px));
        background-position: center;
    }

    section.slider div.main {
        padding: 0 54px;
    }

    section.slider h1.first,
    section.slider h1.second {
        font-size: clamp(36px, 11vw, 48px);
        line-height: .98;
    }

    section.slider h1.first { padding-top: 105px; }

    section.slider h2,
    section.slider h2.second {
        font-size: clamp(22px, 7vw, 29px);
        line-height: 1.1;
        padding-top: 24px;
    }

    section.slider h2.second { padding-top: 2px; }

    section.slider div.description {
        width: 100%;
        margin-top: 18px;
    }

    section.slider div.description p {
        padding: 20px;
        font-size: 15px;
        line-height: 1.45;
    }

    section.slider img.arrowLeft,
    section.slider img.arrowRight {
        width: 34px;
        top: 48%;
    }

    section.slider img.arrowLeft { left: 8px; }
    section.slider img.arrowRight { right: 8px; }
    section.slider a { bottom: 55px; }
    section.slider > a {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    section.slider div.rectangles { bottom: 25px; }

    section.boxes article.boxes {
        display: block;
        padding: 0 20px;
    }

    section.boxes article.boxes > div {
        min-height: 0;
        padding-bottom: 24px;
        border-right: 0;
    }

    section.boxes h3 {
        padding: 30px 18px 14px;
        font-size: 21px;
    }

    section.boxes p {
        width: auto;
        padding: 0 18px 24px;
        line-height: 1.5;
    }

    section.boxes div div.hover {
        display: none;
    }

    section.boxes div div.arrow {
        position: static !important;
        display: flex !important;
        width: auto !important;
        padding: 0 18px 8px;
        opacity: 1 !important;
    }

    section:not(.slider) div.container.maxWidth,
    section:not(.slider) > div.container,
    section:not(.slider) > div.maxWidth {
        width: calc(100% - 40px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    section:not(.slider) div.title,
    section:not(.slider) div.wrapper,
    section:not(.slider) div.content {
        max-width: 100%;
    }

    section:not(.slider) div.title,
    section:not(.slider) div.wrapper {
        flex-direction: column;
    }

    section:not(.slider) div.description {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    section:not(.slider):not(.configurator) div.description {
        flex-basis: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    section:not(.slider) div.gap {
        display: none !important;
    }

    section:is(
        .activation,
        .aggregates,
        .atexBoxes,
        .atexTests,
        .constructionDetails,
        .designing,
        .designingCompany,
        .diagnostics,
        .filtration,
        .modernization,
        .oil,
        .pomp,
        .press,
        .production,
        .productionStainless,
        .project,
        .projecting,
        .reception,
        .reconstruction,
        .regeneration,
        .responsibility,
        .rexroth,
        .scoope,
        .securitySystem,
        .start,
        .title,
        .titleCompany,
        .why
    ) .container,
    section:is(
        .activation,
        .aggregates,
        .atexBoxes,
        .atexTests,
        .constructionDetails,
        .designing,
        .designingCompany,
        .diagnostics,
        .filtration,
        .modernization,
        .oil,
        .pomp,
        .press,
        .production,
        .productionStainless,
        .project,
        .projecting,
        .reception,
        .reconstruction,
        .regeneration,
        .responsibility,
        .rexroth,
        .scoope,
        .securitySystem,
        .start,
        .title,
        .titleCompany,
        .why
    ) .maxWidth {
        display: block !important;
    }

    section:is(
        .activation,
        .aggregates,
        .atexBoxes,
        .atexTests,
        .constructionDetails,
        .designing,
        .designingCompany,
        .diagnostics,
        .filtration,
        .modernization,
        .oil,
        .pomp,
        .press,
        .production,
        .productionStainless,
        .project,
        .projecting,
        .reception,
        .reconstruction,
        .regeneration,
        .responsibility,
        .rexroth,
        .scoope,
        .securitySystem,
        .start,
        .title,
        .titleCompany,
        .why
    ) :is(.title, .wrapper, .content, .description, .items, .foto, .text, .dotted) {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    section:is(
        .activation,
        .aggregates,
        .atexBoxes,
        .atexTests,
        .constructionDetails,
        .designing,
        .designingCompany,
        .diagnostics,
        .filtration,
        .modernization,
        .oil,
        .pomp,
        .press,
        .production,
        .productionStainless,
        .project,
        .projecting,
        .reception,
        .reconstruction,
        .regeneration,
        .responsibility,
        .rexroth,
        .scoope,
        .securitySystem,
        .start,
        .title,
        .titleCompany,
        .why
    ) :is(p, h1, h2, h3, h4, h5, ul, ol) {
        width: auto !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    section:is(
        .activation,
        .aggregates,
        .atexTests,
        .constructionDetails,
        .designing,
        .designingCompany,
        .diagnostics,
        .filtration,
        .modernization,
        .oil,
        .pomp,
        .press,
        .production,
        .productionStainless,
        .project,
        .projecting,
        .reception,
        .reconstruction,
        .regeneration,
        .responsibility,
        .rexroth,
        .scoope,
        .securitySystem,
        .start,
        .titleCompany,
        .why
    ) :is(.foto, .image, .picture) img,
    section:is(.activation, .aggregates, .project, .projecting, .reception) > img {
        position: static !important;
        inset: auto !important;
        display: block;
        width: 100%;
        height: auto;
        margin: 24px auto;
        transform: none !important;
    }

    section:not(.slider) h1 {
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: 1.02 !important;
    }

    section:not(.slider) h2 {
        font-size: clamp(27px, 8vw, 36px) !important;
        line-height: 1.08 !important;
    }

    section.start div.maxWidth div.start {
        padding-left: 0;
    }

    section.start div.maxWidth div.start > div,
    section.start div.maxWidth div.start div {
        display: block;
    }

    section.start div.maxWidth div.start div.description {
        width: 100%;
        max-width: 100%;
        padding-bottom: 24px;
    }

    section.start div.maxWidth div.description h2 {
        padding-top: 38px;
    }

    section.start div.maxWidth div.description p {
        padding-right: 0;
    }

    section.start div.maxWidth div.foto img,
    section.start div.maxWidth div:nth-of-type(2) div.foto img,
    section.designingCompany div div.foto img {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
    }

    section.description div p {
        padding: 38px 0;
        font-size: 20px;
        line-height: 1.45;
    }

    section.designingCompany div.container.maxWidth,
    section.designingCompany div.container.maxWidth > div {
        display: block;
    }

    section.designingCompany div div.description {
        padding-left: 0;
    }

    section.designingCompany div div.description h1:nth-child(1) {
        padding-top: 36px;
    }

    section.designingCompany div div.foto {
        margin-top: 28px;
    }

    section.calculation div.background {
        height: auto !important;
        min-height: 270px;
        padding: 40px 20px;
    }

    section.calculation h2,
    section.calculation a,
    section.calculation img {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: block;
        margin: 0 auto 18px;
        text-align: center;
    }

    section.servis div.container.maxWidth div.offset {
        margin-left: 0;
    }

    section.servis div.shadow,
    section.servis div.shadow div.active {
        display: block;
        width: 100%;
        height: auto;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    section.servis div.blind { display: none; }

    section.servis div.carousel {
        width: max-content;
        padding: 0 0 8px;
        animation: none;
        transform: none !important;
    }

    section.servis div.carousel div.element {
        width: 220px;
        height: 280px;
        margin-right: 14px;
    }

    section.questions div.wrapper,
    section.support div.wrapper,
    section.contact div.wrapper {
        width: calc(100% - 40px);
    }

    section.questions div.wrapper h5.extra {
        font-size: 26px;
        padding: 26px 0;
    }

    section.questions div.wrapper .question p {
        padding: 15px 44px 15px 20px;
        font-size: 15px;
    }

    section.questions div.wrapper .question p img.question { display: none; }
    section.questions div.wrapper .question p img.arrow { right: 14px; }
    section.questions div.wrapper div.disabled p { padding: 22px 20px; }

    section.support div.wrapper {
        display: block;
    }

    section.support div.items,
    section.support div.description {
        width: 100%;
    }

    section.support div.item {
        margin-right: 0;
    }

    section.support div.container div.description p {
        padding-right: 0;
    }

    section.contact div.wrapper {
        display: block;
    }

    section.contact div.wrapper > div {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        flex-basis: auto !important;
    }

    section.contact div.wrapper > div:first-child {
        padding: 0 0 30px;
    }

    section.contact div.line,
    section.contact div.small {
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    section.contact div.description {
        width: 100% !important;
        padding: 0 20px 88px;
    }

    section.contact div.container div.description h3 {
        padding-top: 36px;
    }

    section.contact div.container div.description p {
        padding-right: 0;
    }

    section.contact form input,
    section.contact form textarea {
        min-height: 48px;
        font-size: 16px;
    }

    section.contact form textarea { min-height: 130px; }

    section.contact form div.checkbox {
        height: auto;
        min-height: 108px;
        margin-right: 0;
    }

    section.contact form .checkbox div.label {
        margin-left: 54px;
        padding-top: 13px;
        font-size: 13px;
    }

    section.contact form .checkbox .checkmark { left: 18px; }
    section.contact form .checkbox img { left: 21px; }
    section.contact form div.alert { width: 100%; }

    section.configurator {
        padding-bottom: 38px;
    }

    section.configurator > .container {
        width: calc(100% - 24px);
    }

    section.configurator .block h1 {
        padding: 38px 8px 16px;
    }

    section.configurator .block > p {
        padding: 0 8px 24px;
    }

    section.configurator .configurator {
        padding: 14px 10px 24px;
        box-shadow: none;
    }

    section.configurator .configurator > .title {
        display: block;
    }

    section.configurator .configurator > .title h3 {
        font-size: 27px;
    }

    section.configurator .configurator > .title .description {
        display: flex;
        width: 100%;
        padding: 12px 0;
    }

    section.configurator .configurator .application {
        padding: 0 14px;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
    }

    section.configurator .configurator .application .title {
        display: block;
    }

    section.configurator .configurator .application .title .titleBlack {
        padding-left: 0;
        padding-top: 0;
    }

    section.configurator .configurator .application .stepLevel {
        display: block;
        padding-bottom: 12px;
    }

    section.configurator .configurator .application .stepLevel .level {
        width: 100%;
        margin-top: 10px;
    }

    section.configurator .configurator .application .stepLevel .level div {
        flex: 1 1 auto;
        width: auto;
    }

    section.configurator .configurator .typeApplication {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    section.configurator .configurator .typeApplication .card {
        border: 1px solid #ddd;
    }

    section.configurator .configurator .typeApplication .card img {
        display: block;
        max-width: 110px;
        padding: 15px;
    }

    section.configurator .configurator .application .step > .container,
    section.configurator .configurator .application .step.conditions .container,
    section.configurator .configurator .application .step.technicalSummary .container,
    section.configurator .configurator .application .step.form .container,
    section.configurator .configurator .application .step.form form {
        display: block;
        width: 100%;
    }

    section.configurator .configurator .application .step .parameters,
    section.configurator .configurator .application .step .results,
    section.configurator .configurator .application .step .checkboxes,
    section.configurator .configurator .application .step .extraInformation,
    section.configurator .configurator .application .step.form div.form,
    section.configurator .configurator .application .step.form div.text {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        border-right: 0;
    }

    section.configurator .configurator .application .parameters input,
    section.configurator .configurator .application .extraInformation .param input,
    section.configurator .configurator .application .step.form form input,
    section.configurator .configurator .application .step.form textarea,
    section.configurator .configurator .application .step.form div.checkbox {
        width: 100%;
        min-height: 46px;
    }

    section.configurator .configurator .application .parameters .results .line,
    section.configurator .configurator .application .parameters .secondLine,
    section.configurator .configurator .application .step.conditions .container .extraInformation .line,
    section.configurator .configurator .application .step.conditions .container .extraInformation .secondLine,
    section.configurator .configurator .application .step.technicalSummary .line {
        display: none;
    }

    section.configurator .configurator .application .parameters .strengthValue:nth-of-type(2) {
        margin-left: 0;
    }

    section.configurator .configurator .application .summary {
        gap: 10px;
    }

    section.configurator .configurator .application .summary button {
        width: calc(50% - 5px) !important;
        min-width: 0;
        min-height: 46px;
        flex: 1 1 calc(50% - 5px);
        padding: 10px 12px;
        font-size: 16px;
    }

    section.configurator .configurator .application .disabled.messageSend {
        padding: 60px 20px 20px;
    }

    footer {
        padding: 20px 0 30px;
    }

    footer div.container.maxWidth {
        width: 100%;
        padding: 0;
    }

    footer section.top,
    footer section.bottom {
        width: calc(100% - 40px);
    }

    footer section.top {
        display: block;
        margin-bottom: 24px;
    }

    footer section.top > div,
    footer section.top div.first,
    footer section.top div.last {
        width: 100%;
        padding: 16px 4px;
    }

    footer section.bottom {
        display: block;
        margin: 0 auto;
        padding-top: 18px;
    }

    footer section.bottom p,
    footer section.bottom p.first {
        margin: 8px 0;
        padding: 0;
        border: 0;
    }

    footer section.bottom p span { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
