@import url('//fonts.googleapis.com/css?family=Open+Sans:400,300|Open+Sans+Condensed:300|Montserrat:400,700,300|Quicksand');
/* Add light, which doesn't come with Gfonts api: */
@font-face {
  font-family: Montserrat;
  src: local("Montserrat-Light"),
       url(../fonts/Montserrat-Light.otf);
  font-weight: 300;
}

/* Same structure and everything, as id 71 */
html, textarea, input, select {
	font: 16px/25px Montserrat;
}
html[lang] {
	height:100%; margin-top:0;
}
body {
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
	/*min-width:auto; can''t?? - sflb 3col messes up when smaller*/
	color: rgb(82, 80, 82);
	font: 16px/25px Quicksand;
}

/*as before, white on dark for home: */
body.home {
	color: #FFF;
	background-color: rgb(57, 44, 61);
}

html body {
	background-color:#FFF;
	min-width:100px;
	position:relative;
}
#body_wrapper {
	min-height: 100%;
}
a {
	font: inherit;
	text-decoration: underline;
}
a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1, h2, h3, h4, h5, h6 {
	color:#613f61;
}
.home a, .home h1 a, .home h2 a, .home h3 a, .home h4 a, .home h5 a, .home h6 a, .home h1, .home h2, .home h3, .home h4, .home h5, .home h6 {
	color:#fff;
}

textarea {
	border: 1px solid #000000 !important;
}

div{
	font: 16px/25px Quicksand;
	font-weight: 300;/*light*/
}

p{
	margin-top: 10px;
	margin-bottom:10px;
}
input, textarea, select {
	background-color: rgb( 255, 255, 255 );
	color: #000;
	border: 1px solid #000000;
    border-radius:2px;
	-webkit-border-radius:2px;
	-o-border-radius:2px;
	-ms-border-radius:2px;
	padding: 2px;
}
.sflb_section input[type=button], .sflb_section input[type=submit] {
	padding-left:10px;
	padding-right:10px;
	min-width:80px;
}
input[type='image'] {
	background-color: transparent;
	border: none;
	padding: 0;
}
/*must overwrite mobile.css #header*/
body #header {
	background: url('https://sftheme.truepath.com/73/navbar.png') repeat-x center 136px;
	height:0px;
	position:static;/*relative logo*/
	z-index:100;
	background: #472d47;
	position:fixed; top:0;
	height:82px; width:100%;
	/* fix jumpy fixed in Chrome http://stackoverflow.com/questions/25224969
	 * and more importantly, fix mobile demo display too with menu down */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}
body #header .container {
	width:80%; height:81px;
	max-width:1024px;
}
body #logo {
	left: 0;/*
	position:fixed;  if so, we can remove z-index tweaks in this and style.css? 
	z-index:102;
	display:none;*/
}
body {
	position:relative;
}
#logo img {
	max-height: 80px;
}
#logo a {
	margin-left:0 !important; left:0 !important; /* no change right-left*/
	font: 32px/55px Montserrat,Verdana,Arial,sans-serif;
	max-width: 100%;/*#1399*/
}
body #logo a span {
	padding:5px;
}
body #header .search {
	background: url('search.png') no-repeat right center;
	position:fixed;
	height:20px;
	top:50px;
	left:auto;
	right:10px;
	width: 19px;
	transition-property: width;
	transition-duration: 1s;
	z-index:102;
}
body.search.search-results #content >.status-publish {
	background:transparent;
}

/* same mobile, un-mobile.css*/
body #header .search:hover,
body #header .search:focus{
	width:134px;
	transition-property: width;
	transition-duration: 1s;
}
body #header .search:hover input.search_inp{
	display:block;
	opacity:1;
	transition-property: opacity;
	transition-duration: 1s;
}
body #header .search input.search_inp {
	display:none; opacity:0;
	transition-property: opacity;
	transition-duration: 1s;
	color: #fff;
	font: 14px Quicksand;
	height: 20px;
	padding: 0px 6px 0 4px;
	width: 104px;
}
body #header #searchsubmit {
	float:none;
	height:20px;
	margin-left: 0;
	width:20px;
}
#content >#searchform {
	margin-left:40px;
}

body #main_nav {
	display:block;/*mobile!*/
	height:auto;/*important for menuOverflow calculation*/
	left:0; top:0px;
	float:right;
	padding-top:22px;/*< fallback */
	padding-top:calc(41px - 0.7em);
	max-width:77%; width:auto;
	text-align: right;
	z-index: 101;
	margin-right: -6px;
}
body #main_nav li {
	height: 21px;
	margin: 0;
	float: none;
	display: inline-block;
}
#main_nav > li:after {
	content: '';
	display: block;
	height: 20px;
	margin-top: 1px;
	width: 2px;
}
#main_nav > li:first-child:after {
	content: none;
}
#main_nav li a {
	color: #EBE6EB;
	font: 18px/21px Montserrat, sans-serif;
	font-weight: 300;
	/*height: auto; messes dropdown sometimes*/
	padding: 0 6px;
}
#main_nav > li:hover {
	background: transparent;
}
#main_nav li:hover a {
	background: transparent;
	color: #FFF;
}
#main_nav > li.current_page_item a,
#main_nav > li.current_page_parent a,
#main_nav ul.sub-menu li.current-menu-item a{
	background: transparent;
	color:#FFF;
}
#main_nav > li.current_page_item,
#main_nav > li.current_page_parent{
	color:#FFF;
}


div .smaller_dialog
{
	font-size:12px;
	margin-left:10px;
}

#main_nav ul.children li.current_page_item, #main_nav ul.children li.current_page_item a ,
#main_nav ul.sub-menu li.current_page_item, #main_nav ul.sub-menu li.current_page_item a {
	text-decoration: underline;
}
#main_nav li.current_page_item ul.children li a ,
#main_nav li.current_page_item ul.sub-menu li a {
	background:transparent;
}
#main_nav ul.children ,
#main_nav ul.sub-menu {
	-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	background:rgb(125,125,125);
	background:rgba(125,125,125,0.7);
	display: block;
	margin: 0 0 0 2px;
	padding: 0;
	top: 21px;
	z-index: -1;
	-moz-transition: padding 0.5s;
    -webkit-transition: padding 0.5s;
    -o-transition: padding 0.5s;
	transition: padding 0.5s;
}
#main_nav li:hover > ul.children ,
#main_nav li.hover > ul.children,
#main_nav li:hover > ul.sub-menu,
#main_nav li.hover > ul.sub-menu{
	padding: 4px 0 6px;
	-moz-transition: padding 0.5s;
    -webkit-transition: padding 0.5s;
    -o-transition: padding 0.5s;
	transition: padding 0.5s;
}

#main_nav ul.children li ,
#main_nav ul.sub-menu li {
	display: block;
	height: 0;
	overflow: hidden;
	padding: 0;
	-moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -o-transition: height 0.5s;
	transition: height 0.5s;
}
#main_nav li:hover > ul.children li ,
#main_nav li.hover > ul.children li ,
#main_nav li:hover > ul.sub-menu li ,
#main_nav li.hover > ul.sub-menu li {
	height: 28px;
	-moz-transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -o-transition: height 0.5s;
	transition: height 0.5s;
}
#main_nav ul.children li:hover,
#main_nav ul.sub-menu li:hover{
	background: transparent;
	color:#FFF;
}
#main_nav ul.children li a ,
#main_nav ul.sub-menu li a {
	background:transparent;
	color:#FFF;
	font-size: 13px;
	font-weight: normal;
	line-height: 28px;
	height: 28px;
	padding: 0 14px;
	text-decoration: none;
	width: auto;
}
#main_nav ul.children li a:hover,
#main_nav ul.sub-menu li a:hover{
	background: transparent;
	text-decoration: underline;
}

#gal_nav {
	display:none;
}

#content_container {
	background: transparent;
	width: 100%;
}
#content_container_inner {
	width:100%;
}
.gallery_container {
	background: transparent;
	float: none;
	margin-bottom: 28px;
	height:100%;
}
#content_container .slideshow_container, .slideshow_container {
	background:transparent;
}

/* special full height start home page for home-page */
body.home {
	height:100%;
}
.plFrontPage.plHome {
	min-height:100%;
	height:100%;
	width:100%;
	padding:0;/* or on all?*/
	background-position: center 82px !important;
	position: relative;
}

body.home.iOS #body_wrapper {
	width: 105% !important;
}

body.home.iPad #body_wrapper,
body.home.iPad .plFrontPage.plHome {
	width: 110% !important;
}

body.iOS .plFrontPage.plHome {
	/*background-position: center center !important; breaks*/
	background-size: auto auto !important;
	padding-bottom:30%;
	width:105%;/*match*/
}

body.home.iOS #header {
	width:105% !important;
}

body.iOS #body_wrapper .ngg-galleryoverview {
	width: 86% !important;
}
body.Android .plFrontPage.plHome {/*http://stackoverflow.com/questions/14876035/ */
	background-attachment: scroll !important;
}

.plFrontPage.plHome >.entry{
	/* set in JS just in case
	position: absolute; breaks Chrome admin edit hover parallax effect sometimes?
	top: 50%; also margin-top minus set in JS
	margin-top:-40px; just incase non-js? 
	left:10%;*/
	margin-left:auto;
	margin-right:auto;
	width:80%;
}
.plFrontPage.plHome .entry >*{
	max-width:1024px;
	margin-left:auto;
	margin-right:auto;
}
/* special non-frontpage, backgrounds should be full page 
body.page {
	min-height: 100%;
}
body.page div.page,
body.page #content, 
body.page #content_container,
body.page #body_wrapper {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
}
body.page #content >.page {
	padding-top:90px;
	
	overflow:auto;
	position:fixed;
			ugly scrollbar but
			this is the only good way to fully cover body bg, big window small content,
			or smaller window with scroll big content..
}*/

/*
body.home >.slideshow_container .cycle2-slide {
	width:100%; height:100%;
}*/
#slideshow {
	margin:0 auto;
	width:100%;
	height:100%;
	background-size: cover;
	z-index:0;
}
#slideshow img {
	height:100%;
	width:100%;
	background-size:cover;
}

.postmeta {
	color: #817f7b;
	font-family: Roboto-Light,Helvetica,Verdana,Arial,sans-serif;
}
#content {/*with old sidebars*/
	width:55%;
	padding:82px 0 0 5%;
	margin:0 auto;
	float:left;
}
body.noWidgets #content {
	width:100%;
	padding:82px 0 0 0;
	margin:0 auto;
	float:none;
}
body.home #content {
	width:100%;
	margin:0 auto;
	padding:0;
}

#content >div >a,
#content >div >h1,
#content >div >h2,
#content >div >h3,
#content >div >.postmeta,
#content >div >.entry,
#content >div >.homeCommentLink,
#content >#respond, #footerPage .entry
/*#content >div .entry .post >*
#content .post hr, #content .page hr search*/{
	width:80%; max-width:1024px;
	margin-left: auto;
	margin-right:auto;
	float:none;
	position:relative;/*clickable, above sfploverlay and others, in search results*/
}
#content >div >.homeCommentLink {
	display:block;
}

/* required for it to display above the fixed SFPLOverlay on single page bg */
#content #comments, #content .commentlist {
	position:relative;
}

#content >div >.more_link {/*searchpage*/
	display:block;
}
/* Is is possible to set fullwidth blog entries within?
#content >div .entry .post {
	width:100%;
}*/

body.noWidgets #sidebar,
body.home #sidebar{
	display:none;
}
#sidebar {
	padding: 100px 5% 20px 15px;
	margin: 0;
	max-width:292px; width:100%;
}
#sidebar .sf_image_widget img {
	max-width: 292px !important; /* workaround for IE*/
}
/* not bottom
#sidebar ul.widgets li {
	width:250px;
	padding:10px 25px;
	display:inline-block;
}*/
li.widget {
	margin: 20px 0 40px;
}
li.widget_simpleimage {
	border: 0;
}
li.widget li {
	border: 0;
}
#sidebar h2 {
    padding-left: 0px;
	background: transparent;
	border: 0;
	color:#525252;
	font: 24px/29px Roboto-Light,OpenSans-Light, Helvetica,Verdana,Arial,sans-serif;
	margin: 0 0 4px;
}
li.widget ul {
	padding-left: 0;
}
.sf_widget_paypal_donations > div {
    padding-left: 0 !important;
}

a.more-link, a.more-link:hover {
	display: inline;
	text-decoration: underline;
	padding: 0;
}
.entry p, html body p
{
	line-height:25px;
	margin-top: 20px;
	letter-spacing:1px;
}

.entry h1 {
	font: 32pt/51px Montserrat, sans-serif;
	color:#FFF;
	margin: 0 0 2px;
}
.entry h2 {
	font: 32px/40px Montserrat, sans-serif;
	color:#fff;
	margin: 0 0 1px;
}
@media screen and (max-width: 480px) {
	/*Lets try 10% less:*/
	.entry h1 {
		font: 29pt/46px Montserrat, sans-serif;
	}
	.entry h2 {
		font: 29px/36px Montserrat, sans-serif;
	}
}
h2.posttitle, h2.posttitle a {
	font: 32px/40px Montserrat, sans-serif;
	color:#613f61;
	margin: 0 0 1px;
	text-decoration: none !important;
}
.entry h3 {
	font: 21px/23px Montserrat, sans-serif;
	color:#613f61;
}
.entry h4 {
	font: 18px/20px Montserrat, sans-serif;
	color:#613f61;
}
.entry h5 {
	font: 16px/16px Montserrat, sans-serif;
	color:#613f61;
}
.entry h6 {
	font: 14px/14px Montserrat, sans-serif;
	color:#613f61;
}
div.navigation {
	margin: 10px 7px 8px;
}
#content_container_inner >br {
	display:none;
}
#footer {
	height:0px;
	z-index: 22;
}
.fl_l {
	position: absolute; bottom:10px;
	margin:3px 5px;
	z-index:22;
}
/*black by default, on white bg*/
#footer .fl_l a {
	background-image: url('../css/sf-logo16-black.png');
	color: #000 !important;
}
#footer .fl_l.white a {
	background-image: url('../css/sf-logo16-white.png');
	color: #FFF !important;
}
#footer .container {
	width:100%;
	padding: 0;
}
#footer_nav {
	display:none;
}

.sermon_playlist li:hover, .sermon_playlist li.active {
	background-color: #a25410;
	color:#FFF;
}
.sermon_playlist li:hover >.date,
.sermon_playlist li.active >.date {
	color:#FFF;
}

body.single.single-sermons .post.type-sermons >*:not(a){
	width:80% !important;
	max-width:1024px;
	margin-left: auto;
	margin-right:auto;
}
body.single.single-sermons .post.type-sermons.sermons >img {
	display: block;
	margin: 10px auto;
	width: 150px !important;/*override above*/
}

.mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-loaded { /* the colored loading bar, should be themed to theme */
	background: #a25410;
	background: -moz-linear-gradient(top,  #763d0c 0%, #a25410 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#763d0c), color-stop(100%,#a25410));
	background: -webkit-linear-gradient(top, #763d0c 0%,#a25410 100%);
	background: -o-linear-gradient(top, #763d0c 0%,#a25410 100%);
	background: -ms-linear-gradient(top, #763d0c 0%,#a25410 100%);
	background: linear-gradient(to bottom, #763d0c 0%, #a25410 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#763d0c', endColorstr='#a25410',GradientType=0 );
}
/* no extra spacing, and consitent with mobile:*/
body #logo a span, body #logo a {
	margin: 0;
	padding: 0;
}
/* these overflow to menu should replace the width-mobile stuff commented below:
These need to be redefined here even if they're in mobile.css, since that's only for very small (phone) */
body.menuOverflow #header #mobile_nav {
	display:inline-block;
	margin:0;
	height:56px;
	float:right;
}
body.menuOverflow #main_nav {
	display:none;
	height:auto;
	position:relative;/*so zindex works*/
	margin:0 0 6px;
	padding:0px;
	background:rgb(71, 45, 71);
	position:absolute; right:0; left:auto; top:58px;
}
body.menuOverflow #main_nav li{
	display:block;
	clear:both;
	text-align:left;
	float:none;
	padding-top:5px;/*especially mobile/tablet!*/
}
body.menuOverflow #main_nav >li:last-of-type{
	padding-bottom:5px;
}
body.menuOverflow #main_nav .sub-menu >li {
	padding-top:0;
}
body.menuOverflow #main_nav li a {
	float:none;
	font-size:inherit;
	height:28px;
	padding:0 10px;
}
body.menuOverflow #header #mobile_nav >ul> li,
#mobile_nav .menuWord {
	display:none;
}
body.menuOverflow #main_nav ul.sub-menu {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;/*
	border-top: 1px solid #333; separator*/
	padding: 0;
	position: relative;
	top: 0;
	width: 98%;
	z-index: 0;
}
body.menuOverflow #main_nav li.current_page_parent ul.sub-menu {
	display: block;
}
body.menuOverflow #header #mobile_nav >ul> li.menu_btn {
    background: url('mobile_nav.png') no-repeat scroll center center #333;
	opacity:0.7;
    border-right: 1px solid #555;
	border-bottom:1px solid #555;
    display: block;
    float: right;
    height: 45px;
    margin: 14px 0 0 0;
    padding: 0px;
    width: 50px;
}
body.menuOverflow #header #mobile_nav >ul> li.menu_btn >a {
	display:block;
	height:100%;
}
body.menuOverflow #main_nav ul.sub-menu li a, #main_nav ul.sub-menu li a:hover {
    line-height: 28px;
    height: 28px;
    /*padding: 0px 25px;*/
    width: auto;
}

@media screen and (max-width: 480px) {/*overwrite some mobile.css stuff:*/
	html body #logo {
		position:absolute;
		width:auto;
	}
	#logo a * {
		max-width: 100%;/*#1399*/
	}
	html body #header #mobile_nav { 
		display:block;
	}
	#header #mobile_nav >ul> li {
		display:none;
	}
	body #main_nav ul.sub-menu li {
		height:0;
	}
	body #main_nav li {
		border-bottom: none;
	}
	body #main_nav li a {
		line-height:normal;
	}
	
	body #content {/*like body.noWidgets above*/
		padding:82px 0 0 0;
	}
	body.mobileOn.menuOverflow.menuDown #header,
	body.mobileOn.menuOverflow.menuDown .nav_wrapper {
		height:100%;
		width:100%;
		position:fixed;
		padding-bottom:90px;/*no show scroll-under.*/
	}
	body.mobileOn.menuOverflow:not(.menuDown) .nav_wrapper {
		display:none !important;
	}
	body.mobileOn.menuOverflow.menuDown .nav_wrapper{
		display:block;
		position: fixed;
		overflow:auto;/*scrollable*/
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		height: calc(100% - 182px); /* -scrollunder, -headingheight */
		top: 80px;
		text-align: center;
	}
	
	body.mobileOn.menuOverflow.menuDown .nav_wrapper #main_nav {
		position:static;
		float:none;
		text-align:center;
		min-width:100%;
	}
	body.mobileOn.menuOverflow.menuDown #main_nav,
	body.mobileOn.menuOverflow.menuDown #main_nav li{
		width:100%;
		/*height:auto;*/
		position:static;
		text-align:center;
		padding: 10px 0;
	}
	body.mobileOn.menuOverflow.menuDown #main_nav .sub-menu li {
		padding:0;
	}
	body.mobileOn.menuOverflow .nav_wrapper {
		text-align:center;
		width: 100%;
	}
	body.mobileOn.menuOverflow #logo {
		width: calc(100% - 56px);
	}
		
	.plFrontPage.plHome {
		background-position:center 0px !important;
	}
	
	html body #logo a, html body.mobileOn #logo a{
		position:relative;/*override mobile*/
	}
	#footer .mobile_toggle {
		padding-top:20px;
	}
	
	/* not needed? */
	body #body_wrapper {
		padding:0;
	}
	body #content_container {
		margin-top:0;
	}
	body:not(.iOS) #header,
	body:not(.iOS) #footer {
		margin:0; padding:0; left:0;/*or white right stripe*/
	}
	#body_wrapper #footer .container >p{
		position:relative;
		top:-20px;
	}
	#body_wrapper #footer .container >p a{
		background-image: url('../css/sf-logo16-white.png');
		position:relative;
		top:-10px;
	}
	body.iOS #footer {
		box-sizing: border-box;
		max-width:100%;
	}
}

a#fancybox-left:hover, a#fancybox-left:hover span
{
    left: -9px;
}
a#fancybox-right:hover, a#fancybox-right:hover span
{
    right: -9px;
}
strong, b {/*gets overwritten*/
	font-weight:bold;
}

body.firstFullImg .plFrontPage.plHome {
	background-size:100% auto !important;
	background-repeat: no-repeat;
	background-attachment: inherit;
	padding-top:82px !important;
	
	/* override mobile */ background-position:center 82px !important;
	
	min-height:20px;
	overflow:hidden;
}
body.firstFullImg .plFrontPage.plHome .entry {
	/* Allow centerhome()
	margin-top:100px !important;
	position:static !important;*/
	padding-bottom:100px;
}

/******** moving menubtn: *********/
.menu_btn a.withInner span,
.menu_btn a.withInner span:before,
.menu_btn a.withInner span:after {
  transition: all 500ms ease-in-out;
}

body #mobile_nav .menu_btn a.withInner span {
  top:50%;
}
body.menuDown #mobile_nav .menu_btn a.withInner span {
  background-color: transparent;
  z-index:99999;
}
body.menuDown #body_wrapper .nav_wrapper:before {
	display:none !important;
}
body.menuDown #mobile_nav {
	z-index:99999;
}
/*65:??*/
body.menuOverflow #header #mobile_nav > ul > li.menu_btn.menu_btn {
	background: transparent;
	border:none;
}

body.menuDown .menu_btn a.withInner span:before,
body.menuDown .menu_btn a.withInner span:after {
  top: 0;
}
body.menuDown .menu_btn a.withInner span:before {
  transform: rotate(45deg);
}
body.menuDown .menu_btn a.withInner span:after {
  transform: rotate(-45deg);
}

.menu_btn a.withInner {
	position: relative;
}
/*ignore before*/
.menu_btn a.withInner:before {
	display:none;
}
.menu_btn a.withInner span,
.menu_btn a.withInner span:before,
.menu_btn a.withInner span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #CCC;
  position: absolute;
  display: block;
  content: '';
}
.menu_btn a.withInner span:before {
  top: -10px;
}
.menu_btn a.withInner span:after {
  bottom: -10px; 
}

body.thumbLeft #content >.post .thumbnail.Top {
	margin-left:10%;
}
body.thumbLeft .post_info_posted {
	left: auto; margin-left: 10px;
}