@media (max-width: 80rem) {

    :root {
        --font-size: 1.125rem;
        --logo-height: 5rem;
    }

}


@media (max-width: 70rem) {

    :root {
        --font-size: 1.125rem;

    }

    footer .center { flex-flow: column nowrap; text-align: center; }
    #footermenu { justify-content: center; margin: 0 0 1rem 0; }
    #copyright { padding: .25rem 0; }

    .grid-layout-onetwo-twoone:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
		"b b"
		"a d"
		"c c";
    }
    .grid-layout-onetwo-twoone:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
		"c c"
		"d a"
		"b b";
    }

    .grid-layout-twoone-onetwo:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
        "a a"
        "b c"
        "d d";
    }
    .grid-layout-twoone-onetwo:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
        "d d"
        "c b"
        "a a";
    }

}


@media (max-width: 60rem) {

    :root {
        --font-size: 1.125rem;
        --gutter-x: 2rem;
        --gutter-y: 4rem;
        --logo-height: 4rem;
    }

    .slider-columns-two .slide { width: 100%; }
    .slider-columns-three .slide,
    .slider-columns-four .slide { width: 50%; }

    .grid-layout-two-one:not(.grid-break-none) > .wrapper,
    .grid-layout-one-two:not(.grid-break-none) > .wrapper,
    .grid-layout-three-one:not(.grid-break-none) > .wrapper,
    .grid-layout-one-three:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "a a"
		    "b b";
    }
    .grid-layout-two-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper,
    .grid-layout-one-two:not(.grid-break-none).grid-order-revert-mobile > .wrapper,
    .grid-layout-three-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper,
    .grid-layout-one-three:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "b b"
            "a a";
    }

    .grid-layout-one-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
		    "a a"
		    "b b"
		    "c c";
    }
    .grid-layout-one-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
		    "c c"
		    "b b"
		    "a a";
    }

    .grid-layout-one-one-two:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "a b"
		    "c c";
    }
    .grid-layout-one-one-two:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "c c"
		    "b a";
    }

    .grid-layout-one-two-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "a c"
		    "b b";
    }
    .grid-layout-one-two-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "b b"
		    "a c";
    }

    .grid-layout-two-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "a a"
		    "b c";
    }
    .grid-layout-two-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "c b"
            "a a";
    }

    .grid-layout-oneone-one:not(.grid-break-none) > .wrapper,
    .grid-layout-one-oneone:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "a a"
            "b b"
            "c c";
    }
    .grid-layout-oneone-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper,
    .grid-layout-one-oneone:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "c c"
            "b b"
            "a a";
    }

    .grid-layout-oneone-two:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "a b"
            "c c";
    }
    .grid-layout-oneone-two:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "c c"
            "b a";
    }

    .grid-layout-two-oneone:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "a a"
            "b c";
    }
    .grid-layout-two-oneone:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "c b"
            "a a";
    }

    .grid-layout-one-one-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "a b"
            "c d";
    }
    .grid-layout-one-one-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "d c"
            "b a";
    }

    .grid-layout-one-one-one-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "a a b b"
            "c c d d"
            ". e e .";
    }
    .grid-layout-one-one-one-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "e e d d"
            "c c b b"
            ". a a .";
    }

    .grid-layout-one-one-one-one-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "a b"
            "c d"
            "e f";
    }
    .grid-layout-one-one-one-one-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "f e"
            "d c"
            "b a";
    }

}


@media (max-width: 48rem) {

    :root {
        --gutter-x: 1rem;
        --gutter-y: 2rem;
        --columns-gutter-x: 1rem;
        --columns-gutter-y: 2rem;
        --logo-height: 3rem;
    }

    h1 { font-size: 2em; }

    .slider-columns-two .slide,
    .slider-columns-three .slide,
    .slider-columns-four .slide { width: 100%; }

    .parallax > .parallax-block {
        height: 100% !important;
        transform: none !important;
    }
    
    .mailform .group:not(:first-child:last-child) { width: 100% !important; }

    #bottom .center { flex-flow: column nowrap; justify-content: flex-start; }
    #bottom .center > .column { width: 100%; }
    #bottom .center > .column:not(:last-child) { margin-bottom: 2rem; }

    .grid-layout-one-one:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "a a"
		    "b b";
    }
    .grid-layout-one-one:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
		    "b b"
            "a a";
    }

}


@media (max-width: 24rem) {

    .grid-layout-onetwo-twoone:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
		"b b"
		"a a"
		"d d"
		"c c";
    }
    .grid-layout-onetwo-twoone:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
		"c c"
        "d d"
        "a a"
        "b b";
    }

    .grid-layout-twoone-onetwo:not(.grid-break-none) > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
        "a a"
        "b b"
        "c c"
        "d d";
    }
    .grid-layout-twoone-onetwo:not(.grid-break-none).grid-order-revert-mobile > .wrapper {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
        "d d"
        "c c"
        "b b"
        "a a";
    }

}