@charset "UTF-8";
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Montserrat";
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/acumatica-font-v1.eot?q9otuf");
  src: url("../fonts/acumatica-font-v1.eot?q9otuf#iefix") format("embedded-opentype"), url("../fonts/acumatica-font-v1.woff2?q9otuf") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
}

.pyro {
  display: none;
}

.demo-website {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
  z-index: -1;
}

.pyro > .before, .pyro > .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: -355px -600.6666666667px hsl(63, 100%, 50%), -233px -421.6666666667px hsl(85, 100%, 50%), -253px -567.6666666667px hsl(23, 100%, 50%), -33px -221.6666666667px hsl(276, 100%, 50%), 213px -411.6666666667px hsl(13, 100%, 50%), -247px 92.3333333333px hsl(95, 100%, 50%), 185px -171.6666666667px hsl(221, 100%, 50%), 52px -201.6666666667px hsl(127, 100%, 50%), 144px -494.6666666667px hsl(202, 100%, 50%), -38px -208.6666666667px hsl(247, 100%, 50%), -177px -653.6666666667px hsl(101, 100%, 50%), -64px -199.6666666667px hsl(224, 100%, 50%), -126px -293.6666666667px hsl(50, 100%, 50%), -110px -541.6666666667px hsl(189, 100%, 50%), 139px -60.6666666667px hsl(301, 100%, 50%), 169px -173.6666666667px hsl(325, 100%, 50%), -139px -93.6666666667px hsl(303, 100%, 50%), 383px -208.6666666667px hsl(6, 100%, 50%), 357px 24.3333333333px hsl(292, 100%, 50%), 238px -513.6666666667px hsl(196, 100%, 50%), -380px -466.6666666667px hsl(159, 100%, 50%), 77px -69.6666666667px hsl(280, 100%, 50%), -217px -160.6666666667px hsl(352, 100%, 50%), 25px -297.6666666667px hsl(263, 100%, 50%), 133px 39.3333333333px hsl(331, 100%, 50%), 367px -638.6666666667px hsl(35, 100%, 50%), 258px -0.6666666667px hsl(280, 100%, 50%), -46px -209.6666666667px hsl(18, 100%, 50%), -210px -578.6666666667px hsl(196, 100%, 50%), -146px -435.6666666667px hsl(177, 100%, 50%), 384px -476.6666666667px hsl(350, 100%, 50%), 74px -115.6666666667px hsl(224, 100%, 50%), -295px -435.6666666667px hsl(181, 100%, 50%), 141px 128.3333333333px hsl(311, 100%, 50%), -381px -136.6666666667px hsl(140, 100%, 50%), -64px -407.6666666667px hsl(202, 100%, 50%), -379px -656.6666666667px hsl(69, 100%, 50%), 351px -104.6666666667px hsl(248, 100%, 50%), -249px -431.6666666667px hsl(113, 100%, 50%), -396px -352.6666666667px hsl(133, 100%, 50%), -271px -536.6666666667px hsl(351, 100%, 50%), -25px 42.3333333333px hsl(169, 100%, 50%), 198px -483.6666666667px hsl(132, 100%, 50%), 327px -22.6666666667px hsl(226, 100%, 50%), 82px 80.3333333333px hsl(150, 100%, 50%), 274px 27.3333333333px hsl(75, 100%, 50%), 387px -463.6666666667px hsl(34, 100%, 50%), 165px -524.6666666667px hsl(219, 100%, 50%), 104px -556.6666666667px hsl(164, 100%, 50%), 69px -560.6666666667px hsl(100, 100%, 50%), 360px 11.3333333333px hsl(205, 100%, 50%);
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: -355px -600.6666666667px hsl(63, 100%, 50%), -233px -421.6666666667px hsl(85, 100%, 50%), -253px -567.6666666667px hsl(23, 100%, 50%), -33px -221.6666666667px hsl(276, 100%, 50%), 213px -411.6666666667px hsl(13, 100%, 50%), -247px 92.3333333333px hsl(95, 100%, 50%), 185px -171.6666666667px hsl(221, 100%, 50%), 52px -201.6666666667px hsl(127, 100%, 50%), 144px -494.6666666667px hsl(202, 100%, 50%), -38px -208.6666666667px hsl(247, 100%, 50%), -177px -653.6666666667px hsl(101, 100%, 50%), -64px -199.6666666667px hsl(224, 100%, 50%), -126px -293.6666666667px hsl(50, 100%, 50%), -110px -541.6666666667px hsl(189, 100%, 50%), 139px -60.6666666667px hsl(301, 100%, 50%), 169px -173.6666666667px hsl(325, 100%, 50%), -139px -93.6666666667px hsl(303, 100%, 50%), 383px -208.6666666667px hsl(6, 100%, 50%), 357px 24.3333333333px hsl(292, 100%, 50%), 238px -513.6666666667px hsl(196, 100%, 50%), -380px -466.6666666667px hsl(159, 100%, 50%), 77px -69.6666666667px hsl(280, 100%, 50%), -217px -160.6666666667px hsl(352, 100%, 50%), 25px -297.6666666667px hsl(263, 100%, 50%), 133px 39.3333333333px hsl(331, 100%, 50%), 367px -638.6666666667px hsl(35, 100%, 50%), 258px -0.6666666667px hsl(280, 100%, 50%), -46px -209.6666666667px hsl(18, 100%, 50%), -210px -578.6666666667px hsl(196, 100%, 50%), -146px -435.6666666667px hsl(177, 100%, 50%), 384px -476.6666666667px hsl(350, 100%, 50%), 74px -115.6666666667px hsl(224, 100%, 50%), -295px -435.6666666667px hsl(181, 100%, 50%), 141px 128.3333333333px hsl(311, 100%, 50%), -381px -136.6666666667px hsl(140, 100%, 50%), -64px -407.6666666667px hsl(202, 100%, 50%), -379px -656.6666666667px hsl(69, 100%, 50%), 351px -104.6666666667px hsl(248, 100%, 50%), -249px -431.6666666667px hsl(113, 100%, 50%), -396px -352.6666666667px hsl(133, 100%, 50%), -271px -536.6666666667px hsl(351, 100%, 50%), -25px 42.3333333333px hsl(169, 100%, 50%), 198px -483.6666666667px hsl(132, 100%, 50%), 327px -22.6666666667px hsl(226, 100%, 50%), 82px 80.3333333333px hsl(150, 100%, 50%), 274px 27.3333333333px hsl(75, 100%, 50%), 387px -463.6666666667px hsl(34, 100%, 50%), 165px -524.6666666667px hsl(219, 100%, 50%), 104px -556.6666666667px hsl(164, 100%, 50%), 69px -560.6666666667px hsl(100, 100%, 50%), 360px 11.3333333333px hsl(205, 100%, 50%);
  }
}
@-o-keyframes bang {
  to {
    box-shadow: -355px -600.6666666667px hsl(63, 100%, 50%), -233px -421.6666666667px hsl(85, 100%, 50%), -253px -567.6666666667px hsl(23, 100%, 50%), -33px -221.6666666667px hsl(276, 100%, 50%), 213px -411.6666666667px hsl(13, 100%, 50%), -247px 92.3333333333px hsl(95, 100%, 50%), 185px -171.6666666667px hsl(221, 100%, 50%), 52px -201.6666666667px hsl(127, 100%, 50%), 144px -494.6666666667px hsl(202, 100%, 50%), -38px -208.6666666667px hsl(247, 100%, 50%), -177px -653.6666666667px hsl(101, 100%, 50%), -64px -199.6666666667px hsl(224, 100%, 50%), -126px -293.6666666667px hsl(50, 100%, 50%), -110px -541.6666666667px hsl(189, 100%, 50%), 139px -60.6666666667px hsl(301, 100%, 50%), 169px -173.6666666667px hsl(325, 100%, 50%), -139px -93.6666666667px hsl(303, 100%, 50%), 383px -208.6666666667px hsl(6, 100%, 50%), 357px 24.3333333333px hsl(292, 100%, 50%), 238px -513.6666666667px hsl(196, 100%, 50%), -380px -466.6666666667px hsl(159, 100%, 50%), 77px -69.6666666667px hsl(280, 100%, 50%), -217px -160.6666666667px hsl(352, 100%, 50%), 25px -297.6666666667px hsl(263, 100%, 50%), 133px 39.3333333333px hsl(331, 100%, 50%), 367px -638.6666666667px hsl(35, 100%, 50%), 258px -0.6666666667px hsl(280, 100%, 50%), -46px -209.6666666667px hsl(18, 100%, 50%), -210px -578.6666666667px hsl(196, 100%, 50%), -146px -435.6666666667px hsl(177, 100%, 50%), 384px -476.6666666667px hsl(350, 100%, 50%), 74px -115.6666666667px hsl(224, 100%, 50%), -295px -435.6666666667px hsl(181, 100%, 50%), 141px 128.3333333333px hsl(311, 100%, 50%), -381px -136.6666666667px hsl(140, 100%, 50%), -64px -407.6666666667px hsl(202, 100%, 50%), -379px -656.6666666667px hsl(69, 100%, 50%), 351px -104.6666666667px hsl(248, 100%, 50%), -249px -431.6666666667px hsl(113, 100%, 50%), -396px -352.6666666667px hsl(133, 100%, 50%), -271px -536.6666666667px hsl(351, 100%, 50%), -25px 42.3333333333px hsl(169, 100%, 50%), 198px -483.6666666667px hsl(132, 100%, 50%), 327px -22.6666666667px hsl(226, 100%, 50%), 82px 80.3333333333px hsl(150, 100%, 50%), 274px 27.3333333333px hsl(75, 100%, 50%), 387px -463.6666666667px hsl(34, 100%, 50%), 165px -524.6666666667px hsl(219, 100%, 50%), 104px -556.6666666667px hsl(164, 100%, 50%), 69px -560.6666666667px hsl(100, 100%, 50%), 360px 11.3333333333px hsl(205, 100%, 50%);
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: -355px -600.6666666667px hsl(63, 100%, 50%), -233px -421.6666666667px hsl(85, 100%, 50%), -253px -567.6666666667px hsl(23, 100%, 50%), -33px -221.6666666667px hsl(276, 100%, 50%), 213px -411.6666666667px hsl(13, 100%, 50%), -247px 92.3333333333px hsl(95, 100%, 50%), 185px -171.6666666667px hsl(221, 100%, 50%), 52px -201.6666666667px hsl(127, 100%, 50%), 144px -494.6666666667px hsl(202, 100%, 50%), -38px -208.6666666667px hsl(247, 100%, 50%), -177px -653.6666666667px hsl(101, 100%, 50%), -64px -199.6666666667px hsl(224, 100%, 50%), -126px -293.6666666667px hsl(50, 100%, 50%), -110px -541.6666666667px hsl(189, 100%, 50%), 139px -60.6666666667px hsl(301, 100%, 50%), 169px -173.6666666667px hsl(325, 100%, 50%), -139px -93.6666666667px hsl(303, 100%, 50%), 383px -208.6666666667px hsl(6, 100%, 50%), 357px 24.3333333333px hsl(292, 100%, 50%), 238px -513.6666666667px hsl(196, 100%, 50%), -380px -466.6666666667px hsl(159, 100%, 50%), 77px -69.6666666667px hsl(280, 100%, 50%), -217px -160.6666666667px hsl(352, 100%, 50%), 25px -297.6666666667px hsl(263, 100%, 50%), 133px 39.3333333333px hsl(331, 100%, 50%), 367px -638.6666666667px hsl(35, 100%, 50%), 258px -0.6666666667px hsl(280, 100%, 50%), -46px -209.6666666667px hsl(18, 100%, 50%), -210px -578.6666666667px hsl(196, 100%, 50%), -146px -435.6666666667px hsl(177, 100%, 50%), 384px -476.6666666667px hsl(350, 100%, 50%), 74px -115.6666666667px hsl(224, 100%, 50%), -295px -435.6666666667px hsl(181, 100%, 50%), 141px 128.3333333333px hsl(311, 100%, 50%), -381px -136.6666666667px hsl(140, 100%, 50%), -64px -407.6666666667px hsl(202, 100%, 50%), -379px -656.6666666667px hsl(69, 100%, 50%), 351px -104.6666666667px hsl(248, 100%, 50%), -249px -431.6666666667px hsl(113, 100%, 50%), -396px -352.6666666667px hsl(133, 100%, 50%), -271px -536.6666666667px hsl(351, 100%, 50%), -25px 42.3333333333px hsl(169, 100%, 50%), 198px -483.6666666667px hsl(132, 100%, 50%), 327px -22.6666666667px hsl(226, 100%, 50%), 82px 80.3333333333px hsl(150, 100%, 50%), 274px 27.3333333333px hsl(75, 100%, 50%), 387px -463.6666666667px hsl(34, 100%, 50%), 165px -524.6666666667px hsl(219, 100%, 50%), 104px -556.6666666667px hsl(164, 100%, 50%), 69px -560.6666666667px hsl(100, 100%, 50%), 360px 11.3333333333px hsl(205, 100%, 50%);
  }
}
@keyframes bang {
  to {
    box-shadow: -355px -600.6666666667px hsl(63, 100%, 50%), -233px -421.6666666667px hsl(85, 100%, 50%), -253px -567.6666666667px hsl(23, 100%, 50%), -33px -221.6666666667px hsl(276, 100%, 50%), 213px -411.6666666667px hsl(13, 100%, 50%), -247px 92.3333333333px hsl(95, 100%, 50%), 185px -171.6666666667px hsl(221, 100%, 50%), 52px -201.6666666667px hsl(127, 100%, 50%), 144px -494.6666666667px hsl(202, 100%, 50%), -38px -208.6666666667px hsl(247, 100%, 50%), -177px -653.6666666667px hsl(101, 100%, 50%), -64px -199.6666666667px hsl(224, 100%, 50%), -126px -293.6666666667px hsl(50, 100%, 50%), -110px -541.6666666667px hsl(189, 100%, 50%), 139px -60.6666666667px hsl(301, 100%, 50%), 169px -173.6666666667px hsl(325, 100%, 50%), -139px -93.6666666667px hsl(303, 100%, 50%), 383px -208.6666666667px hsl(6, 100%, 50%), 357px 24.3333333333px hsl(292, 100%, 50%), 238px -513.6666666667px hsl(196, 100%, 50%), -380px -466.6666666667px hsl(159, 100%, 50%), 77px -69.6666666667px hsl(280, 100%, 50%), -217px -160.6666666667px hsl(352, 100%, 50%), 25px -297.6666666667px hsl(263, 100%, 50%), 133px 39.3333333333px hsl(331, 100%, 50%), 367px -638.6666666667px hsl(35, 100%, 50%), 258px -0.6666666667px hsl(280, 100%, 50%), -46px -209.6666666667px hsl(18, 100%, 50%), -210px -578.6666666667px hsl(196, 100%, 50%), -146px -435.6666666667px hsl(177, 100%, 50%), 384px -476.6666666667px hsl(350, 100%, 50%), 74px -115.6666666667px hsl(224, 100%, 50%), -295px -435.6666666667px hsl(181, 100%, 50%), 141px 128.3333333333px hsl(311, 100%, 50%), -381px -136.6666666667px hsl(140, 100%, 50%), -64px -407.6666666667px hsl(202, 100%, 50%), -379px -656.6666666667px hsl(69, 100%, 50%), 351px -104.6666666667px hsl(248, 100%, 50%), -249px -431.6666666667px hsl(113, 100%, 50%), -396px -352.6666666667px hsl(133, 100%, 50%), -271px -536.6666666667px hsl(351, 100%, 50%), -25px 42.3333333333px hsl(169, 100%, 50%), 198px -483.6666666667px hsl(132, 100%, 50%), 327px -22.6666666667px hsl(226, 100%, 50%), 82px 80.3333333333px hsl(150, 100%, 50%), 274px 27.3333333333px hsl(75, 100%, 50%), 387px -463.6666666667px hsl(34, 100%, 50%), 165px -524.6666666667px hsl(219, 100%, 50%), 104px -556.6666666667px hsl(164, 100%, 50%), 69px -560.6666666667px hsl(100, 100%, 50%), 360px 11.3333333333px hsl(205, 100%, 50%);
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
#shadow-container {
  width: 100%;
  height: 100%;
  padding-top: 50px;
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
}

.robot {
  position: absolute;
  top: -70px;
  right: -160px;
  animation: move-robot 2s ease-in-out 0s;
  animation-iteration-count: infinite;
  z-index: -1;
  width: 250px;
}

.robot-container {
  position: absolute;
  top: -70px;
  right: 50px;
  scale: 0.6;
  animation: move-robot 3s ease-in-out 0s;
  animation-iteration-count: infinite;
  pointer-events: none;
}
.robot-container.robot-container-off .hand {
  position: absolute;
  top: 103px;
  left: -53px;
  display: inline-block;
  transform: rotate(197deg);
  animation: hand-swing-off 4s ease-in-out infinite;
}
.robot-container.robot-container-off .eye {
  transform-origin: center center; /* Точка трансформации */
  animation: eye-blink-off 6s infinite; /* Анимация моргания */
}
.robot-container.robot-container-off .eye-second {
  transform-origin: center center; /* Точка трансформации */
  animation: eye-blink-off 6s infinite; /* Анимация моргания */
}
.robot-container.robot-container-off .mouth {
  position: absolute;
  top: 181px;
  left: 104px;
  transform-origin: center; /* Центр трансформации */
  animation: mouth-talk 1.5s ease-out 0.3s; /* Однократная анимация */
}
.robot-container.robot-container-success {
  animation: move-in 1s ease-out forwards, hover 1.5s ease-in-out infinite;
  animation-delay: 0s, 1s; /* Первая анимация начинается сразу, вторая запускается после 2 секунд */
}
.robot-container.robot-container-success .hand {
  animation: hand-swing-success 2s ease-in-out infinite;
}
.robot-container.robot-container-success .hand-front {
  animation: hand-swing-second-success 2s ease-in-out infinite;
}
.robot-container.robot-container-important {
  animation: move-in 1s ease-out forwards, hover 1.5s ease-in-out infinite;
  animation-delay: 0s, 1s; /* Первая анимация начинается сразу, вторая запускается после 2 секунд */
}
.robot-container.robot-container-important .hand {
  animation: hand-swing-important 2s ease-in-out infinite;
}
.robot-container.robot-container-important .hand-front {
  animation: hand-swing-second-important 2s ease-in-out infinite;
}
.robot-container .hand {
  position: absolute;
  top: 105px;
  left: -70px;
  display: inline-block;
  transform: rotate(-40deg);
  animation: hand-swing 1.5s ease-in-out infinite;
}
.robot-container .robot-animation {
  position: absolute;
  top: 0;
  left: 0;
}
.robot-container .eye {
  position: absolute;
  top: 145px;
  left: 65px;
  display: inline-block;
  transform-origin: center center; /* Точка трансформации */
  animation: eye-blink 6s infinite; /* Анимация моргания */
}
.robot-container .eye-second {
  position: absolute;
  top: 142px;
  left: 135px;
  transform-origin: center center; /* Точка трансформации */
  animation: eye-blink 6s infinite; /* Анимация моргания */
}
.robot-container .hand-front {
  position: absolute;
  top: 109px;
  left: 65px;
  display: inline-block;
  transform: rotate(-30deg);
  animation: hand-swing-second 4s ease-in-out infinite;
}
.robot-container .mouth {
  position: absolute;
  top: 181px;
  left: 104px;
  transform-origin: center; /* Центр трансформации */
  animation: mouth-talk 1.5s ease-out 2.5s; /* Однократная анимация */
}

@keyframes mouth-talk {
  0% {
    transform: scale(1, 1); /* Нейтральное положение */
  }
  10% {
    transform: scale(1.2, 0.2); /* Слегка вытянутый по горизонтали */
  }
  20% {
    transform: scale(1, 1); /* Слегка вытянутый по вертикали */
  }
  30% {
    transform: scale(1.2, 0.2); /* Широкое открытие */
  }
  40% {
    transform: scale(1, 1); /* Слегка вытянутый по вертикали */
  }
  50% {
    transform: scale(1.2, 0.6); /* Глубокое вертикальное движение */
  }
  60% {
    transform: scale(1, 1); /* Нейтральное положение */
  }
  70% {
    transform: scale(1.2, 0.2); /* Мягкое движение */
  }
  80% {
    transform: scale(1.2, 0.6); /* Ответное мягкое движение */
  }
  90% {
    transform: scale(1, 1); /* Возврат к нейтральному */
  }
  100% {
    transform: scale(1, 1); /* Конец анимации */
  }
}
@keyframes move-robot {
  0% {
    transform: translateY(15px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(15px);
  }
}
@keyframes move-in {
  0% {
    transform: translateX(100px) translateY(80px); /* Начальная позиция справа за экраном */
  }
  100% {
    transform: translateX(0) translateY(15px); /* Робот прилетает в центр */
  }
}
@keyframes hover {
  0% {
    transform: translateY(15px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(15px);
  }
}
@keyframes hand-swing-second {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-40deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes hand-swing-off {
  0% {
    transform: rotate(197deg);
  }
  50% {
    transform: rotate(203deg);
  }
  100% {
    transform: rotate(197deg);
  }
}
@keyframes hand-swing-second-success {
  0% {
    transform: rotate(70deg);
  }
  50% {
    transform: rotate(80deg);
  }
  100% {
    transform: rotate(70deg);
  }
}
@keyframes hand-swing-success {
  0% {
    transform: rotate(-70deg);
  }
  50% {
    transform: rotate(-80deg);
  }
  100% {
    transform: rotate(-70deg);
  }
}
@keyframes hand-swing-second-important {
  0% {
    transform: rotate(150deg);
  }
  50% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(150deg);
  }
}
@keyframes hand-swing-important {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-50deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes hand-swing {
  0% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}
@keyframes eye-blink {
  0% {
    transform: scaleY(1); /* Открытый глаз */
  }
  10% {
    transform: scaleY(0.2); /* Почти закрытый глаз */
  }
  12% {
    transform: scaleY(0.05); /* Полностью закрытый глаз */
  }
  15% {
    transform: scaleY(0.2); /* Почти открытый глаз */
  }
  20% {
    transform: scaleY(1); /* Полностью открытый глаз */
  }
  50% {
    transform: scaleY(1); /* Длинный промежуток открытого глаза */
  }
  52% {
    transform: scaleY(0.1); /* Быстрое моргание */
  }
  55% {
    transform: scaleY(1); /* Открытый глаз */
  }
  75% {
    transform: scaleY(1); /* Открытый глаз */
  }
  100% {
    transform: scaleY(1); /* Конец цикла */
  }
}
@keyframes eye-blink-off {
  0% {
    transform: scaleY(1); /* Открытый глаз */
  }
  10% {
    transform: scaleY(1); /* Почти закрытый глаз */
  }
  12% {
    transform: scaleY(0.05); /* Полностью закрытый глаз */
  }
  15% {
    transform: scaleY(1); /* Почти открытый глаз */
  }
  20% {
    transform: scaleY(1); /* Полностью открытый глаз */
  }
  48% {
    transform: scaleY(1); /* Полностью открытый глаз */
  }
  50% {
    transform: scaleY(0.05); /* Длинный промежуток открытого глаза */
  }
  52% {
    transform: scaleY(1); /* Быстрое моргание */
  }
  55% {
    transform: scaleY(0.05); /* Открытый глаз */
  }
  60% {
    transform: scaleY(1); /* Открытый глаз */
  }
  75% {
    transform: scaleY(1); /* Открытый глаз */
  }
  100% {
    transform: scaleY(1); /* Конец цикла */
  }
}
.next-button {
  z-index: 999999999999999;
  display: none;
}

.button-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  cursor: pointer;
  display: none;
}
.button-bg.hide-animation {
  overflow: inherit;
  box-shadow: 0 0 55px 1px #377bce;
  /*transform: scaleY(1.3) scaleX(1);*/
  margin-top: -1px;
  border-radius: 5px;
  opacity: 0;
  animation: show-bb 0.3s ease-out 0.3s forwards;
  cursor: default;
}
.button-bg.hide-animation:before {
  display: none !important;
}
.button-bg.new-animation:before {
  display: none !important;
}
.button-bg:before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 225, 255, 0.62) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  -webkit-animation: shine 1s;
  animation: shine 1s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.hide-button {
  display: none !important;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
#tooltip {
  border: 3px solid black;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(255, 255, 255, 0.4);
}

#iframe-container {
  margin-right: 20px;
}

#content-container {
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #1c3666;
  pointer-events: none;
  font-family: "Montserrat";
}
#content-container .step-content {
  /*pointer-events: auto;*/
}
#content-container #next-button {
  pointer-events: auto;
}
#content-container .form-button, #content-container .form-input, #content-container #rating-container {
  pointer-events: auto;
}

#step-content {
  margin-bottom: 20px;
}

.bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: rgba(214, 220, 229, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.bg.bg-pointer {
  pointer-events: auto;
}
.bg.hide-bg {
  animation: hide-bg 0.5s ease-out 0s forwards;
}

@keyframes show-bg {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: inherit;
  }
}
@keyframes hide-bg {
  0% {
    opacity: 1;
    visibility: inherit;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.form-button {
  height: 45px;
  padding: 0 35px;
  border-radius: 10px;
  margin-top: 10px;
  background: #1c3666;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
  font-family: "Montserrat";
  box-shadow: 0 4px 4px rgba(8, 8, 8, 0.0784313725), 0 1px 2px rgba(8, 8, 8, 0.2), inset 0 6px 12px rgba(255, 255, 255, 0.1215686275), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.form-button:hover {
  background: #132445;
  box-shadow: 0 1px 1px rgba(8, 8, 8, 0.0784313725), 0 1px 1px rgba(8, 8, 8, 0.2), inset 0 6px 12px rgba(255, 255, 255, 0.1215686275), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.form-button.form-button-link {
  display: flex;
  width: 285px;
  margin: 10px auto 0;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.form-button:active {
  box-shadow: none;
}

.device-support {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.device-support .device-support-container {
  text-align: center;
}
.device-support .device-support-container .device-support-title {
  margin-bottom: 15px;
  font-size: 18px;
}

.form-input {
  height: 50px;
  padding: 0 10px;
  border: 2px solid #d3d6ec;
  border-radius: 5px;
  outline: none;
  background: #fff;
  text-align: center;
  font-size: 18px;
  color: #1c3666;
  margin-bottom: 10px;
}
.form-input:focus {
  border-color: #1c3666;
}

.step-content {
  animation: move-block 0.3s ease-out 0.3s forwards;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 420px;
  position: absolute;
  box-shadow: 0 50px 200px rgba(25, 60, 125, 0.3);
  z-index: 2;
  opacity: 0;
  display: none;
}
.step-content.center {
  position: relative;
}
.step-content.right {
  left: 100%;
}
.step-content.left {
  right: 100%;
  margin: -25px 20px 0 0;
}
.step-content.left .robot-section {
  transform: scaleX(-1);
  position: absolute;
  left: -115px;
  bottom: 60px;
}
.step-content.left .block-arrow {
  position: absolute;
}
.step-content.left .block-arrow.block-left {
  right: 10px;
  top: 30px;
}
.step-content.left .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.left .robot-container {
  right: auto;
  left: -150px;
}
.step-content.top {
  bottom: 100%;
  margin: 0 0 14px 0;
  box-shadow: 0 -50px 200px rgba(25, 60, 125, 0.3);
  left: auto;
  right: 0;
}
.step-content.top .robot-section {
  position: absolute;
  bottom: 60px;
  right: 0;
  top: 0;
}
.step-content.top .block-arrow {
  position: absolute;
}
.step-content.top .block-arrow.block-left {
  left: auto;
  right: 30px;
  margin: 0 auto;
  bottom: 10px;
}
.step-content.top .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.bottom {
  top: 100%;
  margin-top: 15px;
}
.step-content.bottom .block-arrow {
  position: absolute;
}
.step-content.bottom .block-arrow.block-left {
  top: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.step-content.bottom .block-arrow.block-left::before {
  left: 35px;
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.show-step {
  display: block;
}
.step-content.first-step-content {
  opacity: 0;
  animation: move-block 0.5s ease-out 2s forwards;
}
.step-content p {
  font-size: 17px;
}
.step-content.step-content-top-small {
  position: absolute;
  left: 0;
  margin: 0 auto;
  bottom: 190%;
  z-index: 3;
  box-shadow: 0 -50px 200px rgba(25, 65, 125, 0.55);
}
.step-content.step-content-top-small .block-arrow {
  position: absolute;
}
.step-content.step-content-top-small .block-arrow.block-left {
  left: 30px;
  bottom: 10px;
}
.step-content.step-content-top-small .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.step-content-top-right-small {
  position: absolute;
  right: 70%;
  margin: 0 auto;
  bottom: 150%;
  z-index: 3;
  box-shadow: 0 -50px 200px rgba(25, 65, 125, 0.35);
}
.step-content.step-content-top-right-small .block-arrow {
  position: absolute;
}
.step-content.step-content-top-right-small .block-arrow.block-left {
  right: 50px;
  bottom: 10px;
}
.step-content.step-content-top-right-small .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.step-content-bottom-center {
  position: absolute;
  left: 0;
  right: 0;
  margin: 15px auto 0;
  top: 100%;
  z-index: 3;
  box-shadow: 0 50px 200px rgba(25, 65, 125, 0.35);
}
.step-content.step-content-bottom-center .block-arrow {
  position: absolute;
}
.step-content.step-content-bottom-center .block-arrow.block-left {
  left: 0;
  top: -10px;
  right: 0;
  margin: 0 auto;
}
.step-content.step-content-bottom-center .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}
.step-content.right {
  position: absolute;
  left: 100%;
  margin-left: 15px;
  margin-top: -25px;
  z-index: 3;
}
.step-content.right.step-content-small {
  margin-top: -27px;
}
.step-content.right .block-arrow {
  position: absolute;
}
.step-content.right .block-arrow.block-left {
  left: -10px;
  top: 30px;
}
.step-content.right .block-arrow.block-left::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.98);
  z-index: -1;
  transform: rotate(45deg);
}

@keyframes move-block {
  0% {
    opacity: 0;
    scale: 0.8;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    scale: 1;
    transform: translateY(0px);
  }
}
#rating-container span {
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
  user-select: none;
}

#rating-container span.active {
  color: gold;
}

.load-screen {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background: #fff;
  z-index: 10000000000000000000000000000;
  box-shadow: 0 100px 70px rgba(25, 65, 125, 0.1);
  overflow: hidden;
}
.load-screen.load-success {
  animation: move 1s ease-in-out 2s forwards;
}
.load-screen img {
  width: 100%;
}

.load-screen .load-logo {
  position: relative;
  width: 200px;
}

.load-screen .load-logo svg {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.load-screen .load-logo .load-1 {
  animation: load 6s ease-in-out 0.2s infinite;
}

.load-screen .load-logo .load-2 {
  animation: load 6s ease-in-out 0.4s infinite;
}

.load-screen .load-logo .load-3 {
  animation: load 6s ease-in-out 0.6s infinite;
}

.load-screen .load-logo .load-4 {
  animation: load 6s ease-in-out 0.8s infinite;
}

@keyframes load {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  16.67% { /* Плавное появление */
    opacity: 1;
    transform: scale(1);
  }
  50% { /* Элемент остается видимым */
    opacity: 1;
    transform: scale(1);
  }
  66.67% { /* Плавное исчезновение */
    opacity: 0;
    transform: scale(0.9);
  }
  83.33% { /* Короткая пауза после исчезновения */
    opacity: 0;
    transform: scale(0.9);
  }
  100% { /* Подготовка к следующему циклу */
    opacity: 0;
    transform: scale(0.9);
  }
}
.feedback-title {
  font-size: 17px;
  text-align: center;
  display: block;
  margin-top: 10px;
}

#feedback-input {
  margin: 20px auto 10px;
  width: 334px;
  height: 100px;
  max-height: 200px;
  max-width: 100%;
  min-width: 100%;
  min-height: 100px;
  text-align: left;
  padding: 10px;
}

@keyframes move {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-130%);
  }
}
.shadow-section {
  width: 100%;
  height: 100%;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}
@property --gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}
@property --gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
:root {
  --d: 2500ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: rgba(168, 239, 255, 1);
  --c2: rgba(168, 239, 255, 0.1);
}

.bb {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  margin-top: -1px;
  opacity: 0;
  animation: show-bb 0.3s ease-out 0.3s forwards;
}

.bb {
  box-shadow: 0 0 55px 1px rgb(55, 123, 206);
  transform: scaleY(1.3) scaleX(1.1);
}

@keyframes show-bb {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
@keyframes loading {
  0% {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 15px 2px rgba(0, 225, 255, 0.84);
  }
  100% {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}*/
.menu-float {
  position: fixed;
  bottom: -80px;
  left: 30px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}
.menu-float.show-menu {
  opacity: 1;
  bottom: 30px;
}
.menu-float .menu-float-inner {
  position: relative;
  display: flex;
  justify-content: center;
}
.menu-float .menu-float-inner .menu-float-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: fit-content;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  pointer-events: auto;
  border: 1px solid #d0d5db;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom {
  position: relative;
  display: flex;
  justify-content: center;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-logo {
  display: flex;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-logo .menu-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-logo .menu-logo-link a {
  padding: 0 20px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-list {
  display: flex;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-list ul {
  display: flex;
  list-style: none;
  padding: 0;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-list ul li {
  display: flex;
}
.menu-float .menu-float-inner .menu-float-wrapper .menu-float-bottom .menu-float-list ul li a {
  padding: 0 12px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
}

.loading-line {
  position: relative;
  margin-top: 10px;
}

.loading-line-low {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 3px;
  background-color: rgba(28, 54, 102, 0.26);
}

.loading-line-High {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(0%, -50%);
  width: 0;
  height: 3px;
  background-color: #1c3666;
  animation: animation-line-LightColor 4s infinite ease-in-out;
}

.demo-website {
  animation: move-iframe 4s ease-out 4s forwards;
  transform: translateY(50px);
}

.load-logo img {
  animation-name: image;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  margin-bottom: 5px;
}

.video {
  position: absolute;
  margin: 0 auto;
  z-index: -1;
  border: 1px solid #fff;
  opacity: 0.5;
  animation-name: video;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes video {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes image {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes move-iframe {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes animation-line-LightColor {
  0% {
    padding-right: 1px;
  }
  50% {
    padding-right: 25%;
  }
  99% {
    padding-right: 40%;
  }
  100% {
    padding-right: 0px;
  }
}
.pyro {
  z-index: 1;
}

.steps-number-section {
  position: absolute;
  font-size: 12px;
  opacity: 0.5;
  left: 15px;
  bottom: 15px;
}

@media (max-width: 800px) {
  .device-support {
    display: flex;
    z-index: 99999999;
  }
}
@media (max-width: 500px) {
  html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  #content-container {
    /*display: none;*/
  }
  /*  .step-content-mobile {
      left: 0!important;
      right: 0!important;
      top: 100%!important;
      width: 95%!important;
      margin: 6px auto 0!important;
      & .block-arrow {
        top: -10px!important;
        left: 0!important;
        right: 0!important;
        margin: 0 auto!important;
      }
      & .robot {
        right: -80px!important;
      }
    }*/
  #leftColumn {
    display: none;
  }
}
@media (min-width: 1200px) {
  /*  .step-content {
      &.step-mobile-bottom {
        margin: -125px 20px 0px 0px !important;
        & .block-arrow {
          top: auto!important;
          bottom: 50px;
        }
      }
    }*/
}
@media (max-width: 1200px) {
  /*  .step-content .block-arrow {
      right: 0!important;
      left: 0!important;
      top: 0!important;
      width: 50px!important;
      display: flex!important;
      align-items: center!important;
      justify-content: center!important;
    }
    .step-content {
      left: 10px !important;
      right: 0 !important;
      width: 95%;
      padding: 25px 15px 25px;
      margin: 70px auto 0 !important;
      top: -15px;
      animation: move-block .3s ease-out .3s forwards;
      font-size: 15px;
      & p {
        font-size: 15px;
      }
      & h2 {
        font-size: 18px;
        margin-top: 0;
      }
      & ul {
        padding-left: 15px;
      }
      &.step-mobile-bottom {
        margin: 0 auto 5px!important;
        top: auto;
        bottom: 100%;
        box-shadow: 0 -30px 200px rgb(25 125 118 / 55%);
        & .block-arrow {
          right: 0!important;
          left: 0!important;
          top: auto!important;
          bottom: 0!important;
          width: 50px!important;
          display: flex!important;
          align-items: center!important;
          justify-content: center!important;
        }
      }
    }*/
  #content-container {
    overflow: hidden;
  }
  @keyframes move-block {
    0% {
      opacity: 0;
      scale: 0.8;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      scale: 1;
      transform: translateY(0px);
    }
  }
}
@media (max-width: 768px) {
  .step-content {
    max-width: 275px;
    padding: 25px 15px;
    top: 100% !important;
    margin-top: 15px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    font-size: 15px;
  }
  .step-content .block-arrow.block-left {
    top: -10px !important;
    left: 10px !important;
    right: auto !important;
  }
  .step-content h2 {
    font-size: 17px;
  }
  .step-content .feedback-title, .step-content p {
    font-size: 15px;
  }
  .step-content.top {
    bottom: 100% !important;
    top: auto !important;
  }
  .step-content.top .block-arrow.block-left {
    top: auto !important;
    left: 10px !important;
    right: auto !important;
    margin: 0 auto !important;
  }
  .products-links-container {
    padding-top: 15px;
  }
  .products-links-container .products-link {
    width: 90px !important;
    height: 65px !important;
  }
  .robot-section {
    scale: 0.4;
    position: absolute;
    top: -55px;
    right: 25px;
  }
  .step-content.left .robot-section {
    transform: scaleX(-1);
    position: absolute;
    left: -40px;
    bottom: 60px;
    right: auto;
  }
  .step-content.left .robot-section .robot-container-success {
    left: -215px;
    top: -94px;
  }
  .form-button.form-button-link {
    max-width: 100%;
    padding: 0;
  }
  /*  #shadow-container {
      padding-top: 40px;
    }*/
  /*  .container {
      overflow: hidden;
      width: 100vw;
      height: 100vh;
    }

    #shadow-container {
      transform: scale(0.8);
      transform-origin: top left;
      width: calc(100vw / 0.8);
      height: calc(100vh / 0.8);
    }*/
  .steps-number-section {
    position: absolute;
    font-size: 12px;
    opacity: 0.5;
    left: auto;
    bottom: auto;
    top: 10px;
    right: auto;
    margin: 0;
  }
  .step-content.top .robot-section {
    transform: scaleX(-1);
    position: absolute;
    left: 0px;
    bottom: 60px;
    right: auto;
  }
  /*  html {
      zoom: 0.8;
    }*/
}

/*# sourceMappingURL=style.css.map */