.login_container { padding-top: 15vh; position: relative; background: url(../images/crm-bg.jpg) no-repeat bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; min-height: 100vh; z-index: 0; text-align: center }

@media (max-width:576px) {
.login_container { padding-top: 8vh }
}
.login_container::before { content: ""; position: absolute; background: rgba(0,0,0,0.6); top: 0; min-height: 100%; left: 0; right: 0; z-index: -1 }
.login-form { background: #fff; box-shadow: 1px 1px 12px #ddd; margin: 0 0 0 90px; width: 400px; text-align: center; border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px }
.login-bg { background-color: #033969; border-radius: 0 0 300px 300px; z-index: 0; position: relative }
.login-icon { position: absolute; left: 0; right: 0; bottom: -30px; border-radius: 50%; margin: 0 auto; background: #fff; width: 60px; height: 60px; overflow: hidden; border: 4px solid rgba(99,85,87,0.19) }
.login-icon img { text-align: center; width: 100%; position: relative; }
.login-content { padding: 35px 24px }
.btn-login { text-transform: uppercase; padding: 8px 14px }
.login-form .form-control { font-size: 15px; padding: 8px 14px }
.login-content .form-group { text-align: left }
.flip-container { perspective: 1000px }
.flip-container, .front, .back { width: 400px; height: 216px; border-radius: 0 0 300px 300px }
.flipper { transition: .6s; transform-style: preserve-3d; position: relative }
.flipper h6 { padding-top: 4em; padding-bottom: 2.8em; margin-bottom: 1em; font-size: 18px; line-height: 30px; color: #fff; text-transform: uppercase }
.flipper h6 span { display: block; margin-bottom: 8px; font-size: 34px }
.front, .back { position: absolute; top: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s }
.front { background-color: #033969; visibility: visible; opacity: 1 }
.back { background-color: #033969; visibility: hidden; opacity: 0 }
.vertical.flip-container { position: relative; background-color: #033969 }
.login-form:hover .back { visibility: visible; opacity: 1 }
.login-form:hover .front { visibility: hidden; opacity: 0 }
@keyframes toBack {
0% {
z-index:0
}
100% {
z-index:1
}
}
@keyframes toFront {
0% {
z-index:1
}
100% {
z-index:0
}
}
.login-form:hover .btn-login { background-color: #033969; border: 1px solid #033969 }
.login-form:hover .btn-login:hover { background-color: #ed1b24; border: 1px solid #ed1b24 }