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

html,body{
background-image: url(../../img/portada.webp);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Raleway', sans-serif;
}

.container{
height: 100%;
align-content: center;

}

.card{
height: auto;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(255, 255, 255, 0.3) !important;
}

.contacto input:focus:invalid { 
    background: #000 url(../img/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

.contacto input:required:valid { 
    background: #000 url(../img/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}


.social_icon span{
font-size: 60px;
margin-left: 10px;
color: rgb(7, 189, 67);
}

.social_icon span:hover{
color: #000;
cursor: pointer;
}

.card-header h3{
color: #000;
}

.card-header h3 {
font-weight: lighter;
}
.card-header h3 > b{
font-weight: 900;
}

.titulo-card{
	color: #000;
	margin-bottom: 25px;
}
.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: rgb(91, 160, 12);
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{
margin-top: 40px;
color: black;
background-color: rgb(91, 160, 12);

}

.login_btn:hover{
color: black;
background-color: #FFC312;
}

.links{
color: white;

}

.links:hover{
color: white;
text-decoration: none;
font-weight: bold;
}