/*
 /////////////////////////////
 // Fix problems navigation //
 /////////////////////////////
*/
@media screen and (min-width: 1230px){
	#navigation {
		display: block !important;
	}
	
		#navigatiemenu {
			display: block !important;
		}
		
		.close, .sluiten {
			display: none !important;
		}
}

@media screen and (max-width: 1230px) {
	
	/* social media section on home page */
	body.home .content-container .content .socialmedia { 
		
	}
	
		body.home .content-container .content .socialmedia ul {
			display: inline-block;
			width: 100%;
			height: auto;
			text-align: center;
		}
		
			body.home .content-container .content .socialmedia ul li {
				position: relative;
				left: auto;
				display: inline-block !important;
				width: auto !important;
				margin: 0 auto;
			}
			
				body.home .content-container .content .socialmedia ul li a {
				}
				
					body.home .content-container .content .socialmedia ul li a::nth-child(odd) {
						margin-top: 15px;
					}

	
	/* Style alle pagina's */	
	/* Responsive menu Home pagina */		
	#hamburger {
		display:block;
		width:80px;
		float: right;
		margin-right:30px;
		position: relative;
		z-index: 99999;
	}
	
	#navigatiemenu {
		display: none;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.75);
		position: fixed; 
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	
		#navigatiemenu ul {
			display: block;
			width: 100vw;
			height: 100vh;
			-webkit-transform: translateX(0%);
			-moz-transform: translateX(0%);
			-ms-transform: translateX(0%);
			-o-transform: translateX(0%);
			transform: translateX(0%);
		}
		
			#navigatiemenu li {
				width: 200px !important;
				position: relative;
			}
			
				#navigatiemenu li a {
					font-size: 18px;
					left: 50%;
				}
			
					#navigatiemenu li a:hover {
						color: #e61717 !important;
					}
	
	/* Responsive menu (Fotoalbum, Geschiedenis, Contact) */
	.menu {
		display:block;
		right:50px;
		margin-top:25px;
		height:40px;
		z-index: 999999;
	}
	
	#navigation {
		display: none;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.75);
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	
		ul {
			display:block;
			padding: 0;
			width: 100vw;
			height: 100vh;
		}
	
			li {
			    display: block !important;
			    width: 200px !important;
			    float: none;
			    margin-top: 10px;
			    padding: 0;
			    position: relative;
			    left: 50%;
			    -webkit-transform: translateX(-50%);
			    -moz-transform: translateX(-50%);
			    -ms-transform: translateX(-50%);
			    -o-transform: translateX(-50%);
			}
	
				li a {
				    text-align: center;
				    position: relative;
				    border-radius: 0px !important;
				    background: transparent !important;
				    /* left: 50%; */
				    /* transform: translateX(50%); */
				}

	#footer {
		position: fixed;
		padding-left: 30px;
	}
	
		#socialmedia {
			margin-right: 0px;
		}
		
		/* Style Home pagina */
		#email {
			width:50px;
			height:50px;
			border-bottom-left-radius: 10px;
		}
	
		#facebook {
			width:50px;
			height:50px;
			border-radius: 0px;
		}
		
		.logo {
			height:95px;
			width:100px;
			border-bottom:none;
			border-radius:0;
		}
	
	#geschiedenis {
		width:100%;
		border-bottom:5px solid #E54448;
		margin-right:10px;
	}
	
	#title-text {
		margin:30px 15px;
	}
	
	.content {
		margin:0 auto;
		margin-bottom: 200px;
		padding-bottom: 55px;
	}
	
	/* Style Fotoalbum pagina */
	h1 {
		margin:20px auto 50px 30px;
	}
	
	.photo-day {
		margin-left:-253px;
		width:100%;
	}
	
		.datum {
			width:100%;
			border-left:none;
			border-right:none;
		}
		
		.fotoalbum {
			width:100%;
			border-left:none;
			border-right:none;
		}
	
	/* Style geschiedenis pagina */	

	#content-geschiedenis {
		margin-left: 30px;
		margin-right: 100px;
/* 		margin-bottom: -140px; */
		width: 90%;
		display: block;
	}
	
		.dirigent-s4f {
			background: #EE434D;
			width: 100%;
			margin-left: -30px;
			margin-top: 200px;
			margin-bottom: -201px;
			padding: 15px;
			font-family: Crafty Girls;
			text-align: center;
		}

/*
	#ontstaan {
		color: #000;
		font-family: Crafty Girls;
		margin-top: 270px;
		margin-left: 30px;
		margin-right: 30px;
		font-size: 22px;
		font-weight: bold;
	} 
*/

	#content-dirigent {
		margin-top: 250px;
		margin-bottom: 0px;
		margin-left: 30px;
		margin-right: 150px;
		width: 90%;
		font-family: Patrick Hand;
		font-size: 20px;
		display: none;
	}
	
	/* Style Songs pagina */
		.songs {
			margin: 0px 0px 0px 30px;
			font-size: 20px;
			font-family: Crafty Girls, cursive;
		}	
		/* 	Style contact pagina */
			.title h1 {
				margin-left: 40px;	
			}
			
			.content #contact p {
				width:80%;
			}
			
			#informatie {
				width: 100%;
			}
			
				#ledenadministratie {
					margin-left: -210px;
					width: 40%;
				}
				
				#bestuur-sec { 
					margin-right: 150px;
				}
		
		#repetitie {
		    margin-left: 40px;
		    margin: 0 0 50px 40px;
		    font-family: 'Patrick Hand';
		}	
		
		#maps {
			margin-left:0;
			margin-top: 0;
	/* 		width:100%; */
			margin-bottom: -206px;
			border-radius: 0px;
		}
}

@media screen and (max-width: 980px) {
	
	.inner {
		width: 100%;
	}
	
	h4.quote {
		font-size: 25px;
	}
	
	body.home .content-container .content .news-sing4fun .about .description p {
		font-size: 14px;
	}
}

@media screen and (max-width: 736px) {
	
	body.home .content-container .content .news-sing4fun .about .description {
		display: none;
	}
	
	
	/* Responsive menu Home pagina */		
	#navigatiemenu ul {
		display: block;
		width: 100vw;
		height: 100vh;
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
	}
	
		#navigatiemenu li {
			width: 200px !important;
			position: relative;
			font-size: 15px;
			margin-top: -20px;
			left: 50%;
		}
	
			#navigatiemenu ul:first-child {
				margin-top: 35px;
			}
	
				#navigatiemenu > li {
				    display: block !important;
				    width: 200px !important;
				    float: none;
				    margin-top: -50px;
				    padding: 0;
				    position: relative;
				    left: 50%;
				    -webkit-transform: translateX(-50%);
				    -moz-transform: translateX(-50%);
				    -ms-transform: translateX(-50%);
				    -o-transform: translateX(-50%);
				    text-align: center;
				}
				
					#navigatiemenu li:first-child {
						margin-top: 15px;
					}
				
						#navigatiemenu li a:hover {
							color: #df1d1d !important;
						}
	
	
	/* 	Style geschiedenis pagina */
	.ontstaan-s4f {
		  margin-left: 0px;
		  margin-top: 650px;
		  margin-bottom: -200px;
		  background: #EE434D;
		  width: 93%;
		  padding: 15px;
		  font-family: Crafty Girls;
		  text-align: center;
	}
	
		#ontstaan {
			color: #000;
			font-family: Crafty Girls;
			margin-top: 280px;
			font-size: 13px;
			font-weight: bold;
			display: none;
		}
		 
		#content-geschiedenis {
			margin-top: 75px;
			font-family: Patrick Hand;
			display: none;
/* 			margin-bottom: -140px; */
			display: block;
		}
	
}

@media screen and (max-width: 700px) {
	/* sytle contact pagina */
	#informatie {
		width: 100%;
	}
	
		#ledenadministratie {
			display: block;
			width: 100%;	
		}
		
		#bestuur-sec {
			margin-left: -215px;
			float: left;
			width: 100%;	
		}
		
		#repetitie {
		}

	#maps {
/* 		margin-top: 150px; */
		width: 80%;
	}
}

/* Fix kleine problemen als paragrafen width en heights */
@media screen and (max-width: 570px) {
	/* Style Navigatie (Fotoalbum, Geschiedenis, Contact) */
	/* Responsive menu */
	.menu {
		display:block;
		right:50px;
		margin-top:25px;
		height:40px;
		z-index: 999999;
	}
	
	#navigation {
		display: none;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.75);
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	
		#navigation ul {
			display:block;
			padding: 0;
			width: 100vw;
			height: 100vh;
		}
	
			#navigation li {
			    display: block !important;
			    width: 200px !important;
			    float: none;
			    margin-top: -50px;
			    padding: 0;
			    position: relative;
			    left: 50%;
			    -webkit-transform: translateX(-50%);
			    -moz-transform: translateX(-50%);
			    -ms-transform: translateX(-50%);
			    -o-transform: translateX(-50%);
			    text-align: center;
			}
	
				#navigation li:first-child {
					margin-top: 15px;
				}
	
					#navigation li a {
					    text-align: center;
					    position: relative;
					    border-radius: 0px !important;
					    background: transparent !important;
					    /* left: 50%; */
					    /* transform: translateX(50%); */
					}
	
	
	/* Style Home pagina */
	body.home .content .news-sing4fun .inner  {
		margin: 40px auto 45px;
	}
	
	h4.quote {
		font-size: 15px;
	}
	
	h2#underline {
		font-size: 21px;
	}

	
	#email {
		width:30px;
		height:30px;
		border-bottom-left-radius: 10px;
	}

	#facebook {
		width:30px;
		height:30px;
		border-radius: 0px;
		border-bottom-right-radius: 10px;
	}
	
	span {
		float:left;
		margin-left: -25px;
		font-family: Nothing You Could Do;
		color:#FFF;
		line-height:75px;
		padding-left:50px;
		font-size:20px;	
	}
	
	/* Responsive menu Home pagina */		
	#navigatiemenu {
		display: none;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.75);
		position: fixed; 
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}
	
		#navigatiemenu ul {
			display: block;
			width: 100vw;
			height: 100vh;
			left: 50%;
			-webkit-transform: translateX(0%);
			-moz-transform: translateX(0%);
			-ms-transform: translateX(0%);
			-o-transform: translateX(0%);
			transform: translateX(0%);
		}
		
			#navigatiemenu ul:first-child {
				margin-top: 35px;
			}
	
				#navigatiemenu li {
					width: 200px !important;
					position: relative;
					font-size: 15px;
					margin-top: -10px;
				}
	
	
					#navigatiemenu li a:hover {
						color: #df1d1d !important;
					}
	
	/* Style Fotoalbum pagina */
	.images {
		display: block;
		width: 100%;
		margin: 5px 0 0 0;
	}
	
	/* style songs pagina */
	ol {
		margin-left: 90px;
		display: block;
		position: relative;
	}
	
	/* Style Geschiedenis pagina */
	#ontstaan {
		font-size: 20px;
		margin-right: 30px;
	}
	
	#content-dirigent {
		margin-right: 30px;
	}
		
	/* sytle contact pagina */
	#informatie {
		width: 100%;
	}
	
		#ledenadministratie {
			display: block;
			width: 100%;
		}
		
		#bestuur-sec {
			width: 100%;	
		}
	
		.content #contact p {
			width: 70%;
		}
	
		#repetitie {
		}
	
	#maps {
/* 		margin-top: 200px; */
/* 		margin-bottom: -210px; */
	}
}

/* contact paragraph fix */
@media screen and (max-width: 400px) {
	.content #contact p {
		width:70%;
	}
	
	#repetitie {
	}
}

/*
/////////////////////////
// mobile phone format //
/////////////////////////
*/
@media screen and (max-width: 380px) {
	/* Style Home pagina */
	
	
	.logo {
		height:95px;
		width:100px;
		border:none;
		border-radius:0;
		border:5px solid #000;
		border-right:5px solid #000;
		border-bottom:none;
	}
	
	#geschiedenis {
		width:100%;
		margin-top:-30px;
		border-bottom:5px solid #E54448;
	}
	
	#flip {
		margin-left:-180px;
	}
	
	#content-home {
		margin-left:15px;
		margin-right:20px;
	}
	

	/* Style Fotoalbum pagina */
	h1 {
		margin-left:30px;
	}
	
	.photo-day {
	}
	
	.datum {
		width:100%;
		border-left:none;
		border-right:none;
	}
	
	.fotoalbum {
		width:100%;
	}
	
	/* Style Songs pagina */
	ol {
		margin-left:10px;
		width:50%;
	}
	
	/* 	Style geschiedenis pagina */
	.dirigent-s4f {
		margin-top: 70px;
		margin-bottom: -200px;
		margin-left: 0px;
		background: #EE434D;
		width: 91%;
		padding: 15px;
		font-family: Crafty Girls;
		text-align: center;
	}
	
/*
	#ontstaan {
		color: #000;
		font-family: Crafty Girls;
		margin-top: 270px;
		font-size: 13px;
		font-weight: bold;
		display: none;
	}
*/
	 
	#content-geschiedenis {
		margin-top: 75px;
		font-family: Patrick Hand;
		display: block;
	}
	
	/* Style Contact pagina */
	ol {
		margin-left: 0px;
		margin-top: 50px;
		display: block;
	}
	
	ol:nth-child(3) {
		margin-left: 0px;
		position: relative;
		display: block;
	}
	
	ol:nth-child(4) {
		margin-left: 0px;
		margin-top: 50px;
		position: relative;
		display: block;
	}
	
	ol ul a {
		text-decoration:none;
	}
	
	a {
		text-decoration:none;
		color:#578ED2;
	}
	
	.content h3 {
		margin-left:250px;
	}
	
	.content #contact p {
		width:50%;
	}
	
	#maps {
		margin-left:0;
/* 		margin-top: 130px; */
/* 		width:100%; */
		height:250px;
	}
}




/* Responsive CSS van Home
----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1300px) {
	body.home nav ul {
		height: 100%;
	}
	
		body.home nav ul li {
			display: inline !important;
			left: 0;
		}
		
	body.home .content {
		margin: 0;
		padding: 0;
	}		
		
		body.home .content .news-sing4fun .inner {
			width: 90%;
			padding: 0 5%;
		}
		
			body.home .content .news-sing4fun .news-images {
				right: 60px;
			}
}

@media screen and (max-width: 900px) {
	body.home .content .news-sing4fun .news-images {
		right: 50px;
	}
}

@media screen and (max-width: 875px) {
	
/* Tijdelijke code op website Sing4fun */
		
		body.home .section.first .section-content {
			padding: 200px 0;
				
		}
		
			body.home .section.first .text-left,
			body.home .section.first .text-right {
				margin: 0 auto;
				width: 150px;
				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 {
					color: #fff;
				}
				
					body.home .section.first p {
						margin: 0 auto;
						width: 100%;
						font-size: 15px;
						font-weight: bold;
					}
					
						body.home .section.first .text-left p,
						body.home .section.first .text-right p {
							width: 150px;
						}

					body.home .section.first h1,
					body.home .section.first h1 span {
						margin: 25px 0;
						font-size: 30px;
					}
					
						body.home .section.first h1 {
							left: auto;
						}
						
/* Tijdelijke code op website Sing4fun */
	
	body.home .content h1 {
		font-family: 'Poiret One';
		width: 100%;
		font-size: 75px;
	}
	
		body.home .content h1 span {
			font-family: 'Poiret One';
			font-size: 125px;
			margin-left: 
		}
	
	body.home nav {
		margin: 0 auto;
	}
	
		body.home nav ul {
			height: 100%;
			text-align: center;
		}
		
			body.home nav ul li {
				padding-right: 18px;
			}
				
				
	body.home .content .news-sing4fun .inner {
		width: 90%;
		transform: skew(0, 4deg);
	}
	
		body.home .content .news-sing4fun .inner p {
			width: 100%;
		}
		
		body.home .content .news-sing4fun .news-images {
			display: inline-block;
			position: relative;
			width: 100%;
			top: 50px;
			right: 0;
			transform: skew(0, 0);
		}
		
			body.home .content .news-sing4fun .news-images img {
				display: inline;
				width: 45%;
			}
			
				body.home .content .news-sing4fun .news-images img:nth-child(2),
				body.home .content .news-sing4fun .news-images img:nth-child(4) {
					margin-left: 20px;
				}
	
	body.home footer {
/* 		padding: 10% 0 20px 0; */
	}
}


@media screen and (max-width: 575px) {
	body.home .content h1 {
		font-size: 50px;
	}
	
		body.home .content h1 span {
			float: none;
			font-size: 100px;
			margin-left: -50px;
		}
		
	body.home nav {
	}
	
		body.home nav ul {
			height: 100%;
		}
		
			body.home nav ul li {
				display: block !important;
				left: 50%;
				padding: 0;
			}
				
				body.home nav ul li.first {
				}
				
				body.home nav ul li.last {
				}
				
					body.home nav ul li a {
						font-size: 20px;
					}
					
/* About Maria van den Ham */
	body.home .about-conductor {
		position: relative;
		max-width: 100%;
		height: 500px;
		background: url(/img/images%20jan%20moll/jan%20moll%20fotografie--54.jpg) no-repeat left center;
		background-size: cover;
		z-index: 100;
	}
	
		body.home .about-conductor .content-about-conductor {
			position: relative;
			width: 90%;
			right: 0;
			margin: 0;
			padding: 100px 0 0 20px;
		}
	
			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-conductor .content-about-conductor a.more-about-conductor {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				text-align: center;
			}
		
/* News Sing4funnunspeet */
	body.home .content .news-sing4fun .news-images img {
		display: inline-block;
		width: 80%;
		margin-left:0;
	}
		
		body.home .content .news-sing4fun .news-images img:nth-child(2),
		body.home .content .news-sing4fun .news-images img:nth-child(4) {
			float: right;
		}
		
}

@media screen and (max-width: 420px) {
	body.home .content-container .content .socialmedia ul li a img {
		width: 50px;
		height: 50px;
	}
	
	body.home .content h1 {
		font-size: 30px;
	}
	
		body.home .content h1 span {
			font-size: 70px;
		}
}