@font-face {font-family: 'Roboto'; src: url('../font/Roboto-Light.ttf') format('truetype'); font-weight: 200;}
@font-face {font-family: 'Roboto'; src: url('../font/Roboto-Regular.ttf') format('truetype'); font-weight: normal;}
@font-face {font-family: 'Roboto'; src: url('../font/Roboto-Medium.ttf') format('truetype'); font-weight: bold;}

* {box-sizing: border-box; font-family: Roboto;}

body {margin: 0;}

.top {background: #482880; width: 100%; height: 50%; position: fixed;}
.bottom {background: #e4e4e4; width: 100%; height: 50%; position: fixed; top: 50%;}

form {position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 300px; background: white; padding: 50px; border-radius: 10px;}

img {margin: 0 auto 25px auto; width: 60px; display: block;}

.campo_user *, .campo_password * {display: block;}

.campo_user label, .campo_password label {padding-bottom: 10px; color: #797979; font-weight: 200;}

.campo_user input, .campo_password input {margin-bottom: 20px; padding: 8px 1px; border-width: 0 0 1px 0; border-color: #777777; border-style: solid; outline: none; width: 100%;}

.campo_user input:hover, .campo_password input:hover {border-width: 0 0 1px 0; border-color: #9f74e8; border-style: solid;}
.campo_user input:focus, .campo_password input:focus {border-width: 0 0 1px 0; border-color: #482880; border-style: solid;}

.campo_termos * {display: inline-block; margin-bottom: 15px;}

.campo_termos label, #login {font-size: 13px; color: #797979; font-weight: normal;}

.checkbox {float: left; margin: 4px 10px 3px 0px; appearance: push-button}

span {display: block;}

#error_user, #error_password, #error_termos {float: right; margin: -10px 0 20px 0px; color: red; font-size: 10px;}

#submitted {color: green; font-size: 14px; text-align: center;}

#login {background: #482880; border: none; color: white; text-transform: uppercase; font-weight: bold; width: 100%; padding: 10px 0; outline: none; cursor: pointer; font-size: 16px; letter-spacing: 1px; opacity: 0.7;}

#login:active {background: #381f75;}