*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.boxsize{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,body{
	display: flex;
	font-size:2vh;
	background-color:#87D5FF;
	font-family: Arial, Helvetica, sans-serif;
	color:#555555;
	overflow: hidden;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Firefox */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome and Opera */
}



#mapcontainer{
	//display: flex;
	//align-items: center;
	//justify-content:center;
	z-index:1;
	position: relative;
	//height:100vh;
	//width:100vw;
}


#header {
	top:0;
	border-bottom:1px solid rgba(0,0,0,0.35);
	filter: drop-shadow(2px 2px 2px rgba(0,0,0, 0.1));
	height:calc(12vh);
	font-size:calc(5vh);
}

#footer {
	display: flex;
	align-items: flex-start;
	justify-content:center;
	flex-direction:column;
	bottom:0;
	border-top:1px solid rgba(0,0,0,0.35);
	filter: drop-shadow(-2px -2px 2px rgba(0,0,0, 0.1));	
	height:calc(12vh);
	
}

#currentyear{
	display: flex;
	align-self:center;
    align-items: center; 
    justify-content: center
	position:relative;
	height:60%;
	font-size:calc(4vh);

}

#timeline {
	position:relative;
	display: flex;
	align-items:flex-end;
	height:15%;
	width:100vw;
	font-size:calc(2vh);
}

#timemarkers {
	position:relative;
	display: flex;
	align-items:flex-end;
	height:15%;
	width:100vw;

}
#timebar {
	display: flex;
	position:relative;
	width:94vw;
	left:3vw;
	height:10%;
	border-radius: 0 2px 2px 0;
	background-color:red;
	border:1px solid rgba(0,0,0,0.35);
}

.timeline_year{
	position:absolute;
	display: flex;
	align-items:flex-end;
	justify-content: center;
	height:100%;
	width:2vw;

}

.timeline_marker{
	position:absolute;
	border-left:2px solid rgba(0,0,0,0.7);
	height:100%;
}


.hf{
	z-index:3;
	display:flex;
	align-items: center;
	justify-content:center;
	background-color:#fdfdfd;
	position:absolute;
	width:100vw;
}


.infobox{
	position:absolute;
	z-index:3;
	padding:2vh 1.3vw 2vh 1.3vw;
	background-color:rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.7);
	border-radius: 3px;
	background-color:white;
	transition: all 400ms;
	opacity:0;
	filter: drop-shadow(4px 4px 1px rgba(0,0,0, 0.5));
}

.infobox h3 {
	font-size:2.1vh;
	padding-bottom:2px;
	border-bottom:1px solid rgba(0,0,0,0.2);
	margin-bottom:1vh;
}

.infobox h4 {
	font-size:1.5vh;
	margin-bottom:1vh;
}

#norway_infobox{
	top:14vh;
	left:20vw;
}

#germany_infobox{
	top:54vh;
	left:20vw;
}

#denmark_infobox{
	top:14vh;
	left:62vw;
}

#italy_infobox{
	top:40vh;
	left:62vw;
}

#sweden_infobox{
	top:14vh;
	left:3.5vw;
}

#austria_infobox{
	top:14vh;
	left:79vw;
}

#hungary_infobox{
	top:40vh;
	left:79vw;
}

#austria-hungary_infobox{
	top:14vh;
	left:79vw;
}

.norway_color::before{
	content: "";
	background-color: #ed5565; /*linear-gradient(#ed5565, #ececec);*/
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.15;
}

.denmark_color::before{
	content: "";
	background-color: #d0691e; /*linear-gradient(#d0691e, #ececec);*/
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.15;

}

.germany_color::before{
	content: "";
	background-color: #ffeb3b; /*linear-gradient(#ffeb3b, #ececec);*/
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.15;

}

.italy_color::before{
	content: "";
	background-color: #4fc2e5; /*linear-gradient(#4fc2e5, #ececec);*/
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;

}

.sweden_color::before{
	content: "";
	background: linear-gradient(#ad93e6, #ececec);
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;

}

.austria_color::before{
	content: "";
	background: linear-gradient(#9fd477, #ececec);
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;

}

.austria-hungary_color::before{
	content: "";
	background: linear-gradient(#9fd477, #ececec);
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;

}

.hungary_color::before{
	content: "";
	background: linear-gradient(#113f67, #ececec);
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0.3;

}

.active_place{
	color:#FF0000;
	font-weight:bold;
	font-size:larger;
}

#midlinex{
	display:none;
	z-index:10;
	position: absolute;
	left:50vw;
	top:0px;
	width:1px;
	height:100vh;
	background:red;
	
}

#midliney{
	display:none;
	z-index:10;
	position: absolute;
	left:0;
	top:50vh;
	height:1px;
	width:100vw;
	background:red;
	
}

.show_poi{
	opacity:1 !important;
}

.poi{
	stroke: black;   
	stroke-width:0.13;  
	fill:red; 
	opacity:0;
	transition: opacity 400ms;
}

.poi_label{
	fill:black;
	font-size:2px;
	font-family: "Arial Narrow";
}

.show_infobox{
	opacity:1;
}

.active_infobox{
	filter: drop-shadow(11px 11px 4px rgba(0,0,0, 0.6))
			drop-shadow(15px 15px 12px rgba(0,0,0, 0.2));
	transform:scale(1.07);
	border: 1px solid rgba(0,0,0,0.7);

 }

.active_place{
	color:#a5453e;
	font-size:105%;
}


.country_sum{
	margin-top:1vh;
	padding-top:1.2vh;
	border-top:1px solid rgba(0,0,0,0.2);
	font-weight:bold;
	font-size:90%;
}