@media screen and (max-height: 900px) {

	/* minder hoog scherm, laptop?, iets minder massale hoofdknoppen in menu: */
	#menu #nav ul {
		font-size: 3em;
	}

}

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

	body {
		font-size: 1em;
		line-height: 1.6;
	}

	/* menu */
	#menu {
		width: 100%;
		max-width: 100%;
		background-size: 600px 270px;	
	}
	#menu #menu-content {
		min-height: auto; 
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow-y: auto; 
		-webkit-overflow-scrolling: touch;	
	}
	#menu:before {
		display: none;
	}
	#menu .border {
		display: none;
	}
	#menu #logo {
		top: 20px;
	}
	#menu #logo svg {
		max-width: 80px;
		float: right;
	}
	#menu #switch /* menu uitklap state */ {
		top: 20px;
		right: auto;	
		left: 20px;
		width: 40px;
		height: 40px;
		background-size: 26px 26px;	
	}
	#menu.off #switch /* beginstate */ {
		top: 20px;
		right: auto;
		left: -70px;
		background-size: 26px 26px;	
	}
	#menu #nav,
	#menu.off #nav {
		top: auto;
		position: relative;
		-webkit-transform: translateX(0%) translateY(0);
		transform: translateX(0%) translateY(0);
		padding-top: 150px;
	}
	#menu #nav ul {
		font-size:12vw;
	}
	#menu #nav ul li.ticketlink a:after {
		display: none;
	}
	#menu #lists {
		position: relative;
		bottom: auto;
		left: auto;
		padding: 60px 30px;
		padding-top: 0;
	}
	#menu #lists ul,
	#menu #lists #mailstage {
		width: 100%;
		margin-top: 1em;
	}
	#menu #lists #mailstage {
		margin-left: 0;
		font-size: 1.5em;
		margin-top: 2em;
	}
	#menu #mailstage {
		position: static;
		width: 100%;
		padding: 60px 0;
	}
	#menu #mailstage:before {
		display: none;
	}




	/* sponsor____balk */
	#sponsor-balk {
		height: 80px;
		width: 100%;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.06);
	}
	#sponsor-balk .border {
		display: none;
	}
	#sponsor-balk #sponsor-logos {
		left: 0px;
		height: 80px;
		width: 130px;
		-webkit-transform: translateX(0) translateY(-50%);
		transform: translateX(0)  translateY(-50%);	
		border-right: 2px solid rgba(0,0,0,0.04);		
	}
	#sponsor-balk #sponsor-logos img {
		width: 80px;
		margin-top: 15px;
		margin-left: 25px;
	}
	#sponsor-balk #ticket-button {
		display: none;
	}
	#sponsor-balk.off {
		transform: none;
		-webkit-transform: none;
	}





	/* normal(er) content */
	#all {
		width: 100%;
		float: none;
	}
	#all.off {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
	#all .page_content {
		padding: 30px 30px;
		padding-bottom: 50px;
		margin: 0;
		background:transparent!important;
	}

	/* artiestenpage meer ruimte indien 2 fotos */
	#all .page_content.morespace {
		padding-top: 110px;
	}

	#all .page_content .page_text {
		padding: 0px 0;
		width: 100%;
		font-size: 0.9em;
	}	
	#all .page_content h1 {
		margin-left: 0;
		font-size: 10vw;
		text-align: left;
		max-width: 100%;
		word-break: normal;
	}
	#all .page_content .page_text em {
		text-align: left;
	}
	#all .page_content div.back-up {
		margin: 20px auto;
	}	
	#all .page_content .page_text .videos {
		width: 100%;
		margin-top: 2em;
	}
	#all .page_content .page_text .videos a {
		width: 100%;
	}
	#all .page_content.album .fotoalbum .caption,
	.videos a .caption {
		font-size: 0.8em;
	}
	#all .media_header {
		width: 100%;
		left: auto;
		top: auto;
		position: relative;
		margin-top: 80px;
		z-index:1;
	}
	#all .media_header.zindex { z-index:3; }

	#all .media_header img.banner {
		height: auto;
		width: 100%;
	}
	#all .media_header img.profile {
		width: 200px;
		margin-left: -100px;
		bottom: -80px;
	}
	#all .media_header span.caption {
		bottom: 0;
		left: 0;
		padding: 50px 30px;
	}
	#event-header .border.
	#all .media_header .border {
		bottom: 0;
		height: 30px; 
	}
	#event-header .border svg,
	#all .media_header .border svg {
		height: 100%; width: auto;
	}
	#all .media_header.spacer {
		height: 80px;
	}
	#all .media_header .arrow {
		display: none;
	}
	#all .media_header.event {
		/* ivm img.profile */
	}
	#event-header .arrow {
		display: none;
	}



	/* events */
	#choices .dropdown ul.event-items li {
		font-size: 1.2em;
	}
	#choices .dropdown .label {
		font-size: 1.2em;
		margin: 0 5px;
	}

	#choices {
		top: 0px;
		white-space: nowrap;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 0 20px;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 50px;
	}
	#choices.sticky {
		width: 100%;
		height: 50px;
		top: 0px;
	}
	#event-header .arrow {
		width: 50px;
		height: 50px;
		margin-left: -25px;
		bottom: 50px;
	}
	/* the mob replace-the-video image */
	#event-header .mobile-image {
		margin-top: 80px;
		width: 100%;
		box-sizing: border-box;
	}
	#event-header .mobile-image img {
		display: block;
		width: 100%;
	}
	#event-header:before {
		content: "";
		width: 100%;
		height: 160px;
		position: absolute;
		left: 0;
		top: 0;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0+100;Neutral+Density */
		background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */		
	}

	/* loader */
	#loader { 
		margin-left: -60px!important;
	}

	/* fotooos */
	#all .page_content.album .fotoalbum a {
		width: 31.333%;
	}
	#all .page_content.album .fotoalbum.overview a {
		width: 98%;
	} 

	/* sponsorpagina */
	#all .page_content #sponsors .logo {
		width: 48%;
		height: 100px;
	}

	/* posters @ gesch */
	#all .page_content .posters a {
		width: 48%;
	}

	/* social @ home */
	#socialcontent {
		margin-top: 0px;
	}
	#socialcontent .items .holder {
		width: 90%;
		margin: 0 auto;
	}
	#socialcontent .items .holder .item  {
		width: 100%;
		margin: 10px 0;
		text-align: left;
		line-height: 1.3;
	}
	#socialcontent .items .holder .item .media-msg {
		height: 60px;
		width: 60px;
		float: left;
		margin-right: 2em;
		margin-top: 2px;
		border-radius: 3px;
		margin-left: -3px;
	}
	#socialcontent .items .holder .item .media-msg img {
		min-width: auto;
		min-height: auto;
		width: 110px;
	}
	#socialcontent .border {
		top: -20px;
		height: 30px; 
	}
	#socialcontent .border svg {
		height: 100%; width: auto;
	}



	#contact form input.submit {
		width: 100%!important;
		margin-left: 0!important;
	}
	

}