/*

Author: As Is Webdesign

*/

/* html5reset.css - 01/11/2011 */

html, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    min-width: 320px;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration:  line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}
/* html elements*/
a{
	text-decoration: none;
	color: #666666;
}
body{
	min-width: 320px;
	font-family: 'quicksandregular','Helvetica Neue', Helvetica, arial, sans-serif;
	color: #333333;	
}
footer{

}
h1{
 	font-family: 'bebas_neueregular','Helvetica Neue', Helvetica, arial, sans-serif;
 	color: #698AB3;
}
h1 a{
	color: #456287;
}
html{
	-webkit-font-smoothing: antialiased;
}

/* structural id's ===================================================================== */
#content{
}

/* structural classes ================================================================== */
.fluidImage{
	max-width: 75%;
	height: auto;
	margin: auto;
}
.grafieScript{
	font-family: 'leckerlioneregular';
	font-size: 0.9em;
}
.horizontalHeader h1{
	
}
.hideOverflow{
	overflow: hidden;
}

/* headerLogo ================================================================== */

/* id's */
#header{
	position: fixed;  
    left: 0;  
    top: 0;  
    margin-left: 2%;
    z-index: 100;	
	overflow: hidden;
	background-color: rgba(255,255,255, .6);
}

/* classes */
.headerLogo{
	text-align: center;
	font-size: 1.8em;

}
.headerLogo a{
	
}
.headerLogo h1{
	color: #698AB3;
}

/* navigatie ================================================================== */

/* id's */

#navItem_1{
	text-align: center;
	background-color: #698AB3;
}
#navItem_1_hidden{
	text-align: center;
	background-color: #698AB3;	
	display: none;
}
#navItem_2{
	text-align: center;
}
#navItem_2_hidden{
	text-align: center;
	background-color: #698AB3;	
	display: none;	
}
#navItem_3{
	text-align: center;
	color: #ffffff;
	background-color: #698AB3;	
}
#navItem_3_hidden{
	text-align: center;
	color: #ffffff;
	background-color: #698AB3;
}
#navItem_4{
	text-align: center;
}

/* classes */

a.navLink:visited{
	color: #ffffff;
}
a.navLink:hover{
	font-family: 'quicksanddash','Helvetica Neue', Helvetica, arial, sans-serif;
	font-size: 1.7em;
	color: #ffffff;
}
a.navLink:link{
	color: #ffffff;
}
a.navLink{
	font-family: 'bebas_neueregular','Helvetica Neue', Helvetica, arial, sans-serif;
	font-size: 2em;
	color: #ffffff;
}
.fb-like-box,
.fb-like-box span,
.fb-like-box span iframe[style] {
    width: 100% !important;
}


/* topnavigatie ================================================================*/

/* id's */

#topNavigatie{
	margin-left: auto;
	margin-right: auto;
	z-index: 101;
	background-color: rgba(255,255,255, .6);
}
#topNavItem_1{
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}
#topNavItem_2{
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}
#topNavItem_3{
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}
#topNavItem_4{
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 0.4em;
	padding-bottom: 0.4em;	
}

/* classes */

.topNavLink{
	line-height: 0.8em;
}
a.topNavLink:visited{
	color: #698AB3;
}
a.topNavLink:link{
	color: #698AB3;
}
a.topNavLink:hover{
	font-family: 'quicksanddash','Helvetica Neue', Helvetica, arial, sans-serif;
	font-size: 1.3em;
	line-height: 0.8em;
	color: #698AB3;
}
a.topNavLink{
	font-family: 'bebas_neueregular','Helvetica Neue', Helvetica, arial, sans-serif;
	font-size: 1.5em;
	color: #698AB3;
}

/* homeScreen ================================================================== */

/* id's */
#homeScreen{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}
#homeScreenRow_1{
	width: 100%;
	overflow: auto;
}
#homeScreenRow_1_1{
	float: left;
}
#homeScreenRow_1_2{
	float: left;
}
#homeScreenRow_1_3{
	float: left;
}
#homeScreenRow_2{
	width: 100%;
	overflow: hidden;
}
#homeScreenRow_2_1{
	float: left;
	overflow: hidden;
}
#homeScreenRow_2_2{
	float: left;
	
}
#homeScreenRow_2_3{
	float: left;
	color: #ffffff;
	background-color: #698AB3;
}
#homeScreenRow_2_4{
	float: left;
}
#homeScreenRow_3{
	width: 100%;
	overflow: auto;
}
#homeScreenRow_3_1{
	float: left;
	overflow: hidden;
}
#homeScreenRow_3_2{
	float: left;
}
#homeScreenRow_3_3{
	float: left;
	color: #ffffff;
	background-color: #698AB3;
}

/* classes */

/* biografie ================================================================== */

/* id's */
#biografie{
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 2em;

}
#biografieHeader{
	margin-top: 0.8em;
}
#fotoBiografie{
	background-image: url('../images/fotojulestestbio.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
}
#biografieTekst{
}


/* classes */


/* grafie ================================================================== */

/* id's */
#grafie{
	clear: both;
	margin-top: 2em;
	margin-bottom: 2em;
}
#bibliografieHeader{
	padding-top: 6em;
	width: 100%;
}
#discografieHeader{
	padding-top: 6em;
	width: 100%;
}
#videografieHeader{
	padding-top: 6em;
	width: 100%;
}
#bibliografieContent{
	float: left;
}
#discografieContent{
	float: left;
}
#videografieContent{
	float: left;
	
}


/* classes */
.titelGrafieItem{
	font-size: 1.4em;
	font-family: 'quicksandbold';
}
.datumUitgifte{
	font-family: 'quicksanditalic';
}
.bibliografieColumn{
	float: left;
	width: 24.25%;
	text-align: center;
	margin-right: 1.00%;
}
.bibliografieColumnLast{
	margin-right: 0;
}
.bibliografieColumnWrapper{
	clear: both;
	margin-bottom: 2%;
}
.hiddenBibliografieItem{
	clear: both;
	display: none;
}
.bibliografieImages{
	max-width: 60%;
	max-height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	cursor: pointer;
}
.bibliografieImagesActive{
	max-width: 60%;
	max-height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 1em;
	opacity: 0.5;
	cursor: pointer;
}
.discografieColumn{
	float: left;
	width: 24.25%;
	text-align: center;
	margin-right: 1.00%;
}
.discografieColumnLast{
	margin-right: 0;
}
.discografieColumnWrapper{
	clear: both;
	margin-bottom: 2%;
}
.hiddenDiscografieItem{
	clear: both;
	display: none;
}
.discografieImages{
	max-width: 60%;
	max-height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	cursor: pointer;
}
.discografieImagesActive{
	max-width: 60%;
	max-height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	margin-bottom: 1em;
	opacity: 0.5;
	cursor: pointer;
}
.discografieType{
	color: #698AB3;
}
.videografieColumn{
	float: left;
	width: 32.66%;
	text-align: center;
	margin-right: 1.00%;
}
.videografieColumnLast{
	float: left;
	width: 32.66%;
	text-align: center;
}
.videografieColumnWrapper{
	clear: both;
	margin-bottom: 2%;
	width: 100%
}

/* agenda ================================================================== */

/* id's */
#agenda{
	clear: both;
}
#agendaContent{
	float: left;
	margin-top: 2em;
	margin-bottom: 2em;
	display: block;
}
#agendaHeader{
	padding-top: 4em;
}
#showInfoHeader{
	float: left;
	padding-top: 6em;
}


/* classes */
.agendaRegel{
	overflow: auto;
	color: #698AB3;
}
.agendaRegel a{
	color:#456287;
	font-family: 'quicksandbold';
}
.agendaDatum{
	float: left;
	width: 16.30%;
	padding-top: 0.2em;
	margin-right: 1%;
	border-bottom: 1px dashed #333333;
}
.agendaType{
	float: left;
	width: 23.30%;	
	padding-top: 0.2em;
	margin-right: 1%;
	border-bottom: 1px dashed #333333;
}
.agendaVenue{
	float: left;
	width: 16.80%;	
	padding-top: 0.2em;
	margin-right: 1%;
	border-bottom: 1px dashed #333333;
}
.agendaPlaats{
	float: left;
	width: 18.80%;
	padding-top: 0.2em;
	margin-right: 1%;
	border-bottom: 1px dashed #333333;
}
.agendaLand{
	float: left;
	width: 9.40%;	
	padding-top: 0.2em;
	margin-right: 1%;
	border-bottom: 1px dashed #333333;
}
.agendaTicketLink{
	float: left;
	width: 9.40%;	
	padding-top: 0.2em;
	border-bottom: 1px dashed #333333;
}
.hiddenShow{
	display: none;
}

/* boekingen ================================================================== */

/* id's */

#boekingen{
	margin-left: 2%;
	margin-right: auto;
	clear: both;
}
#boekingen p{
	font-size: 1.2em;
}
#boekingen a{
	font-family: 'quicksanddash','Helvetica Neue', Helvetica, arial, sans-serif;
}
#boekingen a:hover{
	font-family: 'quicksandregular','Helvetica Neue', Helvetica, arial, sans-serif;
}
#boekingenHeader{
	padding-top: 6em;
}

/* classes */

/* footer ================================================================== */

footer{
	background-color: white;
	width: 96%;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
}
footer p{
}
#copyrightFooter{
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}


/* id's */

/* classes */

/* responsitivity ==================================================================================== */

/* embedded video respositivity*/
.js-video {
	height: 0;
	max-width: 600px;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding-top: 25px;
	padding-bottom: 67.5%;
}
.js-video.vimeo {
	padding-top: 0;
}
.js-video.widescreen {
	padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

/* media queries--------------------------------------------------------------->>>> */


@media only screen and (max-width: 790px) {

	#homeScreenRow_2_2{
		display: none;
	}
	#homeScreenRow_2_3{
		display: none;
	}
	#homeScreenRow_2_4{
		display: none;
	}
	#navItem_3_hidden{
		display: block;
	}
	#navItem_2_hidden{
		display: block;
	}
	#navItem_1_hidden{
		display: block;
	}
	#fb-like-box-hidden{
		display: block;
	}
	#navItem_1{
		margin-left: 0.4em;
	}
	.hide_790{
		display: none;
	}
	#fb-like-box-hide-790{
		display: none;
	}
	
}

@media only screen and (min-width: 791px) {
	#homeScreenRow_2_2{
		display: block;
	}
	#homeScreenRow_2_3{
		display: block;
	}
	#homeScreenRow_3_3{
		display: block;
	}
	#navItem_3_hidden{
		display: none;
	}
	#navItem_2_hidden{
		display: none;
	}
	#navItem_1_hidden{
		display: none;
	}
	#fb-like-box-hidden{
		display: none;
	}
}

@media (max-width: 767px) {
	.js-video {
		padding-top: 0;
	}
}

@media only screen and (max-width: 640px) {
	.agendaRegel{
		font-size: 0.5em;
	}
} 


@media only screen and (max-width: 500px){
	body{
		font-size: 0.75em;
	}
	#agendaHeader{
		padding-top: 4em;
	}
	#bibliografieHeader, #discografieHeader, #videografieHeader{
		padding-top: 6em;
	}
	.bibliografieColumn{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.bibliografieColumnLast{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.discografieColumn{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.discografieColumnLast{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.videografieColumn{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.videografieColumnLast{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1%;
	}
	.horizontalHeader h1{
		font-size: 1.9em;
	}
	.navLink a{
		font-size: 1.4em;
	}
	.topNavLink a{
		font-size: 1.2em;
	}
	.topNavLink a:hover{
		font-size: 0.9em;
	}
		
}

@media only screen and (max-width: 480px){
	
	.js-video {
	height: 0;
	position: relative;
	overflow: hidden;
	clear:both;
	margin-bottom: 10px;
	padding-top: 25px;
	padding-bottom: 67.5%;
	}
	.js-video.vimeo {
		padding-top: 0;
	}
	.js-video.widescreen {
		padding-bottom: 57.25%;
	}
	.js-video embed, .js-video iframe, .js-video object, .js-video video {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
	}

}


/* @font-faces ========================================================================= */

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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'bebas_neueregular';
    src: url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}



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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'quicksanddash';
    src: url('fonts/quicksand_dash-webfont.svg#quicksanddash') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}

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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'quicksandregular';
    src: url('fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}

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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'quicksandbold';
    src: url('fonts/quicksand-bold-webfont.svg#quicksandbold') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}

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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'quicksanditalic';
    src: url('fonts/quicksand-italic-webfont.svg#quicksanditalic') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}


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

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
    font-family: 'leckerlioneregular';
    src: url('fonts/leckerlione-regular-webfont.svg#leckerlioneregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
}