/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/composable.scss ***!
  \**************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.vsp {
  position: relative;
  margin: 170rem 16rem 181rem 233rem;
  padding: 167rem 48rem 80rem 147rem;
  background-color: #1F2E47;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .vsp {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem;
    border-radius: 12rem;
    flex-direction: column;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .vsp {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
    border-radius: 12rem;
  }
}
.vsp__left {
  position: relative;
  width: 722rem;
}
@media (max-width: 991.98px) {
  .vsp__left {
    width: auto;
    max-width: 100%;
  }
}
.vsp__right {
  position: relative;
}
.vsp__img {
  width: 760rem;
  height: 634rem;
  object-fit: cover;
  border-radius: 25rem;
  margin-right: -150rem;
}
.vsp__img--collaborate {
  width: 1017rem;
  height: 628rem;
  margin-right: -390rem;
}
@media (max-width: 991.98px) {
  .vsp__img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: 0rem;
  }
}
@media (max-width: 575.98px) {
  .vsp__img {
    border-radius: 12rem;
  }
}
.vsp__slider {
  position: relative;
  min-height: 321rem;
}
@media (max-width: 991.98px) {
  .vsp__slider {
    min-height: auto;
  }
}
* + .vsp__slider__container {
  margin-top: 143rem;
}
@media (max-width: 991.98px) {
  * + .vsp__slider__container {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .vsp__slider__container {
    margin-top: 24rem;
  }
}
.vsp__slider__container {
  position: relative;
  padding-left: 110rem;
}
@media (max-width: 991.98px) {
  .vsp__slider__container {
    padding-left: 0rem;
  }
}
.vsp__slider__nav {
  position: absolute;
  top: 0rem;
  left: 0rem;
}
@media (max-width: 991.98px) {
  .vsp__slider__nav {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    justify-content: center;
  }
}
.vsp__slider__slide {
  color: #ffffff;
}
* + .vsp__slider__slide__text {
  margin-top: 18rem;
}
@media (max-width: 575.98px) {
  * + .vsp__slider__slide__text {
    margin-top: 12rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.vslwi {
  margin: 49rem 233rem 170rem 233rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 991.98px) {
  .vslwi {
    margin: 48rem 48rem 48rem 24rem;
    flex-direction: column;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .vslwi {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.vslwi__left {
  position: relative;
}
.vslwi__right {
  position: relative;
}
.vslwi__img {
  width: 572rem;
  height: 420rem;
  object-fit: cover;
  border-radius: 25rem;
}
@media (max-width: 575.98px) {
  .vslwi__img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 12rem;
  }
}
.vslwi__nav {
  position: absolute;
  top: 0rem;
  left: -42rem;
  transform: translateX(-100%);
}
@media (max-width: 991.98px) {
  .vslwi__nav {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    justify-content: center;
  }
}
.vslwi__slider {
  width: 572rem;
}
@media (max-width: 991.98px) {
  .vslwi__slider {
    width: 100%;
  }
}
* + .vslwi__slider__slide__text {
  margin-top: 16rem;
}
@media (max-width: 575.98px) {
  * + .vslwi__slider__slide__text {
    margin-top: 12rem;
  }
}
* + .vslwi__button {
  margin-top: 70rem;
}
@media (max-width: 991.98px) {
  * + .vslwi__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .vslwi__button {
    margin-top: 24rem;
  }
}
.vslwi__button {
  display: flex;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.tsp {
  margin: 35rem 16rem 166rem 233rem;
  padding: 167rem 217rem 167rem 144rem;
  border-radius: 25rem;
  background-color: #31C4F3;
}
@media (max-width: 991.98px) {
  .tsp {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem 12rem;
  }
}
@media (max-width: 575.98px) {
  .tsp {
    margin: 24rem 24rem 24rem 12rem;
    padding: 12rem 6rem;
    border-radius: 12rem;
  }
}
.tsp__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .tsp__top {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.tsp__top__content {
  width: 664rem;
}
@media (max-width: 991.98px) {
  .tsp__top__content {
    width: auto;
  }
}
.tsp__top__content * + .text--big {
  margin-top: 53rem;
}
@media (max-width: 991.98px) {
  .tsp__top__content * + .text--big {
    margin-top: 42rem;
  }
}
@media (max-width: 575.98px) {
  .tsp__top__content * + .text--big {
    margin-top: 20rem;
  }
}
.tsp__top__content .text--big {
  color: #ffffff;
  line-height: 1.33;
}
.tsp__top__content h2 {
  color: #ffffff;
}
.tsp__top__content * + p {
  margin-top: 85rem;
}
@media (max-width: 991.98px) {
  .tsp__top__content * + p {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  .tsp__top__content * + p {
    margin-top: 24rem;
  }
}
.tsp__top__content p {
  width: 428rem;
}
@media (max-width: 991.98px) {
  .tsp__top__content p {
    width: auto;
    max-width: 95%;
  }
}
@media (max-width: 991.98px) {
  * + .tsp__top__img {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .tsp__top__img {
    margin-top: 24rem;
  }
}
.tsp__top__img {
  width: 760rem;
  height: 634rem;
  object-fit: cover;
  margin-right: -335rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .tsp__top__img {
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .tsp__top__img {
    border-radius: 12rem;
    width: 100%;
  }
}
* + .tsp__bottom {
  margin-top: 314rem;
}
@media (max-width: 991.98px) {
  * + .tsp__bottom {
    margin-top: 96rem;
  }
}
@media (max-width: 575.98px) {
  * + .tsp__bottom {
    margin-top: 48rem;
  }
}
.tsp__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 169rem;
}
@media (max-width: 991.98px) {
  .tsp__bottom {
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .tsp__bottom {
    gap: 24rem;
  }
}
.tsp__bottom__content {
  width: 569rem;
}
@media (max-width: 991.98px) {
  .tsp__bottom__content {
    width: auto;
  }
}
.tsp__bottom__content h2 {
  color: #ffffff;
}
.tsp__bottom__content ul {
  margin-top: 75rem;
}
@media (max-width: 991.98px) {
  .tsp__bottom__content ul {
    margin-top: 42rem;
  }
}
@media (max-width: 575.98px) {
  .tsp__bottom__content ul {
    margin-top: 20rem;
  }
}
.tsp__bottom__content p {
  margin-top: 95rem;
}
@media (max-width: 991.98px) {
  .tsp__bottom__content p {
    margin-top: 48rem;
    max-width: 95%;
  }
}
@media (max-width: 575.98px) {
  .tsp__bottom__content p {
    margin-top: 24rem;
  }
}
.tsp__bottom__img {
  width: 1019rem;
  flex: 0 1 1019rem;
  border-radius: 25rem;
  margin-left: -447rem;
}
@media (max-width: 991.98px) {
  .tsp__bottom__img {
    width: 70%;
    flex: 0 1 70%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 575.98px) {
  .tsp__bottom__img {
    width: 100%;
    flex: 0 1 100%;
    border-radius: 12rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.twc {
  position: relative;
  margin: 166rem 334rem 49rem 233rem;
  display: flex;
  gap: 310rem;
}
@media (max-width: 991.98px) {
  .twc {
    flex-direction: column;
    gap: 24rem;
    margin: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .twc {
    gap: 24rem;
    margin: 48rem 24rem 48rem 12rem;
  }
}
.twc__left {
  width: 577rem;
}
@media (max-width: 991.98px) {
  .twc__left {
    width: auto;
  }
}
.twc__right {
  width: 471rem;
}
@media (max-width: 991.98px) {
  .twc__right {
    width: auto;
  }
}
.twc .wyswig .text--big.text--fat {
  letter-spacing: 0;
}
@media (min-width: 992px) {
  .twc .wyswig .corner::before {
    right: -33rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.tisac {
  position: relative;
  margin: 166rem 157rem 165rem 249rem;
  display: flex;
  align-items: flex-start;
  gap: 162rem;
}
.tisac .subtitle {
  font-weight: 500;
}
@media (max-width: 991.98px) {
  .tisac {
    flex-direction: column;
    gap: 48rem;
    margin: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .tisac {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.tisac__left {
  position: relative;
  width: 703rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .tisac__left {
    width: auto;
  }
}
.tisac__left__title {
  text-align: center;
  font-weight: 300;
  line-height: 1.215;
}
* + .tisac__left__img {
  margin-top: 75rem;
}
@media (max-width: 991.98px) {
  * + .tisac__left__img {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .tisac__left__img {
    margin-top: 24rem;
  }
}
.tisac__left__img {
  width: 100%;
  height: 439rem;
  object-fit: cover;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .tisac__left__img {
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .tisac__left__img {
    border-radius: 12rem;
  }
}
.tisac__right {
  position: relative;
}
.tisac__right__content {
  width: 649rem;
}
@media (max-width: 991.98px) {
  .tisac__right__content {
    width: auto;
  }
}
.tisac__right__content .text--big {
  line-height: 1.16;
}
.tisac__right__content * + .subtitle {
  margin-top: 36rem;
}
@media (max-width: 575.98px) {
  .tisac__right__content * + .subtitle {
    margin-top: 24rem;
  }
}
.tisac__right__content * + p {
  margin-top: 21rem;
}
.tisac__nav {
  position: absolute;
  top: 0rem;
  left: -42rem;
  transform: translateX(-100%);
}
.tisac__nav--4 {
  left: 250rem;
  transform: none;
}
@media (max-width: 991.98px) {
  .tisac__nav {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    justify-content: center;
  }
}
.tisac__slider {
  width: 572rem;
}
@media (max-width: 991.98px) {
  .tisac__slider {
    width: 932rem;
  }
}
@media (max-width: 575.98px) {
  .tisac__slider {
    width: 343rem;
  }
}
* + .tisac__slider__container {
  margin-top: 94rem;
}
@media (max-width: 991.98px) {
  * + .tisac__slider__container {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .tisac__slider__container {
    margin-top: 24rem;
  }
}
.tisac__slider__container {
  position: relative;
  margin-left: 95rem;
}
@media (max-width: 991.98px) {
  .tisac__slider__container {
    margin-left: 0rem;
  }
}
* + .tisac__slider__slide__text {
  margin-top: 16rem;
}
@media (max-width: 575.98px) {
  * + .tisac__slider__slide__text {
    margin-top: 12rem;
  }
}
.tisac__slider__slide__text ul + p {
  margin-top: 13rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.teamslider {
  display: flex;
  align-items: flex-start;
  gap: 42rem;
  padding: 176rem 0rem 63rem 249rem;
}
@media (max-width: 991.98px) {
  .teamslider {
    flex-direction: column;
    padding: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .teamslider {
    padding: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.teamslider__left {
  width: 397rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .teamslider__left {
    width: 100%;
  }
}
.teamslider__left__content {
  min-height: 372rem;
}
@media (max-width: 991.98px) {
  .teamslider__left__content {
    min-height: auto;
  }
}
* + .teamslider__nav {
  margin-top: 48rem;
}
@media (max-width: 575.98px) {
  * + .teamslider__nav {
    margin-top: 24rem;
  }
}
@media (max-width: 991.98px) {
  .teamslider__nav {
    justify-content: center;
  }
}
.teamslider__right {
  position: relative;
}
.teamslider__right__slidepopup {
  width: 1160rem;
  padding: 152rem 131rem 146rem 147rem;
  height: 950rem;
  position: absolute;
  top: -146rem;
  left: 0rem;
  background-color: #31C4F3;
  z-index: 10;
  border-radius: 25rem;
  display: flex;
  gap: 162rem;
}
@media (max-width: 991.98px) {
  .teamslider__right__slidepopup {
    width: 800rem;
    padding: 88rem 24rem 48rem 24rem;
    top: unset;
    bottom: 0rem;
    height: auto;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .teamslider__right__slidepopup {
    width: 340rem;
    padding: 44rem 12rem 24rem 12rem;
    border-radius: 12rem;
    flex-direction: column;
    gap: 24rem;
  }
}
.teamslider__right__slidepopup__close {
  position: absolute;
  top: 70rem;
  right: 70rem;
  width: 58rem;
  height: 58rem;
  outline: none !important;
  z-index: 10;
}
@media (max-width: 991.98px) {
  .teamslider__right__slidepopup__close {
    top: 28rem;
    right: 16rem;
  }
}
@media (max-width: 575.98px) {
  .teamslider__right__slidepopup__close {
    top: 10rem;
    right: 12rem;
    width: 32rem;
    height: 32rem;
  }
}
.teamslider__right__slidepopup__close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../images/global/x_circle_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
  transition: opacity 0.2s linear;
}
.teamslider__right__slidepopup__close::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../images/global/x_circle_red.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.teamslider__right__slidepopup__close:hover::before {
  opacity: 0;
}
.teamslider__right__slidepopup__close:hover::after {
  opacity: 1;
}
@media (max-width: 991.98px) {
  .teamslider__right__slidepopup__content__container {
    height: 380rem;
    padding-right: 48rem;
  }
}
@media (max-width: 575.98px) {
  .teamslider__right__slidepopup__content__container {
    padding-right: 32rem;
  }
}
@media (min-width: 992px) {
  .teamslider__right__slidepopup__content .subtitle {
    font-size: calc(22rem * (var(--fontsize) / 100));
    line-height: 1.318;
  }
}
.teamslider__right__slidepopup__person {
  flex-shrink: 0;
  width: 279rem;
}
@media (max-width: 575.98px) {
  .teamslider__right__slidepopup__person {
    display: flex;
    align-items: flex-start;
    gap: 12rem;
  }
}
.teamslider__right__slidepopup__person__img {
  width: 100%;
  border-radius: 25rem;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .teamslider__right__slidepopup__person__img {
    border-radius: 12rem;
    width: 50%;
  }
}
* + .teamslider__right__slidepopup__person__info {
  margin-top: 30rem;
}
@media (max-width: 575.98px) {
  * + .teamslider__right__slidepopup__person__info {
    margin-top: 0rem;
  }
}
.teamslider__right__slidepopup__person__position {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.375;
  color: #1F2E47;
}
* + .teamslider__right__slidepopup__person__name {
  margin-top: 10rem;
}
.teamslider__right__slidepopup__person__name {
  font-size: calc(22rem * (var(--fontsize) / 100));
  line-height: 1.318;
  color: #1F2E47;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  font-weight: 500;
}
.teamslider__carousel {
  padding-right: 35rem;
  width: 1176rem;
}
@media (max-width: 991.98px) {
  .teamslider__carousel {
    width: 950rem;
  }
}
@media (max-width: 575.98px) {
  .teamslider__carousel {
    width: 100vw;
    max-width: 100%;
  }
}
.teamslider__carousel__item {
  padding-left: 133rem;
}
@media (max-width: 991.98px) {
  .teamslider__carousel__item {
    padding-left: 0rem;
  }
}
.teamslider__carousel__item__photo {
  width: 425rem;
  height: 456rem;
  object-fit: cover;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .teamslider__carousel__item__photo {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 575.98px) {
  .teamslider__carousel__item__photo {
    width: 70%;
    height: auto;
    border-radius: 12rem;
  }
}
* + .teamslider__carousel__item__info {
  margin-top: 37rem;
}
@media (max-width: 575.98px) {
  * + .teamslider__carousel__item__info {
    margin-top: 12rem;
  }
}
.teamslider__carousel__item__info {
  width: 100%;
  min-height: 257rem;
}
@media (max-width: 991.98px) {
  .teamslider__carousel__item__info {
    min-height: auto;
  }
}
.teamslider__carousel__item__position {
  font-size: calc(16rem * (var(--fontsize) / 100));
  line-height: 1.375;
  color: #1F2E47;
  font-weight: 400;
}
* + .teamslider__carousel__item__name {
  margin-top: 7rem;
}
.teamslider__carousel__item__name {
  font-size: calc(22rem * (var(--fontsize) / 100));
  line-height: 1.318;
  font-weight: 500;
  color: #1F2E47;
  text-transform: uppercase;
}
* + .teamslider__carousel__item__excerpt {
  margin-top: 14rem;
}
.teamslider__carousel__item__excerpt {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.55;
  color: #1F2E47;
}
* + .teamslider__carousel__item__button {
  padding-top: 24rem;
}
.teamslider__carousel__item__button {
  margin-top: auto;
  display: flex;
}
@media (max-width: 575.98px) {
  .teamslider__carousel__item__button {
    justify-content: center;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.sic {
  margin: 87rem 214rem 170rem 233rem;
  position: relative;
  display: flex;
  gap: 315rem;
}
@media (max-width: 991.98px) {
  .sic {
    margin: 48rem 48rem 48rem 24rem;
    flex-direction: column;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .sic {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.sic__left {
  position: relative;
}
.sic__right {
  position: relative;
  width: 675rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .sic__right {
    width: 100%;
  }
}
.sic__right .subtitle {
  margin-top: auto;
  padding-top: 24rem;
}
.sic__img {
  width: 572rem;
  height: 420rem;
  object-fit: cover;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .sic__img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .sic__img {
    border-radius: 12rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.slwi {
  position: relative;
  margin: 185rem 233rem 101rem 249rem;
  display: flex;
  align-items: flex-start;
  gap: 290rem;
}
.slwi .subtitle {
  font-weight: 500;
}
.slwi--1 {
  gap: 262rem;
}
.slwi--4 {
  margin-left: 350rem;
  margin-top: 0;
}
@media (max-width: 991.98px) {
  .slwi {
    flex-direction: column-reverse;
    gap: 48rem;
    margin: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .slwi {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.slwi__left {
  position: relative;
}
.slwi__left--3 {
  margin-left: 100rem;
}
@media (max-width: 991.98px) {
  .slwi__left--3 {
    margin-left: 0;
  }
}
.slwi__left__img {
  margin-top: -350rem;
  margin-left: -300rem;
  width: 856rem;
  height: 835rem;
  object-fit: cover;
  border-radius: 25rem;
}
.slwi__left__img--1 {
  margin-left: 20rem;
  margin-top: 0;
  width: 703rem;
  height: 481rem;
  border-radius: 25rem;
  object-fit: cover;
}
.slwi__left__img--3 {
  margin-left: 0;
  margin-top: 0;
  width: 804rem;
  height: 483rem;
  border-radius: 25rem;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .slwi__left__img--3 {
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .slwi__left__img--3 {
    border-radius: 12rem;
  }
}
.slwi__left__img--4 {
  margin-left: 0;
  margin-top: 0;
  width: 572rem;
  height: 394rem;
}
@media (max-width: 991.98px) {
  .slwi__left__img {
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .slwi__left__img {
    border-radius: 12rem;
  }
}
.slwi__left--4 {
  width: 572rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .slwi__left--4 {
    width: 932rem;
  }
}
@media (max-width: 575.98px) {
  .slwi__left--4 {
    width: 343rem;
  }
}
.slwi__left--4 .slwi__left__img--4 {
  margin-top: 53rem;
}
.slwi__right {
  position: relative;
}
.slwi__right--3 {
  margin-left: -100rem;
}
@media (max-width: 991.98px) {
  .slwi__right--3 {
    margin-left: 0;
  }
}
.slwi__right__img {
  margin-top: -350rem;
  margin-left: -300rem;
  width: 856rem;
  height: 835rem;
  object-fit: cover;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .slwi__right__img {
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .slwi__right__img {
    border-radius: 12rem;
  }
}
.slwi__right__img--4 {
  margin-left: 0;
  margin-top: 0;
  width: 808rem;
  height: 500rem;
}
@media (max-width: 991.98px) {
  .slwi__right__img {
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .slwi__right__img {
    border-radius: 12rem;
  }
}
.slwi__nav {
  position: absolute;
  top: 0rem;
  left: -42rem;
  transform: translateX(-100%);
}
.slwi__nav--4 {
  left: 250rem;
  transform: none;
}
@media (max-width: 991.98px) {
  .slwi__nav {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    justify-content: center;
  }
}
.slwi__slider {
  width: 572rem;
}
@media (max-width: 991.98px) {
  .slwi__slider {
    width: 932rem;
  }
}
@media (max-width: 575.98px) {
  .slwi__slider {
    width: 343rem;
  }
}
.slwi__slider--4 {
  width: 100%;
  min-height: 800rem;
}
@media (max-width: 991.98px) {
  .slwi__slider--4 {
    min-height: 0;
  }
}
* + .slwi__slider__slide__text {
  margin-top: 16rem;
}
@media (max-width: 575.98px) {
  * + .slwi__slider__slide__text {
    margin-top: 12rem;
  }
}
.slwi__slider__slide__text ul + p {
  margin-top: 13rem;
}
.slwi__slider__slide__flex {
  display: flex;
  gap: 290rem;
}
@media (max-width: 991.98px) {
  .slwi__slider__slide__flex {
    flex-direction: column-reverse;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .slwi__slider__slide__flex {
    gap: 24rem;
  }
}
.slwi__slider__slide--4 {
  width: 1374rem;
}
@media (max-width: 991.98px) {
  .slwi__slider__slide--4 {
    width: 300rem;
  }
}
.slwi__bottom__content {
  margin-left: 20rem;
  margin-top: 93rem;
}
.slwi__bottom-margin-top-minus {
  margin-top: -305rem;
}
@media (max-width: 991.98px) {
  .slwi__bottom-margin-top-minus {
    margin-top: 0;
  }
}
.slwi__relative {
  position: relative;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.ptic {
  margin: 16rem 16rem 145rem 233rem;
}
@media (max-width: 991.98px) {
  .ptic {
    margin: 48rem 48rem 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .ptic {
    margin: 48rem 24rem 48rem 12rem;
  }
}
.ptic__panel {
  padding: 161rem 253rem 147rem 147rem;
  background-color: #31C4F3;
  display: flex;
  justify-content: space-between;
  gap: 16rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .ptic__panel {
    padding: 24rem 12rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .ptic__panel {
    border-radius: 12rem;
    gap: 24rem;
  }
}
.ptic__panel__left {
  width: 460rem;
}
.ptic__panel__left h1, .ptic__panel__left h2 {
  color: #ffffff;
}
@media (max-width: 991.98px) {
  .ptic__panel__left {
    width: 100%;
  }
}
.ptic__panel__right {
  width: 538rem;
}
@media (max-width: 991.98px) {
  .ptic__panel__right {
    width: 100%;
  }
}
* + .ptic__panel__img {
  margin-top: 84rem;
}
@media (max-width: 991.98px) {
  * + .ptic__panel__img {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .ptic__panel__img {
    margin-top: 24rem;
  }
}
.ptic__panel__img {
  width: 865rem;
  height: 412rem;
  object-fit: cover;
  margin-left: -440rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .ptic__panel__img {
    margin-left: -140rem;
  }
}
@media (max-width: 575.98px) {
  .ptic__panel__img {
    border-radius: 12rem;
    margin-left: 0rem;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
* + .ptic__panel__right__button {
  margin-top: 18rem;
}
@media (max-width: 575.98px) {
  * + .ptic__panel__right__button {
    margin-top: 12rem;
  }
}
.ptic__panel__right__button {
  display: flex;
}
.ptic__panel__right * + .subtitle {
  margin-top: 41rem;
}
@media (max-width: 575.98px) {
  .ptic__panel__right * + .subtitle {
    margin-top: 24rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.paneltabs {
  position: relative;
  margin: 108rem 15rem 185rem 233rem;
  padding: 14rem 218rem 84rem 16rem;
  min-height: 419rem;
  background-color: #1F2E47;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .paneltabs {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem 12rem;
    min-height: auto;
  }
}
@media (max-width: 575.98px) {
  .paneltabs {
    margin: 48rem 24rem 48rem 12rem;
    padding: 12rem;
    border-radius: 12rem;
  }
}
.paneltabs__nav {
  display: flex;
  counter-reset: tabNo;
  gap: 51rem;
}
@media (max-width: 575.98px) {
  .paneltabs__nav {
    gap: 24rem;
  }
}
.paneltabs__nav__container {
  display: inline-flex;
  background-color: #ffffff;
  border-radius: 14rem;
  padding: 17rem 39rem 17rem 51rem;
  max-width: 100%;
  overflow-x: auto;
}
@media (max-width: 575.98px) {
  .paneltabs__nav__container {
    padding: 6rem 12rem;
    border-radius: 8rem;
  }
}
.paneltabs__nav__button {
  counter-increment: tabNo;
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.625;
  color: #1F2E47;
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.paneltabs__nav__button::before {
  content: counter(tabNo, decimal-leading-zero) " |";
  display: block;
  color: #30C4F3;
  margin-right: 6rem;
}
.paneltabs__nav__button:last-of-type {
  padding-right: 12rem;
}
.paneltabs__nav__button:hover {
  color: #30C4F3;
}
.paneltabs__nav__button.active {
  font-weight: 700;
}
* + .paneltabs__items {
  margin-top: 157rem;
}
@media (max-width: 991.98px) {
  * + .paneltabs__items {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .paneltabs__items {
    margin-top: 24rem;
  }
}
.paneltabs__tab {
  padding-left: 128rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab {
    padding-left: 0rem;
  }
}
.paneltabs__tab__title {
  font-size: calc(52rem * (var(--fontsize) / 100));
  line-height: 1.17;
  font-weight: 300;
  color: #30C4F3;
  letter-spacing: 0.001em;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__title {
    font-size: calc(26rem * (var(--fontsize) / 100));
    width: auto;
  }
}
.paneltabs__tab__title-container {
  display: flex;
  width: 100%;
}
.paneltabs__tab__title-container:not(.no-right) h3 {
  width: 730rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__title-container:not(.no-right) h3 {
    font-size: calc(26rem * (var(--fontsize) / 100));
    width: auto;
  }
}
@media (max-width: 991.98px) {
  .paneltabs__tab__title-container {
    display: block;
  }
}
.paneltabs__tab__title-container .text--big, .paneltabs__tab__title-container .wyswig .text--big {
  color: #FFF;
}
.paneltabs__tab__title-container + * {
  margin-top: 66rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__title-container + * {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  .paneltabs__tab__title-container + * {
    margin-top: 24rem;
  }
}
.paneltabs__tab__content {
  display: flex;
  gap: 163rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__content {
    gap: 64rem;
  }
  .paneltabs__tab__content--with-img-at-right {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .paneltabs__tab__content {
    flex-direction: column;
    gap: 32rem;
  }
}
.paneltabs__tab__content__left .defender-image {
  width: 704rem;
  height: auto;
  border-radius: 25rem;
  margin-left: -132rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__content__left .defender-image {
    width: 100%;
    margin: 0;
  }
}
.paneltabs__tab__content__left .soraad-image {
  width: 902rem;
  height: 575rem;
  border-radius: 25rem;
  margin-left: -420rem;
  margin-bottom: -132rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__content__left .soraad-image {
    width: 100%;
    height: auto;
    margin: 0;
  }
}
.paneltabs__tab__content__left, .paneltabs__tab__content__right {
  width: 572rem;
  color: #ffffff;
}
.paneltabs__tab__content__left * + .subtitle, .paneltabs__tab__content__right * + .subtitle {
  margin-top: 48rem;
}
@media (max-width: 991.98px) {
  .paneltabs__tab__content__left--with-img-at-right, .paneltabs__tab__content__right--with-img-at-right {
    width: auto;
  }
}
@media (max-width: 575.98px) {
  .paneltabs__tab__content__left, .paneltabs__tab__content__right {
    width: auto;
  }
  .paneltabs__tab__content__left * + .subtitle, .paneltabs__tab__content__right * + .subtitle {
    margin-top: 24rem;
  }
}
.paneltabs__tab__content__rightimg {
  width: 913rem;
  height: 567rem;
  object-fit: cover;
  border-radius: 25rem;
}
.paneltabs__tab__content__rightimg--trial-dr5 {
  width: 834rem;
  height: 490rem;
}
@media (min-width: 992px) {
  .paneltabs__tab__content__rightimg--trial-dr5 {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
  }
}
@media (max-width: 991.98px) {
  .paneltabs__tab__content__rightimg {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 575.98px) {
  .paneltabs__tab__content__rightimg {
    border-radius: 12rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.ppl {
  margin: 105rem 233rem 46rem 16rem;
  padding: 113rem 147rem 182rem 217rem;
  background-color: #ffffff;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .ppl {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem 12rem;
  }
}
@media (max-width: 575.98px) {
  .ppl {
    margin: 48rem 24rem 48rem 12rem;
    border-radius: 12rem;
  }
}
@media (max-width: 991.98px) {
  .ppl__top {
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .ppl__top {
    gap: 24rem;
  }
}
.ppl__article {
  color: #1F2E47;
}
@media (max-width: 575.98px) {
  .ppl__article--atlist {
    width: 330rem;
    display: block;
    padding-right: 30rem;
  }
}
.ppl__article__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ppl__article__img__container {
  position: relative;
  width: 100%;
  aspect-ratio: 850/513;
  background-color: #f0f0f0;
  border-radius: 10rem;
}
.ppl__article__img__container--empty::after {
  content: "";
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/global/img.svg");
  width: 89rem;
  height: 89rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
* + .ppl__article__info {
  margin-top: 39.4rem;
}
@media (max-width: 575.98px) {
  * + .ppl__article__info {
    margin-top: 24rem;
  }
}
.ppl__article__info * + .newscontent {
  margin-top: 13rem;
}
@media (max-width: 575.98px) {
  .ppl__article__info * + .newscontent {
    margin-top: 12rem;
  }
}
* + .ppl__article__info__button {
  padding-top: 5rem;
}
.ppl__article__info__button {
  display: flex;
  margin-top: auto;
}
* + .ppl__bottom {
  margin-top: 128rem;
}
@media (max-width: 991.98px) {
  * + .ppl__bottom {
    margin-top: 96rem;
  }
}
@media (max-width: 991.98px) {
  * + .ppl__bottom {
    margin-top: 48rem;
  }
}
.ppl__list {
  align-items: flex-start;
  gap: 107.6rem 0rem;
}
@media (max-width: 991.98px) {
  .ppl__list {
    gap: 48rem 0rem;
  }
}
@media (max-width: 575.98px) {
  .ppl__list {
    gap: 0rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.piwe {
  position: relative;
  margin: 35rem 233rem 35rem 16rem;
  padding: 86rem 213rem 175rem 213rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #31C4F3;
  border-radius: 25rem;
}
.piwe--clear {
  background-color: transparent;
  margin-top: 121rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}
@media (max-width: 991.98px) {
  .piwe {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem;
    flex-direction: column-reverse;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .piwe {
    margin: 48rem 24rem 48rem 12rem;
    padding: 12rem;
    gap: 24rem;
  }
}
.piwe:not(.piwe--clear) .wyswig h2 {
  color: #ffffff;
}
.piwe__top {
  display: flex;
  gap: 163rem;
  align-items: flex-end;
}
@media (max-width: 991.98px) {
  .piwe__top {
    gap: 48rem;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 575.98px) {
  .piwe__top {
    gap: 24rem;
  }
}
.piwe__top__left {
  width: 719rem;
}
@media (max-width: 991.98px) {
  .piwe__top__left {
    width: auto;
  }
}
.piwe__top__left__img {
  width: 1017rem;
  margin-left: -300rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .piwe__top__left__img {
    margin-left: -140rem;
  }
}
@media (max-width: 575.98px) {
  .piwe__top__left__img {
    width: auto;
    max-width: 100%;
    margin-left: 0rem;
    border-radius: 12rem;
  }
}
.piwe__top__right {
  width: 359rem;
}
@media (max-width: 991.98px) {
  .piwe__top__right {
    width: auto;
  }
}
@media (max-width: 991.98px) {
  .piwe__top__right .wyswig {
    padding-right: 24rem;
  }
}
@media (max-width: 575.98px) {
  .piwe__top__right .wyswig {
    padding-right: 12rem;
  }
}
@media (min-width: 992px) {
  .piwe__top__right .wyswig .corner::before {
    right: -62rem;
  }
}
* + .piwe__excerpt {
  margin-top: 39rem;
}
@media (max-width: 575.98px) {
  * + .piwe__excerpt {
    margin-top: 24rem;
  }
}
.piwe__excerpt {
  width: 607rem;
}
@media (max-width: 575.98px) {
  .piwe__excerpt {
    width: auto;
  }
}
* + .piwe__button {
  margin-top: 57rem;
}
@media (max-width: 991.98px) {
  * + .piwe__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .piwe__button {
    margin-top: 24rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.pic {
  position: relative;
  margin: 35rem 11rem 166rem 233rem;
  padding: 147rem 150rem 147rem 0rem;
  background-color: #1F2E47;
  display: flex;
  align-items: flex-start;
  gap: 163rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .pic {
    flex-direction: column;
    gap: 48rem;
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem;
  }
}
@media (max-width: 575.98px) {
  .pic {
    margin: 48rem 24rem 48rem 12rem;
    padding: 12rem;
  }
}
.pic__left {
  margin-left: -170rem;
}
@media (max-width: 991.98px) {
  .pic__left {
    margin-left: -140rem;
  }
}
.pic__left__img {
  width: 100%;
  border-radius: 25rem;
}
@media (max-width: 575.98px) {
  .pic__left__img {
    border-radius: 12rem;
  }
}
.pic__right {
  width: 547rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .pic__right {
    width: auto;
  }
}
.pic__content {
  color: #ffffff;
}
@media (min-width: 992px) {
  .pic__content .corner.corner--cyan::before {
    right: -25.3rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.pel {
  margin: 105rem 233rem 46rem 16rem;
  padding: 113rem 147rem 182rem 217rem;
  background-color: #ffffff;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .pel {
    margin: 48rem 48rem 48rem 24rem;
    padding: 24rem 12rem;
  }
}
@media (max-width: 575.98px) {
  .pel {
    margin: 48rem 24rem 48rem 12rem;
    border-radius: 12rem;
  }
}
@media (max-width: 991.98px) {
  .pel__top {
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .pel__top {
    gap: 24rem;
  }
}
.pel__article {
  color: #1F2E47;
}
@media (max-width: 575.98px) {
  .pel__article--atlist {
    width: 330rem;
    display: block;
    padding-right: 30rem;
  }
}
.pel__article__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.pel__article__img__container {
  position: relative;
  width: 100%;
  aspect-ratio: 850/513;
  background-color: #f0f0f0;
  border-radius: 10rem;
}
.pel__article__img__container--empty::after {
  content: "";
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/global/img.svg");
  width: 89rem;
  height: 89rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
* + .pel__article__info {
  margin-top: 39.4rem;
}
@media (max-width: 575.98px) {
  * + .pel__article__info {
    margin-top: 24rem;
  }
}
.pel__article__info--top {
  width: 600rem;
}
@media (max-width: 991.98px) {
  .pel__article__info--top {
    width: auto;
  }
}
.pel__article__info * + .newscontent {
  margin-top: 13rem;
}
@media (max-width: 575.98px) {
  .pel__article__info * + .newscontent {
    margin-top: 12rem;
  }
}
* + .pel__article__info__button {
  padding-top: 5rem;
}
.pel__article__info__button {
  display: flex;
  margin-top: auto;
}
* + .pel__bottom {
  margin-top: 128rem;
}
@media (max-width: 991.98px) {
  * + .pel__bottom {
    margin-top: 96rem;
  }
}
@media (max-width: 991.98px) {
  * + .pel__bottom {
    margin-top: 48rem;
  }
}
.pel__list {
  align-items: flex-start;
  gap: 107.6rem 0rem;
}
@media (max-width: 991.98px) {
  .pel__list {
    gap: 0rem;
  }
}
@media (max-width: 991.98px) {
  * + .pel__list__item {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .pel__list__item {
    margin-top: 0rem;
  }
}
@media (max-width: 991.98px) {
  .pel__list__item {
    width: 100%;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.introlist {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 20rem 86rem 35rem 86rem;
  padding: 0rem 0rem 0rem 158rem;
  gap: 164rem;
}
@media (max-width: 991.98px) {
  .introlist {
    flex-direction: column;
    margin: 48rem 48rem 48rem 24rem;
    padding: 0rem 0rem 0rem 48rem;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .introlist {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.introlist__img {
  width: 560rem;
  min-width: 0px;
  height: auto;
  object-fit: cover;
  border-radius: 25rem;
  flex-shrink: 0rem;
}
@media (max-width: 991.98px) {
  .introlist__img {
    width: 100%;
    height: 50vh;
  }
}
@media (max-width: 575.98px) {
  .introlist__img {
    border-radius: 12rem;
  }
}
.introlist__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 767rem;
}
@media (max-width: 991.98px) {
  .introlist__content {
    width: auto;
  }
}
.introlist__content ul li {
  letter-spacing: -0.02em;
}
.introlist__content__title {
  width: 100%;
}
@media (max-width: 991.98px) {
  .introlist__content__title {
    width: auto;
  }
}
* + .introlist__content__text {
  margin-top: 46rem;
}
@media (max-width: 575.98px) {
  * + .introlist__content__text {
    margin-top: 24rem;
  }
}
.introlist__content__text * + .subtitle {
  margin-top: 35rem;
}
@media (max-width: 575.98px) {
  .introlist__content__text * + .subtitle {
    margin-top: 24rem;
  }
}
.introlist__content__text * + p {
  margin-top: 21rem;
}
@media (max-width: 575.98px) {
  .introlist__content__text * + p {
    margin-top: 12rem;
  }
}
.introlist__content__text * + ul {
  margin-top: -7rem;
}
.introlist__scroll {
  margin-bottom: 35rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.ici {
  position: relative;
  display: flex;
  margin: 20rem 86rem 35rem 86rem;
  padding: 0rem 0rem 0rem 158rem;
  gap: 12rem;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .ici {
    flex-direction: column;
    margin: 48rem 48rem 48rem 24rem;
    padding: 0rem 0rem 0rem 48rem;
  }
}
@media (max-width: 575.98px) {
  .ici {
    margin: 48rem 24rem 48rem 12rem;
  }
}
.ici__content {
  flex: 2 10 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .ici__content {
    width: auto;
  }
}
.ici__content__title {
  width: 100%;
}
.ici__content__title--careers {
  padding-top: 62rem;
}
@media (max-width: 991.98px) {
  .ici__content__title--careers {
    padding-top: 24rem;
  }
}
@media (max-width: 575.98px) {
  .ici__content__title--careers {
    padding-top: 0rem;
  }
}
@media (max-width: 991.98px) {
  .ici__content__title {
    width: auto;
  }
}
* + .ici__content__text {
  margin-top: 46rem;
}
@media (max-width: 991.98px) {
  * + .ici__content__text {
    margin-top: 24rem;
  }
}
.ici__content__text {
  width: 471rem;
}
.ici__content__text--pipeline {
  width: 623rem;
}
.ici__content__text--pipeline .text--big {
  line-height: 1.166;
}
.ici__content__text--careers p:first-of-type {
  margin-top: 22rem;
}
@media (max-width: 991.98px) {
  .ici__content__text--careers p:first-of-type {
    margin-top: 1em;
  }
}
@media (max-width: 991.98px) {
  .ici__content__text {
    width: auto;
  }
}
.ici__img {
  width: 1013rem;
  min-width: 0px;
  height: auto;
  object-fit: cover;
  border-radius: 25rem;
  flex: 0 1 1013rem;
}
.ici__img--pipeline {
  width: 866rem;
  flex: 0 1 866rem;
  margin-top: 111rem;
}
@media (max-width: 991.98px) {
  .ici__img--pipeline {
    margin-top: 0rem;
  }
}
@media (max-width: 991.98px) {
  .ici__img {
    flex: 0 1 100%;
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .ici__img {
    border-radius: 12rem;
  }
}
.ici__scroll {
  margin-bottom: 35rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.introclosestevent {
  position: relative;
  display: flex;
  margin: 20rem 86rem 105rem 86rem;
  padding: 0rem 0rem 0rem 158rem;
  gap: 12rem;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .introclosestevent {
    flex-direction: column;
    margin: 48rem 48rem 48rem 24rem;
    padding: 0rem 0rem 0rem 48rem;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .introclosestevent {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.introclosestevent__content {
  padding-top: 67rem;
  flex: 2 10 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .introclosestevent__content {
    width: auto;
    padding-top: 0rem;
  }
}
.introclosestevent__content__title {
  width: 95%;
}
@media (max-width: 991.98px) {
  .introclosestevent__content__title {
    width: auto;
  }
}
* + .introclosestevent__content__text {
  margin-top: 46rem;
}
@media (max-width: 575.98px) {
  * + .introclosestevent__content__text {
    margin-top: 24rem;
  }
}
.introclosestevent__content__text {
  width: 609rem;
}
.introclosestevent__content__text--pipeline {
  width: 623rem;
}
@media (max-width: 991.98px) {
  .introclosestevent__content__text {
    width: auto;
  }
}
* + .introclosestevent__content__button {
  margin-top: 82rem;
}
@media (max-width: 991.98px) {
  * + .introclosestevent__content__button {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .introclosestevent__content__button {
    margin-top: 24rem;
  }
}
.introclosestevent__content__button {
  display: flex;
}
.introclosestevent__img {
  width: 1013rem;
  min-width: 0px;
  height: auto;
  object-fit: cover;
  border-radius: 25rem;
  flex: 0 1 1013rem;
  margin-right: -148rem;
}
.introclosestevent__img__container {
  position: relative;
  background-color: #f0f0f0;
  border-radius: 10rem;
}
.introclosestevent__img__container--empty {
  width: 100%;
  height: 513rem;
  aspect-ratio: 866/513;
}
.introclosestevent__img__container--empty::after {
  content: "";
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/global/img.svg");
  width: 89rem;
  height: 89rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.introclosestevent__img--pipeline {
  width: 866rem;
  flex: 0 1 866rem;
}
@media (max-width: 991.98px) {
  .introclosestevent__img {
    flex: 0 1 100%;
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .introclosestevent__img {
    border-radius: 12rem;
  }
}
.introclosestevent__scroll {
  margin-bottom: 35rem;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.iwc {
  position: relative;
  margin: 181rem 435rem 166rem 233rem;
  display: flex;
  align-items: flex-start;
  gap: 161rem;
}
@media (max-width: 991.98px) {
  .iwc {
    margin: 48rem 48rem 48rem 24rem;
    gap: 48rem;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .iwc {
    margin: 48rem 24rem 48rem 12rem;
    gap: 24rem;
  }
}
.iwc__left {
  width: 572rem;
}
@media (max-width: 991.98px) {
  .iwc__left {
    width: auto;
  }
}
.iwc__left__img {
  width: 1068rem;
  margin-left: -496rem;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .iwc__left__img {
    margin-left: -140rem;
  }
}
@media (max-width: 575.98px) {
  .iwc__left__img {
    width: auto;
    max-width: 100%;
    margin-left: 0rem;
    border-radius: 12rem;
  }
}
.iwc__right {
  width: 519rem;
}
@media (max-width: 991.98px) {
  .iwc__right {
    width: auto;
  }
}
* + .iwc__excerpt {
  margin-top: 39rem;
}
@media (max-width: 575.98px) {
  * + .iwc__excerpt {
    margin-top: 24rem;
  }
}
.iwc__excerpt {
  width: 100%;
}
@media (max-width: 575.98px) {
  .iwc__excerpt {
    width: auto;
  }
}
* + .iwc__button {
  margin-top: 34rem;
}
@media (max-width: 575.98px) {
  * + .iwc__button {
    margin-top: 24rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.cwias {
  position: relative;
  margin: 35rem 15rem 31rem 86rem;
  padding: 147rem 26rem 203rem 159rem;
  background-color: #ffffff;
  border-radius: 25rem;
}
@media (max-width: 991.98px) {
  .cwias {
    margin: 48rem 48rem 48rem 24rem;
    padding: 48rem 24rem;
  }
}
@media (max-width: 575.98px) {
  .cwias {
    margin: 48rem 24rem 48rem 12rem;
    padding: 24rem 12rem;
    border-radius: 12rem;
  }
}
.cwias__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 205rem;
}
@media (max-width: 991.98px) {
  .cwias__top {
    flex-direction: column;
    justify-content: flex-start;
    gap: 48rem;
  }
}
@media (max-width: 575.98px) {
  .cwias__top {
    gap: 24rem;
  }
}
.cwias__top__content {
  flex: 2 31 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .cwias__top__content {
    width: auto;
  }
}
.cwias__top__content * + .subtitle {
  margin-top: 50rem;
}
@media (max-width: 575.98px) {
  .cwias__top__content * + .subtitle {
    margin-top: 24rem;
  }
}
@media (min-width: 992px) {
  .cwias__top__content .corner::before {
    right: -42rem;
  }
}
.cwias__top__img {
  width: 1139rem;
  min-width: 0px;
  height: auto;
  object-fit: cover;
  border-radius: 25rem;
  flex: 0 1 1139rem;
  margin-right: -82rem;
}
@media (max-width: 991.98px) {
  .cwias__top__img {
    flex: 0 1 100%;
    width: 100%;
    margin-right: 0rem;
    border-radius: 12rem;
  }
}
* + .cwias__bottom {
  margin-top: 313rem;
}
@media (max-width: 991.98px) {
  * + .cwias__bottom {
    margin-top: 96rem;
  }
}
@media (max-width: 575.98px) {
  * + .cwias__bottom {
    margin-top: 48rem;
  }
}
.cwias__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .cwias__bottom {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.cwias__bottom__left {
  width: 404rem;
}
@media (max-width: 991.98px) {
  .cwias__bottom__left {
    width: 100%;
  }
}
.cwias__bottom__left__content {
  min-height: 134rem;
}
@media (max-width: 991.98px) {
  .cwias__bottom__left__content {
    min-height: auto;
  }
}
* + .cwias__bottom__nav {
  margin-top: 48rem;
}
@media (max-width: 575.98px) {
  * + .cwias__bottom__nav {
    margin-top: 24rem;
  }
}
@media (max-width: 991.98px) {
  .cwias__bottom__nav {
    justify-content: center;
  }
}
.cwias__bottom__right__carousel {
  width: 1176rem;
}
@media (max-width: 991.98px) {
  .cwias__bottom__right__carousel {
    width: 850rem;
  }
}
@media (max-width: 575.98px) {
  .cwias__bottom__right__carousel {
    width: 320rem;
  }
}
.cwias__bottom__right__carousel__item {
  padding-left: 118rem;
}
.cwias__bottom__right__carousel__item__title {
  margin-bottom: 20rem;
}
@media (max-width: 991.98px) {
  .cwias__bottom__right__carousel__item {
    padding-left: 0rem;
  }
}
* + .cwias__bottom__right__content {
  margin-top: 115rem;
}
@media (max-width: 991.98px) {
  * + .cwias__bottom__right__content {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .cwias__bottom__right__content {
    margin-top: 24rem;
  }
}
.cwias__bottom__right__content {
  width: 777rem;
  padding-left: 118rem;
}
@media (max-width: 991.98px) {
  .cwias__bottom__right__content {
    width: 100%;
    padding-left: 0rem;
  }
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.cwi {
  margin: 145rem 233rem 170rem 233rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  .cwi {
    margin: 48rem 48rem 48rem 24rem;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .cwi {
    margin: 48rem 24rem 48rem 12rem;
  }
}
.cwi__left {
  width: 681rem;
}
@media (max-width: 991.98px) {
  .cwi__left {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  * + .cwi__right {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .cwi__right {
    margin-top: 24rem;
  }
}
.cwi__img {
  width: 916rem;
  height: 641rem;
  object-fit: cover;
  border-radius: 25rem;
  margin-right: -312rem;
}
@media (max-width: 991.98px) {
  .cwi__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-right: 0rem;
  }
}
@media (max-width: 575.98px) {
  .cwi__img {
    border-radius: 12rem;
  }
}
.cwi .wyswig .text--big.text--fat {
  letter-spacing: 0;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.componentexample {
  background-color: #ffffff;
}

/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.batp {
  margin: 163rem 16rem 16rem 16rem;
  display: flex;
}
@media (max-width: 991.98px) {
  .batp {
    margin: 48rem 48rem 48rem 24rem;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .batp {
    margin: 48rem 24rem 48rem 12rem;
  }
}
.batp__panel {
  padding: 161rem 149rem 156rem 231rem;
  background-color: #1F2E47;
  border-radius: 25rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .batp__panel {
    padding: 12rem;
  }
}
@media (max-width: 575.98px) {
  .batp__panel {
    border-radius: 12rem;
  }
}
* + .batp__panel__list {
  margin-top: 80rem;
}
@media (max-width: 991.98px) {
  * + .batp__panel__list {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .batp__panel__list {
    margin-top: 24rem;
  }
}
.batp__panel__list {
  counter-reset: batpNo;
  list-style-type: none;
}
.batp__panel__list * + li {
  margin-top: 80rem;
}
@media (max-width: 991.98px) {
  .batp__panel__list * + li {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  .batp__panel__list * + li {
    margin-top: 24rem;
  }
}
.batp__panel__list li {
  counter-increment: batpNo;
  position: relative;
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.55;
  color: #ffffff;
  display: flex;
  gap: 18rem;
}
@media (max-width: 575.98px) {
  .batp__panel__list li {
    gap: 12rem;
  }
}
.batp__panel__list li::before {
  content: counter(batpNo, decimal-leading-zero);
  display: block;
  flex-shrink: 0;
  font-size: calc(42rem * (var(--fontsize) / 100));
  line-height: 1.285;
  color: #31C4F3;
}
@media (max-width: 991.98px) {
  .batp__panel__list li::before {
    font-size: calc(24rem * (var(--fontsize) / 100));
  }
}
@media (max-width: 991.98px) {
  * + .batp__content {
    margin-top: 48rem;
  }
}
.batp__content {
  padding: 161rem 231rem 156rem 163rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .batp__content {
    padding: 0rem;
  }
}
.batp__content ul {
  margin-top: 43rem;
}
@media (max-width: 575.98px) {
  .batp__content ul {
    margin-top: 24rem;
  }
}