@charset "UTF-8";
:root {
  --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05),0 3.5px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014),0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038),0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085),0 30px 42px -1px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012),0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035),0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07),0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117),0 46px 60px -6px rgba(0, 0, 0, 0.2);
  --margin-bottom: 100px;
  --padding-right: 80px;
  --padding-left: 80px;
  --top-height: 96px;
  --yellow-300: var(--wp--preset--color--yellow-300);
  --orange-600: var(--wp--preset--color--orange-600);
  --orange-800: var(--wp--preset--color--orange-800);
  --red-700: var(--wp--preset--color--red-700);
  --red-800: var(--wp--preset--color--red-800);
  --green-600: var(--wp--preset--color--green-600);
  --green-800: var(--wp--preset--color--green-800);
  --teal-600: var(--wp--preset--color--teal-600);
  --teal-800: var(--wp--preset--color--teal-800);
  --blue-100: var(--wp--preset--color--blue-100);
  --blue-500: var(--wp--preset--color--blue-500);
  --blue-600: var(--wp--preset--color--blue-600);
  --blue-800: var(--wp--preset--color--blue-800);
  --indigo-600: var(--wp--preset--color--indigo-600);
  --indigo-800: var(--wp--preset--color--indigo-800);
}
@media (max-width: 1480px) {
  :root {
    --padding-right: 64px;
    --padding-left: 64px;
  }
}
@media (max-width: 1280px) {
  :root {
    --margin-bottom: 88px;
    --padding-right: 48px;
    --padding-left: 48px;
  }
}
@media (max-width: 1024px) {
  :root {
    --margin-bottom: 72px;
    --top-height: 80px;
  }
}
@media (max-width: 768px) {
  :root {
    --margin-bottom: 64px;
    --padding-right: 24px;
    --padding-left: 24px;
    --top-height: 64px;
  }
}

/*===================================
=            Reset style            =
===================================*/
* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
      text-size-adjust: none;
}

body {
  min-height: 100vh;
  font-size: 16px;
  position: relative;
  font-family: "GeneralSans", Arial, Helvetica, sans-serif;
  color: #f06000;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border-style: none;
  padding: 0;
  border: 0;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

a,
ins,
del {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption,
th {
  text-align: left;
}

q:after,
q:before {
  content: "";
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

:focus {
  outline: 0;
}

blockquote,
q {
  quotes: "" "";
}

.clear {
  clear: both;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "GeneralSans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

/* Anchors */
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}
a:not([class]):hover {
  text-decoration: underline;
}

:root :where(a:where(:not(.wp-element-button))) {
  text-decoration: none;
}

strong,
b {
  font-weight: bold;
}

em,
i {
  font-style: italic;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* Lists */
ul {
  list-style: outside disc;
}

ol {
  list-style: outside decimal;
}

/* Quotes */
blockquote {
  font-style: italic;
}

::-moz-selection {
  background: #000;
  color: #fff;
}

::selection {
  background: #000;
  color: #fff;
}

::-moz-selection {
  background: #000;
  color: #fff;
}

::-webkit-selection {
  background: #000;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #fff;
}

::-moz-placeholder {
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}

/* For modern browsers - clearfix for floating elements */
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

/*
Box sizing - http://css-tricks.com/box-sizing/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*/
a:focus-visible,
button:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/*-----  End of Reset style  ------*/
@font-face {
  font-family: "GeneralSans";
  src: url("fonts/GeneralSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "GeneralSans";
  src: url("fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans";
  src: url("fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans";
  src: url("fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
.container,
.container-flex {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
}

.container-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@font-face {
  font-display: swap;
}
body {
  background: #1f0f3c;
  color: #f06000;
}

#wrap {
  display: block;
  position: relative;
  z-index: 100;
  padding-top: var(--top-height);
}

.svg-icon {
  display: inline-block;
  width: inherit;
  height: inherit;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: initial;
}

/*======================================
=            Wordpress core            =
======================================*/
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/*-----  End of Wordpress core  ------*/
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 30px;
}

.videoWrapper object,
.videoWrapper embed,
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wp-block-embed.is-type-video.wp-block-embed-youtube .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.wp-block-embed.is-type-video.wp-block-embed-youtube object,
.wp-block-embed.is-type-video.wp-block-embed-youtube embed,
.wp-block-embed.is-type-video.wp-block-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.top-wrapper {
  margin-top: 64px;
  padding-top: 32px;
  padding-bottom: 32px;
  border-top: 1px solid #f06000;
  border-bottom: 1px solid #f06000;
}
.top-wrapper .container-flex {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px;
}
.top-wrapper h1 {
  font-size: 40px;
  font-weight: 500;
  color: #f06000;
  line-height: 1;
  margin: 0;
}
@media (max-width: 1480px) {
  .top-wrapper h1 {
    font-size: 36px;
  }
}
@media (max-width: 1280px) {
  .top-wrapper h1 {
    font-size: 32px;
  }
}
@media (max-width: 1024px) {
  .top-wrapper h1 {
    font-size: 27px;
  }
}
@media (max-width: 768px) {
  .top-wrapper {
    margin-top: 0;
    border-top: none;
  }
}

.home-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.home-content {
  font-size: 19px;
}
@media screen and (min-width: 768px) {
  .home-content {
    font-size: calc(19px + 8 * (100vw - 768px) / 672);
  }
}
@media screen and (min-width: 1440px) {
  .home-content {
    font-size: 27px;
  }
}
.home-content {
  gap: 40px 100px;
}
.home-content .desc {
  width: 100%;
  max-width: 680px;
}
.home-content .desc > :first-child:first-child {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.home-content .desc > :last-child:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.home-content .desc > * {
  -webkit-margin-before: 32px;
          margin-block-start: 32px;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.home-content .image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 617px;
          flex: 0 0 617px;
}
@media (max-width: 1480px) {
  .home-content .image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 550px;
            flex: 0 0 550px;
  }
}
@media (max-width: 1366px) {
  .home-content .image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 500px;
            flex: 0 0 500px;
  }
}
@media (max-width: 1280px) {
  .home-content .image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 470px;
            flex: 0 0 470px;
  }
}
@media (max-width: 1024px) {
  .home-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .home-content .image {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .home-content .image img {
    max-width: 400px;
  }
}
@media (max-width: 768px) {
  .home-content .image img {
    max-width: 260px;
  }
}

.button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px 24px;
}
.button-wrap.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.button-wrap.end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
}

:root :where(.wp-element-button, .wp-block-button__link),
.wp-block-button__link,
.btn {
  --font-size: 17px;
  --font-weight: 500;
  --min-height: 64px;
  --padding: 12px 24px;
  --border-radius: 20px;
  --svg: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #f06000;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: 1.5;
  min-height: var(--min-height);
  padding: var(--padding);
  text-align: center;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-property: background-color, color, border-color;
  transition-property: background-color, color, border-color;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: var(--border-radius);
  color: #f06000;
  background: none;
  gap: 0 16px;
}
:root :where(.wp-element-button, .wp-block-button__link) svg,
.wp-block-button__link svg,
.btn svg {
  width: var(--svg);
  height: var(--svg);
  fill: currentColor;
}
:root :where(.wp-element-button, .wp-block-button__link):hover,
.wp-block-button__link:hover,
.btn:hover {
  background: #f06000;
  color: #1f0f3c;
}
@media (max-width: 1024px) {
  :root :where(.wp-element-button, .wp-block-button__link),
  .wp-block-button__link,
  .btn {
    --font-size: 15px;
    --font-weight: 500;
    --min-height: 56px;
    --padding: 12px 24px;
    --border-radius: 14px;
    --svg: 16px;
  }
}
@media (max-width: 768px) {
  :root :where(.wp-element-button, .wp-block-button__link),
  .wp-block-button__link,
  .btn {
    --font-size: 13px;
    --font-weight: 500;
    --min-height: 48px;
    --padding: 12px 20px;
    --border-radius: 12px;
    --svg: 16px;
  }
}

/* --------------------------------

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
/* icons */
.mc4-icon {
  height: var(--mc4-size, 1em);
  width: var(--mc4-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-width: initial;
}

.mc4-icon--xs {
  --mc4-size: 16px;
}

.mc4-icon--sm {
  --mc4-size: 24px;
}

/* component */
.modal {
  position: fixed;
  z-index: 1500;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 24px;
  background: rgba(31, 15, 60, 0.9);
  backdrop-filter: blur(4px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (max-width: 768px) {
  .modal {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0;
  }
}

.modal:not(.modal--is-visible) {
  pointer-events: none;
  background-color: transparent;
}

.modal--is-visible {
  opacity: 1;
  visibility: visible;
}

/* animations */
:root {
  --modal-transition-duration: 0.2s;
  /* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
  .modal--animate-fade {
    --modal-transition-duration: 0.2s;
    -webkit-transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-fade.modal--is-visible {
    -webkit-transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale,
  .modal--animate-translate-up,
  .modal--animate-translate-down,
  .modal--animate-translate-right,
  .modal--animate-translate-left {
    --modal-transition-duration: 0.2s;
    -webkit-transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-scale .modal__content,
  .modal--animate-translate-up .modal__content,
  .modal--animate-translate-down .modal__content,
  .modal--animate-translate-right .modal__content,
  .modal--animate-translate-left .modal__content {
    will-change: transform;
    transition: -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .modal--animate-scale.modal--is-visible,
  .modal--animate-translate-up.modal--is-visible,
  .modal--animate-translate-down.modal--is-visible,
  .modal--animate-translate-right.modal--is-visible,
  .modal--animate-translate-left.modal--is-visible {
    -webkit-transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale.modal--is-visible .modal__content,
  .modal--animate-translate-up.modal--is-visible .modal__content,
  .modal--animate-translate-down.modal--is-visible .modal__content,
  .modal--animate-translate-right.modal--is-visible .modal__content,
  .modal--animate-translate-left.modal--is-visible .modal__content {
    -webkit-transform: scale(1);
    transform: scale(1);
    /* reset all transformations */
  }
  .modal--animate-slide-up,
  .modal--animate-slide-down,
  .modal--animate-slide-right,
  .modal--animate-slide-left {
    --modal-transition-duration: 0.3s;
    -webkit-transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
    transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-slide-up .modal__content,
  .modal--animate-slide-down .modal__content,
  .modal--animate-slide-right .modal__content,
  .modal--animate-slide-left .modal__content {
    will-change: transform;
    transition: -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--modal-transition-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .modal--animate-slide-up.modal--is-visible,
  .modal--animate-slide-down.modal--is-visible,
  .modal--animate-slide-right.modal--is-visible,
  .modal--animate-slide-left.modal--is-visible {
    -webkit-transition: background-color var(--modal-transition-duration), visibility 0s;
    transition: background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-slide-up.modal--is-visible .modal__content,
  .modal--animate-slide-down.modal--is-visible .modal__content,
  .modal--animate-slide-right.modal--is-visible .modal__content,
  .modal--animate-slide-left.modal--is-visible .modal__content {
    -webkit-transform: scale(1);
    transform: scale(1);
    /* reset all transformations */
  }
  /* scale */
  .modal--animate-scale .modal__content {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  /* translate */
  .modal--animate-translate-up .modal__content {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  .modal--animate-translate-down .modal__content {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  .modal--animate-translate-right .modal__content {
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
  }
  .modal--animate-translate-left .modal__content {
    -webkit-transform: translateX(40px);
    transform: translateX(40px);
  }
  /* slide */
  .modal--animate-slide-up .modal__content {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  .modal--animate-slide-down .modal__content {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .modal--animate-slide-right .modal__content {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .modal--animate-slide-left .modal__content {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
/* load content - optional */
.modal--is-loading .modal__content {
  visibility: hidden;
}

.modal--is-loading .modal__loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.modal__loader {
  /* loader icon */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
  pointer-events: none;
}

/* --image */
.modal-img-btn {
  position: relative;
  cursor: pointer;
}

.modal-img-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(var(--mc4-color-black-hsl), 0);
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.modal-img-btn:hover::after {
  background-color: hsla(var(--mc4-color-black-hsl), 0.7);
}

.modal-img-btn:hover .modal-img-btn__icon-wrapper {
  opacity: 1;
}

.modal-img-btn__icon-wrapper {
  position: absolute;
  z-index: 2;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background-color: hsla(var(--mc4-color-black-hsl), 0.7);
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.modal-img-btn__icon-wrapper .mc4-icon {
  color: hsl(var(--mc4-color-white-hsl));
}

.modal__content {
  width: 100%;
  max-width: 800px;
  max-height: 100%;
  overflow: auto;
  background: #1f0f3c;
  border-radius: 16px;
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
}

.modal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #f06000;
}
.modal__header p {
  font-size: 27px;
  font-weight: 600;
  margin-bottom: 0;
}
.modal__header .modal__close-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: #f06000;
}

.modal__text-content {
  padding: 24px;
}
.modal__text-content p {
  margin-bottom: 16px;
}
.modal__text-content ul {
  list-style: circle;
  padding-left: 16px;
  margin-bottom: 24px;
}
.modal__text-content ul li:not(:last-child) {
  margin-bottom: 6px;
}