#content {
  width:100%;
	margin:10px auto;
	}
#content ul {
	width:100%;
	}
#content li {
	list-style-type: none;
	background-color: #eee;
  display: inline-block;
	padding: 0;
  margin:0 0 40px 40px;
  font-size: 22px;
  opacity:0.8;
}
#content li.squ,#content li.squ2,#content li.squ3 {
	border-radius: 0;
	width:180px;
	height:100px;
	text-align:center;
	line-height:100px;
	padding: 0;
	border:4px solid #37d;
	-webkit-transition: .4s;
  transition: .4s;
	}
#content li.squ:hover {
  -webkit-border-radius: 50px;
  border-radius: 50px;
	background: #aaa;
	color:#fff;
	}
#content li.squ2:hover {
  -webkit-border-radius: 50px;
  border-radius: 50px;
	border:4px dotted tomato;
	color:tomato;
	background: #fff;
	}
#content li.squ3:hover {
  -webkit-border-radius: 50px;
  border-radius: 50px;
	border:4px dotted green;
	color:yellow;
	background: green;
	}
#content li.circle,#content li.circle2,
#content li.circle3 {
	width:100px;
	height:100px;
	text-align:center;
	line-height:100px;
	padding: 0;
	border:4px solid #37d;
	-webkit-border-radius: 52px;
  border-radius: 52px;
	-webkit-transition: .5s;
  transition: .5s;	
	}
#content li.circle {
	-webkit-transform: perspective(0) rotateY(0deg);
  transform: perspective(0) rotateY(0deg);
	margin:0 0 40px 85px;
	}
#content li.circle:hover {
	border:4px solid tomato;
	background: green;
	color:#fff;
	-webkit-transform: perspective(0) rotateY(180deg);
  transform: perspective(0) rotateY(180deg);
	}
#content li.circle2,#content li.circle3 {
	-webkit-transform: rotate(0deg);
  transform: rotate(0deg);
	margin:0 0 40px 120px;
	}	
#content li.circle2:hover {
	border:4px dotted tomato;
	background:#444;
	color:#fff;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
	}
#content li.circle3:hover {
	border:4px dotted green;
	color:green;
	background:#fff;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
	}