#dialogue-left,
#dialogue-right {
  position: absolute;
  top: 462px;
  height: 178px;
  pointer-events: none;
}

#dialogue-left .backdrop,
#dialogue-right .backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
}

#dialogue-left .avatar,
#dialogue-right .avatar {
  position: absolute;
  width: 100px;
  height: 178px;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#dialogue-left .avatar {
  left: 5px;
}

#dialogue-right .avatar {
  right: 5px;
}

#dialogue-left .text,
#dialogue-right .text {
  position: absolute;
  overflow: hidden;
  color: white;
  height: 178px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#dialogue-left .text .name,
#dialogue-right .text .name {
  font-size: 1.2em;
  font-weight: bold;
}

#dialogue-left .text .body,
#dialogue-right .text .body {
}

#dialogue-left .text {
  left: 110px;
  right: 10px;
}

#dialogue-right .text {
  left: 10px;
  right: 115px;
}

#dialogue-left .triangle {
  position: absolute;
  right: 10px;
  bottom: 5px;
}

#dialogue-right .triangle {
  position: absolute;
  right: 115px;
  bottom: 5px;
}

.triangle {
  animation: blink-animation 1s steps(2, start) infinite;
  -webkit-animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}