@import url("https://use.typekit.net/nkj3tzq.css");
:root {
  /* Fonts */
  --primary-font: "gotham", sans-serif;
  --secondary-font: "gala", sans-serif;
  /* Algemene kleuren */
  --black: #173b32;
  --off-black: #1A1A1A;
  --darker-black: #111111;
  --off-black-light: color-mix(in srgb, var(--darker-black), white 6%);
  --off-black-lightest: color-mix(in srgb, var(--off-black-light), white 10%);
  --dark-grey: #36584f;
  --light-black: #2d2d2d;
  --gray: #6f8b83;
  --gray-light: #dcebea;
  --creme-light: #f7fbfa;
  --off-white: #f4faf9;
  --off-white-alternate: #edf7f5;
  --whitefordark: #36584f;
  --broken-white: #dcebea;
  --white: #ffffff;
  --yellow: #F9B621;
  --yellow-alternate: #ec9819;
  --blue: #350BDC;
  --bluealternate: #0D63AB;
  --darkblue: #1A2330;
  --lighterblue: #191C36;
  --red: #E51D22;
  --darkred: #b91226;
  --pinkred: #EA4F56;
  --green: #158784;
  --green-dark: #1f5636;
  --green-light: color-mix(in srgb, var(--green), white 20%);
  --seagreen: #70bf9a;
  --orange: #f36b2f;
  --mahogany: #7C5A4E;
  --purple: #9700CD;
  --text-color: var(--dark-grey);
  --text-color-light: var(--white);
  --text-color-dark: var(--green-dark);
  --body-color: var(--white);
  --body-color-light: var(--off-white);
  --body-color-lighter: var(--off-white-alternate);
  --body-color-lightest: var(--gray-light);
  /* Mostar Jeugd logo palette */
  --mostar-teal: #158784;
  --mostar-teal-light: #63c3bd;
  --mostar-green: #1f5636;
  --mostar-orange: #f36b2f;
  --brand-color: var(--mostar-teal);
  --primary-color: var(--brand-color);
  --primary-color-light: color-mix(in srgb, var(--primary-color), white 10%);
  --primary-color-dark: color-mix(in srgb, var(--primary-color), black 10%);
  --primary-color-darkest: color-mix(in srgb, var(--primary-color), black 20%);
  /* Shared filter UI: activities overview and calendar */
  --reign-filter-panel-radius: 2.4rem;
  --reign-filter-control-radius: 1.4rem;
  --reign-filter-control-height: 6rem;
  --reign-filter-panel-shadow: 0 1.6rem 4.5rem color-mix(in srgb, var(--secondary-color) 9%, transparent);
  --reign-filter-control-shadow: 0 .8rem 2rem color-mix(in srgb, var(--secondary-color) 7%, transparent);
  --primary-color-lightest: color-mix(in oklab, var(--primary-color), white 15%);
  --secondary-color: var(--mostar-green);
  --secondary-color-light: color-mix(in srgb, var(--secondary-color), white 10%);
  --secondary-color-lightest: color-mix(in srgb, var(--secondary-color), white 25%);
  --secondary-color-dark: color-mix(in srgb, var(--secondary-color), black 15%);
  --accent-color: var(--mostar-orange);
  --tertiary-color: var(--accent-color);
  --tertiary-color-light: color-mix(in srgb, var(--tertiary-color), white 12%);
  --tertiary-color-dark: color-mix(in srgb, var(--tertiary-color), black 22%);
  --tertiary-color-darkest: color-mix(in srgb, var(--tertiary-color), black 30%);
  /* Type scale: centrale titel- en contentgroottes */
  --reign-eyebrow-size: clamp(1.2rem, 1.2vw, 1.5rem);
  --reign-title-2xs: clamp(1.6rem, 2.2vw, 2rem);
  --reign-title-xs: clamp(1.8rem, 2.6vw, 2.4rem);
  --reign-title-sm: clamp(2rem, 2.9vw, 2.8rem);
  --reign-title-md: clamp(2.2rem, 3.3vw, 3.2rem);
  --reign-title-lg: clamp(2.4rem, 3.8vw, 3.8rem);
  --reign-title-xl: clamp(2.8rem, 4.6vw, 4.8rem);
  --reign-title-2xl: clamp(3.2rem, 5.4vw, 6rem);
  --reign-copy-xs: clamp(1.4rem, 1.4vw, 1.6rem);
  --reign-copy-sm: clamp(1.5rem, 1.7vw, 1.8rem);
  --reign-copy-md: 1.6rem;
  --reign-copy-lg: clamp(1.8rem, 2.3vw, 2.4rem);
  --reign-copy-xl: clamp(2rem, 2.7vw, 2.8rem);
  --reign-stat-sm: var( --reign-copy-sm);
  --reign-stat-md: var( --reign-copy-md);
  --reign-stat-lg: var( --reign-copy-lg);
  /* Social media */
  --facebook: #1877f2;
  --linkedin: #0a66c2;
  --instagram: #c13584;
  --youtube: #ff0033;
  --whatsapp: #25D366;
  --swiper-theme-color: var(--primary-color) !important;
  --reign-gutter: 6rem;
  --reign-gutter-half: calc(var(--reign-gutter) * 0.5);
  /* Project rule: no rounded corners */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
}

html {
  min-height: 100%;
  font-size: 62.5%;
}

body.login.reign-login {
  position: relative;
  display: -ms-grid;
  display: grid;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-grid-columns: minmax(48rem, 0.94fr) minmax(56rem, 1.06fr);
  grid-template-columns: minmax(48rem, 0.94fr) minmax(56rem, 1.06fr);
  -ms-grid-rows: minmax(4rem, 1fr) auto auto auto minmax(4rem, 1fr);
  grid-template-rows: minmax(4rem, 1fr) auto auto auto minmax(4rem, 1fr);
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--dark-grey);
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--mostar-teal-light) 10%, transparent), transparent 26%), linear-gradient(145deg, var(--white), var(--creme-light));
  font-family: var(--primary-font);
  font-size: 1.6rem;
  line-height: 1.5;
}

body.login.reign-login > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

body.login.reign-login > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

body.login.reign-login > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

body.login.reign-login > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

body.login.reign-login > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

body.login.reign-login > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

body.login.reign-login > *:nth-child(7) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

body.login.reign-login > *:nth-child(8) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

body.login.reign-login > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

body.login.reign-login > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}
body.login.reign-login * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body.login.reign-login a {
  color: var(--primary-color);
  font-weight: 700;
  text-underline-offset: 0.3rem;
}
body.login.reign-login a:hover, body.login.reign-login a:focus-visible {
  color: var(--secondary-color);
}
body.login.reign-login a:focus-visible {
  outline: 0.3rem solid var(--accent-color);
  outline-offset: 0.3rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login > .screen-reader-text {
  position: absolute;
}
body.login.reign-login::before, body.login.reign-login::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
body.login.reign-login::before {
  top: -22rem;
  right: -18rem;
  width: 54rem;
  height: 54rem;
  opacity: 0.62;
  border: 0.1rem solid color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 44% 56% 61% 39%/53% 43% 57% 47%;
  -webkit-box-shadow: 0 0 0 5rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 11rem color-mix(in srgb, var(--primary-color) 2%, transparent);
          box-shadow: 0 0 0 5rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 11rem color-mix(in srgb, var(--primary-color) 2%, transparent);
}
body.login.reign-login::after {
  right: -8%;
  bottom: -10rem;
  width: 58%;
  height: 31rem;
  opacity: 0.12;
  background: url("../assets/images/footer-bg.png") center bottom/cover no-repeat;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, #000));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%);
  mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, #000));
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
body.login.reign-login #login {
  position: relative;
  z-index: 2;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-row-align: end;
      align-self: end;
  width: min(100% - 7rem, 69rem);
  margin: 0 auto 1.6rem;
  padding: clamp(4rem, 4.4vw, 5.8rem) clamp(3.6rem, 5vw, 6.4rem) clamp(3.6rem, 4vw, 5rem);
  overflow: hidden;
  background: var(--white);
  border-top: 0.8rem solid var(--accent-color);
  -webkit-box-shadow: 0 2.8rem 8rem color-mix(in srgb, var(--secondary-color) 17%, transparent);
          box-shadow: 0 2.8rem 8rem color-mix(in srgb, var(--secondary-color) 17%, transparent);
}
body.login.reign-login #login::before {
  content: "";
  position: absolute;
  top: -17rem;
  right: -17rem;
  width: 34rem;
  height: 34rem;
  opacity: 0.5;
  border: 0.1rem solid color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-radius: 47% 53% 58% 42%/42% 46% 54% 58%;
  -webkit-box-shadow: 0 0 0 3.5rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 7rem color-mix(in srgb, var(--primary-color) 2%, transparent);
          box-shadow: 0 0 0 3.5rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 7rem color-mix(in srgb, var(--primary-color) 2%, transparent);
  pointer-events: none;
}
body.login.reign-login #login > * {
  position: relative;
  z-index: 1;
}
body.login.reign-login .wp-login-logo {
  display: none;
}
body.login.reign-login .reign-login-intro {
  margin-bottom: 3.2rem;
}
body.login.reign-login .reign-login-intro__eyebrow {
  margin: 0 0 1rem;
  color: var(--accent-color);
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
body.login.reign-login .reign-login-intro h2 {
  margin: 0;
  color: var(--secondary-color);
  font-family: var(--secondary-font);
  font-size: clamp(3.8rem, 4.2vw, 5.5rem);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}
body.login.reign-login .reign-login-intro__description {
  max-width: 53rem;
  margin: 1.6rem 0 0;
  color: var(--gray);
  font-size: 1.6rem;
  line-height: 1.65;
}
body.login.reign-login .reign-login-intro__account {
  margin: 1.6rem 0 0;
  color: var(--gray);
  font-size: 1.35rem;
  text-align: center;
}
body.login.reign-login .reign-login-contexts {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 0.4rem minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 2.8rem;
  padding: 0.5rem;
  background: var(--off-white-alternate);
  border: 0.1rem solid color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 99rem;
  -webkit-box-shadow: inset 0 0.1rem 0.3rem color-mix(in srgb, var(--secondary-color) 8%, transparent);
          box-shadow: inset 0 0.1rem 0.3rem color-mix(in srgb, var(--secondary-color) 8%, transparent);
}
body.login.reign-login .reign-login-context {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.7rem;
  min-height: 5.2rem;
  padding: 1rem 1.4rem;
  color: var(--secondary-color);
  background: transparent;
  border: 0.1rem solid transparent;
  border-radius: 99rem;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
body.login.reign-login .reign-login-context__indicator {
  position: relative;
  display: -ms-grid;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 1.75rem;
          flex: 0 0 1.75rem;
  place-items: center;
  border: 0.2rem solid color-mix(in srgb, var(--primary-color) 55%, var(--gray-light));
  border-radius: 50%;
}
body.login.reign-login .reign-login-context__indicator::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent-color);
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
body.login.reign-login .reign-login-context:hover, body.login.reign-login .reign-login-context:focus-visible, body.login.reign-login .reign-login-context.is-active {
  color: var(--white);
  background: var(--primary-color);
  border-color: var(--primary-color);
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}
body.login.reign-login .reign-login-context:hover .reign-login-context__indicator, body.login.reign-login .reign-login-context:focus-visible .reign-login-context__indicator, body.login.reign-login .reign-login-context.is-active .reign-login-context__indicator {
  border-color: color-mix(in srgb, var(--white) 78%, transparent);
}
body.login.reign-login .reign-login-context.is-active {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  -webkit-box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
          box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
}
body.login.reign-login .reign-login-context.is-active .reign-login-context__indicator::after {
  background: var(--white);
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
body.login.reign-login form,
body.login.reign-login #loginform,
body.login.reign-login #lostpasswordform,
body.login.reign-login #resetpassform,
body.login.reign-login .admin-email-confirm-form {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login #loginform,
body.login.reign-login #lostpasswordform,
body.login.reign-login #resetpassform,
body.login.reign-login .admin-email-confirm-form {
  display: -ms-grid;
  display: grid;
  row-gap: 2.5rem;
}
body.login.reign-login form p {
  margin: 0;
}
body.login.reign-login .user-pass-wrap,
body.login.reign-login .user-pass1-wrap,
body.login.reign-login .user-pass2-wrap {
  margin: 0;
}
body.login.reign-login form label,
body.login.reign-login .user-pass1-wrap > p:first-child {
  color: var(--secondary-color);
  font-size: 1.35rem;
  font-weight: 800;
}
body.login.reign-login input[type=text],
body.login.reign-login input[type=email],
body.login.reign-login input[type=password] {
  width: 100%;
  min-height: 5.9rem;
  margin: 0.7rem 0 0;
  padding: 1.25rem 1.5rem;
  color: var(--dark-grey);
  background: var(--off-white);
  border: 0.2rem solid var(--gray-light);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-family: var(--primary-font);
  font-size: 1.65rem;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
body.login.reign-login input[type=text]:hover,
body.login.reign-login input[type=email]:hover,
body.login.reign-login input[type=password]:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, var(--gray-light));
}
body.login.reign-login input[type=text]:focus,
body.login.reign-login input[type=email]:focus,
body.login.reign-login input[type=password]:focus {
  background: var(--white);
  border-color: var(--primary-color);
  outline: 0.3rem solid color-mix(in srgb, var(--accent-color) 70%, transparent);
  outline-offset: 0.2rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login .wp-pwd {
  position: relative;
}
body.login.reign-login .wp-pwd input {
  padding-right: 5.2rem;
}
body.login.reign-login .wp-pwd .button.wp-hide-pw {
  position: absolute;
  top: 0.7rem;
  right: 0.5rem;
  width: 4.6rem;
  min-width: 0;
  height: 4.6rem;
  min-height: 0;
  padding: 0;
  color: var(--primary-color);
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login .wp-pwd .button.wp-hide-pw:focus-visible {
  outline: 0.3rem solid var(--accent-color);
  outline-offset: -0.2rem;
}
body.login.reign-login input:-webkit-autofill,
body.login.reign-login input:-webkit-autofill:hover,
body.login.reign-login input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dark-grey);
  -webkit-box-shadow: 0 0 0 100rem var(--off-white) inset;
          box-shadow: 0 0 0 100rem var(--off-white) inset;
  -webkit-transition: background-color 9999s ease-out;
  transition: background-color 9999s ease-out;
}
body.login.reign-login .forgetmenot {
  float: none;
}
body.login.reign-login .forgetmenot label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  color: var(--gray);
  font-weight: 650;
}
body.login.reign-login .forgetmenot input[type=checkbox] {
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 0.2rem solid var(--gray-light);
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login .forgetmenot input[type=checkbox]:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
body.login.reign-login .forgetmenot input[type=checkbox]:focus {
  border-color: var(--primary-color);
  outline: 0.3rem solid var(--accent-color);
  outline-offset: 0.2rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body.login.reign-login .submit {
  margin: 0;
}
body.login.reign-login .button,
body.login.reign-login .button-primary,
body.login.reign-login input[type=submit] {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-height: 5.4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.2rem 2.4rem;
  color: var(--white);
  background: var(--primary-color);
  border: 0.2rem solid var(--primary-color);
  border-radius: 2.8rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-family: var(--primary-font);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: none;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
body.login.reign-login .button:hover, body.login.reign-login .button:focus-visible,
body.login.reign-login .button-primary:hover,
body.login.reign-login .button-primary:focus-visible,
body.login.reign-login input[type=submit]:hover,
body.login.reign-login input[type=submit]:focus-visible {
  color: var(--white);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  -webkit-box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
          box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
}
body.login.reign-login .button:focus-visible,
body.login.reign-login .button-primary:focus-visible,
body.login.reign-login input[type=submit]:focus-visible {
  outline: 0.3rem solid var(--accent-color);
  outline-offset: 0.3rem;
}
body.login.reign-login .submit .button,
body.login.reign-login .submit .button-primary,
body.login.reign-login .submit input[type=submit] {
  float: none;
  width: 100%;
}
body.login.reign-login #nav,
body.login.reign-login #backtoblog {
  margin: 2.2rem 0 0;
  padding: 0;
  color: var(--gray);
  font-size: 1.35rem;
  text-align: center;
}
body.login.reign-login #backtoblog {
  display: none;
}
body.login.reign-login .notice,
body.login.reign-login .message,
body.login.reign-login #login_error,
body.login.reign-login #login-message {
  margin: 0 0 2rem;
  padding: 1.4rem 1.6rem;
  color: var(--dark-grey);
  background: var(--off-white-alternate);
  border: 0;
  border-left: 0.5rem solid var(--primary-color);
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 1.4rem;
  line-height: 1.55;
}
body.login.reign-login #login_error,
body.login.reign-login .notice-error {
  background: color-mix(in srgb, var(--red) 7%, var(--white));
  border-left-color: var(--red);
}
body.login.reign-login .success,
body.login.reign-login .notice-success {
  border-left-color: var(--seagreen);
}
body.login.reign-login .message a,
body.login.reign-login #login_error a {
  color: inherit;
}
body.login.reign-login .password-input-wrapper {
  width: 100%;
}
body.login.reign-login .password-strength {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  border: 0;
  font-size: 1.25rem;
}
body.login.reign-login .description,
body.login.reign-login #reg_passmail {
  color: var(--gray);
  font-size: 1.3rem;
  line-height: 1.55;
}
body.login.reign-login .privacy-policy-page-link {
  display: none;
}

.reign-login-brand {
  position: relative;
  z-index: 1;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1/6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% + clamp(7rem, 8vw, 13rem));
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: clamp(3.5rem, 4.5vw, 6.5rem);
  overflow: hidden;
  color: var(--secondary-color);
  background: radial-gradient(circle at 17% 12%, color-mix(in srgb, var(--white) 72%, transparent), transparent 27%), linear-gradient(145deg, var(--creme-light) 0%, var(--off-white-alternate) 42%, color-mix(in srgb, var(--mostar-teal-light) 28%, var(--white)) 100%);
  clip-path: ellipse(100% 118% at 0% 50%);
}
.reign-login-brand::before, .reign-login-brand::after {
  content: "";
  position: absolute;
  border: 0.1rem solid color-mix(in srgb, var(--primary-color) 11%, transparent);
  border-radius: 47% 53% 62% 38%/55% 34% 66% 45%;
  pointer-events: none;
}
.reign-login-brand::before {
  top: 12%;
  right: -24rem;
  width: 58rem;
  height: 58rem;
  -webkit-box-shadow: 0 0 0 3rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 7rem color-mix(in srgb, var(--primary-color) 2%, transparent);
          box-shadow: 0 0 0 3rem color-mix(in srgb, var(--primary-color) 2.5%, transparent), 0 0 0 7rem color-mix(in srgb, var(--primary-color) 2%, transparent);
}
.reign-login-brand::after {
  bottom: 7%;
  left: -28rem;
  width: 50rem;
  height: 38rem;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
}
.reign-login-brand__logo, .reign-login-brand__content {
  position: relative;
  z-index: 2;
}
.reign-login-brand__logo {
  position: relative;
  z-index: 2;
  display: -ms-grid;
  display: grid;
  width: 44rem;
  min-height: 13rem;
  max-width: calc(100% - 2rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;
  isolation: isolate;
  background: transparent;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.reign-login-brand__logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% + clamp(10rem, 10vw, 15rem));
  height: calc(100% + clamp(6rem, 7vw, 10rem));
  background: var(--white);
  border-radius: 43% 57% 68% 32%/56% 43% 57% 44%;
  -webkit-box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
          box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--secondary-color) 18%, transparent);
  -webkit-transform: translate(-50%, -51%) rotate(-1.5deg);
          transform: translate(-50%, -51%) rotate(-1.5deg);
  pointer-events: none;
}
.reign-login-brand__logo svg {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 44rem;
          flex: 0 0 44rem;
  width: 44rem;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.reign-login-brand__logo .mostar-logo__symbol {
  transform-box: fill-box;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: reign-login-logo-loop 8s ease-in-out infinite;
          animation: reign-login-logo-loop 8s ease-in-out infinite;
}
.reign-login-brand__content {
  max-width: 58rem;
  margin-bottom: clamp(15rem, 20vh, 22rem);
}
.reign-login-brand__content p {
  margin: 0 0 1.2rem;
  color: var(--primary-color);
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.reign-login-brand__content .reign-login-brand__title {
  margin: 0;
  color: var(--secondary-color);
  font-family: var(--secondary-font);
  font-size: clamp(4.2rem, 4.5vw, 6.2rem);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}
.reign-login-brand__content .reign-login-brand__title span {
  display: block;
  white-space: nowrap;
}
.reign-login-brand__content .reign-login-brand__title span:nth-child(2) {
  color: var(--primary-color);
}
.reign-login-brand__landscape {
  position: absolute;
  z-index: 1;
  inset: auto -10% 0;
  height: min(42vh, 44rem);
  opacity: 0.88;
  background: url("../assets/images/footer-bg.png") center bottom/cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-filter: saturate(0.9) contrast(0.96);
          filter: saturate(0.9) contrast(0.96);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(46%, #000));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 46%);
  mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(46%, #000));
  mask-image: linear-gradient(to bottom, transparent, #000 46%);
  pointer-events: none;
}

.reign-login-footer {
  position: relative;
  z-index: 2;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 4;
  grid-row: 4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  padding: 0.8rem 2rem 0;
  color: var(--gray);
  font-family: var(--primary-font);
  font-size: 1.2rem;
}
.reign-login-footer a {
  color: var(--gray);
}

@-webkit-keyframes reign-login-logo-loop {
  0%, 100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  20% {
    -webkit-transform: rotate(-2.5deg) scale(1.025);
            transform: rotate(-2.5deg) scale(1.025);
  }
  42% {
    -webkit-transform: rotate(1.5deg) scale(1.01);
            transform: rotate(1.5deg) scale(1.01);
  }
  64% {
    -webkit-transform: rotate(-1deg) scale(1.035);
            transform: rotate(-1deg) scale(1.035);
  }
  82% {
    -webkit-transform: rotate(1deg) scale(1.012);
            transform: rotate(1deg) scale(1.012);
  }
}

@keyframes reign-login-logo-loop {
  0%, 100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  20% {
    -webkit-transform: rotate(-2.5deg) scale(1.025);
            transform: rotate(-2.5deg) scale(1.025);
  }
  42% {
    -webkit-transform: rotate(1.5deg) scale(1.01);
            transform: rotate(1.5deg) scale(1.01);
  }
  64% {
    -webkit-transform: rotate(-1deg) scale(1.035);
            transform: rotate(-1deg) scale(1.035);
  }
  82% {
    -webkit-transform: rotate(1deg) scale(1.012);
            transform: rotate(1deg) scale(1.012);
  }
}
@media (max-width: 1023px) {
  body.login.reign-login {
    display: block;
    min-height: 100vh;
    padding-bottom: 2rem;
  }
  body.login.reign-login #login {
    width: min(100% - 3rem, 62rem);
    margin: -2.2rem auto 2rem;
    padding: clamp(2.5rem, 7vw, 4.5rem);
  }
  .reign-login-brand {
    display: -ms-grid;
    display: grid;
    width: 100%;
    min-height: 25rem;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    padding: 2.5rem clamp(2rem, 6vw, 5rem) 5.5rem;
    clip-path: none;
  }
  .reign-login-brand__logo {
    width: 28rem;
    min-height: 8.5rem;
    max-width: 68vw;
    -ms-grid-column-align: center;
        justify-self: center;
    margin: 0 auto;
    padding: 0;
  }
  .reign-login-brand__logo svg {
    -ms-flex-preferred-size: 28rem;
        flex-basis: 28rem;
    width: 28rem;
  }
  .reign-login-brand__logo::before {
    width: calc(100% + 9rem);
    height: calc(100% + 5rem);
    border-radius: 43% 57% 64% 36%/55% 42% 58% 45%;
  }
  .reign-login-brand__content {
    display: none;
  }
  .reign-login-brand__landscape {
    height: 18rem;
    opacity: 0.58;
  }
  .reign-login-footer {
    padding: 1rem 2rem;
  }
}
@media (max-width: 479px) {
  body.login.reign-login {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.login.reign-login::before {
    top: -15rem;
    right: -20rem;
    width: 42rem;
    height: 42rem;
  }
  body.login.reign-login::after {
    right: -30%;
    bottom: 0;
    width: 100%;
    height: 18rem;
    opacity: 0.08;
  }
  body.login.reign-login #login {
    width: calc(100% - 1.6rem);
    margin: -1.2rem auto 0.8rem;
    padding: 2rem 1.8rem;
    border-top-width: 0.55rem;
    -webkit-box-shadow: 0 1.8rem 4.5rem color-mix(in srgb, var(--secondary-color) 14%, transparent);
            box-shadow: 0 1.8rem 4.5rem color-mix(in srgb, var(--secondary-color) 14%, transparent);
  }
  body.login.reign-login #login::before {
    top: -21rem;
    right: -22rem;
  }
  body.login.reign-login .reign-login-contexts {
    -ms-grid-columns: minmax(0, 1fr) 0.3rem minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 1.6rem;
    padding: 0.4rem;
  }
  body.login.reign-login .reign-login-context {
    min-height: 4.8rem;
    gap: 0.5rem;
    padding: 0.8rem 0.65rem;
    font-size: 1.18rem;
  }
  body.login.reign-login .reign-login-context__indicator {
    width: 1.5rem;
    height: 1.5rem;
    -ms-flex-preferred-size: 1.5rem;
        flex-basis: 1.5rem;
  }
  body.login.reign-login .reign-login-intro {
    margin-bottom: 2rem;
  }
  body.login.reign-login .reign-login-intro__eyebrow {
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
  }
  body.login.reign-login .reign-login-intro h2 {
    font-size: clamp(2.8rem, 8.4vw, 3.3rem);
    line-height: 0.98;
  }
  body.login.reign-login .reign-login-intro__description {
    margin-top: 0.9rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  body.login.reign-login .reign-login-intro__account {
    margin-top: 1rem;
    font-size: 1.15rem;
  }
  body.login.reign-login.reign-login--chooser .reign-login-intro__description {
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
    white-space: nowrap;
  }
  body.login.reign-login #loginform,
  body.login.reign-login #lostpasswordform,
  body.login.reign-login #resetpassform,
  body.login.reign-login .admin-email-confirm-form {
    row-gap: 2rem;
  }
  body.login.reign-login form label,
  body.login.reign-login .user-pass1-wrap > p:first-child {
    font-size: 1.25rem;
  }
  body.login.reign-login input[type=text],
  body.login.reign-login input[type=email],
  body.login.reign-login input[type=password] {
    min-height: 5.3rem;
    margin-top: 0.55rem;
    padding: 1rem 1.3rem;
    font-size: 1.6rem;
  }
  body.login.reign-login .wp-pwd .button.wp-hide-pw {
    top: 0.55rem;
    right: 0.3rem;
    width: 4.6rem;
    height: 4.6rem;
  }
  body.login.reign-login .forgetmenot label {
    min-height: 4.4rem;
  }
  body.login.reign-login .submit .button,
  body.login.reign-login .submit .button-primary,
  body.login.reign-login .submit input[type=submit] {
    min-height: 5.2rem;
  }
  body.login.reign-login #nav {
    margin-top: 1.4rem;
    font-size: 1.25rem;
  }
  body.login.reign-login .notice,
  body.login.reign-login .message,
  body.login.reign-login #login_error,
  body.login.reign-login #login-message {
    margin-bottom: 1.6rem;
    padding: 1.15rem 1.25rem;
    font-size: 1.3rem;
    line-height: 1.45;
  }
  .reign-login-brand {
    min-height: 11.5rem;
    padding: 0.8rem 1.4rem 2.4rem;
  }
  .reign-login-brand__logo {
    width: 18.5rem;
    min-height: 5.7rem;
    max-width: 72vw;
  }
  .reign-login-brand__logo svg {
    width: 18.5rem;
    -ms-flex-preferred-size: 18.5rem;
        flex-basis: 18.5rem;
  }
  .reign-login-brand__logo::before {
    display: none;
  }
  .reign-login-brand__landscape {
    height: 8rem;
    opacity: 0.42;
  }
  .reign-login-footer {
    gap: 0.6rem;
    padding: 0.4rem 1.4rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 1.1rem;
  }
}
@media (max-width: 359px) {
  body.login.reign-login .reign-login-context {
    font-size: 1.08rem;
  }
  body.login.reign-login #login {
    width: calc(100% - 1rem);
    padding-inline: 1.4rem;
  }
}
@media (max-width: 767px) and (max-height: 700px) {
  .reign-login-brand {
    min-height: 8.5rem;
    padding: 0.6rem 1.2rem 1.8rem;
  }
  .reign-login-brand__logo {
    width: 15.5rem;
    min-height: 4.8rem;
  }
  .reign-login-brand__logo svg {
    width: 15.5rem;
    -ms-flex-preferred-size: 15.5rem;
        flex-basis: 15.5rem;
  }
  .reign-login-brand__landscape {
    height: 6rem;
  }
  body.login.reign-login #login {
    margin: -1.6rem auto 0.6rem;
    padding: 1.4rem 1.8rem 1.6rem;
  }
  body.login.reign-login .reign-login-intro {
    margin-bottom: 1.2rem;
  }
  body.login.reign-login .reign-login-intro__eyebrow, body.login.reign-login .reign-login-intro__description, body.login.reign-login .reign-login-intro__account {
    display: none;
  }
  body.login.reign-login .reign-login-intro h2 {
    font-size: 2.7rem;
  }
  body.login.reign-login .reign-login-contexts {
    margin-top: 1.2rem;
  }
  body.login.reign-login #loginform,
  body.login.reign-login #lostpasswordform,
  body.login.reign-login #resetpassform,
  body.login.reign-login .admin-email-confirm-form {
    row-gap: 1.2rem;
  }
  body.login.reign-login input[type=text],
  body.login.reign-login input[type=email],
  body.login.reign-login input[type=password] {
    min-height: 4.8rem;
    margin-top: 0.4rem;
    padding-block: 0.8rem;
  }
  body.login.reign-login .wp-pwd .button.wp-hide-pw {
    top: 0.4rem;
    width: 4.4rem;
    height: 4.4rem;
  }
  body.login.reign-login .forgetmenot label {
    min-height: 4.4rem;
  }
  body.login.reign-login .submit .button,
  body.login.reign-login .submit .button-primary,
  body.login.reign-login .submit input[type=submit] {
    min-height: 5rem;
  }
  body.login.reign-login #nav {
    margin-top: 1.2rem;
  }
  .reign-login-footer {
    padding-block: 0.3rem;
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reign-login-brand__logo .mostar-logo__symbol {
    -webkit-animation: none;
            animation: none;
  }
  body.login.reign-login a,
  body.login.reign-login input,
  body.login.reign-login .button,
  body.login.reign-login .reign-login-context,
  body.login.reign-login .reign-login-context__indicator::after {
    scroll-behavior: auto;
    -webkit-transition: none;
    transition: none;
  }
}