/* Layout Elements */

.container.holy-grail {
  min-width: 10px;
  min-height: 100vh;
  width: auto;
  height: 0;
  background-color: #e5e4e4;
}

.container.layout-section {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.main {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.navigation {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.asides {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.footer {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.sg-question {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  padding: 10px;
  background-color: #fff;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

@supports (display: grid) {
  /* Text Elements */

  h1.content-header {
    text-align: center;

    grid-area: content-header;
  }

  h1.page-header {
    margin-bottom: 0;
    text-align: center;

    grid-area: page-header;
  }

  h1.heading-2 {
    text-align: center;
  }

  h1.SG1-header {
    text-align: center;

    grid-area: page-header;
  }

  h3.other-resources {
    font-size: 16px;
  }

  h3.heading-1 {
    grid-area: email-header;
  }

  p.paragraph.paragraph-1 {
    text-align: center;
  }

  p.paragraph.content-header {
    margin-right: 0;
    margin-bottom: 0;
    padding-right: 6px;
    padding-left: 6px;
    text-align: center;

    grid-area: content-header;
  }

  p.paragraph.prog-message {
    color: #e5d131;
    font-size: 20px;

    -webkit-text-stroke-color: #e3b574;
    -webkit-text-stroke-width: 1px;
  }

  p.paragraph.footer-text.paragraph-1 {
    grid-area: footer-text;
  }

  p.paragraph span.paragraph-text-1 {
    font-style: italic;
  }

  p.paragraph.paragraph-3 {
    grid-area: content-header;
  }

  p.paragraph.sg-premiselabel {
    color: #2428a5;
    text-align: center;
  }

  p.paragraph.intro-paragraph {
    margin-left: 8px;
    padding-right: 0;
    padding-left: 0;
    max-width: 95%;
  }

  p.paragraph.strengths-intro {
    padding-left: 8px;
    max-width: 95%;
  }

  p.paragraph.paragraph-2 {
    color: #000;
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  }

  p.paragraph.calculated-age.paragraph-2 {
    grid-area: calculated-age;
  }

  p.paragraph span.paragraph-text-2 {
    font-style: italic;
  }

  p.paragraph span.paragraph-text-3 {
    font-style: italic;
  }

  p.paragraph span.paragraph-text-6 {
    font-style: italic;
  }

  p.paragraph span.paragraph-text-8 {
    font-style: italic;
  }

  p.paragraph span.paragraph-text-7 {
    font-style: normal;
  }

  p.paragraph span.paragraph-text-9 {
    font-style: italic;
  }

  p.paragraph span.paragraph-text-4 {
    font-style: normal;
  }

  p.paragraph span.paragraph-text-11 {
    font-style: normal;
  }

  p.paragraph.paragraph-4 {
    margin-top: 0;
    margin-right: 6px;
    margin-left: 6px;
    padding-right: 1%;
    padding-left: 1%;
    max-width: 95%;
  }

  p.paragraph span.paragraph-text-5 {
    color: #b57000;
  }

  p.paragraph span.paragraph-text-10 {
    color: #b57000;
    font-weight: 700;
  }

  p.paragraph span.paragraph-text-12 {
    color: #b57000;
    font-weight: 700;
  }

  p.paragraph span.paragraph-text-13 {
    color: #b57000;
    font-weight: 700;
  }

  /* Interaction Elements */

  a.link-button.button {
    max-height: 55px;
    width: 76px;
    border-radius: 6px;

    grid-area: add-button;
  }

  form.form-container.individual-form {
    display: grid;
    margin-top: 0;
    margin-right: 0;
    margin-left: 128px;
    padding: 2px 0;
    min-width: 284px;
    max-width: 1200px;
    border: .125rem solid #e3b574;
    border-radius: 6px;
    background-image: none;
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 0 0;
    background-repeat: no-repeat;

    background-blend-mode: normal;
    grid-template-columns: auto;
    grid-template-rows: repeat(3 , auto);
    grid-template-areas: 'right-header' 'divider' 'right-area';
    grid-area: individual-form;
  }

  form.form-container.loginsform {
    margin-left: 0;
  }

  form.form-container.individual-form.loginsform {
    grid-area: logins-form;
  }

  form.form-container.sg-form {
    display: block;
    margin-bottom: 2px;
    border-width: .125rem;
    border-style: solid;

    grid-template-areas: 'sg-premise SGQID' 'rb-consistently rb-consistently' 'rb-mostly rb-mostly' 'rb-sometimes rb-sometimes' 'rb-rarely rb-rarely';
    grid-template-columns: repeat(2 , auto);
    grid-template-rows: repeat(5 , auto);
  }

  form.form-container.sg-login {
    display: grid;

    grid-template-columns: auto;
    grid-template-rows: repeat(4 , auto);
    grid-template-areas: 'preferred-name' 'last-name' 'email' 'submit-button';
    grid-area: login;
  }

  input[type=text].input-field {
    max-width: 400px;
    background-color: #f0f0f0;
    color: #181818;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;

    -webkit-text-stroke-color: #181818;
    grid-area: email;
  }

  input[type=text].attends {
    max-width: 300px;
    background-color: #f0f0f0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  }

  input[type=text].input-field.zip {
    max-width: 70px;

    grid-area: zip;
  }

  input[type=text].state {
    max-width: 40px;
  }

  input[type=text].input-field.state {
    max-width: 40px;
  }

  input[type=email].input-field {
    max-width: 300px;
    background-color: #f0f0f0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  }

  input[type=tel].input-field {
    max-width: 200px;
    background-color: #f0f0f0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  }

  label.radio.sg-button-1 {
    grid-area: auto;
  }

  label.radio.sg-mostly-1 {
    grid-area: rb-mostly;
  }

  label.radio.sg-sometimes-1 {
    grid-area: rb-sometimes;
  }

  label.radio.sg-rarely-1 {
    grid-area: rb-rarely;
  }

  textarea.textarea-1 {
    background-color: #f0f0f0;
  }

  label.label.form-label {
    background-color: transparent;
    color: #2428a5;
    font-variant: small-caps;

    grid-area: birthdaate-label;
  }

  label.label.email-label.form-label {
    grid-area: email-labell;
  }

  label.label.admin-label.form-label {
    grid-area: email-labell;
  }

  label.label.form-label.life-stage {
    grid-area: auto;
  }

  label.label.birthdate-label.form-label {
    grid-area: birthdate-label;
  }

  /* Layout Elements */

  body.body-1 {
    background-color: #efcba1;
    background-image: url('../images/Helping_max_bg.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    grid-area: individual-form;
    background-blend-mode: normal;
  }

  body.body-3 {
    background-color: #f4dbb0;
    background-image: url('../images/Helping_max_bg.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  body.body-2 {
    background-color: #f4dbb0;
    background-image: url('../images/Helping_max_bg.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  body.body-4 {
    background-color: #e8d7c1;
    background-image: url('../images/Helping_max_bg.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  .container.holy-grail {
    display: grid;
    background-color: transparent;

    grid-template-columns: 1fr;
    grid-template-rows: 120px 1fr auto;
    grid-template-areas: 'header' 'main' 'footer';
    grid-row-gap: 1px;
    grid-column-gap: 1px;
    grid-area: auto / auto / auto / auto;
  }

  .container.header {
    background-color: transparent;

    grid-area: header;
  }

  .container.main {
    display: grid;
    background-color: transparent;
    background-image: url('../images/Helping_max_bg.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    grid-area: login;
    background-blend-mode: normal;
    grid-template-areas: 'page-header' 'content-header' 'login';
    grid-template-columns: auto;
    grid-template-rows: repeat(3 , auto);
  }

  .container.navigation {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    background-color: #e77373;

    grid-area: navigation;
  }

  .container.asides {
    background-color: #69d5b6;

    grid-area: asides;
  }

  .container.footer {
    background-color: #f3bd7f;

    grid-area: footer;
  }

  .container.header.layout-section {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
    background-color: transparent;
    background-image: -webkit-radial-gradient(rgba(255, 255, 255, .5) 6%, rgba(243, 209, 119, 1) 33%, rgba(40, 62, 255, 1) 66%, rgba(29, 30, 33, .5) 100%);
    background-image:    -moz-radial-gradient(rgba(255, 255, 255, .5) 6%, rgba(243, 209, 119, 1) 33%, rgba(40, 62, 255, 1) 66%, rgba(29, 30, 33, .5) 100%);
    background-image:      -o-radial-gradient(rgba(255, 255, 255, .5) 6%, rgba(243, 209, 119, 1) 33%, rgba(40, 62, 255, 1) 66%, rgba(29, 30, 33, .5) 100%);
    background-image:         radial-gradient(rgba(255, 255, 255, .5) 6%, rgba(243, 209, 119, 1) 33%, rgba(40, 62, 255, 1) 66%, rgba(29, 30, 33, .5) 100%);
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  .container.layout-section {
    font-size: 16px;
  }

  .container.footer.layout-section {
    display: grid;
    min-width: 300px;
    background-color: #efcba1;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:         linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
    grid-template-areas: 'footer-text' 'report-problem';
    grid-template-columns: auto;
    grid-template-rows: repeat(2 , auto);
  }

  .container.form-right-area {
    display: grid;
    margin-left: 4px;

    grid-area: auto;
    grid-template-areas: 'userID userID' 'newpassword newpassword' 'email email' 'admin admin' 'submit-button individualID';
    grid-template-columns: repeat(2 , auto);
    grid-template-rows: repeat(5 , auto);
  }

  .container.layout-section.main {
    display: grid;
    padding: 6px 0;
    min-width: 320px;
    background-color: transparent;
    background-image: none;
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 0 0;
    background-repeat: no-repeat;

    background-blend-mode: normal;
    grid-template-columns: 5% auto 5%;
    grid-template-rows: repeat(3 , auto);
    grid-template-areas: '. page-header .' '. content-header .' '. login .';
    grid-area: main;
  }

  .container.asides.layout-section {
    display: block;
    padding-top: 15px;
    padding-right: 8px;
    background-color: #585aab;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:         linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  .container.right-header {
    display: grid;

    grid-area: right-header;
    grid-template-columns: repeat(2 , auto);
    grid-template-rows: auto;
    grid-template-areas: 'add-button edit-button';
  }

  .container.layout-section.navigation {
    display: block;
    background-color: #585aab;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-image:         linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  .container.holy-grail.login-grail {
    grid-template-areas: 'header' 'navigation' 'main' 'footer' '.';
    grid-template-rows: 120px 100px 1fr 70px auto;
  }

  .container.login-grail {
    grid-template-areas: 'header' 'navigation' 'main' 'footer';
    grid-template-rows: 120px 100px 1fr 70px;
  }

  .container.layout-section.logins-layout.main {
    grid-template-areas: 'content-header' 'logins-form';
    grid-template-rows: repeat(2 , auto);
  }

  .container.index-layout.layout-section.main {
    grid-template-areas: 'page-header' 'content-header' 'logins-form';
    grid-template-rows: repeat(3 , auto);
  }

  .container.logins-form {
    grid-area: logins-form;
  }

  .container.container-1 {
    min-width: 95%;
    width: auto;

    grid-area: login;
  }

  .container.container-2 {
    min-width: 320px;
    max-width: none;

    grid-area: content-header;
  }

  .container.sg-question {
    display: grid;
    background-color: transparent;
    background-image: none;
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 0 0;
    background-repeat: no-repeat;

    grid-area: auto;
    background-blend-mode: normal;
    grid-template-areas: 'page-header' 'content-header' 'login';
    grid-template-columns: auto;
    grid-template-rows: repeat(3 , auto);
  }

  .container.sg-results {
    display: block;
    padding: 6px 0;
    min-width: 320px;
    background-color: transparent;
    background-image: none;
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: 0 0;
    background-repeat: no-repeat;

    background-blend-mode: normal;
    grid-template-columns: 5% auto 5%;
    grid-template-rows: repeat(3 , auto);
    grid-template-areas: '. page-header .' '. content-header .' '. login .';
    grid-area: main;
  }

  .container.caring-grail {
    grid-template-areas: 'header' 'navigation' 'main' 'asides' 'footer';
    grid-template-rows: 120px 1fr repeat(3 , auto);
  }

  .container.state-zip {
    display: grid;

    grid-template-columns: repeat(2 , auto);
    grid-template-rows: auto;
    grid-template-areas: 'state zip';
    grid-area: state-zip;
  }

  .container.individualsform {
    grid-template-areas: 'preferred-name preferred-name preferred-name preferred-name' 'last-name last-name last-name last-name' 'address-1 address-1 address-1 address-1' 'address-2 address-2 address-2 address-2' 'city city city city' 'state-zip state-zip state-zip state-zip' 'phone phone phone phone' 'email email email email' 'calculated-age birthdate birthdate birthdate' 'life-stage life-stage life-stage life-stage' 'comments comments comments comments' 'submit-button individualID . .';
    grid-template-columns: repeat(4 , auto);
    grid-template-rows: repeat(12 , auto);
  }

  .container.form-right-area.individualsform {
    grid-template-areas: 'preferred-name preferred-name last-name last-name' 'address-1 address-1 address-1 address-1' 'address-2 address-2 address-2 address-2' 'city city city city' 'state-zip state-zip state-zip state-zip' 'phone phone phone phone' 'email email email email' 'calculated-age birthdate birthdate birthdate' 'life-stage life-stage life-stage life-stage' 'attends attends attends attends' 'comments comments comments comments' 'submit-button individualID . .';
  }

  .container.email-verification {
    display: grid;

    grid-template-areas: 'email-header email-header' 'yes-email no-email';
    grid-template-columns: repeat(2 , auto);
    grid-template-rows: repeat(2 , auto);
    grid-area: email-verification;
  }

  .container.users-layout {
    margin-left: 0;

    grid-template-areas: '. page-header .' '. email-verification .' '. content-header .' '. individual-form .';
  }

  .container.layout-section.main.users-layout {
    margin-left: -126px;

    grid-template-areas: '. page-header .' '. email-verification .' '. content-header .' '. individual-form .';
    grid-template-rows: repeat(4 , auto);
    grid-area: main;
  }

  .container.caring-grail.holy-grail {
    grid-template-rows: 120px repeat(4 , auto);
  }

  label.label-container.email {
    background-color: transparent;

    grid-area: email;
  }

  button.button {
    position: -webkit-sticky;
    position:         sticky;
    left: 50%;
    display: inline-block;
    margin-right: 49%;
    margin-bottom: 6px;
    margin-left: 0;
    padding-top: 12px;
    padding-right: 6px;
    padding-left: 6px;
    max-width: none;
    width: 76px;
    border-radius: 6px;
    opacity: 1;

    grid-area: submit-button;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
            align-self: center;
    justify-self: center;
  }

  .rule.divider {
    width: 90%;

    grid-area: divider;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
            align-self: center;
    justify-self: center;
  }

  .rule.divider hr {
    border-top-width: 2px;
    border-top-color: #e3b574;
  }

  .html-element.html-element-1.individualID {
    grid-area: individualID;
  }

  .html-element.html-element-3 {
    grid-area: auto / auto / auto / auto;
  }

  .html-element.html-element-4 {
    grid-area: edit-button;
  }

  div.responsive-picture.picture-1 {
    background-image: url('https://cdn.coffeecupcloud.com/appresources/v1/common/background_online_image.png');
    background-attachment: scroll;
    background-position: center center;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: contain;
    background-repeat: repeat;

    background-blend-mode: normal;
  }

  label.label-container.userID {
    background-color: transparent;

    grid-area: userID;
  }

  label.label-container.password {
    background-color: transparent;

    grid-area: newpassword;
  }

  label.label-container.admin {
    grid-area: admin;
  }

  label.label-container.last-name {
    background-color: transparent;

    grid-area: last-name;
  }

  label.label-container.preferred-name {
    background-color: transparent;

    grid-area: preferred-name;
  }

  .html-element.report-problem {
    grid-area: report-problem;
  }

  .html-element.html-element-6 {
    max-width: 10px;
  }

  .html-element.html-element-5 {
    max-width: 10px;
  }

  .html-element.html-element-7 {
    grid-area: login;
  }

  label.label-container.comments {
    grid-area: comments;
  }

  label.label-container.attends {
    display: block;

    grid-area: attends;
  }

  label.label-container.life-stage {
    grid-area: life-stage;
  }

  .html-element.birth-year {
    max-width: 80px;
  }

  .html-element.html-element-2 {
    max-width: 50px;
  }

  .html-element.birth-day.html-element-2 {
    min-width: 55px;
    max-width: 55px;
  }

  .html-element.birth-monthh {
    max-width: 150px;
  }

  label.label-container.birthdate {
    display: grid;
    background-color: transparent;

    grid-area: birthdate;
    grid-template-areas: 'birthdate-label birthdate-label birthdate-label' 'birth-month birth-day birth-year';
    grid-template-columns: repeat(3 , auto);
    grid-template-rows: repeat(2 , auto);
  }

  label.label-container.label-container-1 {
    grid-area: calculated-age;
  }

  label.label-container.calculated-age.label-container-1 {
    max-width: 40px;
  }

  label.label-container.phone {
    background-color: transparent;

    grid-area: phone;
  }

  label.label-container.zip {
    background-color: transparent;

    grid-area: zip;
  }

  label.label-container.state {
    background-color: transparent;

    grid-area: state;
  }

  label.label-container.city {
    display: block;
    background-color: transparent;

    grid-area: city;
  }

  label.label-container.address-2 {
    background-color: transparent;

    grid-area: address-2;
  }

  label.label-container.address-1 {
    background-color: transparent;

    grid-area: address-1;
  }

  .html-element.no-email {
    max-width: 100px;

    grid-area: no-email;
  }

  .html-element.yes-email {
    max-width: 100px;

    grid-area: yes-email;
  }

  .html-element.ps-prompt {
    background-color: #d6be9b;
  }

  div.responsive-picture.picture-2 {
    max-width: 799px;
    background-image: url('../images/PSGrid.png');
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    background-repeat: repeat;

    background-blend-mode: normal;
  }
}

@media screen and (min-width: 40rem) {
  @supports (display: grid) {
      /* Text Elements */

    h3.other-resources {
      font-size: 16px;
    }

    /* Interaction Elements */

    form.form-container.sg-login {
      grid-template-areas: 'preferred-name last-name' 'email email' 'submit-button submit-button';
      grid-template-columns: repeat(2 , auto);
      grid-template-rows: repeat(3 , auto);
    }

    input[type=text].input-field {
      max-width: 370px;

      grid-area: last-name;
    }

    input[type=text].last-name {
      max-width: 300px;
    }

    input[type=email].input-field {
      margin-left: 0;
      max-width: 300px;
    }

    input[type=tel].input-field {
      max-width: 150px;
    }

    /* Layout Elements */

    body.body-1 {
      display: block;

      grid-template-columns: auto;
      grid-template-rows: auto;
      grid-area: birth-year;
    }

    .container.holy-grail {
      grid-template-areas: 'header header' 'navigation navigation' 'main main' 'asides asides' 'footer footer';
      grid-template-columns: 1fr 200px;
    }

    .container.form-right-area {
      grid-template-areas: none;
      grid-template-columns: none;
      grid-template-rows: none;
    }

    .container.state-zip {
      display: grid;

      grid-template-areas: 'state zip';
      grid-template-columns: repeat(2 , auto);
      grid-template-rows: auto;
    }

    .container.individualsform {
      grid-template-areas: 'preferred-name preferred-name preferred-name last-name last-name' 'address-1 address-1 address-1 address-1 address-1' 'address-2 address-2 address-2 address-2 address-2' 'city city city state-zip state-zip' 'phone phone phone email email' 'calculated-age birthdate birthdate life-stage life-stage' 'comments comments comments comments comments' '. submit-button . individualID .';
      grid-template-columns: repeat(5 , auto);
      grid-template-rows: repeat(8 , auto);
    }

    .container.form-right-area.individualsform {
      grid-template-areas: 'preferred-name preferred-name last-name last-name' 'address-1 address-1 address-1 address-1' 'address-2 address-2 address-2 address-2' 'city city state-zip state-zip' 'phone phone email email' 'calculated-age birthdate birthdate birthdate' 'life-stage life-stage life-stage life-stage' 'attends attends attends .' 'comments comments comments comments' '. submit-button individualID .';
      grid-template-columns: repeat(4 , auto);
      grid-template-rows: repeat(10 , auto);
    }

    .container.users-layout {
      grid-template-areas: 'individual-form' '.';
      grid-template-columns: auto;
      grid-template-rows: repeat(2 , auto);
    }

    label.label-container.email {
      margin-left: 0;

      grid-area: email;
    }

    button.button {
      grid-area: submit-button;
    }

    .html-element.html-element-1.individualID {
      grid-area: individualID;
    }

    label.label-container.userID {
      max-width: 200px;
    }

    label.label-container.password {
      margin-left: 0;
      width: 200px;
    }

    label.label-container.last-name {
      margin-left: 0;
      width: 200px;
    }

    label.label-container.preferred-name {
      max-width: 200px;
    }

    label.label-container.zip {
      margin-right: 0;
      margin-left: -38px;
    }

    label.label-container.state {
      margin-left: 6px;
    }
  }
}

@media screen and (min-width: 64rem) {
  @supports (display: grid) {
      /* Text Elements */

    p.paragraph.prog-message {
      color: #e5d131;
      font-style: italic;
      font-size: 20px;

      -webkit-text-stroke-color: #000;
    }

    p.paragraph.calculated-age.paragraph-2 {
      padding-left: 6px;
    }

    /* Interaction Elements */

    form.form-container.individual-form {
      margin-left: -64px;
      max-width: none;

      grid-area: auto;
      grid-template-columns: 82px 1fr;
      grid-template-areas: 'left-header right-header' 'divider divider' 'right-area right-area';
    }

    form.form-container.loginsform {
      grid-template-areas: 'right-header' 'divider' 'right-area';
      grid-template-columns: 1fr;
    }

    form.form-container.add-someone-form {
      grid-area: individual-form;
    }

    form.form-container.add-someone-form.individual-form {
      grid-template-areas: 'right-header' 'divider' 'right-area';
      grid-template-columns: 1fr;
    }

    input[type=text].input-field {
      max-width: none;
    }

    input[type=text].input-field.state {
      grid-area: state;
    }

    input[type=email].input-field {
      grid-area: email;
    }

    /* Layout Elements */

    body.body-1 {
      grid-area: zip;
    }

    body.body-2 {
      background-color: transparent;
      background-image: url('../images/Helping_max_bg.png');
      background-attachment: scroll;
      background-position: left top;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      background-repeat: repeat;

      background-blend-mode: normal;
    }

    body.body-4 {
      background-image: url('../images/Helping_max_bg.png');
      background-attachment: scroll;
      background-position: left top;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      background-repeat: repeat;

      background-blend-mode: normal;
    }

    body.add-someone-body {
      background-color: #f4dbb0;
      background-image: url('../images/Helping_max_bg.png');
      background-attachment: scroll;
      background-position: left top;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      background-repeat: repeat;

      grid-area: auto;
      background-blend-mode: normal;
    }

    .container.holy-grail {
      grid-template-columns: 20px 200px 1fr 200px 20px;
      grid-template-areas: 'header header header header header' '. navigation main asides .' 'footer footer footer footer footer';
      grid-template-rows: 120px 1fr 70px;
    }

    .container.asides.layout-section {
      background-color: #585aab;
      background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:         linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-attachment: scroll;
      background-position: left top;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      background-repeat: repeat;

      background-blend-mode: normal;
    }

    .container.layout-section.navigation {
      background-color: #585aab;
      background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-image:         linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(29, 30, 33, .5) 100%);
      background-attachment: scroll;
      background-position: left top;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      background-repeat: repeat;
      color: #f0f0f0;

      background-blend-mode: normal;
    }

    .container.layout-section.main {
      display: grid;
      background-attachment: scroll;
      background-size: contain;

      grid-template-columns: auto;
      grid-template-rows: repeat(3 , auto);
      grid-template-areas: 'page-header' 'content-header' 'login';
    }

    .container.footer.layout-section {
      display: block;
    }

    .container.form-right-area {
      grid-template-areas: 'userID userID' 'newpassword newpassword' 'email email' 'admin admin' 'submit-button individualID';
      grid-template-columns: repeat(2 , auto);
      grid-template-rows: repeat(5 , auto);
      grid-area: right-area;
    }

    .container.right-header {
      min-width: 100px;
    }

    .container.holy-grail.login-grail {
      grid-template-areas: 'header header header header header' '. navigation main asides .' '. navigation main asides .' '. navigation main asides .' 'footer footer footer footer footer';
    }

    .container.login-grail {
      grid-template-areas: 'header header header header header' '. navigation main asides .' 'footer footer footer footer footer';
      grid-template-rows: 120px 1fr 70px;
    }

    .container.sg-results {
      display: block;
      background-attachment: scroll;
      background-size: contain;

      grid-template-columns: auto;
      grid-template-rows: repeat(3 , auto);
      grid-template-areas: 'page-header' 'content-header' 'login';
    }

    .container.sg-question {
      grid-area: main;
    }

    .container.state-zip {
      display: grid;

      grid-area: state-zip;
      grid-template-columns: repeat(2 , auto);
      grid-template-rows: auto;
      grid-template-areas: 'state zip';
    }

    .container.form-right-area.individualsform {
      grid-template-areas: 'preferred-name preferred-name last-name last-name' 'address-1 address-1 address-1 address-1' 'address-2 address-2 address-2 address-2' 'city city state-zip state-zip' 'phone phone email email' 'calculated-age birthdate birthdate life-stage' 'attends attends attends attends' 'comments comments comments comments' 'submit-button submit-button individualID individualID';
      grid-template-columns: repeat(4 , auto);
      grid-template-rows: repeat(9 , auto);
    }

    .container.layout-section.main.users-layout {
      grid-template-areas: 'page-header' 'email-verification' 'content-header' 'individual-form';
      grid-template-rows: repeat(4 , auto);
      grid-template-columns: auto;
    }

    .container.caring-grail.holy-grail {
      grid-template-rows: 120px repeat(2 , auto);
    }

    .container.page-header {
      grid-area: page-header;
    }

    .container.content-header {
      grid-area: content-header;
    }

    button.button {
      grid-area: auto;
    }

    .html-element.html-element-1 {
      grid-area: individualID;
    }

    label.label-container.password {
      display: block;
      margin-left: 0;
    }

    label.label-container.email {
      margin-left: 0;
    }

    label.label-container.last-name {
      display: block;
    }

    .html-element.input-field {
      float: none;
      padding-right: 8px;

      justify-self: flex-end;
    }

    label.label-container.life-stage {
      margin-left: 24px;
      width: 164px;
    }

    label.label-container.birthdate {
      padding-right: 0;
      width: 400px;

      -webkit-box-flex: 0;
      -webkit-flex: 0 2;
         -moz-box-flex: 0;
          -ms-flex: 0 2;
              flex: 0 2;
    }

    label.label-container.zip {
      display: block;
      margin-left: -164px;
      max-width: 200px;

      grid-area: zip;
    }

    label.label-container.state {
      grid-area: auto;
    }
  }
}