:root {
  --header-h: 100px;
  --footer-h: 190px;

  --text: #72727E;
  --bg: #ffffff;
  --url: #141B41;
  --url-hover: #191715;
  --white: #ffffff;
  --tact: 0.3s;
}

/*
https://fonts.google.com/specimen/Montserrat?query=open&sidebar.open=true&selection.family=Montserrat:wght@300;400;500;600;700;800&preview.text_type=custom
*/
/* font: 18px/1.66  */
body {
  font: 16px/1.66 'Montserrat', sans-serif;
  color: var(--text);
  background-color: var(--bg);
  font-weight: normal;
}

body,
html {
  /*overflow-x:hidden;*/
  /*overflow-y:hidden;*/
  /*overflow-y: scroll;*/
}

.preloader {
  background: #fff;
  display: flex;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}

.preloader svg {
  max-width: 120px;
  max-height: 120px;
  width: 100%;
  height: 100%;
  position: relative;
}

.pulse {
  animation: pulse 1.25s infinite;
  margin: 0 auto;
  display: table;
  animation-direction: normal;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}


.bread-crumbs {
  display: none;
}

a {
  color: var(--url);
  text-decoration: none;
}

a:hover {
  color: var(--url-hover);
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  margin: 0;
  padding: 0;
}


/* --- Common --- */
.only-mobdev {
  display: none;
}

.rotate-90 {
  transform: rotate(-90deg);
}

.rotate-180 {
  transform: rotate(-180deg);
}

.rotate-270 {
  transform: rotate(-270deg);
}

.hidden,
.hidn {
  display: none !important;
}

.fix,
.fixed {
  position: fixed;
}

.z-max {
  z-index: 20000;
}

.z100 {
  z-index: 100;
}

.z50 {
  z-index: 50;
}

.center {
  text-align: center;
}

img.auto-resize {
  max-width: 100%;
  max-height: 100%;
}

img,
svg {
  user-select: none;
  -webkit-user-select: none;
}

::selection {
  background: hsl(246 45% 46% / 1);
  /* WebKit/Blink Browsers */
  color: #fff;
}

::-moz-selection {
  background: hsl(246 45% 46% / 1);
  /* Gecko Browsers */
  color: #fff;
}

.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

.map-mobile-only {
  display: none;
}

.map-desktop-only {
  display: block;
}

/* 3.75% = 72/1920  */
.w-container {
  padding: 0 3.75% 0 3.75%;
}

.w-row {
  width: auto;
}

.btn-cta {
  background: linear-gradient(90deg, #141B41 0%, #141B41 96.87%);
  padding: 12px 60px;
  color: #fff;
  font-size: 100%;
  border-radius: 30px;
  font-weight: 500;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background-gradient var(--tact);
}

.btn-cta:hover {
  background: linear-gradient(90deg, #191715 0%, #141B41 96.87%);
  color: #fff;
}

.btn-more {
  border: none;
  color: var(--text);
  font-size: 127.4444%;
  line-height: 1.4444;
  position: relative;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  transition: 0.3s;
}

.btn-more:after {
  border-bottom: 3px solid var(--url);
  width: 50px;
  position: absolute;
  padding: 0;
  left: 0;
  margin: 0;
  bottom: -11px;
  content: '';
  transition: 0.3s;
}

.btn-more:hover {
  color: var(--url);
  transition: 0.3s;
}

.btn-more:hover:after {
  width: calc(100% + 11px);
}

.btn-cta-slim {
  padding: 13px 18px;
}


/* Header */
header.header {
  background: rgba(114, 114, 126, 0.5);
  width: 100%;
  height: var(--header-h);
  position: fixed;
  top: 0;
  left: 0;
}

header.header .logo {
  width: 96px;
  height: 46px;
}

header.header .logo img {
  width: 100%;
  display: block;
  transition: var(--tact);
}

header.header .logo img:hover {
  transform: scale(1.2);
}


header.header .header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

header.header .main {
  display: flex;
  justify-content: flex-end;
}

header.header .main ul.nav {
  display: flex;
}

header.header .main ul.nav li {
  padding-left: 3.125vw;
}

header.header .main ul.nav li a {
  color: var(--white);
  font-weight: 600;
  font-size: 111.1111%;
  transition: var(--tact);
  position: relative;
}

header.header .main ul.nav li a::after {
  width: 0%;
  bottom: -10px;
  right: 0;
  border-bottom: 1px solid var(--white);
  content: '';
  transition: var(--tact);
  position: absolute;
}

header.header .main ul.nav li a:hover {
  color: var(--url);
}

header.header .main ul.nav li a:hover::after {
  width: calc(100% + 15px);
  bottom: -10px;
  right: 0;
  border-bottom: 1px solid var(--white);
  content: '';
  position: absolute;
}

header.header .main ul.lang {
  display: flex;
  padding-left: 6.4167vw;
}

header.header .main ul.lang li {
  padding: 0px 1.04167vw;
  border-left: 2px solid var(--white);
}

header.header .main ul.lang li a {
  color: var(--white);
  font-weight: 600;
  font-size: 111.1111%;
  transition: var(--tact);
}

header.header .main ul.lang li a:hover {
  color: var(--url);
}

header.header .main ul.lang li a.s {
  color: var(--url);
}

header.header .main ul.lang li:first-child {
  border-left: none;
}

header.popup-opened {
  background: transparent
}

header.popup-opened .logo {
  visibility: hidden;
}

header.popup-opened .logo img {
  transition: 0s;
}

header.header .nav-hamburger {
  display: none;
  z-index: 111;
  position: relative;
}

.humburger {
  cursor: pointer;
}

.humburger .long-line {
  display: block;
  width: 45px;
  height: 2px;
  background: var(--white);
  transition: 0.5s;
}

.humburger .short-line {
  display: block;
  width: 45px;
  height: 2px;
  background: var(--white);
  transition: 0.5s;
  margin: 14px 0 14px 0px;
}

.humburger.opened .long-line:nth-child(1) {
  transform: matrix(-0.91, 0.91, -0.27, -0.8, 0, 17);
}

.humburger.opened .long-line:nth-child(3) {
  transform: matrix(-0.91, -0.91, 0.27, -0.8, 0, -17);
}

.humburger.opened .short-line {
  opacity: 0;
}


/* Popup nav */
.popup-nav {
  background: #72727E;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: none;
}

.popup-nav .header {
  padding: 1.5em 2em 0em 3.75%;
}

.popup-nav .header .logo {
  max-width: 105px;
}

.popup-nav .header .logo img {
  filter: brightness(0) invert(1);
  width: 100%;
  height: auto;
}

.popup-nav .popup-nav-area {
  padding: 0 2em 1.5em 2em;
}

.popup-nav ul.nav li {
  font-weight: 600;
}

.popup-nav ul.nav li a {
  padding: 0.5em 0;
  display: block;
  width: 100%;
  color: var(--white);
  font-size: 140%;
  text-align: center;
}

.popup-nav ul.nav li a.s {
  color: var(--url);
}

.popup-nav .footer ul.lang {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-nav .footer ul.lang li {
  padding: 0px 4vw;
  border-left: 2px solid var(--white);
}

.popup-nav .footer ul.lang li a {
  color: var(--white);
  font-weight: 600;
  font-size: 140%;
  transition: var(--tact);
}

.popup-nav .footer ul.lang li a:hover {
  color: var(--url);
}

.popup-nav .footer ul.lang li a.s {
  color: var(--url);
}

.popup-nav .footer ul.lang li:first-child {
  border-left: none;
}


/* Content */
.content {}

.h1-header {
  font-weight: bold;
}


.textorium {
  position: relative;
  margin-bottom: 30px;
}

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

.textorium-p-down {
  padding: 0 0 100px 0;
}

.textorium .w-container {
  padding: 0 10% 0 10%;
}

.textorium .story-text {
  /* height: 260px;  */
  /* overflow-y: auto;
  -webkit-overflow-scrolling: touch; */
  text-align: left;
  padding-right: 15px;
  margin: 30px auto 30px auto;
  /* height: 350px; */
  /* height: 110px; */
  /* box-shadow: 4px 4px 24px rgb(77 79 83 / 25%); */
  padding: 0px 3%;
  /* color:#444; */
  overflow: hidden;
}

.textorium .pre-spoiler-gradient {
  position: relative;
}

.textorium .spoiler-gradient {
  position: absolute;
  background: url(/i/gradient-w.png) 0 bottom repeat-x;
  background-size: 100% 75px;
  height: 120px;
  overflow: hidden;
  width: 100%;
}

.textorium .story-text p {
  padding: 0.5em 0 0.5em 0;
  margin: 0;
  line-height: 1.3em;
}

.textorium .story-text ul {
  padding: 0.5em 0 0.5em 2em;
  margin: 0;
  line-height: 1.3em;
}

.textorium .story-text ul li {
  padding: 0.5em 0 0em 0.5em;
  margin: 0;
  line-height: 1.3em;
  list-style: square;
}

.textorium .story-text h1,
.textorium .story-text h2,
.textorium .story-text h3,
.textorium .story-text h4,
.textorium .story-text h5,
.textorium .story-text h6 {
  padding: 0.5em 0 0.5em 0;
  margin: 0;
  line-height: 1.3em;
  font-weight: 600;
  text-align: center;
}


/* Intro / hero / splash */
.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.intro-bottom-side {
  height: calc(100vh - 3em);
}

.intro .back {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #eaeaea center center no-repeat;
  background-size: cover;
}

/* url("../i/splash1.jpg") */
.intro .front {
  width: 100%;
  height: 100vh;
  position: absolute;
}

.intro .front .w-container {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro .h1-header {
  padding: 22vh 0 22vh 0;
  position: relative;
  font-size: 340%;
  color: #fff;
  text-align: center;
  margin: 0;
  width: 100%;
}

.intro .ctrl {
  position: relative;
}

.intro .video {
  position: absolute;
  display: block;
  height: 100%;
  width: 177.77777778vh;
  /* 100 * 16 / 9 */
  min-width: 100%;
  /*min-height: 56.25vw;*/
  /* 100 * 9 / 16 */
  min-height: 56.75vw;
  left: 50%;
  /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%);
  /* % of current element */
}

.intro .video-volume {
  position: absolute;
  right: 3.75%;
  top: calc(var(--header-h) + 40px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  z-index: 10;
}

.intro .video-volume:hover {
  cursor: pointer;
  background: rgba(114, 114, 126, 0.5);
}

.intro .video-volume img {
  display: block;
  width: 100%;
  height: 100%;
}

.intro .btn-cta {
  padding: 15px 55px;
  font-size: 120%;
}

.next-screen {
  position: absolute;
  right: 3.75%;
  bottom: 60px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(114, 114, 126, 0.5);
  transition: 0.3s;
  z-index: 10;
}

.next-screen:hover {
  cursor: pointer;
  background: rgba(114, 114, 126, 0.75);
}

.next-screen img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.next-screen span {
  display: block;
  font-size: 77.7778%;
  color: var(--white);
  text-align: center;
  padding-top: 5px;
}


.h2-header,
h2.header {
  font-weight: 600;
  /* font-size: 1111.1111%; */
  font-size: 910%;
  line-height: 0.8;
  text-align: center;
  color: #DDDDDE;
  padding: 0;
  margin: 0;
  position: relative;
  top: -0.3em;
  width: 100%;
  display: flex;
  justify-content: center;
}

.h2-header span.text,
h2.header span.text {
  position: absolute;
  display: block;
  overflow: hidden;
  line-height: 0.2em;
  padding-bottom: 0.5em;
  top: 0.3em;
}

.h2-header span.text-top,
h2.header span.text-top {
  display: block;
  height: 0.3em;
  overflow: hidden;
  left: 0.04em;
  /* 7px;*/
  position: relative;
  color: rgba(0, 0, 0, 0.25);
}

.h2-light .h2-header span.text-top,
.h2-light h2.header span.text-top {
  color: #e0e0e080
}

.about {
  background: #fff;
}

.about .list {
  padding: 80px 0 0 0;
}

.about .list .item {
  display: flex;
  width: 100%;
}

.about .list .item .head {
  font-size: 170%;
  text-transform: uppercase;
  text-align: right;
  position: relative;
  margin-right: 31%;
}

.about .list .item .head::before {
  width: 50px;
  border-top: 2px solid var(--url);
  right: 1px;
  top: -0.3em;
  position: absolute;
  content: '';
}

.about .list .item .text {
  padding: 0 0 50px 15px;
  max-width: 65.5%;
  font-size: 113.3333%;
  text-align: left;
}

h3,
.h3 {
  font-style: normal;
  font-weight: normal;
  font-size: 110%;
  /*123.3333%;*/
  line-height: 1.66;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  padding: 0 0 25px 0;
}

h4,
.h4 {
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

/* .advantages { background:#f8f8f8 url(../i/advantages-bg-white.svg) center 160px no-repeat; background-size: cover; padding:0 } */
.advantages {
  background: url(../i/arc1.svg) center 3px no-repeat;
  background-size: cover;
  padding: 0;
  height: 52.86vw;
}

.advantages-in {
  /*background:url(../i/advantages-curve.svg) center 160px no-repeat; background-size: cover; padding: 80px 0 100px 0*/
}

.advantages-in {
  padding: 4.16vw 0 3.64vw 0;
}

.advantages h3,
.advantages .h3 {
  padding: 0 0 2.4vw 0;
  line-height: 1.55vw;
}

.advantages .list {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-around;*/
  padding-left: 4.2%;
  padding-top: 1.5vw;
}

.advantages .list-2 {
  padding-right: 7.5%;
  justify-content: flex-end;
  padding-top: 2.1vw;
}

.advantages .list .item {
  width: 26.8%;
  padding: 0 0 3.64vw 0;
  height: 14.4vw;
}

.advantages .list-2 .item {
  width: 26.8%;
  padding: 0 0 70px 2.5%;
}

.advantages .list .item-in {
  /*width: 33.3333%;*/
  max-width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.advantages .list .item .circles {
  width: 3.33vw;
  height: 3.33vw;
  background: url(../i/circle.svg) center center no-repeat;
  background-size: contain;
  /*opacity: 0.1;*/
}

.advantages .list .item .head {
  padding: 1.56vw 0 1.4vw 0;
}

.advantages .list .item .text {
  text-align: center;
  padding: 0 2%;
}



.services {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 42.9999%, rgba(223, 235, 244, 0.5) 43%, rgba(174, 202, 214, 0.5) 100%);
}

.services .swiper-area {
  padding: 0px 0 0 0;
  width: 100%;
  overflow: hidden;
}

.services .swiper-area-x1 {
  display: none;
}

.services .ctrl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 80px 0 0 0;
  position: relative;
  top: 17px;
  z-index: 9
}

.services .ctrl-x1 {
  display: none
}

.services .ctrl .prev,
.services .ctrl .next {
  max-width: 60px;
  cursor: pointer;
}

.services .ctrl .prev img,
.services .ctrl .next img {
  width: 100%;
}

.services .list-wrapper {
  padding: 0 3.75% 0 3.75%;
  padding: 0;
  position: relative;
}

.services .list {
  padding: 0 3.75% 0 3.75%;
  padding: 0;
  /*padding: 0 0vw; width:80vw;*/
  margin: 0 auto;
}

.services .list .swiper-slide {
  width: 80vw;
}

.services .list .item-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.services .list .item-area .item {
  transform: scale(0.85);
  transition: var(--tact);
}

.services .list .swiper-slide-active .item-area .item {
  transform: scale(1);
  transition: var(--tact);
}

.services .list .item {
  /*width:33.3333vw; max-width:33.3333vw;*/
  /* background: #0000aa1f; */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 47%;
}

.services .list .item .pic img {
  display: none;
}

.services .list .item .pic {
  position: relative;
  left: 0;
  background: #141B41 center center no-repeat;
  background-size: cover;
  width: calc(100% - 10%);
  /* height:auto;
  aspect-ratio: 600 / 381; */
  height: 21.5vw;
  /* aspect-ratio: 600 / 381; */
  margin: 0 0 0 auto;
}

.services .list .item .head {
  background: #fff;
  box-shadow: 2px 4px 4px rgba(114, 114, 126, 0.2);
  font-size: 100%;
  position: relative;
  top: -55px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  left: 0;
  height: 150px;
  width: calc(100% - 10%);
  margin: 0 auto 0 0;
}

.services .list .item .head .str {
  text-align: right;
  text-transform: uppercase;
  width: 40%;
  letter-spacing: 0.1em;
}

.services .list .item .head .btn {
  font-size: 90%;
}

.services .list .item .head .btn-cta {
  padding: 15px 30px;
}

.services .list .swiper-slide-active .item-area .item:hover {
  transform: scale(1.05);
}


.services .bullets {
  padding: 25px 0 55px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services .bullets-x1 {
  display: none
}

.services .bullets ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.services .bullets ul li {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.services .bullets .swiper-pagination-bullet {
  background: transparent;
  opacity: 1;
}

.services .bullets .swiper-pagination-bullet span {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 100%;
  background: #fff;
  opacity: 1;
}

.services .bullets .swiper-pagination-bullet-active span {
  border: 8px solid #141B41;
}

.services .ctrl-more {
  padding: 0 0 130px 0;
  text-align: center;
}





.portfolio {
  background: url(../i/zebra-bg-2.svg) center 200px no-repeat;
  /* background-size: cover;*/
}

.portfolio .h2-header,
.portfolio h2.header {
  padding-bottom: 120px;
}

.portfolio .w-full {
  overflow: hidden;
}

.portfolio .ctrl {
  margin: 0 0 60px 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  top: 18px;
  z-index: 10;
}

.portfolio .ctrl .prev {
  max-width: 60px;
  cursor: pointer;
}

.portfolio .ctrl .next {
  max-width: 60px;
  cursor: pointer;
}

.portfolio .ctrl .prev svg,
.portfolio .ctrl .next svg {
  width: 100%;
}

.portfolio .list-wrapper {
  overflow: hidden;
  position: relative;
  left: 7vw;
}

.portfolio .list {
  padding-bottom: 150px;
}

.portfolio .list .item {
  /*height:54vh; width: 51vw;*/
  position: relative;
  /* aspect-ratio: 900 / 580; */
  height: 29.30vw;
}

.portfolio .list .item .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: center center no-repeat;
  background-size: cover;
}

.portfolio .list .item .front {
  background: rgba(14, 16, 52, 0.8);
  display: block;
  position: absolute;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  opacity: 0;
  transition: var(--tact);
  overflow: hidden;
}

.portfolio .list .item .front-in {
  padding: 11.5% 6.777%;
  position: absolute;
  height: calc(100% - 31% - 13%);
  overflow: hidden;
}

.portfolio .list .item .front-in-scroll {
  overflow: scroll;
}

.portfolio .list .item:hover .front {
  opacity: 1;
}

.portfolio .list .item .front {
  color: var(--bg);
}

.portfolio .list .item .front .head {
  font-weight: 600;
  font-size: 133.3333%;
  margin: 0 0 1em 0;
  text-transform: uppercase;
}

.portfolio .list .item .front .text {
  padding-right: 8%;
}


.plate-list {}

.plate-list .none {
  display: none;
}

.plate-list .list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.plate-list .list .item {
  text-align: center;
  padding: 0 0 60px 0
}

.plate-list .list .item img {
  display: block;
  max-width: 200px;
  max-height: 110px;
  margin: 0 auto;
  transition: var(--tact);
}

.plate-list .list .item img:hover {
  transform: scale(1.2);
}

.plate-list .list-3-in-row .item {
  width: 33.3333%
}



.clients {}

.clients .h2-header span.text-top,
.clients h2.header span.text-top {
  color: #72727E;
}

.clients .w-container {
  padding: 0 14.75% 0 14.75%;
}

.clients .plate-list {
  padding: 120px 0 20px 0;
}

.clients .ctrl-more {
  padding: 0 0 130px 0;
  text-align: center;
}


.team {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 54.9999%, #72727e 55%, #72727e 100%);
}

.team .h2-header {
  margin-bottom: 130px;
}

.team .ctrl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  top: 18px;
  z-index: 10;
}

.team .ctrl .prev {
  max-width: 60px;
  cursor: pointer;
}

.team .ctrl .next {
  max-width: 60px;
  cursor: pointer;
}

.team .ctrl .prev svg,
.team .ctrl .next svg {
  width: 100%;
}

.team .side-step {
  margin: 0 10%;
  overflow: hidden;
}

.team .list {
  padding: 0px 0 130px 0;
  margin: 0 auto
}

.team .list .item {
  text-align: center;
}

.team .list .item .pic {
  width: 450px;
  height: 500px;
  background: #f0f0f0 center center no-repeat;
  background-size: cover;
  margin: 0 auto 50px auto;
  transition: var(--tact);
}

.team .list .item .pic:hover {
  transform: scale(1.15);
}

.team .list .item .head {
  color: var(--bg);
  font-size: 200%;
  font-weight: 600;
  letter-spacing: 0.1em;
  width: 450px;
  margin: 0 auto;
}

.team .list .item .job-pos {
  color: var(--bg);
  font-size: 133.3333%;
  font-weight: 500;
  width: 450px;
  margin: 0 auto;
}



.samples {
  padding: 100px 0 30px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 54.9999%, #72727e 55%, #72727e 100%);
}

.samples .small-line {
  width: 50px;
  background: var(--url);
  height: 2px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.samples .header {
  font-size: 133.3333%;
  text-align: center;
  max-width: 790px;
  margin: 0 auto 70px auto;
  padding: 0 4%;
}

.samples .ctrl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  top: 18px;
  z-index: 10;
}

.samples .ctrl .prev {
  max-width: 60px;
  cursor: pointer;
}

.samples .ctrl .next {
  max-width: 60px;
  cursor: pointer;
}

.samples .ctrl .prev img,
.samples .ctrl .next img {
  width: 100%;
}

.samples .side-step {
  margin: 0 10%;
  overflow: hidden;
  position: relative;
  top: -50px;
  padding-top: 50px;
}

.samples .list {
  padding: 0px 0 70px 0;
  margin: 0 auto;
}

.samples .list .item {
  text-align: center;
}

.samples .list .item a {
  color: var(--bg);
  text-decoration: underline;
  transition: var(--tact);
}

.samples .list .item a:hover {
  opacity: 0.8;
}

.samples .list .item .pic {
  width: 450px;
  height: 500px;
  background: #f0f0f0 center center no-repeat;
  background-size: cover;
  margin: 0px auto 50px auto;
  width: 85%;
  height: 25.18vw;
  /* aspect-ratio: 450/500; */
  transition: var(--tact);
}

.samples .list .item .head {
  color: var(--bg);
  font-size: 140%;
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.3;
}

.samples .list .item:hover .pic {
  transform: scale(1.1);
}



.our-work {}

.our-work .h2-header {
  padding-bottom: 110px;
}

.our-work h3,
.our-work .h3 {
  padding: 70px 0 60px 0;
}

.our-work .small-line {
  width: 50px;
  background: var(--url);
  height: 2px;
  margin: 0 auto;
}

.our-work .desc {
  padding: 20px 0 40px 0;
  text-align: center;
  max-width: 500px;
  font-size: 110%;
  margin: 0 auto;
  line-height: 1.3;
}

.our-work .list {
  padding: 0 0 130px 0;
  max-width: 760px;
  margin: 0 auto;
}

.our-work .list .item {
  display: flex;
  height: auto;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 60px;
}

.our-work .list .step {
  border-right: 3px solid var(--url);
  min-width: 23%;
  display: flex;
  flex-direction: column;
  padding: 0 0 20px 0;
}

.our-work .list .pre {
  color: #DDDDDE;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding-left: 35px;
  font-size: 85%;
  position: relative;
  top: 5px;
}

.our-work .list .num {
  font-size: 650%;
  text-align: center;
  color: var(--url);
  text-align: center;
  line-height: 0.9;
}

.our-work .list .info {
  text-align: left;
  padding-left: 65px;
  width: 75%;
  align-self: center;
  padding-right: 13%;
}

.our-work .list .info .head {
  font-size: 120%;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0 0 1em 0;
  line-height: 1.38;
}

.our-work .list .info .text {
  font-size: 90%;
}


.waves {}

.waves .wave-top {
  background: url(../i/wave-gray-top.svg) center -50px no-repeat;
  background-size: contain;
}

.waves .wave-bottom {
  background: url(../i/wave-gray-bottom.svg) center bottom no-repeat;
  background-size: contain;
}



.contacts {
  background: #f8f8f8;
  position: relative;
}

.contacts .h2-header,
.contacts h2.header {
  z-index: 6;
}

.contacts .two-col {
  display: flex;
  flex-wrap: nowrap;
  padding: 0px 0 0 3.75%
}

.contacts .two-col .col-info {
  width: 46.875%;
  padding: 120px 0 0 0;
  position: relative;
  z-index: 7;
}

.contacts .two-col .col-map {
  width: calc(100% - 46.875%);
  position: relative;
}

.contacts .contact-data {
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  font-size: 90%;
}

.contacts .contact-data h3,
.contacts .contact-data .h3 {
  padding-bottom: 80px;
  text-align: left;
  padding-left: 40px;
  padding-bottom: 50px;
}

.contacts .contact-data .col2-1 {
  width: 50%;
}

.contacts .contact-data .col2-2 {
  width: 50%;
}

.contacts .contact-data .col2-3 {
  width: 100%;
}

.contacts .contact-data .addr {
  font-weight: 500;
  font-size: 120%;
  text-align: center;
  padding-bottom: 30px;
  padding-right: 7%;
}

.contacts .contact-data .human {
  color: var(--url);
  padding-bottom: 1em;
  font-weight: 500;
}

.contacts .contact-data .phone {}

.contacts .contact-data .email {}

.contacts .contact-data li {
  padding-bottom: 60px;
  background: url(../i/dot.svg) left 2px no-repeat;
  background-size: 16px;
  padding-left: 40px;
  position: relative;
}

.contacts .contact-data li:after {
  background-color: var(--url);
  width: 1px;
  height: 100%;
  position: absolute;
  content: "";
  top: 14px;
  left: 7px;
}

.contacts .contact-data li:last-child:after {
  display: none;
}

.contacts .ctrl {
  text-align: center;
  padding-right: 7%;
  padding-bottom: 50px;
}

.contacts .map {
  padding-bottom: 0px;
  position: relative;
  position: relative;
  width: 100%;
  height: 100%;
}

.contacts .map img {
  display: none;
}

.contacts .map .side-map {
  background: #eaeaea;
  border: none;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.contacts .map iframe {
  border: none;
  padding: 0;
  margin: 0;
}

.contacts .rel {
  position: relative;
}

.contacts .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../i/wave-white.svg) center top no-repeat;
  background-size: 100% auto;
  height: 600px;
  z-index: 5;
}

.top-screen {
  position: absolute;
  right: 60px;
  bottom: 60px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(114, 114, 126, 0.5);
  transition: 0.3s;
  z-index: 20;
}

.top-screen:hover {
  cursor: pointer;
  background: rgba(114, 114, 126, 0.75);
}

.top-screen img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.top-screen span {
  display: block;
  font-size: 77.7778%;
  color: var(--white);
  text-align: center;
  padding-top: 5px;
}






.prcnt50 {
  width: 50%;
}


/* Footer */
footer.footer {
  background: #72727E;
  color: var(--white);
  font-weight: 500;
  padding: 50px 0;
  font-size: 95%;
}

footer.footer a {
  color: var(--url);
  text-decoration: none;
  font-weight: 300;
  color: #ddd;
  text-decoration: underline;
}

footer.footer a:hover {
  color: var(--url-hover);
}

footer.footer a.no-link {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  text-decoration: none;
}

footer.footer a.no-link:hover {
  color: var(--url-hover);
}

footer.footer .w-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer.footer .social-links {
  display: block;
}

footer.footer .social-links ul {
  display: flex;
  flex-wrap: nowrap;
}

footer.footer .social-links ul li {
  padding: 0 0 0 2.6042vw;
}

footer.footer .social-links ul li img {
  width: 35px;
  height: 35px;
  display: block;
}

footer.footer .social-links a:hover {
  text-decoration: none;
}

footer.footer .social-links ul li:nth-child(2) {
  display: none !important
}

footer.footer .social-links ul li:nth-child(3) {
  display: none !important
}

footer.footer .social-links ul li:nth-child(4) {
  display: none !important
}

footer.footer .social-links ul li:nth-child(5) {
  display: none !important
}


.fancybox-slide--iframe .fancybox-content {
  max-width: 850px;
}


.lead-form {}

.lead-form .form-header {
  color: #72727E;
  text-align: center;
  font-weight: 500;
  font-size: 144.4444%;
  padding: 0 0 60px 0;
}

.lead-form .field {
  padding: 0 0 35px 0;
}

.lead-form .field .data {}

.lead-form .ctrl {
  text-align: center;
}

.lead-form .ctrl {
  text-align: center;
}

.lead-form .loader {
  width: 50px;
}

.lead-form .done {
  width: 50px;
}

.lead-form .field div.error {
  color: #DD0404;
  font-size: 80%;
  padding: 10px 0 0 0;
}

.lead-form input,
.lead-form textarea,
.lead-form select {
  font: 100% /1.66 'Montserrat', sans-serif;
  color: var(--text);
  font-weight: normal;
  box-sizing: border-box;
  width: 100%;
}

.lead-form input {
  border: none;
  border-bottom: 1px solid #141B41;
  padding: 0 0 12px 0;
}

.lead-form textarea {
  border: none;
  border-bottom: 1px solid #141B41;
  padding: 0 0 12px 0;
  resize: none;
}

.popup {
  position: fixed;
  z-index: 1000;
  display: none;
}

.popup .popup-overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 20, 18, 0.7);
  position: fixed;
}

.popup .popup-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.popup .popup-bg-curve {
  background: #f8f8f8 url(../i/form-curve.png) center top no-repeat;
  background-size: 100% 130px;
}

.popup .popup-content {
  background-color: #fff;
  border-radius: 10px;
  min-width: 400px;
  padding: 40px 60px;
  overflow-y: auto;
}

.popup .close-area {
  position: relative;
  display: none;
}

.popup .close-area .btn-close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  top: -20px;
  right: -40px;
  position: absolute;
}




/*-- inner pages --*/
.service-info {
  padding: 100px 0 110px 0;
}

.service-info .small-line {
  width: 50px;
  background: var(--url);
  height: 2px;
  margin: 0 0 25px auto;
}

.service-info .cols {
  display: flex;
}

.service-info .cols .col-1 {
  width: 50%;
}

.service-info .cols .col-2 {
  width: 50%;
}

.service-info .service-header {
  font-size: 180%;
  font-weight: normal;
  text-align: right;
  padding-right: 17%;
  margin: 13px 0 0 0;
  /* text-transform: uppercase; */
  padding-right: 15vw;
  /*6.77vw;*/
}

.service-info .service-header-lz {
  padding-right: 17vw;
}

.service-info .description {
  font-size: 100%;
  /*133.3333%;*/
  max-width: 600px;
}

.service-info h3,
.service-info .h3 {
  margin: 100px 0;
  font-size: 200%;
}

.linear-flow {}

.linear-flow ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.linear-flow ul li.item {
  max-width: 270px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.linear-flow ul li.item .num {
  position: relative;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  font-size: 200%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: var(--url);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  /* filter: drop-shadow(4px 6px 10px rgba(221, 221, 222, 0.3)); */
  transition: var(--tact);
  margin: 0 auto 35px auto;
}

.linear-flow ul li.item .num-txt {
  position: absolute;
  transition: var(--tact);
  color: var(--url);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(4px 6px 10px rgba(221, 221, 222, 0.3));
}

.linear-flow ul li.item .num-in {
  opacity: 0;
  transition: var(--tact);
  position: absolute;
  color: var(--url);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(4px 6px 10px rgba(221, 221, 222, 0.3));
}

.linear-flow ul li.item .num-in:hover {
  opacity: 1;
  transition: var(--tact);
  color: var(--bg);
  background: linear-gradient(130.17deg, #141B41 15.34%, #191714 83.88%);
}

.linear-flow ul li.item .text {}

.linear-flow ul li.line {
  /* width: 100%; */
  height: 1px;
  background-color: var(--url);
  align-self: flex-start;
  position: relative;
  top: 76px;
}

.linear-flow ul li.one-line {
  width: 100%;
  height: 1px;
  background-color: var(--url);
  align-self: flex-start;
  position: relative;
  top: 63px;
  position: absolute;
  left: 8%;
  width: 84%;
}

/* .linear-flow ul li::before { width:250%; top:32%; border-top:1px solid var(--url); position: absolute; content: ""; z-index:-1} */
/* .linear-flow ul li:last-child::before { border:none} */

.linear-flow-x3 {
  justify-content: space-between;
  max-width: 45.8333vw;
  margin: 0 auto;
}

.linear-flow-x3 ul li::before {
  width: 300%;
  top: 32%;
}


.fix-bg-image {
  background: center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 90vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 7;
}

.fix-bg-image .overlay {
  background-color: var(--url);
  box-shadow: 4px 4px 20px rgba(25, 23, 20, 0.2);
  max-width: 43%;
}

.fix-bg-image .inner {
  padding: 50px 50px;
  color: var(--bg);
}

.fix-bg-image .inner .head {
  font-size: 175%;
  /*200%;*/
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1.25em 0;
  line-height: 1.22;
}

.fix-bg-image .inner .text {
  font-size: 100%;
  /*133.3333%;*/
  /*line-height: 1.25;*/
}

.fix-bg-image .inner .text b {
  font-weight: 500;
}

.fix-bg-image-iphone {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  /* background-image: url('xx.jpg'); */
  /* background-attachment: fixed; */
}

.fix-block {
  position: relative;
}

@supports (-webkit-touch-callout : none) {
  .fix-bg-image {
    background-attachment: scroll;
  }
}

@supports not (-webkit-touch-callout : none) {
  .fix-bg-image {
    background-attachment: fixed;
  }
}



.how-it-do {
  padding: 100px 0;
}

.how-it-do.bg-blue-wave {
  background-size: 100% 290px;
  background-position: 0 340px;
}

.how-it-do.bg-blue-wave {
  background-size: 100% 250px;
  background-position: 0 320px;
}

.how-it-do .w-container {
  padding: 0 9vw;
  /* 0 11.71875vw;*/
}

.how-it-do .header {
  text-align: center;
  font-size: 133.3333%;
  font-weight: 600;
  padding-bottom: 70px;
}

.how-it-do .list {}

.how-it-do .list .item-text {
  display: flex;
  justify-content: center;
  padding: 0 0 50px 0;
}

.how-it-do .list .item-text .num {
  font-size: 444%;
  color: var(--url);
  border-right: 3px solid #141B41;
  padding-right: 20px;
  width: 100px;
  text-align: right;
  line-height: 1;
}

.how-it-do .list .item-text .info {
  padding-left: 30px;
}

.how-it-do .list .item-text .head {
  font-size: 144.4444%;
  text-align: left;
  font-weight: 600;
}

.how-it-do .list .item-text .text {
  font-size: 100%;
  text-align: left;
}

.how-it-do .list-large .item-text {
  max-width: 800px;
  margin: 0 auto;
}

.how-it-do .list-large .item-text .num {
  width: 160px;
  min-width: 160px;
}


.how-it-do .list .item-pics {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 0 0 50px 0;
}

.how-it-do .list .item-pics .pic {
  position: relative;
  width: 276px;
  height: 276px;
  margin: 0 10px;
  width: 14.375vw;
  height: 14.375vw;
}

.how-it-do .list .item-pics .pic .back {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.how-it-do .list .item-pics .pic .front {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--tact);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(128.36deg, #141B41 0%, #191714 104.68%);
}

.how-it-do .list .item-pics .pic:hover .front {
  opacity: 1;
}

.how-it-do .list .item-pics img {
  width: 100%;
  height: 100%;
  display: block;
}

.how-it-do .list .item-head {
  font-size: 133.3333%;
  padding: 0 0 50px 0;
  text-align: center;
}

.how-it-do .list .small-line {
  width: 50px;
  background: var(--url);
  height: 2px;
  margin: 0 auto 10px auto;
}


:root {
  /* --line-len:170px; */
  --line-len: 8.85vw;
  /* --line-pad: 55px; */
  --line-pad: 2.8947vw;
}

.service-plus h3,
.service-plus .h3 {
  margin: 0px 0 10px 0;
  font-size: 150%;
}

.service-plus .w-container {
  padding: 0 10%;
}

.service-plus-pad {
  padding: 50px 0;
}

.service-plus-pad2 {
  padding: 80px 0;
}

.service-plus-pad-t-40 {
  padding-top: 20px;
}

.service-plus-pad-b-40 {
  padding-bottom: 80px;
}

.service-plus .list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
}

.service-plus .list .item {
  width: 33%;
  text-align: left;
  padding: 45px 0 25px 0;
  margin: 0px;
  text-align: center;
}

.service-plus .list .item .pic {
  width: 90px;
  height: 90px;
  margin: 0 auto;
}

.service-plus .list .item .pic img {
  width: 100%;
  height: 100%;
  display: block;
}

.service-plus .list .item .head {
  font-weight: 600;
  text-transform: uppercase;
  padding: 40px 11% 30px 11%;
  font-size: 90%;
}

.service-plus .list .item .text {
  padding: 0 11%;
  font-size: 90%;
}

.service-plus .list .item-v-line-top {
  width: 1px;
  height: var(--line-len);
  background-color: var(--text);
  position: relative;
  /*top: 200px;*/
  align-self: flex-end;
}

.service-plus .list .item-v-line-bottom {
  width: 1px;
  height: var(--line-len);
  background-color: var(--text);
  position: relative;
  /*top: 0px;*/
  align-self: flex-start;
}

.service-plus .list .item-h-line {
  width: 10%;
  height: 1px;
  padding: 0 2.5%;
}

.service-plus .list .item-h-line .in {
  width: auto;
  ;
  height: 1px;
  background-color: var(--text);
  position: relative;
}

.service-plus .list .item-h-line .in svg {
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
}

.service-plus .list .item-space {}

.service-plus .list .item-01 .txt {
  padding-left: 0;
}

.service-plus .list .item-02 .txt {}

.service-plus .list .item-03 .txt {
  padding-right: 0;
}

.service-plus .list .item-04 .txt {
  padding-left: 0;
}

.service-plus .list .item-05 .txt {}

.service-plus .list .item-06 .txt {
  padding-right: 0;
}

.service-plus .list .item-h-01 {
  padding-left: 0;
}

.service-plus .list .item-h-03 {
  padding-right: 0;
}

.service-plus .list-lines {
  margin: 40px 0;
}

.service-plus .list-lines .item {
  padding: 0
}

.service-plus .list .item-h-01 {
  padding: 0 var(--line-pad) 0 0;
  margin: 0 0 0 auto;
  max-width: var(--line-len);
  width: 100%;
}

.service-plus .list .item-h-02 {
  padding: 0 0 0 var(--line-pad);
  margin: 0 auto 0 0;
  max-width: var(--line-len);
  width: 100%;
}

.service-plus .list .item-h-03 {
  padding: 0 var(--line-pad) 0 0;
  margin: 0 0 0 auto;
  max-width: var(--line-len);
  width: 100%;
  top: -1px;
  position: relative;
}

.service-plus .list .item-h-04 {
  padding: 0 0 0 var(--line-pad);
  margin: 0 auto 0 0;
  max-width: var(--line-len);
  width: 100%;
}


.lead-area {
  padding: 130px 0 70px 0;
  background: #F8F8F8;
  position: relative;
}

.lead-area .w-container {
  padding: 0 10.4% 0 10.4%;
}

.lead-area .scroll-line-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: -1em;
}

.lead-area .scroll-line {
  font-size: 200%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

.lead-area .scroll-line span {
  display: inline-block;
  padding-right: 50px
}

.lead-area .area {
  position: relative;
  display: flex;
}

.lead-area .area .block-1 {
  width: 50%;
  background: #DDDDDE;
  z-index: 7;
}

.lead-area .area .block-1-inner {
  padding: 60px 70px;
}

.lead-area .area .block-2 {
  width: 55%;
  background: center center no-repeat;
  background-size: cover;
  height: 100%;
  top: -100px;
  position: absolute;
  right: 0;
  z-index: 5;
}

.lead-area .area .head {
  font-weight: 600;
  font-size: 200%;
  line-height: 1em;
  padding-bottom: 20px;
}

.lead-area .area .sub-head {
  padding-bottom: 35px;
}

.lead-area .area .text {
  padding-bottom: 60px;
}

.lead-area .area .ctrl {}

.lead-area .area .bg-laser-rezka {
  background-image: url(../i/lazer-rezka-lead.jpg);
}

.lead-area .area .bg-gravirovka-rezka {
  background-image: url(../i/lazer-gravirovka-lead.jpg);
}

.lead-area .area .bg-shelkograf {
  background-image: url(../i/shelkograf-lead.jpg);
}


.lead-area .scroll-line {
  white-space: nowrap;
  animation: floatText 25s infinite linear;
}

.lead-area .scroll-line {
  animation-delay: 1s;
}

@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}

.service-info-timeline {
  padding-bottom: 50px;
  overflow: hidden;
}

.service-info-timeline .cols .col-1 {
  width: 41%;
  /*35%;*/
}

.service-info-timeline .cols .col-2 {
  width: 59%;
  /*65%;*/
}

.service-info-timeline .header {
  margin: 0 0 50px 0;
}

.service-info .service-header-small {
  font-size: 146%;
  /*166.6666%;*/
}

.service-info .service-header-w-timeline {
  padding-right: 6.77vw;
  max-width: 27.5vw;
  margin-left: auto;
}

:root {
  --tl-bull-size: 50px;
  --tl-bull-half: 25px;
}

.time-line-vert {}

.time-line-vert ul {}

.time-line-vert ul li {
  display: flex;
  align-items: flex-start;
  padding-bottom: 120px;
  position: relative;
}

.time-line-vert ul li .dot {
  width: var(--tl-bull-size);
  min-width: var(--tl-bull-size);
  min-height: var(--tl-bull-size);
  background: url(../i/circle.svg) center center no-repeat;
  background-size: var(--tl-bull-size) var(--tl-bull-size);
  position: relative;
  z-index: 5;
  margin-right: 2vw;
}

.time-line-vert ul li .head {
  width: 22.9vw;
  /* padding-right: 5%;*/
  height: 3em;
  font-weight: 600;
  font-size: 100%;
  align-items: center;
  display: flex;
}

.time-line-vert ul li .text {
  width: 23.4vw;
  font-size: 100%;
  padding-top: 0.65em;
}

.time-line-vert ul li .text-2l {
  padding-top: 0;
  position: relative;
  top: -2px;
}

.time-line-vert ul li:after {
  width: 1px;
  background-color: var(--url);
  height: 120%;
  top: 20px;
  left: var(--tl-bull-half);
  position: absolute;
  content: "";
  z-index: 2;
}


.blue-block {
  padding: 100px 0;
  background: linear-gradient(180deg, rgba(223, 235, 244, 0.5) 0%, rgba(174, 202, 214, 0.5) 100%);
}

.blue-block .header {
  font-size: 200%;
  font-weight: 600;
  padding: 0 0 30px 0;
  text-align: center;
  letter-spacing: 0.1em;
}

.blue-block .text {
  font-size: 133.3333%;
  max-width: 730px;
  margin: 0 auto;
  text-align: center;
}


.sub-header {
  font-size: 133.3333%;
  font-weight: normal;
  text-align: center;
  padding-bottom: 50px;
}

.sub-header .small-line {
  width: 50px;
  background: var(--url);
  height: 2px;
  margin: 0 auto 30px auto;
}

.sub-header-slim {
  max-width: 600px;
  margin: 0 auto;
}

.sub-header-mid {
  max-width: 750px;
  margin: 0 auto;
}



.all-services {
  background: #f8f8f8 url(../i/services-list-bg.svg) center center no-repeat;
  min-height: calc(100vh);
  background-size: cover;
  position: relative;
}

.all-services .h2-header,
.all-services h2.header {
  font-size: 730%;
}

.all-services .h2-header span.text-top,
.all-services h2.header span.text-top {
  color: #e0e0e0;
  opacity: 0.5;
}

.all-services .upper-size {
  padding-top: calc(var(--header-h) + 150px);
}

.all-services .finder-area {
  padding: 90px 0 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.all-services .finder-area .finder {
  max-width: 330px;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid #DDDDDE;
  box-sizing: border-box;
  border-radius: 35px;
  display: flex;
  width: 100%;
}

.all-services .finder-area .finder img {
  width: 22px;
  height: auto;
  padding-right: 20px;
}

.all-services .finder-area .finder input {
  border: none;
  font: 100% /1.66 'Montserrat', sans-serif;
  color: var(--text);
  font-weight: normal;
  box-sizing: border-box;
  width: 100%;
}

.all-services .list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12.5% 0px 12.5%;
  margin-bottom: 35px;
}

.all-services .list .item {
  width: 33.3333%;
}

.all-services .list .item-inner {
  transform: scale(0.95);
  /* max-width: 470px; max-height: 400px;  */
  /* width: 100vw; height: 100vh; */
  margin: 0 20px 50px 20px;

  /* aspect-ratio: 470 / 390; */
  width: calc(100% - 6.3%);
  height: 19.5vw;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 4px 4px 10px rgba(114, 114, 126, 0.2);
  border-radius: 8px;
  transition: var(--tact);
}

.all-services .list .item .pic {
  padding: 0 0 20px 0;
}

.all-services .list .item .pic img {
  max-width: 62px;
  max-height: 62px;
}

.all-services .list .item .text {
  font-weight: 500;
  font-size: 111.1111%;
  text-align: center;
  text-transform: uppercase;
}

.all-services .list .item-inner:hover {
  background: linear-gradient(128.36deg, #141B41 0%, #191714 104.68%);
  box-shadow: 4px 4px 10px rgba(114, 114, 126, 0.2);
  transform: scale(1.05);
}

.all-services .list .item-inner:hover .pic img {
  filter: brightness(3);
}

.all-services .list .item-inner:hover .text {
  color: var(--bg);
}

.all-services .list-empty {
  display: none;
  font-size: 144.4444%;
  text-align: center;
  font-weight: 500;
}

.all-services .list {
  position: relative;
}

.all-services .position-scroll {
  position: absolute;
  width: auto;
  height: 100%;
  left: 3.75%
}

.all-services .position-scroll .bullets {
  height: 19.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 50px;
}

.all-services .position-scroll .bullets .bull-0 {
  margin: 8px 0;
  width: 20px;
  height: 20px;
  background: url("../i/bullet2-off.svg") center center no-repeat;
  background-size: contain;
  z-index: 4;
  position: relative;
  cursor: pointer;
}

.all-services .position-scroll .bullets .bull-1 {
  margin: 8px 0;
  width: 20px;
  height: 20px;
  background: url("../i/bullet2.svg") center center no-repeat;
  background-size: contain;
  z-index: 4;
  position: relative;
}

.all-services .position-scroll .one-line {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: 100%;
  position: absolute;
}

.all-services .position-scroll .line {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: 50%;
  top: -25%;
  position: absolute;
}

.all-services .position-scroll .line-x {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: calc(19.5vw / 2);
  top: 16vw;
  position: absolute;
}

.all-services .position-scroll .line-x2 {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: calc(19.5vw / 2);
  top: calc(19.5vw + 50px + 16vw);
  position: absolute;
}

.all-services .position-scroll-lines {
  position: absolute;
  width: auto;
  height: 100%;
  left: 3.75%
}

.all-services .position-scroll-lines .line {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: 50%;
  top: 0;
  position: absolute;
  height: 12.5vw;
  margin-top: 15vw;
}

.all-services .position-scroll-lines .line-2 {
  left: 9px;
  background-color: var(--url);
  width: 1px;
  height: 50%;
  top: 0;
  position: absolute;
  height: 12.5vw;
  margin-top: 37vw;
}



.bg-blue-gradient {
  background: url(../i/bg-blue-gradient.png) center bottom repeat-x;
}

.bg-blue-wave {
  background: url(../i/wave-blue.png) center top no-repeat;
}

.bg-uf-pechat {
  background: url(../i/uf-pechat-lead.jpg) center top no-repeat !important;
}

.bg-frezer {
  background: url(../i/frezer-lead.jpg) left bottom no-repeat !important;
  background-size: cover !important;
}

.bg-pos {
  background: url(../i/pos-lead.jpg) right bottom no-repeat !important;
  background-size: cover !important;
}

.bg-cennik {
  background: url(../i/cennik-lead.jpg) center top no-repeat !important;
}

.bg-torg-oborud {
  background: url(../i/torg-oborud-lead.jpg) right top no-repeat !important;
  background-size: cover !important;
}



.e404 {
  min-height: calc(100vh - var(--header-h) - var(--footer-h) + 20px - 250px);
  padding-top: var(--header-h);
  text-align: center;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center;  */
  /* flex-direction: column; */
  background: #f8f8f8;
  padding-top: 250px;
}

.e404 .bg {
  padding-top: 0px;
  width: 100%;
  height: calc(100vh - var(--header-h) - 250px);
  background: url(../i/bg-404.svg) center -20px no-repeat;
  /*background-size: cover;*/
}

.e404 .h2-header span.text-top,
.e404 h2.header span.text-top {
  color: #e0e0e0;
  opacity: 0.5;
}

.e404 .upper-side {
  ;
}

.e404 .central-side {
  padding-top: 80px;
}

.e404 .central-side .head {
  font-size: 200%;
  text-transform: uppercase;
  padding-bottom: 40px;
}

.e404 .central-side .text {
  font-size: 144%;
  padding-bottom: 50px;
}

.e503 {
  height: 100vh;
  /*padding-top:calc(var(--header-h) / 2);*/
  padding-top: 250px;
  padding-left: 2%;
  padding-right: 2%;
}


.line-container {}

.line-container-h {
  width: auto;
  height: 1px;
}

.line-container .line,
.line-container .subline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  margin: auto;
}

.line-container .line {
  border-left: 1px solid #72727E;
  transform: scaleY(1);
}

.line-container .subline {
  transform: scale(1, 0);
  transform-origin: 0% 100%;
}

.line-container .subline:nth-child(2) {
  border-left: 1px solid #d6e4ea;
  animation: translining3 2.5s ease-in-out infinite;
  animation-delay: 0.7s;
}

.line-container .subline:nth-child(3) {
  border-left: 1px solid #b0c9e4;
  animation: translining2 2.5s ease-in-out infinite;
  animation-delay: 0.35s;
}

.line-container .subline:nth-child(4) {
  border-left: 1px solid #72727E;
  animation: translining1 2.5s ease-in-out infinite;
  animation-delay: 0s;
}

@keyframes translining3 {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  20% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  60% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }
}

@keyframes translining2 {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  30% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  70% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }
}

@keyframes translining1 {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  40% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.999);
    transform-origin: 0% 100%;
  }

  80% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(1, 0.001);
    transform-origin: 0% 100%;
  }
}



.line-container-h {
  width: 200px;
  height: 1px;
  /*position:absolute; top:50px; left:50px;     bottom: auto;
right: auto; */
}

.line-container-h .line,
.line-container-h .subline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  margin: auto;
}

.line-container-h .line {
  border-top: 1px solid #72727E;
  transform: scaleY(1);
}

.line-container-h .subline {
  transform: scale(1, 0);
  transform-origin: 0% 100%;
}

.line-container-h .subline:nth-child(2) {
  border-top: 1px solid #d6e4ea;
  animation: translining3-h-rl 2.5s ease-in-out infinite;
  animation-delay: 0.7s;
}

.line-container-h .subline:nth-child(3) {
  border-top: 1px solid #b0c9e4;
  animation: translining2-h-rl 2.5s ease-in-out infinite;
  animation-delay: 0.35s;
}

.line-container-h .subline:nth-child(4) {
  border-top: 1px solid #72727E;
  animation: translining1-h-rl 2.5s ease-in-out infinite;
  animation-delay: 0s;
}

@keyframes translining1-h-rl {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  40% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  80% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }
}

@keyframes translining2-h-rl {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  30% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  70% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }
}

@keyframes translining3-h-rl {
  0% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  20% {
    transform: translate3d(0px, 0px, 0px) scale(0.999, 1);
    transform-origin: 0% 0%;
  }

  60% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale(0.001, 1);
    transform-origin: 0% 0%;
  }
}


.line-container-h-lr .subline:nth-child(2) {
  border-top: 1px solid #d6e4ea;
  animation: translining3-h-lr 2.5s ease-in-out infinite;
  animation-delay: 0.7s;
}

.line-container-h-lr .subline:nth-child(3) {
  border-top: 1px solid #b0c9e4;
  animation: translining2-h-lr 2.5s ease-in-out infinite;
  animation-delay: 0.35s;
}

.line-container-h-lr .subline:nth-child(4) {
  border-top: 1px solid #72727E;
  animation: translining1-h-lr 2.5s ease-in-out infinite;
  animation-delay: 0s;
}


@keyframes translining1-h-lr {
  0% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  40% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  80% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }
}

@keyframes translining2-h-lr {
  0% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  30% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  70% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }
}

@keyframes translining3-h-lr {
  0% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  20% {
    transform: translate3d(100%, 0px, 0px) scale(-0.999, 1);
    transform-origin: 0% 0%;
  }

  60% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }

  100% {
    transform: translate3d(100%, 0px, 0px) scale(-0.001, 1);
    transform-origin: 0% 0%;
  }
}




/*--- MEDIA ---*/



/* --- w 1920: Desktop --- */
@media screen and (max-width:1920px) {
  .advantages .list-2 .item {
    padding: 0 0 0 2.5%;
  }

  .advantages .list .item .head {
    font-size: 0.83vw;
  }

  .advantages .list .item .text {
    font-size: 0.83vw;
  }

  .top-screen-inner {
    bottom: 15px;
  }
}


@media screen and (max-width:1800px) {

  .team .list .item .head {
    font-size: 180%;
  }

  .team .list .item .job-pos {
    font-size: 120%;
  }

  .team .list .item .pic {
    width: 360px;
    height: 430px;
  }

  .team .list .item .head {
    width: 360px;
  }

  .team .list .item .job-pos {
    width: 360px;
  }

  .linear-flow ul li::before {
    width: 250%;
  }

  .linear-flow-x3 ul li::before {
    width: 300%;
  }
}


@media screen and (max-width:1700px) {
  header.header .main ul.lang {
    padding-left: 4.4167vw;
  }
}

@media screen and (max-width:1600px) {
  header.header .main ul.nav li {
    padding-left: 2.5vw;
  }

  header.header .main ul.lang {
    padding-left: 2.5vw;
  }

  .linear-flow ul li.item .num {
    width: 96px;
    height: 96px;
    font-size: 140%;
  }

  .linear-flow ul li.one-line {
    top: 48px;
  }
}

/* --- w 1366: Notebook/netbook --- */
@media screen and (max-width:1440px) {
  header.header .main ul.nav li {
    padding-left: 2.0vw;
  }

  header.header .main ul.lang {
    padding-left: 2.0vw;
  }

  body {
    font-size: 16px
  }

  .team .list .item .pic {
    width: 300px;
    height: 400px;
  }

  .team .list .item .head {
    letter-spacing: 0;
  }

  .team .list .item .head {
    width: 300px;
  }

  .team .list .item .job-pos {
    width: 300px;
  }

  .services .list .item .head {
    height: 140px;
  }

  .linear-flow ul li .num {
    width: 100px;
    height: 100px;
  }

  .linear-flow ul li::before {
    width: 200%;
  }

  .linear-flow-x3 ul li::before {
    width: 400%;
  }

  .linear-flow-x3 {
    max-width: 55vw;
  }

  .all-services .upper-size {
    padding-top: calc(var(--header-h) + 80px);
  }

  .how-it-do.bg-blue-wave {
    background-size: 100% 190px;
    background-position: 0 290px;
  }

}



@media screen and (max-width:1200px) {

  /* nav to hamburger */
  header.header .main {
    display: none;
  }

  header.header .nav-hamburger {
    display: block;
  }

  body {
    font-size: 14px
  }

  .plate-list .list .item img {
    max-width: 200px;
  }

  /* .services .list .item .pic { width:100%;     max-width:430px; height: 330px;}
  .services .list .item .head { height: 140px; max-width:430px; } */

  .contacts .contact-data li {
    padding-left: 30px;
  }

  .lead-area .w-container {
    padding: 0 3.75% 0 3.75%;
  }

  .time-line-vert ul li .dot {
    margin-right: 20px;
  }

  .time-line-vert ul li {
    display: flex;
    align-items: flex-start;
    padding-bottom: 80px;
  }

  .services .list .item .head {
    height: 130px;
  }

  .samples .list .item .pic {
    height: 37.7vw;
  }

  .next-screen {
    width: 80px;
    height: 80px;
  }

  .next-screen img {
    height: 35px;
  }

  .top-screen {
    width: 80px;
    height: 80px;
  }

  .top-screen img {
    height: 35px;
  }

  .how-it-do .list-large .item-text {
    max-width: 740px;
  }
}


@media screen and (max-width:1100px) {

  .h2-header,
  h2.header {
    font-size: 900%;
  }

  .our-work .list .info {
    padding-left: 50px;
  }

  .portfolio {
    background-position: center 270px;
  }

  .portfolio .list .item {
    height: 500px;
    width: 90%;
    margin: 0 auto;
    height: 60vw;
  }

  .our-work .h2-header,
  .our-work h2.header {
    font-size: 700%;
  }

  .linear-flow-x3 {
    max-width: 70vw;
  }

}


/* --- w 768: Tablet --- */
/* - mobile nav starts here - */
@media screen and (max-width:1000px) {
  :root {}

  .intro .next-screen {
    display: none;
  }

  .intro .video-volume {
    width: 80px;
    height: 80px;
  }

  /* .top-screen { display: none; } */

  .advantages {
    background: url(../i/advantages-bg-white.svg) center 0px no-repeat;
    background-size: cover;
    padding: 0
  }

  .advantages {
    height: auto;
    background: url(../i/arc-wave.svg) center top no-repeat;
    background-size: 250%;
  }

  .advantages-in {
    padding-top: 8.16vw;
  }

  .advantages .list {
    padding-left: 0;
    justify-content: space-around;
  }

  .advantages .list-2 {
    padding-right: 0;
    justify-content: space-around;
    padding-top: 0;
  }

  .advantages .list .item,
  .advantages .list-2 .item {
    width: 50%;
    padding: 0 0 70px 0;
  }

  .advantages .list .item .circles {
    opacity: 1;
  }

  .advantages .list .item .head {
    font-size: inherit;
  }

  .advantages .list .item .text {
    font-size: inherit;
  }

  .advantages {
    height: auto;
  }

  .advantages .list .item {
    height: auto;
  }


  .plate-list .list .item img {
    max-width: 180px;
  }

  .our-work .h2-header {
    padding-bottom: 90px;
  }

  .contacts .two-col {
    flex-direction: column;
    padding: 0px 3.75% 0 3.75%;
  }

  .contacts .two-col .col-info {
    width: 100%;
  }

  .contacts .two-col .col-map {
    width: 100%;
  }

  .contacts .map {
    height: 500px;
    margin-bottom: 40px;
  }

  .contacts .contact-data .addr {
    padding-right: 0;
  }

  .contacts .ctrl {
    padding-right: 0;
  }

  .services .list .item .head .btn-cta {
    padding: 10px 15px;
  }

  .services .list .item .head {
    height: 100px;
    top: -30px;
  }

  .services .ctrl .prev,
  .services .ctrl .next {
    max-width: 45px;
  }

  .services .list .item {
    width: 100%;
  }

  /* .services .list .item:nth-child(2n) { display: none } */
  .services .list .swiper-slide {
    width: 70vw;
  }

  .services .list .item .pic {
    height: 40vw;
  }

  .services .swiper-area-x2,
  .services .ctrl-x2,
  .services .bullets-x2 {
    display: none
  }

  .services .swiper-area-x1 {
    display: block;
  }

  .services .ctrl-x1 {
    display: flex;
  }

  .services .bullets-x1 {
    display: flex;
  }



  .service-info h3,
  .service-info .h3 {
    margin: 50px 0 0 0
  }

  .service-info {
    padding-bottom: 40px
  }

  .linear-flow ul {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
    max-width: 350px;
  }

  .linear-flow ul li.item {
    display: flex;
    max-width: 410px;
    align-items: center;
    margin: 0 0 60px 0;
  }

  .linear-flow ul li.item .num {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    margin-bottom: 0;
  }

  .linear-flow ul li.item::before {
    border: none;
    border-left: 1px solid var(--url);
    width: 1px;
    height: 120%;
    top: 50%;
    left: 50px;
    content: "";
    position: absolute;
  }

  .linear-flow ul li.item:last-child::before {
    display: none;
  }

  .linear-flow ul li.item .text {
    font-size: 133.3333%;
    text-align: left;
    padding-left: 40px;
  }

  .linear-flow ul li.item {
    max-width: 350px;
  }

  .linear-flow ul li.one-line {
    display: none;
    height: 100%;
    width: 1px;
  }

  .fix-bg-image .inner {
    padding: 40px 40px;
  }

  .all-services .upper-size {
    padding-top: calc(var(--header-h) + 50px);
  }

  .all-services .list .item {
    width: 50%;
  }

  .all-services .list .item .pic img {
    max-width: 52px;
    max-height: 52px;
  }

  .all-services .list .item-inner {
    width: calc(100% - 10.5%);
    height: 27.7vw;
  }

  .position-scroll {
    display: none;
  }

  .next-screen {
    width: 70px;
    height: 70px;
  }

  .next-screen img {
    height: 30px;
  }

  .top-screen {
    width: 70px;
    height: 70px;
    right: 3.75%;
  }

  .top-screen img {
    height: 30px;
  }


  .blue-block {
    padding: 70px 0;
    margin-bottom: 40px;
  }

  .samples {
    padding-top: 0px;
  }

  .how-it-do .w-container {
    padding: 0 5vw;
  }
}


@media screen and (max-width:900px) {
  .about .list .item .text {
    max-width: 80%;
  }

  .h2-header,
  h2.header {
    font-size: 850%;
  }

  .services .ctrl-more {
    padding: 0 0 90px 0;
  }

  .service-plus h3,
  .service-plus .h3 {
    margin: 0px 0 40px 0;
  }

  .service-plus .list {
    flex-direction: column;
  }

  .service-plus .list .item {
    padding: 0 0 50px 0;
    width: 80%;
    margin: 0 auto;
  }

  .service-plus .list .item-v-line-top,
  .service-plus .list .item-v-line-bottom {
    display: none
  }

  .service-plus .list-lines {
    display: none
  }

  .lead-area .area .block-1-inner {
    padding: 40px 40px;
  }

  .lead-area .area .block-1 {
    width: 60%;
  }

  .service-info-timeline .cols {
    flex-direction: column;
  }

  .service-info-timeline .cols .col-1 {
    width: 100%;
  }

  .service-info-timeline .cols .col-2 {
    width: 100%;
  }

  .service-info-timeline .service-header {
    text-align: center;
    padding-right: 0;
  }

  .service-info-timeline .small-line {
    margin-left: auto;
    margin-right: auto;
  }

  .service-info-timeline .service-header {
    padding-bottom: 50px;
  }

  .service-info .service-header-w-timeline {
    max-width: none;
  }

  .time-line-vert ul li {
    width: calc(var(--tl-bull-size) + 20px + 30vw + 45vw);
    margin: 0 auto;
  }

  .time-line-vert ul li .head {
    width: 30vw;
    padding-right: 3vw;
  }

  .time-line-vert ul li .text {
    width: 45vw;
  }

}


@media screen and (max-width:800px) {
  .about .list .item .head {
    margin-right: 20%;
  }

  .about .list .item .text {
    max-width: 90%;
  }

  .advantages .list .item .circles {
    width: 50px;
    height: 50px;
  }

  .h2-header,
  h2.header {
    font-size: 800%;
  }

  .fix-bg-image .overlay {
    max-width: 60%;
  }

  .how-it-do.bg-blue-wave {
    background-size: 100% 160px;
    background-position: 0 250px;
  }

  .popup .close-area {
    position: relative;
    display: block;
  }

}


/* --- iPad / Tablet width --- */
@media screen and (max-width:769px) {
  .intro .video-volume {
    width: 70px;
    height: 70px;
  }

  footer.footer .w-container {
    flex-direction: column;
    text-align: center;
  }

  footer.footer .info {
    padding-bottom: 2em;
  }

  .plate-list .list .item {
    width: 100%;
  }

  /* .plate-list .list .item img { max-width: 200px; } */

  .h2-header,
  h2.header {
    font-size: 600%;
  }

  .our-work .list .num {
    font-size: 670%;
  }

  .portfolio .h2-header,
  .portfolio h2.header {
    padding-bottom: 60px;
  }

  .service-plus h3,
  .service-plus .h3 {
    margin-bottom: 0;
  }

  .lead-area .area .block-1 {
    width: 66%;
  }

  .samples .list .item .pic {
    height: 75.8vw;
  }

  .service-plus-pad2 {
    padding: 80px 0 25px 0;
  }

  .service-plus-pad-t-40 {
    padding-top: 40px;
  }

  .service-plus-pad-b-40 {
    padding-bottom: 20px;
  }
}


@media screen and (max-width:700px) {
  .prcnt50 {
    width: 100%;
  }

  .about .list .item {
    display: flex;
    width: 100%;
    flex-direction: column;
  }

  .about .list .item .head {
    margin-right: 0;
    text-align: center;
    padding-bottom: 20px;
  }

  .about .list .item .text {
    max-width: 100%;
    text-align: center;
  }

  .about .list .item .head::before {
    right: calc(50% - 25px);
  }

  .about .list .item .text {
    padding: 0 15px 50px 15px;
  }

  .advantages .list .item,
  .advantages .list-2 .item {
    width: 100%;
    padding: 0 0 50px 0;
  }

  .popup .popup-bg-curve {
    background-size: 100% 100px;
  }

  .popup .popup-content {
    width: 100%;
    min-width: auto;
    padding: 30px 30px;
  }

  .team .h2-header {
    margin-bottom: 65px;
  }

  .team .ctrl {
    top: -12px;
  }

  .team .list {
    padding-bottom: 60px;
  }

  .services .swiper-area {
    padding-top: 50px;
  }

  .services .ctrl-more {
    padding-bottom: 80px;
  }

  .services .ctrl {
    padding-top: 30px;
  }

  .service-info .cols {
    flex-direction: column;
  }

  .service-info .cols .col-1,
  .service-info .cols .col-2 {
    width: 100%;
  }

  .service-info .small-line {
    margin-left: auto;
    margin-right: auto;
  }

  .service-info .service-header {
    text-align: center;
    padding-right: 0;
    padding-bottom: 40px;
  }

  .service-info .description {
    text-align: center;
  }

  .how-it-do .list .item-pics {
    flex-direction: column;
  }

  .how-it-do .list .item-pics .pic {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
  }

  .lead-area .area .block-1 {
    width: 75%;
  }

  .lead-area .area .block-1-inner {
    padding: 30px 30px;
  }

  .all-services .upper-size {
    padding-top: calc(var(--header-h) + 50px);
  }

  .all-services .finder-area .finder {
    max-width: 280px;
  }

  .all-services .list .item {
    width: 100%;
    margin: 0 auto;
    max-width: 300px;
  }

  .all-services .list .item .pic img {
    max-width: 40px;
    max-height: 40px;
  }

  .all-services .finder-area {
    padding: 60px 0 30px 0;
  }

  .all-services .list .item-inner {
    width: calc(100% - 13.5%);
    min-width: 200px;
    min-height: 165px;
    height: 30.8vw;
  }

  .our-work .h2-header,
  .our-work h2.header {
    font-size: 500%;
  }

  .our-work .desc {
    padding: 30px 4% 0px 4%;
  }

  .our-work h3,
  .our-work .h3 {
    padding: 50px 4% 40px 4%;
  }

  .popup .close-area {
    display: block;
  }

  .popup .close-area .btn-close {
    top: 0px;
    right: 0px;
    position: absolute;
  }

  .samples {
    padding-bottom: 0
  }

  .samples .list {
    padding-bottom: 0
  }

  .how-it-do {
    padding-bottom: 20px;
  }

  .samples .ctrl .prev,
  .samples .ctrl .next {
    max-width: 40px;
  }

  .samples .header {
    margin-bottom: 40px;
  }

  .service-info {
    padding-top: 0;
  }

  .service-info-timeline .header {
    margin-bottom: 0;
  }

  .blue-block {
    padding: 60px 5%;
    margin-bottom: 30px;
  }

  .linear-flow ul li.item:last-child {
    margin-bottom: 20px
  }

}


@media screen and (max-width:670px) {

  .intro .h1-header {
    padding: 22.5vh 0;
  }

  .h2-header,
  h2.header {
    font-size: 500%;
  }

  /* .services .list .item .pic { width:100%;     max-width:400px; height: 300px;}
  .services .list .item .head { height: 140px; max-width:400px; } */

  :root {
    --tl-bull-size: 36px;
    --tl-bull-half: 18px;
  }

  .time-line-vert ul li {
    flex-wrap: wrap;
    padding-bottom: 40px;
  }

  .time-line-vert ul li .dot {
    position: relative;
    top: 3px;
  }

  .time-line-vert ul li {
    width: calc(var(--tl-bull-size) + 20px + 45vw);
    margin: 0 auto;
  }

  .time-line-vert ul li .head {
    /*width: 30vw;*/
    width: calc(80% - 20px - var(--tl-bull-size));
    padding-right: 3vw;
    height: auto;
    padding-top: 12px;
  }

  .time-line-vert ul li .text {
    width: 45vw;
    padding-top: 0;
    padding-left: calc(var(--tl-bull-size) + 20px);
  }

  .time-line-vert ul li .head {
    padding-bottom: 1em;
  }

  /* .time-line-vert ul li { flex-direction: column; align-items: center; }
  .time-line-vert ul li::after { background: transparent; }
  .time-line-vert ul li .dot { min-width: 40px; min-height: 40px; background-size: 40px 40px; }
  .time-line-vert ul li .head { width:100%; padding: 20px 0 20px 0; height: auto;  text-align: center; display: block;}
  .time-line-vert ul li .text { width:100%; text-align: center; max-width: 90%;} */
}


/* --- w 360: Mobile --- */
@media screen and (max-width:576px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  :root {
    --header-h: 60px;
  }

  body {
    font: 12px/1.5 'Montserrat', sans-serif;
  }

  header.header .logo {
    width: 80px;
    height: 41px;
  }

  .humburger .long-line {
    width: 40px;
  }

  .humburger .short-line {
    width: 40px;
    margin: 10px 0 10px 0px;
  }

  .humburger.opened .long-line:nth-child(1) {
    transform: matrix(-0.91, 0.91, -0.27, -0.8, 0, 12);
  }

  .humburger.opened .long-line:nth-child(3) {
    transform: matrix(-0.91, -0.91, 0.27, -0.8, 0, -12);
  }

  .popup-nav .header .logo {
    max-width: 85px;
  }

  .popup-nav .header {
    padding-top: 1.0em;
  }


  .intro .video-volume {
    width: 50px;
    height: 50px;
  }

  .intro .h1-header {
    font-size: 280%;
  }

  .intro .h1-header {
    padding: 20vh 0;
  }

  .our-work .list .info {
    padding-left: 30px;
  }

  .our-work .list .item {
    height: 150px;
  }

  .our-work .list .info .head {
    padding-bottom: 20px;
  }

  .our-work .list .item {
    margin-bottom: 40px;
  }

  .our-work .h2-header {
    padding-bottom: 50px;
  }

  .our-work .h2-header,
  .our-work h2.header {
    font-size: 380%;
  }


  .portfolio .list .item {
    height: 400px;
  }

  .contacts .contact-data .col2-1,
  .contacts .contact-data .col2-2 {
    width: 100%;
  }

  .linear-flow ul li .num {
    width: 50px;
    height: 50px;
  }

  .fix-bg-image .inner .head {
    font-size: 150%;
  }

  .fix-bg-image .overlay {
    max-width: 80%;
  }

  .service-plus .list .item .pic {
    width: 70px;
    height: 70px;
  }

  .service-plus .list .item {
    width: 100%;
  }

  .lead-area .area .block-1 {
    width: 85%;
  }

  .lead-area .area .block-1-inner {
    padding: 20px 20px;
  }

  .lead-area .area .sub-head {
    padding-bottom: 25px;
  }

  .lead-area .area .text {
    padding-bottom: 30px;
  }

  .lead-area .area .block-2 {
    top: -65px
  }

  .e404 .central-side {
    padding-top: 40px;
  }

  .e503 {
    padding-top: 150px;
  }

  .fix-bg-image .inner {
    padding: 20px 20px;
  }

  .samples .side-step {
    top: -43px;
  }

  .service-plus-pad {
    padding: 50px 0 0 0;
  }

  .time-line-vert ul li {
    width: 90vw;
  }

  .time-line-vert ul li .text {
    width: 100%;
  }

  .how-it-do .list-large .item-text .num {
    width: 100px;
    min-width: 100px;
  }

  .services .ctrl {
    padding-top: 20px;
  }

  .services .swiper-area {
    padding-top: 40px;
  }

  .services .list .item .head .str {
    letter-spacing: 0;
    font-size: 85%;
  }

  .services .list .item .head .btn-cta {
    padding: 8px 10px;
  }

  .services .bullets ul li {
    padding: 0 7px;
  }

  .lead-area {
    padding: 30px 0 30px 0;
  }

  .lead-area .area {
    flex-direction: column-reverse;
  }

  .lead-area .area .block-1 {
    width: 100%;
    position: relative;
  }

  .lead-area .area .block-2 {
    width: 100%;
    position: relative;
    height: 270px;
    top: 0;
  }
}


@media screen and (max-width:470px) {

  .h2-header,
  h2.header {
    font-size: 400%;
  }

  .intro .h1-header {
    font-size: 250%;
  }

  .our-work .list .num {
    font-size: 500%;
  }

  /* .services .list .item .pic { width:100%;     max-width:340px; height: 260px;}
  .services .list .item .head { height: 140px; max-width:340px; } */
  .services .list .item .head .str {
    letter-spacing: 0;
    font-size: 70%;
  }

  .services .list .item .head .btn-cta {
    padding: 6px 8px;
  }

  .services .bullets ul li {
    padding: 0 5px;
  }
}


@media screen and (max-width:450px) {
  .portfolio .list .item {
    height: 320px;
  }
}


@media screen and (max-width:375px) {
  /* .services .list .item .pic { width:100%;     max-width:none; height: 220px;}
  .services .list .item .head { height: 140px; max-width:none; } */
}


@media screen and (max-width:360px) {
  .intro .h1-header {
    font-size: 200%;
  }

  .services .list .item .head {
    flex-direction: column;
    justify-content: space-evenly;
  }
}


@media screen and (max-width:320px) {}


/*--- MEDIA by HEIGHT ---*/

@media screen and (orientation: landscape) and (max-height: 420px) and (min-aspect-ratio: 13/9) {
  :root {
    --header-h: 50px;
  }

  .intro-bottom-side {
    height: calc(100vh);
  }

  .intro .h1-header {
    padding: 11.5vh 0;
    line-height: 1.1;
    font-size: 270%;
  }

  header.header .logo {
    height: 40px;
  }

  header.header .logo img {
    height: 40px;
    width: auto;
  }
}





.links ul {
  display: flex;
  gap: 20px;
}

@media(max-width:768px) {
  .links ul {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-bottom: 20px;
  }

}





body #bingc-phone-button svg.bingc-phone-button-circle
circle.bingc-phone-button-circle-inside {
fill: #29225c !important;
}
body #bingc-phone-button:hover svg.bingc-phone-button-circle
circle.bingc-phone-button-circle-inside {
fill: #29225c !important;
}


body #bingc-phone-button div.bingc-phone-button-tooltip
{
background: #29225c !important;
}
body #bingc-phone-button div.bingc-phone-button-tooltip
svg.bingc-phone-button-arrow polyline
{
fill: #29225c !important;
}


body #bingc-passive > div.bingc-passive-overlay {
background: #29225c !important;
}
body #bingc-active{
background: #29225c !important;
}


body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour:hover, #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form
div.bingc-active-get-phone-form-date-selection div.bingc-active-date-selection-select-minutes:hover{
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour, #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form
div.bingc-active-get-phone-form-date-selection div.bingc-active-date-selection-select-minutes {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour div.bingc-active-date-selection-select-hour-list-of-hours-container ul.bingc-active-date-selection-select-hour-list-of-hours li:hover {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-minutes div.bingc-active-date-selection-select-minutes-list-of-minutes-container ul.bingc-active-date-selection-select-minutes-list-of-minutes
li:hover {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-we-will-call-you.bingc-offline-form div.bingc-active-date-selection-select-day:hover {
background: #29225c !important;
}
#bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-we-will-call-you.bingc-offline-form div.bingc-active-date-selection-select-day
div.bingc-active-date-selection-select-day-list-of-days-container ul.bingc-active-date-selection-select-day-list-of-days li:hover{
background: #29225c !important;
}

body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour:hover, #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form
div.bingc-active-get-phone-form-date-selection div.bingc-active-date-selection-select-minutes:hover{
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour, #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form
div.bingc-active-get-phone-form-date-selection div.bingc-active-date-selection-select-minutes {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-hour div.bingc-active-date-selection-select-hour-list-of-hours-container ul.bingc-active-date-selection-select-hour-list-of-hours li:hover {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form div.bingc-active-get-phone-form-date-selection
div.bingc-active-date-selection-select-minutes div.bingc-active-date-selection-select-minutes-list-of-minutes-container ul.bingc-active-date-selection-select-minutes-list-of-minutes
li:hover {
background: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-we-will-call-you.bingc-offline-form div.bingc-active-date-selection-select-day:hover {
background: #29225c !important;
}
#bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-we-will-call-you.bingc-offline-form div.bingc-active-date-selection-select-day
div.bingc-active-date-selection-select-day-list-of-days-container ul.bingc-active-date-selection-select-day-list-of-days li:hover{
background: #29225c !important;
}

body #bingc-passive div.bingc-passive-overlay div.bingc-passive-content
div.bingc-passive-get-phone-form form.bingc-passive-get-phone-form
a.bingc-passive-phone-form-button{
color: #29225c !important;
}
body #bingc-active div.bingc-active-overlay div.bingc-active-content
div.bingc-active-get-phone-form form.bingc-active-get-phone-form
a.bingc-active-phone-form-button{
color:#29225c !important;
}


#bingc-passive div.bingc-passive-overlay div.bingc-passive-content div.bingc-passive-get-phone-form form.bingc-passive-get-phone-form a.bingc-passive-phone-form-button{
  color: #ffffff !important;
  background: #07060f4a !important;
}


#bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form a.bingc-active-phone-form-button{
  background: #1d1744 !important;
}


body #bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form a.bingc-active-phone-form-button {
    color: #ffffff !important;
}


#bingc-active div.bingc-active-overlay div.bingc-active-content div.bingc-active-get-phone-form form.bingc-active-get-phone-form a.bingc-active-phone-form-button,
body #bingc-passive div.bingc-passive-overlay div.bingc-passive-content div.bingc-passive-get-phone-form form.bingc-passive-get-phone-form a.bingc-passive-phone-form-button,
#bingc-passive div.bingc-passive-overlay div.bingc-passive-content div.bingc-passive-get-phone-form form.bingc-passive-get-phone-form a.bingc-passive-phone-form-button:hover{
background: #aecad6 !important;
}

.phones_head {
  display: flex;
  flex-direction: column;
}

.phones_head a{
color: var(--white);
    font-weight: 600;
    font-size: 111.1111%;
    transition: var(--tact);
    position: relative;
}


@media(max-width:1700px){
  .phones_head a{
    font-size: 13px;
  }
}
@media(max-width:1350px){
  .phones_head a{
    font-size: 10px;
  }
}
@media(max-width:1200px){
  /* .phones_head {
    display: none;
  } */
   .phones_head a{
    font-size: 15px;
  }
}