.bubble-block {
  position: absolute;
  z-index: 1000;
  transform: translate(-10%,-80%);
}

.speech-bubble {
  position: relative;
  margin: .5em auto;
  width: 8em;
  height: 4em;
  border-radius: .25em;
  transform: rotate(-4deg) rotateY(15deg);
  background: #629bdd;
  font: 1.8em/1.2 Century Gothic, Verdana, sans-serif;
  text-align: center;
  padding: .35em;
  box-sizing: content-box;
}

.speech-bubble:before, .speech-bubble:after {
  position: absolute;
  z-index: -1;
  content: '';
}

.speech-bubble:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  transform: rotate(2deg) translate(.35em, -.15em) scale(1.02);
  background: #f4fbfe;
}

.speech-bubble:before {
  border: solid 0 transparent;
  border-right: solid 3.5em #f4fbfe;
  border-bottom: solid .25em #629bdd;
  bottom: .25em;
  left: 1.25em;
  width: 0;
  height: 1em;
  transform: rotate(45deg) skewX(75deg);
}

.speech-bubble span {
  margin-left: .35em;
}

.speech-bubble span:first-line {
  font-weight: bold;
}

.bubble-text {
  padding: 0 .35em;
}

.speech-bubble {
  font-size: 4vw;
}

@media (min-width: 992px) {
  .speech-bubble {
    font-size: 1.8em;
  }
}

.perspective {
  perspective: 35em;
}