input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a,
a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

a,
button {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-tap-highlight-color: transparent;
   background: transparent;
   font-family: inherit;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
   max-width: 100%;
}

html {
   scroll-behavior: smooth;
}

body {
   height: 100%;
   font-family: Montserrat;
   background: #212121;
}

/*-----------------------------------------------------------------------------------------*/
.presentation {
   width: 100%;
   height: 100%;
   max-width: 900px;
   margin-inline: auto;
}


.presentation__body {
   height: 100%;
   padding: 1% 1% 2% 1%;
   position: relative;
}

.presentation__logo {
   width: 37%;
   margin-inline: auto;
   margin-bottom: 160px;
}

.presentation__logo img {
   width: 100%;
   height: auto;
   object-fit: contain;
   max-height: 19.3vh;
   min-height: 80px;
}

.presentation__slides {
   height: 100%;
}

.presentation__slide {
   height: 100%;
}

.presentation__title {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 4vw;
   font-weight: 500;
   line-height: 121%;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 0;
   text-align: center;
   transform: translateY(-50%);
   width: 100%;
}

.presentation__blur {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
   width: 70%;
   height: 70%;
   opacity: 0;
   z-index: -1;
   background: radial-gradient(50% 50% at 50% 50%, rgba(60, 242, 255, 0.4), rgba(60, 242, 255, 0.13) 51.5%, rgba(60, 242, 255, 0) 100%);
}

/*------------------------------
Infographic
---------------------------*/
.infographic {
   opacity: 0;
   height: 100%;
}

@media (min-width: 1300px) {
   .infographic {
      margin-top: -20px;
   }
}

.infographic__head {
   position: relative;
   height: 100%;
}

.infographic__title,
.infographic__title-2 {
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 3vw;
   font-weight: 700;
   line-height: 137%;
   text-align: center;
   margin-bottom: 12px;
}

.infographic__titles-2 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
   height: auto;
}

.infographic__subtitles {
   position: relative;
   display: flex;
   width: 100%;
   align-items: center;
   flex-direction: column;
   height: 9vh;
   z-index: 2;
}

@media (min-width: 1200px) {
   .infographic__subtitles {
      margin-top: -20px;
   }
}

.infographic__subtitle,
.infographic__subtitle-2,
.infographic__subtitle-3,
.infographic__subtitle-4 {
   text-align: center;
   display: flex;
   align-items: end;
   width: 100%;
   height: 100%;
   justify-content: center;
   color: rgb(255, 255, 255);
   font-family: Montserrat;
   font-size: 4.5vw;
   font-weight: 400;
   line-height: 121.25%;
   text-align: center;
   position: absolute;
   bottom: 0;
   left: 0;
   padding-bottom: 20px;
   text-wrap: balance;
   line-height: 1.1;
}

@media (min-width: 1200px) {

   .infographic__subtitle,
   .infographic__subtitle-2,
   .infographic__subtitle-3,
   .infographic__subtitle-4 {
      font-size: 20px !important;
      line-height: 140%;
      font-weight: 400;
   }

   .infographic__subtitle-4 img {
      width: 30px !important;
      transform: none !important;
   }
}

@media (max-width: 440px) {

   .infographic__subtitle,
   .infographic__subtitle-2,
   .infographic__subtitle-3,
   .infographic__subtitle-4 {
      font-size: 18px !important;
      line-height: 140%;
      font-weight: 400;
   }
}

.infographic__subtitle-2,
.infographic__subtitle-3,
.infographic__subtitle-4 {
   opacity: 0;
}

.infographic__subtitle-3 {
   font-size: 4vw;
   padding-bottom: 20px;
}

.infographic__subtitle-4 {
   display: block;
   height: auto;
}

.infographic__subtitle-4 img {
   display: inline-block;
   transform: translateY(18px);
   width: calc(14px + 50 * ((100vw - 320px) / 1600));
   height: auto;
   aspect-ratio: 1/1;
}

@media (max-width: 1200px) {
   .infographic__subtitle-4 img {
      transform: translateY(10px);
   }
}

@media (max-width: 880px) {
   .infographic__subtitle-4 img {
      transform: translateY(6px);
   }
}

@media (max-width: 650px) {
   .infographic__subtitle-4 img {
      transform: translateY(2px);
   }
}

.infographic__content {
   position: relative;
   width: 100%;
   height: auto;
   aspect-ratio: 16/10;
}

.infographic__screen {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 16%;
   z-index: 2;
}

.infographic__screen img:not(.infographic__screen-link) {
   display: inline-block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   /* 
border: 1px solid rgb(223, 223, 223);*/
   border-radius: 2.1vw;
   filter: drop-shadow(0px 0px 2px rgb(223, 223, 223));
}

@media (min-width: 1300px) {
   .infographic__screen img:not(.infographic__screen-link) {
      border-radius: 20px;
   }
}

@media (max-width: 600px) {
   .infographic__screen img:not(.infographic__screen-link) {
      filter: drop-shadow(0px 0px 1px rgb(223, 223, 223));
   }
}

.infographic__screen svg {
   position: absolute;
   width: calc(100% + 4px);
   height: calc(100% + 4px);
   top: -2px;
   left: -2px;
   z-index: 2;
}

.infographic__screen svg path {
   stroke-dasharray: 1394;
   stroke-dashoffset: 1394;
   opacity: 0;
}

@media (max-width: 767px) {
   .infographic__screen svg {
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      top: -1px;
      left: -1px;
   }
}

.infographic__screen-links {
   width: 80%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -22%);
   display: flex;
   flex-direction: column;
   gap: calc(2px + 6 * ((100vw - 320px) / 1600));
}

.infographic__screen-link {
   display: inline-block;
   opacity: 0;
   scale: 0;
}

.infographic__social {
   position: absolute;
   width: 70px;
   height: auto;
   aspect-ratio: 1/1;
   border-radius: 23%;
   opacity: 0;
   top: 50%;
   left: 50%;
}

.infographic__social img:not(.page-screen) {
   width: 100%;
   height: 100%;
   border-radius: 24%;
   object-fit: cover;
}

.infographic__social::after {
   content: "";
   z-index: 2;
   background: url(../img/lines/border.svg) center/100% 100% no-repeat;
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

.social-1 .social-line,
.social-2 .social-line,
.social-3 .social-line,
.social-4 .social-line,
.social-5 .social-line {
   position: absolute;
   top: 50%;
   left: 80%;
   z-index: -1;
   height: auto;
   min-height: 2px;
}

.social-6 .social-line,
.social-7 .social-line,
.social-8 .social-line,
.social-9 .social-line,
.social-10 .social-line {
   position: absolute;
   top: 50%;
   right: 80%;
   height: auto;
   z-index: -1;
   transform: translateY(-50%);
}

.social-6 .social-line {
   top: 50%;
   right: 40%;
   transform: translateY(0);
}

.social-10 .social-line {
   position: absolute;
   top: 50%;
   right: 10%;
   z-index: -1;
   transform: translateY(-100%);
}

.social-8 .social-line {
   position: absolute;
   top: 50%;
   right: 20%;
   z-index: -1;
}

.social-1 .social-line {
   top: 50%;
   left: 40%;
}

.reverse-mask {
   scale: -1 1;
}

.social-6 .social-line-bold {
   scale: -1 1 !important;
}

.social-10 .social-line-bold {
   scale: -1 1 !important;
}

.social-1 {
   width: 7.8125%;
   /* 150/1920 */
}

.social-1 .social-line {
   width: 17vw;
}

@media (max-width: 1800px) {
   .social-1 .social-line {
      top: 50%;
   }
}

.social-2 {
   width: 5.78125%;
   /* 111/1920 */
}

.social-2 .social-line {
   width: 19vw;
}

.social-3 {
   width: 12.083333%;
   /* 232/1920 */
}

.social-3 .social-line {
   width: 30vw;
}

.social-4 {
   width: 7.083333%;
   /* 136/1920 */
}

.social-4 .social-line {
   width: 20vw;
}

.social-5 {
   width: 8.229167%;
   /* 158/1920 */
}

.social-5 .social-line {
   width: 20vw;
}

.social-6 {
   width: 7.8125%;
   /* 150/1920 */
}

.social-6 .social-line {
   width: 14vw;
}

.social-7 {
   width: 16.145833%;
}

.social-7 .social-line {
   width: 22.5vw;
}

@media (min-width: 1200px) {

   .social-1 .social-line,
   .social-2 .social-line,
   .social-3 .social-line,
   .social-4 .social-line,
   .social-5 .social-line,
   .social-6 .social-line,
   .social-7 .social-line,
   .social-8 .social-line,
   .social-9 .social-line,
   .social-10 .social-line {
      width: auto;
      max-width: 200%;
   }

   .social-2 .social-line {
      max-width: 270%;
   }

   .social-3 .social-line {
      max-width: 250%;
   }

   .infographic__subtitle,
   .infographic__subtitle-2,
   .infographic__subtitle-3,
   .infographic__subtitle-4 {
      font-size: 40px;
   }
}

.social-8 {
   width: 6.041667%;
   /* 116/1920 */
}

.social-8 .social-line {
   width: 15vw;
}

.social-9 {
   width: 13.020833%;
   /* 250/1920 */
}

.social-9 .social-line {
   width: 22vw;
}

.social-10 {
   width: 5.989583%;
   /* 115/1920 */
}

.social-10 .social-line {
   width: 15vw;
}

.social-line-bold {
   opacity: 0;
}

.social-line-bold.reverse-mask {
   scale: 1 1;
}

.page-screen {
   position: absolute;
   bottom: 50%;
   right: 50%;
   opacity: 0;
   width: 800px;
   height: auto;
   aspect-ratio: 1.23/1;
   border-radius: 0;
   max-width: 900px;
   z-index: 99;
}

.page-screen__link {
   position: absolute;
   top: 71%;
   left: 7%;
   color: rgb(0, 230, 255);
   font-family: Montserrat;
   font-size: 20px;
   font-weight: 500;
   line-height: 100%;
   text-decoration: underline;
   display: flex;
   align-items: center;
   gap: 10px;
}

.page-screen__link img {
   width: 32px;
   height: 32px;
   width: calc(20px + 12 * ((100vw - 320px) / 1600));
   height: calc(20px + 12 * ((100vw - 320px) / 1600));
}

@media (hover: hover) {
   .page-screen__link:hover {
      text-shadow: 0 0 20px rgb(0, 230, 255);
      text-decoration: underline;
      transition: all 0.4s ease 0s;
   }
}

@media (max-width: 1000px) {
   .page-screen__link {
      font-size: 12px;
      gap: 4px;
   }
}

@media (max-width: 400px) {
   .page-screen__link {
      font-size: 11px;
   }
}

.page-instagram {
   top: 30%;
   right: 10vw;
   max-width: 100%;
   max-height: 90%;
   overflow: hidden;
   transform-origin: right center;
   top: 28%;
   right: 0;
   opacity: 1;
   max-width: 16vw;
}

@media (min-width: 1000px) {
   .page-instagram .page-screen__link {
      font-size: 22px;
      left: 7.5%;
   }
}

.page-instagram img:not(.page-screen__link-icon) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: left;
}

@media (max-width: 1000px) {
   .page-instagram {
      right: 0;
   }

   .page-instagram img:not(.page-screen__link-icon) {
      object-position: left;
   }
}

.page-youtube {
   transform-origin: left;
   top: 42%;
   left: 13vw;
   max-width: 12vw;
   max-height: 90%;
   overflow: hidden;
}

.page-youtube img:not(.page-screen__link-icon) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: left;
}

.page-youtube .page-screen__link {
   position: absolute;
   bottom: 30%;
   left: 60px;
}

@media (max-width: 1000px) {
   .page-youtube {
      top: 10%;
      left: 5vw;
      max-width: 300px;
   }

   .page-youtube img:not(.page-screen__link-icon) {
      object-position: left;
   }

   .page-youtube .page-screen__link {
      left: 30px;
      font-size: 11px;
   }
}

@media (max-width: 400px) {
   .page-youtube .page-screen__link {
      left: 30px;
      font-size: 9px;
   }

   .page-youtube .page-screen__link-icon {
      width: 10px;
      height: 10px;
   }
}

.page-telegram {
   left: unset;
   right: 10vw;
   transform-origin: right;
   top: 70%;
   max-width: 13vw;
   max-height: 90%;
   overflow: hidden;
}

.page-telegram img:not(.page-screen__link-icon) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: right;
}

.page-telegram .page-screen__link {
   position: absolute;
   bottom: 12%;
   left: unset;
   right: 15%;
   height: auto;
   align-items: end;
   font-size: 22px;
}

@media (min-width: 1300px) {
   .page-telegram .page-screen__link {
      font-size: 18px;
      right: 11%;
   }
}

@media (max-width: 1400px) {
   .page-telegram {
      top: 20%;
   }
}

@media (max-width: 1000px) {
   .page-telegram {
      top: 10%;
      right: 0;
      max-width: 300px;
   }

   .page-telegram img:not(.page-screen__link-icon) {
      object-position: right;
   }

   .page-telegram .page-screen__link {
      right: 28px;
      font-size: 9px;
      bottom: 11.5%;
   }

   .page-instagram .page-screen__link {
      font-size: 9px;
   }

   .page-youtube .page-screen__link {
      font-size: 9px;
   }
}

@media (max-width: 400px) {
   .page-telegram .page-screen__link {
      right: 28px;
      font-size: 8px;
   }

   .page-instagram .page-screen__link {
      font-size: 8px;
   }

   .page-youtube .page-screen__link {
      font-size: 8px;
   }
}

.page-qr {
   left: unset;
   left: 30vw;
   transform-origin: left;
   top: 6vh;
   max-width: 7.5vw;
   max-height: 80%;
   overflow: hidden;
}

.page-qr img:not(.page-screen__link-icon) {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
}

.page-qr img.page-qr-image {
   display: inline-block;
   width: 50%;
   height: 50%;
   margin: auto;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
   max-width: 7vw;
   transform-origin: center;
   margin-inline: auto;
}

@media (max-width: 1000px) {
   .page-qr img.page-qr-image {
      max-width: 100px;
   }
}

@media (max-width: 767px) {
   .page-qr img.page-qr-image {
      max-width: 50px;
   }
}

@keyframes fill-circle {
   0% {
      transform: scaleX(0);
   }

   20% {
      transform: scaleX(1);
   }

   60% {
      max-height: calc(100% + 6px);
   }

   80% {
      transform: scaleX(1);
   }

   100% {
      transform: scale(1);
      max-height: calc(100% + 6px);
   }
}

@keyframes draw {
   from {
      stroke-dashoffset: 1394;
   }

   to {
      stroke-dashoffset: 0;
   }
}