Разработка Идея логотипа "Росводоканал"

/* --- Colors --- */
@color-background: #e7f9fd;
@color-water: #00ccff;
@color-font: #333;
@color-pink: #f47ece;
@color-orange: #f7863e;
@color-blue: #47eff2;
/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css?family=Lato');

html, body {
  font-family: 'Lato', sans-serif;
  color: @color-font;
  background-color: @color-background;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px;
}

.water-droplet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 150px; height: 150px;
  border-top-left-radius: 0;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-bottom-left-radius: 75px;
  background-color: @color-water;
  border: 5px solid lighten(@color-water, 15%);
  z-index: 20;
  animation: water-droplet 1s ease-in-out alternate infinite;
  ul.eye {
    position: absolute;
    top: 95px; left: 50%;
    transform-origin: left center;
    transform: translateX(-50%) rotate(-45deg);
    width: 120px; height: 10px;
    margin: 0; padding: 0;
    list-style: none;
    li {
      position: absolute;
      top: 0;
      width: 40px; height: 25px;
      border-radius: 50%;
      border: 5px solid @color-water;
      border-bottom: 5px solid @color-background;
    }
    li:nth-child(1) {
      left: 0;
    }
    li:nth-child(2) {
      right: 0;
    }
  }
  .mouth {
    position: absolute;
    top: 100px; left: 100px;
    transform-origin: center center;
    transform: rotate(-45deg);
    width: 5px; height: 10px;
    border: 2px solid @color-background;
    background-color: darken(@color-water, 2%);
    border-radius: 50%;
    animation: sleep_mouth 1s ease-in-out alternate infinite;
  }
}

ul.water-ripple {
  position: absolute;
  top: 80%; left: 49%;
  transform: translate(-49%, -80%);
  width: 100px; height: 60px;
  list-style: none;
  li {
    opacity: 0;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 20px;
    border-radius: 50%;
    border: 4px solid @color-water;
    animation: water-ripple 1s 0.4s ease-in-out alternate infinite;
  }
  li:nth-child(1) {
    width: 100px; height: 40px;
    animation-delay: 0s;
    z-index: 10;
  }
  li:nth-child(2) {
    width: 150px; height: 60px;
    animation-delay: 0.2s;
    z-index: 9;
  }
  li:nth-child(3) {
    width: 200px; height: 80px;
    animation-delay: 0.4s;
    z-index: 8;
  }
  li:nth-child(4) {
    width: 250px; height: 100px;
    animation-delay: 0.6s;
    z-index: 7;
  }
  li:nth-child(5) {
    width: 300px; height: 120px;
    animation-delay: 0.8s;
    z-index: 6;
  }
  li:nth-child(6) {
    width: 350px; height: 140px;
    animation-delay: 1s;
    z-index: 5;
  }
}

/* ----------------------------------------------- */
/*                    Keyframes                    */
/* ----------------------------------------------- */

@keyframes water-ripple {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(-50%, -40%);
    opacity: 1;
  }
}

@keyframes water-droplet {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  100% {
    transform: translate(-50%, -40%) rotate(45deg);
  }
}

@keyframes sleep_mouth {
  0% {
    transform: rotate(-45deg) scale(1);
  }
  100% {
    transform: rotate(-45deg) scale(1.4);
  }
}