.speech-bubble {
	position: relative;
	background: #ffd90a;
	border-radius: .4em;
  margin-bottom: 15px;
  padding: 5px;
  font-style: italic;
  font-weight: bold;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 11px solid transparent;
	border-top-color: #ffd90a;
	border-bottom: 0;
	margin-left: -11px;
	margin-bottom: -11px;
}

.guide-bubble-container {
    position: relative;
    width: 100px;
}

.guide-bubble-container .guide-bubble-text {
    width: 300px;
    background-color: #4CCFE1;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 10px;

    /* Position the tooltip */
    position: absolute;
    top: 45px;
    left: -60%;
    z-index: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.guide-bubble-container .guide-bubble-text:before {
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    
    border-top: 8px solid transparent;
    border-bottom: 8px solid #4CCFE1; 
    border-right:8px solid transparent;
    border-left: 8px solid transparent;
    left:45%;
    
    top:-15px;
}