:root {
  --baseWidth: 92%;
  --maxWidth: 1300px;
  --fl-frame-lightbgbox: #dddddd;
  --fl-frame-cibgbox: var(--mainColor);
  --fl-layout-reduced: var(--reducedWidth);
  --fl-margin-before-extra-small: 30px;
  --fl-margin-before-small: 45px;
  --fl-margin-before-medium: 70px;
  --fl-margin-before-large: 130px;
  --fl-margin-before-extra-large: 200px;
  --fl-margin-after-extra-small: 30px;
  --fl-margin-after-small: 45px;
  --fl-margin-after-medium: 70px;
  --fl-margin-after-large: 130px;
  --fl-margin-after-extra-large: 200px;
}
@media screen and (max-width: 450px) {
  :root {
    --fl-margin-before-medium: 50px;
    --fl-margin-before-large: 80px;
    --fl-margin-before-extra-large: 100px;
    --fl-margin-after-medium: 50px;
    --fl-margin-after-large: 80px;
    --fl-margin-after-extra-large: 100px;
  }
}

.fl {
  position: relative;
  max-width: var(--maxWidth);
  width: var(--baseWidth);
  margin: 0 auto;
}
.fl[data-layout=default][data-frame$=box] {
  padding: 30px;
}
.fl[data-layout=layout-full] {
  width: 100%;
  max-width: none;
}
.fl[data-layout=layout-full-reduced] {
  width: 100%;
  max-width: none;
}
.fl[data-layout=layout-full-reduced][data-frame=cibgbox] {
  padding: clamp(2rem, -0.1621621622rem + 10.1351351351vw, 10rem) 0;
}
.fl[data-layout=layout-full-reduced] .inner {
  position: relative;
  max-width: var(--reducedWidth);
  width: var(--baseWidth);
  margin: 0 auto;
}
.fl[data-layout=layout-reduced] {
  max-width: var(--fl-layout-reduced);
}
.fl[data-layout=layout-reduced][data-frame$=box] {
  padding: 30px;
}
.fl[data-frame=lightbgbox] {
  background: linear-gradient(180deg, #F9F8F8 0%, rgba(249, 248, 248, 0) 55.12%);
}
.fl[data-frame=cibgbox] {
  position: relative;
  color: var(--contrastColorInverted);
  padding: clamp(2rem, -0.3423423423rem + 10.9797297297vw, 10.6666666667rem) 0;
}
.fl[data-frame=cibgbox] h1,
.fl[data-frame=cibgbox] h2,
.fl[data-frame=cibgbox] h3,
.fl[data-frame=cibgbox] h4,
.fl[data-frame=cibgbox] h5,
.fl[data-frame=cibgbox] h6 {
  color: var(--contrastColorInverted);
}
.fl[data-frame=cibgbox]::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--mainColor);
}
.fl[data-frame=cibgbox] .inner {
  position: relative;
  z-index: 1;
}
.fl[data-frame=cibgbox]::after {
  content: "";
  background-image: url(../../img/style_element.svg);
  background-size: auto 100%;
  display: block;
  position: absolute;
  transform: rotateY(180deg) translateY(100%);
  bottom: 0;
  right: 0;
  z-index: 2;
  height: 130px;
  width: 80px;
}
@container (width <=1200px) {
  .fl[data-frame=cibgbox]::after {
    height: 90px;
    width: 55px;
  }
}
.fl[data-frame=cibgbox][data-background-image=true]::before {
  opacity: 0.9;
}
.fl[data-frame=cibgbox][data-background-image=true] .background-image {
  opacity: unset;
}
.fl[data-frame=cibgbox] .wp-block-button.is-style-fill a {
  background-color: var(--contrastColorInverted);
  color: var(--mainColor);
}
.fl[data-frame=cibgbox] .wp-block-button.is-style-fill a:hover {
  background-color: var(--mainColorLight);
  color: var(--contrastColorInverted);
}
.fl[data-frame=cibgbox] .wp-block-button.is-style-outline a {
  border: 1px solid var(--contrastColorInverted);
  color: var(--contrastColorInverted);
}
.fl[data-frame=stylebox][data-style=topleft] {
  position: relative;
}
.fl[data-frame=stylebox][data-style=topleft]::before {
  content: "";
  background-image: url(../../img/style_element.svg);
  background-size: auto 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 130px;
  width: 80px;
}
@container (width <=1200px) {
  .fl[data-frame=stylebox][data-style=topleft]::before {
    height: 90px;
    width: 55px;
  }
}
.fl[data-frame=stylebox][data-style=topright] {
  position: relative;
}
.fl[data-frame=stylebox][data-style=topright]::before {
  content: "";
  background-image: url(../../img/style_element.svg);
  transform: rotateY(180deg);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 130px;
  width: 80px;
}
.fl[data-frame=stylebox][data-style=bottomright] {
  position: relative;
}
.fl[data-frame=stylebox][data-style=bottomright]::before {
  content: "";
  background-image: url(../../img/style_element.svg);
  transform: rotateZ(180deg);
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 130px;
  width: 80px;
}
.fl[data-frame=stylebox][data-style=bottomleft] {
  position: relative;
}
.fl[data-frame=stylebox][data-style=bottomleft]::before {
  content: "";
  background-image: url(../../img/style_element.svg);
  transform: rotateX(180deg);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 130px;
  width: 80px;
}
.fl[data-background-image=true] .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
}
.fl[data-background-image=true] .background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fl[data-margin-before=extra-small] {
  margin-top: var(--fl-margin-before-extra-small);
}
.fl[data-margin-before=small] {
  margin-top: var(--fl-margin-before-small);
}
.fl[data-margin-before=medium] {
  margin-top: var(--fl-margin-before-medium);
}
.fl[data-margin-before=large] {
  margin-top: var(--fl-margin-before-large);
}
.fl[data-margin-before=extra-large] {
  margin-top: var(--fl-margin-before-extra-large);
}
.fl[data-margin-after=extra-small] {
  margin-bottom: var(--fl-margin-after-extra-small);
}
.fl[data-margin-after=small] {
  margin-bottom: var(--fl-margin-after-small);
}
.fl[data-margin-after=medium] {
  margin-bottom: var(--fl-margin-after-medium);
}
.fl[data-margin-after=large] {
  margin-bottom: var(--fl-margin-after-large);
}
.fl[data-margin-after=extra-large] {
  margin-bottom: var(--fl-margin-after-extra-large);
}
@media screen and (max-width: 640px) {
  .fl[data-margin-before=medium] {
    margin-top: var(--fl-margin-before-medium);
  }
  .fl[data-margin-before=large] {
    margin-top: var(--fl-margin-before-large);
  }
  .fl[data-margin-before=extra-large] {
    margin-top: var(--fl-margin-before-extra-large);
  }
  .fl[data-margin-after=medium] {
    margin-bottom: var(--fl-margin-after-medium);
  }
  .fl[data-margin-after=large] {
    margin-bottom: var(--fl-margin-after-large);
  }
  .fl[data-margin-after=extra-large] {
    margin-bottom: var(--fl-margin-after-extra-large);
  }
}