@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext");
@import "normalize.css";

*{padding:0;margin:0;}
html{}
body{margin:30px;font-family: Montserrat, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;background:#fff url('assets/background.jpg') no-repeat center center fixed;background-size:cover;}

#login_box {max-width:400px;margin:0 auto 50px;padding:30px;display:flex;flex-direction:column;border-radius:10px;background: rgba(255,255,255,.95);}
#logo_container{text-align:center;margin-bottom:30px;}
#logo_container img{max-height:250px;max-width:70%;}
#login_form_container{display:flex;justify-content:center;flex-wrap:wrap;}
#login_form_container form{padding:50px 0;}
#messageBox{width:100%;}
.bg-success{color:#28a745;}
.bg-danger{color:#c00;}

.input_container {font-size:18px;color:#999;position:relative;}
.input_container input{background:transparent;border:none;border-bottom:1px Solid #999;height:45px;width:100%;font-size:15px;color:#999;font-family: Montserrat, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:43px;padding-left:40px;margin-bottom:35px;}
.input_container i{position:absolute;z-index:2;left:5px;top:13px;color:#ccc;}
.input_container input:active, .input_container input:focus, .input_container input:hover{border-bottom-color:#007dc6;color:#007dc6;outline:none;}
.input_container input:active + i, .input_container input:focus + i, .input_container input:hover + i{color:#007dc6;}
.button_container{text-align:center;}
#submit_button{display:inline-block;width:180px;height:45px;background: #007dc6;border:none;border-radius:5px;color:#fff;font-size:17px;text-transform: uppercase;}
#submit_button:active, #submit_button:focus, #submit_button:hover{background: #62c5ff;color:#fff;cursor:pointer;}

#version_info{color:#fff;text-shadow:2px 2px rgba(51,51,51,.5);font-size:15px;}

@media (min-width: 768px) {
    #version_info{position:absolute;left:30px;bottom:30px;}
}

@media (min-width: 1200px) {
    html, body{height:100%;margin:0;}
    #login{display:flex;min-height:100%;flex-wrap:nowrap;justify-content:end;}
    #login_box{max-width:initial;width:38.19%;min-height:100%;border-radius:0;margin:0;}
    #logo_container{height:38.19%;display:flex;align-items:center;justify-content:center;}
    #login_form_container form{display:block;width: 100%;max-width: 500px;padding:90px 0;}
    #messageBox{max-width:500px;margin:0 auto;}
    .input_container input{margin-bottom:50px;}
    .button_container{text-align:right;}
    #submit_button{margin-top:30px;}
    #version_info{bottom:60px;left:60px;}
}