/* jsloader//css inline code */

      .hidden {
  border: 0 !important;
  height: 1px !important;
  opacity: 0;
  overflow: hidden;
  padding: 0 !important;
  pointer-events: none;
  position: absolute !important;
  width: 1px !important;
}

.compsoul-menu-ball-body {
  align-items: center;
  background: #2c3333;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}

.compsoul-menu-ball {
  --number-of-items: 4;
  padding: 250px 0;
  width: 80%;
}

.compsoul-menu-ball .menu-container,
.compsoul-menu-ball .menu-item,
.compsoul-menu-ball .menu-link {
  border: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.compsoul-menu-ball .menu-container {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  z-index: 0;
}

.compsoul-menu-ball .menu-container:before {
  background: #fff;
  bottom: 0;
  border-radius: 16px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}

.compsoul-menu-ball .menu-item {
  width: calc(100% / var(--number-of-items));
}

.compsoul-menu-ball .menu-link {
  color: #2c3333;
  display: block;
  padding: 24px 0;
  text-align: center;
  width: 100%;
}

.compsoul-menu-ball .menu-item-ball {
  --background-ball: #005aab;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(0, -100%);
  transition: transform 0.6s;
  width: calc(100% / var(--number-of-items));
}

.compsoul-menu-ball .menu-item:hover + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item-ball {
  --background-ball: #ffe162;
  transform: translate(calc((var(--number-of-items) - 1) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item-ball {
  --background-ball: #219f94;
  transform: translate(calc((var(--number-of-items) - 2) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item-ball {
  --background-ball: #fc4f4f;
  transform: translate(calc((var(--number-of-items) - 3) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item-ball {
  --background-ball: #005aab;
  transform: translate(calc((var(--number-of-items) - 4) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 5) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 6) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 7) * 100%), -100%);
}

.compsoul-menu-ball .menu-item:hover + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item-ball,
.compsoul-menu-ball .menu-item:focus-within + .menu-item + .menu-item + .menu-item + .menu-item + .menu-item  + .menu-item + .menu-item + .menu-item-ball {
  transform: translate(calc((var(--number-of-items) - 8) * 100%), -100%);
}

.compsoul-menu-ball .ball-container {
  align-items: center;
  border: 16px solid #2c3333;
  border-radius: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 64px;
  margin: 0 0 -16px;
  overflow: hidden;
  position: relative;
  width: 64px;
  z-index: 0;
}

.compsoul-menu-ball .ball-container:before,
.compsoul-menu-ball .ball-container:after{
  background: var(--background-ball);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  transition: background 0.8s;
  top: 0;
  z-index: -1;
}

.compsoul-menu-ball .ball-container:after{
  background: linear-gradient(#0000001a, #ffffff1a); 
}

.compsoul-menu-ball .ball-gradient {
  background: linear-gradient(#ffffff33, #0000001a, #ffffff33);
  border-radius: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 100%;
  width: 90%;
}

.compsoul-menu-ball .ball-gradient:before {
  background: linear-gradient(#fff, #ffffff05);
  border-radius: 100%;
  content: "";
  height: 40%;
  transform: translate(0, 25%);
  width: 60%;
}