/* ==|== primary styles =====================================================
   Author: Twien
   ========================================================================== */
body{/* background: #f9f9f9; */ background: #fff;
font-family:  'Chivo','Helvetica', sans-serif;}


/* ======== font shizzle ======== */

ul, li, p{font-family: 'Chivo','Helvetica', sans-serif;font-size:14px;font-weight:normal;color:#000;margin:0px;text-align: left; }
p{padding:0 0px;}
.blok p{margin-top: 0px;}
.top p{text-align: center;}
.info p{text-align: left;}
ul{padding:0 20px;}

.top .right p{text-align: right;}
#scroller{font-family:'Cabin','Helvetica', sans-serif;letter-spacing: normal;font-size: 20px;color:#000;text-align: center;}


a:link,a:visited{color:#666;text-decoration: none;margin:0}
a:hover{color:#fff;text-decoration: none;background-color:#000;margin:0}
a:active{color:#666;text-decoration: none;margin:0}
a:focus { outline: #fe57a1 thin dotted; }

h1{font-family: 'Cabin','Chivo','Helvetica', sans-serif;font-size:120px;color:#000;margin:10px 0 0;text-align: center;font-weight: normal;}

h2{font-family: 'Cabin','Chivo','Helvetica', sans-serif;font-size:18px;font-weight:normal;color:#000;padding:6px 0px ;text-align: left;margin:0}
.right h2{text-align: right;}


.menu h2{padding:1px 0px 2px 0px;margin-bottom: 0px;text-align: center;}

h4{font-family: 'Cabin','Chivo','Helvetica', sans-serif;font-size:23px;font-weight:normal;color:#000;margin:0;padding:6px 0px ;line-height: 23px;}
.right h4{text-align: right;}
.teaser a:hover .desc h4{color:#000;background-color:#fff;text-align: center;margin: 0px;}



.upsidedowntext{margin:0;padding:0;}

h5{font-family: 'Cabin','Chivo','Helvetica', sans-serif;font-size:27px;color:#000;margin:10px 0 0;padding:6px 0px;text-align: right;font-weight:normal;}
.center h5{text-align: center;}
.center h5:hover{color:#000;}

.zwart h1, .zwart h4, .wit h4:hover, .zwartstay h4, .zwart h2, .wit h2:hover, .zwartstay h2, h5:hover{color:#fff;}
.wit h2, .zwart h2:hover, .witstay h2,.wit h4, .zwart h4:hover, .witstay h4{color:#000;}

.bg h2, .bg h3, .bg h4, .bg h5 {}

h6{font-family: 'Chivo','Helvetica', sans-serif;font-size:9px;font-weight:normal;color:#000;margin:0px;text-align: left;}
.soon{display:inline;margin-top: -20px;margin-bottom:10px;text-align: center}
h7{font-family: 'Cabin','Chivo','Helvetica', sans-serif;font-size:11px;color:#666;font-weight: normal;}

/* ======== stilo ======== */

.top{background:#fff;height:auto;margin-bottom: 6px;}
.menu{}
.menu img{}

.blok{}
div.tussen{min-width:100%;margin:auto;min-height:30px;}


/*
.ineenstext h5{visibility: hidden;}
.ineenstext img:hover{visibility: hidden;}
.ineenstext h5:hover{visibility: visible;min-height:230px;background:#fff;}
*/

.teaser a {}
.teaser a:hover {}
/* achtergr v.'t plaatje */
.teaser a img{float:left;display: inline;padding:0px;background:#fff;width:84%; height:auto;margin:0px 8% 0;}
.teaser a .more{visibility: hidden;}
/* hover v.'t plaatje */
.teaser a:hover .desc{position: absolute;display:block;height: 100%;width:100%;	background-color:#fff;}
.teaser a:hover .desc img{width:66%;height:auto;margin:0px 17% 0;border: 0px dotted #eee;}
.teaser a .desc {display: none; }
.teaser a:hover .more {position:absolute;right:0px;bottom:0px;color:#fff;background:#000;padding:25px 10px 5px 6px;text-align:center;width:100%;}	


.moodteaser {margin:0px 0 10px;overflow: hidden;float:left;display: inline;position:relative;text-align:center;z-index: 10;}
.moodteaser p{color:#000;margin-top: 0px;cursor: pointer;text-align: center;}
	
.moodteaser a {color:#000;text-decoration: none;float: left;z-index: 0;}
.moodteaser a:hover {}
/* achtergr v.'t plaatje */
.moodteaser a img{float:left;display: inline;padding:0px;background:#fff;width:84%; height:auto;margin:0px 8% 0px;}

.moodteaser a .more{position:absolute;right:0px;bottom:0px;background:none;padding:0px;width:100%;height:100%;}
.moodteaser a:hover .desc{position: absolute;display:block;font-size: 1.5em;background: #fff;color: white;right: 0px;bottom: 0px;height: 100%;width:100%;}
.moodteaser a:hover .desc img{width:66%;height:auto;margin:0px 17% 0;border: 0px dotted #eee;}
.moodteaser a .desc {display: none; }
.moodteaser a:hover .more { visibility: hidden;}



.teaser2 a {}
.teaser2 a:hover {}
/* achtergr v.'t plaatje */
.teaser2 a img{float:left;display: inline;margin:0 auto ;padding:0px;background:#fff;width:100%;}
/* hover v.'t plaatje */
.teaser2 a:hover .desc{position: absolute;display:block;height: auto;width:auto;background-color:#fff;}
.teaser2 a:hover .desc img{width:100%;}
.teaser2 a .desc {display: none; }
.teaser2 a:hover .more {position:absolute;right:0px;bottom:0px;color:#fff;background:#000;padding:25px 10px 5px 6px;text-align:center;width:100%;}



.bg{padding:0px;width: auto;margin: 0px 0 0;}
.bg{padding-bottom:6px;}

.bordor img{border:thin solid #eee;}

.wit, .zwart:hover, .witstay{background-color: #fff;}

.zwart, .wit:hover, .zwartstay{background-color: #000;}
.bg img{margin:0; padding:0;height:auto;width:100%;}
.big img:hover{width:102%;height:auto;margin:-2% 0 0 -2%;}

.tothetop img {margin:-33px 0 0 0px;padding:0px;height: 30px; width: 30px;display:block;float:right;}
.tothetop img:hover{width:35px;height:auto;}

.so img{width:70%; height:auto;margin:7px 0px 0px 30%;display:block;float:left;border:thin solid #eee;}



.recent img{width:65%; height:auto;margin:0px 0px 3px 35%;display:block;float:left;border:1px solid #eee;}
.recent p{margin:0px;}

.maxheight{max-height: 800px; /* overflow-y: scroll; */}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
 /* 
@media only screen and (min-width: 480px) {
 Style adjustments for viewports 480px and over go here 

}*/
 /*
@media only screen and (min-width: 768px) {
  Style adjustments for viewports 768px and over go here 
  


}*/

/* ----------- */
@media only screen
and (max-width: 960px) {
/* Styles */
 p, h2, ul, li, h3, h4, h5, #scroller,.menu h2, a , .top p {font-size: 90%;}
 .blok h4{font-size: 18px;padding:0px;}
 h1{font-size:90px;margin:0;}
 h6{font-size:70%;}
 hr {margin:2px 0 2px;}
 div.tussen{min-width:100%;margin:auto;min-height:10px;}
 .mood .bg{padding:3px;}
 .bg{padding:3px;}
 
/*
	Variable Grid System (Fluid Version).
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/

	Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
	width:6.333%;
}

.container_12 .grid_2 {
	width:14.667%;
}

.container_12 .grid_3 {
	width:23.0%;
}

.container_12 .grid_4 {
	width:31.333%;
}

.container_12 .grid_5 {
	width:39.667%;
}

.container_12 .grid_6 {
	width:48.0%;
}

.container_12 .grid_7 {
	width:56.333%;
}

.container_12 .grid_8 {
	width:64.667%;
}

.container_12 .grid_9 {
	width:73.0%;
}

.container_12 .grid_10 {
	width:81.333%;
}

.container_12 .grid_11 {
	width:89.667%;
}

.container_12 .grid_12 {
	width:98.0%;
}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
	padding-left:8.333%;
}

.container_12 .prefix_2 {
	padding-left:16.667%;
}

.container_12 .prefix_3 {
	padding-left:25.0%;
}

.container_12 .prefix_4 {
	padding-left:33.333%;
}

.container_12 .prefix_5 {
	padding-left:41.667%;
}

.container_12 .prefix_6 {
	padding-left:50.0%;
}

.container_12 .prefix_7 {
	padding-left:58.333%;
}

.container_12 .prefix_8 {
	padding-left:66.667%;
}

.container_12 .prefix_9 {
	padding-left:75.0%;
}

.container_12 .prefix_10 {
	padding-left:83.333%;
}

.container_12 .prefix_11 {
	padding-left:91.667%;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
	padding-right:8.333%;
}

.container_12 .suffix_2 {
	padding-right:16.667%;
}

.container_12 .suffix_3 {
	padding-right:25.0%;
}

.container_12 .suffix_4 {
	padding-right:33.333%;
}

.container_12 .suffix_5 {
	padding-right:41.667%;
}

.container_12 .suffix_6 {
	padding-right:50.0%;
}

.container_12 .suffix_7 {
	padding-right:58.333%;
}

.container_12 .suffix_8 {
	padding-right:66.667%;
}

.container_12 .suffix_9 {
	padding-right:75.0%;
}

.container_12 .suffix_10 {
	padding-right:83.333%;
}

.container_12 .suffix_11 {
	padding-right:91.667%;
}








/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
}




/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}