/*!
Theme Name: kts
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kts
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
/* WOFF2 first (35 KB instead of 53 KB per face); woff/eot/ttf stay as fallbacks. */
@font-face {
  font-family: "DIN Pro";
  font-display: swap;
  src: url("fonts/DINPro/DINPro.woff2") format("woff2"),
    url("fonts/DINPro/DINPro.woff") format("woff"),
    url("fonts/DINPro/DINPro.eot") format("embedded-opentype"),
    url("fonts/DINPro/DINPro.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "DIN Pro";
  font-display: swap;
  src: url("fonts/DINPro/DINPro-Medium.woff2") format("woff2"),
    url("fonts/DINPro/DINPro-Medium.woff") format("woff"),
    url("fonts/DINPro/DINPro-Medium.eot") format("embedded-opentype"),
    url("fonts/DINPro/DINPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "DIN Pro";
  font-display: swap;
  src: url("fonts/DINPro/DINPro-Bold.woff2") format("woff2"),
    url("fonts/DINPro/DINPro-Bold.woff") format("woff"),
    url("fonts/DINPro/DINPro-Bold.eot") format("embedded-opentype"),
    url("fonts/DINPro/DINPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Ping FangSC";
  font-display: swap;
  src: url("fonts/PingFangSC/PingFang-SC-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Ping FangSC";
  font-display: swap;
  src: url("fonts/PingFangSC/PingFang-SC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Ping FangSC";
  font-display: swap;
  src: url("fonts/PingFangSC/PingFang-SC-Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Ping FangSC";
  font-display: swap;
  src: url("fonts/PingFangSC/PingFang-SC-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Teko";
  font-display: swap;
  src: url("fonts/Teko/Teko-Light.eot") format("embedded-opentype"),
    url("fonts/Teko/Teko-Light.woff2") format("woff2"),
    url("fonts/Teko/Teko-Light.woff") format("woff"),
    url("fonts/Teko/Teko-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Teko";
  font-display: swap;
  src: url("fonts/Teko/Teko-Regular.eot") format("embedded-opentype"),
    url("fonts/Teko/Teko-Regular.woff2") format("woff2"),
    url("fonts/Teko/Teko-Regular.woff") format("woff"),
    url("fonts/Teko/Teko-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Teko";
  font-display: swap;
  src: url("fonts/Teko/Teko-SemiBold.eot") format("embedded-opentype"),
    url("fonts/Teko/Teko-SemiBold.woff2") format("woff2"),
    url("fonts/Teko/Teko-SemiBold.woff") format("woff"),
    url("fonts/Teko/Teko-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Teko";
  font-display: swap;
  src: url("fonts/Teko/Teko-Bold.eot") format("embedded-opentype"),
    url("fonts/Teko/Teko-Bold.woff2") format("woff2"),
    url("fonts/Teko/Teko-Bold.woff") format("woff"),
    url("fonts/Teko/Teko-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "DIN Pro Condensed";
  font-display: swap;
  src: url("fonts/DINPro/DINPro-CondensedRegular.eot")
      format("embedded-opentype"),
    url("fonts/DINPro/DINPro-CondensedRegular.woff") format("woff"),
    url("fonts/DINPro/DINPro-CondensedRegular.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "DIN Pro Condensed";
  font-display: swap;
  src: url("fonts/DINPro/DINPro-CondensedBold.eot") format("embedded-opentype"),
    url("fonts/DINPro/DINPro-CondensedBold.woff") format("woff"),
    url("fonts/DINPro/DINPro-CondensedBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  font-display: swap;
  src: url("fonts/Roboto/Roboto-Regular.eot") format("embedded-opentype"),
    url("fonts/Roboto/Roboto-Regular.woff") format("woff"),
    url("fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  font-display: swap;
  src: url("fonts/Roboto/Roboto-Medium.eot") format("embedded-opentype"),
    url("fonts/Roboto/Roboto-Medium.woff") format("woff"),
    url("fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

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

*:after,
*:before {
  display: inline-block;
  vertical-align: middle;
}

::-webkit-input-placeholder {
  color: #6a6a6a;
  opacity: 1;
}

:-moz-placeholder {
  color: #6a6a6a;
  opacity: 1;
}

::-moz-placeholder {
  color: #6a6a6a;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #6a6a6a;
  opacity: 1;
}

::-ms-input-placeholder {
  color: #6a6a6a;
  opacity: 1;
}

::placeholder {
  color: #6a6a6a;
  opacity: 1;
}

body {
  line-height: 1.2;
  font-size: 16px;
  color: #000;
  position: relative;
  font-family: "DIN Pro", sans-serif;
  background: #fff;
  padding: 0;
  margin: 0;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

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

p {
  margin: 0;
}

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

img {
  vertical-align: middle;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: auto;
}

a {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  color: inherit;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

a:hover {
  color: #51b046;
  text-decoration: none;
}

button,
input,
textarea {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

textarea {
  resize: none;
}

input,
textarea,
button,
.swiper-button {
  outline: none;
  border: 0;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
  width: 100%;
}

.swiper-container-fade .swiper-slide:not(.swiper-slide-active) {
  opacity: 0 !important;
}

@media (min-width: 1451px) {
  .cn-container {
    max-width: 1450px;
  }
}

@media (min-width: 1600px) {
  .cn-container {
    max-width: 1600px;
  }
}

/*
@media (max-width: 575px){
	.cn-container {
	    max-width: 320px;
	}
}
*/

@-webkit-keyframes img-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0.8;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0.2;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@-moz-keyframes img-hover {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0.8;
    -moz-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0.2;
    -moz-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@-o-keyframes img-hover {
  0% {
    opacity: 0;
    -o-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0.8;
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0.2;
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes img-hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0.8;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0.2;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@-webkit-keyframes img-hover-inner {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

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

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

@-moz-keyframes img-hover-inner {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }

  40% {
    -moz-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-o-keyframes img-hover-inner {
  0% {
    -o-transform: scale(1);
    transform: scale(1);
  }

  40% {
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes img-hover-inner {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  40% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* Bootstrap */

.wrap {
  overflow: hidden;
}

.hide {
  display: none;
}

.tabs-body {
  display: none;
}

/* Modal */

.blocker {
  z-index: 10;
}

/* Section */

.section {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

/* Mobile */

.mobile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(var(--vh, 1vh) * 100);
}

.mobile-over {
  display: none;
}

.mobile-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: #dddddd;
  min-height: 100px;
}

.mobile-body {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  overflow: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* Текста */

.typo-word {
  font-size: 1.5em;
  font-weight: 500;
}

.typo-motto {
  font-weight: 500;
  text-decoration: underline;
}

.typo-term {
  font-size: 0.88em;
  font-weight: 500;
  line-height: 1.3;
}

.typo-faith {
  font-size: 5.38em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
  font-weight: 300;
}

.typo-say {
  font-size: 1.88em;
}

.typo-note {
  font-size: 3em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
}

.typo-rumor {
  line-height: 2;
}

.typo-wash {
  font-size: 5.13em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
  font-weight: 300;
}

.typo-guide {
  font-size: 0.94em;
  font-weight: 700;
}

.typo-lead {
  font-size: 2.2em;
  font-weight: 500;
}

.typo-speech {
  line-height: 1.8;
}

.typo-tie {
  font-size: 3.75em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
  font-weight: 300;
}

.typo-talk {
  font-size: 0.88em;
  line-height: 1.8;
}

.typo-the {
  font-size: 2em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  font-weight: 400;
}

.typo-utter {
  font-size: 3.75em;
}

.typo-exile {
  font-size: 2.25em;
}

.typo-have {
  font-family: Teko, "DIN Pro Condensed", sans-serif;
  font-weight: 300;
}

.typo-floor {
  font-size: 2.38em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  font-weight: 500;
  line-height: 1.3;
}

.typo-unite {
  font-size: 1.38em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  font-weight: 500;
  line-height: 1.6;
}

.typo-into {
  font-size: 0.88em;
  font-family: DIN Pro Condensed;
  font-weight: 700;
}

.typo-gossip {
  font-size: 1.63em;
  font-weight: 500;
}

.typo-guide-2 {
  font-size: 1.13em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
}

.typo-wash-2 {
  font-size: 0.88em;
  font-weight: 500;
}

.typo-speech-2 {
  font-size: 2em;
  font-weight: 700;
}

.typo-the-2 {
  font-size: 2.13em;
  font-weight: 500;
}

.typo-into-2 {
  font-weight: 500;
}

.typo-talk-2 {
  font-size: 2.5em;
}

.typo-exile-2 {
  font-size: 1.38em;
}

.typo-faith-2 {
  font-weight: 500;
  line-height: 1.1;
}

.typo-have-2 {
  font-size: 1.38em;
  font-weight: 500;
  line-height: 1.4;
}

.typo-rumor-2 {
  font-size: 1.38em;
  font-weight: 500;
  line-height: 1.1;
}

.typo-gossip-2 {
  font-size: 1.13em;
  font-weight: 500;
  line-height: 1.8;
}

.typo-word-2 {
  line-height: 1.6;
}

.typo-utter-2 {
  font-size: 1.63em;
  font-weight: 500;
  line-height: 1.8;
}

.typo-unite-2 {
  font-weight: 500;
  line-height: 1.4;
}

.typo-tie-2 {
  font-size: 2.88em;
}

.typo-lead-2 {
  font-size: 1.23em;
  line-height: 1.8;
}

.typo-note-2 {
  font-size: 2em;
  line-height: 1.8;
}

.typo-term-2 {
  font-size: 1.13em;
  line-height: 1.6;
}

.typo-say-2 {
  font-size: 1.5em;
  line-height: 1.8;
}

.typo-motto-2 {
  font-size: 1.5em;
  line-height: 1.5;
}

.typo-floor-2 {
  font-size: 1.13em;
  font-weight: 500;
}

.typo-unite-3 {
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.8;
}

.typo-wash-3 {
  text-decoration: underline;
}

.typo-note-3 {
  font-weight: 500;
  line-height: 1.8;
}

.typo-lead-3 {
  font-size: 2em;
  font-weight: 500;
}

.typo-talk-3 {
  font-size: 1.48em;
  font-weight: 500;
}

.typo-guide-3 {
  font-size: 1em;
  line-height: 1.6;
}

.typo-tie-3 {
  font-size: 1.13em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  font-weight: 500;
}

.typo-say-3 {
  font-size: 2.38em;
}

.typo-term-3 {
  font-size: 1.13em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  line-height: 1.8;
}

.typo-floor-3 {
  font-size: 1.63em;
}

.typo-faith-3 {
  font-size: 1.38em;
  line-height: 1.8;
}

.typo-exile-3 {
  font-size: 2em;
  font-weight: 500;
  line-height: 1.4;
}

.typo-into-3 {
  font-size: 1.13em;
  font-weight: 500;
  line-height: 1.4;
}

.typo-gossip-3 {
  font-size: 0.81em;
  line-height: 1.4;
}

.typo-word-3 {
  line-height: 1.7;
}

.typo-roboto {
  font-family: "Roboto";
}

/* Color */

.color__black {
  color: #000000;
}

.color__astronaut-blue {
  color: #00395d;
}

.color__teal-blue {
  color: #033758;
}

.color__abbey {
  color: #505a5c;
}

.color__apple {
  color: #51b046;
}

.color__white {
  color: #ffffff;
}

.color__caribbean-green {
  color: #02bc94;
}

.color__caribbean-green {
  color: #03bc94;
}

.color__teal-orange {
  color: #ed7441;
}

/* Btn */

.btn {
  cursor: pointer;
  display: inline-block;
  padding-left: 0.8em;
  padding-right: 0.8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 0px none #ddd;
  background-color: transparent;
  text-align: center;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.btn-stud {
  color: #51b046;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #ffffff;
  border: 2px solid #51b046;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 3.91em;
}

.btn-clac {
  color: #ffffff;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #51b046;
  border: 2px solid #51b046;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 3em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.btn-clac:hover {
  background-color: #fff;
}

.Bitrix24Form input[type="submit"],
.btn-clasp {
  color: #ffffff;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #033758;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 3.91em;
  cursor: pointer;
}

.btn-hook {
  color: #ffffff;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 500;
  text-transform: uppercase;
  background-color: transparent;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 3.91em;
  border: 2px solid #ffffff;
}

.btn-prime {
  color: #00395d;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 700;
  text-transform: uppercase;
  background-color: #ffffff;
  border: 2px solid #00395d;
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: top;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 3.91em;
}

.btn-prime.btn--green {
  background-color: transparent;
  color: #51b046;
  border-color: #51b046;
}

.btn-prime.btn--red {
  background-color: transparent;
  color: #ed7441;
  border-color: #ed7441;
}

.btn-prime.btn--palegreen {
  background-color: transparent;
  color: #03bc94;
  border-color: #03bc94;
}

.color__green {
  color: #51b046;
}

.color__red {
  color: #ed7441;
}

.color__palegreen {
  color: #03bc94;
}

.color__white {
  color: #ffffff;
}

.btn-clasp.btn--green {
  background-color: #51b046;
}

.btn-clasp.btn--red {
  background-color: #ed7441;
}

.btn-clasp.btn--palegreen {
  background-color: #03bc94;
}

.Bitrix24Form input[type="submit"]:hover,
.btn-clasp:hover {
  background-color: #ffffff;
  color: #00395d;
  -webkit-box-shadow: 0 0 0 2px #00395d;
  -moz-box-shadow: 0 0 0 2px #00395d;
  box-shadow: 0 0 0 2px #00395d;
}

.btn-clasp.btn--green:hover {
  color: #51b046;
  -webkit-box-shadow: 0 0 0 2px #51b046;
  -moz-box-shadow: 0 0 0 2px #51b046;
  box-shadow: 0 0 0 2px #51b046;
}

.btn-clasp.btn--red:hover {
  color: #ed7441;
  -webkit-box-shadow: 0 0 0 2px #ed7441;
  -moz-box-shadow: 0 0 0 2px #ed7441;
  box-shadow: 0 0 0 2px #ed7441;
}

.btn-clasp.btn--palegreen:hover {
  color: #03bc94;
  -webkit-box-shadow: 0 0 0 2px #03bc94;
  -moz-box-shadow: 0 0 0 2px #03bc94;
  box-shadow: 0 0 0 2px #03bc94;
}

.btn-prime:hover {
  background-color: #00395d;
  color: #ffffff;
}

.btn-stud:hover {
  background-color: #51b046;
  color: #ffffff;
}

.btn-hook:hover {
  background-color: #ffffff;
  color: #00395d;
}

/* Form */

.form-control {
  border: 1px solid #dddddd;
  padding-left: 0.6em;
  padding-right: 0.6em;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 100%;
}

.form-group {
  margin-bottom: 0.6em;
}

.form-label {
  display: block;
  font-weight: 400;
}

.form-checkbox {
  position: relative;
  vertical-align: middle;
  padding-left: 1.7em;
}

/* Input */

.input {
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.input-stripe {
  color: #ffffff;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 400;
  line-height: 1.2;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.65);
  display: block;
  width: 100%;
  height: 4.26em;
  padding-left: 1.7em;
  padding-right: 1.7em;
}

#form-calc {
  font-family: Arial, Helvetica, sans-serif;
}

.Bitrix24Form label {
  display: none !important;
}

input,
.input-field {
  color: #232;
  font-size: 0.88em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  /* background-color: #ffffff; */
  border: 1px solid #cacaca;
  display: block;
  width: 100%;
  height: 3.91em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder,
.input-field::-webkit-input-placeholder {
  color: #232;
}

textarea::-moz-placeholder,
input::-moz-placeholder,
.input-field:-moz-placeholder {
  color: #232;
}

textarea::-moz-placeholder,
input::-moz-placeholder,
.input-field::-moz-placeholder {
  color: #232;
}

textarea::-ms-input-placeholder,
input::-ms-input-placeholder,
.input-field:-ms-input-placeholder {
  color: #232;
}

textarea::-ms-input-placeholder,
input::-ms-input-placeholder,
.input-field::-ms-input-placeholder {
  color: #232;
}

textarea::placeholder,
input::placeholder,
.input-field::placeholder {
  color: #232;
}

.input-field:hover::-webkit-input-placeholder,
.input-field:focus::-webkit-input-placeholder {
  color: #232;
}

.input-field:hover:-moz-placeholder,
.input-field:focus:-moz-placeholder {
  color: #000;
}

.input-field:hover::-moz-placeholder,
.input-field:focus::-moz-placeholder {
  color: #000;
}

.input-field:hover:-ms-input-placeholder,
.input-field:focus:-ms-input-placeholder {
  color: #000;
}

.input-place {
  color: #7b8c8f;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 400;
  line-height: 1.2;
  background-color: #ffffff;
  border: 1px solid #f4f4f4;
  display: block;
  width: 100%;
  height: auto;
  min-height: 8.59em;
  padding-left: 1.43em;
  padding-right: 1.43em;
  padding-top: 1.13em;
  padding-bottom: 1.13em;
}

.input-entry {
  color: #7b8c8f;
  font-size: 1em;
  font-family: DIN Pro;
  font-weight: 400;
  line-height: 1.2;
  background-color: #ffffff;
  border: 2px solid #f4f4f4;
  display: block;
  width: 100%;
  height: 3.44em;
  padding-left: 1.3em;
  padding-right: 1.3em;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

textarea,
.input-expanse {
  color: #7b8c8f;
  font-size: 0.88em;
  font-family: DIN Pro;
  font-weight: 400;
  line-height: 1.2;
  background-color: #ffffff;
  border: 1px solid #f4f4f4;
  padding-left: 1.56em;
  padding-right: 1.56em;
  display: block;
  width: 100%;
  height: auto;
  min-height: 11.36em;
  padding-top: 1.03em;
}

.input-entry:after {
  content: url(img/icons/select.svg);
  border: 0;
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  top: 50%;
  right: 13px;
  position: absolute;
  width: auto;
  height: auto;
  margin-top: -7px;
  opacity: 0.48;
}

.input-entry.open:after {
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  opacity: 1;
}

.input-stripe:hover,
.input-stripe:focus {
  border-color: #ffffff;
}

.input-stripe::-webkit-input-placeholder {
  color: #dddddd;
}

.input-stripe:-moz-placeholder {
  color: #dddddd;
}

.input-stripe::-moz-placeholder {
  color: #dddddd;
}

.input-stripe:-ms-input-placeholder {
  color: #dddddd;
}

.input-stripe::-ms-input-placeholder {
  color: #dddddd;
}

.input-stripe::placeholder {
  color: #dddddd;
}

.input-stripe:hover::-webkit-input-placeholder,
.input-stripe:focus::-webkit-input-placeholder {
  color: #ffffff;
}

.input-stripe:hover:-moz-placeholder,
.input-stripe:focus:-moz-placeholder {
  color: #ffffff;
}

.input-stripe:hover::-moz-placeholder,
.input-stripe:focus::-moz-placeholder {
  color: #ffffff;
}

.input-stripe:hover:-ms-input-placeholder,
.input-stripe:focus:-ms-input-placeholder {
  color: #ffffff;
}

.input-stripe:hover::-ms-input-placeholder,
.input-stripe:focus::-ms-input-placeholder {
  color: #ffffff;
}

.input-stripe:hover::placeholder,
.input-stripe:focus::placeholder {
  color: #ffffff;
}

textarea:hover,
textarea:focus,
input:hover,
input:focus,
.input-field:hover,
.input-place:hover,
.input-expanse:hover,
.input-field:focus,
.input-place:focus,
.input-expanse:focus {
  border-color: #00395d;
}

/* Shape */

.shape__too {
  background-color: #f7f7f7;
}

.shape__query {
  background-color: rgba(15, 68, 99, 0.85);
}

.shape__station {
  background-color: #ebeded;
}

.shape__entry {
  background-color: #00395d;
}

.shape__piece {
  background-color: #ffffff;
}

/* Элементы */

.elem-ask {
  padding-top: 0.73em;
  padding-bottom: 0.73em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.elem-pup {
  margin-top: -9em;
}

.elem-idem {
  display: block;
  position: relative;
  top: -0.8em;
  margin-bottom: -0.9em;
}

.elem-name {
  position: relative;
}

.elem-map {
  background-color: #dddddd;
  height: 33.71em;
}

.elem-img-hover {
  position: relative;
  overflow: hidden;
}

.elem-ask:before {
  content: url(img/icons/ask.svg);
  margin-right: 0px;
}

.elem-wath:before {
  content: url(img/icons/wath.svg);
  margin-right: 0.8em;
  -webkit-transition: all 110ms;
  -o-transition: all 110ms;
  -moz-transition: all 110ms;
  transition: all 110ms;
}

.elem-ask:hover {
  color: #ffffff;
  background-color: #51b046;
  border-color: #51b046;
}

.elem-wath.color__caribbean-green:before {
  content: url(img/icons/wath-lgreen.svg);
}

.elem-wath.color__caribbean-green:hover {
  color: #02bc94;
}

.elem-wath:hover:before {
  -webkit-transform: scaleX(1.08) scaleY(1.08);
  -moz-transform: scaleX(1.08) scaleY(1.08);
  -ms-transform: scaleX(1.08) scaleY(1.08);
  -o-transform: scaleX(1.08) scaleY(1.08);
  transform: scaleX(1.08) scaleY(1.08);
}

.elem-name:before {
  width: 35px;
  height: 3px;
  background-color: #00395d;
  content: "";
  display: block;
  position: absolute;
  left: -2.9em;
  top: 0.78em;
}

.elem-news > * + * {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid #eceeee;
}

.elem-upload:before {
  content: url(img/icons/attach.svg);
  margin-right: 0.7em;
}

.elem-read:after {
  content: url(img/icons/read.svg);
  margin-left: 0.6em;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.elem-read:hover {
  color: #00395d;
}

.elem-read:hover:after {
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
}

.elem-print:before {
  content: url(img/icons/printer.svg);
  margin-right: 0.6em;
}

.elem-back:before {
  content: url(img/icons/back.svg);
  margin-right: 0.6em;
}

.elem-img-hover > img {
  -webkit-transition: all 110ms;
  -o-transition: all 110ms;
  -moz-transition: all 110ms;
  transition: all 110ms;
  -ms-transition: all 110ms;
}

.elem-img-hover:after {
  content: "";
  display: none;
  position: absolute;
  background-color: #51b046;
  opacity: 0;
  border: 2px solid #ffffff;
  border-color: #51b046;
  top: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
  z-index: 1;
}

.elem-img-hover:hover:after {
  -webkit-animation: img-hover 0.8s;
  -moz-animation: img-hover 0.8s;
  -o-animation: img-hover 0.8s;
  animation: img-hover 0.8s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.elem-img-hover:hover > img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

/* Img */

.img-fit-contain {
  -o-object-fit: contain;
  object-fit: contain;
}

.img-fit-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fit-full {
  -o-object-fit: unset;
  object-fit: unset;
}

.img-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100% !important;
  width: 100%;
}

/* Окна */

.white-popup {
  background-color: #ffffff;
  padding: 1.5em 3em;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.modal__success {
  text-align: center;
}

/* Swiper */

.swiper-outside {
  position: relative;
}

.swiper-wrap {
  padding-left: 2.4em;
  padding-right: 2.4em;
  margin-left: -2.4em;
  margin-right: -2.4em;
}

.swiper-bottom {
  position: absolute;
  left: 0;
  bottom: -2.7em;
  right: 0;
}

.swiper-icons .swiper-slide {
  pointer-events: none;
  -webkit-transition: all 230ms;
  -o-transition: all 230ms;
  -moz-transition: all 230ms;
  transition: all 230ms;
  opacity: 0;
}

.swiper-icons .swiper-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.swiper--auto .swiper-wrapper .swiper-slide {
  height: auto;
}

.swiper--same .swiper-wrapper .swiper-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
}

.swiper--same .swiper-wrapper .swiper-slide > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* Swiper-button */

.swiper-button {
  background-image: url(img/icons/swiper-arrow.svg);
  -webkit-background-size: auto auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}

.swiper-button-prev {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.swiper-button--static .swiper-button {
  position: static;
  margin-top: 0px;
}

.swiper-button--long .swiper-button {
  background-image: url(img/icons/swiper-arrow-2.svg);
  width: 3.3em;
}

/* Swiper-pagination */

.swiper-pagination-bullet {
  opacity: 1;
  border: 2px solid #ffffff;
  width: 13px;
  height: 13px;
  background-color: transparent;
}

.swiper-pagination-bullet-active {
  background-color: #ffffff;
}

.swiper-pagination--right {
  top: 0;
  left: auto !important;
  bottom: 0;
  right: 0.8em;
  width: auto !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.swiper-pagination--right .swiper-pagination-bullet {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

.swiper-pagination--static .swiper-pagination > * {
  height: 3px;
  background-color: #00395d;
  display: block;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.swiper-pagination--static .swiper-pagination {
  position: absolute;
  left: 0;
  bottom: -2.1em;
  right: 0;
  background-color: #ebeded;
}

.swiper-pagination--static .swiper-pagination {
  position: static;
}

/* S-head */

.s-head {
  z-index: 10;
}

.s-head__interim {
  background-color: #00395d;
  color: #ffffff;
}

/* S-foot */

.s-foot {
  background-color: #00395d;
  color: #ffffff;
  padding-top: 2em;
  padding-bottom: 1.7em;
}

.s-foot__shebang {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.8em;
  padding-top: 1.6em;
  color: #7b8c8f;
}

/* S-welcome */

.s-welcome {
  background-color: #f8f8f8;
}

.s-welcome__wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
}

.s-welcome__subject {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #51b046;
}

.s-welcome__sweep {
  margin-left: -10.7em;
  margin-right: -7em;
  min-height: 49.1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* S-content */

.s-content {
  padding-top: 5.3em;
  padding-bottom: 5.3em;
}

/* S-reckoning */

.s-reckoning {
  background-color: #0e1b23;
  color: #ffffff;
  padding-top: 9em;
  padding-bottom: 9em;
}

/* S-speedbar */

.s-speedbar {
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  background-color: #f5f5f5;
}

/* S-heading */

.s-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #00395d;
  min-height: 27.6em;
  color: #ffffff;
}

/* B-head */

.b-head {
  padding-top: 1.1em;
  padding-bottom: 1.1em;
}

/* B-notion */

.b-notion {
  background-color: #f7f7f7;
  position: relative;
  padding-top: 9.6em;
  text-align: center;
  padding-bottom: 4.3em;
}

.b-notion__shroud {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-left: 3.1em;
  padding-right: 3.1em;
  padding-top: 2.3em;
  padding-bottom: 2.3em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
}

.b-notion__too {
  mix-blend-mode: multiply;
}

/* B-progress */

.b-progress {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -moz-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative;
  flex-wrap: wrap;
}

.b-progress__faith {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
  color: #00395d;
}

.b-progress__make {
  position: relative;
  padding: 0 10px;
  text-align: center;
}

.b-progress__make:after {
  content: "";
  display: block;
  background-color: #51b046;
  border: 2px solid #ffffff;
  -webkit-box-shadow: 0 0 0 2px #00395d;
  -moz-box-shadow: 0 0 0 2px #00395d;
  box-shadow: 0 0 0 2px #00395d;
  width: 12px;
  height: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.3em;
}

.b-progress:before {
  content: "";
  display: block;
  position: absolute;
  border-top: 1px solid #dddddd;
  left: 0;
  bottom: 6px;
  right: 0;
}

/* B-learn */

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

.b-learn > * {
  -webkit-transition: all 700ms !important;
  -o-transition: all 700ms !important;
  -moz-transition: all 700ms !important;
  transition: all 700ms !important;
}

.b-learn--three > * {
  width: 33.3%;
}

.b-learn--two > * {
  width: 50%;
}

/* E-toggle */

.e-toggle {
  background-image: url(img/icons/menu.svg);
  width: 2.1em;
  height: 1.8em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

/* E-lang */

.e-lang {
  font-size: 0.88em;
  text-transform: uppercase;
  color: rgba(209, 209, 209, 1);
  white-space: nowrap;
}

.e-lang > * + *:before {
  content: "|";
  margin-left: 0.3em;
  margin-right: 0.3em;
  margin-top: -0.1em;
  color: #00395d;
}

.e-lang > span {
  color: #00395d;
}

/* E-menu */

.e-li-menu__gossip > li > a,
.e-menu__gossip {
  font-size: 0.88em;
  font-weight: 500;
  text-transform: uppercase;
}

.e-menu--main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.e-menu--main > li {
  position: relative;
}

.e-menu--main > li.menu-item-has-children > ul > li,
.e-menu--main > li > div > ul {
  background-color: #ffffff;
  /* -webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.21);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.21);
	box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.21); */
  color: #00395d;
}

#footer-menu > li.menu-item-has-children > ul > li {
  background-color: rgba(255, 255, 255, 0.7);
}

.e-menu--main > li.menu-item-has-children > ul > li > a,
.e-menu--main > li > div > ul > li > a {
  display: block;
  font-size: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  text-transform: none;
}

.e-menu--main > li.menu-item-has-children > ul,
.e-menu--main > li > div {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  min-width: 12em;
  padding-top: 1.4em;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  pointer-events: none;
  -webkit-transform: translateY(-11px);
  -moz-transform: translateY(-11px);
  -ms-transform: translateY(-11px);
  -o-transform: translateY(-11px);
  transform: translateY(-11px);
  opacity: 0;
}

.e-menu--main > li.menu-item-has-children:hover > ul,
.e-menu--main > li:hover > div {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.e-menu--mobile > li > div {
  padding-left: 1.2em;
  padding-top: 0.5em;
}

.e-menu--mobile > li > div > ul > li > a {
  display: block;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  position: relative;
}

.e-menu--mobile > li > div > ul > li > a:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #00395d;
  width: 12px;
  height: 2px;
  left: -1em;
  top: 0.9em;
  opacity: 1;
}

/* E-learn */

.e-learn {
  background-color: #f7f7f7;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 3em;
  padding-right: 3em;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.e-learn__img {
  mix-blend-mode: multiply;
  max-width: none;
  width: auto;
}

.e-learn__text {
  height: 9.99em;
  margin-bottom: -2.6em;
  min-width: 400px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.e-learn__btn {
  width: 17.97em;
}

.e-learn--shadow {
  -webkit-box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  z-index: 1;
  position: relative;
}

.e-learn--green .color__teal-blue {
  color: #51b046;
}

.e-learn--green .btn-clasp:not(:hover) {
  background-color: #51b046;
}

.e-learn--palegreen .color__teal-blue {
  color: #02bc94;
}

.e-learn--palegreen .btn-clasp:not(:hover) {
  background-color: #02bc94;
}

.e-learn--palegreen .btn-stud {
  color: #02bc94;
  border-color: #02bc94;
}

.e-learn--palegreen .btn-stud:hover {
  background-color: #02bc94;
  color: #ffffff;
}

.e-learn--red .color__teal-blue {
  color: #ed7441;
}

.e-learn--red .btn-clasp:not(:hover) {
  background-color: #ed7441;
}

.e-learn--red .btn-stud {
  color: #ed7441;
  border-color: #ed7441;
}

.e-learn--red .btn-stud:hover {
  background-color: #ed7441;
  color: #ffffff;
}

.e-learn--lgreen .color__teal-blue {
  color: #02bc94;
}

.e-learn--lgreen .btn-clasp:not(:hover) {
  background-color: #02bc94;
}

.e-learn--lgreen .btn-stud {
  color: #02bc94;
  border-color: #02bc94;
}

.e-learn--lgreen .btn-stud:hover {
  background-color: #02bc94;
  color: #ffffff;
}

.e-learn:hover {
  -webkit-box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  z-index: 1;
  position: relative;
}

/* E-video */

.e-video {
  background-color: #dddddd;
  display: block;
  position: relative;
  overflow: hidden;
}

.e-video:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background-image: url(img/icons/play.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: rgba(81, 176, 70, 0.49);
  -webkit-transition: all 230ms;
  -o-transition: all 230ms;
  -moz-transition: all 230ms;
  transition: all 230ms;
}

.e-video:hover:after {
  -webkit-transform: scaleX(1.07) scaleY(1.07);
  -moz-transform: scaleX(1.07) scaleY(1.07);
  -ms-transform: scaleX(1.07) scaleY(1.07);
  -o-transform: scaleX(1.07) scaleY(1.07);
  transform: scaleX(1.07) scaleY(1.07);
}

.e-video:hover {
  -webkit-box-shadow: 0 0 0 0.7em rgba(81, 176, 70, 0.33);
  -moz-box-shadow: 0 0 0 0.7em rgba(81, 176, 70, 0.33);
  box-shadow: 0 0 0 0.7em rgba(81, 176, 70, 0.33);
}

.e-video.e-video--red:after {
  background-image: url(img/icons/play.svg);
  background-color: rgba(237, 116, 65, 0.49);
}

.e-video.e-video--red:hover {
  -webkit-box-shadow: 0 0 0 0.7em rgba(237, 116, 65, 0.33);
  -moz-box-shadow: 0 0 0 0.7em rgba(237, 116, 65, 0.33);
  box-shadow: 0 0 0 0.7em rgba(237, 116, 65, 0.33);
}

.link-red:hover,
.link-red:focus {
  color: rgba(3, 188, 148, 1);
}

.e-video.e-video--palegreen:after {
  background-image: url(img/icons/play.svg);
  background-color: rgba(3, 188, 148, 0.49);
}

.e-video.e-video--palegreen:hover {
  -webkit-box-shadow: 0 0 0 0.7em rgba(3, 188, 148, 0.33);
  -moz-box-shadow: 0 0 0 0.7em rgba(3, 188, 148, 0.33);
  box-shadow: 0 0 0 0.7em rgba(3, 188, 148, 0.33);
}

.link-palegreen:hover,
.link-palegreen:focus {
  color: rgba(3, 188, 148, 1);
}

/* Типография */

.text > h1 {
  font-size: 2.5em;
}

.text > h2 {
  font-size: 2em;
  color: #033758;
}

.text > h3 {
  font-size: 1.72em;
  color: #033758;
  line-height: 1.4;
}

.text > h4 {
  font-size: 1.5em;
  color: #033758;
  line-height: 1.8;
}

.text > h5 {
  font-size: 1.25em;
  color: #033758;
  font-weight: 500;
  line-height: 1.7;
}

.text > h6 {
  font-size: 1em;
  color: #033758;
}

.text > p {
  font-size: 1.13em;
  line-height: 1.8;
}

.text > ul {
  font-size: 1.13em;
  line-height: 1.8;
}

.text > ol {
  font-size: 1.13em;
  line-height: 1.8;
  padding-left: 1.5em;
  list-style: decimal;
}

.text > * + * {
  margin-top: 1.06em;
}

.text > ul > li {
  padding-left: 1.3em;
  position: relative;
}

.text > ul > li:before {
  content: "";
  display: block;
  position: absolute;
  background: currentColor;
  width: 6px;
  height: 6px;
  left: 0;
  top: 0.8em;
}

.text > ul > li + li {
  margin-top: 0.18em;
}

.text > ol > li + li {
  margin-top: 0.8em;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dee4e7;
  text-align: center;
  padding: 0.5em;
}

td:nth-child(1),
th:nth-child(1) {
  text-align: left;
}

.goods th,
.goods-header th {
  color: #00395d;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  padding-left: 0.7em;
  padding-right: 0.7em;
  padding-bottom: 1em;
}

.goods th,
.goods td {
  border: none;
}

.goods td,
.goods-header td {
  padding: 0.5em;
}

.goods td:nth-child(2) {
  color: #00395d;
  font-weight: 500;
  text-align: right;
}

.goods-header td:not(:nth-child(1)) {
  color: #00395d;
  font-weight: 500;
  text-align: center;
}

.goods td:nth-child(1),
.goods-header td:nth-child(1),
.goods th:nth-child(1),
.goods-header th:nth-child(1) {
  text-align: left;
}

/* E-icon */

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

.e-icon__img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 6.25em;
  margin-bottom: 0.5em;
}

.e-icon__title {
  color: #ffffff;
  font-size: 1.13em;
  padding-left: 2.2em;
  padding-right: 2.2em;
}

/* E-foot-contact */

.e-foot-contact {
  font-size: 0.88em;
}

.e-foot-contact > li {
  padding-left: 1.4em;
  position: relative;
}

.e-foot-contact > li:before {
  position: absolute;
  left: 0;
  top: 0;
}

.e-foot-contact > li + li {
  margin-top: 0.5em;
}

.e-foot-contact__location:before {
  content: url(img/icons/location.svg);
}

.e-foot-contact__email:before {
  content: url(img/icons/email.svg);
  margin-top: 0.2em;
}

/* E-social */

.e-social a:hover {
  -webkit-filter: brightness(162%);
  filter: brightness(162%);
}

/* E-ground */

.e-ground {
  position: relative;
  background-color: #00395d;
  height: 100%;
}

.e-ground > .cn-pn-re {
  display: flex;
  align-items: center;
  height: 100%;
}

/* E-speedbar */

.e-speedbar {
  color: #696969;
  font-size: 0.88em;
  font-weight: 500;
}

.e-speedbar > * + *:before {
  content: "/";
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-top: -0.04em;
}

/* E-list */

.e-list--num {
  list-style: none;
  counter-reset: my-awesome-counter;
  padding-left: 0px;
}

.e-list--check > li {
  padding-left: 1.5em;
  position: relative;
}

.e-list--check > li:before {
  content: url(img/icons/check.svg);
  position: absolute;
  left: 0;
  top: 0.5em;
}

.e-list--check > li + li {
  margin-top: 1.9em;
}

.e-list--squer > li,
.e-list--squer-sm > li,
.e-list--doth > li {
  padding-left: 1.6em;
  position: relative;
  margin-bottom: 0.8rem;
}

.e-list--squer > li:before,
.e-list--squer-sm > li:before,
.e-list--doth > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #00395d;
  left: 0;
  top: 0.5em;
}

.e-list--squer > li + li,
.e-list--squer-sm > li + li,
.e-list--doth > li + li {
  margin-top: 0.3em;
}

.e-list--squer-sm > li + li {
  margin-top: 0.06em;
}

.e-list--squer-sm > li {
  padding-left: 1.1em;
}

.e-list--squer-sm > li:before {
  margin-top: 0.16em;
}

.e-list--doth > li {
  padding-left: 1em;
}

.e-list--doth > li:before {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.e-list--doth > li + li {
  margin-top: 0, 3em;
}

.e-list--params > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.e-list--params > li > *:last-child {
  color: #00395d;
  font-weight: 500;
  text-align: right;
  margin-left: 1em;
}

.e-list--params > li + li {
  margin-top: 0.86em;
}

.e-list--num > li {
  counter-increment: my-awesome-counter;
  position: relative;
  padding-left: 2.5em;
}

.e-list--num > li:before {
  content: counter(my-awesome-counter);
  display: inline-block;
  border: 2px solid #00395d;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  min-width: 26px;
  min-height: 26px;
  line-height: 1.4;
  text-align: center;
  margin-right: 1.1em;
  margin-top: 0.18em;
  position: absolute;
  left: 0;
  top: 0;
}

.e-list--num > li + li {
  margin-top: 0.43em;
}

/* E-program */

.e-program {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.64);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.64);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.64);
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.e-program__idem {
  color: #033758;
  font-size: 1.13em;
  font-family: "DIN Pro", sans-serif; /*Ping FangSC*/
  font-weight: 500;
  padding-left: 1.1em;
  padding-right: 1.1em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 4.9em;
}

.e-program:hover {
  -webkit-box-shadow: 0px 14px 40px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0px 14px 40px rgba(0, 0, 0, 0.44);
  box-shadow: 0px 14px 40px rgba(0, 0, 0, 0.44);
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}

/* E-equipment */

.e-equipment {
  background-color: #f7f7f7;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.e-equipment__kit {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.e-equipment__idem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 1.5em;
  border-top: 1px solid #eceeee;
}

.e-equipment__talk {
  font-weight: 500;
  background-color: #ebeded;
  color: #00395d;
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  padding-left: 1.1em;
  padding-right: 1.1em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.e-equipment__unite {
  font-weight: 500;
  background-color: #51b046;
  color: #ffffff;
  position: absolute;
  text-align: center;
  min-width: 6.7em;
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: rotateZ(-90deg);
  -moz-transform: rotateZ(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
  top: 0;
  right: 100%;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

.e-equipment__go {
  background-color: #ebeded;
  min-height: 4.6em;
  width: 4.6em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: all 270ms;
  -o-transition: all 270ms;
  -moz-transition: all 270ms;
  transition: all 270ms;
}

.e-equipment__object {
  mix-blend-mode: multiply;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
  padding-left: 0.9em;
  padding-right: 0.9em;
  min-height: 19.9em;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.e-equipment--icon {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
}

.e-equipment--item {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
}

.e-equipment__go:after {
  content: url(img/icons/arrow.svg);
  -webkit-filter: brightness(76%);
  filter: brightness(76%);
}

.e-equipment--pluse .e-equipment__object {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-right: 0px;
}

.e-equipment--pluse .e-equipment__go:after,
.e-equipment--icon .e-equipment__go:after,
.e-equipment--item .e-equipment__go:after {
  content: url(img/icons/pluse.svg);
}

.e-equipment--icon .e-equipment__object {
  min-height: 10.3em;
}

.e-equipment--icon .typo-floor-2,
.e-equipment--item .typo-floor-2 {
  font-size: 1em;
  color: #00395d;
}

.e-equipment--item .e-equipment__object img {
  width: 100%;
  height: 100%;
}

.e-equipment--item .e-equipment__object {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: auto;
}

#swiper-sphere .e-equipment--item .e-equipment__object {
  height: 14.9rem;
}

.e-equipment--item .e-equipment__idem {
  border: 0;
}

.e-equipment:hover .e-equipment__go {
  background-color: #00395d;
}

.e-equipment:hover .e-equipment__go:after {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

.e-equipment:hover {
  -webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.4);
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

.swiper-wrapper .e-equipment:hover {
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* E-project */

.e-project {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
}

.e-project__box {
  padding-left: 2.1em;
  padding-right: 2.1em;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
}

/* E-pagination */

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

.page-numbers,
.e-pagination__link {
  min-width: 3.58em;
  padding-top: 1.33em;
  padding-bottom: 1.33em;
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
  color: #033758;
  font-weight: 500;
  text-transform: uppercase;
  background-color: #ebeded;
}

.page-numbers + .page-numbers,
.e-pagination__link + .e-pagination__link {
  margin-left: 0.9em;
}

.page-numbers.current,
.e-pagination__link.active {
  background-color: #00395d;
  color: #ffffff;
}

/* E-tabs */

.e-tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #eceeee;
  margin-bottom: 1.8em;
}

.e-tabs__lead {
  color: #033758;
  font-size: 1.38em;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 0.6em;
  white-space: nowrap;
  cursor: pointer;
}

.e-tabs__lead + .e-tabs__lead {
  margin-left: 2.4em;
}

.e-tabs__lead.active {
  -webkit-box-shadow: 0 2px 0 0 #00395d;
  -moz-box-shadow: 0 2px 0 0 #00395d;
  box-shadow: 0 2px 0 0 #00395d;
}

.e-tabs__lead:hover {
  color: #51b046;
}

/* E-condition */

.e-condition {
  text-align: center;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  -moz-box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
  box-shadow: 0px 4px 40px rgba(194, 194, 194, 0.34);
}

.e-condition__img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 9.95em;
}

.e-condition__title {
  color: #00395d;
  font-weight: 500;
  line-height: 1.4;
  padding-left: 1.4em;
  padding-right: 1.4em;
  padding-bottom: 2em;
}


.t_ru, .t_ua, .t_en {
	display:none;
}

html[lang='uk'] .t_ua{
	display:block;
}
html[lang='ru-RU'] .t_ru{
	display:block;
}
html[lang='en-US'] .t_en{
	display:block;
}

.b-f-bitrix input{
	background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.b-f-bitrix input:hover{
	border: 2px solid white;
}

.b-f-bitrix input[type="submit"]{
	 border: 2px solid #ffffff;
    background: transparent;
    width: 50%;
    float: right;
}
.b-f-bitrix input::placeholder{
	color:rgba(255, 255, 255, 0.65);
}
/* E-drop */

.e-drop {
  position: relative;
}

.e-drop__toggle {
  background-color: #00395d;
  color: #ffffff;
  font-size: 1.13em;
  font-family: Teko, "DIN Pro Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  position: relative;
  cursor: pointer;
}

.e-drop__toggle:hover {
  color: #ffffff;
}

.e-drop__box {
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  padding-top: 1.98em;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
  z-index: 99;
}

.e-drop__list {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 10px 20px rgba(48, 48, 48, 0.34);
  -moz-box-shadow: 0px 10px 20px rgba(48, 48, 48, 0.34);
  box-shadow: 0px 10px 20px rgba(48, 48, 48, 0.34);
  padding-top: 1.6em;
  padding-bottom: 1.6em;
  color: #505a5c;
}

.e-drop__box .e-drop__list a,
.e-drop__term {
  font-size: 0.88em;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
}

.e-drop__list > li {
  padding-left: 1.9em;
  padding-right: 1.9em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.e-drop__box .e-drop__list a:hover,
.e-drop__term:hover {
  text-decoration: underline;
}

.e-drop__toggle:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #00395d;
  width: 1em;
  height: 1em;
  left: 50%;
  bottom: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  margin-left: -0.5em;
  margin-bottom: -0.5em;
  opacity: 0;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
}

.e-drop--green .e-drop__toggle {
  background-color: #51b046;
}

.e-drop--green .e-drop__box .e-drop__list a:hover,
.e-drop--green .e-drop__term:hover {
  color: #51b046;
}

.e-drop--green .e-drop__toggle:after {
  background-color: #51b046;
}

.e-drop--lgreen .e-drop__toggle {
  background-color: #02bc94;
}

.e-drop--lgreen .e-drop__box .e-drop__list a:hover,
.e-drop--lgreen .e-drop__term:hover {
  color: #02bc94;
}

.e-drop--lgreen .e-drop__toggle:after {
  background-color: #02bc94;
}

.e-drop:hover .e-drop__toggle:after {
  opacity: 1;
}

.e-drop:hover .e-drop__box {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.s-foot .e-drop__box {
  top: auto;
  bottom: 100%;
  padding-top: 0px;
  padding-bottom: 1.4em;
}

.s-foot .e-drop__toggle:after {
  bottom: auto;
  top: -0.4em;
}

/*
 * CASCADE
 */

.tabs-body.active {
  display: block;
}

.nice-select {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: none;
}

.nice-select .current {
  line-height: 1.2;
  height: auto;
  display: block;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.nice-select .list {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.nice-select .option {
  height: auto;
  min-height: auto;
  line-height: 1.2;
  padding-top: 0.51em;
  padding-bottom: 0.51em;
  padding-left: 0.73em;
  padding-right: 0.73em;
}

.form-checkbox > input:checked ~ .check:after {
  opacity: 1;
}

.form-checkbox > input,
.form-checkbox > span.check {
  width: 1em;
  height: 1em;
}

.form-checkbox > input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.form-checkbox > span.check {
  border: 1px solid #dddddd;
  display: block;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.form-checkbox > span.check:after {
  position: absolute;
  left: 0.32em;
  top: 0;
  content: "";
  width: 0.4em;
  height: 0.7em;
  border-width: 2px;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  border-color: #000000;
  border-right-style: solid;
  border-bottom-style: solid;
  -webkit-transition: all 200ms;
  -o-transition: all 200ms;
  -moz-transition: all 200ms;
  transition: all 200ms;
  opacity: 0;
}

.ajax-loader {
  display: none !important;
}

.falseinput {
  cursor: pointer;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
  float: none;
  width: 100%;
}

.wpml-ls-legacy-list-horizontal {
  padding: 0;
  border: 0;
}

.e-lang li a {
  position: relative;
  padding: 0;
}

.e-lang li.wpml-ls-current-language a {
  color: #00395d;
}

.e-lang li + li a:before {
  content: "|";
  margin-left: 0.3em;
  margin-right: 0.3em;
  margin-top: -0.1em;
  color: #00395d;
}

/* 
 * Calculator 
 */
.irs-min,
.irs-max,
.irs-single {
  display: none;
}

.irs--square .irs-handle {
  background-color: #51b046;
  border: 2px solid #ffffff;
  -webkit-box-shadow: 0 0 0 2px #00395d;
  -moz-box-shadow: 0 0 0 2px #00395d;
  box-shadow: 0 0 0 2px #00395d;
  cursor: pointer;
}

.irs--square .irs-bar,
.irs--square .irs-line {
  cursor: pointer;
}

.irs--square .irs-handle.state_hover,
.irs--square .irs-handle:hover {
  background-color: #51b046;
  border: 2px solid #51b046;
}

.shape__range {
  border: 2px solid #033758;
}

.shape__thee {
  background-color: #033758;
  color: #fff;
}

.shape__thee .kts-binding,
.shape__thee p {
  color: #bababa;
}

.section-results h3 span {
  color: #51b046;
  margin-left: auto;
}

.section-results li + li {
  margin-top: 1em;
}

.section-results h3 {
  display: flex;
  align-items: flex-end;
}

.section-results .kts-binding {
  flex: 0 0 auto;
  font-size: 0.75em;
  margin-left: 5px;
  min-width: 80px;
}

.s-welcome__slide {
  background-position: center;
  background-size: cover;
}

.btn-clac {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 89;
}

.Bitrix24Form p {
  display: none;
}

/*
 * MEDIA
 */

@media screen and (max-width: 1450px) {
  /* E-icon */

  .e-icon__title {
    padding-left: 0.49em;
    padding-right: 0.49em;
  }
}

@media all and (min-width: 1200px) {
  /* B-learn */

  .b-learn--two > *.active {
    width: 70%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media screen and (max-width: 1199px) {
  /* Swiper */

  .swiper-bottom {
    position: static;
  }

  /* S-welcome */

  .s-welcome__wrap {
    position: relative;
    margin-top: -9.6em;
    background-color: rgba(255, 255, 255, 0.45);
    padding-bottom: 3.5em;
  }

  .s-welcome__subject {
    width: 100%;
  }

  .s-welcome__sweep {
    min-height: 36.1em;
  }

  .s-welcome__corru {
    padding-top: 2.1em;
  }

  .s-welcome__corru:before {
    content: "";
    display: block;
    position: absolute;
    left: -13em;
    top: 0;
    bottom: 0;
    width: 150vw;
    background-color: #f8f8f8;
  }

  /* E-menu */

  .e-menu--main {
    font-size: 0.76em;
  }
}

@media all and (min-width: 992px) {
  /* B-learn */

  .b-learn--three > *.active {
    width: 55%;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
}

@media screen and (max-width: 991px) {
  /* Элементы */

  .elem-map {
    height: calc(var(--vh, 1vh) * 100);
  }

  /* S-foot */

  .s-foot__shebang {
    padding-top: 1.3em;
    margin-top: 2em;
  }

  /* S-welcome */

  .s-welcome__wrap {
    margin-top: -5.9em;
  }

  .s-welcome__sweep {
    min-height: 35.4em;
    margin-left: -4.5em;
    margin-right: -5.5em;
  }

  .s-welcome__corru {
    padding-bottom: 3.6em;
  }

  .s-welcome__corru:before {
    left: -7.9em;
  }

  /* S-reckoning */

  .s-reckoning {
    overflow: hidden;
    padding-top: 4.7em;
    padding-bottom: 4.7em;
  }

  /* B-progress */

  .b-progress__faith {
    font-size: 0.8em;
  }

  /* B-learn */

  .b-learn--three {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .b-learn--three > * {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  /* S-heading */

  .s-heading {
    min-height: 23.1em;
  }

  /* B-progress */

  .b-progress {
    display: block;
  }

  .b-progress__faith {
    font-size: 1.2em;
  }

  .b-progress__make {
    padding-left: 2.2em;
    padding-bottom: 0.5em;
  }

  .b-progress__make:after {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 0.58em;
  }

  .b-progress:before {
    display: none;
  }

  /* B-learn */

  .b-learn--two {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .b-learn--two > * {
    width: 100%;
  }

  #swiper-sphere .e-equipment--item .e-equipment__object {
    height: 20.9rem;
  }
}

@media screen and (max-width: 575px) {
  /* Modal */

  .blocker {
    padding-left: 0em;
    padding-right: 0em;
  }

  /* Mobile */

  .mobile-head {
    min-height: 4.85em;
  }

  /* Swiper */

  .swiper-wrap {
    margin-left: -1em;
    margin-right: -1em;
  }

  /* S-welcome */

  .s-welcome__wrap {
    margin-top: -4.1em;
  }

  .s-welcome__sweep {
    margin-left: -1.7em;
    margin-right: -1.3em;
    min-height: 18.4em;
  }

  /* S-content */

  .s-content {
    padding-top: 2.9em;
    padding-bottom: 2.9em;
  }

  /* S-heading */

  .s-heading {
    min-height: 17em;
  }

  /* B-head */

  .b-head__logo {
    max-width: 9em;
  }

  /* B-notion */

  .b-notion {
    padding-bottom: 7.2em;
    padding-top: 12.3em;
  }

  .b-notion__shroud {
    padding-left: 1.6em;
    padding-right: 1.6em;
    padding-top: 0.9em;
  }

  /* E-learn */

  .e-learn {
    padding-left: 1.9em;
    padding-right: 1.9em;
  }

  .e-learn__img {
    -webkit-transform: translateX(1.9em);
    -moz-transform: translateX(1.9em);
    -ms-transform: translateX(1.9em);
    -o-transform: translateX(1.9em);
    transform: translateX(1.9em);
    max-width: 185%;
  }

  .e-learn__text {
    min-width: auto;
    height: auto;
    margin-bottom: 0px;
  }

  .e-learn__btn {
    width: 100%;
  }

  /* E-equipment */

  .e-equipment {
    font-size: 0.78em;
  }

  /* E-project */

  .e-project__box {
    padding-left: 1.1em;
    padding-right: 1.1em;
    padding-top: 0.8em;
    padding-bottom: 1.1em;
  }

  /* E-tabs */

  .e-tabs {
    overflow: auto;
    font-size: 0.84em;
  }

  /* E-drop */

  .e-drop {
    font-size: 0.86em;
  }

  .e-drop__box {
    right: 0;
  }

  .e-drop__list {
    padding-top: 0.88em;
    padding-bottom: 0.88em;
  }

  .e-drop__term {
    font-size: 0.7em;
  }

  .e-drop__list > li {
    padding-left: 0.7em;
    padding-right: 0.7em;
  }
}

/*
 * HOME / INNIO / BAKER SLIDER — spec "Pack 1", task 2.
 * Deliberately at the end of the file: it has to win over the earlier media
 * queries in this same style.css.
 */

/* 1. Width: the slider no longer stretches across the whole screen */

.s-welcome .swiper-container {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  /* The light-grey plate moves from the section to the slider itself: slides
     that have no picture of their own (phones) keep it, while the margins
     beside the 1920px slider on wider screens take the page's white. */
  background-color: #f8f8f8;
}

.s-welcome {
  background-color: #fff;
}

/* 2. Height: viewport minus header (100px; 60px on narrow screens), capped at
      the 785px of the mockup. On a tall screen the slide no longer grows past
      the design; on a short one it still shrinks to fit the window.
      Swiper's autoHeight is off in js/app.js, otherwise it overwrites this. */

.s-welcome .swiper-container,
.s-welcome .swiper-wrapper,
.s-welcome .swiper-slide,
.s-welcome__slide {
  height: calc(100vh - var(--kts-header-h, 100px));
  height: min(785px, calc(100vh - var(--kts-header-h, 100px)));
}

.s-welcome__slide {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.s-welcome__slide > .cn-container {
  width: 100%;
}

/* The right-hand picture fits into the slide instead of driving its height */

.s-welcome__sweep {
  min-height: 0;
  max-height: 100%;
}

.s-welcome__sweep img {
  max-height: calc(100vh - var(--kts-header-h, 100px));
  max-height: min(785px, calc(100vh - var(--kts-header-h, 100px)));
  -o-object-fit: contain;
  object-fit: contain;
}

/* 3. Tint over the photo: without it a white heading is unreadable on light
      shots. Gradient and its angle come from the mockup. */

.s-welcome__slide--photo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(158.22deg, rgba(40, 132, 183, 0.7) 0%, rgba(0, 57, 93, 0.9) 59.5%);
  background: linear-gradient(-68.22deg, rgba(40, 132, 183, 0.7) 0%, rgba(0, 57, 93, 0.9) 59.5%);
  z-index: 0;
}

.s-welcome__slide--photo > .cn-container {
  position: relative;
  z-index: 1;
}

/* A ready-made picture (backdrop + tint + subject in one file, see
   theme-blocks/s-welcome.php). Its tint is baked in, so the CSS one is off.
   Both such pictures share one geometry: right edge = right edge of the
   mockup frame, the 785px design window at 215px of a 1092px canvas, spare
   backdrop on the left. Right/70% keeps the subject in view whatever the
   proportions of the screen, and puts the window where the mockup has it. */

.s-welcome__slide--flat .s-welcome__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 100% 70%;
  object-position: 100% 70%;
  z-index: 0;
}

.s-welcome__slide--flat:before {
  display: none;
}

/* The subject is part of the background now, not a column of its own, so
   on a screen narrower than the mockup it moves left — under the text. The
   text column narrows with the screen instead: 36vw reaches the mockup's
   558px at ~1550px. Below 1200 the slide is stacked and this does not apply. */

@media screen and (min-width: 1200px) {
  .s-welcome .s-welcome__slide--flat .cn-cols-row > .cn-pn-re:first-child,
  .s-welcome .s-welcome__slide--flat .s-welcome__corru {
    max-width: min(558px, 36vw);
  }
}

/* 4. Heading 2 — new design. clamp instead of a fixed 48px: on short screens
      the size shrinks and the text stays inside the slide. */

.s-welcome .typo-say {
  display: inline-block;
  font-family: "DIN Pro", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  line-height: 1.2;
}

/* The "dark" choice in the admin used to mean nothing: the theme had no
   .color__dark, and the dark colour rode on a hardcoded .color__abbey. */

.color__dark {
  color: #505a5c;
}

/* 5. Button colour: the white choice (added by a filter in functions.php) */

.btn-prime.btn--white {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

@media screen and (max-width: 550px) {
  .s-welcome .swiper-container,
  .s-welcome .swiper-wrapper,
  .s-welcome .swiper-slide,
  .s-welcome__slide {
    height: calc(100vh - 60px);
    height: min(785px, calc(100vh - 60px));
  }

  .s-welcome__sweep img {
    max-height: calc(100vh - 60px);
    max-height: min(785px, calc(100vh - 60px));
  }
}

/*
 * Slider geometry from the mockup (Figma, 1920x785 slide).
 * Everything is scoped to .s-welcome: btn-prime, cn-container and the spacing
 * utilities are used all over the site and must not be changed globally.
 */

/* Text column: the mockup has a 96px left inset at a width of 1920 */

.s-welcome .cn-container {
  max-width: 1920px;
  width: 100%;
  padding-left: clamp(20px, 5vw, 96px);
  padding-right: clamp(20px, 5vw, 96px);
}

.s-welcome .s-welcome__corru {
  max-width: 558px;
}

.s-welcome .cn-cols-row > .cn-pn-re:first-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 558px;
  width: 100%;
}

/* The picture column takes whatever the fixed text column leaves over. With the
   grid's own 8/12 the two no longer fit side by side between ~1200 and ~1900px
   (558px + 66.7% > 100%): the picture wrapped onto a second line, the stack was
   centred in the slide and pushed the text up under the header. */

@media screen and (min-width: 1200px) {
  .s-welcome .cn-cols-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .s-welcome .cn-cols-row > .cn-ord-first--lg {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}

/* Gaps between heading, subheading and button — 40px per the mockup */

.s-welcome .s-welcome__corru .cn-mb-15 {
  margin-bottom: 40px;
}

.s-welcome .s-welcome__corru .cn-mb-45 {
  margin-bottom: 40px;
}

/* Subheading: the mockup uses #F2F3F3, not pure white */

.s-welcome .typo-rumor.color__white {
  color: #f2f3f3;
}

/* Button: the mockup has a 1px border, not 2px. 304x54 already matches. */

.s-welcome .btn-prime {
  border-width: 1px;
  /* The markup puts cn-w-7_12 / cn-w-12_12--xs on the button, so the grid sets
     its width. The mockup fixes it at 304x54, hence the override. */
  width: 304px;
  max-width: 100%;
  min-height: 54px;
}

/* Bullets: 31px from the right edge per the mockup */

.s-welcome .swiper-pagination--right {
  right: 31px;
}

/* The bullets are white outlines; the brand slides brought back on 08.10
   (Baker Hughes, Nidec) are light, and the bullets got lost on them. A soft
   shadow keeps them readable on light slides and is invisible on dark ones. */
.s-welcome .swiper-pagination-bullet {
  -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}

/*
 * Home slider on narrow screens.
 *
 * The narrow-screen layout was built for the previous slides: a light photo,
 * dark text and a light plate behind the text column. The new slides use a
 * full-bleed photo with white text, and that plate covered the photo, leaving
 * white text on white.
 *
 * The 1199px edge is not arbitrary: that is where the theme stacks the slide
 * columns (cn-ord-first--lg) and where the plate is switched on.
 */

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

  /* Height follows the content instead of "viewport minus header": the header
     height is content-driven in this theme (60px on a phone, 108px on a
     tablet), so subtracting a constant per breakpoint would always miss. */
  .s-welcome .swiper-container,
  .s-welcome .swiper-wrapper,
  .s-welcome .swiper-slide {
    height: auto;
    min-height: 60vh;
  }

  /* Swiper's wrapper aligns slides to flex-start, so with content-driven
     heights every slide keeps its own and the tallest one is clipped by the
     container. Stretch them to a common height, and stretch the inner block
     across its cell too — otherwise the background and the tint of a shorter
     slide stop before its neighbour does. */
  .s-welcome .swiper-wrapper {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .s-welcome .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .s-welcome__slide {
    height: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* The #f8f8f8 plate from the old design covered both the photo and the tint. */
  .s-welcome__slide--photo .s-welcome__corru:before {
    display: none;
  }

  /* White-text slides, the same way the site already shows its other slides
     on a phone: the picture on top, the text underneath. White text cannot
     sit on the light plate those use, so its panel is the brand blue — picked
     automatically by "Цвет Текста = white", no extra switch in the admin.
     !important: the photo comes in through an inline style. */
  .s-welcome__slide--photo {
    background-image: none !important;
    background-color: #00395d;
    padding-top: 0;
    /* Picture flush with the top: slides share the height of the tallest
       one, and centring left a strip of blue above a shorter slide's picture. */
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  /* The same stretch showed up under the INNIO slide: its light plate ends
     with the text, and the green behind the picture (.s-welcome__subject is
     full slide height here) showed through below it. Run the plate to the
     bottom; the slide clips it (overflow: hidden). */
  .s-welcome__slide:not(.s-welcome__slide--photo) .s-welcome__corru:before {
    bottom: -100vh;
  }

  .s-welcome__slide--photo:before {
    display: none;
  }

  /* The ready-made picture leaves the background and goes edge to edge above
     the text. Cropped towards the subject, right of centre in both pictures. */
  .s-welcome__slide--flat {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .s-welcome__slide--flat .s-welcome__cover {
    position: static;
    height: var(--kts-slide-pic, 292px);
    max-height: none;
    margin-bottom: 0;
    -o-object-position: 72% 60%;
    object-position: 72% 60%;
  }

  /* Brand slides restored in the review of 08.10 (Baker Hughes): the subject
     sits right of centre in the background photo, and the centred crop of the
     strip above the text showed an empty wall. */
  .s-welcome__slide--bg-only {
    background-position: 82% 30%;
  }

  /* One picture band for every slide (review of 08.10: "однакова висота
     картинок для мобайлу"). Each kind of slide has its picture in a different
     place — the ready-made <img> of the new slides, the cut-out column of
     INNIO / Waukesha / Nidec, the background of Baker Hughes — and each was a
     different height, so the text started at a different level on every slide
     and the slider took the height of the tallest one, leaving a large gap
     under the shorter slides. Now the band is the same everywhere and the text
     starts right under it; the slider height only follows the longest text. */
  .s-welcome {
    --kts-slide-pic: clamp(220px, 62vw, 440px);
  }

  .s-welcome__slide {
    padding-top: 0;
    padding-bottom: 32px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  /* One rhythm under the band for every kind of slide: 28px, the text, the
     button, 32px to the edge. The old text block brought its own em paddings
     (33.6px on top, 57.6px under the button) and the new slides added 32px
     under their picture, so the text sat at two different levels and every
     slide carried ~100px of empty plate under the button. */
  .s-welcome .s-welcome__corru {
    padding-top: 28px;
    padding-bottom: 0;
  }

  /* The button sits at the same height on every slide: the slide is as tall as
     its longest text, and on a slide with a short text the spare room used to
     collect under the button. Now the column chain stretches to the bottom and
     the button is pushed there, so picture, text start and button line up from
     slide to slide. */
  .s-welcome__slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .s-welcome__slide > .cn-container,
  .s-welcome__slide > .cn-container > .cn-cols-row,
  .s-welcome__slide .cn-cols-row > .cn-pn-re:first-child,
  .s-welcome__slide .s-welcome__corru,
  .s-welcome__slide .s-welcome__corru > .cn-pn-re {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    /* Grow, never shrink: shrinking let the longest text overflow its slide
       and the button was clipped at the bottom (412px, Czech). */
    flex: 1 0 auto;
  }

  .s-welcome__slide > .cn-container > .cn-cols-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .s-welcome__slide .cn-cols-row > .cn-ord-first--lg {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .s-welcome__slide .s-welcome__corru > .cn-pn-re > .btn {
    margin-top: auto;
  }

  /* Brand logo of the older slides (Jenbacher, Baker Hughes, Waukesha, Nidec):
     it took the full column width, so on a tablet it grew to ~1060px wide and
     up to 400px tall and the whole slider with it. Capped by height. */
  .s-welcome__slide .s-welcome__corru > .cn-pn-re > img:first-child {
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(72px, 22vw, 120px);
    -o-object-fit: contain;
    object-fit: contain;
  }

  /* Picture column of the older slides (stacked above the text by the theme's
     cn-ord-first--lg). Baker Hughes has no picture of its own: the empty band
     shows its background, cropped towards the turbines (--bg-only above). */
  .s-welcome__slide:not(.s-welcome__slide--flat) .cn-ord-first--lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: var(--kts-slide-pic);
  }

  .s-welcome__slide:not(.s-welcome__slide--flat) .cn-ord-first--lg .s-welcome__sweep {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .s-welcome__slide:not(.s-welcome__slide--flat) .s-welcome__sweep img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }

  /* Bullets in the top right corner, over the picture: on a light panel at
     the bottom they were lost, and they needed a strip of their own there. */
  .s-welcome .swiper-pagination--right {
    top: 16px;
    bottom: auto;
    right: 16px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  /* The right-hand picture is the subject of the slide — a cut-out PNG over a
     backdrop photo, not a copy of it, so it has to stay on narrow screens too.
     The theme's own stacking order (cn-ord-first--lg) puts it above the text,
     which is what the INNIO slide already does — keeping it makes all three
     slides read the same way on a phone.

     Cap the cut-out so the heading, the lead and the button stay in view. */
  .s-welcome__slide--photo .s-welcome__sweep {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .s-welcome__slide--photo .s-welcome__sweep img {
    max-height: 30vh;
    width: auto;
  }

  /* The text column takes the full width: the 558px from the mockup is a value
     for a 1920px screen. */
  .s-welcome .cn-cols-row > .cn-pn-re:first-child,
  .s-welcome .s-welcome__corru {
    max-width: 100%;
  }

  /* Negative margins stretched the picture past the screen (398px in a 390px
     viewport) and risked a horizontal scrollbar. */
  .s-welcome__sweep {
    margin-left: 0;
    margin-right: 0;
  }

  .s-welcome__sweep img {
    max-height: 45vh;
  }
}

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

  /* Button spans the column: the mockup's 304px looks like a stub on a phone. */
  .s-welcome .btn-prime {
    width: 100%;
  }

  /* The 40px gaps from the mockup are sized for 1920 and eat up a phone screen. */
  .s-welcome .s-welcome__corru .cn-mb-15,
  .s-welcome .s-welcome__corru .cn-mb-45 {
    margin-bottom: 24px;
  }

}

/*
 * CONTACTS PAGE — spec "Pack 1", task 3.
 *
 * Two sections of tiles fed by repeaters (inc/contacts.php): "Get in touch" and
 * "Offices". Tile count is arbitrary, so everything is a grid — tiles fill the
 * row and wrap onto the next one by themselves.
 *
 * Colours and sizes come from the mockup (Figma, 1920 frame, 96px side inset).
 * The site container caps at 1600, so the tiles are narrower here than in the
 * file; the grid is fluid and the proportions hold.
 *
 * Deliberately at the end of the file, like the slider block above: it has to
 * win over the earlier media queries in this same style.css.
 */

/* One typeface for the whole page: DIN Pro Medium, as in the mockup. Grouped so
   the family is named once; the rules below set only size, leading and colour. */

.s-contacts__title,
.c-reach__title,
.c-reach__country,
.c-pill,
.c-office__country,
.c-office__city,
.c-office__address,
.c-office__route-text,
.c-office__mail {
  font-family: "DIN Pro", sans-serif;
  font-weight: 500;
}

/* Page title */

/* The page H1, styled like every other page title on the site (.typo-tie-2:
   Regular 46px #00395d), not the mockup's black Medium 64px. */
.s-contacts__title {
  margin: 0;
  padding: clamp(40px, 5vw, 96px) 0;
  font-weight: 400;
  font-size: clamp(32px, 2.4vw, 46px);
  line-height: 1.1;
  color: #00395d;
}

/* Section label: a green square and a letterspaced caption */

.e-sectitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  margin: 0 0 clamp(28px, 3.6vw, 68px);
  font-family: "DIN Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #bbcdd9;
}

.e-sectitle__mark {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: #43b649;
}

.s-contacts__part + .s-contacts__part {
  margin-top: clamp(48px, 6vw, 96px);
}

.s-contacts {
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* Tile grids. Rows of a CSS grid are equal in height by default, which is what
   "fixed tile height" asks for — a tall tile lifts its whole row instead of
   leaving a step. */

.s-contacts__grid {
  display: grid;
  gap: 8px;
}

.s-contacts__grid--reach {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s-contacts__grid--offices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- "Get in touch" tile --- */

.c-reach {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 32px;
  padding: clamp(20px, 2.3vw, 40px);
  background-color: #f2f3f3;
}

.c-reach__title {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #00395d;
}

.c-reach__photo {
  /* Fixed height keeps the contact rows of neighbouring tiles on one line. */
  height: clamp(160px, 14vw, 240px);
  overflow: hidden;
}

.c-reach__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.c-reach__cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: clamp(20px, 3.1vw, 60px);
  /* Pushes the contacts to the bottom of the tile whatever the photo does. */
  margin-top: auto;
}

/* 180px is the floor: below it the phone and the e-mail start breaking across
   lines. A third column therefore wraps under the first two instead of
   squeezing all three. */
.c-reach__col {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 180px;
  flex: 1 1 180px;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}

/* The divider from the mockup. Drawn only when the tile has exactly two
   columns — which is what the design shows. With three or more the columns
   wrap onto a second line, and a rule would then hang at the start of a row
   instead of standing between two columns. */
.c-reach__col:first-child:nth-last-child(2) ~ .c-reach__col {
  padding-left: clamp(20px, 3.1vw, 60px);
  border-left: 1px solid #c2c4c6;
}

/* Room for a second line: "Uzbekistan and Kazakhstan" fits on one line in
   Ukrainian but wraps in English, and without the reserve the pills of the two
   columns would sit at different heights. */
.c-reach__country {
  margin: 0;
  min-height: 2.8em;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #00395d;
}

.c-reach__pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 5px;
}

/* The mockup keeps every pill on one line. Two columns inside a tile leave
   roughly 70% of the mockup width once the site container caps at 1600, so the
   type and the side padding scale down with it; word-break stays as a last
   resort so a very long address can never overflow the tile. */
.c-pill {
  display: inline-block;
  max-width: 100%;
  padding: 10px clamp(10px, 1.1vw, 20px);
  /* Scales with the column below the design width: at 1440 the column is a
     third narrower than the mockup's 330px, and 20px type would not fit. */
  font-size: clamp(12px, 0.95vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #f2f3f3;
  text-decoration: none;
  word-break: break-word;
  transition: background-color 0.2s ease;
}

.c-pill--phone {
  background-color: #145274;
}

.c-pill--mail {
  background-color: #4a7090;
}

a.c-pill:hover,
a.c-pill:focus {
  background-color: #00395d;
  color: #ffffff;
}

/* From here up the container is frozen at 1600 and the rest of the page's type
   is already at the mockup's sizes, so the pill takes its mockup size too. */
@media screen and (min-width: 1600px) {
  .c-pill {
    font-size: 20px;
  }
}

/* --- Office tile --- */

.c-office {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  min-height: 450px;
  padding: clamp(24px, 2.9vw, 50px);
  background-color: #f2f3f3;
}

.c-office__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.c-office__flag {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  height: 29px;
  -o-object-fit: contain;
  object-fit: contain;
}

.c-office__country {
  margin: 0;
  font-size: clamp(20px, 1.67vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #00395d;
}

.c-office__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
}

.c-office__city,
.c-office__address {
  margin: 0;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #58595b;
}

/* Room for a second line: a long address must not change the tile height,
   which is what the brief asks for. A third line still grows the tile.
   Regular: it is body text — the city above it stays Medium as its caption. */
.c-office__address {
  min-height: 2.8em;
  font-weight: 400;
}

.c-office__route {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding: 12px 16px;
  background-color: #43b649;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.c-office__route:hover,
.c-office__route:focus {
  background-color: #2f9c35;
  color: #ffffff;
}

.c-office__route-text {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.c-office__route-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  height: 19px;
}

.c-office__mail {
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #145274;
  text-decoration: none;
  word-break: break-word;
}

.c-office__mail:hover,
.c-office__mail:focus {
  color: #00395d;
  text-decoration: underline;
}

/* --- Narrow screens --- */

@media screen and (max-width: 1199px) {
  .s-contacts__grid--offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablets: two tiles of two columns each left the phone and e-mail pills
     12px wide text (a 16px one tore the e-mail in two). One tile per row keeps
     the two columns and gives the pills their phone size back. */
  .s-contacts__grid--reach {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-pill {
    font-size: 16px;
  }

  /* The desktop height reserves (fixed office tile, two-line country) only
     keep a row of four tiles level; with two per row the grid already evens
     the row out, and the reserves showed as empty gaps inside the tiles. */
  .c-office {
    min-height: 0;
  }

  .c-reach__country {
    min-height: 0;
  }
}

@media screen and (max-width: 767px) {
  .s-contacts__grid--reach,
  .s-contacts__grid--offices {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two contact columns do not fit a phone: they stack, and the divider turns
     from a vertical rule into a horizontal one. */
  .c-reach__cols {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
  }

  /* The columns are stacked now, so flex-grow would stretch them vertically and
     tear a hole between the pills and the next column. */
  .c-reach__col {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  /* Columns are full width once stacked, so the pill stops competing for room
     and goes back to a size that is comfortable to read and to tap. The fluid
     clamp bottoms out at 12px, which only makes sense while two columns share
     a narrow tile. */
  .c-pill {
    font-size: 16px;
  }

  /* Stacked on a phone, so the rule lies flat — and here it makes sense for
     any number of columns, not just two. */
  .c-reach__col + .c-reach__col,
  .c-reach__col:first-child:nth-last-child(2) ~ .c-reach__col {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid #c2c4c6;
  }

  /* Height stops being fixed: on a narrow tile a long address needs the room
     more than the row needs to be even. */
  .c-office {
    min-height: 0;
  }

  .c-office__address {
    min-height: 0;
  }

  /* The two-line reserve only keeps side-by-side pills level; with the columns
     stacked it left an empty line between the country and its phone. */
  .c-reach__country {
    min-height: 0;
  }
}

/*
 * HOMEPAGE — 2026 redesign ("Pack 2").
 *
 * Blocks under the slider: theme-blocks/home-*.php, fields in inc/home.php.
 * Sizes come from the mockup (Figma, 1920 frame, 192px side inset → 1536px of
 * content); the site container caps at 1600, so the proportions hold.
 *
 * The client wants every block to read like a presentation slide — roughly one
 * screen each. Vertical padding therefore scales with the viewport HEIGHT as
 * well as its width: 144px on 1920×1080, less on a 1440×900 laptop.
 *
 * Shared pieces (.kts-btn, .h-title, .h-text) are used by the header dropdowns
 * and the new content blocks too.
 */

/* --- Shared: the green button (inc/ui.php, kts_the_button) --- */

.kts-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  max-width: 100%;
  background-color: #43b649;
  color: #ffffff;
  font-family: "DIN Pro", sans-serif;
  /* Medium: the mockup set these buttons Regular in some places and Medium in
     others; Medium is what the menu and the Contacts page use for anything
     clickable. */
  font-weight: 500;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 16px;
  text-decoration: none;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.kts-btn:hover,
.kts-btn:focus-visible {
  background-color: #2f9c35;
  color: #ffffff;
}

.kts-btn__label {
  padding: 16px;
}

.kts-btn__arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48px;
  background-color: rgba(255, 255, 255, 0.1);
}

.kts-btn__arrow svg {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.kts-btn:hover .kts-btn__arrow svg {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
}

/* --- Shared: section frame and type --- */

.h-section {
  padding: clamp(56px, min(7.5vw, 13.3vh), 144px) 0;
  font-family: "DIN Pro", sans-serif;
  color: #000000;
}

.h-section--grey {
  background-color: #f2f3f3;
}

/* Section title in the site's own key: Regular in brand blue, like the H1 of
   the site's section headings: «Компетенції», «Більше рішень» and the request
   form right below on this page are Medium 35–38px #033758. The mockup's 64px
   black was bigger than any heading on the site. */
.h-title {
  margin: 0;
  font-family: "DIN Pro", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 1.98vw, 38px);
  line-height: 1.15;
  color: #033758;
}

.h-title a {
  color: inherit;
  text-decoration: none;
}

.h-title a:hover {
  color: #43b649;
}

.h-text {
  margin: 0;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #58595b;
}

/* Title row: the heading and, optionally, a lead or a link on the right */

.h-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
  gap: 0 clamp(32px, 5vw, 96px);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  margin-bottom: clamp(32px, 3.34vw, 64px);
}

.h-head--split {
  grid-template-columns: minmax(0, 1fr) auto;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
}

.h-underline-link {
  padding-bottom: 4px;
  border-bottom: 2px solid #43b649;
  font-weight: 500;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.2;
  color: #00395d;
  text-decoration: none;
  white-space: nowrap;
}

.h-underline-link:hover {
  color: #00395d;
}

/* Text link with the arrow (service list, dropdowns) */

.h-arrow-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  font-size: clamp(16px, 0.94vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #00395d;
  text-decoration: none;
}

.h-arrow-link svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}

.h-arrow-link:hover {
  color: #43b649;
}

.h-arrow-link:hover svg {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* --- 01 KTS Engineering --- */

.h-about__row {
  display: grid;
  grid-template-columns: minmax(0, 700fr) minmax(0, 740fr);
  gap: clamp(40px, 5vw, 96px);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.h-about__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 28px;
  margin-top: clamp(32px, 3.34vw, 64px);
}

.h-about__figures {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.h-figure + .h-figure {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #d7dada;
}

.h-figure__value {
  margin: 0;
  font-weight: 700;
  font-size: clamp(56px, 5.42vw, 104px);
  line-height: 1;
  color: #00395d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00395d), to(#1596d1));
  background-image: linear-gradient(180deg, #00395d 0%, #1596d1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h-figure__label {
  margin: clamp(12px, 1.04vw, 20px) 0 0;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.4;
  color: #58595b;
}

/* --- 02 Solutions --- */

.h-solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.h-solution {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(260px, 19vw, 364px);
  padding: clamp(24px, 2.1vw, 40px);
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Hover in the site's own idiom: the soft shadow of the old homepage tiles
   (.e-learn:hover) and the 8px lift of the equipment tiles
   (.e-equipment:hover). On every card, linked or not, like those tiles. */
.h-solution:hover {
  position: relative;
  z-index: 1;
  color: #000000;
  -webkit-box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  box-shadow: -5px 4px 50px rgba(0, 0, 0, 0.24);
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.h-solution--cta:hover {
  color: #ffffff;
}

@media (hover: none) {
  .h-solution:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-solution {
    -webkit-transition: none;
    transition: none;
  }

  .h-solution:hover {
    -webkit-transform: none;
    transform: none;
  }
}

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

/* Icons overlap by 11.6px, as in the mockup */
.h-solution__icon {
  width: clamp(52px, 3.55vw, 68px);
  height: clamp(52px, 3.55vw, 68px);
}

.h-solution__icon + .h-solution__icon {
  margin-left: -11.6px;
}

.h-solution__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}

/* Card titles as on the site's other cards (solutions archive, Contacts
   tiles, the menu): Medium, brand blue — not the mockup's Bold black. */
.h-solution__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.3;
  color: #00395d;
}

.h-solution__text {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #58595b;
}

/* Call-to-action tile: the radial gradient of the mockup, light corner bottom right */
.h-solution--cta {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  background: radial-gradient(141% 141% at 100% 100%, #1596d1 0%, #1073a7 21%, #0a4f7d 42%, #00395d 100%);
  color: #ffffff;
}

.h-solution--cta .h-solution__title {
  color: #ffffff;
}

/* --- 03 Equipment --- */

.h-equipment__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.h-equip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 24px;
}

.h-equip__title {
  font-weight: 500;
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.3;
  color: #00395d;
}

/* Square plate; the 350px picture sits in a 364px plate — 7px of air around */
.h-equip__media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f3f3;
}

.h-equip__img {
  width: 96.15%;
  height: 96.15%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
}

a.h-equip__media:hover .h-equip__img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

/* Descriptions differ in length; this keeps the buttons on one line */
.h-equip__text {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin: 0;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.5;
  color: #58595b;
}

/* --- 04 Service --- */

.h-service__row {
  display: grid;
  grid-template-columns: minmax(0, 480fr) minmax(0, 480fr) minmax(0, 410fr);
  gap: clamp(32px, 4.3vw, 83px);
}

.h-service__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 40px;
}

.h-service__partners {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: clamp(24px, 2.6vw, 50px);
  width: 100%;
}

/* 2×2 logo grid with hairlines between the cells only */
.h-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-logos__cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: clamp(80px, 5.6vw, 107px);
}

.h-logos__cell:nth-child(odd) {
  border-right: 1px solid #d7dada;
}

.h-logos__cell:nth-child(n+3) {
  border-top: 1px solid #d7dada;
}

.h-logos__link,
.h-logos__cell > img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px;
}

.h-logos__img {
  width: auto;
  max-width: min(131px, 80%);
  height: auto;
  max-height: 55px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.h-logos__link:hover .h-logos__img {
  opacity: 0.7;
}

.h-service__photo {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background-color: #f2f3f3;
}

.h-service__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.h-service__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-service__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(18px, 1.67vw, 32px) 0;
  border-bottom: 1px solid #d7dada;
}

.h-service__item:last-child {
  border-bottom: 0;
}

.h-service__num {
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.4;
  color: #d7dada;
}

/* --- 05 Projects --- */

.h-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.h-project {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  color: #000000;
  text-decoration: none;
}

.h-project:hover .h-project__title {
  color: #43b649;
}

.h-project__title {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.h-project__media {
  display: block;
  height: clamp(180px, 13.34vw, 256px);
  overflow: hidden;
  background-color: #f2f3f3;
}

.h-project__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
}

.h-project:hover .h-project__img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

/* The projects block came from a mockup set in Golos (a placeholder font) with
   Regular titles and figures. In DIN Pro it follows the other homepage cards:
   Medium titles, Bold figures like the big numbers of the first block. */
.h-project__title {
  font-weight: 500;
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 1.3;
  color: #00395d;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.h-project__text {
  font-size: clamp(15px, 0.84vw, 16px);
  line-height: 1.5;
  color: #58595b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pinned to the bottom so the figures line up across cards */
.h-project__figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: clamp(8px, 1.6vw, 31px);
}

.h-project__value {
  font-weight: 700;
  font-size: clamp(34px, 2.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #43b649;
}

.h-project__label {
  font-size: 14px;
  line-height: 1.2;
  color: #58595b;
}

/* --- Narrower screens --- */

@media (max-width: 1199px) {
  /* Intro and photo side by side, the list underneath across the full width */
  .h-service__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h-service__list {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991px) {
  /* Cards keep the desktop columns down to 992px: on a 1024 laptop or a
     landscape tablet a 2×2 equipment grid made the block twice a screen tall */
  .h-solutions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h-equipment__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .h-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .h-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .h-about__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Projects become a swipeable row: three cards in two columns would leave
     one orphan, and a horizontal row is what the mockup's container does too */
  .h-projects__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 45%);
    overflow-x: auto;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }

  .h-project {
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .h-solutions__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .h-solution {
    min-height: 0;
  }

  .h-service__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .h-service__photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .h-projects__grid {
    grid-auto-columns: 82%;
  }
}

@media (max-width: 575px) {
  .h-equipment__grid {
    gap: 40px 12px;
  }

  .h-equip__title {
    font-size: 20px;
  }

  .h-equip__text {
    font-size: 15px;
  }

  /* Two narrow columns: the button takes the card's width and the label stays
     on one line (it wrapped into two at 390px) */
  .h-equip .kts-btn {
    width: 100%;
    font-size: 14px;
    white-space: nowrap;
  }

  .h-equip .kts-btn__label {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .h-equip .kts-btn__arrow {
    width: 40px;
  }
}

/*
 * HEADER — 2026 redesign ("Pack 2"), Figma frames "3456ип", «Дроп сервіс»,
 * «Дроп компанія». Markup: header.php + inc/menu.php + menu-item-*.php.
 *
 * Written as overrides on top of scss/main.css (this file loads after it),
 * so the old mechanics stay: hover opens a dropdown from 1191px, below that
 * the full-screen mobile panel with sub-panels. Only the look changes:
 * a white bar, 112px at 1920, DIN Pro Medium items with a 4px underline.
 * Phone and search stay (owner's decision), restyled next to the mail.
 */

/* Header height as a variable: the slider fills "one screen minus the header"
   (see the slider block above), and the header is taller since Pack 2. */
:root {
  --kts-header-h: 100px;
}

@media (min-width: 1191px) {
  :root {
    --kts-header-h: clamp(84px, 5.84vw, 112px);
  }

  .site-header {
    background-color: #ffffff;
    z-index: 50;
  }

  .site-header .header {
    max-width: 1920px;
    min-height: clamp(84px, 5.84vw, 112px);
    padding: 0 clamp(16px, 5vw, 96px);
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: clamp(12px, 1.25vw, 24px);
  }

  .site-header .header__item,
  .site-header .header__item:hover {
    border-right: 0;
  }

  .site-header .header__logo {
    max-width: none;
    width: auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .site-header .header__logo:hover {
    background: none;
  }

  .site-header .header__logo:hover svg path {
    fill: #00395d !important;
  }

  .site-header .header__logo .desk {
    width: clamp(190px, 13.5vw, 259px);
    height: auto;
  }

  .site-header .header__navigation .navigation .navigation__container {
    gap: clamp(10px, 1.46vw, 28px);
  }

  .site-header .header__navigation .navigation .navigation__container .navigation__item {
    margin: 0;
    -webkit-box-shadow: inset 0 -4px 0 #f2f3f3;
    box-shadow: inset 0 -4px 0 #f2f3f3;
  }

  .site-header .header__navigation .navigation .navigation__container .navigation__item:hover,
  .site-header .header__navigation .navigation .navigation__container .navigation__item:has(:focus-visible) {
    -webkit-box-shadow: inset 0 -4px 0 #43b649;
    box-shadow: inset 0 -4px 0 #43b649;
  }

  .site-header .header__navigation .navigation .navigation__container .navigation__item .navigation__link {
    gap: 10px;
    font-family: "DIN Pro", sans-serif;
    /* The production weight (scss/main.css): 300, which DIN Pro renders as
       Regular. The mockup's Medium was not a requested change — the brief
       only asked for the new items and dropdowns. */
    font-weight: 300;
    font-size: clamp(17px, 1.25vw, 24px);
    line-height: 24px;
    letter-spacing: -0.02em;
    /* Brand blue, not the mockup's black: the site's navigation, H1s and links
       have always been #00395d (the old header too), and so is the phone next
       to the menu. */
    color: #00395d;
  }

  .site-header .header__navigation .navigation .navigation__container .navigation__item:hover .navigation__link {
    color: #00395d;
  }

  .site-header .header__navigation .navigation .navigation__container .navigation__item .navigation__link svg {
    margin-left: 0;
  }

  /* Keyboard users: the dropdown also opens while focus is inside the item.
     :focus-visible, not :focus-within — a mouse click focuses the link too,
     and after Back (bfcache) that focus kept the dropdown stuck open. */
  .site-header .navigation__item--drop:has(:focus-visible) .sub-block {
    opacity: 1;
    top: 100%;
    bottom: unset;
  }

  /* Right-hand group: search, mail, language (no phone since 23.10.2026) */
  .site-header .header__mail,
  .site-header .header__search,
  .site-header .header__lang {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .site-header .header__mail,
  .site-header .header__search,
  .site-header .header__lang,
  .site-header .header__logo {
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .site-header .header__mail,
  .site-header .header__search {
    width: 48px;
    min-width: 48px;
    height: 48px;
    background-color: #f2f3f3;
  }

  .site-header .header__mail {
    background-color: #43b649;
  }

  .site-header .header__mail svg path,
  .site-header .header__mail svg rect {
    stroke: #ffffff;
  }

  .site-header .header__mail:hover {
    background-color: #2f9c35;
  }

  .site-header .header__search:hover {
    background-color: #00395d;
  }

  .site-header .header__search:hover svg circle,
  .site-header .header__search:hover svg path {
    stroke: #ffffff;
  }

  .site-header .header__lang .lang-widget {
    width: auto;
    min-width: 56px;
  }

  /* Language switch as in production: Regular 16px #4a7090. */
  .site-header .header__lang .lang-widget__current p {
    font-family: "DIN Pro", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #4a7090;
  }

  .site-header .header__lang .lang-widget__current svg rect {
    fill: transparent;
  }
}

/* --- Dropdowns --- */

.sub-block-kts .m-drop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(40px, 5vw, 96px);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  font-family: "DIN Pro", sans-serif;
}

@media (min-width: 1191px) {
  .site-header .sub-block-kts {
    padding: clamp(40px, 5vw, 96px);
    -webkit-box-shadow: 0 24px 48px rgba(0, 57, 93, 0.12);
    box-shadow: 0 24px 48px rgba(0, 57, 93, 0.12);
  }

  .site-header .sub-block-kts .center.m-drop {
    max-width: 1728px;
    padding: 0;
  }
}

.m-drop__cards {
  display: grid;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  gap: 24px;
  min-width: 0;
}

.m-drop__cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m-drop__cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m-drop__side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  /* One step for both dropdowns: list → button in "Service" was 96px, logos →
     button in "Company" 40px. */
  gap: 40px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: clamp(320px, 25vw, 480px);
}

.m-drop__side--partners .h-logos {
  width: 100%;
}

/* Caption over the partner logos: the site's section label (.e-sectitle on the
   Contacts page) — capitals, wide tracking, pale blue-grey, green square. */
.m-drop__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-weight: 400;
  font-size: clamp(13px, 0.84vw, 16px);
  line-height: 1.3;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #bbcdd9;
}

.m-drop__label:before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: #43b649;
}

/* Card: picture strip, title, text, green arrow box. One link. */
.m-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
  color: #00395d;
  text-decoration: none;
}

.m-card:hover {
  color: #43b649;
}

.m-card__media {
  display: block;
  width: 100%;
  height: clamp(120px, 9.5vw, 182px);
  margin-bottom: 8px;
  overflow: hidden;
  background-color: #f2f3f3;
}

.m-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
}

.m-card:hover .m-card__img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

/* Card title like the site's other card titles (solutions, the Contacts
   tiles): Medium, brand blue — not the mockup's Bold black. */
.m-card__title {
  font-weight: 500;
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.m-card__text {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.5;
  color: #58595b;
}

.m-card__go {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: 8px;
  background-color: #43b649;
  color: #ffffff;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.m-card:hover .m-card__go {
  background-color: #2f9c35;
}

/* Icon list of the Service dropdown */
.m-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-list__item {
  border-bottom: 1px solid #d7dada;
}

.m-list__item:last-child {
  border-bottom: 0;
}

.m-list__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 1.36vw, 26px) 0;
  font-weight: 500;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #00395d;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

a.m-list__link:hover {
  color: #43b649;
}

.m-list__icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 4px;
  -o-object-fit: contain;
  object-fit: contain;
}

/* --- Mobile panel (≤1190px): the old mechanics, new content --- */

@media (max-width: 1190px) {
  .site-header {
    background-color: #ffffff;
  }

  /* The desktop arrow next to the label; the panel has its own arrow button.
     Specific enough to beat the old ".navigation__link svg { display: block }". */
  .site-header .header__navigation .navigation .navigation__container .navigation__item .navigation__link .navigation__arrow {
    display: none;
  }

  /* Both sub-panels get one column of the same width. The old dropdowns'
     rules capped ".center" at 500px (Service) and 320px !important (Company),
     so on a tablet the two panels had different widths and the Company cards
     wrapped their text into six lines. */
  .site-header .header__navigation .navigation .navigation__container .navigation__item .sub-block-kts .center.m-drop {
    width: 100%;
    max-width: 560px !important;
    margin-right: auto;
    margin-left: auto;
  }

  /* Six items now: on a short phone (320×568) or a phone held sideways the
     last ones were below the screen of a fixed, non-scrolling panel. */
  .site-header .header__navigation.active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The sub-panel opener is a real <button> now; strip the browser chrome */
  .site-header .svg-arrow-mob {
    padding: 0;
    border: 0;
    background: none;
  }

  .sub-block-kts .m-drop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
    padding: 24px 6px 48px;
  }

  .m-drop__cards--3,
  .m-drop__cards--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .m-drop__side {
    width: 100%;
    gap: 32px;
  }

  /* Compact cards on a phone: three full-width pictures made the sub-panel
     three screens long. Picture on the left, text on the right; the whole
     card is the link, so the separate arrow box goes. */
  .m-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "media title" "media text";
    -webkit-column-gap: 16px;
    column-gap: 16px;
    row-gap: 4px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }

  .m-card__media {
    grid-area: media;
    height: 84px;
    margin: 0;
  }

  .m-card__title {
    grid-area: title;
    font-size: 19px;
  }

  .m-card__text {
    grid-area: text;
    font-size: 15px;
  }

  .m-card__go {
    display: none;
  }

  .m-drop__cards--3,
  .m-drop__cards--2 {
    gap: 20px;
  }

  .sub-block-kts .sub-block__header button {
    padding: 0;
    border: 0;
    background: none;
  }
}

/*
 * NEW CONTENT BLOCKS — 2026 redesign ("Pack 2"), Figma frame «Доп. блоки».
 *
 * 1. "Коротко про головне" (inc/summary.php) — key points under the hero of
 *    pages, solutions and projects.
 * 2. Accordion component (.kts-acc), shared by the FAQ (inc/faq.php, numbered
 *    badges) and the "factors" block (inc/accordion.php, icon badges). Its
 *    behaviour is one delegated handler in js/kts-ui.js; collapsed panels use
 *    the `hidden` attribute.
 *
 * Type is DIN Pro, as everywhere on the site; the mockup's Golos Text was a
 * placeholder (owner's decision, 08.10).
 */

/* --- 1. Key points --- */

.kts-summary {
  margin: 0 0 clamp(32px, 3.34vw, 64px);
  padding: clamp(24px, 3.34vw, 64px);
  border-left: 4px solid #145274;
  background-color: #f2f3f3;
  font-family: "DIN Pro", sans-serif;
}

/*
 * Typography of the three content blocks follows the ARTICLE they sit in, not
 * the mockup: «Доп. блоки» was drawn in Golos (a placeholder) at 64px titles and
 * 22px grey text — bigger than the page's own H1 (40–46px) and its 18px black
 * body text. Here: titles like the site's in-article headings (Medium,
 * #033758, below the H1), text like the article's (18px / 1.8, black; 15.8px on
 * a phone).
 */
.kts-summary__title {
  margin: 0 0 clamp(18px, 1.67vw, 32px);
  font-weight: 500;
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.25;
  color: #033758;
}

.kts-summary__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kts-summary__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  font-size: clamp(15.8px, 0.94vw, 18px);
  line-height: 1.8;
  color: #000000;
}

.kts-summary__item::before {
  content: none;
}

.kts-summary__check {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 1px 2px;
}

/* --- 2. Accordion --- */

/* Same step as the summary box: an in-article block sits in the article's
   rhythm, not as a page section (96px was three times an article heading). */
.kts-acc-block {
  margin: clamp(32px, 3.34vw, 64px) 0;
  font-family: "DIN Pro", sans-serif;
}

.kts-acc-block__title {
  max-width: 1000px;
  margin: 0 0 clamp(20px, 1.67vw, 32px);
  /* Same as the article's own H2 (Regular 32px #033758) — same level. */
  font-weight: 400;
  font-size: clamp(24px, 1.67vw, 32px);
  line-height: 1.25;
  color: #033758;
}

.kts-acc__item {
  position: relative;
  border-bottom: 1px solid #d7dada;
}

.kts-acc__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: clamp(16px, 1.46vw, 28px);
  width: 100%;
  margin: 0;
  padding: 20px 4px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #58595b;
}

/* The open item's header gets the green line of the mockup */
.kts-acc__item.is-open .kts-acc__head {
  -webkit-box-shadow: inset 0 -1px 0 #43b649;
  box-shadow: inset 0 -1px 0 #43b649;
}

.kts-acc__q {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-weight: 500;
  font-size: clamp(17px, 1.04vw, 20px);
  line-height: 1.35;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.kts-acc__head:hover .kts-acc__q,
.kts-acc__item.is-open .kts-acc__q {
  color: #033758;
}

.kts-acc__head:focus-visible {
  outline: 2px solid #43b649;
  outline-offset: 2px;
}

/* Numbered badge (FAQ): the open item's number sits in a dark circle */
.kts-acc__badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #58595b;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.kts-acc__item.is-open .kts-acc__badge {
  background-color: #00395d;
  color: #ffffff;
}

/* Icon badge (factors): the tile's picture in an 80px frame */
.kts-acc__badge--icon,
.kts-acc__item.is-open .kts-acc__badge--icon {
  width: clamp(56px, 4.17vw, 80px);
  height: clamp(56px, 4.17vw, 80px);
  border-radius: 0;
  overflow: hidden;
  background-color: #f2f3f3;
}

.kts-acc__badge--icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Plus that turns into a cross */
.kts-acc__toggle {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  opacity: 0.4;
  color: #58595b;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.kts-acc__toggle::before,
.kts-acc__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

.kts-acc__toggle::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Open: the two bars turn into ×. Rotating the bars, not the 32px box: a
   rotated box stuck 7px out of the block's right edge on a phone. */
.kts-acc__item.is-open .kts-acc__toggle::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.kts-acc__item.is-open .kts-acc__toggle::after {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
}

.kts-acc__item.is-open .kts-acc__toggle {
  opacity: 1;
  color: #00395d;
}

.kts-acc__body {
  max-width: 952px;
  padding: 20px 48px 24px 64px;
  font-size: clamp(15.8px, 0.94vw, 18px);
  line-height: 1.8;
  color: #000000;
}

.kts-acc--icons .kts-acc__body {
  padding-left: calc(clamp(56px, 4.17vw, 80px) + 4px);
}

.kts-acc__body > * {
  margin: 0;
}

.kts-acc__body > * + * {
  margin-top: 12px;
}

.kts-acc__body ul {
  padding: 0;
  list-style: none;
}

.kts-acc__body ul li {
  position: relative;
  padding-left: 21px;
}

.kts-acc__body ul li + li {
  margin-top: 12px;
}

/* Green bullets, as in the mockup */
.kts-acc__body ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #43b649;
}

.kts-acc__body a {
  color: #00395d;
  text-decoration: underline;
}

.kts-acc__body a:hover {
  color: #43b649;
}

.kts-acc__body .h-arrow-link {
  text-decoration: none;
  font-size: inherit;
}

.kts-acc__more {
  padding-top: 4px;
}

@media (max-width: 767px) {
  .kts-acc__body,
  .kts-acc--icons .kts-acc__body {
    padding: 16px 4px 20px;
  }

  .kts-acc__head {
    padding: 16px 0;
  }

  .kts-acc__toggle {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kts-acc__toggle,
  .kts-acc__toggle::before,
  .kts-acc__toggle::after,
  .kts-acc__badge,
  .kts-acc__q {
    -webkit-transition: none;
    transition: none;
  }
}

/* Keyboard focus for the clickable elements of the redesign: the theme sets
   `a { outline: none }`, so without this a Tab user could not see which card,
   button or dropdown link is selected. */
.kts-btn:focus-visible,
.h-solution:focus-visible,
.h-project:focus-visible,
.h-equip__media:focus-visible,
.h-logos__link:focus-visible,
.h-arrow-link:focus-visible,
.h-underline-link:focus-visible,
.m-card:focus-visible,
.m-list__link:focus-visible,
.site-header .navigation__link:focus-visible,
.kts-acc__more a:focus-visible {
  outline: 2px solid #43b649;
  outline-offset: 3px;
}

/* Footer addresses: from 1401px the address column must fit the height of
   its neighbours (the green tile and the equipment list end on one line).
   Fixed 32px gaps only fitted when one or two addresses wrapped: in Ukrainian
   four of them take two lines, the column grew by 23px and stuck out below
   the other tiles. The gaps now share whatever height is left (24px at the
   least), and the padding keeps room for the absolutely placed
   «Задати питання» button (48px + 16px of air). */
@media (min-width: 1401px) {
  .fs-address-inner {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 64px;
    box-sizing: border-box;
  }

  .fs-address-inner .fs-block,
  .fs-address-inner .fs-block--contacts {
    margin-bottom: 0;
  }
}

/* Touch screens: the service list links (22px), «Усі проєкти» (25px) and the
   office e-mails on Contacts (19px) were too small to hit with a finger.
   An invisible pseudo-element widens the target to ~44px without moving the
   text or the green underline. */
@media (hover: none) and (pointer: coarse) {
  .h-arrow-link,
  .h-underline-link,
  .c-office__mail {
    position: relative;
  }

  .h-arrow-link:after,
  .h-underline-link:after,
  .c-office__mail:after {
    content: "";
    position: absolute;
    top: -11px;
    right: 0;
    bottom: -11px;
    left: 0;
  }
}

/* --- Homepage rhythm ---
   One spacing scale for all five blocks (checked 1920 / 1024 / 390):
     24px            inside a card and between cards of a grid;
     32px            text → its button or its logos;
     32 → 64px       block head (title + lead) → the block's content.
   The mockup mixed 24/27/28/40/50/96 for the same relations. */

.h-about__body .kts-btn {
  margin-top: 4px; /* 28px paragraph gap + 4 = 32px to the button */
}

/* Service: the column is as tall as the photo. "space-between" spread the
   title, the partners and the button over it, so the title stood 118px away
   from its text at 1920. Now the title keeps the common head step and only
   the button goes down to line up with the bottom of the photo. */
.h-service__intro {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0;
}

.h-service__partners {
  gap: clamp(24px, 1.67vw, 32px);
  margin-top: clamp(32px, 3.34vw, 64px);
  margin-bottom: 32px;
}

.h-service__intro > .kts-btn {
  margin-top: auto;
}

/* Slider on phones and tablets (≤1199): the slides share one height, set by
   the tallest brand slide (logo + four lines). The two headline slides had a
   19px title and a 15px subtitle at double spacing (30px), so 110–130px stood
   empty above their button. The title now scales from 30px on a phone to 44px
   at 1199 — continuing into the desktop's 48px Bold — and the subtitle gets a
   reading line-height (1.6) on every slide. Steps from the spacing scale (24).
   Values agreed with a Codex design review. */
@media (max-width: 1199px) {
  .s-welcome .typo-say {
    /* !important: the markup's cn-fs-19--xs is !important itself */
    font-size: clamp(30px, calc(24px + 1.67vw), 44px) !important;
    line-height: 1.15;
  }

  .s-welcome .s-welcome__corru .cn-mb-15 {
    margin-bottom: 24px;
  }

  .s-welcome .typo-rumor {
    line-height: 1.6;
  }

  .s-welcome .s-welcome__corru .typo-rumor {
    margin-bottom: 24px !important;
  }
}

/* Product photo visible at once. WooCommerce prints the gallery with an inline
   opacity: 0 and fades it in from its script; the theme uses neither the
   gallery slider nor zoom, so the single photo (the LCP element of a product
   page) stayed invisible until every script had loaded. */
.woocommerce div.product .woocommerce-product-gallery {
  opacity: 1 !important;
}

/* Mobile menu backdrop only when the menu is open. The panel always exists,
   parked above the screen (scss/main.css), so its 105 KB photo was fetched on
   every page load on phones, competing with the first screen. Now it starts
   loading on the tap that opens the menu. */
@media (max-width: 1190px) {
  .site-header .header__navigation {
    background-image: none;
  }

  .site-header .header__navigation.active {
    background-image: url(img/fon-menu-mob.jpg);
  }
}

/* Slider bullets as 24×24 tap targets (Lighthouse "target-size", 23.10): the
   13px circle is drawn inside a transparent box, so it looks the same; the
   box replaces the old 0.3em margins, centres move ~1.4px further apart. */
.s-welcome .swiper-pagination--right .swiper-pagination-bullet {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  border: 0;
  background: none;
}

.s-welcome .swiper-pagination--right .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 5.5px;
  left: 5.5px;
  width: 13px;
  height: 13px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.s-welcome .swiper-pagination--right .swiper-pagination-bullet-active::before {
  background-color: #ffffff;
}

/* Complianz prints a link to the cookie policy page; none is set, so it is an
   empty link on every page (Lighthouse "link-name"). Hidden while it has no
   address; the other banner links keep theirs. */
.cmplz-link.cookie-statement[data-relative_url=""] {
  display: none;
}

/* Complianz fades the banner in over 2 s. On a phone it covers a third of the
   screen, so the page counted as "still being drawn" for those 2 s (PageSpeed
   filmstrip, Speed Index 4.4 s, 28.10.2026). It now appears at once.
   Doubled class: the banner's own stylesheet loads after this one. */
.cmplz-cookiebanner.cmplz-cookiebanner {
  -webkit-animation: none;
  animation: none;
}

/* Complianz focuses the close button when the banner opens (a dialog). The
   ring is shown to keyboard users only: .kts-kbd is set on the first Tab
   (js/kts-ui.js). Also inlined with the critical CSS (inc/perf.php), as the
   banner can open before this sheet is switched on. */
.cmplz-cookiebanner .cmplz-close:focus-visible {
  outline: none;
}

.kts-kbd .cmplz-cookiebanner .cmplz-close:focus-visible {
  outline: 2px solid #43b649;
  outline-offset: 3px;
}


/* WP Job Openings: the listing grid is a row with -15px side margins that
   expects a padded container, but .awsm-job-container has none, so /jobs/
   scrolled sideways by 15px up to 1024px. The cut-off margins only hold the
   cards' transparent 15px padding, so clipping them changes nothing visible.
   `hidden` first for browsers without `clip`. */
.awsm-job-container {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Slider: the 20%-opacity backdrop of the first slide sits in a <picture>
   (theme-blocks/s-welcome.php). `display: contents` keeps the <img> the flex
   item it was, so the desktop layout is unchanged. Phones do not show it
   (owner's decision 28.10.2026): plain green behind the photo. */
.s-welcome__subject picture {
  display: contents;
}

@media (max-width: 767px) {
  .s-welcome__subject .cn-op-20 {
    display: none;
  }
}