#ALLES {
	
	
	
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	3D BUILDING VIEW
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.roof, .tower_roof, .wall, .tower_wall, .shadow, .tower_shadow, .mountain_shadow, .spaceship_shadow, .satellite_shadow {

	display: block;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROOFS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.BUILDING .roof, .BUILDING .tower_roof, .PAUSE .roof, .PAUSE .tower_roof, .PLAY .roof, .PLAY .tower_roof, .STATS .roof, .STATS .tower_roof, .CAR .roof {
	
	height: 100%;
	width: 100%;
	
	margin-top: -10px;
	
	background-color: #B2AFA8;
	
	border-left: 1px solid #cdc9c2;		/* 1px solid #BAB7B2; */
	border-top: 1px solid #cdc9c2;		/* 1px solid #BAB7B2; */
	border-right: 1px solid #918e88;	/*  1px solid #A09D98; */
	
	animation: roof_construction var(--d, .5s) forwards linear;
	
	user-select: none;
}







@keyframes roof_construction {

    0% { margin-top: 0px; }
    100% { margin-top: var(--m, -10px); }
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	WALLS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.BUILDING .wall, .BUILDING .tower_wall, .PAUSE .wall, .PLAY .wall, .STATS .wall, .CAR .wall {
	
	height: 10px;
	width: 100%;
	
	background-color: #888481;
	
	border-left: 1px solid #94918E;		/* 1px solid #94918E */
	border-right: 1px solid #716d69;	/* 1px solid #7A7774 */
	
	border-bottom: 5px solid #888481;
		
	animation: wall_construction  var(--d, .5s) forwards linear;
}


.BUILDING .wall, .BUILDING .tower_wall, .PAUSE .wall, .PLAY .wall, .STATS .wall {
	
	background-image: url(../images/windows.png);
	background-position: center -1px;
	background-size: 50px 5px;
	background-repeat: repeat;
}


.BUILDING .wall {
	
	border-bottom: 3px solid #888481;
}





@keyframes wall_construction {

    0% { height: 0px; }
    100% { height: var(--h, 10px); }
}





.BUILDING .tower_wall {
	
	overflow: hidden;
}




.BUILDING .tower_wall .name_tag {
	
	position: relative;
	
	width: 100%;
	
	padding: 4px;
	
	font-size: 8px;
	line-height: 100%;
	font-weight: 600;
	text-align: left;
	color: white;
	
	word-wrap: break-word;

	user-select: none;
	
	pointer-events: none;
}


@keyframes name_tag_flash {

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



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SHADOWS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.BUILDING .shadow, .BUILDING .tower_shadow, .PAUSE .shadow, .PLAY .shadow, .STATS .shadow, .TREE .shadow, .CAR .shadow {
	
	height: 10px;
	width: 100%;
	
	background-color: rgba(0,0,0,.25);	/* .3 */
	
	transform: skew(12deg);
	transform-origin: top left;
	
	animation: shadow_construction var(--d, .5s) forwards linear;
	
	pointer-events: none;
}


.BUILDING .tower_shadow {
	
	height: 100px;
	
	animation: tower_shadow_construction var(--d, .5s) forwards linear;
}


@keyframes shadow_construction {

    0% { height: 0px; }
    100% { height: var(--h, 10px); }
}


@keyframes tower_shadow_construction {

    0% { height: 0px; }
    100% { height: var(--h, 100px); }
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BUILDING DESTRUCTION
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.RUBBLE {
	
	border-top: 5px solid rgba(0,0,0,.1);
}


.BUILDING .purpose {
	
	margin-top: -10px;
	
	animation: roof_construction var(--d, .5s) forwards linear;
}




.RUBBLE .roof, .RUBBLE .tower_roof, .RUBBLE .wall, .RUBBLE .tower_wall, .RUBBLE .shadow, .RUBBLE .tower_shadow {

	display: none;	
}




@keyframes building_destruction {

    0% { transform: scaleY(1); }
    100% { transform: scaleY(.1); }
}

@keyframes road_destruction {

    0% { transform: scaleX(1); }
    100% { transform: scaleX(.1); }
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PAUSE / PLAY ADMINISTRATIVE BUILDING
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.PAUSE .control, .PLAY .control, .STATS .control {
	
	margin-top: -10px;
	
	animation: roof_construction var(--d, .5s) forwards linear;

}


.PAUSE:active .control, .PLAY:active .control, .STATS:active .control, .PAUSE:active .roof, .PLAY:active .roof, .STATS:active .roof {
	
	margin-top: 0px;
	
	animation: press .05s forwards linear;	
}


.PAUSE:active .wall, .PAUSE:active .shadow, .PLAY:active .wall, .PLAY:active .shadow, .STATS:active .wall, .STATS:active .shadow {
	
	display: none;
}	



.PAUSE:hover .interactuator, .PLAY:hover .interactuator, .STATS:hover .interactuator {	
	
	display: block;
}	


@keyframes press {

    0% { margin-top: -10px; }
    100% { margin-top: 0px; }
}




.PAUSE .interactuator, .PLAY .interactuator, .STATS .interactuator {
	
	position: absolute;
	
	width: 100%;
	
	display: none;

}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SIMTLE ADMINISTRATIVE BUILDING
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.STATS .wall #city_rules {
	
	font-size: 3px;
	
	display: none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SPACESHIP
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.SPACESHIP {
	
	background-color: transparent;	
	background-image: none;
}


.SPACESHIP .spaceship_body, .SPACESHIP .satellite_bowl {
	
	position: relative;
	
	height: 100px;
	width: 50px;
	
	margin-top: -50px;
	margin-left: 0px;
	
	padding-top: 91px;
	
	background-image: url(../images/space_mode/spaceship.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	
	z-index: 1;
}


.SPACESHIP .spaceship_shadow, .SPACESHIP .satellite_shadow {
	
	position: relative;
	
	height: 90px; 
	width: 50px;
	
	margin-top: -15px;
	margin-left: 10px;
	
	background-image: url(../images/space_mode/spaceship_shadow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	
	transform: skew(12deg);
	
	z-index: 0;
	
	pointer-events: none;
}


.SPACESHIP .satellite_bowl {
	
	background-image: url(../images/space_mode/satellite.png);
}


.SPACESHIP .satellite_shadow {
		
	background-image: url(../images/space_mode/satellite_shadow.png);
}



.spaceship_body .FIRE {
	
	width: 12px;
	
	margin-left: 4px;
	
	border-radius: 0px 0px 100% 100%;
	
	animation: spaceship_burn .2s infinite;
}


.spaceship_body .FIRE:nth-of-type(3), .spaceship_body .FIRE:nth-of-type(4) {
	
	margin-top: 9px;
	margin-left: 19px;
}

.spaceship_body .FIRE:nth-of-type(5), .spaceship_body .FIRE:nth-of-type(6) {
	
	margin-left: 34px;
}


.spaceship_body .FIRE:nth-of-type(1), .spaceship_body .FIRE:nth-of-type(5) {
	
	animation-delay: .25s;
}

.spaceship_body .FIRE:nth-of-type(3) {
	
	animation-delay: .35s;
}

.spaceship_body .FIRE:nth-of-type(1), .spaceship_body .FIRE:nth-of-type(3), .spaceship_body .FIRE:nth-of-type(5) {
	
	background-color: rgba(255,0,0,.5);
}



@keyframes spaceship_burn {

    0% { height: 20px; }
    50% { height: 40px; }
    100% { height: 20px; }
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROADS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.ROAD .bridge_vertical, .ROAD .bridge_horizontal {
	
	width: 3px;
	
	background-color: rgba(0,0,0,.25);
	
	border-radius: 0px 5px 5px 0px;
}

.ROAD .bridge_horizontal {
	
	height: 5px;
		
	background-color: rgba(0,0,0,.25);
	
	border-radius: 0px 0px 5px 5px;
}




.route_marker, .valid_destination_marker {
	
	display: none;
}


.route_final_marker {
	
	display: block;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TREES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.TREE {
	
	margin-top: -10px;
}


.TREE .trunk {
	
	height: 5px;
	width: 25%;
	
	margin-top: 90%;
	margin-left: 38%;
	
	border-radius: 12%;
	
	background-color: green;	/* #309E38; */
}

.TREE .shadow {
	
	height: 100%;
	width: 100%;
	
	margin-top: -25%;
	margin-left: 25%;
	
	border-radius: 100%;
	
	background-color: rgba(0,0,0,.25);
	
	animation: none;
}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SKYWALKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.SKYWALK {
	
	height: 10px;
	
	margin-top: -20px;
	
	background-image: url(../images/skywalk_texture.png);
	background-position: center center;
	background-size: 10px 10px;
	background-repeat: repeat-x;
}

.SKYWALK .shadow {
	
	height: 5px;
	width: 100%;
	
	margin-top: 20px;
	
	background-color: rgba(0,0,0,.25);
	
	pointer-events: none;
}



@keyframes skywalk_construction_horizontal_1 {

    0% { width: 0px; }
    100% { width: var(--w, 20px); }
}

@keyframes skywalk_construction_horizontal_2 {

    0% { margin-left: var(--w, 20px); width: 0px; }
    100% { width: var(--w, 20px); margin-left: 0px; }
}


@keyframes skywalk_construction_vertical_1 {

    0% { height: 0px; }
    100% { height: var(--h, 20px); }
}

@keyframes skywalk_construction_vertical_2 {

    0% { height: 0px; }
    100% { height: var(--h, 20px); }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	WATER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.WATER {
		
	box-shadow: inset 0px 10px 0px #3392C9;
	
	border-top: 1px solid #5a535c;
	border-left: 1px solid #5a535c;
	border-right: 1px solid #8b828e;
	border-bottom: 1px solid #8b828e;
}


.flood_altitude {
	
	display: block;
	
	position: absolute;

	z-index: 1;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	M O U N T A I N S
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.MOUNTAIN {
	
	background-image: none;
}



.MOUNTAIN .mountain_shape {
	
	position: relative;
	
	height: 100%;
	width: 100%;
	
	background-image: url(../images/mountain.png);
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
		
	z-index: 1
}

.MOUNTAIN .mountain_shadow {
	
	position: absolute;
	
	margin-left: 2px;
		
	background-image: url(../images/mountain_shadow.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	
	transform: skew(12deg);
	transform-origin: left top;
	
	pointer-events: none;
	
	z-index: 0;
}


.MOUNTAIN .alien_tunnel div {
	
	height: 20px;
	
	margin-top: 0px;
}




.MOUNTAIN .FLAG {
	
	position: absolute;
	
	height: 20px;
	width: 32px;

	margin-left: calc(50% - .5px);
	
	z-index: 2;
}


.MOUNTAIN .FLAG div {
	
	position: absolute;
	
	border-radius: 0px;
	
	background-color: transparent;
}


/* FLAGPOLE */
.MOUNTAIN .FLAG div:nth-of-type(1) {
	
	height: 100%;
	width: 1px;
	
	border-radius: .5px;
	
	border-top: 1px solid gray;
	
	background-color: #333;	
}


/* FLAG */
.MOUNTAIN .FLAG div:nth-of-type(2) {
	
	height: 10px;
	width: 20px;
	
	margin-top: 1.5px;
	margin-left: 1px;
	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: transparent;
	
/* 	border-top: 1px solid rgba(255,255,255,.5); */
}


/* FLAG SHADOW */
.MOUNTAIN .FLAG div:nth-of-type(3) {
	
	height: 30px;
	width: 20px;
	
	background-image: url(../images/news/flags/shadow.png);;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	
	transform: skew(12deg);
	
	pointer-events: none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	C A R
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.CAR .roof {
	
	margin-top: -5px;
	
	background-color: red;
	
	border: none;
		
	animation: none;
	
}


.CAR .wall {
	
	height: 5px;
	background-color: #910000;
	
	border: none;
	
	animation: none;
	
	display: flex;
	justify-content: space-between;
}


.CAR .wall div {
	
	display: inline-block;
	
	height: 2px;
	width: 2px;
	
	margin-top: 3px;
	margin-left: 0px;
	
	background-color: white;
	
	border-radius: 100%;
}


.CAR .shadow {
	
	height: 5px;
	
	animation: none;
}




.CAR .wheel, .CAR .wheel_frontview {
	
	position: absolute;
	
	height: 6px;
	width: 6px;
	
	margin-top: -8px;
	margin-left: 0px;
	
	background-color: #333;
	border: 2px solid black;
	
	border-radius: 100%;	
}


.CAR .wheel .wheel {
	
	margin-top: -2px;
	margin-left: 8px;	
}


.CAR .wheel_frontview {
	
	height: 16px;
	width: 2px;
	
	margin-top: -20px;
	margin-left: -2px;
	
	background-color: black;
	border: none;
	
	border-radius: 1px;
}


.CAR .wheel_frontview .wheel_frontview {
	
	margin-top: 0px;	
	margin-left: 12px;
}




.CAR .lightbeam, .CAR .lightbeam_frontview {
	
	position: absolute;
	
	height: 10px;
	width: 20px;
	
	margin-top: -18px;
	margin-left: 17px;
	
	background: linear-gradient(to right, rgba(201, 221, 255, 0.3), rgba(255,255,255,0));	
	
	z-index: -1;
	
	display: none;
}


.CAR .lightbeam_frontview {
	
	position: absolute;
	
	height: 20px;
	width: 10px;
	
	margin-top: -5px;
	margin-left: 0px;
	
	background: linear-gradient(to bottom, rgba(201, 221, 255,.5), rgba(255,255,255,0));	
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ID CARD
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#ID_CARD .CAR {
		
	margin-top: -38px;
}


#ID_CARD .HUMAN {
	
	margin-top: -28px;
	
	height: 6px;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TRANSPARENT AI
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.transparent_ai_element .roof, .transparent_ai_element .wall {
	
	margin-left: -1px;
	 
	border: 1px solid red;
}

.transparent_ai_element .wall {

	border-top: none;
}


.transparent_ai_tree {
	
	margin-top: -10px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FIRE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.FIRE {
	
	
	position: absolute;
	
	width: calc(100% + 2px);
	
	margin-left: -2px;
	
	background-color: rgba(255,141,0,.5);
	
	border-radius: 0px 0px 2px 2px;
	
	animation: building_burn .5s infinite;
	
	pointer-events: none;	
}




@keyframes building_burn {

    0% { height: var(--f, 20px); margin-top: -1px; }
    50% { height: var(--ff, 40px); margin-top: -21px; }
    100% { height: var(--f, 20px); margin-top: -1px; }
}



@keyframes tree_burn {

    0% { height: var(--f, 20px); margin-top: -11px; }
    50% { height: var(--ff, 40px); margin-top: -21px; }
    100% { height: var(--f, 20px); margin-top: -11px; }
}