div.callout {
	height: auto;
	width: 100%;
	padding: 10px;
}

div.callout {
	background-color: #fafafa;
	position: relative;
	color: #333;
	font-size: 16px;
	padding: 10px;
	min-height: 50px;
	box-sizing: border-box;
	line-height: 1.3;
	font-weight: 400;
	letter-spacing: 0.1px;
	border-radius: 5px;
}

.callout::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}

.callout.top::before {
	left: 45%;
	bottom: -20px;
	border-top: 10px solid #fafafa;
}

.callout.bottom::before {
	left: 45%;
	top: -20px;
	border-bottom: 10px solid #fafafa;
}

.callout.left::before {
	right: -20px;
	top: 40%;
	border-left: 10px solid #fafafa;
}

.callout.right::before {
	left: -20px;
	top: 40%;
	border-right: 10px solid #fafafa;
}

.callout.top-left::before {
	left: 20px;
	bottom: -20px;
	border-top: 10px solid #fafafa;
}

.callout.top-right::before {
	right: 20px;
	bottom: -20px;
	border-top: 10px solid #fafafa;
}

@keyframes updown {
	0% { transform: translateY(0); }
	50% { transform: translateY(10px);}
	100% { transform: translateY(0);}
}

@keyframes downup {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}