$location-height: 200px
$location-left: 18%, 43%, 67%, 68.5%, 71%, 71.5%, 72%, 75%, 79%
$location-bottom: 86%, 91%, 74%, 79%, 95%, 91.1%, 72.5%, 76%, 55%
$location-heights: 145px, 137px, 155px, 280px, 163px, 122px, 140px, 70px, 100px
.bl-clients
  position: relative
  z-index: 9
  margin-top: -150px
  .block-title
    position: absolute
    padding: 120px 70px 100px 265px
    background: url("../img/yellow-left.png") no-repeat
    background-size: 100% 100%
    top: -22px
    width: 33%
    height: 300px
    &+div
      position: absolute
      top: 135px
  .map
    min-height: calc(100vh + 150px)
    background: url("../img/red-background.png") no-repeat bottom
    padding-top: 300px
    background-size: 100% auto
    display: flex
    align-items: center
    .map-box
      width: 100%
      height: 0
      padding-bottom: 28.07%
      background: url("../img/map.png") no-repeat
      background-size: cover
      margin-top: 150px
      position: relative
      >div
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        >div
          position: relative
          width: 100%
          height: 100%
          .location
            height: $location-height
            position: absolute
            background: transparent
            border-left: solid 1px $primary-color
            @extend .ease-animated
            .relative
              display: inline-block
              height: 100%
              position: relative
              >div
                color: white
                padding: 0 25px
                margin-top: -10px
                cursor: pointer
                position: relative
                &.active
                  color: $primary-color
                >div
                  cursor: text
                  color: black
                  padding: 10px 15px
                  background-color: white
                  font-size: 18px
                  display: none
                  position: absolute
                  -webkit-box-shadow: 0px 30px 20px -8px rgba(0, 0, 0, 0.27)
                  -moz-box-shadow: 0px 30px 20px -8px rgba(0, 0, 0, 0.27)
                  box-shadow: 0px 30px 20px -8px rgba(0, 0, 0, 0.27)
                  z-index: 10
                &:hover
                  >div
                    display: block
              &:before,&:after
                content: ''
                width: 20px
                height: 20px
                border-radius: 50%
                background-color: $primary-color
                position: absolute
                top: -10px
                transform: translateX(-50%)
              &:after
                top: unset
                bottom: 0
                height: 5px
              //&:hover
              //  &:before,&:after
              //    background-color: darken($primary-color, 30%)
            @each $left in $location-left
              $i: index($location-left, $left)
              &:nth-child(#{$i})
                left: $left
                //z-index: $i
            @each $bottom in $location-bottom
              $i: index($location-bottom, $bottom)
              &:nth-child(#{$i})
                bottom: $bottom
            @each $height in $location-heights
              $i: index($location-heights, $height)
              &:nth-child(#{$i})
                height: $height
            &:nth-child(3)
              .relative
                right: 100%
                &:before,&:after
                  right: 0
                  left: unset
                  transform: translateX(50%)
    .wrap-carousel
      margin-left: -10px
      margin-right: -10px
      margin-top: -120px
    .wrap-carousel-image
      width: 100%
      height: 100px
      text-align: center
      vertical-align: middle
      img
        position: absolute
        max-width: 100%
        max-height: 100%
        object-fit: contain
.owl-theme .owl-dots .owl-dot.active span
  background: $primary-color
.client-group
  cursor: pointer
.client-group.active
  color: $primary-color!important
.owl-carousel-client-mobile .owl-nav
  text-align: right
  button.owl-next, button.owl-prev
    padding: 0 20px!important
    color: white!important
    font-size: 27px
    &:hover
      background: $primary-color

.owl-carousel-client
  .wrap-carousel-image
    animation: fade-in .5s ease
@keyframes fade-in
  0%
    opacity: 0

  100%
    opacity: 1

@include responsive_768
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
    .block-title
      padding: 145px 70px 70px 100px

@include responsive_992
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
    .block-title
      padding: 145px 70px 70px 100px

@include responsive_1024
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
    .block-title
      padding: 145px 70px 70px 100px
    .map
      .map-box
        margin-top: 300px

@include responsive_1200
  .bl-clients
    .map
      min-height: calc(100vh + 150px)
      background-color: $red-color
    .block-title
      padding: 145px 70px 70px 100px

@include responsive_1400
  .bl-clients
    margin-top: -210px
    .map
      padding-top: 500px
    .block-title
      top: 70px