body {	background: linear-gradient(to bottom, #cae7f0 0%, #7792AE 30%, #7792AE 100%) center top repeat-x #7792AE;
	background-size: 100% 600px;}



#swamp { position: relative; width:250px; float: right;  }

#swamp .lilyPad {
    position: absolute;
    background: #324332;
    width: 35px;
    height: 70px;
    border-radius: 50%; 
    -webkit-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    -moz-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    -ms-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    left: 15%;
    margin-top: 41%;
    z-index: 2;
}

#swamp .lilyPad:after {
    content: "";
    background: #324332;
    width: 35px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    left: 25px;
    top: 11px;
    -webkit-transform: rotate(52deg);
    -moz-transform: rotate(52deg);
    -ms-transform: rotate(52deg);
    transform: rotate(52deg);
}

@keyframes ribbit
{
	5% { transform: scale(1.2,1.2); }
10% { transform: scale(1,1); }
}

@-webkit-keyframes ribbit /*Safari and Chrome*/
{
	10% {  -webkit-transform:scale(1.2,1.2);  }
15% { -webkit-transform: scale(1,1); }
}

.frog { position: absolute; left: 0; top: 0; z-index: 2; width: 125px; -webkit-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); -moz-transform: scale(0.8,0.8); transform: scale(0.8,0.8); }

.frog .head { position: relative; z-index: 1; width: 125px; height: 75px; background: #4F694F; border-radius: 100%; }

.frog .left { float: left; }
.frog .right { float: right; }

.frog .eye { background: #edd7ac; border: 5px solid #4f694f; width: 40px; height: 40px; border-radius: 100%; position: relative; top: -15px; }

.frog .eye .inner { position: relative; background: black; width: 20px; height: 20px; border-radius: 100% 100% 100% 100%; }

.frog .nose {
    position: relative;
    background: #607860;
    border-radius: 100%;
    top: 25px;
    left: 50px;
    width: 10px;
	height: 10px;
}
.frog .nose:after {
    content: "";
    position: absolute;
    background: #607860;
    border-radius: 100%;
    left: 18px;
    width: 10px;
	height: 10px;
}


.frog .mouth { width: 125px; height: 50px; border-bottom: 2px solid #607860; border-radius: 100%; position: relative; top: -15px; }

.frog .body {
	position: relative; 
	top: -10px; 
	width: 125px; 
	height: 80px; 
	background: #4F694F; 
	border-radius: 100%; 
	animation: ribbit 5s infinite;
	-webkit-animation: ribbit 5s infinite;
	-moz-animation: ribbit 5s infinite;}
.frog .body:after { position: absolute; content: ""; background: #edd7ac; height: 66px; width: 83px; border-radius: 100%; left: 21px; }

.frog .toes { position: relative; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }
.frog .toes:before { position: absolute; left: 20px; bottom: 10px; content: ""; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }
.frog .toes:after { position: absolute; left: -20px; bottom: 10px; content: ""; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }

.frog .toes.left { -webkit-transform: rotate(33deg) !important; -ms-transform: rotate(33deg) !important; -moz-transform: rotate(33deg) !important; transform: rotates(33deg) !important; top: -17px; }
.frog .toes.right { -webkit-transform:rotate(-33deg) !important; -ms-transform: rotate(-33deg) !important; -moz-transform: rotate(-33deg) !important; transform: rotates(-33deg) !important; top: -17px; }

.frog, .frog .head, .frog .eye, .frog .eye .inner, .frog .nose, .frog .nose:after, .frog .mouth, .frog .body, .frog .body:after, .frog .toes, .frog .toes:before, .frog .toes:after { transition: all 1s; -webkit-transition: all 1s; /* Safari */  }

.frog:hover, .frog:hover .head, .frog:hover .eye, .frog:hover .eye .inner, .frog:hover .nose, .frog:hover .nose:after, .frog:hover .mouth, .frog:hover .body, .frog:hover .body:after, .frog:hover .toes, .frog:hover .toes:before, .frog:hover .toes:after { border-radius: 0; }