@charset "UTF-8";
/* CSS Document */
.menu {
	float: left;
	letter-spacing: 2px;
	z-index: 2000;
	padding-right: 180px;
	width: 180px;
	height: 100%;
	min-height: 100%;
}
.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-family: "Courier New", monospace;
	
}
.menu li {
	display: block;
	float: none;
}
.menu a {
	display: block;
	width: 120px;
	/*
	height: 40px;
	line-height: 40px;
	*/
	height: 120px;
	border-radius: 50%;
	line-height: 120px;
	border: 1px rgba(0,0,0,0.20); solid;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	margin: 2px;
	background-color: rgba(255,255,255,0.67);
	-ms-transform: scale(0.8, 0.8); /* IE 9 */
	-webkit-transform: scale(0.8, 0.8); /* Safari */
	transform: scale(0.8, 0.8); /* Standard syntax */
	color: #a2a2a2;
}

@-webkit-keyframes wobble {
 0% {
-webkit-transform:  rotate(0deg);
}
 20% {
-webkit-transform:  rotate(10deg);
}
 50% {
-webkit-transform:  rotate(-10deg);
}
 100% {
-webkit-transform:  scale(1.05) rotate(0deg);
}
}
.menu li a:hover {
	-ms-transform: scale(0.85, 0.85); /* IE 9 */
	-webkit-transform: scale(0.85, 0.85); /* Safari */
	transform: scale(0.85, 0.85); 
	/*
	-webkit-animation: wobble .1s;
	-webkit-animation-iteration-count: 2; 
	animation-iteration-count: 2;*/
	color: #7A7878;
}
.selected {
	color: rgba(255,255,255,0.9); !important;
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	line-height: 120px;
	border: 1px rgba(0,0,0,0.20); solid;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	margin: 2px;
	background-color: rgba(202,181,250,1);
	-ms-transform: scale(0.8, 0.8); /* IE 9 */
	-webkit-transform: scale(0.8, 0.8); /* Safari */
	transform: scale(0.8, 0.8); /* Standard syntax */
}

.move-me {
  display: inline-block;
  padding: 2px;
  color: white;
  position: relative;
  margin: 0 0 5px 0;
}
.move-me-1 {
  animation: move-in-steps 0.1s;
}
.move-me-2 {
  animation: move-in-steps 0.2s;
}
.move-me-3 {
  animation: move-in-steps 0.3s;
}
.move-me-4 {
  animation: move-in-steps 0.4s;
}
.move-me-5 {
  animation: move-in-steps 0.5s;
}

@keyframes move-in-steps {
 0% {
 opacity: 0;
 transform: translateX(2000px);
}
 60% {
 opacity: 0.4;
 transform: translateX(-30px);
}
 80% {
	 opacity: 0.8;
 transform: translateX(10px);
}
 100% {
	 opacity: 1;
 transform: translateX(0);
}
}