@font-face {
	font-family: 'hafs';
	src: url('../fonts/hafs.otf')
}

body {
	color: #000;
}

a {
	text-decoration: none;
	color: #88B04B;
}

.opc85:before {
	opacity: .85;
}

.enc-container {
	padding: 30px 0 100px 0;
	position: relative;
	width: 100%;
}

.enc-blue:before {
	background-color: #88B04B;
}

.black-layer:before,
.black-layer2:before,
.black-layer3:before,
.white-layer:before,
.gray-layer:before,
.gray-layer2:before,
.white-grad-layer:before,
.thm-layer:before,
.enc-blue:before {
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.enc-fixed-bg {
	background-image: url('../images/bg.jpg');
	background-attachment: scroll;
	background-size: cover;
	background-position: center;
	height: 100%;
	width: 100%;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -2;
}

.enc-inner {
	display: inline-block;
	max-width: 640px;
	width: 100%;
}

.enc-blue .enc-title>span,
.enc-blue .enc-title>h3 {
	color: #fff;
}

.enc-title>h1 {
	letter-spacing: 0;
	margin-bottom: 15px;
	font-size: 34px;
	font-weight: 800;
}

.enc-title h1 a {
	color: #fff;
}

.enc-blue .enc-title>span,
.enc-blue .enc-title>h1 {
	color: #fff;
}

.enc-title>h1+span,
.enc-title>span+h1 {
	margin-top: 7px;
}

.enc-title>span {
	font-size: 14px;
	display: block;
	font-weight: 500;
	letter-spacing: 0;
}

.flags {
	text-align: center;
	margin-bottom: 30px;
}

.flags img {
	margin: 0 5px;
}

.translations-container {
	margin-top: 20px;
}

.translation-container {
	margin-top: 30px;
}

.translation-container h2,
.translation-container .translation-title p {
	text-align: center;
}

.surah-container {
	margin-top: 30px;
}

.translations-title,
.surah-title {
	background-color: #fff;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 10px;
}

.translations-title p,
.surah-title p {
	margin-bottom: 0;
}

.translations-title a,
.surah-title a {
	color: #88B04B;
	display: block;
}

.translations-title a:hover,
.surah-title a:hover {
	color: #333;
}

.surah-translation {
	margin-top: 30px;
}

.bg1 {
	background: #fff;
	border: 1px solid #ddd;
}

.bg2 {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.translation-container-text {
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%), 0 3px 10px 0 rgb(0 0 0 / 10%);
}

.quran-text {
	font-family: hafs, serif;
	font-size: 27px;
}

.translation-text {
	font-size: 18px;
	direction: ltr;
	text-align: left;
}

.rtl {
	direction: rtl !important;
	text-align: right !important;
}

.breadcrumb-container {
	margin-top: 20px;
}

.breadcrumb-container-top {
	position: absolute;
	bottom: 15px;
}

.breadcrumb-container .breadcrumb {
	margin-bottom: 0;
	padding-bottom: 0;
}

.breadcrumb-container a {
	color: #88B04B;
}

.breadcrumb-container-top a {
	color: #fff;
}

.breadcrumb-container-top .active {
	color: #000;
}

.breadcrumb-container-top .breadcrumb-item::before {
	color: #fff;
}

.audio-player {
	width: 100%;
	margin-bottom: 15px;
}

iframe {
	width: 100%;
}

.youtube-container {
	margin-top: 15px;
}

.quran-share {
	margin-top: 30px;
	text-align: center;
}

.quran-share .btn {
	margin-bottom: 5px;
	text-align: center;
}

.fa-adn {
	color: #504e54;
}

.fa-apple {
	color: #aeb5c5;
}

.fa-android {
	color: #A5C63B;
}

.fa-bitbucket,
.fa-bitbucket-square {
	color: #003366;
}

.fa-bitcoin,
.fa-btc {
	color: #F7931A;
}

.fa-css3 {
	color: #1572B7;
}

.fa-dribbble {
	color: #F46899;
}

.fa-dropbox {
	color: #018BD3;
}

.fa-facebook,
.fa-facebook-square {
	color: #3C599F;
}

.fa-flickr {
	color: #FF0084;
}

.fa-foursquare {
	color: #0086BE;
}

.fa-github,
.fa-github-alt,
.fa-github-square {
	color: #070709;
}

.fa-google-plus,
.fa-google-plus-square {
	color: #CF3D2E;
}

.fa-html5 {
	color: #E54D26;
}

.fa-instagram {
	color: #A1755C;
}

.fa-vine {
	color: #00bf8f;
}

.fa-spotify {
	color: #1ed760;
}

.fa-linkedin,
.fa-linkedin-square {
	color: #0085AE;
}

.fa-linux {
	color: #FBC002;
	color: #333;
}

.fa-maxcdn {
	color: #F6AE1C;
}

.fa-pagelines {
	color: #241E20;
	color: #3984EA;
}

.fa-pinterest,
.fa-pinterest-square {
	color: #CC2127;
}

.fa-renren {
	color: #025DAC;
}

.fa-skype {
	color: #01AEF2;
}

.fa-stack-exchange {
	color: #245590;
}

.fa-stack-overflow {
	color: #FF7300;
}

.fa-trello {
	color: #265A7F;
}

.fa-tumblr,
.fa-tumblr-square {
	color: #314E6C;
}

.fa-twitter,
.fa-twitter-square {
	color: #32CCFE;
}

.fa-vimeo-square {
	color: #229ACC;
}

.fa-vk {
	color: #375474;
}

.fa-weibo {
	color: #D72B2B;
}

.fa-windows {
	color: #12B6F3;
}

.fa-xing,
.fa-xing-square {
	color: #00555C;
}

.fa-youtube,
.fa-youtube-play,
.fa-youtube-square {
	color: #C52F30;
}

.fa-whatsapp {
	color: #25d366;
}
@media screen and (max-width: 768px) {
	.enc-container {
		padding: 10px 0 10px 0;
		width: 100%;
	}

	.enc-title>span {
		display: none;
	}

	.enc-title>h1 {
		margin-bottom: 0;
		font-size: 24px;
	}

	.flags {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 450px) {
	.enc-container {
		padding: 10px 0 10px 0;
		width: 100%;
	}

	.enc-title>span {
		display: none;
	}

	.enc-title>h1 {
		margin-bottom: 0;
		font-size: 24px;
	}

	.flags {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 280px) {
	.enc-container {
		padding: 5px 0 5px 0;
		width: 100%;
	}

	.enc-title>span {
		display: none;
	}

	.enc-title>h1 {
		margin-bottom: 0;
		font-size: 18px;
	}

	.flags {
		margin-bottom: 5px;
	}
}