.lowin{--color-primary:#44a0b3;--color-grey:rgba(68,160,179,.06);--color-dark:rgba(68,160,179,.5);--color-semidark:rgba(68,160,179,.5);text-align:center;margin:60px 0 0 0;font-family:'Segoe UI';font-size:14px; position: absolute; width: 100%;}
.lowin .lowin-wrapper{-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;-webkit-perspective:1000px;perspective:1000px;position:relative;height:100%;width:360px;margin:0 auto}
.lowin.lowin-red{--color-primary:#ff6464;--color-grey:rgba(255,100,100,.06);--color-dark:rgba(255,100,100,.8);--color-semidark:rgba(255,100,100,.55)}
.lowin.lowin-green{--color-primary:#D0EF84;--color-grey:rgba(208,239,132,.15);--color-dark:rgba(208,239,132,1);--color-semidark:rgba(208,239,132,.6)}
.lowin.lowin-purple{--color-primary:#6C567B;--color-grey:rgba(108,86,123,.08);--color-dark:rgba(108,86,123,.7);--color-semidark:rgba(108,86,123,.45)}
.lowin.lowin-blue{--color-primary:#0081C6;--color-grey:rgba(0,129,198,.05);--color-dark:rgba(0,129,198,.7);--color-semidark:rgba(0,129,198,.45)}
.lowin a{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed var(--color-semidark);margin-top:-3px;padding-bottom:2px}
.lowin *{-webkit-box-sizing:border-box;box-sizing:border-box}
.lowin .lowin-brand{overflow:hidden;width:100px;height:100px;margin:0 auto -50px auto;border-radius:50%;-webkit-box-shadow:0 4px 40px rgba(0,0,0,.07);box-shadow:0 4px 40px rgba(0,0,0,.07);padding:10px;background-color:#fff;z-index:1;position:relative}
.lowin .lowin-brand img{width:100%}
.lowin .lowin-box{width:100%;position:absolute;left:0}
.lowin .lowin-box-inner{background-color:rgba(255,255,255,0.95);-webkit-box-shadow:0 7px 25px rgba(0,0,0,.08);box-shadow:0 7px 25px rgba(0,0,0,.08);padding:60px 25px 25px 25px;text-align:left;border-radius:3px}
.lowin .lowin-box::after{content:' ';-webkit-box-shadow:0 0 25px rgba(0,0,0,.1);background-color:rgba(255,255,255,0.3);box-shadow:0 0 25px rgba(0,0,0,.1);-webkit-transform:translate(0,-92.6%) scale(.88);-ms-transform:translate(0,-92.6%) scale(.88);transform:translate(0,-92.6%) scale(.88);border-radius:3px;position:absolute;top:100%;left:0;width:100%;height:100%;z-index:-1}
.lowin .lowin-box.lowin-flip{-webkit-transform:rotate3d(0,1,0,-180deg);transform:rotate3d(0,1,0,-180deg);display:none;opacity:0}
.lowin .lowin-box p{color:var(--color-semidark);font-weight:700;margin-bottom:20px;text-align:center}
.lowin .lowin-box .lowin-group{margin-bottom:30px}
.lowin .lowin-box label{margin-bottom:5px;display:inline-block;width:100%;color:var(--color-semidark);font-weight:700}
.lowin .lowin-box label a{float:right}
.lowin .lowin-box .lowin-input{background-color:var(--color-grey);color:var(--color-dark);border:none;border-radius:3px;padding:15px 20px;width:100%;outline:0}
.lowin .lowin-box .lowin-btn{display:inline-block;width:100%;border:none;color:#fff;padding:15px;margin-top: 10px; border-radius:3px;background-color:var(--color-primary);-webkit-box-shadow:0 2px 7px var(--color-semidark);box-shadow:0 2px 7px var(--color-semidark);font-weight:700;outline:0;cursor:pointer;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.lowin .lowin-box .lowin-btn:active{-webkit-box-shadow:none;box-shadow:none}
.lowin .lowin-box .lowin-btn:hover{opacity:.9}
.lowin .text-foot{text-align:center;padding:10px;font-weight:700;margin-top:20px;color:var(--color-semidark)}
.lowin .lowin-footer{text-align:center;margin:30px 0;font-size:12px;color:var(--color-semidark);font-weight:700}
.lowin .login-back-link{-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;display:none;opacity:0}
.lowin .lowin-box.lowin-animated{-webkit-animation-name:LowinAnimated;animation-name:LowinAnimated;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.lowin .lowin-box.lowin-animatedback{-webkit-animation-name:LowinAnimatedBack;animation-name:LowinAnimatedBack;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.lowin .lowin-box.lowin-animated-flip{-webkit-animation-name:LowinAnimatedFlip;animation-name:LowinAnimatedFlip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.lowin .lowin-box.lowin-animated-flipback{-webkit-animation-name:LowinAnimatedFlipBack;animation-name:LowinAnimatedFlipBack;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.lowin .lowin-brand.lowin-animated{-webkit-animation-name:LowinBrandAnimated;animation-name:LowinBrandAnimated;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.lowin .lowin-group.password-group{-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s}
.lowin .lowin-group.password-group.lowin-animated{-webkit-animation-name:LowinPasswordAnimated;animation-name:LowinPasswordAnimated;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}
.lowin .lowin-group.password-group.lowin-animated-back{-webkit-animation-name:LowinPasswordAnimatedBack;animation-name:LowinPasswordAnimatedBack;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}
.lowin .lowin-box .lowin-input::placeholder{color: var(--color-dark);}
.lowin-group .z-yzm{width: 45%; height: 30px; float: left; background-color: var(--color-grey); color: var(--color-dark); border: none; border-radius: 3px; padding: 10px 10px; outline: 0;}
.lowin-group .z-yzm::placeholder{color: var(--color-dark);}
.lowin-group .y-yzm{width: 45%; height: 30px; float: right; border-radius: 3px;}
.jzmm{margin-top: 10px;}
.r-jzmm{position: relative; top: -2px; left: 5px; color: var(--color-semidark);}

/* keyframes */
@-webkit-keyframes LowinAnimated {
	0% {
		-webkit-transform: rotate3d(0);
		        transform: rotate3d(0);
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 1, 0, 180deg);
		        transform: rotate3d(0, 1, 0, 180deg);
	}
}
@keyframes LowinAnimated {
	0% {
		-webkit-transform: rotate3d(0);
		        transform: rotate3d(0);
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 1, 0, 180deg);
		        transform: rotate3d(0, 1, 0, 180deg);
	}
}

@-webkit-keyframes LowinAnimatedBack {
	0% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 1, 0, 180deg);
		        transform: rotate3d(0, 1, 0, 180deg);
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: rotate3d(0);
		        transform: rotate3d(0);
	}
}

@keyframes LowinAnimatedBack {
	0% {
		opacity: 0;
		-webkit-transform: rotate3d(0, 1, 0, 180deg);
		        transform: rotate3d(0, 1, 0, 180deg);
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: rotate3d(0);
		        transform: rotate3d(0);
	}
}

@-webkit-keyframes LowinAnimatedFlip {
	0% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg);
		        transform: rotate3d(0, 1, 0, -180deg);
		opacity: 0;
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: rotate3d(0, 0, 0, 180deg);
		        transform: rotate3d(0, 0, 0, 180deg);
	}
}

@keyframes LowinAnimatedFlip {
	0% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg);
		        transform: rotate3d(0, 1, 0, -180deg);
		opacity: 0;
	}
	99% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: rotate3d(0, 0, 0, 180deg);
		        transform: rotate3d(0, 0, 0, 180deg);
	}
}

@-webkit-keyframes LowinAnimatedFlipBack {
	0% {
		opacity: 1;
		-webkit-transform: rotate3d(0, 0, 0, 180deg);
		        transform: rotate3d(0, 0, 0, 180deg);
	}
	95% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg);
		        transform: rotate3d(0, 1, 0, -180deg);
		opacity: 0;
	}
}

@keyframes LowinAnimatedFlipBack {
	0% {
		opacity: 1;
		-webkit-transform: rotate3d(0, 0, 0, 180deg);
		        transform: rotate3d(0, 0, 0, 180deg);
	}
	95% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotate3d(0, 1, 0, -180deg);
		        transform: rotate3d(0, 1, 0, -180deg);
		opacity: 0;
	}
}

@-webkit-keyframes LowinBrandAnimated {
	0% {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -120px);
		        transform: translate(0, -120px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
}

@keyframes LowinBrandAnimated {
	0% {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -120px);
		        transform: translate(0, -120px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
}

@-webkit-keyframes LowinPasswordAnimated {
	0% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		        transform: rotate3d(0, 0, 0, 0);
	}
	30% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(1, 0, 0, -180deg);
		        transform: rotate3d(1, 0, 0, -180deg);
		z-index: -1;
	}
}

@keyframes LowinPasswordAnimated {
	0% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		        transform: rotate3d(0, 0, 0, 0);
	}
	30% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate3d(1, 0, 0, -180deg);
		        transform: rotate3d(1, 0, 0, -180deg);
		z-index: -1;
	}
}

@-webkit-keyframes LowinPasswordAnimatedBack {
	0% {
		opacity: 0;
		-webkit-transform: rotate3d(1, 0, 0, -180deg);
		        transform: rotate3d(1, 0, 0, -180deg);
	}
	40% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		        transform: rotate3d(0, 0, 0, 0);
	}
}

@keyframes LowinPasswordAnimatedBack {
	0% {
		opacity: 0;
		-webkit-transform: rotate3d(1, 0, 0, -180deg);
		        transform: rotate3d(1, 0, 0, -180deg);
	}
	40% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate3d(0, 0, 0, 0);
		        transform: rotate3d(0, 0, 0, 0);
	}
}

@media screen and (max-width: 320px) {
	.lowin .lowin-wrapper {
		width: 100%;
	}
	.lowin .lowin-box {
		padding: 0 10px;
	}
}