@charset "UTF-8";

/* ROBOTO LIGHT */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.eot");
    src: local("Roboto Light"), local("Roboto-Light"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-300.svg#Roboto") format("svg");
}

/* ROBOTO MEDIUM */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.eot");
    src: local("Roboto Medium"), local("Roboto-Medium"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-500.svg#Roboto") format("svg");
}
/* ROBOTO BOLD */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.eot");
    src: local("Roboto Bold"), local("Roboto-Bold"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-700.svg#Roboto") format("svg");
}
/* ROBOTO REGULAR */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.eot");
    src: local("Roboto"), local("Roboto-Regular"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.eot?#iefix") format("embedded-opentype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.woff2") format("woff2"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.woff") format("woff"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.ttf") format("truetype"),
    url("/local/assets/fonts/roboto/web/roboto-v20-latin_cyrillic-regular.svg#Roboto") format("svg");
}


/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) {
    html {
        overflow: hidden;
        height: 100%;
    }

    body {
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    html {
        overflow: hidden;
        height: 100%;
    }

    body {
        overflow: auto;
        height: 100%;
    }
}

/* OTHER SETTINGS */
:root {
    --accent-color: #2F3A83;

    --header-background-color: #ffffff;
    --header-text-color: #373737;
    --header-accent-color: #D33947;

    --footer-accent-color: #D33947;
    --footer-background-color: #222222;
    --footer-text-color: #ffffff;
}


html, body {
    font-family: "Roboto";
    font-size: 16px;
    background-color: #ffffff;
    scroll-behavior: smooth;
}

.af-text__accent {
    color: #6F82FF;
}
.af-section {
    position: relative;
    width: 100%;
}

.af-section-wrapper {
    width: 60%;
    margin: auto;
    position: relative;
}

/*Breadcrumbs*/

.af-breadcrumbs {
    display: block;
    width: auto;
    line-height: 1;
    margin: 0;
    padding: 10px 0;
}

.af-wrapper-breadcrumbs {
    width: 60%;
    margin: auto;
}

.af-breadcrumbs-item {
    display: inline-block;
    width: auto;
    font-size: 14px;
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
}

.af-breadcrumbs-item > .af-breadcrumbs-title {
    color: #929292;
}

.af-breadcrumbs-item > .af-breadcrumbs-title::before {
    display: inline-block;
    content: "\00A0\003E\00A0";
    font-size: 18px;
    vertical-align: middle;
}

.af-breadcrumbs-item .af-breadcrumbs-link,
.af-breadcrumbs-item .af-breadcrumbs-link .af-breadcrumbs-title {
    color: var(--accent-color);
    text-decoration: none;
}

.af-breadcrumbs-item .af-breadcrumbs-link:not(:first-child)::before {
    display: inline-block;
    content: "\00A0\003E\00A0";
    font-size: 18px;
    vertical-align: middle;
}

.af-breadcrumbs__big {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgba(250, 250, 250, 0.8);
    color: #2F3A83;
    z-index: 9;
    box-shadow: inset 0 0 2px 0 lightgrey;
}

.af-breadcrumbs__big-link {
    text-decoration: none;
    color: inherit;
    transition: linear 200ms;
    padding-left: 20px;
    box-sizing: border-box;
    background-size: auto 16px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(../img/arrow-left.svg);
}

.af-breadcrumbs__big-link:hover {
    color: #ae2935;
}

.af-breadcrumbs__big-wrapper {
    display: flex;
    position: relative;
    width: 60%;
    margin: auto;
    justify-content: space-between;
}

.af-breadcrumbs__big-logo {
    height: 40px;
    margin: auto 0;
}
.af-main .af-page-anchor {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .7);
    box-sizing: border-box;
    cursor: pointer;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px auto;
    background-image: url("../img/arrow-down.svg");
    position: fixed;
    right: 5vw;
    bottom: 10vh;
    transition: 100ms ease;
    transform: rotate3d(0, 0, 1, 180deg) scale3d(0, 0, 1);
}
.scrolled .af-main .af-page-anchor {
    transform: rotate3d(0, 0, 1, 180deg) scale3d(1, 1, 1);
}

/*End of Breadcrumbs*/

/*Header*/
.af-drainline-header {
    height: 550px;
    background-image: url(../img/header-bg.png);
    background-position: top;
    background-size: 100% 360px;
    background-repeat: no-repeat;
}

.af-drainline-header-wrapper {
    height: 100%;
    background-image: url(../img/header-bg-bot.png);
    background-position: bottom;
    background-size: 100% 190px;
    background-repeat: no-repeat;
}

.button-more-wrapper {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 123px;
    left: 0;
}

.af-button-more {
    padding: 12px 36px;
    color: #fff;
    font-size: 14px;
    left: 24px;
    letter-spacing: 1px;
    background-color: #D33947;
    cursor: pointer;
    transition: linear 200ms;
    border-radius: 2px;
    display: inline-block;
}

.af-button-more:hover {
    background-color: #bd081d;
}

.af-header-content-wrapper {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    padding-top: 60px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.af-header-left {
    align-self: flex-start;
    max-width: 470px;
}

.af-header-right {
    align-self: flex-end;
    background-color: #2b398a;
    padding: 22px 41px 32px 36px;
    max-width: 370px;
    box-sizing: border-box;
}

.af-header-right-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.af-heading__upper {
    font-size: 36px;
    line-height: 1.45;
    display: block;
    margin-bottom: 14px;
    font-weight: 400;
}

.af-heading {
    font-weight: 400;
    font-size: 25px;
    line-height: 1.3;
    margin-top: 0;
}

.af-header-text {
    font-size: 14px;
    line-height: 1.7;
}


.af-header-right-list-item {
    position: relative;
    font-size: 14px;
    line-height: 1.4;
    margin: 7px 0;
}

.af-header-right-list-item::before {
    content: "";
    width: 8px;
    height: 8px;
    top: 5px;
    left: -15px;
    border-radius: 1px;
    background-color: #6F82FF;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
}
/*End of Header*/
/*Info*/
.af-subheading {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 605px;
    margin-top: 0;
    margin-bottom: 20px;
}

.af-info-content-wrapper {
    display: flex;
    justify-content: space-between;
}

.af-info-text {
    max-width: 600px;
    padding-left: 40px;
    box-sizing: border-box;
}

.af-info-img {
    width: 540px;
    height: 520px;
    margin-right: 25px;
}

.af-info-text__gray {
    color: #696969;
    font-weight: 700;
}

.af-info-text-list {
    list-style: none;
    color: #696969;
    line-height: 1.7;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

.af-info-text-list-item {
    margin: 15px 0;
    position: relative;
    transition: linear 300ms;
}

.af-info-text-list-item::before {
    content: attr(data-item);
    position: absolute;
    color: #fff;
    background-color: #A8A8A8;
    width: 30px;
    height: 30px;
    display: inline-block;
    top: 0;
    left: -40px;
    text-align: center;
    line-height: 30px;
}

.af-drainline-info {
    padding-bottom: 30px;
}

.af-info-text-list-item:hover::before {
    background-color: #D33947;
}

.af-info-text-list-item:first-child {
    margin-top: 0;
}

.item__2 {
    transform: rotate(1deg);
    transform-origin: center;
}

.item__4:first-child {
    transform-origin: center;
    transform: rotate(-4deg);
}

.af-info-svg {
    transition: linear 300ms;
    position: relative;
}

.af-info-svg-square {
    fill: #6F82FF;
    transition: linear 300ms;
}

.item__animate {
    transform: translate(0, -5%);
    z-index: 10;
}

.item__4:first-child.item__animate {
    transform: rotate(-4deg) translate(0, -5%);
}

.af-info-svg-square.item__animate rect {
    fill: #D33947;
    transition: linear 300ms;
}

/*End of Info*/
/*Carousel*/
.af-carousel-header {
    background-color: #FAFAFA;
    padding-top: 25px;
    position: relative;
    box-shadow: 0 0 10px lightgray;
    border-bottom: 1px solid #2f3a83;
}

.af-carousel-mark {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: rotate(45deg);
    background-color: #FAFAFA;
    -webkit-box-shadow: 3px 3px 5px -3px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    3px 3px 5px -3px rgba(50, 50, 50, 0.3);
    box-shadow:         3px 3px 5px -3px rgba(50, 50, 50, 0.3);
    border-right: 1px solid #2f3a83;
    border-bottom: 1px solid #2f3a83;
    transform-origin: center;
    transition: linear 200ms;
}

.af-carousel-header .af-carousel-cards {
    padding-bottom: 15px;
}

.subheading__carousel {
    max-width: unset;
}

.af-carousel-cards {
    display: flex;
    justify-content: space-between;
}

.af-carousel-card-img-wrapper {
    width: 195px;
    height: 100px;
    max-width: 100%;
    margin: auto auto 25px;
    max-height: 100%;
    display: flex;
    justify-content: center;
}

.af-carousel-card-item {
    width: 245px;
    height: auto;
    cursor: pointer;
    position: relative;
    padding: 0 5px 5px;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.af-carousel-card-item.card-item__active {
    border-color: #2f3a83;
}

.af-carousel-card-wrapper {
    width: 100%;
    height: auto;
    line-height: 1;
    font-size: 14px;
    text-align: center;
}

.af-carousel-icon {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    fill: #929292;
    transition: linear 200ms;
}

.card-item__checked {
    position: relative;
    color: #6F82FF;
}

.card-item__checked .af-carousel-icon {
    fill: #6F82FF;
}


.card-item__checked::after {
    content: "Выбрано";
    position: absolute;
    background-color: #6F82FF;
    width: 80px;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    right: 0;
    top: 0;
    text-align: center;
}

.card-item__active {
    color: #2F3A83;
    cursor: default;
}

.card-item__active .af-carousel-icon {
    fill: #2F3A83;
}

.af-carousel-header-filter-wrapper {
    height: auto;
    padding-bottom: 30px;
}

.af-carousel-header-filter {
    width: auto;
    height: auto;
    color: #787878;
    border-radius: 3px;
    border: 1px solid #EAEAEA;
    font-size: 14px;
    padding: 5px 50px 5px 8px;
    box-sizing: border-box;
}

.af-carousel-settings .af-carousel-header-filter {
    margin-right: 30px;
}

.af-drainline-carousel-wrapper {
    padding-top: 35px;
}

/*End of Carousel*/

/*Cart*/
.af-drainline-cart {
    padding-bottom: 60px;
}

.af-drainline-cart::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

.af-drainline-cart-wrapper {
    display: flex;
    justify-content: space-between;
}

.af-cart-item {
    width: 250px;
    border-radius: 2px;
    padding: 5px 18px 14px;
    box-shadow: 0 0 3px lightgray;
    box-sizing: border-box;
    transition: linear 150ms;
    position: relative;
    margin: 0 5px;
}

.af-cart-item:hover {
    box-shadow: 0 0 10px lightgray;
}

.af-cart-item-wrapper {
    width: 100%;
    margin: auto;
    position: relative;
    height: 100%;
}

.af-cart-item-img-wrapper {
    width: 100%;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.af-cart-item-img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    width: auto;
    height: 60px;
    margin: auto;
}

.af-cart-link-wrapper {
    width: 100%;
    text-align: center;
}

.af-cart-item-link {
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    padding: 14px 40px;
    background-color: #3E4CA4;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 12px;
    transition: linear 150ms;
    cursor: pointer;
}

.af-cart-item-link:hover {
    background-color: #6F82FF;
}

.af-cart-item-content {
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 20px;
}

.af-cart-item-content-text {
    color: #2F3A83;
    line-height: 1.4;
    font-size: 14px;
    display: block;
    height: 2.8em;
    margin-bottom: 20px;
    overflow: hidden;
}
.af-cart-item-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.af-cart-item-close-img {
    width: 100%;
    height: 100%;
}

.af-cart-item-close-img rect {
    transition: linear 150ms;
}

.af-cart-item-close:hover .af-cart-item-close-img rect {
    fill: #A8A8A8;
}

.af-cart-item-content-price {
    font-size: 30px;
    line-height: 1.8;
    color: #2F3A83;
}

.af-cart-price-currency {
    font-size: 21px;
}

.cart-item__empty .af-cart-item-content-price {
    visibility: hidden;
}

.cart-item__empty .af-cart-item-content-text{
    text-align: center;
    line-height: 1.8;
    height: auto;
    margin-top: 20px;
}

.cart-item__empty .af-cart-item-close {
    visibility: hidden;
}

.cart__empty .af-cart-total-wrapper {
    visibility: visible;
}



.af-cart-total-wrapper {
    margin-top: 30px;
}

.af-cart-total-text {
    font-size: 24px;
    line-height: 53px;
    color: #313131;
}

.af-cart-total-price {
    font-size: 36px;
    color: #313131;
}

.af-cart-total-link-wrapper {
    width: 100%;
    position: relative;
    margin-top: 15px;
    text-align: left;
}

.af-cart-total-link {
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    background-color: #AE2935;
    padding: 15px 40px;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: linear 150ms;
}

.button__disabled {
    background-color: gray;
    cursor: default;
}

.button__disabled::after {
    content: "выберите все 4 позиции для добавления комплекта в корзину";
    position: absolute;
    bottom: -20px;
    left: 0;
    text-align: left;
    color: gray;
    text-transform: lowercase;
    font-size: 12px;
}

.af-cart-total-link:hover {
    background-color: #a02531;
}

.button__disabled:hover {
    background-color: gray;
}

.af-carousel-header[data-active="canal"] .material__filter {
    display: none;
}

.af-carousel-header[data-active="syphon"] .material__filter, .af-carousel-header[data-active="syphon"] .size__filter {
    display: none;
}

.af-carousel-header[data-active="dop"] .material__filter, .af-carousel-header[data-active="dop"] .size__filter {
    display: none;
}
/*End of Cart*/
/*Gallery*/
.gallery__open {
    width: 345px;
    height: 230px;
    background-color: #6F82FF;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
}

.gallery-show-more-text {
    margin: auto;
}

.gallery-show-more-plus {
    font-size: 42px;
    margin-bottom: 10px;
}

.gallery-show-more-link {
    text-decoration: underline;
    font-size: 14px;
    margin-top: 0;
}

.af-gallery-link {
    width: 370px;
    height: 100%;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.af-gallery-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.af-gallery-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transition: linear 200ms;
    opacity: 0;
}

.af-gallery-link:hover::after {
    opacity: 1;
}

.af-gallery-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/loopa.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
    z-index: 1;
    transform: scale(0);
    transition: linear 200ms;
}

.af-gallery-link:hover::before {
    transform: scale(1);
}

.gallery__small {
    display: inline-block;
    width: 100%;
    height: 50%;
    max-height: 232px;
}

.gallery__small:nth-child(2)::before {
    background-image: none;
}

.gallery__small:nth-child(2)::after {
    background-color: transparent;
}

.gallery__small:first-child {
    margin-bottom: 18px;
}

.link-wrapper {
    display: inline-block;
    height: 100%;
}

.af-drainline-gallery-wrapper {
    height: 482px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
}

.gallery-item {
    flex-basis: 33%;
    margin-right: 20px;
    cursor: pointer;

}

.gallery-item:nth-child(3) {
    margin-right: 0;
}
/*End of Gallery*/

div[data-card="canal"] svg {
    width: 150px;
    height: 55px;
    margin: auto;
}

div[data-card="panel"] svg {
    width: 140px;
    height: 45px;
    margin: auto;
}

div[data-card="syphon"] svg {
    width: 60px;
    height: 58px;
    margin: auto;
}

div[data-card="dop"] svg {
    width: 120px;
    height: 80px;
    margin: auto;
}

@media (max-width: 1700px) {
    .button-more-wrapper {
        width: 50%;
    }
}

@media (max-width: 1400px) {
    .af-section-wrapper {
        width: 90%;
    }

    .af-wrapper-breadcrumbs {
        width: 90%;
    }

    .af-breadcrumbs__big-wrapper {
        width: 90%;
    }

    .button-more-wrapper {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .af-section-wrapper {
        width: 95%;
    }

    .af-wrapper-breadcrumbs {
        width: 95%;
    }

    .af-breadcrumbs__big-wrapper {
        width: 95%;
    }
}

@media (max-width: 1080px) {
    .button-more-wrapper {
        width: 50%;
    }
}

@media (max-width: 835px) {
    .af-drainline-header {
        height: 635px;
    }

    .af-drainline-header-wrapper {
        width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
    }

    .af-drainline-header-wrapper {
        background-size: 100% 275px;
        background-image: url(../img/header-bg-bot-mobile.png);
        background-position: left bottom;
    }

    .af-header-content-wrapper {
        flex-wrap: wrap;
    }

    .af-header-right {
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 340px;
        height: 300px;
    }

    .af-header-right-list-item {
        font-size: 12px;
        line-height: 1.5;
    }

    .af-header-right-heading {
        font-size: 16px;
    }

    .button-more-wrapper {
        width: 50%;
        bottom: 220px;
    }

    .af-info-text-paragraph {
        height: 44px;
        overflow: hidden;
        display: inline-block;
        opacity: 0.6;
        transition: linear 200ms;
    }

    .paragraph__expanded {
        transition: linear 200ms;
    }

    .af-info-text-list-item:hover::before {
        background-color: #A8A8A8;
    }

    .paragraph__expanded .af-info-text-paragraph {
        height: auto;
        opacity: 1;
        transition: linear 200ms;
    }

    .paragraph__expanded::before {
        background-color: #D33947;
    }

    .paragraph__expanded:hover::before {
        background-color: #D33947;
    }

    .af-carousel-card-wrapper {
        height: 100%;
    }

    .af-carousel-card-item {
        width: 170px;
        height: 170px;
    }

    .af-carousel-card-img-wrapper {
        height: 50px;
        width: 100%;
        margin: 50px 0 25px 0;
    }

    .af-carousel-header .af-carousel-cards {
        padding-bottom: 50px;
    }

    .subheading__carousel {
        margin-bottom: 60px;
    }

    .af-carousel-card-text {
        font-size: 16px;
    }

    .af-carousel-header-filter-wrapper {
        height: 30px;
    }

    .af-cart-item {
        width: 150px;
        padding: 8px 12px;
    }

    .af-cart-item-link {
        padding: 9px 30px;
        font-size: 10px;
    }

    .af-cart-item-img-wrapper {
        height: 55px;
    }

    .af-cart-item-content-text {
        font-size: 10px;
        height: 28px;
    }

    .af-cart-item-content-price {
        font-size: 20px;
        line-height: 1.3;
    }

    .af-cart-item-content {
        height: auto;
    }

    .af-cart-item-close {
        height: 20px;
        width: 20px;
    }

    .af-subheading {
        font-size: 20px;
    }

    .af-drainline-gallery-wrapper {
        height: 300px;
    }

    .gallery__small:first-child {
        margin-bottom: 12px;
    }

    .gallery__small {
        max-height: 145px;
    }
}

@media (max-width: 450px) {
    .af-carousel-cards {
        flex-wrap: wrap;
    }

    .af-breadcrumbs__big-logo {
        display: none;
    }

    .af-heading__upper {
        font-size: 34px;
        margin-bottom: 5px;
    }

    .af-heading {
        font-size: 21px;
        line-height: 28px;
        font-family: "Roboto";
        font-weight: 300;
    }

    .af-drainline-cart-wrapper {
        flex-wrap: wrap;
    }

    .af-drainline-header {
        background-size: auto 435px;
        height: 840px;
    }

    .af-drainline-header-wrapper {
        background-position: left 435px;
        background-size: 100% 150px;
    }

    .af-drainline-header::before {
        content: '';
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 435px;
    }

    .button-more-wrapper {
        width: 100%;
        bottom: 345px;
    }

    .af-carousel-cards {
        justify-content: space-around;
    }

    .af-header-right {
        max-width: 100%;
        height: auto;
    }

    .af-section-wrapper {
        padding-top: 25px;
    }

    .af-info-content-wrapper {
        flex-wrap: wrap;
    }

    .af-info-img {
        width: 275px;
        height: 264px;
        margin: auto;
    }

    .af-subheading {
        font-size: 16px;
    }

    .af-drainline-info {
        padding-bottom: 40px;
    }

    .af-carousel-card-item {
        width: 140px;
        height: 150px;
    }

    .af-carousel-card-text {
        font-size: 12px;
    }


    .af-carousel-card-img-wrapper {
        margin-top: 25px;
    }

    .card-item__checked::after {
        font-size: 9px;
        padding: 4px 11px;
        width: auto;
        height: auto;
        line-height: 1.5;
        letter-spacing: 1px;
    }

    .af-cart-item {
        width: 140px;
        margin: 7px 5px;
    }

    .af-cart-item-img-wrapper {
        height: 45px;
    }

    .af-cart-total-content {
        font-size: 18px;
        line-height: 1;
    }

    .af-cart-total-price, .af-cart-total-text {
        font-size: 18px;
        line-height: 1;
    }

    .af-cart-total-wrapper {
        margin-top: 25px;
    }

    .af-cart-total-link-wrapper {
        text-align: center;
    }

    .button__disabled::after {
        bottom: -45px;
    }

    .af-drainline-gallery-wrapper {
        flex-wrap: wrap;
        height: auto;
        justify-content: space-between;
    }

    .gallery-item {
        flex-basis: calc(50% - 7px);
        margin-right: 7px;
        height: auto;
    }

    .gallery-item:nth-child(2) {
        margin-right: 0;
    }

    .gallery__small {
        flex-basis: 100%;
        max-width: 100%;
        height: auto;
    }

    .gallery__small:first-child {
        margin-top: 7px;
    }

    .subheading__carousel {
        margin-bottom: 30px;
    }

    .af-carousel-header .af-carousel-cards {
        padding-bottom: 30px;
    }

    .gallery-item:nth-child(3) {
        flex-basis: 100%;
        max-width: 100%;
    }

    .af-carousel-header-filter-wrapper {
        display: block;
        line-height: 35px;
    }
}

@media (max-width: 400px) {
    .af-drainline-header-wrapper {
        background-position: center 550px;
    }

    .af-drainline-header::before {
        height: 550px;
    }

    .af-drainline-header {
        height: 1000px;
        background-size: auto 550px;
    }

    .button-more-wrapper {
        bottom: 390px;
    }

    .af-carousel-header .af-carousel-cards {
        padding-bottom: 0;
    }

    .subheading__carousel {
        margin-bottom: 30px;
    }
}