/* .ie body {} */
/* .ie7,8,9 body {} */

/* webfonts */
@font-face {
    font-family: 'gotham';
    src: url('../css/fonts/GothamRounded-Book.eot');
    src: url('../css/fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/GothamRounded-Book.woff') format('woff'),
         url('../css/fonts/GothamRounded-Book.ttf') format('truetype'),
         url('../css/fonts/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* theme */
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }

html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family: 'gotham', sans-serif; font-size:16px; color:#fff; background-color:#fff; }

#pano { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1000; }

#loaded { display:block; }

#popup-bckgrnd {
	 display:none;
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:3000;
	 width:100%;
	 height:100%;
	 background-color:rgba(0,0,0,0.3);
	 box-sizing:border-box;
	 cursor:pointer;
}
	#popup {
		display:none;
		position:absolute;
		z-index:3500;
		width:780px;
		height:270px;
		padding:20px;
		left:50%;
		top:50%;
		margin-left:-400px;
		margin-top:-145px;
		background-color:#fff;
		box-shadow:0 0 20px rgba(0,0,0,0.5);
		color:#000;
		font-size:14px;
	}

	#popup .popup-exit {
		position:absolute;
		right:20px;
		top:20px;
		width:20px;
		height:20px;
		background-image:url(../img/static/popup-exit.png);
		background-size:contain;
		cursor:pointer;
	}

	#popup h2 {
		font-family: 'gotham', sans-serif;
		font-size:20px;
		font-weight:bold;
		color:#d30e2b;
		text-transform:uppercase;
		line-height:20px;
	}

	#popup .photo {
		float:left;
		width:380px;
		height:270px;
		margin-right:20px;
		overflow:hidden;
	}

	#popup .photo img { width:100%; }

	#popup .popup-scroller-inside {
		height:240px;
		overflow:auto;
		padding-right:20px;
	}

#nav-right {
	position:fixed;
	top:0;
	right:0;
	width:220px;
	z-index:3000;
}
	#nav-right .fullscreen-button {
		float:right;
		width:40px;
		height:40px;
		margin-left:5px;
		background-image:url(../img/static/fullscreen-button.png);
		background-color:#fff;
		background-position:center center;
		background-size:contain;
		cursor:pointer;
	}

#menu {}

	.menu-button {
		float:right;
		width:120px;
		height:20px;
		padding:10px;
		background-color:rgba(255,255,255,1);
		background-image:url(../img/static/menu.png);
		background-position:center center;
		background-size:45%;
		background-repeat:no-repeat; cursor:pointer;
	}

	.menu-button.hover {
		background-color:#e2001b;
		background-image:url(../img/static/menu-hover.png);
	}

	#menu-hover { display:none; position:absolute; top:0; right:35px; width:230px; padding:10px; z-index:9999; }
	#menu-hover .spacer { clear:both; float:left; padding-top:30px; width:100%; }
	#menu-hover .rest { clear:both; float:left; width:100%; height:100%; background-color:rgba(255,255,255,1); box-sizing:border-box;  }
	#menu-hover a { display:block; width:100%; padding:5px; box-sizing:border-box; text-align:center; font-transform:uppercase; font-family: 'gotham', sans-serif; font-weight:normal; color:#000; border-bottom:1px solid #ccc; }
	#menu-hover a:last-child { border:0; }
	#menu-hover a.active,#menu-hover a:hover { background-color:#e2001a; color:#fff; }

.logo {
	position:absolute;
	top:0;
	left:40px;
	width:120px;
	height:217px;
	background-image:url(../img/static/amersfoort-logo.png);
	background-size:contain;
	z-index:2000;
}

footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:141px;
	background-image:url(../img/static/footer.png);
	background-position:left bottom;
	z-index:2000;
	background-size:contain;
	background-repeat:no-repeat;
}

footer div {
	position:absolute;
	bottom:5px;
	left:20px;
	font-size:10px;
	color:#fff;
	font-weight:bold;
	font-family: 'gotham', sans-serif;
}

footer .credit {
	position:absolute;
	bottom:0;
	right:20px;
	width:70px;
	height:70px;
	background-image:url(../img/static/360.png);
	background-repeat:no-repeat;
}

.mobile-only { display:none; }
.photo-mobile { display:none; }

#gyro-button2 { display:block; position:absolute; left:0; bottom:70px; width:71px; height:31px; background-repeat:no-repeat; background-position:top; z-index:9999; cursor:pointer; }


/* #resizes
================================================== */
@media only screen and (min-width:0) and (max-width: 1400px) {
}

@media only screen and (min-width:0) and (max-width: 640px) {

	.logo {
		width:50px;
		height:100px;
		left:20px;
		background-repeat:no-repeat;
	}

	.fullscreen-button {
		display:none;
	}

	footer {
		height:30px;
		background-size:cover;
	}

	footer div, footer a {
		display:none;
	}

	#popup {
		width:240px;
		padding:20px;
		top:0;
		margin-left:-140px;
		margin-top:20px;
		font-size:12px;
	}

	#popup .popup-exit {
		position:absolute;
		right:20px;
		top:20px;
		width:20px;
		height:20px;
		background-image:url(../img/static/popup-exit.png);
		background-size:contain;
		cursor:pointer;
	}

	#popup h2 {
		font-family: 'gotham', sans-serif;
		font-size:11px;
		font-weight:bold;
		color:#d30e2b;
		text-transform:uppercase;
		line-height:20px;
	}

	#popup .photo {
		display:none;
	}

	#popup .popup-scroller-inside {
		height:240px;
		overflow:auto;
		padding-right:20px;
	}

	#menu-hover a { padding:2px; font-size:12px;}

	.mobile-only { display:block; }
	.photo-mobile { display:block; width:210px; margin-top:20px; }
	.photo-mobile img { width:100%; }

	#gyro-button { display:block; position:absolute; left:0; bottom:20px; width:71px; height:31px; background-repeat:no-repeat; background-position:top; z-index:1000; cursor:pointer; }

}