.messages-wrapper.background-colour-none{
    background:#fff;
}
.messages-wrapper.background-colour-grey{
    background:#f8f9fb;
}
.messages-wrapper.background-colour-blue{
    background:#e8f7fc;
}

.messages-wrapper.background-colour-orange{
    background:#fff5f2;
}

.messages-wrapper.background-colour-green{
    background:#ECFBF3;
}
.messages-wrapper{
  position:relative;
  padding: 0;
  overflow:hidden;
}
.messages-wrapper .top-line{
  width: 1px;
  height: 50px;
  background: #11CE66;
  position:absolute;
  left:50%;
  top:60px;
  margin-left:-1px;
}

.messages-wrapper .message{
  width:400px;
  clear:both;
  background:#fff;
  border-radius:10px;
  margin:140px auto 120px auto;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.10));
  padding:20px;
}
.overflow-message{
  overflow:hidden;
}
.messages-wrapper .message:before{
  content:"";
  display:block;
  width: 1px;
  height: 50px;
  background: #11CE66;
  position:absolute;
  left:50%;
  margin-left:-11px;
  bottom:-115px;
}
.messages-wrapper .message .triangle{
  display:block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 36px 0 0;
  border-color: #ffffff transparent transparent transparent;
  position:absolute;
  bottom:-36px;
  left:50%;
  margin-left:-12px;
}
.messages-wrapper .message.right .triangle{
  border-width: 0 36px 36px 0;
  border-color: transparent #ffffff transparent transparent;
  margin-left:-46px;
}

.messages-wrapper .message .icon{
  font-size:52px;
  float:left;
  margin-right:10px;
}
.messages-wrapper .message .quote{
  float:left;
  width:calc(100% - 75px);
  font-size:19px;
  line-height:1.3;
  text-align:center;
}

.messages-wrapper .message.right .icon{
  float:right;
  margin-right:0;
  margin-left:10px;
}

@media (max-width: 680px){
  .messages-wrapper .message{
    width:calc(100% - 40px);
}