.joke-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	overflow: hidden;
}
.joke-container-smile {
	padding: 0 80px;
	background: none !important;
	background-image: none !important;
}
.joke-container-inner {
	text-align: center;
	padding: 2px 6px;
}
.joke-margin {
	margin-bottom: 8px;
	padding: 0;
	border: 1px solid #b9c0d0;
}
.joke-container-inner p {
	margin-bottom: 0;
	font-size: 16px;
	animation: fade-in-count 1s ease;
}
.joke-container-smile::before,
.joke-container-smile::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 69px;
	height: 50px;
	background: url("./images/randomjokes.png") no-repeat;
	background-size: 69px 50px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
}
.joke-container-smile::before {
	left: 10px;
	transform: translate(-150%, -50%);
	animation: joke-left-in 650ms ease-out forwards;
}
.joke-container-smile::after {
	right: 10px;
	transform: translate(150%, -50%);
	animation: joke-right-in 650ms ease-out forwards;
	animation-delay: 60ms;
}
@keyframes joke-left-in {
	0%   { transform: translate(-150%, -50%); opacity: 0; }
	60%  { transform: translate(-10%, -50%); opacity: 0.85; }
	100% { transform: translate(0, -50%); opacity: 1; }
}
@keyframes joke-right-in {
	0%   { transform: translate(150%, -50%); opacity: 0; }
	60%  { transform: translate(10%, -50%); opacity: 0.85; }
	100% { transform: translate(0, -50%); opacity: 1; }
}
@keyframes fade-in-count {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 700px) {
	.joke-container-smile { padding: 0; }
	.joke-container-smile::before,
	.joke-container-smile::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.joke-container-inner p { animation: none; }
	.joke-container-smile::before,
	.joke-container-smile::after {
		animation: none;
		transform: none;
		opacity: 1;
	}
}