/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LAYERS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



#SKY {

	color: rgba(255,255,255,.1);
}


#STARS {
	
	display: block;
}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BUILDINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.BUILDING {
	
	transition: background-color 1s linear;/*   */
}


.BUILDING .L {
	
	background-color: #171717;	
	
	background-image: url(../images/night_windows_L.png);
	background-repeat: repeat-y;
	background-position: center 3px;
	background-size: 50px;

}


.BUILDING .L div {
	
	display: block;
	animation: colorlights 1s infinite;
}

.BUILDING:nth-of-type(2n) .L div {
	
	animation-duration: 2s;
}

.BUILDING:nth-of-type(2n + 1) .L div {
	
	animation-duration: 1.5s;
}

.BUILDING:nth-of-type(3n) .L div {
	
	animation-duration: 2.5s;
}

.BUILDING:nth-of-type(4n) .L div {
	
	animation-duration: 3s;
}




.BUILDING:hover .L div {
	
	animation-play-state: paused;
}



.BUILDING .R {
	
	background-color: #000000;	
	
	background-image: url(../images/night_windows_R.png);
	background-repeat: repeat-y;
	background-position: center 3px;
	background-size: 50px;
}



.BUILDING .T div:nth-of-type(1) {
	
	border-bottom: 10px solid #121212;		
}


.BUILDING .T div:nth-of-type(2) {
	
	border-top: 10px solid #121212;		
}



@keyframes colorlights {

    0% { color: red; }
    19% { color: red; }
    20% { color: yellow; }
    39% { color: yellow; }
    40% { color: green; }
    59% { color: green; }
    60% { color: skyblue; }
    79% { color: skyblue; }
    80% { color: purple; }
    100% { color: purple; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PAUSE / PLAY AND HAMBURGER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#PAUSE, #PLAY, #HAMBURGER {
	
	opacity: .5;
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#MENU {

	filter: invert(1);
}