/*.treng {*/
/*  height: auto !important*/
/*}*/

canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0
}

.scene-nav {
  font-size: 1.15em;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: 0;
  right: 0;
  padding: 1.5em;
  color: var(--color-nav)
}

.scene-nav:focus {
  outline: none
}

.scene-nav--prev {
  left: 0
}

.slide-wrapper {
  display: none
}

.icon--arrow-nav-next {
  transform: rotate(-180deg)
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px
}

[dir='rtl'] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}

.slick-arrow.slick-hidden {
  display: none
}

.slick-loading .slick-list {
  background: #fff url('./ajax-loader.gif') center center no-repeat
}

@font-face {
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;
  src: url('./fonts/slick.eot');
  src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg')
}

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .25
}

.slick-prev:before,
.slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-prev {
  left: -25px
}

[dir='rtl'] .slick-prev {
  right: -25px;
  left: auto
}

.slick-prev:before {
  content: '←'
}

[dir='rtl'] .slick-prev:before {
  content: '→'
}

.slick-next {
  right: -25px
}

[dir='rtl'] .slick-next {
  right: auto;
  left: -25px
}

.slick-next:before {
  content: '→'
}

[dir='rtl'] .slick-next:before {
  content: '←'
}

.slick-dotted.slick-slider {
  margin-bottom: 30px
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1
}

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important
}

@font-face {
  font-family: MullerThin;
  font-display: swap;
  src: url('../fonts/MullerLight/MullerThin.otf');
}

@font-face {
  font-family: MullerLight;
  font-display: swap;
  src: url('../fonts/MullerLight/MullerLight.otf');
}

@font-face {
  font-family: MullerBold;
  font-display: swap;
  src: url('../fonts/MullerLight/MullerRegular.otf');
}

@font-face {
  font-family: MullerDemo;
  font-display: swap;
  src: url('../fonts/MullerLight/MullerThin.otf');
}

@keyframes dash {
  15% {
    stroke-dashoffset: -142
  }

  19% {
    stroke-dashoffset: -169;
    opacity: 1
  }

  20% {
    stroke-dashoffset: -170;
    opacity: 0
  }

  21% {
    opacity: 0;
    stroke-dashoffset: 1000
  }

  22% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0
  }
}

@keyframes allWork {
  59% {
    stroke-dashoffset: -541;
    opacity: 1
  }

  60% {
    stroke-dashoffset: -541;
    opacity: 0
  }

  61% {
    stroke-dashoffset: 541;
    opacity: 0
  }

  62% {
    stroke-dashoffset: 541;
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}

@keyframes header {
  1% {
    stroke-dashoffset: 220
  }

  30% {
    stroke-dashoffset: 110
  }

  100% {
    stroke-dashoffset: 0
  }
}

@keyframes home_focus {
  1% {
    stroke-dashoffset: 0
  }

  30% {
    stroke-dashoffset: -101;
    opacity: 1
  }

  31% {
    stroke-dashoffset: -101;
    opacity: 0
  }

  32% {
    opacity: 0;
    stroke-dashoffset: 1000
  }

  33% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 900
  }
}

@keyframes product_focus {
  1% {
    stroke-dashoffset: 0
  }

  30% {
    stroke-dashoffset: -201;
    opacity: 1
  }

  31% {
    stroke-dashoffset: -201;
    opacity: 0
  }

  32% {
    opacity: 0;
    stroke-dashoffset: 1000
  }

  33% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 800
  }
}

@keyframes product_focus_mir {
  1% {
    stroke-dashoffset: 800
  }

  30% {
    stroke-dashoffset: 1000;
    opacity: 1
  }

  31% {
    stroke-dashoffset: 1000;
    opacity: 0
  }

  32% {
    opacity: 0;
    stroke-dashoffset: -201
  }

  33% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0
  }
}

@keyframes about_focus {
  1% {
    stroke-dashoffset: 850
  }

  30% {
    stroke-dashoffset: 1000;
    opacity: 1
  }

  31% {
    stroke-dashoffset: 1000;
    opacity: 0
  }

  32% {
    opacity: 0;
    stroke-dashoffset: -150
  }

  33% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0
  }
}

@keyframes dash5 {
  35% {
    stroke-dashoffset: 990
  }

  39% {
    stroke-dashoffset: 994;
    opacity: 1
  }

  40% {
    stroke-dashoffset: 999;
    opacity: 0
  }

  41% {
    opacity: 0;
    stroke-dashoffset: -180
  }

  42% {
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0
  }
}

@keyframes filter_products {
  20% {
    opacity: 1
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 900
  }
}

@keyframes dash3 {
  20% {
    stroke-dashoffset: 0
  }

  100% {
    stroke-dashoffset: 1000
  }
}

@keyframes dash4 {
  100% {
    stroke-dashoffset: 700
  }
}

@keyframes menu {
  15% {
    width: 10px
  }

  19% {
    width: 2px;
    opacity: 1
  }

  20% {
    width: 0;
    opacity: 0
  }

  21% {
    opacity: 0
  }

  22% {
    opacity: 1;
    width: 2px
  }

  100% {
    width: 20px
  }
}

body {
  transition: transform 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22), filter 0.4s
}

.letter {
  display: inline-block;
  opacity: 0
}

* {
  cursor: none
}

.header_light {
  color: white
}

.header_darck {
  color: black
}

.header_none {
  opacity: 0
}

.path {
  stroke-dasharray: 110;
  stroke-dashoffset: 0
}

.triger {
  opacity: 0.8;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out
}

.triger:hover {
  opacity: 1
}

#svg_triger_one:hover #svg_one1 {
  animation: dash4 0.8s linear forwards
}

#svg_triger_one:hover #svg_one {
  animation: home_focus 0.8s linear forwards
}

#svg_triger_two:hover #svg_two {
  animation: product_focus 0.8s linear forwards
}

#svg_triger_two:hover #svg_two2 {
  animation: dash4 0.8s linear forwards
}

#svg_triger_tree:hover #svg_tree {
  -webkit-animation: about_focus 0.8s linear forwards;
  animation: about_focus 0.8s linear forwards
}

#svg_triger_tree:hover #svg_tree3 {
  -webkit-animation: dash3 3s linear forwards;
  animation: dash3 3s linear forwards
}

#svg_triger_four:hover #svg_four {
  -webkit-animation: product_focus_mir 0.8s linear forwards;
  animation: product_focus_mir 0.8s linear forwards
}

#svg_triger_four:hover #svg_four4 {
  -webkit-animation: dash3 3s linear forwards;
  animation: dash3 3s linear forwards
}

html,
body {
  height: 100%;
  width: 100vw;
  min-width: 320px;
  margin: 0;
  padding: 0;
  cursor: none;
  overflow-x: hidden;
  font-family: MullerLight, sans-serif
}

a {
  text-decoration: none;
  cursor: none
}

ng-view {
  z-index: 1;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  -webkit-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in
}

.cursor_main {
  transition: width 0.3s ease, left 0.3s ease, top 0.3s ease, height 0.3s ease, opacity 0.3s ease-in, background-color 0.5s;
  pointer-events: none;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  background-color: rgba(233, 106, 91, 0);
  border: 2px solid #E96A5B;
  border-radius: 50%;
  z-index: 1000;
  opacity: 0.3;
  display: none
}

.cursor_main-hover {
  width: 20px;
  height: 20px
}

.cursor_main-small {
  width: 35px;
  height: 35px;
  top: 7.5px;
  left: 7.5px
}

.cursor_main-small_p {
  border: 2px solid white
}

.cursor_main-triger3 {
  width: 35px;
  height: 35px;
  opacity: 1;
  border: 2px solid white
}

.cursor_junior {
  pointer-events: none;
  position: fixed;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  background-color: #E96A5B;
  border-radius: 50%;
  z-index: 1001;
  opacity: 0;
  transition: opacity .3s ease;
  display: none
}

.visible {
  display: block
}

.mainDrag {
  left: 18px;
  top: 18px;
  opacity: 1;
  width: 14px;
  height: 14px
}

.j_Drag {
  opacity: 1;
  width: 4px;
  height: 4px;
  top: 3px;
  left: -14px
}

.j_Drag::after {
  background-color: #E96A5B;
  border-radius: 50%;
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  left: 34px
}

.j_slider {
  opacity: 0
}

.mainDrag::after {
  content: 'drag';
  text-transform: uppercase;
  color: white;
  font-size: 8px;
  position: absolute;
  width: 100%;
  text-align: center;
  top: -16px;
  left: -6px
}

.sliderDrag {
  width: 35px;
  height: 35px
}

.sliderDrag::after {
  opacity: 0
}

.cursor_junior-invisible {
  opacity: 0
}

header {
  position: fixed;
  left: 72px;
  width: calc(100% - 142px);
  height: 23px;
  top: 39px;
  z-index: 3;
  color: rgb(0, 0, 0);
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

header .menu {
  float: left;
  position: relative;
  width: 70px;
  height: 12px;
  text-align: right;
  font: 400 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none
}

header .menu .anim_x {
  position: absolute
}

header .menu .zone_menu {
  position: absolute;
  top: -10px;
  width: 91px;
  height: 40px;
  opacity: 0;
  z-index: 10;
  width: 100px;
  height: 50px
}

header .menu .anim_x div {
  width: 20px;
  height: 1px;
  background-color: rgb(0, 0, 0)
}

.left_x {
  -webkit-transform: translate3d(20px, 20px, 0) rotate(45deg);
  transform: translate3d(20px, 20px, 0) rotate(45deg);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0
}

.right_x {
  opacity: 0;
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: translate3d(-20px, 20px, 0) rotate(-45deg);
  transform: translate3d(-20px, 20px, 0) rotate(-45deg)
}

.burger {
  float: left;
  width: 17px;
  height: 100%
}

.burger_top {
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
  height: 1px;
  background-color: rgb(0, 0, 0);
  margin-top: 4px
}

.burger_bot {
  -webkit-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  margin-top: 5px;
  height: 1px;
  background-color: rgb(0, 0, 0)
}

header .social_links {
  float: left;
  width: 53px;
  height: 10px;
  margin-left: 5.5%;
  font: 300 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase
}

.social_links .fb {
  display: block;
  float: left;
  color: rgb(0, 0, 0);
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none
}

.social_links .in {
  display: block;
  float: right;
  color: rgb(0, 0, 0);
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none
}

header .syte_name {
  position: absolute;
  left: 50%;
  margin-left: -69px;
  width: 138px;
  height: 23px;
  font: 400 14px/22px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 8px;
  background-position: center;
  background-repeat: no-repeat;
  text-transform: uppercase
}

header .lang {
  overflow: hidden;
  float: right;
  position: relative;
  margin-right: 4.5%;
  width: 70px;
  height: 80px;
  font: 500 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: right
}

header .lang span {
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  display: block;
  margin-bottom: 14px
}

header .lang .langer {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px)
}

header .lang span:hover {
  opacity: 0.8
}

header .request {
  position: relative;
  float: right;
  width: 134px;
  height: 12px;
  font: 300 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: -11px;
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
    text-align: center;
}

.dropRequestSvg {
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 3;
  height: 70px;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

footer {
  position: absolute;
  width: calc(100% - 142px);
  height: 12px;
  bottom: 40px;
  left: 50%;
  margin-left: -44.5%;
  z-index: 3;
  color: #FFFFFF
}

footer .nub_tel {
  color: white;
  float: left;
  width: 170px;
  height: 12px;
  font: 300 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none
}

footer .email {
  color: white;
  float: right;
  font: 300 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 217px;
  height: 12px;
  transition: .5s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none
}

.all_worck {
  transform: scale(1.05);
  position: absolute;
  z-index: 1;
  top: 75%;
  left: 23vw;
  width: 100px;
  transition: 0s;
  opacity: 0;
  stroke-dasharray: 540 542;
  stroke-dashoffset: 0;
  transition: .5s cubic-bezier(.19, 1, .22, 1)
}

.all_worck text {
  fill: white;
  position: absolute;
  width: 42px;
  height: 26px;
  font: 400 10px/16px 'MullerLight', Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase
}

.menu #homeMenu {
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

.menu #homeClose {
  position: absolute;
  right: 0;
  opacity: 0;
  left: 25px;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

div.home_container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  background-size: 100%
}

div.home_container canvas {
  display: block;
  position: relative;
  margin: 0 auto 0 auto
}

#manu_opacity {
  transition: opacity 1s ease-in
}

.black_filter {
  width: 100vw;
  height: 100vh;
  opacity: 0.5;
  background-color: black;
  touch-action: none;
  pointer-events: none;
  position: absolute
}

.dropmenu_svg {
  position: absolute;
  left: 30%;
  top: 80%
}

.numb {
  position: absolute;
  left: 50%;
  height: 18px;
  top: calc(50% + 119px);
  margin-top: 28px;
  margin-left: -50px;
  width: 100px;
  font: 300 10px/23px 'MullerLight', Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  z-index: 1
}

.current_numb {
  overflow: hidden;
  width: 49px;
  height: 18px;
  float: left;
  border-right: 1px solid #E96A5B
}

.total_numb {
  width: 49px;
  height: 18px;
  float: left;
  line-height: 16px;
  margin: 0;
  color: white;
  opacity: 0.5;
  text-align: right
}

.current_p {
  line-height: 16px;
  height: 16px;
  -webkit-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
  display: block;
  width: 49px;
  margin: 0;
  color: white;
  opacity: 0.5
}

body,
html {
  height: 100%
}

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

.slider {
  position: absolute;
  height: 238px;
  width: 100%;
  z-index: 100;
  top: 50%;
  margin-top: -119px;
  overflow: visible
}

.slide .slide_blure {
  opacity: 0.5;
  color: rgba(233, 106, 91, 0);
  -webkit-text-stroke: 1px #ffff
}

.slide .slide_blure_drag {
  color: rgba(233, 106, 91, 0);
  -webkit-text-stroke: 1px #ffff;
  transform: scale(0.85);
  opacity: 1
}

.slide {
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 238px;
  overflow: visible
}

.slide__bgg {
  transform: scale(1.1) translateZ(0)
}

.slide__bg {
  position: static;
  margin: 0 auto 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 35%;
  height: 238px;
  font: 300 62px 'MullerThin', Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

.slide__title {
  position: relative;
  color: #fff;
  font-size: calc(1rem + 3vw);
  font-weight: normal;
  z-index: 2
}

.text {
  position: absolute;
  color: #666;
  left: 4rem;
  bottom: 3rem
}

.cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none
}

.cursor {
  position: fixed;
  top: -30px;
  left: -30px
}

.descript_proj {
  transform: scale(1.05);
  position: absolute;
  width: 368px;
  height: 66px;
  left: 50%;
  margin-left: -183px;
  z-index: 100;
  bottom: 15%;
  overflow: hidden;
  transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1)
}

.descript_p {
  width: 368px;
  height: 66px;
  position: absolute;
  opacity: 0;
  font: 300 14px/23px 'MullerLight', Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0;
  color: #FFFFFF;
  -webkit-transition: opacity 1s ease-out 0.1s;
  -o-transition: opacity 1s ease-out 0.1s;
  transition: opacity 1s ease-out 0.1s
}

.descript_p p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 20px;
  max-height: 40px;
}

.home_container .first_line {
  width: 1px;
  position: absolute;
  top: 0;
  height: 100vh;
  left: calc(25vw - 1px);
  background: #FFFFFF;
  opacity: 0.1
}

.home_container .second_line {
  width: 1px;
  position: absolute;
  top: 0;
  height: 100vh;
  left: calc(50vw - 1px);
  background: #FFFFFF;
  opacity: 0.1
}

.home_container .third_line {
  width: 1px;
  position: absolute;
  top: 0;
  height: 100vh;
  left: calc(75vw - 1px);
  background: #FFFFFF;
  opacity: 0.1
}

.view {
  display: none
}

.tell_zone {
  position: absolute;
  left: -200px;
  width: 400px;
  height: 100px;
  top: -50px;
  border-radius: 50%;
  display: block
}

.mail_zone {
  position: absolute;
  right: -78px;
  width: 400px;
  height: 100px;
  top: -50px;
  display: block;
  border-radius: 50%
}

.menu_zone {
  position: absolute;
  left: -12px;
  top: -24px;
  width: 90px;
  height: 70px
}

.fb_zone {
  position: absolute;
  left: calc(60px + 5.5%);
  top: -24px;
  width: 40px;
  height: 70px;
  display: block;
  z-index: 4
}

.in_zone {
  position: absolute;
  left: calc(100px + 5.5%);
  top: -24px;
  width: 40px;
  height: 70px;
  display: block;
  z-index: 4
}

.drop_zone {
  width: 150px;
  position: absolute;
  top: -27px;
  right: -18px;
  height: 70px
}

.all_worck_zone {
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 2
}

.all_worck_zone:hover .cls-1 {
  stroke-dashoffset: -276
}

.preload {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: #ECE8E5
}

#progressLoad {
  margin: 0;
  position: fixed;
  text-align: center;
  top: calc(50vh - 14px);
  width: 100%;
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 28px;
  color: black;
  text-transform: uppercase;
  filter: invert(1);
  mix-blend-mode: difference
}

.backe {
  top: 0;
  height: 100vh;
  position: absolute;
  background: #151414
}

@media (max-width:1024px) {
  .slide__bg {
    width: 50%
  }

  .view {
    display: block;
    position: absolute;
    font-family: MullerLight, sans-serif;
    font-size: 11px;
    line-height: 119.23%;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 65vh;
    color: #FFFFFF
  }

  .home_container .numb {
    top: 20vh
  }

  .home_container .slide__bg {
    font-size: 42px;
    line-height: 51px;
    letter-spacing: 0.1em
  }

  .home_container .descript_proj {
    bottom: 5vh;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.08em;
    display: none
  }

  footer {
    margin-left: 0;
    left: 4vw;
    width: 92vw
  }

  footer .email {
    text-align: right
  }
}

@media (max-width:768px) {
  #homeClose {
    display: none
  }

  div.home_container canvas {
    display: none
  }

  .tell_zone {
    display: none
  }

  .mail_zone {
    display: none
  }

  .fb_zone {
    display: none
  }

  .in_zone {
    display: none
  }

  .drop_zone {
    display: none
  }

  .all_worck_zone {
    display: none
  }

  footer .email {
    pointer-events: all
  }

  footer .nub_tel {
    pointer-events: all
  }
}

@media (max-width:565px) {
  .slide {
    height: auto
  }

  .home_container .slide__bg {
    padding: 0 24px;
    font-size: 20px;
    line-height: 37px;
    height: auto
  }

  .slider {
    top: 59vh
  }
}

@media (max-width:414px) {
  .slide {
    width: 100%
  }

  .slide__bg {
    width: 100%
  }

  .home_container .descript_proj {
    display: none
  }

  .home_container .numb {
    top: 30vh
  }

  .home_container .first_line {
    display: none
  }

  .home_container .third_line {
    display: none
  }
}

@media (max-width:320px) {
  .slider {
    top: 63vh
  }

  .home_container .slide__bg {
    font-size: 18px;
    line-height: 37px;
    height: auto
  }
}

.get_idea {
  position: relative;
  width: 100%;
  height: 349px;
  margin-top: 64px;
  background-image: url('../images/up-home.jpg');
  background-position: center;
  background-size: cover;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5;
  padding-top: 105px
}
.get_idea:after {
    content: '';
    background: rgb(0 0 0 / 55%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.get_idea p,
.get_idea svg {
    position: relative;
    z-index: 2;
}

.get_idea .projects_drop {
  fill: white;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: absolute;
  top: 126px;
  right: 264px;
  width: 100px;
  font-family: MullerLight, sans-serif;
  stroke-dasharray: 540 542;
  stroke-dashoffset: 0
}

.get_idea .projects_drop:hover #allp {
  animation: allWork 2s linear forwards
}

.get_idea p {
  width: 522px;
  height: 124px;
  margin: 0 auto 120px 156px;
  font-weight: 100
}

.dev_footer {
  width: 100%;
  padding: 0 5vw;
  height: 23px;
  margin: 32px auto;
  filter: invert(100%);
  mix-blend-mode: exclusion;
  color: #F5F5F5
}

.single_containner .dev_footer {
  mix-blend-mode: darken
}

.copyrite {
  float: left;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 23px;
  letter-spacing: 0.08em;
  display: block;
  margin: 0;
  opacity: 0.32
}

.tftl {
  color: white;
  text-decoration: none;
  float: right;
  margin: 0;
  display: block;
  width: 230px;
  height: 23px;
  text-align: left;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 24px;
  background-size: 100px;
  letter-spacing: 0.08em;
  -webkit-transition: 0.5s ease-in;
  -o-transition: 0.5s ease-in;
  transition: 0.5s ease-in
}

@media (max-width:1024px) {
  .get_idea p {
    margin: 0 auto 120px 11vw;
    width: 522px;
    height: 106px;
    font-size: 48px;
    line-height: 57px;
    letter-spacing: 0.1em
  }

  .get_idea .projects_drop {
    right: 10vw
  }

  .dev_footer {
    width: 100%;
    padding: 0 40px
  }

  .copyrite {
    height: 23px
  }

  footer {
    bottom: 24px
  }
}

@media (max-width:768px) {
  .cursor_main {
    display: none
  }

  .cursor_junior {
    display: none
  }

  .get_idea p {
    margin: 0 auto 120px 6vw
  }

  .get_idea .projects_drop {
    width: 100px;
    height: 97px;
    right: 6vw
  }

  .get_idea {
    margin-top: 56px
  }

  .dev_footer {
    width: 100%;
    padding: 0 4vw
  }
}

@media (max-width:600px) {
  .get_idea {
    padding: 1px;
    margin-top: 48px
  }

  .get_idea p {
    width: 298px;
    height: 76px;
    font-size: 32px;
    line-height: 43px;
    margin: 46px auto 0 auto;
    text-align: center
  }

  .get_idea .projects_drop {
    right: 50%;
    margin-right: -50px;
    margin-top: 40px
  }

  .copyrite {
    width: 100%;
    text-align: center
  }

  .tftl {
    width: 230px;
    margin-right: calc(46vw - 115px)
  }
}

@media (max-width:414px) {
  .get_idea {
    padding: 1px;
    margin-top: 48px
  }

  .get_idea p {
    width: 298px;
    height: 76px;
    font-size: 32px;
    line-height: 43px;
    margin: 46px auto 0 auto;
    text-align: center
  }

  .get_idea .projects_drop {
    right: 50%;
    margin-right: -50px;
    margin-top: 40px
  }

  header {
    top: 18px
  }

  footer {
    height: 40px;
    opacity: 0.7
  }

  footer .nub_tel {
    width: 100%;
    text-align: center
  }

  footer .email {
    width: 100%;
    text-align: center;
    margin-top: 16px
  }
}

@media (max-width:414px) {
  .get_idea {
    margin-top: 40px
  }

  footer .email {
    margin-top: 14px
  }

  footer {
    bottom: 18px
  }
}

menu {
  overflow: hidden;
  left: -100%;
  -webkit-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #ECE8E5;
  position: fixed;
  z-index: 2;
  padding: 0;
  top: 0
}

.menu_slots {
  left: -100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  top: calc(50% - 21.5px);
  margin-top: -14.5px;
  position: relative;
  height: 29px;
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 43px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3F3A3A;
  margin: 0 auto 0 auto;
  z-index: 5;
  width: 100%;
  filter: invert(100%);
  mix-blend-mode: exclusion
}

.slot {
  float: left;
  text-align: center;
  width: 23vw;
  margin: 0 0.8vw;
  position: relative;
  opacity: 0
}

.slot span {
  display: block;
  margin: 0 auto;
  text-align: center
}

.slot_l {
  width: 25%;
  float: left;
  text-align: center;
  position: relative
}

.menu_svg {
  position: absolute;
  bottom: 0;
  right: 0
}

.content_left {
  text-align: left
}

.content_right {
  text-align: right
}

#menu_canvas {
  position: absolute;
  z-index: 4
}

.back_animation {
  height: 100%;
  position: absolute
}

.back_animation span {
  width: 1px;
  opacity: 0.1;
  display: block;
  position: absolute;
  background-color: black
}

.show {
  transition: 1.8s cubic-bezier(0.23, 1, 0.32, 1)
}

.hide {
  transition: 0.1s
}

.back_animation svg {
  opacity: 0.1;
  width: 100vw;
  height: 100vh;
  transform: scale(-1, 1) rotate(-90deg)
}

.back_animation svg circle {
  stroke-dasharray: 300%;
  stroke-dashoffset: 300%
}

.line1 {
  height: 0;
  left: 25%
}

.line2 {
  height: 0;
  left: 50%
}

.line3 {
  height: 0;
  left: 75%
}

menu .social_links {
  display: none;
  left: 50%;
  margin-left: -145px;
  position: absolute;
  width: 290px;
  height: 14px;
  bottom: 40px;
  font-family: MullerLight, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: #E96A5B
}

menu .social_links .slot {
  float: left;
  width: 25%;
  text-align: center
}

menu .social_links .slot span {
  filter: invert(100%);
  mix-blend-mode: exclusion
}

.slot .svg_menu {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  left: 0
}

.slot .svg_menu path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0
}

.drop_Menu {
  display: none
}

@media (max-width:1024px) {
  .menu_slots {
    top: 40%;
    height: 400px;
    margin: -200px 0 0 0;
    width: 100%
  }

  .slot {
    float: none;
    width: 100%;
    margin: 32px 0 0 0
  }

  .slot span {
    width: 500px;
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto
  }

  .slot .svg_menu {
    margin: 0 auto 20px auto;
    text-align: center;
    right: auto;
    position: relative
  }

  .content_right {
    text-align: center
  }
}

@media (max-width:768px) {
  .slot span {
    width: 100vw
  }

  .back_animation svg {
    display: none
  }

  .dropRequestSvg {
    display: none
  }

  header {
    width: 90vw;
    left: 5vw
  }

  header .syte_name {
    top: -1px
  }

  .header .lang {
    text-align: right
  }

  .menu_slots {
    top: 50%
  }

  #homeMenu {
    display: none
  }

  header .menu .zone_menu {
    width: 20px;
    height: 50px
  }

  .slot {
    margin-top: 0
  }

  #header_drop {
    display: none
  }

  header .lang {
    margin-right: 0
  }

  .social_links {
    display: none
  }

  .drop_Menu {
    display: block;
    width: 200px;
    text-align: center;
    height: 12px;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 auto;
    margin-top: calc(20% - 40px)
  }

  .drop_Menu:hover #menuPath {
    animation: header 1s linear forwards
  }
}

.project_line_one {
  position: absolute;
  width: 1px;
  height: 100%;
  color: rgb(0, 0, 0);
  opacity: 0.1;
  left: 25vw
}

.project_line_two {
  position: absolute;
  width: 1px;
  height: 100%;
  color: rgb(0, 0, 0);
  opacity: 0.1;
  left: 50vw
}

.project_line_tree {
  position: absolute;
  width: 1px;
  height: 100%;
  color: rgb(0, 0, 0);
  opacity: 0.1;
  left: 75vw
}

.projects_container {
  position: absolute;
  top: 0;
  width: 100%
}

.projects_container .page_title {
  margin: 0;
  margin-top: 201px;
  width: 100%;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3F3A3A
}

.projects_container .get_idea {
  opacity: 0
}

.projects_container .filter_containner {
  position: relative;
  margin: 36px auto 0 auto;
  width: 288px;
  height: 18.5px
}

.projects_container .filter_containner .filter_item {
  position: relative;
  width: auto;
  float: left;
  margin-right: 42px;
  font-family: MullerLight, sans-serif;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3F3A3A;
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out
}

.projects_container .filter_containner .filter_item .project_svg {
  position: absolute;
  bottom: 0;
  right: 0
}

.projects_container .filter_containner .filter_item .project_svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in
}

.projects_container .projects_blocks {
  width: 1200px;
  height: 1000px;
  margin: 97.5px auto 0 auto
}

#first_filter:hover #first_svg_filter {
  animation: filter_products 0.6s linear forwards
}

#second_filter:hover #second_svg_filter {
  animation: filter_products 0.6s linear forwards
}

#third_filter:hover #third_svg_filter {
  animation: filter_products 0.6s linear forwards
}

.projects_container .projects_blocks div {
  display: inline-block
}

.projects_container .projects_blocks .polygon_plaz {
  height: 480px;
  width: 694px
}

.projects_container .projects_blocks .polygon_small {
  height: 236px;
  width: 362px
}

.projects_container .projects_blocks .polygon_middle {
  height: 480px;
  width: 694px
}

.bg_triger {
  background-color: #E96A5B;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
  width: 100%;
  height: 100%;
  position: absolute
}

.projects_container .grid .grid-item .name_project {
  width: 490px;
  height: 191px;
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  left: 50%;
  margin: 0 auto 0 -245px;
  height: 100%;
  color: #F5F5F5;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center
}

.projects_container .grid .grid-item .small {
  position: absolute;
  width: 215px;
  height: auto;
  font-size: 28px;
  line-height: 43px;
  text-align: center;
  letter-spacing: 0.1em;
  top: unset;
  height: 100%;
  margin: 0 auto 0 -107.5px;
  display: flex;
  align-items: center;
  justify-content: center
}

.projects_container .grid .grid-item .descript_project {
  position: absolute;
  width: 200px;
  height: 12px;
  top: 90%;
  left: 50%;
  margin: 0 auto 0 -100px;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5F5F5;
  opacity: 0
}

.made_title {
  opacity: 0.32
}

.thefirstthelast {
  opacity: 0.32;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1)
}

.thefirstthelast:hover {
  opacity: 1
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.grid {
  width: 100vw;
  margin: 97.5px 5vw 0 5vw
}

.grid:after {
  content: '';
  display: block;
  clear: both
}

.grid-item,
.grid-sizer {
  width: 0;
  background-position: center;
  background-size: cover
}

.grid-item {
  float: left
}

.grid-item--width2 {
  width: 58vw
}

.grid-item--height2 {
  height: calc(42vw + 8px)
}

.grid-item--width1 {
  width: 31vw
}

.grid-item--height1 {
  height: 21vw
}

.grid-item--width3 {
  width: 44.5vw
}

.grid-item--height3 {
  height: 43vw
}

.sup_right {
  margin-right: 8px
}

.sup_top {
  margin-top: 8px
}

.sup_left {
  margin-left: 8px
}

@media (max-width:1024px) {
  .sup_right {
    margin-right: 0
  }

  .sup_top {
    margin-top: 0
  }

  .sup_left {
    margin-left: 0
  }

  .sup_rightL {
    margin-right: 6px
  }

  .sup_topL {
    margin-top: 6px
  }

  .sup_leftL {
    margin-left: 6px
  }

  .bg_triger {
    position: absolute
  }

  #projects_canvas {
    display: none
  }

  .projects_container .page_title {
    margin-top: 129px
  }

  .projects_container .page_title {
    font-size: 48px;
    line-height: 57px
  }

  .grid {
    width: 100%;
    margin: 72px 4vw 0 4vw
  }

  .grid-item--width2 {
    width: 45.8vw
  }

  .grid-item--height2 {
    height: 39vw
  }

  .grid-item--width1 {
    width: 45.8vw
  }

  .grid-item--height1 {
    height: 39vw
  }

  .grid-item--width3 {
    width: 45.8vw
  }

  .grid-item--height3 {
    height: 39vw
  }

  .bg_triger {
    background-color: black;
    opacity: 0.27
  }

  .projects_container .grid .grid-item .name_project,
  .projects_container .grid .grid-item .small {
    opacity: 1;
    font-size: 24px;
    line-height: 29px;
    left: 18px;
    position: absolute;
    margin: 0;
    height: auto;
    width: 234px;
    top: unset;
    text-align: left;
    left: 24px;
    bottom: 52px
  }

  .projects_container .grid .grid-item .descript_project {
    position: absolute;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    opacity: 0.7;
    top: unset;
    margin: 0;
    bottom: 24px;
    left: 24px
  }
}

@media (max-width:768px) {
  .projects_container .page_title {
    margin-top: 112px;
    font-size: 48px;
    line-height: 57px;
    text-align: center;
    letter-spacing: 0.1em;
    color: #3F3A3A;
    width: 100%
  }

  .projects_container .filter_containner {
    margin-top: 32px
  }

  .grid {
    width: 92vw;
    margin: 64px 4vw 0 4vw
  }

  .grid-item--width2 {
    margin-top: 6px;
    width: 91.6vw
  }

  .grid-item--height2 {
    height: 52vw
  }

  .grid-item--width1 {
    margin-top: 6px;
    width: 91.6vw
  }

  .grid-item--height1 {
    height: 52vw
  }

  .grid-item--width3 {
    margin-top: 6px;
    width: 91.6vw
  }

  .grid-item--height3 {
    height: 52vw
  }
}

@media (max-width:414px) {
  .projects_container .page_title {
    margin-top: 91px;
    width: 100%;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.1em
  }

  .projects_container .filter_containner {
    margin-top: 20px
  }

  .grid {
    width: 92vw;
    margin: 48px 4vw 0 4vw
  }

  .grid-item--width2 {
    margin-top: 6px;
    width: 92vw
  }

  .grid-item--height2 {
    height: 92vw
  }

  .grid-item--width1 {
    margin-top: 6px;
    width: 92vw
  }

  .grid-item--height1 {
    height: 92vw
  }

  .grid-item--width3 {
    margin-top: 6px;
    width: 92vw
  }

  .grid-item--height3 {
    height: 92vw
  }

  .projects_container .grid .grid-item .name_project,
  .projects_container .grid .grid-item .small {
    bottom: 44px;
    left: 18px
  }

  .projects_container .grid .grid-item .descript_project {
    left: 18px;
    bottom: 18px
  }
}

@media (max-width:320px) {
  .projects_container .page_title {
    font-size: 24px;
    margin-top: 73px
  }

  .grid {
    margin: 40px 4vw 0 4vw
  }

  .projects_container .filter_containner {
    width: 90vw
  }

  .projects_container .filter_containner .filter_item {
    margin-right: 28px
  }
}

.about_container {
  position: absolute;
  width: 100%;
  top: 25vh
}

.scroll_line {
  display: none
}

.about_container .main_text {
  width: 720px;
  height: auto;
  margin: 0 auto 0 auto
}

.about_container .main_text .title {
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 43px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 32px;
  color: #3F3A3A;
  opacity: 0
}

.about_container .main_text .description {
  opacity: 0;
  font-family: MullerLight, sans-serif;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
  color: #3F3A3A;
  transition: max-height 1s ease
}

.about_container .main_text .description p {
  margin: 0
}

.about_container .first_image {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 720px;
  margin: 236px auto 0 auto;
  background-position: center
}

.about_container .first_image .fade,
.slick-list,
.slick-track,
.slick-slide {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover
}

.about_container .worck_stages {
  width: 100%;
  margin-top: 125px;
  position: relative
}

.worck_stages .slider {
  top: 50%
}

.worck_stages .slider {
  height: 400px
}

.worck_stages .slider .slider__inner .slide {
  height: 400px
}

.worck_stages .slider .slider__inner .slide .slide__bg {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center
}

.worck_stages .slider .slider__inner .slide .slide__bg {
  width: 50%;
  transition: opacity 0.5s ease-in;
  font-size: 4.5vw
}

.worck_stages .slider .slider__inner .slide .slide_blure {
  opacity: 0
}

.arrow__btn {
  opacity: 0.5;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin-left: 23px;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
  transition: opacity .5s ease, -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s ease;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s ease, -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
}

.arrow:hover .arrow__btn {
  opacity: 1
}

.arrow_next {
  right: 0
}

.arrow_prev .arrow__btn {
  background-image: url('../images/arow_slider.svg');
  background-position: 12px center
}

.arrow_next .arrow__btn {
  background-position: 18px center;
  background-image: url('../images/right_sloder_arrow.svg')
}

.arrow__btn {
  background-size: 40% 40%;
  background-repeat: no-repeat;
  border: 1px solid white
}

.arrow {
  top: 50%;
  background-color: rgba(1, 1, 1, 0);
  border: none;
  display: block;
  padding: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  outline: none
}

.arrow__field {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%
}

.about_container .worck_stages .title {
  margin: 0;
  width: 100%;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3F3A3A
}

.about_container .worck_stages .canvas_place {
  position: relative;
  width: 100%;
  height: auto;
  margin: 80px auto 0 auto
}

.about_container .worck_stages .canvas_place .slider {
  width: 100%
}

.about_container .worck_stages .canvas_place .descript_proj {
  bottom: 70px
}

.about_container .worck_stages .canvas_place #canvass {
  z-index: 2;
  width: 54vw;
  height: 54vw;
  position: relative;
  margin: 0 auto
}

.about_container .worck_stages .canvas_place .step {
  width: 200px;
  height: 50px;
  top: calc(50% + 4.5px);
  left: 50%;
  margin-left: -100px;
  z-index: 5;
  text-transform: uppercase;
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 10px
}

.about_container .worck_stages .canvas_place .step span {
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: #E96A5B;
  opacity: 0.56
}

.about_container .worck_stages .canvas_place .t1 {
  margin-top: -50px
}

.about_container .worck_stages .canvas_place .t1 span {
  bottom: -2.5px;
  left: 50%;
  margin-left: -4.5px
}

.about_container .worck_stages .canvas_place .t2 {
  margin-left: 0;
  margin-top: -50px;
  text-align: left
}

.about_container .worck_stages .canvas_place .t2 span {
  bottom: -4.5px;
  left: -1.5px
}

.about_container .worck_stages .canvas_place .t3 {
  margin-left: 0;
  margin-top: -25px;
  text-align: left
}

.about_container .worck_stages .canvas_place .t3 span {
  top: 50%;
  margin-top: -4.5px;
  left: -4.5px
}

.about_container .worck_stages .canvas_place .t4 {
  margin-left: 0;
  text-align: left
}

.about_container .worck_stages .canvas_place .t4 span {
  top: -4.5px;
  left: -8.5px
}

.about_container .worck_stages .canvas_place .t6 {
  margin-left: -200px;
  text-align: right
}

.about_container .worck_stages .canvas_place .t5 span {
  top: -8.5px;
  left: 50%;
  margin-left: -4.5px
}

.about_container .worck_stages .canvas_place .t6 span {
  right: -8.5px;
  top: -4.5px
}

.about_container .worck_stages .canvas_place .t7 {
  margin-left: -200px;
  margin-top: -25px;
  text-align: right
}

.about_container .worck_stages .canvas_place .t7 span {
  top: 50%;
  margin-top: -4.5px;
  right: -4.5px
}

.about_container .worck_stages .canvas_place .t8 {
  margin-left: -200px;
  margin-top: -50px;
  text-align: right
}

.about_container .worck_stages .canvas_place .t8 span {
  bottom: -4.5px;
  right: -1.5px
}

.about_container .team_block {
  width: 100%;
  margin-top: 140px;
  padding: 125px 0 32px 0;
  background: hsl(0, 2%, 8%);
  position: relative;
  margin-left: auto
}

.about_container .team_block .title {
  margin: 0;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5
}

.about_container .team_block .prof_containner {
  margin: 80px auto 0 auto;
  width: 90vw
}

.about_container .team_block .prof_containner::after {
  content: "";
  display: table;
  clear: both
}

.about_container .team_block .prof_containner div {
  width: 17.9vw;
  height: 20.5vw;
  float: left;
  position: relative;
  -webkit-transition: -webkit-filter 0.5s ease-in;
  transition: -webkit-filter 0.5s ease-in;
  -o-transition: filter 0.5s ease-in;
  transition: filter 0.5s ease-in;
  transition: filter 0.5s ease-in, -webkit-filter 0.5s ease-in;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat
}

.about_container .team_block .prof_containner .lazy {
  transform: translateY(200px);
  opacity: 0
}

.about_container .team_block .prof_containner div:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0)
}

.canvas_filter {
  width: 50vw;
  height: 50vw;
  position: absolute;
  left: 25vw;
  border-radius: 50%;
  background-color: black;
  opacity: 0.2;
  top: 2vw
}

.about_container .team_block .prof_containner div .stack {
  text-align: center;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  left: 10%;
  width: 80%;
  height: 12px;
  top: 240px;
  color: #F5F5F5;
  z-index: 2;
  opacity: 0;
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in
}

.about_container .team_block .prof_containner div .name {
  position: absolute;
  z-index: 3;
  width: 207px;
  height: 42px;
  font-family: MullerThin, sans-serif;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  top: 50%;
  left: 50%;
  margin-top: -21px;
  margin-left: -103.5px;
  color: #F5F5F5;
  -webkit-transition: 0.3s ease-in;
  -o-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
  opacity: 0
}

.about_container .team_block .prof_containner .join_block .title {
  width: 100%;
  min-height: 72px;
  height: auto;
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5;
  position: absolute;
  top: 50%;
  margin: -36px 0 0 0
}

.about_container .team_block .prof_containner .join_block .title svg {
  margin: 0 auto;
  display: block;
  position: relative;
  top: 28px
}

.about_container .team_block .prof_containner .join_block {
  filter: none
}

@keyframes dash44 {
  100% {
    stroke-dashoffset: -180
  }
}

.about_container .team_block .prof_containner .join_block:hover .join_svg path {
  opacity: 1;
  animation: dash44 1s linear forwards
}

.join_svg path {
  opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000
}

.about_container .team_block .footer_text {
  width: 499px;
  height: 195px;
  margin-top: 0;
  margin-left: calc(100vw - 558px);
  position: relative;
  z-index: 2
}

.about_container .team_block .footer_text .title {
  width: 499px;
  height: auto;
  margin: 0;
  font-family: MullerDemo, sans-serif;
  font-size: 56px;
  line-height: 67px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5;
  text-align: left
}

.about_container .team_block .footer_text .drop_req {
  width: 148px;
  height: 12px;
  margin: 48px 0 0 0;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F5F5F5
}

#drop_req_svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0
}

.about_container .team_block .footer_text .drop_req:hover #drop_req_svg {
  -webkit-animation: dash 2.5s linear forwards;
  animation: dash 2.5s linear forwards
}

.about_container .team_block .dev_footer {
  margin-top: 250px;
  filter: none;
  mix-blend-mode: normal;
  margin-bottom: 0
}

#about_footer {
  position: absolute;
  top: 0
}

.first_circle_canvas {
  display: none;
  pointer-events: none
}

.first_middle_line {
  display: none;
  pointer-events: none
}

.second_circle_canvas {
  display: none;
  pointer-events: none
}

.third_circle_canvas {
  display: none;
  pointer-events: none
}

.show_more {
  display: none;
  transition: 0.5s ease-in
}

#aboutSlider {
  width: 100vw
}

.about_container .worck_stages .canvas_place .descript_proj {
  bottom: 3vw
}

.about_container .worck_stages .canvas_place .numb {
  top: calc(50% + 90px)
}

@media (max-width:1024px) {
  .about_container .worck_stages .canvas_place {
    width: 100%
  }

  .slide__bg {
    font-size: 28px
  }
}

@media (max-width:768px) {
  .show_more {
    display: block;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #3F3A3A;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: 100px;
    margin: 0 auto;
    position: relative;
    transition: 0.5 ease-in;
    opacity: 0;
    margin-top: 36px
  }

  .show_more svg {
    position: absolute;
    bottom: -4px;
    left: 5px
  }

  .about_container .main_text {
    width: 100%;
    height: auto;
    padding: 0 4vw
  }

  .about_container {
    top: 245px
  }

  .about_container .first_image {
    margin-top: 205px
  }

  .about_container .first_image .fade,
  .slick-list,
  .slick-track,
  .slick-slide {
    height: 516px
  }

  .arrow {
    top: 29vw
  }

  .about_container .worck_stages .canvas_place .tree {
    margin-left: -75px;
    margin-top: -25px;
    transform: rotate(90deg)
  }

  .about_container .worck_stages .canvas_place .tree span {
    top: 50%;
    margin-top: -4.5px;
    left: -4.5px
  }

  .about_container .team_block .title {
    font-size: 48px;
    line-height: 57px
  }

  .about_container .team_block {
    padding-top: 91px
  }

  .about_container .team_block .prof_containner {
    margin-top: 56px
  }

  .about_container .team_block .prof_containner {
    width: 100vw;
    padding: 0 4vw
  }

  .about_container .team_block .prof_containner div {
    width: 30vw;
    height: 35vw
  }

  .about_container .team_block .prof_containner .join_block {
    border: 1px solid rgba(245, 245, 245, 0.04)
  }

  .about_container .team_block .prof_containner div .name {
    opacity: 1;
    bottom: 42px;
    margin: 0;
    top: auto;
    left: 19px;
    height: auto;
    text-align: left;
    width: 50%;
    font-size: 12px;
    line-height: 16px;
    font-family: MullerBold, sans-serif
  }

  .about_container .team_block .prof_containner div .stack {
    bottom: 18px;
    top: unset;
    left: 18px;
    margin: 0;
    position: absolute;
    opacity: 1;
    text-align: left;
    font-size: 12px;
    font-family: MullerLight, sans-serif
  }

  .about_container .team_block .footer_text {
    margin: 120px auto 0 auto;
    width: 65vw
  }

  .about_container .team_block .footer_text .title {
    margin: 0;
    text-align: center;
    font-size: 48px;
    line-height: 57px;
    text-align: center;
    letter-spacing: 0.1em;
    width: 100%;
    height: auto
  }

  .about_container .team_block .footer_text .drop_req {
    margin: 46px auto 0 auto;
    text-align: center
  }

  .about_container .team_block .dev_footer {
    margin-top: 144px
  }

  .about_container .team_block .prof_containner div {
    filter: none
  }

  .about_container .team_block .title {
    width: auto
  }
}

@media (max-width:550px) {
  .about_container .team_block .prof_containner div {
    width: 44vw;
    height: 50vw
  }

  .about_container .team_block .prof_containner {
    padding: 0 6vw
  }

  .arrow {
    top: 38vw
  }

  .uncircle {
    display: none
  }
}

@media (max-width:414px) {
  .worck_stages .slider .slider__inner .slide .slide__bg {
    width: 100%
  }

  .about_container .worck_stages .canvas_place .descript_proj .descript_p {
    color: #3F3A3A
  }

  .stage_list {
    position: absolute;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 16px;
    width: 200px;
    left: calc(50% - 100px);
    bottom: 40px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #3F3A3A
  }

  .stage_list div {
    position: absolute;
    width: 200px;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease-out 0.1s;
    transform: translateZ(0)
  }

  .worck_stages .slider .slider__inner .slide .slide__bg {
    width: 88vw;
    font-size: 22px;
    color: #3F3A3A;
    opacity: 0.56;
    transition: 0.5s ease-in;
    line-height: 34px;
    margin-top: 20px
  }

  .about_container .worck_stages .canvas_place .descript_proj {
    bottom: 65px
  }

  .worck_stages .slider .slider__inner .slide .slide_blure {
    -webkit-text-stroke: 1px red;
    opacity: 0
  }

  .about_container .worck_stages .title {
    font-size: 32px
  }

  .worck_stages .slider .slider__inner .slide {
    top: 42px
  }

  .worck_stages .slider {
    display: none;
    touch-action: none;
    pointer-events: none
  }

  .scroll_line {
    display: block;
    height: 1px;
    width: 80vw;
    position: relative;
    background-color: rgb(66, 0, 0);
    margin: 146px auto
  }

  .scroll_line .controll {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #E96A5B;
    border-radius: 50%;
    bottom: -4.5px
  }

  .scroll_line .progress_line {
    display: block;
    height: 1px;
    position: absolute;
    background-color: rgb(248, 4, 4)
  }

  .first_circle_canvas {
    display: block;
    position: absolute;
    width: 81vw;
    height: 81vw;
    border: 1px solid rgba(1, 1, 1, 0.1);
    top: 94px;
    border-radius: 50%;
    left: 9.5vw;
    z-index: -1;
    opacity: 0.5
  }

  .second_circle_canvas {
    display: block;
    position: absolute;
    width: 81vw;
    height: 81vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    bottom: -30vw;
    border-radius: 50%;
    left: 9.5vw
  }

  .third_circle_canvas {
    display: block;
    position: absolute;
    width: 120vw;
    height: 120vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    bottom: -69vw;
    border-radius: 50%;
    left: -10vw
  }

  .first_middle_line {
    height: calc(100% + 94px);
    display: block;
    position: absolute;
    width: 1px;
    background-color: rgba(1, 1, 1, 0.1);
    left: calc(50vw - 1px);
    top: -94px;
    z-index: -1;
    opacity: 0.5
  }

  .about_container .worck_stages .canvas_place .step {
    display: none
  }

  .imk {
    width: 50vw;
    height: 50vw;
    position: absolute;
    background-color: azure;
    border-radius: 50%;
    left: 25vw;
    top: 2vw
  }

  #canvass {
    display: none
  }

  .about_container {
    top: 0;
    overflow: hidden
  }

  .canvas_place .numb {
    display: none
  }

  .canvas_place svg {
    display: none
  }

  .about_container .main_text {
    margin-top: 94px
  }

  .about_container .main_text .title {
    margin-bottom: 26px
  }

  .about_container .main_text .title {
    font-size: 20px
  }

  .about_container .first_image {
    margin-top: 72px;
    height: auto
  }

  .about_container .team_block {
    padding-top: 56px;
    overflow-y: hidden
  }

  .about_container .team_block .title {
    font-size: 32px;
    line-height: 38px
  }

  .about_container .team_block .prof_containner {
    margin-top: 40px
  }

  .about_container .team_block .prof_containner .join_block {
    width: 88vw
  }

  .about_container .team_block .prof_containner::before {
    content: '';
    z-index: 1;
    width: 100vw;
    height: 100%;
    position: absolute;
    background-color: #000000;
    opacity: 0.5;
    pointer-events: none;
    left: 0
  }

  .about_container .team_block .footer_text {
    margin-top: 55px;
    width: 72vw;
    height: auto
  }

  .about_container .team_block .footer_text .title {
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.1em
  }

  .about_container .team_block .footer_text .drop_req {
    margin: 32px auto 0 auto
  }

  .about_container .team_block .dev_footer {
    margin-top: 75px
  }

  .arrow {
    top: 40%
  }

  .about_container .team_block .prof_containner div .stack {
    left: 16px
  }

  .about_container .team_block .prof_containner div .name {
    left: 16px
  }

  #about_footer {
    display: none
  }

  .about_container .worck_stages {
    display: none
  }
}

@media (max-width:375px) {
  .about_container .main_text .description {
    max-height: 170px
  }

  .about_container .main_text {
    margin-top: 84px
  }

  .about_container .main_text .title {
    font-size: 18px;
    line-height: 31px;
    margin-bottom: 22px
  }

  .about_container .main_text .description {
    text-align: center
  }

  .about_container .first_image {
    margin-top: 64px
  }

  .about_container .first_image .fade,
  .slick-list,
  .slick-track,
  .slick-slide {
    height: 465px
  }

  .about_container .worck_stages {
    margin-top: 55px
  }

  .about_container .worck_stages .title {
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.1em
  }

  .about_container .team_block {
    margin-top: 64px;
    padding-top: 47px
  }

  .about_container .team_block .prof_containner {
    padding: 0 4vw
  }

  .about_container .team_block .prof_containner div {
    width: 46vw;
    height: 53vw
  }

  .about_container .team_block .prof_containner .join_block {
    width: 92vw
  }

  .about_container .team_block .footer_text {
    margin-top: 47px;
    width: 80vw
  }

  .about_container .team_block .footer_text .title {
    font-size: 32px;
    line-height: 38px
  }
}

@media (max-width:320px) {
  .about_container .main_text {
    margin-top: 76px
  }

  .about_container .main_text .title {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 20px
  }

  .about_container .main_text .description {
    font-size: 16px;
    line-height: 23px
  }

  .about_container .first_image {
    margin-top: 56px
  }

  .about_container .first_image .fade,
  .slick-list,
  .slick-track,
  .slick-slide {
    height: 397px
  }

  .about_container .worck_stages {
    margin-top: 49px
  }

  .about_container .worck_stages .title {
    font-size: 24px;
    line-height: 29px
  }

  .about_container .team_block {
    margin-top: 56px;
    padding-top: 41px
  }

  .about_container .team_block .title {
    font-size: 24px;
    line-height: 29px
  }

  .about_container .team_block .prof_containner div .name {
    width: 100%;
    left: 0;
    text-align: center
  }

  .about_container .team_block .prof_containner div .stack {
    width: 100%;
    left: 0;
    text-align: center
  }

  .about_container .team_block .footer_text {
    margin-top: 41px
  }

  .about_container .team_block .footer_text .title {
    font-size: 24px;
    line-height: 29px
  }
}

.ml1 {
  display: none
}

.ml2 {
  display: none
}

.ml3 {
  opacity: 0
}

.ml4 {
  display: none
}

.ml5 {
  opacity: 0
}

.ml6 {
  display: none
}

.ml7 {
  opacity: 0
}

.ml8 {
  display: none
}

.ml9 {
  opacity: 0
}

.ml10 {
  display: none
}

.ml11 {
  display: none
}

.ml12 {
  opacity: 0
}

.ml14 {
  opacity: 0
}

.contact_container {
  height: 100%;
  overflow-x: hidden;
  position: relative
}

#map {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../images/map/1440\ map.png');
  background-size: 100% 100%;
  background-position: center
}

.first_point {
  position: absolute;
  left: 47vw;
  top: 51vh;
  height: 40px;
  width: 291px;
  font-family: MullerLight, sans-serif
}

.work_inf p {
  margin: 0
}

.second_point {
  position: absolute;
  right: 25vw;
  top: 42vh;
  height: 40px;
  width: 247px
}

.point_title {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5F5F5;
  float: left;
  margin-left: 16px;
  margin-bottom: 6px
}

.point_descript {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: #F5F5F5;
  opacity: 0.7;
  float: left;
  margin-left: 16px
}

.map_point {
  width: 40px;
  height: 40px;
  float: left;
  position: relative
}

.second_point .point_title {
  margin-left: 0;
  margin-right: 16px
}

.second_point .point_descript {
  margin-right: 16px;
  margin-left: 0
}

.second_point .map_point {
  float: right
}

.map_point .white_deep {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.9;
  background-color: white;
  position: absolute;
  top: 15px;
  left: 15px
}

#contact_canvas {
  pointer-events: none
}

.contact_container .info_block {
  position: absolute;
  width: 100vw;
  height: 319px;
  padding: 0 72px;
  top: 224px;
  pointer-events: none
}

.contact_container .info_block .page_title {
  position: absolute;
  width: 360px;
  height: 57px;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5
}

.contact_container .info_block .contact_info {
  pointer-events: all;
  position: absolute;
  width: 167px;
  height: 182px;
  top: 137px
}

.contact_info .title {
  font-family: MullerLight, sans-serif;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5F5F5;
  margin: 0;
  margin-bottom: 8px
}

.work_info .title {
  font-family: MullerLight, sans-serif;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5F5F5;
  margin: 0;
  margin-bottom: 8px
}

.supInfo .title {
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F5F5F5;
  margin: 0;
  margin-bottom: 18px
}

.info {
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.08em;
  margin: 0;
  color: #F5F5F5
}

.contact_container .info_block .contact_info .phone_title {
  margin-top: 68px
}

.contact_container .info_block .contact_info .phone a {
  color: white;
  display: block
}

.contact_container .info_block .work_info {
  pointer-events: all;
  position: absolute;
  width: 135px;
  height: 182px;
  bottom: 0;
  right: 4vw
}

.contact_container .info_block .work_info .social_title {
  margin-top: 28px;
  width: 200px
}

.contact_container .info_block .work_info .social_media {
  width: 155px;
  height: 40px;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.08em;
  position: relative;
  color: #E96A5B;
  text-align: left
}

.contact_container .info_block .work_info .social_media a {
  width: auto;
  color: #E96A5B;
  display: block;
  margin-bottom: 5px;
  margin-right: 4px
}

.contact_container .dev_footer {
  width: 100%;
  padding: 0 5vw;
  height: 23px;
  margin: 32px auto;
  filter: invert(40%);
  mix-blend-mode: exclusion;
  bottom: 0;
  color: #F5F5F5;
  position: absolute
}

.supInfo {
  display: none
}

.lookMap {
  display: none
}

.lool_map_small {
  display: none
}

@media(max-width:1024px) {
  #map {
    background-image: url('../images/map/1024\ map.png')
  }

  .second_point {
    right: 30vw;
    top: 43vh
  }

  .first_point {
    left: 46vw;
    top: 50vh
  }

  .contact_container .info_block {
    width: 100%;
    top: 32vh;
    left: 0;
    margin: 0;
    height: auto
  }

  .contact_container .info_block .page_title {
    font-size: 48px;
    line-height: 57px;
    left: 4vw
  }

  .contact_container .info_block .contact_info {
    height: auto;
    left: 4vw;
    top: calc(7vh + 48px)
  }

  .contact_info .title {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 14px
  }

  .work_info .title {
    font-size: 12px
  }

  .info {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.08em
  }

  .contact_container .info_block .contact_info .phone_title {
    margin-top: 40px
  }

  .contact_container .info_block .work_info {
    top: calc(7vh + 48px);
    height: auto;
    right: 4vw
  }

  .contact_container .info_block .work_info .social_title {
    margin-top: 40px
  }
}

@media(max-width:768px) {
  .work_info .title {
    margin-bottom: 12px
  }

  #map {
    background-image: url('../images/map/768\ map.png')
  }

  .first_point {
    left: 45vw;
    top: 56vh
  }

  .second_point {
    right: 15vw;
    top: 60vh
  }

  .contact_container .info_block {
    top: 123px
  }

  .contact_container {
    height: 1024px
  }

  .contact_container .info_block .work_info {
    top: 96px
  }

  .contact_container .dev_footer {
    position: absolute;
    bottom: 0;
    filter: invert(47%)
  }

  .contact_container .info_block .contact_info {
    width: calc(100% - 4vw);
    height: auto;
    top: 96px
  }

  .contact_container .info_block .contact_info p {
    position: absolute
  }

  .phone {
    width: 162px;
    height: auto
  }

  .mail_title {
    right: 4vw;
    width: 157px
  }

  .contact_container .info_block .work_info {
    left: 40vw
  }

  .contact_info .mail {
    right: 5.7vw;
    position: absolute;
    margin: 0;
    width: 145px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.08em;
    top: 28px
  }

  .about_container .main_text .description {
    max-height: 137px;
    overflow-y: hidden
  }

  .contact_container .info_block .contact_info .phone_title {
    margin: 0;
    top: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px
  }

  .work_info .title {
    font-size: 12px
  }

  .contact_container .info_block .contact_info .phone {
    top: 28px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.08em
  }

  .contact_container .info_block .work_info .social_title {
    position: absolute;
    left: -36vw;
    margin-top: 42px
  }

  .contact_container .info_block .work_info .social_media {
    position: absolute;
    left: -36vw;
    margin-top: 66px;
    width: 179px
  }

  .contact_container .info_block .work_info .social_media a {
    margin-right: 16px
  }
}

@media(max-width:500px) {
  .work_info .title {
    margin-bottom: 15px
  }

  .work_inf {
    width: 120px
  }

  #map {
    background-image: url('../images/map/414\ map.png')
  }

  .first_point {
    display: none
  }

  .second_point {
    display: none
  }

  .contact_container .info_block .contact_info {
    width: auto
  }

  .contact_container .info_block .contact_info p {
    position: unset
  }

  .contact_info .mail {
    position: unset;
    color: #F5F5F5
  }

  .contact_container .info_block .work_info .social_title {
    margin-top: 32px;
    position: unset;
    color: #F5F5F5
  }

  .contact_container .info_block .work_info .social_media {
    position: unset;
    color: #F5F5F5
  }

  .title {
    margin-bottom: 12px
  }

  .contact_container .info_block .contact_info .phone_title {
    margin-top: 32px;
    margin-bottom: 12px
  }

  .contact_container .info_block .work_info {
    right: 0vw;
    width: 179px;
    left: unset
  }

  .contact_container .info_block .work_info .social_media {
    margin-top: 0
  }

  .contact_container {
    height: 100%;
    min-height: 690px
  }

  .supInfo {
    display: block;
    position: absolute;
    margin-top: 385px;
    top: 0;
    left: 4vw
  }

    .supInfo .info.addres {
        max-width: 50%;
    }

  .supInfo .title {
    margin-top: 32px;
    margin-bottom: 12px
  }

  .lookMap {
    display: block;
    position: absolute;
    top: 0;
    width: 90px;
    right: calc(4vw + 45px);
    margin-top: 460px
  }

  .lookMap text {
    fill: white;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 2px
  }
}

@media(max-width:375px) {
  .contact_container .info_block .page_title {
    font-size: 32px;
    line-height: 38px
  }

  .contact_container .info_block .contact_info {
    left: 4vw
  }

  .supInfo {
    left: 4vw
  }

  .contact_container .info_block .work_info {
    right: -8vw
  }

  .contact_container .info_block .work_info .social_media a {
    margin-right: 5px
  }

  .lookMap {
    right: calc(2vw + 45px)
  }
}

@media(max-width:320px) {
  .work_inf {
    width: auto;
    margin-left: auto;
    margin-right: auto
  }

  .contact_container .info_block {
    top: 81px
  }

  .contact_container .info_block .page_title {
    font-size: 24px;
    line-height: 29px;
    width: 100%;
    text-align: center;
    left: 0
  }

  .contact_container .info_block .contact_info {
    left: 0;
    width: 100%;
    top: unset;
    margin-top: 68px;
    position: relative;
    float: left;
    height: auto
  }

  .contact_container .info_block .contact_info p {
    margin: 0;
    width: 100%;
    text-align: center;
    height: auto
  }

  .contact_info .mail {
    width: 100%;
    text-align: center;
    display: block
  }

  .lookMap {
    display: none
  }

  .contact_container .info_block .work_info {
    position: relative;
    float: left;
    right: unset;
    left: unset;
    top: unset;
    width: 100%;
    margin-top: 32px
  }

  .work_info .title {
    text-align: center;
    position: unset;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F5F5F5
  }

  .contact_info .title {
    text-align: center;
    position: unset;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F5F5F5
  }

  .supInfo .title {
    text-align: center;
    position: unset;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F5F5F5
  }

  .work_info .info {
    text-align: center;
    position: unset
  }

  .contact_info .info {
    text-align: center;
    position: unset
  }

  .supInfo .info {
    text-align: center;
    position: unset
  }

  .work_inf {
    text-align: center
  }

  .contact_container .info_block .work_info .social_media {
    margin: 0 auto;
    position: static;
    width: 150px
  }

  .contact_container .info_block .work_info .social_media a {
    margin: 5px;
    text-align: center
  }

  .work_inf p {
    margin: 0
  }

  .contact_container .info_block .work_info .social_title {
    margin: 32px auto 0 auto
  }

  .contact_container .info_block {
    pointer-events: all
  }

  .contact_container .dev_footer {
    position: static
  }

  .supInfo {
    position: relative;
    margin-top: -200px;
    left: 0
  }

  .lool_map_small {
    display: block;
    font-family: MullerLight, sans-serif;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 34px auto 0 auto;
    color: #FFFFFF;
    width: 118px;
    position: relative
  }

  .contact_container .info_block .work_info .social_title {
    width: auto
  }
}

.single_containner {
  position: absolute;
  width: 100%;
  background-color: #ECE8E5;
  overflow-x: hidden
}

.single_containner .main_img {
  width: 718px;
  height: 100vh;
  margin: 0 auto;
  background-position: center;
  overflow: hidden;
  position: relative
}

.single_containner .main_img .img {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat
}

.single_containner .main_name {
  position: absolute;
  width: 497px;
  height: 191px;
  left: calc(50% - 656px);
  top: 264px;
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(50px);
  text-transform: uppercase;
  color: #3F3A3A;
  mix-blend-mode: exclusion;
  filter: invert(100%)
}

.white {
  color: white
}

.single_containner .main_descript {
  transform: translateY(50px);
  opacity: 0;
  position: absolute;
  width: 167px;
  height: 304px;
  right: 82px;
  top: 230px
}

.single_containner .main_descript .info_block .title,
.team_block .title {
  margin: 38px 0 18px 0;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3F3A3A
}

.single_containner .main_descript .info_block .info,
.team_block .info {
  margin: 0 0 8px 0;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: #3F3A3A;
  opacity: 0.7
}

.single_containner .main_descript .info_block .info span,
.team_block .info span {
  color: #E96A5B;
  margin-left: 8px
}

.single_containner .back {
  position: absolute;
  width: 180px;
  height: 32.19px;
  left: 72px;
  top: 810px;
  font-family: MullerLight, sans-serif;
  font-size: 10px;
  line-height: 16px;
  transition: opacity 0.6s ease-in;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-image: url('../images/Path\ 3\ Copy.1.svg');
  background-repeat: no-repeat;
  background-position: left 4px;
  color: #3F3A3A;
  text-align: right;
  opacity: 0
}

#back_svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000
}

.single_containner .descript {
  position: relative;
  width: 720px;
  height: 289px;
  margin: 164px auto 188px auto
}

.single_containner .descript .title {
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 43px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: #3F3A3A
}

.single_containner .descript .info {
  font-family: MullerLight, sans-serif;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #3F3A3A;
  opacity: 0.7;
  margin: 32px 0 0 0
}

.single_containner .img_block {
  width: 90vw;
  position: relative;
  margin: 0 auto 0 auto
}

.single_containner .img_block::after {
  content: "";
  display: table;
  clear: both
}

.single_containner .img_block div {
  margin-top: 12px;
  float: left;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0
}

.single_containner .img_block .big_img {
  width: calc(90vw - 14px);
  height: 50vw;
  transform: translateY(150px);
  margin: 7px 7px
}

.single_containner .img_block .midle_img {
  display: block;
  width: calc(45vw - 14px);
  transform: translateY(150px);
  height: 50vw;
  margin: 7px 7px 7px 7px;
  float: left
}

.single_containner .get_idea {
  margin-top: 72px
}

.single_containner .next_proj {
  position: relative;
  width: 720px;
  height: 472px;
  margin: 225px auto 0 auto;
  background-position: center;
  background-repeat: no-repeat
}

.single_containner .next_proj .background {
  width: 100%;
  height: 100%;
  content: ' ';
  background-color: black;
  opacity: 0.5;
  position: absolute
}

.single_containner .next_proj .name {
  font-family: MullerThin, sans-serif;
  font-size: 56px;
  line-height: 67px;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  margin: 0 auto 0 auto;
  position: absolute;
  color: rgba(1, 1, 1, 0);
  -webkit-text-stroke: 0.5px white;
  width: 484px;
  position: relative;
  background: linear-gradient(90deg, white 0, rgba(1, 1, 1, 0) 0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.single_containner .next_proj .des {
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 37px;
  opacity: 0.5;
  color: #F5F5F5;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -56px
}

.single_containner .dev_footer {
  margin-top: calc(50vh - 291px)
}

.single_containner .back_controll {
  top: calc(100vh - 50px)
}

@media(max-width:1330px) {
  .single_containner .main_name {
    left: calc(50% - 500px)
  }
}

@media(max-width:1024px) {
  .single_containner .main_img {
    width: 100vw;
    margin-left: 0;
    left: 0
  }

  .single_containner .img_block {
    width: 100vw;
    padding: 0 4.5vw
  }

  .single_containner .main_img .img::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    content: '';
    opacity: 0.64
  }

  .single_containner .img_block .big_img {
    width: calc(100% - 2vw);
    height: 60vw;
    margin: 0.5vw
  }

  .single_containner .img_block .midle_img {
    width: 44vw;
    height: 59vw;
    margin: 0.5vw
  }

  .single_containner .back_controll {
    top: 262px;
    left: 40px;
    color: white;
    opacity: 1
  }

  .team_block .title {
    margin-bottom: 14px
  }

  .single_containner .main_name {
    top: 319px;
    width: 384px;
    height: 163px;
    font-size: 48px;
    line-height: 57px;
    letter-spacing: 0.1em;
    left: 0;
    margin-left: 40px;
    filter: invert(0);
    mix-blend-mode: unset;
    color: #ffffff
  }

  .single_containner .main_descript {
    left: 40px;
    top: 490px;
    width: 350px;
    height: auto
  }

  .info_block {
    float: right
  }

  .team_block {
    float: left;
    margin-left: 19px
  }

  .single_containner .descript {
    margin: 120px auto 172px auto
  }

  .single_containner .main_descript .info_block .title,
  .team_block .title {
    color: white;
    opacity: 1
  }

  .single_containner .main_descript .info_block .info,
  .team_block .info {
    color: white
  }

  .single_containner .next_proj {
    margin: 198px auto 0 -321px;
    width: 642px;
    height: 420px;
    left: 50%
  }

  .single_containner .next_proj::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.4;
    content: '';
    top: 0
  }

  .single_containner .next_proj .name {
    position: relative;
    z-index: 2
  }

  .single_containner .next_proj .des {
    color: white;
    z-index: 2;
    position: relative;
    opacity: 1
  }
}

@media (max-width:768px) {
  .single_containner .descript .title {
    font-size: 20px
  }

  .info_block {
    float: left
  }

  .single_containner .img_block .midle_img {
    height: 500px
  }

  .single_containner .next_proj {
    width: 80vw;
    height: 60vw
  }

  .single_containner .next_proj {
    margin: 150px auto 0 auto
  }

  .single_containner .next_proj .des {
    color: white
  }

  .single_containner .back_controll {
    left: 32px
  }

  .single_containner .main_name {
    margin-left: 32px
  }

  .single_containner .main_descript {
    left: 32px
  }

  .single_containner .img_block {
    width: 100vw;
    padding: 0 3.25vw
  }

  .single_containner .img_block .big_img {
    width: calc(100% - 1vw);
    height: 58vw;
    margin: 0.5vw
  }

  .single_containner .img_block .midle_img {
    width: 49%;
    height: 58vw;
    margin: 0.5%
  }

  .single_containner .descript {
    width: 100%;
    margin: 100px 0 132px 0
  }

  .single_containner .next_proj {
    margin: 169px auto 0 -35vw;
    width: 70vw;
    height: 45.5vw;
    left: 50%
  }

  .single_containner .next_proj .name {
    width: 100%;
    font-size: 7vw;
    line-height: 10vw
  }

  .single_containner .next_proj .des {
    margin: 0;
    left: 0;
    top: 0
  }

  .single_containner .next_proj .background {
    top: 0
  }
}

@media(max-width:414px) {
  .single_containner .main_descript {
    left: 24px;
    top: 350px
  }

  .single_containner .main_name {
    margin-left: 24px;
    top: 235px;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.1em;
    width: 297px;
    height: auto
  }

  .single_containner .back_controll {
    left: 24px;
    top: 149px;
    font-size: 12px;
    line-height: 16px;
    opacity: 0.7;
    letter-spacing: 2px
  }

  .single_containner .main_descript .info_block .title,
  .team_block .title {
    margin: 58px 0 10px 0;
    width: 100px
  }

  .single_containner .main_descript .info_block .info,
  .team_block .info {
    margin: 0 0 10px 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    display: block;
    width: auto;
    float: left;
    margin-right: 8px
  }

  .single_containner .main_descript .info_block .info {
    margin: 0 12px 32px 0
  }

  .info_block {
    float: none
  }

  .team_block {
    float: none;
    margin-left: 0
  }

  .single_containner .descript {
    width: 100vw;
    margin: 123px auto 88px auto;
    height: auto
  }

  .single_containner .img_block .big_img {
    height: 58.6vw;
    width: 100%;
    margin-left: 0;
    margin-right: 0
  }

  .single_containner .img_block .midle_img {
    width: 100%;
    height: 119vw;
    margin-left: 0;
    margin-right: 0
  }

  .single_containner .img_block {
    padding: 0 16px
  }

  .single_containner .next_proj {
    margin: 56px auto 0 -5.5vw;
    margin-left: -44.5vw;
    left: 50%;
    width: calc(100vw - 11vw);
    height: calc(100vw - 11vw);
    border-radius: 50%
  }

  .single_containner .next_proj .background {
    border-radius: 50%;
    top: 0
  }

  .single_containner .next_proj .name {
    font-size: 32px;
    line-height: 36px;
    width: 256px;
    height: 100%
  }

  .single_containner .next_proj .des {
    margin: 0;
    left: 0
  }

  .single_containner .next_proj::after {
    border-radius: 50%
  }

  .single_containner .main_descript .info_block .info,
  .team_block .coma::after {
    content: ','
  }

  .single_containner .main_descript .info_block .info,
  .team_block .point::after {
    content: '.'
  }
}

@media(max-width:375px) {

  .single_containner .main_descript .info_block .info,
  .team_block .info_responsive {
    display: block;
    width: auto;
    float: left;
    margin-right: 8px
  }

  .single_containner .main_descript {
    left: 18px;
    top: 304px
  }

  .single_containner .main_name {
    margin-left: 18px;
    top: 180px;
    width: 297px;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.1em;
    height: auto
  }

  .single_containner .back_controll {
    left: 18px;
    top: 114px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px
  }

  .single_containner .descript {
    margin: 100px auto 81px auto
  }

  .single_containner .next_proj {
    margin-top: 48px
  }
}

@media(max-width:320px) {
  .single_containner .main_descript {
    left: 18px;
    top: 233px
  }

  .single_containner .main_name {
    margin-left: 18px;
    top: 142px;
    width: 297px;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.1em;
    height: auto
  }

  .single_containner .back_controll {
    left: 18px;
    top: 76px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px
  }

  .single_containner .main_descript .info_block .info {
    margin: 0 8px 12px 0
  }

  .single_containner .main_descript .info_block .title,
  .team_block .title {
    margin: 32px 0 10px 0
  }
}

.pop-up {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 101;
  -webkit-transition: top .5s ease-in;
  -o-transition: top .5s ease-in;
  transition: top .5s ease-in;
  top: -100%
}

.pop-up .blure {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  background: #151414
}

.pop-up .block {
  width: 100%;
  height: 100%
}

.pop-up .block #pop-up-canvas {
  position: absolute;
  top: 0;
  display: none
}

.pop-up .block .inputs-group {
  height: 100%;
  top: 0;
  left: 50%;
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: opacity .5s ease-in;
  -o-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
  z-index: 2
}

.pop-up .block .inputs-group .statick_block {
  position: relative;
  top: 50%;
  margin: -210px auto 0 auto;
  width: 460px;
  height: 420px
}

.input_block:focus {
  outline: none
}

.pop-up .block .inputs-group .statick_block .title {
  width: 100%;
  height: 29px;
  font-family: MullerThin, sans-serif;
  font-size: 28px;
  line-height: 43px;
  text-align: center;
  margin-bottom: 64px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5
}

.pop-up .block .inputs-group .statick_block .input_block {
  position: relative;
  width: 460px;
  height: 30px;
  margin: 40px auto 0 auto
}

.pop-up .block .inputs-group .statick_block .input_block input,
textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(227, 227, 227, 0.06);
  caret-color: #E96A5B;
  -webkit-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
  font-family: MullerLight, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: rgba(245, 245, 245, 0.8);
  padding-left: 10px;
  cursor: none;
  background: none
}

.pop-up .block .inputs-group .statick_block .input_block .label {
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
  position: absolute;
  left: 10px;
  width: 213px;
  height: 13px;
  font-family: MullerLight, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: #F5F5F5;
  opacity: 0.3
}

.pop-up .block .inputs-group .statick_block .input_block .miss_descript {
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
  position: absolute;
  right: 10px;
  width: 213px;
  height: 13px;
  font-family: MullerLight, sans-serif;
  font-size: 11px;
  line-height: 141.02%;
  letter-spacing: 0.08em;
  text-align: right;
  color: #E96A5B;
  opacity: 1;
  top: -17px;
  opacity: 0
}

.pop-up .block .inputs-group .statick_block .request {
  width: 118px;
  height: 12px;
  margin: 64px auto 0 auto;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F5F5F5
}

.pop-up .block .close {
  position: absolute;
  z-index: 10;
  width: 76.04px;
  height: 24.04px;
  right: 72px;
  top: 39px;
  font-family: MullerLight, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F5F5F5;
  font: 400 10px/16px 'MullerLight', Arial, Helvetica, sans-serif
}

.thank_block {
  left: 50%;
  height: 100%;
  top: 0;
  z-index: 1;
  border-radius: 50%;
  position: absolute;
  border: 1px solid #1E1D1D;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in;
  -o-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in
}

.thank_block .thank {
  position: absolute;
  width: 413px;
  height: 72px;
  left: 50%;
  top: 50%;
  margin-top: -36px;
  margin-left: -206.5px;
  font: 300 28px/43px 'MullerThin', Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F5F5
}

.close .poinnt_left {
  transform: translate3d(20px, 9px, 0) rotateZ(45deg);
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: white;
  right: 12px;
  top: 7px
}

.close .point_right {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translate3d(41px, 2px, 0) rotateZ(-45deg);
  opacity: 0;
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: white
}

.svg_pop {
  display: block;
  margin: 10px auto
}

#svg_pop {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0
}

.svg_pop:hover #svg_pop {
  animation: dash3 3s linear forwards
}

@media(max-width:768) {
  .pop-up .block .close {
    right: 5vw
  }
}

@media(max-width:500px) {
  .pop-up .block .inputs-group .statick_block .input_block {
    width: 80vw
  }

  .pop-up .block .close {
    right: 4vw
  }

  .pop-up .block .inputs-group .statick_block .title {
    font-size: 28px;
    line-height: 43px;
    width: 80%;
    margin: 0 auto;
    height: auto
  }
}

.change_device {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #151414;
  display: none
}

.change_device svg {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px auto auto -20px
}

.change_device p {
  position: absolute;
  top: calc(50% + 40px);
  width: 100%;
  font-family: MullerLight, sans-serif;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #F5F5F5
}

/* Coded by Lorenzo Bocchi ~ www.be.net/LorenzoBocchi */
/* Designed by CSS Design Awards ~ www.cssdesignawards.com */

/* purple: #673AB7 */
/* light: #EDEDED */
/* black: #000000 */

#cssda-badge {
  /* monogram position here */
  position: fixed;
  bottom: 65px;
  right: -45px;
  /* ––– */
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background: rgba(1, 1, 1, 0);
  -webkit-transition: all .25s cubic-bezier(.615, .19, .305, .91);
  -moz-transition: all .25s cubic-bezier(.615, .19, .305, .91);
  transition: all .25s cubic-bezier(.615, .19, .305, .91);
  cursor: pointer;
  z-index: 10;
}

#cssda-badge:hover {
  -webkit-animation: bounce .75s linear both;
  -moz-animation: bounce .75s linear both;
  animation: bounce .75s linear both;
  right: 0;
}

#cssda-badge svg {
  position: absolute;
  width: 90px;
  height: 90px;
  fill: rgba(255, 255, 255, 0.8);
}

#cssda-badge:hover svg {
  fill: #EDEDED;
}

.cssda-badge-content {
  position: absolute;
  width: 90px;
  height: 90px;
  -webkit-transition: all .12s cubic-bezier(.615, .19, .305, .91);
  -moz-transition: all .12s cubic-bezier(.615, .19, .305, .91);
  transition: all .12s cubic-bezier(.615, .19, .305, .91);
}

#cssda-badge:hover .cssda-badge-content {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}

#cssda-badge:hover #cssda-badge-logo {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

@media only screen and (max-width: 700px) {
  #cssda-badge {
    display: none;
    /* monogram responsive position here */
    right: -30px;
    /* ––– */
    width: 60px;
    height: 60px;
  }

  #cssda-badge svg {
    width: 60px;
    height: 60px;
  }

  #cssda-badge-logo {
    -webkit-transform: scale(1.35);
    -moz-transform: scale(1.35);
    transform: scale(1.35);
  }

  #cssda-badge:hover #cssda-badge-logo {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
  }

  #cssda-badge-title {
    display: none;
  }

  #cssda-badge-award {
    display: none;
  }
}

/* Generated with Bounce.js */
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  3.4% {
    -webkit-transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  4.7% {
    -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  6.81% {
    -webkit-transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  9.41% {
    -webkit-transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  10.21% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  13.61% {
    -webkit-transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  14.11% {
    -webkit-transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  17.52% {
    -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  18.72% {
    -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  21.32% {
    -webkit-transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  24.32% {
    -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  25.23% {
    -webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  29.03% {
    -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  29.93% {
    -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  35.54% {
    -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  36.74% {
    -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  41.04% {
    -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  44.44% {
    -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  52.15% {
    -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  59.86%,
  63.26% {
    -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  100%,
  75.28%,
  85.49%,
  90.69% {
    -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  3.4% {
    -webkit-transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  4.7% {
    -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  6.81% {
    -webkit-transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  9.41% {
    -webkit-transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  10.21% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  13.61% {
    -webkit-transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  14.11% {
    -webkit-transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  17.52% {
    -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  18.72% {
    -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  21.32% {
    -webkit-transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  24.32% {
    -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  25.23% {
    -webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  29.03% {
    -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  29.93% {
    -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  35.54% {
    -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  36.74% {
    -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  41.04% {
    -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  44.44% {
    -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  52.15% {
    -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  59.86%,
  63.26% {
    -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }

  100%,
  75.28%,
  85.49%,
  90.69% {
    -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  }
}