/* ============================================================== */
/* ========================   Generic styles  =================== */
/* ============================================================== */

html, body, #page{
	min-height: 100%;
}

body{

}

#page{
	margin-top: 0;
	margin-bottom: 0;
}
.bgred{
	background-color: #1384A4;
	color: #FFFFFF;
}
.bgyellow{background-color:#fbf254;}
.bggreen{
	/* background-color: #65993d; */
	/* background-color: #1CBAE5; */
	background-color: #1384A4;
	color: #FFFFFF;
}
.bgblue{background-color:#1384A4;}
.bgpink{background-color:#E56FA9;}
.center{text-align:center;}
.contentwidth1200{
	width:96%;
	max-width: 1200px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	overflow:auto;
}
.contentwidth800{
	width:96%;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	overflow:auto;
}
.col1-3{
	width: 33.3%;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	overflow:auto;
}
.fullwidth{
	width:100%;
	clear:both;
}
.quote {color:#FFFFFF;}
/* ------------------------------------- */
/* --------------   Header   ----------- */
/* ------------------------------------- */

#masthead{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	z-index: 900;
}

.site-branding{
	padding: 20px 0 20px;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	width: 96%;
}

.site-branding a{
	display: block;
	float: left;
}
.site-branding .logo{
	width: 80%;
	max-width: 305px;
}
h1.site-title{
	width: 100%;
	height: 42px;
	background-image: url(../img/basharing-logo.png);
	background-repeat: no-repeat;
	background-size: contain;

}

.no-svg h1.site-title{
	background-image:url('../img/sprite-fallback.png');
}

.page-title{
	padding: 40px 5% 0 5%;
}
.featuredimageheader{
	height: 400px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #FCB131;
}


/* ------------------------------------- */
/* ------------   Navigation   --------- */
/* ------------------------------------- */


nav {
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	margin: 20px 0 0 0;
}

nav li{
	height: 42px;
	line-height: 30px;
	text-align: center;
	border-top: 1px solid #FFFFFF;
	width: 100%;
	display: block;
	vertical-align: top;
	background-color: #F6DE2B;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

nav li:nth-child(2n){
	background-color: #E56FA9;
}
nav li:nth-child(2n) a:hover {
	color: #FFFFFF;
}
nav li:nth-last-child(1){
	background-color: #0084a6;
	border-bottom: 1px solid #000000;
}
nav li:nth-last-child(1) a{
	color: #ffffff;
}
nav li:nth-last-child(1) a:hover{
	color: #000;
}
.menu-toggle, .menu-toggle:active,.menu-toggle:hover,.menu-toggle:visited{
	border:none;
	outline: none;
	box-shadow: none;
}

.menu-toggle{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;

	background: none;
	background-image: url('../img/sprite.svg');
	background-position:-184px -165px;
	background-size: 305px 211px;
}


.no-svg .menu-toggle{
	background-image: url('../img/sprite-fallback.png');
}



/* ------------------------------------- */
/* --------------   Footer   ----------- */
/* ------------------------------------- */

#footer{
	margin-top: 40px;
	background-color: #000000;
	color: #FFFFFF;
	padding-top: 20px;
	padding-bottom: 20px;
}

#footer #fish{
	width: 60px;
	height: 60px;
	
	/* Fallback */ 
	margin-left: 48%;
	/* Firefox */
	margin-left: -moz-calc(50% - 30px);
	/* WebKit */
	margin-left: -webkit-calc(50% - 30px);
	/* Opera */
	margin-left: -o-calc(50% - 30px);
	/* Standard */
	margin-left: calc(50% - 30px);

	background-image:url('../img/sprite.svg');
	background-position:-123px -150px;
	background-size: 305px 211px;
}

.no-svg #footer #fish{
	background-image:url('../img/sprite-fallback.png');
}

/* ------------------------------------- */
/* -----------   Link styles   --------- */
/* ------------------------------------- */


p a{ text-decoration:underline; }
p a:link{ color: #333333; }
p a:visited{  color: #333333;  }
p a:hover{  color: #E59649;  }
p a:active{  color: #E59649;  }

.tile a { 
	text-decoration:none; 
	
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	*display: inline; /* Fix for IE7 */
	
	width: 100%;
	height: 100%;
}



/* ------------------------------------- */
/* -----------   Intro block   --------- */
/* ------------------------------------- */


#intro {
	position: relative;

}

.home #intro {
	display: block;
}


#intro .tekst{
	float: left;
}

#intro .portret{
	width: 100%;
	height: 100%;
	float: left;
	padding-top: 100%;
}

#intro img{
	width: 100%;
}


/* ------------------------------------- */
/* ----------   Static Pages   --------- */
/* ------------------------------------- */


article.type-page .header-image{
	width: 80%;
	margin: 0 auto;
	padding: 40px 0 0 0;
}

article.type-page .header-image img{
	width: 100%;
}

article.type-page .entry-content{
	width: 100%;	
	margin: 40px auto;
}




/* ------------------------------------- */
/* -----------   Tile styles   --------- */
/* ------------------------------------- */

.tile-wrapper{
	width: 100%;
	padding: 0 0 0 0;
	float: left;
}

.tile .entry-header{
	padding: 0;
}

.tile .entry-title{
	padding: 0;
	margin: 0;
}

.post-icon{
	position: absolute;
	width: 60px;
	height: 60px;
	top: -30px;
	left: -30px;
	background-size: 305px 211px;
}

article.category-boek.tile .post-icon{
	background-image:url('../img/sprite.svg');
	background-position: -61px -150px;
}
.no-svg article.category-boek.tile .post-icon{
	background-image:url('../img/sprite-fallback.png');
}

article.category-filmpje.tile .post-icon{
	background-image:url('../img/sprite.svg');
	background-position: 0 -150px;
}

.no-svg article.category-filmpje.tile .post-icon{
	background-image:url('../img/sprite-fallback.png');
}



/* -----------   Tile gray hover effect   --------- */




/* -----------   Highlight tile   --------- */

article.category-highlight.tile {
	position: relative;
	float: left; 
	background: white;	
	margin: 0 0 0 10%;
	width: 85%;
}

article.category-highlight.tile .thumbnail {
	position: relative;
	float: left; 
	width: 100%;
	height: 400px;
}


article.category-highlight.tile .entry-content {
	position: relative;
	float: left; 
	width: 100%;	
	padding-left: 5%;
	padding-right: 5%;
}


/* -----------   Boek tile   --------- */

article.category-boek.tile .entry-title{

}


/* -----------   Boek tile landscape  --------- */

article.category-boek.tile.landscape {
	position: relative;
	float: left;
	width:100%;
}
article.category-boek.tile.landscape:nth-child(odd){
	clear: left;
}
article.category-boek.tile.landscape .thumbnail{
	position: relative;
	float: left;
	width: 100%;
}
	article.category-boek.tile.landscape .thumbnail img{
		width:100%;
		height:auto;}
article.category-boek.tile.landscape .entry-content{
	position: relative;
	float: left;
	width: 100%;
	padding-left: 10px;
	padding-top: 10px;
	text-align: left;
}

.post-description{
	padding: 10px 0;

}

/* -----------   Boek tile portrait  --------- */

article.category-boek.tile.portrait {
	position: relative;
	float: left; 
	margin: 15% 0 0 10%;
	background: #A7C43B;
	width: 85%;
	height: 100%;
	background: url('../img/gradient-fallback.png') center center no-repeat;
}

article.category-boek.tile.portrait .entry-title{
	position: absolute;
	bottom: 0;
	left:0;
	padding: 5%;
}

article.category-boek.tile.portrait .thumbnail{
	/*background-color: #A7C43B;*/
	padding-top: 130%;
	padding-top: 120%;
}

article.category-boek.tile.portrait .thumbnail img{
	width: 100%;
	margin-top: -120%;
	/*margin-top: -130%;*/
}

article.category-boek.tile.portrait .thumbnail, article.category-boek.tile.portrait .gradient-overlay{
	float: left;
	width: 100%;
	height: 100%;
	top: 0;
	/*left: 0;*/
	padding-top: 120%;
	/*overflow: hidden;*/
}

article.category-boek.tile.portrait .gradient-overlay{
 	position: absolute;
 	top: 0;
}

article.category-boek.tile.portrait .gradient-overlay{
	background: url('../img/gradient-fallback.png') center center no-repeat;
	background-size: cover;
}


/* -----------   Filmpje tile   --------- */

article.category-filmpje.tile {
	position: relative;
	float: left;
	text-align:left;
}



article.category-filmpje.tile .thumbnail{
	width: 100%;
	height: 180px;
	overflow: hidden;
		clear: both;
	float: left;
}

article.category-filmpje.tile .thumbnail img{
	width: 100%;
	height: auto;
	min-height: 180px;
}


article.category-filmpje.tile .entry-title{

}


article.category-filmpje.tile .entry-content {


}

article.category-filmpje.tile .entry-footer{

}

/* -----------   Uitleg tile   --------- */

article.category-uitleg-post.tile {
	position: relative;
	float: left;
	text-align:left;
}



article.category-uitleg-post.tile .thumbnail{
	width: 100%;
	height: 180px;
	overflow: hidden;
		clear: both;
	float: left;
}

article.category-uitleg-post.tile .thumbnail img{
	width: 100%;
	height: auto;
	min-height: 180px;
}


article.category-filmpje.tile .entry-title{

}


article.category-filmpje.tile .entry-content {


}

article.category-filmpje.tile .entry-footer{

}




/* ------------------------------------- */
/* -------   Single page styles   ------ */
/* ------------------------------------- */

.single-filmpje, .single-boek, .type-page{
	background: #fff;
}

.single-filmpje{
	padding-top: 40px;
}

.eerstepagina{
	margin-top: 60px;
}

.single-boek .entry-header, .single-boek .entry-content, .single-boek .entry-footer {
	/*position: relative;*/
	float: left;
	/*width: 100%;*/
}

.single-boek .entry-header{
	margin: 60px 0 0 0;
}


.single-boek .entry-sidebar {
	position: relative;
	float: left;
	width: 100%;
	padding: 0 10%;
	text-align: center;
}

/*
.single-boek .entry-sidebar {
	position: absolute;
	float: left;
	width: 100%;
	top: 60px;
	right: 0;
	padding: 0 10%;
	text-align: center;
}*/

.single-boek .entry-sidebar p{
	margin: 30px 0;
}

.single-filmpje .entry-header, 	.single-filmpje .entry-content,
.single-boek .entry-header, 	.single-boek .entry-content{
	padding: 0 10%; 
}
.quote{
	font-family: 'Noto Serif', serif;
	font-size: 50px;
	line-height: 150%;
}

a.button-bol:link, a.button-bol:hover, a.button-bol:active, a.button-bol:visited{
	/*width: auto;*/
	width: 100%;
	display: inline-block;
	margin: 30px 0;
	padding: 10px 0;
	background-color: #E56FA9;
	color: white;
	text-align: center;
	text-decoration: none;
}


.single-filmpje .entry-footer, .single-boek .entry-footer{
	/*float: left;*/
	width: 100%;
	height: 60px;
	margin-top: 30px;
	line-height: 60px;
	border-top: 1px solid #E6E6E6;

	text-align: center;
	text-transform: uppercase;
}


/* ------------------------------------- */
/* -------   Video scaling fix    ------ */
/* ------------------------------------- */


.single-filmpje .entry-header{
	width: 100%;

}

.single-filmpje .entry-header .video-wrapper{
	position: relative;
}

.single-filmpje .entry-header .ratio{
	display:block;
	width:100%;
	height:auto;
}

.single-filmpje .entry-header iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}



/* ------------------------------------- */
/* ----------   Font styles   ---------- */
/* ------------------------------------- */

.navigatie {
	font-size: 14px;
	letter-spacing: 1px;
}
.navigatie i {
	color: #ffffff;
	display: none;
}
.h1 {
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: 1px;
	padding-bottom: 30px;
}

.h2 {
	font-weight: 900;
	font-size: 23px;
	line-height: 28px;
	letter-spacing: 1px;
	margin: 20px 0;

}

.h3 {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
}
.basistekst {
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kleinetekst {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;

	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.labeltje {
	width: auto;
	font-weight: 900;
	font-size: 11px!important;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	background-color: #ED4A8C;
	color: white;
	padding: 5px 10px;
}

.italic{
	font-style: italic;
}


/* ------------------------------------- */
/* ----------   Other styles   --------- */
/* ------------------------------------- */


.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}



.clearfix:after { 
    content: " ";
 	display:table;
  	clear:both;
}

.indexintro{
	padding-right: 30%;
	background-image: url(../img/bas-indexintro.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 35%;
	margin-bottom: -20px;
}
.indexbanner{
	height:500px;
}


/* ============================================================================================== */
/* =================================                                ============================= */
/* =================================    M e d i a   Q u e r i e s   ============================= */
/* =================================                                ============================= */
/* ============================================================================================== */



/* ===================================================== */
/* ==================   Small screen   ================= */
/* ===================================================== */


@media screen and (min-width: 320px) and (max-width: 632px) {
	
/* -----------   Filmpje tile   --------- */

	article.category-filmpje.tile {
	width: 80%;
	height: 360px;
	margin: 15% 10% 0;
	}
	.quote{
		font-size: 20px;
	}
}




/* ===================================================== */
/* ===============   Medium screen & up   ============== */
/* ===================================================== */


@media screen and (min-width: 633px) {

	.quote{
		font-size: 30px;
	}
	.nieuwsteboekhome h1 {
		font-size: 30px;
		line-height:30px;
	}

/* ------------------------------------- */
/* -----------   Intro block   --------- */
/* ------------------------------------- */

	#intro{
	width: 100%;
	}

	#intro .tekst{
	float: left;
	height: auto;
	height: 300px;
	}

	#intro .portret{
	float: left;
	width: 35%;
	height: 100%;
	height: 300px;
	}



/* ------------------------------------- */
/* --------------   Tiles    ----------- */
/* ------------------------------------- */


/* -----------   Highlight tile   --------- */

	article.category-highlight.tile {
		position: relative;
		float: left; 
		width: 95%;
		max-height: 500px;
		margin: 0 0 0 5%;
		overflow: hidden;
	}

	article.category-highlight.tile .thumbnail {
			width: 50%;
	}


	article.category-highlight.tile .entry-content {
		width: 50%;	

	}


/* -----------   Boeken tile landscape  --------- */

	article.category-boek.tile.landscape {
	float: left;
	width: 95%;
	}

	article.category-boek.tile.landscape .thumbnail{
	width: 50%;
	}

	article.category-boek.tile.landscape .entry-content{
 	width: 50%;
	}

	.post-description{
		padding: 5px 0;
	}


/* -----------   Boeken tile portrait  --------- */


	article.category-boek.tile.portrait {
		margin: 8% 0 0 5%;
		width: 27.3%;

	}


/* -----------   Filmpje tile   --------- */

	article.category-filmpje.tile {
	width: 47.5%;

	}
	article.category-filmpje.tile:nth-child(2n-1){
		margin-right: 5%;
	}
	article.category-filmpje.tile h2{
		font-size:16px;
	}

/* -----------   Uitleg tile   --------- */

	article.category-uitleg-post.tile {
	width: 47.5%;

	}
	article.category-uitleg-post.tile:nth-child(2n-1){
		margin-right: 5%;
	}
	article.category-uitleg-post.tile h2{
		font-size:16px;
	}



/* ------------------------------------- */
/* -----------   Static pages   -------- */
/* ------------------------------------- */


	article.type-page .header-image{

		width: 90%;
		margin: 0 auto;
		padding: 0;
	}

	article.type-page .entry-content{

	}


	.single-boek .entry-header, .single-boek .entry-content {
		width: 66%;
	}


	.single-boek .entry-sidebar {
		/*position: relative;*/
		position: absolute;
		right: 0;
		top: 260px;
		text-align: left;
		width: 34%;	
		padding: 0 5% 0 0;
	}

	.single-filmpje .entry-header, .single-filmpje .entry-content, 
	.single-boek .entry-header, .single-boek .entry-content {
		padding: 0 5%;
	}


}


/* ===================================================== */
/* =================   Big screen & up   =============== */
/* ===================================================== */


@media screen and (min-width: 961px) {
		.quote{
		font-size: 40px;
	}
	.nieuwsteboekhome h1 {
		font-size: 50px;
		line-height:50px;
	}
/* ------------------------------------- */
/* --------------   Header   ----------- */
/* ------------------------------------- */
	

	#page{


	}

	#masthead {


	}



	h1.site-title{
		margin: 20px auto; 

	}


/* ------------------------------------- */
/* -----------   Intro block   --------- */
/* ------------------------------------- */

	
	#intro {
	display: block;
	}


	#intro .portret{
	float: left;
	width: 20%;
	height: 20%;
	padding-top: 20%;
	}
	
	#intro .tekst{
	float: left;
	margin: 0;
	height: auto;
	width: 80%;
	text-align: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	}


/* ------------------------------------- */
/* ------------   Navigation   --------- */
/* ------------------------------------- */

	nav li{
	height: 42px;
	line-height:30px;
	vertical-align: top;
	width:auto;
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
	border-bottom: none;
	}
	nav li:nth-last-child(1), nav li:nth-last-child(2){
		border-bottom: none;
	}
	nav li:hover{

	}

	nav li a  {
		color: #000;
	}



/* ------------------------------------- */
/* -------------   Content   ----------- */
/* ------------------------------------- */


	.main-container{
	margin-top: 100px;

	}


	.single-boek .entry-main{
	position: relative;
	}

	.single-boek .entry-sidebar {
		position: absolute;
		top: 60px;
		right: 0;
		padding: 0 5% 0 0;
	}


/* ------------------------------------- */
/* ---------   Maximum width   --------- */
/* ------------------------------------- */

	.related-posts{
		width: 100%;
		float: left;
	}

	article.type-page,
	.content-area.wrapped,
	.related-posts,
	.tile-wrapper,
	.article-wrapper,
	.single-filmpje .entry-footer h3,
	.single-boek .entry-main, 
	.single-boek .entry-footer h3
	{
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
	clear:both;
	}
	.fl-builder article.type-page{
	max-width: 100%;
	}


/* ------------------------------------- */
/* -----------   Static pages   -------- */
/* ------------------------------------- */

	article.type-page .entry-content{
		width: 60%;	
		margin: 40px auto;

	}
	.fl-builder article.type-page .entry-content{
		width: 100%;	
		margin: 40px auto;

	}

/* ------------------------------------- */
/* --------------   Tiles   ------------ */
/* ------------------------------------- */

	article.category-highlight.tile,
	article.category-filmpje.tile,
	article.category-boek.tile.landscape,
	article.category-boek.tile.portrait{


	}

/* -----------   Filmpje tile   --------- */

	article.category-filmpje.tile {
		width: 30%;
		margin-right: 5%;
	}	
	article.category-filmpje.tile:nth-child(3n){
		margin-right: 0%;
	}

/* -----------   Uitleg tile   --------- */

	article.category-uitleg-post.tile {
		width: 30%;
		margin-right: 5%;
	}	
	article.category-uitleg-post.tile:nth-child(3n){
		margin-right: 0%;
	}


/* -----------   Boek tile landscpae  --------- */

	article.category-boek.tile.landscape {
	width: 45%;
	margin-right: 5%;
	}

/* -----------   Boeken tile portrait  --------- */

	article.category-boek.tile.portrait {
		width: 28.3%;
	}
	

}
@media screen and (min-width: 1200px) {	.navigatie i {
		display: inline;
	}
		.quote{
		font-size: 50px;
	}
	.nieuwsteboekhome h1 {
		font-size: 60px;
		line-height:60px;
	}
}