@font-face {





	font-family: 'sgfont';





	src: url('../fonts/sgfont.eot?xkw3vv');





	src: url('../fonts/sgfont.eot?xkw3vv#iefix') format('embedded-opentype'),





		url('../fonts/sgfont.ttf?xkw3vv') format('truetype'),





		url('../fonts/sgfont.woff?xkw3vv') format('woff'),





		url('../fonts/sgfont.svg?xkw3vv#sgfont') format('svg');





	font-weight: normal;





	font-style: normal;





}











canvas {





	image-rendering: pixelated;





}











.mode {





	position: absolute;





	top: 15px;





	left: 50%;





	transform: translateX(-50%);





	font-size: 14px;





	font-weight: bold;





}











@font-face {





	font-family: 'brandonGRegular';





	src: url('../fonts/BrandonGrotesque-Regular.otf');





	font-weight: normal;





	font-style: normal;





}











@font-face {





	font-family: 'brandonGBold';





	src: url('../fonts/BrandonGrotesque-Bold.otf');





	font-weight: normal;





	font-style: normal;





}











[class^="icon-"], [class*=" icon-"] {





	/* use !important to prevent issues with browser extensions that change fonts */





	font-family: 'sgfont' !important;





	speak: none;





	font-style: normal;





	font-weight: normal;





	font-variant: normal;





	text-transform: none;





	line-height: 1;





	/* Better Font Rendering =========== */





	-webkit-font-smoothing: antialiased;





	-moz-osx-font-smoothing: grayscale;





}











.icon-carrousel:before {





	content: "\e900";





}











.icon-rotate0:before {





	content: "\e901";





}











.icon-rotate1:before {





	content: "\e902";





}











#intro {





	background-image: url(../cust/img/intro.jpg);





	background-size: cover;





	background-position: center 90%;





}











.icon-down:before {





	content: "\e906";





}











.icon-up:before {





	content: "\e907";





}











.iconbutton .sgfont {





	font-size: 48px !important;





}











* {





	-webkit-box-sizing: border-box;





	-moz-box-sizing: border-box;





	box-sizing: border-box;





	-moz-user-select: text;





	-webkit-user-select: text;





	-ms-user-select: text;





	user-select: text;





	-ms-text-size-adjust: none;





	-moz-text-size-adjust: none;





	-webkit-text-size-adjust: none;





	text-size-adjust: none;





	-webkit-user-drag: none;





	-webkit-touch-callout: none;





	-ms-content-zooming: none;





	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);





}











.actionbutton {





	height: 55px;





	margin-bottom: 10px;





}











.iconbutton {





	text-align: center;





}











#settingspull {





	position: absolute;





	top: 5px;





	right: 0px;





	margin-top: 10px;





	margin-right: 15px;





}











.center-text {





	position: fixed;





	top: 50%;





	left: 50%;





	margin-top: -41px;





	margin-left: -40px;





	font-size: 50px;





}











.mobile .instructions360 {





	margin-left: -70px;





}











@media ( max-width : 900px) {





	.info p {





		font-size: 16px !important;





	}





	.info #form-div h1 {





		font-size: 20px !important;





	}





}











@media ( max-width : 600px) {





	.info p {





		font-size: 14px !important;





	}





	.info #form-div h1 {





		font-size: 18px !important;





	}





}











.mobile .center-360icon {





	display: none;





}











.mobile .instructions360-text {





   width:100%;

   left:0;

   text-align:center;





	font-size: 20px;





}











.desktop .instructions360 {





	margin-left: -10px;





}











.desktop .instructions360-text {





	    transform: translateX(-50%);

	    



}











.center-360icon {





	position: fixed;





	top: 50%;





	left: 50%;





	margin-top: -65px;





	margin-left: -100px;





	font-size: 150px;





	transform: rotatex(75deg);





}











.center-360icon, .center-text, .instructions360-text {





	color: #fff;





}











.instructions360-text {





	position: fixed;





	bottom: 30px;





	left: 50%;





	font-size: 18px;





}











.instructions360 {





	position: fixed;





	bottom: 60px;





	left: 50%;





}











.fa {





	display: inline-block;





	width: 100% !important;





}











html, body {





	width: 100%;





	height: 100%;





	padding: 0;





	margin: 0;





	overflow: hidden;





	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;





	font-size: 16px;





	color: #fff;





}











a:hover {





	text-decoration: none;





}











.control-inner h1 {





	text-align: center;





	color: rgb(255, 255, 255);





}











#whoami .control-inner .center {





	margin-left: auto;





	margin-right: auto;





}











#debugcenter {





	top: 50%;





	left: 50%;





	position: absolute;





	width: 10px;





	height: 10px;





	margin-left: -5px;





	margin-top: -5px;





	background-color: #ffa71f;





	border-radius: 50%;





	margin-top: -5px;





}











#debug {





	position: absolute;





	top: 35px;





	width: 100%;





	text-align: center;





	color: white;





	font-size: 16px;





}











#debug-link {





	position: absolute;





	top: 15px;





	width: 100%;





	text-align: center;





	color: white;





	font-size: 16px;





	cursor: pointer;





}











#intro {





	position: absolute;





	top: 0;





	left: 0;





	right: 0;





	width: 100%;





	height: 100%;





	padding: 0;





	margin: 0;





	overflow: hidden;





	color: rgb(255,255,255);





	background-color: white;





	display: table;





}











#intro #wrapper {





	width: 800px;





	height: 400px;





	margin-left: auto;





	margin-right: auto;





	margin-top: auto;





	margin-bottom: auto;





	display: table-cell;





	vertical-align: middle;





}











#intro #music {





	position: absolute;





	bottom: 15px;





	width: 200px;





	right: 15px;





	color: #1C77A0;





	font-size: 26px;





}











#intro i {





	position: absolute;





	right: -5px;





	bottom: 5px;





	right: 125px;





}











#intro a#skip_intro {





	position: absolute;





	top: 0;





	right: 60px;





}











#intro #move {





	display: block;





	margin: 0 auto;





}











.control-inner img {





	max-width: 90%;





}











#logo img {





	max-width: 100%;





	width: 120px;





}











#intro img {





	max-width: 100%;





	display: block;





	margin: auto;





}











#whoami a {





	color: #15739F;





	text-decoration: underline !important;





}











#intro h1 {





	text-transform: uppercase;





	font-size: 42px;





	padding-top: 150px;





	text-align: center;





}











#intro p {





	font-size: 28px;





	padding-top: 150px;





	text-align: center;





}











.viewControlButton  .fa {





	text-align: center;





	display: inline-block;





	width: 100%;





	color: white;





}











.modal.modal-wide .modal-dialog {





	width: 90%;





	height: 90%;





}











#welcome .modal-content {





	background-size: cover !important;





	background-position: center !important;





	background-repeat: no-repeat !important;





	background-color: white;





	transition: background 1s ease-in-out;





	opacity: 0.8;





}











.modal-content {





	height: auto;





	min-height: 100% !important;





}











#withoutmusic {





	float: left;





}











#withmusic {





	float: right;





	padding-right: 15px;





}











.modal-backdrop {





	background-color: black !important;





}











/*.fade {





	opacity: 0;





	-webkit-transition: opacity 0.5s linear !important;





	transition: opacity 0.5s linear !important;





}*/





.modal-content {





	padding-left: 20px;





}











#titleBar {





	visibility: hidden;





}











#logo {





	max-width: 50%;





	position: absolute;





	top: 20px;





	left: 20px;





	position: absolute;





}











.control-outer {





	position: absolute;





	top: 0;





	left: 0;





	right: 0;





	width: 100%;





	height: 100%;





	background-color: rgba(0, 0, 0, 0.5);





}











.control-inner img {





	display: table-caption;





	margin: 0 auto;





}











#whoami .control-inner {





	background-color: rgba(255, 255, 255, 0.7);





}











.control-inner {





	position: relative;





	top: 50%;





	transform: translateY(-50%);





	background-color: rgba(255, 255, 255, 0.5);





	font-size: 14px;





}











.control-inner img {





	padding-top: 25px;





	padding-bottom: 25px;





}











.modal-dialog.fullscreen {





	width: 95%;





	height: 95%;





	margin: 0;





	padding: 0;





}











.fullscreen .modal-content {





	height: auto;





	min-height: 88%;





	border-radius: 0;





}











.fullscreen .modal-content img {





	height: auto;





	min-height: 88%;





	border-radius: 0;





	float: left;





}











#logo_story a {





	position: absolute;





	bottom: 10px;





	left: 10px;





	width: 193px;





	height: 35px;





	background-image: url("../img/storygraafwtext.png");





	padding: 0px;





}











#logo_story a:hover {





	z-index: 99999999;





	width: 193px;





	background-image: url("../img/storygraafwtext.png");





	-moz-transition: all 0.4s ease-in-out;





	-webkit-transition: all 0.4s ease-in-out;





	-o-transition: all 0.4s ease-in-out;





	-ms-transition: all 0.4s ease-in-out;





	transition: all 0.4s ease-in-out;





}











#logo_story:hover i.fa {





	visibility: hidden;





}











#logo_story:hover {





	border-left: 0px solid red;





	background-image: url("../img/storygraaf.png");





}











#sceneListToggle {





	visibility: hidden;





}











.modal {





	text-align: center;





	padding: 0 !important;





}











.modal:before {





	content: '';





	display: inline-block;





	height: 100%;





	vertical-align: middle;





	margin-right: -4px; /* Adjusts for spacing */





}











.modal-dialog {





	display: inline-block;





	text-align: left;





	vertical-align: middle;





}











/*.modal-content img {





	padding-right: 16px;





}*/





.modal-content img {





	width: 100%;



	padding-left: 10px;

	padding-right: 10px;



}











.modal-dialog {





	margin: 30px auto;





}











a {





	text-decoration: none !important;





}











a:hover {





	text-decoration: none !important;





}











a, a:hover, a:active, a:visited {





	text-decoration: none;





	color: inherit;





}











#pano {





	position: absolute;





	top: 0;





	left: 0;





	width: 100%;





	height: 100%;





	overflow: hidden;





	cursor: -webkit-grab !important;





	cursor: -moz-grab !important;





	cursor: move;





}











.grabbing {





	cursor: -moz-grabbing;





	cursor: -webkit-grabbing;





}











/* If there is a fullscreen button the title bar must make space for it */





body.fullscreen-enabled #titleBar {





	right: 80px;





}











body.fullscreen-enabled.mobile #titleBar {





	right: 100px;





}











/* If there are multiple scenes the title bar must make space for the scene list toggle */





body.multiple-scenes #titleBar {





	left: 40px;





}











body.multiple-scenes.mobile #titleBar {





	left: 50px;





}











body.fullscreen-enabled #fullscreenToggle {





	display: block;





}











.icon {





	color: #1C77A0;





	text-align: center;











}











.mobile #fullscreenToggle .icon {





	top: 10px;





	right: 10px;





}











#fullscreenToggle .icon.on {





	display: none;





}











#fullscreenToggle .icon.off {





	display: block;





}











#fullscreenToggle.enabled .icon.on {





	display: block;





}











#fullscreenToggle.enabled .icon.off {





	display: none;





}











.icon#play {





	display: block;





	position: absolute;





	top: 0;





	right: 80px;





	width: 40px;





	height: 40px;





	padding: 5px;





	color: white;





	background-color: #1C77A0;





}











.icon#stop {





	display: block;





	position: absolute;





	top: 0;





	right: 80px;





	width: 40px;





	height: 40px;





	padding: 5px;





	color: white;





	background-color: #1C77A0;





}





/*





.mobile #autorotateToggle {





	width: 50px;





	height: 50px;





}





*/











/* If there is a fullscreen button, autorotate must placed a bit to the left */





body.fullscreen-enabled #autorotateToggle {





	/* right: 40px;*/





	





}











body.fullscreen-enabled.mobile #autorotateToggle {





	right: 50px;





}











.mobile #autorotateToggle .icon {





	top: 10px;





	right: 10px;





}











#autorotateToggle .icon.on {





	display: none;





}











#autorotateToggle .icon.off {





	display: block;





}











#autorotateToggle.enabled .icon.on {





	display: block;





}











#autorotateToggle.enabled .icon.off {





	display: none;





}











/* Hide scene list when only a single scene exists */





body.single-scene #sceneList, body.single-scene #sceneListToggle {





	display: none;





}











/* Link hotspot */





.link-hotspot {





	width: 60px;





	height: 60px;





	margin-left: -40px;





	margin-top: -30px;





	opacity: 0.9;





	transition: opacity 0.2s;





	cursor: pointer;





}











.no-touch .link-hotspot:hover {





	opacity: 1;





}











.mobile .link-hotspot {





	width: 70px;





	height: 70px;





}











.link-hotspot-icon {





	width: 100%;





	height: 100%;





	cursor: pointer;





}











.link-hotspot-tooltip {





	position: absolute;





	left: 100%;





	top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */





	margin-left: 3px;





	font-size: 16px;





	max-width: 300px;





	padding: 8px 10px;





	border-radius: 1px;





	background-color: rgb(58, 68, 84);





	background-color: rgba(255, 255, 255, 0.7);





	color: #15739F;





	white-space: nowrap;





	text-overflow: ellipsis;





	overflow: hidden;





	cursor: pointer;





	opacity: 0;





	-ms-transform: translateX(-8px);





	-webkit-transform: translateX(-8px);





	transform: translateX(-8px);





	transition: -ms-transform 0.3s, -webkit-transform 0.3s, transform 0.3s,





		opacity 0.3s;





}











/*





.mobile .link-hotspot {





	top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */





}





* /





.no-touch .link-hotspot:hover .link-hotspot-tooltip {





	opacity: 1;





	-ms-transform: translateX(0);





	-webkit-transform: translateX(0);





	transform: translateX(0);





}











/* Prevent tooltip from triggering */





.link-hotspot-tooltip {





	pointer-events: none;





}











.no-touch .link-hotspot:hover .link-hotspot-tooltip {





	pointer-events: all;





}











/* Fallback mode without pointer-events (IE8-10) */





.tooltip-fallback .link-hotspot-tooltip {





	display: none;





}











.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {





	display: block;





}











/* Info hotspot */





.info-hotspot {





	line-height: 1.2em;





	opacity: 0.9;





	transition: opacity 0.2s 0.2s;





}











.no-touch .info-hotspot:hover {





	opacity: 1;





	transition: opacity 0.2s;





}











.info-hotspot.visible {





	opacity: 1;





}











.info-hotspot .info-hotspot-header {





	width: 40px;





	height: 40px;





	border-radius: 20px;





	background-color: #EEE;





	cursor: pointer;





	transition: width 0.3s ease-in-out 0.5s, border-radius 0.3s ease-in-out





		0.5s;





}











.mobile .info-hotspot .info-hotspot-header {





	width: 50px;





	height: 50px;





	border-radius: 25px;





}











.desktop.no-touch .info-hotspot .info-hotspot-header:hover {





	width: 260px;





	border-radius: 5px;





	transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;





}











.desktop .info-hotspot.visible .info-hotspot-header, .desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover





	{





	width: 260px;





	border-radius: 5px;





	border-top-right-radius: 0;





	border-bottom-right-radius: 0;





	border-bottom-left-radius: 0;





	transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;





}











.info-hotspot .info-hotspot-icon-wrapper {





	width: 40px;





	height: 40px;





}











.mobile .info-hotspot .info-hotspot-icon-wrapper {





	width: 50px;





	height: 50px;





}











.info-hotspot .info-hotspot-icon {





	width: 90%;





	height: 90%;





	margin: 5%;





}











.info-hotspot .info-hotspot-title-wrapper {





	position: absolute;





	left: 40px;





	top: 0;





	width: 0;





	height: 40px;





	padding: 0;





	overflow: hidden;





	transition: width 0s 0.4s, padding 0s 0.4s;





}











.desktop .info-hotspot.visible .info-hotspot-title-wrapper, .desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper





	{





	padding: 0 5px;





	transition: width 0s 0.4s, padding 0s 0.4s;





}











.info-hotspot .info-hotspot-title-wrapper:before {





	content: '';





	display: inline-block;





	vertical-align: middle;





	height: 100%;





}











.info-hotspot .info-hotspot-title {





	display: inline-block;





	vertical-align: middle;





	-moz-user-select: text;





	-webkit-user-select: text;





	-ms-user-select: text;





	user-select: text;





}











.info-hotspot .info-hotspot-close-wrapper {





	position: absolute;





	left: 260px;





	top: 0;





	height: 40px;





	width: 40px;





	border-top-right-radius: 5px;





	background-color: #EEE;;





	visibility: hidden;





	-ms-transform: perspective(200px) rotateY(90deg);





	-webkit-transform: perspective(200px) rotateY(90deg);





	transform: perspective(200px) rotateY(90deg);





	-ms-transform-origin: 0 50% 0;





	-webkit-transform-origin: 0 50% 0;





	transform-origin: 0 50% 0;





	transition: -ms-transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s,





		transform 0.3s 0.3s, visibility 0s 0.6s;





	-webkit-transition: -webkit-transform 0.3s 0.3s, visibility 0s 0.6s;





}











.desktop .info-hotspot.visible .info-hotspot-close-wrapper {





	visibility: visible;





	-ms-transform: perspective(200px) rotateY(0deg);





	-webkit-transform: perspective(200px) rotateY(0deg);





	transform: perspective(200px) rotateY(0deg);





	transition: -ms-transform 0.3s, -webkit-transform 0.3s, transform 0.3s,





		visibility 0s 0s;





	-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;





}











.info-hotspot .info-hotspot-close-icon {





	width: 70%;





	height: 70%;





	margin: 15%;





}











.info-hotspot .info-hotspot-text {





	position: absolute;





	width: 300px;





	height: auto;





	max-height: 200px;





	top: 40px;





	left: 0;





	padding: 10px;





	background-color: #EEE;





	border-bottom-right-radius: 5px;





	border-bottom-left-radius: 5px;





	overflow-y: auto;





	visibility: hidden;





	-ms-transform: perspective(200px) rotateX(-90deg);





	-webkit-transform: perspective(200px) rotateX(-90deg);





	transform: perspective(200px) rotateX(-90deg);





	-ms-transform-origin: 50% 0 0;





	-webkit-transform-origin: 50% 0 0;





	transform-origin: 50% 0 0;





	transition: -ms-transform 0.3s, -webkit-transform 0.3s, transform 0.3s,





		visibility 0s 0.3s;





	-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;





	-moz-user-select: text;





	-webkit-user-select: text;





	-ms-user-select: text;





	user-select: text;





}











.desktop .info-hotspot.visible .info-hotspot-text {





	visibility: visible;





	-ms-transform: perspective(200px) rotateX(0deg);





	-webkit-transform: perspective(200px) rotateX(0deg);





	transform: perspective(200px) rotateX(0deg);





	transition: -ms-transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s,





		transform 0.3s 0.3s, visibility 0s 0s;





	-webkit-transition: -webkit-transform 0.3s 0.3s, visibility 0s 0s;





}











/* Info hotspot modal */





.desktop .info-hotspot-modal {





	display: none;





}











.info-hotspot-modal {





	top: 0;





	left: 0;





	position: absolute;





	width: 100%;





	height: 100%;





	overflow: hidden;





	z-index: 11000 !important;





	background-color: rgba(0, 0, 0, .5);





	line-height: 1.2em;





	opacity: 0;





	visibility: hidden;





	transition: opacity 0.2s ease-in-out 0.5s, visibility 0s 0.7s;





}











.info-hotspot-modal.visible {





	opacity: 1;





	visibility: visible;





	transition: opacity 0.2s ease-in-out, visibility 0s 0s;





}











.info-hotspot-modal .info-hotspot-header {





	position: absolute;





	top: 60px;





	left: 10px;





	right: 10px;





	width: auto;





	height: 50px;





	background-color: rgb(103, 115, 131);





	background-color: rgba(103, 115, 131, 0.8);





	opacity: 0;





	transition: opacity 0.3s ease-in-out 0.2s;





}











.info-hotspot-modal.visible .info-hotspot-header {





	opacity: 1;





	transition: opacity 0.3s ease-in-out 0.2s;





}











.info-hotspot-modal .info-hotspot-icon-wrapper {





	width: 50px;





	height: 50px;





}











.info-hotspot-modal .info-hotspot-icon {





	width: 90%;





	height: 90%;





	margin: 5%;





}











.info-hotspot-modal .info-hotspot-title-wrapper {





	position: absolute;





	top: 0;





	left: 50px;





	right: 50px;





	width: auto;





	height: 50px;





	padding: 0 10px;





}











.info-hotspot-modal .info-hotspot-title-wrapper:before {





	content: '';





	display: inline-block;





	vertical-align: middle;





	height: 100%;





}











.info-hotspot-modal .info-hotspot-title {





	display: inline-block;





	vertical-align: middle;





	-moz-user-select: text;





	-webkit-user-select: text;





	-ms-user-select: text;





	user-select: text;





}











.info-hotspot-modal .info-hotspot-close-wrapper {





	position: absolute;





	top: 0;





	right: 0;





	width: 50px;





	height: 50px;





	background-color: rgb(78, 88, 104);





	background-color: rgba(78, 88, 104, 0.8);





	cursor: pointer;





}











.info-hotspot-modal .info-hotspot-close-icon {





	width: 70%;





	height: 70%;





	margin: 15%;





}











.info-hotspot-modal .info-hotspot-text {





	position: absolute;





	top: 110px;





	bottom: 10px;





	left: 10px;





	right: 10px;





	padding: 10px;





	background-color: rgb(58, 68, 84);





	background-color: rgba(58, 68, 84, 0.8);





	overflow-y: auto;





	opacity: 0;





	transition: opacity 0.3s ease-in-out;





	-moz-user-select: text;





	-webkit-user-select: text;





	-ms-user-select: text;





	user-select: text;





}











.info-hotspot-modal.visible .info-hotspot-text {





	opacity: 1;





	transition: opacity 0.3s ease-in-out 0.4s;





}











/* View control buttons */





.viewControlButton {





	display: none;





	position: absolute;





	bottom: 0;





	left: 50%;





	width: 40px;





	height: 40px;





	padding: 5px;





	background-color: #1C77A0;;





	border: 1px solid #ddd;





}











body.view-control-buttons .viewControlButton {





	display: block;





}











/* Hide controls when width is too small */





@media ( max-width : 600px) {





	body.view-control-buttons .viewControlButton {





		display: none;





	}





}











@media screen and (min-width:1250px) {





	#logo_story a {





		position: absolute;





		bottom: 10px;





		left: 10px;





		width: 193px;





		height: 35px;





		background-image: url(../img/storygraafwtext.png);





		padding: 0px;





	}





}











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





	#logo_story a {





		position: absolute;





		bottom: 10px;





		left: 10px;





		width: 20px;





		height: 35px;





		background-image: url(../img/storygraaf.png);





		padding: 0px;





	}





}











.viewControlButton .icon {





	position: absolute;





	top: 5px;





	right: 5px;





	width: 30px;





	height: 30px;





}











/* Center is at margin-left: -20px */





.viewControlButton-0 {





	margin-left: -195px;





}











.viewControlButton-1 {





	margin-left: -145px;





}











.viewControlButton-2 {





	margin-left: -95px;





}











.viewControlButton-3 {





	margin-left: -45px;





}











.viewControlButton-4 {





	margin-left: 5px;





}











.viewControlButton-5 {





	margin-left: 55px;





}











.viewControlButton-6 {





	margin-left: 105px;





}











.viewControlButton-7 {





	margin-left: 200px;





}











.viewControlButton-8 {





	margin-left: 245px;





}











.pulse {

	border: 3px solid #ffa71f;

	-webkit-border-radius: 30px;

	height: 50px;

	width: 50px;

	position: absolute;

	left: 15px;

	top: 15px;

	border-radius: 30px;

	-webkit-animation: pulsate 1s ease-out;

	-webkit-animation-iteration-count: infinite;

	-ms-animation: pulsate 1s ease-out;

	-ms-animation-iteration-count: infinite;

	-moz-animation: pulsate 1s ease-out;

	-moz-animation-iteration-count: infinite;

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;



   backface-visibility: hidden;



   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   perspective: 1000;

	opacity: 0.0

}











.hotspot {





	position: relative;





}











.dot {





	width: 30px;





	height: 30px;





	background-color: #ffa71f;





	border-radius: 50%;





	position: absolute;





	top: 25px;





	left: 25px;





}











}











/*





*55





* 





*





*





*





*/





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





	#settingspull .fa-2x {





		font-size: 0.5em;





	}





	a#gyroscope:hover>#title {





		display: block;





	}





	#contact #title {





		





	}





	.iconbutton {





		width: 40px;





		height: 40px;





		padding: 10px 2px 2px 2px;





	}





	.actionbutton.open .sub {





		width: 40px !important;





		height: 160px !important;





	}





	.actionbutton.open {





		height: 180px !important;





	}





	#title {





		right: 60px;





		width: 180px;





		font-size: 1.5em;





	}





}











.iconbutton {





	width: 55px;





	height: 55px;





	padding: 14px 12px 12px 12px;





}











.iconbutton .sgfont {





	font-size: 28px;





}











@media screen and (min-height: 470px) {





	a#gyroscope:hover>#title {





		display: block;





	}





	.iconbutton {





		width: 55px;





		height: 55px;





		padding: 14px 12px 12px 12px;





	}





	#title {





		float: left;





		padding-top: 10px;





		padding-right: 10px;





		width: 210px;





		font-size: 25px;





	}





}











#control-outer {





	position: absolute;





	top: 0;





	left: 0;





	right: 0;





	width: 100%;





	height: 100%;





}











.desktop #gyroscope {





	visibility: hidden;





}











#control-inner {





	position: relative;





	top: 50%;





	max-height: 80%;





	height: 372px;





	transform: translateY(-50%);





	background-color: rgba(255, 255, 255, 0.5);





}











#control-inner img {





	padding-top: 25px;





	padding-bottom: 25px;





}











#control-inner img {





	display: table-caption;





	margin: 0 auto;





}











.iconbutton#settings {





	





}











.actionbutton {





	display: block;





}











.iconbutton {





	border-radius: 50%;





	float: right;





	background-color: RGBA(255, 255, 255, 0.8);





	opacity: 0.9;





}











#title {





	font-family: 'Lato', sans-serif;





	color: #fff !important;





	font-weight: bold;





	text-align: right;





	transition: visibility 0s, opacity 0.5s linear;





}











/*





*Flickity





*/





.flickity-enabled {





	position: relative;





}











.flickity-enabled:focus {





	outline: none;





}











.flickity-viewport {





	overflow: hidden;





	position: relative;





	height: 100%;





}











.flickity-slider {





	position: absolute;





	width: 100%;





	height: 100%;





}











/* draggable */





.flickity-enabled.is-draggable {





	-webkit-tap-highlight-color: transparent;





	tap-highlight-color: transparent;





	-webkit-user-select: none;





	-moz-user-select: none;





	-ms-user-select: none;





	user-select: none;





}











.flickity-enabled.is-draggable .flickity-viewport {





	cursor: move;





	cursor: -webkit-grab;





	cursor: grab;





}











.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {





	cursor: -webkit-grabbing;





	cursor: grabbing;





}











/* ---- previous/next buttons ---- */





.flickity-prev-next-button {





	position: absolute;





	top: 50%;





	width: 44px;





	height: 44px;





	border: none;





	border-radius: 50%;





	background: white;





	background: hsla(0, 0%, 100%, 0.75);





	cursor: pointer;





	/* vertically center */





	-webkit-transform: translateY(-50%);





	transform: translateY(-50%);





}











.flickity-prev-next-button:hover {





	background: white;





}











.flickity-prev-next-button:focus {





	outline: none;





	box-shadow: 0 0 0 5px #09F;





}











.flickity-prev-next-button:active {





	opacity: 0.6;





}











.flickity-prev-next-button.previous {





	left: 10px;





}











.flickity-prev-next-button.next {





	right: 10px;





}





/* right to left */





.flickity-rtl .flickity-prev-next-button.previous {





	left: auto;





	right: 10px;





}











.flickity-rtl .flickity-prev-next-button.next {





	right: auto;





	left: 10px;





}











.flickity-prev-next-button:disabled {





	opacity: 0.3;





	cursor: auto;





}











.flickity-prev-next-button svg {





	position: absolute;





	left: 20%;





	top: 20%;





	width: 60%;





	height: 60%;





}











.flickity-prev-next-button .arrow {





	fill: #333;





}











/* ---- page dots ---- */





.flickity-page-dots {





	position: absolute;





	width: 100%;





	bottom: -25px;





	padding: 0;





	margin: 0;





	list-style: none;





	text-align: center;





	line-height: 1;





}











.flickity-rtl .flickity-page-dots {





	direction: rtl;





}











.flickity-page-dots .dot {





	display: inline-block;





	width: 10px;





	height: 10px;





	margin: 0 8px;





	background: #333;





	border-radius: 50%;





	opacity: 0.25;





	cursor: pointer;





}











.flickity-page-dots .dot.is-selected {





	opacity: 1;





}





/*





*END Flickity





*/











/*





* Menu





*/





.gallery-cell {





	width: 170px;





	margin-right: 5px;





	counter-increment: gallery-cell;





}











.flickity-prev-next-button.previous {





	left: -60px !important;





}











.flickity-prev-next-button {





	width: 55px !important;





	height: 55px !important;





	top: 40% !important;





}











.flickity-prev-next-button.next {





	right: -65px !important;





}











#sceneList {





	position: absolute;





	bottom: 15px;





	z-index: 100;





	left: 50%;





	white-space: nowrap;





}







.desktop .toggleScene{

	

	display: none !important;

}











.toggleScene {





	width: 55px;





	height: 55px;





	left: 50%;





	position: absolute;





	bottom: 15px;

	

	display:none;





	





	text-align: center;





	border-radius: 50%;





	position: absolute;





	background-color: RGBA(255, 255, 255, 0.8);





	opacity: 0.9;





	transform: translateX(-50%);





	font-size: 28px;





	padding-top: 8px;





	background-repeat: no-repeat;





	background-size: 40px 40px;





	background-position: center;





}











.mobile #showScene {

	display:block;



//	visibility: visible;





}











.mobile #hideScene {





	visibility: visible;





}











.mobile #sceneList {





	visibility: hidden;





}











.mobile #sceneList.show {





	visibility: visible;





}











.mobile #settingspull.show {





	visibility: visible;





}











.mobile #settingspull {





	/*	visibility: hidden;*/





	





}











.mobile .desktop {





	visibility: hidden;





	height: 0px;





	padding: 0px;





}











.desktop .mobile {





	visibility: hidden;





	height: 0px;





	padding: 0px;





}











.flickity-page-dots .dot {





	visibility: hidden;





}











.toggleAction {





	width: 30px;





	position: absolute;





	top: 85px;





	right: 0px;





}











.desktop .toggleAction {





	visibility: hidden;





}











.mobile #showAction {





	visibility: visible;





}











.mobile #hideAction {





	top: 325px;





	z-index: 100;





}











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





	.mobile #hideAction {





		top: 225px !important;





	}





}











.mobile #hideScene {





	visibility: visible;





}











.hidden {





	visibility: hidden;





}











@media screen and (min-width: 1650px) {





	.scenes {





		margin-left: auto;





		margin-right: auto;





	}





}











.scene.current #img {





	border: 4px solid;





}











.scene.current li.text {





	text-decoration: none !important;





}











.scene li.text {





	margin-left: 0px;





	/*	padding-bottom: 8px;*/





	list-style: none;





	padding-top: 5px;





	font-family: 'Lato', sans-serif !important;





	font-size: 16px;





	/*font-weight:bolder;*/





	/*background-color: rgba(0,0,0,0.1);*/





	color: white !important;





	text-align: center;





	letter-spacing: 1px;





	/*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/





}











.scene #img {





	width: 160px;





	height: 90px;





	margin-left: 7px;





	margin-right: 7px;





	border: 2px solid #C9C6C3;





}











.scene {





	position: relative;





	display: block;





	/*	margin-bottom: 6px;*/





	float: left;





	opacity: 1;





}











.actionbutton.open .sub {





	border-radius: 26px;





	height: 55px;





	width: 260px;





	-webkit-transition: height 5s;





	transition: height 5s;





}











.iconbutton.subitem {





	float: right;





	margin-left: 10px;





}











/*





* END MENU





*/





#logo_story a:hover {





	-webkit-filter: invert(100%) !important;





	-moz-transition: all .4s ease-in-out;





	-webkit-transition: all .4s ease-in-out;





	-o-transition: all .4s ease-in-out;





	-ms-transition: all .4s ease-in-out;





	transition: all .4s ease-in-out;





}











.info, .link-hotspot-tooltip, .control-inner h1, #intro {





	font-family: 'Lato', sans-serif !important;





}











.info p {





	padding-top: 15px;





	font-size: 18px;





	color: white;





}











.link-hotspot-tooltip {





	visibility: hidden;





}











.zoom-hotspot-icon-wrapper {





	padding: 15px;





	margin: -15px;





	cursor: pointer;





}











#titleintro {





	cursor: pointer;





}











.exp #titleintro h1:after {





	content: "";





	display: inline-block;





	background: url("../../img/openbook.svg") no-repeat top right;





	width: 26px;





	fill: #FFFFFF;





	margin-left: 10px;





	height: 26px;





}











.info .control-inner {





	transform: translateY(-0%);





}











#form-div .close {





	float: right;





	font-size: 35px;





	margin-top: -40px;





	color: #222222;





	opacity: 1;





}











.info #form-div {





	padding: 15px;





}











.info i {





	text-align: center;





	color: rgba(144, 5, 5, 0.6);





	cursor: pointer;





	padding: 15px;





}











.info #form-div h1 {





	margin: 0px;





	font-size: 26px;





}











.info {





	position: absolute;





	top: 20px;





	left: 50%;





	transform: translateX(-50%);





	transition-property: all;





	transition-duration: .5s;





	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);





}











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





	#sceneList {





		width: 380px;





	}





}











@media screen and (min-width:820px) {





	#form-div.open {





		width: 700px;





	}





	#sceneList.item-4 {





		width: 700px;





	}





	#sceneList.item-4 .flickity-prev-next-button {





		display: none;





	}





	.item-3 .flickity-prev-next-button {





		display: none;





	}





}











#sceneList {





	left: 50%;





	transform: translateX(-50%);





}











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





	#sceneList {





		width: 160px;





	}





	.scene #img {





		width: 150px !important;





		/*  height: 60px !important;;*/





		margin-left: 3px;





		margin-right: 3px;





		border: 2px solid #C9C6C3;





	}





}











.mobile #sceneList {





	bottom: 25px;





}











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





	#form-div.open {





		width: 650px;





	}





}











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





	#form-div.open {





		width: 500px;





	}





}











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





	#form-div.open {





		width: 300px;





	}





}











.desktop #showIconButton {





	display: none;





}











#form-div {





	color: #222222;





	padding-left: 35px;





	padding-right: 35px;





	padding-top: 10px;





	padding-bottom: 50px;





	margin-left: auto;





	margin-right: auto;





	-moz-border-radius: 7px;





	-webkit-border-radius: 7px;





}











.info .control-inner {





	background-color: rgba(255, 255, 255, 0.0);





}











#nested {





	position: absolute;





	top: 0px;





	left: 0px;





	font-size: 200%;





	color: rgba(217, 83, 79, 0.7);





}











.fullscreen-bg:before {





	content: '';





	position: absolute;





	border-radius: 5px;





	top: 0;





	right: 0;





	bottom: 0;





	left: 0;





}











#functions {





	transition: all .75s ease;





}











.mobile #functions {





	position: absolute;





	margin-left: 500px;

display: none;



}











.mobile #functions.open {
	margin-left: 0px;
	position: relative;
	display: block;
}











li {





	display: list-item;





	list-style-type: none;





	margin-left: 25px;





}











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





	#sceneList {





		width: 160px !important;





	}





	.scene #img {





		width: 150px !important;





		/*  height: 60px !important;;*/





		margin-left: 3px;





		margin-right: 3px;





		border: 2px solid #C9C6C3;





	}





}











.context-menu-item {





	list-style: none !important;





	margin-left: 0px !important;





}











@media screen and (min-width:1030px) {





	#sceneList.item-6, #sceneList.item-7, #sceneList.item-8, #sceneList.item-9,





		#sceneList.item-10, #sceneList.item-11, #sceneList.item-12, #sceneList.item-13,





		#sceneList.item-14 {





		width: 950px;





	}





	#sceneList.item-5 {





		width: 875px;





	}





	#sceneList.item-5 .flickity-prev-next-button {





		display: none;





	}





}











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





	#sceneList {





		width: 680px;





	}





}











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





	#sceneList {





		width: 380px;





	}





}











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





	#sceneList {





		width: 380px;





	}





}











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





	#sceneList {





		width: 160px !important;





	}





	.scene #img {





		width: 150px !important;





		margin-left: 3px;





		margin-right: 3px;





		border: 2px solid #C9C6C3;





	}





}











#sceneList.item-3 {





	width: 525px;





	/* left:50%; */





	/* transform:translateX(-50%); */





}











#media-popupwrapper {





	position: absolute;





	top: 0;





	left: 0;





	width: 100%;





	height: 100%;





	z-index: 6;





	background: url(fancybox_overlay.png);





}











.tooltip-inner {





	border: 1px solid black;





	padding: 15px;





	font-size: 14px;





	width: 150px;





}











#mode.iconbutton {





	top: 15px;





	left: 50%;





	transform: translateX(-50%);





	position: absolute;





	width: 55px;





	height: 55px;





	border-radius: 50%;





	position: absolute;





	background-color: RGBA(255, 255, 255, 0.8);





	opacity: 0.9;





	padding: 14px 12px 12px 12px;





}











#mode.iconbutton {





	width: 70px;





	height: 70px;





}











#mode.iconbutton .fa {





	font-size: 3em;





}











.modal .fade .modal-dialog {





	transition: transform 2s cubic-bezier(0, 0, 0.2, 1);





	transform: translate(0, -55%);





}











.info-hotspot-title-wrapper:hover {





	width: 243px ;





}











.desktop .info-hotspot.visible .info-hotspot-title-wrapper, .desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper





	{





	width: 243px ;





}











.ground .scene.floor {





	display: none;





}











.floor .scene.ground {





	display: none;





}











.info-hotspot-title-wrapper {





	padding: 0 5px;





	transition: width 0s 0.4s, padding 0s 0.4s;





	text-align: center;





	font-size: 1.4em;





}























.tooltip.bottom .tooltip-arrow {





	border-left-color: rgba(255, 255, 255, 0) !important;





}











.link_boven::before {





	font-family: 'sgfont';





	content: "\e907";





}











.desktop.no-touch .info-hotspot .info-hotspot-header:hover {





	width: 285px;





	border-radius: 5px;





	transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;





}











.scene li.text {





	font-weight: normal;





}











#modal #contact .modal-body {





	position: relative;





	padding: 30px 0px 0px 30px;





}











#modal .modal-header {





	border-radius: 8px 8px 0 0;





}











#modal .modal-content {





	border-radius: 9px;





}











#modal .modal-dialog .content {





	padding-bottom: 30px;





	margin-top: 10px;





}











#modal .modal-dialog .info-text {





	padding-right: 30px;





	letter-spacing: 0.5px;





}











#modal .modal-dialog .modal-body-text {





	letter-spacing: 0.5px;



}





@media ( min-width : 768px) {





	#modal .modal-dialog {





		width: 50%;





		margin: 30px auto;





	}





}











@media ( min-width : 768px) {





	#modal #contact .modal-dialog {





		width: 600px;





		margin: 30px auto;





	}





}











@media ( min-width : 768px) {





	#modal #welcome .modal-dialog {





		width: 600px;





		margin: 30px auto





	}





}











@media ( min-width : 768px) {





	#modal #ligging .modal-dialog {





		width: 70%;





		margin: 30px auto;





	}





}





@media ( min-width : 768px) {





	#modal .gallerij .modal-dialog {





		width: 70%;





		margin: 30px auto;





	}





}





@media ( max-width : 768px) {





	#modal .modal-dialog {





		width: 391px;





		margin: 30px auto;





	}





}











@media ( max-width : 768px) {





	#modal #contact .modal-dialog {





		height: 750px;





		margin: 30px auto;





	}





}











@media ( max-width : 768px) {





	#modal #contact .modal-body-text #info {





		width: 300px;





	}





	#modal #contact .modal-body-text .info-text {





		width: 100%;





	}





	#modal #contact .modal-body {





		padding: 30px 0px 0px 40px;





	}





}











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





	#modal .modal-dialog {





		width: 100%;





	}





	#contact .modal-dialog {





		height: 700px;





	}





}











a, a:hover, a:active, a:visited {





	text-decoration: none;





	color: #899213 !important;





	font-weight: bold;





}











.infotext {





	margin-top: 10px;





	font-size: 1.2em;





	margin-bottom: 0px;

	

	padding-left: 10px;

	

	padding-right: 10px;





}



.infotext h3 {

	

	font-size: 22px;

	line-height: 1.3;

}







.infolist {





	margin-top: 10px;





}











#overlay {





	width: 100%;





	height: 100%;



	position: absolute;





	-webkit-transition: background 0.5s linear;





	-moz-transition: background 0.5s linear;





	-ms-transition: background 0.5s linear;





	-o-transition: background 0.5s linear;





	transition: background 0.5s linear;





}























.info-hotspot .info-hotspot-header {





	width: 50px;





	height: 50px;





	border-radius: 50%;





	background-color: #fff !important;





	cursor: pointer;





	border: solid 2px;





	border-color: #fff !important;





}











video::-webkit-media-controls-panel {





	display: flex !important;





	opacity: 1 !important;

	

	





}











/*











.info-hotspot .info-hotspot-header:hover {

















    border-color: white;





	background-color: #999900 !important;

















}























.info-hotspot .info-hotspot-title-wrapper{

















	display:none;

















}









































.control-outer {





    background-color: rgba(255, 255, 255, 0.8) !important;





}











*/





.zoom-hotspot-icon-wrapper {





	padding: 0px;





	margin: 3px;





	margin-left: 6px;





	margin-top: 4px;





	cursor: pointer;





}











/*

















.zoom-hotspot-icon-wrapper:hover .fa{

















	

















	color: white;

















}

















*/





.zoom-hotspot-icon-wrapper .fa {





	color: #999900;





}











.modal {





	/*	background-color:rgba(0,0,0,0.7);*/





	





}











.info-hotspot .info-hotspot-title {





	color: #999900;





	padding-left: 35px;





	padding-top: 12px;





}











.modal-content {





	padding-left: 0px;





}











.close {





	font-size: 40px !important;





}











.modal-header h4 {





	float: left;





	color: white;





}











#intrologo {





	position: absolute;





	margin-top: 126px;





	margin-left: 50%;





	transform: translateX(-50%);





}











#introstart {





	position: absolute;





	margin-top: 492px;





	margin-left: 50%;





	transform: translateX(-50%);





}











.tooltip.right {





	margin-left: 60px;





}











.dot {





	width: 40px;





	height: 40px;





	top: 20px;





	left: 20px;





}

















#smallscreenvideo {





	position: absolute;





	width: 720px;





	height: 415px;





	max-width: 100%;





	max-height: 100%;





	top: 50%;





	left: 50%;





	-ms-transform: translateX(-50%) translateY(-50%);





	-moz-transform: translateX(-50%) translateY(-50%);





	-webkit-transform: translateX(-50%) translateY(-50%);





	transform: translateX(-50%) translateY(-50%);





	z-index: 5;





}











#info {





	width: 150px;





	text-align: center;





	float: left;





}











#list-style-5ab3c1b416476 ul li:before {





	font-family: FontAwesome;





	content: "\f00c";





	color: #999900;





}











.mk-list-styles ul li:before {





	position: absolute;





	top: 2px;





	left: 0;





	font-size: 16px;





	line-height: 24px !important;





}











.mk-list-styles ul li {





	position: relative;





	margin: 0 0 6px;





	padding: 0 0 0 21px;





	line-height: 24px !important;





}











.infolist li {





	list-style-type: disc;





}











.info-text p {





	margin-bottom: 15px;





}











.info-text {





	float: right;





	width: 400px;





}











#welcome .modal-content {





	opacity: 1;





}











#contact .modal-dialog {





	height: 400px;





}











.content {





	padding-bottom: 48px;





}











.intro_button {





	cursor: pointer;





	position: relative;





	margin-left: 15px;





	margin-right: 15px;





	text-align: center;





	text-transform: uppercase;





	color: white;





	font-size: 18px;





	z-index: 28;





	border-radius: 5px;





	width: 195px;





	padding-top: 15px;





	padding-bottom: 13px;





	-webkit-transition-duration: 0.4s; /* Safari */





	transition-duration: 0.6s;





}











.intro_button:hover {





	background-color: #2d4811;





	color: #ffffff;





}











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





	#introstart {





		margin-top: 350px !important;





		width: 100% !important;





	}





	.intro_button {





		float: none !important;





		width: 100% !important;





		margin-bottom: 25px;





		margin-left: 0px;





		border-radius: 0;





		position: relative;





		top: 80px;





	}





}











@media screen and (min-width: 560px) {





	#intro img {





		margin-top: 100px;





		max-width: 50%;





	}





}











@media screen and (min-width: 560px) and (max-height: 490px) {





	#intro img {





		margin-top: 100px;





		max-width: 50%;





	}





}











@media screen and (min-width: 560px) and (min-height: 490px) {





	#intro img {





		margin-top: 100px;





		max-width: 50%;





	}





}







/*



@media screen and (min-width: 560px) and (max-height: 490px) {





	#intro img {





		width: 170px !important;





		max-width: 50%





	}





	.intro_button {





		font-size: 12px !important;





		width: 160px !important;





	}





}

*/





/*



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





	#intro img {





		width: 200px;





		max-width: 100%;





	}





}*/











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





	#logo img {





		width: 100px !important;





	}





	.flickity-prev-next-button {











		width: 33px !important;





		height: 33px !important;





	}

	

	.flickity-prev-next-button.next {

    

		right: -50px !important;

	}

	

	.flickity-prev-next-button.previous {

    

		left: -50px !important;

	}

	

	#showmenu {

		

		margin-left: 0px !important;

		

	}











	.toggleScene {





		width: 40px;





		height: 40px;





		font-size: 18px;





		padding-top: 8px;





	}



/*

	.scene .text {





		display: none;





		height: 27px;





	}

*/



	.actionbutton {





		height: 40px;





		margin-bottom: 8px;





	}





	.iconbutton .sgfont {





		font-size: 1.7em;





		margin-top: -1px;





	}





	.iconbutton.text {





		font-size: 1.2em;





		padding-top: 9px;





	}





	#settingspull {





		margin-top: 10px;





	}





	.iconbutton {





		width: 40px;





		height: 40px;





		padding: 10px 8px 8px 8px;





	}





	.fa-2x {





		font-size: 1.5em !important;





	}





	.gyroscope .actionbutton {





		margin-top: 8px;





	}





}











@media screen and (max-height: 550px) AND (max-width: 560px) {





	#intrologo .vierkantlogo img {





		width: 125px !important;





	}





}



	#intrologo .horizontallogo img {



		width: 280px !important;



	}



}











/*@media screen and (max-height: 404px) {

















	#intrologo {

















		display: none !important;

















	}

















}





*/





@media screen and (max-height: 660px) and (min-width:560px) {





	#introstart {





		top: 60%;





		margin-top: 0px;





		transform: translateX(-50%) !important;





	}





	#intrologo {





		margin-top: 0px !important;





		top: 25%;





		transform: translate(-50%, -50%) !important;





	}





}











@media screen and (max-height: 660px) and (max-width: 560px) {





	#intrologo {





		margin-top: 85px !important;





	}





	#introstart {





		top: 50%;





		transform: translateY(-50%) !important;





		margin-top: 0px !important;





		margin-left: 0px !important;





	}





	.intro_button {





		margin-left: 0px;





		margin-right: 0px;





		border-radius: 0px;





	}





}











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





	#ligging {





		display: none;





	}





}











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





	#share {





		display: none;





	}





}











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





	#introstart {





		





	}





	.intro_button {





		width: 175px;





		font-size: 16px;





	}





}

















/*





*INTRO





*





*/











/* INTRO */











@media screen and (min-height: 490px) and (min-width: 760px) {





	





		#intro .vierkantlogo img {





			margin-top: 60px;





			max-width: 60%;





		}





		.vierkantlogo #introstart {





			margin-top: 740px;





		}





		





		





		#intro .horizontallogo img {





			margin-top: 60px;





			max-width: 100%;





		}





		.horizontallogo #introstart {





			margin-top: 740px;





		}





}

















@media screen and (max-height: 800px) and (min-width: 760px) {











		#intro .vierkantlogo img {





			margin-top: 15px;





			max-width: 45%;





		}





		.vierkantlogo #introtext  {





			margin-top: 360px !important;





		}





		.vierkantlogo #introstart {





			margin-top: 600px;





		}





		





		#intro .horizontallogo img {





			margin-top: 15px;





			max-width: 100%;





		}





		.horizontallogo #introtext  {





			margin-top: 340px !important;





		}





		.horizontallogo #introstart {





			margin-top: 600px;





		}





}











@media screen and (max-height: 660px) and (min-width: 760px) {





		





		#intro .vierkantlogo img {





			margin-top: -20px;





			max-width: 34%;





		}





		.vierkantlogo #introtext h1 {





			font-size: 21px;





		}





		.vierkantlogo #introtext p {





			font-size: 16px !important;





		}





		.vierkantlogo #introstart {





			margin-top: 0px !important;





		}





		





		





		#intro .horizontallogo img {





			margin-top: -20px;





		}





		.horizontallogo #introtext h1 {





			font-size: 21px;





		}





		.horizontallogo #introtext p {





			font-size: 24px !important;





		}





		.horizontallogo #introstart {





			margin-top: 0px !important;





		}





}

















@media screen and (min-height: 490px) and (max-width: 760px) {





	





		#intro .vierkantlogo img {





			margin-top: 60px;





			max-width: 60%;





		}





		.vierkantlogo #introtext  {





			margin-top: 450px;





		}





		.vierkantlogo #introtext h1 {





			font-size: 21px;





		}





		.vierkantlogo #introtext p {





			font-size: 16px;





		}





		.vierkantlogo #introstart {





			margin-top: 700px;





		}





		





				#intro .horizontallogo img {





			margin-top: 60px;





			max-width: 100%;





		}





		.horizontallogo #introtext  {





			margin-top: 450px;





		}





		.horizontallogo #introtext h1 {





			font-size: 21px;





		}





		.horizontallogo #introtext p {





			font-size: 24px !important;





		}





		.horizontallogo #introstart {





			margin-top: 700px;





		}





}

















@media screen and (max-height: 800px) and (max-width: 760px) {











		#intro .vierkantlogo img {





			margin-top: 15px;





			max-width: 45%;





		}





		





		.vierkantlogo #introtext  {





			margin-top: 350px !important;





		}





		





		.vierkantlogo #introstart {





			margin-top: 600px;





		}





		





		





		#intro .horizontallogo img {





			margin-top: 15px;





			max-width: 100%;





		}





		





		.horizontallogo #introtext  {





			margin-top: 350px !important;





		}





		





		.horizontallogo #introstart {





			margin-top: 600px;





		}





}











@media screen and (max-height: 660px) and (max-width: 760px) {





		#intro .vierkantlogo img {





			margin-top: -20px;





			max-width: 34%;





		}





		.vierkantlogo #introtext  {





			margin-top: 240px;





		}





		.vierkantlogo #introtext h1 {





			font-size: 17px;





		}





		.vierkantlogo #introtext p {





			font-size: 14px;





		}





		





		#intro .horizontallogo img {





			margin-top: -20px;





			max-width: 80%;





		}





		.horizontallogo #introtext  {





			margin-top: 240px;





		}





		.horizontallogo #introtext h1 {





			font-size: 17px;





		}





		.horizontallogo #introtext p {





			font-size: 24px !important;





		}











}











@media screen and (max-height: 600px) and (max-width: 760px) {





		#intro .vierkantlogo img {





			margin-top: -40px;





			max-width: 34%;





		}





		.vierkantlogo #introtext  {





			margin-top: 175px;





		}





		.vierkantlogo #introstart {





			margin-top: 0px !important;

			



		}





		





		





		#intro .horizontallogo img {





			margin-top: -20px;





			max-width: 80%;





		}





		.horizontallogo #introtext  {





			margin-top: 175px;





		}





		.horizontallogo #introstart {





			margin-top: 0px !important;





		}





}











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











		.vierkantlogo #introstart {





			margin-top: 0px;





			top: 70% !important;





		}





		.vierkantlogo #introstart .intro_button{





			font-size: 15px;





			width: 160px;





		}





		.vierkantlogo #introtext  {





			margin-top: 0px !important;





			top: 40%;





			transform: translate(-50%,-50%);





		}





		





		





				.horizontallogo #introstart {





			margin-top: 0px;





			top: 70% !important;





		}





		.horizontallogo #introstart .intro_button{





			/*font-size: 15px;





			width: 160px;*/





		}





		.horizontallogo #introtext  {





			margin-top: 0px !important;





			top: 36%;





			transform: translate(-50%,-50%);





		}





}











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





	



/*

		.vierkantlogo #introtext  {





			margin-top: 40px;





		}

*/



		.vierkantlogo #introtext {





			top: 20%;





		}





		.vierkantlogo #intrologo {





			top: 50%;





		    transform: translate(-50%,-50%);





			margin-top: 0px !important;





		}





		





		





				.horizontallogo #introtext  {





			margin-top: 40px;





		}





		.horizontallogo #introtext {





			top: 25%;





		}





		.horizontallogo #intrologo {





			top: 50%;





		    transform: translate(-50%,-50%);





			margin-top: 0px !important;





		}



		#intrologo.started {

		-webkit-transition: opacity 1.2s ease-in-out;

		-moz-transition: opacity 1.2s ease-in-out;

		-ms-transition: opacity 1.2s ease-in-out;

		-o-transition: opacity 1.2s ease-in-out;

		opacity: 0;

		}



}

















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





		#intro .vierkantlogo img {





			min-width: 150px;





		}





		.vierkantlogo #introtext {





			min-width: 396px;





		}





		





				#intro .horizontallogo img {





			min-width: 200px;





		}





		.horizontallogo #introtext {





			min-width: 396px;





		}





}	











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





		.vierkantlogo #introstart {





			margin-top: 700px !important;





		}





		.intro_button {





			top: 0px;





		}





		.vierkantlogo #introtext {





		    min-width: 308px;





		}





		





				.horizontallogo #introstart {





			margin-top: 700px !important;





		}





	





		.horizontallogo #introtext {





		    min-width: 250px !important;

	



		}

		

		.horizontallogo #introtext p {



		    font-size: 21px !important;



		}



		#logo img {

			

			width: 100px !important;

			

		}



}











@media screen and (max-width: 560px) and (max-height:800px){





		.vierkantlogo #introstart {





			margin-top: 600px !important;





		}	





		.vierkantlogo #introtext {





			margin-top: 320px !important;





		}	





		





		.horizontallogo #introstart {





			margin-top: 600px !important;





		}	





		.horizontallogo #introtext {





			margin-top: 320px !important;





		}	





}











@media screen and (max-width: 560px) and (max-height:660px){





		.vierkantlogo #introstart {





			margin-top: 0px !important;





			transform: translate(-50%,0%) !important;





			margin-left: 50% !important;





		}





		.vierkantlogo #intrologo {





			margin-top: 0px !important;	





			top: 25%;





			transform: translate(-50%, -50%) !important;





		}





		.vierkantlogo #introtext {





			margin-top: 0px !important;





		}	





		





				.horizontallogo #introstart {





			margin-top: 0px !important;





			transform: translate(-50%,0%) !important;





			margin-left: 50% !important;





		}





		.horizontallogo #intrologo {





			margin-top: 0px !important;	





			top: 25%;





			transform: translate(-50%, -50%) !important;





		}





		.horizontallogo #introtext {





			margin-top: 0px !important;





		}	





}

















.vierkantlogo #introtext{











    position: absolute;





    margin-top: 470px;





    margin-left: 50%;





    transform: translateX(-50%);





	max-width: 500px;





}











.horizontallogo #introtext{











    position: absolute;





    margin-top: 420px;





    margin-left: 50%;





    transform: translateX(-50%);



	min-width: 600px;



}











#introtext h1{





	padding-top:0px;





	font-size: 25px;





}











#introtext p{





	padding-top:0px;





	margin-top:0px;





	font-size: 20px;





}

















#intro{





	transition-timing-function: ease-in;





	background-color:transparent;





	-webkit-transition: background 2s linear;





    -moz-transition: background 2s linear;





    -ms-transition: background 2s linear;





    -o-transition: background 2s linear;





    transition: background 2s linear;





}











#intro.trans{





	background-image: none;





}











#bg{





	 position: absolute;





	 top: 0;





	 left: 0;





	 bottom: 0;





	 right: 0;





	 background-image: url(../img/intro.jpg);





	 background-size: cover;





	 background-position: center 90%;





}



	

/*@media (min-width: 768px){

	#modal .modal-dialog {

		width: 35%;

		margin: 0px auto;

		max-width: 1600px;

	}



}*/



@media (max-width: 768px){

	#modal .modal-dialog {

		margin: 0px auto;

	}



}





.video-hotspot{

	   pointer-events: none;

}




.videomodal {
	position:relative;
}