body {
	margin: 0px !important;
	background-color: #060606;
	overflow: hidden;
    display: flex;		
}

.ciudad {
	height: 100vh;
	width: 1980px;
	background-color: #12122b;
	background: linear-gradient(0deg, #1d1c3c 50%, #295872 100%);
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	bottom: 0;
	left: 0;
	border-bottom: solid 25px #272727;
}

.ciudadDelante {
    height: 100vh;
    width: 2420px;
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	/*background-color: red;*/
	bottom: 0;
	left: 0;
}

.ciudadAtras {
    height: 100vh;
    width: 2420px;
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	/*background-color: red;*/
	bottom: 0;
	left: 0;
}

.ciudadAtras .edificio {
	background-color: #000000 !important;
}

.ciudadAtras .uno {
	height: 390px;
	width: 150px;
}

.ciudadAtras .dos {
	height: 490px;
	width: 180px;
}

.ciudadAtras .tres {
	height: 320px;
	width: 160px;
}

.ciudadDelante .edificio {
    border-top: solid 2px gray;
}



.edificio {
	background-color: #06050b;
	position: relative;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*border-top: solid 2px gray;*/
}

.uno {
	height: 300px;
	width: 150px;
	/*border-top: solid 2px gray;*/
}

.dos {
	height: 400px;
	width: 180px;
}

.tres {
	height: 460px;
	width: 160px;
}


.ventana {
	height: 20px;
	width: 15px;
	margin: 10%;
}

.on {
	background-color: yellow;
}

.onred {
	background-color: red;
}

.luna {
	background-color: #c4c4c4;
	box-shadow: 0 0 65px white;
	position: fixed;
	top: 10vh;
	left: -180px;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	animation: moon 20s infinite;
}

@keyframes moon {
	from {
		left: -180px;
		transform: scale(1);
	}
	to {
		left: calc(100vw + 100px);
		transform: scale(.8);
	}
}