/*
Theme Name: VANDORST Est. 1968
Theme URI: http://www.vandorst1968.com
Author: Wilco Drost
Author URI: http://www.drost-co.nl
Description: Website Van Dorst Leather Goods
Template: drst
Version: 4.0
*/


/**
 * 2.0 Typography
 */

html {
	font-family: 'Noto Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: #004a99;
	font-family: 'Crimson Text';
	font-weight: normal;
	line-height: 1em;
}


/*
 * 3.0 Elements
 */

body {
	background-color: #ebf1f9;
}


/**
 * 5.1 Links
 */
 
a {
	color: #004a99;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #111;
}

a:hover,
a:active {
	outline: 0;
}


/**
 * 5.2 Menus
 */

.main-navigation a {
	font-size: 0.875em;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	color: #111;
}
 
@media screen and (min-width: 48em) {
 
	.main-navigation {
		border-bottom: solid 1px rgba(0,0,0,0.1);
	}
 
	.main-navigation > div {
		max-width: 70em;
		margin: 0 auto;
	}
	
	.main-navigation > div  > ul {
		margin: 0 1em;
	}
	
	.main-navigation div > ul > li > a {
		background-color: transparent;
	}
	
	.main-navigation ul ul {
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		background-color: #fff;
	}

}

.menu-footer-menu-container {
	margin: 0 2em;
}

.menu-footer-menu-container li {
	padding: 0 0.5em;
	font-size: 0.875em;
}

.menu-social-media-container ul {
	font-size: 0.75em;
}

.menu-social-media-container ul li {
	margin: 0 0 0 1em;
}

/**
 * 5.3 Pagination
 */

.pagination {
	text-align: center;
	margin: 1em 0;
}

.pagination span,
.pagination a {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 0.875em;
}


/**
 * 9.0 Widgets
 */

.header-widget-section .widget {
	position: relative;
	z-index: 1000;
	float: right;
	margin: 0 2em;
}

.header-widget-section .widget nav a {
	display: block;
	padding: 1em;
	font-size: 0.875em;
}

.jvd-product {
	padding: 1em;
	text-align: center;
}

.jvd-product .post-thumbnail {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-size: cover;
	background-position: center center;
	background-blend-mode: darken;
	background-color: #ebf1f9;
}

.single-product .jvd-product .post-thumbnail {
	background-color: #fff;
}

.jvd-product .entry-header h1 {
	font-size: 1.25em;
}

.footer-widget-section {
	border-top: 1px solid rgba(0,0,0,.1);
}

/**
 * Newsletter Signup
 */
@media screen and (min-width: 48em) {
	.footer-widget-1:after {
		content: '';
		display: block;
		clear: both;	
	}
	.footer-widget-1 .widget_nav_menu {
		float: left;
		width: 75%;	
	}
	.footer-widget-1 .widget_text {
		float: left;
		width: 25%;	
	}
}
.footer-widget-1 .widget_text h3 {
	margin: 0.5em 0;
	font-size: 0.875em;
	font-family: inherit;
	font-weight: bold;
}
/**
 * MailChimp signup
 */
#mc_embed_signup form {
	font-size: 0.875em;	
}
#mc_embed_signup_scroll {
	display: -webkit-flex;
	display: flex;
	margin: 1em 0;
}
#mce-EMAIL {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.5em 0.75em;
	font-size: 0.875em;
	font-family: inherit;	
	border: solid 1px #fff;	
	border-radius: 0.25em;
	background-color: #fff;
}
#mc-embedded-subscribe {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 3.875em;
	margin: 0 0.5em;
	padding: 0;
	cursor: pointer;
	color: #fff;
	font-size: 0.75em;	
	text-transform: uppercase;
	font-family: inherit;
	border: solid 1px #004a99;	
	border-radius: 50%;
	background-color: #004a99;	
}


.menu-sitemap-container ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-sitemap-container > ul > li > a {
	font-weight: bold;
}

.menu-sitemap-container a {
	font-size: 0.875em;
}

.footer-widget-2 {
	position: relative;
	float: right;
	bottom: -3.5em;
}


/**
 * 10.0 Header
 */

.site {
	position: relative;
}

.site-branding .logo {
	display: block;
	max-width: 6em;
	margin: 1em auto;
}

.site-branding .logo img {
	vertical-align: top;
}

.site-title,
.site-description {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}


/**
 * 11.0 Content
 */

.page-header,
.site-content,
.footer-widget-container,
.woocommerce #container,
.woocommerce-page .content-wrapper {
	padding: 1em;
}
 
.single .hentry,
.page-template-default .hentry,
.page-template-list-children-page .hentry,
.page-template-default .hero,
.page-template-list-children-page .hero {
	max-width: 40em;
	margin: 0 auto 2em;
}

.page-template-default .hero {
	max-width: 40em;
	margin: 2em auto;
}
 
.page-header {
	padding: 1em;
	text-align: center;
}

.list-posts .post {
	margin: 0;
	padding: 1em;
}

.list-posts .entry-title {
	font-size: 1.25em;
}

.list-posts .post-thumbnail {
	display: block;
}

.list-posts .post-thumbnail img {
	vertical-align: top;
}

.sharedaddy {
	margin: 1.5em 0;
}
.sharedaddy:before {
	display: block;
	content: '\2015';
}

/**
 * 12.0 Footer
 */

.site-footer {
	background-color: #fff;
}

.site-info {
	padding: 1em;
}

.site-info span {
	font-size: 0.875em;
}

.site-info .sep,
.site-info .credits,
.site-info .credits a {
	color: #999;
	text-decoration: none;
}


/**
 * 13.2 Galleries
 */

.gallery-item {
	text-align: left;
}
 
.gallery-caption {
	text-align: left;
	font-size: 0.875em;
}


/**
 * 13.3 - Slider
 */

.slider-section {
	position: relative;
	margin: 1.5em 0 4em;
	background-color: rgba(255,255,255,.5);
}

.slider-container {
	position: relative;
	height: 0;
	padding-bottom: 67%;
}

.slider-home .slider-container {
	padding-bottom: 56%;
}

.slider-container figure {
	visibility: hidden;
	position: absolute;	
	width: 100%;
	height: 100%;
	margin: 0;
	text-align: center;
	/* start flexbox align */
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	display: -moz-box !important;
	-moz-box-orient: vertical;
	-moz-box-pack: center;
	-moz-box-align: center;
	display: box !important;
	box-orient: vertical;
	box-pack: center;
	box-align: center;
	/* end flexbox align */
}

.slider-container figure img {
	width: 100%;
	height: auto;
}

.slider-container figure img.portrait {
	width: auto;
	height: 100%;
}

.slider-container figure figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}

.slider-container figure figcaption p {
	display: inline-block;
	margin: 0.5em;
	padding: 0.25em 0.75em;
	font-size: 0.75em;
	background-color: rgba(255,255,255,.5);
}

.slider-section .cycle-prev,
.slider-section .cycle-next {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}

.slider-section .cycle-prev {
	left: 0;
	z-index: 201;
}

.slider-section .cycle-next {
	right: 0;
	z-index: 202;
}

.slider-section nav {
	position: absolute;
	z-index: 203;
	right: 0;
	bottom: -3em;
	left: 0;
	text-align: center;
}

.slider-section nav span {
	display: inline-block;
	width: 1em;
	font: 2em/1em sans-serif;
	color: rgba(0,0,0,.1);
	cursor: pointer;
	transition: color 0.25s;
}

.slider-section nav span.cycle-pager-active {
	color: #004a99;
}


/**
 * 14.0 Media Queries
 */

@media screen and (min-width: 48em) {

	.entry-content p,
	.entry-content ul li,
	.entry-content ol li {
		font-size: 0.875em;
	}

	/* center content */
	
	.site-header,
	.site-content,
	.footer-widget-container,
	.site-info {
		max-width: 70em;
		margin: 0 auto;
	}
	
	/* add padding */
	
	.page-header,
	.site-content,
	.footer-widget-container,
	.woocommerce #container,
	.woocommerce-page .content-wrapper,
	.site-info {
		padding: 2em;
	}
	
	.woocommerce #container,
	.woocommerce-page .content-wrapper {
		margin: 0 -2em;
	}
	
	/* sticky footer */
	
	html, body {
		height: 100%;
	}
	
	.site {
		display: table;
		height: 100%;
		width: 100%;
	}
	
	.push-footer {
		display: table-row;
		width: 100%;
		height: 100%;
	}
	
	.footer-bottom {
		display: table-row;
		width: 100%;
	}
	
	/* widgets */
	
	.menu-sitemap-container > ul:after {
		display: table;
		content: '';
		clear: both;
	}

	.menu-sitemap-container > ul > li {
		display: block;
		width: 25%;
		float: left;
	}
	
	.footer-widget-2 {
		bottom: -5.5em;
	}
	
	/* header */
	
	.site-branding .logo {
		margin: 2em auto 0;
	}
	
	.header-widget-section {
		max-width: 70em;
		margin: -3em auto 0;
	}
	
	/* content */
	
	.list-posts {
		margin: 0 -2em;
	}
	
	.list-posts .post {
		float: left;
		width: 33.333%;
		padding: 2em;
	}
	.list-posts .post:nth-child(3n+1) {
		clear: both;
	}
	
	/* posts on homepage */
	
	.drst-widget-posts,
	.woocommerce ul.products {
		margin: 0 -2em;
	}
	
	.jvd-product {
		float: left;
		width: 33.333%;
		min-height: 30em;
		padding: 2em;
	}
	
}