@charset "utf-8";
/* CSS Document */

/** Simple speech bubble */

.speech-bubble {
    background: #6cb33f;
    -webkit-border-radius: 6px;
            border-radius: 6px;
    margin: 20px;
    position: relative;
	padding: 30px;
}

.speech-bubble p {
    margin: 0 0 10px;
	font-family: 'Open Sans', sans-serif;
	font-size:1em;
    font-weight: 400;
	color:#ffffff;
	padding-bottom:10px;
}
.speech-bubble h1 {
    margin: 0 0 10px;
	color:#ffffff;
	padding-bottom:10px;
}
.speech-bubble p:last-of-type {
    margin-bottom: 0;
}

.speech-bubble::after {
    border-left: 20px solid transparent;
    border-top: 20px solid #6cb33f;
    bottom: -20px;
    content: "";
    position: absolute;
    right: 20px;
}

/** Speech bubble with drop shadow and border */

.speech-bubble-ds {
    background: #6cb33f;
    border: 1px solid #a7a7a7;
    -webkit-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 auto 40px;
    max-width: 400px;
    padding: 15px;
    position: relative;
}

.speech-bubble-ds p {
    margin-bottom: 10px;
}
.speech-bubble-ds p:last-of-type {
    margin-bottom: 0;
}

.speech-bubble-ds-arrow {
    border-left: 21px solid transparent;
    border-top: 20px solid rgba(0, 0, 0, 0.2);
    bottom: -25px;
    position: absolute;
    right: 15px;
}
.speech-bubble-ds-arrow::before {
    border-left: 23px solid transparent;
    border-top: 23px solid #6cb33f;
    bottom: 2px;
    content: "";
    position: absolute;
    right: 5px;
}
.speech-bubble-ds-arrow::after {
    border-left: 21px solid transparent;
    border-top: 21px solid #6cb33f;
    bottom: 4px;
    content: "";
    position: absolute;
    right: 6px;