:root {

    --white:            #fff;
    --pale-blue:        #99c5cf;
/*    --pale-blue:        #7caab5;*/
    --bg-yellow:        #f7f6e7;
    --bg-green:         #c5ecc1;
    --red:              #f84554;
    --purple:           #9f38e8;
    --grey:             #ccc;
    --green:            #58f943;

    --color-text:       #000;
    --color-link:       var(--purple);
    --color-link-hover: var(--red);
    --color-bg:         var(--pale-blue);
    --color-bgtext:     var(--bg-yellow);

    --font-body:        "forma-djr-micro", 'Helvetica Neue', Helvetica, sans-serif;

    --font-heading:      "Arco", "forma-djr-micro", 'Helvetica Neue', Helvetica, sans-serif;

    --font-base:        20px;
    --font-md:          1.2em;

    --leading-base:     1.4;

    --pad-xs:           1rem;
    --pad-sm:           2rem;
    --pad-md:           3rem;
    --pad-lg:           5rem;

    --max-width:        700px;
    --site-pad:         1.25rem;

    --transition-short: 0.15s;
    --transition-long:  0.5s;

    --border:           0.125em solid var(--red)
}


@media only screen and (min-width: 768px) {
    :root {
        --font-base:        18px;
        --font-xxl:         2.66rem;    /* 48px */

        --leading-base:     1.5;
    }
}

@font-face {
    font-family: 'Arco';
    src: url('arco.otf') format('opentype');
    font-weight: 400;
}

html {
    font-size: var(--font-base);
}

body {
    margin: 0;
    padding: 0;
    line-height: var(--leading-base);
    background: var(--color-bg);
}

body, select, input, textarea, button {
    font-family: var(--font-body);
    color: var(--color-text);
}

p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-link);
    transition: var(--transition-short);
}

a:hover, a:focus {
    color: var(--color-link-hover);
}

h1 {
    text-transform: uppercase;
    color: var(--red);
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 1em;
    font-family: var(--font-heading);
    font-size: var(--font-md);
}

main h1:first-child {
    margin-top: -0.5em;
}

h2 {
    font-size: var(--font-md);
    font-weight: bold;
    margin: 1.5em 0 0.5em;
}

h2:first-child {
    margin-top: 0;
}

hr {
    border-top: var(--border);
    margin: var(--pad-sm) 0;
}

blockquote {
    margin: 3em 0;
    margin-left: 2.5em;
}

blockquote:first-of-type {
    margin-top: 0;
}

blockquote:last-child {
    margin-bottom: 0;
}

blockquote:before {
    content: '\201C';
    font-size: 4em;
    float: left;
    line-height: 0.25;
    margin-top: 0.325em;
    margin-left: -0.55em;
    color: var(--red);
    font-weight: 700;
}

blockquote footer {
    font-style: italic;
    margin-top: 0.5em;
    color: var(--red);
}

blockquote footer:before {
    content: '\2014';
    margin-left: -1em;
}

main ul {
    list-style: disc;
    margin-left: 1.5em;
}

main li {
    margin-bottom: 1em;
    padding-left: 0.5em;
}

textarea, input[type=text], input[type=email] {
    width: 100%;
}

input, textarea {
    padding: 0.5em 0.6em;
    background: var(--white);
    border: 0.1em solid var(--grey);
/*    border: none;*/
/*    box-shadow: 0 0.1em 0.15em rgba(0,0,0,0.2);*/
}

input[type=checkbox] {
    vertical-align: middle;
    transform: scale(2);
    margin-right: 0.75em;
    margin-left: 0.5em;
}

input[type=checkbox] + label {
    vertical-align: middle;
}

input[type=submit], .button {
    padding: 0.66em 2em;
    width: 100%;
    background: var(--color-link);
    border: none;
    border-radius: 0.5em;
    color: var(--white);
    appearance: none;
    transition: var(--transition-short);
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    font-size: var(--font-md);
    font-family: var(--font-heading);
}


@media only screen and (min-width: 768px) {

    input[type=submit], .button {
        width: auto;
    }
}

input[type=submit]:hover, .button:hover {
    background: var(--color-link-hover);
    color: var(--white);
}

.button {
    text-decoration: none;
    display: inline-block;
}

.block--button {
    margin: 1.5em 0;
    text-align: center;
}

figure {
    text-align: center;
    margin: 1.5em 0;
}

figure img {
    max-height: 450px;
}

/*.button {
    text-decoration: none;
    display: inline-block;
    padding: 0.75em 2em 0.9em;
    border: 0.125em solid var(--mid-blue);
    color: var(--mid-blue);
    line-height: var(--leading-tight);
}

.button:hover, .button:focus {
    border-color: var(--color-link-hover);
    color: var(--color-link-hover);
}*/

.wrapper {
    margin: 0 auto;
    max-width: var(--max-width);
    padding: 0 var(--site-pad);
}

.header__logo, .header__toggle {
    display: block;
}

.header__logo, .footer__img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

.header__toggle {
    --pad-top: 1.5rem;

    position: relative;
    width: 5rem;
    height: 4.25rem;
    padding: var(--pad-top) var(--site-pad);
    transform: rotate(0deg);
    transition: var(--transition-short) ease-in-out;
    cursor: pointer;
    z-index: 10;
    margin: -0.5rem auto 0;
}

.header__toggle span:not(.screen-reader-text) {
    display: block;
    position: absolute;
    left: 1.5rem;
    height: 0.15em;
    width: 2rem;
    background: var(--color-text);
    border-radius: 0.25em;
    opacity: 1;
    transform: rotate(0deg);
    transition: var(--transition-short) ease-in-out;
}

.header__toggle span:not(.screen-reader-text):nth-child(1) {
    top: var(--pad-top);
}
.header__toggle span:not(.screen-reader-text):nth-child(2),
.header__toggle span:not(.screen-reader-text):nth-child(3) {
    top: calc(var(--pad-top) + 10px);
}
.header__toggle span:not(.screen-reader-text):nth-child(4) {
    top: calc(var(--pad-top) + 20px);
}

.header__toggle[aria-expanded=true] span:nth-child(1),
.header__toggle[aria-expanded=true] span:nth-child(4) {
    top: var(--pad-top);
    width: 0%;
    left: 50%;
}

.header__toggle[aria-expanded=true] span:nth-child(2) {
    transform: rotate(45deg);
}

.header__toggle[aria-expanded=true] span:nth-child(3) {
    transform: rotate(-45deg);
}

.header__menu {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-long);
}

.header__menu.open {
    margin-bottom: 1.5em;
}

.header__menu a {
    display: block;
    padding: 0.5em var(--site-pad);
    border-bottom: 0.1em solid var(--color-text);
    text-decoration: none;
    text-align: center;
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--color-text);
}

.header__menu li:first-child a {
    border-top: 0.1em solid var(--color-text);
}

main .wrapper {
    background: var(--color-bgtext);
    padding: 2rem var(--site-pad) 13rem;
    border-radius: 1rem;
}

.footer__img {
    margin-top: -9.75rem;
}

#dog-1 {
    margin-top: -10.4rem;
    padding: 0 1rem;
}

#dog-2 {
    margin-top: -13rem;
    max-width: 150px;
}

#dog-4 {
    margin-top: -12.5rem;
}

@media only screen and (min-width: 768px) {
    .footer__img {
        margin-top: -10.75rem;
    }

    #dog-2 {
        max-width: 885px;
        padding-left: 720px;
        margin-top: -18rem;
    }
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.alert {
    margin-bottom: 1em;
}

.success {
    background: var(--green);
    padding: 0.5em;
}

.error {
    background: var(--red);
    color: var(--white);
}

.field {
    margin-bottom: 1em;
}

.field label {
    margin-bottom: 0.25em;
}

.field label, .field.checkbox label:first-child {
    display: block;
}

.field.checkbox input[type=checkbox] {
    display: inline-block;
    margin-bottom: 1.25em;
}

.field.checkbox label {
    display: inline-block;
    width: calc(100% - 3em);
    margin-bottom: 1.25em;
}

.contact {
    text-align: center;
}

.contact .field {
    text-align: left;
}


@media only screen and (min-width: 768px) {

    .field {
        display: flex;
        align-items: center;
    }

    .field label {
        flex: 1;
    }

    .field.checkbox {
        align-items: flex-start;
    }

    .field input[type=text], .field input[type=email], .field textarea, .field.checkbox *:last-child {
        flex: 2;
    }

    .field.checkbox label:first-child {
        width: 25%;
    }

    .field.checkbox input[type=checkbox] {
        margin-left: 0;
    }
}