/* That's 20px, having set font size on HTML element */
body {
  background-blend-mode: multiply;
  background-color: #e6e6e6;
  background-image: url("../images/bg_g.webp"), url("../images/bg_body.webp");
  background-position: calc((100vw / 18) * 4) 11.2rem, center 22.4rem;
  background-repeat: no-repeat;
  background-size: calc((100vw / 18) * 14), 175%; }

#about-therapy {
  background-blend-mode: multiply;
  background-color: #e6e6e6;
  background-image: url("../images/bg_b.webp"), url("../images/bg_about-therapy.webp");
  background-position: calc((100vw / 18) * 4) 0, center top;
  background-repeat: no-repeat;
  background-size: calc((100vw / 18) * 13), 150%;
  padding-top: 14rem;
  scroll-padding-top: 14rem; }

#first-meeting {
  background-blend-mode: multiply;
  background-color: #e6e6e6;
  background-image: url("../images/bg_a.webp"), url("../images/bg_first-meeting.webp");
  background-position: calc((100vw / 18) * 1) 0, center 14rem;
  background-repeat: no-repeat;
  background-size: calc((100vw / 18) * 9), 200%;
  padding-top: 28rem;
  scroll-padding-top: 28rem; }

#fees {
  background-blend-mode: multiply;
  background-color: #e6e6e6;
  background-image: url("../images/bg_j.webp"), url("../images/bg_fees.webp");
  background-position: calc((100vw / 18) * 1) 0, center 5.6rem;
  background-repeat: no-repeat;
  background-size: calc((100vw / 18) * 16), 187.5%;
  padding-top: 19.6rem;
  scroll-padding-top: 19.6rem; }

@media only screen and (min-width: 667px) and (orientation: landscape) {
  body {
    background-position: calc((100vw / 18) * 9) 0rem, center 11.2rem;
    background-size: calc((100vw / 18) * 7), 175%; } }
@media only screen and (min-width: 768px) {
  body {
    background-position: calc((100vw / 18) * 7) 11.2rem, center 19.6rem;
    background-size: auto 42rem, 175%; }

  #about-therapy {
    background-position: calc((100vw / 18) * 7) 0, center 1.4rem;
    background-size: auto 42rem, 125%;
    padding-top: 22.4rem;
    scroll-padding-top: 22.4rem; }

  #first-meeting {
    background-position: calc((100vw / 18) * 3) 0, center 14rem;
    background-size: auto 44.8rem, 200%;
    padding-top: 42rem;
    scroll-padding-top: 42rem; }

  #fees {
    background-position: calc((100vw / 18) * 4) 0, center 5.6rem;
    background-size: auto 33.6rem, 187.5%;
    padding-top: 30.8rem;
    scroll-padding-top: 30.8rem; } }
@media only screen and (min-width: 1024px) {
  body {
    background-blend-mode: multiply, normal, multiply;
    background-image: url("../images/bg_g.webp"), linear-gradient(to right, #e6e6e6, transparent 35%), url("../images/bg_body.webp");
    background-position: calc((100vw / 18) * 7) 11.2rem, center, center 22.4rem;
    background-size: auto 53.2rem, cover, 175%; }

  #about-therapy {
    background-size: auto 44.8rem, 125%;
    padding-top: 42rem; }

  #first-meeting {
    background-position: calc((100vw / 18) * 4) 0, center 14rem;
    background-size: auto 50.4rem, 200%;
    padding-top: 47.6rem; }

  #fees {
    background-size: auto 47.6rem, 187.5%;
    padding-top: 44.8rem; } }
p.error {
  color: #e53e3e !important; }

form {
  background-color: #d9d9d9;
  margin-bottom: 2.8rem;
  padding: 1.4rem; }
  form label {
    left: -1000000px;
    position: absolute; }
  form input, form textarea {
    border: none;
    margin-bottom: 1.4rem;
    padding: 0.7rem;
    width: 95%; }
  form input.error, form textarea.error, form input.error::placeholder, form textarea.error::placeholder {
    color: #e53e3e; }
  form textarea {
    height: 28rem; }
  form button {
    background-color: #1e1a37;
    border: none;
    color: #e6e6e6;
    cursor: pointer;
    padding: 0.7rem; }
  form button:hover {
    color: white;
    transition: color 0.5s linear; }

form.disabled button {
  display: none; }
form.disabled input, form.disabled textarea {
  background-color: #d9d9d9;
  margin-bottom: 0;
  padding: 0 0.7rem;
  font-family: "anziano", sans-serif;
  font-weight: 400;
  font-style: italic; }
form.disabled textarea {
  height: fit-content;
  padding-bottom: 0; }

img {
  max-width: 100svw; }

#figure_01 {
  margin: 0 2.8rem 2.8rem 0; }
  #figure_01 figcaption {
    left: -1000000px;
    position: absolute; }

#bpc {
  height: 5.6rem; }

#iaap {
  height: 12.6rem; }

#sap {
  height: 4.2rem; }

@media only screen and (min-width: 768px) {
  #figure_01 {
    float: left;
    position: relative;
    right: 2.8rem; }

  #bpc {
    height: 4.9rem; }

  #iaap {
    height: 11.025rem; }

  #sap {
    height: 3.675rem; } }
body {
  margin: 0;
  padding-bottom: 2.8rem; }

figure img {
  width: calc((100vw / 18) * 8); }

header {
  padding: 5.6rem 0 0 0; }

header, main, footer {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr)); }
  header div, main div, footer div {
    grid-column: 1 / span 18;
    padding: 0 2.8rem; }

main {
  margin-top: 100vw; }
  main h2:first-of-type {
    margin-top: 0; }

footer {
  padding: 1.4rem 0 2.8rem 0; }
  footer #organisations ul {
    list-style: none;
    padding: 0; }
    footer #organisations ul li {
      margin-bottom: 4.2rem; }

@media only screen and (min-width: 667px) {
  main {
    margin-top: 75svh; } }
@media only screen and (min-width: 768px) {
  header div, main div, footer div {
    padding: 0 calc((100svw / 18) * 4); }

  main {
    margin-top: calc((100svw / 18) * 8); }

  figure img {
    width: calc((100vw / 18) * 4); }

  footer #organisations ul li {
    display: inline; } }
@media only screen and (min-width: 768px) {
  main {
    margin-top: 36.4rem; }

  footer #organisations {
    padding: 0 calc((100svw / 18) * 1) 0 calc((100svw / 18) * 1); }
    footer #organisations ul {
      display: flex;
      justify-content: space-between; }
      footer #organisations ul li {
        align-content: center; } }
@media only screen and (min-width: 1024px) {
  header div, main div, footer div {
    padding: 0 calc((100svw / 18) * 5) 0 calc((100svw / 18) * 5); }

  main {
    margin-top: 47.6rem; }

  footer #organisations {
    padding: 0 calc((100svw / 18) * 2) 0 calc((100svw / 18) * 5); } }
@media only screen and (min-width: 1366px) {
  footer #organisations {
    padding: 0 calc((100svw / 18) * 4) 0 calc((100svw / 18) * 5); } }
@media only screen and (min-width: 2560px) {
  header div, main div, footer div {
    padding: 0 calc((100svw / 18) * 7) 0 calc((100svw / 18) * 7); } }
a:link, a:hover, a:visited, a:active {
  color: #0b0a14;
  text-decoration: none;
  border-bottom: 0.0875rem solid #1e1a37; }

#organisations a:link, #organisations a:hover, #organisations a:visited, #organisations a:active {
  border: none; }

body.overlay-navigation header h1, body.overlay-navigation main, body.overlay-navigation footer {
  filter: blur(10px); }

#nav-primary-button:before, #nav-primary-button:after, #nav-primary-button span {
  background-color: #1e1a37;
  content: '';
  display: block;
  height: 0.175rem;
  margin: 0.9333333333rem;
  transition: all 0.5s ease-in-out; }

#nav-primary-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  height: 5.6rem;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 5.6rem;
  z-index: 5; }
  #nav-primary-button span {
    text-indent: -1000000px; }

#nav-primary-button:focus {
  outline: 0; }

body.overlay-navigation #nav-primary-button:before, body.overlay-navigation #nav-primary-button:after, body.overlay-navigation #nav-primary-button span, #nav-primary-button body.overlay-navigation span {
  box-shadow: none;
  transform: translateY(11px) rotate(45deg); }

body.overlay-navigation #nav-primary-button:after {
  box-shadow: none;
  transform: translateY(-11px) rotate(-45deg); }

body.overlay-navigation #nav-primary-button span {
  transform: scale(0); }

#nav-primary {
  background-color: #e2dff0;
  height: 100%;
  left: -100%;
  margin: 0;
  opacity: 0;
  padding: 5.6rem;
  position: absolute;
  width: 100%;
  z-index: 4;
  transition: opacity 0.5s linear; }
  #nav-primary a {
    font-size: 4rem;
    line-height: 5.6rem; }
  #nav-primary ul {
    list-style: none;
    margin: 0;
    padding: 0; }

body.overlay-navigation #nav-primary-button {
  background-color: #e2dff0; }

body.overlay-navigation #nav-primary {
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0; }

@media only screen and (min-width: 568px) and (max-width: 896px) and (orientation: landscape) {
  #nav-primary {
    column-count: 2;
    column-gap: 2.8rem; } }
@media only screen and (min-width: 1024px) {
  #nav-primary {
    background-color: transparent;
    left: calc(100svw / 18);
    max-width: calc((100vw / 18) * 3);
    opacity: 1;
    padding: 0;
    position: fixed;
    top: 26.6rem;
    z-index: 1; }
    #nav-primary a {
      font-size: 2.25rem;
      line-height: 3.15rem; }
    #nav-primary li {
      margin-bottom: 1.4rem; }

  #nav-primary-button {
    display: none; } }
@media only screen and (min-width: 1366px) {
  #nav-primary {
    left: calc((100svw / 18) * 2); } }
@media only screen and (min-width: 2560px) {
  #nav-primary {
    left: calc((100svw / 18) * 5); } }
html {
  font-size: 62.5%; }

* {
  color: #1e1a37;
  font-size: 2rem;
  line-height: 2.8rem;
  font-family: "anziano", sans-serif;
  font-weight: 400;
  font-style: normal; }

em, i {
  font-family: "anziano", sans-serif;
  font-weight: 400;
  font-style: italic; }

strong, bold {
  font-family: "anziano", sans-serif;
  font-weight: 700;
  font-style: normal; }

abbr {
  text-decoration: none;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.021875rem; }

figcaption {
  font-size: 1.75rem;
  padding-left: 2.8rem;
  font-family: "anziano", sans-serif;
  font-weight: 400;
  font-style: italic; }
  figcaption em, figcaption i {
    font-family: "anziano", sans-serif;
    font-weight: 400;
    font-style: normal; }

h1, h1 span {
  font-size: 2.5rem;
  letter-spacing: 0.7rem;
  line-height: 3.5rem;
  text-transform: uppercase; }
  h1 span, h1 span span {
    padding-left: calc((100vw / 18) * 3);
    text-transform: lowercase;
    font-family: "anziano", sans-serif;
    font-weight: 400;
    font-style: italic; }

h2 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  margin: 5.6rem 0 1.4rem 0; }

p {
  margin-bottom: 2.8rem; }
