/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: "EuropeExtBold";
  src: url("../../fonts/europe-ext-bold.otf") format("opentype"); }

.contacts {
  position: fixed;
  left: -7.5rem;
  width: 7.5rem;
  z-index: 100;
  height: 100vh;
  background-color: #222121;
  cursor: pointer;
  -webkit-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out; }
  .contacts:hover .contacts__blue-rect {
    height: 18.875rem;
    background-color: #3B3B3B;
    -webkit-transition: height .25s ease, background-color .5s ease;
    transition: height .25s ease, background-color .5s ease; }
  .contacts:hover .contacts__label {
    bottom: 7.8125rem;
    -webkit-transition: bottom .5s ease;
    transition: bottom .5s ease; }
  .contacts--opened {
    left: 0; }

.contacts__logo {
  position: absolute;
  top: 1.6875rem;
  left: 1.6875rem;
  width: 4rem;
  height: 4rem;
  z-index: 5; }
  .contacts__logo svg {
    width: 100%;
    height: 100%; }
  .contacts__logo .col-fill {
    -webkit-transition: fill 0.3s linear;
    transition: fill 0.3s linear;
    fill: #d9793e; }
  .contacts__logo:hover .col-fill {
    fill: white; }

.contacts__label {
  position: absolute;
  bottom: 7.8125rem;
  width: 8rem;
  left: 50%;
  text-transform: uppercase;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  z-index: 3;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.625rem;
  color: white;
  -webkit-transition: bottom .5s ease;
  transition: bottom .5s ease; }

.contacts__icon {
  position: absolute;
  bottom: 1.6875rem;
  left: 2.75rem;
  width: 1.875rem;
  height: 1.875rem;
  z-index: 3; }
  .contacts__icon .col-fill {
    fill: white; }

.contacts__blue-rect {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 13.125rem;
  background-color: #313E51;
  -webkit-transition: height .25s ease, background-color .5s ease;
  transition: height .25s ease, background-color .5s ease; }

.contacts__content {
  width: 34.5rem;
  height: 100%;
  position: absolute;
  left: -34.5rem;
  z-index: 4;
  background-color: #3B3B3B;
  -webkit-transition: left .5s ease;
  transition: left .5s ease;
  padding-left: 7.5rem; }
  .contacts__content-active {
    left: 0;
    -webkit-transition: left .5s ease;
    transition: left .5s ease;
    cursor: auto; }

.contacts__content__close {
  top: 2.3125rem;
  right: 2.125rem;
  position: absolute;
  width: 2.625rem;
  height: 2.625rem;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s; }
  .contacts__content__close--default {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../../img/contacts-close-icon.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1; }
  .contacts__content__close--active {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../../img/contacts-close-icon--focus.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; }
  .contacts__content__close:hover .contacts__content__close--default {
    opacity: 0; }
  .contacts__content__close:hover .contacts__content__close--active {
    opacity: 1; }

.contacts__content__company {
  position: absolute;
  top: 14%; }

.contacts__content__companyname {
  padding-bottom: 1.5625rem;
  font-size: 2.3125rem;
  font-family: 'EuropeExtBold', sans-serif;
  text-transform: uppercase; }

.contacts__content__slogan {
  padding-bottom: 4.125rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-family: 'EuropeExtBold', sans-serif; }

.contacts__content__image {
  position: absolute;
  top: 30%;
  width: 15rem;
  height: 9.375rem;
  background-image: url("../../img/contacts-truba.png");
  background-repeat: no-repeat;
  background-size: cover; }

.contacts__content__info {
  position: absolute;
  top: 51%; }

.contacts__content__title {
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 3rem;
  font-family: 'EuropeExtBold', sans-serif; }

.contacts__content__text {
  font-size: 1rem;
  margin-bottom: 1.8rem;
  line-height: 1.375rem; }
  .contacts__content__text a:hover {
    color: #d9793e; }

.contacts__content__madein {
  opacity: 0.5;
  padding-top: 4rem; }

.contacts__madein_link {
  text-decoration: underline; }

.contacts__content__social {
  width: 13.1875rem;
  position: absolute;
  bottom: 2.6875rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.contacts__content__social__link {
  position: relative;
  display: block;
  width: 1.8125rem;
  height: 1.8125rem;
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s; }
  .contacts__content__social__link:hover .default {
    opacity: 0; }
  .contacts__content__social__link:hover .active {
    opacity: 1; }

.contacts__sc-lnk {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s; }
  .contacts__sc-lnk.default {
    opacity: 1; }
  .contacts__sc-lnk.active {
    opacity: 0; }

.contacts__content__social__facebook.default {
  background-image: url("../../img/facebook.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.contacts__content__social__facebook.active {
  background-image: url("../../img/facebook-focus.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.contacts__content__social__youtube {
  left: -1px; }
  .contacts__content__social__youtube.default {
    background-image: url("../../img/youtube.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat; }
  .contacts__content__social__youtube.active {
    background-image: url("../../img/youtube-col.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat; }

.contacts__content__social__flickr.default {
  background-image: url("../../img/flickr.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.contacts__content__social__flickr.active {
  background-image: url("../../img/flickr-col.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.contacts__content__social__twitter.default {
  background-image: url("../../img/twitter.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.contacts__content__social__twitter.active {
  background-image: url("../../img/twitter-col.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; }

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%; }
  .video-container video {
    min-width: 100%;
    min-height: 100%; }

.menu {
  position: fixed;
  right: 0;
  width: 7.5rem;
  height: 100%;
  z-index: 100;
  padding-top: 3.375rem;
  -webkit-transition: right .5s ease-in-out;
  transition: right .5s ease-in-out; }
  .menu-hide {
    right: -100%; }

.menu__icon {
  position: relative;
  margin: 0 auto 5.8125rem auto;
  cursor: pointer;
  fill: #919191;
  stroke: #919191;
  -webkit-transition: fill, stroke, 0.3s linear;
  transition: fill, stroke, 0.3s linear; }
  .menu__icon svg {
    overflow: visible; }
  .menu__icon-active {
    opacity: 1;
    fill: #d9793e;
    stroke: #d9793e; }
  .menu__icon:hover {
    fill: white;
    stroke: white; }

.menu__main {
  position: relative;
  width: 3.6875rem;
  height: 3.625rem;
  z-index: 3;
  fill: white;
  stroke: white; }

.menu__home {
  width: 1rem;
  height: 2.625rem; }

.menu__info {
  width: 1.75rem;
  height: 1.75rem; }

.menu__climat {
  width: 2.4375rem;
  height: 2.375rem; }

.menu__usability {
  width: 2.8125rem;
  height: 2.8125rem; }

.menu__tests {
  width: 1.75rem;
  height: 2.125rem; }

.menu__full {
  position: absolute;
  right: -100rem;
  top: 0;
  width: 51.5rem;
  height: 51.5rem;
  background-color: #222121;
  -webkit-transition: right 1s ease;
  transition: right 1s ease; }
  .menu__full:hover, .menu__full-active {
    right: 0; }

.menu__list {
  width: 100%;
  height: 100%;
  padding-top: 6.125rem;
  padding-left: 8rem;
  font-size: 1.25rem;
  font-family: "EuropeExtBold", sans-serif;
  text-transform: uppercase; }

.menu__list__item {
  position: relative;
  width: 35rem;
  line-height: 7.8125rem;
  border-bottom: solid 0.125rem white;
  cursor: pointer;
  -webkit-transition: color 0.3s linear;
  transition: color 0.3s linear; }
  .menu__list__item:last-child {
    border-bottom: none; }
  .menu__list__item-active {
    color: #d9793e; }
  .menu__list__item:hover {
    color: #d9793e; }

.menu__list__item:hover .menu__list__icon,
.menu__list__item-active .menu__list__icon {
  stroke: #d9793e;
  fill: #d9793e; }

.menu__list__item {
  padding-left: 6.1875rem; }

.menu__list__icon {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  fill: white;
  stroke: white;
  vertical-align: middle;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: fill, stroke, 0.3s linear;
  transition: fill, stroke, 0.3s linear; }
  .menu__list__icon svg {
    overflow: visible; }

.menu__language-container {
  position: absolute;
  z-index: -1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 3.4375rem;
  left: 2rem;
  right: 2rem;
  text-transform: uppercase;
  font-family: 'IBM Plex Sans', sans-serif; }

.language-btn {
  cursor: pointer;
  display: inline-block; }
  .language-btn.active {
    color: #d9793e; }

.menu[data-page="4"] {
  border-left: 1px solid rgba(196, 196, 196, 0.3); }
  .menu[data-page="4"] .menu__icon-active {
    fill: #d9793e;
    stroke: #d9793e; }
  .menu[data-page="4"] .menu__icon:hover {
    fill: #222121;
    stroke: #222121; }
  .menu[data-page="4"] .menu__main {
    fill: #222121;
    stroke: #222121; }
  .menu[data-page="4"] .menu__main.menu__full-active {
    fill: white;
    stroke: white; }
  .menu[data-page="4"] .language-btn {
    color: #919191; }
    .menu[data-page="4"] .language-btn.active {
      color: #d9793e; }

.menu__btn-nav-container {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 33.25rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  .menu__btn-nav-container .menu__icon {
    margin: 0; }

.menu__icon-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s; }

.menu__full-active .menu__icon-dots {
  top: 1.52rem;
  bottom: 1.53rem;
  left: 1.53rem;
  right: 1.57rem;
  -webkit-animation: vanishing ease-in-out 0.46s forwards;
          animation: vanishing ease-in-out 0.46s forwards; }

.menu__icon-dot {
  position: absolute;
  width: 0.55rem;
  height: 0.64rem; }
  .menu__icon-dot--nw {
    top: 0;
    left: 0; }
  .menu__icon-dot--ne {
    top: 0;
    right: 0; }
  .menu__icon-dot--se {
    bottom: 0;
    right: 0; }
  .menu__icon-dot--sw {
    bottom: 0;
    left: 0; }
  .menu__icon-dot--c {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .menu__icon-dot--n {
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .menu__icon-dot--e {
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .menu__icon-dot--s {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .menu__icon-dot--w {
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }

@-webkit-keyframes vanishing {
  99% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes vanishing {
  99% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.section {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

#longread-sections-wrapper {
  height: 100%;
  -webkit-transition: margin-top 1s ease-in-out;
  transition: margin-top 1s ease-in-out; }

.section__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; }
  .section__layer--content {
    left: 7.5rem;
    right: 7.5rem; }

.section__title {
  position: absolute;
  left: 2.8125rem;
  top: 7.35rem;
  font-size: 4.515625rem;
  color: #222121;
  text-transform: uppercase;
  font-family: 'EuropeExtBold', sans-serif;
  line-height: 4.375rem;
  z-index: 10; }

.vline {
  background-color: #c4c4c4;
  position: absolute;
  opacity: 35%;
  width: 1px;
  top: 0;
  bottom: 0; }
  .vline--left2 {
    position: absolute;
    left: 0; }
  .vline--left {
    position: absolute;
    left: 25%; }
  .vline--central {
    position: absolute;
    left: 50%; }
  .vline--right {
    position: absolute;
    right: 25%; }
  .vline--right2 {
    position: absolute;
    right: 0; }

.vlines {
  position: absolute;
  top: 0;
  left: 7.5rem;
  right: 7.5rem;
  bottom: 0;
  opacity: 0.45; }
  .vlines--12 {
    opacity: 0.12; }

.loader-bar {
  position: absolute;
  width: 37.0625rem;
  bottom: 12.1875rem;
  left: -webkit-calc(50% - 37.0625rem / 2);
  left: calc(50% - 37.0625rem / 2); }
  .loader-bar--bar-container {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 0.25rem;
    background-color: #f4f3f3; }
  .loader-bar--bar {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    left: -3rem;
    background-color: #d9793e;
    box-shadow: 3rem 0 3rem 3rem #d9793e; }
  .loader-bar--progress-value {
    position: absolute;
    top: -2.3125rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-family: 'EuropeExtBold', sans-serif;
    font-size: 1.3125rem; }
  .loader-bar--progress-percent {
    font-size: 1.1875rem; }

#preloader {
  display: none;
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1000; }

.common-svg .cls-1 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 3px; }

.mouse-scroll-svg .cls-1 {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 3px; }

.connection-loop-svg .cls-1, .connection-loop-svg .cls-2 {
  fill: none; }

.connection-loop-svg .cls-2 {
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 3px; }

.connection-loop-svg .cls-3 {
  -webkit-clip-path: url(#clip-path);
          clip-path: url(#clip-path); }

.h2s-svg .st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 10; }

.plus-dark-svg .cls-1 {
  fill: none;
  stroke: #d9793e;
  stroke-width: 2px; }

.plus-dark-svg .cls-2 {
  fill: #d9793e; }

.plus-dark-svg .cls-3 {
  fill: #fff; }

.plus-white-svg .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-width: 2px; }

.plus-white-svg .cls-2 {
  fill: #fff; }

.plus-white-svg .cls-3 {
  fill: #3b3b3b; }

.connection {
  color: #222121;
  background-color: rgba(58, 57, 101, 0.29); }
  .connection .col-stroke {
    stroke: #222121; }
  .connection .col-fill {
    fill: #222121; }
  .connection__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 17rem;
    background-color: #f4f3f3; }
  .connection__text-wrapper-left {
    position: absolute;
    top: 22.625rem;
    left: 2.8125rem;
    width: 24.75rem; }
  .connection__text-wrapper-right {
    position: absolute;
    top: 22.625rem;
    left: 33.75rem;
    width: 29.75rem; }
  .connection__text-title {
    height: 4.6875rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    line-height: 1.25rem;
    font-family: 'EuropeExtBold', sans-serif;
    font-size: 1.325625rem;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: all; }
    .connection__text-title * {
      pointer-events: none; }
    .connection__text-title--no-pointer {
      cursor: default; }
  .connection__text-unit + .connection__text-title {
    margin-top: 1.875rem; }
  .connection__text-title-left-space {
    width: 1.5rem; }
  .connection__text-title-left-space-right {
    width: 2.375rem; }
  .connection__text-title-text {
    position: relative;
    top: 0.875rem;
    height: 100%;
    display: inline-block;
    font-size: 1.25rem;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
  .connection__text-unit {
    position: relative;
    pointer-events: all;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.375rem; }
    .connection__text-unit--left {
      width: 14.0625rem;
      left: 7.1875rem; }
    .connection__text-unit--right {
      width: 23.125rem;
      left: 7.0625rem; }
    .connection__text-unit__bullet {
      display: block;
      position: absolute;
      top: 0.43rem;
      left: -1.3125rem;
      height: 0.3rem;
      width: 0.3rem;
      border-radius: 50%;
      background-color: #222121; }
    .connection__text-unit + .connection__text-unit {
      margin-top: 2.0625rem; }
  .connection__img-greenwell {
    width: 4.375rem;
    height: 4.0625rem;
    background-image: url("../../img/greenwell.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }
  .connection__img-in-title {
    position: relative;
    height: 4.6875rem;
    width: 4.6875rem; }
  .connection__pipe_img {
    position: absolute;
    right: 1px;
    top: 50%;
    width: 35.5rem;
    height: 97.75rem;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background-image: url("../../img/connection-pipe.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }
  .connection__lens-frame {
    position: absolute;
    display: none;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    -webkit-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s;
    border-radius: 50%;
    border: 0.3125rem solid #d9793e;
    pointer-events: none; }
  .connection__pipe_img-lens {
    position: absolute;
    display: none;
    right: -2.2rem;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%) scale(1.22);
        -ms-transform: translateY(-50%) scale(1.22);
            transform: translateY(-50%) scale(1.22);
    background-image: url("../../img/connection-pipe-lens.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-clip-path: circle(0 at 50% 50%);
            clip-path: circle(0 at 50% 50%);
    -webkit-transition: ease-in-out 0.5s;
    transition: ease-in-out 0.5s; }
  .connection.active--node .connection__pipe_img-lens {
    top: -webkit-calc(50% + 2rem);
    top: calc(50% + 2rem);
    left: -0.7rem; }
  .connection.active--edge .connection__pipe_img-lens {
    top: -webkit-calc(50% - 2.4rem);
    top: calc(50% - 2.4rem);
    left: -0.8rem; }
  .connection.active--loop .connection__pipe_img-lens {
    top: -webkit-calc(50% - 1.75rem);
    top: calc(50% - 1.75rem);
    left: -0.1rem; }
  .connection.active--node .connection__pipe_img-lens {
    -webkit-clip-path: circle(4.15512rem at 5.75512rem -webkit-calc(50% - 3.5rem));
            clip-path: circle(4.15512rem at 5.75512rem calc(50% - 3.5rem)); }
  .connection.active--edge .connection__pipe_img-lens {
    -webkit-clip-path: circle(4.15512rem at 5.75512rem -webkit-calc(50% + 4.8rem));
            clip-path: circle(4.15512rem at 5.75512rem calc(50% + 4.8rem)); }
  .connection.active--loop .connection__pipe_img-lens {
    -webkit-clip-path: circle(4.41127rem at 5.41127rem -webkit-calc(50% + 10.6rem));
            clip-path: circle(4.41127rem at 5.41127rem calc(50% + 10.6rem)); }
  .connection.active--node .connection__lens-frame {
    top: -webkit-calc(50% - 7.6rem);
    top: calc(50% - 7.6rem);
    left: -2.9rem;
    border-width: 0.625rem; }
  .connection.active--edge .connection__lens-frame {
    top: -webkit-calc(50% - 1.85rem);
    top: calc(50% - 1.85rem);
    left: -3.03rem;
    border-width: 0.625rem; }
  .connection.active--loop .connection__lens-frame {
    top: -webkit-calc(50% + 5.5rem);
    top: calc(50% + 5.5rem);
    left: -3.03rem;
    border-width: 0.625rem; }

.frame-inited--node {
  display: block;
  top: -webkit-calc(50% - 2.6rem);
  top: calc(50% - 2.6rem);
  left: 2.2rem; }

.frame-inited--edge {
  display: block;
  top: -webkit-calc(50% + 4.3rem);
  top: calc(50% + 4.3rem);
  left: 2.2rem; }

.frame-inited--loop {
  display: block;
  top: -webkit-calc(50% + 10.7rem);
  top: calc(50% + 10.7rem);
  left: 1.8rem; }

.lens-inited--node {
  display: block;
  -webkit-clip-path: circle(0 at 5.15512rem -webkit-calc(50% - 2.5rem));
          clip-path: circle(0 at 5.15512rem calc(50% - 2.5rem)); }

.lens-inited--edge {
  display: block;
  -webkit-clip-path: circle(0 at 5.15512rem -webkit-calc(50% + 3.5rem));
          clip-path: circle(0 at 5.15512rem calc(50% + 3.5rem)); }

.lens-inited--loop {
  display: block;
  -webkit-clip-path: circle(0 at 5.01127rem -webkit-calc(50% + 9rem));
          clip-path: circle(0 at 5.01127rem calc(50% + 9rem)); }

.frame--node,
.frame--edge {
  width: 10.6875rem;
  height: 10.6875rem; }

.frame--loop {
  width: 11.3125rem;
  height: 11.3125rem; }

.connection.active--node .text-node,
.connection.active--edge .text-edge,
.connection.active--loop .text-loop {
  color: #d9793e; }

.connection.active--node .svg-node .col-stroke,
.connection.active--edge .svg-edge .col-stroke,
.connection.active--loop .svg-loop .col-stroke {
  stroke: #d9793e; }

.connection.active--node .svg-node .col-fill,
.connection.active--edge .svg-edge .col-fill,
.connection.active--loop .svg-loop .col-fill {
  fill: #d9793e; }

.connection.active--node .img-node,
.connection.active--edge .img-edge,
.connection.active--loop .img-loop {
  display: block; }

.connection__pulse {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #d9793e;
  -webkit-animation: pulse 1s ease-in-out alternate-reverse infinite;
          animation: pulse 1s ease-in-out alternate-reverse infinite;
  cursor: pointer;
  pointer-events: all; }
  .connection__pulse--1 {
    top: -webkit-calc(50% - 2.8rem);
    top: calc(50% - 2.8rem);
    left: 2rem; }
  .connection__pulse--2 {
    top: -webkit-calc(50% + 4.15rem);
    top: calc(50% + 4.15rem);
    left: 2rem; }
  .connection__pulse--3 {
    top: -webkit-calc(50% + 10.5rem);
    top: calc(50% + 10.5rem);
    left: 1.6rem; }

.triangle-piston {
  position: relative;
  height: 1rem;
  width: 1.3rem;
  overflow: visible; }
  .triangle-piston::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.35rem 0 0.35rem 0.75rem;
    border-color: transparent transparent transparent #d9793e;
    -webkit-animation: piston 0.6s ease-in-out alternate-reverse infinite;
            animation: piston 0.6s ease-in-out alternate-reverse infinite; }

.triangle-container {
  position: absolute;
  display: none;
  -webkit-animation: fadeIn 0.5s ease-in forwards;
          animation: fadeIn 0.5s ease-in forwards;
  overflow: visible; }
  .triangle-container .triangle-piston + .triangle-piston {
    margin-top: 0.45rem; }
  .triangle-container--1-1 {
    top: 3rem;
    left: 1.2rem;
    -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
            transform: rotate(-6deg); }
  .triangle-container--1-2 {
    top: 2.9rem;
    left: 3.2rem;
    -webkit-transform: rotate(174deg);
        -ms-transform: rotate(174deg);
            transform: rotate(174deg); }
  .triangle-container--2-1 {
    top: 2.9rem;
    left: 1.9rem;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
  .triangle-container--2-2 {
    top: 2.6rem;
    left: 2.8rem;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  .triangle-container--3 {
    top: 2rem;
    left: 1.5rem;
    -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg); }

.active--node .triangle-container--1-1,
.active--node .triangle-container--1-2,
.active--edge .triangle-container--2-1,
.active--edge .triangle-container--2-2,
.active--loop .triangle-container--3 {
  display: block; }

@-webkit-keyframes pulse {
  to {
    -webkit-transform: scale(1.25);
            transform: scale(1.25); } }

@keyframes pulse {
  to {
    -webkit-transform: scale(1.25);
            transform: scale(1.25); } }

@-webkit-keyframes piston {
  to {
    -webkit-transform: translateX(0.3rem);
            transform: translateX(0.3rem); } }

@keyframes piston {
  to {
    -webkit-transform: translateX(0.3rem);
            transform: translateX(0.3rem); } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.connection__pipe_img-lens-ie {
  display: none; }

.ie .connection__pipe_img-lens-ie {
  position: absolute;
  display: block;
  width: 10.2rem;
  height: 10.2rem;
  border-radius: 50%; }

.active--node .connection__pipe_img-lens-ie {
  top: -webkit-calc(50% - 7.45rem);
  top: calc(50% - 7.45rem);
  left: -2.4rem;
  background-image: url("../../img/lens-1.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.active--edge .connection__pipe_img-lens-ie {
  top: -webkit-calc(50% - 1.65rem);
  top: calc(50% - 1.65rem);
  left: -2.8rem;
  background-image: url("../../img/lens-2.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.active--loop .connection__pipe_img-lens-ie {
  top: -webkit-calc(50% + 5.65rem);
  top: calc(50% + 5.65rem);
  left: -2.85rem;
  width: 11rem;
  height: 11rem;
  background-image: url("../../img/lens-3.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.ie .connection__lens-frame {
  -webkit-transition: unset !important;
  transition: unset !important; }

.home {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 7.6875rem;
  padding-left: 10.375rem;
  background-color: rgba(58, 57, 101, 0.29);
  z-index: 1; }

.home__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; }

.home__company__companyname {
  font-size: 5.9375rem;
  font-family: 'EuropeExtBold', sans-serif;
  text-transform: uppercase; }

.home__company__slogan {
  margin-top: 2rem;
  margin-bottom: 3.125rem;
  font-size: 1.3125rem;
  font-family: 'EuropeExtBold', sans-serif;
  text-transform: uppercase;
  line-height: 1; }

.home__company__description {
  line-height: 1.5; }

.home__truba {
  margin-left: 5.3125rem;
  margin-top: 12rem;
  width: 57.3125rem;
  height: 35.75rem;
  background-image: url("../../img/home-truba.png");
  background-repeat: no-repeat;
  background-size: cover; }
  @media (max-width: 1366px) {
    .home__truba {
      margin-top: 10rem; } }
  @media (min-width: 3000px) {
    .home__truba {
      margin-top: 10rem;
      margin-left: 18rem; } }

.home__description {
  padding-top: 11.875rem; }

.home__description__icons {
  width: 32.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.home__description__icon {
  position: relative;
  width: 4rem;
  height: 4rem;
  cursor: pointer; }
  .home__description__icon .col-stroke {
    stroke: white; }
  .home__description__icon .col-fill {
    fill: white; }
  .home__description__icon:hover .col-stroke, .home__description__icon-active .col-stroke {
    stroke: #d9793e; }
  .home__description__icon:hover .col-fill, .home__description__icon-active .col-fill {
    fill: #d9793e; }
  .home__description__icon svg {
    pointer-events: none; }

.home__description__info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0;
  visibility: hidden;
  height: 0;
  opacity: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
  overflow: hidden; }
  .home__description__info-active {
    padding-top: 3.625rem;
    visibility: visible;
    height: auto;
    opacity: 1;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear; }

.home__description__info__title {
  width: 17.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.7rem; }
  .home__description__info__title:after {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1rem;
    background-color: white; }

.home__description__info__text {
  max-width: 22rem;
  padding-top: 1.125rem;
  margin-left: 2rem;
  line-height: 1.4;
  letter-spacing: 0.1rem; }

.home__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6875rem;
  width: 1.21875rem;
  height: 2.125rem;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }

.home__scroll-wheel {
  position: absolute;
  width: 1.21875rem;
  height: 2.125rem;
  left: 0;
  top: 0;
  -webkit-animation: wheel 0.75s alternate-reverse infinite ease-in-out;
          animation: wheel 0.75s alternate-reverse infinite ease-in-out; }

@-webkit-keyframes wheel {
  to {
    top: 0.2rem; } }

@keyframes wheel {
  to {
    top: 0.2rem; } }

.application {
  background-color: rgba(58, 57, 101, 0.29); }
  .application__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f4f3f3; }
  .application__sector {
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-transition: color 0.5s ease-in-out, background 2s ease-in-out;
    transition: color 0.5s ease-in-out, background 2s ease-in-out; }
    .application__sector--1 {
      left: 0;
      width: 25%; }
    .application__sector--2 {
      left: 25%;
      width: 25%; }
    .application__sector--3 {
      left: 50%;
      width: 25%; }
    .application__sector--4 {
      left: 75%;
      width: 25%; }
  .application__content-wrapper {
    position: absolute;
    height: 32.8125rem;
    left: 2.5rem;
    right: 2.5rem;
    top: -webkit-calc(50% - 6.25rem);
    top: calc(50% - 6.25rem);
    pointer-events: none; }
  .application__sector-icon {
    position: absolute;
    width: 4.0625rem;
    height: 4.0625rem;
    top: 0;
    left: 0; }
  .application__sector-title {
    position: absolute;
    top: 6.25rem;
    left: 0;
    font-size: 1.325625rem;
    line-height: 1.25rem;
    font-family: 'EuropeExtBold', sans-serif;
    text-transform: uppercase;
    max-width: 21.875rem; }
  .application__sector-text {
    position: absolute;
    top: 15.625rem;
    left: 0;
    font-size: 1rem;
    line-height: 1.375rem;
    font-family: 'IBM Plex Sans', sans-serif;
    max-width: 21.875rem; }
  .application__details-container {
    position: relative;
    width: 21.875rem; }
  .application__details-icon {
    position: absolute;
    top: 29.875rem;
    left: 0.5rem;
    height: 2.875rem;
    width: 2.875rem; }
  .application__details-text {
    position: absolute;
    left: 50%;
    top: 30.9375rem;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.48rem;
    color: #d9793e;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
  .application__sector {
    pointer-events: all;
    cursor: pointer;
    color: #222121; }
    .application__sector .col-stroke {
      stroke: #222121; }
    .application__sector .col-fill {
      fill: #222121; }
    .application__sector .plus-icon {
      position: absolute; }
    .application__sector .show-inactive {
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
      opacity: 1; }
    .application__sector .show-active {
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
      opacity: 0; }
  .application__sector--active {
    color: #ffffff; }
    .application__sector--active .col-stroke {
      stroke: #ffffff; }
    .application__sector--active .col-fill {
      fill: #ffffff; }
    .application__sector--active .show-inactive {
      opacity: 0; }
    .application__sector--active .show-active {
      opacity: 1; }
    .application__sector--active .application__details-text {
      color: white; }

.application__sector--active.application__sector--1 {
  background-image: url("../../img/application-1.1-bg.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.application__sector--active.application__sector--2 {
  background-image: url("../../img/application-2.1-bg.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.application__sector--active.application__sector--3 {
  background-image: url("../../img/application-3.1-bg.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

.application__sector--active.application__sector--4 {
  background-image: url("../../img/application-4.1-bg.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }

#application__video {
  background-color: black;
  width: 100%;
  height: 100%; }

#application__video-wrapper {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s linear 0s;
  transition: opacity 0.5s linear 0s;
  pointer-events: none; }
  #application__video-wrapper.play {
    background-color: black;
    display: block;
    opacity: 1;
    pointer-events: all; }

.video__close {
  position: absolute;
  z-index: 100;
  top: 3.375rem;
  right: 9.5rem;
  width: 2.375rem;
  height: 2.25rem;
  cursor: pointer;
  background-image: url("../../img/video-close.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: right .5s ease-in-out;
  transition: right .5s ease-in-out; }
  .video__close--fullscreen {
    right: 2rem; }

.sound {
  position: absolute;
  z-index: 100;
  top: 3.375rem;
  left: 9.5rem;
  width: 3.125rem;
  height: 3.125rem;
  cursor: pointer;
  -webkit-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
  background-image: url("../../img/sound-off.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat; }
  .sound--on {
    background-image: url("../../img/sound-on.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }
  .sound--fullscreen {
    left: 2rem; }

.sector-fade-out {
  -webkit-animation: shrink 0.7s forwards;
          animation: shrink 0.7s forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
  .sector-fade-out > * {
    -webkit-animation: applicationFadeOut 0.3s forwards;
            animation: applicationFadeOut 0.3s forwards; }

.sector-expand {
  -webkit-animation: expand 0.7s forwards;
          animation: expand 0.7s forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }

.vlines-fade-out {
  -webkit-animation: applicationFadeOut 0.7s forwards;
          animation: applicationFadeOut 0.7s forwards;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }

@-webkit-keyframes applicationFadeOut {
  to {
    opacity: 0; } }

@keyframes applicationFadeOut {
  to {
    opacity: 0; } }

@-webkit-keyframes shrink {
  to {
    width: 0; } }

@keyframes shrink {
  to {
    width: 0; } }

@-webkit-keyframes expand {
  to {
    left: 0;
    width: 100%; } }

@keyframes expand {
  to {
    left: 0;
    width: 100%; } }

.ie .exploitation__pipe-img {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
      -ms-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg); }

.exploitation {
  background-color: rgba(58, 57, 101, 0.29); }
  .exploitation .section__title {
    color: white; }
  .exploitation__bg {
    background-color: #313E51;
    opacity: 0.5; }
  .exploitation__section, .exploitation__video {
    display: none; }
    .exploitation__section.active, .exploitation__video.active {
      display: block; }
  .exploitation__pipe-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22.625rem;
    height: 60.4375rem;
    -webkit-transform: translate(-50%, -webkit-calc(-50% + 5.625rem)) rotate(90deg);
        -ms-transform: translate(-50%, calc(-50% + 5.625rem)) rotate(90deg);
            transform: translate(-50%, calc(-50% + 5.625rem)) rotate(90deg);
    background-image: url("../../img/connection-pipe.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }
  .exploitation__text-block {
    position: absolute; }
    .exploitation__text-block--1 {
      top: 7.75rem;
      left: -webkit-calc(50% + 11.0625rem);
      left: calc(50% + 11.0625rem); }
    .exploitation__text-block--2 {
      top: 7.75rem;
      left: -webkit-calc(75% + 4.875rem);
      left: calc(75% + 4.875rem); }
    .exploitation__text-block--3 {
      top: 23.2rem;
      left: -webkit-calc(75% + 4.875rem);
      left: calc(75% + 4.875rem); }
  .exploitation__text-title {
    font-family: 'EuropeExtBold', sans-serif;
    font-size: 1.325625rem;
    line-height: 1.25rem;
    text-transform: uppercase; }
  .exploitation__text-li {
    position: relative;
    margin-left: 1.375rem;
    margin-top: 1.8125rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.1875rem; }
    @media (max-height: 600px) {
      .exploitation__text-li {
        margin-top: 1.4125rem; } }
  .exploitation__bullet {
    display: block;
    position: absolute;
    top: 0.54rem;
    left: -1.3125rem;
    height: 0.3rem;
    width: 0.3rem;
    border-radius: 50%;
    background-color: white; }
  .exploitation__plus {
    position: absolute;
    top: 0;
    left: -1.3125rem;
    color: white; }
  .exploitation__icon {
    position: absolute;
    bottom: 5rem;
    width: 4.0625rem;
    height: 4.0625rem;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: white;
    cursor: pointer;
    pointer-events: all;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
    .exploitation__icon .col-stroke {
      stroke: white; }
    .exploitation__icon .col-fill {
      fill: white; }
    .exploitation__icon.active, .exploitation__icon:hover {
      color: #d9793e; }
      .exploitation__icon.active .col-stroke, .exploitation__icon:hover .col-stroke {
        stroke: #d9793e; }
      .exploitation__icon.active .col-fill, .exploitation__icon:hover .col-fill {
        fill: #d9793e; }
    .exploitation__icon--1 {
      left: -webkit-calc(25% + 3.75rem);
      left: calc(25% + 3.75rem); }
    .exploitation__icon--2 {
      left: 50%; }
    .exploitation__icon--3 {
      left: -webkit-calc(75% - 3.75rem);
      left: calc(75% - 3.75rem); }
  .exploitation__icon-title {
    position: absolute;
    top: 5rem;
    line-height: 1.25rem;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-transform: uppercase;
    text-align: center;
    font-family: 'EuropeExtBold', sans-serif;
    font-size: 0.9375rem;
    white-space: nowrap; }
  .exploitation__line-1 {
    position: absolute;
    bottom: 8.9rem;
    height: 1px;
    left: -webkit-calc(25% + 7.28125rem);
    left: calc(25% + 7.28125rem);
    right: -webkit-calc(50% + 3.4375rem);
    right: calc(50% + 3.4375rem);
    background-color: #949494; }
  .exploitation__line-2 {
    position: absolute;
    bottom: 8.9rem;
    height: 1px;
    left: -webkit-calc(50% + 3.4375rem);
    left: calc(50% + 3.4375rem);
    right: -webkit-calc(25% + 7.28125rem);
    right: calc(25% + 7.28125rem);
    background-color: #949494; }

.devtest {
  background-color: white; }
  .devtest__left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%; }
  .devtest__right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%; }
  .devtest__right-content {
    display: none; }
  .devtest__grid-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 43.0625rem;
    height: 36.9375rem;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-image: url("../../img/devtest-grid.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }
  .devtest__text {
    position: absolute;
    left: 16.375rem;
    width: 30rem;
    color: #222121;
    -webkit-transition: top ease-in-out 0.5s;
    transition: top ease-in-out 0.5s; }
    .devtest__text--1 {
      top: 22.5rem; }
    .devtest__text--2 {
      top: 50rem; }
    .devtest__text .col-stroke {
      stroke: #222121; }
    .devtest__text .col-fill {
      fill: #222121; }
  .devtest__title {
    position: relative;
    font-size: 1.325625rem;
    line-height: 1.25rem;
    font-family: 'EuropeExtBold', sans-serif;
    text-transform: uppercase;
    pointer-events: all;
    cursor: pointer;
    margin-bottom: 2.1875rem;
    -webkit-transition: color 0.3s;
    transition: color 0.3s; }
    .devtest__title:hover {
      color: #d9793e; }
      .devtest__title:hover .col-stroke {
        stroke: #d9793e; }
      .devtest__title:hover .col-fill {
        fill: #d9793e; }
  .devtest__description {
    display: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.375rem;
    -webkit-animation: textComing ease-in-out 1s forwards;
            animation: textComing ease-in-out 1s forwards; }
  .devtest .active .devtest__title {
    color: #d9793e; }
  .devtest .active .devtest__description {
    display: block; }
  .devtest__text.active .col-stroke {
    stroke: #d9793e; }
  .devtest__text.active .col-fill {
    fill: #d9793e; }
  .devtest__text.active.devtest__text--2 {
    top: 31.125rem; }
  .devtest__icon {
    position: absolute;
    left: -5.84rem;
    top: -1rem;
    width: 4.0625rem;
    height: 4.0625rem; }
  .devtest__gallery {
    pointer-events: all;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #3B3B3B; }
  .devtest__gallery-wrapper {
    height: 100%;
    width: 100%; }
  .devtest__gallery-img {
    height: 100%;
    width: 100%; }
  .devtest .swiper-pagination-bullet {
    position: relative;
    width: 9px !important;
    height: 9px !important;
    background-color: white !important;
    cursor: pointer;
    margin: 0 1.4062rem !important; }
    .devtest .swiper-pagination-bullet:focus {
      outline: none !important; }
  .devtest .swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 15px;
    height: 15px;
    background: transparent;
    border-radius: 50%;
    border: 1px solid white; }
  .devtest .gallery-container {
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events: all; }
  .devtest .swiper-container {
    width: 100%;
    height: 100%; }
  .devtest .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
  .devtest .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2); }
  .devtest .swiper-pagination-bullets {
    bottom: 2.5rem !important; }

.active--1 .devtest__right-content--1 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  .active--1 .devtest__right-content--1 .video-container {
    width: 100%;
    height: 100%; }
  .active--1 .devtest__right-content--1 video {
    width: unset;
    height: 100%; }

.active--2 .devtest__right-content--2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #dbdbdb; }

@-webkit-keyframes textComing {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes textComing {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.devtest__graph {
  position: absolute;
  top: 20.5rem;
  left: 5.125rem;
  width: 43.125rem;
  height: 37.375rem;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s; }

.devtest__graph__filled {
  -webkit-clip-path: inset(0 0 0 90%);
          clip-path: inset(0 0 0 90%);
  -webkit-transition: none;
  transition: none; }
  .devtest__graph__filled--1 {
    -webkit-clip-path: inset(0 0 0 32.9%);
            clip-path: inset(0 0 0 32.9%);
    -webkit-transition: -webkit-clip-path ease-in-out 3.5s;
    transition: -webkit-clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s, -webkit-clip-path ease-in-out 3.5s; }
  .devtest__graph__filled--2 {
    -webkit-clip-path: inset(0 0 0 27%);
            clip-path: inset(0 0 0 27%);
    -webkit-transition: -webkit-clip-path ease-in-out 3.5s;
    transition: -webkit-clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s, -webkit-clip-path ease-in-out 3.5s; }
  .devtest__graph__filled--3 {
    -webkit-clip-path: inset(0 0 0 21.2%);
            clip-path: inset(0 0 0 21.2%);
    -webkit-transition: -webkit-clip-path ease-in-out 3.5s;
    transition: -webkit-clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s;
    transition: clip-path ease-in-out 3.5s, -webkit-clip-path ease-in-out 3.5s; }
  .devtest__graph__filled .oval-filled--1 {
    fill: #D6433C; }
  .devtest__graph__filled .oval-filled--2 {
    fill: #F2862B; }
  .devtest__graph__filled .oval-filled--3 {
    fill: #257ABD; }
  .devtest__graph__filled .oval4-filled {
    opacity: 0.5;
    -webkit-clip-path: inset(0 0 0 90%);
            clip-path: inset(0 0 0 90%);
    -webkit-transition: none;
    transition: none; }
    .devtest__graph__filled .oval4-filled--active {
      fill: #257ABD;
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0);
      -webkit-transition: -webkit-clip-path ease-in-out 3.5s;
      transition: -webkit-clip-path ease-in-out 3.5s;
      transition: clip-path ease-in-out 3.5s;
      transition: clip-path ease-in-out 3.5s, -webkit-clip-path ease-in-out 3.5s; }

.devtest__graph__unfilled .oval {
  fill: #A0A0A0; }

.devtest__graph-title {
  position: absolute;
  font-family: 'EuropeExtBold', sans-serif;
  text-transform: uppercase;
  pointer-events: all;
  opacity: 0;
  font-size: 0;
  top: 9.375rem;
  left: 0;
  padding-left: 5.8125rem;
  -webkit-transition: font-size 1s, top 2s, opacity 1s, left 2s;
  transition: font-size 1s, top 2s, opacity 1s, left 2s; }
  .devtest__graph-title-1 {
    color: #D6433C; }
    .devtest__graph-title-1.devtest__graph-title--non-active {
      top: 12rem; }
    .devtest__graph-title-1.devtest__graph-title--non-active-2 {
      left: 16rem; }
  .devtest__graph-title-2 {
    color: #F2862B; }
    .devtest__graph-title-2.devtest__graph-title--non-active {
      top: 12rem; }
  .devtest__graph-title-3 {
    color: #257ABD; }
  .devtest__graph-title--active {
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    font-size: 1.3125rem; }
  .devtest__graph-title--non-active {
    position: absolute;
    opacity: 1;
    font-size: 1rem; }
  .devtest__graph-title--interactive {
    cursor: pointer; }

.lines-unfilled .line-1--active {
  display: block;
  fill: #D6433C; }

.lines-unfilled .line-2--active {
  display: block;
  fill: #F2862B; }

.lines-unfilled .line-3--active {
  display: block;
  fill: #257ABD; }

.lines-filled .line-1 {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  -webkit-transition: none;
  transition: none;
  fill: #D6433C; }
  .lines-filled .line-1.line-1-1 {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0); }
  .lines-filled .line-1--active {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transition: -webkit-clip-path ease-in-out 2s;
    transition: -webkit-clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s, -webkit-clip-path ease-in-out 2s; }
    .lines-filled .line-1--active.line-1-1 {
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0); }

.lines-filled .line-2 {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  -webkit-transition: none;
  transition: none;
  fill: #F2862B; }
  .lines-filled .line-2.line-2-2 {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0); }
  .lines-filled .line-2--active {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transition: -webkit-clip-path ease-in-out 2s;
    transition: -webkit-clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s, -webkit-clip-path ease-in-out 2s; }
    .lines-filled .line-2--active.line-2-2 {
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0); }

.lines-filled .line-3 {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  -webkit-transition: none;
  transition: none;
  fill: #257ABD; }
  .lines-filled .line-3.line-3-3 {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0); }
  .lines-filled .line-3--active {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transition: -webkit-clip-path ease-in-out 2s;
    transition: -webkit-clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s;
    transition: clip-path ease-in-out 2s, -webkit-clip-path ease-in-out 2s; }
    .lines-filled .line-3--active.line-3-3 {
      -webkit-clip-path: inset(0 0 0 0);
              clip-path: inset(0 0 0 0); }

.devtest__graph__filled.title1-clicked {
  -webkit-clip-path: inset(0 0 0 32.9%);
          clip-path: inset(0 0 0 32.9%);
  -webkit-transition: none;
  transition: none; }
  .devtest__graph__filled.title1-clicked .oval-filled--3 {
    -webkit-transition: fill 2s;
    transition: fill 2s;
    fill: #D6433C; }
  .devtest__graph__filled.title1-clicked .oval4-filled {
    opacity: 0; }

.devtest__graph__filled.title2-clicked {
  -webkit-clip-path: inset(0 0 0 27.2%);
          clip-path: inset(0 0 0 27.2%);
  -webkit-transition: none;
  transition: none; }
  .devtest__graph__filled.title2-clicked .oval-filled--3 {
    -webkit-transition: fill 2s;
    transition: fill 2s;
    fill: #F2862B; }
  .devtest__graph__filled.title2-clicked .oval4-filled {
    opacity: 0; }

.lines-filled.title1-clicked .line-2 {
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
  opacity: 0; }

.lines-filled.title1-clicked .line-3 {
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
  opacity: 0; }

.lines-filled.title2-clicked .line-1 {
  display: none; }

.lines-filled.title2-clicked .line-3 {
  display: none; }

.devtest__graph-demension {
  position: absolute;
  line-height: 1.2;
  color: #A0A0A0;
  background-color: #dbdbdb; }

.devtest__graph-top-left {
  top: 0;
  left: -2.5rem; }

.devtest__graph-top-right {
  top: 0;
  right: 0; }

.devtest__graph-bottom-left {
  left: -2rem;
  bottom: 1rem; }

.devtest__graph-bottom-right {
  right: -1.6rem;
  bottom: 1rem; }

.xy {
  left: -1.4375rem;
  top: -1.25rem; }

.ie .devtest__graph-title.devtest__graph-title-1 {
  display: none; }

.ie .devtest__graph-title.devtest__graph-title-2 {
  display: none; }

.ie .devtest__graph-title.devtest__graph-title-3 {
  opacity: 1;
  padding-top: 9.375rem;
  padding-left: 5.8125rem;
  font-size: 1.3125rem; }

.loading {
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #1f1f1f; }
  .loading__logo-container {
    position: absolute;
    top: 9.6875rem;
    left: -webkit-calc(50% - 2.5rem);
    left: calc(50% - 2.5rem);
    width: 5rem;
    height: 5rem;
    fill: #d9793e;
    pointer-events: all;
    cursor: pointer; }
  .loading__text {
    position: absolute;
    top: -webkit-calc(50% - 13.25rem / 2);
    top: calc(50% - 13.25rem / 2);
    left: -webkit-calc(50% - 48.3125rem / 2);
    left: calc(50% - 48.3125rem / 2);
    width: 48.3125rem;
    height: 13.25rem;
    background-image: url("../../img/loading-text.png");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat; }

html, body {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

html {
  font-size: 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: white; }
  @media (min-width: 16px) and (max-width: 1279px) {
    html {
      font-size: 10px; } }
  @media (min-width: 1280px) and (max-width: 1387px) {
    html {
      font-size: 10.6px; } }
  @media (min-width: 1388px) and (max-width: 1497px) {
    html {
      font-size: 12px; } }
  @media (min-width: 1498px) and (max-width: 1614px) {
    html {
      font-size: 13px; } }
  @media (min-width: 1615px) and (max-width: 1779px) {
    html {
      font-size: 14px; } }
  @media (min-width: 1780px) and (max-width: 1919px) {
    html {
      font-size: 15px; } }
  @media (min-width: 1920px) and (max-height: 1079px) {
    html {
      font-size: 15px; } }
  @media (min-width: 1920px) and (min-height: 1080px) {
    html {
      font-size: 16px; } }
  @media (min-width: 1921px) and (max-width: 2200px) {
    html {
      font-size: 17px; } }
  @media (min-width: 2201px) and (max-width: 3000px) {
    html {
      font-size: 18px; } }
  @media (min-width: 3001px) {
    html {
      font-size: 22px; } }

div {
  box-sizing: border-box; }

a {
  color: white;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    color: white; }

.pointerEvents {
  pointer-events: all; }

.ru,
.en {
  display: inline-block; }

.lang-ru .ru {
  display: inline-block; }

.lang-ru .en {
  display: none; }

.lang-en .ru {
  display: none; }

.lang-en .en {
  display: inline-block; }

.user-select {
  pointer-events: all;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text; }

.col-stroke {
  -webkit-transition: stroke 0.3s;
  transition: stroke 0.3s; }

.col-fill {
  -webkit-transition: fill 0.3s;
  transition: fill 0.3s; }

svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%; }

.sub {
  display: inline;
  position: relative;
  bottom: -0.1rem;
  vertical-align: sub;
  font-size: smaller; }

.ie .ie-hide {
  display: none !important; }