@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
/*

  WDS - Werbeo Design System

 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}
@media (max-width: 1200px) {
  html {
    font-size: 9px;
  }
}
@media (max-width: 800px) {
  html {
    font-size: 8px;
  }
}

body {
  position: relative;
  min-height: 100vh;
  padding: 2rem 0;
  font-size: 1.6rem;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  color: #000000;
  line-height: initial;
  background: #fff;
}

h1,
.h1 {
  font-size: 6rem;
  font-weight: 550;
  line-height: initial;
  color: #000000;
}

h2,
.h2 {
  font-size: 5rem;
  font-weight: 450;
  letter-spacing: 0.1rem;
  line-height: initial;
  color: #000000;
}

h3,
.h3 {
  font-size: 3rem;
  font-weight: 550;
  line-height: initial;
  color: #000000;
}

h4,
.h4 {
  font-size: 2rem;
  font-weight: 450;
  line-height: initial;
  color: #000000;
}

p {
  line-height: 1.5em;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: #000000;
}

.nobr {
  white-space: nowrap;
}

.link {
  cursor: pointer;
  display: inline;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1em;
  background: none;
  border: none;
  color: #000000;
}
.link.main {
  color: #0c956c;
}
.link:hover {
  color: #0c956c;
}
.link:hover.main {
  color: #000000;
}

.icon {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 0.5em;
  padding: 0.7em;
  line-height: 1em;
  color: #ffffff;
  background-color: #000000;
  border: none;
}
.icon.round {
  border-radius: 50%;
}
.icon.main {
  background-color: #0c956c;
}
.icon.accent {
  color: #000000;
  background-color: #dbf5ff;
}
.icon.gray {
  color: #ffffff;
  background-color: #f5f3f3;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  cursor: pointer;
}
.icon-link:hover {
  color: #0c956c;
}

.pict {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 2em;
  line-height: 1em;
  color: #000000;
  background-color: transparent;
  border: none;
}
.pict.main {
  color: #0c956c;
}
.pict.gray {
  color: #656565;
}
.pict.big {
  font-size: 3rem;
}
.pict.xbig {
  font-size: 4rem;
}
.pict.jumbo {
  font-size: 6rem;
}

.pict-link {
  cursor: pointer;
  display: inline;
  font-size: 1.6rem;
  line-height: 1em;
  white-space: nowrap;
  background: none;
  border: none;
  color: #000000;
}
.pict-link svg,
.pict-link i {
  margin-right: 0.2em;
  font-size: 1.2em;
  color: #0c956c;
}
.pict-link.mono svg,
.pict-link.mono i {
  color: inherit;
}

.pict-btn {
  cursor: pointer;
  background: none;
  border: none;
}
.pict-btn:hover {
  color: #0c956c;
}
.pict-btn:hover.main {
  color: #000000;
}

.btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1em 2em;
  border: 1px solid #000000;
  border-radius: 2em;
  color: #ffffff;
  background-color: #000000;
}
.btn svg,
.btn i,
.btn iconify-icon {
  max-height: 1.6em;
}
.btn svg:first-child,
.btn i:first-child,
.btn iconify-icon:first-child {
  margin-right: 0.6em;
}
.btn svg:last-child,
.btn i:last-child,
.btn iconify-icon:last-child {
  margin-left: 0.6em;
}
.btn svg path,
.btn i path,
.btn iconify-icon path {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn:hover {
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
}
.btn:hover svg path {
  fill: #000000;
  stroke: #000000;
}
.btn.btn-condensed {
  padding: 0.8em 1em;
  line-height: 1.3em;
}
.btn.btn-wide {
  padding-left: 4em;
  padding-right: 4em;
}
.btn.btn-square {
  border-radius: 1em;
  padding: 1em 2.5em;
}
.btn.btn-outline {
  background: #ffffff;
  color: #000000;
}
.btn.btn-outline svg path {
  fill: #000000;
  stroke: #000000;
}
.btn.btn-outline:hover {
  background-color: #000000;
  color: #ffffff;
}
.btn.btn-outline:hover svg path {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn.main {
  border-color: #0c956c;
  background-color: #0c956c;
  color: #ffffff;
}
.btn.main:hover {
  background-color: #ffffff;
  color: #0c956c;
}
.btn.main:hover svg path {
  fill: #0c956c;
  stroke: #0c956c;
}
.btn.main.btn-outline {
  color: #0c956c;
  background-color: #ffffff;
}
.btn.main.btn-outline svg path {
  fill: #0c956c;
  stroke: #0c956c;
}
.btn.main.btn-outline:hover {
  background-color: #0c956c;
  color: #ffffff;
}
.btn.main.btn-outline:hover svg path {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn.accent {
  border-color: #dbf5ff;
  background-color: #dbf5ff;
  color: #000000;
}
.btn.accent svg path {
  fill: #000000;
  stroke: #000000;
}
.btn.accent:hover {
  border-color: #000000;
}
.btn.danger {
  border-color: #e73137;
  background-color: #e73137;
  color: #ffffff;
}
.btn.danger svg path {
  fill: #ffffff;
  stroke: #ffffff;
}
.btn.danger:hover {
  border-color: #e73137;
}
.btn[disabled] {
  border: 1px solid #c7c7c7;
  background-color: #c7c7c7;
  color: #000000;
  cursor: not-allowed;
}
.btn[disabled]:hover {
  border: 1px solid #c7c7c7;
  background-color: #c7c7c7;
  color: #000000;
}

.label {
  border-radius: 1em;
  padding: 1em 2em;
  color: #000000;
  background-color: #d5f1d9;
  border: 1px solid transparent;
}
.label.error {
  background: rgba(231, 49, 55, 0.1);
}
.label.no-bg {
  background: none;
}

.tag {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-size: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.8em 1em;
  border: 1px solid #0c956c;
  border-radius: 10em;
  color: #0c956c;
  background-color: #ffffff;
}
.tag::after {
  cursor: pointer;
  content: "+";
  transform: rotate(45deg);
  font-size: 1.5em;
  line-height: 0.66em;
}
.tag.accent {
  border: 1px solid #dbf5ff;
  color: #dbf5ff;
}
.tag.disabled {
  border: 1px solid #656565;
  color: #656565;
}
.tag.disabled::after {
  display: none;
}

.chip {
  font-size: 1.6rem;
  padding: 0.6em 1em;
  border-radius: 2em;
  white-space: nowrap;
  color: #000000;
  border: 1px solid #000000;
}
.chip.main, .chip.active {
  color: #000000;
  background-color: #b8edbf;
}
.chip.accent {
  color: #000000;
  background-color: #dbf5ff;
}
.chip.muted {
  color: #000000;
  background-color: #656565;
}

*:has(> .badge) {
  position: relative;
}

.badge {
  position: absolute;
  right: -0.4em;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.9em;
  min-width: 1.9em;
  padding: 0 0.65em;
  border-radius: 1em;
  color: #ffffff;
  background-color: #e73137;
}

sup.badge {
  top: -0.4em;
}

sub.badge {
  bottom: -0.4em;
}

.xbig .badge {
  font-size: 1.2rem;
}

span.highlighted {
  background-color: #f4f88f;
  padding: 0 0.2em;
  border-radius: 0.35em;
}

input[type=radio],
input[type=checkbox] {
  display: none;
}
input[type=radio] + label,
input[type=checkbox] + label {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  padding-left: 1.6em;
  position: relative;
}
input[type=radio] + label:before, input[type=radio] + label:after,
input[type=checkbox] + label:before,
input[type=checkbox] + label:after {
  content: " ";
  box-sizing: content-box;
  display: block;
  position: absolute;
  top: 0.2em;
  left: 0;
  border-radius: 1em;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before {
  width: 1em;
  height: 1em;
  border: none;
  background-color: #c7c7c7;
}
input[type=radio] + label:after,
input[type=checkbox] + label:after {
  width: 0.9em;
  height: 0.9em;
  border: 0.1em solid #0c956c;
  background-color: #ffffff;
  transition: all 0.1s ease-in;
}
input[type=radio]:checked + label:after,
input[type=checkbox]:checked + label:after {
  width: 0;
  height: 0;
  border: 0.5em solid #0c956c;
}

/*
 //
 //  Colors
 //
 */
.main {
  color: #0c956c;
}

.accent {
  color: #dbf5ff;
}

.gray {
  color: #656565;
}

.black {
  color: #000000;
}

.white {
  color: #ffffff;
}

.error {
  color: #e73137;
}

/*
 //
 //  Size
 //
 */
.xsmall {
  font-size: 1.1rem;
}

.small {
  font-size: 1.3rem;
}

.standard {
  font-size: 1.6rem;
}

.big {
  font-size: 1.9rem;
}

.xbig {
  font-size: 2.2rem;
}

.jumbo {
  font-size: 3rem;
}

/*
 //
 //  Text
 //
 */
.bold {
  font-weight: 500;
}

.strong {
  font-weight: 600;
}

.xstrong {
  font-weight: 700;
}

.normal {
  font-weight: normal;
}

.caption {
  font-weight: 350;
}

.thin {
  font-weight: 300;
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}

/*
 //
 //  Input-group
 //
 */
.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.input-group > div {
  position: relative;
  width: 100%;
}
.input-group label {
  font-size: 0.9em;
  font-weight: 550;
}
.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  font-size: 1em;
  font-family: "Open Sans", sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 1rem;
  padding: 1em;
  background: #fff;
  border: 1px solid #000000;
}
.input-group input.invalid,
.input-group textarea.invalid,
.input-group select.invalid {
  border-color: #e73137;
}
.input-group input.valid,
.input-group textarea.valid,
.input-group select.valid {
  border-color: green;
}
.input-group input.w-suffix,
.input-group textarea.w-suffix,
.input-group select.w-suffix {
  padding-right: 3em;
}
.input-group input.w-prefix,
.input-group textarea.w-prefix,
.input-group select.w-prefix {
  padding-left: 3em;
}
.input-group input.input-round,
.input-group textarea.input-round,
.input-group select.input-round {
  border-radius: 3rem;
}
.input-group input::-moz-placeholder {
  color: #000000;
}
.input-group input::placeholder {
  color: #000000;
}
.input-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%;
  background-size: 0.65em auto;
}
.input-group .suffix {
  top: 1em;
  right: 1.2em;
  position: absolute;
}
.input-group:has(label) .suffix {
  top: 2.8em;
}
.input-group span.prompt,
.input-group span.error {
  font-size: 0.9em;
  font-weight: 600;
}
.input-group span.prompt {
  color: darkgray;
}
.input-group span.error {
  color: #e73137;
}
.input-group:has(input[type=text]) .show-password .show {
  display: none;
}
.input-group:has(input[type=password]) .show-password .hide {
  display: none;
}

.input-group {
  min-width: 18em;
}
.input-group.narrow {
  min-width: 8em;
}

/*
 //
 //  Links row
 //
 */
.links-row {
  display: flex;
  gap: 4rem;
}
.links-row > a {
  display: block;
  position: relative;
  padding: 3rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}
@media (max-width: 800px) {
  .links-row > a {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
}
.links-row > a.active {
  font-weight: 600;
  color: #dbf5ff;
}
.links-row > a.active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -0.2rem;
  left: 25%;
  right: 25%;
  border-bottom: 0.2rem solid #dbf5ff;
}

/*
 //
 //  Tooltip
 //
 */
*[tooltip] {
  position: relative;
}
*[tooltip]::before {
  position: absolute;
  display: none;
  content: attr(tooltip);
  font-size: 1.2rem;
  line-height: 1.5em;
  padding: 2em;
  border-radius: 1em;
  min-width: 35em;
  left: 50%;
  transform: translate(-50%, -100%);
  color: #000000;
  background-color: #f5f3f3;
  box-shadow: 0px 3px 21px rgba(0, 0, 0, 0.2117647059);
}
*[tooltip]:hover::before {
  display: inline-block;
}

/*
 //
 //  Animations
 //
 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
.pulsating {
  animation: pulse 2s infinite;
}

/*
 //
 //  Iconify
 //
 */
svg.iconify {
  font-size: 1.2em;
  vertical-align: -0.2em;
}

.bg-dark p,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark span,
.bg-dark label {
  color: #ffffff;
}
.bg-dark .btn:hover {
  background: transparent;
}
.bg-dark .btn.btn-outline {
  background: transparent;
}
.bg-dark .btn.accent:hover {
  background: transparent;
}
.bg-dark .btn.accent.btn-outline {
  background: transparent;
}
.bg-dark .btn.dark:hover {
  background: transparent;
}
.bg-dark .btn.dark.btn-outline {
  background: transparent;
}
.bg-dark input[type=radio] + label:after,
.bg-dark input[type=checkbox] + label:after {
  border: 0.1em solid #ffffff;
}
.bg-dark input[type=radio]:checked + label:after,
.bg-dark input[type=checkbox]:checked + label:after {
  border: 0.5em solid #0c956c;
}
.bg-dark .input-group input,
.bg-dark .input-group textarea,
.bg-dark .input-group select {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.bg-dark .input-group input::-webkit-input-placeholder,
.bg-dark .input-group textarea::-webkit-input-placeholder,
.bg-dark .input-group select::-webkit-input-placeholder {
  color: #ffffff;
}
.bg-dark .input-group input:-moz-placeholder,
.bg-dark .input-group textarea:-moz-placeholder,
.bg-dark .input-group select:-moz-placeholder {
  color: #ffffff;
}
.bg-dark .input-group input::-moz-placeholder,
.bg-dark .input-group textarea::-moz-placeholder,
.bg-dark .input-group select::-moz-placeholder {
  color: #ffffff;
}
.bg-dark .input-group input:-ms-input-placeholder,
.bg-dark .input-group textarea:-ms-input-placeholder,
.bg-dark .input-group select:-ms-input-placeholder {
  color: #ffffff;
}
.bg-dark .input-group span.error {
  padding: 0.4em 0.8em;
  background: red;
  color: white;
  border-radius: 0.4em;
  align-self: flex-start;
}

/*

  WDS - Werbeo Design System
  frontend specific part

 */
#blocker {
  position: fixed;
  z-index: 9001;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#btn-loader-wrapper {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
}

#btn-loader {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#btn-loader svg {
  font-size: 5em;
  margin: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
@media (max-width: 800px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}
@media (max-width: 1200px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.form-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6em;
}
.form-flex .group {
  display: flex;
  gap: 1em;
}
.form-flex .group .input-group {
  min-width: 10em;
}

ul {
  list-style-type: none;
}
ul li {
  position: relative;
  margin-left: 1em;
  line-height: 2em;
}
ul li::before {
  content: "";
  position: absolute;
  height: 0.4em;
  width: 0.4em;
  border-radius: 1em;
  margin-left: -1em;
  margin-top: 0.8em;
  background-color: #000000;
}
ul.gray {
  color: #000000;
}
ul.gray li::before {
  background-color: #656565;
}
ul.main {
  color: #000000;
}
ul.main li::before {
  background-color: #0c956c;
}
ul.arrow li {
  margin-left: 2em;
}
ul.arrow li::before {
  height: 1.4em;
  width: 1.4em;
  margin-left: -2em;
  margin-top: 0.3em;
}
ul.arrow li::after {
  content: "➔";
  font-size: 0.9em;
  position: absolute;
  top: 0;
  left: -1.9em;
  transform: rotate(-45deg);
  color: #ffffff;
}
ul.arrow.big-arrow li {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  margin-left: 3em;
}
ul.arrow.big-arrow li::before {
  height: 2em;
  width: 2em;
  margin-left: -3em;
  margin-top: -0.1em;
}
ul.arrow.big-arrow li::after {
  font-size: 1.3em;
  top: -0.1em;
  left: -1.95em;
}

ol {
  list-style-type: none;
}
ol li {
  counter-increment: step-counter;
  position: relative;
  margin-left: 3em;
  line-height: 2em;
}
ol li::before {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  left: -3rem;
  font-weight: 600;
}
ol.main {
  color: #000000;
}
ol.main li::before {
  color: #0c956c;
}
ol.gray {
  color: #000000;
}
ol.gray li::before {
  color: #0c956c;
}

ul.gap-1 li,
ol.gap-1 li {
  margin-bottom: 1rem;
}
ul.gap-1 li:last-child,
ol.gap-1 li:last-child {
  margin-bottom: initial;
}
ul.gap-2 li,
ol.gap-2 li {
  margin-bottom: 2rem;
}
ul.gap-2 li:last-child,
ol.gap-2 li:last-child {
  margin-bottom: initial;
}
ul.gap-3 li,
ol.gap-3 li {
  margin-bottom: 3rem;
}
ul.gap-3 li:last-child,
ol.gap-3 li:last-child {
  margin-bottom: initial;
}

/*
//
//  section
//
*/
.section {
  display: grid;
  grid-template-columns: 1fr 21rem minmax(80rem, 160rem) 21rem 1fr;
  grid-template-areas: ". . content . .";
}
@media (max-width: 1620px) {
  .section {
    grid-template-columns: 1fr 13rem minmax(80rem, 160rem) 13rem 1fr;
  }
}
@media (max-width: 1460px) {
  .section {
    grid-template-columns: 1fr 9rem minmax(80rem, 150rem) 9rem 1fr;
  }
}
@media (max-width: 1200px) {
  .section {
    grid-template-columns: 1fr 7rem minmax(0, 150rem) 7rem 1fr;
  }
}
.section > div {
  grid-area: content;
  padding: 3rem 0 5rem 0;
}
.section > div .divider {
  width: 100%;
  padding-top: 2rem;
  border-bottom: 1px solid #c7c7c7;
}
.section.accent {
  background-color: #dbf5ff;
  color: #000000;
}
.section.section-medium {
  grid-template-columns: 1fr 16rem minmax(70rem, 120rem) 16rem 1fr;
}
@media (max-width: 1200px) {
  .section.section-medium {
    grid-template-columns: 1fr 2rem minmax(0, 120rem) 2rem 1fr;
  }
}
.section.section-thin {
  grid-template-columns: 1fr 16rem minmax(70rem, 100rem) 16rem 1fr;
}
@media (max-width: 1200px) {
  .section.section-thin {
    grid-template-columns: 1fr 2rem minmax(0, 100rem) 2rem 1fr;
  }
}

/*
//
//  Modal
//
*/
.modal {
  position: absolute;
  z-index: 11;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 8vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.84);
  transition: all 0.3s ease-out;
}
.modal > .container {
  position: relative;
  width: 50%;
  min-width: 60rem;
  border-radius: 6rem;
  padding: 8rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background-color: #ffffff;
  border: 1px solid #000000;
  transition: all 0.3s ease 0.1s;
}
.modal > .container .close-btn {
  position: absolute;
  top: 3.5rem;
  right: 3.5rem;
}
.modal > .container .close-btn .iconify {
  font-size: 4rem;
}
@media (max-width: 1200px) {
  .modal > .container {
    width: 70%;
  }
}
@media (max-width: 800px) {
  .modal > .container {
    width: 100%;
    min-width: auto;
  }
}

.message-modal {
  z-index: 12;
}

/*
//
//  bubble
//
*/
.bubble {
  position: relative;
  border-radius: 6rem;
  padding: 6rem;
  background: linear-gradient(to right top, #dbffe0, #d2d2ed);
  background: linear-gradient(76deg, #dbffe0 0%, #dbf5ff 100%);
}
.bubble.accent {
  background: #dbf5ff;
  color: #000000;
}
.bubble .cutout {
  position: absolute;
  background: #ffffff;
  min-height: 9rem;
  padding: 4rem;
}
.bubble .cutout::after, .bubble .cutout::before {
  content: "";
  position: absolute;
  height: 4rem;
  width: 4rem;
}
.bubble .cutout.bottom-right {
  left: 35%;
  right: 0;
  bottom: 0;
  border-radius: 4rem 0 0 0;
}
.bubble .cutout.bottom-right::before {
  left: -4rem;
  bottom: 0;
  background-image: radial-gradient(circle at 0 0, transparent 4rem, #ffffff 4.1rem);
}
.bubble .cutout.bottom-right::after {
  top: -4rem;
  right: 0;
  background-image: radial-gradient(circle at 0 0, transparent 4rem, #ffffff 4.1rem);
}
.bubble .cutout.bottom-left {
  left: 0;
  right: 35%;
  bottom: 0;
  border-radius: 0 4rem 0 0;
}
.bubble .cutout.bottom-left::before {
  top: -4rem;
  left: 0;
  background-image: radial-gradient(circle at 100% 0, transparent 4rem, #ffffff 4.1rem);
}
.bubble .cutout.bottom-left::after {
  right: -4rem;
  bottom: 0;
  background-image: radial-gradient(circle at 100% 0, transparent 4rem, #ffffff 4.1rem);
}

/*
//
//  box
//
*/
.box,
.box-flat {
  padding: 3.5rem 3rem;
  border-radius: 2rem;
  background-color: #ffffff;
  border: 1px solid #000000;
}
.box.gray,
.box-flat.gray {
  color: #000000;
  background-color: #f5f3f3;
  border: none;
}
.box.main,
.box-flat.main {
  color: #000000;
  background-color: #d5f1d9;
}
.box.violet,
.box-flat.violet {
  color: #000000;
  background-color: #e0d9f4;
}
.box.accent,
.box-flat.accent {
  color: #000000;
  background-color: #dbf5ff;
}
.box.yellow,
.box-flat.yellow {
  color: #000000;
  background-color: #f0f497;
}
.box.darkviolet,
.box-flat.darkviolet {
  color: #ffffff;
  background: #5a3a7e;
}
.box.darkviolet h1,
.box.darkviolet .h1,
.box.darkviolet h2,
.box.darkviolet .h2,
.box.darkviolet h3,
.box.darkviolet .h3,
.box.darkviolet h4,
.box.darkviolet .h4,
.box.darkviolet a,
.box.darkviolet .link,
.box-flat.darkviolet h1,
.box-flat.darkviolet .h1,
.box-flat.darkviolet h2,
.box-flat.darkviolet .h2,
.box-flat.darkviolet h3,
.box-flat.darkviolet .h3,
.box-flat.darkviolet h4,
.box-flat.darkviolet .h4,
.box-flat.darkviolet a,
.box-flat.darkviolet .link {
  color: #ffffff;
}
.box.darkviolet .btn,
.box-flat.darkviolet .btn {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
.box.darkviolet .btn:hover,
.box-flat.darkviolet .btn:hover {
  background-color: #000000;
  color: #ffffff;
}

.box-flat {
  border: none;
}

/*
//
//  Steps
//
*/
.steps .progress {
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 10px;
  width: 100%;
  border-bottom: 1px solid #000000;
}
.steps .progress::before {
  content: "Krok 1 z 3";
}
.steps .progress:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: #000000;
  border-radius: 10px;
  position: absolute;
  bottom: -3px;
}
.steps .controls button[type=submit] {
  display: none;
}
.steps.step-1 .controls .step-back {
  display: none;
}
.steps .step-1 {
  display: none;
}
.steps.step-1 .step-1 {
  display: inherit;
}
.steps.step-1.steps-1 .controls button[type=submit] {
  display: inherit;
}
.steps.step-1.steps-1 .controls .step-next {
  display: none;
}
.steps.steps-1.step-1 .progress::before {
  content: "Krok 1 z 1";
}
.steps.steps-1.step-1 .progress:after {
  width: calc(1/1 * 100%);
}
.steps.steps-1.step-2 .progress::before {
  content: "Krok 2 z 1";
}
.steps.steps-1.step-2 .progress:after {
  width: calc(2/1 * 100%);
}
.steps.steps-1.step-3 .progress::before {
  content: "Krok 3 z 1";
}
.steps.steps-1.step-3 .progress:after {
  width: calc(3/1 * 100%);
}
.steps.steps-1.step-4 .progress::before {
  content: "Krok 4 z 1";
}
.steps.steps-1.step-4 .progress:after {
  width: calc(4/1 * 100%);
}
.steps.steps-1.step-5 .progress::before {
  content: "Krok 5 z 1";
}
.steps.steps-1.step-5 .progress:after {
  width: calc(5/1 * 100%);
}
.steps.steps-1.step-6 .progress::before {
  content: "Krok 6 z 1";
}
.steps.steps-1.step-6 .progress:after {
  width: calc(6/1 * 100%);
}
.steps.steps-1.step-7 .progress::before {
  content: "Krok 7 z 1";
}
.steps.steps-1.step-7 .progress:after {
  width: calc(7/1 * 100%);
}
.steps.steps-1.step-8 .progress::before {
  content: "Krok 8 z 1";
}
.steps.steps-1.step-8 .progress:after {
  width: calc(8/1 * 100%);
}
.steps.steps-1.step-9 .progress::before {
  content: "Krok 9 z 1";
}
.steps.steps-1.step-9 .progress:after {
  width: calc(9/1 * 100%);
}
.steps .step-2 {
  display: none;
}
.steps.step-2 .step-2 {
  display: inherit;
}
.steps.step-2.steps-2 .controls button[type=submit] {
  display: inherit;
}
.steps.step-2.steps-2 .controls .step-next {
  display: none;
}
.steps.steps-2.step-1 .progress::before {
  content: "Krok 1 z 2";
}
.steps.steps-2.step-1 .progress:after {
  width: calc(1/2 * 100%);
}
.steps.steps-2.step-2 .progress::before {
  content: "Krok 2 z 2";
}
.steps.steps-2.step-2 .progress:after {
  width: calc(2/2 * 100%);
}
.steps.steps-2.step-3 .progress::before {
  content: "Krok 3 z 2";
}
.steps.steps-2.step-3 .progress:after {
  width: calc(3/2 * 100%);
}
.steps.steps-2.step-4 .progress::before {
  content: "Krok 4 z 2";
}
.steps.steps-2.step-4 .progress:after {
  width: calc(4/2 * 100%);
}
.steps.steps-2.step-5 .progress::before {
  content: "Krok 5 z 2";
}
.steps.steps-2.step-5 .progress:after {
  width: calc(5/2 * 100%);
}
.steps.steps-2.step-6 .progress::before {
  content: "Krok 6 z 2";
}
.steps.steps-2.step-6 .progress:after {
  width: calc(6/2 * 100%);
}
.steps.steps-2.step-7 .progress::before {
  content: "Krok 7 z 2";
}
.steps.steps-2.step-7 .progress:after {
  width: calc(7/2 * 100%);
}
.steps.steps-2.step-8 .progress::before {
  content: "Krok 8 z 2";
}
.steps.steps-2.step-8 .progress:after {
  width: calc(8/2 * 100%);
}
.steps.steps-2.step-9 .progress::before {
  content: "Krok 9 z 2";
}
.steps.steps-2.step-9 .progress:after {
  width: calc(9/2 * 100%);
}
.steps .step-3 {
  display: none;
}
.steps.step-3 .step-3 {
  display: inherit;
}
.steps.step-3.steps-3 .controls button[type=submit] {
  display: inherit;
}
.steps.step-3.steps-3 .controls .step-next {
  display: none;
}
.steps.steps-3.step-1 .progress::before {
  content: "Krok 1 z 3";
}
.steps.steps-3.step-1 .progress:after {
  width: calc(1/3 * 100%);
}
.steps.steps-3.step-2 .progress::before {
  content: "Krok 2 z 3";
}
.steps.steps-3.step-2 .progress:after {
  width: calc(2/3 * 100%);
}
.steps.steps-3.step-3 .progress::before {
  content: "Krok 3 z 3";
}
.steps.steps-3.step-3 .progress:after {
  width: calc(3/3 * 100%);
}
.steps.steps-3.step-4 .progress::before {
  content: "Krok 4 z 3";
}
.steps.steps-3.step-4 .progress:after {
  width: calc(4/3 * 100%);
}
.steps.steps-3.step-5 .progress::before {
  content: "Krok 5 z 3";
}
.steps.steps-3.step-5 .progress:after {
  width: calc(5/3 * 100%);
}
.steps.steps-3.step-6 .progress::before {
  content: "Krok 6 z 3";
}
.steps.steps-3.step-6 .progress:after {
  width: calc(6/3 * 100%);
}
.steps.steps-3.step-7 .progress::before {
  content: "Krok 7 z 3";
}
.steps.steps-3.step-7 .progress:after {
  width: calc(7/3 * 100%);
}
.steps.steps-3.step-8 .progress::before {
  content: "Krok 8 z 3";
}
.steps.steps-3.step-8 .progress:after {
  width: calc(8/3 * 100%);
}
.steps.steps-3.step-9 .progress::before {
  content: "Krok 9 z 3";
}
.steps.steps-3.step-9 .progress:after {
  width: calc(9/3 * 100%);
}
.steps .step-4 {
  display: none;
}
.steps.step-4 .step-4 {
  display: inherit;
}
.steps.step-4.steps-4 .controls button[type=submit] {
  display: inherit;
}
.steps.step-4.steps-4 .controls .step-next {
  display: none;
}
.steps.steps-4.step-1 .progress::before {
  content: "Krok 1 z 4";
}
.steps.steps-4.step-1 .progress:after {
  width: calc(1/4 * 100%);
}
.steps.steps-4.step-2 .progress::before {
  content: "Krok 2 z 4";
}
.steps.steps-4.step-2 .progress:after {
  width: calc(2/4 * 100%);
}
.steps.steps-4.step-3 .progress::before {
  content: "Krok 3 z 4";
}
.steps.steps-4.step-3 .progress:after {
  width: calc(3/4 * 100%);
}
.steps.steps-4.step-4 .progress::before {
  content: "Krok 4 z 4";
}
.steps.steps-4.step-4 .progress:after {
  width: calc(4/4 * 100%);
}
.steps.steps-4.step-5 .progress::before {
  content: "Krok 5 z 4";
}
.steps.steps-4.step-5 .progress:after {
  width: calc(5/4 * 100%);
}
.steps.steps-4.step-6 .progress::before {
  content: "Krok 6 z 4";
}
.steps.steps-4.step-6 .progress:after {
  width: calc(6/4 * 100%);
}
.steps.steps-4.step-7 .progress::before {
  content: "Krok 7 z 4";
}
.steps.steps-4.step-7 .progress:after {
  width: calc(7/4 * 100%);
}
.steps.steps-4.step-8 .progress::before {
  content: "Krok 8 z 4";
}
.steps.steps-4.step-8 .progress:after {
  width: calc(8/4 * 100%);
}
.steps.steps-4.step-9 .progress::before {
  content: "Krok 9 z 4";
}
.steps.steps-4.step-9 .progress:after {
  width: calc(9/4 * 100%);
}
.steps .step-5 {
  display: none;
}
.steps.step-5 .step-5 {
  display: inherit;
}
.steps.step-5.steps-5 .controls button[type=submit] {
  display: inherit;
}
.steps.step-5.steps-5 .controls .step-next {
  display: none;
}
.steps.steps-5.step-1 .progress::before {
  content: "Krok 1 z 5";
}
.steps.steps-5.step-1 .progress:after {
  width: calc(1/5 * 100%);
}
.steps.steps-5.step-2 .progress::before {
  content: "Krok 2 z 5";
}
.steps.steps-5.step-2 .progress:after {
  width: calc(2/5 * 100%);
}
.steps.steps-5.step-3 .progress::before {
  content: "Krok 3 z 5";
}
.steps.steps-5.step-3 .progress:after {
  width: calc(3/5 * 100%);
}
.steps.steps-5.step-4 .progress::before {
  content: "Krok 4 z 5";
}
.steps.steps-5.step-4 .progress:after {
  width: calc(4/5 * 100%);
}
.steps.steps-5.step-5 .progress::before {
  content: "Krok 5 z 5";
}
.steps.steps-5.step-5 .progress:after {
  width: calc(5/5 * 100%);
}
.steps.steps-5.step-6 .progress::before {
  content: "Krok 6 z 5";
}
.steps.steps-5.step-6 .progress:after {
  width: calc(6/5 * 100%);
}
.steps.steps-5.step-7 .progress::before {
  content: "Krok 7 z 5";
}
.steps.steps-5.step-7 .progress:after {
  width: calc(7/5 * 100%);
}
.steps.steps-5.step-8 .progress::before {
  content: "Krok 8 z 5";
}
.steps.steps-5.step-8 .progress:after {
  width: calc(8/5 * 100%);
}
.steps.steps-5.step-9 .progress::before {
  content: "Krok 9 z 5";
}
.steps.steps-5.step-9 .progress:after {
  width: calc(9/5 * 100%);
}
.steps .step-6 {
  display: none;
}
.steps.step-6 .step-6 {
  display: inherit;
}
.steps.step-6.steps-6 .controls button[type=submit] {
  display: inherit;
}
.steps.step-6.steps-6 .controls .step-next {
  display: none;
}
.steps.steps-6.step-1 .progress::before {
  content: "Krok 1 z 6";
}
.steps.steps-6.step-1 .progress:after {
  width: calc(1/6 * 100%);
}
.steps.steps-6.step-2 .progress::before {
  content: "Krok 2 z 6";
}
.steps.steps-6.step-2 .progress:after {
  width: calc(2/6 * 100%);
}
.steps.steps-6.step-3 .progress::before {
  content: "Krok 3 z 6";
}
.steps.steps-6.step-3 .progress:after {
  width: calc(3/6 * 100%);
}
.steps.steps-6.step-4 .progress::before {
  content: "Krok 4 z 6";
}
.steps.steps-6.step-4 .progress:after {
  width: calc(4/6 * 100%);
}
.steps.steps-6.step-5 .progress::before {
  content: "Krok 5 z 6";
}
.steps.steps-6.step-5 .progress:after {
  width: calc(5/6 * 100%);
}
.steps.steps-6.step-6 .progress::before {
  content: "Krok 6 z 6";
}
.steps.steps-6.step-6 .progress:after {
  width: calc(6/6 * 100%);
}
.steps.steps-6.step-7 .progress::before {
  content: "Krok 7 z 6";
}
.steps.steps-6.step-7 .progress:after {
  width: calc(7/6 * 100%);
}
.steps.steps-6.step-8 .progress::before {
  content: "Krok 8 z 6";
}
.steps.steps-6.step-8 .progress:after {
  width: calc(8/6 * 100%);
}
.steps.steps-6.step-9 .progress::before {
  content: "Krok 9 z 6";
}
.steps.steps-6.step-9 .progress:after {
  width: calc(9/6 * 100%);
}
.steps .step-7 {
  display: none;
}
.steps.step-7 .step-7 {
  display: inherit;
}
.steps.step-7.steps-7 .controls button[type=submit] {
  display: inherit;
}
.steps.step-7.steps-7 .controls .step-next {
  display: none;
}
.steps.steps-7.step-1 .progress::before {
  content: "Krok 1 z 7";
}
.steps.steps-7.step-1 .progress:after {
  width: calc(1/7 * 100%);
}
.steps.steps-7.step-2 .progress::before {
  content: "Krok 2 z 7";
}
.steps.steps-7.step-2 .progress:after {
  width: calc(2/7 * 100%);
}
.steps.steps-7.step-3 .progress::before {
  content: "Krok 3 z 7";
}
.steps.steps-7.step-3 .progress:after {
  width: calc(3/7 * 100%);
}
.steps.steps-7.step-4 .progress::before {
  content: "Krok 4 z 7";
}
.steps.steps-7.step-4 .progress:after {
  width: calc(4/7 * 100%);
}
.steps.steps-7.step-5 .progress::before {
  content: "Krok 5 z 7";
}
.steps.steps-7.step-5 .progress:after {
  width: calc(5/7 * 100%);
}
.steps.steps-7.step-6 .progress::before {
  content: "Krok 6 z 7";
}
.steps.steps-7.step-6 .progress:after {
  width: calc(6/7 * 100%);
}
.steps.steps-7.step-7 .progress::before {
  content: "Krok 7 z 7";
}
.steps.steps-7.step-7 .progress:after {
  width: calc(7/7 * 100%);
}
.steps.steps-7.step-8 .progress::before {
  content: "Krok 8 z 7";
}
.steps.steps-7.step-8 .progress:after {
  width: calc(8/7 * 100%);
}
.steps.steps-7.step-9 .progress::before {
  content: "Krok 9 z 7";
}
.steps.steps-7.step-9 .progress:after {
  width: calc(9/7 * 100%);
}
.steps .step-8 {
  display: none;
}
.steps.step-8 .step-8 {
  display: inherit;
}
.steps.step-8.steps-8 .controls button[type=submit] {
  display: inherit;
}
.steps.step-8.steps-8 .controls .step-next {
  display: none;
}
.steps.steps-8.step-1 .progress::before {
  content: "Krok 1 z 8";
}
.steps.steps-8.step-1 .progress:after {
  width: calc(1/8 * 100%);
}
.steps.steps-8.step-2 .progress::before {
  content: "Krok 2 z 8";
}
.steps.steps-8.step-2 .progress:after {
  width: calc(2/8 * 100%);
}
.steps.steps-8.step-3 .progress::before {
  content: "Krok 3 z 8";
}
.steps.steps-8.step-3 .progress:after {
  width: calc(3/8 * 100%);
}
.steps.steps-8.step-4 .progress::before {
  content: "Krok 4 z 8";
}
.steps.steps-8.step-4 .progress:after {
  width: calc(4/8 * 100%);
}
.steps.steps-8.step-5 .progress::before {
  content: "Krok 5 z 8";
}
.steps.steps-8.step-5 .progress:after {
  width: calc(5/8 * 100%);
}
.steps.steps-8.step-6 .progress::before {
  content: "Krok 6 z 8";
}
.steps.steps-8.step-6 .progress:after {
  width: calc(6/8 * 100%);
}
.steps.steps-8.step-7 .progress::before {
  content: "Krok 7 z 8";
}
.steps.steps-8.step-7 .progress:after {
  width: calc(7/8 * 100%);
}
.steps.steps-8.step-8 .progress::before {
  content: "Krok 8 z 8";
}
.steps.steps-8.step-8 .progress:after {
  width: calc(8/8 * 100%);
}
.steps.steps-8.step-9 .progress::before {
  content: "Krok 9 z 8";
}
.steps.steps-8.step-9 .progress:after {
  width: calc(9/8 * 100%);
}
.steps .step-9 {
  display: none;
}
.steps.step-9 .step-9 {
  display: inherit;
}
.steps.step-9.steps-9 .controls button[type=submit] {
  display: inherit;
}
.steps.step-9.steps-9 .controls .step-next {
  display: none;
}
.steps.steps-9.step-1 .progress::before {
  content: "Krok 1 z 9";
}
.steps.steps-9.step-1 .progress:after {
  width: calc(1/9 * 100%);
}
.steps.steps-9.step-2 .progress::before {
  content: "Krok 2 z 9";
}
.steps.steps-9.step-2 .progress:after {
  width: calc(2/9 * 100%);
}
.steps.steps-9.step-3 .progress::before {
  content: "Krok 3 z 9";
}
.steps.steps-9.step-3 .progress:after {
  width: calc(3/9 * 100%);
}
.steps.steps-9.step-4 .progress::before {
  content: "Krok 4 z 9";
}
.steps.steps-9.step-4 .progress:after {
  width: calc(4/9 * 100%);
}
.steps.steps-9.step-5 .progress::before {
  content: "Krok 5 z 9";
}
.steps.steps-9.step-5 .progress:after {
  width: calc(5/9 * 100%);
}
.steps.steps-9.step-6 .progress::before {
  content: "Krok 6 z 9";
}
.steps.steps-9.step-6 .progress:after {
  width: calc(6/9 * 100%);
}
.steps.steps-9.step-7 .progress::before {
  content: "Krok 7 z 9";
}
.steps.steps-9.step-7 .progress:after {
  width: calc(7/9 * 100%);
}
.steps.steps-9.step-8 .progress::before {
  content: "Krok 8 z 9";
}
.steps.steps-9.step-8 .progress:after {
  width: calc(8/9 * 100%);
}
.steps.steps-9.step-9 .progress::before {
  content: "Krok 9 z 9";
}
.steps.steps-9.step-9 .progress:after {
  width: calc(9/9 * 100%);
}

/*
//
//  div with circle in background
//
*/
.circle-in-bg {
  position: relative;
  padding-top: 4rem;
}
.circle-in-bg::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #d5f1d9;
}

/*
//
//  rounded responsive imgs
//
*/
.img {
  border-radius: 3rem;
  overflow: hidden;
}
.img img {
  display: none;
}
@media (max-width: 800px) {
  .img img {
    display: inherit;
  }
}

/*
//
//  arrow position
//
*/
.arrow svg {
  height: 7rem;
  aspect-ratio: 1.433;
  width: auto;
}
.arrow.top {
  margin-top: -8rem;
  margin-left: -2rem;
}
.arrow.left {
  margin-left: -8rem;
  margin-top: -2rem;
}

/*
//
//  VIOLET
//
*/
.icon.violet {
  color: #5a3a7e;
  background-color: #e0d9f4;
}

.section.violet {
  background-color: #e0d9f4;
  color: #000000;
}

.bubble.violet {
  background: #e0d9f4;
}
.bubble.darkviolet {
  color: #ffffff;
  background: #5a3a7e;
}
.bubble.darkviolet h1,
.bubble.darkviolet .h1,
.bubble.darkviolet h2,
.bubble.darkviolet .h2,
.bubble.darkviolet h3,
.bubble.darkviolet .h3,
.bubble.darkviolet h4,
.bubble.darkviolet .h4,
.bubble.darkviolet a,
.bubble.darkviolet .link {
  color: #ffffff;
}
.bubble.darkviolet .cutout h1,
.bubble.darkviolet .cutout .h1,
.bubble.darkviolet .cutout h2,
.bubble.darkviolet .cutout .h2,
.bubble.darkviolet .cutout h3,
.bubble.darkviolet .cutout .h3,
.bubble.darkviolet .cutout h4,
.bubble.darkviolet .cutout .h4,
.bubble.darkviolet .cutout a,
.bubble.darkviolet .cutout .link {
  color: #000000;
}

.bgviolet {
  background-color: #e0d9f4;
}

/*
//
//  bgdark
//
*/
.bgdark h1,
.bgdark .h1,
.bgdark h2,
.bgdark .h2,
.bgdark h3,
.bgdark .h3,
.bgdark p,
.bgdark label {
  color: #ffffff;
}
.bgdark .pict-link {
  color: #ffffff;
}
.bgdark .pict-link svg,
.bgdark .pict-link i {
  color: #b8edbf;
}
.bgdark .link {
  color: #ffffff;
}
.bgdark .link.main, .bgdark .link:hover {
  color: #b8edbf;
}
.bgdark .link.main:hover {
  color: #ffffff;
}
.bgdark .btn.main:hover {
  background: none;
  color: #b8edbf;
  border-color: #b8edbf;
}
.bgdark .box {
  border: none;
}
.bgdark .box h1,
.bgdark .box .h1,
.bgdark .box h2,
.bgdark .box .h2,
.bgdark .box h3,
.bgdark .box .h3,
.bgdark .box p {
  color: #000000;
}

/*
//
//  text
//
*/
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/*
//
//  FLEX
//
*/
.fx,
.fx-reverse {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2rem;
}

.fy,
.fy-reverse {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.fx-reverse {
  flex-direction: row-reverse;
}

.fy-reverse {
  flex-direction: column-reverse;
}

.fx.wrap {
  flex-wrap: wrap;
}
.fx.wrap .fy {
  height: auto;
}
.fx.spaced {
  justify-content: space-between;
}
.fx.left {
  justify-content: flex-start;
}
.fx.right {
  justify-content: flex-end;
}
.fx.xcenter {
  justify-content: center;
}
.fx.xstretch {
  justify-content: space-evenly;
}
.fx.xstretch > * {
  flex-grow: 1;
}
.fx.top {
  align-items: flex-start;
}
.fx.bottom {
  align-items: flex-end;
}
.fx.ycenter {
  align-items: center;
}
.fx.ystretch {
  align-items: stretch;
}

.fy.spaced {
  justify-content: space-between;
}
.fy.xcenter {
  align-items: center;
}
.fy.xstretch {
  align-items: stretch;
}
.fy.left {
  align-items: flex-start;
}
.fy.right {
  align-items: flex-end;
}
.fy.ycenter {
  justify-content: center;
}
.fy.ystretch {
  justify-content: stretch;
}
.fy.selfstretch {
  align-self: stretch;
}
.fy.top {
  justify-content: flex-start;
}
.fy.bottom {
  justify-content: flex-end;
}

/*
//
//  MARGINS, GAPS, FLEX
//
*/
.f-0 {
  flex: 0;
}

.gap-0 {
  gap: 0rem !important;
}

.m-0 {
  margin: 0rem !important;
}

.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.mx-0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.p-0 {
  padding: 0rem !important;
}

.py-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.px-0 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.maxw-0 {
  max-width: calc(0 * 10%);
}

.maxh-0 {
  max-height: calc(0 * 10%);
}

.w-0 {
  width: calc(0 * 10%);
}

.h-0 {
  height: calc(0 * 10%);
}

.f-1 {
  flex: 1;
}

.gap-1 {
  gap: 1rem !important;
}

.m-1 {
  margin: 1rem !important;
}

.my-1 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mx-1 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.ml-1 {
  margin-left: 1rem !important;
}

.mr-1 {
  margin-right: 1rem !important;
}

.p-1 {
  padding: 1rem !important;
}

.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.pt-1 {
  padding-top: 1rem !important;
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.pl-1 {
  padding-left: 1rem !important;
}

.pr-1 {
  padding-right: 1rem !important;
}

.maxw-1 {
  max-width: calc(1 * 10%);
}

.maxh-1 {
  max-height: calc(1 * 10%);
}

.w-1 {
  width: calc(1 * 10%);
}

.h-1 {
  height: calc(1 * 10%);
}

.f-2 {
  flex: 2;
}

.gap-2 {
  gap: 2rem !important;
}

.m-2 {
  margin: 2rem !important;
}

.my-2 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mx-2 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.ml-2 {
  margin-left: 2rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.pt-2 {
  padding-top: 2rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

.px-2 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.pl-2 {
  padding-left: 2rem !important;
}

.pr-2 {
  padding-right: 2rem !important;
}

.maxw-2 {
  max-width: calc(2 * 10%);
}

.maxh-2 {
  max-height: calc(2 * 10%);
}

.w-2 {
  width: calc(2 * 10%);
}

.h-2 {
  height: calc(2 * 10%);
}

.f-3 {
  flex: 3;
}

.gap-3 {
  gap: 3rem !important;
}

.m-3 {
  margin: 3rem !important;
}

.my-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mx-3 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-3 {
  padding-top: 3rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.px-3 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.pl-3 {
  padding-left: 3rem !important;
}

.pr-3 {
  padding-right: 3rem !important;
}

.maxw-3 {
  max-width: calc(3 * 10%);
}

.maxh-3 {
  max-height: calc(3 * 10%);
}

.w-3 {
  width: calc(3 * 10%);
}

.h-3 {
  height: calc(3 * 10%);
}

.f-4 {
  flex: 4;
}

.gap-4 {
  gap: 4rem !important;
}

.m-4 {
  margin: 4rem !important;
}

.my-4 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.mx-4 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

.ml-4 {
  margin-left: 4rem !important;
}

.mr-4 {
  margin-right: 4rem !important;
}

.p-4 {
  padding: 4rem !important;
}

.py-4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.pt-4 {
  padding-top: 4rem !important;
}

.pb-4 {
  padding-bottom: 4rem !important;
}

.px-4 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.pl-4 {
  padding-left: 4rem !important;
}

.pr-4 {
  padding-right: 4rem !important;
}

.maxw-4 {
  max-width: calc(4 * 10%);
}

.maxh-4 {
  max-height: calc(4 * 10%);
}

.w-4 {
  width: calc(4 * 10%);
}

.h-4 {
  height: calc(4 * 10%);
}

.f-5 {
  flex: 5;
}

.gap-5 {
  gap: 5rem !important;
}

.m-5 {
  margin: 5rem !important;
}

.my-5 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.mt-5 {
  margin-top: 5rem !important;
}

.mb-5 {
  margin-bottom: 5rem !important;
}

.mx-5 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

.ml-5 {
  margin-left: 5rem !important;
}

.mr-5 {
  margin-right: 5rem !important;
}

.p-5 {
  padding: 5rem !important;
}

.py-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.pt-5 {
  padding-top: 5rem !important;
}

.pb-5 {
  padding-bottom: 5rem !important;
}

.px-5 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.pl-5 {
  padding-left: 5rem !important;
}

.pr-5 {
  padding-right: 5rem !important;
}

.maxw-5 {
  max-width: calc(5 * 10%);
}

.maxh-5 {
  max-height: calc(5 * 10%);
}

.w-5 {
  width: calc(5 * 10%);
}

.h-5 {
  height: calc(5 * 10%);
}

.f-6 {
  flex: 6;
}

.gap-6 {
  gap: 6rem !important;
}

.m-6 {
  margin: 6rem !important;
}

.my-6 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}

.mt-6 {
  margin-top: 6rem !important;
}

.mb-6 {
  margin-bottom: 6rem !important;
}

.mx-6 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}

.ml-6 {
  margin-left: 6rem !important;
}

.mr-6 {
  margin-right: 6rem !important;
}

.p-6 {
  padding: 6rem !important;
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.pt-6 {
  padding-top: 6rem !important;
}

.pb-6 {
  padding-bottom: 6rem !important;
}

.px-6 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.pl-6 {
  padding-left: 6rem !important;
}

.pr-6 {
  padding-right: 6rem !important;
}

.maxw-6 {
  max-width: calc(6 * 10%);
}

.maxh-6 {
  max-height: calc(6 * 10%);
}

.w-6 {
  width: calc(6 * 10%);
}

.h-6 {
  height: calc(6 * 10%);
}

.f-7 {
  flex: 7;
}

.gap-7 {
  gap: 7rem !important;
}

.m-7 {
  margin: 7rem !important;
}

.my-7 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}

.mt-7 {
  margin-top: 7rem !important;
}

.mb-7 {
  margin-bottom: 7rem !important;
}

.mx-7 {
  margin-left: 7rem !important;
  margin-right: 7rem !important;
}

.ml-7 {
  margin-left: 7rem !important;
}

.mr-7 {
  margin-right: 7rem !important;
}

.p-7 {
  padding: 7rem !important;
}

.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.pt-7 {
  padding-top: 7rem !important;
}

.pb-7 {
  padding-bottom: 7rem !important;
}

.px-7 {
  padding-left: 7rem !important;
  padding-right: 7rem !important;
}

.pl-7 {
  padding-left: 7rem !important;
}

.pr-7 {
  padding-right: 7rem !important;
}

.maxw-7 {
  max-width: calc(7 * 10%);
}

.maxh-7 {
  max-height: calc(7 * 10%);
}

.w-7 {
  width: calc(7 * 10%);
}

.h-7 {
  height: calc(7 * 10%);
}

.f-8 {
  flex: 8;
}

.gap-8 {
  gap: 8rem !important;
}

.m-8 {
  margin: 8rem !important;
}

.my-8 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}

.mt-8 {
  margin-top: 8rem !important;
}

.mb-8 {
  margin-bottom: 8rem !important;
}

.mx-8 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}

.ml-8 {
  margin-left: 8rem !important;
}

.mr-8 {
  margin-right: 8rem !important;
}

.p-8 {
  padding: 8rem !important;
}

.py-8 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.pt-8 {
  padding-top: 8rem !important;
}

.pb-8 {
  padding-bottom: 8rem !important;
}

.px-8 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}

.pl-8 {
  padding-left: 8rem !important;
}

.pr-8 {
  padding-right: 8rem !important;
}

.maxw-8 {
  max-width: calc(8 * 10%);
}

.maxh-8 {
  max-height: calc(8 * 10%);
}

.w-8 {
  width: calc(8 * 10%);
}

.h-8 {
  height: calc(8 * 10%);
}

.f-9 {
  flex: 9;
}

.gap-9 {
  gap: 9rem !important;
}

.m-9 {
  margin: 9rem !important;
}

.my-9 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}

.mt-9 {
  margin-top: 9rem !important;
}

.mb-9 {
  margin-bottom: 9rem !important;
}

.mx-9 {
  margin-left: 9rem !important;
  margin-right: 9rem !important;
}

.ml-9 {
  margin-left: 9rem !important;
}

.mr-9 {
  margin-right: 9rem !important;
}

.p-9 {
  padding: 9rem !important;
}

.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.pt-9 {
  padding-top: 9rem !important;
}

.pb-9 {
  padding-bottom: 9rem !important;
}

.px-9 {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}

.pl-9 {
  padding-left: 9rem !important;
}

.pr-9 {
  padding-right: 9rem !important;
}

.maxw-9 {
  max-width: calc(9 * 10%);
}

.maxh-9 {
  max-height: calc(9 * 10%);
}

.w-9 {
  width: calc(9 * 10%);
}

.h-9 {
  height: calc(9 * 10%);
}

.f-10 {
  flex: 10;
}

.gap-10 {
  gap: 10rem !important;
}

.m-10 {
  margin: 10rem !important;
}

.my-10 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important;
}

.mt-10 {
  margin-top: 10rem !important;
}

.mb-10 {
  margin-bottom: 10rem !important;
}

.mx-10 {
  margin-left: 10rem !important;
  margin-right: 10rem !important;
}

.ml-10 {
  margin-left: 10rem !important;
}

.mr-10 {
  margin-right: 10rem !important;
}

.p-10 {
  padding: 10rem !important;
}

.py-10 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

.pt-10 {
  padding-top: 10rem !important;
}

.pb-10 {
  padding-bottom: 10rem !important;
}

.px-10 {
  padding-left: 10rem !important;
  padding-right: 10rem !important;
}

.pl-10 {
  padding-left: 10rem !important;
}

.pr-10 {
  padding-right: 10rem !important;
}

.maxw-10 {
  max-width: calc(10 * 10%);
}

.maxh-10 {
  max-height: calc(10 * 10%);
}

.w-10 {
  width: calc(10 * 10%);
}

.h-10 {
  height: calc(10 * 10%);
}

.f-11 {
  flex: 11;
}

.gap-11 {
  gap: 11rem !important;
}

.m-11 {
  margin: 11rem !important;
}

.my-11 {
  margin-top: 11rem !important;
  margin-bottom: 11rem !important;
}

.mt-11 {
  margin-top: 11rem !important;
}

.mb-11 {
  margin-bottom: 11rem !important;
}

.mx-11 {
  margin-left: 11rem !important;
  margin-right: 11rem !important;
}

.ml-11 {
  margin-left: 11rem !important;
}

.mr-11 {
  margin-right: 11rem !important;
}

.p-11 {
  padding: 11rem !important;
}

.py-11 {
  padding-top: 11rem !important;
  padding-bottom: 11rem !important;
}

.pt-11 {
  padding-top: 11rem !important;
}

.pb-11 {
  padding-bottom: 11rem !important;
}

.px-11 {
  padding-left: 11rem !important;
  padding-right: 11rem !important;
}

.pl-11 {
  padding-left: 11rem !important;
}

.pr-11 {
  padding-right: 11rem !important;
}

.maxw-11 {
  max-width: calc(11 * 10%);
}

.maxh-11 {
  max-height: calc(11 * 10%);
}

.w-11 {
  width: calc(11 * 10%);
}

.h-11 {
  height: calc(11 * 10%);
}

.f-12 {
  flex: 12;
}

.gap-12 {
  gap: 12rem !important;
}

.m-12 {
  margin: 12rem !important;
}

.my-12 {
  margin-top: 12rem !important;
  margin-bottom: 12rem !important;
}

.mt-12 {
  margin-top: 12rem !important;
}

.mb-12 {
  margin-bottom: 12rem !important;
}

.mx-12 {
  margin-left: 12rem !important;
  margin-right: 12rem !important;
}

.ml-12 {
  margin-left: 12rem !important;
}

.mr-12 {
  margin-right: 12rem !important;
}

.p-12 {
  padding: 12rem !important;
}

.py-12 {
  padding-top: 12rem !important;
  padding-bottom: 12rem !important;
}

.pt-12 {
  padding-top: 12rem !important;
}

.pb-12 {
  padding-bottom: 12rem !important;
}

.px-12 {
  padding-left: 12rem !important;
  padding-right: 12rem !important;
}

.pl-12 {
  padding-left: 12rem !important;
}

.pr-12 {
  padding-right: 12rem !important;
}

.maxw-12 {
  max-width: calc(12 * 10%);
}

.maxh-12 {
  max-height: calc(12 * 10%);
}

.w-12 {
  width: calc(12 * 10%);
}

.h-12 {
  height: calc(12 * 10%);
}

.f-13 {
  flex: 13;
}

.gap-13 {
  gap: 13rem !important;
}

.m-13 {
  margin: 13rem !important;
}

.my-13 {
  margin-top: 13rem !important;
  margin-bottom: 13rem !important;
}

.mt-13 {
  margin-top: 13rem !important;
}

.mb-13 {
  margin-bottom: 13rem !important;
}

.mx-13 {
  margin-left: 13rem !important;
  margin-right: 13rem !important;
}

.ml-13 {
  margin-left: 13rem !important;
}

.mr-13 {
  margin-right: 13rem !important;
}

.p-13 {
  padding: 13rem !important;
}

.py-13 {
  padding-top: 13rem !important;
  padding-bottom: 13rem !important;
}

.pt-13 {
  padding-top: 13rem !important;
}

.pb-13 {
  padding-bottom: 13rem !important;
}

.px-13 {
  padding-left: 13rem !important;
  padding-right: 13rem !important;
}

.pl-13 {
  padding-left: 13rem !important;
}

.pr-13 {
  padding-right: 13rem !important;
}

.maxw-13 {
  max-width: calc(13 * 10%);
}

.maxh-13 {
  max-height: calc(13 * 10%);
}

.w-13 {
  width: calc(13 * 10%);
}

.h-13 {
  height: calc(13 * 10%);
}

.f-14 {
  flex: 14;
}

.gap-14 {
  gap: 14rem !important;
}

.m-14 {
  margin: 14rem !important;
}

.my-14 {
  margin-top: 14rem !important;
  margin-bottom: 14rem !important;
}

.mt-14 {
  margin-top: 14rem !important;
}

.mb-14 {
  margin-bottom: 14rem !important;
}

.mx-14 {
  margin-left: 14rem !important;
  margin-right: 14rem !important;
}

.ml-14 {
  margin-left: 14rem !important;
}

.mr-14 {
  margin-right: 14rem !important;
}

.p-14 {
  padding: 14rem !important;
}

.py-14 {
  padding-top: 14rem !important;
  padding-bottom: 14rem !important;
}

.pt-14 {
  padding-top: 14rem !important;
}

.pb-14 {
  padding-bottom: 14rem !important;
}

.px-14 {
  padding-left: 14rem !important;
  padding-right: 14rem !important;
}

.pl-14 {
  padding-left: 14rem !important;
}

.pr-14 {
  padding-right: 14rem !important;
}

.maxw-14 {
  max-width: calc(14 * 10%);
}

.maxh-14 {
  max-height: calc(14 * 10%);
}

.w-14 {
  width: calc(14 * 10%);
}

.h-14 {
  height: calc(14 * 10%);
}

.f-15 {
  flex: 15;
}

.gap-15 {
  gap: 15rem !important;
}

.m-15 {
  margin: 15rem !important;
}

.my-15 {
  margin-top: 15rem !important;
  margin-bottom: 15rem !important;
}

.mt-15 {
  margin-top: 15rem !important;
}

.mb-15 {
  margin-bottom: 15rem !important;
}

.mx-15 {
  margin-left: 15rem !important;
  margin-right: 15rem !important;
}

.ml-15 {
  margin-left: 15rem !important;
}

.mr-15 {
  margin-right: 15rem !important;
}

.p-15 {
  padding: 15rem !important;
}

.py-15 {
  padding-top: 15rem !important;
  padding-bottom: 15rem !important;
}

.pt-15 {
  padding-top: 15rem !important;
}

.pb-15 {
  padding-bottom: 15rem !important;
}

.px-15 {
  padding-left: 15rem !important;
  padding-right: 15rem !important;
}

.pl-15 {
  padding-left: 15rem !important;
}

.pr-15 {
  padding-right: 15rem !important;
}

.maxw-15 {
  max-width: calc(15 * 10%);
}

.maxh-15 {
  max-height: calc(15 * 10%);
}

.w-15 {
  width: calc(15 * 10%);
}

.h-15 {
  height: calc(15 * 10%);
}

.f-16 {
  flex: 16;
}

.gap-16 {
  gap: 16rem !important;
}

.m-16 {
  margin: 16rem !important;
}

.my-16 {
  margin-top: 16rem !important;
  margin-bottom: 16rem !important;
}

.mt-16 {
  margin-top: 16rem !important;
}

.mb-16 {
  margin-bottom: 16rem !important;
}

.mx-16 {
  margin-left: 16rem !important;
  margin-right: 16rem !important;
}

.ml-16 {
  margin-left: 16rem !important;
}

.mr-16 {
  margin-right: 16rem !important;
}

.p-16 {
  padding: 16rem !important;
}

.py-16 {
  padding-top: 16rem !important;
  padding-bottom: 16rem !important;
}

.pt-16 {
  padding-top: 16rem !important;
}

.pb-16 {
  padding-bottom: 16rem !important;
}

.px-16 {
  padding-left: 16rem !important;
  padding-right: 16rem !important;
}

.pl-16 {
  padding-left: 16rem !important;
}

.pr-16 {
  padding-right: 16rem !important;
}

.maxw-16 {
  max-width: calc(16 * 10%);
}

.maxh-16 {
  max-height: calc(16 * 10%);
}

.w-16 {
  width: calc(16 * 10%);
}

.h-16 {
  height: calc(16 * 10%);
}

.f-17 {
  flex: 17;
}

.gap-17 {
  gap: 17rem !important;
}

.m-17 {
  margin: 17rem !important;
}

.my-17 {
  margin-top: 17rem !important;
  margin-bottom: 17rem !important;
}

.mt-17 {
  margin-top: 17rem !important;
}

.mb-17 {
  margin-bottom: 17rem !important;
}

.mx-17 {
  margin-left: 17rem !important;
  margin-right: 17rem !important;
}

.ml-17 {
  margin-left: 17rem !important;
}

.mr-17 {
  margin-right: 17rem !important;
}

.p-17 {
  padding: 17rem !important;
}

.py-17 {
  padding-top: 17rem !important;
  padding-bottom: 17rem !important;
}

.pt-17 {
  padding-top: 17rem !important;
}

.pb-17 {
  padding-bottom: 17rem !important;
}

.px-17 {
  padding-left: 17rem !important;
  padding-right: 17rem !important;
}

.pl-17 {
  padding-left: 17rem !important;
}

.pr-17 {
  padding-right: 17rem !important;
}

.maxw-17 {
  max-width: calc(17 * 10%);
}

.maxh-17 {
  max-height: calc(17 * 10%);
}

.w-17 {
  width: calc(17 * 10%);
}

.h-17 {
  height: calc(17 * 10%);
}

.f-18 {
  flex: 18;
}

.gap-18 {
  gap: 18rem !important;
}

.m-18 {
  margin: 18rem !important;
}

.my-18 {
  margin-top: 18rem !important;
  margin-bottom: 18rem !important;
}

.mt-18 {
  margin-top: 18rem !important;
}

.mb-18 {
  margin-bottom: 18rem !important;
}

.mx-18 {
  margin-left: 18rem !important;
  margin-right: 18rem !important;
}

.ml-18 {
  margin-left: 18rem !important;
}

.mr-18 {
  margin-right: 18rem !important;
}

.p-18 {
  padding: 18rem !important;
}

.py-18 {
  padding-top: 18rem !important;
  padding-bottom: 18rem !important;
}

.pt-18 {
  padding-top: 18rem !important;
}

.pb-18 {
  padding-bottom: 18rem !important;
}

.px-18 {
  padding-left: 18rem !important;
  padding-right: 18rem !important;
}

.pl-18 {
  padding-left: 18rem !important;
}

.pr-18 {
  padding-right: 18rem !important;
}

.maxw-18 {
  max-width: calc(18 * 10%);
}

.maxh-18 {
  max-height: calc(18 * 10%);
}

.w-18 {
  width: calc(18 * 10%);
}

.h-18 {
  height: calc(18 * 10%);
}

.f-19 {
  flex: 19;
}

.gap-19 {
  gap: 19rem !important;
}

.m-19 {
  margin: 19rem !important;
}

.my-19 {
  margin-top: 19rem !important;
  margin-bottom: 19rem !important;
}

.mt-19 {
  margin-top: 19rem !important;
}

.mb-19 {
  margin-bottom: 19rem !important;
}

.mx-19 {
  margin-left: 19rem !important;
  margin-right: 19rem !important;
}

.ml-19 {
  margin-left: 19rem !important;
}

.mr-19 {
  margin-right: 19rem !important;
}

.p-19 {
  padding: 19rem !important;
}

.py-19 {
  padding-top: 19rem !important;
  padding-bottom: 19rem !important;
}

.pt-19 {
  padding-top: 19rem !important;
}

.pb-19 {
  padding-bottom: 19rem !important;
}

.px-19 {
  padding-left: 19rem !important;
  padding-right: 19rem !important;
}

.pl-19 {
  padding-left: 19rem !important;
}

.pr-19 {
  padding-right: 19rem !important;
}

.maxw-19 {
  max-width: calc(19 * 10%);
}

.maxh-19 {
  max-height: calc(19 * 10%);
}

.w-19 {
  width: calc(19 * 10%);
}

.h-19 {
  height: calc(19 * 10%);
}

.f-20 {
  flex: 20;
}

.gap-20 {
  gap: 20rem !important;
}

.m-20 {
  margin: 20rem !important;
}

.my-20 {
  margin-top: 20rem !important;
  margin-bottom: 20rem !important;
}

.mt-20 {
  margin-top: 20rem !important;
}

.mb-20 {
  margin-bottom: 20rem !important;
}

.mx-20 {
  margin-left: 20rem !important;
  margin-right: 20rem !important;
}

.ml-20 {
  margin-left: 20rem !important;
}

.mr-20 {
  margin-right: 20rem !important;
}

.p-20 {
  padding: 20rem !important;
}

.py-20 {
  padding-top: 20rem !important;
  padding-bottom: 20rem !important;
}

.pt-20 {
  padding-top: 20rem !important;
}

.pb-20 {
  padding-bottom: 20rem !important;
}

.px-20 {
  padding-left: 20rem !important;
  padding-right: 20rem !important;
}

.pl-20 {
  padding-left: 20rem !important;
}

.pr-20 {
  padding-right: 20rem !important;
}

.maxw-20 {
  max-width: calc(20 * 10%);
}

.maxh-20 {
  max-height: calc(20 * 10%);
}

.w-20 {
  width: calc(20 * 10%);
}

.h-20 {
  height: calc(20 * 10%);
}

.f-21 {
  flex: 21;
}

.gap-21 {
  gap: 21rem !important;
}

.m-21 {
  margin: 21rem !important;
}

.my-21 {
  margin-top: 21rem !important;
  margin-bottom: 21rem !important;
}

.mt-21 {
  margin-top: 21rem !important;
}

.mb-21 {
  margin-bottom: 21rem !important;
}

.mx-21 {
  margin-left: 21rem !important;
  margin-right: 21rem !important;
}

.ml-21 {
  margin-left: 21rem !important;
}

.mr-21 {
  margin-right: 21rem !important;
}

.p-21 {
  padding: 21rem !important;
}

.py-21 {
  padding-top: 21rem !important;
  padding-bottom: 21rem !important;
}

.pt-21 {
  padding-top: 21rem !important;
}

.pb-21 {
  padding-bottom: 21rem !important;
}

.px-21 {
  padding-left: 21rem !important;
  padding-right: 21rem !important;
}

.pl-21 {
  padding-left: 21rem !important;
}

.pr-21 {
  padding-right: 21rem !important;
}

.maxw-21 {
  max-width: calc(21 * 10%);
}

.maxh-21 {
  max-height: calc(21 * 10%);
}

.w-21 {
  width: calc(21 * 10%);
}

.h-21 {
  height: calc(21 * 10%);
}

.f-22 {
  flex: 22;
}

.gap-22 {
  gap: 22rem !important;
}

.m-22 {
  margin: 22rem !important;
}

.my-22 {
  margin-top: 22rem !important;
  margin-bottom: 22rem !important;
}

.mt-22 {
  margin-top: 22rem !important;
}

.mb-22 {
  margin-bottom: 22rem !important;
}

.mx-22 {
  margin-left: 22rem !important;
  margin-right: 22rem !important;
}

.ml-22 {
  margin-left: 22rem !important;
}

.mr-22 {
  margin-right: 22rem !important;
}

.p-22 {
  padding: 22rem !important;
}

.py-22 {
  padding-top: 22rem !important;
  padding-bottom: 22rem !important;
}

.pt-22 {
  padding-top: 22rem !important;
}

.pb-22 {
  padding-bottom: 22rem !important;
}

.px-22 {
  padding-left: 22rem !important;
  padding-right: 22rem !important;
}

.pl-22 {
  padding-left: 22rem !important;
}

.pr-22 {
  padding-right: 22rem !important;
}

.maxw-22 {
  max-width: calc(22 * 10%);
}

.maxh-22 {
  max-height: calc(22 * 10%);
}

.w-22 {
  width: calc(22 * 10%);
}

.h-22 {
  height: calc(22 * 10%);
}

.mobile-show {
  display: none;
}

@media (max-width: 800px) {
  .mobile-show {
    display: inherit;
  }
  .mobile-hide {
    display: none;
  }
}
/*
//
//  text
//
*/
@media (max-width: 800px) {
  .mobile-text-center {
    text-align: center;
  }
  .mobile-text-left {
    text-align: left;
  }
  .mobile-text-right {
    text-align: right;
  }
}
/*
//
//  FLEX
//
*/
@media (max-width: 800px) {
  .mobile-fx-reverse,
.mobile-fx {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2rem;
  }
  .mobile-fy-reverse,
.mobile-fy {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .mobile-fx-reverse {
    flex-direction: row-reverse;
  }
  .mobile-fy-reverse {
    flex-direction: column-reverse;
  }
  .fx.mobile-wrap,
.fx-reverse.mobile-wrap,
.mobile-fx.mobile-wrap,
.mobile-fx-reverse.mobile-wrap {
    flex-wrap: wrap;
  }
  .fx.mobile-wrap .mobile-fy,
.fx-reverse.mobile-wrap .mobile-fy,
.mobile-fx.mobile-wrap .mobile-fy,
.mobile-fx-reverse.mobile-wrap .mobile-fy {
    height: auto;
  }
  .fx.mobile-spaced,
.fx-reverse.mobile-spaced,
.mobile-fx.mobile-spaced,
.mobile-fx-reverse.mobile-spaced {
    justify-content: space-between;
  }
  .fx.mobile-left,
.fx-reverse.mobile-left,
.mobile-fx.mobile-left,
.mobile-fx-reverse.mobile-left {
    justify-content: flex-start;
  }
  .fx.mobile-right,
.fx-reverse.mobile-right,
.mobile-fx.mobile-right,
.mobile-fx-reverse.mobile-right {
    justify-content: flex-end;
  }
  .fx.mobile-xcenter,
.fx-reverse.mobile-xcenter,
.mobile-fx.mobile-xcenter,
.mobile-fx-reverse.mobile-xcenter {
    justify-content: center;
  }
  .fx.mobile-xstretch,
.fx-reverse.mobile-xstretch,
.mobile-fx.mobile-xstretch,
.mobile-fx-reverse.mobile-xstretch {
    justify-content: space-evenly;
  }
  .fx.mobile-xstretch > *,
.fx-reverse.mobile-xstretch > *,
.mobile-fx.mobile-xstretch > *,
.mobile-fx-reverse.mobile-xstretch > * {
    flex-grow: 1;
  }
  .fx.mobile-top,
.fx-reverse.mobile-top,
.mobile-fx.mobile-top,
.mobile-fx-reverse.mobile-top {
    align-items: flex-start;
  }
  .fx.mobile-bottom,
.fx-reverse.mobile-bottom,
.mobile-fx.mobile-bottom,
.mobile-fx-reverse.mobile-bottom {
    align-items: flex-end;
  }
  .fx.mobile-ycenter,
.fx-reverse.mobile-ycenter,
.mobile-fx.mobile-ycenter,
.mobile-fx-reverse.mobile-ycenter {
    align-items: center;
  }
  .fx.mobile-ystretch,
.fx-reverse.mobile-ystretch,
.mobile-fx.mobile-ystretch,
.mobile-fx-reverse.mobile-ystretch {
    align-items: stretch;
  }
  .fy.mobile-spaced,
.fy-reverse.mobile-spaced,
.mobile-fy.mobile-spaced,
.mobile-fy-reverse.mobile-spaced {
    justify-content: space-between;
  }
  .fy.mobile-xcenter,
.fy-reverse.mobile-xcenter,
.mobile-fy.mobile-xcenter,
.mobile-fy-reverse.mobile-xcenter {
    align-items: center;
  }
  .fy.mobile-xstretch,
.fy-reverse.mobile-xstretch,
.mobile-fy.mobile-xstretch,
.mobile-fy-reverse.mobile-xstretch {
    align-items: stretch;
  }
  .fy.mobile-ycenter,
.fy-reverse.mobile-ycenter,
.mobile-fy.mobile-ycenter,
.mobile-fy-reverse.mobile-ycenter {
    justify-content: center;
  }
  .fy.mobile-ystretch,
.fy-reverse.mobile-ystretch,
.mobile-fy.mobile-ystretch,
.mobile-fy-reverse.mobile-ystretch {
    justify-content: stretch;
  }
  .fy.mobile-selfstretch,
.fy-reverse.mobile-selfstretch,
.mobile-fy.mobile-selfstretch,
.mobile-fy-reverse.mobile-selfstretch {
    align-self: stretch;
  }
  .fy.mobile-top,
.fy-reverse.mobile-top,
.mobile-fy.mobile-top,
.mobile-fy-reverse.mobile-top {
    justify-content: flex-start;
  }
  .fy.mobile-bottom,
.fy-reverse.mobile-bottom,
.mobile-fy.mobile-bottom,
.mobile-fy-reverse.mobile-bottom {
    justify-content: flex-end;
  }
  .fy.mobile-left,
.fy-reverse.mobile-left,
.mobile-fy.mobile-left,
.mobile-fy-reverse.mobile-left {
    align-items: flex-start;
  }
  .fy.mobile-right,
.fy-reverse.mobile-right,
.mobile-fy.mobile-right,
.mobile-fy-reverse.mobile-right {
    align-items: flex-end;
  }
  /*
  //
  //  MARGINS, GAPS, FLEX
  //
  */
  .mobile-f-0 {
    flex: 0;
  }
  .mobile-gap-0 {
    gap: 0rem !important;
  }
  .mobile-m-0 {
    margin: 0rem !important;
  }
  .mobile-my-0 {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }
  .mobile-mt-0 {
    margin-top: 0rem !important;
  }
  .mobile-mb-0 {
    margin-bottom: 0rem !important;
  }
  .mobile-mx-0 {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
  }
  .mobile-ml-0 {
    margin-left: 0rem !important;
  }
  .mobile-mr-0 {
    margin-right: 0rem !important;
  }
  .mobile-p-0 {
    padding: 0rem !important;
  }
  .mobile-py-0 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }
  .mobile-pt-0 {
    padding-top: 0rem !important;
  }
  .mobile-pb-0 {
    padding-bottom: 0rem !important;
  }
  .mobile-px-0 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
  .mobile-pl-0 {
    padding-left: 0rem !important;
  }
  .mobile-pr-0 {
    padding-right: 0rem !important;
  }
  .mobile-w-0 {
    max-width: calc(0 * 10%);
  }
  .mobile-h-0 {
    max-height: calc(0 * 10%);
  }
  .mobile-f-1 {
    flex: 1;
  }
  .mobile-gap-1 {
    gap: 1rem !important;
  }
  .mobile-m-1 {
    margin: 1rem !important;
  }
  .mobile-my-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mobile-mt-1 {
    margin-top: 1rem !important;
  }
  .mobile-mb-1 {
    margin-bottom: 1rem !important;
  }
  .mobile-mx-1 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  .mobile-ml-1 {
    margin-left: 1rem !important;
  }
  .mobile-mr-1 {
    margin-right: 1rem !important;
  }
  .mobile-p-1 {
    padding: 1rem !important;
  }
  .mobile-py-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .mobile-pt-1 {
    padding-top: 1rem !important;
  }
  .mobile-pb-1 {
    padding-bottom: 1rem !important;
  }
  .mobile-px-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .mobile-pl-1 {
    padding-left: 1rem !important;
  }
  .mobile-pr-1 {
    padding-right: 1rem !important;
  }
  .mobile-w-1 {
    max-width: calc(1 * 10%);
  }
  .mobile-h-1 {
    max-height: calc(1 * 10%);
  }
  .mobile-f-2 {
    flex: 2;
  }
  .mobile-gap-2 {
    gap: 2rem !important;
  }
  .mobile-m-2 {
    margin: 2rem !important;
  }
  .mobile-my-2 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  .mobile-mt-2 {
    margin-top: 2rem !important;
  }
  .mobile-mb-2 {
    margin-bottom: 2rem !important;
  }
  .mobile-mx-2 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  .mobile-ml-2 {
    margin-left: 2rem !important;
  }
  .mobile-mr-2 {
    margin-right: 2rem !important;
  }
  .mobile-p-2 {
    padding: 2rem !important;
  }
  .mobile-py-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .mobile-pt-2 {
    padding-top: 2rem !important;
  }
  .mobile-pb-2 {
    padding-bottom: 2rem !important;
  }
  .mobile-px-2 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .mobile-pl-2 {
    padding-left: 2rem !important;
  }
  .mobile-pr-2 {
    padding-right: 2rem !important;
  }
  .mobile-w-2 {
    max-width: calc(2 * 10%);
  }
  .mobile-h-2 {
    max-height: calc(2 * 10%);
  }
  .mobile-f-3 {
    flex: 3;
  }
  .mobile-gap-3 {
    gap: 3rem !important;
  }
  .mobile-m-3 {
    margin: 3rem !important;
  }
  .mobile-my-3 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .mobile-mt-3 {
    margin-top: 3rem !important;
  }
  .mobile-mb-3 {
    margin-bottom: 3rem !important;
  }
  .mobile-mx-3 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }
  .mobile-ml-3 {
    margin-left: 3rem !important;
  }
  .mobile-mr-3 {
    margin-right: 3rem !important;
  }
  .mobile-p-3 {
    padding: 3rem !important;
  }
  .mobile-py-3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .mobile-pt-3 {
    padding-top: 3rem !important;
  }
  .mobile-pb-3 {
    padding-bottom: 3rem !important;
  }
  .mobile-px-3 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  .mobile-pl-3 {
    padding-left: 3rem !important;
  }
  .mobile-pr-3 {
    padding-right: 3rem !important;
  }
  .mobile-w-3 {
    max-width: calc(3 * 10%);
  }
  .mobile-h-3 {
    max-height: calc(3 * 10%);
  }
  .mobile-f-4 {
    flex: 4;
  }
  .mobile-gap-4 {
    gap: 4rem !important;
  }
  .mobile-m-4 {
    margin: 4rem !important;
  }
  .mobile-my-4 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
  }
  .mobile-mt-4 {
    margin-top: 4rem !important;
  }
  .mobile-mb-4 {
    margin-bottom: 4rem !important;
  }
  .mobile-mx-4 {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
  }
  .mobile-ml-4 {
    margin-left: 4rem !important;
  }
  .mobile-mr-4 {
    margin-right: 4rem !important;
  }
  .mobile-p-4 {
    padding: 4rem !important;
  }
  .mobile-py-4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .mobile-pt-4 {
    padding-top: 4rem !important;
  }
  .mobile-pb-4 {
    padding-bottom: 4rem !important;
  }
  .mobile-px-4 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .mobile-pl-4 {
    padding-left: 4rem !important;
  }
  .mobile-pr-4 {
    padding-right: 4rem !important;
  }
  .mobile-w-4 {
    max-width: calc(4 * 10%);
  }
  .mobile-h-4 {
    max-height: calc(4 * 10%);
  }
  .mobile-f-5 {
    flex: 5;
  }
  .mobile-gap-5 {
    gap: 5rem !important;
  }
  .mobile-m-5 {
    margin: 5rem !important;
  }
  .mobile-my-5 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .mobile-mt-5 {
    margin-top: 5rem !important;
  }
  .mobile-mb-5 {
    margin-bottom: 5rem !important;
  }
  .mobile-mx-5 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mobile-ml-5 {
    margin-left: 5rem !important;
  }
  .mobile-mr-5 {
    margin-right: 5rem !important;
  }
  .mobile-p-5 {
    padding: 5rem !important;
  }
  .mobile-py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .mobile-pt-5 {
    padding-top: 5rem !important;
  }
  .mobile-pb-5 {
    padding-bottom: 5rem !important;
  }
  .mobile-px-5 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .mobile-pl-5 {
    padding-left: 5rem !important;
  }
  .mobile-pr-5 {
    padding-right: 5rem !important;
  }
  .mobile-w-5 {
    max-width: calc(5 * 10%);
  }
  .mobile-h-5 {
    max-height: calc(5 * 10%);
  }
  .mobile-f-6 {
    flex: 6;
  }
  .mobile-gap-6 {
    gap: 6rem !important;
  }
  .mobile-m-6 {
    margin: 6rem !important;
  }
  .mobile-my-6 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .mobile-mt-6 {
    margin-top: 6rem !important;
  }
  .mobile-mb-6 {
    margin-bottom: 6rem !important;
  }
  .mobile-mx-6 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mobile-ml-6 {
    margin-left: 6rem !important;
  }
  .mobile-mr-6 {
    margin-right: 6rem !important;
  }
  .mobile-p-6 {
    padding: 6rem !important;
  }
  .mobile-py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .mobile-pt-6 {
    padding-top: 6rem !important;
  }
  .mobile-pb-6 {
    padding-bottom: 6rem !important;
  }
  .mobile-px-6 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .mobile-pl-6 {
    padding-left: 6rem !important;
  }
  .mobile-pr-6 {
    padding-right: 6rem !important;
  }
  .mobile-w-6 {
    max-width: calc(6 * 10%);
  }
  .mobile-h-6 {
    max-height: calc(6 * 10%);
  }
  .mobile-f-7 {
    flex: 7;
  }
  .mobile-gap-7 {
    gap: 7rem !important;
  }
  .mobile-m-7 {
    margin: 7rem !important;
  }
  .mobile-my-7 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .mobile-mt-7 {
    margin-top: 7rem !important;
  }
  .mobile-mb-7 {
    margin-bottom: 7rem !important;
  }
  .mobile-mx-7 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mobile-ml-7 {
    margin-left: 7rem !important;
  }
  .mobile-mr-7 {
    margin-right: 7rem !important;
  }
  .mobile-p-7 {
    padding: 7rem !important;
  }
  .mobile-py-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .mobile-pt-7 {
    padding-top: 7rem !important;
  }
  .mobile-pb-7 {
    padding-bottom: 7rem !important;
  }
  .mobile-px-7 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .mobile-pl-7 {
    padding-left: 7rem !important;
  }
  .mobile-pr-7 {
    padding-right: 7rem !important;
  }
  .mobile-w-7 {
    max-width: calc(7 * 10%);
  }
  .mobile-h-7 {
    max-height: calc(7 * 10%);
  }
  .mobile-f-8 {
    flex: 8;
  }
  .mobile-gap-8 {
    gap: 8rem !important;
  }
  .mobile-m-8 {
    margin: 8rem !important;
  }
  .mobile-my-8 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
  .mobile-mt-8 {
    margin-top: 8rem !important;
  }
  .mobile-mb-8 {
    margin-bottom: 8rem !important;
  }
  .mobile-mx-8 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }
  .mobile-ml-8 {
    margin-left: 8rem !important;
  }
  .mobile-mr-8 {
    margin-right: 8rem !important;
  }
  .mobile-p-8 {
    padding: 8rem !important;
  }
  .mobile-py-8 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }
  .mobile-pt-8 {
    padding-top: 8rem !important;
  }
  .mobile-pb-8 {
    padding-bottom: 8rem !important;
  }
  .mobile-px-8 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }
  .mobile-pl-8 {
    padding-left: 8rem !important;
  }
  .mobile-pr-8 {
    padding-right: 8rem !important;
  }
  .mobile-w-8 {
    max-width: calc(8 * 10%);
  }
  .mobile-h-8 {
    max-height: calc(8 * 10%);
  }
  .mobile-f-9 {
    flex: 9;
  }
  .mobile-gap-9 {
    gap: 9rem !important;
  }
  .mobile-m-9 {
    margin: 9rem !important;
  }
  .mobile-my-9 {
    margin-top: 9rem !important;
    margin-bottom: 9rem !important;
  }
  .mobile-mt-9 {
    margin-top: 9rem !important;
  }
  .mobile-mb-9 {
    margin-bottom: 9rem !important;
  }
  .mobile-mx-9 {
    margin-left: 9rem !important;
    margin-right: 9rem !important;
  }
  .mobile-ml-9 {
    margin-left: 9rem !important;
  }
  .mobile-mr-9 {
    margin-right: 9rem !important;
  }
  .mobile-p-9 {
    padding: 9rem !important;
  }
  .mobile-py-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
  }
  .mobile-pt-9 {
    padding-top: 9rem !important;
  }
  .mobile-pb-9 {
    padding-bottom: 9rem !important;
  }
  .mobile-px-9 {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
  }
  .mobile-pl-9 {
    padding-left: 9rem !important;
  }
  .mobile-pr-9 {
    padding-right: 9rem !important;
  }
  .mobile-w-9 {
    max-width: calc(9 * 10%);
  }
  .mobile-h-9 {
    max-height: calc(9 * 10%);
  }
  .mobile-f-10 {
    flex: 10;
  }
  .mobile-gap-10 {
    gap: 10rem !important;
  }
  .mobile-m-10 {
    margin: 10rem !important;
  }
  .mobile-my-10 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
  }
  .mobile-mt-10 {
    margin-top: 10rem !important;
  }
  .mobile-mb-10 {
    margin-bottom: 10rem !important;
  }
  .mobile-mx-10 {
    margin-left: 10rem !important;
    margin-right: 10rem !important;
  }
  .mobile-ml-10 {
    margin-left: 10rem !important;
  }
  .mobile-mr-10 {
    margin-right: 10rem !important;
  }
  .mobile-p-10 {
    padding: 10rem !important;
  }
  .mobile-py-10 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }
  .mobile-pt-10 {
    padding-top: 10rem !important;
  }
  .mobile-pb-10 {
    padding-bottom: 10rem !important;
  }
  .mobile-px-10 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }
  .mobile-pl-10 {
    padding-left: 10rem !important;
  }
  .mobile-pr-10 {
    padding-right: 10rem !important;
  }
  .mobile-w-10 {
    max-width: calc(10 * 10%);
  }
  .mobile-h-10 {
    max-height: calc(10 * 10%);
  }
  .mobile-f-11 {
    flex: 11;
  }
  .mobile-gap-11 {
    gap: 11rem !important;
  }
  .mobile-m-11 {
    margin: 11rem !important;
  }
  .mobile-my-11 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important;
  }
  .mobile-mt-11 {
    margin-top: 11rem !important;
  }
  .mobile-mb-11 {
    margin-bottom: 11rem !important;
  }
  .mobile-mx-11 {
    margin-left: 11rem !important;
    margin-right: 11rem !important;
  }
  .mobile-ml-11 {
    margin-left: 11rem !important;
  }
  .mobile-mr-11 {
    margin-right: 11rem !important;
  }
  .mobile-p-11 {
    padding: 11rem !important;
  }
  .mobile-py-11 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important;
  }
  .mobile-pt-11 {
    padding-top: 11rem !important;
  }
  .mobile-pb-11 {
    padding-bottom: 11rem !important;
  }
  .mobile-px-11 {
    padding-left: 11rem !important;
    padding-right: 11rem !important;
  }
  .mobile-pl-11 {
    padding-left: 11rem !important;
  }
  .mobile-pr-11 {
    padding-right: 11rem !important;
  }
  .mobile-w-11 {
    max-width: calc(11 * 10%);
  }
  .mobile-h-11 {
    max-height: calc(11 * 10%);
  }
  .mobile-f-12 {
    flex: 12;
  }
  .mobile-gap-12 {
    gap: 12rem !important;
  }
  .mobile-m-12 {
    margin: 12rem !important;
  }
  .mobile-my-12 {
    margin-top: 12rem !important;
    margin-bottom: 12rem !important;
  }
  .mobile-mt-12 {
    margin-top: 12rem !important;
  }
  .mobile-mb-12 {
    margin-bottom: 12rem !important;
  }
  .mobile-mx-12 {
    margin-left: 12rem !important;
    margin-right: 12rem !important;
  }
  .mobile-ml-12 {
    margin-left: 12rem !important;
  }
  .mobile-mr-12 {
    margin-right: 12rem !important;
  }
  .mobile-p-12 {
    padding: 12rem !important;
  }
  .mobile-py-12 {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
  }
  .mobile-pt-12 {
    padding-top: 12rem !important;
  }
  .mobile-pb-12 {
    padding-bottom: 12rem !important;
  }
  .mobile-px-12 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }
  .mobile-pl-12 {
    padding-left: 12rem !important;
  }
  .mobile-pr-12 {
    padding-right: 12rem !important;
  }
  .mobile-w-12 {
    max-width: calc(12 * 10%);
  }
  .mobile-h-12 {
    max-height: calc(12 * 10%);
  }
  .mobile-f-13 {
    flex: 13;
  }
  .mobile-gap-13 {
    gap: 13rem !important;
  }
  .mobile-m-13 {
    margin: 13rem !important;
  }
  .mobile-my-13 {
    margin-top: 13rem !important;
    margin-bottom: 13rem !important;
  }
  .mobile-mt-13 {
    margin-top: 13rem !important;
  }
  .mobile-mb-13 {
    margin-bottom: 13rem !important;
  }
  .mobile-mx-13 {
    margin-left: 13rem !important;
    margin-right: 13rem !important;
  }
  .mobile-ml-13 {
    margin-left: 13rem !important;
  }
  .mobile-mr-13 {
    margin-right: 13rem !important;
  }
  .mobile-p-13 {
    padding: 13rem !important;
  }
  .mobile-py-13 {
    padding-top: 13rem !important;
    padding-bottom: 13rem !important;
  }
  .mobile-pt-13 {
    padding-top: 13rem !important;
  }
  .mobile-pb-13 {
    padding-bottom: 13rem !important;
  }
  .mobile-px-13 {
    padding-left: 13rem !important;
    padding-right: 13rem !important;
  }
  .mobile-pl-13 {
    padding-left: 13rem !important;
  }
  .mobile-pr-13 {
    padding-right: 13rem !important;
  }
  .mobile-w-13 {
    max-width: calc(13 * 10%);
  }
  .mobile-h-13 {
    max-height: calc(13 * 10%);
  }
  .mobile-f-14 {
    flex: 14;
  }
  .mobile-gap-14 {
    gap: 14rem !important;
  }
  .mobile-m-14 {
    margin: 14rem !important;
  }
  .mobile-my-14 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important;
  }
  .mobile-mt-14 {
    margin-top: 14rem !important;
  }
  .mobile-mb-14 {
    margin-bottom: 14rem !important;
  }
  .mobile-mx-14 {
    margin-left: 14rem !important;
    margin-right: 14rem !important;
  }
  .mobile-ml-14 {
    margin-left: 14rem !important;
  }
  .mobile-mr-14 {
    margin-right: 14rem !important;
  }
  .mobile-p-14 {
    padding: 14rem !important;
  }
  .mobile-py-14 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important;
  }
  .mobile-pt-14 {
    padding-top: 14rem !important;
  }
  .mobile-pb-14 {
    padding-bottom: 14rem !important;
  }
  .mobile-px-14 {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
  }
  .mobile-pl-14 {
    padding-left: 14rem !important;
  }
  .mobile-pr-14 {
    padding-right: 14rem !important;
  }
  .mobile-w-14 {
    max-width: calc(14 * 10%);
  }
  .mobile-h-14 {
    max-height: calc(14 * 10%);
  }
  .mobile-f-15 {
    flex: 15;
  }
  .mobile-gap-15 {
    gap: 15rem !important;
  }
  .mobile-m-15 {
    margin: 15rem !important;
  }
  .mobile-my-15 {
    margin-top: 15rem !important;
    margin-bottom: 15rem !important;
  }
  .mobile-mt-15 {
    margin-top: 15rem !important;
  }
  .mobile-mb-15 {
    margin-bottom: 15rem !important;
  }
  .mobile-mx-15 {
    margin-left: 15rem !important;
    margin-right: 15rem !important;
  }
  .mobile-ml-15 {
    margin-left: 15rem !important;
  }
  .mobile-mr-15 {
    margin-right: 15rem !important;
  }
  .mobile-p-15 {
    padding: 15rem !important;
  }
  .mobile-py-15 {
    padding-top: 15rem !important;
    padding-bottom: 15rem !important;
  }
  .mobile-pt-15 {
    padding-top: 15rem !important;
  }
  .mobile-pb-15 {
    padding-bottom: 15rem !important;
  }
  .mobile-px-15 {
    padding-left: 15rem !important;
    padding-right: 15rem !important;
  }
  .mobile-pl-15 {
    padding-left: 15rem !important;
  }
  .mobile-pr-15 {
    padding-right: 15rem !important;
  }
  .mobile-w-15 {
    max-width: calc(15 * 10%);
  }
  .mobile-h-15 {
    max-height: calc(15 * 10%);
  }
  .mobile-f-16 {
    flex: 16;
  }
  .mobile-gap-16 {
    gap: 16rem !important;
  }
  .mobile-m-16 {
    margin: 16rem !important;
  }
  .mobile-my-16 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important;
  }
  .mobile-mt-16 {
    margin-top: 16rem !important;
  }
  .mobile-mb-16 {
    margin-bottom: 16rem !important;
  }
  .mobile-mx-16 {
    margin-left: 16rem !important;
    margin-right: 16rem !important;
  }
  .mobile-ml-16 {
    margin-left: 16rem !important;
  }
  .mobile-mr-16 {
    margin-right: 16rem !important;
  }
  .mobile-p-16 {
    padding: 16rem !important;
  }
  .mobile-py-16 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important;
  }
  .mobile-pt-16 {
    padding-top: 16rem !important;
  }
  .mobile-pb-16 {
    padding-bottom: 16rem !important;
  }
  .mobile-px-16 {
    padding-left: 16rem !important;
    padding-right: 16rem !important;
  }
  .mobile-pl-16 {
    padding-left: 16rem !important;
  }
  .mobile-pr-16 {
    padding-right: 16rem !important;
  }
  .mobile-w-16 {
    max-width: calc(16 * 10%);
  }
  .mobile-h-16 {
    max-height: calc(16 * 10%);
  }
  .mobile-f-17 {
    flex: 17;
  }
  .mobile-gap-17 {
    gap: 17rem !important;
  }
  .mobile-m-17 {
    margin: 17rem !important;
  }
  .mobile-my-17 {
    margin-top: 17rem !important;
    margin-bottom: 17rem !important;
  }
  .mobile-mt-17 {
    margin-top: 17rem !important;
  }
  .mobile-mb-17 {
    margin-bottom: 17rem !important;
  }
  .mobile-mx-17 {
    margin-left: 17rem !important;
    margin-right: 17rem !important;
  }
  .mobile-ml-17 {
    margin-left: 17rem !important;
  }
  .mobile-mr-17 {
    margin-right: 17rem !important;
  }
  .mobile-p-17 {
    padding: 17rem !important;
  }
  .mobile-py-17 {
    padding-top: 17rem !important;
    padding-bottom: 17rem !important;
  }
  .mobile-pt-17 {
    padding-top: 17rem !important;
  }
  .mobile-pb-17 {
    padding-bottom: 17rem !important;
  }
  .mobile-px-17 {
    padding-left: 17rem !important;
    padding-right: 17rem !important;
  }
  .mobile-pl-17 {
    padding-left: 17rem !important;
  }
  .mobile-pr-17 {
    padding-right: 17rem !important;
  }
  .mobile-w-17 {
    max-width: calc(17 * 10%);
  }
  .mobile-h-17 {
    max-height: calc(17 * 10%);
  }
  .mobile-f-18 {
    flex: 18;
  }
  .mobile-gap-18 {
    gap: 18rem !important;
  }
  .mobile-m-18 {
    margin: 18rem !important;
  }
  .mobile-my-18 {
    margin-top: 18rem !important;
    margin-bottom: 18rem !important;
  }
  .mobile-mt-18 {
    margin-top: 18rem !important;
  }
  .mobile-mb-18 {
    margin-bottom: 18rem !important;
  }
  .mobile-mx-18 {
    margin-left: 18rem !important;
    margin-right: 18rem !important;
  }
  .mobile-ml-18 {
    margin-left: 18rem !important;
  }
  .mobile-mr-18 {
    margin-right: 18rem !important;
  }
  .mobile-p-18 {
    padding: 18rem !important;
  }
  .mobile-py-18 {
    padding-top: 18rem !important;
    padding-bottom: 18rem !important;
  }
  .mobile-pt-18 {
    padding-top: 18rem !important;
  }
  .mobile-pb-18 {
    padding-bottom: 18rem !important;
  }
  .mobile-px-18 {
    padding-left: 18rem !important;
    padding-right: 18rem !important;
  }
  .mobile-pl-18 {
    padding-left: 18rem !important;
  }
  .mobile-pr-18 {
    padding-right: 18rem !important;
  }
  .mobile-w-18 {
    max-width: calc(18 * 10%);
  }
  .mobile-h-18 {
    max-height: calc(18 * 10%);
  }
  .mobile-f-19 {
    flex: 19;
  }
  .mobile-gap-19 {
    gap: 19rem !important;
  }
  .mobile-m-19 {
    margin: 19rem !important;
  }
  .mobile-my-19 {
    margin-top: 19rem !important;
    margin-bottom: 19rem !important;
  }
  .mobile-mt-19 {
    margin-top: 19rem !important;
  }
  .mobile-mb-19 {
    margin-bottom: 19rem !important;
  }
  .mobile-mx-19 {
    margin-left: 19rem !important;
    margin-right: 19rem !important;
  }
  .mobile-ml-19 {
    margin-left: 19rem !important;
  }
  .mobile-mr-19 {
    margin-right: 19rem !important;
  }
  .mobile-p-19 {
    padding: 19rem !important;
  }
  .mobile-py-19 {
    padding-top: 19rem !important;
    padding-bottom: 19rem !important;
  }
  .mobile-pt-19 {
    padding-top: 19rem !important;
  }
  .mobile-pb-19 {
    padding-bottom: 19rem !important;
  }
  .mobile-px-19 {
    padding-left: 19rem !important;
    padding-right: 19rem !important;
  }
  .mobile-pl-19 {
    padding-left: 19rem !important;
  }
  .mobile-pr-19 {
    padding-right: 19rem !important;
  }
  .mobile-w-19 {
    max-width: calc(19 * 10%);
  }
  .mobile-h-19 {
    max-height: calc(19 * 10%);
  }
  .mobile-f-20 {
    flex: 20;
  }
  .mobile-gap-20 {
    gap: 20rem !important;
  }
  .mobile-m-20 {
    margin: 20rem !important;
  }
  .mobile-my-20 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important;
  }
  .mobile-mt-20 {
    margin-top: 20rem !important;
  }
  .mobile-mb-20 {
    margin-bottom: 20rem !important;
  }
  .mobile-mx-20 {
    margin-left: 20rem !important;
    margin-right: 20rem !important;
  }
  .mobile-ml-20 {
    margin-left: 20rem !important;
  }
  .mobile-mr-20 {
    margin-right: 20rem !important;
  }
  .mobile-p-20 {
    padding: 20rem !important;
  }
  .mobile-py-20 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important;
  }
  .mobile-pt-20 {
    padding-top: 20rem !important;
  }
  .mobile-pb-20 {
    padding-bottom: 20rem !important;
  }
  .mobile-px-20 {
    padding-left: 20rem !important;
    padding-right: 20rem !important;
  }
  .mobile-pl-20 {
    padding-left: 20rem !important;
  }
  .mobile-pr-20 {
    padding-right: 20rem !important;
  }
  .mobile-w-20 {
    max-width: calc(20 * 10%);
  }
  .mobile-h-20 {
    max-height: calc(20 * 10%);
  }
  .mobile-f-21 {
    flex: 21;
  }
  .mobile-gap-21 {
    gap: 21rem !important;
  }
  .mobile-m-21 {
    margin: 21rem !important;
  }
  .mobile-my-21 {
    margin-top: 21rem !important;
    margin-bottom: 21rem !important;
  }
  .mobile-mt-21 {
    margin-top: 21rem !important;
  }
  .mobile-mb-21 {
    margin-bottom: 21rem !important;
  }
  .mobile-mx-21 {
    margin-left: 21rem !important;
    margin-right: 21rem !important;
  }
  .mobile-ml-21 {
    margin-left: 21rem !important;
  }
  .mobile-mr-21 {
    margin-right: 21rem !important;
  }
  .mobile-p-21 {
    padding: 21rem !important;
  }
  .mobile-py-21 {
    padding-top: 21rem !important;
    padding-bottom: 21rem !important;
  }
  .mobile-pt-21 {
    padding-top: 21rem !important;
  }
  .mobile-pb-21 {
    padding-bottom: 21rem !important;
  }
  .mobile-px-21 {
    padding-left: 21rem !important;
    padding-right: 21rem !important;
  }
  .mobile-pl-21 {
    padding-left: 21rem !important;
  }
  .mobile-pr-21 {
    padding-right: 21rem !important;
  }
  .mobile-w-21 {
    max-width: calc(21 * 10%);
  }
  .mobile-h-21 {
    max-height: calc(21 * 10%);
  }
  .mobile-f-22 {
    flex: 22;
  }
  .mobile-gap-22 {
    gap: 22rem !important;
  }
  .mobile-m-22 {
    margin: 22rem !important;
  }
  .mobile-my-22 {
    margin-top: 22rem !important;
    margin-bottom: 22rem !important;
  }
  .mobile-mt-22 {
    margin-top: 22rem !important;
  }
  .mobile-mb-22 {
    margin-bottom: 22rem !important;
  }
  .mobile-mx-22 {
    margin-left: 22rem !important;
    margin-right: 22rem !important;
  }
  .mobile-ml-22 {
    margin-left: 22rem !important;
  }
  .mobile-mr-22 {
    margin-right: 22rem !important;
  }
  .mobile-p-22 {
    padding: 22rem !important;
  }
  .mobile-py-22 {
    padding-top: 22rem !important;
    padding-bottom: 22rem !important;
  }
  .mobile-pt-22 {
    padding-top: 22rem !important;
  }
  .mobile-pb-22 {
    padding-bottom: 22rem !important;
  }
  .mobile-px-22 {
    padding-left: 22rem !important;
    padding-right: 22rem !important;
  }
  .mobile-pl-22 {
    padding-left: 22rem !important;
  }
  .mobile-pr-22 {
    padding-right: 22rem !important;
  }
  .mobile-w-22 {
    max-width: calc(22 * 10%);
  }
  .mobile-h-22 {
    max-height: calc(22 * 10%);
  }
}
/*
//
//  hax for fy ;_;
//
*/
@media (max-width: 800px) {
  .mobile-ha {
    height: auto;
  }
}
.offer-box {
  row-gap: 3rem;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  padding: 3.5rem 3rem;
  display: grid;
  border-radius: 2rem;
  border: 1px solid #000000;
}

.offer-box .star,
.offer .star,
.offer-form .star {
  display: none;
  position: relative;
  height: 3rem;
  width: 3rem;
}
.offer-box .star > .iconify,
.offer .star > .iconify,
.offer-form .star > .iconify {
  position: absolute;
  font-size: 3rem;
  color: #000000;
}
.offer-box .star > .iconify:first-child,
.offer .star > .iconify:first-child,
.offer-form .star > .iconify:first-child {
  color: #f4f88f;
}
.offer-box.offer-highlighted .star,
.offer.offer-highlighted .star,
.offer-form.offer-highlighted .star {
  display: block;
}

.offer-form .star {
  display: block;
}

.offers-grid {
  width: 100%;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}
.offers-grid .offer-box {
  grid-template-columns: 10rem 1fr 15rem;
  grid-template-areas: "title title title" "logo place controls";
}
.offers-grid .offer-box .title {
  grid-area: title;
}
.offers-grid .offer-box .logo {
  grid-area: logo;
  align-self: center;
}
.offers-grid .offer-box .logo img {
  max-width: 10rem;
}
.offers-grid .offer-box .place {
  grid-area: place;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.offers-grid .offer-box .controls {
  grid-area: controls;
  align-self: end;
}
.offers-grid .offer-box .controls .more-btn {
  display: none;
}

.offers-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 2rem;
}
.offers-list .offer-box {
  grid-template-columns: 20rem 1fr 35rem;
  grid-template-areas: "logo title controls" "logo place controls";
}
.offers-list .offer-box .title {
  grid-area: title;
  flex-direction: row-reverse;
}
.offers-list .offer-box .logo {
  grid-area: logo;
  align-self: center;
  justify-self: center;
}
.offers-list .offer-box .logo img {
  max-width: 18rem;
}
.offers-list .offer-box .place {
  grid-area: place;
  display: flex;
  gap: 2rem;
}
.offers-list .offer-box .controls {
  grid-area: controls;
  align-self: center;
}

.offer {
  position: relative;
  padding: 6rem 7rem;
}
.offer .bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38rem;
}
.offer .content {
  position: relative;
  padding: 5rem 7rem;
  border-radius: 2rem;
  border: 1px solid #000000;
  background-color: #ffffff;
  display: grid;
  gap: 2rem;
  grid-template-columns: 18rem 1fr 26rem;
  grid-template-areas: "logo title controls" "icons icons controls" "details details company";
}
.offer .content .title {
  grid-area: title;
  flex-direction: row-reverse;
}
.offer .content .logo {
  grid-area: logo;
  align-self: center;
  justify-self: center;
}
.offer .content .logo img {
  max-width: 18rem;
}
.offer .content .icons {
  grid-area: icons;
  display: flex;
  gap: 2rem;
}
.offer .content .controls {
  grid-area: controls;
  padding-left: 2rem;
  border-left: 1px solid #000000;
}
.offer .content .details {
  grid-area: details;
  padding-top: 2rem;
}
.offer .content .company {
  grid-area: company;
  padding: 2rem 0 0 2rem;
}
.offer .content .company .logo {
  justify-self: flex-start;
}
.offer .content .company .logo img {
  max-width: 18rem;
}

@keyframes loading {
  100% {
    transform: translateX(100%);
  }
}
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.void {
  display: none !important;
}

/*
//
//  Base
//
*/
header,
footer {
  font-family: "Open Sans", sans-serif;
  display: grid;
  grid-template-columns: 1fr 16rem minmax(80rem, 170rem) 16rem 1fr;
  grid-template-areas: ". . content . .";
}
@media (max-width: 1620px) {
  header,
footer {
    grid-template-columns: 1fr 8rem minmax(80rem, 170rem) 8rem 1fr;
  }
}
@media (max-width: 1460px) {
  header,
footer {
    grid-template-columns: 1fr 4rem minmax(80rem, 160rem) 4rem 1fr;
  }
}
@media (max-width: 1200px) {
  header,
footer {
    grid-template-columns: 1fr 2rem minmax(0, 160rem) 2rem 1fr;
  }
}
header > div,
footer > div {
  grid-area: content;
  padding: 2rem 0;
}

@media (max-width: 800px) {
  header {
    display: none;
  }
}
header .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}
header .logo svg {
  width: 24rem;
  height: auto;
}
header .logo::after {
  content: "Portal pracy dla osób \az niepełnosprawnościami";
  font-size: 1.4rem;
  font-weight: 700;
  white-space: pre;
  line-height: 1.8em;
}
header .logo.business {
  flex-direction: column;
  position: relative;
}
header .logo.business::after {
  content: "Dla firm";
  text-transform: uppercase;
  position: absolute;
  bottom: -1.2em;
  left: 1em;
}
header .menu {
  gap: 3.5rem;
}
header .menu .link {
  font-size: 0.94em;
}
header .business-version {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
}
header .business-version::before {
  content: "dla biznesu";
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 600;
}
header.violet {
  position: relative;
}
header.violet::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: transparent linear-gradient(270deg, #644488 0%, #24034b 100%) 0% 0% no-repeat padding-box;
  left: 10rem;
  right: 10rem;
  top: -2rem;
  bottom: -3rem;
  border-radius: 5rem 5rem 0 0;
}
@media (max-width: 1620px) {
  header.violet::after {
    left: 2rem;
    right: 2rem;
  }
}
@media (max-width: 1460px) {
  header.violet::after {
    left: 0;
    right: 0;
  }
}
header.violet .logo,
header.violet .menu .link {
  color: #ffffff;
}

footer .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}
footer .logo svg {
  width: 24rem;
  height: auto;
}
footer .top {
  display: grid;
  row-gap: 4rem;
  grid-template-columns: minmax(35rem, 50rem) repeat(3, minmax(25rem, 35rem));
  grid-template-areas: "left cl cr right";
}
@media (max-width: 1200px) {
  footer .top {
    grid-template-columns: minmax(35rem, 50rem) repeat(2, minmax(25rem, 35rem));
    grid-template-areas: "left cl right" "left cr right";
  }
}
@media (max-width: 800px) {
  footer .top {
    grid-template-columns: 1fr;
    grid-template-areas: "l" "cl" "cr" "r";
    text-align: center;
  }
}
footer .top .l {
  grid-area: left;
}
footer .top .cl {
  grid-area: cl;
}
footer .top .cr {
  grid-area: cr;
}
footer .top .r {
  grid-area: right;
}

.section.headersuffix {
  position: relative;
}
.section.headersuffix::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3rem;
  bottom: 0;
  left: 10rem;
  right: 10rem;
}
@media (max-width: 1620px) {
  .section.headersuffix::after {
    left: 2rem;
    right: 2rem;
  }
}
@media (max-width: 1460px) {
  .section.headersuffix::after {
    left: 0;
    right: 0;
  }
}
.section.headersuffix.violet {
  background-color: transparent;
}
.section.headersuffix.violet::after {
  border-radius: 0 0 5rem 5rem;
  background: transparent linear-gradient(270deg, #644488 0%, #24034b 100%) 0% 0% no-repeat padding-box;
}

/*
//
//  Message modal
//
*/
.message-modal.failure-message .success-img {
  display: none;
}
.message-modal.success-message .failure-img {
  display: none;
}

/*
//
//  Modal form skeleton
//
*/
.modal-form-skeleton {
  width: 100%;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-form-skeleton::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loading 1.5s infinite ease-in;
}
@keyframes loading {
  100% {
    transform: translateX(100%);
  }
}
.modal-form-skeleton div {
  height: 3rem;
  width: 40%;
  border-radius: 0.5rem;
  background-color: #d9d9d9;
}
.modal-form-skeleton div:nth-child(2n) {
  height: 5rem;
  border-radius: 1rem;
  width: 80%;
}

/*
//
//  fadeFromLeft
//
*/
@keyframes fadeFromLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
//
//  Login
//
*/
.login {
  max-width: 52rem;
  width: 100%;
}
.login .input-group {
  position: relative;
}
.login .input-group:has(> input:focus):after {
  content: "";
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABKCAYAAABw1pB0AAAEsmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iNzQiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTIwIgogICB0aWZmOlJlc29sdXRpb25Vbml0PSIyIgogICB0aWZmOlhSZXNvbHV0aW9uPSI3Mi8xIgogICB0aWZmOllSZXNvbHV0aW9uPSI3Mi8xIgogICBleGlmOlBpeGVsWERpbWVuc2lvbj0iMTIwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyNS0w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");
  width: 120px;
  height: 74px;
  position: absolute;
  top: -3.4rem;
  right: -140px;
}
.login .input-group input {
  outline: none;
}

/*
//
//  Search bar
//
*/
.search-bar {
  display: flex;
}
.search-bar .where,
.search-bar .what {
  flex: 1;
}
.search-bar .where .selectize-input {
  padding: 0.25em 1em !important;
  min-height: 3.5em;
  border-radius: 2em 0 0 2em;
}
.search-bar .what .selectize-input {
  padding: 0.25em 1em !important;
  min-height: 3.5em;
  border-radius: 0 2em 2em 0;
  border-left: none;
}

/*
//
//  contact top boxes
//
*/
.contact-top-boxes {
  transform: translateY(-7rem);
}

/*
//
//  box miniature
//
*/
.box-miniature {
  width: 46rem;
  border-radius: 3rem;
}

/*
//
//  news grid
//
*/
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 1400px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}
.news-grid .news .img {
  min-height: 30rem;
}
.news-grid.loading .news > * {
  position: relative;
  background: none !important;
  background-color: #f5f3f3 !important;
  color: #f5f3f3;
  border-radius: 2rem;
  overflow: hidden;
}
.news-grid.loading .news > * .main {
  color: #f5f3f3;
}
.news-grid.loading .news > *::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  animation: skeleton 1.5s infinite ease;
}
@keyframes skeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/*
//
//  news
//
*/
.news .img {
  min-height: 50rem;
}

/*
//
//  user account
//
*/
.user-account .property {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.user-account .property .name {
  font-weight: 600;
}
.user-account .property .value {
  position: relative;
  padding: 0.8em;
  border-radius: 1rem;
  font-size: 1.2em;
  font-weight: 350;
  background-color: #f5f3f3;
}
.user-account .property .value.empty {
  color: #e73137;
}
.user-account .property .value.empty::before {
  content: "Nie uzupełniono";
}
.user-account .property .value.empty::after {
  content: "⚠";
  position: absolute;
  right: 2rem;
}
.user-account .work-profile-details .property .value {
  font-size: 1em;
}
.user-account .complex-property {
  display: flex;
  flex-direction: row;
  gap: 1em;
  margin: 1em 0 0;
  padding: 1em;
  border-radius: 1rem;
  background-color: #f5f3f3;
}
.user-account ol li.complex-property::before {
  position: initial;
  line-height: normal;
}
.user-account .user-photo {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  border-radius: 10rem;
  overflow: hidden;
}
.user-account .user-photo img {
  width: 100%;
  max-height: 20rem;
}
.user-account .company-logo {
  width: 100%;
  max-width: 16rem;
}
.user-account .company-logo img {
  width: 100%;
  max-height: 16rem;
}
.user-account .applications-list .logo img {
  max-width: 10rem;
}

.user-modal .photo-preview {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  border-radius: 10rem;
  overflow: hidden;
}
.user-modal .photo-preview img {
  width: 100%;
  max-height: 20rem;
}
.user-modal .logo-preview {
  width: 100%;
  max-width: 16rem;
}
.user-modal .logo-preview img {
  width: 100%;
  max-height: 16rem;
}

/*
//
//  cv generator modal
//
*/
.cv-generator-modal .cv-miniature img.cv {
  width: 100%;
  max-height: 32em;
}

/*
//
//  calculator
//
*/
.calculator .result {
  width: 100%;
}
.calculator .result td {
  padding: 0.5em;
  text-align: right;
}
.calculator .result td:first-child {
  text-align: left;
}

/*////////////////////////////////////
//////////////////////////////////////
//
//
// Selectize
//
//
//////////////////////////////////////
////////////////////////////////////*/
.selectize-control .selectize-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  width: 100%;
  font-size: 1em;
  font-family: "Open Sans", sans-serif;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5em;
  padding: 1em;
  background: #fff;
  color: #000000;
  border: 1px solid #000000;
}
.selectize-control .selectize-input:has(input:focus) {
  outline: -webkit-focus-ring-color auto 1px;
}
.selectize-control .selectize-input.focus {
  box-shadow: none;
}
.selectize-control .selectize-input.input-active {
  display: flex !important;
}
.selectize-control .selectize-input input {
  outline: none;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 0 0 2px !important;
  text-indent: 0 !important;
  border: none;
  background: transparent;
}
.selectize-control .selectize-dropdown {
  position: absolute;
  margin-top: -1px;
  padding: 0;
  font-size: 1em;
  border-radius: 0;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
.selectize-control .selectize-dropdown .selectize-dropdown-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.selectize-control .selectize-dropdown .selectize-dropdown-content .option {
  cursor: pointer;
  line-height: 1.5em;
  padding: 0.5em 0.6em;
  min-height: 2.5em;
}
.selectize-control .selectize-dropdown .selectize-dropdown-content .option:focus, .selectize-control .selectize-dropdown .selectize-dropdown-content .option:hover, .selectize-control .selectize-dropdown .selectize-dropdown-content .option.active {
  color: #000000;
  font-weight: bold;
  background-color: #d5f1d9;
  border-radius: 0.35em;
}
.selectize-control .selectize-dropdown .selectize-dropdown-content .optgroup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.selectize-control .selectize-dropdown .selectize-dropdown-content .optgroup .optgroup-header {
  color: #656565;
}
.selectize-control .selectize-dropdown [data-selectable] .highlight {
  background-color: #f4f88f;
  border-radius: 1px;
}
.selectize-control.multi .selectize-input > div {
  margin: 0;
  padding: 0.5em 0.5em 0.5em 1em;
  padding-right: 3em !important;
  color: #000000;
  background-color: #d5f1d9;
  border-radius: 0.35em;
  line-height: 2em;
}
.selectize-control.multi .selectize-input > div.active {
  background-color: #dbf5ff;
}
.selectize-control.multi .selectize-input.has-items {
  padding: 0.5em;
}
.selectize-control.plugin-remove_button [data-value] .remove, .selectize-control.plugin-remove_button [data-value].active .remove {
  width: 2em;
  padding: 0;
  font-size: 1.4em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
}
/**
 * selectize.css (v0.12.6)
 * Copyright (c) 2013–2015 Brian Reavis & contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 * @author Brian Reavis <brian@thirdroute.com>
 */

.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  -webkit-box-shadow: inset 0 0 12px 4px #fff;
  box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: '!';
  visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
  position: relative;
  padding: 5px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.selectize-dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
  color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
  position: relative;
  padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
  z-index: 1;
  /* fixes ie bug (see #392) */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 17px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 2px 0 0 0;
  border-left: 1px solid #d0d0d0;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
  border-left-color: #cacaca;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
  background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
  border-left-color: #ffffff;
}
.selectize-control.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.selectize-control {
  position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: #fff;
  cursor: text;
  display: inline-block;
}
.selectize-input {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
  padding: 6px 8px 3px;
}
.selectize-input.full {
  background-color: #fff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
  cursor: default !important;
}
.selectize-input.focus {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.selectize-input > * {
  vertical-align: baseline;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}
.selectize-control.multi .selectize-input > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
  color: #7d7d7d;
  background: #ffffff;
  border: 0 solid #ffffff;
}
.selectize-input > input {
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 2px 0 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
  display: none;
}
.selectize-input > input:focus {
  outline: none !important;
}
.selectize-input::after {
  content: ' ';
  display: block;
  clear: left;
}
.selectize-input.dropdown-active::before {
  content: ' ';
  display: block;
  position: absolute;
  background: #f0f0f0;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
}
.selectize-dropdown {
  position: absolute;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: -1px 0 0 0;
  border-top: 0 none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header {
  padding: 5px 8px;
}
.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.selectize-dropdown [data-selectable].option {
  opacity: 1;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.selectize-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.selectize-dropdown .active.create {
  color: #495c68;
}
.selectize-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  -webkit-overflow-scrolling: touch;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
  cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
  cursor: text;
}
.selectize-control.single .selectize-input:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #808080 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
  left: 15px;
  right: auto;
}
.selectize-control.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
  opacity: 0.5;
  background-color: #fafafa;
}