/* Inside <main>
.region-content {
  max-width: 80%;
  margin: 0 auto;
}
.block-core,
article
*/
/* Todo: need better explanation
 * This below is specific to dkcom theme as we want to only make the content areas 80%
 */
.layout-content > .region-content > div, /* Todo: this target all div inside: blocks for title, edit, mailer sign up etc */
.region-footer-bottom, /* > div, */
.region-footer-below,
#user-login-form,
#user-register-form,
#user-pass {
  max-width: 90%;
  margin: 0 auto 2em;
}

.region-footer > div {
  padding-top: 5.5em;
  padding-bottom: 5.5em;
  margin: 0 auto 0;
}

#block-dkcom-page-title {

}

#user-login-form,
#user-register-form,
#user-pass {
  padding-top: 2em;
  padding-bottom: 2em;
}

@media only screen and (min-width: 567px) {
  .layout-content > .region-content > div,
  .region-footer-bottom,  /* > div, */
  .region-footer-below,
  #user-login-form,
  #user-register-form,
  #user-pass {
    max-width: 80%;
  }
}

@media only screen and (min-width: 1336px) {
  .layout-content > .region-content > div,
  .region-footer-bottom, /* > div, */
  .region-footer-below,
  #user-login-form,
  #user-register-form,
  #user-pass {
    max-width: 1236px;
  }
}