body {
	margin:0;
	padding:0;
	background-image:url(http://image.naldzgraphics.net/2013/02/13-notes-sheet-free-musical-repeat-seamless-pattern.jpg);
	width:100%;
	height:100%;
}

	body.home {
		background-image: none;
	}
	
	body.home img {
		max-width: 100%;
		width: 100%;
	}

/* Container & Common
----------------------------------------------------------------------------------------------------*/
.inner {
	width: 980px;
	margin: 0 auto;
}

h1 {
	font-family: 'Nothing You Could Do';
	font-weight: 700;
	font-size: 40px;
	margin-left: 250px;
	margin-bottom: 75px;
}

.news-sing4fun h2 {
	font-family: 'Nothing You Could Do';
}

h2 #underline {
	border-bottom: 2px solid #000;
}

h3 {
	text-transform:uppercase;
	margin-left: 250px;
	font-family: 'Patrick Hand';
	font-size: 25px;
	font-weight: bold;	
	width: 55%;
}

h4.quote {
	font-family: 'Crafty Girls';
	font-weight: 700;
	font-size: 25px;
}

.active-1 {
	background: #FFF;
	color: #000 !important;
}

.active {
	background: #FFF !important;
	color: #FF0000 !important;
}

button.cta {
	display: block;
	margin-top: 20px;
	padding: 10px 15px;
	border-radius: 10px;
	border-width: 3px;
	border-color: #e54448;
}

	
	button.cta a {
		text-decoration: none;
		font-weight: bold;
		font-size: 18px;
	}
	
body.home a.cta-more {
	font-family: 'Patrick Hand';
	font-size: 16px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	border-bottom: 2px solid #000;
	padding-bottom: 10px;
	margin-top: 50px;
}

.news-sing4fun .about .description {
	font-family: 'Patrick Hand';
}


/* Header
----------------------------------------------------------------------------------------------------*/
	.header {
		background:#e54448;
		letter-spacing:3px;
		height:100px;
		border-bottom:5px solid #000;
		position:relative;
		color:#FFF;
	}
	
		.logo {
			float:left;
			margin-right:20px;
			top:-25px;
			height:150px;
			width:150px;
			border:5px solid #000;
			border-bottom-right-radius:10px;
		}
		
			body.home .logo {
				display: none;
			}
	
		#hamburger {
			display:none;
		}
		
		.sluiten {
			display: none;
			width: 50px;
			margin-top: 20px;
			right: 45px;
			position: absolute;
			z-index: 3;
		}
		
		#navigatie {
			background:#000;
			text-align:center;
			height:90px;
			padding-top:10px;
			position:absolute;
			bottom:0;
			width:100%;
			z-index: 1;
		}
		
			#navigatiemenu ul {
				display: block !important;
				margin:0;
				list-style-type:none;
				padding-left:10px;
				float:right;
				margin-right:100px;
				z-index: 2;
			}
			
				#navigatiemenu ul li {
					display:inline-block;
					line-height:75px;
				}
				
					#navigatiemenu ul li:last-child {
						margin-right:69px;
					}
					
						#navigatiemenu ul li a {
							font-family: Crafty Girls, cursive;
							text-decoration:none;
							padding:25px;
							color:#FFF;
						}
						
							#navigatiemenu ul li a:hover {
								color: #000;
								background:#FFF;
								-webkit-transition-duration:.5s;
								-moz-transition-duration:.5s;
								-o-transition-duration:.5s;
								transition-duration:.5s;
							}


/* Navigatie overige pagina's - responsive variant
----------------------------------------------------------------------------------------------------*/
		.menu {
			margin-left:1000px;
			margin-top:32px;
			position:absolute;
			display:none;
		}
		
		.close {
			width: 50px;
			margin-top: 20px;
			right: 45px;
			display: none;
			position: absolute;
			z-index: 9999999;
		}
		
		#navigation {
			display: block;
			position:absolute;
			right:6.5%;
		}
		
			#navigation ul {
				margin:0;
				list-style-type:none;
				width: 100%;
				text-align: center;
			}
		
				#navigation ul li {
					display:inline-block;
					line-height:100px;
				}
		
					#navigation ul li:last-child {
						margin-right:69px;
					}
		
						#navigation ul li a {
							font-family: 'Patrick Hand';
							font-size: 15px;
							text-decoration:none;
							padding:11.5px 30px;
							color:#FFF;
							background-color:#000;
							border-bottom-left-radius:10px;
							border-top-right-radius:10px;
							-webkit-transition: .5s;
							-moz-transition: 0.5s;
							-ms-transition: 0.5s;
							transition: 0.5s;
						}
		
							#navigation ul li a:hover {
								color: #ff0000;
								background:#FFF;
								-webkit-transition: 0.5s;
								-moz-transition: 0.5s;
								-ms-transition: 0.5s;
								transition: 0.5s;
							}

/* Content
----------------------------------------------------------------------------------------------------*/
	.content-container {
	}
	
		.content {
			color:#000;
			transition:1.5s;
			max-width:100%; 
			min-height: 100%;
			margin-bottom: 90px;
		}
		
			.content-container > .content {
				position: relative;
				transform: skew(0deg, -4deg);
			}	
			
				.content-container .content .inner {
					transform: skew(0deg, 4deg);
					text-align: center;
				}
				
				.content-container .content .inner.screw {
					margin: 0;
					transform: skew(0deg, 0deg) !important;
				}
			
				.content-container .content section {

					background: #FFF;
				}
				
					.content-container .content section.even {

					}
					
					.content-container .content section.odd {
						background: #F6F6F6;						
					}
					
						.content-container .content section.odd .inner {

						}

		.title {
			color:#000;
			width:220px;
		}


/* CSS van Home
----------------------------------------------------------------------------------------------------*/
/*
.section1 {
	height: 90vh;
	background-image: url(../images/Verkleinde%20Jan%20Moll/jan%20moll%20fotografie--90.jpg);
	background-size: cover;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

span {
	float:left;
	font-family: Nothing You Could Do;
	color:#FFF;
	line-height:75px;
	padding-left:50px;
	font-size:30px;
}

#email {
	width:100px;
	height:100px;
	float:right;
	border-bottom-left-radius: 50px;
}

#facebook {
	width:100px;
	height:100px;
	border-bottom-right-radius: 50px;
}
*/

				.content-container .content div > div {
					position: relative;
					transform: skew(0deg, 4deg);
				}
				
					body.home .content-container .content {
						margin-bottom: 0;
					}
						
						body.home .content-container .content .inner {

						}
	
					.cover {
						transform: none !important;
					}
	
						body.home .section.first {
							position: relative;
							margin: -100px 0 0 0;
							width: 100%;
							height: 750px;
							background-size: cover !important;
						}
						
							body.home .section.first .cover {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background: #000;
								opacity: 0.5;
							}
							
							body.home .section.first .section-content {
								width: 100%;
								height: 100%;
								text-align: center;
								margin-bottom: 0;
							}
							
							body.home .content h1 {
								position: absolute;
								top: 110px;
								left: 50px;
								margin: 0;
								font-family: 'Poiret One';
								color: #fff;
								font-size: 89px;
								text-transform: uppercase;
								z-index: 30;
							}
						
								body.home .content h1 span {
									font-size: 127px;
								}
	
							body.home .section.first .section-content {
								padding: 125px 0;
									
							}
							
								body.home .section.first .text-left,
								body.home .section.first .text-right {
									margin: 0 auto;
									width: 200px;
									display: inline-block;
	/* 								text-align: left; */
									transform: skew(0deg, 0deg) !important;
								}
								
								body.home .section.first .text-right {
								}
	
									body.home .section.first p,
									body.home .section.first h1 {
										font-family: 'Nothing You Could Do';
										color: #fff;
									}
									
										body.home .section.first p {
											margin: 0 auto;
											width: 100%;
											font-size: 20px;
											font-weight: bold;
										}
										
											body.home .section.first .text-left p,
											body.home .section.first .text-right p {
	/* 											width: 200px; */
											}
				
										body.home .section.first h1,
										body.home .section.first h1 span {
											margin: 25px 0;
											padding: 0;
											font-size: 40px;
										}
										
									
											body.home .section.first h1 span {
	
											}
								
							body.home nav {
								float: right;
								margin-right: 50px;
							}
							
								body.home nav ul {
									margin: 15px auto;
									padding: 0;
									text-align: right;
								}
								
									body.home nav ul li {
										display: inline-block;
										padding-right: 20px;
										list-style-type: none;
									}
										
										body.home nav ul li.first {
										}
										
										body.home nav ul li.last {
										}
										
											body.home nav ul li a {
												color: #FFF;
												text-transform: uppercase;
												font-family: 'Patrick Hand';
												font-weight: 100;
												font-size: 18px;
												text-decoration: none;
											}
											
/* social media section on home page */

							body.home .content-container .content .socialmedia { 
								
							}
							
								body.home .content-container .content .socialmedia ul {
									
								}
								
									body.home .content-container .content .socialmedia ul li {
										display: inline-block !important;
										list-style-type: none;
										margin: 15px;
									}
									
										body.home .content-container .content .socialmedia ul li a {
										}
										
											body.home .content-container .content .socialmedia ul li a::nth-child(odd) {
												margin-top: 15px;
											}
										
											body.home .content-container .content .socialmedia ul li a img {
												width: 70px;
												height: 70px;
											}
											
/* about the conductor and pianist */

							body.home .content-container .content .news-sing4fun .about {
								position: relative;
								width: 50%;
								float: left;
							}	
							
								body.home .content-container .content .news-sing4fun.about-stuff {
									height: 50px;
								}
							
								body.home .content-container .content .news-sing4fun .about .dirigent {
									
								}	
								
								body.home .content-container .content .news-sing4fun .about .pianist {
									float: right;
								}			
								
									body.home .content-container .content .news-sing4fun .about .description {
										position: absolute;
										bottom: 20px;
										padding: 10px;
										margin: 0 10px;
										transform: skew(0, 0deg);
										background: #000;
										opacity: 0.5;
										
									}	
									
										body.home .content-container .content .news-sing4fun .about .description p {
											opacity: 1;
											color: #FFFFFF;
											font-size: 18px;
											
										}						
											
											
						
/*
						body.home .about-conductor {
							position: relative;
							max-width: 100%;
							height: 500px;
							background: url(/assets/afbeeldingen/dirigent/johan-bakker.jpg) no-repeat;
							background-size: contain;
							z-index: 100;
						}
						
							body.home .about-conductor .content-about-conductor {
								position: absolute;
								right: 150px;
								width: 350px;
								height: 350px;
								padding: 100px 0 0;
							}
						
								body.home .about-conductor .content-about-conductor h1,
								body.home .about-conductor .content-about-conductor h2 {
									position: relative;
									top: 0;
									margin: 0;
									color: #fff;
									font-size: 25px;
								}
								
									body.home .about-conductor .content-about-conductor h2 {
										font-family: Raleway;
										font-weight: 100;
										font-style: italic;
									}
									
								body.home .about-maria {
									display: none;
								}
								
				
									body.home .about-maria.info {
										display: block;
										position: absolute;
										top: 0;
										right: 0;
										bottom: 0;
										left: 0;
										transform: skew(0, 4deg);
										background: rgba(0,0,0,0.5);
										z-index: 200;
									}
					
									
									
									
								body.home .about-conductor .content-about-conductor a.more-about-conductor {
									position: absolute;
									left: 0;
									right: 0;
									bottom: 0;
									text-align: center;
								}
*/
	
	
	/* News items Sing4fun */
						body.home .content .news-sing4fun {
							position: relative;
							display: inline-block;
							width: 100%;
							margin: 0px auto;
						}
						
							body.home .content .news-sing4fun .inner {
								margin: 100px auto 75px;
								transform: skew(0, 4deg);
							} 
							
								body.home .content .news-sing4fun .inner h2,
								body.home .content .news-sing4fun .inner p {
									font-weight: 700;
									font-size: 30px;
								}
							
									body.home .content .news-sing4fun .inner h2 {
										font-weight: 700;
										font-size: 30px;
									} 
									
									body.home .content .news-sing4fun .inner p {
										font-family: 'Patrick Hand';
										font-weight: 500;
										font-size: 16px;
									} 
									
								body.home .content .news-sing4fun .news-images {
									position: absolute;
									top: -125px;
									right: 0;
									width: 225px;
									height: 100%;
								}
								
									body.home .content .news-sing4fun .news-images img {
										margin: 0 0 0 0;
										padding: 0 0 12px 0;
									}
									

/* CSS van Geschiedenis
----------------------------------------------------------------------------------------------------*/
			#content-geschiedenis {
				margin-top: 75px;
				margin-bottom: 140px;
				margin-left: 250px;
				margin-right: 150px;
				width: 70%;
				font-family: Patrick Hand;
				font-size: 20px;
				display: block;
			}
			
			
				#content-geschiedenis .about {
					float: none;
					
				}

					#content-geschiedenis .about.conductor,
					#content-geschiedenis .about.pianist {
						overflow: auto;
						margin: 50px 0;

					}
					
						#content-geschiedenis .about.conductor a,
						#content-geschiedenis .about.conductor a img,
						#content-geschiedenis .about.pianist a,
						#content-geschiedenis .about.pianist a img {
							float: left;
/* 							width: 150px; */
							height: 200px;
							margin: 0 20px 0 0;
							border-radius: 10px;
						}
						
							#content-geschiedenis .about.pianist a,
							#content-geschiedenis .about.pianist a img {
								float: right;
								margin: 0 0 20px 0;
								background-size: contain;
							}
							
						#content-geschiedenis .about.conductor .description {
							
						}

							#content-geschiedenis .about.conductor .description p,
							#content-geschiedenis .about.pianist .description p {
								margin: 0;
							}
							
								#content-geschiedenis .about.pianist .description {
									text-align: right;
									padding-right: 170px;
								}
				
				.dirigent-s4f {
					margin-top: 0px;
					margin-bottom: 55px;
					background: #EE434D;
					width: 70%;
					margin-left: 15%;
					padding: 15px;
					font-family: Crafty Girls;
					font-size: 20px;
					text-align: center;
				}
			
					/*
					#ontstaan {
						color: #000;
						font-family: Crafty Girls;
						margin-top: 70px;
						margin-left: 250px;
						font-size: 27px;
						font-weight: bold;
						display: none;
					}
					*/
			 
					#content-dirigent {
						margin-top: 75px;
						margin-bottom: 140px;
						margin-left: 250px;
						margin-right: 150px;
						width: 70%;
						font-family: Patrick Hand;
						font-size: 20px;
						display: none;
					}
			
						#mariavdham {
							width: 225px;
							height: 150px;
						}
 

/* CSS van Songs
----------------------------------------------------------------------------------------------------*/
			.songs {
				margin: 0px 0px 0px 250px;
				font-size: 20px;
				font-family: 'Patrick Hand';
			}

/* CSS van Fotoalbum
----------------------------------------------------------------------------------------------------*/
			.photo-day {
				font-family: 'Poiret One';
			}
			
				.datum {
					font-family: 'Patrick Hand';
					border: 2px solid #E54448;
					height: 30px;
					width: 71%;
					margin: 10px 253px;
					text-align: center;
					font-size: 18px;
					line-height: 30px;
					background: #FFF;
				}
				
				.fotoalbum {
					border:2px solid #E54448;
					width:71%;
					height:100%;
					margin: 0 253px;
					margin-top:-12px;
					background:#FFF;
					display: none;
				}
			
					.images {
						display: inline;
						margin: 0.5% 0px 0 1.75%;
						width: 47%;
						height: auto;
					}
					

				

					

/* CSS van Contact
----------------------------------------------------------------------------------------------------*/
			.content #contact p {
				margin-left: 250px;
			}
			
			.content #contact #bestuur-sec p {
				width: 50%;
			}
			
			.content a {
				color: #E54448;
			}
			
			#informatie {
				width: 100%;
				font-family: 'Patrick Hand';
				font-size: 18px;
				margin-top: -28px;
			}
			
				#ledenadministratie {
					float: none;
					width: 50%;
					display: inline-block;
				}
				
/*
				#bestuur-sec {
					float: right;
					width: 50%;
				}
*/
			
				#repetitie {
				    position: relative;
				    margin-left: 254px;
				    font-family: 'Patrick Hand';
				    font-size: 18px;
				}
			
				#maps {
					width: 550px;
					height: 250px;
					border-radius: 10px;
					margin: 60px 0 0 215px;
					padding: 0 0 0 40px;
				}
				

/* Media section - all pages (except home)
----------------------------------------------------------------------------------------------------*/
		div.art-section {
			display: block;
			width: 100%;
		}
		
			div.art-section .left,
			div.art-section .right {
				display: inline-block;
				width: 50%;
			}
			
			div.art-section .left {
				display: inline-block;
				float: left;
			}
			
			div.art-section .right {
				float: right;
			}	
			
			div.art-section .center {
				display: block;
				width: 100%;
			}
			
				div.art-section .center img {
					width: 100%;
				}
			
				div.art-section .left img,
				div.art-section .right img {
					display: block;
					background: #fff200;
					width: 100%;
				}		
					
				
/* Section agenda - Agenda
----------------------------------------------------------------------------------------------------*/			
		div.agenda-item {
			position: relative;
			display: block;	
			margin: 0 20px 30px;
			width: 100%;
			height: 50px;
		}
		
			div.agenda-item .date-indicator {
				
			}
			
			div.agenda-item .date-indicator b,
			div.agenda-item .agenda-description p {
				font-family: "Patrick Hand";
				font-size: 20px;
			}
			
				div.agenda-item .agenda-description p {
					font-size: 16px;
					margin-top: 0px;
					
				}


/* Footer - homepage
----------------------------------------------------------------------------------------------------*/
	footer {
		height: 30px;
		padding: 30px 0 20px 0;
		transform: skew(0, -4deg);
		background: #fff;
		z-index: 200;
		
	}
	
		footer a.dropbox,
		footer a.facebook,
		footer a.mail {	
			display: inline-block;
			width: 30px;
			height: 30px;
			margin: 0 0 0 15px;
		}
		
			footer a.mail {
				width: 31px;
				height: 32px;
			}
		
				footer a.dropbox::after,
				footer a.facebook::after,
				footer a.mail::after,
				footer a.youtube::after {
					content: '';
					position: absolute;
					width: 30px;
					height: 30px;
					background: url(../img/general/dropbox.png);
				}		
			
				footer a.facebook::after {
					background: url(../img/general/fb.png);
				}
				
				footer a.mail::after {
					height: 32px;
					background: url(../img/general/e-mail.png);
				}
				
				footer a.youtube::after {
					height: 32px;
					background: url(../img/general/youtube-icon-small.png) left center;
				}
			
			footer p {
				float: right;
				font-size: 18px;
				padding: 0 12px;
			}
		
/* Footer - other pages
----------------------------------------------------------------------------------------------------*/
#footer {
	background:#000;
	font-family: Crafty Girls, cursive;
	line-height:53px;
	font-weight:700;
	color:#FFF;
	padding-left: 250px; 
	clear:both;
	height:55px;
	position:fixed;
	bottom:0;
	right: 0; 
	left: 0;
}

	#footer a {
		height:100%;
		color:#FFF;
	}

		#socialmedia {
			float: right;
			margin-right: 125px;
		}
		
			#fb, #e-mail, #yt {
				width:55px;
				height:55px;
				float:right;
			}