/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.98.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.3_webpack@5.98.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/.pnpm/sass-loader@13.3.3_sass@1.86.1_webpack@5.98.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./assets/css/styles.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
* Files inside this folder only contain abstract settings, mixins, functions, etc.
* They have no direct output.
*/
/* ===== BREAKPOINTS ===== */
/* Breakpoints */
/* Breakpoint max-widths */
/* ===== COLORS ===== */
/* Brand/Base colors */
/* Grays */
/* Status colors */
/* Font Colors */
/* ===== TYPOGRAPHY ===== */
/* Font Families */
/* Line height */
/* Turn px into rem */
/* Columns mixin. Add for example "grid-column: 2 / 12;" or "grid-column: span 4;" to its child elements */
/* Full absolute */
/*
* This file is used to contain all vendor imports.
*/
#outdated {
  font-family: sans-serif;
  position: absolute;
  position: fixed;
  background-color: #dc0e0e;
  color: white;
  display: none;
  overflow: hidden;
  left: 0;
  text-align: center;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1500;
  padding: 32px;
}
#outdated.fullscreen {
  height: 100%;
}
#outdated .vertical-center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#outdated h6 {
  font-size: 32px;
  line-height: 25px;
  margin-bottom: 24px;
}
@media screen and (max-width: 640px) {
  #outdated h6 {
    font-size: 24px;
  }
}
#outdated p {
  max-width: 680px;
  font-size: 16px;
  line-height: 20px;
  margin: 0 auto 8px;
}
#outdated #buttonUpdateBrowser {
  border: 2px solid white;
  color: white;
  cursor: pointer;
  display: block;
  margin: 30px auto 0;
  padding: 10px 20px;
  position: relative;
  text-decoration: none;
  width: 200px;
}
#outdated #buttonUpdateBrowser:hover {
  background-color: white;
  color: #dc0e0e;
}
#outdated .last {
  height: 20px;
  position: absolute;
  right: 32px;
  top: 10px;
  width: auto;
  display: inline-table;
}
@media screen and (max-width: 640px) {
  #outdated .last {
    top: 0;
    right: 8px;
  }
}
#outdated .last[dir=rtl] {
  left: 25px !important;
  right: auto !important;
}
#outdated #buttonCloseUpdateBrowser {
  color: white;
  display: block;
  font-size: 36px;
  height: 100%;
  line-height: 36px;
  position: relative;
  text-decoration: none;
  width: 100%;
}

/*
* This file is used to contain all base imports.
* Globally defined tags (body, h1, p, etc.) should also be included
*/
:root {
  /* Spacings */
  --grid-gap: 16px;
  --spacing-between-elements-small: 40px;
  --spacing-between-elements-medium: 48px;
  --spacing-between-elements-large: 56px;
  /* Fonts */
  --font-size-24-40: 1.5rem;
  --font-size-20-32: 1.25rem;
  --font-size-16-22: 1rem;
  --font-size-18-22: 1.125rem;
  --font-size-18-24: 1.125rem;
  --font-size-24-32: 1.5rem;
  --font-weight-regular-400: 400; /* Regular */
  --font-weight-regular-500: 500; /* Medium */
  --font-weight-regular-600: 600; /* Semi-bold */
  --font-weight-regular-700: 700; /* Bold */
  --font-weight-regular-800: 800; /* Extra bold */
  /* Font Weights heading */
  --font-weight-heading-500: 500; /* Medium */
  --font-weight-heading-600: 600; /* Semi-bold */
  --font-weight-heading-700: 700; /* Bold */
  --font-weight-heading-800: 800; /* Extra bold */
  /* Colors */
  --color-text-default: #000;
  --color-primary: #25596a;
  --color-secondary: #3caea2;
  --color-tertiary: #ede6d3;
  --color-tint-light: #f8f0e9;
  --color-yellow: #fedd7c;
  --color-orange: #ffa55e;
  --color-orange-dark: #dd6041;
  --color-pink: #d94c77;
  --color-purple: #674cd9;
  --color-blue: #5293d3;
  --color-green-dark: #25596a;
  --color-green: #3caea2;
}
@media screen and (min-width: 40em) {
  :root {
    /* Spacings */
    --grid-gap: 24px;
    /* Fonts */
    --font-size-24-40: 2rem;
    --font-size-20-32: 1.5rem;
    --font-size-18-24: 1.25rem;
    --font-size-16-22: 1.125rem;
    --font-size-18-22: 1.25rem;
    --font-size-24-32: 1.75rem;
  }
}
@media screen and (min-width: 60em) {
  :root {
    /* Spacings */
    --spacing-between-elements-small: 48px;
    --spacing-between-elements-medium: 64px;
    --spacing-between-elements-large: 96px;
    /* Fonts */
    --font-size-24-40: 2.5rem;
    --font-size-20-32: 2rem;
    --font-size-16-24: 1.375rem;
    --font-size-18-24: 1.5rem;
    --font-size-18-22: 1.375rem;
    --font-size-24-32: 2rem;
  }
}

/* Remove if no font-faces are used */
body,
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

body {
  color: #2c2f33;
  font-size: 1rem;
  line-height: 1.5;
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 16px;
  font-weight: var(--font-weight-heading-700);
  font-size: 1rem;
  line-height: 1.2;
  font-family: Poppins, Poppins, system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -1px;
}

h1 {
  font-size: var(--font-size-24-40);
}

h2 {
  font-size: var(--font-size-24-32);
}

h3 {
  font-size: var(--font-size-18-24);
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 16px;
}

b,
strong {
  font-weight: var(--font-weight-regular-600);
}

a {
  fill: currentColor;
  color: #25596a;
  text-decoration: none;
  transition: all 200ms ease;
}
a:active, a:focus, a:hover {
  text-decoration: underline;
}

button {
  appearance: none;
  border: none;
  background: transparent;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
}

legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}

label {
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
  cursor: pointer;
}

select {
  appearance: none;
  background-image: url("/images/icons/dropdown.svg");
  background-position: right 24px top 50%;
  background-repeat: no-repeat;
}
select::-ms-expand {
  display: none;
}

textarea {
  min-height: 160px;
  resize: vertical;
}

input,
select,
textarea {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid #e0e0e4;
  border-radius: 0;
  background-color: #f5f5f6;
  color: #2c2f33;
  font-size: 1rem;
  line-height: 1.5;
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
  vertical-align: top;
  transition: border-color 200ms ease;
}
input:focus, input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
  border-color: #25596a;
  outline: none;
}
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover {
  border-color: #e0e0e4;
}
input.form-error, input:user-invalid,
select.form-error,
select:user-invalid,
textarea.form-error,
textarea:user-invalid {
  border-color: #fc3030;
}

[type=search] {
  appearance: none;
}

[type=checkbox],
[type=radio] {
  display: inline;
  margin-right: 8px;
}

[type=file] {
  width: 100%;
}

::placeholder {
  color: rgba(44, 47, 51, 0.7);
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

iframe {
  border: 0;
}

ul,
ol {
  padding-left: 24px;
}

dl {
  margin-bottom: 16px;
}
dl dt {
  margin-top: 16px;
  font-weight: 600;
}
dl dd {
  margin: 0;
}

table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e4;
  font-weight: 600;
  text-align: left;
}

td {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e4;
}

tr,
td,
th {
  vertical-align: middle;
}

[data-theme] {
  --theme-bg: var(--color-primary);
  --theme-color: #fff;
}

[data-theme=ppc-green-dark] {
  --theme-bg: var(--color-primary);
}

[data-theme=ppc-green] {
  --theme-bg: var(--color-secondary);
}

[data-theme=yellow] {
  --theme-bg: var(--color-yellow);
  --theme-color: var(--color-text-default);
}

[data-theme=orange] {
  --theme-bg: var(--color-orange);
}

[data-theme=orange-dark] {
  --theme-bg: var(--color-orange-dark);
}

[data-theme=pink] {
  --theme-bg: var(--color-pink);
}

[data-theme=purple] {
  --theme-bg: var(--color-purple);
}

[data-theme=blue] {
  --theme-bg: var(--color-blue);
}

[data-theme=green] {
  --theme-bg: var(--color-green);
}

/*
* Files inside this folder should contain all styles relating to a reusable component.
* Each component does one thing and one thing only
* Components are re-usable across the project
* Each stylesheet contains all component styles, variations and states of one component
*/
.btn {
  --button-background-color: #dd6041;
  --button-hover-background-color: rgba(221, 96, 65, 0.75);
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  appearance: none;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  padding: 16px 24px;
  border: 0;
  border-radius: 4px;
  background-color: var(--button-background-color);
  color: #fff;
  font-weight: var(--font-weight-heading-700);
  font-size: 0.875rem;
  line-height: 1;
  font-family: Poppins, Poppins, system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background-color 200ms ease;
  -webkit-user-select: none;
          user-select: none;
}
.btn:hover, .btn:focus {
  background-color: var(--button-hover-background-color);
  text-decoration: none;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn svg:first-child {
  margin-right: 16px;
}
.btn svg:last-child {
  margin-left: 16px;
}
.btn svg:first-child:last-child {
  margin: 0;
}

.btn--secondary {
  background-color: #3caea2;
  color: #fff;
}
.btn--secondary:hover {
  background-color: rgba(60, 174, 162, 0.75);
}

.btn--sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 16px 24px;
  font-size: 1.125rem;
}

.btn--orange-dark {
  background-color: #dd6041;
}
.btn--orange-dark:hover {
  background-color: #ffa55e;
}

.btn--facebook {
  --button-background-color: #3b5998;
  --button-hover-background-color: rgba(59, 89, 152, 0.75);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA1UlEQVR4Ae3VIejCUBDH8T/8g713oz3YNZgFYT2Y7C7aYb2t2qxLA6NRDIYV26JpZZy/cMHyjge+PS78HnzBcseHQ9jf6rBJmoj8oy2q0RO90YgG/d2jO6pi9qXGLRUV867ZgIor9FLiDqiXG5B4Bd6QuATq9cQz8BSBeaALqr8qcwEbsd/ul/1T//8aez4PsDOAlXdgSSCBKYAKKQL1BvBszC3SAtO/vXfg2jtw7hk4opln4Ev3ugW2UwDbQIMB6QIzR35JCCSQQAIJJJBAAgkkMAfwAw6igSZYg6MiAAAAAElFTkSuQmCC");
}

.btn--twitter {
  --button-background-color: #1da1f2;
  --button-hover-background-color: rgba(29, 161, 242, 0.75);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAYFBMVEVHcEz////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////1QUVpAAAAIHRSTlMAUqjg9OjFeRQeCinN/2k+soiivjcO+gOb2ktZcWAwpWXUQfwAAAEXSURBVHgB1dJFYt0wAATQMVswZqbe/5RtE32STNvkGcQs/GaeH4RRnKT4Jr5/EjtK0wgzAHlRAkBV72o2IV+qKmLUApAd3ZppREvUoAcU6dYcaBnzaciAycTxJkNaQtIH0JjU0OJpoquQAFIawdzDWOgoTUnNZ9VE4EtCWwTD45suPSVX2gIY8GnraNP4tjVtzUvFc41jEfLKgG+CdxIYMW9sMBpei/BU8VKFp37gFQ9vS8RTY48XsTUVz6x4Ex1PBf35TbXM+NRqnvgDW3pSM2jh6NeAe12DAyKhI5xwoE86t16OvTSJ6Ig2e0AhmqmMO7qqFBZR8YjOsbMN4a7a2uOIXP2AT12cbLgg8jlLltVTPXr8LP8AZ9EtnlAlQ68AAAAASUVORK5CYII=");
}

.btn--instagram {
  --button-background-color: #e1306c;
  --button-hover-background-color: rgba(225, 48, 108, 0.75);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAYFBMVEVHcEz////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////1QUVpAAAAIHRSTlMADU6MqcLS2+LqpSSc+v/9aZXzyriuBSqEHhJwQHk0Xd+AqCMAAAHRSURBVHgBfZOHcoQwDAVFtSleernG/f9fZiDWnElhk+s7QjzJ4oniJM1yY23hsdbkWZnEkYRUtaMBGhT9gKurj9c6LnCteh0HvRnGKU3L9JtpHEzPQefrAZi2kj+oWgPQHu8dkMzyHwng9ir17sk/qFmLRA7MP/WitB8WmQ24SGJt4Q9WYPi+ifj4UJ3rVJVPeQKcyO1oroQ+vM3EAJik8nlMItJDKhkYUebE4XHdLNKOyV7cQCY5DOrdMwKGu3gGyHd71HqHZ7vHo7OHqWGMYHZxCgJr1uPXeW0+o5MUrNhD1BE1T/E8nR9IIKafguspRJ1YCYUUqGjABiOaLZi/xEibCmd8D0TtsTrN0se9aI+BuFyL50snf1/6LIo979tswAY3c47n9RFfQHcSNfClAbeptzloliDwYIQ14HzNhwNqOYu6FFEOkK/v9/r9LgqXIlyzW05AfhNPBvl5caMahVLr+cVNz0dhqwuAot7Eo0chAW4Sctu2H18AydVxVd5ALPcGbCRX5NDcj9jp5IIXUPqB8Lr2mkXfMbzv8gf3eOBTp+TADmNZdzvHc12Og/WRilZvuCLoa5v4l2k7h/qux9wWvXNNAzTO9YXNx/qt2X8BvrMrwMOTijMAAAAASUVORK5CYII=");
}

/* Height & Width of box */
/* Border-radius of the box */
/* Background-color of the box */
/* Border of the box */
.input-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.input-checkbox:not(:last-of-type) {
  margin-bottom: 8px;
}

.input-checkbox input[type=checkbox] {
  z-index: 1;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0.001;
}

.input-checkbox__box {
  display: inline-block;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e4;
  border-radius: 4px;
  background-color: #f5f5f6;
}
.input-checkbox__box:after {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/images/icons/check.svg);
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  opacity: 0;
}
.input-checkbox input[type=checkbox]:checked + .input-checkbox__box:after {
  opacity: 1;
}

.input-checkbox__label {
  margin-left: 16px;
}

.form__input--error + .input-checkbox__box {
  border-color: #fc3030;
}

.input-checkbox + .form__error {
  margin-top: 4px;
}

/* Height & Width of box */
/* Background-color of the box */
/* Border of the box */
/* Width of the Dot icon */
/* Color of the Dot icon */
.input-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.input-radio:not(:last-of-type) {
  margin-bottom: 8px;
}

.input-radio input[type=radio] {
  z-index: 1;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0.001;
}

.input-radio__box {
  display: inline-flex;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e4;
  border-radius: 24px;
  background-color: #f5f5f6;
}
.input-radio__box:after {
  width: 12px;
  height: 12px;
  border-radius: 24px;
  background-color: #25596a;
  content: "";
  opacity: 0;
}
.input-radio input[type=radio]:checked + .input-radio__box:after {
  opacity: 1;
}

.input-radio__label {
  margin-left: 16px;
}

.form__input--error + .input-radio__box {
  border-color: #fc3030;
}

.input-radio + .form__error {
  margin-top: 4px;
}

/* This is the max width of the wrapper + the wrappers padding */
.scrollable {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.scrollable__slider {
  margin-bottom: -18px;
  padding-bottom: 18px;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
.scrollable__slider.disable-scroll-snap {
  scroll-snap-type: none;
}

.scrollable__inner {
  display: inline-flex;
}

.scrollable__inner > * {
  flex-shrink: 0;
  margin-right: var(--grid-gap);
  scroll-snap-align: center;
}
.scrollable__inner > *:first-child {
  margin-left: var(--grid-gap);
}
@media screen and (min-width: calc(73.125em + 48px)) {
  .scrollable__inner > *:first-child {
    margin-left: calc((var(--window-width) - 73.125em) / 2);
  }
}
@media screen and (min-width: calc(73.125em + 48px)) {
  .scrollable__inner > *:last-child {
    margin-right: calc((var(--window-width) - 73.125em) / 2);
  }
}

.scrollable__controls {
  display: none;
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}
@media screen and (min-width: 40em) {
  .scrollable__controls {
    display: flex;
    justify-content: space-between;
  }
}

.scrollable__controls__button {
  pointer-events: auto;
}
.scrollable__controls__button:disabled {
  visibility: hidden;
}

.accordion__item {
  display: flex;
  flex-direction: column;
}

.accordion__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0.001;
}

.accordion__title {
  cursor: pointer;
}

.accordion__content {
  display: none;
}
.accordion__input:checked ~ .accordion__content {
  display: flex;
}

.socials {
  padding: 8px 0 0 0;
}

.socials-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials-list li {
  margin: 4px;
  padding: 0;
}

.socials-list .btn {
  padding-left: 40px;
  background-position: left 10px center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
.socials-list .btn:hover {
  opacity: 0.7;
}

.ubb-markdown-form {
  grid-gap: 15px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-template-areas: "ubb" "markdown" "button";
}
@media screen and (min-width: 40em) {
  .ubb-markdown-form {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "ubb markdown" "button button";
  }
}
@media screen and (min-width: 60em) {
  .ubb-markdown-form {
    grid-gap: 25px;
  }
}
.ubb-markdown-form legend {
  color: #25596a;
  font-weight: 700;
  font-size: 1.125rem;
}
.ubb-markdown-form textarea {
  width: 100%;
  max-width: none;
  height: 250px;
  border-radius: 0;
  font-size: 15px;
  font-family: monospace;
}
@media screen and (min-width: 40em) {
  .ubb-markdown-form textarea {
    height: 350px;
  }
}
.ubb-markdown-form textarea[name=ubb] {
  grid-area: ubb;
}
.ubb-markdown-form textarea[name=markdown] {
  grid-area: markdown;
}
.ubb-markdown-form footer {
  grid-area: button;
  text-align: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group__payment {
  align-items: flex-start;
  margin-top: 24px;
}

/*
* This folder contains the stylesheets for the main parts of the site (header, footer, etc.)
*/
/* Header */
.header {
  background: linear-gradient(to right, #25596a 0%, #25596a 50%, #3caea2 100%);
}
@media screen and (min-width: 40em) {
  .header {
    z-index: 10;
    position: sticky;
    top: 0;
    box-shadow: 3px 0 3px var(--color-text-default);
  }
}

.header .wrapper-inner {
  position: relative;
}
@media screen and (max-width: 39.99em) {
  .header .wrapper-inner {
    padding-right: 0;
    padding-left: 0;
  }
}

.header-logo {
  display: block;
  width: 100px;
  margin: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

.header-logo img {
  max-width: 25vw;
  margin: 0;
}
@media screen and (max-width: 39.99em) {
  .header-logo img {
    margin: auto;
  }
}

.navigation {
  position: absolute;
  top: 28px;
  right: 8px;
}

.hero {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: #f5f5f6;
}

.hero--has-image {
  align-items: flex-end;
  height: 30vw;
  max-height: 320px;
  color: white;
}
.hero--has-image:before, .hero--has-image:after {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
}
.hero--has-image:before, .hero--has-image:after {
  background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, rgba(0, 0, 0, 0) 100%);
  height: 50%;
  opacity: 0.5;
}
.hero--has-image:after {
  background: linear-gradient(45deg, rgba(37, 89, 106, 0.6) 0%, rgba(37, 89, 106, 0.1) 25%, rgba(37, 89, 106, 0.1) 75%, rgba(37, 89, 106, 0.6) 100%);
  z-index: 0;
  height: 100%;
  opacity: 1;
}

.hero--has-image[data-type=meetup] {
  aspect-ratio: 27/8;
  height: auto;
  min-height: auto;
  max-height: none;
}

.hero__title {
  z-index: 2;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 24px;
  text-align: center;
}

.hero:not(.hero--has-image) .hero__title {
  color: #25596a;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .hero:not(.hero--has-image) .hero__title {
    background-image: linear-gradient(90deg, #3caea2, #25596a);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.hero__image {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Homepage */
.homepage-content {
  grid-gap: 8px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: ". ." ". ." "topics topics" ". ." ". ." ". ." ". .";
  max-width: 1440px;
  margin: auto;
  padding: 8px;
}
@media screen and (min-width: 40em) {
  .homepage-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". topics" ". topics" ". ." ". ." ". ." ". ." ". .";
  }
}
@media screen and (min-width: 73.125em) {
  .homepage-content {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". . topics" "meetup . topics" ". . ." ". . .";
    gap: 12px;
  }
}

.homepage-content [data-area=latest-topics] {
  grid-area: topics;
}

.homepage-content a:focus-visible {
  outline: 2px solid #ffa55e;
  border-radius: 4px;
}

.homepage-content .btn--sm {
  display: inline-flex;
  margin-inline: auto;
  margin-block: 8px;
  line-height: 1.2;
}
@media screen and (max-width: 29.99em) {
  .homepage-content .btn--sm {
    font-size: 0.6875rem;
  }
}

.news-item {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 39.99em) {
  .news-item a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
  }
}
.news-item a:focus-visible {
  outline: none;
}
.news-item a:focus-visible:after {
  inset: 0;
  content: "";
  z-index: 2;
  position: absolute;
  box-shadow: inset 0 0 0 4px #ffa55e;
}

@media screen and (min-width: 60em) {
  .news-item[data-last=true] {
    display: none;
  }
}
.news-item a {
  display: block;
}

.news-item__content {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  bottom: 0;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  gap: 8px;
  border-radius: 4px;
  color: white;
  text-align: center;
}
@media screen and (min-width: 30em) {
  .news-item__content {
    padding: 16px;
  }
}
@media screen and (min-width: 40em) {
  .news-item__content {
    gap: 12px;
  }
}

.news-item__content:after {
  background-image: linear-gradient(to top, #0b242e 0%, rgba(11, 36, 46, 0.738) 19%, rgba(11, 36, 46, 0.738) 19%, rgba(11, 36, 46, 0.541) 34%, rgba(11, 36, 46, 0.382) 47%, rgba(11, 36, 46, 0.278) 56.5%, rgba(11, 36, 46, 0.194) 65%, rgba(11, 36, 46, 0.126) 73%, rgba(11, 36, 46, 0.075) 80.2%, rgba(11, 36, 46, 0.042) 86.1%, rgba(11, 36, 46, 0.021) 91%, rgba(11, 36, 46, 0.008) 95.2%, rgba(11, 36, 46, 0.002) 98.2%, rgba(11, 36, 46, 0) 100%);
  z-index: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 175%;
  border-radius: 0 0 4px 4px;
  content: "";
}

.news-item__content > * {
  z-index: 1;
  position: relative;
}

.news-item__content__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-16-22);
  text-overflow: ellipsis;
  text-wrap: balance;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 29.99em) {
  .news-item__content__title {
    font-size: 0.875rem;
  }
}

.news-item__content__date {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
}
@media screen and (max-width: 39.99em) {
  .news-item__content__date {
    display: none;
  }
}

.news-item__content__intro {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.9375rem;
}
@media screen and (max-width: 59.99em) {
  .news-item__content__intro {
    display: none;
  }
}

.news-item__image {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.homepage-tracker {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  gap: 8px;
  border-radius: 4px;
  background: #3baca1;
  text-align: center;
}
@media screen and (min-width: 30em) {
  .homepage-tracker {
    padding: 16px;
  }
}
.homepage-tracker, .homepage-tracker:hover {
  text-decoration: none;
}
.homepage-tracker:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(45deg, #3baca1, rgba(0, 0, 0, 0.4));
  content: "";
}
.homepage-tracker > * {
  z-index: 2;
  position: relative;
}

.homepage-tracker__title,
.homepage-tracker__intro {
  margin: 0;
  color: #fff;
}

.homepage-tracker__title {
  margin: 0;
  font-size: var(--font-size-16-24);
}

@media screen and (max-width: 39.99em) {
  .homepage-tracker__intro {
    display: none;
  }
}

.homepage-tracker__image {
  width: 50%;
  max-width: 140px;
  margin: auto;
}

.homepage-tracker .btn {
  background: white;
  color: #246962;
}

/* Content */
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  font-weight: var(--font-weight-regular-400);
}
.content > * {
  order: 2;
}

div[class^=content__]:not(:first-child) {
  margin-top: 40px;
}

.content__index {
  order: 1;
  padding: 16px;
  background: rgba(237, 230, 211, 0.5);
}
.content__index ul {
  margin: 0;
}
.content__index li:not(:last-child) {
  margin-bottom: 4px;
}
.content__index a {
  color: #000;
  font-weight: var(--font-weight-regular-500);
  font-size: 1rem;
  text-decoration: none;
}
.content__index a:hover {
  text-decoration: underline;
}

.content__index + div.content__text--intro {
  order: 0;
  margin-top: 0;
  margin-bottom: 40px;
}

/* Content fields */
.content__text__title {
  position: relative;
  padding-bottom: 10px;
  color: #25596a;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .content__text__title {
    background-image: linear-gradient(90deg, #3caea2, #25596a);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
.content__text__title:after {
  background: linear-gradient(to right, #25596a 0%, #25596a 50%, #3caea2 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  opacity: 0.2;
}
@media screen and (min-width: 60em) {
  .content__text__title:after {
    left: -15px;
    width: calc(100% + 30px);
  }
}

.content__text {
  position: relative;
  max-width: 800px;
  font-size: 1rem;
}
.content__text h1:not(:first-child),
.content__text h2:not(:first-child),
.content__text h3:not(:first-child),
.content__text h4:not(:first-child) {
  margin-top: 20px;
}
.content__text pre {
  padding: 8px 16px;
  background: #ede6d3;
  white-space: normal;
  word-break: break-all;
}

.content__text--intro {
  max-width: none;
  font-weight: var(--font-weight-regular-300);
  font-size: 1.125rem;
}

.content__text-wrapper {
  display: flex;
  flex-direction: column;
}

.content__text__content > *:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 40em) {
  .content__text-wrapper--image-left,
  .content__text-wrapper--image-right {
    flex-direction: row;
  }
  .content__text-wrapper--image-left .content__text__image,
  .content__text-wrapper--image-right .content__text__image {
    align-self: flex-start;
    min-width: 40%;
    max-width: 400px;
  }
  .content__text-wrapper--image-left .content__text__image {
    order: 1;
    margin-right: 32px;
  }
  .content__text-wrapper--image-left .content__text__content {
    order: 2;
  }
  .content__text-wrapper--image-right .content__text__image {
    margin-left: 32px;
  }
}
.content__text-wrapper--image-bottom .content__text__image {
  margin-top: 24px;
}

.content__text-wrapper--image-top .content__text__content {
  order: 2;
}
.content__text-wrapper--image-top .content__text__image {
  order: 1;
  margin-bottom: 24px;
}

/* Misc */
.wrapper-inner {
  display: block;
  max-width: 73.125em;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--grid-gap);
  padding-left: var(--grid-gap);
}

.wrapper-inner--relative {
  position: relative;
}

.highlighted-content {
  padding: 32px 0;
  background: #f8f0e9;
  background: linear-gradient(45deg, #f8f0e9 0, #f8f0e9 75%, rgb(239.3827586207, 221.5344827586, 205.9172413793) 100%);
  font-weight: var(--font-weight-regular-300);
  text-align: center;
}
.highlighted-content .wrapper-inner > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.highlighted-content__title {
  display: inline-block;
  color: #25596a;
  font-size: var(--font-size-24-32);
}
@media screen and (min-width: 60em) {
  .highlighted-content__title {
    font-size: 1.75rem;
  }
}

.highlighted-content__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.grid {
  grid-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 40em) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 30em) {
  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 60em) {
  .grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 30em) {
  .grid--4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 40em) {
  .grid--4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 60em) {
  .grid--4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.form {
  display: flex;
  flex-direction: column;
}

.form__group {
  grid-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-bottom: 32px;
}

.form__item {
  grid-column: span 12;
}

@media screen and (min-width: 40em) {
  .form__item--4 {
    grid-column: span 4;
  }
  .form__item--6 {
    grid-column: span 6;
  }
  .form__item--8 {
    grid-column: span 8;
  }
}
.form__label {
  display: inline-block;
  margin: 0 0 4px 0;
}

.form__input--error {
  border-color: #fc3030;
}

.form__error {
  color: #fc3030;
  font-size: 0.875rem;
}

/* Meet-ups */
.meetup-detail .content__text__title {
  color: #000;
}
.meetup-detail .btn {
  background: var(--theme-bg);
  color: var(--theme-color);
}
.meetup-detail .btn:hover {
  opacity: 0.9;
}

.meetup-meta strong {
  display: block;
  margin-bottom: 8px;
}

.meetup-meta__date {
  margin-bottom: 16px;
}

.meetup-meta__date .meetup-date {
  --month-size: calc(var(--day-size) / 2);
  --multiple-size: calc(var(--day-size) / 2);
}

.pricing__row {
  display: flex;
  padding: 8px;
  background: rgba(237, 230, 211, 0.5);
  font-size: 0.9375rem;
}
.pricing__row:not(:last-child) {
  padding-bottom: 8px;
  border-bottom: 1px solid white;
}
.pricing__row span:first-child {
  flex: 1;
  padding-right: 16px;
}
.pricing__row span:last-child {
  flex: 0;
  font-weight: bold;
  text-align: right;
}

.meetup-overview-group {
  margin-bottom: 32px;
}

.meetup-overview-group__title {
  color: #25596a;
}

.meetup-overview-item {
  padding: 32px 0;
}
.meetup-overview-item:not(:last-child) {
  border-bottom: 1px solid rgba(60, 174, 162, 0.3);
}

.meetup-overview-item__link {
  --grid-gap: 16px;
  --grid-date-size: 88px;
  grid-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: var(--grid-date-size) 1fr;
  color: #000;
}
.meetup-overview-item__link, .meetup-overview-item__link:hover, .meetup-overview-item__link:focus {
  text-decoration: none;
}
@media screen and (max-width: 39.99em) {
  .meetup-overview-item__link {
    --grid-gap: 8px;
    --grid-date-size: 64px;
  }
}

.meetup-overview__image {
  margin-bottom: 16px;
  border-radius: 4px;
}

.meetup-overview-item__title {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
}
@media screen and (min-width: 40em) {
  .meetup-overview-item__title {
    font-size: 1.75rem;
  }
}

.meetup-overview-item__desc {
  margin: 16px 0;
}

.meetup-overview-item .btn {
  background: var(--theme-bg);
  color: var(--theme-color);
}

.meetup-date {
  --padding: 12px;
  --day-size: 2.5rem;
  --month-size: 1rem;
  --multiple-size: 0.875rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--padding);
  border-radius: 4px;
  background: var(--theme-bg);
  color: var(--theme-color);
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 39.99em) {
  .meetup-date {
    --padding: 12px 3px;
    --day-size: 2rem;
    --month-size: 0.8125rem;
    --multiple-size: 0.8125rem;
  }
}

.meetup-date__day {
  font-size: var(--day-size);
}

.meetup-date__month {
  font-size: var(--month-size);
}

.meetup-date__month:first-child {
  --month-size: 1.5rem;
  font-weight: var(--font-weight-regular-700);
}

.meetup-date--multiple {
  padding-top: 12px;
  font-weight: var(--font-weight-regular-700);
  font-size: var(--multiple-size);
}

.payment-success {
  padding: 20px 24px;
  border-left: 4px solid #25596a;
  background-color: #3caea2;
  margin-bottom: 24px;
  color: #fff;
}
.payment-success strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
}
.payment-success p {
  margin: 4px 0 0;
}

.payment-form__email {
  margin-bottom: 24px;
}

.payment-form__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: end;
  padding: 16px;
  gap: 12px 16px;
  border: 1px solid #e0e0e4;
  border-radius: 4px;
  background-color: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.payment-option:focus-within {
  border-color: #25596a;
  box-shadow: 0 0 0 1px #25596a;
}

.payment-option__details {
  align-self: center;
  min-width: 0;
}

.payment-option__label,
.payment-option__price {
  display: block;
}

.payment-option__label {
  line-height: 1.2;
}

.payment-option__price {
  margin-top: 4px;
  color: #25596a;
  font-weight: 600;
}

.payment-option__quantity label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.875rem;
}

.payment-option__quantity-input {
  padding: 10px 8px;
  text-align: center;
}

.payment-option__names {
  grid-column: 1/-1;
  display: grid;
  gap: 8px;
}

@media screen and (min-width: 30em) {
  .payment-option {
    grid-template-columns: minmax(0, 1fr) 96px;
    padding: 20px 24px;
  }
}
.payment-form__total-price {
  margin: 16px 0 24px;
}

/* Homepage */
.homepage-content {
  grid-gap: 8px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: ". ." ". ." "topics topics" ". ." ". ." ". ." ". .";
  max-width: 1440px;
  margin: auto;
  padding: 8px;
}
@media screen and (min-width: 40em) {
  .homepage-content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". topics" ". topics" ". ." ". ." ". ." ". ." ". .";
  }
}
@media screen and (min-width: 73.125em) {
  .homepage-content {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". . topics" "meetup . topics" ". . ." ". . .";
    gap: 12px;
  }
}

.homepage-content [data-area=latest-topics] {
  grid-area: topics;
}

.homepage-content a:focus-visible {
  outline: 2px solid #ffa55e;
  border-radius: 4px;
}

.homepage-content .btn--sm {
  display: inline-flex;
  margin-inline: auto;
  margin-block: 8px;
  line-height: 1.2;
}
@media screen and (max-width: 29.99em) {
  .homepage-content .btn--sm {
    font-size: 0.6875rem;
  }
}

.homepage-meetup {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border-radius: 4px;
  background: var(--theme-bg);
  text-align: center;
}
.homepage-meetup, .homepage-meetup:hover {
  text-decoration: none;
}
.homepage-meetup:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(45deg, var(--theme-bg), rgba(0, 0, 0, 0.4));
  content: "";
}
.homepage-meetup > * {
  z-index: 2;
  position: relative;
}

.homepage-meetup__title {
  margin-bottom: 8px;
  font-size: var(--font-size-16-24);
}
@media screen and (max-width: 29.99em) {
  .homepage-meetup__title {
    font-size: 0.875rem;
  }
}

.homepage-meetup__title,
.homepage-meetup__intro {
  color: var(--theme-color);
}

.homepage-meetup .meetup-date {
  width: 100%;
  max-width: 80px;
  margin: 0 auto 24px;
  background: var(--theme-color);
  color: var(--theme-bg);
}

.homepage-meetup .btn {
  background: var(--theme-color);
  color: var(--theme-bg);
}

/* Footer */
.footer {
  background: linear-gradient(to right, #25596a 0%, #25596a 50%, #3caea2 100%);
  padding: 16px 0;
  color: #fff;
  font-weight: var(--font-weight-regular-400);
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0 16px 0;
  list-style: none;
}

.footer-nav__item {
  padding: 8px 16px;
}

.footer-nav__link {
  color: white;
  text-decoration: none;
}

.footer-nav__link:hover {
  text-decoration: underline;
}

.footer-bottom {
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
}

.footer-bottom p {
  margin: 0;
  line-height: 1.8;
}