/* @override
http://www.sanctuaryfirst.org.uk/assets-v2/css/main.css?*
https://www.sanctuaryfirst.org.uk/assets-v2/css/main.css?*
	https://stage.sanctuaryfirst.org.uk/assets-v2/css/main.css?* */

body {
	font-family: myriad-pro, sans-serif;
	font-size: 18px;
	background-color: #f4f6fa;
}

.auth-activation {
	display: none;
}

.w100 {
	width: 100%;
}

.w90 {
	width: 90%;
}

.clear {
	clear: both;
}

.strap {
	padding: 10px 0px;
	color: #8995A0;
	background-color: #f4f6fa;
	/*border-bottom: 2px solid #d3d7db;*/
}

.strap-links span {
	font-size: 0.9rem;
}

.strap-links span a {
	padding: 0px;
}


p,
li {
	font-size: 16px;
	line-height: 22px;
}

a {
	transition: all .3s ease-in-out 0s;
	color: hsl(211, 66%, 45%);
}

p a,
li a {
	color: hsl(211, 66%, 45%);
}

.btn-primary {
	background-color: hsl(211, 66%, 45%);
	/* sf blue */
	border-color: hsl(211, 66%, 45%);
	/* sf blue */
	;
	border-radius: 9px;
}

.font-sm {
	font-size: 14px;
}

.font-xs {
	font-size: 12px;
}

a:hover {
	text-decoration: none;
}

ul.no-bullet {
	list-style: none;
}

ul.no-indent {
	padding-left: 0px;
	;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: hsl(240, 0%, 39%);
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: hsl(240, 0%, 39%);
}

::-ms-input-placeholder {
	/* Microsoft Edge */
	color: hsl(240, 0%, 39%);
}










/* ************************************* */
/*         Top, Header and Menus
/* ************************************* */

#page_heading {
	background-color: rgba(0,24,145,1);
	background: rgb(0,168,242);
	background: linear-gradient(90deg, rgba(0,168,242,1) 0%, rgba(0,24,145,1) 100%);
	
	background-image: url('/assets-v2/img/core/blue_header_background.png');
	background-size: cover;
}


#logo_foot {
		height: 60px;
		width: 60px;
		margin: 1.1rem 0rem;
		border-radius: 20px;
		box-shadow: 0px 0px 4px rgba(0,24,145,0.3);
		
	}
	

.logo img {
	/*width: 100%;*/
	/*max-width: 400px;*/
}


#logo_with_strap {
	/*height: 70px;*/
	width:  190px;
	padding-left: 10px;
}

.strap .date {
	display: inline-block;
	font-size: 0.9rem;
}

.strap .date svg {
	margin-right: 5px;
}

.strap-links {
	display: inline-block;
	padding-left: 10px;
	float: right;
	font-size: 16px;
}

.strap-links a {
	padding: 0px 0px 0px 10px;
	font-size: 16px;
	color: #769ac8 !important;
}

.strap-links img.avatar {
	border-radius: 32px;
	width: 30px;
	height: 30px;
}

.strap-links img {
	width: 28px;
	height: 28px;
	margin-left: 11px;
}



.top-bar-rh-links {
	text-align: center;
}

.top-bar-rh-links .rh-link {
	margin-left:  1.0rem;;
}

.top-bar-rh-links a {
	color: white;
	font-weight: 600;
	font-size: 1.0rem;
}

.top-bar-rh-links img {
	height: 30px;
	width: 30px;
}


.menu-bar-links {
	text-align: center;
	
}

.menu-bar-links .bar-link {
	margin-left:  1.0rem;
}

.menu-bar-links a {
	color: #8995A0;
	font-weight: 400;
	font-size: 0.9rem;
	background-color: hsla(220, 38%, 97%, 1.00);
	padding: 0px;
}

.menu-bar-links img {
	height: 36px;
	width: 36px;
}

#narrow-search-form {
	/*display: flex;*/
	display: none;
	align-items: center;
}

#narrow-search-input {
	border: none;
	border:  1px solid #bbb;
	border-radius: 40px;
	width: 300px;
	padding: 3px 15px 3px 15px;
}

#narrow-search-input::-ms-input-placeholder,
#desktop-search-input::-ms-input-placeholder { /* Edge 12-18 */
  color: #bbb;
}

#narrow-search-input::placeholder,
#desktop-search-input::placeholder {
  color: #bbb;
}

#narrow-search-submit {
	background-color: #bbb;
	font-size: 0.8em;
	margin-bottom: 1px;
	margin-left:  8px;
}

#navbarNavDropdown .search {
	display: flex;
}



#desktop-search-input {
	display: none;
	border: none;
	border:  1px solid #bbb;
	border-radius: 10px;
	width: 200px;
	padding: 0px 15px 1px 15px;
	margin-top:  2px;
	margin-right:  5px;
}


#navbarNavDropdown:hover #desktop-search-input {
	display: block;
}




#navbarNavDropdown .search img {
	height: 30px;
	width: 30px;
}


@media (min-width: 768px) {
	#logo_foot {
		height: 100px;
		width: 100px;
		margin: 1.1rem 0rem;
		border-radius: 20px;
		box-shadow: 0px 0px 4px rgba(0,24,145,0.3);
	}
	
	#logo_with_strap {
		/*height: 70px;*/
		width:  260px;
	}
	
	.top-bar-rh-links a {
		font-size: 1.2rem;
	}
	.top-bar-rh-links .rh-link {
		margin-left:  1.5rem;;
	}

}


/* ************************************* */
/* ************************************* */
/* ************************************* */

















.strap a {
	color: #626f7a;
}

.strap a:hover,
.social a:hover {
	color: hsl(211, 66%, 45%);
}

.heading {
	padding: 20px 0px;
}


.social-holder {
	text-align: right;
	position: relative;
}

.social {
	float: right;
	min-width: 108px;
	text-align: right;
	display: block;
}

.social span {
	display: block;
	text-align: right;
}

.social a {
	color: #626f7a;
	font-size: 16px;
}

.social a svg {
	margin-left: 5px;
}

nav {
	/*border-top: 4px solid hsl(211, 66%, 45%);*/
	width: 100%;
	position: relative;
	/*border-bottom: 2px solid #d4d7db;*/
}

nav .search {
	position: absolute;
	right: 10px;
}

nav .navbar-nav a {
	font-weight: 400;
	color: #56616f;
	background-color: white;
	padding: 3px 11px;
	border-radius: 6px;
}

nav a:hover {
	color: inherit;
}

nav li {
	padding: 5px 7px 5px 7px;
	border-bottom: 3px solid #F5F7FA;
	transition: all .3s ease-in-out 0s;
}

nav li:first-of-type {
	padding-left: 0px;
}


nav li.active>a {
	color: #fff;
	background-color: hsla(203, 100%, 37%, 1.00);
}

nav li:hover {
	/*border-bottom: 4px solid #c3c8cd;*/
}

nav li:hover>a {
	background-color: #c3c8cd;;
}

.cursor_link {
	cursor: pointer;
}

/**
nav #navbarNavDropdown ul.navbar-nav li a {
width: auto;
display: inline-block !important;
}
nav #navbarNavDropdown ul.navbar-nav li {
width: auto !important;
display: inline-block !important;
}**/

#mobile-nav button {
	background:  none;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 30px;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

#mobile-nav button img {
	/*width: 50px;*/
	/*height: 50px;*/
	padding: 4px;
	margin: 0px;
}



#mobile-nav button:hover  {
	background-color: hsla(203, 100%, 37%, 0.30);
}

#mobile-nav .dropdown-menu {
	background-color: hsla(203, 100%, 37%, 1.00);
	padding: 15px 15px 9px 35px;
	border-radius: 10px;
}

#mobile-nav a.top-nav {
	text-align: right;
	background-color: hsla(203, 100%, 47%, 0.40);
	color: #fff;
	margin-bottom: 6px;
	border-radius: 4px;
	font-weight: 400;
	padding-right: 0.75rem;
	font-size: 1.2em;
}

#mobile-menu-btn:focus {
	outline: none !important;
	box-shadow: none;
}



nav ul.navbar-nav>li>.dropdown-menu {
	border: none;
	border-radius: 10px;
	padding: 10px 10px;
}

.dropdown-menu a {
	font-weight: 600;
	color: #7b7b7b;
	padding-left: 0.75em;
}

/***** HOME *****/

.feature {
	padding: 16px 0px 0px;
	box-sizing: border-box;
}

.panel.x3 {
	overflow: hidden;
	background-color: #ccc;
}

#live-notice .row {
	background-color: hsl(355, 83%, 46%);
	border-radius: 4px;
	margin-top: 16px;
}

#live-notice .text {
	color: #fff;
	padding-top: 8px;
}


#live-notice .action button {
	background-color: #fff;
	color: hsl(355, 83%, 46%);
	border: none;
	margin: 5px 0px;
	float: right;
}



.hero_panel img {}

#video_panel_top_right {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: 18px;
}

#video_panel_top_right iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#hero_video_panel {
	/*background-color: #333;*/
	color: #eee;
	position: absolute;
	z-index: 1000;
	height: 420px;
	width: 100%;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 0.5s ease-in-out;
	pointer-events: none;
}

#hero_video_panel.showOverlay {
	background-color: #333;
}



#hero_video_player {
	width: 746px;
	margin: 0;

	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

#hero_video_player.movePlayer {

	/*margin: 0 auto;*/
	-webkit-transform: translate(540px, 00px);
	-moz-transform: translate(540px, 00px);
	-o-transform: translate(540px, -0px);
	-ms-transform: translate(540px, 00px);
	transform: translate(200px, -0px);
}


#hero_video_player img {
	display: none;
	height: 420px;
	width: 746px;
	border-right: 2px solid rgba(255, 255, 255, 0);
}

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/

.hero_panel {
	border-bottom: 2px solid #fff;
}

.hero_panel img {
	border-radius: 25px;
}


.hero_panel .overlay h3 {
	font-size: 0.9em;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.hero_panel .overlay h3 {
		font-size: 1.35em;
	}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

	.hero_panel .overlay h3 {
		font-size: 1.55em;
	}


	.hero_panel img {
		height: 262px;
		border-right: 2px solid #fff;
		box-sizing: border-box;
	}

	.panel.x3 {
		height: 131px;
	}

	#hero_panel.panel .overlay {
		border-right: 2px solid #fff;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.hero_panel img {
		height: 352px;

	}

	.panel.x3 {
		height: 176px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.hero_panel img {
		height: 420px;
	}

	.panel.x3 {
		height: 210px;
	}
}



#video_panel_top_right {
	border-bottom: 2px solid #fff;
}

#video_panel_top_right img {
	border-radius: 18px;;
}

.panel img {
	width: 100%;
}

.panel {
	position: relative;
}

.panel.x3-1 {
	border-right: 1px solid #fff;
}

.panel.x3-2 {
	border-left: 1px solid #fff;
	border-radius: 18px;
}

.panel .font-sm {
	line-height: 1.2em;
}

.panel .overlay {
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding: 15px 15px 15px 20px;
	color: #fff;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 19.7%, rgba(0, 0, 0, 0.8) 100%);
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 19.7%, rgba(0, 0, 0, 0.8) 100%);
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 19.7%, rgba(0, 0, 0, 0.8) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 19.7%, rgba(0, 0, 0, 0.8) 100%);
	border-radius: 0px 0px 18px 18px;
}

.hero_panel .overlay {
	border-radius: 0px 0px 25px 25px;
}



.panel .overlay .tagtype {
	font-size: 15px;
}

.panel .overlay p,
.panel .overlay h3 {
	text-shadow: 0 0 2px #000000;
	margin-bottom: 0px;
}

.panel .overlay time {
	font-size: 14px;
	font-weight: 100;
}

.tagtype {
	padding: 0px 4px;
	border-radius: 2px;
	font-weight: 300;
	text-transform: uppercase;
}

/**** HOME FEEDS ****/

.flash .row {
	background-color: hsl(306, 31%, 44%);
	color: white;
	margin-top: 20px;
	border-radius: 3px;
	height: 3em;
}

.flash .row .icon {
	line-height: 2em;
	font-size: 1.5em;
}

.flash .row .button {
	line-height: 2.2em;
	font-size: 1.6em;
	text-align: right;

}

.flash .btn-primary {
	background-color: hsl(306, 31%, 84%);
	border-color: hsl(306, 31%, 64%);
	color: hsl(306, 31%, 44%);
}

.flash .btn-primary:hover {
	background-color: hsl(306, 31%, 100%);
	border-color: hsl(306, 31%, 64%);
	color: hsl(306, 31%, 44%);
}

.flash a.text-link {
	color: white;
	text-decoration: underline;
}

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/

.flash .row {
	height: 100%;
}

.flash .row .message p {
	font-size: 1.0em;
	text-align: center;
	height: 100%;
	line-height: 1.5em;
	margin: 0px;
	padding: 10px 0px;
}

.flash a.btn-primary {
	font-size: 0.4em;
	margin-left: 0px;
}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.flash .row .message p {
		font-size: 1.1em;
		padding-top: 0px;
		text-align: center;
		height: 100%;
		line-height: 2.5em;
		margin: 0px;
		padding: 0px;
	}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.flash .row .message p {
		font-size: 1.3em;
		text-align: center;
		height: 100%;
		line-height: 2.2em;
		margin: 0px;
		padding: 0px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.flash .row .message p {
		font-size: 1.4em;
		text-align: center;
		height: 100%;
		line-height: 2em;
		margin: 0px;
		padding: 0px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}



.home-upper {
	padding: 30px 0px 0px;
}

.homefeed {
	box-shadow: 0 1px 14px hsla(0, 0%, 56%, 0.30);
	border-radius: 10px 10px 10px 10px;
	background-color: #fff;
	position: relative;
}

.homefeed .feed-header {
	color: #fff;
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
	position: relative;
	text-transform: uppercase;
}

.homefeed h4 {
	margin-bottom: 0px;
	margin-left: 5px;
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: 0.03em;
}

.homefeed .feed-header a {
	position: absolute;
	right: 12px;
	top: 13px;
	color: #fff;
	text-transform: lowercase;
	font-weight: 100;
	font-size: 0.9em;
}

.feed-header a:hover {
	text-decoration: underline;
}

.homefeed .feature.img {
	padding: 1rem;
	padding-bottom: 0px;
}

.homefeed .feature img.full-width {
	width: 100%;
	border-radius: 1rem;
}

.homefeed img {
	width: 100%;
	border-radius: 0.5rem;
}

.homefeed article {
	padding: 15px;
	border-bottom: 1px solid hsl(109, 0%, 69%);
	clear: left;
}

.homefeed article.comment {
	padding: 1rem;
	padding-bottom:  0.05em;
	border-bottom: none;
}

.homefeed .img {
	position: relative;
}

.homefeed h5.dw-reading a {
	margin: 0px;
	padding: 0px;
}


.homefeed .attribution {
	/*background-color: red;*/
	position: absolute;
	bottom: 14px;
	width: 90%;
}

.homefeed .attribution .author_avatar {
	margin-right: 10px;
	/*width: 70px;*/
}

.homefeed .attribution .author_avatar img {
	height: 70px;
	width: 70px;
	border-radius: 35px;
}

.homefeed .attribution h2 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1px;
}

.homefeed .attribution p {
	font-size: 0.8rem;
	color: #8e8e8e;
	line-height: 1.1rem;
	margin-bottom: 0px;
}

.img img {
	width: 100%;
	height: auto;
}

.img .tagtype {
	position: absolute;
	left: 5px;
	bottom: 5px;
}

.img-left {
	width: 40%;
	float: left;
	margin-right: 15px;
}

.homefeed article h6,
.homefeed article h5 {
	margin-bottom: 0px;
	font-weight: 600;
}

.homefeed .intro {
	margin: 2px 0px 2px 0px;
	color: hsl(109, 0%, 39%);
	line-height: 1.3em;
}

.homefeed article time {
	font-size: 13px;
	color: #8e8e8e;
}

a.more-arrow {
	float: right;
	margin-right: 10px;
	color: hsl(211, 66%, 45%);
}

.homefeed .replay {
	position: relative;
}

.homefeed .replay span {
	position: absolute;
	background-color: hsla(360, 95%, 62%, 1.00);
	display: inline-block;
	border-radius: 1px;
	text-align: center;
	font-size: 0.6em;
	width: 60%;
	bottom: 0px;
	left: 0px;
	text-transform: uppercase;

}

.homefeed .replay a {
	color: #fff;
}



.homefeed .dw-reading-section p {
	margin-bottom: 0px !important;
}

.homefeed .panel-with-overlay {
	position: relative;
}

.homefeed .panel-footer-overlay {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 69%, rgba(255,255,255,0) 100%);
	position: absolute;
	bottom:  0px;
	width: 100%;
	height: 85px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.homefeed .attribution .panel-footer-overlay-dw {
	text-align: center;
	margin-bottom: 10px;
}

.homefeed .panel-footer-overlay a,
.homefeed .panel-footer-overlay-dw a {
	color: white;
	font-size: 0.9em;
	text-transform: uppercase;
	padding: 2px 20px;
	border-radius: 8px;
	margin-bottom: 15px;
}

.homefeed.panel-daily-worship .article {
	margin-bottom: 130px;
}








.col-bg-video .main-video h5 a,
.col-bg-video .main-video time {
	color: #fff;
}

.col-bg-video {
	padding-left: 1rem;
	padding-right: 1rem;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	/*margin-bottom: 2px;*/
}

.main-video time i,
.main-video time span {
	display: block;
	background-color: gre;
}

.main-video time i {
	margin-right: 0.5rem;
}


.main-video time {
	display: flex;
	align-content: flex-start;
	align-items: baseline;
}

.banner.videos {
	/*padding: 30px;*/
	/*background-color: #3072AD;*/
}

.banner img {
	width: 100%;
	/*padding-left: 1rem;*/
}

.banner h5.heading {
	color: #fff;
	text-transform: uppercase;
	padding: 0px;
	margin-bottom: 15px;
}

.homefeed article.nointerline {
	border-bottom: none;
}

.homefeed article:last-of-type {
	border-bottom: none;
}

.panel-separator {
	/*width: 100%;*/
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	align-content: flex-start;
}

.panel-separator .separator-title {
	display: inline;
	background-color: hsla(360, 95%, 62%, 1.00);
	color: white;
	border-radius: 6px;
	padding: 0px 7px 0px 7px;
	margin: 0px 0.5em 0px 1em;
	font-size: 0.8em;
	text-transform: uppercase;
	/*flex-grow: 1;*/
}

.panel-separator .separator-line {
	display: inline;
	margin: 0px 1em 0px 0em;
	flex-grow: 4;
	border-bottom: 1px solid hsla(0, 0%, 69%, 1.00);
	height: 0.65em;

}




/*.video-columns {
background-color: #3072AD;
}*/

.video-item {
	padding: 0px 0px;
	clear: both;
	height: 100%;
	margin-bottom: 12px;
	
}

@media (min-width: 768px) {
	.video-item {
		padding: 0px 20px;
		clear: both;
		color: #fff;
		height: 100%;
		margin-bottom: 12px;
	}
}


.bookmark-item {
	clear: both;
	margin-top: 80px;
}

.bookmark-item:first-of-type {
	margin-top: 10px;
}

.bookmark-item img {
	float: left;
	padding-right: 10px;
}

.bookmark-item h5 {
	font-size: 1.0em;
	padding-top: 20px;
}





.video-item h5 {
	font-size: 1.0em;
	margin-bottom: 0px;
	padding-top: 0px;
	color: hsla(214, 10%, 13%, 1.00);
}



.comment p {
	font-size: 16px;
	margin-bottom: 8px;
	text-align: left;
	color: hsl(215, 12%, 14%);
}

.comment .meta {
	display: block;
	text-align: right;
	margin-left: auto;
	font-size: 14px;
	font-weight: 600;
	color: hsl(109, 0%, 59%);
}

.comment .meta a {
	color: hsl(211, 66%, 45%);
}

/**** footer ***/

footer {
	margin-top: 50px;
	padding-top: 20px;
}


footer#page_footer {
	background-color: rgba(0,24,145,1);
	background: rgb(0,168,242);
	background: linear-gradient(90deg, rgba(0,168,242,1) 0%, rgba(0,24,145,1) 100%);
	
	background-image: url('/assets-v2/img/core/blue_header_background.png');
	background-size: cover;
	
}

footer#page_footer .footer_col_container {
	gap: 10px;
	padding-top: 30px;
	padding-bottom: 40px;
}

footer#page_footer .footer_col_container p {
	color: #fff;
	font-size: 0.8em;
	line-height: 1.2em;
}

footer#page_footer .logo {
	flex: 0 1 auto;
}

footer#page_footer .logo img {
	height: 100%;
	
}

footer#page_footer .logo-strap {
	flex: 10 0 auto;
}

footer#page_footer .footer-text {
	flex: 0 3 auto;

	/*flex-grow: 6;*/
}

footer#page_footer .bottom-bar-rh-links {
	flex: 1 0 auto;

	/*flex-grow: 6;*/
}

footer#page_footer .bottom-bar-rh-links .rh-link {
	padding-bottom: 4px;
}

footer#page_footer .bottom-bar-rh-links a {
	color: white;
	font-weight: 600;
	font-size: 1.0rem;
}

footer#page_footer .bottom-bar-rh-links img {
	height: 30px;
	width: 30px;
	margin-right: 7px;
	
}





.lowerfoot {
	background-color: #fff;
	padding: 20px;
	color: hsl(109, 0%, 39%);
}

.upperfoot {
	padding: 20px 0px;
	border-top: 4px solid #e3e8ee;
}

footer#page_footer .lowerfoot p {
	margin: 0px;
}

footer img {
	width: 100%;
}

ul.quicklinks {
	list-style: none;
	color: #c4ccd7;
	padding-left: 0px;
}

/*ul.quicklinks li::before {
font-family: 'Font Awesome 5 Pro';
content: '>';
position: relative;
left: -10px;
font-size: 16px;
color: #c4ccd7;
}*/
ul.quicklinks li a {
	color: hsl(211, 66%, 45%);
}

/***** giving slider *****/

#sf-giving-progress {
	margin-top: 35px;
	height: 25px;
	background-color: #FF3862;
	width: 100%;
	padding: 10px;
	background-clip: content-box;
}

#sf-giving-progress-bug {
	height: 25px;
	background-color: #FF3862;
	width: 25px;
	background-clip: content-box;
	display: block;
	border-radius: 50%;
	position: relative;
	top: -11px;
}

#sf-giving-progress-bug>p {
	bottom: 30px;
	position: relative;
}

/* Work in progress */
/* 
#sf-giving-progress {
	margin-top: 35px;
	height: 100px;
	width: 100%;
	background-clip: content-box;
	position: relative;
}

#sf-giving-progress-bug {
	height: 100px;
	background-color: #393738;
	width: 3px;
	background-clip: content-box;
	display: block;
	border-radius: 50%;
	position: absolute;
}

#sf-giving-progress-bug>p {
	bottom: 30px;
	position: relative;
}
*/

/***** about page *****/

.about .team-member {
	border-bottom: 1px solid #999;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.about .team-member h4 {
	font-size: 1.1em;
	margin: 0px 0px 4px 0px;
	padding: 0px;
}

.about .team-member p {
	margin: 0px;
	padding: 0px;
	font-size: 0.8em;
	line-height: 1.1em;
}

.about .team-member img {
	width: 65px;
	height: 65px;
	float: left;
	margin-right: 0.8em;
}

.about .team-member.full {
	border-bottom: 1px solid #999;
}

.about .team-member.full h4 {
	font-size: 1.3em;
}

.about .team-member.full p {
	margin: 0px 0px 0.5em 0px;
	font-size: 0.9em;
	line-height: 1.3em;
}

.about .team-member.full img {
	width: 200px;
	height: 200px;
	margin-right: 1em;
	margin-bottom: 0.4em;
}

/**** article page ****/

input[type="submit"] {
	background-color: hsl(29, 76%, 34%);
	color: white;
	border-radius: 20px;
	padding: 0px 15px 2px 15px;
	border: 1px solid white
}

.crumbs {
	padding: 20px 0px 30px;
}

.crumbs i {
	color: #d5d7db;
	font-size: 16px;
}

.crumbs a {
	color: hsl(211, 66%, 45%);
}

.crumbs .fa-chevron-right {
	color: hsl(217, 9%, 65%);
}

h2.article-title {
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #484848;
}

.article input:focus,
.article select:focus,
.article textarea:focus,
.article button:focus,
.article #new-comment:focus {
	outline: none;
}


.article .meta {
	margin-bottom: 20px;
	font-size: 0.9em;
	line-height: 1.3em;
}

.article .meta span {
	color: #8b8b8b;
}

.article .meta span img {
	margin-right: 4px;
}

.article .meta span.count {
	margin-right: 10px;
	color: #8b8b8b;
}


.article .meta i {
	margin-right: 3px;
}

.article .meta span.action-icons {
	float: right;
}

.article .article-icon {
	width: 35px;
}

.article .article-break {
	margin: 40px 0px;
	background-color: #f5f7fa;
	border-top-style: dashed;
	border-top-width: 2px;
}

.article video {
	max-width: 100%;
}

.article .main-content,
.article .comments {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 26px;
	border-radius: 10px;
}

.article h2.section-title {
	color: white;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	font-size: 1.1em;
	padding: 5px 10px;
	margin-bottom: 0px;
}

.article .comments h3 {
	font-weight: 100;
	font-size: 1.3em;
	color: hsl(109, 0%, 39%);
	/* mid-grey */
	border-width: 0px;
	border-top-width: 3px;
	border-style: solid;
	padding-top: 8px;
	padding-top: 15px;
	margin-bottom: 20px;
}

.article .comments h4 {
	font-weight: 100;
	color: hsl(109, 0%, 39%);
	/* mid-grey */
	padding-top: 8px;
	margin-bottom: 20px;
}

.article .comments {
	color: hsl(109, 0%, 39%);
	/* mid-grey */
}

.article .comments .comment-login {
	text-align: center;
	padding-bottom: 30px;
}

.article #new-comment-container.personal-comment {
	margin-bottom: 50px;
}

.article #new-comment-container.personal-comment.is-reply-to-reply,
.article #new-comment-container.personal-comment.is-reply {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: -75px;
}

@media (min-width: 768px) {

	.article #new-comment-container.personal-comment.is-reply-to-reply,
	.article #new-comment-container.personal-comment.is-reply {
		margin-left: 0px;
	}
}


/* Auto-grow input field */
/* https://codepen.io/navarr/pen/qBdVqRz */

[contenteditable=true]:empty:before {
	content: attr(aria-placeholder);
	display: block;
	/* For Firefox */
	color: hsl(240, 0%, 39%);
	;
}

div[contenteditable=true] {
	border: 2px inset rgb(238, 238, 238);
	font-family: system-ui;
	font-size: 16px;
	padding: 3px 1px 1px 1px;
	-webkit-appearance: textfield;
	width: 10)%;
	color: hsl(215, 12%, 14%);
	/*background-color: yellow !important;*/
	/*padding: 5px;*/
}




.article #new-comment-container #new-comment {
	border: none;
	background-color: hsl(267, 19%, 94%);
	margin-right: 8px;
}

.article #new-comment-container #new-reply-cancel {
	display: none;
	margin-left: 75px;
	margin-bottom: 15px;
}

.article #new-comment-container #new-reply-cancel button {
	padding: 1px 10px;
	font-size: 11px;
	border-radius: 9px;
	color: white;
	border: none;
	background-color: hsl(209, 66%, 44%);
}

.article #new-comment-container.personal-comment .new-comment {
	width: 100%;
}

.article #new-comment-container.personal-comment .spinner-border {
	display: none;
}

.article button#new-comment-post {
	border: none;
	padding: 0px 14px;
	border-radius: 9px;
	color: white;
	height: 1.6em;
	/*background-color: hsl(40, 96%, 60%);*/
}

.article #new-comment-container.personal-comment .align-right {
	text-align: right;
}

.article .personal-comment .avatar {
	width: 45px;
	height: 45px;
	float: left;
}

.article .personal-comment .avatar img {
	width: 45px;
	height: 45px;
	border-radius: 25px;
}

.article .personal-comment .quote {
	margin-top: 12px;
	min-height: 50px;
	margin-left: 55px;
	background-color: hsl(267, 19%, 94%);
	border-radius: 15px;

	display: block;
	padding: 10px 20px;
}

.article #new-comment-container.personal-comment .quote {
	display: flex;
	padding: 10px 10px;
}

.article .personal-comment p {
	font-size: 16px;
	margin: 0px;
	color: hsl(215, 12%, 14%);
}

.article .personal-comment p.infoline span {
	font-size: 0.85em;
	padding-left: 5px;
}

.article .personal-comment .actions {
	margin: 2px 0px 22px 0px;
	padding-left: 75px;
}

.article .personal-comment .actions span {
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
}

.article .personal-comment.reply {
	margin-left: 25px;
}

.article .personal-comment.reply .quote {
	display: inline-block;
	margin-left: 10px;
}


.btn.btn-primary.sf-button {
	border-radius: 16px;
	margin-top: 5px;
}

.btn.btn-primary.sf-button:hover {
	background-color: #626f7a;
	border-color: #626f7a;
	color: #fff;
}

.btn.btn-primary.sf-green {
	background-color: hsl(128, 38%, 52%);
	border-radius: 4px;
	border: none;
}

.btn.btn-primary.sf-green:hover {
	background-color: hsl(128, 38%, 42%);
}

.article .personal-comment div.attribution {
	/*padding-left: 10px;*/
	padding-top: 2px;
	font-size: 0.85em;
	font-weight: 600;
	color: hsl(109, 0%, 55%);
}

.article .personal-comment p::before {
	/*content: '\201C';*/
}

.article .personal-comment p::after {
	/*content: '\201D';*/
}

.article .comments .comment_form {
	display: none;
	font-size: 0.9em;
}

.article .comments .comment_form dl dt {
	float: left;
	font-weight: 400;
	margin-right: 10px;
	padding: 5px;
	width: 70px;
	clear: left;
}

.article .comments .comment_form dl dd {
	margin: 2px 0;
	padding: 5px 0;
}

.article .comments .comment_form input,
.article .comments .comment_form textarea {
	background-color: #f7f7c8;
	border: none;
	border: 1px solid hsl(109, 0%, 69%);
	/* mid-grey */
}

.article .comments .comment_form textarea {
	width: 100%;
	height: 6em;
}

.article .comments .comment_form label input[type='checkbox'] {
	padding: 20px !important;
	background-color: red !important;
}

.article .article-desc {
	margin-top: 20px;
}

.article .divider {
	border-top: 4px solid hsl(209, 66%, 74%);
	/* sf blue */
	padding: 0px 0px 20px 0px;
	margin-top: 20px;
}

.conference figure img {
	border-radius: 6px;
	border: 1px solid hsl(213, 10%, 44%);
	;
}

.conference figure figcaption {
	font-size: 0.9em;
	text-align: center;
	padding: 0px 0px 5px 0px;
	margin: 5px 0px 0px 0px;
	border-bottom: 1px solid hsl(213, 10%, 44%);
}

.conference table.programme {
	background-color: #fff;
	padding: 15px;
	] border-radius: 6px;
}

.conference table.programme tr th {
	border-bottom: 5px solid hsl(215, 38%, 97%);
}

.conference table.programme tr th,
.conference table.programme tr td {
	vertical-align: top;
	text-align: left;
	padding: 5px;
	font-size: 0.9em;
	line-height: 1.2em;
	;
	border-bottom: 1px solid hsl(215, 38%, 97%);
}

figure.image-with-credit img {
	margin-bottom: 3px;
	width: 100%;
}

figcaption.image-credit {
	color: hsl(109, 0%, 49%);
	font-size: 0.8em;
	text-align: right;
}

blockquote.scripture-reading {
	background-color: hsl(43, 90%, 94%);
	padding: 15px 20px;
	font-family: serif;
	margin-top: 20px;
	border: 1px solid hsl(33, 100%, 90%);
}

blockquote.scripture-reading p {
	font-size: 0.95em;
}

.lent-discipline {
	background-color: hsl(31, 96%, 58%);
	margin-top: 25px;
	padding: 15px 20px;
	color: white;
	border-radius: 10px;
}

.lent-discipline h3 {
	font-size: 1.1em;
	padding-bottom: 14px;
	border-bottom: 3px solid hsl(33, 100%, 90%);
}

.video-preview h5.card-title {
	margin: 0px 0xp 2px 0px;
	padding: 0px;
}

.video-preview .dateline {
	color: hsl(208, 8%, 50%);
	margin: 0px;
	padding: 0px;
}

/* Pagination */

.pagination {
	/* 	background-color: hsl(355, 82%, 66%); */
	/*margin-top:  20px;*/
	margin: 20px 0px 0px 0px;
	;
	border-radius: 10px;
	padding: 6px 0px 6px 0px;
	/*width: 100%;*/
	color: #fff;

}

.pagination a {
	color: #fff;
	display: inline-block;

	line-height: 1.1;
	font-size: 0.8em;
}

.pagination i {
	display: flex;
}

.pagination span {
	display: flex;
	display: flex;
	height: 100%;
	align-items: center;
}

.pagination span.pag-left {
	text-align: left;
	justify-content: left;
}

.pagination span.pag-right {
	text-align: right;
	justify-content: right;
}

.pagination span.pag-left a {
	text-align: left;
	padding-left: 10px;
}

.pagination span.pag-right a {
	text-align: left;
	padding-right: 10px;
}

.pagination a.active {
	font-weight: bold;
	border: 1px solid #fff;
}

.pagination .page-previous {
	text-align: left;
	display: block;
}

.pagination .page-first {
	text-align: right;
	display: block;
}

.pagination .page-next {
	text-align: right;
	display: block;
}

.pagination .page-last {
	text-align: left;
	display: block;
}

.pagination .page-single {
	text-align: center;

}

/* Forms */

.login-box p {
	color: #333;
	font-size: 0.95em;
	font-family: 'LEMONMILKPro-Regular';
	margin-bottom: 0.5em;
}

.login-box .smallprint {
	font-size: 0.8em;
}

.login-box a button,
.login-box button {
	background-color: #29b858;
	border: none;
	border-radius: 16px;
	padding: 5px 10px;
	font-weight: 400;
	font-style: normal;
	font-size: 1.4em;
	text-transform: uppercase;
	text-align: right;
	color: #fefefe;
	margin-right: 10px;
}

.login-box .form-group {
	color: #121212;
	font-family: 'LEMONMILKPro-Regular';
}

.login-box .form-group input[type="email"],
.login-box .form-group input[type="password"] {
	height: 3.0em;
}


.login-box .custom-control-label {
	color: #eee;
	font-size: 0.95em;
	line-height: 1.7em;
	font-family: 'LEMONMILKPro-Regular';
	padding-bottom: 0px;
}

.login-box .custom-control-label {
	line-height: 1.5em;
}

.login-box .signup_response {
	font-style: italic;
	background-color: hsl(99, 29%, 57%, 50%);
	border-radius: 20px;
	padding: 0px 12px 0px 10px;
	display: inline-block;
}




/* Right-hand Column */

.right-column h2 {
	font-size: 1.1em;
	/*background-color: hsl(209, 66%, 44%); /* sf blue *!/*/
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 5px 10px;
	color: white;
	font-weight: 400;
	margin-top: 25px;
	margin-bottom: 0px;
}

.right-column {
	padding-top: 20px;
}

@media (min-width: 768px) {
	.right-column {
		padding-top: 0px;
	}
}

.bg-channeld {
	background-color: hsl(209, 66%, 44%);
}

.right-column h2:first-child {
	margin-top: 0px;
}

.right-column .inner {
	background-color: white;
	padding: 10px 10px 2px 8px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}



.right-column p {
	color: hsl(215, 12%, 14%);
	/* mid-grey */
	padding: 5px 10px;
	/*font-size: 0.9em;*/
}

.tag-cloud {
	line-height: 1.4em;
	padding: 5px 10px;
}

.right-column section ul.simple-list {
	padding: 0px 1em;
	list-style: none;
}

.right-column section ul.archive-list {
	padding: 12px 2em;
}

.right-column section ul.archive-list li {
	line-height: 1.3em;
	padding-bottom: 2px;
}

.right-column section ul.archive-list li span {
	font-size: 0.95em;
}


.right-column ul.simple-list li::before {
	content: "\2022";
	color: hsl(209, 9%, 60%);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.right-column ul.simple-list li {
	margin-bottom: 4px;
	color: hsl(209, 9%, 60%);
}


.right-column ul.podcast-list,
.right-column ul.worship-list {
	padding-left: 0px;
	margin-left: 35px;
}

.right-column ul.podcast-list,
.right-column ul.worship-list {
	font-size: 0.9em;
}


.right-column ul.podcast-list .far,
.right-column ul.worship-list .far {
	color: hsl(109, 0%, 39%);
}

.right-column .comment {
	margin: 0px 10px;
}

.right-column .comment:first-child {
	margin-top: 5px;
}

/* Text Grey: hsl(215, 12%, 14%) */
/* Comment bg grey: hsl(267, 19%, 94%) */

.right-column .comment p,
.homefeed .comment p {
	margin: 0px;
	padding: 8px 12px;
	background-color: hsl(267, 19%, 94%);
	border-radius: 9px;
}

.right-column .comment span.meta,
.homefeed .comment span.meta {
	font-size: 0.8em;
	margin-top: 3px;
}

.right-column ul.worship-list .meta-date {
	color: hsl(109, 0%, 39%);
	/* mid-grey */
	font-size: 0.9em;
}


.right-column ul.image-title-list {
	padding: 0px;
	margin: 0px;

}

.right-column ul.image-title-list li {
	margin-bottom: 10px;

}

.right-column ul.image-title-list img {
	margin-left: ;
}

.right-column ul.image-title-list .title {
	margin: 0px;
	padding: 0px;
}

.right-column ul.image-title-list .title p {
	margin: 0px;
	padding: 0px;
	font-size: 1.1em;
}

.right-column .dateline {
	color: hsl(208, 8%, 50%);
}

.right-column .archive-link {
	padding: 0px 0px 0px 00px;
	margin: 0px 0px 10px 30px;
}

.right-column .podcast-player-list {
	margin: 15px 0px;
	padding: 0px 0px 0px 10px;
}

.right-column .podcast-player-list li {
	list-style: none;
	margin: 5px 0px;
	padding: 0px;
}


/* Right Column with Image */

.right-column ul.item-list-with-image {
	margin-left: 10px;
	margin-bottom: 10px;
}

.right-column ul.item-list-with-image li {
	padding: 5px 0px;
}

.right-column ul.item-list-with-image .latest-link-image img {
	width: 150px;
	height: 84px;
	border-radius: 7px;
	/*	-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.42);
	-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.42);
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.42);*/
}

.right-column ul.item-list-with-image .latest-link-image {
	height: 84px;
	float: left;
}

.right-column ul.item-list-with-image .latest-link {
	height: 84px;
	display: flex;
	justify-content: l;
	align-items: center;
	padding-left: 10px;
}

.right-column ul.item-list-with-image .latest-link p {
	margin: 0px;
	padding: 0px;
	font-size: 0.9em;
	line-height: 1.1em;
	max-height: 84px;
}

.right-column ul.item-list-with-image .latest-link p time {
	display: block;
	font-size: 0.8em;
	margin-top: 1px;
	color: #999;
}

.right-column .latest-link-image.replay {
	position: relative;
}

.right-column .latest-link-image.replay span {
	position: absolute;
	background-color: hsla(360, 95%, 62%, 1.00);
	display: inline-block;
	border-radius: 1px;
	text-align: center;
	font-size: 0.6em;
	line-height: 14px;
	width: 60%;
	bottom: 0px;
	left: 0px;
	text-transform: uppercase;

}

.right-column .latest-link-image.replay a {
	color: #fff;
}


/* Right Column Calendar */
.right-column .month_navigation {
	text-align: center;
}

.right-column table.calendar {
	width: 100%;
}

.right-column table.calendar td,
.right-column table.calendar th {
	text-align: center;
}

.right-column table.calendar .current {
	background-color: #e3e8ee;
}

.right-column table.calendar .today {
	background-color: hsl(208, 66%, 74%);
}

.right-column table.calendar .weekend {
	color: hsl(8, 100%, 69%);
}

.right-column table.calendar .given {
	border: 2px solid hsl(208, 66%, 74%);
}


ul.related-items {
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

ul.related-items li {
	display: inline;
	padding-right: 20px;
	margin-right: 10px;
}

ul.related-items li::after {
	content: " |";
	position: absolute;
	margin-left: 15px;
	color: #ccc;
}

ul.related-items li:last-of-type::after {
	content: "";
}


.email-subscribe input[type="email"] {
	margin: 10px 0px 10px 0px;
	border: 1px solid hsl(109, 0%, 39%);
	padding: 2px 5px;
	color: hsl(209, 66%, 44%);
	;
}

.conference p.dateline {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.conference h4 {
	font-size: 1.3em;
	padding: 2px 0px 3px 8px;
	margin: 0px;
}

.conference p.address {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.conference .booking-link {
	padding-top: 3px;
	border-bottom: 1px solid gray;
	padding-bottom: 7px;
	width: 100%;
	text-align: right;
}

.conference .booking-link a {
	background-color: hsl(208, 66%, 44%);
	color: #fff;
	border-radius: 10px;
	padding: 2px 10px;
	border: 1px solid hsl(208, 66%, 44%);


}

.conference .booking-link a:hover {
	background-color: #fff;
	color: hsl(208, 66%, 44%);
	border-radius: 10px;
	padding: 2px 10px;
}

/* *******************************
Colour accent overrides
****************************** */

/*.podcast .comments h3 {
border-color: #f0626a;  /* podcast pink *!/;
}
.podcast .personal-comment {
border-color: #f0626a;  /* podcast pink *!/;
}

.podcast .btn-primary {
background-color: #f0626a; /* podcast pink *!/
border-color: #f0626a; /* podcast pink *!/;
}
.podcast .comments .comment_form input[type="submit"] {
background-color: #f0626a; /* podcast pink *!/
border-color: #f0626a; /* podcast pink *!/;
}
*/



/* *******************************
	  Video page styling
****************************** */

.video-preview h5.card-title {
	font-size: 1.0em;
	color: hsl(210, 9%, 40%);
}

.video-preview .card {
	position: relative;
}

.video-preview .watch {
	position: absolute;
	right: 0px;
	top: 0px;
	font-size: 0.8em;
	padding: 1px 5px 1px 5px;
	color: hsl(209, 66%, 44%);
	background-color: hsla(360, 100%, 100%, .75);
	border-bottom-left-radius: 2px;
}

/* *******************************
	  Collection
****************************** */
.collection h2 {
	color: hsla(214, 10%, 13%, 1.00);
	padding-bottom: 25px;
	font-weight: 100;
}

.collection .playlist .video-item h5 {
	font-weight: 100;
}

/* *******************************
		 Tag Styling
****************************** */

.tag_list .tag {
	color: hsl(209, 66%, 44%);
	font-size: 0.6em;
	background-color: hsl(209, 66%, 90%);
	padding: 1px 6px 2px 6px;
	border-radius: 6px;
}

/* *******************************
	  Toolbox
****************************** */
.toolbox h3 {
	font-weight: 100;
	padding: 13px 0px 0px 0px;
}

/* *******************************
	  Pastoral Support
****************************** */

.pastoral article p {
	margin-bottom: 6px;
	color: hsl(109, 0%, 39%);
}

article.pastoral-item h3 a,
article.resource-item h3 a {
	color: hsl(209, 66%, 44%);
	font-weight: 100;
	font-size: 0.8em;
}

article.pastoral-item,
article.resource-item {
	margin-bottom: 70px;
	border-bottom: 10px solid hsl(209, 66%, 84%);
}

article.resource-item {
	border-bottom: 10px solid hsl(360, 77%, 89%)
}

div.pastoral-col-right h2 {
	color: hsl(209, 66%, 44%);

}

div.pastoral-col-right .quote p {
	font-weight: 100;
	line-height: 1.4em;
	padding-left: 20px;
	margin-bottom: 7px;
	color: hsl(109, 0%, 39%);
}

div.pastoral-col-right .attribute {
	margin-bottom: 5px;
	color: hsl(109, 0%, 39%);
}


/* *******************************
	  Search
****************************** */
.low_search_box {
	background-color: hsl(209, 66%, 74%);
	padding: 10px;
}

.low_search_box label {
	padding: 3px 10px 3px 10px;
	font-weight: 100;
	font-size: 1.4em;
	color: white;
}

.low_search_box #keywords {
	padding: 3px 8px;
	font-weight: 100;
	font-size: 1.4em;
	color: hsl(209, 66%, 44%);
}

.low_search_box button {
	background-color: hsl(209, 66%, 44%);
	color: white;
	border-radius: 20px;
	padding: 0px 15px;
	margin-left: 20px;
	border: 1px solid white
}

.low_search_keywords {
	margin-top: 20px;
	margin-bottom: 20px;
	color: hsl(209, 66%, 44%);
}

.results_column {
	background-color: white;
}

.results_collection p {
	font-size: 1.4em;
	line-height: 1.2em;
	color: hsl(109, 0%, 39%);
	font-weight: 100;
	padding-top: 8px;
}

.ls-search-results {
	list-style-image: none;
	list-style-type: none;
	list-style: none;
	padding: 0px;
}

.ls-search-results-header {
	font-size: 1.4em;
}

.ls-search-results-summary {
	color: hsl(109, 0%, 39%);
	margin-bottom: 4px;
}

.ls-search-results .post-date {
	color: hsl(109, 0%, 39%);
	margin: 5px 0px 5px 0px;
	color: hsl(109, 0%, 59%);
	font-size: 0.9em;
}

.ls-search-results footer i {
	color: hsl(109, 0%, 59%);
}

.ls-search-results footer {
	margin-top: 0px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	;
	border-bottom: 1px solid hsl(209, 66%, 74%);
}



h2.search_header {
	color: hsl(211, 66%, 45%);
	padding-bottom: 10px;
}

.search_box #keywords {
	padding: 8px 20px;
	border: 1px solid hsl(211, 66%, 85%);
	border-radius: 8px;
	margin-right: 10px;
}


/* *******************************
   Booking / Payment pages
****************************** */

table.buy_tickets tfoot {
	background-color: hsl(219, 13%, 72%);
	color: #fff;
	font-weight: bold;
	font-size: 1.1em;
}



.card-details,
.cardholder-details {
	background-color: #fff;
	padding: 10px 10px 0px 15px;
	border: 1px solid hsl(215, 15%, 82%);
}

.card-details {
	border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;
}

.cardholder-details {
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;
}

.card-details .stripe img {
	width: 30%;
	margin-top: 60px;
}

.card-details .card-icons ul {
	margin-left: 0px;
	padding-left: 0px;
}

.card-details .card-icons ul li {
	list-style-image: none;
	list-style-type: none;
	display: inline;
	font-size: 1.6em;
	padding-right: 10px;
}

.cardholder-details .card-processing-info {
	color: hsl(215, 15%, 62%);
	font-size: 0.85em;
	padding-top: 20px;
}

.cardholder-details sub {
	display: block;
	line-height: 1.3em;
	margin-bottom: 10px;
	color: hsl(215, 15%, 52%);
	;
}

.cardholder-details .control-label,
.card-details .control-label {
	color: hsl(215, 15%, 62%);
}

.cardholder-details input[type="text"] {
	background-color: hsl(60, 100%, 85%);
	border: 1px solid hsl(215, 15%, 82%);
	border-radius: 2px;
	padding: 02px 5px;
}

.btn.btn-submit {
	background-color: green !important;
}

.cardholder-details .customer_data {
	font-weight: bold;
	color: hsl(215, 15%, 32%);
	font-size: 1.1em;
}

.cardholder-details h2,
.card-details h2 {
	border-bottom: 1px solid hsl(215, 15%, 82%);
	color: hsl(215, 15%, 32%);
	margin-bottom: 20px;
}

.card-details {
	border-left: 1px solid hsl(215, 15%, 82%);
}

.card-details #pay-button {
	float: right;
	margin-top: 20px;

	background-color: hsl(121, 100%, 35%);
	color: #fff;
	border-color: hsl(121, 100%, 25%);



	border-radius: 6px;
	border-style: solid;
	padding: 5px 15px;
	margin-right: 15px;
}

.card-details #pay-button:hover {
	background-color: hsl(121, 100%, 85%);
	color: hsl(121, 100%, 15%);
	border-color: hsl(121, 100%, 55%);
}

.card-details #card-element {
	background-color: hsl(60, 100%, 85%);
	padding-left: 10px;
	margin-right: 15px;
}

/* ******* DONATE **********/

.donate aside a {
	display: inline-block;
	background-color: #f00;
}

.donate .card-icons ul {
	margin: 15px 0px 15px 0px;
	padding-left: 0px;
}

.donate .card-icons ul li {
	display: inline;
	margin-right: 1rem;
}

.donate .btn-green {
	background-color: hsl(140, 65%, 44%);
	color: hsl(0, 100%, 100%);
	padding: 5px 15px;
	border-radius: 4px;
	margin-bottom: 5px;
}

#donate_amount_box {
	padding: 20px;
	background-color: #ffffff;
	border-radius: 2px;
}

#donate_amount_box input.tx_amount {
	font-size: 1.6em;
	width: 150px;
	-webkit-appearance: none;
	border-style: solid;
	border: none;
	height: 40px;
	text-indent: 10px;
	outline: none;
	color: #666;
	padding: 0px;
}

#donate_amount_box .amount {
	border: 2px solid hsl(209, 66%, 44%);
	border-radius: 8px;
	float: left;
	padding: 0px 5px 0px 15px;
	margin: 0px 0px 15px 0px;
}

#donate_amount_box .amount .input-amount {
	padding-left: 10px;
	padding-right: 10px;
	width: 150px;
	font-size: 2em;
}

#donate_amount_box .input-field {
	padding-left: 12px;
}

#donate_amount_box .fa-pound-sign {
	color: hsl(209, 66%, 44%);
}

.donate_info {
	background-color: #fff;
	padding: 15px 20px;
	margin-bottom: 20px;
}

.donate_info a {
	font-weight: bold;
}

.donate_info p,
.donate_info h3 {
	margin: 0px 0px 5px 0px;
}

.donate_cx_details {
	clear: left;
}


fieldset.donate_cx_details {
	border: none;
	padding: 0px;
	margin: 0px 0px 25px 0px;
}

.donate_info .borderleft {
	border-left: 3px solid hsl(209, 66%, 44%);
}

.donate_info p {
	margin: 3px 0px 10px 0px;
	line-height: 1.3em;
}



.donate_cx_details label {
	font-size: 0.9em;
	display: block;
	padding: 0px 0px 1px 10px;
	margin-top: 10px;
	margin-bottom: 0px;
	color: #0071bc;
}

.donate_cx_details label:first-of-type {
	margin-top: 0px;
}

.donate_cx_details input {
	border: 1px solid #aaa;
	border-radius: 8px;
	padding: 0px 0px 0px 10px;
	height: 30px;
	width: 90%;
	outline: none;
}

.ga-checkbox {
	border: 2px solid #0071bc;
	border-radius: 8px;
	padding: 10px 0px 5px 20px;
	margin: 10px 0px;
}

.ga-checkbox label {
	margin-left: 10px;
}

/****** events *******/

h4.redhead {
	background-color: #fa4141;
	padding: 5px 13px;
	margin-bottom: 0px;
	color: #fff;
	font-weight: 100;

}

.img-text-list .text {
	line-height: 1.1em;
	padding-left: 0px;
	padding-right: 2px;
}

.img-text-list li {
	min-height: 65px;
}

.archive .card-body {
	padding: 0.8em;
	color: #626262;
}

.archive .card-body .card-title {
	color: #333;
	font-size: 1.0em;
	line-height: 1.2em;
	font-weight: 600;
	height: 2.4em;
	overflow: hidden;
}

.event-description {
	/* margin-top: 1em; */
}

.event-description img {
	padding-right: 12px;
}

article.upcoming-event {
	padding: 0.5em 1em;
	background-color: white;
}

article.upcoming-event h5 {
	font-size: 1.0em;
	font-weight: 600;
	margin: 0px 0px 2px 0px;
}

article.upcoming-event time {
	color: hsla(120, 0%, 55%, 1.00);
	font-size: 0.8em;
}

h2.event-series-header {
	color: white;
	background-color: hsla(360, 95%, 62%, 1.00);
	display: inline-block;
	font-size: 1.2em;
	padding: 2px 10px 2px 10px;
	border-radius: 8px;
}

h4.event-series-title {
	margin-left: 0.5em;
	font-weight: 600;
}

.right-column .event-series p {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	padding-top: 0px;
}

.right-column .widget-event .col-inset {
	margin: 0.5em;
	border-bottom: 1px solid hsla(0, 0%, 87%, 1.00);
}

.right-column .widget-event .col-inset a,
.right-column .widget-event .latest-link p a {
	font-weight: 600;
}

.right-column .widget-event .col-inset .latest-link p {
	padding-left: 0px;
	margin-bottom: 2px;
}

.right-column .widget-event .col-inset p time {
	display: block;
	font-size: 0.8em;
	color: #999;
}

.series-list {
	background-color: white;
	padding: 1em;
}

.series-list .panel-separator .separator-title {
	margin: 0px 0.5em 0px 0em;
}

.series-list .series-header h5 {
	font-size: 1.4em;
	font-weight: 600;
	margin: 0px 0px 2px 0px;
}

.series-list .series-header p {
	color: hsla(120, 0%, 55%, 1.00);
}

.series-list .series-header p.time {
	font-size: 0.8em;
}

.series-list .series-events-item time {
	color: hsla(120, 0%, 55%, 1.00);
	font-size: 0.8em;
}

.series-list .series-events-item h6 {
	font-size: 0.9em;
	font-weight: 600;
	margin: 0px 0px 0px 0px;
}

.series-list .series-events-item .img-left {
	width: 40%;
}

.events-list .interline {
	border-top: 1px solid hsla(120, 0%, 85%, 1.00);
	padding: 1em 0em !important;
}

.side-heading {
	border-radius: 10px 10px 0px 0px;
	position: relative;
	margin-top: 10px;
}

.side-heading a {
	/* TODO: Make this inherit from home styles? */
	position: absolute;
	right: 5px;
	top: 0px;
	color: #fff;
	text-transform: lowercase;
	font-weight: 100;
	font-size: 0.9em;
}

/************* APP page *************/

.app .title {
	color: hsl(208, 66%, 44%);
	font-size: 1.5em;
	line-height: 1.0em;
}


/************* Login Panel *************/

#login-overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: hsla(109, 0%, 27%, 0.85);
	width: 100%;
	height: 100%;
	display: none;
	z-index: 1000;
}

#login-overlay .login-panel {
	position: relative;
	margin: 50px auto;
	width: 90%;
	background-color: white;
	border-radius: 10px;
	z-index: 1001;
	max-width: 500px;
}

#login-overlay .login-panel .panel-header {
	background-color: hsla(208, 66%, 44%, 1.00);
	margin: 0px;
	padding: 8px 10px 2px 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #fff;
}

#login-overlay .login-panel .panel-header h1 {
	font-size: 1.1em !important;
}

#login-overlay .login-panel p.notice {
	text-align: center;
	font-size: 1.1em;
	padding: 15px 0px 5px 0px;
}

#login-overlay .login-panel #close-btn {
	position: absolute;
	top: 8px;
	right: 15px;
	z-index: 1002;
}

#login-overlay .login-panel #close-btn i {
	color: #fff
}

#login-overlay .login-panel .login-fields {
	padding: 0px 20px 20px 20px;
}

#login-overlay .login-panel .login {
	background-color: #fff;
	padding: 20px 20px;
	color: hsla(208, 66%, 44%, 1.00);
	height: 100%;
	border-radius: 10px;
	/*margin: 0px 10px 0px 20px;*/
}

#login-overlay .login-panel .create {
	background-color: #fff;
	padding: 20px 20px;
	color: hsla(208, 66%, 44%, 0.75);
	height: 100%;
	text-align: center;
	border-radius: 10px;
	/*margin: 0px 20px 0px 10px;*/
}

#login-overlay .login-panel .create h2 {
	font-size: 1.2em;
}

#login-overlay .login-panel .create h2 a {
	color: hsla(208, 66%, 44%, 0.75);
	text-decoration: underline;
}

#login-overlay .login-panel .login .btn-primary {
	background-color: hsla(208, 66%, 44%, 1.00);
	float: right;
}

#login-overlay .login-panel .login .login-small-text {
	font-size: 0.8em;
	line-height: 1.2em;
}

#login-overlay .login-panel .login .login-small-text a {
	color: hsla (208, 66%, 44%, 1.00);
	text-decoration: underline;
}

/* Login Overlay V2 */


@media screen and (min-width: 992px) {
	.app .title {
		font-size: 2.3em;
	}
}

.app img.download {
	width: 90%;
}

@media screen and (min-width: 992px) {
	.app img.download {
		width: 200px;
	}

	#login-overlay .login-panel {
		width: 40%;
	}
}

.app .description {
	background-color: white;
	padding: 15px;
}

.app .screenshots img {
	border-radius: 12px;
}

/***** responsive *****/
@media screen and (max-width: 1200px) {
	nav ul.navbar-nav li a {
		font-size: 14px;
	}
}

@media screen and (min-width: 992px) {
	nav ul.navbar-nav>li:hover>.dropdown-menu {
		display: block;
		margin-top: 4px;
	}
}

/* User Profile Bar */
.profile-bar {
	position: fixed;
	bottom: 10px;
	right: 20px;
	width: 180px;
}

.profile-bar section {
	padding: 10px;
	border-radius: 5px;
	background-color: white;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.profile-bar section img {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	margin-right: 5px;
	margin-left: 5px;
}

/* Connect Pages */

h2.location-title {
	font-size: 1.375em;
	margin-bottom: 4px;
}

.btn-outlined {
	background-color: hsla(0, 0%, 100%, 1.00);
	border: 1px solid hsla(227, 10%, 62%, 1.00);
	color: hsla(213, 69%, 42%, 1.00);
	
}

.half-round {
	border-radius: 0em;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	border-bottom:  none;
}

.location-switcher {
	border-bottom: 1px solid hsla(227, 10%, 62%, 1.00);
}

.location-switcher span {
	margin: 0px;
	padding: 0px;
}

.leader-icon {
	max-width: 44px;
}

@media (min-width: 576px) {
	h2.location-title {
		font-size: 1.78em;
	}
}