:root {
	--emphasize_color: #124265;
  --link_color: #000;
	--link_hover_color: #487b8a;
	--bg_color: #EDF0E9;

	--menu_bg_color: var(--bg_color);
	--menu_color: var(--link_color);
	--menu_hover_color: var(--link_hover_color);

	--footer_bg_color: #fff;
	--footer_color: #5f6654; 
	--footer_brand_color: #869077;

	--btn_color: #3f423a;
	--btn_bg_color: #C5CABE;
	--btn_hover_color: var(--btn_color);
	--btn_hover_bg_color: #b0b5a8;

	/* container size, the menu and the container should have the same size
			so whe are having variables for them */
	--width_567: 350px;
	--width_767: 550px;
	--width_1024: 720px;
	--width_1280: 890px;
	--width_1281: 970px;
	--width_1430: 1170px;

}

/* 	===========================
		========= General
		=========================== */
html {
	scroll-behavior: smooth;
}

body {
  font-family: 'Vollkorn', serif;
	color: var(--link_color);
	font-size: 16px
}

/* 
h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 12px; } */

h1,h2,h3,h4,h5 {
	margin: 0;
	font-weight: 600;
}

h2 {
	font-size: 36px;
	line-height: 50px;
	margin-bottom: 30px;
}

h3, h4 {
	margin-bottom: 10px;
	line-height: 35px;
}

a, a:focus {
	outline: none;
	color: var(--link_color);
	font-weight: 600;
	text-decoration: none;
}

a.highlight {
	color: var(--link_hover_color);
	font-weight: 600;
	font-size: 18px;
}

a:hover {
	color: var(--link_hover_color);
	text-decoration: none;
}

a.highlight:hover, a.highlight:visited, a.highlight:active {
	color: var(--emphasize_color);
}

p {
	line-height: 30px;
	margin-bottom: 10px;
}

small p {
	line-height: normal;
}

ul {
	padding-bottom: 10px;
}

ul li {
	padding: 5px 0;
}

.clear {
  clear: both;
  padding-bottom: 30px;
}

/* .page {
	margin-top:80px
}
 */
.page-header {
	background-color: var(--bg_color);
	padding: 25px 0px;
}

.page-header h2 {
	margin-bottom: 0;
}

a.anchor {
	display: block;
	position: relative;
	top: -150px;
	visibility: hidden;
}

.main {
	padding: 30px 0;
}


.attention h3 {
	font-size: 26px;
	color:#627944;
}

.attention a {
	color:#627944;
}


/* When the screen is 768px or larger*/
@media (min-width: 768px) {

}


/* When the screen is 991px or smaller */
@media (max-width: 991px) {
	h1, h2, h3, h4, h5 {
		margin-top: 0;
		margin-bottom: 10px;
	}
}



/* Adjust the body's width and have  the margin in auto mode */
/* Media Query for Mobile Devices */
@media (max-width: 567px) {
	.container 		{ width: var(--width_567); }
	h2 	{	
		font-size: 20px; 
	}
	h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	p {
		line-height: 25px;
	}
	.page-header {
		padding: 15px 0;
	}
}
	
/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 568px) and (max-width: 767px) {
	.container { width: var(--width_767); }
	h2 	{	
		font-size: 22px; 
	}
	h3 {
		font-size: 20px;
		margin-bottom: 12px;
	}
	/* p {
		margin-bottom: 35px;
	} */
	.page-header {
		padding: 20px 0;
	}
}
	
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
	.container { width: var(--width_1024); }
	h2 	{	
		font-size: 28px; 
	}
	.page-header {
		padding: 30px 0;
	}

}
	
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
	.container { width: var(--width_1280); }
}
	
/* Media Query for Large screens */
@media (min-width: 1281px) {
	.container { width: var(--width_1281); }
}

/* Media Query for Large screens */
@media (min-width: 1430px) {
	.container { width: var(--width_1430); }	
}

/*	=============================
					End of General	=======
		============================= */



/* 	====================== 
		=====  Accordion  
		====================== */

.panel {
	box-shadow: none;
}

.panel-default {
	border-color: transparent;
}

.panel-default > .panel-heading {
	border-color: transparent;
	background-color: transparent;
}

.panel-heading {
	padding: 10px 0;
}

.panel-title {
	font-size: inherit;
}

.panel-body a {
	display: inline-block;
}

/* .panel-collapse {
	height: 0px;
} */

/*	=============================
					End of Accordion	=======
		============================= */



/* 	====================== 
		=====  Buttons  
		====================== */

.btn {
	padding: 14px 50px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 0;
	border: none;
	transition: 0.5s;
	margin-top: 10px;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
	outline: none;
}

.btn-default {
	color: var(--btn_color);
	background-color: var(--btn_bg_color);
	border:none;
}

.btn-default:hover , .btn-default:active, .btn-default:active:focus, .btn-default:focus {
	color: var(--btn_hover_color);
	background-color: var(--btn_hover_bg_color);
	border:none;
}

.btn-link {
	background-color: transparent;
	/* color: var(--link_color); */
	font-weight: 600;
	font-size: 18px;
	font-family: "Poppins", sans-serif;
	text-align: left;
	margin: 0;
	padding: 0;
}


/* 	============================
					  End of Button ====== 
		============================ */



/* 	===========================
	 	======  MENU 
 		====================== */

.menu-container {
  background-color: var(--menu_bg_color);
  position: fixed;
  top: 0;
  border-width: 0 0 1px;
  right: 0;
  left: 0;
	z-index: 1030;
}

#menu {
  transition: all 0.5s;
  background: var(--menu_bg_color);
  z-index: 997;
  padding: 10px 15px;
	font-size: 16px;
	margin: 0 auto;
	position: relative;
}

#menu .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  max-height: 600px;
}

#menu ul {
	padding-bottom: 0;
}

#menu .nav > li > a {
	color: var(--menu_color);
	padding: 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
  color:var(--menu_hover_color);
}

#menu .nav > li > a.btn-default {
	padding: 10px 25px;
	/* border: 1px solid #000; */
	background-color: var(--btn_bg_color);
	padding: 13px 25px;
	margin-left: 30px;	
	margin-top: 0;
}

#menu .nav > li > a.btn-default:hover {
	/* border: 1px solid #000; */
	color: var(--btn_hover_color);
	background-color: var(--btn_hover_bg_color);
	margin-left: 30px;	
}

#menu .dropdown-menu {
	min-width: 250px;
	padding-bottom: 0;
  background-color: var(--menu_bg_color);
  border:0;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 5px 20px;
	clear: both;
	line-height: 20px;
	color: var(--menu_color);;
	font-size: 15px;
}
#menu .dropdown-inner li a:hover {
	color: var(--menu_hover_color);
  /* text-decoration: none; */
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: var(--link_color);;
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: var(--link_color);;
	padding: 2px 18px;
	float: right;
	box-shadow: none;
}


.nav-padding {
	margin-top:70px;
}

nav > .container {
	margin-top: 80px;
}

.navbar-brand {
	padding: 15px 0;
	font-size: 20px;
	color: var(--menu_color);
	line-height: 24px;
}

.navbar-brand:hover {
	color: var(--menu_hover_color)
}

/* When the screen is 768px or larger*/
@media (min-width: 768px) {
	#menu .navbar-nav {
		float: right;
	}

	#menu .navbar-nav > li > a {
		margin-left: 15px;
		padding: 13px 5px
	}
 
	#menu .dropdown:hover .dropdown-menu {
		display: block;
  }

  #menu .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20%);
    transition: all .5s;

  }

  #menu .dropdown:hover .dropdown-menu{
      opacity: 1;
      visibility: visible;
      transform: translateY(0%);
	}
}

/* When the screen is 1024px or smaller*/
@media (max-width: 1024px) {
	.navbar-brand {
		font-size: 16px;
		line-height: 27px;
	}
}


/* When the screen is 767px or smaller */
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
		width: 100%;
	}
	
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
    padding-bottom: 10px;    
	}

  #menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
	}
	.navbar-toggle {
		margin-right: 0;
	}

	#menu .btn-navbar {
		padding: 0;
	}
	.navbar-brand {
		font-size: 17px;
		line-height: 10px;
	}
}

/* Ensuring that the menu is aligned with the body */

/* Media Query for Mobile Devices */
@media (max-width: 567px) {
	#menu { width: var(--width_567); }
}
	
/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 568px) and (max-width: 767px) {
	#menu { width: var(--width_767); }
}
	
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
	#menu { width: var(--width_1024); }
}
	
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
	#menu { width: var(--width_1280); } /* 1000px */
}
	
/* Media Query for Large screens */
@media (min-width: 1281px) {
	#menu { width: var(--width_1281);; } /* 1170px */
}

/* Media Query for Large screens */
@media (min-width: 1430px) {
	#menu { width: var(--width_1430);; } /* 1370px */
}



/* =========================
				  End of MENU ====== 
============================ */



/* 	=========================
		======  Banner  
		=========================*/

.banner {
	background-color: var(--bg_color);
	padding: 30px 0px;
}

.banner h1 {
	font-size: 56px;
	font-weight: bolder;
	line-height: 72px;
}

.banner h1 > span {
	color: var(--emphasize_color);
}

/* Adjust the body's width and have  the margin in auto mode */
/* Media Query for Mobile Devices */
@media (max-width: 567px) {
	.banner h1 {
		font-size: 26px;
		line-height: 36px;
	}
}
	
/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 568px) and (max-width: 767px) {
	.banner h1 {
		font-size: 28px;
		line-height: 38px;
	}
}
	
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
	.banner h1 {
		font-size: 30px;
		line-height: 40px;
	}

}
	
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
	.banner h1 {
		font-size: 34px;
		line-height: 42px;
	}
}
	
/* Media Query for Large screens */
@media (min-width: 1281px) {
	.banner h1 {
		font-size: 38px;
		line-height: 52px;
	}
}

/* Media Query for Large screens */
@media (min-width: 1430px) {
	.banner h1 {
		font-size: 56px;
		font-weight: bolder;
		line-height: 72px;
		font-family: "Poppins", sans-serif;
	}
	
}


/* 	=========================
				End of Banner  ===== 
		========================*/



/* 	========================
		======  Articles
		======================== */

.articles {
	padding: 30px 0;
}

.articles .box {
	margin-bottom: 20px;
}

.articles .img {
	max-width:100px;
	display:inline-block;
	vertical-align: middle;
}

.books {
display:inline-block;
	background-color: #EDF0E9;
	padding: 50px
}

.books img {
	max-width: 100px;
}

.book {
	padding:10px;
	display:inline-block;
	vertical-align:top
}

.book span {
	display:block;
	max-width:100px
}

/* 	============================
					End of Articles  =====
		============================ */





/* 	========================
		======  Highlights
		======================== */

.highlights {
	background-color: var(--bg_color);
	padding: 30px 0;
}

.highlights img {
	max-width: 200px;
}


/* 	============================
					End of Highlights  =====
		============================ */


/* 	========================
		======  New Books
		======================== */

.new-books {
	padding: 30px 0;
}


/* 	============================
					End of New Books  =====
		============================ */


/* 	=======================
		=====  Church History  
		======================= */

.book-link {
	max-width: 200px;
	display:inline-block;
	margin:10px;
	vertical-align:top
}

/* 	==============================
					Church History  ========
		============================== */





/* 	=======================
		=====  Reader  
		======================= */

object, iframe {
	width:100%;
	height:700px;
	background-image: url('../img/loading.gif');
	background-repeat: no-repeat;
	background-position: 50% 10%;
}

/* 	==================================
					  End of Reader ====== 
		================================== */



/* 	=======================
		=====  Footer  
		======================= */
footer {
  /* margin-top: 30px; */
  padding-top: 30px;
  background-color: var(--footer_bg_color);
	color: var(--footer_color);
	font-size: 14px;
	box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

footer hr{
	border-top-color: var(--footer_color)	
}

footer .copyright {
	padding-bottom: 20px;
}

footer h3, footer h4 {
	font-family: "Raleway", sans-serif;
}

footer h4 {
	margin-top: 0;
}
footer h3 {
	margin-top: 0;
	font-weight: 100;
}

footer .footer-contact {
	color: var(--footer_brand_color);
}

footer .share {
	font-size: 18px;
}

footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

footer .footer-newsletter form {
  margin-top: 30px;
  /* padding: 6px 10px; */
  position: relative;
  text-align: left;
}

footer .footer-newsletter {
  font-size: 15px;
}

footer .footer-newsletter #mc-embedded-subscribe{
	margin:0;
	margin-bottom:10px;
	width: 100%;
}

footer .footer-newsletter #mc_embed_signup form {
  display: block;
  position: relative;
  text-align: left;
	margin: 0;
}

footer .footer-newsletter #donation {
	font-size: 22px;
}

footer #mc_embed_signup .foot {
	display: block;
}

footer .footer-newsletter form input[type="submit"]:hover {
  color: var(--btn_hover_color);
}

footer .footer-links ul li {
	margin-bottom: 10px;
}

/* 	=========================
					End of Footer ===== 
		========================= */


/* 	=======================
		=====  Scroll to top button
		======================= */
#btn-back-top, #btn-back-top.active {
	visibility: hidden;
	position: fixed;
	opacity: 0;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 20px;
	padding: 10px;
	border-radius: 50px;
	width: 50px;
	text-align: center;
	transition: all 0.4s;
	background-color: var(--btn_bg_color);
	color: var(--btn_color);
}

#btn-back-top.active {
	visibility: visible;
	opacity: 1;
}

#btn-back-top:hover {
	background-color: var(--btn_bg_color);
	color: var(--btn_hover_color);
}

#btn-back-top i {
	top: -2px;
	position: relative;
}

#img-qr-desc{
	font-size: 13px;
	background-color: #fff;
	padding:5px

}
#img-qr-desc::after{
    content: "\a";
    white-space: pre;
}

#img-qr {
	width: 120px;
	height: 120px;
}

@media (min-width: 767px) {
	/* Media Query for Large screens */
	#img-qr-desc {
		position: fixed;
		top: 180px;
		right: 0px;
		z-index: 2000;
	}
	#img-qr {
		position: fixed;
		top: 80px;
		right: 0px;
		z-index: 2000;
		width: 100px;
		height: 100px;
	}
}