.callout--info {
  color: #1e283c;
  background-color: #d6f5ff;
  border-color: #107da2;
      border-left-style: solid;
    border-left-width: 5px;
    padding: 10px 40px;
}

.callout--info h4 {
font-weight: 400;
    color: #242424;
    font-size: 25px;
    line-height: 1.19444;
}

.bug {
  background-color: #FDF7E8;
      display: block;
    padding: 12px 18px 12px 65px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #EDB431;
    border-style: solid;
    line-height: 2rem;
    margin-top: 18px;
    margin-bottom: 18px;
    position: relative;
}
.bug:before {
  content: '\f071';
  font-family: "fontawesome";
  color: #EDB431;
  font-size: 28px;
    font-weight: 300;
    position: absolute;
    left: 20px;
    top: 22px;
    vertical-align: middle;
}
.bug.singleline:before {
  top: 12px;
}

.fa-magic:before, .fa-wand-magic:before {
    content: "\f0d0";
}
.note {
  background-color: #ffeffa;
  color: #353535;
      display: block;
    padding: 12px 18px 12px 65px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #F85467;
    border-style: solid;
    line-height: 2rem;
    margin-top: 18px;
    margin-bottom: 18px;
    position: relative;
}
.note:before {
  content: '\f040';
  font-family: "fontawesome";
  color: #F85467;
  font-size: 28px;
    font-weight: 300;
    position: absolute;
    left: 20px;
    top: 22px;
    vertical-align: middle;
    -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
}
.note.singleline:before {
  top: 12px;
}