.solutions__item--collaboration:hover, .solutions__item--collaboration:focus {
    top: calc(0 - 20px);
    margin-left: calc((160px / -2) - 20px);
  }

.solutions__item--callcenter {
      background-color: #662eff;
      width: 136px;
      height: 136px;
      top: 40%;
      margin-left: calc(136px / -2);
    }

.solutions__item--callcenter:hover, .solutions__item--callcenter:focus {
    top: calc(40% - 20px);
    margin-left: calc((136px / -2) - 20px);
  }

.solutions__item--ecommerce {
      background-color: #662eff;
      width: 136px;
      height: 136px;
      top: 10%;
      margin-left: calc(136px / -2);
    }

.solutions__item--ecommerce:hover, .solutions__item--ecommerce:focus {
    top: calc(10% - 20px);
    margin-left: calc((136px / -2) - 20px);
  }

.solutions__item--marketing {
      background-color: #1c0b43;
      width: 202px;
      height: 202px;
      top: 20%;
      margin-left: calc(202px / -2);
    }

.solutions__item--marketing:hover, .solutions__item--marketing:focus {
    top: calc(20% - 20px);
    margin-left: calc((202px / -2) - 20px);
  }

.solutions__item--crm {
      background-color: #662eff;
      width: 96px;
      height: 96px;
      top: 50%;
      margin-left: calc(96px / -2);
    }

.solutions__item--crm:hover, .solutions__item--crm:focus {
    top: calc(50% - 20px);
    margin-left: calc((96px / -2) - 20px);
  }

.solutions__item--education {
      background-color: #1c0b43;
      width: 160px;
      height: 160px;
      top: 15%;
      margin-left: calc(160px / -2);
    }

.solutions__item--education:hover, .solutions__item--education:focus {
    top: calc(15% - 20px);
    margin-left: calc((160px / -2) - 20px);
  }

.solutions__item--gaming {
      background-color: #662eff;
      width: 136px;
      height: 136px;
      top: 228px;
      margin-left: calc(136px / -2);
    }

.solutions__item--gaming:hover, .solutions__item--gaming:focus {
    top: calc(228px - 20px);
    margin-left: calc((136px / -2) - 20px);
  }

.solutions__item--cars {
      background-color: #1c0b43;
      width: 96px;
      height: 96px;
      top: 26px;
      margin-left: calc(96px / -2);
    }

.solutions__item--cars:hover, .solutions__item--cars:focus {
    top: calc(26px - 20px);
    margin-left: calc((96px / -2) - 20px);
  }

.solutions__bubble-wrapper {
    $ bubbleWrapperWidth: 1450px;

    position: relative;
    text-align: center;
    height: calc(100vh - 300px);
    min-height: 600px;
    max-height: 1000px;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    padding-top: calc((100vh - 800px) / 2);
    max-width: 1980px
  }

.solutions__buttons-container {
    height: 100px;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
  }

.solutions__grid {
    position: relative;
  }

.solutions__grid-1 {
      -ms-flex: 1;
          flex: 1;
      min-width: 140px;
    }

.solutions__grid-2 {
      -ms-flex: 2;
          flex: 2;
      min-width: 180 px;
    }

.solutions__grid-3 {
      -ms-flex: 3;
          flex: 3;
      min-width: 200 px;
    }

.solutions__grid-4 {
      -ms-flex: 4;
          flex: 4;
      min-width: 242 px;
    }

.solutions .button.animate {
      animation: bubble-button 1s;
    }

@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideLeftSmall {
  from {
    transform: translateX(-20px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes openMenu {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(-50px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes bubble-button {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes bubbleAnimation {
  0% {
    transform: translateX(1px) translateY(8px);
  }

  10% {
    transform: translateX(1px) translateY(7px);
  }

  20% {
    transform: translateX(2px) translateY(10px);
  }

  30% {
    transform: translateX(10px) translateY(3px);
  }

  40% {
    transform: translateX(6px) translateY(7px);
  }

  50% {
    transform: translateX(5px) translateY(9px);
  }

  60% {
    transform: translateX(1px) translateY(4px);
  }

  70% {
    transform: translateX(8px) translateY(2px);
  }

  80% {
    transform: translateX(1px) translateY(6px);
  }

  90% {
    transform: translateX(3px) translateY(2px);
  }

  100% {
    transform: translateX(1px) translateY(8px);
  }
}

@keyframes headerPadding {
  from {
    padding-left: 0;
  }

  to {
    padding-left: 75px;
  }
}

@keyframes circleDash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}