/* Version: 1.0.2 */


p:first-child,
.title:first-child {
	margin-top: 0;
}

p:last-child,
.title:last-child {
	margin-bottom: 0;
}

.row {
	width: 88%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.clear:before,
.clear:after,
.row:before,
.row:after {
	content: "";
	display: table;
	clear: both;
}

.row .row {
	width: auto;
	max-width: none;
}

.row.wide {
	max-width: none;
}

.rows > .row {
	margin-top: 3em;
	margin-bottom: 3em;
}

.wrap {
	padding: 5% 0;
	margin: 3em 0;
}

.wrap .wrap {
	padding: 3% 0;
}

.wrap + .wrap {
	margin-top: -3em;
}

.wrap:first-child {
	margin-top: 0;
}

.wrap:last-child {
	margin-bottom: 0;
}

.hide {
	display: none;
}



@media (max-width: 800px) {

	.row.full {
		width: auto;
	}

}


.icons.cols {
	background-color: rgb(248, 248, 248);
	margin-left: -100em;
	margin-right: -100em;
	padding: 4em 100em;
	margin-bottom: 4em;
}

.icons.cols + .icons.cols {
	padding-top: 0;
	margin-top: -4em;
}

.icons.cols > * {
	border: 1px solid #ddd;
	background: white;
}

.icons.cols > * > * {
	margin: 20px;
}

.icons.cols > * img {
	margin: 0;
	border-bottom: 1px solid #ddd;
}

.row.cols {
	padding: 2em 0;
}

#header {
	z-index: 10;
	position: relative;
}

#logo {
	margin: 0;
}

#logo a {
	display: block;
	height: 64px;
	min-width: 256px;
	background: url(images/yost-logo.svg) no-repeat left center;
	background-size: contain;
	text-indent: -999em;
}

#menu {}

#menu > .menu > .menu-item > a {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 12px;
}

@media (min-width: 800px) {

	#masthead {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#menu {
		margin-top: 1.5em;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		padding-top: 1em;
		text-align: center;
	}

	#menu .menu > li + li:before,
	#menu .menu > li > ul:before {
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		display: block;
		content: "";
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#menu a {
		padding: 0.75em 2em;
	}
	
}

@media (max-width: 800px) {

	#header {
		text-align: center;
		padding: 6% 0;
	}

	#masthead {
		margin-bottom: 1em;
	}

	#logo a {
		background-position: center;
	}

	.hide-mobile {
		display: none;
	}

}



/* top and cart
------------------------------------------ */
#page-wrap {
	background: #fff;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

@media (min-width: 1600px) {

	#page-wrap {
		
		margin-bottom: 5em;
	}

}


#top {
	background: #333;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
	max-width: 3200px;
	z-index: 100;
}


#top .account-menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

#top .account-menu > * {
	padding: 1em;
}

#top .cart-contents {
	color: white;
}

body.admin-bar #top {
	top: 32px;
}

 @media screen and (max-width: 782px) {

	body.admin-bar #top {
		top: 46px;
	}

}

@media screen and (max-width: 600px) {

	body.admin-bar #top {
		top: 0;
	}

}

#top.empty,
#cart.empty {
	display: none;
}

#cart {
	background-color: #eee;
	display: none;
	font-size: 14px;
}

@media () {

	#page-wrap {
		display: flex;
	}
	
	#top {
		display: none;
	}
	
	#cart {
		display: block;
		order: 2;
		flex: 1;
		padding: 2em;
	}
	
	#page {
		order: 1;
		flex: 5;
		overflow-x: hidden;
	}
	
}

#cart .sidebar {
	position: -webkit-sticky;
	top: 46px;
}

#cart .sidebar > * {
	margin-bottom: 2em;
}


/* content
------------------------------------------ */

#content {
	z-index: 1;
	position: relative;
}

@media (min-width: 800px) {

	.content-sidebar >:nth-child(1) {
		float: left;
		width: 73%;
		padding-right: 3em;
	}

	.content-sidebar >:nth-child(2) {
		overflow: hidden;
		padding-left: 3em;
	}

	.sidebar-content >:nth-child(1) {
		float: right;
		width: 73%;
		padding-left: 3em;
	}

	.sidebar-content >:nth-child(2) {
		overflow: hidden;
		padding-right: 3em;
	}

}

.content-sidebar >:nth-child(2),
.sidebar-content >:nth-child(2) {
	padding-top: 4em;
	font-size: 0.8em;
}

.content {}
 .content p > a {
	color: #222;
	text-decoration: underline;
}

.content ul {
	margin-bottom: 2em;
}

.callout .title {
	margin-bottom: 0;
}

.callout.stacked {
	text-align: center;
}

.callout.stacked *,
.callout.stacked .button {
	float: none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 800px) {

	.callout article {
		float: left;
		text-align: left;
	}

	.callout .button {
		margin-top: 20px;
		float: right;
	}

}

.callout article {
	padding: 0.5em 0;
}

.callout .button {
	background: #000;
}

.callout .button * {
	color: #fff;
	vertical-align: middle;
}

.callout .button .button-icon {
	color: #e83;
}


/* accent */

.accent {
	background: #c73;
	color: #fff;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.accent.alt {
	background: #000;
}

.accent p {
	margin-left: auto;
	margin-right: auto;
}

.accent ul {
	text-align: left;
}

.content.alt {
	background: #000;
	color: #fff;
}

.separator {
	border-top: 1px dashed #ccc;
	padding-top: 3em;
}

#content .page-header {
	padding: 3em;
	opacity: 0.75;
}

#content .post {
	padding: 3em;
	background: #fff;
	border: 1px solid #ddd;
}

#content .post:nth-child(n+2) {
	margin: 2em 0;
}

.post header {
	margin-bottom: 2em;
}

#content h1.title {
	line-height: 1;
	margin-bottom: 1.25em
}

#content .post header .meta {
	opacity: 0.7;
}

#content .post header .meta > * {
	font-size: 11px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 1px
}

@media (min-width: 800px) {

	#content h1.title {
		font-size: 3.2em;
		letter-spacing: -1px;
	}

	#content .post header .meta > * {
		display: inline-block;
	}

	#content .post header .meta >:nth-child(n+2) {
		margin-left: 1em;
		border-left: 1px solid #ddd;
		padding-left: 1em;
	}

}

.gallery-icon,
.gallery-caption {
	position: relative;
	margin: 4px;
	z-index: 1;
}

.gallery-item:before {
	display: block;
	content: "";
	border: 1px solid #ddd;
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
}

p {
	max-width: 60em;
}

p[style*='center'],
[style*='center'] > * {
	margin-left: auto;
	margin-right: auto;
}

.intro {
	font-size: 20px;
}

.intro > * {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}

#features {
	text-align: center;
}

#features .title {
	color: #e83
}

.fa {
	color: #e83;
}

.button,
.content p > a.button,
.content a[class*='button'] {
	display: inline-block;
	padding: 0.5em 1.5em;
	background: #e83;
	border: 1px solid rgba(0, 0, 0, 0.05);
	color: #fff;
	text-decoration: none;
}

.button * {
	color: #000;
}

.button i {
	color: #fff;
	margin-right: 0.3em;
}

.button + .button {
	margin-left: 1em;
}

#comments-wrap {
	margin-top: 3em;
}

#footer {
	background: #333;
	color: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#footer a {
	color: #e83;
}

@media (min-width: 800px) {

	#footer .row.cols > * + * {
		border-left: 1px solid rgba(255, 255, 255, 0.2);
		padding-left: 4em;
		margin-left: 4em;
	}

}

#bottom {
	padding: 2em;
	background: #333;
	color: #fff;
}

ul.display-posts-listing {
	list-style: none;
	padding: 0;
}

ul.display-posts-listing > li + li {
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px solid #ddd;
}

ul.display-posts-listing .title {
	font-size: 1.5em;
	display: block;
}

ul.display-posts-listing [class*='dash'] {
	display: none;
}





.expand {
	position: relative;
	z-index: 1;
}

.expand:before {
	display: block;
	content: "";
	width: 1600px;
	height: 100%;
	background: #ddd;
	background: inherit;
	position: absolute;
	top: 0;
	left: -200px;
	z-index: -1;
}