* {

	box-sizing: border-box;

}




body {

	font-family: Helvetica Neue, Helvetica, Arial, 'Sans serif';
	font-size: 18px;
	font-weight: 500;

	color: black;

	background-color: white;

	margin: 0px;
	padding: 0px;

	overflow: hidden;


}



#ALLES {
	
	height: 100vh;
	width: 100vw;
	
	border: 2px solid transparent;
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	QUADRANTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



.QUADRANT_empty, .QUADRANT {

	position: absolute;

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

	background-image: url(../images/quadrant.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	height: 10px;
	width: 10px;

}


.QUADRANT:hover {

	outline: solid 1px rgba(0,0,0,.1);
	background-image: none;

}



.QUADRANT div {

	height: 60%;
	width: 60%;

	margin-top: 20%;
	margin-left: 20%;

	border-radius: 100%;

	/* animation: attack .1s 0s forwards; */

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	INFOCARD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#INFOCARD {


	position: absolute;

	height: auto;
	width: auto;

	background-color: white;

	border: 1px black solid;
	border-radius: 5px;

	font-size: 18px;
	font-weight: 400;

	padding: 20px;
	padding-top: 8px;
	padding-left: 15px;
	padding-bottom: 18px;

	display: none;

	white-space: nowrap;

	z-index: 200;

}


#INFOCARD h2 {

	margin: 0px;
	margin-bottom: 5px;

	text-transform: capitalize;

}

#INFOCARD .capital_crest {

	display: inline-block;

	height: 12px;
	width: 12px;

	margin-right: 6px;

	border-radius: 2px;


}


#INFOCARD .treaty {

	float: left;

	height: 20px;
	width: 20px;

	border-radius: 100%;

	background-image: url(../images/peace_sign.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;

	margin-top: 7px;
	margin-right: 5px;


}


#INFOCARD .treaty:nth-of-type(11) {

	clear: left;

}




.peace_treaty_base, .peace_treaty_duration {

	position: absolute;

	margin-top: -9px;
	margin-left: -8.5px;

	height: 31px;
	width: 31px;


}




.peace_treaty_base circle {

	stroke: rgba(0,0,0,.2);
	stroke: white;

}


.peace_treaty_duration circle {

	stroke: rgba(0,0,0,.5);

}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PEACE ZONE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.PEACE_SIGN {


	position: absolute;

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

	background-image: url(../images/peace_sign.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 90%;

	border-radius: 100%;

	animation: peace_sign_flash .5s 0s forwards;

	filter: invert(0%);

	z-index: 1;

}


@keyframes peace_sign_flash {

	0% { opacity: 1; }
	99% { opacity: 1; }
  100% { opacity: 0; }


}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	COLOR HISTORY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#COLOR_HISTORY, #ABDUNKLER {

	position: absolute;

	height: 80%;
	width: 80%;

	top: 10%;
	left: 10%;

	background-color: white;

	display: none;

	z-index: 102;


}


#COLOR_HISTORY {

	overflow-x: scroll;
	overflow-y: hidden;

	padding-top: 10px;
	padding-left: 10px;


}


#ABDUNKLER {


	height: 100%;
	width: 100%;

	top: 0%;
	left: 0%;

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

	z-index: 101;



}


#SCHLIESSEN {

	position: absolute;

	height: 50px;
	width: 50px;

	top: 10%;
	left: 10%;

	margin-top: 10px;
	margin-left: 10px;

	display: none;

	z-index: 103;

	zoom: .6;

	opacity: .8;



}


#SCHLIESSEN div {

	height: 2px;
	width: 70px;

	background-color: black;

	transform: rotate(45deg);

	margin-top: 50%;
	margin-left: -10px;

	border-radius: 1px;

	transform-origin: 50% 50%;



}


#SCHLIESSEN div:nth-of-type(2) {

	transform: rotate(-45deg);

	margin-top: 0%;

}




.dataviz_name_column {

	position: fixed;

	height: 100%;
	width: 100px;

	display: none;

}

.dataviz_name {

	clear: left;

	font-size: 18px;
	font-weight: 600;

	margin-top: 0px;
	margin-bottom: 0px;

	text-transform: capitalize;

	opacity: .5;

}


.dataviz_timeline {

	height: 80px;
	width: 10000px;

	white-space: nowrap;





}


.dataviz_time_column {

	height: 100%;
	width: 10px;

	float: left;

	transform: scaleY(-1);

}


.dataviz_time_column:hover div {

	opacity: .8;

}


.dataviz_timesegment {


	width: 10px;



}


.dataviz_timesegment div {


	display: table;

	height: 100%;
	width: 100%;


}


.dataviz_timesegment div div {


	display: table-cell;
	vertical-align: middle;

	height: auto;
	width: 100%;

	font-size: 3px;
	line-height: 100%;
	text-align: center;

	cursor: default;


}


.dataviz_timesegment:hover {

	filter: saturate(2);

}


.dataviz_timemarker {

	position: absolute;

	height: 10px;
	width: 10px;

	color: black;

	border-left: solid black 1px;

	transform: scaleY(-1);


}

.dataviz_timemarker div {

	height: 40px;
	width: 60px;

	font-size: 12px;

	margin-top: -25px;
	margin-left: -30px;

	text-align: center


}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MOBILE TAB BAR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#TAB_BAR, #TAB_BAR_desktop {

	position: fixed;

	text-align: center;

	bottom: 0px;
	left: 0px;

	height: 70px;
	width: 100%;

	background-color: transparent;

	z-index: 100;
}


#TAB_BAR_desktop {

	bottom: 50px;
	left: auto;
	right: 50px;

	height: 50px;
	width: 150px;

	border-radius: 10px;

}


#TAB_BAR button, #TAB_BAR_desktop button {

	display: inline-block;

	height: 70px;
	width: 32%;

	border: none;
	border-radius: 5px;

	background-color: transparent;

	background-repeat: no-repeat;
	background-position: center 8px;
	background-size: auto 70%;

	opacity: .5;

	cursor: pointer;
}


#TAB_BAR_desktop button {

	height: 50px;
	width: 32%;

}



#TAB_BAR button:focus, #TAB_BAR_desktop button:focus {

	outline: 0;

}


#TAB_BAR button:disabled, #TAB_BAR_desktop button:disabled {

	opacity: .1;
	
	cursor: default;

}


#TAB_BAR button:active, #TAB_BAR_desktop button:active {

	opacity: 1;

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

}


#TAB_BAR button:nth-of-type(1), #TAB_BAR_desktop button:nth-of-type(1) {

	background-image: url(../images/new.png);


}


#TAB_BAR button:nth-of-type(2), #TAB_BAR_desktop button:nth-of-type(2) {

	width: 33%;

	background-image: url(../images/pause.png);


}


#TAB_BAR button:nth-of-type(3), #TAB_BAR_desktop button:nth-of-type(3) {

	background-image: url(../images/desaster.png);


}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/







@keyframes attack {

	0% { opacity: 0; }
    50% { opacity: 1; }
  	100% { opacity: 0; }


}



@keyframes highlight_color {

	0% { filter: brightness(125%); }
	99% { filter: brightness(125%); }
  100% { filter: brightness(100%); }

}


@keyframes highlight_color_negative {

	0% { filter: brightness(80%); }
	99% { filter: brightness(80%); }
  100% { filter: brightness(100%); }

}