@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul[class],
ol[class] {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Mixins & Animations
----------------------------------------------*/
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}
/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Grid
----------------------------------------------*/
.container {
  padding-right: 52px;
  padding-left: 52px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1440px;
  width: 100%;
}

.container-no-padd {
  padding-left: 0;
  padding-right: 0;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-right: 52px;
  padding-left: 52px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1440px;
  grid-column-gap: 24px;
  width: 100%;
}
.wrapper .wrapper {
  padding-right: 0;
  padding-left: 0;
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {
  .wrapper {
    padding-right: 26px;
    padding-left: 26px;
  }

  .col-1 {
    grid-column: span 12;
  }

  .col-2 {
    grid-column: span 12;
  }

  .col-3 {
    grid-column: span 12;
  }

  .col-4 {
    grid-column: span 12;
  }

  .col-5 {
    grid-column: span 12;
  }

  .col-6 {
    grid-column: span 12;
  }

  .col-7 {
    grid-column: span 12;
  }

  .col-8 {
    grid-column: span 12;
  }

  .col-9 {
    grid-column: span 12;
  }

  .col-10 {
    grid-column: span 12;
  }

  .col-11 {
    grid-column: span 12;
  }

  .col-12 {
    grid-column: span 12;
  }
}
/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Helpers
----------------------------------------------*/
.mb-0 {
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flexbox-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.alg-spacebetween {
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

.just-content-spacebetween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.just-content-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.alg-center {
  -ms-flex-line-pack: center;
      align-content: center;
}

.alg-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.alg-items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.full-width-element {
  width: 100%;
}

.full-width-fill {
  background: #0266FF;
}

.text-light {
  color: rgba(206, 206, 206, 0.5);
}

.color-green {
  color: #0266FF;
}

.red-text {
  color: #F23A3A;
}

.color-yellow {
  color: #F8B63C;
}

.pos-rel {
  position: relative;
}

.pos-abs {
  position: absolute;
}

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

.full-screen {
  width: 100vw;
  height: calc(100vh - 51px);
  padding-top: 135px;
  padding-bottom: 135px;
}

.width-parag {
  max-width: 460px;
  width: 100%;
}

.mb-m {
  margin-bottom: 24px;
}

.mobile {
  display: none;
}

/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Variables
----------------------------------------------*/
/*----------------------------------------------
Fonts
----------------------------------------------*/
/*----------------------------------------------
Mixins & Animations
----------------------------------------------*/
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 50%;
    opacity: 1;
  }
}
/*----------------------------------------------
Basic tag style
----------------------------------------------*/
input[type="text"], input[type="tel"], input[type="email"], textarea, input[type="search"], select {
  width: 100%;
  border: none;
  padding: 5px 10px;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
}
input[type="text"]:focus, input[type="text"]:focus-visible, input[type="tel"]:focus, input[type="tel"]:focus-visible, input[type="email"]:focus, input[type="email"]:focus-visible, textarea:focus, textarea:focus-visible, input[type="search"]:focus, input[type="search"]:focus-visible, select:focus, select:focus-visible {
  border: none;
  outline: none;
}

textarea {
  height: 150px;
}

form {
  position: relative;
}
form .wrapper {
  padding-right: 0;
  padding-left: 0;
}

label {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

form .white-button {
  text-transform: none;
  letter-spacing: 0.1em;
}

/*----------------------------------------------*/
.form-input {
  margin-bottom: 12px;
}

.form .contact-block {
  margin-bottom: 12px;
}
.form .contact-block span {
  font-size: 48px;
  margin-right: 12px;
}
.form .contact-block a {
  color: #000;
  text-decoration: underline;
}
.form .contact-block a:hover {
  color: #0266FF;
}

#searchform {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#searchform #searchsubmit {
  padding: 5px 15px;
}
#searchform #input-search {
  margin-right: 12px;
}
#searchform #searchsubmit:hover {
  border-color: #0266FF;
}

.full-fill {
  background: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: #000000;
  border: 2px solid #fff;
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
}
.full-fill:active, .full-fill:focus, .full-fill:hover {
  background: #0266FF;
  border-color: #0266FF;
}

.white-button {
  background: rgba(206, 206, 206, 0.5);
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: #254C50;
  border: 2px solid rgba(206, 206, 206, 0.5);
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
}
.white-button:active, .white-button:focus, .white-button:hover {
  background: transparent;
  border-color: rgba(206, 206, 206, 0.5);
  color: rgba(206, 206, 206, 0.5);
}

.yellow-button {
  background: #F8B63C;
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: #CECECE;
  border: 2px solid #F8B63C;
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
}
.yellow-button:active, .yellow-button:focus, .yellow-button:hover {
  background: transparent;
  border-color: #F8B63C;
  color: #F8B63C;
}

.green-button {
  background: #0266FF;
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: rgba(206, 206, 206, 0.5);
  border: 2px solid #0266FF;
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
}
.green-button:active, .green-button:focus, .green-button:hover {
  background: transparent;
  border-color: #0266FF;
  color: #0266FF;
}

.transparent-fill {
  background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
  border-color: #fff;
}
.transparent-fill:active, .transparent-fill:focus, .transparent-fill:hover {
  background: #fff;
  color: #000000;
}

.accent-fill {
  background: #0266FF;
  padding: 6px 12px;
  border-radius: 6px;
  display: block;
  color: #fff;
  border: 2px solid #0266FF;
  cursor: pointer;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
}
.accent-fill:active, .accent-fill:focus, .accent-fill:hover {
  background: #fff;
  border-color: #fff;
}

/*----------------------------------------------
Basic tag style
----------------------------------------------*/
html {
  scroll-behavior: smooth;
  width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: "Roboto Flex", sans-serif;
  overflow-x: hidden;
  background: #000000;
  font-weight: 600;
}

h1 {
  margin-bottom: 36px;
  font-size: 64px;
  line-height: 72px;
  color: rgba(206, 206, 206, 0.5);
}

h2 {
  font-size: 96px;
  line-height: 100px;
  color: #CECECE;
  margin-bottom: 12px;
  font-weight: 600;
}

h3 {
  margin-bottom: 12px;
  font-size: 48px;
  line-height: 48px;
  color: #CECECE;
  font-weight: 600;
}

h4 {
  margin-bottom: 12px;
  font-size: 32px;
  line-height: 36px;
  color: #CECECE;
  font-weight: 600;
}

.title {
  font-size: 120px;
  line-height: 120px;
  margin-bottom: 60px;
}

.subtitle {
  font-size: 32px;
  line-height: 36px;
  color: #CECECE;
}

p {
  font-size: 24px;
  line-height: 28px;
  color: #CECECE;
  font-weight: 600;
  font-family: "Roboto Flex", sans-serif;
}

a {
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  font-family: "Roboto Flex", sans-serif;
}
a:hover {
  color: #0266FF;
}

section {
  padding: 0;
}

/*----------------------------------------------
HEADER
----------------------------------------------*/
header {
  padding: 21px 72px 0;
}
header p {
  font-size: 11px;
}
header .primary-menu {
  -webkit-column-gap: 36px;
          column-gap: 36px;
  margin-right: 60px;
}
header .primary-menu li a {
  text-transform: uppercase;
  display: block;
  font-size: 11px;
  line-height: 24px;
  color: #fff;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
header .primary-menu li a:focus, header .primary-menu li a:hover, header .primary-menu li a:active {
  color: #0266FF;
}

.burger-menu {
  background: transparent;
  border: none;
  padding: 0;
  display: none;
}
.burger-menu span {
  background-color: #fff;
  height: 2px;
  width: 24px;
  margin-bottom: 6px;
  display: block;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.burger-menu span:last-child {
  margin-bottom: 0;
}
.burger-menu:hover, .burger-menu:focus, .burger-menu:active {
  cursor: pointer;
}
.burger-menu:hover span, .burger-menu:focus span, .burger-menu:active span {
  background-color: #0266FF;
}

.img-logo {
  margin-right: 64px;
}

.lang img {
  margin-right: 6px;
}

/*----------------------------------------------*/
#block-1 {
  padding: 135px 72px;
}
#block-1 .content {
  padding-left: 10.1%;
}
#block-1 p,
#block-1 h1 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  z-index: 2;
  position: relative;
}
#block-1 img {
  width: 70.7%;
  margin-right: 0;
  position: absolute;
  top: 50%;
  right: 72px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

#age {
  padding: 200px 0px 460px;
}
#age .content {
  width: 70.7%;
  max-width: 802px;
  position: relative;
  margin: 0 auto;
}

#image-one {
  top: -77px;
  left: 580px;
  z-index: -1;
}

#image-hand {
  left: 403px;
  top: -50px;
  z-index: -3;
}

#project {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 300px;
}
#project .container-no-padd {
  height: 100%;
}
#project .content {
  width: 100%;
  height: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding: 0 72px 120px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 0;
}
#project .content h2, #project .content p {
  color: #fff;
  max-width: 478px;
}
#project .content img {
  top: -78px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#workers {
  margin-bottom: 380px;
}
#workers .container {
  padding-left: 72px;
  padding-right: 72px;
}
#workers p {
  margin-bottom: 48px;
}

.align-right {
  margin-right: 0;
  margin-left: auto;
}

#comand {
  margin-bottom: 500px;
}
#comand .container {
  padding-left: 12px;
  padding-right: 12px;
}
#comand .image {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
#comand .image #seven-2 {
  top: 10px;
  right: -10px;
}
#comand .image #seven-3 {
  top: 20px;
  right: -20px;
}
#comand .image #seven-4 {
  top: 30px;
  right: -30px;
}
#comand .image #seven-5 {
  top: 40px;
  right: -40px;
}
#comand .image #seven-6 {
  top: 50px;
  right: -50px;
}
#comand .image #seven-7 {
  top: 60px;
  right: -60px;
}
#comand h2, #comand p {
  margin-left: 398px;
}

#clients {
  margin-bottom: 240px;
}
#clients .container {
  padding-left: 118px;
  padding-right: 118px;
  height: 100%;
}
#clients .content > div {
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
#clients .content p {
  margin-bottom: 120px;
}
#clients .content .logotype {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 48px;
}
#clients .content .logotype img {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  grid-column: span 1;
}
#clients .content .logotype img:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.heading-case img {
  margin-right: 12px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

#yandex {
  margin-bottom: 320px;
}
#yandex .container {
  padding-left: 72px;
  padding-right: 72px;
}
#yandex .content .width-parag {
  margin: 0 178px 88px;
}
#yandex .back-img {
  background: url("./yandex-background.webp");
  padding: 120px 0;
  background-repeat: no-repeat;
  background-size: cover;
}
#yandex .back-img h4, #yandex .back-img p {
  color: #fff;
}
#yandex .back-img h4 a, #yandex .back-img p a {
  color: #fff;
}
#yandex .back-img .width-parag {
  margin-bottom: 0;
}

.tag {
  font-size: 14px;
  line-height: 16px;
}

.ref a {
  margin-right: 36px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.absolute-img {
  position: absolute;
  z-index: 1;
}

#yand-1 {
  right: -62px;
  bottom: -40px;
}

#yan-1, #yan-10 {
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
}

#yand-2 {
  right: 278px;
  top: -60px;
}

#needphoto {
  margin-bottom: 360px;
}
#needphoto .img {
  margin-left: 90px;
  margin-right: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#needphoto .img img {
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
}
#needphoto h3 img {
  margin-right: 12px;
}
#needphoto h4 a {
  color: #CECECE;
}
#needphoto .ref {
  margin-bottom: 34px;
}
#needphoto .container-carousel {
  height: 240px;
  margin-bottom: 48px;
}
#needphoto .container-carousel .pos-abs {
  left: 0;
  right: 0;
}
#needphoto .container-carousel .pos-rel {
  z-index: -2;
}
#needphoto .carousel img {
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}
#needphoto .carousel .slick-slide {
  margin: 0 5px;
}

.descr {
  margin-bottom: 48px;
}
.descr p {
  opacity: 0.5;
  font-size: 14px;
  line-height: 16px;
}
.descr:last-child {
  margin-bottom: 0;
}

#businessfox {
  margin-bottom: 180px;
}
#businessfox .container {
  padding-left: 80px;
  padding-right: 80px;
}
#businessfox .content {
  width: 100%;
  padding: 60px 90px 0 250px;
}
#businessfox .content p {
  margin-bottom: 24px;
  max-width: 700px;
}
#businessfox .content .ref {
  margin-bottom: 48px;
}
#businessfox .content .ref p {
  margin-bottom: 0;
}
#businessfox .content-2 {
  padding-top: 0;
  margin-top: -60px;
}
#businessfox .content-2 .pos-abs {
  z-index: 2;
}
#businessfox .container-carousel {
  height: 460px;
}
#businessfox .container-carousel .pos-abs {
  left: 0;
  right: 0;
}
#businessfox .container-carousel .pos-rel {
  z-index: 2;
}
#businessfox .container-carousel .pos-rel:after {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30.21%, rgba(0, 0, 0, 0.1)), to(#000000));
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 30.21%, #000000 100%);
  position: absolute;
  content: '';
  top: 0;
  bottom: -1px;
  left: 0;
  right: 0;
}
#businessfox .carousel-2 img {
  height: 460px;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#businessfox .carousel-2 .slick-slide {
  margin: 0 6px;
}

.container-image {
  height: 390px;
}
.container-image .pos-abs {
  left: 0;
  right: 0;
}
.container-image .image {
  -webkit-column-gap: 18px;
          column-gap: 18px;
  position: relative;
}
.container-image .image img {
  width: calc(100% - 36px)/3;
}
.container-image .image:after {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30.21%, rgba(0, 0, 0, 0.55208)), to(#000000));
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55208) 30.21%, #000000 100%);
  position: absolute;
  content: '';
  top: 0;
  bottom: -1px;
  left: 0;
  right: 0;
}
.container-image .text {
  -webkit-column-gap: 20px;
          column-gap: 20px;
}
.container-image .text .descr {
  width: 33.3%;
  z-index: 5;
  position: relative;
  margin-bottom: 0;
  min-height: 140px;
}

#docke {
  margin-bottom: 320px;
}
#docke #cont-2 {
  margin-top: -140px;
  z-index: 125;
  position: relative;
}
#docke #cont-2 .content {
  padding-top: 0;
}
#docke .container {
  padding-left: 80px;
  padding-right: 80px;
}
#docke .content {
  width: 100%;
  padding: 60px 90px 0 250px;
}
#docke .content p {
  margin-bottom: 24px;
  max-width: 700px;
}
#docke .content .ref {
  margin-bottom: 48px;
}
#docke .content .ref p {
  margin-bottom: 0;
}
#docke .content .text {
  -webkit-column-gap: 20px;
          column-gap: 20px;
  margin-bottom: 40px;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
#docke .content .text .descr {
  width: 33.3%;
  z-index: 5;
  position: relative;
  margin-bottom: 0;
}
#docke .container-image {
  height: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  margin: 0 auto;
}
#docke .container-image #img-docke {
  margin: 0 auto;
}
#docke .container-image #img-docke2 {
  top: 0;
  right: 0;
  left: auto;
  z-index: 110;
  width: 93.9%;
}
#docke .container-image #img-docke3 {
  left: 0;
  top: 0;
  z-index: 1;
  width: 99%;
}
#docke .container-image #img-docke4 {
  left: 6.6%;
  top: 11.2%;
  z-index: 3;
  width: 73.8%;
}
#docke .container-image #img-docke5 {
  top: -16.4%;
  z-index: 114;
  right: -3%;
  left: auto;
  width: 54.5%;
}
#docke .container-image #img-docke6 {
  bottom: 1.4%;
  z-index: 114;
  right: 0.9%;
  left: auto;
  width: 50.6%;
}
#docke .container-image #img-docke7 {
  top: -16.4%;
  z-index: 114;
  right: -3%;
  left: auto;
  width: 11.7%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#docke .container-image:after {
  position: absolute;
  content: '';
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 342px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(78.65%, rgba(0, 0, 0, 0.7)), to(#000000));
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 78.65%, #000000 100%);
}

#hand-docke {
  z-index: -5;
  top: -220px;
  left: 0px;
}

#my-areas {
  margin-bottom: 200px;
}
#my-areas .content {
  padding-left: 250px;
  padding-right: 190px;
}
#my-areas .text {
  max-width: 380px;
  margin-right: 100px;
  padding-top: 200px;
  position: relative;
  z-index: 10;
  padding-bottom: 314px;
}
#my-areas .image {
  /* полоса прокрутки (скроллбар) */
  height: 1170px;
  overflow-y: scroll;
  margin-bottom: 2px;
  border-radius: 22px;
}
#my-areas .image::-webkit-scrollbar {
  width: 0;
  /* ширина для вертикального скролла */
  height: 0;
  /* высота для горизонтального скролла */
  background-color: #143861;
}
#my-areas:after {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(64.58%, rgba(0, 0, 0, 0.7)), to(#000000));
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 64.58%, #000000 100%);
  position: absolute;
  content: '';
  top: 440px;
  bottom: 0;
  left: 0;
  right: 0;
}
#my-areas .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}

#img-areas {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#vodokanal {
  background: url("./vodokanal-back.webp");
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 360px;
}
#vodokanal .content {
  padding: 60px 306px 80px 95px;
}
#vodokanal .text {
  max-width: 410px;
}
#vodokanal .text h3, #vodokanal .text h4, #vodokanal .text p {
  color: #44446B;
}
#vodokanal .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}
#vodokanal .image {
  position: relative;
  width: calc(100% - 410px);
  margin-right: 98px;
}

#vodok-1 {
  bottom: -80px;
  right: 82px;
  width: 68%;
  z-index: 2;
}

#vodok-2 {
  right: 0;
  width: 91%;
  top: -190px;
  z-index: 1;
}

#vodok-3 {
  width: 100%;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 3;
}

#unionjack {
  padding-left: 20px;
  padding-right: 160px;
  margin-bottom: 420px;
}
#unionjack .text {
  max-width: 400px;
}
#unionjack .image {
  margin-right: 100px;
}
#unionjack .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}

#union-1 {
  right: 0;
  bottom: -155px;
  width: 48%;
}

#union-2 {
  right: 434px;
  bottom: -130px;
  width: 26.6%;
}

#union-3 {
  left: 236px;
  top: -140px;
  width: 23.5%;
  z-index: -1;
}

#bestofyou {
  margin-bottom: 150px;
}
#bestofyou .image > img {
  width: 100%;
}
#bestofyou .image .video {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
#bestofyou .image .video img {
  width: 100%;
}
#bestofyou .container {
  padding-left: 70px;
  padding-right: 70px;
}
#bestofyou .text {
  padding: 0 180px;
  margin-top: 24px;
  z-index: 5;
  position: relative;
}
#bestofyou .text .block-heading {
  max-width: 700px;
}
#bestofyou .text .flex {
  -webkit-column-gap: 20px;
          column-gap: 20px;
}
#bestofyou .text .descr {
  width: 33.3%;
}
#bestofyou .ref {
  margin-top: 24px;
  margin-bottom: 48px;
}

#boy-1 {
  right: 0;
  top: -341px;
  z-index: -2;
}

#boy-2 {
  left: 57px;
  top: 354px;
  z-index: 10;
}

#boy-3 {
  right: 0;
  bottom: 10px;
  z-index: -1;
}

#dariazu {
  padding-left: 0px;
  padding-right: 160px;
  margin-bottom: 525px;
}
#dariazu .text {
  max-width: 400px;
  z-index: 10;
}
#dariazu .image {
  margin-right: 100px;
  width: calc(100% - 100px - 400px);
  min-height: 632px;
}
#dariazu .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}

#zu-1 {
  right: 80px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 5;
  -webkit-filter: drop-shadow(0px 20px 100px #000000);
          filter: drop-shadow(0px 20px 100px #000000);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

#zu-3 {
  top: -48px;
  left: 76px;
  z-index: 4;
}

#zu-2 {
  bottom: -165px;
  right: 160px;
  z-index: 3;
}

#zu-video {
  top: 0;
  bottom: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  left: 0;
  right: 0;
  width: 100%;
}

#aerogreet {
  margin-bottom: 360px;
}
#aerogreet .container {
  padding-right: 72px;
  padding-left: 170px;
}
#aerogreet .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}
#aerogreet .text {
  max-width: 400px;
  padding-top: 63px;
}
#aerogreet .text .tags {
  margin-bottom: 170px;
}
#aerogreet .image {
  margin-right: 100px;
  width: calc(100% - 400px - 100px);
}

#aerogreet-1 {
  bottom: -110px;
  left: 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

#aerogreet-2 {
  border-radius: 100%;
  aspect-ratio: 1/1;
  /* width: 1080px; */
  /* height: 1080px; */
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

#video-aerogreet {
  left: -262px;
  top: 0;
}

#aerogreet-3 {
  right: 0;
  top: -430px;
  z-index: -1;
}

#aerogreet-4 {
  bottom: 0;
  right: 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

#aerogreet-5 {
  bottom: -110px;
  right: 19px;
  -webkit-filter: drop-shadow(0px 20px 50px #000000);
          filter: drop-shadow(0px 20px 50px #000000);
}

#leadswork {
  margin-bottom: 410px;
}
#leadswork .block-1 {
  padding-left: 410px;
  padding-right: 36px;
}
#leadswork .block-1 .text {
  max-width: 400px;
  margin-right: 100px;
}
#leadswork .block-1 .image {
  background: url(./back-1-leads.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  -webkit-filter: drop-shadow(0px 30px 100px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0px 30px 100px rgba(0, 0, 0, 0.3));
}
#leadswork .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}
#leadswork .block-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding-right: 410px;
}
#leadswork .block-2 .text {
  padding-left: 60px;
  margin-top: 170px;
}
#leadswork .block-2 .text .flex {
  gap: 20px;
}
#leadswork .block-2 .text .flex .descr {
  width: 220px;
}
#leadswork .block-2 .text .descr {
  max-width: 380px;
}
#leadswork .block-2 .image {
  position: absolute;
  bottom: 0;
  z-index: -1;
  height: 64.7%;
  right: 910px;
  left: -90px;
}
#leadswork h4 a {
  color: #CECECE;
}

#arzamas {
  background: #F6F5FA;
}
#arzamas .container {
  padding-left: 66px;
  padding-right: 66px;
  z-index: 2;
  position: relative;
}
#arzamas .text {
  padding-top: 105px;
  padding-bottom: 80px;
  margin-right: 50px;
  max-width: 435px;
}
#arzamas .text h3, #arzamas .text h4, #arzamas .text p {
  color: #44446B;
}
#arzamas .text p {
  max-width: 400px;
}
#arzamas .text .descr {
  margin-bottom: 64px;
}
#arzamas .text .descr:last-child {
  margin-bottom: 0;
}
#arzamas .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}
#arzamas .image {
  width: calc( 100% - 435px - 50px);
}

#arzamas-fon {
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}

#arzamas-1 {
  top: -145px;
  left: 0;
}

#arzamas-2 {
  bottom: -115px;
  right: -130px;
  z-index: 1;
}

#paint-fon {
  top: -37px;
  right: 0;
}

#paint {
  padding-top: 323px;
  z-index: 3;
  background: #000;
}
#paint .container {
  padding-left: 66px;
  padding-right: 66px;
  z-index: 2;
  position: relative;
}
#paint .text {
  padding-top: 37px;
  margin-right: 187px;
  padding-bottom: 120px;
  max-width: 380px;
}
#paint .text h3, #paint .text h4, #paint .text p {
  color: #fff;
}
#paint .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}
#paint .image {
  width: calc( 100% - 380px - 187px);
}
#paint .gradient {
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 516px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(64.58%, rgba(0, 0, 0, 0.7)), to(#000000));
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 64.58%, #000000 100%);
}

#paint-img {
  width: 100%;
  top: 0;
  left: 0;
}

#dungeon {
  padding-top: 320px;
  padding-bottom: 250px;
  background: url("./dung-fon.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 190px;
}
#dungeon .container {
  max-width: 100%;
  padding-left: 62px;
  padding-right: 250px;
}
#dungeon .text {
  max-width: 400px;
  margin-left: 43px;
}
#dungeon .image {
  width: calc(100% - 400px - 43px);
}
#dungeon .ref {
  margin-top: 24px;
  margin-bottom: 60px;
}

.close {
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  color: #fff;
  display: none;
}
.close span {
  background-color: #fff;
  height: 2px;
  width: 23px;
  margin-bottom: -2px;
  display: block;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.close span:last-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-bottom: 0;
}

#myLinks {
  display: none;
  width: 100%;
  height: 100vh;
  z-index: 50;
  top: 68px;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(32px);
          backdrop-filter: blur(32px);
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}
#myLinks .menu-right {
  text-align: left;
  position: absolute;
  color: #fff;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 100;
  padding: 36px;
}

#navigation {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

#navigation.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1000;
  padding-bottom: 21px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

#dung-1 {
  margin: 0 auto;
}

#dung-2 {
  top: -320px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

#dung-3 {
  top: -130px;
  left: 0;
}

#dung-5 {
  top: -45px;
  right: 45px;
  z-index: 4;
}

#dung-6 {
  right: -80px;
  top: 307px;
  z-index: 4;
}

#dung-7 {
  right: 40px;
  bottom: 0;
  z-index: 4;
}

#dung-8 {
  bottom: -220px;
  right: 350px;
  z-index: 4;
}

#dung-9 {
  right: -210px;
  bottom: -165px;
  z-index: 4;
}

#dung-fon {
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}

.heading {
  margin-top: 240px;
  margin-bottom: 120px;
}
.heading .wrapper {
  padding-left: 144px;
  padding-right: 144px;
}

.person {
  padding-top: 160px;
  padding-bottom: 240px;
}
.person .text {
  max-width: 600px;
}
.person .ref-tlg {
  margin-top: 40px;
}
.person .logo {
  margin-bottom: 120px;
}

#person-1 {
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#B6C4D6));
  background: linear-gradient(180deg, #FFFFFF 0%, #B6C4D6 100%);
  overflow-y: hidden;
}
#person-1 h3, #person-1 p {
  color: #44446B;
}

#person-2 {
  background: -webkit-gradient(linear, left bottom, left top, from(#242930), to(rgba(36, 41, 48, 0)));
  background: linear-gradient(0deg, #242930 0%, rgba(36, 41, 48, 0) 100%);
  overflow-y: hidden;
}
#person-2 h3, #person-2 p {
  color: #fff;
}
#person-2 .content {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding-right: 13%;
  z-index: 5;
  position: relative;
}

.ref-tlg {
  color: #0266FF;
  font-size: 24px;
  font-weight: 700;
}

#person-img-1 {
  top: 0;
  right: 212px;
  z-index: 1;
}

#person-img-2 {
  bottom: 0;
  right: 306px;
  z-index: 1;
}

#person-img-3 {
  bottom: -4px;
  right: 0;
  z-index: 1;
  height: 259px;
}
#person-img-3 svg {
  position: absolute;
  right: 0;
  bottom: 0;
}

.mobile-show {
  display: none;
}

#person-img-4 {
  bottom: 0;
  left: 19.2%;
  z-index: 1;
}

#person-img-5 {
  bottom: 0;
  left: 17.7%;
  z-index: 1;
}

#person-img-6 {
  bottom: -4px;
  left: 0;
  z-index: 1;
  height: 253px;
}
#person-img-6 svg {
  position: absolute;
  right: 0;
  bottom: 0;
}

#contacts {
  position: relative;
}
#contacts .container {
  padding-bottom: 160px;
  padding-top: 224px;
  z-index: 10;
  position: relative;
}
#contacts .text {
  max-width: 470px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 90px;
}
#contacts p {
  color: #fff;
  margin-bottom: 24px;
}
#contacts .accent-fill {
  margin-top: 32px;
  margin-bottom: 80px;
  width: 100%;
  text-align: center;
}
#contacts .flex {
  margin-bottom: 20px;
}
#contacts .flex:last-child {
  margin-bottom: 0;
}

#video-back-footer {
  height: 100%;
  width: 100%;
}
#video-back-footer img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#video-back-footer video {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#contacts-img {
  bottom: 0;
  width: 41.5%;
  right: 14.3%;
}

.ref-cont {
  color: #0266FF;
  font-size: 24px;
  font-weight: 400;
  margin-left: 16px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  margin-right: 0 !important;
}
.ref-cont:active, .ref-cont:focus, .ref-cont:hover {
  color: #fff;
}

footer {
  margin-bottom: 0;
}
footer .copy-text {
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: 0 !important;
  color: #CECECE !important;
}
footer .copy-text a {
  color: #CECECE;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
footer .copy-text a:hover {
  color: #0266FF;
}

.ref-menu {
  height: 80px;
}

#technology {
  margin-bottom: 160px;
}
#technology .wrapper {
  max-width: 1684px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

.card-tech {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow-x: hidden;
}
.card-tech .block-empty {
  height: 160px;
  border-radius: 0 0 24px 24px;
}
.card-tech .text {
  padding: 20px 20px 24px;
  background: #0E0E0E;
  border-radius: 24px 24px 0 0;
  min-height: 140px;
}
.card-tech .text h4, .card-tech .text p {
  color: #CECECE;
}
.card-tech .text p {
  opacity: 0.5;
  font-size: 14px;
  line-height: 16px;
}
.card-tech img {
  bottom: 0;
  left: 84px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.card-tech:hover img {
  left: 184px;
}

#card-tech-1 .block-empty {
  background: #FC3F1D;
}

#card-tech-2 .block-empty {
  background: #FC7B1D;
}

#card-tech-3 .block-empty {
  background: #FCCB1D;
}

#card-tech-4 .block-empty {
  background: #9AFC1D;
}

#card-tech-5 .block-empty {
  background: #1DFCB9;
}

#card-tech-6 .block-empty {
  background: #1D9EFC;
}

#card-tech-7 .block-empty {
  background: #9A1DFC;
}

#card-tech-8 .block-empty {
  background: #FC1D7B;
}

#direction {
  margin-bottom: 40px;
}
#direction .wrapper {
  max-width: 1644px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

.card-direct {
  background: #0E0E0E;
  border-radius: 24px;
  height: 240px;
  overflow: hidden;
}
.card-direct path, .card-direct g, .card-direct rect {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.card-direct:hover g {
  opacity: 1;
}
.card-direct:hover path, .card-direct:hover rect {
  stroke: #fff;
}
.card-direct .pos-abs {
  bottom: -10px;
  right: 0;
}
.card-direct p {
  font-size: 14px;
  padding: 20px 20px 0;
  text-transform: uppercase;
}

#experience {
  margin-bottom: 110px;
}
#experience .wrapper {
  max-width: 1304px;
}
#experience h3 {
  margin-bottom: 64px;
}
#experience p {
  font-size: 14px;
  margin-left: 8px;
}

#icon-technology {
  margin-bottom: 20px;
}
#icon-technology .wrapper {
  max-width: 1304px;
}
#icon-technology .col-12 > div {
  margin-bottom: 60px;
}
#icon-technology .icon {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#icon-technology .text-icon {
  background: rgba(255, 255, 255, 0.2);
  padding: 0 8px;
  border-radius: 6px;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 0;
  top: -38px;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
#icon-technology .text-icon p {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
#icon-technology .text-icon img {
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  bottom: -9px;
}
#icon-technology .main-icon g {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
#icon-technology .main-icon:hover {
  cursor: pointer;
}
#icon-technology .main-icon:hover g {
  opacity: 1;
}
#icon-technology .main-icon:hover + .text-icon {
  opacity: 1;
}

.grid-icon {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
}

#podhod {
  margin-top: 160px;
}

.block-exp {
  margin-right: 22px;
}
.block-exp:last-child {
  margin-right: 0;
}

#video-fox {
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  max-width: 1280px;
  margin: 0 auto;
}
#video-fox:after {
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
#video-fox video {
  width: 100%;
}

@-webkit-keyframes swing1 {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing1 {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing1 {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: swing1;
          animation-name: swing1;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.swing {
  -webkit-animation: swing ease-in-out 1s infinite alternate;
          animation: swing ease-in-out 1s infinite alternate;
  -webkit-transform-origin: center -20px;
          transform-origin: center -20px;
  float: left;
}

.rotateRight {
  -webkit-animation: rotateRight ease-in-out 5s infinite alternate;
          animation: rotateRight ease-in-out 5s infinite alternate;
  -webkit-transform-origin: center;
          transform-origin: center;
  float: left;
}

.rotateLeft {
  -webkit-animation: rotateLeft ease-in-out 4s infinite alternate;
          animation: rotateLeft ease-in-out 4s infinite alternate;
  -webkit-transform-origin: center;
          transform-origin: center;
  float: left;
}

.swing3 {
  -webkit-animation: swing3 ease-in-out 7s infinite alternate;
          animation: swing3 ease-in-out 7s infinite alternate;
  -webkit-transform-origin: center -20px;
          transform-origin: center -20px;
  float: left;
}

.swing2 {
  -webkit-animation: swing2 ease-in-out 5s infinite alternate;
          animation: swing2 ease-in-out 5s infinite alternate;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.swingDung {
  -webkit-animation: swingDung ease-in-out 4s infinite alternate;
          animation: swingDung ease-in-out 4s infinite alternate;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.swingDung2 {
  -webkit-animation: swingDung2 ease-in-out 3s infinite alternate;
          animation: swingDung2 ease-in-out 3s infinite alternate;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.swing:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  top: -10px;
  left: 50%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* nail */
.swing:before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  top: -14px;
  left: 54%;
  z-index: 5;
  border-radius: 50% 50%;
  background: #000;
}

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
}
@-webkit-keyframes swing3 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes swing3 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@-webkit-keyframes swing2 {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@keyframes swing2 {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@-webkit-keyframes rotateRight {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotateRight {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateLeft {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotateLeft {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes swingDung {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes swingDung {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@-webkit-keyframes swingDung2 {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}
@keyframes swingDung2 {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}
#yellow-back-1 {
  right: 274px;
  top: 84px;
}

#yellow-back-2 {
  left: 170px;
  top: 154px;
}

.image-par {
  -webkit-animation: test 5s ease infinite;
          animation: test 5s ease infinite;
}

@-webkit-keyframes test {
  0% {
    -webkit-transform: translateY(-15px) translateX(-20px);
            transform: translateY(-15px) translateX(-20px);
  }
  50% {
    -webkit-transform: translateY(15px) translateX(20px);
            transform: translateY(15px) translateX(20px);
  }
  100% {
    -webkit-transform: translateY(-15px) translateX(-20px);
            transform: translateY(-15px) translateX(-20px);
  }
}

@keyframes test {
  0% {
    -webkit-transform: translateY(-15px) translateX(-20px);
            transform: translateY(-15px) translateX(-20px);
  }
  50% {
    -webkit-transform: translateY(15px) translateX(20px);
            transform: translateY(15px) translateX(20px);
  }
  100% {
    -webkit-transform: translateY(-15px) translateX(-20px);
            transform: translateY(-15px) translateX(-20px);
  }
}
#img-60-1 {
  top: 60px;
  right: 0;
  z-index: -3;
}

#img-60-2 {
  top: 40px;
  right: 0;
  z-index: -2;
}

#img-60-3 {
  top: 20px;
  right: 0;
  z-index: -1;
}

#yan-2 {
  top: 11.8%;
  left: 4.9%;
  width: 90.2%;
}

#yan-3 {
  left: 4.9%;
  top: 34.9%;
  width: 90.2%;
}

#yan-4 {
  left: 4.6%;
  bottom: 4.8%;
  width: 61.5%;
}

#yan-11 {
  top: 16.8%;
  right: 2.8%;
  width: 56.1%;
}

#yan-12 {
  left: 2.8%;
  top: 25.8%;
  width: 81.7%;
}

#yan-13 {
  right: 2.8%;
  top: 53.7%;
  width: 53.6%;
}

#yan-14 {
  top: 60.8%;
  left: 15.55%;
  width: 68.9%;
}

#yan-15 {
  left: 2.8%;
  bottom: 9.4%;
  width: 70%;
}

#leads-1, #leads-10 {
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

#leads-2 {
  width: 92.4%;
  left: 7.6%;
  top: 0;
  height: 5.2%;
}

#leads-3 {
  left: 0;
  top: 0;
  height: 100%;
}

#leads-4 {
  left: 9.3%;
  top: 7.4%;
  height: 43.6%;
}

#leads-5 {
  right: 0.8%;
  top: 7.4%;
  height: 43.6%;
}

#leads-6 {
  right: 0.8%;
  bottom: -7.7%;
  height: 54.4%;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

#leads-11 {
  left: 7.5%;
  top: 0;
  width: 92.5%;
  height: 4.5%;
}

#leads-12 {
  left: 0;
  top: 0;
  height: 100%;
}

#leads-13 {
  left: 9.5%;
  top: 6.8%;
  width: 65%;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

#leads-14 {
  right: 0.9%;
  top: 6.8%;
  width: 23.3%;
}

.video video {
  -webkit-mask: url("./gev2.webp") no-repeat;
  mask: url("./gev2.webp") no-repeat;
  -webkit-clip-path: url(#myPath);
          clip-path: url(#myPath);
}

body[data-aos-delay='3100'] [data-aos],
[data-aos][data-aos][data-aos-delay='3100'] {
  -webkit-transition-delay: 3100ms;
          transition-delay: 3100ms;
}

body[data-aos-delay='3500'] [data-aos],
[data-aos][data-aos][data-aos-delay='3500'] {
  -webkit-transition-delay: 3500ms;
          transition-delay: 3500ms;
}

body[data-aos-delay='3600'] [data-aos],
[data-aos][data-aos][data-aos-delay='3600'] {
  -webkit-transition-delay: 3600ms;
          transition-delay: 3600ms;
}

body[data-aos-delay='3900'] [data-aos],
[data-aos][data-aos][data-aos-delay='3900'] {
  -webkit-transition-delay: 3900ms;
          transition-delay: 3900ms;
}

body[data-aos-delay='4000'] [data-aos],
[data-aos][data-aos][data-aos-delay='4000'] {
  -webkit-transition-delay: 4000ms;
          transition-delay: 4000ms;
}

body[data-aos-delay='4200'] [data-aos],
[data-aos][data-aos][data-aos-delay='4200'] {
  -webkit-transition-delay: 4200ms;
          transition-delay: 4200ms;
}

body[data-aos-delay='4800'] [data-aos],
[data-aos][data-aos][data-aos-delay='4800'] {
  -webkit-transition-delay: 4800ms;
          transition-delay: 4800ms;
}

body[data-aos-delay='5000'] [data-aos],
[data-aos][data-aos][data-aos-delay='5000'] {
  -webkit-transition-delay: 5000ms;
          transition-delay: 5000ms;
}

body[data-aos-delay='6000'] [data-aos],
[data-aos][data-aos][data-aos-delay='6000'] {
  -webkit-transition-delay: 6000ms;
          transition-delay: 6000ms;
}

body[data-aos-delay='7000'] [data-aos],
[data-aos][data-aos][data-aos-delay='7000'] {
  -webkit-transition-delay: 7000ms;
          transition-delay: 7000ms;
}

a.accent-fill {
  display: none;
}

#contacts a.accent-fill {
  display: block;
}

img.rot {
  animation: 20s linear 0s normal none infinite running rot;
  -webkit-animation: 20s linear 0s normal none infinite running rot;
}

@keyframes rot {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rot {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.video-back h2 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  font-size: 216px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  mix-blend-mode: multiply;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-weight: 800;
}

.video-back video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-back {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: relative;
}

@media (max-width: 1700px) {
  #vodok-1 {
    top: 0;
    bottom: 0;
    margin: auto;
  }

  #leadswork .block-1 {
    padding-left: 210px;
  }

  #leadswork .block-2 {
    padding-right: 210px;
  }

  #leadswork .block-2 .image {
    right: 710px;
  }

  #contacts-img {
    right: 10.3%;
  }
}
@media (max-width: 1440px) {
  #comand h2, #comand p {
    margin-left: 210px;
  }

  #project .content img {
    width: 90%;
  }

  #project .container-no-padd {
    padding: 0 52px;
  }

  #comand .image {
    right: 252px;
  }

  #comand img {
    height: 70vh;
  }

  .full-screen {
    width: 100%;
  }

  #businessfox .content-2 {
    padding-top: 0;
  }

  #dariazu {
    margin-bottom: 360px;
  }

  #my-areas .text {
    padding-top: 0;
    padding-bottom: 200px;
  }

  #vodokanal .content {
    padding-left: 72px;
    padding-right: 72px;
  }

  #boy-2 {
    left: -157px;
  }

  #leadswork .block-2 .image {
    height: 57.7%;
  }

  .person .text {
    max-width: 400px;
  }
}
@media (max-width: 1300px) {
  #dung-5, #dung-6, #dung-7, #dung-8, #dung-9 {
    display: none;
  }

  #contacts-img {
    right: 52px;
    width: 48.5%;
  }

  #contact .container {
    padding-top: 124px;
  }
}
@media (max-width: 1200px) {
  #block-1 .content {
    padding-left: 0;
  }

  #clients .content .logotype {
    grid-template-columns: repeat(8, 1fr);
  }

  header .primary-menu {
    -webkit-column-gap: 12px;
            column-gap: 12px;
  }

  #vodok-1 {
    right: auto;
    width: 100%;
  }

  #businessfox .content, #docke .content {
    padding-left: 90px;
  }

  #aerogreet-3 {
    width: 40%;
    z-index: -1;
  }

  #aerogreet-2 {
    height: 70%;
    width: 60%;
  }

  #aerogreet-1 {
    z-index: 100;
    bottom: 20px;
    left: -100px;
  }

  #aerogreet-4 {
    position: relative;
  }

  #aerogreet-5 {
    right: 5%;
    left: 5%;
    bottom: -120px;
  }

  #dariazu {
    padding-left: 36px;
    padding-right: 36px;
  }
  #dariazu .image {
    width: 100%;
    margin-right: 0;
  }
  #dariazu .content .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #dariazu .text {
    padding-left: 100px;
    padding-right: 100px;
    max-width: 100%;
  }

  #zu-video {
    position: relative;
  }

  #zu-1 {
    width: 60%;
    top: 100px;
    -webkit-transform: none;
            transform: none;
  }

  #zu-2 {
    width: 50%;
    bottom: auto;
    top: 300px;
  }

  #zu-3 {
    width: 50%;
  }

  #my-areas .content {
    padding-left: 72px;
    padding-right: 72px;
  }

  #dariazu {
    margin-bottom: 240px;
  }

  #leadswork .block-1 {
    padding-left: 72px;
  }

  #leadswork .block-2 {
    padding-right: 72px;
  }

  #leadswork .block-2 .image {
    right: 572px;
  }

  #bestofyou .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #bestofyou .text .descr {
    width: 100%;
  }
}
@media (max-width: 1140px) {
  #aerogreet-5 {
    display: none;
  }

  #aerogreet-4 {
    -o-object-fit: contain;
       object-fit: contain;
  }

  #unionjack {
    padding-left: 72px;
    padding-right: 72px;
  }
  #unionjack .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #unionjack .image {
    margin-right: 0;
    margin-bottom: 200px;
  }
  #unionjack .text {
    max-width: 100%;
  }

  #dungeon .container {
    padding-left: 72px;
    padding-right: 72px;
  }
  #dungeon .container .content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #dungeon .image {
    width: 100%;
    margin-bottom: 36px;
  }

  #dung-1 {
    margin-right: 0;
    margin-left: auto;
  }
}
@media (max-width: 1024px) {
  #block-1 {
    padding: 70px 72px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #block-1 img {
    width: 100%;
    position: relative;
    right: auto;
    top: auto;
    -webkit-transform: none;
            transform: none;
  }
  #block-1 .content {
    margin-bottom: 36px;
  }

  #contacts-img {
    width: calc(100% - 570px - 52px);
  }

  #my-areas .image {
    height: 1000px;
  }

  #comand img {
    width: 45%;
    right: 12px;
  }
  #comand h2, #comand p {
    margin-left: 0;
    width: 50%;
  }

  #clients .content .logotype {
    grid-template-columns: repeat(6, 1fr);
  }

  #yandex .content .width-parag {
    margin: 0 0px 88px 24px;
    max-width: 400px;
  }
  #yandex #yand-1 {
    width: 50%;
  }
  #yandex #yand-2 {
    width: 30%;
    right: -30px;
    top: -40px;
  }

  #yellow-back-1 {
    right: 30px;
    top: -30px;
  }

  #yellow-back-2 {
    left: 30px;
  }

  #needphoto .img {
    margin-left: 12px;
  }

  .navigation {
    display: none;
  }

  #myLinks .mobile {
    display: block;
  }

  #myLinks .navigation {
    display: block;
  }
  #myLinks .navigation .primary-menu {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
  }
  #myLinks .navigation .primary-menu li {
    width: 100%;
    text-align: left;
  }
  #myLinks .navigation .primary-menu li a {
    color: #000000;
  }

  .full-screen {
    height: auto;
  }

  #age {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin-bottom: 100px;
  }
  #age .content {
    width: 100%;
    position: relative;
    top: auto;
    right: auto;
    -webkit-transform: none;
            transform: none;
  }

  #needphoto, #businessfox {
    margin-bottom: 120px;
  }

  #businessfox .content-2 .flex, #docke .content .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #businessfox .content-2 .pos-rel .flex, #docke .content .pos-rel .flex {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  #businessfox .content-2 .descr, #docke .content .descr {
    width: 100% !important;
  }

  #hand-docke {
    width: 50%;
    top: 0;
  }

  #aerogreet-1 {
    height: 400px;
    left: -36px;
    bottom: 60px;
  }

  #aerogreet .text {
    padding-top: 0;
  }

  #aerogreet .text .tags {
    margin-bottom: 60px;
  }

  #docke {
    margin-bottom: 240px;
  }

  #aerogreet .content .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #aerogreet .content .image {
    width: 100%;
    margin-right: 0;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
  #aerogreet .content .text {
    max-width: 100%;
    position: relative;
  }

  #aerogreet-2 {
    height: auto;
    width: 60%;
  }

  #aerogreet-1 {
    right: 52%;
    height: auto;
    left: auto;
    width: 30%;
    bottom: 0;
  }

  #aerogreet-4 {
    height: auto;
    width: 50%;
  }

  #leadswork .block-2 {
    padding-left: 36px;
  }

  #leadswork .block-2 .image {
    position: relative;
    right: auto;
    height: auto;
  }

  #leadswork .block-2 .text {
    margin-top: 0;
  }
  #leadswork .block-2 .text .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #leadswork .block-2 .text > .descr {
    margin-top: 20px;
  }

  #leadswork .block-2 .text .flex .descr {
    width: 400px;
    margin-bottom: 0;
  }

  #comand img {
    width: 70%;
    right: 0;
    height: auto;
  }

  #comand .image {
    right: 0;
  }

  #leadswork .block-1 .image {
    margin-top: -100px;
  }

  #leadswork .block-2 .image {
    left: 0;
  }

  #leadswork .block-1 .text {
    max-width: 100%;
  }

  #leadswork .block-2 .text .flex .descr {
    width: 100%;
    max-width: 100%;
  }

  #arzamas .image {
    width: 100%;
  }

  #paint-img {
    display: none;
  }

  .heading {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .heading .wrapper {
    padding-left: 52px;
    padding-right: 52px;
  }
  .heading h2 {
    font-size: 72px;
    line-height: 1;
  }

  .person {
    padding-top: 80px;
    padding-bottom: 260px;
  }

  #person-img-1 {
    right: 0;
    width: 30%;
  }

  #person-img-2 {
    right: 30px;
    width: 30%;
  }

  #person-img-3 {
    width: 70%;
  }

  #person-2 .content {
    padding-right: 52px;
  }

  #person-img-4 {
    left: -60px;
    width: 50%;
  }

  #person-img-5 {
    left: 0;
    width: 50%;
  }

  #person-img-6 {
    width: 70%;
  }

  .card-tech {
    grid-column: span 6;
  }

  .card-direct {
    grid-column: span 4;
  }
}
@media (max-width: 960px) {
  #needphoto .img {
    display: none;
  }

  #needphoto .width-parag {
    margin-left: 96px;
  }

  #my-areas .content .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #my-areas .text {
    width: 100%;
    margin-right: 0;
    max-width: 100%;
    padding-bottom: 36px;
  }

  #my-areas:after {
    height: 400px;
    top: auto;
  }

  #vodokanal .content {
    position: relative;
  }
  #vodokanal .content .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #vodokanal .image {
    width: 100%;
    margin-right: 0;
    position: unset;
    margin-bottom: 36px;
  }
  #vodokanal #vodok-1 {
    position: relative;
    margin: 0 auto;
    -webkit-transform: none;
            transform: none;
    bottom: auto;
    right: 0;
    top: auto;
  }
  #vodokanal #vodok-3 {
    bottom: 0;
  }
  #vodokanal .text {
    padding-bottom: 200px;
    max-width: 100%;
  }

  #vodokanal {
    margin-bottom: 120px;
  }

  #unionjack {
    margin-bottom: 120px;
  }

  #boy-1 {
    width: 40%;
    top: -250px;
  }

  #boy-2 {
    width: 30%;
    left: -107px;
  }

  #boy-3 {
    width: 10%;
    bottom: auto;
    top: 400px;
  }

  #dungeon {
    margin-bottom: 0;
  }

  .container-image .image:after {
    content: none;
  }

  #businessfox {
    margin-bottom: 420px;
  }

  #businessfox .content-2 .flex .text {
    margin-bottom: -300px;
  }

  #businessfox .content-2 .pos-rel .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #businessfox .content-2 .pos-rel .flex > div {
    width: 100%;
    position: relative;
    margin-top: -166px;
  }
  #businessfox .content-2 .pos-rel .flex > div:nth-child(2) {
    z-index: 10000;
  }
  #businessfox .content-2 .pos-rel .flex > div:nth-child(3) {
    z-index: 10000;
  }
  #businessfox .content-2 .pos-rel .flex > div:first-child {
    margin-top: 0;
  }
  #businessfox .content-2 .pos-rel .flex > div:after {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30.21%, rgba(0, 0, 0, 0.55208)), to(#000000));
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55208) 30.21%, #000000 100%);
    position: absolute;
    content: '';
    top: 0;
    bottom: -1px;
    left: 0;
    right: 0;
  }
  #businessfox .content-2 .pos-rel .flex > div img {
    width: 100%;
    position: relative;
  }

  #businessfox .content-2 .container-image {
    height: 1200px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

  #aerogreet .container {
    padding-left: 72px;
  }

  #aerogreet-3 {
    top: 430px;
  }
}
@media (max-width: 860px) {
  #leadswork .block-1, #leadswork .block-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #needphoto > .flex {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #needphoto .img {
    display: block;
    width: 100%;
    margin: 0 36px 36px;
  }

  #paint .content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #paint .image {
    width: 100%;
  }

  #paint-img {
    display: block;
    position: relative;
  }

  #paint .text {
    padding-bottom: 32px;
  }

  #paint {
    padding-bottom: 80px;
  }

  #leadswork .block-1 .image {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  #leadswork .block-2 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: -200px;
  }

  #leadswork .block-2 {
    padding-right: 36px;
    margin-top: 36px;
  }

  #leadswork .block-2 .image {
    width: 100%;
    margin-bottom: 72px;
  }

  #image-one {
    left: 80%;
  }

  #age {
    width: 80%;
    margin: 0 auto;
  }

  #leadswork {
    margin-bottom: 210px;
  }

  #my-areas {
    margin-bottom: 100px;
  }

  #bestofyou .text {
    padding-left: 52px;
    padding-right: 52px;
    z-index: 100;
  }

  .grid-icon {
    grid-template-columns: repeat(9, 1fr);
  }

  .block-ref {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #contacts .text {
    width: 100%;
    margin-right: 0;
  }

  #contacts-img {
    display: none;
  }
}
@media (max-width: 768px) {
  .title {
    font-size: 84px;
  }

  .burger-menu {
    display: block;
  }

  #myLinks .navigation .primary-menu li a {
    color: #fff;
    font-size: 14px;
  }

  #myLinks .navigation .primary-menu li {
    margin-bottom: 12px;
  }

  header a.accent-fill {
    display: block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 24px;
  }

  #myLinks .mobile {
    margin-top: 42px;
    margin-bottom: 42px;
  }

  header .ref {
    margin-bottom: 12px;
  }

  header .ref a {
    font-size: 14px;
  }

  #myLinks .menu-right {
    position: relative;
    height: calc(100vh - 68px);
  }

  #lang-desktop {
    display: none;
  }

  #copy-head {
    position: absolute;
    bottom: 30px;
  }

  #arzamas-2 {
    bottom: -30px;
    right: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }

  #contacts {
    background-position: right;
  }

  #docke .container-image:after {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(89.65%, rgba(0, 0, 0, 0.7)), to(#000000));
    background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.7) 89.65%, #000000 100%);
  }

  #docke #cont-2 {
    margin-top: 0;
  }

  .heading .wrapper {
    padding-left: 26px;
    padding-right: 26px;
  }

  #my-areas .image {
    height: 600px;
  }

  #age {
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #age .content {
    position: relative;
    width: 100%;
    top: auto;
    right: auto;
    -webkit-transform: none;
            transform: none;
  }
  #age .content .text {
    margin-top: -100px;
  }
  #age .content .text .width-parag {
    margin: 0 auto;
  }

  #businessfox .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #docke .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #hand-docke {
    top: 150px;
  }

  #dariazu .image {
    min-height: auto;
    margin-bottom: 200px;
  }

  #dariazu {
    margin-bottom: 120px;
  }

  #bestofyou .text {
    padding: 0 36px;
  }

  #boy-2 {
    width: 20%;
  }

  #aerogreet .container {
    padding-left: 72px;
  }

  #aerogreet {
    margin-bottom: 120px;
  }

  #leadswork .block-1 .text {
    margin-right: 0;
  }

  #leadswork {
    margin-bottom: 120px;
  }

  #arzamas .content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #arzamas .text {
    position: relative;
    z-index: 10;
  }

  #arzamas .image {
    width: 100%;
    position: unset;
  }

  #arzamas-1 {
    width: 40%;
    right: -36px;
    left: auto;
    top: -25px;
  }

  #arzamas-2 {
    width: 40%;
    right: 0;
  }

  #bestofyou .text .descr {
    width: 100%;
  }
}
@media (max-width: 600px) {
  #workers .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  .mobile-hide {
    display: none;
  }

  .mobile-show {
    display: block;
  }

  .person {
    padding-bottom: 160px;
  }

  #person-img-3, #person-img-6 {
    width: 100%;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }

  #arzamas-2 {
    bottom: -50px;
  }

  #block-1, #age {
    padding-left: 36px;
    padding-right: 36px;
  }

  #comand .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #age .content .text {
    margin-top: -50px;
  }

  header {
    padding-left: 24px;
    padding-right: 24px;
  }

  .title {
    font-size: 60px;
    line-height: 72px;
  }

  h2 {
    font-size: 48px;
    line-height: 52px;
  }

  p {
    font-size: 20px;
  }

  .full-screen {
    height: 60vh;
    width: 100%;
  }

  .title {
    font-size: 64px;
  }

  #age {
    margin-bottom: 0;
    padding-bottom: 72px;
    margin-top: 100px;
  }

  #image-one {
    right: -30px;
    left: auto;
    width: 30%;
  }

  #image-hand {
    right: -200px;
    left: auto;
  }

  #comand {
    padding-top: 72px;
    padding-bottom: 72px;
    margin-bottom: 0;
  }
  #comand .pos-rel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #comand .pos-rel h2, #comand .pos-rel p {
    text-align: center;
    width: 100%;
  }
  #comand .pos-rel h2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #comand .pos-rel p {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

  #comand .image {
    top: auto;
    margin: auto;
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 60%;
  }

  #comand .pos-rel h2 {
    padding-top: 480px;
  }

  #comand img {
    width: 100%;
  }

  #workers {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  #workers .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #workers .container h2, #workers .container p {
    text-align: center;
    width: 100%;
  }
  #workers .container img {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #workers .container h2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-top: 60px;
  }
  #workers .container p {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

  #project .container-no-padd {
    padding: 0 36px;
  }
  #project .container-no-padd .pos-rel {
    height: 250px;
  }
  #project .container-no-padd .pos-rel > img {
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 30px;
    height: 100%;
  }

  #project {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }
  #project .content img {
    width: 80%;
    top: -20px;
  }
  #project .content {
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 12px;
  }
  #project .mobile {
    padding-left: 36px;
    padding-right: 36px;
    margin-top: 24px;
    color: #fff;
    display: none;
  }

  #workers {
    margin-bottom: 60px;
  }

  .mobile {
    display: block;
  }

  #clients {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    padding-bottom: 72px;
  }
  #clients .container {
    padding-left: 36px;
    padding-right: 36px;
  }
  #clients .content p {
    margin-bottom: 48px;
  }

  #yandex .container {
    padding-left: 36px;
    padding-right: 36px;
  }
  #yandex .container.full {
    padding-left: 0;
    padding-right: 0;
  }
  #yandex .content .width-parag {
    margin-left: 0;
  }
  #yandex .back-img {
    padding: 60px 0;
  }
  #yandex .back-img .width-parag {
    margin-left: 0;
    width: 100%;
    padding-left: 36px;
    padding-right: 36px;
  }
  #yandex #yand-1 {
    right: 0;
    bottom: -300px;
    width: 70%;
  }
  #yandex #yand-2 {
    bottom: -250px;
    top: auto;
    width: 50%;
    left: 10%;
  }

  #needphoto .width-parag {
    margin-left: 0;
    padding-left: 36px;
    padding-right: 36px;
  }

  #arzamas {
    margin-bottom: 0px;
    overflow: hidden;
  }
  #arzamas .container {
    padding-left: 36px;
    padding-right: 36px;
  }
  #arzamas .container .heading-case {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #arzamas .text {
    padding-top: 36px;
  }

  #paint {
    padding-top: 100px;
  }

  #paint-fon {
    bottom: 0;
    top: auto;
  }

  #paint .container {
    padding-left: 36px;
    padding-right: 36px;
  }
  #paint .container .text {
    margin-right: 0;
  }

  #businessfox .content {
    padding-left: 36px;
    padding-right: 36px;
  }

  #businessfox .container {
    padding-left: 0;
    padding-right: 0;
  }

  #businessfox .carousel-2 img, #businessfox .container-carousel {
    height: 300px;
  }

  #docke .content {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 0;
  }

  #dariazu .text {
    padding-left: 0;
    padding-right: 0;
  }

  #dariazu .image {
    margin-bottom: 120px;
  }

  #zu-video {
    display: none;
  }

  #zu-1 {
    width: 100%;
    top: 0;
    right: 0;
    position: relative;
  }

  #zu-2 {
    top: 150px;
    position: absolute;
    right: -12px;
  }

  #zu-3 {
    left: -24px;
  }

  #bestofyou .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #vodokanal .text {
    padding-bottom: 100px;
  }

  #vodokanal .content {
    padding-top: 12px;
  }

  #unionjack {
    padding-left: 36px;
    padding-right: 36px;
  }

  #bestofyou .text {
    margin-top: 36px;
  }

  #boy-1 {
    top: -100px;
  }

  #aerogreet .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #leadswork .block-1 {
    padding-left: 36px;
  }

  #leadswork .block-2 .text {
    padding-left: 0;
    width: 100%;
  }

  #my-areas .content, #vodokanal .content, #dungeon .container {
    padding-left: 36px;
    padding-right: 36px;
  }

  #dungeon .text {
    margin-left: 0;
  }

  #vodok-2 {
    top: -100px;
  }

  #my-areas {
    margin-bottom: 120px;
  }

  .card-tech {
    overflow-x: hidden;
  }

  .heading h2 {
    font-size: 60px;
  }

  #person-2 .content {
    padding-left: 52px;
  }

  .person .text {
    margin-bottom: 60px;
    max-width: 100%;
  }

  #person-img-5 {
    right: 0;
    left: auto;
  }

  .person .logo {
    margin-bottom: 60px;
  }

  #bestofyou .text {
    padding: 0;
  }

  #businessfox .content-2 .container-image {
    height: 700px;
  }

  #yandex {
    margin-bottom: 460px;
  }

  #needphoto, #aerogreet, #dariazu, #unionjack {
    margin-bottom: 180px;
  }

  #businessfox {
    margin-bottom: 480px;
  }

  #docke, #leadswork {
    margin-bottom: 280px;
  }

  #clients {
    margin-bottom: 60px;
  }

  #project {
    margin-bottom: 120px;
  }

  #my-areas .image {
    border-radius: 11px;
  }

  #aerogreet-1 {
    right: 62%;
    width: 40%;
  }

  #aerogreet-4 {
    width: 60%;
  }
}
@media (max-width: 480px) {
  .title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 36px;
  }

  #businessfox .carousel-2 img, #businessfox .container-carousel {
    height: 250px;
  }

  .heading h2 {
    font-size: 48px;
  }

  .subtitle {
    font-size: 24px;
  }

  .img-logo {
    margin-right: 24px;
  }

  #bestofyou .text {
    padding: 0;
  }

  #union-1 {
    bottom: -50px;
  }

  #union-2 {
    left: -25px;
    bottom: -75px;
    right: auto;
  }

  #unionjack .image {
    margin-bottom: 100px;
  }

  #businessfox .content-2 .pos-rel .flex > div {
    margin-top: -16px;
  }

  #yellow-back-1 {
    width: 50px;
  }

  #yellow-back-2 {
    width: 50px;
    top: 330px;
    z-index: -1;
  }

  #leadswork .block-1 .image {
    margin-top: 0;
  }

  #leadswork .block-2 .image {
    margin-bottom: 150px;
  }

  h3 {
    font-size: 30px;
    line-height: 1.3;
  }

  .card-tech {
    grid-column: span 12;
  }

  .card-direct {
    grid-column: span 6;
  }

  #experience {
    margin-bottom: 60px;
  }

  #icon-technology .col-12 > div {
    margin-bottom: 24px;
  }

  #icon-technology {
    margin-bottom: 60px;
  }

  #clients .content .logotype {
    gap: 12px;
  }

  #age {
    margin-top: 0;
  }

  #comand .pos-rel h2 {
    padding-top: 360px;
  }
}