.popup-block .popup-img-stages1 {
  background-image: url(../img/store/project-stages-375.svg);
  background-position: 50% 0;
  height: 1006px;
  margin-top: 50px;
  margin-bottom: 17px;
}

.popup-block .popup-img-stages2 {
  background-image: url(../img/store/project-stages2-375.svg);
  background-position: 50% 0;
  height: 829px;
  margin-top: 30px;
  margin-bottom: 40px;
}

.popup-block .popup-img-time {
  background-image: url(../img/complex/work-format.svg);
  background-position: 50% 0;
  height: 1746px;
  margin-top: 25px;
  margin-bottom: 60px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .popup-block .popup-img-stages1 {
    background-image: url(../img/store/project-stages-768.svg);
    background-position: 50% 0;
    height: 453px;
    margin-top: 31px;
    margin-bottom: 26px;
  }

  .popup-block .popup-img-stages2 {
    background-image: url(../img/store/project-stages2-768.svg);
    background-position: 50% 0;
    height: 417px;
  }

  .popup-block .popup-img-time {
    background-image: url(../img/complex/work-format-768.svg);
    background-position: 50% 0;
    height: 432px;
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .popup-block [class*="popup-img-"] {
    background-size: contain;
  }

  .popup-block .popup-img-stages1 {
    background-image: url(../img/store/project-stages-1024.svg);
    background-position: 50% 0;
    height: 285px;
    margin-top: 51px;
    margin-bottom: 23px;
  }

  .popup-block .popup-img-stages2 {
    background-image: url(../img/store/project-stages2-1024.svg);
    height: 514px;
  }

  .popup-block .popup-img-time {
    background-image: url(../img/complex/work-format-1024.svg);
    background-position: 50% 0;
    height: 381px;
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

@media (min-width: 1260px) {
  .popup-block .popup-img-stages1 {
    background-image: url(../img/store/project-stages-1920.svg);
    height: 367px;
    margin-top: 87px;
    margin-bottom: 46px;
  }

  .popup-block .popup-img-stages2 {
    background-image: url(../img/store/project-stages2-1920.svg);
    height: 593px;
    margin-top: 50px;
  }

  .popup-block .popup-img-time {
    background-image: url(../img/complex/work-format-1920.svg);
    background-position: 50% 0;
    height: 557px;
    margin-top: 80px;
    margin-bottom: 40px;
  }
}

/*---------    ---------*/
.complex-page .banner-float-complex {
  margin-left: -18px;
}

.complex-page .banner-image {
  background-image: url(../img/complex-banner-full.png);
  height: 308px;
  margin-bottom: 10px;
}

.complex-page .image-block-before {
  margin-top: 50px;
  margin-bottom: 50px;
}

.complex-block-technology .image-block-before img {
  width: 289px;
  margin-left: -5px;
  margin-top: -5px;
}

.complex-block-technology .image-block-before .float-circles:before {
  width: 50px;
  height: 50px;
  top: calc(85% - 25px);
  left: calc(14% - 25px);
}

.complex-block-technology .image-block-before .float-circles:after {
  width: 20px;
  height: 20px;
  top: calc(15% - 10px);
  left: calc(86% - 10px);
}

.tech-block-ico {
  padding-top: 30px;
  padding-bottom: 6px;
}

[class*="tech-ico-"] {
  width: 72px;
  height: 72px;
  border-radius: 99px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-ico-html {
  background-color: #FF603A;
}

.tech-ico-html img {
  width: 24px;
}

.tech-ico-drupal {
  background-color: #395EB0;
}

.tech-ico-drupal img {
  width: 47px;
}

.tech-ico-1c {
  background-color: #CD314A;
}

.tech-ico-1c img {
  width: 54px;
}

.tech-ico-mysql {
  background-color: #FB6801;
}

.tech-ico-mysql img {
  width: 48px;
  margin-right: -5px;
  margin-top: -7px;
}

.tech-ico-js {
  background-color: #FFCA33;
}

.tech-ico-js img {
  width: 32px;
}

.tech-ico-php {
  background-color: #5071FF;
}

.tech-ico-php img {
  width: 42px;
}

.tech-ico-git {
  background-color: #FB6801;
}

.tech-ico-git img {
  width: 29px;
}

.tech-ico-other {
  background-color: #EBEEFF;
}

.tech-ico-other span {
  font-size: 12px;
  font-weight: 600;
}

.complex-block-iterations .image-block-before img {
  width: 323px;
  margin-left: -15px;
  margin-top: 10px;
}

.complex-block-iterations .image-block-before .float-circles:before {
  width: 46px;
  height: 46px;
  top: calc(4% - 25px);
  left: calc(68% - 25px);
}

.complex-block-iterations .image-block-before .float-circles:after {
  width: 20px;
  height: 20px;
  top: calc(86% - 10px);
  left: calc(15% - 10px);
}

.complex-block-time .image-block-before img {
  width: 299px;
  margin-left: 10px;
  margin-top: -46px;
}

.complex-block-time .image-block-before .float-circles:after {
  width: 30px;
  height: 30px;
  top: calc(4% - 15px);
  left: calc(66% - 15px);
}

.popup-block .icoblock-single {
  margin-left: -10px;
}

.complex-block-team .image-block-before img {
  width: 273px;
  margin-left: 5px
}

.complex-block-team .image-block-before {
  margin-top: 0;
}

.complex-block-team .image-block-before .float-circles:before {
  top: calc(88% - 30px);
  left: calc(22% - 30px);
}

.complex-block-team .image-block-before .float-circles:after {
  width: 30px;
  height: 30px;
  top: calc(2% - 15px);
  left: calc(65% - 15px);
}

@media (min-width: 768px) and (max-width: 991px) {
  .complex-page .tech-block-ico {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    max-width: 100%;
    justify-content: space-between;
  }

  .complex-page .tech-block-ico .col-3 {
    flex-shrink: 1;
  }

  .complex-page .tech-block-ico .col-3 + .col-3 {
    padding-left: 5px;
  }

  .complex-block-technology .subpadding {
    padding-left: 10px;
  }
}

@media (min-width: 768px) {
  .complex-page .main-banner .text {
    max-width: 610px;
  }

  .complex-page .banner-float-complex {
    margin-left: -31px;
    margin-top: -52px;
    margin-bottom: -30px;
  }

  .complex-page .banner-image {
    background-image: url(../img/complex-banner-full-768.png);
    height: 510px;
    margin-left: -27px;
  }

  .complex-block-technology .image-block-before img {
    width: 370px;
    margin-left: 32px;
    margin-top: -13px;
  }

  .complex-block-technology .image-block-before .float-circles:before {
    width: 75px;
    height: 75px;
    top: calc(80% - 38px);
    left: calc(13% - 38px);
  }

  .complex-block-technology .image-block-before .float-circles:after {
    width: 30px;
    height: 30px;
    top: calc(8% - 15px);
    left: calc(72% - 15px);
  }

  .complex-block-stages .heading-2 {
    max-width: 500px
  }

  .complex-block-iterations .image-block-before img {
    width: 414px;
    margin-top: -5px;
  }

  .complex-block-iterations .image-block-before .float-circles:before {
    width: 76px;
    height: 76px;
    top: calc(6% - 38px);
    left: calc(76% - 38px);
  }

  .complex-block-iterations .image-block-before .float-circles:after {
    width: 45px;
    height: 45px;
    top: calc(88% - 20px);
    left: calc(15% - 20px);
  }

  .complex-block-time .image-block-before img {
    width: 403px;
    margin-left: 30px;
    margin-top: -52px;
  }

  .complex-block-time .image-block-before .float-circles:before {
    width: 76px;
    height: 76px;
    top: calc(94% - 38px);
    left: calc(68% - 38px);
  }

  .complex-block-time .image-block-before .float-circles:after {
    width: 30px;
    height: 30px;
    top: calc(4% - 15px);
    left: calc(66% - 15px);
  }

  .complex-block-team .image-block-before {
    margin-top: 0;
  }

  .complex-block-team .image-block-before img {
    width: 436px;
  }

  .complex-block-team .image-block-before .float-circles:before {
    top: calc(93% - 45px);
    left: calc(20% - 45px);
  }

  .complex-block-team .image-block-before .float-circles:after {
    width: 40px;
    height: 40px;
    top: calc(0% - 20px);
    left: calc(62% - 20px);
  }
}

@media (min-width: 992px) {
  .complex-page .main-banner .text {
    max-width: 420px;
  }

  .complex-page .image-block-before {
    margin-top: 0;
    align-self: flex-start;
  }

  .complex-page .banner-float-complex {
    padding-bottom: 15px;
    top: -20px;
    right: -181px;
  }

  .complex-page .banner-image {
    background-image: url(../img/complex-banner-full-1024.png);
    height: 586px;
    margin-left: -27px;
  }

  .complex-block-icoblock .heading-2 {
    max-width: 500px;
  }

  .complex-block-icoblock .thickwrap > .row > .icoblock-single {
    padding-top: 20px;
  }

  [class*="tech-ico-"] {
    width: 91px;
    height: 91px;
  }

  .tech-block-ico {
    padding-right: 50px
  }

  .tech-ico-html img {
    width: 32px;
  }

  .tech-ico-drupal img {
    width: 61px;
  }

  .tech-ico-1c img {
    width: 68px;
  }

  .tech-ico-mysql img {
    width: 60px;
    margin-right: 2px;
    margin-top: 2px;
  }

  .tech-ico-js img {
    width: 41px;
  }

  .tech-ico-php img {
    width: 55px;
  }

  .tech-ico-git img {
    width: 37px;
  }

  .tech-ico-other span {
    font-size: 15px;
  }

  .complex-block-iterations .image-block-before {
    margin-left: -20px;
  }

  .complex-block-iterations .image-block-before img {
    max-width: 414px;
    margin-top: 23px;
    margin-left: 0
  }

  .complex-block-iterations .image-block-before .float-circles:before {
    left: calc(71% - 38px);
  }

  .complex-block-iterations .image-block-before .float-circles:after {
    top: calc(92% - 30px);
    left: calc(19% - 30px);
    height: 60px;
    width: 60px;
  }

  .complex-block-time .image-block-before img {
    max-width: 403px;
    margin-left: -7px;
  }

  .complex-block-time .image-block-before .float-circles:after {
    width: 40px;
    height: 40px;
    top: calc(5% - 20px);
    left: calc(22% - 20px);
  }

  .popup-block .icoblock-single + .icoblock-single {
    padding-top: 20px;
  }

  .popup-block .icoblock-single {
    margin-left: -10px;
    margin-right: 10px;
  }

  .complex-block-team .image-block-before img {
    max-width: 436px;
  }
}

@media (min-width: 1200px) {
  .complex-page .main-banner .text {
    max-width: 500px
  }

  .complex-page .banner-float-complex {
    padding-bottom: 15px;
    top: -90px;
    right: -199px;
  }

  .complex-page .banner-image {
    background-image: url(../img/complex-banner-full-1920.png);
    height: 772px;
    width: 1477px;
    margin-left: -68px;
  }

  .complex-block-icoblock {
    margin-top: 0
  }

  .complex-block-icoblock .heading-2 {
    max-width: 600px;
  }

  .complex-block-icoblock + .advantages-block {
    margin-top: 100px;
  }

  .complex-block-technology .image-block-before {
    margin-top: 7px;
  }

  .complex-block-technology .image-block-before img {
    width: 507px;
    margin-left: -9px;
    margin-top: 2px;
  }

  .complex-block-technology .image-block-before .float-circles:before {
    width: 99px;
    height: 99px;
    top: calc(82% - 50px);
    left: calc(7% - 50px);
  }

  .complex-block-technology .image-block-before .float-circles:after {
    width: 45px;
    height: 45px;
    top: calc(7% - 25px);
    left: calc(70% - 25px);
  }

  .complex-block-technology .subpadding {
    padding-right: 113px;
  }

  [class*="tech-ico-"] {
    width: 104px;
    height: 104px;
  }

  .tech-block-ico {
    padding-right: 70px;
    padding-top: 35px;
  }

  .complex-block-iterations .image-block-before {
    margin-left: 0;
    margin-top: 29px;
  }

  .complex-block-iterations .image-block-before img {
    max-width: 571px;
    width: 571px;
    margin-top: -11px;
    margin-left: 0;
  }

  .complex-block-iterations .image-block-before .float-circles:before {
    left: calc(71% - 50px);
    width: 99px;
    height: 99px;
    top: calc(4% - 50px);
  }

  .complex-block-iterations .image-block-before .float-circles:after {
    left: calc(26% - 30px);
  }

  .complex-block-time .image-block-before {
    margin-top: 8px;
  }

  .complex-block-time .image-block-before img {
    max-width: 553px;
    width: 552px;
    margin-left: 56px;
    margin-top: -78px;
  }

  .complex-block-time .image-block-before .float-circles:before {
    width: 99px;
    height: 99px;
    top: calc(92% - 50px);
    left: calc(25% - 50px);
  }

  .complex-block-time .image-block-before .float-circles:after {
    width: 50px;
    height: 50px;
    top: calc(4% - 25px);
    left: calc(66% - 25px);
  }

  .complex-block-team .image-block-before img {
    max-width: 552px;
    width: 552px;
    margin-left: -10px;
    margin-top: -37px;
  }

  .complex-block-team .image-block-before .float-circles:after {
    top: calc(33% - 20px);
    left: calc(112% - 20px);
  }

  .complex-block-team .image-block-before .float-circles:before {
    top: calc(85% - 45px);
    left: calc(13% - 45px);
  }
}

@media (min-width: 1450px) {
  .complex-page .banner-float-complex {
    right: -21%;
  }
}

/*-----------------*/
@media (min-width: 992px) {
  .row .col-12 .row .icoblock-single {
    padding-left: 0;
  }
}

/*-------------------proggressive-jpg---------------*/
.complex-block-progressive {
  margin-top: 80px;
}

.progressive-jpg-block, .progressive-jpg-block.slick-slider {
  margin-left: 0;
  margin-right: 0;
  margin-top: 18px;
  margin-bottom: 81px;
}

.progressive-jpg-block .col-md-4 img {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 190px;
  margin: 0 auto;
}

.progressive-jpg-block .col-md-4:before {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  margin: auto;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 100%;
  transition: all .5s;
  opacity: 1;
  background-color: #FFF;
  will-change: transform, opacity;
}

.scroll-here .progressive-jpg-block .col-md-4:before {
  width: 151px;
  height: 151px;
}

.progressive-jpg-block .slick-dots {
  bottom: -50px;
}

.complex-block-progressive .slick-dots li button:before {
  color: #fff;
}

.complex-block-progressive .slick-dots li.slick-active button:before {
  color: #5e78ff;
}

.complex-block-progressive + .advantages-block {
  margin-top: 0
}

@media (min-width: 768px) {
  .complex-block-progressive .heading-3 {
    margin-top: -15px;
    padding-bottom: 0;
  }

  .progressive-jpg-block {
    margin-bottom: 22px;
  }

  .complex-block-progressive {
    padding-bottom: 90px;
  }
}

@media (min-width: 992px) {
  .complex-block-progressive {
    margin-top: 73px;
    padding-bottom: 71px;
  }

  .progressive-jpg-block .col-md-4 img {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 248px;
    margin: 0 auto;
  }

  .scroll-here .progressive-jpg-block .col-md-4:before {
    width: 200px;
    height: 200px;
  }

  .progressive-jpg-block {
    margin-bottom: 64px;
    padding-top: 42px;
  }
}

@media (min-width: 1200px) {
  .complex-block-progressive {
    margin-top: 150px;
    padding-bottom: 112px;
  }

  .complex-block-progressive .heading-3 {
    margin-top: -50px;
  }

  .progressive-jpg-block {
    padding-right: 100px;
    padding-left: 120px;
  }

  .complex-block-progressive .text {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .complex-page .arrow-stage:before, .arrow-stage-box:before, .complex-page .arrow-stage:before, .arrow-stage-box:after {
    display: none
  }
}