@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

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;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*--------------------*/
@font-face {
  font-family: Arial Rounded MT Bold;
  src: url("/assets/font/arialroundedmtbold.ttf");
}
/*********************ШАПКА САЙТА*******************/
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: -60px;
  left: 0;
  background: #fff;
  z-index: 999;
  animation-name: headeractive;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.header .header-wrape {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.header .header-wrape .header-logo {
  color: #00228F;
  font-size: 48px;
  font-family: Arial Rounded MT Bold;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.header .header-wrape .main-menu ul {
  display: flex;
}
.header .header-wrape .main-menu ul li a {
  color: #00228F;
  font-size: 16px;
  font-family: Arial Rounded MT Bold;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-right: 70px;
}
.header .header-wrape .main-menu ul .active__main-menu {
  border-bottom: 3px solid #00228F;
}

#mobile {
  display: none !important;
}

/********************ШАПКА САЙТА*******************/
.introduction {
  width: 100%;
  height: 100%;
  background: url("/assets/media/background.png") 0 0/100% 100% no-repeat;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.introduction .introduction-background {
  width: 100%;
  height: 100%;
  background: url("/assets/media/ovulio.png") center/100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  filter: opacity(30%);
  z-index: -1;
  animation-name: ovulio;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
}
.introduction .introduction-group .branch-yelow {
  position: absolute;
  top: 6%;
  left: 15%;
  animation-duration: 2.5s;
  animation-name: branchblue;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-yelow svg {
  width: 75%;
  color: #FAFF00;
  animation-duration: 2.5s;
  animation-name: branchbluesize;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-white__first {
  position: absolute;
  top: 30%;
  left: 80%;
  animation-name: branchpink;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-white__first svg {
  width: 75%;
  color: #FFF;
  animation-name: branchpinksize;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-white__second {
  position: absolute;
  top: 60%;
  left: 40%;
  animation-name: branchposition;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-white__second svg {
  width: 19vw;
  color: #fff;
  animation-name: branchsize;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .points {
  position: absolute;
  top: 70%;
  left: 85%;
  width: 5%;
  animation-name: points;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .points img {
  width: 100%;
}
.introduction .introduction-group .introduction-text {
  position: absolute;
  top: 95%;
  left: 5%;
  color: #FAFF00;
  font-size: 24px;
  font-family: Arial Rounded MT Bold;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  animation-name: introsmalltext;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .cloud {
  position: absolute;
  bottom: -31%;
  right: -3%;
  animation-name: cloudposition;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .cloud svg {
  width: 32vw;
  animation-name: cloudsize;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .branch-yelow.branch-blue.position {
  position: absolute;
  top: 0;
  left: 10%;
  animation: branchBluePosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow.branch-blue.position svg {
  width: 100%;
  color: #00228F;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .branch-yelow.branch-blue.position.second-position {
  position: absolute;
  top: 0;
  left: 10%;
  animation: branchBlueSecondPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow.branch-blue.position.second-position svg {
  width: 100%;
  color: #00228F;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .branch-white__first.branch-pink.position {
  position: absolute;
  top: 10%;
  left: 75%;
  animation: branchPinkPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position svg {
  width: 100%;
  color: #f48be0;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position {
  position: absolute;
  top: 10%;
  left: 75%;
  animation: branchPinkSecondPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position svg {
  width: 100%;
  color: #f48be0;
  filter: drop-shadow(2px 2px 3px #424242);
  animation: branchPinkSecondColor 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size {
  position: absolute;
  top: 50%;
  left: 35%;
}
.introduction .introduction-group .branch-white__second.branch-size svg {
  width: 100%;
  color: #FFF;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .points.points-size.position {
  top: 65%;
  left: 78%;
  width: 7%;
  animation: pointsPosition 2.5s ease-in-out;
}
.introduction .introduction-group .points.points-size.position img {
  width: 100%;
}
.introduction .introduction-group .branch-yelow__technology {
  position: absolute;
  top: 100%;
  left: 29%;
  animation: branchYelowTechnology 2.5s ease-in-out;
  opacity: 0;
}
.introduction .introduction-group .branch-yelow__technology svg {
  width: 75%;
  color: #FAFF00;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .branch-yelow__technology.second-position {
  position: absolute;
  top: 100%;
  left: 29%;
  animation: branchYelowSeconPosition 2.5s ease-in-out;
  opacity: 1;
}
.introduction .introduction-group .branch-yelow__technology.second-position svg {
  width: 75%;
  color: #FAFF00;
  filter: drop-shadow(2px 2px 3px #424242);
}
.introduction .introduction-group .none {
  display: none;
}
.introduction .introduction-group #branch-mobile {
  display: none;
}
.introduction .introduction-group .button-slide {
  display: none;
  position: absolute;
  bottom: 5%;
  left: 50%;
  background: none;
  z-index: 999;
}
.introduction .introduction-group .slide-up {
  transform: rotate(180deg);
}
.introduction .introduction-group .first-screen {
  height: 100%;
}
.introduction .introduction-group .first-screen .introduction-text__second {
  position: absolute;
  top: 30%;
  left: 15%;
  color: #FFF;
  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  font-size: calc(32px + 88 * ((100vw - 320px) / 1600));
  font-family: Arial Rounded MT Bold;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  overflow: hidden;
}
.introduction .introduction-group .first-screen .introduction-text__second h2 {
  position: relative;
  left: -100%;
  animation-name: introtext;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .first-screen .introduction-background {
  width: 100%;
  height: 100%;
  background: url("/assets/media/ovulio.png") center/100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  filter: opacity(30%);
  z-index: -1;
  animation-name: ovulio;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
.introduction .introduction-group .technology__first-screen {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  top: 100%;
  animation: techFirst 1.5s ease-in-out;
}
.introduction .introduction-group .technology__first-screen .technology-title {
  color: #FAFF00;
  font-family: Arial Rounded MT Bold;
  font-size: calc(27px + 37 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  top: 8%;
  left: 12%;
  animation: technologyActive 2.5s ease-in-out;
}
.introduction .introduction-group .technology__first-screen .gallery {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 22%;
  z-index: 3;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image {
  width: 25%;
  position: relative;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .image-wrap {
  width: 85%;
  height: 85%;
  border: 3px solid #FAFF00;
  position: relative;
  z-index: 2;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .image-wrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -10%;
  left: 10%;
  z-index: 1;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image img {
  width: 85%;
  height: 85%;
  position: absolute;
  top: -10%;
  left: 10%;
  z-index: 1;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .image-text {
  width: 85%;
  margin-top: 5%;
  font-family: Arial Rounded MT Bold;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .text-first {
  color: #FAFF00;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .text-second {
  color: #00228F;
}
.introduction .introduction-group .technology__first-screen .gallery .gallery-image .text-third {
  color: #FFF;
}
.introduction .introduction-group .technology__first-screen .gallery .first-image .image-wrap {
  border-color: #FAFF00;
}
.introduction .introduction-group .technology__first-screen .gallery .second-image .image-wrap {
  border-color: #00228F;
}
.introduction .introduction-group .technology__first-screen .gallery .third-image .image-wrap {
  border-color: #fff;
}
.introduction .introduction-group .technology__first-screen .introduction-background {
  width: 80%;
  height: 80%;
  filter: opacity(5%);
  top: 10%;
  left: 10%;
  animation: none;
}
.introduction .introduction-group .technology__first-screen.active {
  top: 0;
}
.introduction .introduction-group .technology__second-screen {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
.introduction .introduction-group .technology__second-screen .gallery {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50%;
  position: absolute;
  top: 20%;
  z-index: 3;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image {
  width: 25%;
  position: relative;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-wrap {
  width: 85%;
  height: 85%;
  border: 3px solid #FAFF00;
  position: relative;
  z-index: 2;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-wrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -10%;
  left: 10%;
  z-index: 1;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image img {
  width: 85%;
  height: 85%;
  position: absolute;
  top: -10%;
  left: 10%;
  z-index: 1;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-text {
  width: 85%;
  margin-top: 5%;
  font-family: Arial Rounded MT Bold;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .text-first {
  color: #00228F;
  opacity: 0;
  animation: textFirstPosition 2.5s ease-in-out;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .text-second {
  color: #FFF;
  position: absolute;
  top: 50%;
  opacity: 0;
  animation: textSecondPosition 2.5s ease-in-out;
}
.introduction .introduction-group .technology__second-screen .gallery .gallery-image .text-third {
  color: #FAFF00;
  position: absolute;
  left: -100%;
  opacity: 0;
  animation: textThirdPosition 2.5s ease-in-out;
}
.introduction .introduction-group .technology__second-screen .gallery .first-image .image-wrap {
  border-color: #00228F;
}
.introduction .introduction-group .technology__second-screen .gallery .second-image .image-wrap {
  border-color: #FFF;
}
.introduction .introduction-group .technology__second-screen .gallery .third-image .image-wrap {
  border-color: #FAFF00;
}
.introduction .introduction-group .technology__second-screen .introduction-background {
  width: 80%;
  height: 80%;
  filter: opacity(5%);
  top: 10%;
  left: 10%;
  animation: none;
}
.introduction .introduction-group .instruction {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
}
.introduction .introduction-group .instruction .instruction-wrap {
  display: flex;
  height: 100%;
}
.introduction .introduction-group .instruction .instruction-wrap .instrucion-elips {
  width: 65%;
}
.introduction .introduction-group .instruction .instruction-wrap .instrucion-elips .elips-image {
  display: flex;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.introduction .introduction-group .instruction .instruction-wrap .instrucion-elips .elips-image .elips-title {
  position: absolute;
  top: 60%;
  left: 10%;
  color: #FAFF00;
  font-family: Arial Rounded MT Bold;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.introduction .introduction-group .instruction .instruction-wrap .instrucion-elips .elips-image img {
  width: 70%;
  height: 80%;
}
.introduction .introduction-group .instruction .instruction-wrap .instruction-info {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.introduction .introduction-group .instruction .instruction-wrap .instruction-info .instruction-title {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 40 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: 100px;
  transform: matrix(1, 0, 0, 1, -200, 200);
}
.introduction .introduction-group .instruction .instruction-wrap .instruction-info .instruction-text {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(16px + 32 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: 100px;
}
.introduction .introduction-group .instruction .instruction-wrap .instruction-info .first-instruction {
  transform: matrix(1, 0, 0, 1, -200, 200);
}
.introduction .introduction-group .kit {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  overflow: hidden;
}
.introduction .introduction-group .kit .kit-wrap {
  display: flex;
  height: 100%;
}
.introduction .introduction-group .kit .kit-wrap .kit-info {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-title {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 65%;
  transform: matrix(1, 0, 0, 1, 200, 200);
  opacity: 0;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-form {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
  border-radius: 50.5px;
  border: 4px solid #FFF;
  background: none;
  width: 25%;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-form p {
  transform: matrix(1, 0, 0, 1, 900, -100);
  opacity: 0;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-text {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(16px + 8 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transform: matrix(1, 0, 0, 1, 900, -100);
  opacity: 0;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-mail {
  display: flex;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-mail .icon-mail {
  margin-right: 10px;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-mail a {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(16px + 8 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transform: matrix(1, 0, 0, 1, 900, -100);
  opacity: 0;
}
.introduction .introduction-group .kit .kit-wrap .kit-info .kit-footer {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(16px + 8 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  transform: matrix(1, 0, 0, 1, 900, -100);
  opacity: 0;
}
.introduction .introduction-group .kit .kit-wrap .kit-gallery {
  width: 35%;
  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
}
.introduction .introduction-group .kit .kit-wrap .kit-gallery .gallery-image {
  position: relative;
  width: 75%;
  height: 75%;
}
.introduction .introduction-group .kit .kit-wrap .kit-gallery .gallery-image .kit-image {
  width: 100%;
  height: 100%;
  border: 3px solid #FAFF00;
  position: relative;
  z-index: 2;
}
.introduction .introduction-group .kit .kit-wrap .kit-gallery .gallery-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -5%;
  left: 5%;
  z-index: 1;
}
.introduction .introduction-group .team {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  overflow: hidden;
}
.introduction .introduction-group .team .team-wrap {
  height: 100%;
}
.introduction .introduction-group .team .team-wrap .team-title {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: matrix(1, 0, 0, 1, -500, 400);
}
.introduction .introduction-group .team .team-wrap .team-person {
  display: flex;
  height: 80%;
}
.introduction .introduction-group .team .team-wrap .team-person .person {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
}
.introduction .introduction-group .team .team-wrap .team-person .person a.person-linked {
  width: 9%;
  height: 11%;
  position: absolute;
  top: 6%;
  left: 63%;
}
.introduction .introduction-group .team .team-wrap .team-person .person img {
  width: 50%;
}
.introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap {
  width: 100%;
  padding-left: 30%;
}
.introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap .person-title {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
}
.introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap .person-subtitle {
  color: #00228F;
  font-family: Arial Rounded MT Bold;
  font-size: calc(14px + 10 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 80%;
}
.introduction .introduction-group .team .team-wrap .team-person .person.person-first .person-info__wrap .person-title {
  transform: matrix(1, 0, 0, 1, 0, -500);
}
.introduction .introduction-group .team .team-wrap .team-person .person.person-first .person-info__wrap .person-subtitle {
  transform: matrix(1, 0, 0, 1, 500, -250);
}
.introduction .introduction-group .team .team-wrap .team-person .person.person-second .person-info__wrap .person-title {
  transform: matrix(1, 0, 0, 1, 500, -100);
}
.introduction .introduction-group .team .team-wrap .team-person .person.person-first .person-info__wrap .person-subtitle {
  transform: matrix(1, 0, 0, 1, -900, 50);
}
.introduction .introduction-group .popup-white {
  display: none;
}
.introduction .introduction-group .popup-white .popup {
  position: fixed;
  top: 25%;
  left: 40%;
  padding: 20px;
  width: 40%;
  height: 50%;
  margin-left: -200px;
  background: #fff;
  border: 1px solid orange;
  border-radius: 4px;
  z-index: 99999;
  opacity: 1;
  background: url("/assets/media/popup.jpg") 0 0/100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.introduction .introduction-group .popup-white .popup .popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.introduction .introduction-group .popup-white .popup .popup-title {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.introduction .introduction-group .popup-white .popup form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
}
.introduction .introduction-group .popup-white .popup form .mail {
  border-radius: 5px;
  border: 4px solid #FFF;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 20%;
  margin-bottom: 45px;
  color: #00228F;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: 1s;
  padding: 10px;
}
.introduction .introduction-group .popup-white .popup form .valid {
  box-shadow: 1px 1px 15px #66ff66;
}
.introduction .introduction-group .popup-white .popup form .invalid {
  box-shadow: 1px 1px 15px #f24646;
}
.introduction .introduction-group .popup-white .popup form .mail:focus, .introduction .introduction-group .popup-white .popup form :hover {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: 1s;
}
.introduction .introduction-group .popup-white .popup form .submit-popup {
  color: #FFF;
  font-family: Arial Rounded MT Bold;
  font-size: calc(24px + 24 * ((100vw - 320px) / 1600));
  font-style: normal;
  font-weight: 400;
  line-height: 65px;
  border-radius: 50.5px;
  border: 4px solid #FFF;
  background: none;
  width: 55%;
}
.introduction .introduction-group .popup-white:before {
  content: "";
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  z-index: 99;
}
.introduction .introduction-group .popup-white:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.9) url("/assets/media/Vp3R.gif") center/50px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
  z-index: 99999;
}
.introduction .introduction-group .popup-whit.sending:after {
  opacity: 1;
  visibility: visible;
}

/***********************АНИМАЦИИ**********************/
.header.header-active {
  top: 0;
}

.introduction .introduction-group .branch-yelow.branch-blue {
  top: 0;
  left: 10%;
}

.introduction .introduction-group .branch-yelow.branch-blue svg {
  width: 100%;
  color: #00228F;
  filter: drop-shadow(2px 2px 3px #424242);
}

.introduction .introduction-group .branch-white__first.branch-pink {
  top: 10%;
  left: 75%;
}

.introduction .introduction-group .branch-white__first.branch-pink svg {
  width: 100%;
  color: #f48be0;
  filter: drop-shadow(2px 2px 3px #424242);
}

.introduction .introduction-group .branch-white__second.branch-size {
  top: 50%;
  left: 35%;
}

.introduction .introduction-group .branch-white__second.branch-size svg {
  width: 23vw;
  filter: drop-shadow(2px 2px 3px #424242);
}

.introduction .introduction-group .cloud.cloud-size {
  position: fixed;
  bottom: -12%;
  right: -3%;
}

.introduction .introduction-group .cloud.cloud-size svg {
  width: calc(307px + 601 * (100vw - 320px) / 1660);
}

.introduction .introduction-group .first-screen .introduction-text__second.intro-text h2 {
  left: 0%;
}

.introduction .introduction-group .introduction-text.intro-text__small {
  color: #00228F;
  font-size: calc(24px + 40 * ((100vw - 320px) / 1600));
  top: 90%;
}

.introduction .introduction-group .introduction-background.intro-backgound__size {
  width: 80%;
  height: 80%;
  filter: opacity(5%);
  top: 10%;
  left: 10%;
}

.introduction .introduction-group .points.points-size {
  top: 65%;
  left: 78%;
  width: 7%;
}

/*********TECHNOLOGY SECTION**********/
.introduction .introduction-group .branch-yelow.branch-blue.position {
  top: 0;
  left: 28%;
}

.introduction .introduction-group .branch-white__first.branch-pink.position {
  top: 60%;
  left: 75%;
}
.introduction .introduction-group .branch-white__first.branch-pink.position svg {
  animation: none;
}

.introduction .introduction-group .branch-white__second.branch-size.position {
  top: 22%;
  left: 52%;
  animation: branchSizePosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position svg {
  width: 20vw;
  animation: none;
}

.introduction .introduction-group .points.points-size.position {
  top: 25%;
  opacity: 0;
}

.introduction .introduction-group .branch-yelow.branch-blue.position.first-position {
  top: 0;
  left: 10%;
  animation: branchBluePositionNone 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.first-position {
  top: 10%;
  left: 75%;
  animation: branchPinkPositionNone 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.first-position {
  top: 50%;
  left: 35%;
  animation: branchSizePositionNone 2.5s ease-in-out;
}

.introduction .introduction-group .points.points-size.position.first-position {
  top: 65%;
  left: 78%;
  width: 7%;
  animation: pointPositionNone 2.5s ease-in;
}

.first-none {
  opacity: 1;
  animation: firstNone 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology {
  top: 75%;
  opacity: 1;
}

.introduction .introduction-group .technology__first-screen.deactive {
  opacity: 0;
  animation: firstTechnologyDeactive 1.5s ease-in-out;
}

/*********TECHNOLOGY SECTION**********/
/*********TECHNOLOGY SECOND SECTION**********/
.introduction .introduction-group .branch-yelow.branch-blue.position.second-position {
  top: 45%;
  left: 28%;
  z-index: 1;
  opacity: 0;
}

.introduction .introduction-group .branch-yelow.branch-blue.position.revers {
  top: 0%;
  left: 28%;
  z-index: 0;
  opacity: 1;
  animation: branchBlueSecondPositionRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.second-position {
  top: -13%;
  left: 50%;
  z-index: 1;
  transform: rotate(-65deg);
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position svg {
  width: 65%;
  color: white;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.revers {
  top: 60%;
  left: 75%;
  z-index: 1;
  transform: rotate(0);
  animation: branchPinkSecondPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.revers svg {
  width: 100%;
  color: #f48be0;
  animation: branchPinkSecondColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position {
  top: 65%;
  left: 50%;
  transform: rotate(69deg);
  animation: branchSizeSecondPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position svg {
  width: 50%;
  color: #f48be0;
  animation: branchSizeSecondColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.revers {
  top: 25%;
  left: 48%;
  transform: rotate(0deg);
  animation: branchSizeSecondPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.revers svg {
  width: 100%;
  color: white;
  animation: branchSizeSecondColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position {
  top: 47%;
  z-index: 1;
  transform: rotate(15deg);
  left: 29%;
  animation: branchYelowSeconPosition 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.revers {
  position: absolute;
  top: 75%;
  left: 29%;
  transform: rotate(0);
  animation: branchYelowSeconPositionRevers 2.5s ease-in-out;
  opacity: 1;
}

.introduction .introduction-group .technology__second-screen.active .gallery .gallery-image .text-third {
  left: 0;
  opacity: 1;
}

.introduction .introduction-group .technology__second-screen.active .gallery .gallery-image .text-second {
  top: 85%;
  opacity: 1;
}

.introduction .introduction-group .technology__second-screen.active .gallery .gallery-image .text-first {
  top: 85%;
  opacity: 1;
}

.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-text.text-first.position {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transform: matrix(2.2, 0, 0, 2.2, 700, -365);
  animation: textFirstMatrix 1s ease-in-out;
}

.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-text.text-second.position {
  top: 85%;
  opacity: 0;
  z-index: 3;
  transform: matrix(2.2, 0, 0, 2.2, 400, -445);
  animation: textSecondMatrix 1s ease-in-out;
}

.introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-text.text-third.position {
  left: 0;
  opacity: 0;
  z-index: 3;
  transform: matrix(2.2, 0, 0, 2.2, 200, -240);
  animation: textThirdMatrix 1s ease-in-out;
}

@media (max-width: 1500px) {
  .introduction .introduction-group .branch-yelow__technology {
    left: 33%;
  }
  .introduction .introduction-group .branch-yelow__technology svg {
    width: 12vw;
  }
  .introduction .introduction-group .branch-yelow__technology.second-position {
    top: 42%;
    z-index: 1;
    transform: rotate(15deg);
    left: 28%;
    animation: branchYelowSeconPositionMedia 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-yelow__technology.second-position svg {
    width: 12vw;
    animation: branchYelowSeconSizeMedia 2.5s ease-in-out;
  }
  @keyframes branchYelowSeconPositionMedia {
    from {
      top: 75%;
    }
    to {
      top: 47%;
      z-index: 1;
      transform: rotate(15deg);
      left: 29%;
    }
  }
  @keyframes branchYelowSeconSizeMedia {
    from {
      width: 75%;
    }
    to {
      width: 12vw;
    }
  }
}
/*********TECHNOLOGY SECOND SECTION**********/
/*********INSTRUCTION SECTION**********/
.introduction .introduction-group .branch-yelow.branch-blue.position.second-position {
  top: 45%;
  left: 28%;
  z-index: -1;
  opacity: 0;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position {
  left: 0%;
  z-index: -1;
  animation: branchWhiteThirdPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position svg {
  animation: none;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.revers {
  top: -13%;
  left: 50%;
  z-index: 1;
  transform: rotate(-65deg);
  animation: branchWhiteThirdPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.revers svg {
  width: 65%;
  color: white;
  animation: none;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position {
  top: 58%;
  left: 42%;
  z-index: -2;
  animation: branchPinkThirdPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position svg {
  animation: none;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.revers {
  top: 65%;
  left: 50%;
  z-index: -2;
  transform: rotate(69deg);
  animation: branchPinkThirdPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.revers svg {
  width: 50%;
  color: #f48be0;
  animation: none;
}

.introduction .introduction-group .branch-yelow__technology.second-position.third-position {
  top: 65%;
  left: 9%;
  transform: rotate(15deg);
  animation: branchYelowThirdPosition 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position.revers {
  top: 47%;
  left: 29%;
  transform: rotate(15deg);
  animation: branchYelowThirdPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow__technology.second-position.revers svg {
  animation: none;
}

.introduction .introduction-group .instruction.active .instruction-wrap .instrucion-elips .elips-image .elips-title {
  top: 41%;
  left: 29%;
  animation: elipsTitlePosition 1.5s ease-in-out;
}

.introduction .introduction-group .instruction.active .instruction-wrap .instruction-info .instruction-title {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: instructionMatrix 1s ease-in-out;
}

.introduction .introduction-group .instruction.active .instruction-wrap .instruction-info .instruction-text.first-instruction {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: instructionMatrix 1.1s ease-in-out;
}

.introduction .introduction-group .instruction.deactive .instruction-wrap .instruction-info .instruction-title {
  transform: matrix(1, 0, 0, 1, -1000, 300);
  animation: instructionMatrixDeactive 1.5s ease-in-out;
}

.introduction .introduction-group .instruction.deactive .instruction-wrap .instruction-info .instruction-text.first-instruction {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, -1000, 300);
  animation: instructionMatrixDeactive 1.1s ease-in-out;
}

.introduction .introduction-group .instruction.deactive .instruction-wrap .instruction-info .instruction-text.second-instruction {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, -1000, 300);
  animation: instructionMatrixDeactive 1.2s ease-in-out;
}

.introduction .introduction-group .instruction.deactive .instruction-wrap .instruction-info .instruction-text.third-instruction {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, -1000, 300);
  animation: instructionMatrixDeactive 1.3s ease-in-out;
}

.introduction .introduction-group .instruction.deactive .instruction-wrap .instrucion-elips .elips-image .elips-title {
  top: 21%;
  left: 18%;
  opacity: 0;
  animation: elipsTitlePositionDeactive 1.5s ease-in-out;
}

/*********INSTRUCTION SECTION**********/
/*********KIT SECTION**********/
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position {
  left: 85%;
  z-index: 1;
  top: 55%;
  transform: rotate(0deg);
  animation: kitWhitePosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position svg {
  width: 100%;
  color: #f48be0;
  animation: kitWhiteColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.revers {
  left: 0%;
  z-index: -1;
  top: -13%;
  transform: rotate(-65deg);
  animation: kitWhitePositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.revers svg {
  width: 65%;
  color: white;
  animation: kitWhiteColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position {
  top: 50%;
  left: 7%;
  transform: rotate(5deg);
  animation: kitPinkPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position svg {
  width: 75%;
  color: #FAFF00;
  animation: kitPinkColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.revers {
  top: 58%;
  left: 42%;
  transform: rotate(69deg);
  animation: kitPinkPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.revers svg {
  width: 50%;
  color: #f48be0;
  animation: kitPinkColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position {
  top: 0%;
  left: 60%;
  animation: kitYelowPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position svg {
  width: 100%;
  color: white;
  animation: kitYelowColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position.third-position.revers {
  top: 65%;
  left: 9%;
  transform: rotate(15deg);
  animation: kitYelowPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow__technology.second-position.third-position.revers svg {
  width: 75%;
  color: #FAFF00;
  animation: kitYelowColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .kit.active .kit-wrap .kit-info .kit-title {
  transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: 1;
  animation: kitTitleMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .kit.active .kit-wrap .kit-info .kit-form p {
  transform: matrix(1, 0, 0, 1, 0, 0);
  position: relative;
  z-index: 4;
  opacity: 1;
  animation: kitElemMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .kit.active .kit-wrap .kit-info .kit-text {
  transform: matrix(1, 0, 0, 1, 0, 0);
  position: relative;
  z-index: 4;
  opacity: 1;
  animation: kitElemMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .kit.active .kit-wrap .kit-info .kit-mail a {
  transform: matrix(1, 0, 0, 1, 0, 0);
  position: relative;
  z-index: 4;
  opacity: 1;
  animation: kitElemMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .kit.active .kit-wrap .kit-info .kit-footer {
  transform: matrix(1, 0, 0, 1, 0, 0);
  position: relative;
  z-index: 4;
  opacity: 1;
  animation: kitElemMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .kit.deactive .kit-wrap .kit-info .kit-title {
  transform: matrix(0.5, 0, 0, 0.5, 0, 500);
  opacity: 0;
  animation: kitTitleMatrixDeactive 1.5s ease-in-out;
}

.introduction .introduction-group .kit.deactive .kit-wrap .kit-info .kit-form p {
  transform: matrix(1, 0, 0, 1, 400, -200);
  opacity: 0;
  animation: kitPMatrixDeactive 1.5s ease-in-out;
}

.introduction .introduction-group .kit.deactive .kit-wrap .kit-info .kit-text {
  transform: matrix(1, 0, 0, 1, 700, 200);
  opacity: 0;
  animation: kitTextMatrixDeactive 1.5s ease-in-out;
}

.introduction .introduction-group .kit.deactive .kit-wrap .kit-info .kit-mail a {
  transform: matrix(1, 0, 0, 1, 700, 100);
  opacity: 0;
  animation: kitAMatrixDeactive 1.5s ease-in-out;
}

.introduction .introduction-group .kit.deactive .kit-wrap .kit-info .kit-footer {
  transform: matrix(1, 0, 0, 1, 700, 0);
  opacity: 0;
  animation: kitFooterMatrixDeactive 1.5s ease-in-out;
}

/*********KIT SECTION**********/
/*********TEAM SECTION**********/
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position.team-position {
  left: 5%;
  top: 30%;
  transform: rotate(-70deg);
  animation: teamWhitePosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position.team-position svg {
  width: 50%;
  color: #FAFF00;
  animation: teamWhiteColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position.revers {
  left: 85%;
  top: 55%;
  transform: rotate(0);
  animation: teamWhitePositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__first.branch-pink.position.second-position.third-position.kit-position.revers svg {
  width: 100%;
  color: #f48be0;
  animation: teamWhiteColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position.team-position {
  top: 0%;
  left: 60%;
  z-index: -1;
  animation: teamPinkPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position.team-position svg {
  color: white;
  animation: teamPinkColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position.revers {
  top: 50%;
  left: 7%;
  z-index: -1;
  transform: rotate(5deg);
  animation: teamPinkPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-white__second.branch-size.position.second-position.third-position.kit-position.revers svg {
  width: 75%;
  color: #FAFF00;
  animation: teamPinkColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position.team-position {
  top: 35%;
  left: 43%;
  transform: rotate(70deg);
  animation: teamYelowPosition 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position.team-position svg {
  color: #f48be0;
  animation: teamYelowColor 2.5s ease-in-out;
}

.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position.revers {
  top: 0%;
  left: 60%;
  transform: rotate(15deg);
  animation: teamYelowPositionRevers 2.5s ease-in-out;
}
.introduction .introduction-group .branch-yelow__technology.second-position.third-position.kit-position.revers svg {
  width: 100%;
  color: white;
  animation: teamYelowColorRevers 2.5s ease-in-out;
}

.introduction .introduction-group .team.active .team-wrap .team-title {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: teamTitleMatrix 1.5s ease-in-out;
}

.introduction .introduction-group .team.active .team-wrap .team-person .person.person-first .person-info__wrap .person-title {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: teamFirstPersonTitle 1.5s ease-in-out;
}

.introduction .introduction-group .team.active .team-wrap .team-person .person.person-second .person-info__wrap .person-title {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: teamSecondPersonTitle 1.5s ease-in-out;
}

.introduction .introduction-group .team.active .team-wrap .team-person .person.person-first .person-info__wrap .person-subtitle {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: teamFirstPersonSubTitle 1.5s ease-in-out;
}

.introduction .introduction-group .team.active .team-wrap .team-person .person.person-second .person-info__wrap .person-subtitle {
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: teamSecondPersonSubTitle 1.5s ease-in-out;
}

/********TEAM SECTION**********/
/*****************KEYFRAMES FIRST-SCREEN****************/
@keyframes headeractive {
  from {
    top: -60px;
  }
  to {
    top: 0;
  }
}
@keyframes branchblue {
  from {
    top: 6%;
    left: 15%;
  }
  to {
    top: 0%;
    left: 10%;
  }
  10% {
    top: 7%;
    left: 16%;
  }
  75% {
    top: -1%;
    left: 9%;
  }
}
@keyframes branchbluesize {
  from {
    width: 75%;
    color: #FAFF00;
  }
  to {
    width: 100%;
    color: #00228F;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  10% {
    width: 74%;
  }
}
@keyframes branchpink {
  from {
    top: 30%;
    left: 80%;
  }
  to {
    top: 10%;
    left: 75%;
  }
  10% {
    top: 31%;
    left: 81%;
  }
  75% {
    top: 9%;
    left: 74%;
  }
}
@keyframes branchpinksize {
  from {
    width: 75%;
    color: #fff;
  }
  to {
    width: 100%;
    color: #f48be0;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  10% {
    width: 74%;
  }
}
@keyframes branchposition {
  from {
    top: 60%;
    left: 40%;
  }
  to {
    top: 50%;
    left: 35%;
  }
  10% {
    top: 61%;
    left: 41%;
  }
  75% {
    top: 49%;
    left: 34%;
  }
}
@keyframes branchsize {
  from {
    width: 19vw;
  }
  to {
    width: 23vw;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  10% {
    width: 18vw;
  }
}
@keyframes cloudposition {
  from {
    bottom: -31%;
    right: -3%;
  }
  to {
    bottom: -12%;
    right: -3%;
  }
}
@keyframes cloudsize {
  from {
    width: 32vw;
  }
  to {
    width: calc(307px + 601 * (100vw - 320px) / 1660);
  }
  10% {
    width: 31vw;
  }
  75% {
    width: 49vw;
  }
}
@keyframes introsmalltext {
  from {
    font-size: 24px;
    color: #FAFF00;
    top: 95%;
  }
  to {
    font-size: calc(24px + 40 * (100vw - 320px) / 1600);
    color: #00228F;
    top: 90%;
  }
  10% {
    font-size: 20px;
    top: 96%;
  }
}
@keyframes introtext {
  from {
    left: -100%;
  }
  to {
    left: 0%;
  }
}
@keyframes ovulio {
  from {
    width: 100%;
    height: 100%;
    filter: opacity(30%);
    top: 0;
    left: 0;
  }
  to {
    width: 80%;
    height: 80%;
    filter: opacity(5%);
    top: 10%;
    left: 10%;
  }
}
@keyframes points {
  from {
    top: 70%;
    left: 85%;
    width: 5%;
  }
  to {
    top: 65%;
    left: 78%;
    width: 7%;
  }
}
/*****************KEYFRAMES FIRST-SCREEN****************/
/*****************KEYFRAMES TECHNOLOGY SECTION*********/
@keyframes techFirst {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@keyframes firstScreenDeactive {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes branchBluePosition {
  from {
    left: 10%;
  }
  to {
    left: 28%;
  }
}
@keyframes branchBluePositionNone {
  from {
    left: 28%;
  }
  to {
    left: 10%;
  }
}
@keyframes branchPinkPosition {
  from {
    top: 10%;
  }
  to {
    top: 60%;
  }
}
@keyframes branchPinkPositionNone {
  from {
    top: 60%;
  }
  to {
    top: 10%;
  }
}
@keyframes branchSizePosition {
  from {
    top: 50%;
    left: 35%;
  }
  to {
    top: 22%;
    left: 52%;
  }
}
@keyframes branchSizePositionNone {
  from {
    top: 25%;
    left: 48%;
  }
  to {
    top: 50%;
    left: 35%;
  }
}
@keyframes pointsPosition {
  from {
    top: 65%;
    opacity: 1;
  }
  to {
    top: 25%;
    opacity: 0;
  }
}
@keyframes pointPositionNone {
  from {
    top: 25%;
  }
  to {
    top: 65%;
  }
}
@keyframes firstNone {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes branchYelowTechnology {
  from {
    top: 100%;
    opacity: 0;
  }
  to {
    top: 75%;
    opacity: 1;
  }
}
@keyframes firstTechnologyDeactive {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*****************KEYFRAMES TECHNOLOGY SECTION*********/
/*****************KEYFRAMES TECHNOLOGY SECOND SECTION*********/
@keyframes branchBlueSecondPosition {
  from {
    top: 0%;
    opacity: 1;
  }
  to {
    top: 45%;
    opacity: 0;
  }
}
@keyframes branchBlueSecondPositionRevers {
  from {
    top: 45%;
    opacity: 0;
  }
  to {
    top: 0%;
    opacity: 1;
  }
}
@keyframes branchPinkSecondPosition {
  from {
    top: 60%;
    left: 75%;
    transform: rotate(0);
  }
  to {
    top: -13%;
    left: 50%;
    transform: rotate(-65deg);
  }
}
@keyframes branchPinkSecondColor {
  from {
    width: 100%;
    color: #f48be0;
  }
  to {
    width: 65%;
    color: white;
  }
}
@keyframes branchPinkSecondPositionRevers {
  from {
    top: -13%;
    left: 50%;
    transform: rotate(-65deg);
  }
  to {
    top: 60%;
    left: 75%;
    transform: rotate(0);
  }
}
@keyframes branchPinkSecondColorRevers {
  from {
    width: 65%;
    color: white;
  }
  to {
    width: 100%;
    color: #f48be0;
  }
}
@keyframes branchSizeSecondPosition {
  from {
    top: 25%;
    left: 48%;
    transform: rotate(0deg);
  }
  to {
    top: 65%;
    left: 50%;
    transform: rotate(69deg);
  }
}
@keyframes branchSizeSecondColor {
  from {
    width: 100%;
    color: white;
  }
  to {
    width: 50%;
    color: #f48be0;
  }
}
@keyframes branchSizeSecondPositionRevers {
  from {
    top: 65%;
    left: 50%;
    transform: rotate(69deg);
  }
  to {
    top: 25%;
    left: 48%;
    transform: rotate(0deg);
  }
}
@keyframes branchSizeSecondColorRevers {
  from {
    width: 50%;
    color: #f48be0;
  }
  to {
    width: 100%;
    color: white;
  }
}
@keyframes branchYelowSeconPosition {
  from {
    top: 75%;
    transform: rotate(0);
  }
  to {
    top: 47%;
    z-index: 1;
    transform: rotate(15deg);
    left: 29%;
  }
}
@keyframes branchYelowSeconPositionRevers {
  from {
    top: 47%;
    transform: rotate(15deg);
  }
  to {
    top: 75%;
    z-index: 1;
    transform: rotate(0);
    left: 29%;
  }
}
@keyframes textThirdPosition {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes textSecondPosition {
  from {
    top: 50%;
    opacity: 0;
  }
  to {
    top: 85%;
    opacity: 1;
  }
}
@keyframes textFirstPosition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes deactive {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes textFirstMatrix {
  from {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    opacity: 0;
    transform: matrix(2.2, 0, 0, 2.2, 700, -365);
  }
}
@keyframes textSecondMatrix {
  from {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    opacity: 0;
    transform: matrix(2.2, 0, 0, 2.2, 400, -445);
  }
}
@keyframes textThirdMatrix {
  from {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    opacity: 0;
    transform: matrix(2.2, 0, 0, 2.2, 200, -240);
  }
}
/*****************KEYFRAMES TECHNOLOGY SECOND SECTION*********/
/*****************KEYFRAMES INSTRUCTION SECTION*********/
@keyframes branchWhiteThirdPosition {
  from {
    left: 50%;
  }
  to {
    left: 0%;
  }
}
@keyframes branchWhiteThirdPositionRevers {
  from {
    left: 0%;
  }
  to {
    left: 50%;
  }
}
@keyframes branchPinkThirdPosition {
  from {
    top: 65%;
    left: 50%;
  }
  to {
    top: 58%;
    left: 42%;
  }
}
@keyframes branchPinkThirdPositionRevers {
  from {
    top: 58%;
    left: 42%;
  }
  to {
    top: 65%;
    left: 50%;
  }
}
@keyframes branchYelowThirdPosition {
  from {
    top: 47%;
    left: 29%;
  }
  to {
    top: 65%;
    left: 9%;
  }
}
@keyframes branchYelowThirdPositionRevers {
  from {
    top: 65%;
    left: 9%;
  }
  to {
    top: 47%;
    left: 29%;
  }
}
@keyframes elipsTitlePosition {
  from {
    top: 60%;
    left: 10%;
  }
  to {
    top: 41%;
    left: 29%;
  }
  75% {
    top: 39%;
    left: 31%;
  }
}
@keyframes elipsTitlePositionDeactive {
  from {
    top: 41%;
    left: 29%;
    opacity: 1;
  }
  to {
    top: 21%;
    left: 18%;
    opacity: 0;
  }
}
@keyframes instructionMatrix {
  from {
    transform: matrix(1, 0, 0, 1, -200, 200);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  75% {
    transform: matrix(1, 0, 0, 1, 20, -20);
  }
}
@keyframes instructionMatrixDeactive {
  from {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  to {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, -1000, 300);
  }
  25% {
    transform: matrix(1, 0, 0, 1, 20, -20);
  }
}
/*****************KEYFRAMES INSTRUCTION SECTION*********/
/*****************KEYFRAMES KIT SECTION*********/
@keyframes kitWhitePosition {
  from {
    left: 0%;
    top: -13%;
    transform: rotate(-65deg);
  }
  to {
    left: 85%;
    top: 55%;
    transform: rotate(0deg);
  }
}
@keyframes kitWhiteColor {
  from {
    width: 65%;
    color: white;
  }
  to {
    width: 100%;
    color: #f48be0;
  }
}
@keyframes kitWhitePositionRevers {
  from {
    left: 85%;
    top: 55%;
    transform: rotate(0deg);
  }
  to {
    left: 0%;
    top: -13%;
    transform: rotate(-65deg);
  }
}
@keyframes kitWhiteColorRevers {
  from {
    width: 100%;
    color: #f48be0;
  }
  to {
    width: 65%;
    color: white;
  }
}
@keyframes kitPinkPosition {
  from {
    top: 58%;
    left: 42%;
    transform: rotate(69deg);
  }
  to {
    top: 50%;
    left: 7%;
    transform: rotate(5deg);
  }
}
@keyframes kitPinkColor {
  from {
    width: 50%;
    color: #f48be0;
  }
  to {
    width: 75%;
    color: #FAFF00;
  }
}
@keyframes kitPinkPositionRevers {
  from {
    top: 50%;
    left: 7%;
    transform: rotate(5deg);
  }
  to {
    top: 58%;
    left: 42%;
    transform: rotate(69deg);
  }
}
@keyframes kitPinkColorRevers {
  from {
    width: 75%;
    color: #FAFF00;
  }
  to {
    width: 50%;
    color: #f48be0;
  }
}
@keyframes kitYelowPosition {
  from {
    top: 65%;
    left: 9%;
  }
  to {
    top: 0%;
    left: 60%;
  }
}
@keyframes kitYelowColor {
  from {
    width: 75%;
    color: #FAFF00;
  }
  to {
    width: 100%;
    color: white;
  }
}
@keyframes kitYelowPositionRevers {
  from {
    top: 0%;
    left: 60%;
  }
  to {
    top: 65%;
    left: 9%;
  }
}
@keyframes kitYelowColorRevers {
  from {
    width: 100%;
    color: white;
  }
  to {
    width: 75%;
    color: #FAFF00;
  }
}
@keyframes kitTitleMatrix {
  from {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 200, 200);
  }
  to {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes kitElemMatrix {
  from {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 900, -100);
  }
  to {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes kitTitleMatrixDeactive {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(0.5, 0, 0, 0.5, 0, 600);
    opacity: 0;
  }
}
@keyframes kitPMatrixDeactive {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(1, 0, 0, 1, 400, -200);
    opacity: 0;
  }
}
@keyframes kitTextMatrixDeactive {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(1, 0, 0, 1, 700, 200);
    opacity: 0;
  }
}
@keyframes kitAMatrixDeactive {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(1, 0, 0, 1, 700, 100);
    opacity: 0;
  }
}
@keyframes kitFooterMatrixDeactive {
  from {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  to {
    transform: matrix(1, 0, 0, 1, 700, 100);
    opacity: 0;
  }
}
/*****************KEYFRAMES KIT SECTION*********/
/*****************KEYFRAMES TEAM SECTION*********/
@keyframes teamWhitePosition {
  from {
    left: 85%;
    top: 55%;
    transform: rotate(0deg);
  }
  to {
    left: 5%;
    top: 30%;
    transform: rotate(-70deg);
  }
}
@keyframes teamWhiteColor {
  from {
    width: 100%;
    color: #f48be0;
  }
  to {
    width: 50%;
    color: #FAFF00;
  }
}
@keyframes teamWhitePositionRevers {
  from {
    left: 5%;
    top: 40%;
    transform: rotate(-70deg);
  }
  to {
    left: 85%;
    top: 55%;
    transform: rotate(0);
  }
}
@keyframes teamWhiteColorRevers {
  from {
    width: 15vw;
    color: #FAFF00;
  }
  to {
    width: 100%;
    color: #f48be0;
  }
}
@keyframes teamPinkPosition {
  from {
    top: 50%;
    left: 7%;
  }
  to {
    top: 0%;
    left: 60%;
  }
}
@keyframes teamPinkColor {
  from {
    color: #FAFF00;
  }
  to {
    color: white;
  }
}
@keyframes teamPinkPositionRevers {
  from {
    top: 0%;
    left: 60%;
    transform: rotate(5deg);
  }
  to {
    top: 50%;
    left: 7%;
    transform: rotate(5deg);
  }
}
@keyframes teamPinkColorRevers {
  from {
    width: 50%;
    color: white;
  }
  to {
    width: 75%;
    color: #FAFF00;
  }
}
@keyframes teamYelowPosition {
  from {
    top: 0%;
    left: 60%;
    transform: rotate(15deg);
  }
  to {
    top: 35%;
    left: 43%;
    transform: rotate(70deg);
  }
}
@keyframes teamYelowColor {
  from {
    color: white;
  }
  to {
    color: #f48be0;
  }
}
@keyframes teamYelowPositionRevers {
  from {
    top: 35%;
    left: 43%;
    transform: rotate(70deg);
  }
  to {
    top: 0%;
    left: 60%;
    transform: rotate(15deg);
  }
}
@keyframes teamYelowColorRevers {
  from {
    color: #f48be0;
  }
  to {
    color: white;
  }
}
@keyframes teamTitleMatrix {
  from {
    transform: matrix(1, 0, 0, 1, -500, 400);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes teamFirstPersonTitle {
  from {
    transform: matrix(1, 0, 0, 1, 0, -500);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes teamSecondPersonTitle {
  from {
    transform: matrix(1, 0, 0, 1, 900, -100);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes teamFirstPersonSubTitle {
  from {
    transform: matrix(1, 0, 0, 1, 500, -100);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
@keyframes teamSecondPersonSubTitle {
  from {
    transform: matrix(1, 0, 0, 1, -900, 50);
  }
  to {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
/*****************KEYFRAMES TEAM SECTION*********/
/***********************АНИМАЦИИ**********************/
/***********************FIX ANIM MOBILE********************/
.introduction-group.mobile .branch-yelow {
  animation: none;
}
.introduction-group.mobile .branch-yelow svg {
  animation: none;
}
.introduction-group.mobile .branch-white__first {
  animation: none;
}
.introduction-group.mobile .branch-white__first svg {
  animation: none;
}
.introduction-group.mobile .branch-white__second {
  animation: none;
}
.introduction-group.mobile .branch-white__second svg {
  animation: none;
}
.introduction-group.mobile .points {
  animation: none;
}
.introduction-group.mobile .introduction-text {
  animation: none;
}
.introduction-group.mobile .cloud {
  animation: none;
}
.introduction-group.mobile .cloud svg {
  animation: none;
}
.introduction-group.mobile .branch-yelow.branch-blue.position {
  animation: none;
}
.introduction-group.mobile .branch-yelow.branch-blue.position.second-position {
  animation: none;
}
.introduction-group.mobile .branch-white__first.branch-pink.position {
  animation: none;
}
.introduction-group.mobile .branch-white__first.branch-pink.position.second-position {
  animation: none;
}
.introduction-group.mobile .branch-white__first.branch-pink.position.second-position svg {
  animation: none;
}
.introduction-group.mobile .branch-white__second.branch-size.position {
  animation: none;
}
.introduction-group.mobile .branch-white__second.branch-size.position.second-position {
  animation: none;
}
.introduction-group.mobile .branch-white__second.branch-size.position.second-position svg {
  animation: none;
}
.introduction-group.mobile .points.points-size.position {
  animation: none;
}
.introduction-group.mobile .branch-yelow__technology {
  animation: none;
}
.introduction-group.mobile .branch-yelow__technology.second-position {
  animation: none;
}

/***********************FIX ANIM MOBILE********************/
/***************************MOBILE**************************/
@media (max-width: 500px) {
  #branch-mobile {
    display: block !important;
  }
  #mobile-none {
    display: none !important;
  }
  .button-slide {
    display: none;
  }
  .header.mobile {
    background: rgba(255, 255, 255, 0.5);
    animation: headerColor 2.5s ease-in-out;
  }
  .introduction {
    overflow: hidden;
    height: fit-content;
  }
  .introduction.overflow {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .introduction .introduction-group {
    height: fit-content;
  }
  .introduction .introduction-group.mobile {
    overflow: initial;
  }
  .introduction .introduction-group .first-screen {
    height: 100vh;
    overflow: hidden;
  }
  .header .header-wrape .main-menu {
    display: none;
  }
  .introduction .introduction-group .first-screen .introduction-background {
    background: url("/assets/media/ovulio.png") 50% 0/270% 100% no-repeat;
  }
  .introduction .introduction-group .cloud {
    bottom: -35%;
    right: 0;
    animation: none;
  }
  .introduction .introduction-group .cloud svg {
    width: 100%;
    animation: none;
  }
  .introduction .introduction-group .cloud.cloud-size {
    bottom: -27%;
    right: 0;
    animation: cloudposition 2.5s ease-in-out;
  }
  .introduction .introduction-group .cloud.cloud-size svg {
    width: 100%;
    animation: none;
  }
  .introduction .introduction-group .branch-white__first svg {
    width: 130%;
    color: #FFF;
  }
  .introduction .introduction-group .branch-white__first.branch-pink svg {
    width: 60%;
    color: #fff;
    transform: rotate(-60deg);
    animation: branchpinksizeMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__first {
    top: 30%;
    left: 50%;
  }
  .introduction .introduction-group .branch-white__first.branch-pink {
    top: 50%;
    left: 0;
    z-index: 3;
    animation: branchpinkMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .introduction-text {
    top: 90%;
    color: #FAFF00;
    font-size: 24px;
    z-index: 3;
  }
  .introduction .introduction-group .introduction-text.intro-text__small {
    color: #00228F;
    font-size: 24px;
    animation: introsmalltextMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__second {
    top: 50%;
    left: 0;
  }
  .introduction .introduction-group .branch-white__second svg {
    width: 50%;
    transform: rotate(0);
    color: #FFF;
  }
  .introduction .introduction-group .branch-white__second.branch-size {
    top: 32%;
    left: 45%;
    z-index: 3;
    animation: branchpositionMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__second.branch-size svg {
    width: 130%;
    transform: rotate(70deg);
    color: #f48be0;
    animation: branchpositionColorMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .points {
    top: 83%;
    left: 55%;
    width: 30%;
    animation: none;
  }
  .introduction .introduction-group .points.points-size {
    top: 80%;
    left: 55%;
    width: 40%;
    animation: points 2.5s ease-in-out;
  }
  .introduction .introduction-group .points.points-size img {
    width: 70%;
    animation: none;
  }
  .introduction .introduction-group .points img {
    width: 70%;
  }
  .introduction .introduction-group .branch-yelow {
    top: 2%;
    left: 0;
    animation: none;
  }
  .introduction .introduction-group .branch-yelow.branch-blue {
    top: 2%;
    left: 0;
    animation: none;
  }
  .introduction .introduction-group .branch.branch-yelow.branch-blue svg {
    width: 100%;
    color: #00228F;
    filter: drop-shadow(2px 2px 3px #424242);
    animation: branchbluesizeMobile 2.5s ease-in-out;
  }
  .introduction .introduction-group .first-screen .introduction-text__second {
    top: 40%;
    font-size: 34px;
    animation: introTextMobile 2.5s ease-in-out;
  }
  /*********************************TECHNOLOGY FIRST SCREEN***********************/
  .introduction-group.modile {
    overflow-x: hidden;
  }
  .introduction .introduction-group .technology__first-screen {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    overflow: visible;
    align-items: center;
    margin-top: 10vh;
  }
  .introduction .introduction-group .technology__first-screen .technology-title {
    color: #FAFF00;
    font-family: Arial Rounded MT Bold;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
    position: relative;
    width: 100%;
    height: fit-content;
    display: flex;
  }
  .introduction .introduction-group .technology__first-screen .technology-title h2 {
    width: 75%;
  }
  .introduction .introduction-group .technology__first-screen .gallery {
    display: flex;
    justify-content: center;
    width: 90%;
    height: fit-content;
    margin-top: 0;
    flex-direction: column;
    position: relative;
    top: 0;
    margin-top: 5vh;
    margin-left: 5vh;
  }
  .introduction .introduction-group .technology__first-screen .gallery .gallery-image {
    width: 100%;
    position: relative;
  }
  .introduction .introduction-group .technology__first-screen .gallery .gallery-image img {
    top: -4%;
    left: 5%;
  }
  .introduction .introduction-group .technology__first-screen .gallery .gallery-image .image-wrap {
    height: 35vh;
  }
  .introduction .introduction-group .technology__first-screen .gallery .first-image img {
    height: 35vh;
  }
  .introduction .introduction-group .technology__first-screen .gallery .second-image {
    margin-top: 0px;
  }
  .introduction .introduction-group .technology__first-screen .gallery .second-image .image-wrap {
    display: none;
  }
  .introduction .introduction-group .technology__first-screen .gallery .second-image img {
    display: none;
  }
  .introduction .introduction-group .technology__first-screen .gallery .third-image .image-wrap {
    display: none;
  }
  .introduction .introduction-group .technology__first-screen .gallery .third-image img {
    display: none;
  }
  .introduction .introduction-group .technology__first-screen .gallery .gallery-image.first-image {
    height: fit-content;
    display: flex;
    flex-direction: column;
  }
  .branch.tech-first-mobile {
    position: absolute;
    top: 35px;
    left: 0%;
    z-index: 3;
  }
  .branch.tech-first-mobile svg {
    width: 45%;
    transform: rotate(0deg);
    color: #FAFF00;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  .branch.tech-second-mobile {
    position: absolute;
    top: 72%;
    left: 60%;
    z-index: -1;
  }
  .branch.tech-second-mobile svg {
    width: 130%;
    transform: rotate(80deg);
    color: #f48be0;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  .branch.tech-fifth-mobile {
    position: absolute;
    top: 74%;
    left: 56%;
    animation: none;
    z-index: -1;
  }
  .branch.tech-fifth-mobile svg {
    width: 137%;
    transform: rotate(80deg);
    color: #f48be0;
    animation: none;
  }
  /*********************************TECHNOLOGY SECOND SCREEN*******************************/
  .introduction .introduction-group .technology__second-screen {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 1;
    overflow: visible;
    margin-top: 0;
    display: flex;
    justify-content: center;
    margin-top: 3vh;
  }
  .introduction .introduction-group .technology__second-screen .gallery {
    display: flex;
    justify-content: center;
    width: 90%;
    height: fit-content;
    position: relative;
    z-index: 3;
    flex-direction: column;
    margin-left: 5vh;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
  }
  .introduction .introduction-group .technology__second-screen .gallery .second-image .image-wrap {
    border-color: #FFF;
    display: none;
  }
  .introduction .introduction-group .technology__second-screen .gallery .third-image .image-wrap {
    border-color: #FAFF00;
    display: none;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image .text-first {
    color: #00228F;
    opacity: 1;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image.second-image {
    margin-top: 0;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image.second-image .text-second {
    color: #FFF;
    position: relative;
    opacity: 1;
    top: 0;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image.third-image {
    margin-top: 0;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image.third-image .text-third {
    color: #FAFF00;
    position: relative;
    left: 0;
    opacity: 1;
  }
  .introduction .introduction-group .technology__second-screen .gallery .gallery-image .image-wrap img {
    width: 100%;
    height: 35vh;
    position: absolute;
    top: -6%;
    left: 6%;
    z-index: 1;
  }
  .introduction .introduction-group .technology__second-screen .gallery .first-image .image-wrap {
    height: 35vh;
  }
  .branch.tech-third-mobile {
    position: absolute;
    top: 32%;
    left: 0;
    z-index: 0;
  }
  .branch.tech-third-mobile svg {
    width: 70%;
    color: #fff;
    transform: rotate(20deg);
  }
  .branch.tech-fourth-mobile {
    position: absolute;
    top: 14%;
    left: 68%;
    animation: none;
    z-index: 3;
  }
  .branch.tech-fourth-mobile svg {
    width: 100%;
    color: #FAFF00;
    transform: rotate(20deg);
    animation: none;
  }
  /*********************************************INSTRUCTION************************************/
  .introduction .introduction-group .instruction {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
    overflow: visible;
    opacity: 1;
    margin-top: 3vh;
    display: flex;
  }
  .introduction .introduction-group .instruction .instruction-wrap {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instrucion-elips {
    width: 100%;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instrucion-elips .elips-image img {
    width: 90%;
    height: 100%;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instruction-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 50px;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instruction-info .instruction-title {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    text-align: center;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instruction-info .first-instruction {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .introduction .introduction-group .instruction .instruction-wrap .instruction-info .instruction-text {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    text-align: start;
    display: flex;
    margin: 0 0 0 30%;
  }
  .introduction .introduction-group .instruction .instruction-wrap .instrucion-elips .elips-image .elips-title {
    position: absolute;
    top: 19%;
    left: 30%;
    color: #FAFF00;
    font-family: Arial Rounded MT Bold;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .branch.instruction-first-mobile {
    position: absolute;
    top: 30%;
    left: 0%;
    animation: none;
  }
  .branch.instruction-first-mobile svg {
    width: 45%;
    color: #FAFF00;
    transform: rotate(20deg);
    animation: none;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  .branch.instruction-second-mobile {
    position: absolute;
    top: 25%;
    left: 69%;
    animation: none;
  }
  .branch.instruction-second-mobile svg {
    width: 120%;
    animation: none;
    transform: rotate(80deg);
    color: #f48be0;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  /*****************************************KIT************************************/
  .introduction .introduction-group .kit {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    overflow: visible;
    display: flex;
  }
  .introduction .introduction-group .kit .kit-wrap {
    display: flex;
    height: fit-content;
    flex-direction: column;
    margin-top: 35px;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 2;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-title {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 80%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    margin-top: 1vh;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-gallery {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    order: 1;
    height: 50vh;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-gallery .gallery-image {
    position: relative;
    width: 80%;
    height: 100%;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-form {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    border-radius: 50.5px;
    border: 4px solid #FFF;
    background: none;
    width: 50%;
    margin-top: 35px;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-form p {
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-text {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    text-align: center;
    margin-top: 35px;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-mail a {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-mail {
    display: flex;
    margin-top: 35px;
  }
  .introduction .introduction-group .kit .kit-wrap .kit-info .kit-footer {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    margin-top: 35px;
  }
  .branch.kit-first-mobile {
    position: absolute;
    top: -60%;
    left: -20%;
    z-index: 0;
    animation: none;
  }
  .branch.kit-first-mobile svg {
    width: 42%;
    color: #fff;
    transform: rotate(-60deg);
    animation: none;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  /**************************************TEAM****************************************/
  .introduction .introduction-group .team {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 0;
    overflow: visible;
    margin-top: 3vh;
    margin-bottom: 5vh;
  }
  .introduction .introduction-group .team .team-wrap {
    height: fit-content;
  }
  .introduction .introduction-group .team .team-wrap .team-title {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .introduction .introduction-group .team .team-wrap .team-person {
    display: flex;
    height: 80%;
    flex-direction: column;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person a.person-linked {
    width: 13%;
    height: 13%;
    position: absolute;
    top: 6%;
    left: 70%;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person.person-second {
    margin-top: 35px;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person img {
    width: 75%;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person.person-first .person-info__wrap .person-title {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .introduction .introduction-group .team .team-wrap .team-person .person.person-first .person-info__wrap .person-subtitle {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap {
    width: 100%;
    padding-left: 20%;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap .person-title {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person .person-info__wrap .person-subtitle {
    color: #00228F;
    font-family: Arial Rounded MT Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 80%;
  }
  .introduction .introduction-group .team .team-wrap .team-person .person.person-second .person-info__wrap .person-title {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .introduction .introduction-group .team .team-wrap .team-person .kit-footer {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    transform: matrix(1, 0, 0, 1, 0, 0);
    opacity: 1;
    margin-top: 35px;
    text-align: center;
  }
  .branch.team-first-mobile {
    position: absolute;
    top: 4%;
    left: 10%;
    z-index: 0;
    animation: none;
  }
  .branch.team-first-mobile svg {
    width: 36%;
    color: #FAFF00;
    transform: rotate(-60deg);
    animation: none;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  .branch.team-second-mobile {
    position: absolute;
    top: 33%;
    left: 68%;
    animation: none;
  }
  .branch.team-second-mobile svg {
    width: 100%;
    transform: rotate(80deg);
    color: #f48be0;
    animation: none;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  .branch.team-third-mobile {
    position: absolute;
    top: 54%;
    left: 55%;
    z-index: 0;
    animation: none;
  }
  .branch.team-third-mobile svg {
    width: 100%;
    color: #fff;
    transform: rotate(-60deg);
    animation: none;
    filter: drop-shadow(2px 2px 3px #424242);
  }
  /***********************************POPUP***************************************/
  .introduction .introduction-group .popup-white .popup {
    position: fixed;
    top: 0;
    left: 0;
    padding: 55% 20px;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid orange;
    border-radius: 4px;
    z-index: 99999;
    opacity: 1;
    background: url("/assets/media/popup.jpg") 0 0/100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
  .introduction .introduction-group .popup-white .popup .popup-title {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }
  .introduction .introduction-group .popup-white .popup form .submit-popup {
    color: #FFF;
    font-family: Arial Rounded MT Bold;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    border-radius: 50.5px;
    border: 4px solid #FFF;
    background: none;
    width: 60%;
  }
  .introduction .introduction-group .popup-white .popup form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 70%;
  }
  .introduction .introduction-group .popup-white .popup .popup-close {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 6;
  }
  /*************************************BRANCH************************************/
  .introduction .introduction-group .branch-white__second.branch-size.mobile {
    top: 27%;
    left: 8%;
    z-index: 3;
    animation: branchpositionMobileFixed 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__second.branch-size.mobile svg {
    width: 35%;
    transform: rotate(0deg);
    color: #FAFF00;
    animation: branchpositionColorMobileFixed 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-yelow.branch-blue.mobile {
    top: 68vh;
    left: 53%;
    animation: none;
    z-index: -1;
    animation: branchFirstTechFixed 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-yelow.branch-blue.mobile svg {
    transform: rotate(80deg);
    color: #f48be0;
    animation: branchFirstTechFixedColor 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__first.branch-pink.mobile {
    top: 50%;
    left: 0;
    z-index: 0;
    animation: branchDown 2.5s ease-in-out;
  }
  .introduction .introduction-group .branch-white__first.branch-pink.mobile svg {
    width: 50%;
    color: #fff;
    transform: rotate(-60deg);
  }
  .branch.mobile.popup-first {
    position: absolute;
    top: -6%;
    left: 2%;
    animation: none;
  }
  .branch.mobile.popup-first svg {
    width: 60%;
    transform: rotate(-78deg);
    color: #00228F;
    animation: none;
  }
  .branch.mobile.popup-second {
    position: absolute;
    top: 61%;
    left: 0%;
    animation: none;
  }
  .branch.mobile.popup-second svg {
    width: 60%;
    transform: rotate(20deg);
    color: #FFF;
    animation: none;
  }
  .branch.mobile.popup-third {
    position: absolute;
    top: 58%;
    left: 41%;
    animation: none;
  }
  .branch.mobile.popup-third svg {
    width: 96%;
    transform: rotate(10deg);
    color: #FAFF00;
    animation: none;
  }
  /********************************MOBILE ANIMATION*******************************/
  @keyframes branchbluesizeMobile {
    from {
      width: 75%;
      color: #FAFF00;
    }
    to {
      width: 100%;
      color: #00228F;
      filter: drop-shadow(2px 2px 3px #424242);
    }
  }
  @keyframes branchpinkMobile {
    from {
      top: 30%;
      left: 50%;
    }
    to {
      top: 50%;
      left: 0;
    }
  }
  @keyframes branchpinksizeMobile {
    from {
      width: 130%;
      color: #FFF;
      transform: rotate(0);
    }
    to {
      width: 60%;
      color: #fff;
      transform: rotate(-60deg);
    }
  }
  @keyframes cloudposition {
    from {
      bottom: -35%;
    }
    to {
      bottom: -27%;
    }
  }
  @keyframes points {
    from {
      top: 82%;
      left: 60%;
      width: 20%;
    }
    to {
      top: 80%;
      left: 55%;
      width: 40%;
    }
  }
  @keyframes branchsize {
    from {
      top: 50%;
      left: 0%;
    }
    to {
      top: 50%;
      left: 0%;
    }
  }
  @keyframes branchpositionMobile {
    from {
      top: 50%;
      left: 0%;
    }
    to {
      top: 32%;
      left: 45%;
    }
  }
  @keyframes branchpositionColorMobile {
    from {
      width: 50%;
      transform: rotate(0deg);
      color: #fff;
    }
    to {
      width: 130%;
      transform: rotate(70deg);
      color: #f48be0;
    }
  }
  @keyframes introsmalltextMobile {
    from {
      color: #FAFF00;
    }
    to {
      color: #00228F;
    }
  }
  @keyframes branchpositionMobileFixed {
    from {
      top: 32%;
      left: 45%;
    }
    to {
      top: 27%;
      left: 8%;
    }
  }
  @keyframes branchpositionColorMobileFixed {
    from {
      width: 130%;
      transform: rotate(70deg);
      color: #f48be0;
    }
    to {
      width: 35%;
      transform: rotate(0deg);
      color: #FAFF00;
    }
  }
  @keyframes branchFirstTechFixed {
    from {
      top: 2%;
      left: 0;
    }
    to {
      top: 68vh;
      left: 53%;
    }
  }
  @keyframes branchFirstTechFixedColor {
    from {
      color: #00228F;
      transform: rotate(0);
    }
    to {
      color: #f48be0;
      transform: rotate(80deg);
    }
  }
  @keyframes branchDown {
    from {
      top: 50%;
    }
    to {
      top: 50%;
    }
  }
  @keyframes headerColor {
    from {
      background: #FFF;
    }
    to {
      background: rgba(255, 255, 255, 0.5);
    }
  }
}
/***************************MOBILE**************************/