/*===========================================================
balloon
============================================================*/
.balloon {
  background: #99dfff;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.balloon:before {
  content: "";
  display: inline-block;
  border: 10px solid transparent;
  border-top: 10px solid #99dfff;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.balloon.is-inline {
  display: inline-block;
}

.balloon.is-round {
  border-radius: 999em;
  padding: 20px 30px;
}

.balloon.is-bottom {
  margin-bottom: 0;
  margin-top: 20px;
}

.balloon.is-bottom:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid #99dfff;
  bottom: auto;
  top: -20px;
}

.balloon.is-right{
  margin-bottom: 0;
  margin-left: 20px;
}

.balloon.is-right:before{
  border-top: 10px solid transparent;
  border-right: 10px solid #99dfff;
  bottom: 50%;
  left: -20px;
  transform: translateX(0);
  transform: translateY(50%);
}

.balloon.is-left{
  margin-bottom: 0;
  margin-right: 20px;
}

.balloon.is-left:before {
  border-top: 10px solid transparent;
  border-left: 10px solid #99dfff;
  bottom: 50%;
  left: auto;
  right: -20px;
  transform: translateY(50%);
}

/*************************************
balloon.border
**************************************/
.balloon.is-border {
  background: #fff;
  border: 2px solid #ccc;
}

.balloon.is-border:before,
.balloon.is-border:after {
  content: "";
  display: inline-block;
  border: 12px solid transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.balloon.is-border:before {
  border-top: 12px solid #ccc;
  bottom: -24px;
}

.balloon.is-border:after {
  border-top: 12px solid #fff;
  bottom: -21px;
}

.balloon.is-border.is-bottom {
  margin-bottom: 0;
  margin-top: 20px;
}

.balloon.is-border.is-bottom:before {
  border-top: 12px solid transparent;
  border-bottom: 12px solid #ccc;
  bottom: auto;
  top: -24px;
}

.balloon.is-border.is-bottom:after {
  border-top: 12px solid transparent;
  border-bottom: 12px solid #fff;
  bottom: auto;
  top: -21px;
}

.balloon.is-border.is-right:before{
  border-top: 12px solid transparent;
  border-right: 12px solid #ccc;
  bottom: 50%;
  left: -24px;
  transform: translateX(0);
  transform: translateY(50%);
}

.balloon.is-border.is-right:after {
  border-top: 12px solid transparent;
  border-right: 12px solid #fff;
  bottom: 50%;
  left: -21px;
  transform: translateX(0);
  transform: translateY(50%);
}

.balloon.is-border.is-left:before {
  border-top: 12px solid transparent;
  border-left: 12px solid #ccc;
  bottom: 50%;
  left: auto;
  right: -24px;
  transform: translateY(50%);
}

.balloon.is-border.is-left:after {
  border-top: 12px solid transparent;
  border-left: 12px solid #fff;
  bottom: 50%;
  left: auto;
  right: -21px;
  transform: translateY(50%);
}