body{}

.form-group {position: relative;}
.container{max-width: inherit;}
.login-img{display:none;}
.login-block{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(-150deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.12));}
.login-logo{display: block;margin: 0 auto;}
.login-form{position: relative;z-index: 2;margin: 20px auto;padding: 20px;max-width: 380px;border-radius: 5px;/*transform: translateZ(-20px) translateY(-10px) rotateX(0deg) rotateY(-15deg);*/}
.login-container{min-width: 320px;}

.login-type-title {text-align: center;font-size: 14px;color: #7f7f7f;}
.login-type-title:after, .login-type-title:before {content: "————";color: #8e8e8e;margin: 0 10px;}
.login-type .type-icon{display: block;background: #3daf4f;width: 3rem;height: 3rem;padding: 0.5rem;margin: 0 0.5rem;border-radius: 2rem;}
.login-type ul{text-align: center;margin: 0.5rem;}
.login-type ul li{display: inline-block;}

.bg-bubbles{position: fixed;bottom: 0;right: 0;width: 100%;z-index: 0;}
.bg-bubbles li{position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}
.bg-bubbles li:nth-child(1){left: 10%;top: 2%;}
.bg-bubbles li:nth-child(2){left: 25%;top: 50%;width: 80px;height: 80px;-webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 8s;animation-duration: 8s;}
.bg-bubbles li:nth-child(3){left: 35%;top: 20%;-webkit-animation-delay: 2s;animation-delay: 2s;}
.bg-bubbles li:nth-child(4){left: 45%;bottom: 110%;width: 60px;height: 60px;-webkit-animation-duration: 7s;animation-duration: 7s;background-color: rgba(255, 255, 255, 0.25);}
.bg-bubbles li:nth-child(5){left: 105%;top: 40%;}
.bg-bubbles li:nth-child(6){left: 85%;top: 120%;width: 50px;height: 50px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}
.bg-bubbles li:nth-child(7){left: 60%;top: 40%;width: 60px;height: 60px;-webkit-animation-delay: 4s;animation-delay: 4s;}
.bg-bubbles li:nth-child(8){left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 6s;animation-delay: 6s;-webkit-animation-duration: 9s;animation-duration: 9s;}
.bg-bubbles li:nth-child(9){left: 30%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 10s;animation-duration: 10s;background-color: rgba(255, 255, 255, 0.3);}
.bg-bubbles li:nth-child(10){left: 120%;width: 60px;height: 60px;-webkit-animation-delay: 5s;animation-delay: 5s;}


@media screen and (min-width:900px){
.container-fluid{min-width: 1200px;}

.login-header{height: 100px;max-width: 1200px;margin: 0 auto;}
.login-header .login-logo{display: inline-block;padding: 33.5px 0;}

.login-block{}
.login-block{height: calc(100vh - 130px);min-height: 500px;}
.login-block .form-control{height: calc(2.75rem + 2px);}
.login-block .password-icon{top: 4px;}
.login-block .login-container{margin-top: 90px;position: absolute;right: 100px;width: 360px;border: 1px solid #ddd;background-color: rgba(255,255,255,0.5);box-shadow: 30px 60px 50px rgba(0,0,0,0.2);border-radius: 5px;}
.login-block .login-container .login-title{text-align: center;font-size: 1.5rem;padding: 15px;}
.login-block .login-container .login-logo{display: none;}
.login-block .login-context{width: 1200px;height: 100%;margin: 0 auto;position: relative;}
.login-block .login-context{display: flex;flex-flow: row nowrap;justify-content: space-between;}
.login-block .login-container{margin-right: 100px;right: 0;height: 360px;position: relative;min-width: 360px;position: relative;}
.login-block .login-img{display: block;padding:0.1em;margin:0 0.1em 0 0;font-size:128px;float:left;max-height: 540px;}
.login-block .login-img img{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;}
.login-block .login-form{border: none;padding: 0px 30px 40px 30px;background: none;box-shadow: none;}

.footer-info{position: relative;}
}
@media screen and (max-width:899px){
.login-block .login-container{margin-top: -15%;}
.login-header{display: none;}
.login-title{display: none;}
}

@media screen and (min-width:480px) {
.login-form {border: 1px solid #ddd;background-color: rgba(255,255,255,0.5);box-shadow: 30px 60px 50px rgba(0,0,0,0.2);}
}

@-webkit-keyframes square{
0%{-webkit-transform: translateY(0);transform: translateY(0);}
100%{-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
} 

@keyframes square{
0%{-webkit-transform: translateY(0);transform: translateY(0);}
100%{-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}
}