/*  
Theme Name: Vincefolio
Theme URI: http://themify.me/themes/blogfolio
 Version: 2.5.0
Description: Created by <a href="http://www.themify.me">Themify</a>.
Author: PixelGarden
Template: blogfolio

---------

*/

@import url("../blogfolio/style.css");

/* write custom css below */


/*

Webfonts

*/

@font-face {
    font-family: 'MetaBookRoman';
    src: url('fonts/MetaBookRoman.eot');
    src: url('fonts/MetaBookRoman.eot?#iefix') format('embedded-opentype'),
         url('fonts/MetaBookRoman.woff') format('woff'),
         url('fonts/MetaBookRoman.ttf') format('truetype'),
         url('fonts/MetaBookRoman.svg#MetaBookRoman') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'FrizQuadrataStdBold';
    src: url('fonts/frizquadratastd_bold-webfont.eot');
    src: url('fonts/frizquadratastd_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/frizquadratastd_bold-webfont.woff') format('woff'),
         url('fonts/frizquadratastd_bold-webfont.ttf') format('truetype'),
         url('fonts/frizquadratastd_bold-webfont.svg#FrizQuadrataStdBold') format('svg');
    font-weight: bold;
    font-style: bold;

}

@font-face {
    font-family: 'CCAstroCityIntRegular';
    src: url('fonts/ccastrocityint-regular-webfont.eot');
    src: url('fonts/ccastrocityint-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ccastrocityint-regular-webfont.woff') format('woff'),
         url('fonts/ccastrocityint-regular-webfont.ttf') format('truetype'),
         url('fonts/ccastrocityint-regular-webfont.svg#CCAstroCityIntRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CCMonsterMashMedium';
    src: url('fonts/ccmonstermashmedium-webfont.eot');
    src: url('fonts/ccmonstermashmedium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ccmonstermashmedium-webfont.woff') format('woff'),
         url('fonts/ccmonstermashmedium-webfont.ttf') format('truetype'),
         url('fonts/ccmonstermashmedium-webfont.svg#CCMonsterMashMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* CSS */

html, body{ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}

/* Customize Teksten */

/************ MENU ************/
.menu-item {
	font: bold 24px 'CCMonsterMashMedium', Helvetica, Arial, sans-serif;
}

/* sub-levels link */
#main-nav ul a, #main-nav .current_page_item ul a, #main-nav ul .current_page_item a, #main-nav .current-menu-item ul a, #main-nav ul .current-menu-item a {
	padding: 7px 20px 7px 15px;
	text-transform: uppercase;
}

/* hover / current item colour of the TOP-LEVEL items.
   !important: the Themify customizer prints these same selectors with the
   near-black #0a0103 in an inline <style> block after this stylesheet.
   The child combinator matters: with descendant selectors
   (#main-nav .current_page_item a) this matched every <a> inside the current
   item - including the links in its submenu - and, being !important, it also
   outranked the submenu's own hover colour, so on /gallery/ all submenu items
   turned red with no hover feedback.
   Placed before the responsive section so the mobile #main-nav colour rules
   further down still win on phones. */
#main-nav > li > a:hover,
#main-nav > li:hover > a,
#main-nav > li.current_page_item > a,
#main-nav > li.current-menu-item > a,
#main-nav > li.current_page_item > a:hover,
#main-nav > li.current-menu-item > a:hover {
	color: #ED1D22 !important;
}

/* One authoritative colour pair for the submenu, used at every breakpoint and
   in every page state (so desktop and the mobile overlay cannot drift apart).
   The default value mirrors what the Themify customizer already uses for the
   desktop dropdown; the hover group is deliberately one element more specific
   so it wins on specificity rather than on source order. */
#main-nav ul a,
#main-nav ul li.current_page_item > a,
#main-nav ul li.current-menu-item > a,
#main-nav .current_page_item ul a,
#main-nav .current-menu-item ul a,
#main-nav li:hover > ul a {
	color: #6c1118 !important;
}
#main-nav ul li a:hover,
#main-nav ul li.current_page_item > a:hover,
#main-nav ul li.current-menu-item > a:hover {
	color: #ED1D22 !important;
}


/************ POST ************/
/* Post teksten */
.post-content {
	font: normal 14px 'MetaBookRoman', Helvetica, Arial, sans-serif;
}

.post-title {
	font: normal 24px 'FrizQuadrataStdBold', Helvetica, Arial, sans-serif;
}

.post-date {
	font: normal 10px 'CCAstroCityIntRegular', Helvetica, Arial, sans-serif;
}

.post-author {
	font: normal 16px 'FrizQuadrataStdBold', Helvetica, Arial, sans-serif;
}

.post-category {
	font: normal 16px 'FrizQuadrataStdBold', Helvetica, Arial, sans-serif;
}

.post-comment {
	font: normal 16px 'FrizQuadrataStdBold', Helvetica, Arial, sans-serif;
}

/* Keep post images within their container on every template. */
.post-image img {
	max-width: 100%;
	height: auto;
}
.grid4 .post-image > a,
.grid2 .post-image > a,
.grid4 .post-image picture,
.grid2 .post-image picture {
	display: block;
}
.grid4 .post-image img,
.grid2 .post-image img {
	display: block;
	width: 100%;
	height: auto;
}
.grid2 .post-image {
	max-width: 400px;
}

/************ HEADER ************/

/* The red bar used to be baked into the 954x170 Vince_Header.png background
   image and into the logo itself; both are now drawn here instead, so the bar
   can be recoloured/resized without Photoshop. The current transparent logo
   has no baked-in red band, so the bar height is an independent value per
   breakpoint. --vv-logo-w is the displayed width of images/vince-logo.png
   (half its 280px source width, so it doubles as the retina variant). */
:root {
	--vv-bar-color: #6c1118;
	--vv-logo-w: 140px;
	--vv-bar-h: 39px;
	--vv-logo-left: 46px;
	--vv-header-top: 8px;
}

#headerwrap {
	/* The ID selector preserves this top padding over .pagewidth's mobile padding shorthand. */
	padding-top: var(--vv-header-top);
}

#header {
	border-bottom: solid 0px #000;
	/* !important: the Themify customizer prints #header's background in an
	   inline <style> block after this stylesheet, so it wins on source order.
	   The image field in Themify > Styling > Header may be cleared by hand,
	   after which this override can go. */
	background: none !important;
}
#header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--vv-bar-h);
	margin-top: calc(var(--vv-bar-h) / -2);
	background: var(--vv-bar-color);
	z-index: 0;
}
/* The logo file is cropped to the artwork, so the empty margin the old
   195x170 canvas carried around it now lives here. The offsets centre the
   artwork on the bar and keep it in its original spot. */
#site-logo {
	padding: 0;
	top: 11px !important;
	left: var(--vv-logo-left) !important;
	z-index: 1;
}
#site-logo img {
	display: block;
	width: var(--vv-logo-w);
	height: auto;
}

/* hamburger toggle button is only shown below the responsive breakpoint */
#nav-toggle {
	display: none;
}

/************ FOOTER ************/

/* Widget teksten in footer */
.widget .widgettitle {
	font: normal 36px 'CCMonsterMashMedium', Helvetica, Arial, sans-serif;
}

/* Tekst in footer (VeniVidiVince + PixelGarden) */
.footer-text {
	font: bold 12px 'FrizQuadrataStdBold', Helvetica, Arial, sans-serif;
}
#footer {
	clear: both;
	border-top: solid 1px #000;
	padding: 20px 0;
}

/* Tekst voor linkjes */
.links-list {
	font: normal 12px 'CCAstroCityIntRegular', Helvetica, Arial, sans-serif;
}

/* Recente comments */
.recent-comments-list {
	font: normal 14px 'MetaBookRoman', Helvetica, Arial, sans-serif;
}

.widget .recent-comments-list .avatar {
	margin: 0 11px 11px 0;
	float: left;
	background: #30333a;
	padding: 3px;
	border: solid 1px #30333a;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2);
	box-shadow: 0 0 1px rgba(0, 0, 0, .2);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/* Links widget */
.widget .links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 10px;
}

/************ LAYOUT ************/

.grid4 .post {
	width: 216px;
	float: left;
	margin-left: 23px;
	margin-bottom: 20px;
	font-size: 95%;
	line-height: 100%;
}

.grid4 .post-title {
	font-size: 20px;
	line-height: 120%;
	margin: 0 0 2px;
	padding: 0;
}

.grid2 .post {
	margin-left: 10px;
}

/* sidebar none */
.sidebar-none #content {
	width: 98%;
	float: left;
	margin-left: 1%;
}

.widget .widgettitle {
	font: bold 18px/120%;
}

/* Tekst op content pagina weghalen */
#displaybox, .list-post {
	font: normal 14px 'MetaBookRoman', Helvetica, Arial, sans-serif;	
}

.type-page {
	font: normal 14px 'MetaBookRoman', Helvetica, Arial, sans-serif;	
}

/* Overbodig lijntje weghalen op pagina's */
.commentwrap {
    border-top: 0px solid #333333;
}

/************ STRUCTURE ************/

#pagewrap {
	background: url(images/vince_seamless_bg.jpg) repeat;
    width: 954px;
    margin: 0px auto;
}

html {
	background: #000;
}
body {
	background: #000;
}


/************ FORM ************/

/* Input button */
input[type=reset], input[type=submit] {
	background: #680104;
	color: #fff;
	border: none;
	cursor: pointer;
	padding: 7px 15px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

input[type=reset]:hover, input[type=submit]:hover {
	background: #30333a;
}

/* Validation errors */

div.wpcf7-validation-errors {
	border: 2px solid #680104;
}

span.wpcf7-not-valid-tip {
	position: absolute;
	top: -3px;
	left: 110%;
	z-index: 100;
	background: #000;
	border: 2px solid #680104;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}

/************ SLIDER ************/


#slider .slides {
    position: relative;
    width: 950px;
    height: 510px;
}

#slider .flex-control-nav, #slider .flex-direction-nav {
	visibility: hidden;
}

/************ NEXT PREVIOUS NAVIGATION ************/

.post-nav a {
	color: #fff;
}
.post-nav a:hover {
	color: #6c1118;
}
.pagenav a:hover {
	background: #6c1118;
}

.vf-hidden {
	display: none !important;
}

.vf-infinite-status {
	min-height: 42px;
	margin: 20px auto;
	color: #555;
	font-family: 'MetaBookRoman', serif;
	font-size: 16px;
	line-height: 42px;
	text-align: center;
}

.vf-infinite-status:empty {
	min-height: 0;
	margin: 0;
}

.vf-infinite-status a {
	color: #6c1118;
	text-decoration: underline;
}

.vf-infinite-status-loading::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	border: 2px solid rgba(108, 17, 24, .2);
	border-top-color: #6c1118;
	border-radius: 50%;
	content: '';
	vertical-align: -3px;
	animation: vf-infinite-spin .8s linear infinite;
}

.vf-infinite-sentinel {
	clear: both;
	height: 1px;
}

@keyframes vf-infinite-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vf-infinite-status-loading::before {
		animation: none;
	}
}

/************ RESPONSIVE / MOBILE ************/

@media (max-width: 768px) {

	/* fluid structure instead of the fixed 954px desktop container */
	.pagewidth,
	#pagewrap {
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 0 4%;
		box-sizing: border-box;
	}

	#body {
		padding: 20px 0;
	}

	/* Compact single-bar header row; the mobile bar is deliberately taller than
	   the logo proportion to give the 18px hamburger icon breathing room. */
	#header {
		--vv-logo-w: 82px;
		--vv-bar-h: 34px;
		--vv-logo-left: 8px;
		height: auto;
		padding: 10px 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	#site-logo {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		margin-left: var(--vv-logo-left);
		z-index: 1;
	}
	/* kept out of the bar row so they cannot stretch the header again */
	#site-description {
		display: none;
	}
	#header .header-widget {
		position: static;
		float: none;
		text-align: left;
		width: 100%;
		/* no top margin: the (usually empty) widget would otherwise add height
		   below the bar row and push #header::before's centre out of line with
		   the logo/hamburger row */
		margin-top: 0;
	}

	/* stack content and sidebar full width */
	#content,
	.sidebar-left #content,
	.sidebar-none #content {
		width: 100%;
		float: none;
		margin-left: 0;
	}
	#sidebar,
	.sidebar-left #sidebar {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	/* columns stack full width */
	.col4-1, .col4-2, .col4-3, .col3-1, .col3-2, .col2-1 {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	/* smaller custom menu font on tablets/phones */
	.menu-item {
		font-size: 18px;
	}

	/* nav toggle, hidden on desktop. Drawn as three bare white lines sitting
	   on the right end of the red bar - no button chrome/background. */
	#nav-toggle {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		/* small gutter so the bars are not glued to the end of the red bar */
		margin: 0 10px 0 auto;
		padding: 0;
		background: none;
		color: #fff;
		border: none;
		border-radius: 0;
		cursor: pointer;
	}
	#nav-toggle .nav-toggle-bars {
		display: inline-block;
		width: 26px;
		height: 18px;
		position: relative;
	}
	#nav-toggle .nav-toggle-bar {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background: #fff;
		border-radius: 1px;
	}
	#nav-toggle .nav-toggle-bar:nth-child(1) {
		top: 0;
	}
	#nav-toggle .nav-toggle-bar:nth-child(2) {
		top: 7px;
	}
	#nav-toggle .nav-toggle-bar:nth-child(3) {
		top: 14px;
	}
	/* visually hide the text label but keep it for screen readers */
	#nav-toggle .nav-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* collapsed nav by default, opening as an overlay panel directly under the
	   header bar so it covers the content instead of pushing it down.
	   !important is needed because both blogfolio/style.css and the Themify
	   customizer's inline <style> position #main-nav absolutely for desktop. */
	#main-nav {
		display: none;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		float: none !important;
		width: 100% !important;
		margin: 0;
		z-index: 300;
		background: #585b62;
		border-radius: 5px;
		overflow: hidden !important;
	}
	#header.nav-open #main-nav {
		display: block;
	}
	#main-nav li {
		float: none !important;
		width: 100% !important;
	}
	/* same display face and link colour as the desktop nav, only smaller.
	   !important: the Themify customizer's inline <style> sets #main-nav a's
	   font-size/colour after this stylesheet. */
	#main-nav a {
		margin: 0;
		border-radius: 0;
		color: #f2edd7 !important;
		font-family: 'CCMonsterMashMedium', Helvetica, Arial, sans-serif;
		font-size: 18px !important;
		line-height: 100%;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .05em;
		border-bottom: solid 1px rgba(255, 255, 255, .1);
	}
	/* top-level only: with descendant selectors the cream colour and the dark
	   background also reached the submenu links of a current parent */
	#main-nav > li > a:hover,
	#main-nav > li:hover > a,
	#main-nav > li.current_page_item > a,
	#main-nav > li.current-menu-item > a {
		background: #30333a;
		color: #f2edd7 !important;
	}

	/* dropdown submenu becomes an inline stacked list, opened on tap */
	#main-nav ul {
		position: static;
		float: none;
		border: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		width: 100%;
		background: #30333a;
	}
	#main-nav ul a,
	#main-nav .current_page_item ul a,
	#main-nav ul .current_page_item a,
	#main-nav .current-menu-item ul a,
	#main-nav ul .current-menu-item a {
		width: auto;
		/* no colour here: the submenu colour pair is declared once outside the
		   media queries (see the MENU section) so desktop and the mobile overlay
		   cannot drift apart */
		font-family: 'CCMonsterMashMedium', Helvetica, Arial, sans-serif;
		font-size: 16px !important;
		font-weight: bold;
		text-transform: uppercase;
	}
	#main-nav ul a:hover,
	#main-nav .current_page_item ul a:hover,
	#main-nav ul .current_page_item a:hover,
	#main-nav .current-menu-item ul a:hover,
	#main-nav ul .current-menu-item a:hover {
		background: #585b62;
	}
	#main-nav ul ul {
		left: auto;
	}
	#main-nav li.sub-open > ul {
		display: block;
	}

	/* let post images fill the content column without changing its page margin */
	.post-image,
	.post-image a,
	.post-image .lightbox,
	.post-image picture {
		display: block;
		width: 100%;
	}
	.post-image img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.grid2 .post-image,
	.grid4 .post-image {
		margin-left: auto;
		margin-right: auto;
	}
	.grid2 .post-image {
		max-width: 462px;
	}
	.grid4 .post-image {
		max-width: 462px;
	}
	/* keep embeds and the slider within the viewport */
	.post-content img,
	.post-content iframe,
	.post-content embed,
	.post-content object {
		max-width: 100%;
		height: auto;
	}
	#slider,
	#slider .slides {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	/* Only the fluid width is forced here. jquery.slider.js stacks all slides
	   in one grid cell with `float: left; margin-right: -100%`; un-floating
	   them put the outgoing and incoming slide both in flow during a
	   transition, which made the slider grow and snap back on every slide
	   change, so that overlap layout is left intact. */
	#slider .slides li {
		width: 100% !important;
		margin-left: 0 !important;
		float: left !important;
		margin-right: -100% !important;
	}
	.slide-feature-image,
	.slide-feature-image img,
	.feature-img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	/* visibility: hidden (blogfolio/vincefolio desktop rule) still reserved
	   ~52px of empty space below the slides on phones */
	#slider .flex-control-nav,
	#slider .flex-direction-nav {
		display: none;
	}
	#slider {
		margin-bottom: 15px;
	}
	#slider .slides {
		margin-bottom: 0;
	}

	.grid4 .post,
	.grid2 .post {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	/* keep form inputs, widgets and tables inside the viewport site-wide
	   (overrides blogfolio/style.css fixed-width inputs and widget rules) */
	input[type=text],
	input[type=search],
	input[type=email],
	input[type=url],
	input[type=password],
	textarea,
	select {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	table {
		max-width: 100%;
	}
	#commentform input[type=text] {
		width: 100%;
		margin-right: 0;
	}
	#searchform #s {
		width: 100%;
	}
	.widget,
	.widget img {
		max-width: 100%;
	}
	span.wpcf7-not-valid-tip {
		position: static;
		display: block;
		width: auto;
		margin-top: 5px;
	}
}

@media (max-width: 480px) {

	.pagewidth,
	#pagewrap {
		padding: 0 3%;
	}

	.menu-item {
		font-size: 16px;
	}

	#site-logo {
		font-size: 32px;
	}
}