:root {

    /* UI element colours */
    --colour-background: black;
    --colour-body: white;
    --colour-header: rgba(255,255,255,1.0);
    --colour-footer: rgba(255,255,255,1.0);
    --colour-text: #021F2E;
    --colour-primaryaccents: #1D4A5C; 
    --colour-secondaryaccents: #38838F;
    --colour-tertiaryaccents: #B20109;
    --colour-navMenu: rgba(255,255,255,0.85);
    --colour-navMobileSubMenu: rgba(56,131,143,0.85);
    --colour-navWideScreenSubMenu: rgba(255,255,255,0.85);
}

.content {
    width: 100%;
}

header {
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    align-self: center;
    align-content: flex-start;
    justify-content: center;
    height: max-content;
    width: 100%;
}

.form-body {
    background-color: rgba(255,255,255,0.75);
    width: clamp(275px,35rem,100%);
    margin: 0;
    padding: 0 0.5rem;
    height: max-content;
}

header.main-header {
    border-bottom: 1px solid var(--colour-primaryaccents)
}

h1.main-header-heading {
    margin: 1rem 0.5rem;
    text-align: left;
    font-size: clamp(1.35em,5vw,2em);
}

p.error-notice {
    text-align: center;
    color: red;
    background-color: rgba(255,0,0,0.25);
    font-weight: 700;
    margin: 1rem 1rem;
    padding: 1rem 0rem;
}

.form-input-inline {
    margin: 0.5rem 0.5rem;
}

.form-input-label {
    font-weight: 700;
}

.text-field {
    width: 100%;
    margin: 0.25rem 0;
    padding: 0.25rem;
}

.notes-text-field {
    width: 100%;
    margin: 0.25rem 0;
    padding: 0.25rem;
}

.number-field {
    width: auto;
    margin: 0.25rem auto;
    padding: 0.25rem;
}

.radio-button-group {
    width: 96%;
    margin: 0 1rem;
    padding: 1rem;
    border: 0.5px solid silver;
}

.radio-button {
    margin-left: 0.25rem;
    margin-right: 0.4rem;
    padding: 0;
}

.radio-button-label {
    margin-left: 0.5rem;
    padding: 0;
}

.flex-centering-row-nowrap {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    flex: 0 0 auto;
}

.flex-centering-column-nowrap {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    flex: 0 0 auto;
}

.flex-justify-start-column-nowrap {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: start;
    flex: 0 0 auto;
}

.div_selections {
    padding: 0.5rem 0;
}

.flex-align-start {
    align-content:flex-start;
}
.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-space-between {
    justify-content: space-between;
}

.flex-space-around {
    justify-content: space-around;
}

.g-recaptcha {
    position: relative;
    width: auto;
    margin: 0 auto;
}

p.alert-notice {
    text-align: center;
    color: red;
    background-color: rgba(255,0,0,0.25);
    font-weight: 700;
    margin: 1rem 1rem;
    padding: 1rem 0rem;
}

input#experience_years {
    text-align: center;
}
.submit-button {
    position: relative;
    width: auto;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    color: var(--colour-text);
    font-size: 1.25rem;
    font-weight: 700;
}

#submit:disabled:hover, #submit:disabled:hover .button-text {
  cursor: not-allowed;
}

#submit, #submit .button-text {
  cursor: pointer;
}

p#privacy-policy {
    text-align: center;
    font-size: 1rem;
}

footer {
    width: 100%;
}

.main-footer-heading {
    text-align: center;
    margin: 0;
    padding: 0.5rem 0;
    font-size: clamp(1.35em,4vw,1.65em);
}

input.text-field:valid {
    font-weight: 700;
}

.confirmation-body {
    background-color: rgba(255,255,255,0.75);
    width: clamp(275px,35rem,100%);
    margin: 0;
    padding: 0 1.5rem;
    align-self: stretch;
    display: flex;
    flex-flow: column nowrap;
    flex: 0 0 auto;
    align-items: center;
    justify-items: flex-start;
}

.confirmation-header {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    font-size: clamp(1.5rem,2.5vw,1.75em);
    max-width: 100%;
}
.confirmationText {
    margin: 1rem auto 0 auto;
    padding: 0s;
    max-width: 100%;
}
p.confirmation {
    align-self: center;
    display: block;
    text-align: center;
    width: clamp(200px,25ch,100%);
    margin: 0.5rem 0;
    padding: 0.5rem 0;
    font-size: 1.25rem;
    line-height: 1.35rem;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
    padding-right: 0.25rem;
}

figure {
    margin: 0 auto;
    padding: 0;
}

.portrait-image {
    margin: 1rem;
    padding: 0;
}
.portrait-caption {
    text-align: center;
    margin: 0 1rem;
    padding: 0 1rem 1rem 1rem;
}

.confirmation-footer {
    position: relative;
    margin: 0 auto;
    padding: 1rem 0;
    text-align: center;
    font-size: clamp(1.5rem,2.5vw,1.75em);
    max-width: 100%;
}

/* BACKGROUNDS */

.backImageEmail {
    background: bottom / cover no-repeat url('../images/about/WEBP/1000/muskoka-builder-email-contact_6.webp');
}

.backImageJobs {
    background: bottom / cover no-repeat url('../images/about/careers/WEBP/1000/carpentry-construction-jobs-muskoka_5.webp');
}

.backImageJobsConfirmation {
    background: center / cover no-repeat url('../images/about/careers/WEBP/1000/carpentry-construction-jobs-muskoka_4.webp');
}

@media
only screen and (min-width: 1000px) {
    .backImageEmail {
        background: bottom / cover no-repeat url('../images/about/WEBP/2000/muskoka-builder-email-contact_6.webp');
    }

    .backImageJobs {
        background: bottom / cover no-repeat url('../images/about/careers/WEBP/2000/carpentry-construction-jobs-muskoka_5.webp');
    }

    .backImageJobsConfirmation {
        background: center / cover no-repeat url('../images/about/careers/WEBP/2000/carpentry-construction-jobs-muskoka_4.webp');
    }
}

@media
only screen and (min-width: 2000px) {
    .backImageEmail {
        background: bottom / cover no-repeat url('../images/about/WEBP/4000/muskoka-builder-email-contact_6.webp');
    }

    .backImageJobs {
        background: bottom / cover no-repeat url('../images/about/careers/WEBP/4000/carpentry-construction-jobs-muskoka_5.webp');
    }

    .backImageJobsConfirmation {
        background: center / cover no-repeat url('../images/about/careers/WEBP/4000/carpentry-construction-jobs-muskoka_4.webp');
    }
}

@media
only screen and ((min-width: 375px) and (-webkit-min-device-pixel-ratio: 2)),
only screen and ((min-width: 375px) and (   min--moz-device-pixel-ratio: 2)),
only screen and ((min-width: 375px) and (     -o-min-device-pixel-ratio: 2/1)),
only screen and ((min-width: 375px) and (        min-device-pixel-ratio: 2)),
only screen and ((min-width: 375px) and (                min-resolution: 192dpi)),
only screen and ((min-width: 375px) and (                min-resolution: 2dppx)) {
    .backImageEmail {
        background: bottom / cover no-repeat url('../images/about/WEBP/1500/muskoka-builder-email-contact_6.webp');
    }

    .backImageJobs {
        background: bottom / cover no-repeat url('../images/about/careers/WEBP/1500/carpentry-construction-jobs-muskoka_5.webp');
    }

    .backImageJobsConfirmation {
        background: center / cover no-repeat url('../images/about/careers/WEBP/1500/carpentry-construction-jobs-muskoka_4.webp');
    }
}

@media
only screen and ((min-width: 1000px) and (-webkit-min-device-pixel-ratio: 2)),
only screen and ((min-width: 1000px) and (   min--moz-device-pixel-ratio: 2)),
only screen and ((min-width: 1000px) and (     -o-min-device-pixel-ratio: 2/1)),
only screen and ((min-width: 1000px) and (        min-device-pixel-ratio: 2)),
only screen and ((min-width: 1000px) and (                min-resolution: 192dpi)),
only screen and ((min-width: 1000px) and (                min-resolution: 2dppx)) {
    .backImageEmail {
        background: bottom / cover no-repeat url('../images/about/WEBP/2500/muskoka-builder-email-contact_6.webp');
    }

    .backImageJobs {
        background: bottom / cover no-repeat url('../images/about/careers/WEBP/2500/carpentry-construction-jobs-muskoka_5.webp');
    }

    .backImageJobsConfirmation {
        background: center / cover no-repeat url('../images/about/careers/WEBP/2500/carpentry-construction-jobs-muskoka_4.webp');
    }
}

@media
only screen and ((min-width: 2000px) and (-webkit-min-device-pixel-ratio: 2)),
only screen and ((min-width: 2000px) and (   min--moz-device-pixel-ratio: 2)),
only screen and ((min-width: 2000px) and (     -o-min-device-pixel-ratio: 2/1)),
only screen and ((min-width: 2000px) and (        min-device-pixel-ratio: 2)),
only screen and ((min-width: 2000px) and (                min-resolution: 192dpi)),
only screen and ((min-width: 2000px) and (                min-resolution: 2dppx)) { 
    .backImageEmail {
        background: bottom / cover no-repeat url('../images/about/WEBP/4000/muskoka-builder-email-contact_6.webp');
    }

    .backImageJobs {
        background: bottom / cover no-repeat url('../images/about/careers/WEBP/4000/carpentry-construction-jobs-muskoka_5.webp');
    }

    .backImageJobsConfirmation {
        background: center / cover no-repeat url('../images/about/careers/WEBP/4000/carpentry-construction-jobs-muskoka_4.webp');
    }
}