html {
	scroll-behavior: smooth;
}

body {
	background-color: #34586E;
}

body.whiteBackground {
  background-color: #ffffff;
}

img {
	max-width: 100%;
}

/****************************************
* Typography
****************************************/

h1 {
	font: normal normal bold 60px/1.2em 'Catamaran';
}

h2 {
  font: normal normal bold 38px/.8em 'Catamaran';
}

h2 span {
  font-size: 14px;
}

h3 {
  font: normal normal bold 28px/1.5em 'Catamaran';
}

h4 {
  font: normal normal bold 24px/1.5em 'Catamaran';
}

p, 
a,
li {
  font: normal normal 16px/1.5em 'Catamaran';
}

/****************************************
* Header
****************************************/

header.fixedToTop {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
}

/****************************************
* Top bar
****************************************/

#topBar {
	background-color: #34586E;
	padding: 5px 3rem;
}

#topBar > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

@media(min-width: 992px) {
  #topBar > div {
    margin: 0 auto;
    max-width: 865px;
  }
}

#topBar a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 10px;
  padding-left: 10px;
  color: #ffffff;
	font-size: 13px;
}

#topBar a:first-of-type {
  margin-right: 20px;
}

#topBar a > svg {
  margin-right: .5rem;
  width: 15px;
  height: 15px;
	fill: #fff;
}

#topBar a:hover {
  border-radius: 5px;
  background-color: #fff;
  text-decoration: none;
	color: #34586E;
}

#topBar a:hover svg {
	fill: #34586E;
}

#topBar .devoDropBtn {
	display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 10px;
	padding-left: 10px;
	background-color: #34586E;
  color: #fff;
	font-size: 12px;
	font-weight: normal;
	border: none;
	cursor: pointer;
}

#topBar .devoDropBtn svg {
  margin-right: .5rem;
  width: 14px;
  height: 14px;
	fill: #ffffff;
}

#topBar .devoDropdown.on .devoDropBtn,
#topBar .devoDropdown:hover .devoDropBtn {
	border-radius: 5px 5px 0 0;
  background-color: #ffffff;
  text-decoration: none;
	color: #34586E;
} 

#topBar .devoDropdown.on .devoDropBtn svg,
#topBar .devoDropdown:hover .devoDropBtn svg {
	fill: #34586E;
}

#topBar .devoDropdown {
  position: relative;
	display: inline-block;
	margin-right: 1rem;
}

#topBar .devoDropdown-content {
  display: none;
	position: absolute;
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  box-shadow: 2px 2px 1px rgba(36, 36, 36, .5);
	width: 350px;
  padding: 1rem 2rem;
	z-index: 1;
	color: #2A4759;
}

#topBar .devoDropdown-content img {
  display: block;
  margin: 0 auto 1rem;
}

#topBar .devoDropdown-content svg {
	fill: #34586E;
}

#topBar .devoDropdown-content .date {
  display: flex;
  flex-direction: column;
  align-self: center;
	margin-right: 2rem;
	border-radius: 50%;
}

#topBar .devoDropdown-content .date p {
  margin-bottom: 0;
  text-align: center;
}

#topBar .devoDropdown-content .date > div:first-of-type p {
	font-size: 25px;
	font-weight: bolder;
  line-height: .8em;
}

#topBar .devoDropdown-content h2 {
	font-size: 16px;
  margin-bottom: 0;
}

#topBar .devoDropdown-content p {
	font-size: 14px;
  margin-bottom: 0;
}

#topBar .devoDropdown-content a {
	display: inline-block;
	margin-top: .5rem;
	border-radius: 5px;
  padding: .25rem .75rem;
	font-size: 12px;
	background-color: #34586E;
  color: #fff;
	text-decoration: none;
	text-align: center;
}

#topBar .devoDropdown-content a:hover {
	background-color: #2c4a5e;
}

#topBar .devoDropdown.on .devoDropdown-content,
#topBar .devoDropdown:hover .devoDropdown-content {
  display: block;
}

/****************************************
* Navigation
****************************************/

.navbar {
	border-bottom: 1px #34586E solid;
	background-color: #fff;
}

@media(min-width: 1024px) {
  .navbar {
    justify-content: center;
  }
}

.navbar-collapse {
  flex-grow: 0;
}

.nav-link {
	color: grey;
	font-size: 20px;
	margin-left: 18px;
	margin-top: 10px;
}

.nav-link:hover {
	color: #34586E;
}

.navIcons {
	width: 18px;
	margin-right: 10px;
	margin-left: -10px;
}

.dropdown-item {
  width: 200px;
	padding: .5rem .75rem;
}

.dropdown-item:active,
.dropdown-item.active {
	background-color: #34586E;
	color: #fff;
}

.dropdown-item:active svg {
	fill: #fff;
}

.dropdown-item svg {
  margin-top: 0px;
  margin-right: .5rem;
  width: 20px;
  height: 20px;
  fill: #2e2e2e;
	float: left;
	vertical-align: middle;
}

.navbar .smactive {
	background-color: #34586E;
	color: #fff;
}

.navbar .smactive svg {
	fill: #fff;
}

.dropdown-item:active,
.dropdown-item.active svg {
	fill: #fff;
}

.active {
	color: #34586E;
}

.blueBackground {
	background-color: #34586E;
	padding: 80px 0;
	color: #fff;
}

.blueBackground svg {
	fill: #fff;
}

/****************************************
* Page banners
****************************************/

.pageBanner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pageBanner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(200px + (400 - 200) * (100vw - 320px) / (1140 - 320));
  max-height: 400px;
}

.pageBanner h1 {
  color: #ffffff;
	font-size: 55px;
  text-shadow: 1px 3px 10px rgba(0, 0, 0, .5);
  text-align: center;
}

/****************************************
* About section
****************************************/

#aboutSection {
	text-align: center;
}

#aboutSection h4 {
	font-size: 1.375rem;
}

#aboutSection p {
	font-size: 0.875rem;
}

#aboutSection img {
	margin-bottom: 20px;
	margin-top: 20px;
}

/****************************************
* Service Section
****************************************/

.serviceButton {
	color: #84A5B8;
	border: 2px solid #84A5B8;
	border-radius: 20px;
	padding: 10px 20px;
	margin-bottom: 20px;
}

.serviceButton:hover {
	text-decoration: none;
	background-color: #84A5B8;
	color: #fff;
}

.smallBanners {
	width: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.grayBackground {
	background-color: #eff2f5;
	padding: 40px 0;
	color: #313030;
}

@media(min-width: 992px) {
  .grayBackground {
    padding: 80px 0;;
  }
}

.whiteBox {
	background-color: #D6D6D6;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 10px
}

/****************************************
* Events
****************************************/

.event_d {
	background-color: #D6D6D6;
	padding: 10px;
	/* height: 45px; */
	border-radius: 40px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.eDate_d {
	background-color: #84A5B8;
	margin: -8px;
	color: #000000;
	text-align: center;
	height: 70px;
	width: 70px;
	border-radius: 50%;
}

#eDay_d {
	font-size: 20px;
	padding-top: 12px;
	font-weight: bolder;
}

#eMonth_d {
	margin-top: -35px;
	font-size: 17px;
}

#eTitle_d {
	font-size: 15px;
	font-weight: bolder;
	margin-top: 8px;
}

#eDetails_d {
	font-size: 12px;
}

/****************************************
* Times and location section
****************************************/

.timesAndLocation {
  background-size: 50%;
  background-position: center right;
  background-repeat: no-repeat;
}

.timesAndLocation .location {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.timesAndLocation h3 {
  font-size: 20px;
  font-weight: 400;
}

.timesAndLocation p > span {
  font-weight: 400;
}

.timesAndLocation p {
  font-weight: 100;
}

/****************************************
* Spend eternity section
****************************************/

.spendEternity {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.spendEternity h2 {
  font: normal 400 45px/.9em 'Catamaran';
}

.spendEternity h2 span {
	font-size: 18px;
}

.spendEternity .button {
	margin-top: 1rem;
	padding: 1rem 2rem;
	border-radius: 25px;
  background-color: #34586E;
  border: 0;
}

.spendEternity .button:hover {
  background-color: #3D5868;
  color: #ffffff;
}

/****************************************
* Footer
****************************************/

footer {
  background-color: #2A4759;
	color: #fff;
}

footer .container {
	padding-bottom: 0; 
	padding-top: 4rem;
}

footer a {
  display: block;
  color: #ffffff;
  font-weight: 100;
}

footer a:hover {
  color: #efefef;
}

footer a + a {
  margin-top: 10px;
}

footer .social {
  display: flex;
	justify-content: left;
}

footer .social a + a {
  margin: 0 0 0 10px;
}

footer .social svg {
  background-color: #ffffff;
  padding:3px;
  border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
  display: inline-block;
  width: 25px;
	height: 25px;
}

footer .social a:hover svg {
	background-color: rgb(235, 235, 235);
}

/****************************************
* Attribution
****************************************/

.attribution {
  padding-bottom: 10px;
  font-size: 15px;
  text-align: center;
}

.attribution p {
  margin-bottom: 0;
  font-size: 12px;
}

.attribution a {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #84A5B8;
}

.attribution a:hover {
  color: #6dc1c9;
  text-decoration: none;
}


@media screen and (min-width: 1000px) {
	.pastorImg {
		width: 260px;
		/* margin: 20px 20px 20px 30%; */
		padding: 5px;
		border-radius: 50%;
		float:right;
	}

	.infoText {
		margin-left: -60px;
	}

	.iconSection {
		margin-top: -20px;
	}
}

#pastorName {
	margin-bottom: -5px;
}

.infoText {
  display: flex;
  flex-direction: column;
  justify-content: center;
	text-align: center;
	color: #fff;
}

.pastorMediaIcons {
	background-color: #84A5B8;
	padding: 12px;
	border-radius: 50%;
	width: 40px;
	margin-top: 5%;
}

.pastorMediaIcons:hover {
	width: 43px;
}

.iconSpace {
	margin-left: 5%;
}

.aboutSection {
	padding: 0;
}

.aboutSection img {
	width: 100%;
	margin-top: 120px;
}

#smallnav_bar {
	background-color: #2A4759;
	color: #ffffff;
	padding-bottom: 10px;
}

#smallnav_bar .active {
	background-color: #ffffff;
	color: #2A4759;
	border-radius: 10px;
}

#smallnav_bar a:hover {
	cursor: pointer;
}

.pastorSection_about {
	background-color: #fff;
	padding: 3rem;
	border-radius: 10px;
	margin-top: 20px;
}

.pastorImg_about {
	width: 100px;
	border-radius: 50%;
	float: left;
	margin-right: 20px;
	padding: 2px;
	border: 2px solid #2A4759;
}

footer .blueBackground {
	font-size: 12px;
}

.contactImg {
	background-color: #2A4759;
	padding: 10px;
	border-radius: 50%;
	width: 50px;
}

#submitForm {
	background-color: #2A4759;
	color: #fff;
	border: none;
	width: 100px;
	height: 50px;
	border-radius: 10px;
}

#submitForm:hover {
	background-color: #34586E;
}

#errorMessage {
	background-color: lightGray;
	padding: 10px 20px;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

/****************************************
* Sermon page
****************************************/

.sermonContainer {
	background-color: #fff;
	padding: 3rem;
	border-radius: 10px;
	margin-top: 20px;
}

.sermonWidget:hover {
	text-decoration: none;
}

.sermonWidget:hover img {
	transform: scale(1.1);
}

.sermonSection {
	margin: 1rem auto;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 1rem;
}

.sermonSection_about {
  margin-bottom: 0rem;
  border-radius: 10px;
  background-color: #ffffff;
  height: calc(100% - 1rem);
	padding: 0px;
  color: #34586E;
  overflow: hidden;
}

.sermonWidget .sermonSection_about:hover {
	background-color: #f6faff;
	;
}

.sermonSection_about > div:last-of-type {
  padding: 2rem;
}

.sermonSection_about .imageWrapper {
  overflow: hidden;
}

.sermonSection_about img {
	border-radius: 10px 10px 0 0;
  transition: all .4s ease-in-out;
}

.sermonSection_about h2 {
	font: normal normal bold 20px/.8em 'Catamaran';
	line-height: 20px;
}

.sermonSection_about h3 {
	font: normal normal 15px/.4em 'Catamaran';
	line-height: 20px;
}

.sermonSection_about .date {
	font: normal normal 12px/.8em 'Catamaran';
	font-weight: lighter;
}

.sermonSection .categoryDetails p {
	font-size: 14px;
}

.sermonSection .categoryDetails a {
	color: #212529;
	font-size: 14px;
	text-decoration: underline;
}

.sermonSection .categoryDetails a:hover {
	color: #34586E;
}

.sermonSection .categoryDetails svg {
	margin-right: .2rem;
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

.sermonSection .sermonInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sermonSection .sermonInfo > div {
	padding: .5rem;
}

.sermonSection .sermonAudio {
	margin-top: 3rem;
	padding: .5rem;
	background-color: #eff2f5;
	color: #34586E;
}

.sermonSection .sermonAudio:nth-of-type(even) {
	background-color: #d4d2d2;
}

.sermonSection .sermonAudio:hover {
	background-color: #f6faff;
}

.sermonSection .sermonAudio .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.sermonSection .sermonAudio .info h4 {
	font-size: 16px;
}

.sermonSection .sermonAudio .info p {
	font-size: 12px;
	font-weight: lighter;
}

.sermonSection .sermonAudio .info a {
	font-size: 12px;
	font-weight: lighter;
	text-decoration: none;
	color: #34586E;
}

.sermonSection .sermonAudio .info a:hover {
	text-decoration: underline;
}

.sermonSection .sermonAudio .info span {
	margin: 0rem .5rem;
}

.sermonSection .sermonAudio .date {
	margin: 1rem 0 0;
	color: #34586E;
	font-size: 12px;
	font-weight: lighter;
}

.sermonSection .sermonAudio svg {
	fill: #34586E;
}

.sermonSection .sermonAudio .info svg {
	width: 12px;
	height: 12px;
	fill: #34586E;
}

.sermonSection .sermonAudio .actions {
	justify-content: flex-end;
	align-items: center;
}

.sermonSection .actions .btn:last-of-type {
	padding: 0;
	padding-left: 10px;
}

.sermonSection .sermonAudio svg {
	width: 20px;
	height: 20px;
}

.hidden {
	display: none;
}

/****************************************
* Card
****************************************/

.card {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, .1);
  border: 1px solid rgba(220, 225, 228, .5);
  background-color: #ffffff;
  width: 100%;
  text-align: left;
  overflow: hidden;
}

a.card:focus,
a.card:hover {
  background-color: #efefef;
  text-decoration: none;
}

.card .imageWrapper {
  position: relative;
  z-index: 0;
  padding-top: 52%;
  width: 100%;
  overflow: hidden;
}

.card .imageWrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(255, 255, 255, .3);
}

.card .imageWrapper > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 0;
  width: 100%;
  transition: all .5s ease;
}

.card:focus .imageWrapper > img,
.card:hover .imageWrapper > img {
  transform: translate(-50%, -50%) scale(1.1);
}

.card .details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1rem;
}

/****************************************
* New sermon card
****************************************/

.sermon.card {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  height: calc(100% - 2rem);
}

.sermon.card .speakerIcon {
  position: relative;
  margin: -50px auto 0 auto;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.sermon.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sermon.card h3,
.sermon.card p {
  color: #000000;
  text-align: center;
}

.sermon.card h3 {
  text-align: center;
  color: #2A4759;
  font-size: 22px;
}

.sermon.card .date {
  font-weight: 200;
  font-size: 14px;
}

.sermon.card .icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  margin-bottom: 0;
}

.sermon.card svg {
  margin: 0;
  width: 20px;
  height: 20px;
  fill: #2A4759;
}

/****************************************
* Sermon filter
****************************************/

.filterBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
	padding: 1rem;
	background-color: #eff2f5;
}

.dropbtn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 0;
	width: 100%;
	min-width: 217px;
  background-color: #2A4759;
  color: #ffffff;
  padding: .75rem 1rem;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.dropbtn svg {
	height: 15px;
	width: 15px;
	fill: #fff;
}

.dropdownFilter {
  position: relative;
	display: inline-block;
	margin-right: 1rem;

}

.filterBox .dropdownFilter + .dropdownFilter {
  margin-top: .75rem;
}

.dropdownFilter-content {
  display: none;
  position: absolute;
	background-color: #f9f9f9;
	width: 100%;
	height: 230px;
  box-shadow: 0px 8px 50px 0px rgba(0,0,0,0.2);
  z-index: 1;
	overflow: scroll;
}

.dropdownFilter-content a {
  display: block;
  padding: 12px;
  font-size: 14px;
  color: #000000;
  text-decoration: none;
}

.dropdownFilter-content a.active {
  background-color: #34586E;
	color: #fff;
}

.dropdownFilter-content a:hover {
	background-color: #f1f1f1;
	border-left: 4px solid #34586E;
	padding-left: 8px;
}

.dropdownFilter-content a.active:hover {
	background-color: #2c4a5e;
	border-left: hidden;
	padding-left: 12px;
}

.dropdownFilter:hover .dropdownFilter-content {
  display: block;
}

.dropdownFilter:hover .dropbtn {
  background-color: #203644;
}

/****************************************
* Sermon search
****************************************/

.sermonSearch input[type=text] {
	float: left;
	padding: 10px;
	width: 80%;
	max-width:300px;
  border: 1px solid #2A4759;
	background: #fff;
	font-size: 14px;
}

.sermonSearch button {
	float: left;
	padding: 10px;
  width: 20%;
	max-width: 60px;
	border: 1px solid #2A4759;
  border-left: none;
  background: #2A4759;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.sermonSearch svg {
	width: 15px;
	height: 15px;
	fill: #fff;
	vertical-align: middle;
}

.sermonSearch button:hover {
  background: #203644;
}

.sermonSearch::after {
  content: "";
  clear: both;
  display: table;
}

/****************************************
* Sermon card
****************************************/

.sermonCard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #ffffff;
	height: 100%;
}

.sermonCard .content {
	position: relative;
	padding: 1rem;
}

.sermonCard .actionButton {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.sermonCard .actionButton a {
	margin-left: 10px;
}

.sermonCard .actionButton svg {
	width: 15px;
	height: 15px;
	fill: #939393;
}

.sermonCard svg {
	width: 15px;
	height: 15px;
	fill: #939393;
}

.sermonCard svg:hover {
	fill: #777777;
}

.sermonCard .pastorImage {
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

.sermonCard p:first-of-type {
	display: inline-block;
	margin-left: .5rem;
	font-size: 13px;
}

.sermonCard p.date {
	margin: 1rem 0 0;
	color: #939393;
	font-size: 12px;
	font-weight: lighter;
}

.sermonCard h3 {
	font-size: 20px;
	font-weight: 700;
}

.sermonCard p:last-of-type {
	margin-bottom: 0;
}

@media (min-width: 575px) {
	.sermonSection {
		padding: 3rem;
	}

	.sermonSection .sermon .info h4 {
		font-size: 20px;
	}
}


@media (min-width: 979px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .dropdown-menu {
		margin-top: -1px;
  }

  .wSection {
		padding-right: 80px;
  }

  .qLinks {
		padding-left:60px;
	}	
}

@media (max-width: 979px)  {
	footer {
		text-align: center;
	}

	footer .social {
		justify-content: center;
	}
}

/****************************************
* Live Stream page
****************************************/

.liveServiceVideo  {
	height: calc(100% - 1rem);
	width: 100%;
	overflow: hidden;
}

.liveServiceVideo a {
	text-decoration: none;
}

.liveServiceVideo h3 {
  margin-top: 1rem;
	font-size: 20px;
	color: #34586E;
}

.liveServiceVideo p {
	margin-top: -.5rem;
	margin-bottom: 1rem;
	font-size: 14px;
	color: #34586E;
}

.liveServiceVideo .date {
	margin-top: .5rem;
	font: normal normal 12px/.8em 'Catamaran';
	font-weight: lighter;
}

.container .logo svg {
	margin: auto;
	display: block;
	width: 75%;
}

.fb-liveStreamSection .liveStreamVideo {
  position: relative;
}

.fb-liveStreamSection .liveStreamCountDown {
  margin: 2rem 0;
}

.fb-liveStreamSection .liveStreamCountDown p {
  margin-bottom: 0;
  color: #000000;
  letter-spacing: 1px;
}

@media(min-width: 768px) {
  .fb-liveStreamSection .liveStreamCountDown {
    margin: 0;
    position: absolute;
    bottom: .5rem;
    left: 1.5rem;
	} 

  .fb-liveStreamSection .liveStreamCountDown p {
    color: #ffffff;
  }
}

.schedule {
  border-radius: 10px;
  padding: 1rem;
}

.schedule .dateTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: .5rem;
  background-color: #464646;
  padding: .5rem;
}

.schedule .dateTitle p {
  margin-bottom: 0;
  color: #ffffff;
}

.fb-live iframe span {
  display: none;
}

.announcementVideo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/****************************************
* Contact page
****************************************/

.contactSection_about {
	background-color: #fff;
	padding: 2rem;
	border-radius: 10px;
	margin-top: 20px;
  }
  
  .contact-item {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  margin-top: 10px;
  }
  
  .contact-item svg {
	fill: #2A4759;
	width: 50px;
	height: 50px;
  }
  
/****************************************
* Pagination
****************************************/

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1rem auto 2rem auto;
}

.pagination button {
  border: none;
  background-color: #ffffff;
  width: 35px;
  height: 35px;
  padding: 0;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.pagination button.active {
  background-color: #eff2f5;
	color: #34586E;
	font-weight: bold;
}

.pagination button:hover:not(.active) {
	background-color: #eff2f5;
	fill: #34586E;
}

.pagination .arrow:first-of-type {
  border-radius: 10px 0 0 10px;
}

.pagination .arrow:last-of-type {
  border-radius: 0 10px 10px 0;
}

.pagination .arrow {
  background-color: #2A4759;
  width: 45px;
}

.pagination button.arrow:focus,
.pagination button.arrow:hover {
  background-color: #203644;
}

.pagination .arrow > i {
  display: inline-block;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  padding: 3px;
  pointer-events: none;
}

.pagination .arrow .left {
  transform: rotate(135deg);
}

.pagination .arrow .right {
  transform: rotate(-40deg);
}

.pagination .page {
  color: #005c96;
}

/****************************************
* Buttons
****************************************/

.btn-primary {
  margin-top: 1rem;
  background-color: #34586E;
  border: none;
  width: 100%;
}

.btn-primary:hover {
  background-color: #2A4759;
}

.btn-youtube {
	margin-top: 1rem;
	background-color: #c4302b;
	border: none;
	width: 100%;
	color: #fff;
}

.btn-youtube:hover {
	background-color: #962521;
	color: #fff;
}

.button,
.button-2 {
  display: inline-block;
  background-color: #5a5959;
  border: 3px solid #5a5959;
  border-radius: 20px;
  padding: .5rem 1rem;
  color: #ffffff;
  transition: .4s all ease-in-out;
}

.button:hover,
.button-2:hover {
  background-color: transparent;
  color: #5a5959;
  text-decoration: none;
}

.button-2 {
  background-color: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0);
}

.button-2:hover {
  color: #ffffff;
  border: 3px solid rgba(255, 255, 255, .2);
}

.button-2 svg {
  margin-left: .5rem;
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

.button-2 p {
  margin-bottom: 0;
}

/****************************************
* Accent
****************************************/

.accent-1 {
  background-color: #eff2f5;
}

.accent-1 h2 {
  color: #34586E;
}

.accent-2 {
  background-color: #efefef;
}

.accent-3 {
  background-color: #5a5959;
  color: #ffffff;
}

.accent-4 {
  background-color: #34586E;
  color: #ffffff;
}

.accent-5 {
	background-color: #edf3f7;
  background-image: url('/img/discover/background.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100%;
	animation: fade 3s ease-in;
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/****************************************
* Styles
****************************************/

.style-1 {
  color: #3D5868;
}

/****************************************
* Side Card
****************************************/

@media(min-width:992px) {
  .sideCard {
    max-width: 344px;
  }
}

.sideCard svg {
  width: 40px;
  height: 40px;
  fill: #ffffff;
}

/****************************************
* Give page
****************************************/

.giveForm {
  width: 100%;
  height: 2100px;
}

.giveSection h3 {
  color: #34586E;
  text-align: center;
}

/****************************************
* Video container
****************************************/

.videoContainer {
  position: relative;
  padding-bottom: 56.5%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper.small {
  padding-bottom: 52.7%; /* 16:9 */
}

.videoWrapper iframe,
.videoContainer video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  border: 0;
}

.videoContainer video {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/****************************************
* Flex box
****************************************/

.flexRow {
  display: flex;
  flex-direction: row;
}

.flexCenter {
  justify-content: center;
  align-items: center;
}

/****************************************
* Alignment
****************************************/

.xCenter {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.alignRight {
  display: block;
  margin: 0 0 0 auto;
  text-align: center;
}

/****************************************
* Misc
****************************************/

.noPadding {
	padding: 0px;
}

.hide {
  display: none;
}

/****************************************
* Discover LandingPage
****************************************/

.discoverSection img {
	width: 100%;
	justify-content: center;
	mix-blend-mode: multiply;
}

.discoverSection .churchLogo svg {
	position: absolute;
	margin-left: -30px;
	top: 2rem;
  left: 50%;
  width: 60px;
  height: 60px;
	fill: #ffffff;
}

.discoverSection .arrow {
	position: absolute;
	bottom: 8.5rem;
	width: 30px;
	height: 30px;
	fill: #2a4759;
}

.main-wrapper {
  height: 100vh;  
}

.section { 
  display: flex;
  flex-direction: column;
	height: 100vh; 
  justify-content: center;
  align-items: center;
}

.ministries {
	margin-bottom: 2rem;
}

.ministryBoxes {
	display: grid;
	grid-gap: 1rem;
	margin-bottom: 1rem;
}

.ministryBoxes a {
  display: flex;
  flex-direction: row;
  justify-content: center;
	border-radius: 20px;
	background-color: #ffffff;
	box-shadow: 2px 2px 5px rgba(0,0,0,.1);
  width: 100%;
	padding: 1rem 3rem;
  font-size: 35px;
  color: #000000;
	text-align: center;
	cursor:pointer
}

.ministryBoxes svg {
	position: inherit;
	width: 100%;
	height: 77px;
	fill: #34586E;
}

#churchLocation .cls-3 {
	fill: #fff;
}

.ministryBoxes a:hover, 
.ministryBoxes a:hover svg{
	background-color: #34586E;
	fill: #fff;
}

.ministryBoxes a:hover,
[data-target="#location"]:hover #churchLocation .cls-3 {
	fill: #34586E;
}

/****************************************
* Modal
****************************************/

.modalHeader {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 360px;
}

.modalHeader .close {
	position: absolute;
	top: 2rem;
	right: 2.5rem;
	padding: .1rem 0 .25rem;
	margin: -1rem -1rem -1rem auto;
	border-radius: 50%;
	background-color: #ffffff;
	opacity: 1;
	width: 30.4px;
	color: #34586e;
	text-shadow: none;
}

.modalHeader .close:hover {
	background-color: #34586e;
	color: #ffffff;
}

.modalHeader img{
  width: 100%;
	height: 360px;
}

.modalBody {
	position: absolute;
	display: flex;
  flex-direction: column;
	top: 300px;
	width: 100%;
	padding: 1rem;
	border-radius: 30px 30px 0 0;
	background-color: #fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	justify-content: center;
	align-items: center;
	overflow: scroll;
}

#bibleBaptistChurch .modalBody,
#devotion .modalBody,
#Salvation .modalBody,
#location .modalBody {
	padding: 2rem;
}

.modalBody .fastLinks a {
	cursor: pointer;
}

.modalBody .fastLinks svg {
	margin: 1rem;
	padding: .7rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #34586E;
	fill: #fff;
}

.modalBody .fastLinks svg:hover {
	background-color: #6d92a9;
}

.modalBody svg {
	max-width: 275px;
	height: auto;
	fill: #34586e;
}

.modalBody a {
	outline: none;
	cursor: pointer;
}

.modalBody .about {
	background-color: #34586E;
}

.modalBody h2 {
	margin: 2rem auto;
	font-size: 30px;
	font-weight: 700;
	color: #34586E;
	text-align: center;
}

.modalBody p {
	margin-bottom: 1rem;
	text-align: center;
}

#bibleBaptistChurch .centerInfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.modalBody .usefulInfo p {
	text-align: left;
}

.modalBody .usefulInfo svg{
	width: 20px;
	height: 20px;
	fill: rgb(212, 212, 212);
	vertical-align: middle;
}

.modalMinistries {
	width: 100%;
}

.modalMinistries a {
	display: flex;
  flex-direction: row;
  justify-content: center;
	align-items: center;
	border-radius: 20px;
	background-color: #6d92a9;
	padding: 1rem;
  font-size: 20px;
  color: #fff;
}

.modalMinistries a + a {
	margin-top: 1rem;
}

.modalMinistries a:hover {
	background-color: #3D5868;
	color: #ffffff;
	text-decoration: none;
}

.modalMinistries .directBtn {
	background-color: #3D5868;
}

.modalMinistries .directBtn:hover {
	background-color: #6d92a9;
	color: #ffffff;
	text-decoration: none;
}
.modalMinistries svg {
	padding-right: 1rem;
	width: 40px;
	height: 40px;
	fill: #fff;
	vertical-align: middle;
}

.modalBody .numberStyled {
	display: flex;
  flex-direction: row;
  justify-content: center;
	align-items: center;
}

.numberStyled {
margin-top: 1rem;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #34586E;
font-weight: 700;
font-size: 30px;
line-height: 70px;
color: #fff;
}

.devoBox {
	margin-bottom: 1rem;
	padding: 1rem;
	border-radius: 20px;
	background-color: #6d92a9;
	color: #ffffff;
}

.devoBox h3 {
	color: #ffffff;
	font-weight: 600;
	text-align: center;
}

.devoBox .date p {
	font-weight: lighter;
}

.devoBox .modalMinistries a {
	background-color: #34586E;
}

/****************************************
* Overlay
****************************************/

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(45, 45, 45, .9);
  z-index: 100;
}

.overlay .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border-radius: 20px;
  width: calc(100% - 2rem);
  max-width: 750px;
  padding: 2rem;
}

.overlay .close {
  position: absolute;
  top: 7px;
  right: 13px;
  font-size: 30px;
}

.overlay .close:hover {
  color: #e62323;
  cursor: pointer;
}

.overlay img {
  display: block;
  margin: 0 auto 1rem;
  max-width: 250px;
}

.overlay h2 {
  margin-bottom: 2rem;
  font-size: 25px;
}

.overlay h3 {
  font-size: 20px;
}

.overlay p {
  margin-bottom: 0;
}

.overlay h2,
.overlay h3,
.overlay p {
  text-align: center;
  color: #454545;
}