:root {
	--white:#fff;
	--background-color:#d0e6ee;
	--headline-color:#000;
	--link-color:#0067e5;
	--hover-color:00479e;
}

.jstour360popup h2{
	margin-top: 0;
	margin-bottom: 20px;
	font-size:20px;
	font-weight:700;
	color:var(--headline-color);
}
.jstour360popup h3{
	margin-top: 0;
	margin-bottom: 10px;
	font-size:17px;
	color:var(--headline-color);
}
.jstour360highlightedHotSpot {
	background-size: 45px !important;
	background-color: var(--link-color) !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 28px !important;
	background-position: -1px !important;
}
#jstour360container {
	width: calc(100% - 650px);
	height: 750px;
	margin-bottom: 40px;
	border: 5px solid #fff;
	box-shadow: 11px 11px 35px 0 rgba(0,0,0,.3);
	position: relative;

}

#jstour360containerView {
	width: 100%;
	height: 100%;
}

/********************** map *********************/

#jstour360map{
	width:600px;
	position: absolute;
	right: 0;
	border:5px solid #fff;
	font-size:20px;
	box-shadow:11px 11px 35px 0 rgba(0,0,0,.3)
} 
#jstour360map img{
	width: 100%;
	display:block;
} 
#jstour360map area{
	cursor: pointer;
}

/********************** info-popup *********************/

.jstour360popup {
	position: absolute;
	padding: 30px 20px 20px 20px;
	background: #fff;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
	width: 500px;
	left: 50%;
	margin-left: -250px;
	box-sizing: border-box;
	top: 250px;
	z-index: 2;
	
	/* SAFARI-FIX */
	transform: translateZ(10000px);
}

.jstour360popup .close {
	cursor: pointer;
	position: absolute;
	display: block;
	right: 10px;
	top: 10px;
	font-weight: bold;
	font-size: 30px;
	line-height: 100%;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN' 'http:%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3C!-- Creator: CorelDRAW X7 --%3E%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' xml:space='preserve' width='7.2148mm' height='7.2148mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 206 206' xmlns:xlink='http:%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cstyle type='text%2Fcss'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:black%7D %5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id='Ebene_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'%2F%3E%3Cpolygon class='fil0' points='23,206 0,182 80,103 0,23 23,0 103,80 182,0 206,23 126,103 206,182 182,206 103,126 '%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-size:10px;
	background-repeat: no-repeat;
	background-position:10px;
	width:10px;
	height:10px;
	padding:10px;
	text-indent:-9999px;
}

/********************** story *********************/

#jstour360storyInfo{
	position: absolute;
	top: 0;
	width: 100%;
	background: #fff;
	/* box-shadow: 0px 0px 10px rgba(0,0,0,0.8); */
	z-index: 2;
	padding: 10px 10px 10px 40px;
	box-sizing:border-box;
	color:#000;
  	
	/* SAFARI-FIX */
	transform: translateZ(10000px);
}
#jstour360storyInfo:empty{
	display: none;
}

#jstour360storyInventory{
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 60px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN' 'http:%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3C!-- Creator: CorelDRAW X7 --%3E%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' xml:space='preserve' width='8.0345mm' height='10.4789mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 3889 5072' xmlns:xlink='http:%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cstyle type='text%2Fcss'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:black%7D .fil1 %7Bfill:white%7D %5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id='Ebene_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'%2F%3E%3Crect class='fil0' width='3889' height='5072' rx='194' ry='174'%2F%3E%3Crect class='fil1' x='359' y='345' width='3171' height='4136'%2F%3E%3Cpath class='fil0' d='M1579 1352l1465 0 0 227 -1465 0 0 -227zm-734 2033l71 -71 182 182 225 -226 71 71 -226 225 -26 27 -44 44 -253 -252zm0 -1029l71 -71 182 182 225 -226 71 71 -226 225 -26 27 -44 44 -253 -252zm0 -1029l71 -71 182 181 225 -225 71 71 -226 225 -26 27 -44 44 -253 -252zm734 2083l1465 0 0 227 -1465 0 0 -227zm0 -1029l1465 0 0 227 -1465 0 0 -227z'%2F%3E%3Ccircle class='fil1' cx='1944' cy='4770' r='123'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 97;
	background-size:50px 60px;
  	
	/* SAFARI-FIX */
	transform: translateZ(10000px);
}

/* map-pin to mark the goal > svg-converter: https://yoksel.github.io/url-encoder/ */
#jstour360storyMapPin {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN' 'http:%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd'%3E%3C!-- Creator: CorelDRAW X7 --%3E%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' xml:space='preserve' width='6.5906mm' height='11.6713mm' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd'%0AviewBox='0 0 77 136' xmlns:xlink='http:%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cstyle type='text%2Fcss'%3E%3C!%5BCDATA%5B .fil0 %7Bfill:black%7D %5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id='Ebene_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'%2F%3E%3Cpath class='fil0' d='M38 136l-35 -82 0 0c-2,-5 -3,-10 -3,-15l0 -1c0,-19 15,-36 34,-38l1 0c0,0 0,0 0,0l0 0c1,0 1,0 1,0l0 0c1,0 1,0 1,0l0 0c1,0 1,0 1,0 1,0 1,0 1,0l0 0c1,0 1,0 1,0l0 0c1,0 1,0 1,0l0 0c1,0 1,0 1,0l0 0c20,2 35,19 35,38l0 1c0,5 -1,10 -4,15l0 0 -35 82zm0 -118c13,0 23,10 23,22 0,12 -10,22 -23,22 -12,0 -22,-10 -22,-22 0,-12 10,-22 22,-22z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	position: absolute;
	width: 40px;
	height: 40px;
	margin-left: -15px;
	margin-top: -35px;
}

/* hotSpots that leads the user to the current quest-goal and therefore should be highlighted */
.jstour360highlightedHotSpot{
	background-color: #0067e5;
}

/********************** RESPONSIVE *********************/

@media only screen and (max-width: 1700px) {
	#jstour360container {
		height:600px!important;		
	}
}
@media only screen and (max-width: 1300px) {
	#jstour360container {
		width:100%!important;
		box-sizing:border-box;
	}
	#jstour360map {
		position:inherit!important;
		margin:0 0 20px;
	}
	.jstour360popup{
		top: 150px !important;
	}
}

@media only screen and (max-width: 900px) {
	#jstour360map {
		display:none;
	}
	#jstour360container{
		height: 500px !important;		
	}
	.jstour360popup{
		top: 100px !important;
	}
}
@media only screen and (max-width: 769px) {
	#jstour360map {
		position:inherit!important;
		margin:0 0 0px -75px;
		scale:0.75;
	}
	.jstour360popup {
		position: absolute;
		padding: 20px 10px 10px 10px;
		background: #fff;
		z-index: 9999;
		width: 90%;
		left: 5%;
		margin: 0;
	}
}
@media only screen and (max-width: 600px) {
	#jstour360container{
		height: 350px !important;		
	}
	.jstour360popup{
		top: 50px !important;
	}
}
@media only screen and (max-width: 530px) {
	#jstour360map {
		position:inherit!important;
		margin:-50px 0 -20px -150px;
		scale:0.5;
		border:10px solid #fff!important;
		background:#fff;
	}
}