:root {
	--Tipografia: 'Josefin Sans', sans-serif;
	--Fondo-Boton: #6caee0;
	--Del-Rojo: #f60808;
	--Menu: rgba(45, 41, 46, 0.93);
}

html{ height:100%; margin:0px; padding:0px; }

body{ cursor: auto; display: inline;
float: none; font-family: var(--Tipografia); font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; font-weight: bold; color: #FFF; text-shadow:#000 0px 1px 0px; height: auto; line-height: 20px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-width: 600px; min-height: 800px; background-color: #f1f1f1; }

ul { padding: 0; margin: 0; line-height: 10px; }
li { list-style: none; }

input { border: 2px solid #CCC; color: #666; font-size: 16px; font-weight: normal; border-radius: 4px; appearance: none; outline-style: none;  }
input:focus {	background-color: rgba(255,255,255,1.0); box-shadow: 0px 0px 6px #268ff8; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; }
#login input[type=text], input[type=password],#error input[type=text], input[type=password], input[type=email] { width: 265px; height: 35px; margin-left: 5px; color: #333; z-index: 1; padding-left: 15px; }
#login input[type=submit],#error input[type=submit] { margin-top: 10px; }

.correo { border-radius: 4px 4px 0 0; }
.password { border-radius: 0 0 4px 4px; border-top: 0px; }

.fontAwesome { font-family: var(--Tipografia), "Font Awesome 5 Free", sans-serif; }

.boton {
    border: 0px solid #CCC;
    color: #FAFAFA;
    font-size: 15px;
    border-radius: 4px; padding: 5px 20px;
    box-shadow: 0 0 1px #BBB;
    text-shadow: 1px 1px 1px black;
    transition: background-color 300ms linear 0s;
    margin-left: 4px;
    margin-top: 10px;
	width: 287px;
	height: 35px;
	background: var(--Fondo-Boton);
}

.boton:hover { box-shadow: inset 0px 0px 5px #000; }

/* pantalla inicio */
#login,#recordarpass,#error { display: none; padding: 10px; width: 295px; height: 160px; position: absolute; left: 50%; top: 50%; margin-top: -100px;	margin-left: -170px; background-color: rgba(255,255,255,0.37); display:inline-block; font-size: 19px;line-height: 40px;border-radius: 8px;transition: all 0.5s linear; }

#login,#error { background-image: url(../Imagenes/Usointerno/candado.png);background-position: 145px -10px;background-size:175px;background-repeat: no-repeat; }

#recordarpass { background-color: #FFF;); }
#login { border: 2px solid #CCC; box-shadow: rgba(0, 0, 0, 0.699219) 0px 0px 20px 4px; background-color: rgba(255,255,255,1.0); box-shadow: 0px 0px 20px 1px #000; transition: all 0.5s linear; color: var(--Fondo-Boton); text-shadow:#CCC 0px 1px 0;#ffffff }

#error { 	border: 2px solid #ff0000; box-shadow: rgba(138,0,0,0.699219) 0px 0px 20px 4px; }

#login:hover { background-color: rgba(255,255,255,1.0); box-shadow: 0px 0px 20px 4px #268ff8; transition: all 0.5s linear; color: #268ff8; text-shadow:#CCC 0px 1px 0;}
#error:hover { background-color: rgba(255,255,255,1.0); box-shadow: 0px 0px 20px 4px #f82525; transition: all 0.5s linear; color: #268ff8; text-shadow:#CCC 0px 1px 0; }

.iconousuario { font-size: 30px; text-align: center; margin-bottom: 7px; color: #CCC; text-shadow: none; }
.Opciones { border-top: 1px solid var(--Fondo-Boton); line-height: 32px; text-align: center; margin-top: 10px; }
.Opciones a { text-decoration: none; color:#333; font-size: 12px; text-shadow: none; }
.Opciones i { text-decoration: none; color:#333; font-size: 12px; text-shadow: none; }