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


.box.goobox {
  box-sizing: border-box;
}

.goobutton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;  width: 160px;
  height: 60px;
  border: 7px solid #fff;  border: 7px solid var(--nav-title-color); 
  margin: auto;
  overflow: hidden;
  z-index: 100;
}


.gootext {
  position: absolute;
  top: 20px;
  font-size: 17px;
  color: #fff; color: var(--nav-title-color);
  z-index: 100;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .5s;
}
.goobutton:hover .gootext {
  color: #4f575c; color: var(--bg-color);
}

.goocontainer {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  filter:url('#goo');
  -webkit-filter:url('#goo');
}

.blob {
  width: 30%;
  border-radius: 100%;
  position: absolute;
  display: block;
  background-color: #fff; background-color: var(--nav-title-color); 
  -webkit-transition: all .5s;
  transition: all .5s;
  height: 60px;
}

.blob:nth-child(1) {
  left: -5%;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: scale(1.3) translateY(125%) translateZ(0);
          transform: scale(1.3) translateY(125%) translateZ(0);
}

.goobutton:hover .blob:nth-child(1) {
  -webkit-transform: scale(1.3) translateY(0px) translateZ(0);
          transform: scale(1.3) translateY(0px) translateZ(0);
}

.blob:nth-child(2) {
  left: 20%;
  -webkit-transition-delay: 50ms;
          transition-delay: 50ms;
  -webkit-transform: scale(1.3) translateY(125%) translateZ(0) rotate(0deg);
          transform: scale(1.3) translateY(125%) translateZ(0) rotate(0deg);
}

.goobutton:hover .blob:nth-child(2) {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
  -webkit-transform: scale(1.6) translateY(0) translateZ(0) rotate(25deg);
          transform: scale(1.6) translateY(0) translateZ(0) rotate(25deg);
}

.blob:nth-child(3) {
  left: 45%;
  -webkit-transition-delay: 25ms;
          transition-delay: 25ms;
  -webkit-transform: scale(1.6) translateY(125%) translateZ(0);
          transform: scale(1.6) translateY(125%) translateZ(0);
}

.goobutton:hover .blob:nth-child(3) {
  -webkit-transition-delay: 50ms;
          transition-delay: 50ms;
  -webkit-transform: scale(1.6) translateY(0) translateZ(0);
          transform: scale(1.6) translateY(0) translateZ(0);
}

.blob:nth-child(4) {
  left: 75%;
  -webkit-transition-delay: 50ms;
          transition-delay: 50ms;
  -webkit-transform: scale(1.6) translateY(125%) translateZ(0) rotate(0);
          transform: scale(1.6) translateY(125%) translateZ(0) rotate(0);
}

.goobutton:hover .blob:nth-child(4) {
  -webkit-transition-delay: 120ms;
          transition-delay: 120ms;
  -webkit-transform: scale(1.6) translateY(0) translateZ(0) rotate(-25deg);
          transform: scale(1.6) translateY(0) translateZ(0) rotate(-25deg);
}