/*
Theme Name: Bock & Baas
Author: Renier Vermaak
Author URI: http://www.reniervermaak.nl
Version: 1.0
Text Domain: bockenbaas
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

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

.row .column {
	float: left;
	width: 100%;
}

/* =Structure
----------------------------------------------- */
html, body {
	font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4 {
	font-family: 'superclarendon';
}

a {
	color: #db0303;
}

.entry-content a.read_more {
	display: block;
	margin-bottom: 1.3em;
}

.clear {
	clear: both;

}

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

.hidden {
	display: none;
}

#intro_video {
	display: none;
	padding: 40px 20px;
}

#bock_and_baas_intro,
.intro_still {
	width: 640px;
	margin: 0px auto;
}

#logo-mobile {
	display: block;
}
#logo-mobile img {
	display: block;
	margin: 0px auto;
}

.switchmenu {
	display: block;
	height: 34px;
	width: 100%;
	text-indent: -9999px;
	background: url(images/icon-mobile-menu.png) 50% no-repeat;
	cursor: pointer;
}

.mobilemenu {
	display: block;
	background: #db0303;
}

.mobilemenu ul.menu {
	display: none;
}
.mobilemenu ul.menu.visible {
	display: block;
}

.mobilemenu ul > li {
	display: block;
	text-align: center;
}

.mobilemenu a {
	display: block;
	line-height: 1.8em;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.mobilemenu ul li ul li a {
	display: block;
	line-height: 1.8em;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.menubar {
	display: none;
}
.menubar {
	position: relative;
	padding: 0px 0px 0px 0px;
	background: #db0303;
	font-size: 0.7em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	letter-spacing: 0.1em;
}
.menubar.home {
	padding: 0px 0px;
}

.menubar ul.menu {
	width: 605px;
	margin: 0px auto;
}

.menubar .switch_menu {
	display: block;
	width: 30px;
	height: 20px;
	border: 1px solid #fff;
	background: url(images/icon_menu.png) 0px 0px no-repeat;
}

.menubar ul > li {
	position: relative;
	display: block;
	padding: 0px 15px;
	float: left;
	line-height: 65px;
}

.menubar ul:after {
	content: '';
	clear: both;
	display: block;
}

.menubar ul > li > span.arrow {
	display: block;
	position: absolute;
	top: 0px;
	left: 50%;
	color: #db0303;
	font-size: 24px;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	margin-top: 40px;
	text-align: center;
}
body.home .menubar ul li span.arrow {
	display: none;
}

.menubar ul > li.menu-item-has-children:hover span.arrow {
	display: none;
}

.menubar ul li {
	position: relative;
}

.menubar ul li a {
	color: #fff;
	text-decoration: none;
	padding: 20px 0px;
}
.menubar ul li a:hover {
	text-decoration: underline;
}

.menubar .sub-menu {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	margin-top: 50px;
	background: #db0303;
	width: 100%;
	padding-bottom: 10px
}
.menubar ul li.menu-item-has-children:hover .sub-menu {
	display: block;
}

.menubar .sub-menu li {
	display: block;
	line-height: 1.5em;
	padding: 0px;
	float: none;
	width: 100%;
}
.menubar .sub-menu li a{
	display: block;
	padding: 5px 0px;
}

.menubar .social {
	position: absolute;
	right: 10px;
	top: 0px;
	margin-top: 6px;
}
.menubar .social ul li {
	display: inline;
	padding: 0px;
	margin: 0px 5px;
}

.menubar .logo {
	position: absolute;
	top: 10px;
	left: 10px;
}
.menubar .logo img {
	height: 90px;
	width: auto;
}

.container.over {
	background: #272727;
	color: #fff;
}

.container.over .column-facebook {
	color: #666;
}

.container.over .column-video iframe {
	width: 100%;
	height: auto;
}

.section {
	max-width: 1000px;
	margin: 0px auto;
}

.section.section-1200 {
	max-width: 1200px;
}

.section .inner {
	padding: 20px;
}

.section .inner h2 {
	text-align: center;
	font-size: 1.0em;
	font-weight: bolder;
	text-transform: uppercase;
	margin-bottom: 1.34em;
}

.facebook .section .inner h2 {
	text-transform: none;
}

.section .inner h2 a {
	text-decoration: none;
	color: #000;
}
.container.voorstellingen .section .inner h2 a {
	color: #db0303;
}

.container.over .section .inner h2 a {
	color: #fff;
}
.container.over .section .inner a {
	color: #fff;
}
.container.over .section .column-facebook .inner a {
	color: #666;
}

.container.facebook {
	position: relative;
	color: #fff;
	background: #db0303;
}

.container .background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
	background: #000;
	z-index: -1;
}
.container .background-image .image {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
.container .background-image .image img {
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.6;
}
.container .background-image .image img.loading {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
   
.container.facebook .cff-wrapper {
	color: #666;
}

.container.facebook .cff-wrapper #cff.custom-fb-feed {
	border-radius: 10px;
	max-width: 500px;
	margin: 0px auto;
	float: none;
	display: block;
	background: rgba(255,255,255,0.5);
	background: #fff;
}

.section .inner p {
	line-height: 2.0em;
	margin-bottom: 1.34em;
}
.section .inner p.more {
	text-align: center;
}

body.home .section .show,
body.archive .section .show {
	display: block;
	text-align: center;
}

body.home .section .show .thumb,
body.archive .section .show .thumb {
	margin: 10px;
}

.section .show h3 {
	font-size: 1.2em;
	margin: 1.2em;
}
.section .show h3 a {
	text-decoration: none;
	color: #db0303;
}

.show.item h3 a span {
	display: block;
	color: #666;
	font-size: 0.8em;
	margin-top: 10px;
	padding: 0px 30px;
	font-family: 'Lato';
	line-height: 1.2em;
}

.show.item .thumb img {
	width: 100%;
	max-width: 200px;
	height: auto;
}

h1.entry-title {
	text-align: center;
	font-size: 2.0em;
	font-weight: bolder;
	margin-bottom: 1.34em;
	color: #db0303;
}
h1.entry-title span {
	color: #000;
}
h1.entry-title a {
	text-decoration: none;
	color: #db0303; 
}

.page .entry-content {
	margin-bottom: 30px;
}

.entry-content p {
	line-height: 1.8em;
	margin-bottom: 1.34em;	
}

body.single-show .entry-content img:first-child,
body.single-show .entry-content .wp-caption:first-child {
	margin-top: 0px;
	width: 100%;
	height: auto;
}

#content .entry-content .content-main p.hidden {
	display: none;
}

.entry-content .images {
	margin-bottom: 30px;
}

body.page-template-tmpl-contact #main .entry-content .images {
	display: none;
}

.entry-content .images img {
	width: 90%;
	height: auto;
}

.entry-content b,
.entry-content strong {
	font-weight: bold;
}

.entry-content em,
.entry-content i {
	font-style: italic;
}

.section .inner .entry-content h2,
.section .inner .entry-content h3 {
	text-align: left;
	font-size: 1.2em;
	font-weight: normal;
}

.section .inner .entry-content h3 {
	font-size: 1.0em;
}

.single-show .section .inner .entry-content h2,
.single-show .section .inner .entry-content h3 {
	margin: 20px 0px 0px 0px;
}
.single-show .section .inner .entry-content h3 {
	font-size: 1.0em;
	margin: 10px 0px 20px 0px;
}

.section .inner .entry-content h2 em {
	font-style: italic;
}
.section .inner .entry-content h2 strong {
	font-weight: bold;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Images */
img[class*="wp-image-"] {
	height: auto;
	max-width: 97.5%;
}
img.size-full {
	width: auto; /* Prevent stretching of full-size images in IE8 */
}
img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
p img,
.wp-caption {
	margin-top: 0.4em;
}

img.circle {
	border: 5px solid #db0303;
	border-radius: 100%;
	padding: 0px;
}

img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 1.625em;
}
.wp-caption {
	margin-bottom: 1.625em;
	max-width: 96%;
	padding: 9px;
}
.wp-caption img {
	display: block;
	margin: 5px auto 0;
	max-width: 98%;
}
.wp-caption .wp-caption-text,
.wp-caption-dd {
	padding: 0 0 5px 40px;
	position: relative;
	text-align: left;
}
.wp-caption .wp-caption-text:before {
}

.wp-caption .hiddentext {
	display: none;
}

.page-id-7 .wp-caption.alignleft .wp-caption-text {
	text-align: center;
	padding: 10px 0px;
	font-size: 0.7em;
}

.ui-tooltip {
	font-family: Arial;
	font-size: 10px !important;
	font-weight: 100;
	line-height: 1.33em;
}

a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"] {
	
}
.wp-caption a:focus img,
.wp-caption a:active img,
.wp-caption a:hover img {
	
}

#content .entry-content .content-main p {
	margin-right: 20px;
}

#content .entry-content .details {
	border: 3px solid #db0303;
	border-radius: 10px;
	padding: 20px;
	color: #db0303;
}

#content .entry-content .contact {
	border: 3px solid #db0303;
	border-radius: 10px;
	padding: 20px 20px 0px;
	font-size: 0.9em;
}

#content .entry-content .side {
	margin-top: 20px;
	max-width: 80%
}

#content .entry-content .side h4 {
	font-size: 1.24em;
	margin-bottom: 20px;
	font-weight: bold;
}

#content .entry-content .details ul li {
	margin-top: 20px;
	line-height: 1.34em;
}

.entry-content .side .buttons a.btn {
	display: block;
	margin-top: 20px;
}

.entry-content .side .buttons a.btn-contact {
	display: block;
	background: #db0303;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.9em;
}

.entry-content .side .buttons .playlist-aside {
	border: 3px solid #000;
	border-radius: 10px;
	padding: 20px;
	margin-top: 20px;
}

.entry-content .side .buttons .playlist-aside h2 {
	margin: 0;
	font-weight: bold;
}

.entry-content .side .buttons .playlist-aside .item {
	margin: 10px 0;
}
.entry-content .side .buttons .playlist-aside .item span {
	display: block;
	font-size: 1.0em;
	line-height: 1.3em;
}
.entry-content .side .buttons .playlist-aside .item span.date {
	font-weight: bold;
	font-size: 1.1em;
	color: #db0303;
}

.entry-content a span.arrow {
	font-size: 0.7em;
}

.entry-content a.read_verdieping {
	text-decoration: none;
}

.cultuurkaart {
	font-size: 12px;
	text-align: center;
	color: #666;
	margin-top: 30px;
}
.cultuurkaart img {
	display: block;
	margin: 0px auto;
	margin-top: 10px;
}

.entry-content .verdieping_more {
	background: #DBDBDB;
	padding: 20px;
	color: #000;
	font-size: 12px;
	margin-top: 30px;
}
.single-show .section .inner .entry-content .verdieping_more h2 {
	margin: 0px 0px 20px 0px;
}
.single-show .section .inner .entry-content .verdieping_more p {
	margin-bottom: 0px;
	margin-top: 5px;
}

.clear:before,
.clear:after {
	content: '';
	display: table;
	clear: both;
	height: 0px;
}
.custom-fb-feed:before,
.custom-fb-feed:after {
	content: '';
	display: table;
	clear: both;
	height: 0px;
}

.comments {
	margin-top: 30px;
}

.comment {
	display: block;
	margin-bottom: 30px;
}
.comment .text {
	background: #db0303;
	border-radius: 20px;
	padding: 20px 30px;
	color: #fff;
	font-size: 0.6em;
}

.comment .text blockquote {
	font-family: 'superclarendon';
	font-size: 1.5em;
}
.comment .text p {
	margin: 0px;
}
.comment .text blockquote p:before {
	content: '"';
}
.comment .text blockquote p:after {
	content: '"';
}

.comment.odd {
	padding-left: 30%;
}
.comment.even {
	padding-right: 30%;
}

.comment .arrow {
	display: block;
	width: 30px;
	height: 44px;
	background: transparent url(images/comment-arrow.png) 0px 0px no-repeat;
	margin-left: 85%;
}
.comment.even .arrow {
	background: transparent url(images/comment-arrow.png) -30px 0px no-repeat;
	margin-left: 10%;
}

.form-group {
	display: block;
	clear: both;
	margin-bottom: 10px;
}

.form-group label,
.form-group .form-field {
	display: block;
	width: 90%;
	font-size: 0.9em;	
}

.form-group label {
	padding-top: 5px;
	margin-bottom: 5px;
}

input[type=text],
input[type=email],
select.wpcf7-select,
textarea.wpcf7-textarea {
	font-family: 'Lato';
	font-size: 1.0em;
	height: 25px;
	border: 1px solid #db0303;
	border-radius: 5px;
	max-width: 90%;
}

textarea.wpcf7-textarea { 
	height: 100px;
}

input[type=submit] {
	background: #db0303;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-family: 'Lato';
	font-size: 1.0em;
	height: 25px;
	cursor:  pointer;
}

.employees:before, .employees:after {
	content: "";
	display: block;
	clear: both;
}

.employees {
	position: relative;
}

.employee {
	display: block;
	float: left;
	width: 50%;
}

.employee .inside {
	display: block;
	margin: 5px;
	padding: 10px;
	background: #555;
	border-radius: 5px;
}

.employee .inside:hover,
.employee.active .inside {
	background: #333;
	cursor: pointer;
}

.employee .inside > a {
	text-decoration: none;
	display: block;
	position: relative;
}

.employee .inside .image {
	display: block;
	margin-bottom: 5px;
}

.employee .inside .image img {
	display: block;
	width: 100%;
	height: auto;
}

.employee span.name,
.employee span.function {
	display: block;
	color: #fff;
	text-align: center;
	font-weight: 100;
	line-height: 1.34em;
}
.employee span.function {
	font-size: 0.7em;
}

.employee span.spacer {
	position: absolute;
    width: 100%;
    display: none;
    bottom: -22px;
    text-align: center;
    line-height: 1.0em;
    color: #333;
}
.employee.active span.spacer {
	display: block;
}

.employee .about {
	position: absolute;
	left: 0px;
	width: 100%;
	z-index: 100;
	display: none;
}
.employee.active .about {
	display: block;
}

.employee .about .about-text {
	display: block;
	margin: 20px 6px 0px 5px;
	background: #333;
	min-height: 30px;
	border-radius: 5px;
	padding: 20px;
	line-height: 1.2em;
	font-size: 1.0em;
	color: #e1e1e1;
}

.close-about {
	color: #fff;
	margin: 20px 0px 0px 0px;
}

.close-about.close-top {
	float: right;
	margin: 0px 0px 20px 20px;
}

.side .partners {
	border: 3px solid #db0303;
	border-radius: 10px;
	padding: 20px;
	margin-left: 20px;
	margin-top: 8px;
}

.side .partners:before,
.side .partners:after {
	content: "";
	display: block;
	clear: both;
}

.side .partners .partner {
	margin: 0 0 0px 0;
	display: block;
	text-align: center;
}

.side .partners .logo img {
	width: 70%;
	height: auto;
	margin: 12px auto;
}

.playlist table td, .playlist table th {
	padding: 5px;
}

.playlist table th {
	font-weight: bold;
	border-bottom: 2px solid #000;
	text-transform: uppercase;
}

.playlist table tr.archive td {
	color: #999;
}

@media only screen and (min-width: 600px) {
	#intro_video {
		display: block;
		padding: 40px 20px;
	}

	#logo-mobile {
		display: none;
	}

	.mobilemenu {
		display: none;
	}

	.menubar {
		display: block;
	}

	body.home .section .show,
	body.archive .section .show {
		float: left;
		width: 33%;
	}

	.section .inner {
		padding: 50px;
	}

	.section .inner h2 {
		font-size: 2.0em;
	}

	#content .entry-content .content-main,
	#content .entry-content .side {
		float: left;
		width: 35%;
	}

	.section-1200 #content .entry-content .content-main,
	.section-1200 #content .entry-content .side {
		float: left;
		width: 30%;
	}

	#content .entry-content .side {
		margin-top: 0px;
	}

	#content .entry-content .content-main {
		width: 65%;
	}
	.section-1200 #content .entry-content .content-main {
		width: 70%;
	}

	body.page-template-tmpl-contact #main .entry-content .images {
		display: block;
	}

	.form-group label,
	.form-group .form-field {
		display: block;
		float: left;
		width: 33%;
		font-size: 0.9em;	
	}

	.form-group label {
		margin-bottom: 0px;
	}
}

@media only screen and (min-width: 980px) {
	.employee {
		width: 33.33%;
	}

	.row .column.column-75 {
		width: 75%;
	}
	.row .column.column-66 {
		float: left;
		width: 66.66%;
	}
	.row .column.column-50 {
		float: left;
		width: 50%;
	}
	.row .column.column-33 {
		width: 33.33%;
	}
	.row .column.column-25 {
		width: 25%;
	}
}