@charset "utf-8";

body{
	
	margin:0;
	
	padding:0;
	
	background-color:#d40000;
	
	background-size:cover;
}
#formulario{
	
	margin:20px auto;
	
	background-color:white;
	
	width:90%;
	
	max-width:350px;
	
	padding:25px;
	
	border-radius:10px;
	
	text-align:center;
}
.logo{
	
	display:flex;
	
	justify-content:center;
	
	align-items:center;
}
.loader{
	
	height:35px;
	
	display:flex;
	
	align-items:center;
}
.loader .stroke{
	
	display:block;
	
	position:relative;
	
	background:black;
	
	height:100%;
	
	width:7px;
	
	border-radius: 50px;
	
	margin: 0 5px;
	
	animation: animate 1.2s linear infinite;
}
@keyframes animate{
	
	50%{
	
		height:20%;
	}
}
.stroke:nth-child(1){
	
	animation-delay:0.3s;
}
.stroke:nth-child(2){
	
	animation-delay:0.2s;
}
.stroke:nth-child(3){
	
	animation-delay:0.1s;
}
.stroke:nth-child(4){
	
	animation-delay:0.2s;
}
.stroke:nth-child(5){
	
	animation-delay:0.3s;
}
#logodos{
	
	text-decoration:none;
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	
	font-weight:bolder;
	
	font-size:28px;
	
	color:black;
	
	margin-left:8px;
}
#tituloform{
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	
	display:flex;
	
	align-content:center;
	
	justify-content:center;
}
.inputWithIcon{
	
	width:60%;
	
	position:relative;
	
	display:flex;
	
	align-items:center;
	
	background-color:white;
	
	padding:5px 10px;
	
	border-radius:0;
	
	border:1px solid #dddddd;
	
	margin:auto;
	
	transition:0.4s;
}
:focus{
	
	outline:none;
}
.datos{
	
	width:100%;
	
	height:25px;
	
	outline:none;
	
	border:none;
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	
	font-size:1em;
}
.icono{
	
	margin-right:6px;
}
.datos ~ .focus-border:before,
.datos ~ .focus-border:after{
	
	content:'';
	
	position:absolute;
	
	top:0;
	
	right:0;
	
	width:0;
	
	height:2px;
	
	background-color:#DC143C;
	
	transition:0.2s;
	
	transition:0.2s;
}
.datos ~ .focus-border:after{
	
	top: auto;
	
	bottom:0;
	
	right:auto;
	
	left:0;
	
	transition-delay:0.6s;
}
.datos ~ .focus-border i:before,
.datos ~ .focus-border i:after{
	
	content:'';
	
	position:absolute;
	
	top:0;
	
	left:0;
	
	width:2px;
	
	height:0;
	
	background-color:#DC143C;
	
	transition:0.2s;
}
.datos ~ .focus-border i:after{
	
	left:auto;
	
	right:0;
	
	top:auto;
	
	bottom:0;
	
	transition-delay:0.4s;
}
.datos:focus ~ .focus-border:before,
.datos:focus ~ .focus-border:after{
	
	width:100%;
	
	transition:0.2s;
	
	transition-delay:0.6s;
}
.datos:focus ~ .focus-border:after{
	
	transition-delay:0.2s;
}
.datos:focus ~ .focus-border i:before,
.datos:focus ~ .focus-border i:after{
	
	height:100%;
	
	transition:0.2s;
}
.datos:focus ~ .focus-border i:after{
	
	transition-delay:0.4s;
}
#botonsesion{
	
	height:37px;
	
	width:105px;
	
	display:flex;
	
	justify-content:center;
	
	align-items:center;
	
	background-color:#d40000;
	
	color:white;
	
	border:none;
	
	border-radius:8px;
	
	outline:none;
	
	cursor:pointer;
	
	position:relative;
	
	z-index:1;
	
	overflow:hidden;
	
	margin:auto;
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#botonsesion::before{
	
	content:'';
	
	position:absolute;
	
	top:0;
	
	left:0;
	
	right:0;
	
	bottom:0;
	
	background-color:black;
	
	z-index:-1;
	
	border-radius:50%;
	
	transform: scale(1.5);
	
	transition: transform 500ms ease-in-out;
}
#botonsesion:hover::before,
#botonsesion:focus::before{
	
	transform:scale(0);
}
.passlink{
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	
	color:gray;
	
	text-decoration:none;
	
	font-weight:bolder;
	
	transition-property:all;
	
	transition-duration:.5s;
}
.passlink:hover{
	
	border-bottom:black 1px solid;
	
	color:black;
}
.correomessage{
	
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	
	color:red;
	
	font-weight:bolder;
}