html{background:#95a5a6;}
.foo{

	width: 192px;
	height: 200px;
	margin:auto;
	background:gold;
	position: relative;
	border-radius:50%;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	text-align: center;
	font-size: 1.6em;
	color:transparent;
	line-height: 250px;
	margin-top: 15%;	
	transition: all 0.8s ease-in-out;
	animation:demo 3s infinite;
}
.foo:hover{

	background-color:#c0392b;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	animation:bounce 1s infinite;
}
.eye{
	border-radius: 50%;
	height: 15px;
	width: 25px;
	background-color:#000;
	margin:auto;
	display: inline-block;
	margin-bottom:20%;
	margin-left: 10px;
	margin-right: 10px;
	animation: eyeclosing 3s infinite;	
}
.eye1{

	border-radius: 50%;
	height: 15px;
	width: 25px;
	background-color:#000;
	margin:auto;
	display: inline-block;
	margin-bottom:20%;
	margin-left: 10px;
	margin-right: 10px;
	animation: eyeclosing 3s infinite;	
}
.mouth{

	height: 22px;
	width: 85px;
	top:120px;
	left:55px;
	position: absolute;
	background-color:#000;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius:20px;  
	border-top-left-radius: 25%;
	border-top-right-radius:25%;  
	animation:mouth 5s ease-in-out infinite;
}
.mouth:hover{

	height: 33px;
	background-color: #FFF;
}
.foo:hover .eye{
	transition:all ease-in-out 0.55s;
	transform:skewY(15deg) skewX(10deg);
	height: 2px;
	background-color: red;
}
.foo:hover .eye1{
	transition:all ease-in-out 0.55s;
	transform:skewY(-15deg) skewX(-10deg);
	height: 2px;
	background-color: red;
}
.foo:hover .mouth{
	border-bottom-left-radius: 0px;
	border-bottom-right-radius:0px;  
	border-top-left-radius: 25px;
	border-top-right-radius:25px; 
	transition:all ease-in-out 0.8s;
}
.foo:active{
	transition:all ease 5s;
	transform:scale(7);
	background-color: #000;
}
.foo:active .mouth{
	height: 35px;
	background-color: #FFF
}
.shadow {
    height:20px;
    background:rgba(0,0,0,.1);
    width:7%;
    border-radius:100%;
    margin:auto;
    transition: all 0.8s ease-in-out;  
}

.foo:hover .shadow {
    background:rgba(0,0,0,.06); 
    animation:bounce 1s infinite;
 } 
  









@keyframes  colors{
20%{background-color:#1abc9c;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	}
50%{background-color:#2ecc71;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	}
60%{background-color:#3498db;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	}
80%{background-color:#e67e22;
	box-shadow: inset -10px -30px rgba(0,0,0,.06);
	}

}


@keyframes eyeclosing{

0% {
   height: 1px;
}
33% {
    height: 15px;
}	
}


@keyframes mouth{


40%{height: 30px;}
60%{height: 26px;}
70%{height: 15px;}



}
@keyframes demo{
	33% {
   
    transform:scale(0.95);
}
66% {
 transform:scale(0.95);
}
}


@keyframes bounce{
	33% {
    transform: translateY(16px);

}
66% {
    transform: translateX(-16px);
}
97% {
    transform: translateY(16px);
}
}