body {background: rgba(41, 128, 185,1.0);
width: 100%;}

.container {
	width: 400px; margin: 0 auto;
	padding: 10% 0;
}

/* ========== BOUNCING BALL ========== */

/* 3D Bouncing ball */

#ballWrapper, #ballWrapper2 {
	float:left;
	width: 200px;
	height: 300px;
	margin: 0 auto;
	z-index: 100;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 5s linear 0s;
	-moz-transition: all 5s linear 0s;
	transition: all 5s linear 0s;
	cursor: pointer;
}

    .teeth:after,
    .teeth:before {
        display:inline-block;
        content:"";
        margin:0 3px;
        width:20px;
        height:15px;
        background:#eee;
        border-radius: 0  0 4px 4px;
    }

.eyebrow {
  top: 5px;
  margin-left: 0px;
  position: absolute;
  border: 7px solid rgba(61,44,6,0.8);  
  min-width: 35px;
  min-height: 8px;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%  
}

.eyebrow.left {
	right: 15px;
	top:10px;
	z-index: 20;
}

.eyebrow.right {
	left: 15px;
	top:10px;
	z-index: 20;
}


.teeth:before {margin: 0  0 0 20px }

#ballWrapper:active, #ballWrapper2:active {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	cursor: pointer;
}

#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: rgba(241, 196, 15,1.0);
	background: -moz-linear-gradient(top,  rgba(241, 196, 15,1) 0%, rgba(243, 156, 18,1.0) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1)));
	background: -webkit-linear-gradient(top,  rgba(241, 196, 15,1) 0%,rgba(243, 156, 18,1) 99%);
	background: -o-linear-gradient(top,  rgba(241, 196, 15,1) 0%,rgba(243, 156, 18,1) 99%);
	background: -ms-linear-gradient(top,  rgba(241, 196, 15,1) 0%,rgba(243, 156, 18,1) 99%);
	background: linear-gradient(top,  rgba(241, 196, 15,1) 0%,rgba(243, 156, 18,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(0,0,0,0.4), 
				0 0 1px #000;	
	position: absolute;
	top: 0;	
	z-index: 11;
	-webkit-animation: jump 1.3s infinite;
	-moz-animation: jump 1.3s infinite;
	-o-animation: jump 1.3s infinite;
	-ms-animation: jump 1.3s infinite;
	animation: jump 1.3s infinite;
	cursor: pointer;
}

#ballWrapper2 #ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: rgba(22, 160, 133,1.0);
	background: -moz-linear-gradient(top,  rgba(231, 76, 60,1.0) 0%, rgba(192, 57, 43,1.0) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1)));
	background: -webkit-linear-gradient(top,  rgba(231, 76, 60,1.0) 0%,rgba(192, 57, 43,1.0) 99%);
	background: -o-linear-gradient(top,  rgba(231, 76, 60,1.0) 0%,rgba(192, 57, 43,1.0) 99%);
	background: -ms-linear-gradient(top,  rgba(231, 76, 60,1.0) 0%,rgba(192, 57, 43,1.0) 99%);
	background: linear-gradient(top,  rgba(231, 76, 60,1.0) 0%,rgbargba(192, 57, 43,1.0) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(0,0,0,0.4), 
				0 0 1px #000;	
	position: absolute;
	top: 0;	
	z-index: 11;
	-webkit-animation: jump 1.3s infinite;
	-moz-animation: jump 1.3s infinite;
	-o-animation: jump 1.3s infinite;
	-ms-animation: jump 1.3s infinite;
	animation: jump 1.3s infinite;
	cursor: pointer;
}
.eye {
	display: inline-block;
	width: 37px;
	height: 37px;
	border-radius: 100%;
	background: #dedede;
	position: relative;
	z-index: 11;
	border: 1px solid #aaa;
	 animation:blink 4s ease-in-out infinite;
    }
    @keyframes blink { 90% { transform:none; } 95% { transform:rotateX(90deg); } }

.eye.left {
	top:22px;
	left:22px;
}

.eye.right {
	top:22px;
	right: -37px;
}

.pupil {
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #222;
	position: relative;
	top: 10px;
	left: 7px;
}

.pupil.green {
	border: 4px solid #16a085;
}

.pupil.blue {
	border: 4px solid #2980b9;
}

#ball::after {
	content: "";
	width: 80px; 
	height: 40px; 
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(252,231,146,1) 0%, rgba(252,239,186,0.2) 1%, rgba(249,241,209,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,239,186,0.2)), color-stop(1%,rgba(232,232,232,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(252,231,146,1) 0%,rgba(252,239,186,0.2) 1%,rgba(249,241,209,0) 100%);
	background: -o-linear-gradient(top,  rgba(252,231,146,1) 0%,rgba(252,239,186,0.2) 1%,rgba(249,241,209,0) 100%);
	background: -ms-linear-gradient(top,  rgba(252,231,146,1) 0%,rgba(252,239,186,0.2) 1%,rgba(249,241,209,0) 100%);
	background: linear-gradient(top,  rgba(252,231,146,1) 0%,rgba(252,239,186,0.2) 1%,rgba(249,241,209,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 );
	border-radius: 40px / 20px;	
}

#ballShadow {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 10;
	margin-left: -30px;
	width: 60px;
	height: 75px;
	background: rgba(20, 20, 20, .1);
	box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
	border-radius: 30px / 40px;	
	-webkit-transform: scaleY(.3);
	-moz-transform: scaleY(.3);
	-ms-transform: scaleY(.3);
	-o-transform: scaleY(.3);
	transform: scaleY(.3);
	-webkit-animation: shrink 1.3s infinite;
	-moz-animation: shrink 1.3s infinite;
	-o-animation: shrink 1.3s infinite;
	-ms-animation: shrink 1.3s infinite;
	animation: shrink 1.3s infinite;
  
}

/*============================ ROTER BALL ============================*/


#ballWrapper2 .teeth:before,
#ballWrapper2 .teeth:after {
    display:inline-block;
    content:"";
    margin: -10px 20px 25px 25px;
    width:30px;
    height:25px;
    background:#eee;
    border-radius: 7px 7px 7px 7px;
}

#ballWrapper2 .mouth {
        display:block;
        position: relative;
        top: 20px;
        width:60%;
        height:36px;
        margin:5px auto 0;
        background:rgba(0,0,0,.8);
        border-radius:10px 10px 100px 100px;
        border-radius:10px 10px 50% 50%;
        transition:border-radius .5s, height .5s cubic-bezier(.15,.60,.30,1.9);
        overflow:hidden;
        line-height:0;
        transform-origin:center top; 
    }




/* Animations */

@-webkit-keyframes jump {
	0% {top: 80px;
		-webkit-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 140px;
		height: 140px;
		-webkit-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; border-radius: 70px / 60px;
		-webkit-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; border-radius: 70px;
		-webkit-animation-timing-function: ease-out;}
	95% {
		top: 80px;		
		-webkit-animation-timing-function: ease-in;
	}
	100% {top: 80px;
		-webkit-animation-timing-function: ease-in;
	}
}

@-moz-keyframes jump {
	0% {top: 0;
		-moz-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 140px;
		height: 140px;
		-moz-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; border-radius: 70px / 60px;
		-moz-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; border-radius: 70px;
		-moz-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-moz-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-moz-animation-timing-function: ease-in;
	}
}

@-o-keyframes jump {
	0% {top: 0;
		-o-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 140px;
		height: 140px;
		-o-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; border-radius: 70px / 60px;
		-o-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; border-radius: 70px;
		-o-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-o-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-o-animation-timing-function: ease-in;
	}
}

@-ms-keyframes jump {
	0% {top: 0;
		-ms-animation-timing-function: ease-in;
	}
	40% {}
	50% {top: 140px;
		height: 140px;
		-ms-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; border-radius: 70px / 60px;
		-ms-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; border-radius: 70px;
		-ms-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-ms-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-ms-animation-timing-function: ease-in;
	}
}

@keyframes jump {
	0% {
		top: 80px;
		animation-timing-function: ease-in;
	}
	50% {
		top: 140px;
		height: 140px;
		animation-timing-function: ease-out;
	}
	55% {
		top: 160px; 
		height: 120px; 
		border-radius: 70px / 60px;
		animation-timing-function: ease-in;
	}
	65% {
		top: 120px; 
		height: 140px; 
		border-radius: 70px;
		animation-timing-function: ease-out;
	}
	95% {
		top: 80px;		
		animation-timing-function: ease-in;
	}
	100% {
		top: 80px;
		animation-timing-function: ease-in;
	}
}



@keyframes shrink {
	0% {
      width: 40px;
      margin-left: -30px;
   	 bottom: 5px;
  }

    50% {
	   width: 60px;
      margin-left: -50px;
      bottom: 0px;
	}	

	100% {
		 width: 40px;
      margin-left: -30px;
      bottom: 5px;
	}
}

.mouth {
        display:block;
        position: relative;
        top: 20px;
        width:60%;
        height:22px;
        margin:5px auto 0;
        background:rgba(0,0,0,.8);
        border-radius:10px 10px 100px 100px;
        border-radius:10px 10px 50% 50%;
        transition:border-radius .5s, height .5s cubic-bezier(.15,.60,.30,1.9);
        overflow:hidden;
        line-height:0;
        transform-origin:center top; 
    }