*,*:after,*:before{box-sizing:border-box}
body{background: #cc3367;text-align: center;font-family: 'Roboto', sans-serif;}
.dwo{position: absolute1;left: 50%;top: 50%;margin: 100px 0 0 0;}
.panda{position: relative;width: 200px;margin: 50px auto;}
.face{width: 200px;height: 200px;background: #fff;border-radius: 100%;margin: 50px auto;box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);z-index: 50;position: relative;}
.ear,
.ear:after{position: absolute;width: 80px;height: 80px;background: #000;z-index: 5;border: 10px solid #fff;left: -15px;top: -15px;border-radius: 100%;}
.ear:after{content: '';left: 125px;}
.eye-shade{background: #000;width: 50px;height: 80px;margin: 10px;position: absolute;top: 35px;left: 25px;-webkit-transform: rotate(220deg);transform: rotate(220deg);border-radius: 25px/20px 30px 35px 40px;}
.eye-shade.rgt{-webkit-transform: rotate(140deg);transform: rotate(140deg);left: 105px;}
.eye-white{position: absolute;width: 30px;height: 30px;border-radius: 100%;background: #fff;z-index: 500;left: 40px;top: 80px;overflow: hidden;}
.eye-white.rgt{right: 40px;left: auto;}
.eye-ball{position: absolute;width: 0px;height: 0px;left: 20px;top: 20px;max-width: 10px;max-height: 10px;-webkit-transition: 0.1s;transition: 0.1s;}
.eye-ball:after{content: '';background: #000;position: absolute;border-radius: 100%;right: 0;bottom: 0px;width: 20px;height: 20px;}
.nose{position: absolute;height: 20px;width: 35px;bottom: 40px;left: 0;right: 0;margin: auto;border-radius: 50px 20px/30px 15px;-webkit-transform: rotate(15deg);transform: rotate(15deg);background: #000;}
.body{background: #fff;position: absolute;top: 200px;left: -20px;border-radius: 100px 100px 100px 100px/126px 126px 96px 96px;width: 250px;height: 282px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
.hand,
.hand:after,
.hand:before{width: 40px;height: 30px;border-radius: 50px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);background: #000;margin: 5px;position: absolute;top: 70px;left: -25px;}
.hand:after,
.hand:before{content: '';left: -5px;top: 11px;}
.hand:before{top: 26px;}
.hand.rgt,
.rgt.hand:after,
.rgt.hand:before{left: auto;right: -25px;}
.hand.rgt:after,
.hand.rgt:before{left: auto;right: -5px;}
.foot{top: 360px;left: -80px;position: absolute;background: #000;z-index: 1400;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);border-radius: 40px 40px 39px 40px/26px 26px 63px 63px;width: 82px;height: 120px;}
.foot:after{content: '';width: 55px;height: 65px;background: #222;border-radius: 100%;position: absolute;bottom: 10px;left: 0;right: 0;margin: auto;}
.foot .finger,
.foot .finger:after,
.foot .finger:before{position: absolute;width: 25px;height: 35px;background: #222;border-radius: 100%;top: 10px;right: 5px;}
.foot .finger:after,
.foot .finger:before{content: '';right: 30px;width: 20px;top: 0;}
.foot .finger:before{right: 55px;top: 5px;}
.foot.rgt{left: auto;right: -80px;}
.foot.rgt .finger,
.foot.rgt .finger:after,
.foot.rgt .finger:before{left: 5px;right: auto;}
.foot.rgt .finger:after{left: 30px;right: auto;}
.foot.rgt .finger:before{left: 55px;right: auto;}
form{display: none;max-width: 400px;padding: 20px 40px;background: #fff;height: 300px;margin: auto;display: block;box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);-webkit-transition: 0.3s;transition: 0.3s;position: relative;-webkit-transform: translateY(-100px);transform: translateY(-100px);z-index: 500;border: 1px solid #eee;}
form.up{-webkit-transform: translateY(-180px);transform: translateY(-180px);}
h1{color: #FF4081;font-weight: normal;}
.btn{background: #fff;padding: 5px;width: 150px;height: 35px;border: 1px solid #FF4081;margin-top: 25px;cursor: pointer;-webkit-transition: 0.3s;transition: 0.3s;box-shadow: 0 50px #FF4081 inset;color: #fff;}
.btn:hover{box-shadow: 0 0 #FF4081 inset;color: #FF4081;}
.btn:focus{outline: none;}
.form-group{position: relative;font-size: 15px;color: #666;}
.form-group + .form-group{margin-top: 30px;}
.form-group .form-label{position: absolute;z-index: 1;left: 0;top: 5px;-webkit-transition: 0.3s;transition: 0.3s;}
.form-group .form-control{width: 100%;position: relative;z-index: 3;height: 35px;background: none;border: none;padding: 5px 0;-webkit-transition: 0.3s;transition: 0.3s;border-bottom: 1px solid #777;color: #555;}
.form-group .form-control:invalid{outline: none;}
.form-group .form-control:focus,
.form-group .form-control:valid{outline: none;box-shadow: 0 1px #FF4081;border-color: #FF4081;}
.form-group .form-control:focus + .form-label,
.form-group .form-control:valid + .form-label{font-size: 12px;color: #FF4081;-webkit-transform: translateY(-15px);transform: translateY(-15px);}
.alert{position: absolute;color: #f00;font-size: 16px;right: -180px;top: -300px;z-index: 200;padding: 30px 25px;background: #fff;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);border-radius: 50%;opacity: 0;-webkit-transform: scale(0, 0);transform: scale(0, 0);-moz-transition: linear 0.4s 0.6s;-o-transition: linear 0.4s 0.6s;-webkit-transition: linear 0.4s;-webkit-transition-delay: 0.6s;-webkit-transition: linear 0.4s 0.6s;transition: linear 0.4s 0.6s;}
.alert:after,
.alert:before{content: '';position: absolute;width: 25px;height: 25px;background: #fff;left: -19px;bottom: -8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);border-radius: 50%;}
.alert:before{width: 15px;height: 15px;left: -35px;bottom: -25px;}
.wrong-entry{-webkit-animation: wrong-log 0.3s;animation: wrong-log 0.3s;}
.wrong-entry .alert{opacity: 1;-webkit-transform: scale(1, 1);transform: scale(1, 1);}

@-webkit-keyframes eye-blink {
	to { height: 30px; }
}

@keyframes eye-blink {
	to { height: 30px; }
}

@-webkit-keyframes wrong-log {

	0%, 100% { left: 0px; }

	20%, 60% { left: 20px; }

	40%, 80% { left: -20px; }
}

@keyframes wrong-log {

	0%, 100% { left: 0px; }

	20%, 60% { left: 20px; }

	40%, 80% { left: -20px; }
}