/* UNDER 370px */
@media screen and (max-width: 370px) {
    #hero .highlight {
        transform: rotate(-4.5deg) translateY(-.2rem);
    }
}
/* OVER 380px */
@media screen and (min-width: 380px) {
    #smart-tap .tap-img-container {
        max-width: 30%;
    }
    #smart-tap .heading p,
    #smart-tap .tap-led {
        max-width: 70%;
    }
    #smart-tap-img {
        transform: translateY(-25%);
        margin: 0 auto;
    }
}

/* MOBILE */
@media screen and (max-width: 576px) {
    .row {flex-wrap: wrap}

    #foods .composition-image {
        max-width: calc(100% + 4rem);
        margin-left: -2rem;
        margin-bottom: 2rem;
    }

    #four-options .image .bg {
        margin: 0 0 2rem -2rem;
        max-width: calc(100% + 4rem);
        object-fit: cover;
        width: calc(100% + 4rem);
        border-top: .2rem solid var(--cls-latt-blue-lighter);
        border-bottom: .2rem solid var(--cls-latt-blue-lighter);
    }

    #buy-it .cta img {
        margin-left: -2rem;
    }
}


/* OVER MOBILE */
@media screen and (min-width: 576px) {
    section .row,
    footer .row {padding: 4rem 2rem;}

    #four-options .row:first-child {padding: 2rem}

    .hide-over-mobile {display: none}
    .mobile-heading {display: none}

    #hero {
        background: url('/wp-content/themes/divi-child/assets/1_blokk/background.jpg') no-repeat 0 100%;
        background-size: cover;
        padding-bottom: 0;
    }
    #hero .row {padding-bottom: 0}
    #hero .top-arrow {
        transform: translateX(0);
        margin: 0 5% 0 auto;
    }
    #hero .latt-image {
        max-width: 50%;
    }
    #hero ul {
        max-width: 100%;
        padding-left: clamp(8%, 10%, 12%);
        margin-top: 1.5rem;
    }
    #hero ul li:before {
        margin-right: 0;
        width: 3rem;
        height: 3rem;
    }
    #hero .bottom-arrow {
        height: auto;
        max-height: 8rem;
    }

    #dimensions .row {padding-top: 2rem}
    #dimensions .text-block {
        max-width: 50%;
    }
    #latt-cutout {display: none}
    #latt-cutout img {max-width: 23rem;}
    #latt-dimensions {display: block}
    #latt-dimensions img {
        max-width: 41rem;
        margin: 0 auto;
    }

    #nature-img {
        max-width: 100%;
        margin-left: -15%;
    }

    #smart-tap .heading p, #smart-tap .tap-led {
        max-width: 100%;
    }
    #smart-tap-img {
        transform: translateY(0);
        margin-right: auto;
    }

    #foods .composition-image {
        margin-bottom: 1rem;
    }

    #pros .mobile-stamp-image {display: none}
    #pros .content {padding: 1rem 3rem;}

    #four-options .option-block:nth-child(even) .col:first-child {
        order: 2;
        min-width: calc(55% - 3rem);
    }
    #four-options .option-block:nth-child(even) .col:last-child {
        order: 1;
    }

    .option-block .image .bg {
        height: 97%;
        width: auto;
        object-fit: cover;
        border-radius: 0.4rem;
    }

    #four-options .arrow {
        transform: rotate(145deg);
        max-width: 23rem;
        left: -2.5rem;
    }
    #four-options .block-2 .arrow,
    #four-options .block-4 .arrow {
        transform: scale(-1) rotate(25deg);
        left: auto;
        right: -3rem;
    }
    #four-options .block-1 {padding-top: 0}

    #footer-top .circle {
        max-width: 35rem;
        transform: none;
    }
}


/* GLASS BLOCK - OVER 800PX */
@media screen and (min-width: 800px) {
    #glass .image {min-width: 24rem}
    #glass-img {
        width: 100%;
        transform: translateY(-10%);
    }
    #glass .image {min-width: 24rem;}
    #glass-arrow {
        transform: translate(-10%, 50%);
    }
}
/* GLASS BLOCK - between 576 and 800PX */
@media screen and (min-width: 576px) and (max-width: 800px) {
    #glass-img {
        width: 30%;
    }
}

/* UNDER TABLET */
@media screen and (max-width: 992px) {
    #pros .arrow {
        transform: scaleX(-1) translate(-90%, 20%);
        max-width: 70%;
    }

    /* button width fix - because of the content div padding */
    #pros .button {
        margin-left: -1rem;
        width: calc(100% + 2rem);
    }

    #copyright-bar .copy-text {
        margin-bottom: 1rem;
    }
}


/* ON TABLET */
@media screen and (min-width: 576px) and (max-width: 992px) {
    #foods .composition-image {
        margin: 0 auto 1rem auto;
    }

    #buy-it .cta .price {
        font-size: 3.5rem;
        text-align: center;
    }
}


/* OVER TABLET */
@media screen and (min-width: 992px) {
    section .row,
    footer .row {padding: 6rem 2rem;}


    #four-options .row:first-child {padding: 2rem}

    #hero ul {margin-top: 2.5rem;}
    #hero .top-arrow {margin: 0 10% 0 auto;}

    #glass .image {min-width: 28rem;}

    #nature-img {
        max-width: clamp(64rem, 47vw + 0.1rem, 120rem);
        margin-left: calc(-2rem - 14vw);
    }

    #smart-tap .row.pos-relative:before {
        right: 25%;
        top: -4rem;
        width: 15rem;
        height: 15rem;
        z-index: 3;
        transform: rotate(0deg);
    }
    #smart-tap .content > .col {
        min-width: 30%;
        max-width: 33%;
    }
    #smart-tap .tap-led {
        position: relative;
        z-index: 3;
    }
    #smart-tap .tap-led:after {
        content: '';
        background: url('/wp-content/themes/divi-child/assets/4_blokk/line to led.svg') no-repeat;
        width: 50%;
        min-height: 50%;
        position: absolute;
        right: -45%;
        top: 42%;
        transform: translateY(-50%);
        z-index: 3;
    }
    #smart-tap-img {max-width: 13rem}
    #smart-tap .kitchen-and-nozzle {position: relative}
    #smart-tap .kitchen-and-nozzle img {
        max-width: 24rem;
    }
    #smart-tap .kitchen-and-nozzle:before {
        content: '';
        background: url('/wp-content/themes/divi-child/assets/4_blokk/line to kitchen sink.svg') no-repeat;
        width: 50%;
        min-height: 50%;
        position: absolute;
        left: -35%;
        top: 10%;
        z-index: 3;
    }
    #smart-tap .kitchen-and-nozzle:after {
        content: '';
        background: url('/wp-content/themes/divi-child/assets/4_blokk/line to tap head.svg') no-repeat;
        width: 50%;
        min-height: 50%;
        position: absolute;
        left: -40%;
        bottom: 0;
        transform: translateY(-40%);
        z-index: 3;
    }
    #tap-led-img {max-width: 24rem}

    #foods ul {
        padding-left: 3rem;
    }

    #foods:after {
        content: '';
        background: url('/wp-content/themes/divi-child/assets/5_blokk/over-tablet-arrow.svg') no-repeat;
        background-size: 100%;
        position: absolute;
        top: -12rem;
        left: 50%;
        width: 20vw;
        max-width: 29rem;
        height: 20vw;
        max-height: 24rem;
        z-index: 3;
        transform: translateX(-7.5rem);
        z-index: 4;
    }

    #filter-replacement {position: relative}
    #filter-replacement:before {
        content: '';
        position: absolute;
        background: url('/wp-content/themes/divi-child/assets/6_blokk/arrow.svg') no-repeat;
        left: 30%;
        top: -16rem;
        width: 18.2rem;
        height: 22.9rem;
        z-index: 4;
    }

    #pros .stamps-image {
        margin-left: -6rem;
        max-width: calc(100% + 6rem);
    }
    #pros .arrow {
        margin-left: -5rem;
        transform: translateY(100%);
    }
    #pros .content {
        padding: 3rem;
        border-left: .4rem solid var(--cls-latt-blue-lighter);
        border-bottom: .4rem solid var(--cls-latt-blue-lighter);
        border-top: none;
    }

    #buy-it .cta img {
        border-top: none;
        border-bottom: none;
        border-left: .6rem solid var(--cls-latt-blue-lighter);
        min-height: 80%;
        max-width: 100%;
    }
    #buy-it .cta .price {
        font-size: var(--text-size-heading-h2);
    }

    #footer-top .storage {
        min-height: 40rem;
        background-position: center 100%;
    }
    #footer-top .circle {
        max-width: 30%;
        transform: translate(15%, -1rem);
    }

    footer {
        background: url('/wp-content/themes/divi-child/assets/footer/background.jpeg') no-repeat;
        background-size: cover;
    }

    footer .contact {
        min-width: 35rem;
    }
    footer .contact ul li i {
        width: 3.5rem;
    }

    #copyright-bar p,
    #copyright-bar .links {
        font-size: 1.6rem;
    }
    #copyright-bar .copy-text {
        order: 1;
        text-align: left;
    }
    #copyright-bar .links {
        order: 2;
        justify-content: flex-end;
        gap: 2rem;
    }
}


/* OVER 1100PX */
@media screen and (min-width: 1200px) {
    #filter-replacement .text-col {
        position: relative;
        z-index: 3;
    }
    #filter-replacement .text-container {
        background-color: white;
        border-right: 0.6rem solid var(--cls-latt-blue-lighter);
        min-width: calc(140% + 8%);
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding: 4rem 4rem 4rem 0;
    }
}


/* OVER 1200PX */
@media screen and (min-width: 1200px) {
    #hero ul {margin-top: 4.5rem;}
    #hero ul li {margin-bottom: .5rem;}

    #latt-cutout {
        display: inline-block;
        max-width: min(45%, 30%);
    }
    #latt-dimensions {
        display: inline-block;
        max-width: 55%;
    }
    #dimensions .image-container {justify-content: flex-start}

    #filter-replacement:before {
        top: -6rem;
    }
}


/* OVER 1400PX */
@media screen and (min-width: 1400px) {
    #hero .subtitle {margin-bottom: -3rem}
}

@media screen and (min-width: 1440px) {
    #pet-waste-img {bottom: 20%}
}

@media screen and (min-width: 1500px) {
    #footer-top .circle {
        max-width: 25%;
    }
}