.blobs {
  pointer-events: none;
  transition: var(--speed) all ease-in, top 2s ease-out;
   filter: url('#goo');
   position: absolute;
   left: 100px;
   top: 10px;
   width: 100%;
   z-index: 9999;
}


@media only screen and (max-width: 800px) {
  .blobs{left: 10px;}
}

.blobdot{
  position: absolute;
  z-index: -1;
  top: 78px;
  left: 86px;
  display: block;
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  animation: blobdot-anim-top linear 3s infinite;
}
@keyframes blobdot-anim-top {
   0% {transform: scale(1) translate(0, 0); left:0px;}
   25% {transform: scale(0.9) translate(-10%, -10%); left:-200px;}
   50% {transform: scale(1) translate(0, 0); left:-500px;}
   75% {transform: scale(0.9) translate(-10%, -10%); left:-900px;}
   100% {transform: scale(1) translate(0, 0); left:-1400px;}
}
@keyframes blobdot-anim-bottom {
   0% {transform: scale(1); left:0px;}
   25% {transform: scale(0.9); left:300px;}
   50% {transform: scale(1); left:600px;}
   75% {transform: scale(0.9); left:1100px;}
   100% {transform: scale(1); left:1800px;}
}

.blobdot:nth-child(8) {animation-name: blobdot-anim-bottom; animation-delay: 0.4s;}
.blobdot:nth-child(9) {animation-name: blobdot-anim-top; animation-delay: 0.8s;}
.blobdot:nth-child(10) {animation-name: blobdot-anim-bottom;animation-delay: 1.2s;}
.blobdot:nth-child(11) {animation-name: blobdot-anim-bottom; animation-delay: 1.6s;}
.blobdot:nth-child(12) {animation-name: blobdot-anim-top; animation-delay: 2.0s;}
.blobdot:nth-child(13) {animation-name: blobdot-anim-bottom;animation-delay: 2.4s;}
.blobdot:nth-child(14) {animation-name: blobdot-anim-bottom; animation-delay: 2.8s;}

.hover-left .blobs{
  margin-right: calc(25% - 100px);
  margin-left: calc(75% - 100px);
}
.hover-right .blobs{
  margin-right: calc(75% - 100px);
  margin-left: calc(25% - 100px);
}

@keyframes blob-left-top-anim {
   0% {transform: scale(1) translate(0, 0);}
   25% {transform: scale(0.95) translate(-5%, -5%);}
   50% {transform: scale(1) translate(0, 0);}
   75% {transform: scale(0.95) translate(5%, 5%);}
   100% {transform: scale(1) translate(0, 0);}
}
@keyframes blob-right-top-anim {
   0% {transform: scale(1) translate(0, 0);}
   35% {transform: scale(0.95) translate(0, -5%);}
   50% {transform: scale(1) translate(0, 0);}
   85% {transform: scale(0.95) translate(0, 5%);}
   100% {transform: scale(1) translate(0, 0);}
}
@keyframes blob-left-bottom-anim {
   0% {transform: scale(1) translate(0, 0);}
   25% {transform: scale(0.95) translate(-5%, 0);}
   50% {transform: scale(1) translate(0, 0);}
   75% {transform: scale(0.95) translate(5%, 0);}
   100% {transform: scale(1) translate(0, 0);}
}
@keyframes blob-right-bottom-anim {
   0% {transform: scale(1) translate(0, 0);}
   25% {transform: scale(0.95) translate(5%, -5%);}
   50% {transform: scale(1) translate(0, 0);}
   75% {transform: scale(0.95) translate(-5%, 5%);}
   100% {transform: scale(1) translate(0, 0);}
}

.blob {
   position: absolute;
   background: #fff;
   width: 200px;
   height: 200px;
   line-height: 1;
   text-align: center;
   color: white;
   font-size: 40px;
   border-radius: 100%;
   animation: blob-left-top-anim cubic-bezier(0.77, 0, 0.175, 1) 3s infinite;
}
.blob:nth-child(2) {
   animation-name: blob-right-top-anim;
}
.blob:nth-child(3) {
   animation-name: blob-left-bottom-anim;
   animation-delay: 0.2s;
}
.blob:nth-child(4) {
   animation-name: blob-right-bottom-anim;
   animation-delay: 0.4s;
}

.blob:nth-child(5) {
   animation: none;
   font-size: 26px;
   position: relative;
   height: 120px;
   width: 120px;
   top: 0px;
   left: 40px;
}
.blob:nth-child(5):before {
   content:"";
   background: url('../img/Story_Tailor_Logo.png');
   background-size: 130px 130px; background-repeat: no-repeat;
   display: block;
   position: absolute;
   width:130px;
   height:130px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: pointer;
   pointer-events: auto;
}

.blobbg {
  position: absolute;
  z-index: -1;
  background: #fff;
  width: 5000px;
  height: 20px;
  left:-2000px ;
  top: 80px;
  bottom: -100px;
}