@charset "UTF-8";
.elementVisible-on-s {
  display: none;
}
@media only screen and (max-width: 575.98px) {
  .elementVisible-on-s {
    display: block;
  }
}

.elementHidden-on-s {
  display: block;
}
@media only screen and (max-width: 575.98px) {
  .elementHidden-on-s {
    display: none;
  }
}

.elementVisible-on-m {
  display: none;
}
@media only screen and (max-width: 767.98px) {
  .elementVisible-on-m {
    display: block;
  }
}

.elementHidden-on-m {
  display: block;
}
@media only screen and (max-width: 767.98px) {
  .elementHidden-on-m {
    display: none;
  }
}

.elementVisible-on-l {
  display: none;
}
@media only screen and (max-width: 991.98px) {
  .elementVisible-on-l {
    display: block;
  }
}

.elementHidden-on-l {
  display: block;
}
@media only screen and (max-width: 991.98px) {
  .elementHidden-on-l {
    display: none;
  }
}

@font-face {
  font-family: kidstart;
  src: url("/static/font/SiriusRegular.woff") format("woff"), url("/static/font/SiriusRegular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: kidstart;
  src: url("/static/font/alssirius-medium.woff") format("woff"), url("/static/font/alssirius-medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: kidstart;
  src: url("/static/font/SiriusBold.woff") format("woff"), url("/static/font/SiriusBold.woff2") format("woff2");
  font-weight: 700;
}
h1 {
  font-size: 32px;
  line-height: 130%;
  font-weight: 700;
}
@media only screen and (max-width: 991.98px) {
  h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 575.98px) {
  h1 {
    font-size: 28px;
  }
}

.heading-h1 {
  font-size: 32px;
  line-height: 130%;
  font-weight: 700;
}

h2 {
  font-size: 28px;
  line-height: 130%;
  font-weight: 700;
}
@media only screen and (max-width: 991.98px) {
  h2 {
    font-size: 28px;
  }
}
@media only screen and (max-width: 575.98px) {
  h2 {
    font-size: 24px;
  }
}

.heading-h2 {
  font-size: 28px;
  line-height: 130%;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  line-height: 130%;
  font-weight: 700;
}
@media only screen and (max-width: 991.98px) {
  h3 {
    font-size: 20px;
  }
}

.heading-h3 {
  font-size: 20px;
  line-height: 130%;
  font-weight: 700;
}

xl {
  font-size: 44px;
  line-height: 130%;
  font-weight: 700;
}

.heading-xl {
  font-size: 44px;
  line-height: 130%;
  font-weight: 700;
}

l {
  font-size: 32px;
  line-height: 130%;
  font-weight: 700;
}

.heading-l {
  font-size: 32px;
  line-height: 130%;
  font-weight: 700;
}
@media only screen and (max-width: 767.98px) {
  .heading-l {
    font-size: 28px;
  }
}

m {
  font-size: 28px;
  line-height: 130%;
  font-weight: 700;
}

.heading-m {
  font-size: 28px;
  line-height: 130%;
  font-weight: 700;
}

s {
  font-size: 24px;
  line-height: 130%;
  font-weight: 700;
}

.heading-s {
  font-size: 24px;
  line-height: 130%;
  font-weight: 700;
}

xs {
  font-size: 20px;
  line-height: 130%;
  font-weight: 700;
}

.heading-xs {
  font-size: 20px;
  line-height: 130%;
  font-weight: 700;
}

.body-l {
  font-size: 18px;
  line-height: 150%;
}

.ll {
  line-height: 150%;
}

.fl {
  font-weight: inherit;
}

.body-m {
  font-size: 16px;
  line-height: 150%;
}

.lm {
  line-height: 150%;
}

.fm {
  font-weight: inherit;
}

.body-s {
  font-size: 15px;
  line-height: 150%;
}

.ls {
  line-height: 150%;
}

.fs {
  font-weight: inherit;
}

.body-xs {
  font-size: 13px;
  line-height: 130%;
}

.lxs {
  line-height: 130%;
}

.fxs {
  font-weight: inherit;
}

.body-xxs {
  font-size: 12px;
  line-height: 130%;
}

.lxxs {
  line-height: 130%;
}

.fxxs {
  font-weight: inherit;
}

.body-h-5 {
  font-size: inherit;
  line-height: 150%;
}

.lh-5 {
  line-height: 150%;
}

.fh-5 {
  font-weight: inherit;
}

.body-h-4 {
  font-size: inherit;
  line-height: 140%;
}

.lh-4 {
  line-height: 140%;
}

.fh-4 {
  font-weight: inherit;
}

.body-h-3 {
  font-size: inherit;
  line-height: 130%;
}

.lh-3 {
  line-height: 130%;
}

.fh-3 {
  font-weight: inherit;
}

.body-h-2 {
  font-size: inherit;
  line-height: 120%;
}

.lh-2 {
  line-height: 120%;
}

.fh-2 {
  font-weight: inherit;
}

.body-h-1 {
  font-size: inherit;
  line-height: 110%;
}

.lh-1 {
  line-height: 110%;
}

.fh-1 {
  font-weight: inherit;
}

.body-h-0 {
  font-size: inherit;
  line-height: 100%;
}

.lh-0 {
  line-height: 100%;
}

.fh-0 {
  font-weight: inherit;
}

.body-w-8 {
  font-size: inherit;
  line-height: inherit;
}

.lw-8 {
  line-height: inherit;
}

.fw-8 {
  font-weight: 800;
}

.body-w-7 {
  font-size: inherit;
  line-height: inherit;
}

.lw-7 {
  line-height: inherit;
}

.fw-7 {
  font-weight: 700;
}

.body-w-6 {
  font-size: inherit;
  line-height: inherit;
}

.lw-6 {
  line-height: inherit;
}

.fw-6 {
  font-weight: 600;
}

.body-w-5 {
  font-size: inherit;
  line-height: inherit;
}

.lw-5 {
  line-height: inherit;
}

.fw-5 {
  font-weight: 500;
}

.body-w-4 {
  font-size: inherit;
  line-height: inherit;
}

.lw-4 {
  line-height: inherit;
}

.fw-4 {
  font-weight: 400;
}

.text-hover-primary:hover {
  color: #017c89;
}

.text-hover-secondary:hover {
  color: #222222;
}

.caps {
  text-transform: uppercase;
}

.caps-m {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.caps-s {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.caps-xs {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.text-nowrap {
  white-space: nowrap;
}

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

.text-valign {
  vertical-align: baseline;
}

.ellipsis-text {
  width: max-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-max-line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text-max-line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-columns {
  gap: 80px;
}
@media only screen and (max-width: 767.98px) {
  .text-columns {
    flex-wrap: wrap;
    gap: 24px;
  }
}

.bg-none {
  background-color: none;
}

.text-none {
  color: none;
}

.bg-white {
  background-color: white;
}

.text-white {
  color: white;
}

.bg-primary-main {
  background-color: #017c89;
}

.text-primary-main {
  color: #017c89;
}

.bg-primary {
  background-color: #222222;
}

.text-primary {
  color: #222222;
}

.bg-secondary {
  background-color: #6b6b6b;
}

.text-secondary {
  color: #6b6b6b;
}

.bg-disabled {
  background-color: rgba(0, 0, 0, 0.4);
}

.text-disabled {
  color: rgba(0, 0, 0, 0.4);
}

.bg-primary-20 {
  background-color: #013238;
}

.text-primary-20 {
  color: #013238;
}

.bg-primary-80 {
  background-color: #3cb4c2;
}

.text-primary-80 {
  color: #3cb4c2;
}

.bg-grey-90 {
  background-color: whitesmoke;
}

.text-grey-90 {
  color: whitesmoke;
}

.bg-grey-80 {
  background-color: #ebebeb;
}

.text-grey-80 {
  color: #ebebeb;
}

.bg-grey-70 {
  background-color: #dbdbdb;
}

.text-grey-70 {
  color: #dbdbdb;
}

.surface-hover-light:hover {
  background-color: whitesmoke;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

main {
  flex-grow: 1;
}

footer {
  flex-shrink: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

a,
input,
button {
  text-decoration: none;
  outline: none;
  color: inherit;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

.btn {
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  background: none;
}

.b-all {
  border-style: solid;
  border-width: 1px;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.b-superlight {
  border-color: #ebebeb;
}

.br-superlight {
  border-radius: #ebebeb;
}

.b-light {
  border-color: #dbdbdb;
}

.br-light {
  border-radius: #dbdbdb;
}

.b-dark {
  border-color: #bfbfbf;
}

.br-dark {
  border-radius: #bfbfbf;
}

.b-1 {
  border-color: 4px;
}

.br-1 {
  border-radius: 4px;
}

.b-2 {
  border-color: 8px;
}

.br-2 {
  border-radius: 8px;
}

.b-3 {
  border-color: 12px;
}

.br-3 {
  border-radius: 12px;
}

.b-4 {
  border-color: 16px;
}

.br-4 {
  border-radius: 16px;
}

.b-6 {
  border-color: 24px;
}

.br-6 {
  border-radius: 24px;
}

.b-50 {
  border-color: 50%;
}

.br-50 {
  border-radius: 50%;
}

.b-circle {
  border-color: 100px;
}

.br-circle {
  border-radius: 100px;
}

.flex-none {
  flex: none;
}

.flex {
  display: flex;
}

.flex-auto {
  flex: 1 1 0;
}

.flex-0 {
  flex: 0 0 auto;
}

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

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

.flex-wrap {
  flex-wrap: wrap;
}

@media only screen and (max-width: 575.98px) {
  .flex-wrap-breakpoint {
    flex-wrap: wrap;
  }
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

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

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

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

.grid-fit-s {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fit-s {
    gap: 20px;
  }
}

.grid-fit-m {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fit-m {
    gap: 20px;
  }
}

.grid-fit-l {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fit-l {
    gap: 20px;
  }
}

.grid-fit-xl {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fit-xl {
    gap: 20px;
  }
}

.grid-fill-s {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fill-s {
    gap: 20px;
  }
}

.grid-fill-m {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fill-m {
    gap: 20px;
  }
}

.grid-fill-l {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fill-l {
    gap: 20px;
  }
}

.grid-fill-xl {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 767.98px) {
  .grid-fill-xl {
    gap: 20px;
  }
}

.ma-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.mh-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mw-0 {
  margin-left: 0;
  margin-right: 0;
}

.pa-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.ph-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pw-0 {
  padding-left: 0;
  padding-right: 0;
}

.gap-0 {
  gap: 0;
}

.wrapper-mw-0 {
  margin: 0 auto;
}

.wrapper-mh-0 {
  margin: auto 0;
}

.wrapper-ph-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.wrapper-pw-0 {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (max-width: 991.98px) {
  .wrapper-pw-0 {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.ma-1 {
  margin: 4px;
}

.mt-1 {
  margin-top: 4px;
}

.mb-1 {
  margin-bottom: 4px;
}

.ml-1 {
  margin-left: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mh-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mw-1 {
  margin-left: 4px;
  margin-right: 4px;
}

.pa-1 {
  padding: 4px;
}

.pt-1 {
  padding-top: 4px;
}

.pb-1 {
  padding-bottom: 4px;
}

.pl-1 {
  padding-left: 4px;
}

.pr-1 {
  padding-right: 4px;
}

.ph-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pw-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.gap-1 {
  gap: 4px;
}

.wrapper-mw-1 {
  margin: 4px auto;
}

.wrapper-mh-1 {
  margin: auto 4px;
}

.wrapper-ph-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.wrapper-pw-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.ma-2 {
  margin: 8px;
}

.mt-2 {
  margin-top: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.mr-2 {
  margin-right: 8px;
}

.mh-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mw-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.pa-2 {
  padding: 8px;
}

.pt-2 {
  padding-top: 8px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pl-2 {
  padding-left: 8px;
}

.pr-2 {
  padding-right: 8px;
}

.ph-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pw-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.gap-2 {
  gap: 8px;
}

.wrapper-mw-2 {
  margin: 8px auto;
}

.wrapper-mh-2 {
  margin: auto 8px;
}

.wrapper-ph-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.wrapper-pw-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.ma-3 {
  margin: 12px;
}

.mt-3 {
  margin-top: 12px;
}

.mb-3 {
  margin-bottom: 12px;
}

.ml-3 {
  margin-left: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.mh-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mw-3 {
  margin-left: 12px;
  margin-right: 12px;
}

.pa-3 {
  padding: 12px;
}

.pt-3 {
  padding-top: 12px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pl-3 {
  padding-left: 12px;
}

.pr-3 {
  padding-right: 12px;
}

.ph-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.pw-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.gap-3 {
  gap: 12px;
}

.wrapper-mw-3 {
  margin: 12px auto;
}

.wrapper-mh-3 {
  margin: auto 12px;
}

.wrapper-ph-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.wrapper-pw-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.ma-4 {
  margin: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.ml-4 {
  margin-left: 16px;
}

.mr-4 {
  margin-right: 16px;
}

.mh-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mw-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.pa-4 {
  padding: 16px;
}

.pt-4 {
  padding-top: 16px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pl-4 {
  padding-left: 16px;
}

.pr-4 {
  padding-right: 16px;
}

.ph-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pw-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.gap-4 {
  gap: 16px;
}

.wrapper-mw-4 {
  margin: 16px auto;
}

.wrapper-mh-4 {
  margin: auto 16px;
}

.wrapper-ph-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.wrapper-pw-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.ma-5 {
  margin: 20px;
}

.mt-5 {
  margin-top: 20px;
}

.mb-5 {
  margin-bottom: 20px;
}

.ml-5 {
  margin-left: 20px;
}

.mr-5 {
  margin-right: 20px;
}

.mh-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mw-5 {
  margin-left: 20px;
  margin-right: 20px;
}

.pa-5 {
  padding: 20px;
}

.pt-5 {
  padding-top: 20px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pl-5 {
  padding-left: 20px;
}

.pr-5 {
  padding-right: 20px;
}

.ph-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pw-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.gap-5 {
  gap: 20px;
}

.wrapper-mw-5 {
  margin: 20px auto;
}

.wrapper-mh-5 {
  margin: auto 20px;
}

.wrapper-ph-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.wrapper-pw-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.ma-6 {
  margin: 24px;
}

.mt-6 {
  margin-top: 24px;
}

.mb-6 {
  margin-bottom: 24px;
}

.ml-6 {
  margin-left: 24px;
}

.mr-6 {
  margin-right: 24px;
}

.mh-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mw-6 {
  margin-left: 24px;
  margin-right: 24px;
}

.pa-6 {
  padding: 24px;
}

.pt-6 {
  padding-top: 24px;
}

.pb-6 {
  padding-bottom: 24px;
}

.pl-6 {
  padding-left: 24px;
}

.pr-6 {
  padding-right: 24px;
}

.ph-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.pw-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.gap-6 {
  gap: 24px;
}

.wrapper-mw-6 {
  margin: 24px auto;
}

.wrapper-mh-6 {
  margin: auto 24px;
}

.wrapper-ph-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.wrapper-pw-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.ma-7 {
  margin: 28px;
}

.mt-7 {
  margin-top: 28px;
}

.mb-7 {
  margin-bottom: 28px;
}

.ml-7 {
  margin-left: 28px;
}

.mr-7 {
  margin-right: 28px;
}

.mh-7 {
  margin-top: 28px;
  margin-bottom: 28px;
}

.mw-7 {
  margin-left: 28px;
  margin-right: 28px;
}

.pa-7 {
  padding: 28px;
}

.pt-7 {
  padding-top: 28px;
}

.pb-7 {
  padding-bottom: 28px;
}

.pl-7 {
  padding-left: 28px;
}

.pr-7 {
  padding-right: 28px;
}

.ph-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.pw-7 {
  padding-left: 28px;
  padding-right: 28px;
}

.gap-7 {
  gap: 28px;
}

.wrapper-mw-7 {
  margin: 28px auto;
}

.wrapper-mh-7 {
  margin: auto 28px;
}

.wrapper-ph-7 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.wrapper-pw-7 {
  padding-left: 28px;
  padding-right: 28px;
}

.ma-8 {
  margin: 32px;
}

.mt-8 {
  margin-top: 32px;
}

.mb-8 {
  margin-bottom: 32px;
}

.ml-8 {
  margin-left: 32px;
}

.mr-8 {
  margin-right: 32px;
}

.mh-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mw-8 {
  margin-left: 32px;
  margin-right: 32px;
}

.pa-8 {
  padding: 32px;
}

.pt-8 {
  padding-top: 32px;
}

.pb-8 {
  padding-bottom: 32px;
}

.pl-8 {
  padding-left: 32px;
}

.pr-8 {
  padding-right: 32px;
}

.ph-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.pw-8 {
  padding-left: 32px;
  padding-right: 32px;
}

.gap-8 {
  gap: 32px;
}

.wrapper-mw-8 {
  margin: 32px auto;
}

.wrapper-mh-8 {
  margin: auto 32px;
}

.wrapper-ph-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.wrapper-pw-8 {
  padding-left: 32px;
  padding-right: 32px;
}

.ma-9 {
  margin: 36px;
}

.mt-9 {
  margin-top: 36px;
}

.mb-9 {
  margin-bottom: 36px;
}

.ml-9 {
  margin-left: 36px;
}

.mr-9 {
  margin-right: 36px;
}

.mh-9 {
  margin-top: 36px;
  margin-bottom: 36px;
}

.mw-9 {
  margin-left: 36px;
  margin-right: 36px;
}

.pa-9 {
  padding: 36px;
}

.pt-9 {
  padding-top: 36px;
}

.pb-9 {
  padding-bottom: 36px;
}

.pl-9 {
  padding-left: 36px;
}

.pr-9 {
  padding-right: 36px;
}

.ph-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.pw-9 {
  padding-left: 36px;
  padding-right: 36px;
}

.gap-9 {
  gap: 36px;
}

.wrapper-mw-9 {
  margin: 36px auto;
}

.wrapper-mh-9 {
  margin: auto 36px;
}

.wrapper-ph-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.wrapper-pw-9 {
  padding-left: 36px;
  padding-right: 36px;
}

.ma-10 {
  margin: 40px;
}

.mt-10 {
  margin-top: 40px;
}

.mb-10 {
  margin-bottom: 40px;
}

.ml-10 {
  margin-left: 40px;
}

.mr-10 {
  margin-right: 40px;
}

.mh-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mw-10 {
  margin-left: 40px;
  margin-right: 40px;
}

.pa-10 {
  padding: 40px;
}

.pt-10 {
  padding-top: 40px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pl-10 {
  padding-left: 40px;
}

.pr-10 {
  padding-right: 40px;
}

.ph-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pw-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.gap-10 {
  gap: 40px;
}

.wrapper-mw-10 {
  margin: 40px auto;
}

.wrapper-mh-10 {
  margin: auto 40px;
}

.wrapper-ph-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.wrapper-pw-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.ma-11 {
  margin: 44px;
}

.mt-11 {
  margin-top: 44px;
}

.mb-11 {
  margin-bottom: 44px;
}

.ml-11 {
  margin-left: 44px;
}

.mr-11 {
  margin-right: 44px;
}

.mh-11 {
  margin-top: 44px;
  margin-bottom: 44px;
}

.mw-11 {
  margin-left: 44px;
  margin-right: 44px;
}

.pa-11 {
  padding: 44px;
}

.pt-11 {
  padding-top: 44px;
}

.pb-11 {
  padding-bottom: 44px;
}

.pl-11 {
  padding-left: 44px;
}

.pr-11 {
  padding-right: 44px;
}

.ph-11 {
  padding-top: 44px;
  padding-bottom: 44px;
}

.pw-11 {
  padding-left: 44px;
  padding-right: 44px;
}

.gap-11 {
  gap: 44px;
}

.wrapper-mw-11 {
  margin: 44px auto;
}

.wrapper-mh-11 {
  margin: auto 44px;
}

.wrapper-ph-11 {
  padding-top: 44px;
  padding-bottom: 44px;
}

.wrapper-pw-11 {
  padding-left: 44px;
  padding-right: 44px;
}

.ma-12 {
  margin: 48px;
}

.mt-12 {
  margin-top: 48px;
}

.mb-12 {
  margin-bottom: 48px;
}

.ml-12 {
  margin-left: 48px;
}

.mr-12 {
  margin-right: 48px;
}

.mh-12 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.mw-12 {
  margin-left: 48px;
  margin-right: 48px;
}

.pa-12 {
  padding: 48px;
}

.pt-12 {
  padding-top: 48px;
}

.pb-12 {
  padding-bottom: 48px;
}

.pl-12 {
  padding-left: 48px;
}

.pr-12 {
  padding-right: 48px;
}

.ph-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.pw-12 {
  padding-left: 48px;
  padding-right: 48px;
}

.gap-12 {
  gap: 48px;
}

.wrapper-mw-12 {
  margin: 48px auto;
}

.wrapper-mh-12 {
  margin: auto 48px;
}

.wrapper-ph-12 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.wrapper-pw-12 {
  padding-left: 48px;
  padding-right: 48px;
}

.ma-none {
  margin: 0;
}

.mt-none {
  margin-top: 0;
}

.mb-none {
  margin-bottom: 0;
}

.ml-none {
  margin-left: 0;
}

.mr-none {
  margin-right: 0;
}

.mh-none {
  margin-top: 0;
  margin-bottom: 0;
}

.mw-none {
  margin-left: 0;
  margin-right: 0;
}

.pa-none {
  padding: 0;
}

.pt-none {
  padding-top: 0;
}

.pb-none {
  padding-bottom: 0;
}

.pl-none {
  padding-left: 0;
}

.pr-none {
  padding-right: 0;
}

.ph-none {
  padding-top: 0;
  padding-bottom: 0;
}

.pw-none {
  padding-left: 0;
  padding-right: 0;
}

.gap-none {
  gap: 0;
}

.wrapper-mw-none {
  margin: 0 auto;
}

.wrapper-mh-none {
  margin: auto 0;
}

.wrapper-ph-none {
  padding-top: 0;
  padding-bottom: 0;
}

.wrapper-pw-none {
  padding-left: 0;
  padding-right: 0;
}

.ma-xs {
  margin: 16px;
}

.mt-xs {
  margin-top: 16px;
}

.mb-xs {
  margin-bottom: 16px;
}

.ml-xs {
  margin-left: 16px;
}

.mr-xs {
  margin-right: 16px;
}

.mh-xs {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mw-xs {
  margin-left: 16px;
  margin-right: 16px;
}

.pa-xs {
  padding: 16px;
}

.pt-xs {
  padding-top: 16px;
}

.pb-xs {
  padding-bottom: 16px;
}

.pl-xs {
  padding-left: 16px;
}

.pr-xs {
  padding-right: 16px;
}

.ph-xs {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pw-xs {
  padding-left: 16px;
  padding-right: 16px;
}

.gap-xs {
  gap: 16px;
}

.wrapper-mw-xs {
  margin: 16px auto;
}

.wrapper-mh-xs {
  margin: auto 16px;
}

.wrapper-ph-xs {
  padding-top: 16px;
  padding-bottom: 16px;
}

.wrapper-pw-xs {
  padding-left: 16px;
  padding-right: 16px;
}

.ma-s {
  margin: 20px;
}

.mt-s {
  margin-top: 20px;
}

.mb-s {
  margin-bottom: 20px;
}

.ml-s {
  margin-left: 20px;
}

.mr-s {
  margin-right: 20px;
}

.mh-s {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mw-s {
  margin-left: 20px;
  margin-right: 20px;
}

.pa-s {
  padding: 20px;
}

.pt-s {
  padding-top: 20px;
}

.pb-s {
  padding-bottom: 20px;
}

.pl-s {
  padding-left: 20px;
}

.pr-s {
  padding-right: 20px;
}

.ph-s {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pw-s {
  padding-left: 20px;
  padding-right: 20px;
}

.gap-s {
  gap: 20px;
}

.wrapper-mw-s {
  margin: 20px auto;
}

.wrapper-mh-s {
  margin: auto 20px;
}

.wrapper-ph-s {
  padding-top: 20px;
  padding-bottom: 20px;
}

.wrapper-pw-s {
  padding-left: 20px;
  padding-right: 20px;
}

@media only screen and (max-width: 575.98px) {
  .wrapper-pw-s {
    padding-left: 16px;
    padding-right: 16px;
  }
  .wrapper-ph-s {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.ma-m {
  margin: 48px;
}

.mt-m {
  margin-top: 48px;
}

.mb-m {
  margin-bottom: 48px;
}

.ml-m {
  margin-left: 48px;
}

.mr-m {
  margin-right: 48px;
}

.mh-m {
  margin-top: 48px;
  margin-bottom: 48px;
}

.mw-m {
  margin-left: 48px;
  margin-right: 48px;
}

.pa-m {
  padding: 48px;
}

.pt-m {
  padding-top: 48px;
}

.pb-m {
  padding-bottom: 48px;
}

.pl-m {
  padding-left: 48px;
}

.pr-m {
  padding-right: 48px;
}

.ph-m {
  padding-top: 48px;
  padding-bottom: 48px;
}

.pw-m {
  padding-left: 48px;
  padding-right: 48px;
}

.gap-m {
  gap: 48px;
}

.wrapper-mw-m {
  margin: 48px auto;
}

.wrapper-mh-m {
  margin: auto 48px;
}

.wrapper-ph-m {
  padding-top: 48px;
  padding-bottom: 48px;
}

.wrapper-pw-m {
  padding-left: 48px;
  padding-right: 48px;
}

@media only screen and (max-width: 767.98px) {
  .wrapper-pw-m {
    padding-left: 20px;
    padding-right: 20px;
  }
  .wrapper-ph-m {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.ma-l {
  margin: 64px;
}

.mt-l {
  margin-top: 64px;
}

.mb-l {
  margin-bottom: 64px;
}

.ml-l {
  margin-left: 64px;
}

.mr-l {
  margin-right: 64px;
}

.mh-l {
  margin-top: 64px;
  margin-bottom: 64px;
}

.mw-l {
  margin-left: 64px;
  margin-right: 64px;
}

.pa-l {
  padding: 64px;
}

.pt-l {
  padding-top: 64px;
}

.pb-l {
  padding-bottom: 64px;
}

.pl-l {
  padding-left: 64px;
}

.pr-l {
  padding-right: 64px;
}

.ph-l {
  padding-top: 64px;
  padding-bottom: 64px;
}

.pw-l {
  padding-left: 64px;
  padding-right: 64px;
}

.gap-l {
  gap: 64px;
}

.wrapper-mw-l {
  margin: 64px auto;
}

.wrapper-mh-l {
  margin: auto 64px;
}

.wrapper-ph-l {
  padding-top: 64px;
  padding-bottom: 64px;
}

.wrapper-pw-l {
  padding-left: 64px;
  padding-right: 64px;
}

@media only screen and (max-width: 767.98px) {
  .wrapper-pw-l {
    padding-left: 32px;
    padding-right: 32px;
  }
  .wrapper-ph-l {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.ma-xl {
  margin: 96px;
}

.mt-xl {
  margin-top: 96px;
}

.mb-xl {
  margin-bottom: 96px;
}

.ml-xl {
  margin-left: 96px;
}

.mr-xl {
  margin-right: 96px;
}

.mh-xl {
  margin-top: 96px;
  margin-bottom: 96px;
}

.mw-xl {
  margin-left: 96px;
  margin-right: 96px;
}

.pa-xl {
  padding: 96px;
}

.pt-xl {
  padding-top: 96px;
}

.pb-xl {
  padding-bottom: 96px;
}

.pl-xl {
  padding-left: 96px;
}

.pr-xl {
  padding-right: 96px;
}

.ph-xl {
  padding-top: 96px;
  padding-bottom: 96px;
}

.pw-xl {
  padding-left: 96px;
  padding-right: 96px;
}

.gap-xl {
  gap: 96px;
}

.wrapper-mw-xl {
  margin: 96px auto;
}

.wrapper-mh-xl {
  margin: auto 96px;
}

.wrapper-ph-xl {
  padding-top: 96px;
  padding-bottom: 96px;
}

.wrapper-pw-xl {
  padding-left: 96px;
  padding-right: 96px;
}

@media only screen and (max-width: 991.98px) {
  .wrapper-pw-xl {
    padding-left: 48px;
    padding-right: 48px;
  }
  .wrapper-ph-xl {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
@media only screen and (max-width: 575.98px) {
  .wrapper-pw-xl {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.ma-xxl {
  margin: 120px;
}

.mt-xxl {
  margin-top: 120px;
}

.mb-xxl {
  margin-bottom: 120px;
}

.ml-xxl {
  margin-left: 120px;
}

.mr-xxl {
  margin-right: 120px;
}

.mh-xxl {
  margin-top: 120px;
  margin-bottom: 120px;
}

.mw-xxl {
  margin-left: 120px;
  margin-right: 120px;
}

.pa-xxl {
  padding: 120px;
}

.pt-xxl {
  padding-top: 120px;
}

.pb-xxl {
  padding-bottom: 120px;
}

.pl-xxl {
  padding-left: 120px;
}

.pr-xxl {
  padding-right: 120px;
}

.ph-xxl {
  padding-top: 120px;
  padding-bottom: 120px;
}

.pw-xxl {
  padding-left: 120px;
  padding-right: 120px;
}

.gap-xxl {
  gap: 120px;
}

.wrapper-mw-xxl {
  margin: 120px auto;
}

.wrapper-mh-xxl {
  margin: auto 120px;
}

.wrapper-ph-xxl {
  padding-top: 120px;
  padding-bottom: 120px;
}

.wrapper-pw-xxl {
  padding-left: 120px;
  padding-right: 120px;
}

.w-l {
  width: 1400px;
}

.h-l {
  height: 1400px;
}

.wrapper-w-l {
  max-width: 1400px;
  width: 100%;
}

.wmax-l {
  max-width: 1400px;
}

.hmax-l {
  max-height: 1400px;
}

.wmin-l {
  min-width: 1400px;
}

.hmin-l {
  min-height: 1400px;
}

.w-m {
  width: 1240px;
}

.h-m {
  height: 1240px;
}

.wrapper-w-m {
  max-width: 1240px;
  width: 100%;
}

.wmax-m {
  max-width: 1240px;
}

.hmax-m {
  max-height: 1240px;
}

.wmin-m {
  min-width: 1240px;
}

.hmin-m {
  min-height: 1240px;
}

.w-s {
  width: 1080px;
}

.h-s {
  height: 1080px;
}

.wrapper-w-s {
  max-width: 1080px;
  width: 100%;
}

.wmax-s {
  max-width: 1080px;
}

.hmax-s {
  max-height: 1080px;
}

.wmin-s {
  min-width: 1080px;
}

.hmin-s {
  min-height: 1080px;
}

.w-viewport-10 {
  width: 10vh;
}

.h-viewport-10 {
  height: 10vh;
}

.wrapper-w-viewport-10 {
  max-width: 10vh;
  width: 100%;
}

.wmax-viewport-10 {
  max-width: 10vh;
}

.hmax-viewport-10 {
  max-height: 10vh;
}

.wmin-viewport-10 {
  min-width: 10vh;
}

.hmin-viewport-10 {
  min-height: 10vh;
}

.w-viewport-20 {
  width: 20vh;
}

.h-viewport-20 {
  height: 20vh;
}

.wrapper-w-viewport-20 {
  max-width: 20vh;
  width: 100%;
}

.wmax-viewport-20 {
  max-width: 20vh;
}

.hmax-viewport-20 {
  max-height: 20vh;
}

.wmin-viewport-20 {
  min-width: 20vh;
}

.hmin-viewport-20 {
  min-height: 20vh;
}

.w-viewport-30 {
  width: 30vh;
}

.h-viewport-30 {
  height: 30vh;
}

.wrapper-w-viewport-30 {
  max-width: 30vh;
  width: 100%;
}

.wmax-viewport-30 {
  max-width: 30vh;
}

.hmax-viewport-30 {
  max-height: 30vh;
}

.wmin-viewport-30 {
  min-width: 30vh;
}

.hmin-viewport-30 {
  min-height: 30vh;
}

.w-viewport-40 {
  width: 40vh;
}

.h-viewport-40 {
  height: 40vh;
}

.wrapper-w-viewport-40 {
  max-width: 40vh;
  width: 100%;
}

.wmax-viewport-40 {
  max-width: 40vh;
}

.hmax-viewport-40 {
  max-height: 40vh;
}

.wmin-viewport-40 {
  min-width: 40vh;
}

.hmin-viewport-40 {
  min-height: 40vh;
}

.w-viewport-50 {
  width: 50vh;
}

.h-viewport-50 {
  height: 50vh;
}

.wrapper-w-viewport-50 {
  max-width: 50vh;
  width: 100%;
}

.wmax-viewport-50 {
  max-width: 50vh;
}

.hmax-viewport-50 {
  max-height: 50vh;
}

.wmin-viewport-50 {
  min-width: 50vh;
}

.hmin-viewport-50 {
  min-height: 50vh;
}

.w-viewport-60 {
  width: 60vh;
}

.h-viewport-60 {
  height: 60vh;
}

.wrapper-w-viewport-60 {
  max-width: 60vh;
  width: 100%;
}

.wmax-viewport-60 {
  max-width: 60vh;
}

.hmax-viewport-60 {
  max-height: 60vh;
}

.wmin-viewport-60 {
  min-width: 60vh;
}

.hmin-viewport-60 {
  min-height: 60vh;
}

.w-viewport-70 {
  width: 70vh;
}

.h-viewport-70 {
  height: 70vh;
}

.wrapper-w-viewport-70 {
  max-width: 70vh;
  width: 100%;
}

.wmax-viewport-70 {
  max-width: 70vh;
}

.hmax-viewport-70 {
  max-height: 70vh;
}

.wmin-viewport-70 {
  min-width: 70vh;
}

.hmin-viewport-70 {
  min-height: 70vh;
}

.w-viewport-80 {
  width: 80vh;
}

.h-viewport-80 {
  height: 80vh;
}

.wrapper-w-viewport-80 {
  max-width: 80vh;
  width: 100%;
}

.wmax-viewport-80 {
  max-width: 80vh;
}

.hmax-viewport-80 {
  max-height: 80vh;
}

.wmin-viewport-80 {
  min-width: 80vh;
}

.hmin-viewport-80 {
  min-height: 80vh;
}

.w-viewport-90 {
  width: 90vh;
}

.h-viewport-90 {
  height: 90vh;
}

.wrapper-w-viewport-90 {
  max-width: 90vh;
  width: 100%;
}

.wmax-viewport-90 {
  max-width: 90vh;
}

.hmax-viewport-90 {
  max-height: 90vh;
}

.wmin-viewport-90 {
  min-width: 90vh;
}

.hmin-viewport-90 {
  min-height: 90vh;
}

.w-viewport-100 {
  width: 100vh;
}

.h-viewport-100 {
  height: 100vh;
}

.wrapper-w-viewport-100 {
  max-width: 100vh;
  width: 100%;
}

.wmax-viewport-100 {
  max-width: 100vh;
}

.hmax-viewport-100 {
  max-height: 100vh;
}

.wmin-viewport-100 {
  min-width: 100vh;
}

.hmin-viewport-100 {
  min-height: 100vh;
}

.w-10 {
  width: 10%;
}

.h-10 {
  height: 10%;
}

.wrapper-w-10 {
  max-width: 10%;
  width: 100%;
}

.wmax-10 {
  max-width: 10%;
}

.hmax-10 {
  max-height: 10%;
}

.wmin-10 {
  min-width: 10%;
}

.hmin-10 {
  min-height: 10%;
}

.w-20 {
  width: 20%;
}

.h-20 {
  height: 20%;
}

.wrapper-w-20 {
  max-width: 20%;
  width: 100%;
}

.wmax-20 {
  max-width: 20%;
}

.hmax-20 {
  max-height: 20%;
}

.wmin-20 {
  min-width: 20%;
}

.hmin-20 {
  min-height: 20%;
}

.w-30 {
  width: 30%;
}

.h-30 {
  height: 30%;
}

.wrapper-w-30 {
  max-width: 30%;
  width: 100%;
}

.wmax-30 {
  max-width: 30%;
}

.hmax-30 {
  max-height: 30%;
}

.wmin-30 {
  min-width: 30%;
}

.hmin-30 {
  min-height: 30%;
}

.w-40 {
  width: 40%;
}

.h-40 {
  height: 40%;
}

.wrapper-w-40 {
  max-width: 40%;
  width: 100%;
}

.wmax-40 {
  max-width: 40%;
}

.hmax-40 {
  max-height: 40%;
}

.wmin-40 {
  min-width: 40%;
}

.hmin-40 {
  min-height: 40%;
}

.w-50 {
  width: 50%;
}

.h-50 {
  height: 50%;
}

.wrapper-w-50 {
  max-width: 50%;
  width: 100%;
}

.wmax-50 {
  max-width: 50%;
}

.hmax-50 {
  max-height: 50%;
}

.wmin-50 {
  min-width: 50%;
}

.hmin-50 {
  min-height: 50%;
}

.w-60 {
  width: 60%;
}

.h-60 {
  height: 60%;
}

.wrapper-w-60 {
  max-width: 60%;
  width: 100%;
}

.wmax-60 {
  max-width: 60%;
}

.hmax-60 {
  max-height: 60%;
}

.wmin-60 {
  min-width: 60%;
}

.hmin-60 {
  min-height: 60%;
}

.w-70 {
  width: 70%;
}

.h-70 {
  height: 70%;
}

.wrapper-w-70 {
  max-width: 70%;
  width: 100%;
}

.wmax-70 {
  max-width: 70%;
}

.hmax-70 {
  max-height: 70%;
}

.wmin-70 {
  min-width: 70%;
}

.hmin-70 {
  min-height: 70%;
}

.w-80 {
  width: 80%;
}

.h-80 {
  height: 80%;
}

.wrapper-w-80 {
  max-width: 80%;
  width: 100%;
}

.wmax-80 {
  max-width: 80%;
}

.hmax-80 {
  max-height: 80%;
}

.wmin-80 {
  min-width: 80%;
}

.hmin-80 {
  min-height: 80%;
}

.w-90 {
  width: 90%;
}

.h-90 {
  height: 90%;
}

.wrapper-w-90 {
  max-width: 90%;
  width: 100%;
}

.wmax-90 {
  max-width: 90%;
}

.hmax-90 {
  max-height: 90%;
}

.wmin-90 {
  min-width: 90%;
}

.hmin-90 {
  min-height: 90%;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.wrapper-w-100 {
  max-width: 100%;
  width: 100%;
}

.wmax-100 {
  max-width: 100%;
}

.hmax-100 {
  max-height: 100%;
}

.wmin-100 {
  min-width: 100%;
}

.hmin-100 {
  min-height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

.wrapper-w-auto {
  max-width: auto;
  width: 100%;
}

.wmax-auto {
  max-width: auto;
}

.hmax-auto {
  max-height: auto;
}

.wmin-auto {
  min-width: auto;
}

.hmin-auto {
  min-height: auto;
}

.w-content {
  width: max-content;
}

.h-content {
  height: max-content;
}

.wrapper-w-content {
  max-width: max-content;
  width: 100%;
}

.wmax-content {
  max-width: max-content;
}

.hmax-content {
  max-height: max-content;
}

.wmin-content {
  min-width: max-content;
}

.hmin-content {
  min-height: max-content;
}

.w-f1 {
  width: 4px;
}

.h-f1 {
  height: 4px;
}

.wrapper-w-f1 {
  max-width: 4px;
  width: 100%;
}

.wmax-f1 {
  max-width: 4px;
}

.hmax-f1 {
  max-height: 4px;
}

.wmin-f1 {
  min-width: 4px;
}

.hmin-f1 {
  min-height: 4px;
}

.w-f2 {
  width: 8px;
}

.h-f2 {
  height: 8px;
}

.wrapper-w-f2 {
  max-width: 8px;
  width: 100%;
}

.wmax-f2 {
  max-width: 8px;
}

.hmax-f2 {
  max-height: 8px;
}

.wmin-f2 {
  min-width: 8px;
}

.hmin-f2 {
  min-height: 8px;
}

.w-f3 {
  width: 12px;
}

.h-f3 {
  height: 12px;
}

.wrapper-w-f3 {
  max-width: 12px;
  width: 100%;
}

.wmax-f3 {
  max-width: 12px;
}

.hmax-f3 {
  max-height: 12px;
}

.wmin-f3 {
  min-width: 12px;
}

.hmin-f3 {
  min-height: 12px;
}

.w-f4 {
  width: 16px;
}

.h-f4 {
  height: 16px;
}

.wrapper-w-f4 {
  max-width: 16px;
  width: 100%;
}

.wmax-f4 {
  max-width: 16px;
}

.hmax-f4 {
  max-height: 16px;
}

.wmin-f4 {
  min-width: 16px;
}

.hmin-f4 {
  min-height: 16px;
}

.w-f5 {
  width: 20px;
}

.h-f5 {
  height: 20px;
}

.wrapper-w-f5 {
  max-width: 20px;
  width: 100%;
}

.wmax-f5 {
  max-width: 20px;
}

.hmax-f5 {
  max-height: 20px;
}

.wmin-f5 {
  min-width: 20px;
}

.hmin-f5 {
  min-height: 20px;
}

.w-f6 {
  width: 24px;
}

.h-f6 {
  height: 24px;
}

.wrapper-w-f6 {
  max-width: 24px;
  width: 100%;
}

.wmax-f6 {
  max-width: 24px;
}

.hmax-f6 {
  max-height: 24px;
}

.wmin-f6 {
  min-width: 24px;
}

.hmin-f6 {
  min-height: 24px;
}

.w-f7 {
  width: 28px;
}

.h-f7 {
  height: 28px;
}

.wrapper-w-f7 {
  max-width: 28px;
  width: 100%;
}

.wmax-f7 {
  max-width: 28px;
}

.hmax-f7 {
  max-height: 28px;
}

.wmin-f7 {
  min-width: 28px;
}

.hmin-f7 {
  min-height: 28px;
}

.w-f8 {
  width: 32px;
}

.h-f8 {
  height: 32px;
}

.wrapper-w-f8 {
  max-width: 32px;
  width: 100%;
}

.wmax-f8 {
  max-width: 32px;
}

.hmax-f8 {
  max-height: 32px;
}

.wmin-f8 {
  min-width: 32px;
}

.hmin-f8 {
  min-height: 32px;
}

.w-f9 {
  width: 36px;
}

.h-f9 {
  height: 36px;
}

.wrapper-w-f9 {
  max-width: 36px;
  width: 100%;
}

.wmax-f9 {
  max-width: 36px;
}

.hmax-f9 {
  max-height: 36px;
}

.wmin-f9 {
  min-width: 36px;
}

.hmin-f9 {
  min-height: 36px;
}

.w-f10 {
  width: 40px;
}

.h-f10 {
  height: 40px;
}

.wrapper-w-f10 {
  max-width: 40px;
  width: 100%;
}

.wmax-f10 {
  max-width: 40px;
}

.hmax-f10 {
  max-height: 40px;
}

.wmin-f10 {
  min-width: 40px;
}

.hmin-f10 {
  min-height: 40px;
}

.w-f11 {
  width: 44px;
}

.h-f11 {
  height: 44px;
}

.wrapper-w-f11 {
  max-width: 44px;
  width: 100%;
}

.wmax-f11 {
  max-width: 44px;
}

.hmax-f11 {
  max-height: 44px;
}

.wmin-f11 {
  min-width: 44px;
}

.hmin-f11 {
  min-height: 44px;
}

.w-f12 {
  width: 48px;
}

.h-f12 {
  height: 48px;
}

.wrapper-w-f12 {
  max-width: 48px;
  width: 100%;
}

.wmax-f12 {
  max-width: 48px;
}

.hmax-f12 {
  max-height: 48px;
}

.wmin-f12 {
  min-width: 48px;
}

.hmin-f12 {
  min-height: 48px;
}

.w-f7x2 {
  width: 56px;
}

.h-f7x2 {
  height: 56px;
}

.wrapper-w-f7x2 {
  max-width: 56px;
  width: 100%;
}

.wmax-f7x2 {
  max-width: 56px;
}

.hmax-f7x2 {
  max-height: 56px;
}

.wmin-f7x2 {
  min-width: 56px;
}

.hmin-f7x2 {
  min-height: 56px;
}

.w-f8x2 {
  width: 64px;
}

.h-f8x2 {
  height: 64px;
}

.wrapper-w-f8x2 {
  max-width: 64px;
  width: 100%;
}

.wmax-f8x2 {
  max-width: 64px;
}

.hmax-f8x2 {
  max-height: 64px;
}

.wmin-f8x2 {
  min-width: 64px;
}

.hmin-f8x2 {
  min-height: 64px;
}

.w-f9x2 {
  width: 72px;
}

.h-f9x2 {
  height: 72px;
}

.wrapper-w-f9x2 {
  max-width: 72px;
  width: 100%;
}

.wmax-f9x2 {
  max-width: 72px;
}

.hmax-f9x2 {
  max-height: 72px;
}

.wmin-f9x2 {
  min-width: 72px;
}

.hmin-f9x2 {
  min-height: 72px;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.position-cc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.position-cc-full {
  position: absolute;
  top: 50%; /* Расположить элемент по центру по вертикали */
  left: 0; /* Выравнивание по левому краю */
  width: 100%; /* Ширина равна 100% ширины родительского контейнера */
  transform: translateY(-50%); /* Сдвиг по вертикали на 50% высоты элемента */
}

.position-bc {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
}

.position-tc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.full-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acrdn-head {
  cursor: pointer;
  user-select: none;
}

.acrdn-icon {
  background-image: url(/static/svg/plus.svg);
  transition: all 0.2s;
}

.acrdn-icon.active {
  background-image: url(/static/svg/minus.svg);
}

.button-l {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 20px;
}

.button-m {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 20px;
}

.button-s {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  padding: 0 16px;
}

.button-filled-default {
  background-color: #ebebeb;
  color: #222222;
  border-radius: 12px;
  cursor: pointer;
}
.button-filled-default :first-child {
  fill: #6b6b6b;
}
.button-filled-default :last-child {
  fill: #6b6b6b;
}

.button-filled-default:hover {
  background-color: #dbdbdb;
  color: #222222;
}
.button-filled-default:hover :first-child {
  fill: #6b6b6b;
}
.button-filled-default:hover :last-child {
  fill: #6b6b6b;
}

.button-filled-primary {
  background-color: #017c89;
  color: white;
  border-radius: 12px;
  cursor: pointer;
}
.button-filled-primary :first-child {
  fill: white;
}
.button-filled-primary :last-child {
  fill: white;
}

.button-filled-primary:hover {
  background-color: #01636e;
  color: white;
}
.button-filled-primary:hover :first-child {
  fill: white;
}
.button-filled-primary:hover :last-child {
  fill: white;
}

.button-filled-secondary {
  background-color: #6b6b6b;
  color: white;
  border-radius: 12px;
  cursor: pointer;
}
.button-filled-secondary :first-child {
  fill: white;
}
.button-filled-secondary :last-child {
  fill: white;
}

.button-filled-secondary:hover {
  background-color: #545454;
  color: white;
}
.button-filled-secondary:hover :first-child {
  fill: white;
}
.button-filled-secondary:hover :last-child {
  fill: white;
}

.button-filled-white {
  background-color: white;
  color: #01636e;
  border-radius: 12px;
  cursor: pointer;
}
.button-filled-white :first-child {
  fill: #017c89;
}
.button-filled-white :last-child {
  fill: #017c89;
}

.button-filled-white:hover {
  background-color: white;
  color: #01636e;
}
.button-filled-white:hover :first-child {
  fill: inherit;
}
.button-filled-white:hover :last-child {
  fill: inherit;
}

.button-outlined-default {
  background-color: transparent;
  color: #222222;
  border-radius: 12px;
  cursor: pointer;
  outline: 1px solid #dbdbdb;
  outline-offset: -1px;
}
.button-outlined-default :first-child {
  fill: #6b6b6b;
}
.button-outlined-default :last-child {
  fill: #6b6b6b;
}

.button-outlined-default:hover {
  background-color: whitesmoke;
  color: #222222;
  outline: 1px solid #dbdbdb;
  outline-offset: -1px;
}
.button-outlined-default:hover :first-child {
  fill: #222222;
}
.button-outlined-default:hover :last-child {
  fill: #222222;
}

.button-outlined-primary {
  background-color: transparent;
  color: #017c89;
  border-radius: 12px;
  cursor: pointer;
  outline: 1px solid #017c89;
  outline-offset: -1px;
}
.button-outlined-primary :first-child {
  fill: #017c89;
}
.button-outlined-primary :last-child {
  fill: #017c89;
}

.button-outlined-primary:hover {
  background-color: whitesmoke;
  color: #017c89;
  outline: 1px solid #017c89;
  outline-offset: -1px;
}
.button-outlined-primary:hover :first-child {
  fill: #017c89;
}
.button-outlined-primary:hover :last-child {
  fill: #017c89;
}

.button-outlined-secondary {
  background-color: transparent;
  color: #6b6b6b;
  border-radius: 12px;
  cursor: pointer;
  outline: 1px solid #6b6b6b;
  outline-offset: -1px;
}
.button-outlined-secondary :first-child {
  fill: #6b6b6b;
}
.button-outlined-secondary :last-child {
  fill: #6b6b6b;
}

.button-outlined-secondary:hover {
  background-color: whitesmoke;
  color: #222222;
  outline: 1px solid #6b6b6b;
  outline-offset: -1px;
}
.button-outlined-secondary:hover :first-child {
  fill: #222222;
}
.button-outlined-secondary:hover :last-child {
  fill: #222222;
}

.button-blank-default {
  background-color: transparent;
  color: #222222;
  border-radius: 12px;
  cursor: pointer;
}
.button-blank-default :first-child {
  fill: #222222;
}
.button-blank-default :last-child {
  fill: #222222;
}

.button-blank-default:hover {
  background-color: #ebebeb;
  color: #222222;
}
.button-blank-default:hover :first-child {
  fill: #222222;
}
.button-blank-default:hover :last-child {
  fill: #222222;
}

.button-blank-primary {
  background-color: transparent;
  color: #01636e;
  border-radius: 12px;
  cursor: pointer;
}
.button-blank-primary :first-child {
  fill: #017c89;
}
.button-blank-primary :last-child {
  fill: #017c89;
}

.button-blank-primary:hover {
  background-color: #ebebeb;
  color: #01636e;
}
.button-blank-primary:hover :first-child {
  fill: #017c89;
}
.button-blank-primary:hover :last-child {
  fill: #017c89;
}

.button-blank-secondary {
  background-color: transparent;
  color: #6b6b6b;
  border-radius: 12px;
  cursor: pointer;
}
.button-blank-secondary :first-child {
  fill: #6b6b6b;
}
.button-blank-secondary :last-child {
  fill: #6b6b6b;
}

.button-blank-secondary:hover {
  background-color: #ebebeb;
  color: #222222;
}
.button-blank-secondary:hover :first-child {
  fill: #222222;
}
.button-blank-secondary:hover :last-child {
  fill: #222222;
}

.chip-inactive {
  border-radius: 40px;
  padding: 0 20px 1px;
  background-color: white;
  outline: 1px solid #c4c4c4;
  outline-offset: -1px;
}

.chip-active {
  border-radius: 40px;
  padding: 0 20px 1px;
  background-color: #017c89;
  color: white;
}

.chip-inactive:hover {
  background-color: #017c89;
  color: white;
  outline: none;
}

.chip:disabled {
  color: #6b6b6b;
  background-color: none;
}

.chip-filled {
  background-color: #111111;
  border: none;
}

.gallery-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 8px 4px;
}
.gallery-slider-dot.active-slider-dot {
  background-color: white;
}

.gallery-feed {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}

.gallery-feed-container {
  width: calc(50% - 15px);
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
}

.gallery-feed-img {
  min-width: 100%;
  padding-top: 100%;
  position: relative;
}
.gallery-feed-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-feed-resizing-img:nth-child(3n+1) {
  width: 100%;
  overflow: hidden;
  height: auto;
}

.gallery-feed-resizing-img {
  width: 50%;
  overflow: hidden;
  height: auto;
}

.gallery-feed-resizing-img img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 767.98px) {
  .gallery-feed-resizing-img {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
  }
}

.header-desktop {
  display: block;
}
@media only screen and (max-width: 575.98px) {
  .header-desktop {
    display: none;
  }
}

.header-mobile {
  display: none;
}
@media only screen and (max-width: 575.98px) {
  .header-mobile {
    display: flex;
  }
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-none {
  display: none;
}

@keyframes header-hide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes header-show {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.tab-active {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: #017c89;
}

.tab-inactive {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: #222222;
}

.tab-inactive:hover {
  color: #017c89;
}

.tab-size-s {
  font-size: 15px;
  font-weight: 500;
}

.tab-size-m {
  font-size: 16px;
}

.product-card {
  border: solid 1px #dbdbdb;
}

.product-card:hover {
  border: solid 1px #909090;
}

.product-size {
  gap: 32px;
}
@media only screen and (max-width: 360px) {
  .product-size {
    gap: 16px;
  }
}

@media only screen and (max-width: 991.98px) {
  .breadcrumbs-product {
    display: none;
  }
}

.buttonIcon-square {
  border-radius: 12px;
}

.buttonIcon-circle {
  border-radius: 100px;
}

.buttonIcon-m {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.buttonIcon-s {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.buttonIcon-filled-default {
  background-color: #ebebeb;
}
.buttonIcon-filled-default :first-child {
  fill: #6b6b6b;
}

.buttonIcon-filled-default:hover {
  background-color: #dbdbdb;
}
.buttonIcon-filled-default:hover :first-child {
  fill: #222222;
}

.buttonIcon-filled-primary {
  background-color: #017c89;
}
.buttonIcon-filled-primary :first-child {
  fill: white;
}

.buttonIcon-filled-primary:hover {
  background-color: #01636e;
}
.buttonIcon-filled-primary:hover :first-child {
  fill: white;
}

.buttonIcon-filled-secondary {
  background-color: #6b6b6b;
}
.buttonIcon-filled-secondary :first-child {
  fill: white;
}

.buttonIcon-filled-secondary:hover {
  background-color: #545454;
}
.buttonIcon-filled-secondary:hover :first-child {
  fill: white;
}

.buttonIcon-outlined-default {
  background-color: transparent;
  outline: 1px solid #dbdbdb;
  outline-offset: -1px;
}
.buttonIcon-outlined-default :first-child {
  fill: #6b6b6b;
}

.buttonIcon-outlined-default:hover {
  background-color: whitesmoke;
  outline: 1px solid #dbdbdb;
  outline-offset: -1px;
}
.buttonIcon-outlined-default:hover :first-child {
  fill: #222222;
}

.buttonIcon-outlined-primary {
  background-color: transparent;
  outline: 1px solid #017c89;
  outline-offset: -1px;
}
.buttonIcon-outlined-primary :first-child {
  fill: #017c89;
}

.buttonIcon-outlined-primary:hover {
  background-color: #017c89;
  outline: 1px solid #017c89;
  outline-offset: -1px;
}
.buttonIcon-outlined-primary:hover :first-child {
  fill: white;
}

.buttonIcon-outlined-secondary {
  background-color: transparent;
  outline: 1px solid #6b6b6b;
  outline-offset: -1px;
}
.buttonIcon-outlined-secondary :first-child {
  fill: #6b6b6b;
}

.buttonIcon-outlined-secondary:hover {
  background-color: #6b6b6b;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.buttonIcon-outlined-secondary:hover :first-child {
  fill: white;
}

.buttonIcon-blank-default {
  background-color: transparent;
}
.buttonIcon-blank-default :first-child {
  fill: #222222;
}

.buttonIcon-blank-default:hover {
  background-color: #ebebeb;
}
.buttonIcon-blank-default:hover :first-child {
  fill: #222222;
}

.buttonIcon-blank-primary {
  background-color: transparent;
}
.buttonIcon-blank-primary :first-child {
  fill: #017c89;
}

.buttonIcon-blank-primary:hover {
  background-color: #ebebeb;
}
.buttonIcon-blank-primary:hover :first-child {
  fill: #017c89;
}

.buttonIcon-blank-secondary {
  background-color: transparent;
}
.buttonIcon-blank-secondary :first-child {
  fill: #6b6b6b;
}

.buttonIcon-blank-secondary:hover {
  background-color: #ebebeb;
}
.buttonIcon-blank-secondary:hover :first-child {
  fill: #222222;
}

.list-item-l {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 56px;
  font-size: 18px;
}

.list-item-m {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 44px;
  font-size: 16px;
}

.list-item-s {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  height: 36px;
  font-size: 13px;
}

.scroll-horizon-box {
  position: relative;
  display: flex;
  width: 100%;
}

.scroll-horizon {
  display: flex;
  max-height: max-content;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0 20px;
}

@media only screen and (max-width: 575.98px) {
  .animate {
    animation: slideIn 0.6s ease-in-out 1s forwards;
  }
}

.scroll-horizon > * {
  /* scroll-snap-align: start; */
  scroll-snap-stop: always;
}

/* Hide scrollbar */
.scroll-horizon::-webkit-scrollbar {
  display: none;
}

@keyframes slideIn {
  from {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  to {
    transform: translateX(0);
  }
}
.price-label {
  background-color: #017c89;
  padding: 1px 8px 2px;
}

.page-head_banner-description {
  max-width: 50%;
}
@media only screen and (max-width: 767.98px) {
  .page-head_banner-description {
    max-width: 100%;
  }
}

.popup-fixed {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
}
.popup-fixed.active {
  pointer-events: all;
}

.popup-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  opacity: 0;
  transition: 0.5s;
  z-index: -5;
}
.popup-overlay.active {
  opacity: 40%;
}

.popup-fixed-secondclass {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
}
.popup-fixed-secondclass.active {
  pointer-events: all;
}

.popup-overlay-secondclass {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  opacity: 0;
  transition: 0.5s;
  z-index: -5;
}
.popup-overlay-secondclass.active {
  opacity: 40%;
}

.popup-move-right {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
  background-color: white;
  transition: 0.15s;
  transition-timing-function: ease-in;
  z-index: 100;
  float: left;
  transform: translateX(-100%);
}
.popup-move-right.active {
  transform: translateX(0%);
  transition-timing-function: ease-out;
  transition: 0.25s;
}

.popup-move-left {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
  background-color: white;
  transition: 0.15s;
  transition-timing-function: ease-in;
  z-index: 100;
  float: right;
  transform: translateX(100%);
}
.popup-move-left.active {
  transform: translateX(0%);
  transition-timing-function: ease-out;
  transition: 0.25s;
}

.footer-left_col {
  column-gap: 64px;
}
@media only screen and (max-width: 575.98px) {
  .footer-left_col {
    flex-direction: column;
    column-gap: 48px;
  }
}

.footer-right_col {
  width: 300px;
  height: auto;
}
@media only screen and (max-width: 991.98px) {
  .footer-right_col {
    display: none;
  }
}

.img-default {
  width: 100%;
  height: auto;
  overflow: hidden;
  user-select: none;
}

.img-background {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: absolute;
}

.img-default img,
.img-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-background-overlay {
  position: absolute;
  background-color: black;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  opacity: 0.2;
}

.landing-block {
  gap: 96px;
}
@media only screen and (max-width: 767.98px) {
  .landing-block {
    flex-wrap: wrap;
    gap: 48px;
  }
}

.landing-block-text {
  flex: 1.5 1 0;
}
@media only screen and (max-width: 767.98px) {
  .landing-block-text {
    flex: 1.5 1 auto;
  }
}

.landing-block-img {
  flex: 1 1 0;
  max-width: 400px;
}
@media only screen and (max-width: 767.98px) {
  .landing-block-img {
    flex: 1 1 auto;
  }
}

.card-feedback {
  display: flex;
  flex: 0 0 auto;
  width: 340px;
  padding: 0 16px;
}

.card-feedback-gallery {
  height: 240px;
  overflow: hidden;
}

.card-feedback p {
  width: 100%;
}

.feedback-gallery {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.feedback-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-l {
  width: 56px;
  height: 56px;
}
.avatar-l img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-m {
  width: 44px;
  height: 44px;
}
.avatar-m img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-s {
  width: 36px;
  height: 36px;
}
.avatar-s img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-square {
  border-radius: 8px;
  overflow: hidden;
}

.avatar-circle {
  border-radius: 50%;
  overflow: hidden;
}

#actionSticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 56px;
  z-index: 10;
  background-color: white;
  transform: translateY(-100%);
  transition: all 0.1s ease-out;
}
#actionSticky.actionSticky-hidden {
  transform: translateY(0);
}

.grid-product-detail {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 1fr;
  gap: 80px;
  flex-wrap: wrap;
  grid-template-areas: "gallery about_product";
}
.grid-product-detail :first-child {
  grid-area: gallery;
}
.grid-product-detail :last-child {
  grid-area: about_product;
}
@media only screen and (max-width: 991.98px) {
  .grid-product-detail {
    gap: 32px;
  }
}
@media only screen and (max-width: 767.98px) {
  .grid-product-detail {
    grid-template-columns: 1fr;
    grid-template-areas: "gallery" "about_product";
  }
}

.grid-product-detail-about {
  padding: 24px 0;
}
@media only screen and (max-width: 991.98px) {
  .grid-product-detail-about {
    padding: 32px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .grid-product-detail-about {
    padding: 8px 0;
  }
}

.detailPage-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 320px);
  gap: 56px;
  flex-wrap: wrap;
  grid-template-areas: "text right-panel";
}
@media only screen and (max-width: 991.98px) {
  .detailPage-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "text";
  }
}

.detailPage-leftCol {
  grid-area: text;
}

.detailPage-rightCol {
  grid-area: right-panel;
}
@media only screen and (max-width: 991.98px) {
  .detailPage-rightCol {
    display: none;
  }
}

.hp-section :first-child {
  max-width: 280px;
}
@media only screen and (max-width: 991.98px) {
  .hp-section :first-child {
    max-width: none;
  }
}
@media only screen and (max-width: 991.98px) {
  .hp-section {
    flex-wrap: wrap;
  }
}

.hp-grid-cards {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 32px;
}
@media only screen and (max-width: 991.98px) {
  .hp-grid-cards {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

.studio-title {
  max-width: 800px;
}

.studio-header {
  background-color: #01636e;
  height: 100vh;
}

.studio-feedback-carousel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes moveUpDown {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.about-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 48px;
}
@media only screen and (max-width: 991.98px) {
  .about-grid {
    column-gap: 48px;
    row-gap: 24px;
  }
}

.error-img {
  max-width: 280px;
  height: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 150%;
  font-size: 16px;
  font-weight: 400;
  font-family: "kidstart", sans-serif;
  color: #222222;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer {
  flex-shrink: 0;
}

.hidden {
  opacity: 0;
  height: 0;
  width: 0;
  line-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
}

.clip-content {
  overflow: hidden;
}

.none-select {
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

.hide-outside {
  user-select: none;
}

.z--100 {
  z-index: -100;
}

.z-1 {
  z-index: 1;
}

.rub {
  font-size: inherit;
}

/*# sourceMappingURL=global.css.map */