body { margin: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; }
        * { margin: 0px; padding: 0px; box-sizing: border-box; }
        input[type=text], input[type=password] { display: inline-block; width: 100%; margin: 0 0 15px; padding: 15px 15px 15px 0; border: none; border-bottom: 1px solid #eeeeee; box-sizing: border-box; outline: none; font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #003a57; }
        input:focus { border-bottom: 1px solid #b4d2da; }
        input:-ms-input-placeholder { color: #8493a8; }
        input::-moz-placeholder { color: #8493a8; }
        input::-webkit-input-placeholder { color: #8493a8; }
        .button { width: 100%; margin: 30px 0 0; padding: 14px 20px; border: none; border-radius: 30px; cursor: pointer; color: #ffffff; background-color: #003a57; outline:none; }
        .button:hover { opacity: 0.8; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
        .checkbox { display: block; position: relative; margin-bottom: 12px; padding-left: 25px; line-height: 18px; cursor: pointer; font-size: 12px; color: #8493a8; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        .checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; border-radius: 2px; border: 1px solid #cad3df; background-color: #ffffff; }
        .checkbox:hover input ~ .checkmark { background-color: #cad3df; }
        .checkbox input:checked ~ .checkmark { border: 1px solid #003a57; background-color: #003a57; }
        .checkmark:after { content: ""; position: absolute; display: none; }
        .checkbox input:checked ~ .checkmark:after { display: block; }
        .checkbox .checkmark:after { left: 6px; top: 2px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
        .container-login { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; align-items: stretch; flex-direction: row-reverse; width: 100%; min-height: 100vh; background: #f2f2f2; }
        .form-login { position: relative; width: 600px; min-height: 100vh; display: block; padding: 190px 100px 20px 100px; background-color: #ffffff; }
        .form-login .logo img { display: block; margin: 0 auto; max-width: 300px }
        .form-login .logo .logo-title { margin: 30px 0 60px; text-align: center; font-size: 16px; color: #2c304d; }
        .form-login .remember { margin: 20px 0; }
        .background-login { position: relative; z-index: 1; width: calc(100% - 600px); background-repeat: no-repeat; background-size: cover; background-position: center; }
        .background-login::before { content: ""; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); }
        .footer { position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; font-size: 13px; color: #8493a8; }
        .footer span { display: block; width: 100%; }
        .footer span:first-child { margin-bottom: 20px; opacity: 0.8; }


        @media (max-width:1930px) and (min-width:1441px){
            .footer { position: relative; left: 0; bottom: 0;}
            .footer span:first-child {margin-top: 70%;}
        }
        @media (max-width:1440px) {
            .form-login { padding-top: 150px; }
            .footer { position: relative; left: 0; bottom: 0; margin-top: 20px; }
            .footer span:first-child {margin-bottom: 10px;}
        }
        @media (max-width: 1280px) {
            .form-login { padding-top: 120px; }
        }
        @media (max-width: 992px) { .form-login, .background-login { width: 50%; }
            .form-login { padding-left: 50px; padding-right: 50px; }
        }

        @media (max-width: 768px) {
            .form-login { width: 100%; }
            .background-login { display: none; }
        }

        @media (max-width: 480px) {
            .form-login .logo img { width: 80%; }
            .form-login .logo .logo-title { font-size: 13px; }
            .form-login { padding: 100px 20px 20px 20px; }
            .footer { position: relative; left: 0; bottom: 0; margin-top: 20px; }
            .footer span:first-child { margin-bottom: 5px; }
        }

        @media (max-width: 320px) {
            .form-login { padding-top: 60px; }
        }
/*Animation*/
.fadeInDown { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
@-webkit-keyframes fadeInDown { 
    0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}