.footnote {
	display: none;
}

.footnote_wrapper {
	position: relative;
	display: inline-block;
	margin-left: 0.15rem;
}

/*.footnote_count {
  background: black;
  color: white;
  cursor: pointer;
}*/
.footnote_count {
	display: block;
	background: #0474a4;
	height: 10px;
	width: 10px;
	border-radius: 50px;
	text-align: center;
	font-size: 0.66rem;
	font-weight: bold;
	line-height: 0.8rem;
	float: left;
	color: #fff;
	cursor: pointer;
}

.footnote_popup {
	display: none;
	position: absolute;
	word-wrap: break-word;
	background: #fff;
	color: #000000;
	font-size: 0.9rem;
	left: -183px;
	bottom: 33px;
	padding: 20px 30px;
	width: 335px;
	z-index: 999;
	border: 1px solid #c2e1f5;
	-webkit-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	line-height: 1.65;
	font-weight: 300;
}

.footnote_popup a {
	color: #0077a9;
}

.footnote_popup::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	margin: 0 auto;
	left: 50%;
	top: 100%;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #000000;
}

.footnote_popup::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	margin: 0 auto;
	left: 50%;
	top: 100%;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #ffffff;
}

@media screen and (max-width: 979px) {
	.footnote_popup::before,
	.footnote_popup::after {
		display: none;
	}
}

.footnote_close {
	cursor: pointer;
	position: absolute;
	top: 1rem;
	right: 1rem;
}
/*
	This code works for Muslim brotherhood Rhetoric (In Their Own words) section
	since inside the slider the footnote should display inline.
	The next CSS line turns the footnote into inline.
	Add all the target classes if you need this to work on another sections as well.
*/
html #rhetoric-mb .footnote_popup {
	bottom: inherit;
	line-height: 21px;
	position: inherit;
	border: 0;
	background: 0;
	left: auto;
	top: auto;
	margin: 0;
	color: #000;
	font-size: 0.8rem;
	padding: 0;
	width: auto;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0);
}

html #rhetoric-mb .footnote_popup::after,
html #rhetoric-mb .footnote_popup::before {
	display: none;
}

html #rhetoric-mb .footnote_close {
	display: inline-block;
	margin-left: 0.25rem;
	background: #ffffff;
	padding: 0.15rem;
	border-radius: 50px;
	line-height: 0.5;
	position: static;
}