@import url(https://fonts.googleapis.com/css?family=Muli);

/*body {padding: 0px; margin: 0px; font-family: 'Muli', sans-serif; background: #fff; font-weight:300; text-align: left;}*/
body {padding: 0px; margin: 0px; margin: 0 auto; text-align: center; font-family: 'Muli', sans-serif; background: #fff; font-weight:300;}
.background {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background: url('../img/background.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0.75;}

.clear {clear: both;}

/* Estilo de selección */
::selection {color: #fff; background: #7bc6dc;} /* Safari */
::-moz-selection {color: #fff; background: #7bc6dc;} /* Firefox */

/* Center wrapper perfectly */
#wrapper {width: 300px; height: 450px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -275px;}

/* Login form */
.login-form {width: 300px; margin: 0 auto; position: relative; z-index:5; background: #f3f3f3; border: 1px solid #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);}

/* Login form header */
.login-form .header {padding: 30px;}
.login-form .header h1 {font-family: 'Muli', serif; font-weight: 300; font-size: 25px; line-height:34px; color: #414848; text-shadow: 1px 1px 0 rgba(256,256,256,1.0); margin-bottom: 10px;}
.login-form .header span {font-size: 11px; line-height: 16px; color: #444; text-shadow: 1px 1px 0 rgba(256,256,256,1.0);}

/* Login form content */
.login-form .content {padding: 0 30px 25px 30px;}

/* Input field */
.login-form .content .input {width: 100%; padding: 15px; font-family: 'Muli', sans-serif;	font-weight: 400; font-size: 14px; color: #9d9e9e; text-shadow: 1px 1px 0 rgba(256,256,256,1.0); background: #fff; border: 1px solid #fff; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);}

/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {margin-top: 25px;}

.login-form .content .input:hover {background: #dfe9ec; color: #414848;}

.login-form .content .input:focus {background: #dfe9ec; color: #414848; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);}

.user-icon, .pass-icon {width: 46px; height: 47px; display: block; position: absolute; left: 0px; padding-right: 2px; z-index: 3; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;}

.user-icon {top:248px; background: #444 url(../img/user-icon.png) no-repeat center;}
.pass-icon {top:325px; background: #444 url(../img/pass-icon.png) no-repeat center;}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register {transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}

/* Login form footer */
.login-form .footer {padding: 25px 30px 20px 30px; overflow: auto; background: #444; border-top: 1px solid #fff; box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); border-radius: 0px 0px 5px 5px;}

/* Login button */
.login-form .footer .button { float:right; padding: 11px 25px; font-family: 'Muli', serif; font-weight: 300; font-size: 18px; color: #fff; text-shadow: 0px 1px 0 rgba(0,0,0,0.25); background: #550B62; border: 0px; border-radius: 5px; cursor: pointer; box-shadow: inset 0 0 2px rgba(0,0,0,0.75); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.75);}
.login-form .footer .button:hover {background: #762784; border: 0px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);}
.login-form .footer .button:focus {position: relative; bottom: -1px; background: #762784; box-shadow: inset 0 1px 6px rgba(0,0,0,0.75); -moz-box-shadow: inset 0 1px 6px rgba(0,0,0,0.75); -webkit-box-shadow: inset 0 1px 6px rgba(0,0,0,0.75);}

/* Register button */
.login-form .footer .register {display: block; float: right; background: none; border: none; cursor: pointer; font-size: 0.8em; color: #ddd; margin-top: 8px; margin-right: -10px;}
.login-form .footer .register:hover {color: #fff; text-decoration: underline;}
.login-form .footer .register:focus {position: relative;}

/* Logo */
.header img {width: 100%; margin-bottom: 15px;}

/* Error */
.error {font-size: 11px; color: #a10808;}

/* Cabecero login */
#cabecero-login {position: fixed; top: 0px; width: 100%; padding: 15px 20px; background-color: #fff; opacity: 0.75;}
.texto-cabecero-login {text-align: right; font-size: 24px; padding-top: 2px;}
#cabecero-login img {height: 40px;}

/* Pie login */
#pie-login {position: fixed; bottom: 0px; width: 100%; padding: 20px; background-color: #fff; opacity: 0.9; border-top: 1px solid #999; color: #000;}


@media(max-width: 1024px)
{
    /* Cabecero login */
    .texto-cabecero-login {text-align: right; font-size: 16px; padding-top: 4px;}
    #cabecero-login img {height: 30px;}

    /* Pie login */
    #pie-login {font-size: 11px;}
}
@media(max-width: 767px)
{
    /* Cabecero login */
	#cabecero-login {visibility: hidden; display: none; height: 0px;}

    /* Pie login */
    #pie-login {visibility: hidden; display: none; height: 0px;}
}