@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: translate(0, -5px) scale(1.06);
            transform: translate(0, -5px) scale(1.06);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  20% {
    -webkit-transform: translate(0, -5px) scale(1.06);
            transform: translate(0, -5px) scale(1.06);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
}
@-webkit-keyframes vibrate2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes vibrate2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.absolute, .container, .tweeter, .woofer, .woofer__center {
  position: absolute;
  left: 50%;
  top: 50%;
}

.base, .tweeter, .woofer {
  border-radius: 100%;
  background: linear-gradient(70deg, #828387, #f0f0f2, #828387);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}

.container {
  background: linear-gradient(90deg, #A09F9F, #d0d0d2, #A09F9F);
  width: 300px;
  height: 450px;
  margin: -225px 0 0 -150px;
  border: 4px solid #828387;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}

.tweeter {
  margin: -200px 0 0 -75px;
  width: 150px;
  height: 150px;
}
.tweeter__rim {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
}
.tweeter__rim .screw {
  width: 14px;
  height: 14px;
  position: absolute;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0px -2px 4px #000, inset 0px 2px 2px rgba(255, 255, 255, 0.7);
  border: 2px solid #777;
}
.tweeter__rim .screw:nth-child(1) {
  top: -22px;
  left: 40px;
}
.tweeter__rim .screw:nth-child(2) {
  bottom: -22px;
  left: 45px;
}
.tweeter__rim .screw:nth-child(3) {
  top: 42px;
  left: -22px;
}
.tweeter__rim .screw:nth-child(4) {
  top: 42px;
  right: -22px;
}
.tweeter__rim .mesh {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-animation: vibrate 0.4s linear infinite;
          animation: vibrate 0.4s linear infinite;
}
.tweeter__rim .mesh:after {
  content: '';
  width: 90px;
  height: 90px;
  border-radius: 100%;
  border: 5px solid #444;
  position: absolute;
  background: linear-gradient(transparent 70%, #000 30%), linear-gradient(90deg, transparent 70%, #000 30%), linear-gradient(70deg, #000, #dbdbdd, #000);
  background-size: 4px 4px, 4px 4px, 90px 90px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.woofer {
  width: 220px;
  height: 220px;
  margin: -20px 0 0 -110px;
}
.woofer__center {
  margin: 0 0 0 -90px;
  height: 180px;
  width: 180px;
  border-radius: 100%;
  background-color: #111;
  background: -webkit-radial-gradient(center, ellipse cover, #595959 0%, #424242 40%, #595959 41%, #424242 43%, #424242 45%, #595959 46%, #424242 48%, #424242 50%, #595959 51%, #424242 53%, #424242 55%, #595959 56%, #424242 58%, #424242 60%, #595959 61%, #424242 63%, #595959 100%);
  -webkit-animation: vibrate2 0.4s linear infinite;
          animation: vibrate2 0.4s linear infinite;
}
.woofer__center:after {
  content: "";
  position: absolute;
  border-radius: 100%;
  margin: 65px 0 0 65px;
  width: 50px;
  height: 50px;
  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
  background: -webkit-radial-gradient(center, ellipse cover, #494949 0%, #292929 100%);
}
.woofer__rim {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 190px;
  height: 190px;
  border-radius: 100%;
}
.woofer__rim .screw {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: #555;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #555;
  border: 2px solid #000;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.woofer__rim .screw:before, .woofer__rim .screw:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #000;
  position: absolute;
  box-shadow: -1px 0px 2px 0px rgba(255, 255, 255, 0.7);
  top: 2px;
  left: 0;
}
.woofer__rim .screw:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.woofer__rim .screw:nth-child(1) {
  top: -13px;
  left: 90px;
}
.woofer__rim .screw:nth-child(2) {
  bottom: -13px;
  left: 90px;
}
.woofer__rim .screw:nth-child(3) {
  top: 13px;
  left: 20px;
}
.woofer__rim .screw:nth-child(4) {
  top: 13px;
  right: 20px;
}
.woofer__rim .screw:nth-child(5) {
  top: 90px;
  left: -13px;
}
.woofer__rim .screw:nth-child(6) {
  top: 90px;
  right: -13px;
}
.woofer__rim .screw:nth-child(7) {
  bottom: 13px;
  left: 20px;
}
.woofer__rim .screw:nth-child(8) {
  bottom: 13px;
  right: 20px;
}