@charset "UTF-8";
/* CSS Document */


.box.globbox {
}

.globbutton {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  width: 160px;
  height: 60px;
  border-radius: 30px;
  margin: auto;
}

.globtext {
  position: absolute;
  top: 23px;
  color: #4f575c; color: var(--bg-color);
  z-index: 100;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.globbutton:hover .glob-circlecontent {
  opacity: 1;
}

.globcontainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  filter: url('#glob');
  -webkit-filter: url('#glob');
  -moz-filter: url('#glob');
   border-radius: 30px;
}

.glob-circle {
  position: absolute;
  display: block;
  background-color: #fff; background-color: var(--nav-title-color);
  -webkit-transition: all .6s;
  transition: all .6s;
  z-index: 100;
}

.glob-color {
  fill: #4f575c; fill: var(--bg-color);
}

.glob-circle.below {
  z-index: 10;
}
.glob-circlecontent {
  margin: 16px 18px;
  opacity: 0;
}
.globbutton:hover .glob-circlecontent {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
}

.glob-circle:nth-child(1) {
  top: 0;
  left: 0;
  width: 160px;
  height: 60px;
  border-radius: 50px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}


.glob-circle.below:nth-child(2) {
  top: 10px;
  left: 100px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.globbutton:hover .glob-circle.below:nth-child(2) {
  -webkit-transform: translateX(78px);
          transform: translateX(78px);
}