/* jsloader//css file: assets/css/module-header-first.css */
.module-header {

}

.module-header .header-container {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);

  ---grid: var(--grid, calc( 0.64 * var(---rem) ) );

  display: grid;
  grid-auto-rows: auto 1fr;
  grid-template-columns: 100%;
  min-height: 100vh;
}

.module-header.header-sub-first .header-container {
  height: auto;
  min-height: auto;
  overflow: hidden;
  position: relative;
}

.module-header .header-content {
  align-items: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding-bottom: var(---grid);
  padding-top: var(---grid);
}

.header-first .header-heading {
  color: rgb( var(---color-first) );
  font-size: calc( 0.32 * var(---rem) );
  font-weight: 700;
  background: rgb( var(---color-main) );
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: calc( 6.40 * var(---rem) );
}

.header-first .header-main {
  background: rgb( var(---color-second) );
  color: rgb( var(---color-first) );
  margin: calc( 0.06 * var(---rem) ) 0 0;
  max-width: calc( 6.40 * var(---rem) );
  padding: 2em 1em;
  text-align: center;
}

.header-first .header-img {
  filter: blur( calc( 0.05 * var(---rem) ) );
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(1.2);
  width: 100%;
  z-index: -1;
}
/* jsloader//css file: assets/css/module-top-first.css */
.module-top.top-first {
  container: top-first / inline-size;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.module-header .top-first {
  position: static;
}

.top-first .top-container {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  
  ---grid: var(--grid, calc( 0.64 * var(---rem) ) );
  ---grid-: calc( var(--grid) * -1 );

  ---margins: calc( ( 100vw - var(--container) ) / 2 );
  ---margins-: calc( var(---margins) * -1 );

  background: rgb( var(---color-first) );
  display: flex;
  width: 100%;
}

.top-first .top-main {
  align-items: center;
  display: flex;
  flex: 1;
  padding: 0.24rem var(---margins) 0.24rem 0.64rem;
}

.top-first .top-sub {
  align-items: center;
  background: rgb( var(---color-main) );
  display: flex;
  padding: 0.24rem 0.64rem 0.24rem var(---margins);
}

@container top-first (max-width: 81.75em) { /*1308px*/
  .top-first .top-main,
  .top-first .top-sub {
    padding: 0.24rem var(---grid);
  }
}

@container top-first (max-width: 45em) { /*720px*/
  .top-first .top-main,
  .top-first .top-sub {
    padding: 0.24rem var(---grid);
  }
}

@container top-first (max-width: 20em) { /*320px*/
  .top-first .top-main,
  .top-first .top-sub {
    padding: 0.24rem var(---grid);
  }
}

@container top-first (max-width: 18em) { /*288px*/
  .top-first .top-sub {
    display: none;
  }
}
/* jsloader//css file: assets/css/module-logo-first.css */
.logo-first {
  ---rem: var(--rem, 100px);
}

.logo-first .logo-link {
  display: inline-block;
  margin: calc( -0.16 * var(---rem) );  
  padding: calc( 0.16 * var(---rem) );
}
/* jsloader//css file: assets/css/module-nav-first.css */
.module-nav.nav-first {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);
  ---color-third: var(--color-third, 88, 97, 101);

  --nav-gap: calc( 0.32 * var(---rem) );
  --nav-link-spacing: calc( var(--nav-gap) / 2 );
  --nav-link-spacing-: calc( var(--nav-link-spacing) * -1 );
  align-items: center;
  background: rgb( var(---color-first) );
  container: nav-first / inline-size;
  display: flex;
  width: 100%;
}

.nav-first .nav-list,
.nav-first-modal .nav-list {
  align-items: center;
  display: inline-flex;
  flex-flow: row wrap;
  gap: var(--nav-gap);
  position: relative;
}

.nav-first .nav-item {
  display: block;
}

.nav-first .nav-link,
.nav-first-modal .nav-link {
  color: rgb( var(---color-third) );
  display: inline-block;
  margin: var(--nav-link-spacing-);
  padding: var(--nav-link-spacing);
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-first .nav-link:hover,
.nav-first .nav-link:focus,
.nav-first-modal .nav-link:hover,
.nav-first-modal .nav-link:focus {
  color: rgb( var(---color-main) );
}

.nav-first .nav-list .nav-list {
  align-items: start;
  background: rgb( var(---color-first) );
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  left: var(--nav-link-spacing-);
  opacity: 0;
  padding: var(--nav-link-spacing);
  pointer-events: none;
  position: absolute;
  right: var(--nav-link-spacing-);
  transform: translate( 0, calc( 100% + var(--nav-link-spacing) ) );
  transition: opacity 0.2s;
}

.nav-first .nav-item:focus-within .nav-list,
.nav-first .nav-item:hover .nav-list,
.nav-first .nav-link:hover + .nav-list,
.nav-first .nav-link:focus + .nav-list {
  opacity: 1; 
  pointer-events: auto;
}

.nav-first .nav-list .nav-list .nav-link {
  align-items: center;
  display: inline-flex;
  gap: 0 calc( var(--nav-gap) / 2 );
  padding: calc( var(--nav-link-spacing) / 2 );
  margin: 0 calc( var(--nav-link-spacing-) / 2 );
}

.nav-first .nav-list .nav-list .nav-link:before {
  background: rgb( var(---color-second) );
  border-radius: 100%;
  content: "";
  height: calc( 0.03 * var(---rem) );
  width: calc( 0.03 * var(---rem) );
}

.nav-first .nav-list .nav-list .nav-list {
  padding: 0 var(--nav-link-spacing);
  position: static;
  transform: unset;
}

.nav-first .nav-button {
  align-items: center;
  background: none;
  border: none;
  box-sizing: content-box;
  color: rgb( var(---color-third) );
  cursor: pointer;
  display: none;
  flex-flow: row nowrap;
  gap: calc( var(--nav-link-spacing) / 2 );
  justify-content: space-between;
  margin: var(--nav-link-spacing-) var(--nav-link-spacing-) var(--nav-link-spacing-) auto;
  padding: var(--nav-link-spacing);
  position: relative;
  text-transform: uppercase;
  transition: color 0.4s;
}

.nav-first .nav-button:before {
  background: rgb( var(---color-main) );
  content: "";
  display: block;
  height: calc( 0.02 * var(---rem) );
  position: absolute;
  right: var(--nav-link-spacing);
  top: 50%;
  transform: translate(0, -50%);
  width: calc( 0.20 * var(---rem) );
}

.nav-first .nav-button:after {
  border-bottom: calc( 0.02 * var(---rem) ) solid rgb( var(---color-main) );
  border-top: calc( 0.02 * var(---rem) ) solid rgb( var(---color-main) );
  display: block;
  content: "";
  height: calc( 0.10 * var(---rem) );
  width: calc( 0.20 * var(---rem) );
}

.nav-first .nav-checkbox,
.nav-first .nav-label  {
  display: none;
}

.module-nav.nav-first-modal {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);
  ---color-third: var(--color-third, 88, 97, 101);

  --nav-gap: calc( 0.32 * var(---rem) );
  --nav-gap-: calc( var(--nav-gap) * -1 );
  --nav-link-spacing: calc( var(--nav-gap) / 2 );
  --nav-link-spacing-: calc( var(--nav-link-spacing) * -1 );
  --nav-modal-button: calc( 0.42 * var(---rem) );
  --nav-modal-button-: calc( var(--nav-modal-button) * -1 );
  container: nav-first / inline-size;
}

.nav-first-modal .nav-list {
  align-items: start;
  display: flex;
  flex: 1 100%;
  flex-flow: column;
  gap: 0;
}

.nav-first-modal .nav-item {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
}

.nav-first-modal .nav-link {
  align-items: center;
  display: inline-flex;
  gap: 0 calc( var(--nav-gap) / 2 );
  padding: calc( var(--nav-link-spacing) / 2 );
  margin: 0;
}

.nav-first-modal .nav-checkbox,
.nav-first-modal .nav-label {
  border: none;
  cursor: pointer;
  height: var(--nav-modal-button);
  opacity: 0;
  order: -1;
  padding: 0;
  position: relative;
  width: var(--nav-modal-button);
  z-index: 1;
}

.nav-first-modal .nav-label {
  margin: 0 0 0 var(--nav-modal-button-);
  opacity: 1;
  z-index: 0;
}

.nav-first-modal .nav-label:before,
.nav-first-modal .nav-label:after {
  background: rgb( var(---color-main) );
  content: "";
  display: block;
  height: calc( 0.02 * var(---rem) );
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: calc( 0.16 * var(---rem) );
}

.nav-first-modal .nav-label:after {
  height: calc( 0.16 * var(---rem) );
  transform: translate(50%, -50%);
  width: calc( 0.02 * var(---rem) );
}

.nav-first-modal .nav-list .nav-list {
  display: none;
  padding: 0 0 0 var(--nav-modal-button);
}

.nav-first-modal .nav-checkbox:checked + .nav-label:after {
  display: none;
}

.nav-first-modal .nav-checkbox:checked + .nav-label + .nav-list {
  display: flex;
}

@container nav-first (max-width: 45em) { /*720px*/
  .nav-first .nav-list {
    display: none;
  }

  .nav-first .nav-button {
    display: flex;
  }

  .nav-first-modal .nav-list .nav-list {
    padding: 0;
  }
}
/* jsloader//css file: assets/css/module-modal.css */
.compsoul-modal-popup {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 0, 0, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);

  background: rgba( var(---color-second), 0.5 );
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.4s;
  will-change: opacity;
  z-index: 6;
}

.compsoul-modal-popup.modal-active {
  opacity: 1;
  pointer-events: auto;
}

.compsoul-modal-popup.modal-close {
  pointer-events: auto;
}

.modal-unset, .modal-unset:before, .modal-unset:after, .compsoul-modal-popup.modal-unset, .compsoul-modal-main.modal-unset {
  animation: unset !important;
  transition: none !important;
}

.compsoul-modal-popup:before {
  animation: compsoul-modal-loading 1s infinite;
  border-bottom: 0.5em solid rgba( var(---color-first), 0 );
  border-left: 0.5em solid rgba( var(---color-first), 0 );
  border-right: 0.5em solid rgba( var(---color-first), 0 );
  border-top: 0.5em solid rgba( var(---color-first), 0 );
  border-radius: 100%;
  box-sizing: content-box;
  content: "";
  font-size: calc( 0.04 * var(---rem) );
  height: 6em;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
  width: 6em;
}

.compsoul-modal-popup.modal-ready:before, .compsoul-modal-popup.modal-error:before {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes compsoul-modal-loading {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.compsoul-modal-popup:after {
  color: rgb( var(---color-first) );
  content: "\26A0";
  font-size: calc( 0.42 * var(---rem) );
  font-weight: 200;
  left: 50%;
  margin: calc( -0.06 * var(---rem) ) 0 0 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.4s;
  will-change: opacity;
}

.compsoul-modal-popup.modal-error:after {
  opacity: 1;
}

.compsoul-modal-popup .compsoul-modal-main {
  left: 50%;
  max-height: calc(2 * 40vh);
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width:calc( 8.00 * var(---rem) );
  z-index: 1;
}

.compsoul-modal-popup.modal-change .compsoul-modal-main {
  transition: transform 0.4s, opacity 0.4s;
}

.compsoul-modal-popup .compsoul-modal-main:before {
  background: rgb( var(---color-first) );
  bottom: calc( -0.32 * var(---rem) );
  box-shadow: 0 calc( 0.05 * var(---rem) ) calc( 0.26 * var(---rem) ) 0 rgba( var(---color-second), 0.22), 0 calc( 0.20 * var(---rem) ) calc( 0.28 * var(---rem) ) 0 rgba( var(---color-second), 0.30);
  content: "";
  left: calc( -0.32 * var(---rem) );
  position: absolute;
  right: calc( -0.32 * var(---rem) );
  top: calc( -0.32 * var(---rem) );
  z-index: -1;
}

.compsoul-modal-popup .compsoul-modal-content {
  background: rgb( var(---color-first) );
  line-height: 1.2;
  overflow-y: auto;
  max-height: calc(2 * 40vh);
  padding: 0 calc( 0.32 * var(---rem) ) 0 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.compsoul-modal-popup .compsoul-modal-content:after {
  content: "";
  display: table;
  clear: both;
}

.compsoul-modal-popup .compsoul-modal-footer {
  bottom: calc( 0.10 * var(---rem) );
  margin-top: 2em;
  position: sticky;
  text-align: right;
}

.compsoul-modal-popup .compsoul-modal-close {
  right: 8em;
  position: absolute;
  top: 8em;
  z-index: 2;
}

.compsoul-modal-popup .compsoul-modal-next {
  right: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-popup .compsoul-modal-prev {
  left: 8em;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 2;
}

.compsoul-modal-popup .compsoul-modal-close,
.compsoul-modal-popup .compsoul-modal-next,
.compsoul-modal-popup .compsoul-modal-prev {
  background: rgb( var(---color-second) );
  border: none;
  cursor: default;
  font-size: calc( 0.026 * var(---rem) );
  height: 16em;
  opacity: 0;
  outline: 1px solid rgba( var(---color-main), 0 );
  padding: 0;
  text-align: center;
  transition: opacity 0.4s, outline 0.4s;
  width: 16em;
}

.compsoul-modal-popup .compsoul-modal-close:focus,
.compsoul-modal-popup .compsoul-modal-close:focus-within, 
.compsoul-modal-popup .compsoul-modal-next:focus, 
.compsoul-modal-popup .compsoul-modal-next:focus-within,
.compsoul-modal-popup .compsoul-modal-prev:focus,
.compsoul-modal-popup .compsoul-modal-prev:focus-within {
  outline: 1px solid rgba( var(---color-main), 1 );
}

.compsoul-modal-popup .compsoul-modal-close,
.compsoul-modal-popup .compsoul-modal-next.modal-active,
.compsoul-modal-popup .compsoul-modal-prev.modal-active {
  cursor: pointer;
  opacity: 1;
}

.compsoul-modal-popup .compsoul-modal-close:before,
.compsoul-modal-popup .compsoul-modal-close:after,
.compsoul-modal-popup .compsoul-modal-next:before,
.compsoul-modal-popup .compsoul-modal-prev:before {
  border-top: 1em solid rgb( var(---color-first) );
  border-right: 1em solid rgb( var(---color-first) );
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 4em;
  padding: 0 0 1em 1em;
  transform: rotate(45deg) translate3d(-25%, 25%, 0);
  transition: opacity 0.4s, border 0.4s;
  width: 4em;
}

.compsoul-modal-popup .compsoul-modal-close:before,
.compsoul-modal-popup .compsoul-modal-close:after {
  height: 3em;
  width: 3em;
}

.compsoul-modal-popup .compsoul-modal-close:hover:before,
.compsoul-modal-popup .compsoul-modal-close:hover:after,
.compsoul-modal-popup .compsoul-modal-next:hover:before,
.compsoul-modal-popup .compsoul-modal-prev:hover:before {
  border-top: 1em solid rgb( var(---color-main) );
  border-right: 1em solid rgb( var(---color-main) );
}

.compsoul-modal-popup .compsoul-modal-close:after,
.compsoul-modal-popup .compsoul-modal-prev:before {
  transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}

.compsoul-modal-popup .compsoul-modal-close:before {
  transform: rotate(45deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-popup .compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(-7%, 7%, 0);
}

.compsoul-modal-popup .compsoul-modal-timer {
  height: calc( 0.03 * var(---rem) );
  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;
  width: 100%;
}

.compsoul-modal-popup .compsoul-modal-timer:before {
  animation: compsoul-slide-timeline 8s linear forwards;
  animation-play-state: paused;
  background: rgb( var(---color-main) );
  content: "";
  display: block;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
}

.compsoul-modal-popup.modal-ready .compsoul-modal-timer:before {
  animation-play-state: running;
}

.compsoul-modal-popup:hover .compsoul-modal-timer:before {
  animation-play-state: paused;
}

@keyframes compsoul-slide-timeline {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 1060px) {
  .compsoul-modal-popup .compsoul-modal-main {
    width: calc(100% - ( 0.94 * var(---rem) ));
  }

  .compsoul-modal-popup .compsoul-modal-main:before {
    bottom: calc( -0.24 * var(---rem) );
    left: calc( -0.24 * var(---rem) );
    right: calc( -0.24 * var(---rem) );
    top: calc( -0.24 * var(---rem) );
  }

  .compsoul-modal-popup.compsoul-modal-close,
  .compsoul-modal-popup .compsoul-modal-next,
  .compsoul-modal-popup .compsoul-modal-prev {
    font-size: calc( 0.02 * var(---rem) );
  }

  .compsoul-modal-popup .compsoul-modal-close {
    right: 0;
    top: 0;
  }

  .compsoul-modal-popup .compsoul-modal-next {
    right: 0;
  }

  .compsoul-modal-popup .compsoul-modal-prev {
    left: 0;
  }

}

.compsoul-modal-box {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 0, 0, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);

  background: rgb( var(---color-first) );
  bottom: calc( 0.32 * var(---rem) );
  box-shadow: 0 0 calc( 0.32 * var(---rem) ) 0 rgba( var(---color-second) , 0.2);
  left: 50%;
  max-height: calc(100% - ( 0.64 * var(---rem) ));
  max-width: calc(100% - ( 0.32 * var(---rem) ));
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 0);
  transition: opacity 0.4s;
  width: calc( 5.00 * var(---rem) );
  will-change: opacity;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.compsoul-modal-box.modal-active {
  opacity: 1;
  pointer-events: auto;
}

.compsoul-modal-box.modal-close {
  pointer-events: auto;
}

.compsoul-modal-box.modal-unset {
  animation: unset !important;
  transition: none !important;
}

.compsoul-modal-box .compsoul-modal-main {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
}

.compsoul-modal-box .compsoul-modal-content {
  height: 100%;
  overflow-y: auto;
  padding: calc( 0.32 * var(---rem) );
}

.compsoul-modal-box .compsoul-modal-close {
  --compsoul-modal-close-translate: -4%;
  --compsoul-modal-close-translate-: calc( var(--compsoul-modal-close-translate) * -1 );
  background: rgb( var(---color-second) );
  border: none;
  cursor: pointer;
  font-size: calc( 0.026 * var(---rem) );
  height: 16em;
  outline: 1px solid rgba( var(---color-main), 0 );
  padding: 0;
  right: 0;
  position: absolute;
  top: 0;
  text-align: center;
  transform: translate3d(25%, -25%, 0);
  transition: outline 0.4s;
  width: 16em;
  z-index: 3;
}

.compsoul-modal-box .compsoul-modal-close:focus,
.compsoul-modal-box .compsoul-modal-close:focus-within {
  outline: 1px solid rgba( var(---color-main), 1 );
}

.compsoul-modal-box .compsoul-modal-close:before,
.compsoul-modal-box .compsoul-modal-close:after {
  border-top: 2em solid rgb( var(---color-first) );
  border-right: 2em solid rgb( var(---color-first) );
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 1em;
  padding: 0 0 2em 2em;
  transform: rotate(45deg) translate3d(-25%, 25%, 0);
  transition: opacity 0.4s, border 0.4s;
  width: 1em;
}

.compsoul-modal-box .compsoul-modal-close:hover:before,
.compsoul-modal-box .compsoul-modal-close:hover:after {
  border-top-color: rgb( var(---color-main) );
  border-right-color: rgb( var(---color-main) );
}

.compsoul-modal-box .compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(-25%, 25%, 0);
}

.compsoul-modal-box .compsoul-modal-close:before {
  transform: rotate(45deg) translate3d(var(--compsoul-modal-close-translate-), var(--compsoul-modal-close-translate), 0);
}

.compsoul-modal-box .compsoul-modal-close:after {
  transform: rotate(-135deg) translate3d(var(--compsoul-modal-close-translate-), var(--compsoul-modal-close-translate), 0);
}

.compsoul-modal-box .compsoul-modal-timer {
  height: calc( 0.03 * var(---rem) );
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
}

.compsoul-modal-box .compsoul-modal-timer:before {
  animation: compsoul-slide-box-timeline 8s linear forwards;
  animation-play-state: paused;
  background: rgb( var(---color-main) );
  content: "";
  display: block;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
}

.compsoul-modal-box.modal-ready .compsoul-modal-timer:before {
  animation-play-state: running;
}

.compsoul-modal-box:hover .compsoul-modal-timer:before {
  animation-play-state: paused;
}

@keyframes compsoul-slide-box-timeline {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 640px) {
  .compsoul-modal-popup .compsoul-modal-main {
    width: calc(100% - ( 0.64 * var(---rem) ));
  }

  .compsoul-modal-popup .compsoul-modal-main:before {
    bottom: calc( -0.12 * var(---rem) );
    left: calc( -0.12 * var(---rem) );
    right: calc( -0.12 * var(---rem) );
    top: calc( -0.12 * var(---rem) );
  }

  .compsoul-modal-popup .compsoul-modal-footer {
    background: rgb( var(---color-first) );
    bottom: 0;
    margin-top: 2em;
    padding-top: calc( 0.12 * var(---rem) );
    text-align: center;
  }
}
/* jsloader//css file: assets/css/module-offer-first.css */
.module-offer.offer-first {
  container: offer-first / inline-size;
  position: relative;
}

.offer-first .offer-container {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);
  ---color-third: var(--color-third, 88, 97, 101);

  ---grid: var(--grid, calc( 0.64 * var(---rem) ) );
  ---grid-: calc( var(--grid) * -1 );

  display: grid;
  grid-auto-rows: auto 1fr;
  grid-template-columns: 100%;
  min-height: 100vh;
}

.offer-first .item {
  align-items: center;
  display: grid;
  grid-template-columns: 40% 40%;
  justify-content: space-between;
  margin: 0 0 var(---grid);
  position: relative;
}

.offer-first .item:before {
  background: rgb( var(---color-main) );
  bottom: var(---grid-);
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, 0);
  width: calc( 0.04 * var(---rem) );
}

.offer-first .item + .item:before {
  top: 0;
}

.offer-first .item:last-of-type:before {
  bottom: 50%;
}

.offer-first .item:after {
  background: rgb( var(---color-first) );
  border: calc( 0.04 * var(---rem) ) solid rgb( var(---color-main) );
  border-radius: 100%;
  bottom: 0;
  box-sizing: content-box;
  content: "";
  height: calc( 0.08 * var(---rem) );
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, 0);
  width: calc( 0.08 * var(---rem) );
}

.offer-first .item-content {
  grid-column: 1;
}

.offer-first .item:nth-child(odd) .item-content {
  grid-column: 2;
}

.offer-first .item-figure {
  grid-column: 2;
  grid-row: 1;
}

.offer-first .item:nth-child(odd) .item-figure {
  grid-column: 1;
}

.offer-first .item-img {
  display: block;
  max-width: 100%;
}

.offer-first .item-more {
  display: inline-block;
  margin: var(---grid) 0 0;
}

.offer-first .item-nextpage {
  border: 1px solid rgba( var(---color-main), 0 );
  color: rgb( var(---color-third) );
  display: inline-flex;
  font-size: calc( 0.32 * var(---rem) );
  font-weight: bold;
  left: 50%;
  margin: var(---grid) 0;
  padding: 0.5em;
  position: relative;
  text-decoration: none;
  transform: translate(-50%, 0);
  transition: border 0.2s;
}

.offer-first.compsoul-loading .item-nextpage:before {
  content: "\e979";
  animation: offer-first-compsoul-loading 5s infinite;
}

@keyframes offer-first-compsoul-loading {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.offer-first .item-nextpage:before {
  content: "\ea3c";
}

.offer-first .item-nextpage:hover,
.offer-first .item-nextpage:focus {
  border: 1px solid rgba( var(---color-main), 1 );
}

@container offer-first (max-width: 40em) { /*640px*/
  .offer-first .item {
    display: flex;
    flex-flow: column;
    margin: 0 0 calc( 0.48 * var(---rem) );
  }

  .offer-first .item:before,
  .offer-first .item:after {
    display: none;
  }

  .offer-first .item-more {
    display: block;
    text-align: center;
    margin: calc( 0.24 * var(---rem) ) auto 0 auto;
    max-width: calc( 1.6 * var(---rem) );
  }

  .offer-first .item-figure {
    margin: 0 0 var(---grid);
    order: -1;
  }
}
/* jsloader//css file: assets/css/layout-first-css.css */
.layout.layout-first {
  container: layout-first / inline-size;
  margin-bottom: var(--grid);
  margin-top: var(--grid);
}

.layout-first .layout-container {
  ---rem: var(--rem, 100px);
  ---color-main: var(--color-main, 255, 192, 0);

  display: grid;
  gap: 0 calc( 0.32 * var(---rem) );
  grid-template-columns: auto auto auto;
}

.layout-first .layout-content {
  min-width: 33.333%;
}

.layout-first .layout-heading {
  grid-column: 1 / -1;
}

.layout-first .layout-headline {
  border-left: calc( 0.06 * var(---rem) ) solid rgb( var(---color-main) );
  font-size: calc( 0.24 * var(---rem) );
  font-weight: 400;
  line-height: 1.5em;
  margin-bottom: 1em;
  padding-left: 1em;
  grid-column: 1 / -1;
}

.layout-first img {
  height: auto;
  max-width: 100%;
}

@container layout-first (max-width: 60em) { /*960px*/
  .layout-first .layout-container {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .layout-first .layout-content {
    margin-bottom: 2em;
  }
}
/* jsloader//css file: assets/css/module-footer-first.css */
.module-footer.footer-first {
  container: footer-first / inline-size;
  position: sticky;
  top: 100vh;
}

.footer-first .footer-container {
  ---rem: var(--rem, 100px);

  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);
  ---color-third: var(--color-third, 88, 97, 101);

  align-items: center;
  background: rgb( var(---color-second) );
  color: rgb( var(---color-third) );
  display: flex;
  justify-content: center;
  padding: calc( 0.32 * var(---rem) );
  position: sticky;
  top: 100vh;
  text-align: center;
}

.footer-first .content {
  color: rgb( var(---color-first) );  
}
/* jsloader//css file: assets/css/module-slider-first.css */
.module-slider.slider-first {
  container: slider-first / inline-size;
  position: relative;
  z-index: 0;
}

.slider-first .slider-container {
  ---rem: var(--rem, 100px);

  ---color-main: var(--color-main, 255, 192, 0);
  ---color-first: var(--color-first, 255, 255, 255);
  ---color-second: var(--color-second, 0, 0, 0);
  ---color-third: var(--color-third, 88, 97, 101);

  ---grid: var(--grid, calc( 0.64 * var(---rem) ) );
  ---grid-: calc( var(--grid) * -1 );
}

.slider-first .slider-container:before {
  bottom: 0;
  border-left: calc( 0.35 * var(---rem) ) solid transparent;
  border-right: calc( 0.35 * var(---rem) ) solid transparent;
  border-bottom: calc( 0.35 * var(---rem) ) solid rgb( var(---color-first) );
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  width: 0;
  z-index: 4;
}

.slider-first .slider-slide {
  align-items: center;
  display: flex;
  justify-content: center;
}

.slider-first .slider-content {
  align-items: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: calc( 1.28 * var(---rem) ) var(--margins);
}

.slider-first .slider-heading {
  color: rgb( var(---color-first) );
  font-size: calc( 0.32 * var(---rem) );
  font-weight: 700;
  background: rgb( var(---color-main) );
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: calc( 6.40 * var(---rem) );
}

.slider-first .slider-description {
  background: rgb( var(---color-second) );
  color: rgb( var(---color-first) );
  margin: calc( 0.06 * var(---rem) ) 0 0;
  max-width: calc( 6.40 * var(---rem) );
  padding: 2em 1em;
  text-align: center;
}

.slider-first .slider-more {
  margin: calc( 0.32 * var(---rem) ) 0 0;
}

.slider-first .slider-picture {
  bottom: calc( -0.10 * var(---rem) );
  left: calc( -0.10 * var(---rem) );
  position: absolute;
  right: calc( -0.10 * var(---rem) );
  top: calc( -0.10 * var(---rem) );
  z-index: -1;
}

.slider-first .slider-img {
  display: block;
  filter: blur(calc( 0.05 * var(---rem) ));
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.slider-first .slider-prev,
.slider-first .slider-next {
  align-items: center;
  background: rgb( var(---color-main) );
  border: 0;
  bottom: 0;
  cursor: pointer;
  display: none;
  font-size: var(---grid);
  left: 0;
  padding: 0;
  position: absolute;
  height: var(---grid);
  justify-content: center;
  width: var(---grid);
  z-index: 2;
}

.slider-first .slider-next {
  left: auto;
  right: 0;
}

.slider-first .slider-prev:before,
.slider-first .slider-next:before {
  border-top: 0.075em solid rgb( var(---color-first) );
  border-right: 0.075em solid rgb( var(---color-first) );
  box-sizing: content-box;
  content: "";
  cursor: pointer;
  display: block;
  height: 0.25em;
  padding: 0 0 0.075em 0.075em;
  transform: rotate(-135deg);
  width: 0.25em;  
}

.slider-first .slider-next:before {
  transform: rotate(45deg);  
}

@container slider-first (max-width: 60em) { /*920px*/
  .slider-first .slider-timeline:before {
    animation: unset;
  }

  .slider-first .slider-prev,
  .slider-first .slider-next {
    display: flex;
  }
}

@container slider-first (max-width: 45em) { /*720px*/
  .slider-first .slider-content {
    padding: calc( 1.28 * var(---rem) ) var(---grid);
  }
}

@container slider-first (max-width: 24em) { /*384px*/
  
  .slider-first .slider-container {
    ---grid: calc( 0.32 * var(---rem) );
  }

  .slider-first .slider-content {
    padding: var(---grid);
  }
}