html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	box-sizing: border-box;
}
a:visited { color: inherit;}
a {text-decoration:none; color:white;}

@font-face {
	font-family: 'Akkurat';
	src: url('../fonts/Akkurat-Std-Bold/Akkurat-Std-Bold.eot');
	src: url('../fonts/Akkurat-Std-Bold/Akkurat-Std-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Akkurat-Std-Bold/Akkurat-Std-Bold.woff') format('woff'),
	url('../fonts/Akkurat-Std-Bold/Akkurat-Std-Bold.ttf') format('truetype'),
	url('../fonts/Akkurat-Std-Bold/Akkurat-Std-Bold.svg') format('svg');
	font-weight: 700;
}

@font-face {
	font-family: 'Akkurat';
	src: url('../fonts/Akkurat-Std-Light/Akkurat-Std-Light.eot');
	src: url('../fonts/Akkurat-Std-Light/Akkurat-Std-Light.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Akkurat-Std-Light/Akkurat-Std-Light.woff') format('woff'),
	url('../fonts/Akkurat-Std-Light/Akkurat-Std-Light.ttf') format('truetype'),
	url('../fonts/Akkurat-Std-Light/Akkurat-Std-Light.svg') format('svg');
	font-weight: 300
	}

@font-face{
	font-family: 'Akkurat';
	src: url('../fonts/Akkurat-Std-Regular/Akkurat-Std-Regular.eot');
	src: url('../fonts/Akkurat-Std-Regular/Akkurat-Std-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Akkurat-Std-Regular/Akkurat-Std-Regular.woff') format('woff'),
	url('../fonts/Akkurat-Std-Regular/Akkurat-Std-Regular.ttf') format('truetype'),
	url('../fonts/Akkurat-Std-Regular/Akkurat-Std-Regular.svg') format('svg');
}

@font-face{
	font-family: 'Stanley';
	src: url('../fonts/Stanley-Regular/Stanley-Regular.eot');
	src: url('../fonts/Stanley-Regular/Stanley-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Stanley-Regular/Stanley-Regular.woff') format('woff'),
	url('../fonts/Stanley-Regular/Stanley-Regular.ttf') format('truetype'),
	url('../fonts/Stanley-Regular/Stanley-Regular.svg') format('svg');
}

@font-face{
	font-family: 'Stanley';
	src: url('../fonts/Stanley-Regular-Italic/Stanley-Regular-Italic.eot');
	src: url('../fonts/Stanley-Regular-Italic/Stanley-Regular-Italic.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Stanley-Regular-Italic/Stanley-Regular-Italic.woff') format('woff'),
	url('../fonts/Stanley-Regular-Italic/Stanley-Regular-Italic.ttf') format('truetype'),
	url('../fonts/Stanley-Regular-Italic/Stanley-Regular-Italic.svg') format('svg');
	font-style: italic;
}

@font-face{
	font-family: 'Tstar mono round';
	src: url('../fonts/TSTAR-Mono-Round-Bold/TSTAR-Mono-Round-Bold.eot');
	src: url('../fonts/TSTAR-Mono-Round-Bold/TSTAR-Mono-Round-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/TSTAR-Mono-Round-Bold/TSTAR-Mono-Round-Bold.woff') format('woff'),
	url('../fonts/TSTAR-Mono-Round-Bold/TSTAR-Mono-Round-Bold.ttf') format('truetype'),
	url('../fonts/TSTAR-Mono-Round-Bold/TSTAR-Mono-Round-Bold.svg') format('svg');
	font-weight: 700;
}

@font-face{
	font-family: 'Tstar mono round';
	src: url('../fonts/TSTAR-Mono-Round-Reg/TSTAR-Mono-Round-Reg.eot');
	src: url('../fonts/TSTAR-Mono-Round-Reg/TSTAR-Mono-Round-Reg.eot?#iefix') format('embedded-opentype'),
	url('../fonts/TSTAR-Mono-Round-Reg/TSTAR-Mono-Round-Reg.woff') format('woff'),
	url('../fonts/TSTAR-Mono-Round-Reg/TSTAR-Mono-Round-Reg.ttf') format('truetype'),
	url('../fonts/TSTAR-Mono-Round-Reg/TSTAR-Mono-Round-Reg.svg') format('svg');
}

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


body, html {
	margin: 0;
	padding: 0;
	font-family: 'Akkurat', sans-serif;
	font-size: 16px;
	line-height: 1.2em;
	width: 100%;
	
}
body {
	width: 100%;
	height: 100%;
	background-color: white;
	color: white;
	overflow-x: hidden;
}
body.overzicht {
	background-color: white;
	color: black;
}

h1.title {
	pointer-events: none;
    font-size: 22px;
    line-height: 1.25em;
    margin: 0;
    font-weight: 400;
    font-family: 'Akkurat', sans-serif;
}
h2.sub-title {
	pointer-events: none;
	margin: 0;
	font-size: 22px;
    line-height: 1.25em;
    margin-bottom: 1.5rem;
    font-weight: 300;
    font-family: 'Akkurat', sans-serif;
}

img.loaded {
  opacity: 0.8;
  transition: opacity 0.3s;
}

img.unload {
  opacity: 0;
}

header {
	display: none;
}
.nav-bar {
	margin: 1.5rem 1rem;
	position: relative;
	z-index:1000;
}
.nav-bar .hamb {
	width: 25px;
	height: 22px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 0.4rem;
	float: right;
	cursor: pointer;
}
.nav-bar .hamb.close.white {
	background-image: url('../images/close-white.svg');
}
.nav-bar .hamb.close.black {
	background-image: url('../images/close-black.svg');
}
.nav-bar .hamb.open.black {
	background-image: url('../images/hamb-black.svg');
}

.nav-bar .logo{
	height: 40px;
	width: 100px;
	background-image: url('../images/logo_horizontal.svg');
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	position: relative;
}

.btn {
	border: 1px solid white;
	font-family: 'Tstar mono round', monospace;
	padding: 1em 1em 0.8rem;
	font-size: 0.8rem;
	line-height:1em;
	text-transform: uppercase;
	background:none;
	color:white;
	transition: background-color 0.15s ease;
	cursor: pointer;
}
.btn:hover {
	background-color: rgba(255,255,255,0.5);
}

.npt {
	border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    -webkit-appearance:  none;
    font-family: 'Tstar mono round', monospace;
    color: white;
    opacity: 1;
    font-size: 1rem;
    display: inline-block;
}
.npt.nrm {
	font-family: inherit;
	font-weight: 300;
}
input:focus, textarea:focus {
    outline: none;
    opacity: 1;
}
input::placeholder { 
    color: rgba(255,255,255,0.6);
    opacity: 1; 
}
input:-ms-input-placeholder,
input::-ms-input-placeholder { 
    color: rgba(255,255,255,0.6);
}
input::-webkit-calendar-picker-indicator{
    display: none;
}
input[type="date"]::-webkit-input-placeholder{ 
    visibility: visible !important;
    display:block;
    color: rgba(255,255,255,0.6);
}
input[type="date"]{min-width:95%;  -webkit-appearance: textfield;
    -moz-appearance: textfield;}


@media all and (min-width: 30rem){
	.nav-bar {
		margin: 1.5rem 2rem;
	}
	h1.title {
	    font-size: 28px;
	    line-height: 1.25em;
	}
	h2.sub-title {
		font-size: 28px;
	    line-height: 1.25em;
	}
	.btn {font-size:0.9rem;}
}
@media all and (min-width: 48rem){
	.nav-bar .hamb {
		width: 28px;
		height: 25px;
	}


}
@media all and (min-width: 60rem){
	
	.nav-bar {margin: 2.5rem 2.5rem;}
	.npt{
		font-size: 1.125rem;
	}

}
@media all and (min-width:1400px){
	h1.title {
	   	font-size: 33px;
    	line-height: 1.25em;
	}
	h2.sub-title {
		font-size: 33px;
    	line-height: 1.25em;
	}
	#navigation .nav-bar .logo,
	#upload .nav-bar .logo,
	#about .nav-bar .logo{
		display: block;
	    position: absolute;
	    background-image: url(../images/logo_vertical.svg);
	    height: 120px;
	    width: 50px;
	    top: 50vh;
	    transform: translateY(-100px);
	}
}



/* entry */

#submits {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: -1;

	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}
.entry {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	opacity: 0;
	overflow:hidden;
}
.entry.show {display: block;}
.entry.fadeOut{z-index: 99;}
.entry.fadeIn{z-index: 100;}

.entry .entr-img {
	position: absolute;
	width:100%;
	height:100%;
	z-index: 0;
	top: 0;
	left: 0;
	background-size:cover;
	background-position: 50% 50%;
} 
.entry .entr-img.focus{
	opacity:1;
	transform: scale(1);
	-webkit-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-moz-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-o-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-ms-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	transition: all 2s cubic-bezier(.02,.82,.29,.98);
}
.blurred .entry .entr-img.focus{
	-webkit-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-moz-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-o-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-ms-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	transition: all 4s cubic-bezier(.02,.82,.29,.98);
}
.blurred .entry .focus {
	opacity:0;
	transform: scale(1.05);
}

.entry .entr-img.blur {
	filter: blur(8px);
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);
	transform: scale(1.05);
	opacity:1;
}
.blackoverlay{
	position: absolute;
    left: 0;
    pointer-events: none;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,0.2);
    -webkit-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-moz-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-o-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	-ms-transition: all 2s cubic-bezier(.02,.82,.29,.98);
	transition: all 2s cubic-bezier(.02,.82,.29,.98);
}
.blurred .blackoverlay {
	opacity: 1;
	-webkit-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-moz-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-o-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	-ms-transition: all 4s cubic-bezier(.02,.82,.29,.98);
	transition: all 4s cubic-bezier(.02,.82,.29,.98);
}


.entry .info {
	position: relative;
	z-index: 1;
	font-size:0.8rem;
	line-height:1.4em;
}
@media all and (min-width: 30rem){
	.entry .info {
		font-size:0.9rem;
	}
}

#submits .hamb {
	opacity: 1;
	transition: all 0.2s ease-out;
}
#submits .hamb.hide {
	opacity: 0;
	transition: all 4s ease-out;
}

/* navigation */

#navigation .page-title {
	display: none;
}


#navigation {
	width: 100%;
	position: relative;
	width: 100%;
	padding-left: 0rem;
	padding-right: 0rem;
	padding-top: 1rem;
	margin: 0 auto;
	height: 100vh;
}
#navigation ul {
	width:100%;
}
#navigation ul li {
	font-family: 'Tstar mono round', monospace;
	font-size: 0.9rem;
	line-height: 1em;
	padding: 0.8rem 0;
	font-weight: 700;
	border-top: 1px solid rgba(255,255,255,0.3);
	cursor: pointer;
	padding-left: 1rem;
}




#navigation .menu li:hover {
	/* text-decoration: underline; */
}
#navigation .menu li:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.3);
}

#navigation .menu li img {
	margin-left: 4px;
	margin-right: 1rem;
	transition: margin 0.15s ease;
}
#navigation .menu li:hover img {
	margin-right: 1.3rem;
}

#navigation nav {
	margin-top: 1rem;
}
#navigation .location-nav {
	position: fixed;
	bottom: 0;
	border-top: 1px solid rgba(255,255,255,0.3);
}
#navigation .location-nav li {
	display: inline-block;
	padding: 0;
	border: none !important;
}
#navigation .location-nav li img{
	margin: 0;
}
#navigation .location-nav li#loc-prev{float: left;position: relative; z-index: 2;}
#navigation .location-nav li#loc-next{float: right;position: relative; z-index: 2;}
#navigation .location-nav li#loc-start{
	text-decoration: underline;
	position:absolute;
	width: 100%; 
	bottom:0; left:0;
	height: 50px;
	font-size: 0.9rem;
	padding: 1rem 50px;
	text-align: center;
	vertical-align: middle;
	z-index: 1;
}


#navigation.loading #map{opacity: 0;}
#navigation.loading ul.menu .open-about{opacity: 0;}
#navigation.loading ul.menu .open-upload{opacity: 0;}
#navigation.loading ul.menu .open-overview{opacity: 0;}
#navigation.loading .nav-bar .title{opacity: 0;}
#navigation.loading .nav-bar .sub-title{opacity: 0;}


#navigation #map{opacity: 1; transition: opacity 1s cubic-bezier(.1,.6,.1,1) 0.7s}
#navigation ul.menu .open-about{opacity: 1; transition: opacity 0.2s ease-out 0.2s}
#navigation ul.menu .open-upload{opacity: 1; transition: opacity 0.2s ease-out 0.3s}
#navigation ul.menu .open-overview{opacity: 1; transition: opacity 0.2s ease-out 0.4s; color:white;}
#navigation .nav-bar .title{opacity: 1; transition: opacity 0.2s ease-out 0s}
#navigation .nav-bar .sub-title{opacity: 1; transition: opacity 0.2s ease-out 0s}




@media all and (min-width: 48rem){
	#navigation .page-title {
		display: block;
	}
	#navigation {
		width: 100%;
	}
	#navigation ul {
		width: 185px;
		margin-left:2rem;
		display: inline-block;
		position: relative;
		z-index: 100;
	}
	#navigation ul li{
		padding-left: 0;
	}
	#navigation ul li:first-child {
		border-top: none;
	}
	#navigation .menu li:last-child {
		border-bottom: none;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	#navigation .location-nav {
		display: none;
	}

}
@media all and (min-width: 60rem){
	#navigation ul {
		width: 220px;
	}
}
@media all and (min-width: 1400px){
	#navigation ul li {
		font-size: 1rem;
	}
}







/* submit */

#upload {}
#upload .form-block {
	position:absolute;
	width:100%;
	min-height:100vh;
	top:5rem;
	left:0;
	display: table;
}
#upload .form-block > .content {
	display:table-cell;
	vertical-align: middle;
}
#upload .field-wrapper {
	margin: 0 1rem;}
#upload h3 {
	margin-top: 2rem;
	font-size: 1.125rem;
	font-weight: 400;}
#upload .subinfo {
	font-size: 0.7rem;
	opacity: 0.66;
	margin-bottom: 1rem;
	margin-top: 0.3rem;
	line-height: 1.4em;
	font-weight: 300;}


/* image */
#upload #upload1 {
	position: relative;}
#upload #upload1 > .content {
	background-color: rgba(255,255,255,0.3);
	display: table;
	text-align: center;
	width: 100%;
	height: 80vw;
	max-height:300px;}
#upload #upload1 input {cursor:pointer;}
#upload #upload1 > .content:hover .label .btn {background-color:rgba(255,255,255,0.3);}
#upload #upload1 input{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	z-index: 12;}
#upload #upload1 .label{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;

	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 10;}
#upload #upload1 .label .info{
	font-size: 0.7rem;
	width: 100%;
	line-height: 1.4em;
	font-weight: 300;
	position: absolute;
	top: 50%;
	margin-top: 2rem;}
#upload #upload1 .label .info p{
	margin: 0 auto;
	max-width: 350px;}
#upload #upload1.succes .label .info {display: none;}


/* date time */
#upload .datetime span {
	border-bottom: 1px solid rgba(255,255,255,0.5);
	padding: 0.3rem 0;
	margin-right: 1.5rem;
	display: inline-block;
	margin-bottom: 0.5rem;}
#upload .datetime .date input{width: 140px;}
#upload .datetime .time input{width: 80px;}

#upload .datetime.nodate .date input {color: rgb(211,98,92)}
#upload .datetime.notime .time input {color: rgb(211,98,92)}


/* location */
#upload .location .select {
	font-size: 0;
	border: 1px solid white;
	margin-top:1.5rem;
	max-width: 515px;}
#upload .location .select input{
	display: none;}
#upload .location .select label {
	font-size: 0.8rem;
	cursor: pointer;
	width:8.333%;
	display: inline-block;
	text-align: center;
	line-height: 30px;}
#upload .location input{-webkit-appearance: none;}
#upload .location input:checked+label {background-color: rgba(255,255,255,0.2);}
#upload .location input:hover+label {background-color: rgba(255,255,255,0.2);}


/* personal-info */
#upload .personal-info input {
	width:100%;
	-webkit-appearance: none;
	background:none;
	border:none;
	border-bottom:1px solid rgba(255,255,255,0.5);
	font-size:1rem;
	padding:0.4rem 0rem;
	margin-top:0.3rem;
}



#upload .field-wrapper.end {
	margin-top:2rem;
	margin-bottom:4rem;
}
#upload .field-wrapper.end .btn.disabled1{
	pointer-events: none;
	opacity: 0.3;
}
#upload .field-wrapper.end .btn.disabled2{
	pointer-events: none;
	opacity: 0.3;
}
#upload .field-wrapper.end .btn.disabled3{
	pointer-events: none;
	opacity: 0.3;
}

#upload .end .btn {
	margin-top:2rem;
}



@media all and (min-width: 50rem){
	#upload {font-size:0;}
	#upload .form-block {
		top: 0;}
	#upload .file-wrapper{
		margin-bottom: 1rem;
	}
	#upload .form-block > .content{
		padding-top: 7rem;
		padding-bottom: 7rem;
	}
	#upload #upload1{
		width:50%;
		padding-right:1rem;
		display: inline-block;
		vertical-align: middle;}
	#upload #upload2 {
		width:50%;
		padding-left:1rem;
		display: inline-block;
		vertical-align: middle;}
	#upload #upload1 .content{
		max-height:1000px;
		height:47vw;}
	#upload #upload2 div:first-child h3{
		margin-top:0;}
	#upload .end .subinfo {
		width:80%;
		display: inline-block;}
	#upload .end .btn {
		float:right;
		margin-top: 0;}
	#upload .field-wrapper.end {
		margin-bottom: 0;
	}
}
@media all and (min-width:60rem){
	#upload #upload1 .label .info {
		font-size: 0.9rem;
	}
	#upload h3 {
		font-size: 1.25rem;
	}
	#upload .subinfo {
		font-size: 0.7rem;
	}
	#upload .personal-info input.name {
		width: 42%;
		margin-right: 2rem;
	}
	#upload .personal-info input.surname {
		width: 42%;
	}
	#upload .personal-info input.mail {
		width: 70%
	}
	.npt.nrm {
		font-size: 1.125rem;
	}
}

@media all and (min-width: 75rem){
	#upload #upload1 .content{
		height:500px;
	}
	#upload #upload1 {padding-right:1.5rem;}
	#upload #upload2 {padding-left:1.5rem;}
	#upload .field-wrapper{
		padding: 0 2rem;
		max-width:1200px;
		margin:0 auto !important;
	}
}

/* about */


#about .page-title {
	margin-top: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	max-width: 1200px;
	margin: 0 auto;
}

#about .body {
	padding-left: 1rem;
	padding-right: 1rem;
	font-family: 'Akkurat', sans-serif;
	font-size: 0.9rem;
	line-height: 1.7em;
	max-width: 1200px;
	margin: 0 auto;
}
#about .body p {margin-bottom:1rem;}
#about .body p:empty {display:none;}
#about .body a{text-decoration: underline;}
#about .logos {
	font-size: 0;
	max-width: 1200px;
	padding: 0 1rem;
	margin: 3rem auto 3rem;
}
#about .logos a {
	width: 120px;
	padding-right: 1.5rem;
	display: inline-block;
	vertical-align: bottom;
}
#about .logos a div {
	display: inline-block;
	vertical-align: bottom;
	opacity: 0.5;
	width: 100%;
	padding-top: 50%;
	transition: opacity 0.15s ease;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#about .logos a div.hhdh{background-image: url('../images/logo-hhdh.svg');}
#about .logos a div.lagelanden{background-image: url('../images/logo-lagelanden.svg');}
#about .logos a div.westfriesmuseum{background-image: url('../images/logo-westfriesmuseum.svg');}

#about .logos a:hover div {
	opacity: 1;
}

@media all and (min-width: 30rem){
	#about .logos a {width: 135px;}
	#about .page-title,
	#about .body,
	#about .logos {
		padding-left: 2rem;
		padding-right: 2rem;
		font-size: 1rem;
	}
	#upload .location .select label {
		line-height:40px;
	}
	#upload .field-wrapper {
	margin: 0 2rem;}
}
@media all and (min-width: 48rem){
	#about .logos{margin-top: 2rem;}
	#about {
		width: 100%;
		height: 100%;}
	#about .wrapper{
		position: absolute;
		top: 0;
		left: 0;
		min-height: 100vh;
		width: 100%;
		display: table;
		z-index: 0;}
	#about .content{
		padding: 7rem 0 7rem;
		display: table-cell;
		vertical-align: middle;}
	#about .body p{
		column-count: 2;
		column-gap: 1.5rem;
		font-size:0.8rem;
		line-height:1.6em;}
	#about .body,
	#about .logos,
	#about .page-title{width: 85%;}
	#about .logos a{width:100px;}
}
@media all and (min-width: 64rem){
	#about .page-title,
	#about .logos{
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
	#about .body {
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
	#about h2.sub-title{
		margin-bottom: 2.5rem;
	}


	#about .body p{
		font-size:1rem;
		line-height:1.6em;}
	#about .body,
	#about .logos,
	#about .page-title{width: 95%;}
	#about .logos a{width:120px;}
}
@media all and (min-width: 75rem){
	#about .logos {margin-top:4rem;}
	#about .body p{
		font-size:1.1rem;
		line-height:1.6em;}
	#about .body,
	#about .logos,
	#about .page-title{width: 100%;}
	#about .logos a{width:130px;}
}



#main {
	/* position: relative; */
}

#navigation,
#about,
#upload
 {
	display: none;
	position: absolute;
	width:100%;
	padding-top:0rem;
}
#submits > .nav-bar {z-index:1010 !important}
#submits .nav-bar {position: relative;z-index: 1000;}
#submits .info{display: block}

#submits.blurred {
	pointer-events: none;
}
#submits.blurred .hamb {
	display:none;
}
#submits.blurred .info {
	display:none;
}
#submits .info {
	color:black;
	font-family: 'Tstar mono round', monospace;
	font-weight:700;
}
#submits.loading .info,
#submits.loading .hamb {
	display:none;
}

#submits .left, #submits .right {display: inline-block; margin-right:1rem;}
#submits .left p{display:inline-block;}
#submits .right p{display:inline-block;}



body.overzicht {
	background-color: white;
	color: black;
}

body.overzicht nav {
	padding: 0;
	position:fixed;
	z-index: 100;
	top:0;
	left:0;
	background-color:white;
	width:100%;
	border-bottom: 1px solid rgba(0,0,0,0.1);}
body.overzicht nav .nav-bar > a {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
}
body.overzicht nav .loc-title {
    font-size: 0;
    height: 32px;
    font-weight: 700;
    font-family: 'Tstar mono round';
    border: 1px solid black;
    display: inline-block;
}
body.overzicht nav .loc-title p {
    font-size: 0.9rem;
    line-height: 30px;
    display: inline-block;
    padding: 0 0.8rem;}
body.overzicht nav .loc-title p:first-child {
    border-right: 1px solid black;
    font-size: 0.8rem;}
body.overzicht nav .loc-title .dropdown {
	cursor: pointer;
	padding: 0 0.5rem 0 0.8rem;
}    
body.overzicht nav .loc-title .dropdown img {
	margin-left:0.25rem;
	width:9px;
}
body.overzicht nav .loc-title .dropdown img.rotate{
	transform: rotate(180deg) translateY(2px);
}
body.overzicht nav .loc-title .dropdown:hover {
	background-color: rgba(0,0,0,0.1);
}
body.overzicht nav input {
    display: none;
}
body.overzicht nav input {
    -webkit-appearance: none;
}
body.overzicht nav .select {
	display:none;
    font-size: 0;
    border-bottom: none;
    margin-left:1px;
    max-width: 400px;}
body.overzicht nav label {
    font-size: 0.8rem;
    cursor: pointer;
    width: 10%;
    max-width: 30px;
    border:1px solid black;
    margin-top:-1px;
    margin-left:-1px;
    /*border-bottom:1px solid black;*/
    box-sizing: content-box;
    display: inline-block;
    text-align: center;
    line-height: 30px;
}
body.overzicht nav input{-webkit-appearance: none;}
body.overzicht nav input:checked+label {background-color: rgba(0,0,0,0.1);}
body.overzicht nav input:hover+label {background-color: rgba(0,0,0,0.1);}

@media all and (min-width: 30rem){
/*	body.overzicht nav {
	padding: 1.2rem 2rem;}*/
}
@media all and (min-width: 48rem){
	body.overzicht nav {
		width:100%;
		padding:1.2rem 5% 1.2rem;
	}
	body.overzicht nav .wrapper {
		max-width:1440px;
		margin: 0 auto;
	}
}

.overv-loc {
	margin: 0rem 1rem 4rem;
	font-size: 0;
}

.overv-loc .loc-title{
	font-size: 0;
	height: 32px;
	font-weight: 700;
	font-family: 'Tstar mono round';
	margin-bottom: 0rem;
	border: 1px solid black;
	display: inline-block;
}
.overv-loc .loc-title p {
	font-size: 0.9rem;
	line-height: 30px;
	display: inline-block;
	padding: 0 0.8rem;
}
.overv-loc .loc-title p:first-child {
	border-right: 1px solid black;
	font-size: 0.8rem;
}
.overv-loc > a{
	display: block;
	color: black;
	font-size: 0.9rem;
	margin-left: 0rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	text-decoration: underline;
	line-height: 30px;
}
.overv-entr {
	width: 50%;
	display: inline-block;
	vertical-align: top;
	font-size: 1rem;
	font-family: 'Tstar mono round';
	line-height: 1.3em;
	font-weight: 700;
	font-size: 0.7rem;
	overflow: hidden;
}
.overv-entr.hidden {
	display: none;
}
.overv-entr:nth-child(2n){
	padding-left: 0.25rem;
}
.overv-entr:nth-child(2n+1){
	padding-right: 0.25rem;
}
.overv-entr .overv-img{
	font-size: 0;
	width: 100%;
	position: relative;
}
.overv-img .overlay{
	color: white;
	background-color: rgba(0,0,0,0.6);
	font-size: 0.7rem;
	height: 100%;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 1;
	text-align: center;
	transition: opacity 0.15s ease;
}
.overv-img .overlay .wrapper {
	top: 50%;
	position: absolute;
	width: 100%;
	transform: translateY(-50%);
}
.overv-img:hover .overlay{
	opacity: 1;
}
.overv-img > img {
	width: 100%;
	display: block;
}

.overv-img img[data-small] {
  opacity: 0;
  display: none;
}
.overv-entr .overv-info{
	margin-top: 0.5rem;
}

.overv-loc .album .load-more {
	width: 50%;
	display: inline-table;
	vertical-align: top;
	padding-left: 0.25rem;
	position: relative;
	cursor: pointer;
}
.overv-loc .album .load-more img{
	width: 100%;
	display: block;
}
.overv-loc .album .load-more p{
	font-size: 0.7rem;
	font-weight: 700;
	text-align: center;
	position: absolute;
	width: 100%;
	top: 50%;
	font-family: 'Tstar mono round';
	transform: translateY(-50%);
	text-decoration: underline;
	z-index: 10;
}
.overv-loc .album .load-more:hover img{
	opacity: 0.8;
}
@media all and (min-width:24rem){
	.overv-loc .loc-title {
		margin-bottom: 3rem;
	}
	.overv-loc > a{
		font-size: 0.9rem;
		margin-left: 2rem;
		margin-top: 0;
		margin-bottom: 0;
		display: inline-block;
		float: none;
	}
}

@media all and (min-width: 30rem){
	
	.overv-loc {
		margin: 1.5rem 2rem 5rem;
	}
	.overv-loc .album .load-more p,
	.overv-entr {font-size:0.8rem;}
	.overv-info {margin-bottom:1rem;}
}
@media all and (min-width: 48rem){

	.overv-loc {
		width:90%;
		max-width:1440px;
		margin:1.5rem auto 5rem;
	}
	.overv-loc > a{
		font-size: 0.9rem;
		margin-left: 2rem;
		float: none;
		text-decoration: underline;
		line-height: 30px;
	}
	.overv-entr:nth-child(2n){padding-left: 0}
	.overv-entr:nth-child(2n+1){padding-right: 0}

	.overv-entr{padding-right:0.5rem !important;}
	.overv-entr {width: 33.33%; font-size:0.8rem;}
	.overv-loc .album .load-more {width: 33.33%;}
}
@media all and (min-width:60rem){
	body.overzicht nav .loc-title p {
		line-height: 36px;
	}
	body.overzicht nav .loc-title p:first-child{
		font-size: 1rem;
	}
	body.overzicht nav .loc-title{
		height: 37px;
	}
	body.overzicht nav .loc-title .dropdown img {
		width: 12px;
	}
	.overv-loc .loc-title p:first-child {
		font-size: 1rem;
	}
	.overv-loc .loc-title p {
		line-height: 36px;
	}
	.overv-loc .loc-title{
		height: 37px;
	}
	.overv-entr{ font-size:0.9rem;}
	.overv-loc .album .load-more p, .overv-entr {
		font-size: 0.9rem;
	}
}
@media all and (min-width: 70rem){
	.overv-entr {width: 25%;}
	.overv-loc .album .load-more {width: 25%;}
}
@media all and (min-width: 90rem){
	.overv-entr {font-size:1rem;}
}


/**/



#map {
	width: 100%;
    position: absolute;
    overflow:hidden;
    top: 218px;
}
#map .wrap {
	position: relative;
    display: table-cell;
    vertical-align: middle;
}
#map .contain {
	width:1000px;
	transition: all 0.35s ease;
    position: absolute;
}
#map .contain.moving {
	transition: none;
}
#map img{
	width: 100%;
	display: block;
}
#map .route {
	position: absolute;
}
#map .route-desktop {display:none;}


#map .cities {
	position: absolute;
	width: 100%;
	height: 100%;}
#map .city {
	position: absolute;
	font-weight: 700;
	font-family: 'Tstar mono round';
	font-size: 0.8rem;
	text-transform: uppercase;}
#map .city span.spot{
	display: block;
	background-image: url('../images/lagelanden-cityspot.svg');
	width: 12px; height:12px;
	background-size: contain;
	background-repeat: no-repeat;}
#map .city span.nm {
	position: absolute;}
#map .city1{left:15%;top:10%;transform:translate(-50%, -50%);z-index:4;}
#map .city2{left:66.5%;top:21%;transform:translate(-50%, -50%);z-index:4;}
#map .city3{left:96%;top:49%;transform:translate(-50%, -50%);z-index:4;}
#map .city4{left:60%;top:75%;transform:translate(-50%, -50%);z-index:4;}
#map .city5{left:7%;top:82%;transform:translate(-50%, -50%);z-index:4;}
#map .city1 .nm{left:120%;bottom:60%;}
#map .city2 .nm{left:250%;bottom:60%;}
#map .city3 .nm{right:120%;bottom:60%;}
#map .city4 .nm{left:120%;bottom:60%;}
#map .city5 .nm{right:120%;bottom:60%;}


#map .pins {
	position: absolute;
	width: 100%;
	height: 100%;
}
#map .pin {
	position: absolute;
	background-image: url('../images/lagelanden-pin.svg');
	width: 15px; height:22px;
	transform: translate(-50%, -100%);
	background-size: contain;
	background-repeat: no-repeat;
	cursor:pointer;
	z-index: 100
}

#map .pin1{left: 56.5%;top: 80%;} 
#map .pin2{left: 52.5%;top: 91%;}
#map .pin3{left: 34.2%;top: 88.4%;}
#map .pin4{left: 26.5%;top: 81.4%;}
#map .pin5{left: 9%;top: 78.2%;}
#map .pin6{left: 3%;top: 43.5%;}
#map .pin7{left: 1%;top: 38.5%;}
#map .pin8{left: 5%;top: 24.2%;}
#map .pin9{left: 21%;top: 2.5%;}
#map .pin10{left: 29.4%;top: 7.2%;}
#map .pin11{left: 32.6%;top: 18.2%;}
#map .pin12{left: 36.3%;top: 24.8%;}
#map .pin13{left: 67.1%;top: 17.7%;}
#map .pin14{left: 79%;top: 33.1%;}
#map .pin15{left: 81.8%;top: 29.1%;}
#map .pin16{left: 98.5%;top: 49.1%;}
#map .pin17{left: 97.3%;top: 52.5%;}
#map .pin18{left: 86.9%;top: 75%;}
#map .pin19{left: 66.5%;top: 83%;}
#map .pin20{left: 62.8%;top: 78.8%;}


@media all and (min-width: 48rem){
	#map {
		width: 92%;
	    height: 100% !important;
	    max-width: 110vh; 
	    position: absolute;
	    top: 0;
	    left: 50%;
    	transform: translateX(-50%);
	    margin: 0 auto;
	    display: table;
	    overflow:visible;
	}	
	
	#map .contain {
		width:100%;
		position:relative;
		left: auto !important;
		top: auto !important;
		margin-top: 100px;
	}
	#map .route-desktop {display:block;}
	#map .route-mobile {display:none;}
}

@media all and (min-width: 60rem){
	#map {
		width: 80%;
		margin-left:6%;}
}
@media all and (min-width: 75rem){
	#map {
		width: 85%;
		margin-left:3%;}
}
@media all and (min-width: 1400px){
	#map {
		width: 92%;
		margin-left:auto;}
	#map .wrap {
		padding-left: 3rem;
	}
}
@media all and (min-width:1540px){
	#map .wrap {
		padding-left: 0rem;
	}
}


#map .pin .box {
	width: 122px;
	position:absolute;
	display: none;
	font-family: 'Tstar mono round', monospace;
	font-size:0;
	border: 1px solid black;
	background-color: rgba(255,255,255,0.4);
}
#map .pin .line {
	border-bottom: 1px solid black;
	width: 30px;
	transform: rotate(-45deg);
	position: absolute;
}



#map .pin .box.ru {left: 31px;top: -50px;} #map .pin .box.ru .line{left: -26px;top: 46px;transform: rotate(-45deg);}
#map .pin .box.rd {left: 31px;bottom: -45px;} #map .pin .box.rd .line{left: -26px;top: -11px;transform: rotate(45deg);}
#map .pin .box.ld {right: 27px;bottom: -45px;} #map .pin .box.ld .line{right: -26px;top: -11px;transform: rotate(-45deg);}
#map .pin .box.lu {right: 27px;top: -50px;} #map .pin .box.lu .line{right: -26px;top: 46px;transform: rotate(45deg);}




#map .pin .box p:first-child {
	display:inline-block;
	font-size: 0.8rem;
	color:black;
	font-weight: 700;
	margin: 0 0.8rem;
}
#map .pin .box p:nth-child(2) {
	font-size: 0.8rem;
    padding: 0.5rem 0;
    text-align: center;
    width: 40px;
	color:black;
	font-weight: 700;
	display:inline-block;
	background-color:rgba(255,255,255,0.6);
}
#map .pin .box p:nth-child(3){
	display: none;
	float: right;
	width: 36px;
	height: 35px;
	background-image: url('../images/play.svg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
#map .pin .box:hover p:nth-child(3){
	background-image: url('../images/play-act.svg');
}


@media all and (min-width: 30rem){
	#map .pin .box {width: 159px;}
	#map .pin .box p:nth-child(3){display: block;}
}


body.succes {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.succes .background {
	background-image: url('../images/locatie5.png');
	background-size: cover;
	background-position: center center;
	width: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 0;
	height: 100vh;
	filter: blur(8px);
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);
	transform: scale(1.2);
}

body.error {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.error .background {
	background-image: url('../images/locatie5.png');
	background-size: cover;
	background-position: center center;
	width: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 0;
	height: 100vh;
	filter: blur(8px);
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);
	transform: scale(1.2);
}






.blurred .entry .focus.ie {filter: none; transform: scale(1);}
.entry .entr-img.blur.ie{filter:none; transform: scale(1);}
.succes .background.ie{filter:none;transform: scale(1);}
.error .background.ie{filter:none;transform: scale(1);}
.blackoverlay.ie{background-color:rgba(0,0,0,0.5);}


h3.error {color: rgb(233,98,92);}
h3.error:after {content: '*'; vertical-align: super; font-size: 0.7rem;}


.loaded.temp {
	display: block !important;
}

#preload {
	opacity: 0;
	pointer-events: none;
	height: 0;
	width: 0;
}
#preload img {width: 0;height: 0;}



/* landscape mode */

.landscape #navigation > nav {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	margin-top: 0;
}
.landscape .nav-bar {
	margin: 1rem 1.5rem 0.5rem;
}
.landscape.overzicht .nav-bar {
	margin: 1rem 2rem 1rem;
}
.landscape #navigation #map {top:109px;}
.landscape #navigation > nav ul {font-size: 0; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3);}
.landscape #navigation > nav ul li {width: 33.33%; display:inline-block; vertical-align: top; padding-left:0; border:none; font-size:0.8rem;text-align: center;}
.landscape #navigation > nav ul li img {margin-right:0.5rem; vertical-align: text-top;}
.landscape #navigation > nav ul li:hover img {margin-right:0.5rem;}

.landscape #navigation ul.location-nav img,
.landscape #navigation ul.location-nav li#loc-start,
.landscape #navigation ul.location-nav li {height:40px;}
.landscape #navigation ul.location-nav li#loc-start {padding: 0.7rem 50px;}