/*@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);*/


#lp-form {
  padding-top: 90px;
  position: relative;
}
#lp-form #btn-01 {
  width: 250px !important;
  min-height: 60px !important;
  display: block;
  box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  padding-top: 22px;
  text-align: center;
  line-height: 1em;
  font-size: 30px;
  text-transform: uppercase;
  color: #fff !important;
  text-transform: uppercase;
  background: rgb(77, 148, 255);
  padding: 14px;
  margin-top: 10px;
  min-width: 170px;
  border-radius: 50px;
  display: inline-block;
  border: none;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;

}


/* The Close Button */
#lp-form .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#lp-form .close:hover,
#lp-form .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*body, html {*/
/*  height: 100%;*/
/*  font-family: Arial, Helvetica, sans-serif;*/
/*}*/


#lp-form .main {
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 24px 24px;
  position: relative
}

#lp-form .menu-btn {
  position: absolute;
  top: 20px;
  left: 24px;
  width: 32px;
  padding: 4px;
  margin-bottom: 20px;
  cursor: pointer
}

#lp-form .menu-btn div {
  height: 4px;
  background: rgba(0, 0, 0, .5);
  border-radius: 2px
}

#lp-form .menu-btn div + div {
  margin-top: 4px
}

#lp-form .lang {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  color: rgba(0, 0, 0, .5);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
  cursor: pointer
}

#lp-form .nav {
  position: fixed;
  top: 0;
  left: -110%;
  bottom: 0;
  width: 100%;
  background: #00364d;
  padding: 48px 36px;
  color: #fff;
  text-align: center;
  transition: .5s ease;
  z-index: 999
}

#lp-form .nav.open {
  left: 0
}

#lp-form .nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  cursor: pointer
}

#lp-form .nav-item {
  padding: 16px 0;
  font-size: 32px;
  font-weight: 700
}

#lp-form .nav-item a {
  color: #efefef;
  text-decoration: none
}

#lp-form .overlay {
  text-align: center;
  margin-top: -2.2rem;
  margin-bottom: 1.2rem;
  display: none
}

#lp-form .steps {
  color: #404040;
  font-size: 12px;
  line-height: 1.18;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 28px
}

#lp-form .steps:after {
  content: '';
  display: table;
  clear: both
}

#lp-form .step {
  float: left;
  width: calc(50% - 4px);
  height: 8px;
  background: rgba(0, 0, 0, .1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px
}

#lp-form .step + .step {
  margin-left: 8px
}

#lp-form .step:after {
  content: '';
  display: block;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  background: linear-gradient(273.01deg, #035afb -8.03%, #00364d 109.58%);
  transition: .5s ease
}

#lp-form .step.filled:after {
  width: 100%
}

#lp-form .step + .step:after {
  content: none
}

#lp-form .step.filled + .step:after {
  content: ''
}

#lp-form .rtl-text .steps {
  direction: rtl;
  text-align: right
}

#lp-form .rtl-text .step {
  float: right
}

#lp-form .rtl-text .step + .step {
  margin-left: 0;
  margin-right: 8px
}

#lp-form .title {
  color: #404040;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 900;
  margin-bottom: 32px
}

#lp-form .label {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #fff;
  text-align: center;
  margin-top: 20px
}

#lp-form .rtl-text .label {
  text-align: right
}

#lp-form .field {
  position: relative;
  margin-bottom: 32px;
  /*-webkit-animation: heartbeat 1.75s ease-in-out infinite both;*/
  /*animation: heartbeat 1.75s ease-in-out infinite both*/
}

@keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  10% {
    -webkit-transform: scale(.91);
    transform: scale(.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  17% {
    -webkit-transform: scale(.98);
    transform: scale(.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  33% {
    -webkit-transform: scale(.87);
    transform: scale(.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

#lp-form .field-input {
  display: block;
  width: 100%;
  height: 64px;
  background: #fff;
  border: 2px solid #00364d;
  border-radius: 8px;
  padding: 0 38px 0 100px;
  direction: ltr;
  color: #404040;
  font-size: 24px;
  letter-spacing: 2px;
  transition: .5s ease
}

#lp-form .field-input.pin {
  height: 82px;
  padding-left: 26px;
  text-align: center;
  letter-spacing: 16px
}

#lp-form .field-input__prefix {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 40px;
  color: #404040;
  font-size: 24px;
  line-height: 64px;
  letter-spacing: 2px;
  animation: shake 3s;
  -webkit-animation: shake 3s
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
    -webkit-transform: translate3d(-1px, 0, 0)
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
    -webkit-transform: translate3d(2px, 0, 0)
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
    -webkit-transform: translate3d(-4px, 0, 0)
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
    -webkit-transform: translate3d(4px, 0, 0)
  }
}

#lp-form .field-icon {
  position: absolute;
  top: 20px;
  left: 14px;
  fill: #404040;
  pointer-events: none;
  transition: .5s ease
}

#lp-form .field-label {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  transition: .5s ease;
  top: -9px;
  left: 32px;
  background: #fff;
  padding: 2px 8px;
  color: #00364d;
  font-size: 14px;
}

#lp-form .rtl-text .field-label {
  left: auto;
  right: 40px
}

#lp-form .field-error {
  color: #ed4700;
  text-align: left;
  margin-top: 8px;
  display: none
}

#lp-form .rtl-text .field-error {
  text-align: right
}

#lp-form .field-input.focus,
#lp-form .field-input:focus {
  border-color: #00364d
}

#lp-form .field-input.invalid,
#lp-form .field-input:invalid {
  border-color: #f00
}

#lp-form .field-input:focus ~ .field-input__prefix .field-icon, .focus .field-icon {
  fill: #00364d
}

#lp-form .field-input:focus ~ .field-label, .focus ~ .field-label {
  top: -9px;
  left: 32px;
  background: #fff;
  padding: 2px 8px;
  color: #00364d;
  font-size: 14px
}

#lp-form .rtl-text .field-input:focus ~ .field-label, .rtl-text .focus ~ .field-label {
  left: auto;
  right: 32px
}

#lp-form .field-input.has-error {
  border-color: #ed4700
}

#lp-form .has-error ~ .field-icon {
  fill: #ed4700 !important
}

#lp-form .has-error ~ .field-label {
  top: -9px;
  left: 32px;
  background: #fff;
  padding: 2px 8px;
  font-size: 14px;
  color: #ed4700 !important
}

#lp-form .rtl-text .has-error ~ .field-label {
  left: auto;
  right: 32px
}

#lp-form .has-error ~ .field-error {
  display: block
}

#lp-form .btn {
  display: block;
  width: 100%;
  height: 60px;
  background: #ec602b;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
}

#lp-form .btn-hint span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: .6;
}

#lp-form .btn.disabled, .btn[disabled] {
  background: rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, .3);
  box-shadow: none;
}

#lp-form .form-bottom {
  margin-top: 24px;
  color: #fff
}

#lp-form .form-bottom a {
  color: inherit;
  text-decoration: underline
}

#lp-form .rtl-text .form-bottom {
  text-align: right
}

#lp-form .footer {
  color: #816969;
  opacity: .7;
  margin-top: 72px
}

#lp-form .footer a {
  color: inherit
}

#lp-form .footer.hidden {
  padding-top: 50vh
}

#lp-form .d-none {
  display: none
}


#lp-form .loading.show {
  display: block
}

#lp-form .webt-icon {
  width: 220px;
  height: 220px;
  margin: auto;
  position: relative
}

#lp-form .webt-icon .progress_arrow {
  width: 135px;
  height: auto
}

#lp-form .progress_arrow {
  opacity: 0;
  transition: all 1s;
  -webkit-animation: bounceUpDown 2s ease-in-out infinite;
  -o-animation: bounceUpDown 2s ease-in-out infinite;
  animation: bounceUpDown 2s ease-in-out infinite
}

@keyframes bounceUpDown {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
    transform: translateY(-5%)
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
}

#lp-form .webt-icon .value {
  fill: #ec602b;
  text-anchor: middle;
  font-weight: 600;
  font-size: 42px;
  transition: all 1s
}

#lp-form .webt-icon__value {
  color: #ec602b;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  font-size: 46px;
  font-weight: 600;
  top: 0;
  left: 0
}

#lp-form .icon-progress {
  width: 100%;
  height: 100%;
  position: relative
}

#lp-form .icon-progress__bg {
  fill: none;
  stroke: rgba(0, 0, 0, .1)
}

#lp-form .meter-1 {
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
  stroke: #ec602b;
  stroke-width: 14px;
  animation: progress-1 1.3s ease-out
}

@keyframes progress-1 {
  from {
    stroke-dashoffset: 800
  }

  to {
    stroke-dashoffset: 0
  }
}


#lp-form .new-steps {
  font-weight: 200;
  display: flex;
  flex-direction: column;
  text-align: center
}
#lp-form .new-steps .info-title{
  font-size: 16px;
  font-weight: bold;
}
#lp-form .new-steps .step1,
#lp-form .new-steps .step2 {
  border: 2px solid #ec602b;
  border-radius: 50px;
  padding: 5px 20px 5px 10px;
  min-height: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  margin: 5px 0;
  font-size: 14px;
}
#lp-form .new-steps div span{
  position: absolute;
  text-align: center;
  display: inline-block;
  width: 26px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  background-color: #ec602b;
  font-size: 21px;
}
#lp-form .new-steps div p{
  padding-left: 30px;
  text-align: left;
  font-size: 14px;
  margin: 0;
}