/* Made with love by Mutiullah Samim*/

@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
background-image: url('https://lh3.googleusercontent.com/gps-cs-s/AC9h4noMWKKPph5cXa9jHuJnXeoXGY3C0AAVk4RB2wegK_F_cd7OwrCE6_xMfwB4L2LTlo40RWl3ekNtG5atWDPePQeu2356--TDbiH-UTtLBENECi-mNlKGTqytFKeiS0caXrEwCS3i=s1360-w1360-h1020');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}


.container{
height: 100%;
align-content: center;
}

.logo{
	padding: 10px;
}
.logo-abingeniero{
	width: 200px;
    
    
}

.card{
height: 370px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}

.preloader {
	margin: auto;
	
	width: 450px;
	height: 30px;
	background: rgba(255,255,255,0.1);
	
	position: relative;
}

.preloader:before {
	content: "";
	position: absolute;
	background: green;
	width: 0;
	height: 30px;
	
	animation: preloader 10s infinite;
}

.preloader p {
	margin: 0;
	line-height: 30px;
	font-size: 25px;
	font-weight: bold;
	
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.cerrar {
	transform: translateY(-100%);
	transition: all 0.5s;
}

@keyframes preloader {
	90% {
		width: 100%;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 0;
	}
}