:root {
  --home-min-h: 800px;
}

body { font: 14px/1.5 'Roboto', sans-serif; color: #3d3d3d; background-color: #FFF; }
body, html { overflow-x:hidden; }

.b2 { font-weight: 500; }

.header { position: fixed; background:rgba(0,0,0,0.45); width:100%; color:#fff; z-index:100; height:100px;  align-items: center; display: flex;
  transition: 0.33s; }
.header-scrolled {   height:50px; background:rgba(0,0,0,0.6); }
 .header-scrolled .logo img{display: flex;height: 34px;}

.header .hed-content .logo { font-size:200%;}
.header .hed-content  a.btn-cta{font-size:115%;}
.header .hed-content .phone a{ font-size: 16px;}
.header .hed-content .fas{ font-size: 19px;}
.header .header-scrolled .logo { font-size:175%;}
.header .header-scrolled a.btn-cta{font-size:90%;}
.header .header-scrolled .phone a{ font-size: 13px;}
.header .header-scrolled .fas{ font-size: 16px;}
.hed {display: inline-flex; align-items: center; justify-content: flex-end;}
.header .logo { /*font-size:175%;*/ font-family: 'Roboto', serif;  }
.header .nav { padding: 8px 15px; display:block; text-align: right; }
.header .nav a { color:#fff; text-decoration:none; margin:0px 5px; }
.header .nav a:hover { text-decoration:underline; }
.header .phone{padding-right: 24px}
.header .phone a {color: #ffffff; font-family: Tahoma,  sans-serif; padding-left: 8px;}
.header  a.btn-cta { font-weight: normal;}
.fas{   opacity: 0.6; width: 1em;      /* vertical-align: -0.25em; */  }
a.btn-cta { font-weight:bold; background: #d24a43; color: #fff;  text-align: center; display: inline-block; padding: 8px 15px; border-radius: 5px;  text-decoration: none; transition:0.3s; }
a:hover.btn-cta { background: #e4756f; }

.home  {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC)repeat;}
.home  { height: 100vh; color:#fff; min-height: var(--home-min-h); }
.home video { opacity: 0; }
.home .content { overflow:hidden;    padding: 140px 0 40px 0;height: 100vh;display: flex;     flex-direction: column;justify-content: space-between;
  min-height: var(--home-min-h); }
.home h1{color:#fff;}
.home h4{color:#aee0ff;/*#87CEFA*/; margin-top: 16px;}
.home .com {margin:2px 0 0 0; position: relative}
.home .com_ua {margin:2px 0 0 0; position: relative}
.home .com input{/*max-width: 948px;*/ width: 86%;    position: relative; border: 1px solid #000;   font-size: 24px;padding: 12px 12px 12px 50px; border-color:  black;}
.home .com_ua input{/*max-width: 948px;*/ width: 86%;    position: relative; border: 1px solid #000;   font-size: 24px;padding: 12px 12px 12px 50px; border-color:  black;}
.home .middle-block{display: block; position: relative; top:-56px; }
.home .mouse-down {display: block;    opacity: 0}
.home .mouse-down img {width: 80px;}
.home #com{display: block; opacity: 0}
.home .arrow_down {display: block;opacity: 0;position: absolute; right: 20px;top:-100px; /* -46px;*/ z-index: 3;}
.home .arrow_down img {width: 85px;  }
.home .arrow_text{position: absolute;/*top: -16px;*/font-size: 24px;}
.home .chat {display: none; background-color: white; color: black; padding: 12px; margin:0px 0 0 0; max-width: 954px; width: 100%; max-height: 350px; height: auto;  overflow-y: scroll; background: #04113596; }
.chat { height:100%; width:100%;margin:0;padding:0;}
.chat {
    height:200%;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 7px;
}
::-webkit-scrollbar:horizontal {
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 1px solid #ffffff;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
.home .chat li {list-style-type: none;  }
.home .chat ul{padding-left: 0;padding: 0; margin: 0; list-style: none;display: flex; flex-direction: column;}
.home .chat .op { margin: 5px 0; display: flex; justify-content: flex-end;}
.home .chat .op span{ background-color: #effcde; border-radius: 2px; padding:10px; display: inline-block; text-align: right;    max-width: 75%;}
.home .chat .im{   margin: 5px 0; display:flex;}
.home .chat .im span{background-color: #d0e6f9; border-radius: 2px;     padding:10px; display: inline-block;     max-width: 75%; }
.home .arrow_text {position: relative; font-size: 20px;display: block;text-align: center;}
.home .com_before { display: inline-block;color:  #3d3d3d57; position: absolute;margin: 0;left: 20px; top: 20px;z-index: 3; transform: scale(2,2);   opacity: 0;}
.home .com img { width: 16px; opacity: 0.33; position: relative; top: -1px; }
.home .com_ua img { width: 16px; opacity: 0.33; position: relative; top: -1px; }
.home .typed-cursor{ opacity: 0;display: none;}

.js-scroll-down img { cursor: pointer; }

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.typed{margin: 16px 0; font-size: 16px;    padding-left: 12px; font-weight: 100;}
.typed::after {content: '|';display: inline;animation: blink 0.7s infinite;}

.pain-first .title, .trust .title,.benefits .title, .about .title, .what-we-do .title, .how-we-do .title{font-size:200%;  margin-bottom: 24px}

.pain-first .div {shape-outside:circle(50%);width: 300px; height: 300px;float: left;background: url(../i/q-man.jpg) no-repeat center;border-radius: 100%;background-color: #f8f8f8;    margin: 16px;}
.pain-first {/*background-color: #f8f8f8;*/ padding: 50px 0}
.pain-second {padding-bottom: 50px}
.pain-first .pic {shape-outside:circle(50%);width: 250px; height: 220px;float: left;}
/*.pain-first ul li:nth-last-child(2) {text-decoration: line-through}*/
.pain-first .pain_text{padding-top: 48px; font-size: 140%;}
.pain-first .pain_text i{color: red; padding-right: 32px}
.pain-first ul { margin: auto 0;}
.pain-first ul li{padding: 6px 2px;  font-size: 120%;}
.pain-first li {list-style-type: none; }
.pain-first li:before { content: "✔";padding-right: 24px;}

.desicion{background-color: #3ed08e; color: #ffffff;}
.desicion .title{font-size:200%;}

.count, .count1{color:white;font-size: 72px;font-weight: 600;line-height: 1;}
.hour:after {content: " ч"}
.hour_ua:after {content: " год"}
.count-head{ font-size: 30px;font-weight: bold; margin: 10px 0 20px 0;}
.number-counter-divider{    height: 3px; width: 20%; margin: 20px auto 0 auto;    margin-bottom: 20px;}

#video-bg {    position: absolute; min-height: var(--home-min-h);
    z-index: -100; top: 0;right: 0; bottom: 0;left: 0;overflow: hidden; background: url(../i/bg-home.jpg) no-repeat #021359;  background-size: cover;}
#video-bg > video
{position: absolute;top: 0;left: 0;min-width: 100%; min-height: 100%;width: auto;height: auto;}
@supports (object-fit: cover) {
     #video-bg > video{ top: 0;left: 0;width: 100%; height: 100%;object-fit: cover;}
 }

.trust  {padding: 60px 0 80px 0; }
.trust .title{margin-bottom: 34px}
.trust .list .item .head{ color: #004c9e; font-size: 140%;margin-bottom: 30px;letter-spacing: -0.35px;}
.trust .list .item .pic{font-size: 350%;margin-bottom: 20px;}
.trust .list .item .abstr{ margin-bottom: 20px;font-size:120%;}

.video-block{height: auto;  position: relative; }
.video-block #video-bg-1 { position: absolute;top: 0; right: 0;bottom: 0; left: 0; overflow: hidden; background:  #eaeaea ;background-size: cover;}
.video-block #video-bg-1>video
 {position: absolute;top: 0;left: 0; min-width: 100%; min-height: 100%;width: auto;height: auto;}
 @supports (object-fit: cover) {
  .video-block #video-bg-1>video
  {top: 0;left: 0; position: absolute;width: 100%;height: 100%;object-fit: cover;}
 }

.section-dark{color:#fff; background-color: #c8c6be; }

.mouse-down img {
    animation: mover 1s infinite  alternate;
}
.mouse-down img{
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}


.about{background-color: #e6f2fa;}

.benefits{padding: 50px 0 0 0;}
.benefits .title{margin-bottom: 50px}
.benefits .pic img{width: 70px; padding-bottom: 16px;}
.benefits .list .item .abstr, .about .abstr { font-size:120%; }
.benefits .list .item {    margin-bottom: 50px;}

.block-4{overflow: hidden;}
.what-we-do:after {position: relative; height: 45px; width: 100%;content: '';display: block;background: #fff;}
.what-we-do   { background-image: radial-gradient(ellipse farthest-side at 100% 100%, #1cafc6 20%, #007fb2 50%, #012690 110%);}
.what-we-do .left-side{ padding-top: 120px;padding-bottom: 100px;}
.what-we-do  ul li { font-size: 16px; padding-bottom: 4px;}
.what-we-do  ul li:nth-last-child(1) {list-style-type: none; text-decoration: none;}
.what-we-do  ul li:nth-last-child(1) a {font-size: 12px; background: #e0e0e0; border-radius: 2px;padding: 0px 6px;line-height: 10px;text-align: center;display: inline-block;color: #aaa;border: 1px solid #d0d0d0;color: #434141;}
.what-we-do .right-side { position: relative; z-index: 99;  }
.what-we-do .right-side .right__macbook { position: absolute;transform: translateY(166px);z-index: 99;}
.what-we-do   img { vertical-align: middle; border-style: none;}
.what-we-do  .tab-content { position: absolute; left: 161px; top: 196px; width: 912px; z-index: 99;}
.what-we-do  .img-fluid {max-width: 100%; /*height: auto; */    height: 100%;}
.what-we-do .mouse-up img {width: 50px}
.what-we-do ul {margin: 0;}
.what-we-do h3 {   margin-bottom: 0.7125em;}
.what-we-do .title{ padding-top: 120px;}
.what-we-do a.dots_swal:hover{color: black;transition:0.3s;}

.how-we-do .abstr{font-size: 24px;    padding-top: 65px;    text-align: right;}
.how-we-do .abstr span { color: #abadaf;/*text-decoration: line-through*/}
.how-we-do .list .item{position: relative; width: 17%; height: 200px;  padding: 16px; }
.how-we-do .list .item .pic{border-top: 2px dotted blue;}
.how-we-do .list {display: flex; justify-content: center;    margin: 24px 0;}
.left {box-shadow:10px 0 10px -10px #333; }
.one ,.two, .three,.four, .five, .six  {position: absolute;visibility: visible;display: block;width: 40px; height: 40px;border-radius: 50%; text-align: center; font-size: 24px;}
.one::after, .two::after, .three::after, .four::after, .five::after, .six::after {content: '';position: absolute;top: 17px;left: 38px;height: 2px;z-index: -1;}
.one::before, .two::before, .three::before, .four::before, .five::before, .six::before{ position: absolute;top: -9px; display: inline-block;font-size: 16.8px;}
.one{  border: solid 2px #e8af2e; color: #e8af2e; top: 49%;left: 106%;}
.one::after{ background:#e8af2e;  width: 12em; }
.one::before{  content: 'Жизненный цикл IT поддержки для вас';   left: -127px;  line-height: 1.15;   text-align: left;   width: 16em;  top: -23px;left: 47px;}
.one_ua::before{  content: 'Життєвий цикл IT підтримки для вас ' !important; }
.two{  border: solid 2px #2ac6d2; color: #2ac6d2; top: 49%;left: 106%;}
.two::after{ background: #2ac6d2;  width: 12em; }
.two::before{  content: 'Присылаете нам задачи, которые необходимо выполнить';   left: -127px;  line-height: 1.15;   text-align: left;   width: 16em;  top: -23px;left: 47px;}
.two_ua::before{  content: 'Надсилаєте нам завдання, які необхідно виконати' !important;     top: -25px !important;}
.three{   border: solid 2px #0b98d0;  color: #0b98d0;  top: 49%;left: 106%;}
.three::after{   background: #0b98d0;  width: 9em;}
.three::before{  content: 'Согласовываем сроки и стоимость'; left: 43px;width: 16em;text-align: left; line-height: 1.15;top: -22px;}
.three_ua::before{  content: 'Узгоджуємо терміни і вартість';     top: -9px;}
.four{border: solid 2px #0c4266;color: #0c4266;   left: -34%;top: 49%;}
.four::after{ background: #0c4266;  width: 9em; left: -216px;}
.four::before{  content: 'Аванс, по согласованию'; left: -218px; width: 14em;}
.four_ua::before{  content: 'Аванс, за погодженням';}
.five{ top: 49%;left: -34%;border: solid 2px #c82230;color: #c82230; }
.five::after{ background: #c82230;   width: 7em;left: -168px;}
.five::before{  content: 'Выполняем работу';left: -155px;width: 9em;}
.five_ua::before{  content: 'Виконуємо роботу';}
.six{top: 49%;left: -34%;border: solid 2px #8b103e; color: #8b103e;}
.six::after{ background: #8b103e; width: 5em;left: -120px;}
.six::before{  content: 'Пост - оплата'; left: -117px; width: 7em;}
.six_ua::before{  content: 'Пост - оплата';}
#hexGrid {display: flex;flex-wrap: wrap;width: 40%; margin: 0 auto;list-style-type: none;padding: 24px 0;}
.hex {position: relative;visibility:hidden;outline:1px solid transparent; transition: all 0.5s;backface-visibility: hidden;will-change: transform;transition: all 0.5s; width: 33.333%; }
.hex .hexLink  img{width: 45%; /*left: 34%; top: 36%;*/    position: absolute; z-index: 12; }
.hex::after{content:'';display:block;padding-bottom: 86.602%;}
.hexIn{ position: absolute;width:96%; padding-bottom: 110.851%;  margin: 2%;overflow: hidden;visibility: hidden;transform: rotate3d(0,0,1,-60deg) skewY(30deg);transition: all 0.5s;}
.hexIn * { position: absolute;visibility: visible;}
.hexLink {display:block;width: 100%;height: 100%;text-align: center;color: #fff;overflow: hidden;transform: skewY(-30deg) rotate3d(0,0,1,60deg);}
.hexLink .img { position: absolute;top: 0;right: 0;bottom: 0; left: 0; display: flex;align-items: center;justify-content: center;}
.block_steps{    margin-bottom: 24px;}
.steps {display: flex;justify-content: space-evenly;padding: 0;overflow: hidden;color: #000723;}
.steps em {display: block;font-size: 22px;font-weight: bold; padding-bottom: 4px;}
.steps span{font-size: 120%;}
.steps li {float: left;  margin-left: 0; width: 30%;height: 110px;list-style-type: none; padding: 10px 10px 10px 44px;border-right: 3px solid white;position: relative;}
.steps li:first-child { padding-left: 16px; /*border-top-left-radius: 6px;border-bottom-left-radius: 6px;*/}
.steps li:nth-child(n+2)::before { position: absolute; top:0;left:0;display: block; border-left: 25px solid white; border-top: 55px solid transparent; border-bottom: 55px solid transparent;  width: 0;height: 0;content: " ";}
.steps li::after { z-index: 1;position: absolute; top: 0; right: -25px; display: block;border-left: 25px solid #7c8437;  border-top: 55px solid transparent; border-bottom: 55px solid transparent; width:0;height:0; content: " ";}
.steps li { background-color: #eff3f5; }
.steps li::after { border-left-color: #eff3f5; }
.steps li.current { background-color: #eff3f5;}
.steps li.current::after { border-left-color: #eff3f5;}
.steps li.current ~ li { background-color:#eff3f5; }
.steps li.current ~ li::after { border-left-color:#eff3f5;}
.how-we-do .abstr span:hover {color: #05346a; cursor: pointer;  animation: tooltips-vert 500ms ease-out forwards;}

[tooltip] {
  position: relative;
}

[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}
[tooltip]::after {
  content: attr(tooltip);
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #17bbff;
  color: #fff;
  z-index: 1000;
}


[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}


[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #17bbff;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,

[tooltip][flow^="up"]::before
 {
  left: 50%;
  transform: translate(0%,-50% );
}
[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after {
  left: -125%;  transform: translate(0%,-50% );

}

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(0%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(50%, 0%);
  }
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
.strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}

.block { padding:50px 0;  }
.block-dark .head { color:#fff;  }
.block-dark .sub-head { color:#fff;  }


.final{background-color: #0b2037;}
.footer .contact_form form .field  input.empty {font-family:  Roboto,FontAwesome;font-style: normal;font-weight: normal; text-decoration: inherit;}
.error {color: red}
.footer {    background-image: radial-gradient(ellipse farthest-side at 100% 100%, #1cafc6 20%, #007fb2 50%, #012690 110%);  color:#fff;  }
.footer .title{    font-size: 3.8em; line-height: 1.15em;     margin-bottom: 0.7125em; font-weight: 700;}
.footer .sub-head {font-size: 201%;}
.footer  .footer_top{padding: 60px 0;}
.footer  .footer_bottom{ padding: 20px 0 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); opacity: 0.5; font-size: 16px;}
.footer  .footer_bottom a{color: #fff;}
.footer .contact_form {background-color: #fff; color: #3d3d3d;padding: 28px; display: flex; flex-direction: column;justify-content: center;}
.footer .contact_form label {margin-bottom: 0}
.footer .contact_form .list .item  .abstr{ color: #0f1922;}
.footer .contact_form .list .item  .abstr:last-child{margin-bottom: 32px}
.footer .contact_form .list .item  .sub{margin-top: 18px;}
.footer .contact_form .list .item   .abstr .icon_show{padding-left: 4px;}
.footer .contact_form .list .item   .abstr span{color: #255b73; font-size: 20px;     padding-right: 18px; padding-left: 32px; }
.footer .contact_form .form .field .caption{ font-weight: normal; font-size: 16px; }
.footer .contact_form form .field  input { padding: 7px 9px; font-size: 18px; color:#142c46; }
.footer .contact_form  form .field  input { margin:5px 0; width:100%;     }
.footer .contact_form form .field{margin-bottom: 16px}
.footer .contact_form form .field:last-child{margin-bottom: 0}
.footer .contact_form  form .field .submit{ font-weight: bold;width: 245px; background-color:  #e7302a; color: white;padding: 10px 36px;text-decoration: none;text-transform: uppercase;border: solid 2px #e7302a; font-size: 16px; transition: 0.3s;     border-radius: 0;margin-bottom:10px; border:none; }
.footer .contact_form form .field .submit:hover {background-color: #e85550; cursor: pointer }
.footer  .footer_text_bottom{font-size: 12px; color: #aaa;}

.footer .contact_form form .field .form-i-name  { padding-left:36px; border:1px solid #aaa; background: #fff url(../i/i-f-name.png)  8px 10px no-repeat; }
.footer .contact_form form .field .form-i-phone { padding-left:36px; border:1px solid #aaa; background: #fff url(../i/i-f-phone.png) 8px 10px no-repeat; }
.footer .contact_form form .field .form-i-email { padding-left:36px; border:1px solid #aaa; background: #fff url(../i/i-f-email.png) 8px 10px no-repeat; }

.thank-you{ color: white;min-height:90vh;background: url(../i/thank-you-bg.jpg) center center no-repeat; background-size: cover; }
.thank-you:before {transition: all 0.4s ease;content: "";position:absolute;width: 100%;height: 90vh;background: rgba(0,0,0,0.5);}
.footer-thank-you{min-height:10vh; color:#9ea1a5;display: flex;align-items: center;}
.logo-thank{font-size: 322%}
.thank-you .content{display: flex; padding: 7% 0; height: 90vh;flex-direction: column;justify-content: start; align-items: center;}
.thank-you .content h1{    font-size: 3.5rem;    margin: 68px 0 22px 0;}



@media (min-width:1201px) {
  .hex:nth-child(6n+1){margin-left: 16.666%; }
  .hex:nth-child(4n+4){margin-left: 32.666%; }
  .hex:nth-child(5n+5){margin-left: 16.666%; }
}

@media (max-width: 1200px) and (min-width:601px){
  .hex:nth-child(6n+1){margin-left: 16.666%; }
  .hex:nth-child(4n+4){margin-left: 32.666%; }
  .hex:nth-child(5n+5){margin-left: 16.666%; }
  .two::after {background: #2ac6d2; width: 9em;}
  .two::before{    width: 14em;top: -42px;}
  .what-we-do .right-side .right__macbook {transform: translateY(226px);}
  .what-we-do .tab-content {top: 259px;}
}

@media screen and (max-width:1199px) {
 /* .home .arrow_down { right: 0px; top: 42%;}*/
}


@media screen and (max-width:1024px) {
  .home .arrow_down {display: none;}
  .home .com input{width: 100%}
   .home .com_ua input{width: 100%}
  .home .content { padding: 150px 0 33px 0;}
}

@media screen and (max-width:991px) {
  .what-we-do:after { display: none; }
  .what-we-do  .tab-content{    left: 99px;top: 106px; width: 73%; height: 71%;}
  .what-we-do .right-side .right__macbook  {position: relative;margin-top: 80px;max-width: 100%;transform: translateY(0);}
  .what-we-do .img-fluid {width: 100%; /*height: 330px;*/}
  .steps li {height: 130px;    width: 29%;}
  .steps li:nth-child(n+2)::before {  border-top: 65px solid transparent; border-bottom: 65px solid transparent; }
  .steps li::after { border-top: 65px solid transparent; border-bottom: 65px solid transparent; }
  .hex {width: 50%;}
  .hex:nth-child(3n+3){margin-left:24%;  }
  .hex:nth-child(6n+1) {margin-left: 0;}
  .hex:nth-child(4n+4){    margin-left:49.666%;;}
  .hex:nth-child(5n+1){    margin-left: 0%;}
  .hex:nth-child(6n+6) { margin-left: 24%;}
  .hex:nth-child(5n+5) {margin-left: -100.334%;}
  .one::before{    width: 9em; top: -42px;left: 42px;}
  .one::after {width: 6em;}
  .two::before {width: 11em;top: -63px;}
  .two::after {width: 6em;}
  .four::before {left: -158px;width: 11em;top: -2em;}
  .four::after {width: 5em;left: -123px;}
  .two_ua::before {top: -60px !important;left: 39px !important;     width: 9em !important;}
  .one_ua::before { top: -25px !important;}
  .three_ua::before{    width: 14em !important;    top: -22px !important;}
  .three_ua::after {width: 8em !important;}

}

@media screen and (max-width:768px) {
  .home .chat{max-height: 300px;}
  .arrow_text1 {font-size: 16px;}
  .footer .title {font-size: 2.8em;}
  .footer .sub-head {font-size: 180%; margin-bottom: 0.7125em;}
  .what-we-do .left-side {padding-top: 50px;padding-bottom: 50px;}

  h4 {     font-size: 1.25rem; }
}

@media screen and (max-width:767px) {
  .one_ua::before { top: -25px !important;}
  .three_ua::before {top: -21px;}
  .header-scrolled .logo img { height: 34px;}
 .logo img{   height: 45px;}
  .hed {align-items: flex-end;}
  .header .phone { padding-right: 8px;}
  /*h4 {font-size: 1.25rem;}
  h1 { font-size: 2rem;}*/
  .home .arrow_down {top: 47%;right: 3%;}
  .what-we-do  .tab-content{left: 77px;top: 99px;width: 72.1%; height: 66%;}
  .what-we-do .img-fluid { width: 100%; /*height: 245px;*/}
  .steps{flex-flow: column;}
  .steps li{width: 90%; margin-bottom: 16px;}
  .hex:nth-child(2){  order: 1; margin-left: 0%;}
  .hex:nth-child(4) {order: 2; margin-left: 24%;}
  .hex:nth-child(6){  order: 3; margin-left: 0%;}
  .hex:nth-child(5) {order: 4; margin-left: 24%;}
  .hex:nth-child(3) {order: 5;margin-left: 0%;}
  .hex:nth-child(1) {order: 6; margin-left: 24%;}
  .two::before {width: 8em;top: -63px;}
  .two::after {width: 5em;}
  .three::before {left: 39px;width: 9em;}
  .three::after {width: 7em;}
  .five::before { left: -92px;width: 6em;top: -31px;}
  .five, .four, .six {left: -42%;}
  .five::after {width: 4em;left: -97px;}
}


@media (max-width: 600px) {
  #hexGrid{ padding-bottom: 11.2%;font-size: 12px; width: 60%; margin: 0  ;}
  .hex {width: 50%;}
  .three_ua::before {top: -19px;}
  .one_ua::before { top: -22px !important;}
  .one::before, .two::before, .three::before, .four::before, .five::before, .six::before {font-size: 13.8px;}
  .hex:nth-child(2) { margin-left: 1%;}
  .hex:nth-child(4) {margin-left: 1%;top: 32px;}
  .hex:nth-child(6) {margin-left: 1%;top: 64px;}
  .hex:nth-child(5) {margin-left: 1%; top: 96px;}
  .five, .four, .six { left: 106%;}
  .four::after {width: 5em;left: 36px;}
  .four::before {left: 27px; width: 7em;}
  .hex:nth-child(3) {order: 5; margin-left: 1%;top: 128px;}
  .five::after{left: 36px;}
  .five::before{left: 22px;}
  .hex:nth-child(1) {margin-left: 1%;top: 160px; margin-bottom: 90px;}
  .six::after { width: 5em;left: 37px;}
  .six::before {left: 25px;}
  .three::after {width: 7em;}
  .one, .two, .three, .four, .five, .six {width: 30px; height: 30px;border-radius: 50%;text-align: center;font-size: 19px;}
  .one::after, .two::after, .three::after, .four::after, .five::after, .six::after {top: 13px;left: 27px;}
  .one::before {width: 9em;top: -36px; left: 31px;}
  .two::before {top: -50px;left: 31px;}
  .two::after {width: 6em;}
  .three::before {left: 31px;}
  .how-we-do .abstr {padding-top: 110px;}

  }

@media screen and (max-width:575px) {
  h1{ font-size: 1.75rem;}
  .home .chat .op span{ max-width: 90%;}
  .home .chat .im span{    max-width: 90%;}
  .home .com input{font-size: 20px;}
  .home .com_ua input{font-size: 20px;}
  .home .mouse-down{display: none !important;}
  .home .content{padding: 110px 0 33px 0; justify-content: space-around;}
  .header .phone {padding-right: 24px;}
  .header-scrolled {height: 85px;}
  .header-scrolled .logo img {display: inline-flex;}
  .hed { font-size: 80%;    justify-content: center;     margin-top: 8px;align-items: center;}
  .logo {text-align: center;    font-size: 170%;}
  [tooltip]::after {font-size: .65em;}
}

@media (max-width: 575px) and (min-width:531px){
.what-we-do .tab-content {
    left: 77px;
    top: 99px;
    width: 73.1%;     height: 68%;}
    .what-we-do .img-fluid {
    width: 100%;
    /*height: 260px;*/}
}



@media (max-width: 530px) and (min-width:500px){
  .what-we-do .tab-content {
    left: 73px;
    top: 91px;
    width: 72.1%; height: 68%;}

}

@media (max-width: 499px) and (min-width:470px){
  /*.what-we-do .img-fluid { height: 225px;}*/
  .what-we-do .tab-content {
    left: 69px;
    top: 97px;
    }
}

@media (max-width: 469px) and (min-width:400px){
  .what-we-do .tab-content {    left: 65px;
    top: 94px; }
 /* .what-we-do .img-fluid { width: 100%; height: 200px;}*/
  }

@media screen and (max-width:425px) {
  .pain-first .div{    float: none;}
  .home .content {padding: 110px 0 0px 0;}
  .home .chat { max-height: 270px;     margin: 16px 0 0 0;}
  .phone {font-size: 80%;padding-right: 8px;}
  a.btn-cta { font-size: 80%;}
  .what-we-do .tab-content { left: 59px;
    height: 63%;}
  /*.what-we-do .img-fluid {width: 100%;max-height: 190px;}*/
  [tooltip]::after {font-size: .55em;}
  .header .hed-content .phone a { font-size: 13px;}
  .header .hed-content .logo {font-size: 140%;}
  .header .hed-content .fas {font-size: 13px}

}

@media (max-width: 400px) {
    #hexGrid { font-size: 8px;}
    .header .phone {padding-right: 12px;}
}
@media (max-width: 399px) and (min-width:376px){
  .what-we-do .tab-content {
    left: 56px;
    height: 63%;
    top: 92px;}
}


@media (max-width: 375px) {
  .header .phone {padding-right: 6px;}
  .hed {font-size: 66%;}
  .header .hed-content .fas {font-size: 12px;}
  .header .hed-content .phone a { font-size: 11px;}
}

@media (max-width: 375px) and (min-width:350px){
 .what-we-do .tab-content {
    left: 53px;
    height: 60%;
    top: 90px;width: 71.1%;}
}
@media (max-width: 349px) and (min-width:321px){
  .what-we-do .tab-content {left: 51px; height: 60%;
    top: 90px; width: 71.1%;}
  /*.what-we-do .img-fluid { width: 100%;max-height: 156px;}*/
  }

@media screen and (max-width:320px) {
  .home h1 {font-size:2rem;}
  .home h4 { font-size: 1.4rem;}
  .home .chat { max-height: 270px;}
  .header .logo {font-size: 115%;}
  .what-we-do .tab-content {left: 45px;top: 91px;}
  .pain-first .div{margin: 0px}
  .what-we-do .img-fluid { max-height: 140px;}
}