body {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  background-color: #1C1F24;
}

h1, h2, h3, h4, h5, h6, p, a, 
input, label, button, textarea, ul, li, label {
  position: relative;
  vertical-align: top;
  display: inline-block;
  padding: 0;
  margin: 0;
}

@-webkit-keyframes rotate {
  0% {
	 -webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 20deg);
  }
  40% {
	 -webkit-transform: rotate3d(1, 0, 0, 88deg) rotate3d(0, 0, 1, 120deg);
  }
  70% {
	 -webkit-transform: rotate3d(1, 0, 0, 88deg) rotate3d(0, 0, 1, 260deg);
  }
  90% {
	 -webkit-transform: rotate3d(1, 0, 0, 70deg) rotate3d(0, 0, 1, 260deg);
  }
  100% {
	 -webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 380deg);
  }
}

.p3d {
  height: auto;
  margin-bottom: 200px;
}

.world {
	margin: 0 auto;
	display: block;
	zoom: 1;
	font-size: 0;
	left: 40%;
	top: 5%;
	width: 250px;
	height: 250px;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 0, 1, 0deg);
	-webkit-animation: rotate 10s ease-in-out infinite;
}

.ground {
  font-size: 18px !important;
  position: absolute;
  display: block !important;
  top: -15%;
  left: -15%;
  width: 130% !important;
  height: 130%;
  border: 5px dotted #ccc;
  overflow: visible;
  -webkit-transform: translate3d(0, 0, -200px);
  -webkit-transform-style: preserve-3d;
  background-color: #405f05;
  color: #fff !important;
  border-radius: 50%;
}

.building {
  font-size: 0;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  cursor: move;
  overflow: visible;
  -webkit-transition: all 1s ease-out;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transform-style: preserve-3d;
}

.building:active {
  -webkit-transform: translateZ(50px) scale3d(1, 1, 4);
  background: #09c;
}

.building:active > li {
  background: #09c;
  opacity: 0.75;
}

.building > li {
  font-size: 0;
  display: inline-block;
  position: absolute;
  background: red;
  -webkit-transition: all 0.3s ease-out;
}

.building .top {
  background: #10a2ff;
  width: 50px;
  height: 50px;
  -webkit-transform: translate3d(0, 0, 0);
}

.building .west {
  background: #1091e3;
  width: 50px;
  height: 50px;
  -webkit-transform-origin: 100% 100%;
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
}

.building .east {
  background: #1091e3;
  width: 50px;
  height: 50px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
}

.building .north {
  background: #10a2ff;
  width: 50px;
  height: 50px;
  -webkit-transform-origin: 100% 100%;
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
}

.building .south {
  background: #10a2ff;
  width: 50px;
  height: 50px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate3d(1, 0, 0, -90deg);
}

.block-2 {
  top: 50%;
  left: 50%;
  -webkit-transform: scaleZ(4);
}

.building .west .floor {
  position: absolute;
  width: 80%;
  height: 100%;
  left: 0;
  background: #183c88;
}

.building .east .floor {
  position: absolute;
  width: 80%;
  height: 100%;
  right: 0;
  background: #10337d;
}

.building .north .floor {
  position: absolute;
  height: 80%;
  width: 100%;
  top: 0px;
  background: #204491;
  overflow: hidden;
  overflow: hidden;
}


.building .south .floor {
  position: absolute;
  height: 80%;
  width: 100%;
  bottom: 0px;
  background: #204491;
  overflow: hidden;
}

.building .west .text {
  position: absolute;
  top: 17px;
  left: 12px;
  z-index: 1;
  color: white;
  font-size: 12px;
  transform: rotate(180deg) scaleX(1) scaleY(-3);
}

.building .east .text {
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 1;
  color: white;
  font-size: 12px;
  transform: rotate(180deg) scaleX(1) scaleY(-3);
}

.building .north .floor ul,
.building .south .floor ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.building .north .floor ul li,
.building .south .floor ul li {
	 list-style: none;
	 background-color: #ccc;
	 width: 8px;
	 height: 3px;
	 margin: 1px 4px;
}