@font-face {
  font-family: interFont;
  src: url("../fonts/Inter-VariableFont_slnt_wght.ttf") format("truetype");
}
* {
  font-weight: 400;
}
.mainFontInter {
  font-family: interFont;
}
.fnt8 {
  font-size: 8px;
}
.fnt10 {
  font-size: 10px;
}
.fnt12 {
  font-size: 12px;
}
.fnt14 {
  font-size: 14px;
}
.fnt16 {
  font-size: 16px;
}
.fnt18 {
  font-size: 18px;
}
.fnt20 {
  font-size: 20px;
}
.fnt22 {
  font-size: 22px;
}
.fnt24 {
  font-size: 24px;
}
.fnt26 {
  font-size: 26px;
}
.fnt28 {
  font-size: 28px;
}
.fnt30 {
  font-size: 30px;
}
.fnt32 {
  font-size: 32px;
}
.fnt34 {
  font-size: 34px;
}
.fnt36 {
  font-size: 36px;
}
.fnt38 {
  font-size: 38px;
}
.fnt40 {
  font-size: 40px;
}
.lineHeight28 {
  line-height: 28px;
}
.lineHeight30 {
  line-height: 30px;
}
.lineHeight38 {
  line-height: 38px;
}
.hBodyL,
.hBodyM,
.hBodyS,
.hButtonL,
.hButtonM,
.hButtonS,
.hButtonXs,
.hCaption,
.hLabelL,
.hLabelM,
.hLabelS,
.hTitleL,
.hTitleM,
.hTitleS,
.hTitleXs,
.hTitlexl,
.hTitlexxl,
.hTitlexxxl,
.hTitlexxxxl {
  font-size: var(--fontSize);
  font-weight: var(--fontWeight);
  line-height: calc(var(--fontSize) * var(--lineHeightScale));
  letter-spacing: calc(var(--fontSize) * var(--letterSpacingScale));
}
.hBodyL,
.hBodyM,
.hBodyS,
.hButtonL,
.hButtonM,
.hButtonS,
.hButtonXs,
.hLabelL,
.hLabelM,
.hLabelS,
.hLabelTags,
.hLabelXs,
.hTitleL,
.hTitleM,
.hTitleS,
.hTitleXs,
.hTitlexl,
.hTitlexxl,
.hTitlexxxl,
.hTitlexxxxl,
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,
.heading6 {
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * var(--line-height-scale));
  letter-spacing: calc(var(--font-size) * var(--letter-spacing-scale));
  font-weight: var(--font-weight);
}
.hTitleL,
.hTitleM,
.hTitleS,
.hTitleXs,
.hTitlexl,
.hTitlexxl,
.hTitlexxxl,
.hTitlexxxxl {
  --font-weight: 600;
  --line-height-scale: 1.4;
  --letter-spacing-scale: 0.01;
}
.hTitlexl,
.hTitlexxl,
.hTitlexxxl,
.hTitlexxxxl {
  --line-height-scale: 1.2;
}
.hTitlexxxxl {
  --font-size: 64px;
  --letter-spacing-scale: -0.02;
}
.hTitlexxxl {
  --font-size: 40px;
  --letter-spacing-scale: -0.01;
}
.hTitlexl,
.hTitlexxl {
  --letter-spacing-scale: 0;
}
.hTitlexxl {
  --font-size: 28px;
}
.hTitlexl {
  --font-size: 24px;
}
.hTitleL {
  --font-size: 18px;
}
.hButtonM,
.hLabelM,
.hTitleM {
  --font-size: 15px;
}
.hButtonS,
.hLabelS,
.hTitleS {
  --font-size: 13px;
}
.hButtonXs,
.hLabelXs,
.hTitleXs {
  --font-size: 11px;
  --letter-spacing-scale: 0.02;
}
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,
.heading6 {
  --line-height-scale: 1.4;
  --letter-spacing-scale: 0;
}
@media (min-width: 1920px) {
  .heading1,
  .heading2,
  .heading3,
  .heading4,
  .heading5,
  .heading6 {
    --font-size: var(--desktop-lg-font-size);
  }
}
@media (min-width: 1360px) and (max-width: 1919px) {
  .heading1,
  .heading2,
  .heading3,
  .heading4,
  .heading5,
  .heading6 {
    --font-size: var(--desktop-md-font-size);
  }
}
@media (min-width: 1024px) and (max-width: 1359px) {
  .heading1,
  .heading2,
  .heading3,
  .heading4,
  .heading5,
  .heading6 {
    --font-size: var(--desktop-sm-font-size);
  }
}
.heading1 {
  --font-weight: 400;
}
.heading2,
.heading3 {
  --font-weight: 500;
}
.heading4,
.heading5,
.heading6 {
  --font-weight: 600;
}
.device-desktip .heading1 {
  --desktop-lg-font-size: 140px;
  --desktop-md-font-size: 120px;
  --desktop-sm-font-size: 100px;
}
.device-desktip .heading2 {
  --desktop-lg-font-size: 96px;
  --desktop-md-font-size: 72px;
  --desktop-sm-font-size: 64px;
}
.device-desktip .heading3 {
  --desktop-lg-font-size: 56px;
  --desktop-md-font-size: 48px;
  --desktop-sm-font-size: 36px;
}
.device-desktip .heading4 {
  --desktop-lg-font-size: 36px;
  --desktop-md-font-size: 24px;
  --desktop-sm-font-size: 24px;
}
.device-desktip .heading5 {
  --desktop-lg-font-size: 24px;
  --desktop-md-font-size: 18px;
  --desktop-sm-font-size: 18px;
}
.device-desktip .heading6 {
  --desktop-lg-font-size: 18px;
  --desktop-md-font-size: 15px;
  --desktop-sm-font-size: 15px;
}
body:not(.device-desktip) {
  --promo-box-minimize-height: 63px;
}
body:not(.device-desktip) .heading1 {
  font-size: var(--size48);
}
body:not(.device-desktip) .heading2 {
  font-size: var(--size36);
}
body:not(.device-desktip) .heading3 {
  font-size: var(--size24);
}
body:not(.device-desktip) .heading4 {
  font-size: var(--size20);
}
body:not(.device-desktip) .heading5 {
  font-size: var(--size16);
}
body:not(.device-desktip) .heading6 {
  font-size: var(--size14);
}
.hBodyL,
.hBodyM,
.hBodyS {
  --font-weight: 400;
  --letter-spacing-scale: 0.01;
}
.hBodyL {
  --font-size: 18px;
  --line-height-scale: 1.5;
  --letter-spacing-scale: 0;
}
.hBodyM {
  --font-size: 15px;
  --line-height-scale: 1.6;
}
.hBodyS {
  --font-size: 13px;
  --line-height-scale: 1.65;
}
.hLabelL,
.hLabelM,
.hLabelS,
.hLabelXs {
  --font-weight: 500;
  --line-height-scale: 1.5;
  --letter-spacing-scale: 0.01;
}
.hButtonL,
.hLabelL {
  --font-size: 18px;
  --letter-spacing-scale: 0;
}
.hLabelTags {
  --font-size: 11px;
  --font-weight: 600;
  --line-height-scale: 1;
  --letter-spacing-scale: 0.02;
}
.hButtonL,
.hButtonM,
.hButtonS,
.hButtonXs {
  --font-weight: 600;
  --line-height-scale: 1;
  --letter-spacing-scale: 0.01;
}
*,
.borderBox {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
.txtDecNone,
a {
  text-decoration: none;
}
#closingSigninForm a:visited {
  color: transparent;
}
.ulDesign {
  list-style: none;
}
.h40 {
  height: 40px;
}
.w40 {
  width: 40px;
}
.h100 {
  height: 100vh;
}
.w100vw {
  width: 100vw;
}
.w100 {
  width: 100%;
}
.minH100 {
  min-height: 450px !important;
}
.h100Pr {
  height: 100%;
}
.minH100Vh {
  min-height: 100vh;
}
.minH100Pr {
  min-height: 100%;
}
.cursPoint {
  cursor: pointer;
}
.overFlowScrollY {
  overflow-y: scroll;
}
.opacity0 {
  opacity: 0;
}
.opacity1 {
  opacity: 1;
}
.objFitCover {
  object-fit: cover;
}
.borderRad4 {
  border-radius: 4px;
}
.borderRad6 {
  border-radius: 6px;
}
.borderRad8 {
  border-radius: 8px;
}
.borderRad10 {
  border-radius: 10px;
}
.borderRad12 {
  border-radius: 12px;
}
.borderRad18 {
  border-radius: 18px;
}
.borderRad20 {
  border-radius: 20px;
}
.borderDesignNoBorder,
.borderRad24 {
  border-radius: 24px;
}
.borderRad60 {
  border-radius: 26px;
}
.dNone {
  display: none !important;
}
.dBlock {
  display: block;
}
.dflex {
  display: flex;
}
.dInlineFlex {
  display: inline-flex;
}
.alignSelfCenter,
.flexAlignSelf {
  align-self: center;
}
.flexAlignSelfEnd {
  align-self: flex-end;
}
.flexColumn {
  flex-direction: column;
}
.flexJustifyBetween {
  justify-content: space-between;
}
.flexJustifyEven {
  justify-content: space-evenly;
}
.flexJustifyStart {
  justify-content: flex-start;
}
.flexJustifyCenter {
  justify-content: center;
}
.flexAlignitemsCenter {
  align-items: center;
}
.flexAlignitemsEnd {
  align-items: flex-end;
}
.flexJustifyEnd {
  justify-content: flex-end;
}
.marginauto {
  margin-top: auto;
}
.flexWrap {
  flex-wrap: wrap;
}
.flexNoWrap {
  flex-wrap: nowrap;
}
.flexGrow1 {
  flex-grow: 1;
}
.flexBase100 {
  flex-basis: 100%;
}
.flexBase50 {
  flex-basis: 50%;
}
.borderDesign1 {
  border: 1px solid grey;
  border-radius: 8px;
}
.borderDesign2 {
  border: 1px solid grey;
  border-radius: 24px;
}
.borderMainDesign {
  border: 1px solid var(--borderSurface);
  border-radius: 8px;
  outline: 0;
}
.borderBtmMainDesign {
  border-bottom: 1px solid var(--borderSurface);
  outline: 0;
}
.dGrid {
  display: grid !important;
}
.txtCenter {
  text-align: center;
}
.textLeft {
  text-align: left;
}
.textRight {
  text-align: right;
}
.lineHeight18 {
  line-height: 18px;
}
.lineHeight20 {
  line-height: 20px;
}
.dividDesing {
  border: 1px solid var(--borderSurface);
}
.noOutline {
  outline: 0;
}
input[type="radio"] {
  accent-color: #00ac00;
  transform: scale(1.2);
}
.mainBoxShadow {
  box-shadow: 0 0 8px 0 rgba(61, 75, 102, 0.08);
}
.posAbsolute {
  position: absolute;
}
.posRelative {
  position: relative;
}
.posFixed {
  position: fixed;
}
.swal2-popup {
  font-family: interFont;
}
.tooltipContainer {
  position: relative;
  display: flex;
}
.tooltipContainer .tooltipContent {
  position: absolute;
  top: 100%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  background-color: var(--primaryContent);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  width: 260px;
  transform: translateX(-50%);
}
.tooltipContainer:hover .tooltipContent {
  opacity: 1;
  visibility: visible;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 468px;
}
.js-h100 {
  height: var(--max-height);
}
:root {
  --primary-color: #00bf40;
  --secondary-color: #ffffff;
  --third-color: rgba(0, 0, 0, 0.05);
  --fourth-color: #f5f5f5;
  --fifth-color: #bbbbbb;
  --sixth-color: #e6e6e6;
  --seventh-color: #00b23c;
  --eighth-color: #d9d9d9;
  --error-color: #d32f2f;
  --primaryHovered-color: #008000;
  --secondaryHovered-color: #cfd8dc;
  --thirdHovered-color: #cfd8dc;
  --primaryBlack-color: #000000;
  --secondarytxt-color: #ffffff;
  --mainMenu-grey: #f5f5f5;
  --bg1-color: #ebebeb;
  --secondary02: #f7f8fa;
  --border01: #e4e6eb;
  --primaryContent: #3d4b66;
  --secondaryContent: #3344668c;
  --disabledContent: #405a8040;
  --subtleContent: rgba(38, 68, 128, 0.06);
  --invertContent: #ffffff;
  --whiteContent: #ffffff;
  --blackContent: #3d4b66;
  --hoverContent: #2644800f;
  --buttonSubtleContent: #f2f4f8;
  --buttonSubtleHover: #e0e5ed;
  --primaryContentDark: #ffffff;
  --secondaryContentDark: #e5eeffa6;
  --disabledContentDark: #ccddff40;
  --subtleContentDark: #80aaff1f;
  --invertContentDark: #3d4b66;
  --whiteContentDark: #ffffff;
  --blackContentDark: #3d4b66;
  --hoverContentDark: #80aaff1f;
  --color-content-hover: #7d8fb21a;
  --primarySurface: #ffffff;
  --secondarySurface: #f7f8fa;
  --tetiarySurface: #ebedf0;
  --modalSurface: #ffffff;
  --borderSurface: #e9ebf0;
  --primarySurfaceDark: #5c6373;
  --secondarySurfaceDark: #21252e;
  --tetiarySurfaceDark: #12141a;
  --modalSurfaceDark: #434957;
  --borderSurfaceDark: #5c6373;
  --hPrGreenAction100: #34d15b;
  --hPrGreenAction: #29cc5f;
  --hPrGreenAction15: #29cc5f1a;
  --hPrBlueAction15: #339cff26;
  --hPrBlueAction100: #339cff;
  --hPrBlueAction15: #339cff1a;
  --hPrRedAction15: #fc585826;
  --hPrRedAction100: #fc5858;
  --hPrRedAction15: #fc58581a;
  --hPrYellowAction15: #edd30e26;
  --hPrYellowAction100: #edd30e;
  --hPrYellowAction15: #edd30e26;
  --hPrPurpleAction15: #be55f226;
  --hPrPurpleAction100: #be55f2;
  --hPrPurpleAction15: #be55f21a;
  --hSecTurquoiseAction15: #15d6c626;
  --hSecTurquoiseAction100: #15d6c6;
  --hSecTurquoiseAction15: #15d6c61a;
  --hSecCornflowerAction15: #7377ff26;
  --hSecCornflowerAction100: #7377ff;
  --hSecCornflowerAction15: #7377ff1a;
  --hSecOrchidAction15: #db58db26;
  --hSecOrchidAction100: #db58db;
  --hSecOrchidAction15: #db58db26;
  --hSecOrangeAction15: #ff884d26;
  --hSecOrangeAction100: #ff884d;
  --hSecOrangeAction15: #ff884d1a;
  --hSecLimeAction15: #bbdb1a26;
  --hSecLimeAction100: #bbdb1a;
  --hSecLimeAction15: #bbdb1a26;
  --hTertSkyAction15: #13cdf226;
  --hTertSkyAction100: #13cdf2;
  --hTertSkyAction15: #13cdf21a;
  --hTertVioletAction15: #8d67e526;
  --hTertVioletAction100: #8d67e5;
  --hTertVioletAction15: #8d67e526;
  --hTertPinkAction15: #eb54a026;
  --hTertPinkAction100: #eb54a0;
  --hTertPinkAction15: #eb54a026;
  --hTertAmberAction15: #ffbc3626;
  --hTertAmberAction100: #ffbc36;
  --hTertAmberAction15: #ffbc3626;
  --hTertKiwiAction15: #78e04326;
  --hTertKiwiAction100: #78e043;
  --hTertKiwiAction15: #78e04326;
  --blackOverlay: #0000001a;
}
.bgFourthcolor {
  background-color: var(--fourth-color);
}
.bgSecondaryColor {
  background-color: var(--secondary-color);
}
.txtWhite {
  color: var(--secondarytxt-color);
}
.txtBlack {
  color: var(--primaryBlack-color);
}
.placeTxtBlack::placeholder {
  color: var(--primaryBlack-color);
}
.seventhColor {
  background-color: var(--seventh-color);
}
.colorContentPri {
  color: var(--primaryContent);
}
.color-primary {
  color: var(--primaryContent) !important;
}
.color-secondary-content,
.colorContentSec {
  color: var(--secondaryContent);
}
.colorContentInve {
  color: var(--invertContent);
}
.colorContentDisabled {
  color: var(--disabledContent);
}
.colorContentSubt {
  color: var(--subtleContent);
}
.colorContentBlack {
  color: var(--blackContent);
}
.colorContentWhite {
  color: var(--whiteContent);
}
.bgColorContentPri {
  background-color: var(--primaryContent);
}
.bgColorContentSec {
  background-color: var(--secondaryContent);
}
.bgColorContentSub {
  background-color: var(--subtleContent);
}
.color-action-green,
.colorActionGree {
  color: var(--hPrGreenAction);
}
.colorCornFlower {
  color: var(--hSecCornflowerAction100);
}
.bgColorActionGreen15 {
  background-color: var(--hPrGreenAction15);
}
.bgColorActionGreen {
  background-color: var(--hPrGreenAction);
}
.colorActionYellow {
  color: var(--hPrYellowAction100);
}
.bgColorActionYellow {
  background-color: var(--hPrYellowAction100);
}
.backgroundSurfModa {
  background: var(--modalSurface);
}
.bgColorSurPrim {
  background-color: var(--primarySurface);
}
.bgColorSurModa {
  background-color: var(--modalSurface);
}
.bgColorSurTeri {
  background-color: var(--tetiarySurface);
}
.bgColorSurSec {
  background-color: var(--secondarySurface);
}
.colorSurfBrdr {
  border: 1px solid var(--borderSurface);
}
.colorSurfModa {
  color: var(--modalSurface);
}
.colorActionRed {
  color: var(--hPrRedAction100);
}
.color-action-violet {
  color: var(--hTertVioletAction100);
}
.bgColor-action-violet {
  background-color: var(--hTertVioletAction100);
}
.btn,
.btn.btn-large {
  --fontsize: 18px;
  --lineheight: 18px;
  --btn-height: 56px;
  --borderradius: 8px;
}
.btn,
.btn.btn-style-plain {
  --disable-color: var(--disabledContent);
  --disable-border-color: transparent;
}
.btn,
.btn > span {
  font-size: var(--fontsize);
}
.primaryBtn {
  background-color: var(--primary-color);
}
.primaryBtn:hover {
  background-color: var(--primaryHovered-color);
  transition: 0.3s;
}
.secondaryBtn {
  background-color: var(--third-color);
}
.secondaryBtn:hover {
  background-color: var(--thirdHovered-color);
  transition: 0.3s;
}
.btn {
  --childspacing: 12px;
  --paddinhorizontal: 8px;
  --active-pulse-size: 0;
  --active-pulse-left: 0;
  --active-pulse-top: 0;
  --active-pulse-opacity: 1;
  --active-pulse-transition-time: 0.5s;
  border-radius: var(--borderradius);
  border: 1px solid var(--border-color);
  color: var(--color);
  background-color: var(--background-color);
  padding-right: var(--paddinhorizontal);
  padding-left: var(--paddinhorizontal);
  height: var(--btn-height);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  --background-color: var(--hPrGreenAction);
  --color: var(--whiteContent);
  --border-color: transparent;
  --hover-background: #3cc166;
  --hover-color: #f7ffff;
  --hover-border-color: transparent;
  --focus-background: var(--hPrGreenAction);
  --focus-color: var(--invertContent);
  --focus-border-color: var(--hPrGreenAction);
  --disable-background: var(--subtleContent);
  cursor: pointer;
}
.btnBrandDefLar,
.btnBrandDefMed {
  background-color: var(--hPrGreenAction);
  color: var(--whiteContent);
}
.btn:after,
.btn:before {
  content: "";
  display: block;
  position: absolute;
}
.btn:before {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(125, 143, 178, 0.1019607843);
  transition: 0.2s;
  opacity: 0;
}
.btn:after {
  transition: width var(--active-pulse-transition-time), height var(--active-pulse-transition-time),
    opacity var(--active-pulse-transition-time);
  z-index: 20;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  left: var(--active-pulse-left);
  top: var(--active-pulse-top);
  width: var(--active-pulse-size);
  height: var(--active-pulse-size);
  opacity: var(--active-pulse-opacity);
  transform: translate(-50%, -50%);
}
.btn.btn-large {
  --childspacing: 10px;
  --paddinhorizontal: 14px;
  --icon-size: 26px;
}
.btn.btn-medium {
  --fontsize: 15px;
  --lineheight: 15px;
  --childspacing: 6px;
  --btn-height: 44px;
  --paddinhorizontal: 10px;
  --borderradius: 6px;
  --icon-size: 22px;
  font-weight: 600;
}
.btn.btn-small {
  --fontsize: 13px;
  --lineheight: 13px;
  --childspacing: 4px;
  --btn-height: 32px;
  --paddinhorizontal: 6px;
  --borderradius: 4px;
  --icon-size: 18px;
  font-weight: 600;
}
.btn.btn-style-primary {
  --background-color: var(--primaryContent);
  --color: var(--invertContent);
  --hover-background: #455179;
  --focus-background: var(--primaryContent);
}
.btn.btn-style-elevated {
  --background-color: var(--modalSurface);
  --color: var(--primaryContent);
  --hover-border-color: var(--primaryContent);
  --hover-background: var(--modalSurface);
}
.btn.btn-style-subtle {
  --background-color: var(--subtleContent);
  --color: var(--primaryContent);
  --hover-background: var(--buttonSubtleHover);
  --hover-color: var(--primaryContent);
  --focus-background: var(--subtleContent);
  --focus-color: var(--primaryContent);
}
.btn.btn-style-plain,
.btn.btn-style-plain-secondary {
  --background-color: transparent;
  --hover-color: var(--primaryContent);
  --focus-background: transparent;
  --focus-color: var(--primaryContent);
  --focus-border-color: var(--hPrGreenAction);
  --disable-background: transparent;
  --border-color: transparent;
}
.btn.btn-style-plain {
  --color: var(--primaryContent);
  --hover-background: var(--hoverContent);
}
.btn.btn-style-plain-secondary {
  --color: var(--secondaryContent);
  --hover-background: transparent;
  --disable-color: var(--disabledContent);
  --disable-border-color: transparent;
}
.btn.btn-style-brand-red,
.btn.btn-style-disable {
  --disable-background: var(--subtleContent);
  --disable-color: var(--disabledContent);
  --disable-border-color: transparent;
}
.btn.btn-style-plain-secondary::before {
  display: none !important;
}
.btn.btn-style-brand-red {
  --background-color: var(--hPrRedAction100);
  --color: var(--whiteContent);
  --border-color: transparent;
  --hover-background: var(--hoverContent);
  --hover-color: #f7ffff;
  --focus-background: var(--hPrRedAction100);
  --focus-color: #f7ffff;
  --focus-border-color: var(--hPrRedAction100);
}
.btn.btn-style-primary-blue {
  --background-color: var(--hPrBlueAction100);
  --color: var(--invertContent);
  --hover-background: #455179;
  --focus-background: var(--hPrBlueAction100);
}
.btn.btn-style-disable {
  --background-color: var(--buttonSubtleContent);
  --color: var(--colorContentDisabled);
  --hover-background: var(--buttonSubtleContent);
  --hover-color: var(--colorContentDisabled);
  --focus-background: var(--hPrGreenAction);
  --focus-color: var(--primaryContent);
  --focus-border-color: var(--primaryContent);
}
.btn.btn-shadow {
  box-shadow: 0 0 8px 0 rgba(61, 75, 102, 0.0784313725);
}
.btn > span {
  font-weight: 600;
  line-height: var(--lineheight);
  margin-left: var(--childspacing) !important;
  margin-right: var(--childspacing) !important;
}
.btn > span:first-child:last-child {
  margin: var(--childspacing) !important;
}
.btn > img,
.btn > img:first-child:last-child,
.btn > svg,
.btn > svg:first-child:last-child {
  margin: 0 !important;
}
.btn > img,
.btn > svg {
  width: var(--icon-size);
  height: var(--icon-size);
}
.btn > svg * {
  fill: var(--color);
}
.btn:not(:disabled).active,
.btn:not(:disabled):not(.disabled):hover {
  color: var(--hover-color);
  border-color: var(--hover-border-color);
}
.btn:not(:disabled).active:before,
.btn:not(:disabled):not(.disabled):hover:before {
  opacity: 1;
}
.btn:not(:disabled).active svg *,
.btn:not(:disabled):not(.disabled):hover svg * {
  fill: var(--hover-color);
}
.btn:not(:disabled):active {
  background-color: var(--focus-background);
  box-shadow: 0 0 0 4px var(--hPrGreenAction15);
  color: var(--focus-color);
  border-color: var(--focus-border-color);
}
.btn:not(:disabled):active:after {
  opacity: var(--active-pulse-opacity);
}
.btn:disabled {
  background-color: var(--disable-background);
  color: var(--disable-color);
  border-color: var(--disable-border-color);
  cursor: not-allowed;
}
.btn:disabled svg * {
  fill: var(--disable-color);
}
.btnBrandDefLar {
  border-radius: 6px;
  padding: 10px 0;
  border: none;
  font-family: interFont;
}
.btnBrandDefMed {
  border-radius: 6px;
}
.btnOtherDesignGrey {
  padding: 13px 16px;
  border: none;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.0509803922);
}
.bannerInfoSmall {
  background-color: var(--hPrBlueAction15);
  border-radius: 6px;
  padding: 12px;
  color: var(--primaryContent);
  border: 1px solid var(--hPrBlueAction100);
}
.bannerInfoM,
.bannerInfoS,
.bannerSuccessM,
.bannerWhiteM {
  border-radius: 6px;
  color: var(--primaryContent);
}
.bannerSuccessM {
  background-color: rgba(41, 204, 95, 0.1490196078);
  padding: 16px;
}
.bannerInfoM {
  background-color: rgba(51, 156, 255, 0.1490196078);
  padding: 16px;
}
.bannerWhiteM {
  background-color: var(--whiteContent);
  padding: 16px;
}
.bannerInfoS {
  background-color: rgba(51, 156, 255, 0.1490196078);
  padding: 8px 12px;
}
.inputsGreenM,
.inputsWhiteM {
  color: var(--primaryContent);
  padding: 16px;
}
.inputsGreenM {
  background-color: rgba(41, 204, 95, 0.1490196078);
  border: 1px solid var(--hPrGreenAction);
  border-radius: 8px;
}
.inputsWhiteM {
  background-color: var(--whiteContent);
  border: 1px solid grey;
  border-radius: 8px;
}
.padding1 {
  padding: 18px 28px;
}
.padding2 {
  padding: 24px 108px;
}
.padding3,
.paddingNew3 {
  padding: 24px 18px;
}
.padding4 {
  padding: 0 18px;
}
.padding5 {
  padding: 30px 0;
}
.padding6 {
  padding: 56px 49px;
}
.padding7 {
  padding: 0 20px;
}
.padding8 {
  padding: 0 32px;
}
.padding9 {
  padding: 20px 32px;
}
.padding10 {
  padding: 60px;
}
.padding11,
.paddingNew4 {
  padding: 24px;
}
.padding12 {
  padding: 15px 0;
}
.padding13 {
  padding: 13px 18px;
}
.padding14 {
  padding: 30px 24px;
}
.padding15 {
  padding: 12px 60px 12px 24px;
}
.padding16 {
  padding: 12px 24px;
}
.padding17 {
  padding: 5px;
}
.padding18 {
  padding: 18px;
}
.padding19 {
  padding: 0 12px;
}
.padding20 {
  padding-top: 15.5px;
  padding-bottom: 15.5px;
}
.padding21,
.paddingNew1 {
  padding: 36px;
}
.margin1 {
  margin-top: 15.5px;
  margin-bottom: 15.5px;
}
.marginTopAuto {
  margin-top: auto !important;
}
.paddingNew2 {
  padding: 24px 32px;
}
.paddingNew5 {
  padding: 0 8px;
}
.paddingNew13,
.paddingNew6 {
  padding: 16px;
}
.paddingNew7 {
  padding: 16px 18px;
}
.paddingNew8 {
  padding: 8px;
}
.paddingNew9 {
  padding: 10px;
}
.paddingNew10 {
  padding: 9.5px 8px;
}
.paddingNew11 {
  padding: 13px 24px;
}
.paddingNew12 {
  padding: 32px;
}
.paddingNew14 {
  padding: 13px 16px;
}
.paddingNew15 {
  padding: 9px 8px;
}
.paddingNew16 {
  padding: 13px;
}
.paddingLogo {
  padding: 32.5px;
}
.padding40 {
  padding: 40px;
}
.paddingNew17 {
  padding: 72px 138px;
}
.paddingNew18 {
  padding: 18px 24px;
}
.paddingNew19 {
  padding: 72px 0;
}
.paddingNew20 {
  padding: 8px 0;
}
.paddingNew21 {
  padding: 14px 24px;
}
.paddingNew22 {
  padding: 7px;
}
.paddingNew23 {
  padding: 8px 16px;
}
.padding4021 {
  padding: 21px 40px;
}
.margin32 {
  margin: 32px;
}
.pl8 {
  padding-left: 8px;
}
.pr8 {
  padding-right: 8px;
}
.pb8 {
  padding-bottom: 8px;
}
.pb10 {
  padding-bottom: 10px;
}
.pl10 {
  padding-left: 10px;
}
.pb13 {
  padding-bottom: 13px;
}
.pt10 {
  padding-top: 10px;
}
.pt13 {
  padding-top: 13px;
}
.pt16 {
  padding-top: 16px;
}
.pt17 {
  padding-top: 17px;
}
.pl14 {
  padding-left: 14px;
}
.pb16 {
  padding-bottom: 16px;
}
.pb17 {
  padding-bottom: 17px;
}
.pb20 {
  padding-bottom: 20px;
}
.pl24 {
  padding-left: 24px;
}
.pl36 {
  padding-left: 36px;
}
.pb24 {
  padding-bottom: 24px;
}
.pb4 {
  padding-bottom: 4px;
}
.pb30 {
  padding-bottom: 30px;
}
.pt24 {
  padding-top: 24px;
}
.pt4 {
  padding-top: 4px;
}
.pt30 {
  padding-top: 30px;
}
.pr24 {
  padding-right: 24px;
}
.mb16 {
  margin-bottom: 16px;
}
html:not(.html-desktip) .page-landing .mb16 {
  margin-bottom: var(--size16);
}
.mb20 {
  margin-bottom: 20px;
}
.mb8 {
  margin-bottom: 8px;
}
.mt8 {
  margin-top: 8px;
}
html:not(.html-desktip) .page-landing .mb8 {
  margin-bottom: var(--size8);
}
.mb25 {
  margin-bottom: 25px;
}
.mb32 {
  margin-bottom: 32px;
}
.mb56 {
  margin-bottom: 56px;
}
.mb72 {
  margin-bottom: 72px;
}
.mt10 {
  margin-top: 10px;
}
.mt32 {
  margin-top: 32px;
}
.mr4 {
  margin-right: 4px;
}
.mr5 {
  margin-right: 5px;
}
.mr6 {
  margin-right: 6px;
}
.mr12 {
  margin-right: 12px;
}
.mr40 {
  margin-right: 40px;
}
.ml4 {
  margin-left: 4px;
}
.ml6 {
  margin-left: 6px;
}
.ml16 {
  margin-left: 16px;
}
.ml61 {
  margin-left: 61px;
}
.ml5 {
  margin-left: 5px;
}
.ml32 {
  margin-left: 32px;
}
.ml72 {
  margin-left: 72px;
}
.ml8 {
  margin-left: 8px;
}
.ml10 {
  margin-left: 10px;
}
.ml12 {
  margin-left: 12px;
}
.ml15 {
  margin-left: 15px;
}
.ml24 {
  margin-left: 24px;
}
.mr24 {
  margin-right: 24px;
}
.mr56 {
  margin-right: 56px;
}
.mr8 {
  margin-right: 8px;
}
.mb4 {
  margin-bottom: 4px;
}
.mb48 {
  margin-bottom: 48px;
}
.mb7 {
  margin-bottom: 7px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb11 {
  margin-bottom: 11px;
}
.mb12 {
  margin-bottom: 12px;
}
.mb18 {
  margin-bottom: 18px;
}
.mb24 {
  margin-bottom: 24px;
}
html:not(.html-desktip) .page-landing .mb24 {
  margin-bottom: var(--size24);
}
.mb27 {
  margin-bottom: 27px;
}
.mt18 {
  margin-top: 18px;
}
.mt24 {
  margin-top: 24px;
}
html:not(.html-desktip) .page-landing .mt24 {
  margin-top: var(--size24);
}
.mb35 {
  margin-bottom: 35px;
}
.mb36 {
  margin-bottom: 36px;
}
.mb40 {
  margin-bottom: 40px;
}
html:not(.html-desktip) .page-landing .mb40 {
  margin-bottom: var(--size40);
}
.mb60 {
  margin-bottom: 60px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr15 {
  margin-right: 15px;
}
.mr16 {
  margin-right: 16px;
}
.mr-1 {
  margin-right: -1px;
}
.ml-1 {
  margin-left: -1px;
}
.device-desktip .page-padding {
  --desktop-lg-spacing: 320px;
  --desktop-md-spacing: 120px;
  --desktop-sm-spacing: 40px;
}
.device-desktip .normal-padding {
  --desktop-lg-spacing: 60px;
  --desktop-md-spacing: 50px;
  --desktop-sm-spacing: 40px;
}
.device-desktip .gap-1 {
  --desktop-lg-spacing: 120px;
  --desktop-md-spacing: 80px;
  --desktop-sm-spacing: 60px;
}
.device-desktip .gap-2 {
  --desktop-lg-spacing: 56px;
  --desktop-md-spacing: 36px;
  --desktop-sm-spacing: 24px;
}
.device-desktip .image-size {
  --desktop-lg-size: 580px;
  --desktop-md-size: 460px;
  --desktop-sm-size: 340px;
}
@media (min-width: 1920px) {
  .device-desktip .gap-1,
  .device-desktip .gap-2,
  .device-desktip .normal-padding,
  .device-desktip .page-padding {
    --gap-spacing: var(--desktop-lg-spacing);
  }
  .device-desktip .image-size {
    --image-size: var(--desktop-lg-size);
  }
}
@media (min-width: 1360px) and (max-width: 1919px) {
  .device-desktip .gap-1,
  .device-desktip .gap-2,
  .device-desktip .normal-padding,
  .device-desktip .page-padding {
    --gap-spacing: var(--desktop-md-spacing);
  }
  .device-desktip .image-size {
    --image-size: var(--desktop-md-size);
  }
}
@media (min-width: 1024px) and (max-width: 1359px) {
  .device-desktip .gap-1,
  .device-desktip .gap-2,
  .device-desktip .normal-padding,
  .device-desktip .page-padding {
    --gap-spacing: var(--desktop-sm-spacing);
  }
  .device-desktip .image-size {
    --image-size: var(--desktop-sm-size);
  }
}
.device-desktip .mb-padding,
body:not(.device-desktip) .mb-padding {
  margin-bottom: var(--gap-spacing);
}
.device-desktip .px-page-padding,
body:not(.device-desktip) .px-page-padding {
  padding-left: var(--gap-spacing);
  padding-right: var(--gap-spacing);
}
body:not(.device-desktip) .gap-1,
body:not(.device-desktip) .normal-padding,
body:not(.device-desktip) .page-padding {
  --desktop-xs-spacing: var(--size24);
}
body:not(.device-desktip) .gap-2 {
  --desktop-xs-spacing: var(--size12);
}
body:not(.device-desktip) .gap-1,
body:not(.device-desktip) .gap-2,
body:not(.device-desktip) .normal-padding,
body:not(.device-desktip) .page-padding {
  --gap-spacing: var(--desktop-xs-spacing);
}
body:not(.device-desktip) .image-size {
  --desktop-xs-size: var(--size220);
  --image-size: var(--desktop-xs-size);
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 5px rgba(5, 191, 68, 0.4);
  }
  100% {
    box-shadow: 0 0 0 36px transparent;
  }
}
.circle {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1019607843);
}
.pulse {
  animation: 1s infinite pulse-animation;
}
.pulseGreen {
  background: #05bf44;
}
@keyframes pulse-animation-dashboard {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 191, 68, 0.4);
  }
  100% {
    box-shadow: 0 0 0 15px transparent;
  }
}
.circleDashboard {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1019607843);
}
.mainProgressBar,
.progressBar {
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #29cc5f 0,
    #29cc5f var(--fill-width),
    rgba(38, 68, 128, 0.0588235294) var(--fill-width),
    rgba(38, 68, 128, 0.0588235294)
  );
}
.pulseDashboard {
  animation: 1s infinite pulse-animation-dashboard;
}
.progressBar {
  height: 3px;
}
.mainProgressBar {
  height: 5px;
  transition: 0.2s;
}
.backgroundOverLayCal {
  background-color: RGBA(0, 0, 0, 0.08);
}
* {
  box-sizing: border-box;
}
.calculatorLoading {
  margin: auto;
  text-align: center;
}
.calculatorLoading::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-left: -30px;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: 10px solid #34d15b;
  border-top-color: #f3f3f3;
  -webkit-animation: 2s linear infinite loading;
  animation: 2s linear infinite loading;
}
@-webkit-keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}
.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}
.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}
.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}
.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}
.colored-toast .swal2-close,
.colored-toast .swal2-title {
  color: #fff;
}
@keyframes auto-flip-animation {
  0%,
  100%,
  50% {
    transform: rotateY(0);
  }
  60%,
  90% {
    transform: rotateY(180deg);
  }
}
.flip-card-inner {
  animation: 4s linear infinite auto-flip-animation;
}
@keyframes placeholder-animation {
  0% {
    left: -150%;
  }
  100% {
    left: 50%;
  }
}
.placeholder {
  --animation-time: 1.5s;
}
.placeholder:after {
  animation: placeholder-animation var(--animation-time) linear infinite;
}
@keyframes upload-section-animation-first {
  0%,
  100%,
  60% {
    transform: translateX(-50%) rotate(-10deg);
    top: 8px;
    left: calc(50% - 20px);
  }
  50% {
    transform: translateX(-50%) rotate(-28deg);
    left: calc(50% - 35px);
    top: 14px;
  }
}
@keyframes upload-section-animation-last {
  0%,
  100%,
  60% {
    transform: translateX(-50%) rotate(10deg);
    top: 8px;
    left: calc(50% + 20px);
  }
  50% {
    transform: translateX(-50%) rotate(28deg);
    left: calc(50% + 35px);
    top: 14px;
  }
}
.inputNormStatusDefault {
  outline: 0;
  border: 1px solid #fff;
}
.inputSelectedStatusActive,
input.inputNormStatusActive:focus {
  transition: 250ms !important;
  outline: 0 !important;
  border: 1px solid #34d15b !important;
  box-shadow: 0 0 0 3px rgba(41, 204, 95, 0.15) !important;
}
.inputErrorStatusActive {
  transition: 250ms;
  outline: 0;
  border: 1px solid #fc5858 !important;
  box-shadow: 0 0 0 3px rgba(252, 88, 88, 0.15);
}
/**************/
.container-2,
.f-container,
main {
  margin: 0 auto;
}
.container-2,
.f-container,
.f-container .f-row .f-col {
  padding: 0 16px;
}
#header {
  transition: top 0.6s;
}
#header,
#section-how-it-works aside:last-child {
  padding-left: var(--gap-spacing);
}
#header,
#section-community,
#section-faq,
#section-hich,
#section-testemonials,
#section-usecases {
  background: var(--whiteContent);
}
#usecase-img,
#usecase-title {
  margin-bottom: 40px;
}
body {
  --overlay-bg: #25293580;
  background: var(--secondarySurface);
  color: var(--primaryContent);
}
#videos-wrapper article video,
img {
  max-width: 100%;
}
.h-100,
.newRankUpUploadArea {
  height: 100%;
}
.landing-section,
.sections-wrapper {
  height: calc(100vh);
}
.f-container {
  max-width: calc(1312px + 32px);
}
.container-2 {
  max-width: 860px;
}
.f-container .f-row {
  margin: 0 -16px;
}
.d-flex,
.f-lightbox-target.active {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.direction-column {
  flex-direction: column;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.align-center {
  align-items: center;
}
.text-center {
  text-align: center;
}
.w-100 {
  width: 100%;
}
.weight-400 {
  font-weight: 400 !important;
}
.weight-500 {
  font-weight: 500 !important;
}
.weight-600 {
  font-weight: 600 !important;
}
.weight-700 {
  font-weight: 700 !important;
}
.weight-800 {
  font-weight: 800 !important;
}
.weight-900 {
  font-weight: 900 !important;
}
.mt100 {
  margin-top: 100px !important;
}
.grow-1 {
  flex-grow: 1;
}
.chips {
  --text-size: 20px;
  font-size: var(--text-size);
  line-height: var(--text-size);
  letter-spacing: calc(var(--text-size) * 0.02);
  padding: 9px 16px;
  border: 1px solid var(--disabledContent);
  border-radius: 50px;
  display: inline-block;
}
.chips.chips-style-brand {
  background: var(--hPrGreenAction);
  border-color: var(--hPrGreenAction);
  color: var(--whiteContent);
}
.mt40 {
  margin-top: 40px;
}
.mt16 {
  margin-top: 16px;
}
.sections-wrapper {
  padding-top: 64px;
}
#newRankUpUploadDivisionInnerDesign .imgs-wrapper,
#usecase-content,
#usecase-img,
#usecase-title,
#videos-wrapper.first-interaction,
.has-bg,
.loading,
.video-wrapper {
  position: relative;
}
.loading::after {
  position: absolute;
  top: calc(50% - 20px);
}
.loading::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}
.uploadingBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#home-link svg {
  height: 26px;
  width: 93px;
}
#header {
  padding-right: var(--gap-spacing);
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  right: 0;
  transition: 0.45s;
}
#header-nav {
  margin-left: auto;
}
#header-nav ul {
  display: flex;
  list-style: none;
}
#header-nav ul li,
#videos-wrapper article:not(:last-child) {
  margin-right: 16px;
}
.has-bg .bg-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.has-bg .content-layer {
  position: relative;
  z-index: 50;
}
body.device-desktip #upload-wrapper {
  align-items: stretch !important;
}
#section-create {
  overflow: hidden;
  position: relative;
}
#section-create .bg-layer {
  background-image: url("../img/section-create-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--whiteContent);
}
.radius-overlarge {
  overflow: hidden;
  border-radius: 12px;
}
.video-wrapper:after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: var(--overlay-bg);
  transition: 0.2s;
}
#bullets-holder.hidden,
.video-wrapper:not(.first-interaction):hover:after,
.video-wrapper:not(.first-interaction):hover:before {
  opacity: 0;
  visibility: hidden;
}
#video-1 video {
  --ratio: 3/8;
  height: calc((100vh - 64px) * var(--ratio));
  max-height: 300px;
  position: relative;
}
#section-hich .img {
  position: relative;
  overflow: hidden;
  border-radius: var(--size8);
}
#section-hich .img::after,
#section-hich .img::before,
#video-1::after,
#video-1::before {
  content: "";
  display: block;
  position: absolute;
}
#section-hich .img::before,
#video-1::before {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-bg);
  z-index: 5;
}
#section-hich .img::after,
#video-1::after {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  background: url("../icons/playVideo.svg");
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#video-1 .thumbnail-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  position: absolute;
  left: 0;
  top: 0;
  background: url("../img/section-create-thumb.webp") center/cover no-repeat;
  opacity: 1;
  transition: 0.3s;
}
#rankup101-main.moving aside,
#section-rankup101 .item .rankup101-icon,
#section-rankup101 .item aside:first-child,
#video-1:hover .thumbnail-img {
  opacity: 0;
}
#uploader-par {
  max-width: 700px;
}
.fake-bullet {
  --size: 3px;
  --padding-x: 16px;
  border-radius: 50%;
  background: var(--secondaryContent);
  width: var(--size);
  height: var(--size);
  margin-left: var(--padding-x);
  margin-right: var(--padding-x);
}
.usecase-items {
  margin-top: 24px;
  padding-right: 40px;
  position: relative;
}
.usecase-items:after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--disabledContent);
}
.usecase-items.active {
  cursor: default;
}
.usecase-items.active:after {
  background-color: var(--hPrGreenAction);
}
.usecase-items:first-child {
  margin-top: 0;
}
#section-rankup101 .hidden-content,
#usecases-items-wrapper .items img,
#usecases-items-wrapper .items p,
.usecase-items video,
body:not(.device-desktip) #bullets-holder {
  display: none;
}
.usecase-content,
.usecase-num,
.usecase-title {
  position: relative;
  transition: 0.4s;
}
.usecase-content {
  overflow: hidden;
}
.usecase-items .usecase-num {
  margin-bottom: 24px;
  top: 0;
}
.usecase-items .usecase-title {
  left: 0;
  top: 0;
}
.usecase-items:not(.active) .usecase-num {
  margin-bottom: -18px;
  top: 12px;
  color: var(--disabledContent);
}
.usecase-items:not(.active) .usecase-title {
  left: 36px;
  top: 11px;
  color: var(--disabledContent);
}
body.device-desktip #section-how-it-works {
  height: 300vh;
  align-items: flex-start;
  padding-top: var(--gap-spacing);
  padding-bottom: var(--gap-spacing);
  position: relative;
}
body.device-desktip #section-how-it-works > div {
  position: sticky;
  top: 0;
  height: calc(100vh - 64px);
}
#section-how-it-works aside:first-child {
  max-width: var(--image-size);
  max-height: var(--image-size);
  min-width: var(--image-size);
  min-height: var(--image-size);
  position: relative;
}
#section-how-it-works aside video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: var(--image-size);
  max-height: var(--image-size);
}
#usecases-items-wrapper .items {
  list-style: none;
  cursor: pointer;
}
#usecases-items-wrapper .items h4 {
  padding-top: 10.5px;
  padding-bottom: 10.5px;
  background: 0 0;
  padding-left: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  color: var(--secondaryContent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}
#section-hich aside,
#section-usecases aside {
  max-width: calc((100% - var(--gap-spacing)) / 2);
}
#section-usecases aside:first-child {
  margin-right: var(--gap-spacing);
}
#usecases-items-wrapper .items h4:before {
  position: absolute;
  content: "";
  left: -3px;
  top: 0;
  height: 100%;
  width: 3px;
  border-radius: 3px;
  background: var(--hPrGreenAction);
  transition: 0.3s;
}
#usecases-items-wrapper .items h4 svg {
  position: relative;
  left: -30px;
  opacity: 0;
  transition: 0.3s;
}
#usecases-items-wrapper .items:not(.active):hover h4 {
  color: var(--primaryContent);
  background: var(--hoverContent);
  padding-left: 19px;
}
#rankup101-main.even-item aside:last-child .rankup101-text,
#section-rankup101 .item:nth-child(odd) .rankup101-text {
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
}
#usecases-items-wrapper .items.active h4 {
  color: var(--primaryContent);
  background: var(--whiteContent);
  padding-left: 19px;
  box-shadow: 0 0 8px 0 #3d4b6614;
  padding-right: 16px;
}
#usecases-items-wrapper .items.active h4 svg {
  left: 0;
  opacity: 1;
}
#rankup101-main aside:first-child,
#section-rankup101 .item.shown:nth-child(2n) aside:first-child,
#usecases-items-wrapper .items.active h4:before {
  left: 0;
}
#usecase-img {
  width: 100%;
  padding-top: calc(min(100%, 400px) * 0.6);
  max-width: 400px;
  background-image: url("../img/usecase-1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 12px;
}
#testemonials-slider .items-wrapper {
  --item-width: 300px;
  --move-size: calc(var(--item-width) + var(--gap-spacing));
  display: flex;
  width: calc(((var(--count) - 1) * var(--move-size)) + var(--item-width));
}
#testemonials-slider .items-wrapper article,
#testemonials-slider .items-wrapper article .testemonial-quote {
  transition: 0.3s;
}
#testemonials-slider .items-wrapper article {
  --color: var(--secondaryContent);
  width: var(--item-width);
  min-width: var(--item-width);
  margin-right: var(--gap-spacing);
  padding: 40px;
  border-radius: 12px;
  background: 0 0;
  box-shadow: 0 0 0 0 transparent;
  display: flex;
  flex-direction: column;
}
#benefits-items article:hover,
#testemonials-slider .items-wrapper article:hover {
  box-shadow: 0 8px 16px 0 #3d4b6629;
  background: var(--whiteContent);
}
#testemonials-slider .items-wrapper article .testemonial-quote {
  width: 11px;
  height: 24px;
  display: flex;
  align-items: flex-end;
}
#testemonials-slider .items-wrapper article .testemonial-text {
  color: var(--color);
}
#testemonials-slider .items-wrapper article .testemonial-author {
  --color: var(--secondaryContent);
  color: var(--color);
  margin-top: auto;
}
#testemonials-slider .items-wrapper article:hover {
  --color: var(--hPrGreenAction);
}
#testemonials-slider .items-wrapper article:hover .testemonial-quote {
  width: 32px;
  height: 24px;
}
#testemonials-slider .items-wrapper article:hover .testemonial-author,
#testemonials-slider .items-wrapper article:hover .testemonial-text {
  --color: var(--primaryContent);
}
#benefits-items article:nth-child(3n),
#testemonials-slider .items-wrapper article:last-child {
  margin-right: 0;
}
#testemonials-slider .testemonial-rating {
  margin-top: auto;
}
#testemonials-slider .testemonial-rating img:not(:last-child),
.page-landing #discard-images {
  margin-right: 10px;
}
#section-rankup101 {
  height: unset;
  padding-top: var(--gap-spacing);
}
#rankup101-content aside:first {
  margin-right: var(--gap-spacing);
}
#section-rankup101 .item .rankup101-icon,
#section-rankup101 .item .rankup101-text,
#section-rankup101 .item aside:first-child {
  transition: 0.4s;
}
#section-rankup101 .item {
  --not-shows-horizontal-offset: 60px;
}
#section-rankup101 .item:nth-child(2n) aside:first-child {
  left: calc(-1 * var(--not-shows-horizontal-offset));
}
#section-rankup101 .item:nth-child(odd) aside:first-child {
  right: calc(-1 * var(--not-shows-horizontal-offset));
}
#section-rankup101 .item .rankup101-icon {
  top: calc(-0.65 * var(--not-shows-horizontal-offset));
  position: relative;
}
#section-rankup101 .item .rankup101-text {
  position: relative;
  overflow: hidden;
  height: var(--data-def-height);
  top: calc(-0.7 * var(--data-hover-height));
}
#section-rankup101 .item.shown .rankup101-icon,
#section-rankup101 .item.shown aside:first-child {
  opacity: 1;
}
#rankup101-main aside:last-child,
#section-rankup101 .item.shown:nth-child(odd) aside:first-child {
  right: 0;
}
#section-rankup101 .item.shown .rankup101-icon {
  top: 0;
}
#section-rankup101 .item.shown .rankup101-text {
  height: var(--data-hover-height);
  top: 0;
}

#section-rankup101 .item.item:not(:last-child),
.page-faq h1 {
  margin-bottom: var(--gap-spacing);
}

#section-footer #footer-usecases {
  margin-bottom: 40px;
}

#section-footer #footer-quick-access {
  margin-bottom: var(--gap-spacing);
}

#section-rankup101 .item:nth-child(2n) aside:last-child {
  align-items: flex-start;
}
#section-rankup101 .item:nth-child(odd) {
  flex-direction: row-reverse;
}
#section-rankup101 .item:nth-child(odd) aside:last-child {
  align-items: flex-end;
}
#rankup101-main.even-item aside:last-child .rankup101-text:before,
#section-rankup101 .item:nth-child(odd) .rankup101-text::before {
  left: auto;
  right: 0;
}
#rankup101-main {
  margin-top: var(--gap-spacing);
}
#rankup101-main aside,
#section-rankup101 .item aside {
  position: relative;
  margin-left: calc(var(--gap-spacing) / 2);
  margin-right: calc(var(--gap-spacing) / 2);
}
#section-community aside:first-child,
#section-faq aside:first-child,
#section-hich aside:first-child {
  margin-right: var(--gap-spacing);
}
#rankup101-main.even-item aside:first-child {
  left: calc(var(--image-size) + var(--gap-spacing));
  border-radius: 12px;
}
#rankup101-main.even-item aside:last-child {
  right: calc(var(--image-size) + var(--gap-spacing));
  align-items: flex-end;
}
#rankup101-main.even-item #rankup101-next-trigger {
  float: right;
}
#rankup101-content,
#rankup101-img,
.rankup101-content,
.rankup101-img {
  width: var(--image-size);
  max-width: var(--image-size);
}
#rankup101-img,
.rankup101-img {
  height: 40px;
  padding-top: var(--image-size);
  background-position: center;
  background-size: contain;
}
.rankup101-text {
  max-width: 356px;
  padding-left: 16px;
  position: relative;
}
.rankup101-text:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--hPrGreenAction);
}
#bullets-holder,
.device-desktip .only-mobile,
body:not(.device-desktip) .only-desktop {
  display: none !important;
}
#rankup101-icon {
  --size: 64px;
  width: var(--size);
  height: var(--size);
}
#section-benefits article {
  padding: var(--gap-spacing);
}
#benefits-items {
  --transition-time: 0.35s;
}
#benefits-items article,
#benefits-items article * {
  transition: all var(--transition-time);
}
#benefits-items article {
  --row-count: 3;
  --total-cap: calc((var(--row-count) - 1) * var(--gap-spacing));
  --box-size: calc((100% - var(--total-cap)) / var(--row-count));
  --box-size: calc(100% / var(--row-count));
  border-radius: 12px;
  background: 0 0;
  max-width: var(--box-size);
  min-width: var(--box-size);
  width: var(--box-size);
}
#benefits-items article * {
  width: 100%;
  text-align: center;
}
#benefits-items article p {
  border-bottom: 1px solid var(--borderSurface);
  color: var(--secondaryContent);
  position: relative;
}
#benefits-items article p.action {
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#benefits-items article:hover p {
  border-bottom-color: var(--hPrGreenAction);
  color: var(--primaryContent);
}
#benefits-items article:hover p.action {
  height: var(--hover-height);
  white-space: wrap;
}
#benefits-items article:hover p.action:after {
  opacity: 0;
  background: var(--whiteContent);
}
#benefits-items article:hover h5,
#benefits-items article:hover h6,
#faq-items .faq-item:hover .heading {
  color: var(--hPrGreenAction);
}
#section-community aside:last-child {
  min-width: var(--image-size);
  min-height: var(--image-size);
  max-width: var(--image-size);
}
#section-community aside:last-child img {
  width: var(--image-size);
  height: var(--image-size);
}
#section-community .chips {
  --text-size: 11px;
  padding: 7px 15px;
  text-transform: uppercase;
}
#section-faq aside:first-child {
  --box-size: 340px;
  max-width: var(--box-size);
  min-width: var(--box-size);
}
#faq-items .faq-item {
  margin: 30px 0;
}
#faq-items .faq-item .heading {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  color: var(--primaryContent);
  padding: 10px 0;
}
#faq-items .faq-item .heading span {
  transition: 0.35s;
}
#faq-items .faq-item .heading span:last-child {
  --size: 24px;
  width: var(--size);
  min-height: var(--size);
  min-width: var(--size);
  position: relative;
}
#faq-items .faq-item .heading span:last-child:after,
#faq-items .faq-item .heading span:last-child:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 13px;
  border-radius: 10px;
  background: var(--primaryContent);
  right: 10px;
  top: 7px;
  transform: rotate(0);
  transition: 0.35s;
}
#faq-items .faq-item .heading span:last-child:after,
#faq-items .faq-item.active .heading span:last-child::before {
  transform: rotate(90deg);
}
#bullets-holder li.active:after,
#bullets-holder li:hover:after,
#faq-items .faq-item:hover span:last-child:after,
#faq-items .faq-item:hover span:last-child:before {
  background: var(--hPrGreenAction);
}
#videos-wrapper article {
  width: calc((100% - 32px) / 3);
  border-radius: 12px;
  overflow: hidden;
}
#videos-wrapper.first-interaction .interation-trigger {
  position: absolute;
  left: 50%;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 40px;
  padding: 4px 12px;
  color: #3d4b66;
  transform: translateX(-50%);
  z-index: 5;
  transition: 0.35s;
}
#videos-wrapper.first-interaction .interation-trigger:hover {
  background: rgba(255, 255, 255, 0.6);
}
#download-lightbox .content {
  padding: 50px 40px 40px !important;
}
#download-lightbox .content section {
  padding: 0 40px;
}
#download-lightbox .content section aside:first-child {
  margin-right: 24px;
  width: 180px;
}
#section-footer {
  height: 370px;
  border-top: 1px solid var(--borderSurface);
}
#section-footer section:last-child {
  padding: 24px 0;
}
#section-footer section:last-child span {
  color: var(--secondaryContent);
}
#section-footer .footer-menu {
  list-style: none;
}
#section-footer section:first-child h4 {
  padding: 8px 0;
  display: inline-block;
  border-bottom: 1px solid var(--hPrGreenAction);
}
#section-footer .footer-menu a {
  color: var(--secondaryContent);
  display: inline-block;
  padding: 9.5px 0;
  transition: 0.35s;
}
#section-footer .footer-menu a:hover {
  color: var(--primaryContent);
}
#home-link-footer {
  width: 86px;
  height: 24px;
}

#home-link-footer-2 {
  width: 86px;
  height: 24px;
  display: block;
}

.page-faq #header {
  position: sticky;
}
body:not(.device-desktip).page-faq #section-faq {
  padding-left: 20px;
  padding-right: 20px;
}
#bullets-holder {
  --header-size: 64px;
  position: fixed;
  right: 0;
  top: var(--header-size);
  height: calc(100% - var(--header-size));
  width: var(--gap-spacing);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 150;
  opacity: 1;
  visibility: visible;
  transition: 0.35s;
}
#bullets-holder li {
  --box-size: 24px;
  --dot-size: 8px;
  --border-width: 1px;
  list-style: none;
  cursor: pointer;
  width: var(--box-size);
  height: var(--box-size);
  border-radius: var(--box-size);
  border: var(--border-width) solid transparent;
  position: relative;
  transition: 0.35s;
}
#bullets-holder li:after {
  content: "";
  display: block;
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--dot-size);
  left: calc(((var(--box-size) - var(--dot-size)) / 2) - var(--border-width));
  top: calc(((var(--box-size) - var(--dot-size)) / 2) - var(--border-width));
  background: var(--hoverContent);
  transition: 0.35s;
}
#bullets-holder li.active,
#bullets-holder li:hover {
  border-color: var(--hoverContent);
}
.f-lightbox-target {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 1000;
}
.f-lightbox-target .content {
  position: relative;
  z-index: 10;
  transition: 0.35s;
  transform: scale(0);
  max-width: calc(100% - 72px);
  max-height: calc(100% - 72px);
}
.f-lightbox-target .content video {
  max-width: 100%;
  max-height: 100%;
}
.f-lightbox-target .close {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
}
.f-lightbox-target .overlay {
  cursor: pointer;
  background: var(--overlay-bg);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}
.f-lightbox-target.active .overlay {
  visibility: visible;
  opacity: 1;
}
.f-lightbox-target.active .content {
  transform: scale(1);
}
#download-lightbox .content,
#video1-lightbox .content {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--whiteContent);
}
.page-landing .createStepNewRankupUploadZone {
  background: 0 0;
}
.page-landing .newRankUpUploadArea {
  border: 2px dashed var(--disabledContent);
  border-radius: 8px;
  background: 0 0 !important;
  transition: 0.3s;
  display: block;
}
.page-landing #NewRankupUploadContainer:not(.uploadZoneDragOver) .newRankUpUploadArea:hover {
  border-color: var(--hPrGreenAction);
}
.page-landing #NewRankupUploadContainer.uploadZoneDragOver .newRankUpUploadArea {
  border-color: var(--hPrGreenAction);
  background-color: var(--hPrGreenAction15) !important;
}
#newRankUpUploadDivisionInnerDesign .imgs-wrapper img:nth-child(2) {
  position: relative;
  z-index: 5;
}
#newRankUpUploadDivisionInnerDesign .imgs-wrapper img:first-child,
#newRankUpUploadDivisionInnerDesign .imgs-wrapper img:last-child {
  border-radius: 12px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  z-index: 1;
  transition: 0.3s;
}
#newRankUpUploadDivisionInnerDesign .imgs-wrapper img:first-child {
  transform: translateX(-50%) rotate(-10deg);
  left: calc(50% - 20px);
}
#newRankUpUploadDivisionInnerDesign .imgs-wrapper img:last-child {
  transform: translateX(-50%) rotate(10deg);
  left: calc(50% + 20px);
}
.page-landing
  #NewRankupUploadContainer.uploadZoneDragOver
  #newRankUpUploadDivisionInnerDesign
  .imgs-wrapper
  img:first-child {
  transform: translateX(-50%) rotate(-28deg);
  left: calc(50% - 35px);
  top: 14px;
}
.page-landing
  #NewRankupUploadContainer.uploadZoneDragOver
  #newRankUpUploadDivisionInnerDesign
  .imgs-wrapper
  img:last-child {
  transform: translateX(-50%) rotate(28deg);
  left: calc(50% + 35px);
  top: 14px;
}
/*responsive******************************/
html:not(.html-desktip) {
  font-size: 15px;
  --size7: 0.466rem;
  --size8: 0.53rem;
  --size10: 0.66rem;
  --size12: 0.81rem;
  --size13: 0.866rem;
  --size14: 0.93rem;
  --size16: 1.06rem;
  --size18: 1.2rem;
  --size20: 1.33rem;
  --size24: 1.62rem;
  --size30: 2rem;
  --size32: 2.13rem;
  --size36: 2.43rem;
  --size40: 2.66rem;
  --size48: 3.24rem;
  --size56: 3.73rem;
  --size72: 4.8rem;
  --size220: 14.66rem;
}
html:not(.html-desktip) .landing-section {
  height: unset;
  padding-top: var(--size36);
  padding-bottom: var(--size36);
}

html:not(.html-desktip) #header {
  padding: var(--size16) var(--size24);
  position: sticky;
  top: 0 !important;
}
html:not(.html-desktip) #rankup101-main,
html:not(.html-desktip) #rankup101-main aside:first-child,
html:not(.html-desktip) #section-benefits > div > div article h6,
html:not(.html-desktip) #section-community .chips,
html:not(.html-desktip) #section-create .chips-wrapper .fake-bullet,
html:not(.html-desktip) #section-faq > div aside:first-child a,
html:not(.html-desktip) #section-faq > div aside:first-child p,
html:not(.html-desktip) #section-how-it-works > div > aside:first-child,
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article:after,
html:not(.html-desktip) #section-rankup101 .item aside:first-child,
html:not(.html-desktip) #section-testemonials .nav-items,
html:not(.html-desktip) #section-usecases aside:last-child,
html:not(.html-desktip) #section-usecases li h4:before,
html:not(.html-desktip) .hidden-content .item > img:first-child {
  display: none;
}
html:not(.html-desktip) main > section {
  padding: var(--size24);
}
html:not(.html-desktip) #section-create {
  background-color: #fff;
}
html:not(.html-desktip) #uploadedStatus img {
  --size: 36px;
  width: var(--size);
  height: var(--size);
}
html:not(.html-desktip) #section-create .bg-layer {
  background-image: url("../img/section-create-mobiel.webp");
  background-size: cover !important;
  background-position: bottom center !important;
}
html:not(.html-desktip) #section-create h1 {
  font-size: var(--size30);
}
html:not(.html-desktip) #section-create * {
  padding-left: 0;
  padding-right: 0;
}
html:not(.html-desktip) #section-create > div {
  height: unset;
}
html:not(.html-desktip) #section-create .chips-wrapper {
  display: block;
  text-align: center;
}
html:not(.html-desktip) #section-create a {
  padding-right: var(--gap-spacing);
  padding-left: var(--gap-spacing);
  justify-content: center;
}
html:not(.html-desktip) #section-create .chips-wrapper > span:not(:last-child) {
  margin-bottom: var(--size8);
}
html:not(.html-desktip) #section-benefits > div > div,
html:not(.html-desktip) #section-footer > div,
html:not(.html-desktip) #upload-wrapper {
  flex-direction: column;
}
html:not(.html-desktip) #section-create #newRankUpUploadDivisionInnerDesign,
html:not(.html-desktip) #section-create #uploadedStatus {
  height: var(--size220);
}
html:not(.html-desktip) #newRankUpUploadDivisionInnerDesign .imgs-wrapper img:first-child {
  animation: 2s linear infinite upload-section-animation-first;
}
html:not(.html-desktip) #newRankUpUploadDivisionInnerDesign .imgs-wrapper img:last-child {
  animation: 2s linear infinite upload-section-animation-last;
}
html:not(.html-desktip) #upload-wrapper aside:first-child {
  margin-right: 0;
  margin-bottom: var(--size40);
}
html:not(.html-desktip) #newRankUpUploadDivisionInnerDesign {
  padding-top: var(--size24);
  padding-bottom: var(--size24);
}
html:not(.html-desktip) #newRankUpUploadDivisionInnerDesign > div:first-child,
html:not(.html-desktip) #section-faq > div aside:first-child h3,
html:not(.html-desktip) .hidden-content .item:not(:last-child) {
  margin-bottom: var(--size24);
}
html:not(.html-desktip) #section-how-it-works aside article {
  padding-right: 0;
}
html:not(.html-desktip) #section-how-it-works .heading4 {
  font-size: var(--size24);
  font-weight: 500 !important;
}
html:not(.html-desktip) #section-benefits > div,
html:not(.html-desktip) #section-how-it-works > div,
html:not(.html-desktip) #section-how-it-works > div > aside:last-child,
html:not(.html-desktip) #section-rankup101 > div,
html:not(.html-desktip) #section-testemonials > div,
html:not(.html-desktip) #section-usecases > div {
  padding: 0;
}
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article {
  margin: 0;
  text-align: center;
  margin-bottom: var(--size72);
}
html:not(.html-desktip) #section-footer h4,
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article:last-child {
  margin-bottom: 0;
}
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article video {
  display: block !important;
  position: static;
  max-width: var(--image-size);
  margin: 0 auto;
  margin-top: var(--size24);
  width: var(--image-size);
  height: var(--image-size);
}
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article img {
  display: block !important;
}
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article h2,
html:not(.html-desktip) #section-how-it-works > div > aside:last-child article h6 {
  display: inline-block;
}
html:not(.html-desktip) #usecases-items-wrapper .items.active h4 {
  box-shadow: none !important;
}
html:not(.html-desktip) #section-usecases aside:first-child {
  max-width: 100%;
  margin-right: 0;
}
html:not(.html-desktip) #section-usecases li {
  background: var(--whiteContent);
  margin-bottom: var(--size8);
  padding: var(--size20) 0;
  box-shadow: 0 0 8px 0 #3d4b6614;
  border-radius: var(--size8);
}
html:not(.html-desktip) #section-usecases li svg {
  transform: rotate(0);
  transition: 0.35s;
}
html:not(.html-desktip) #section-usecases li:not(.active) svg {
  transform: rotate(180deg);
}
html:not(.html-desktip) #section-usecases li h4 {
  padding: 0 var(--size16) !important;
  background: 0 0 !important;
}
html:not(.html-desktip) #section-faq article:hover .heading *,
html:not(.html-desktip) #section-usecases li h4 span,
html:not(.html-desktip) #testemonials-slider .items-wrapper article .testemonial-author,
html:not(.html-desktip) #testemonials-slider .items-wrapper article .testemonial-text {
  color: var(--primaryContent);
}
html:not(.html-desktip) #section-usecases li .content {
  padding: 0 var(--size16);
  display: none;
}
html:not(.html-desktip) #section-usecases li img,
html:not(.html-desktip) #section-usecases li p {
  display: block;
}
html:not(.html-desktip) #section-usecases li img {
  margin-top: var(--size24);
  margin-bottom: var(--size24);
  border-radius: var(--size12);
}
html:not(.html-desktip) #usecases-items-wrapper .items h4 svg {
  opacity: 1;
  left: 0;
}
html:not(.html-desktip) #section-rankup101 .heading3,
html:not(.html-desktip) #section-testemonials .heading3 {
  font-size: var(--size36);
}
html:not(.html-desktip) #section-rankup101 .item {
  flex-direction: column;
  margin-top: var(--size24);
}
html:not(.html-desktip) #section-rankup101 .item aside:last-child {
  width: 100%;
  max-width: unset;
  margin: 0;
  flex-direction: row;
  align-items: center;
}
html:not(.html-desktip) #section-rankup101 .item .rankup101-icon,
html:not(.html-desktip) #section-rankup101 .item .rankup101-icon img {
  --img-size: var(--size24);
  width: var(--img-size);
  height: var(--img-size);
  min-width: var(--img-size);
  min-height: var(--img-size);
}
html:not(.html-desktip) #section-rankup101 .item .rankup101-icon {
  margin-right: var(--size16);
}
html:not(.html-desktip) #section-rankup101 .item .rankup101-text {
  --font-size: 15px;
  --line-height-scale: 1.6;
  margin-bottom: 0;
  text-align: left;
  padding-left: var(--size16);
  padding-right: 0;
}
html:not(.html-desktip) #section-rankup101 .item .rankup101-text::before {
  right: auto;
  left: 0;
}
html:not(.html-desktip) #section-rankup101 .item aside:first-child,
html:not(.html-desktip) #section-rankup101 .item.rankup101-icon {
  opacity: 1;
}
html:not(.html-desktip) #section-rankup101 .item .rankup101-icon,
html:not(.html-desktip) #section-rankup101 .item .rankup101-text,
html:not(.html-desktip) #section-rankup101 .item:nth-child(2n) aside:first-child,
html:not(.html-desktip) #section-rankup101 .item:nth-child(odd) aside:first-child {
  left: auto;
  right: auto;
  top: auto;
}
html:not(.html-desktip) #rankup101-content {
  max-width: 100%;
}
html:not(.html-desktip) .hidden-content {
  display: block !important;
  order: 2;
}
html:not(.html-desktip) .hidden-content + h3 {
  order: 1;
  margin-bottom: var(--size24);
}
html:not(.html-desktip) .hidden-content .item {
  display: flex;
  align-items: center;
}
html:not(.html-desktip) .hidden-content .item > img:nth-child(2) {
  --img-size: var(--size24);
  width: var(--img-size);
  height: var(--img-size);
  margin-right: var(--size16);
}
html:not(.html-desktip) .hidden-content .item > p {
  border-left: 2px solid var(--hPrGreenAction);
  padding-left: var(--size16);
}
html:not(.html-desktip) #testemonials-slider {
  overflow: scroll;
  width: calc(100vw);
  margin: 0 calc(-1 * var(--size24)) !important;
  padding: var(--size20) var(--size24) !important;
}
html:not(.html-desktip) #testemonials-slider article {
  background: var(--whiteContent);
  box-shadow: 0 8px 16px 0 #3d4b6629;
}
html:not(.html-desktip) #testemonials-slider .items-wrapper article .testemonial-quote {
  width: var(--size24);
  width: var(--size32);
  --color: var(--hPrGreenAction);
}
html:not(.html-desktip) #testemonials-slider .items-wrapper article .testemonial-author svg path {
  fill: var(--primaryContent);
}
html:not(.html-desktip) #section-faq .faq-item.active .heading span,
html:not(.html-desktip) #testemonials-slider .items-wrapper article .testemonial-author div span:last-child {
  color: var(--hPrGreenAction);
}
html:not(.html-desktip) #section-testemonials h3 {
  text-align: center;
}
html:not(.html-desktip) #section-community,
html:not(.html-desktip) #section-faq {
  background: 0 0;
}
html:not(.html-desktip) #section-community > div,
html:not(.html-desktip) #section-faq > div {
  flex-direction: column;
  padding: 0;
}
html:not(.html-desktip) #section-community > div aside:first-child {
  margin-right: 0;
  margin-bottom: var(--size24);
}
html:not(.html-desktip) #section-community > div aside:last-child {
  width: 100%;
  text-align: center;
  max-width: unset;
  justify-content: center;
}
html:not(.html-desktip) #section-community .heading3,
html:not(.html-desktip) #section-faq .heading3 {
  font-size: var(--size36);
  text-align: left;
}
html:not(.html-desktip) #section-faq .faq-item.active .heading span:last-child::after,
html:not(.html-desktip) #section-faq .faq-item.active .heading span:last-child:before {
  background: var(--hPrGreenAction);
}
html:not(.html-desktip) #section-faq > div aside:first-child {
  margin-right: 0;
  max-width: unset;
  justify-content: center;
}
html:not(.html-desktip) #section-faq article {
  margin: var(--size24) 0;
}
html:not(.html-desktip) #section-faq article:hover .heading span:last-child::after,
html:not(.html-desktip) #section-faq article:hover .heading span:last-child::before {
  background: var(--primaryContent);
}
html:not(.html-desktip) #section-benefits .heading3 {
  font-size: var(--size36);
  text-align: center;
}
html:not(.html-desktip) #section-benefits > div > div article {
  width: 100%;
  max-width: unset;
  background: #fff;
  box-shadow: 0 0 8px 0 #3d4b6614;
  margin-bottom: var(--size16);
}
html:not(.html-desktip) #section-benefits > div > div article p {
  height: unset !important;
  color: var(--primaryContent);
  white-space: wrap;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
html:not(.html-desktip) #section-hich > div {
  padding: 0;
  flex-direction: column-reverse;
}
html:not(.html-desktip) #section-hich .only-mobile .btn {
  white-space: nowrap;
  --paddinhorizontal: 10px;
  min-width: calc((100% - 8px) / 2);
}
html:not(.html-desktip) #section-hich .only-mobile .btn svg {
  min-width: var(--icon-size);
}
html:not(.html-desktip) #section-hich > div aside {
  margin-right: 0;
  width: 100%;
  max-width: unset;
}
html:not(.html-desktip) #section-hich > div aside:last-child {
  display: flex;
  flex-direction: column;
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav:first-child,
html:not(.html-desktip) #section-hich .hich-mobile-download,
html:not(.html-desktip) #section-hich > div aside:last-child h5 {
  order: 1;
}
html:not(.html-desktip) #section-hich > div aside:last-child img {
  order: 2;
  margin-bottom: var(--size24);
}
html:not(.html-desktip) #section-hich > div aside:last-child p {
  order: 3;
  margin-bottom: var(--size8);
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav:nth-child(3),
html:not(.html-desktip) #section-hich #show-more-hich-powered {
  order: 4;
}
html:not(.html-desktip) #section-hich #hich-powered-text {
  overflow: hidden;
}
html:not(.html-desktip) #section-hich .videos-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: var(--size24);
}
html:not(.html-desktip) #section-hich .videos-wrapper .img {
  --size: calc((100% - (2 * var(--size8))) / 3);
  width: var(--size);
  padding-top: calc(2 * var(--size));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
html:not(.html-desktip) #section-hich .videos-wrapper .img.item:not(:last-child) {
  margin-right: var(--size8);
}
html:not(.html-desktip) #section-hich .videos-wrapper .img:first-child {
  background-image: url("../img/hich-vid-1.png");
}
html:not(.html-desktip) #section-hich .videos-wrapper .img:nth-child(2) {
  background-image: url("../img/hich-vid-2.png");
}
html:not(.html-desktip) #section-hich .videos-wrapper .img:nth-child(3) {
  background-image: url("../img/hich-vid-3.png");
}
html:not(.html-desktip) #section-footer {
  height: unset;
  padding-bottom: 0;
}
html:not(.html-desktip) #section-footer a {
  font-weight: 600;
}
html:not(.html-desktip) #section-footer > div > section:last-child {
  padding-top: var(--size40);
  padding-bottom: var(--size40);
}
html:not(.html-desktip) #section-footer > div > section:first-child {
  flex-wrap: wrap;
  margin-bottom: 0;
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav {
  margin-right: 0;
  width: 50%;
  min-width: 50%;
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav:first-child,
html:not(.html-desktip) #section-footer > div > section:first-child > nav:nth-child(2) {
  margin-bottom: var(--size40);
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav:nth-child(2) {
  order: 2;
}
html:not(.html-desktip) #section-footer > div > section:first-child > nav:nth-child(4) {
  order: 3;
}
html:not(.html-desktip) #section-footer .footer-menu a {
  margin-top: var(--size16);
}
html:not(.html-desktip) #section-footer .footer-menu a:active,
html:not(.html-desktip) #section-footer .footer-menu a:focus,
html:not(.html-desktip) #section-footer .footer-menu a:hover,
html:not(.html-desktip) #section-footer .footer-menu a:visited {
  color: var(--secondaryContent);
}
.big-desktop .landing-section {
  padding-top: 76px;
}
body:not(.device-desktip):not(.not-transition) #discountedBox,
body:not(.device-desktip):not(.not-transition) #discountedBoxOverlay {
  transition: 0.6s;
}
body.device-desktip #discountedBox.notShown {
  display: flex !important;
  bottom: -332px;
}

#discountedBox{
  background: #8d67e5;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
#discountedBox * {
  color: #fff
}
body.ff-promo{
  --ff-promo-bg: #ccc;
  --ff-promo-color: #333;
}
body.ff-promo #discountedBox{
  background: var(--ff-promo-bg);
}
body.ff-promo #discountedBox *{
  color: var(--ff-promo-color);
}
body.device-desktip #discountedBox {
  --page-space: 24px;

  transition: all .6s linear;
  position: fixed;
  left: var(--page-space);
  bottom: var(--page-space);
  width: 260px;
  z-index: 100;
}
body.ff-promo.device-desktip #discountedBox{
  width: 405px;
}
body.device-desktip #discountedBox:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: var(--page-space);
  left: 0;
  bottom: calc(-1 * var(--page-space));
}
body.device-desktip #discountedBox.moving-down {
  bottom: -220px;
}
body.device-desktip #discountedBox.has-expire.moving-down {
  bottom: -215px;
}
body.ff-promo.device-desktip #discountedBox.moving-down {
  bottom: -265px;
  padding-top: 10px;
}
body.ff-promo.device-desktip:not(.minimize-promo) #discountedBox {
  bottom: 0;
}
body.ff-promo.device-desktip.minimize-promo  #discountedBox{
  cursor: pointer;
}
body:not(.device-desktip) #discountedBoxOverlay {
  background: var(--overlay-bg);
  position: fixed;
  left: 0;
  top: unset;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}
body:not(.device-desktip) #discountedBox.notShown {
  bottom: calc(-100vh + var(--promo-box-minimize-height));
  display: flex !important;
  transition: all .35s;
}
body:not(.device-desktip) #discountedBox {
  /* --width: 260px; */
  --width: calc(100vw - 16px);
  --height: 370px;

  overflow: hidden;
  position: fixed;
  width: var(--width);
  height: var(--height);
  /* bottom: calc((100vh - var(--height)) / 2); */
  left: calc((100vw - var(--width)) / 2);
  bottom: 0;
  z-index: 250;
}

#discountedBox > div:nth-child(2),
#promo-code-wrapper span:first-child {
  position: relative;
  top: 0;
  transition: 0.6s;
}
body:not(.device-desktip) #discountedBox > div {
  width: 100% !important;
}
body:not(.device-desktip) #discountedBox > div:first-child {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
#promo-code-wrapper {
  position: relative;
}
#discountedBox > div:nth-child(2) {
  right: 0;
}
#copy-promo-code {
  position: absolute;
  right: var(--size16);
  top: var(--size13);
}
body:not(.device-desktip).minimize-promo {
  padding-bottom: 44px;
}
#minimized-start-link {
  position: absolute;
  right: var(--size16);
  top: var(--size20);
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
}
body:not(.device-desktip).minimize-promo #discountedBox {
  top: unset;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: var(--promo-box-minimize-height);
  border-radius: 0;
}
body:not(.device-desktip).minimize-promo #discountedBox > div:first-child {
  height: calc(63px - 32px);
}
body:not(.device-desktip).minimize-promo #promo-code-wrapper span:first-child {
  top: -53px;
}
body:not(.device-desktip).minimize-promo #discountedBox > div:nth-child(2) {
  position: absolute;
  right: var(--size56);
  top: var(--size7);
  width: unset !important;
  font-size: var(--size24);
}
body:not(.device-desktip).minimize-promo #discountedBoxOverlay {
  bottom: -100vh;
}
body:not(.device-desktip).minimize-promo #minimized-start-link {
  opacity: 1;
  visibility: visible;
}
body:not(.device-desktip).minimize-promo #minimise-promobox {
  opacity: 0;
  visibility: hidden;
}
#promo-code-holder {
  position: fixed;
  left: -4000px;
}
@media (min-width: 1920px) {
  #home-link svg {
    height: 32px;
    width: 114.5px;
  }
}

@media (max-width: 1000px) {
  /*****Kamyab - Landing******/
  .fake-bullet {
    margin-bottom: 4px !important;
    --padding-x: 16px;
  }

  #home-mobile-copyright {
    flex-direction: column;
    align-items: flex-start !important;
  }
  /* #home-copyright-box {
    margin-bottom: var(--size10);
  } */
  /***********/

  html .landing-section {
    height: unset !important;
    padding-top: var(--size36) !important;
    padding-bottom: var(--size36) !important;
  }
  html #upload-wrapper {
    flex-direction: column !important;
  }
  #video-1 {
    min-height: calc((100vw - (2 * var(--size24))) * (226 / 326));
  }
  #video-1 .thumbnail-img {
    background: none !important;
  }
  html #section-create {
    min-height: calc(2.1 * 100vw) !important;
  }
  html #section-create .bg-layer {
    background-image: none !important;
  }
}

/*******************Temp - Promobox*********************/

/* body:not(.device-desktip) #discountedBox .oldPromoBox {
  display: none;
} */

/* body:not(.device-desktip.minimize-promo) #discountedBox div:first-child {
  flex-direction: column;
} */
body:not(.device-desktip) #discountedBox div#minimise-promobox {
  display: none;
}

body:not(.device-desktip) #discountedBox div:nth-child(5) {
  justify-content: center;
}

/* body:not(.device-desktip).minimize-promo #discountedBox div:nth-child(2) {
  display: none;
} */

body:not(.device-desktip).minimize-promo #discountedBox div#promo-code-wrapper {
  display: none;
}

body:not(.device-desktip).minimize-promo #discountedBox div:nth-child(4) {
  display: none;
}
body:not(.device-desktip).minimize-promo #discountedBox div:nth-child(5) {
  display: none;
}
body:not(.device-desktip).minimize-promo #discountedBox div:nth-child(6) {
  display: none;
}

body:not(.device-desktip).minimize-promo.promoCodeActive #discountedBox .oldPromoBox {
  display: none;
}

body:not(.device-desktip).promoCodeActive.minimize-promo #discountedBox .promoNewMobiledesign {
  display: flex !important;
}
body.ff-promo.device-desktip.promoCodeActive.minimize-promo #discountedBox .promoNewMobiledesign{
  display: flex !important;
  width: 100%;
}
body.device-desktip.promoCodeActive.minimize-promo #discountedBox .promoNewMobiledesign #openPromoBox{
  display: none;
}
body:not(.device-desktip).minimize-promo {
  padding-top: 0;
}
body:not(.device-desktip).minimize-promo #header {
  top: var(--promo-box-minimize-height);
}

/****************Footer Padding*****************/
@media (max-width: 1919px) {
  body.device-desktip #section-footer {
    padding-top: 60px;
  }
}

.link {
  color: var(--color);
  font-weight: 600;
}
.link-brand {
  --color: var(--hPrGreenAction);
}
.link-style-plain {
  text-decoration: underline;
  transition: all 0.3s;

  color: var(--primaryContent);
}
.link-style-plain:hover {
  color: var(--hPrGreenAction100);
}

@font-face {
  font-family: archivo;
  src: url("../fonts/Archivo-VariableFont_wdth.wght.ttf") format("truetype");
  font-display: swap;
}
.archivo-font {
  font-family: archivo;
}

.usecases-pictures-design {
  width: 120px;
}

/****************Kamyab****************/
#section-dating-content {
  background: var(--whiteContent);
}

.paddingNew25 {
  padding: 72px 72px;
}

.py-page-padding {
  padding-top: var(--gap-spacing);
  padding-bottom: var(--gap-spacing);
}

.mb64 {
  margin-bottom: 64px;
}

.mb80 {
  margin-bottom: 80px;
}

.listDesignNone {
  list-style: none;
}

.usecases-pictures-design {
  width: 120px;
}

#footer-usecases-button svg {
  transform: rotate(0deg);
  transition: all 0.6s;
}

#footer-usecases:not(.opened) #footer-usecases-button svg {
  transform: rotate(180deg);
}

#footer-usecase-navbar {
  overflow: hidden;
}

#footer-usecase-navbar {
  transition: all 0.6s;
  height: var(--opened-height);
  gap: 16px;
}

#footer-usecases:not(.opened) #footer-usecase-navbar {
  height: 0px;
}

.big-desktop .landing-section {
  padding-top: 76px;
}

#section-footer #footer-usecases {
  margin-bottom: 40px;
}

.devider {
  --spacing: 24px;
  --color: var(--borderSurface);
  --thickness: 1px;
  --size: 100%;
  display: block;
  width: var(--size);
  height: var(--thickness);
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
  background: var(--color);
}

.padding-landing-120 {
  padding-top: 120px;
  padding-bottom: 120px;
}

body:not(.device-desktip) #uploader-par {
  max-width: unset;
}

@media (max-width: 768px) {
  .flexWrapM {
    flex-wrap: wrap;
  }

  .mtM10 {
    margin-top: 10px;
  }

  .mbM16 {
    margin-bottom: 16px;
  }

  .padding-landing-40 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .paddingNew25Mobile {
    padding: 72px 15px;
  }

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

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

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

#usecase-content {
  padding-top: 0;
}

#section-testemonials {
  padding-top: 0;
}

html:not(.html-desktip) #section-dating-content > div,
html:not(.html-desktip) #section-content-banner > div {
  padding-left: 0;
  padding-right: 0;
}

.close-desktop-promo-box{
  top: 17px !important;
}
.close-desktop-promo-box:before, .close-desktop-promo-box:after{
  background: #fff !important;
}
body:not(.ff-promo) #closePromoBoxMobile path,
body:not(.ff-promo) #openPromoBox path{
  fill: #fff;
}
body.ff-promo .close-desktop-promo-box:before, body.ff-promo .close-desktop-promo-box:after{
  background: #3d4b66 !important;
}



/******************************/
body.ff-promo #promo-present-box,
body.ff-promo #promo-present-box + span{
  --size: 55px;
}
body.ff-promo #promo-present-box{
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: 5px;
  top: -20px;
}
body.ff-promo #promo-present-box + span,
body.ff-promo #promo-present-box + span .hLabelL{
  --font-size: 17px;
}
@media( max-width: 768px ){
  body.ff-promo #promo-present-box + span,
  body.ff-promo #promo-present-box + span .hLabelL{
    --font-size: 16px;
  }
}
body.ff-promo #promo-present-box + span{
  padding-left: var(--size);
  align-self: flex-end;
  position: relative;
  top: -6px;
}
body.ff-promo #promo-present-box + span b{
  font-weight: 700;
}
body.ff-promo:not(.device-desktip){
  --promo-box-minimize-height: 40px;
}
body.ff-promo .close-desktop-promo-box{
  --radius: 8px;
  --size: 28px;
  --line-height: 12px;

  top: -24px !important;
  right: 0;
  background: var(--ff-promo-bg);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: none;
}
body.ff-promo .close-desktop-promo-box:before,
body.ff-promo .close-desktop-promo-box:after{
  left: calc(50% - 1px);
  transform: rotate(-45deg) !important;
}
body.ff-promo .close-desktop-promo-box:after{
  transform: rotate(45deg) !important;
}
body.ff-promo.device-desktip:not(.minimize-promo) .close-desktop-promo-box{
  display: block;
}
body.ff-promo #discountedBox{
  overflow: visible;
  background-image: url('../img/presentBox.svg');
  background-position: bottom -30px right -30px;
  background-repeat: no-repeat;
  background-size: 160px auto;
}
body.ff-promo #discount-call-to-action{
  max-width: min(40%, calc(100% - 130px))
}
body.ff-promo:not(.device-desktip) #discountedBox{
  --height: 330px;

  border-top: 1px solid transparent;
}
body.ff-promo:not(.device-desktip).minimize-promo #discountedBox{
  background-position: bottom -200px right -30px;
  padding: 6px;
  border-top-color: #f1363e;
}
body.ff-promo:not(.device-desktip) #discountedBox > div:nth-child(2){
  position: static;
}
body.ff-promo:not(.device-desktip) #discountedBox #closePromoBoxMobile{
  --size: 32px;
  --border-radius: 4px;

  position: absolute;
  right: 0;
  top: -28px;
  width: var(--size);
  height: var(--size);
  background: var(--ff-promo-bg);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
body.ff-promo:not(.device-desktip) #promo-present-box + span{
  top: 0;
}
body.ff-promo:not(.device-desktip) #openPromoBox{
  display: none !important;
}
body.ff-promo #discountedBoxOverlay{display: none !important;}

#send-ticket-trigger{display: none;}