@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;}
.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.3;}

.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: Arial; font-weight: 500; font-size: 40px; line-height:40px; color: #4f934a; text-shadow: 1px 1px 0 rgba(256,256,256,1.0); margin-bottom: 10px; text-align: center;}
.login-form .header h2 {font-family: 'Muli', serif; font-weight: 300; font-size: 20px; line-height:25px; 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: 188px; padding: 15px 25px; 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, .diploma-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:310px; background: #444 url(../img/user-icon.png) no-repeat center;}
.pass-icon {top:385px; background: #444 url(../img/pass-icon.png) no-repeat center;}
.diploma-icon {top:335px; background: #444 url(../img/diploma-icon.png) no-repeat center;}

/* Animation */
.input, .user-icon, .pass-icon, .diploma-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: #cf003d; 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: #dd3667; 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: #dd3667; 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;}
.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;}


@media(min-width: 768px)
{
    /* Texto del pie con enlace */
	.texto-pie {margin-top: 20px; font-size: 0.7em; text-align: center;}
	a.enlace-login:link, a.enlace-login:visited, a.enlace-login:active {TEXT-DECORATION: none; color: #003883; font-weight: bold;}
	a.enlace-login:hover {TEXT-DECORATION: underline; color: #69c3e8;}
	
	/* Triángulo Ayuda Online */
    .triangle {position: absolute; width: 0; height: 0; border-top: 200px solid #397b7a; border-right: 200px solid transparent; color: #eee;}
    .triangle-on {border-top: 200px solid #69c3e8; color: #fff; -webkit-transition: border-top 500ms linear; -ms-transition: border-top 500ms linear; transition: border-top 500ms linear;}
    .triangle > span {position: absolute; top: -180px; left: 20px; transform: rotate(-45deg); font-size: 2em;}
    .triangle > div {position: absolute; top: -160px; left: 0px; transform: rotate(-45deg); overflow: visible; width: 140px; text-align: center;}
    .triangle > div > p {margin: 0px; padding: 8px 0px 0px 0px; font-size: 0.7em;}
}
@media(max-width: 767px)
{
    /* Texto del pie */
	.texto-pie {visibility: hidden; display: none; height: 0px;}
    
    /* Triángulo Ayuda Online */
    .triangle {display: none;}
}