@media only screen and (max-width: 1500px) {
    body {
        font-size: 20px;
    }
}

@media only screen and (max-width: 1280px) {
    body {
        font-size: 18px;
    }

    .header .menu-wrap ul {
        grid-column-gap: 2vw;
    }

    .header .menu-wrap ul li:last-child a {
        padding: 8px 20px 11px;
    }
}

@media only screen and (max-width: 1024px) {
    .hamburger-menu {
        display: flex;
    }

    .header.scrolled {
        padding: 1em 0.5em;
    }

    .header.scrolled .hamburger-menu {
        background-color: #000;
    }

    .header {
        justify-content: flex-start;
        padding: 1em 0.5em;
        width: calc(100% - 1em);
    }

    .header .menu-wrap {
        position: absolute;
        right: 1em;
        bottom: 0;
        transform: translateY(100%) scale(0);
        transform-origin: top right;
        z-index: -1;
        opacity: 0;
        transition: all 0.45s ease;
        -webkit-transition: all 0.45s ease; /* Safari */
        -moz-transition: all 0.45s ease; /* Firefox */
        -o-transition: all 0.45s ease; /* Older Opera */
    }

    .header .menu-wrap ul {
        flex-direction: column;
        grid-row-gap: 2em;
        background: #fff;
        padding: 2em 3em 2.5em;
        font-size: 18px;
        border: 1px solid #000;
    }

    .header .menu-wrap ul li:last-child {
        margin-top: 0.8em;
    }

    .header .menu-wrap.shown {
        opacity: 1;
        z-index: 1000;
        transform: translateY(100%) scale(1);
    }

    .dr-hero-block .hc-lower {
        top: auto;
        bottom: 2em;
    }

    .dr-hero-block .hero-content h1 span:nth-child(2)::after, .dr-hero-block .hero-content h1 span:nth-child(1)::after {
        width: 1.25em;
        left: calc(-1.25em / 2);
    }

    .dr-hero-block .hero-content h1 {
        font-size: 3.3em;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --button-pad: 0.4em 1em 0.5em;
        --button-radius: 6px;

    }


    .header {
        padding: 0.5em;
        font-size: 0.8em;
    }

    .dr-hero-block .hero-content h2 {
        font-size: 1em;
        margin-top: 0;
    }

    .dr-hero-block .hc-lower {
        bottom: 1em;
    }

    .header .logo a {
        font-size: 1.3em;
    }

    .dr-hero-block .hero-content {
        padding-top: 8vw;
        height: calc(100% - 10vw);
    }

    .dr-block {
        padding: 3em 1em;
    }

    .dr-phototext-block .citem.photoside-left, .dr-phototext-block .citem.photoside-right {
        flex-direction: column;
        grid-row-gap: 1em;
    }

    .dr-block h1 {
        font-size: 2.75em;
    }

    .dr-phototext-block .citem .content-int {
        margin: 0;
    }

    .dr-phototext-block .citem:not(:first-child) {
        margin-top: 2.5em;
    }

    .dr-phototext-block .cta {
        padding-left: 0.85em;
    }

    .dr-phototext-block .citems {
        margin-top: 3em;
    }

    .dr-testimonials-block .titem {
        flex-basis: 100%;
    }

    .dr-media-block .mitems {
        grid-column-gap: 1em;
        margin-top: 3em;
    }

    .dr-media-block .mitems .mitem {
        flex-basis: calc(50% - 0.5em);
    }

    .dr-footer-block .split {
        flex-direction: column;
        grid-row-gap: 3em;
    }

    .dr-footer-block .fimage-wrap {
        margin-top: 3em;
    }

    .dr-block.dr-hero-block {
        aspect-ratio: unset;
        height: 90vh;
    }

    .dr-hero-block .picwrap {
        flex-direction: column;
    }

    .dr-hero-block .picwrap div {
        background-position: center;
        background-repeat: no-repeat;
    }

    .dr-hero-block .picwrap div:nth-child(3) {
        background-position-x: 100%;
        background-size: 120%;
    }
    .dr-hero-block .hero-content h1 {
        flex-direction: column;
        height: 90vh;
        align-items: flex-start;
        font-size:5em;
        margin-right:0.25em;
        width:calc(100% - 0.5em);
    }
    .dr-hero-block .hero-content h1 span:nth-child(2)::after, .dr-hero-block .hero-content h1 span:nth-child(1)::after {
        left: auto;
        right: 12px;
        transform-origin: right;
        transform: rotate(-90deg);
        top: 27%;
    }
    .cta .lnk, .dr-footer-block .sp-left a, .dr-media-block .show-more span {
        border-bottom-width:1px;
    }
}

@media only screen and (max-width: 600px) {
    body {
        font-size: 16px;

    }
}