/* Styles for St. Peter's Episcopal Church */
/* Westfield, NY */

/* Color palette
blue:	#155765
green:	#57652a
gold:	#ab9353
plum:	#4d2c3d
*/

html {
	font-size: 10px;
}

body {
	font-family: lato, sans-serif;
	font-weight: 400;
	color: #1F3A27; /*#444;*/
	font-size: 1.6rem;
}

/*.content-wrap {
	margin-bottom: 3em;
}*/

.main-header {
	background: #4d2c3d;
	color: #fff;
	padding: 2em 0;
	border-bottom: 2px solid #ab9353;
}

.site_id {
	overflow: hidden;
}

.logo img {
	float: left;
	margin-right: 2rem;
}

.site-title {
	font-size: 3.6rem;
	/*font-style: italic;*/
	font-family: oswald, lato, sans-serif;
	text-shadow: 1px 1px 0 #666;
}

.site-title > a {
	color: #fff;
	text-decoration: none;
}

.site-subtitle {
	font-family: oswald, lato, sans-serif;
	font-size: 2rem;
	text-shadow: 1px 1px 0 #666;
}


#main {
	padding:2rem 0;
}

.main-footer {
	background: #4d2c3d;
	padding: 2em 0;
	color: #fff;
	clear: both;
	border-top: 4px solid #ab9353;
}

	.main-footer > .container > div {
	    padding-bottom: 4rem;
	}

/* sticky footer */

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.content-wrap {
	flex: 1;
	-ms-flex: 1 1 auto;
}

.deepfooter {
	background: #000;
	color: #fff;
	padding: 1em 0;
	font-size: 80%;
	text-align: center;
}
	.deepfooter a {
		color: #fff;
		text-decoration: none;
	}
	.deepfooter a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	color: #155765;
	font-family: oswald, lato, sans-serif;
}

.main-footer h1, 
.main-footer h2, 
.main-footer h3, 
.main-footer h4, 
.main-footer h5, 
.main-footer h6 {
	margin-top: 0;
	color: #fff;
	padding-bottom: 5px;
}
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {
	margin-top: 0;
}

/* === HTML === */

a {
	color: #5F90B0;
}
	a:focus,
	a:hover { color: #ad353d; }

	.main-footer a { color: #fff; }

blockquote {
	border-color: #40566D; /*#70AB4B;*/
	border-width: 3px;
}

.clr {
	clear: both;
}

img,
iframe {
	max-width: 100%;
}

ul.pager {
	margin-top: 6rem;
}


/* === Navigation === */

a[href="#"] { /*when menu item is a 'heading' */
  cursor: default;
}

.main-nav {
	background: #57652a;
}

.main-nav ul.menu {
  padding-left: 0;
  margin-bottom: 0;
}

.main-nav .menu li {
  color: #fff;
  display: inline-block;
  float: left;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  transition: background-color .5s ease;
}
	.main-nav .menu li:hover {
		background-color: #ab9353;
	}
	.main-nav .menu li:hover .section-header {
		background-color: #ab9353;
	}

.main-nav .menu li a,
.main-nav .menu li .section-header {
  color: #fff;
  display: block;
  padding: 1rem 1rem;
  text-decoration: none;
}


/* second level */

.main-nav ul.sub-menu {
  background: #ab9353 none repeat scroll 0 0 padding-box;
/*  border-top: 5px solid transparent;
  border-left: 5px solid #000;*/
  margin-left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  transition: opacity 0.2s ease 0s;
  visibility: hidden;
  width: 120%;
  z-index: 100;
}

.main-nav .sub-menu li {
  /*border-left: 5px solid #000;*/
  padding: 0 5px;
  /*white-space: nowrap;*/
  width: 100%;
}
	.main-nav .sub-menu li:hover { background-color: rgba(0,0,0,.1); }

.main-nav .sub-menu .parent > a::after {
  content: "\f0da";
  font-family: fontawesome;
  padding-left: 1em;
}

.main-nav li:hover > ul {
  left: 0;
  opacity: 1;
  transition: opacity 0.2s ease 0s;
  visibility: visible;
}

/* third+ level */

.main-nav li > ul > li:hover ul {
  left: 100%;
  top: 0;
}


/* SlickNav (http://slicknav.com) - Responsive Menu */

.slicknav_menu { 
	display: none;
	background: #ab9353;
}

.slicknav_nav {
	font-size: 1em;
}
.slicknav_btn {
	background-color: #444;
	float: left;
}

.slicknav_nav ul {
	margin-left: 0;
}

.slicknav_nav ul.sub-menu {
	background: transparent;
	border-left: 0px;
	margin-left: 20px;
	margin-top: inherit;
	opacity: 1;
	visibility: visible;
	padding: inherit;
	position: inherit;
	width: 100%;
	z-index: 100;
	transition: none;
}

.slicknav_nav .slicknav_row, .slicknav_nav a {
	padding: 10px; /* give menu item more 'finger' room */
}

.slicknav_nav .sub-menu .menu-item-has-children > a::after { display: none; }

@media (max-width: 991px) {

	#main-menu { display: none; }
	.slicknav_menu { display: block; }
	
	ul.sub-menu {
		border-top: 0;
	}
	ul.sub-menu li {
		border-left: 0;
	}

	.sub-menu .parent > a::after {
	  content: none;
	  padding-left: 0;
	}
	
}

/* =====
IMAGES
===== */

figure {
        display: table;
}

figcaption {
        display: table-caption;
        caption-side: bottom;
        padding: 1rem;
        font-size: 1.3rem;
        color: #666;
}
figcaption > .attribution {
        font-size: 70%;
        display: block;
        color: #aaa;
        text-align: right;
}


.align_left {
        float: left;
        margin-right: 2rem;
        margin-bottom: 1rem;
}

.align_right {
        float: right;
        margin-left: 2rem;
        margin-bottom: 1rem;
}

.align_center {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
}
	img.align_center { display: block; }

/* === Pages === */

.page-title {
	margin: 0 0 1em;
}


/* ==========
EXCERPTS & LISTS
========== */

article.article-excerpt {
	margin-bottom: 1em;
	padding-bottom: 2em;
	border-bottom: 1px solid #eee;
}

.excerpt-title {}
	.excerpt-title a { color: #155765; }

.excerpt-image {}

.excerpt-image.pull-left {
	margin-right: 1.5rem;
}

/* ARTICLE LISTS - used in Hanna Code */

.article-excerpt-list > a {
	color: #5F90B0;
	font-weight: 700;
}

/* PAGINATION (from UIKit) */

.pagination>.active>a, 
.pagination>.active>a:focus, 
.pagination>.active>a:hover, 
.pagination>.active>span, 
.pagination>.active>span:focus, 
.pagination>.active>span:hover {
	background-color: #155765;
	border-color: #155765;
}


/* ==========
SEARCH 
========== */

.searchbox .search {
	color: #000;
	text-align: right;
}


/* === Social Icons === */

header .social-icons {
	padding-top: 10px;
	text-align: right;
}

footer .social-icons {
	padding-top: 10px;
	text-align: left;
}

.social-icons .fa {
	font-size: 2em;
	background: transparent;
	border-radius: 5px;
	margin-left: 5px;
	padding: 1px 3px;
}
	footer .social-icons .fa {
		margin-left: 0;
		margin-right: 5px;
	}

.social-icons a {
	color: #fff;
	text-decoration: none;
}
.social-icons a:hover .fa { background: #fff; }
a.rsslink:hover		{ color: #f26522;}
a.contactlink:hover 	{ color: #009900;}
a.twitterlink:hover 	{ color: #55acee; }
a.facebooklink:hover	{ color: #3b5998; }
a.youtubelink:hover 	{ color: #cd201f;}
a.tumblrlink:hover		{ color: #35465c;}
a.instagramlink:hover	{ color: #3f729b;}
a.flickrlink:hover		{ color: #ff0084;}
a.pinterestlink:hover	{ color: #bd081c;}



/* ============= */
/* MEDIA QUERIES */
/* ============= */

/* Extra small - phones - only */
@media (max-width: 767px) {

.logo img {
	display: block;
	margin: 0 auto;
	float: none;
	max-height: 65px;
}

.site-title,
.site-subtitle { text-align: center; }

.site-title { font-size: 2.5rem; }
.site-subtitle { font-size: 1.5rem ; }

/*.header .box {
	padding-top: 2em;
}*/

header .social-icons {
	text-align: center;
}

/*.footer .box {
	padding-top: 1em;
	padding-bottom: 1em;
}*/

}

/* Extra small and small - phones/tablets */
@media (max-width: 991px) {

}

/* Small - tablets - only */
@media (min-width: 768px) and (max-width: 991px) {

.header {
	background: yellow;
	}

}

/* Medium - desktop only */
@media (min-width: 992px) and (max-width: 1199px) {

.header {
	background: orange;
	}

}

/* Large - large desktops - only */
@media (min-width: 1200px) {

.header {
	background: rebeccapurple;
	}

}