@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
* { font-family: 'Roboto';}

body, html {
  font-size: 62.5%;
  text-align: left;

 }

body {
  font-size: 101%;
  font-family: 'Roboto', sans-serif;
  color: #333;
  background: #3aa8de;
background: -moz-linear-gradient(45deg, #3aa8de 0%, #1e7ba9 100%);
background: -webkit-linear-gradient(45deg, #3aa8de 0%,#1e7ba9 100%);
background: linear-gradient(45deg, #3aa8de 0%,#1e7ba9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3aa8de', endColorstr='#1e7ba9',GradientType=1 );
	background-attachment: fixed, fixed;

}

html > body {
  font-size: 100%;
 }

*:first-child + html body {
  font-size: 101%;
 }

*{
	margin:0;
	padding:0;
	border:none;
	box-sizing: border-box;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color:#333;
	-webkit-text-fill-color:#000;
	-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.2) inset;
	transition: background-color 5000s ease-in-out 0s;
}

.header-login{
	color:#FFF;
	text-transform:uppercase;
	background-color:#444;
	width:100%;
	padding:0.5rem 0.8rem;
	box-shadow: 0px 2px 3px #333;
}

	.header-login__titulo{
		font-weight: 100;
		font-size:1.2em;
		-webkit-font-smoothing: antialiased;
		letter-spacing: 7px;
		margin-top:1em;

	}

.login-box{
	color: #FFF;
	width:35vw;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	padding:3rem;
	margin: 10vh auto 0 auto;
	/*background-color:rgba(68, 68, 68, 0.3);*/
}

	.login-box__cabecera{
		text-align: center;
		margin:0 0 5rem 0;
	}

	.login-box__cabecera__logo{
		width:30rem;
		max-width:100%;
		height:auto;
	}

	.login-box__titulo{
		padding-bottom:2.5rem;
		font-size:1.9em;
		width:100%;
		font-weight: 100;
		border-bottom: 1px solid #FFF;
		-webkit-font-smoothing: antialiased;
	}

	.login-form__contenido{
		padding: 2.5rem 0;
		color: #FFF;
	}

	.login-form__label{
		text-transform: uppercase;
		font-size:1.2em;
		margin:1rem 0.5rem;
		display:block;
	}
	.login-form__input{
		width:100%;
		padding:1em;
		border:none;
    background-color: #59ABD4;
		background-color:rgba(255, 255, 255, 0.2);
		margin-bottom:2rem;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		-o-border-radius:4px;
		border-radius:4px;
		outline:0;
	}

	.login-form__input:focus{
		border: 2px solid #FF8F35;
	}

	.login-form__input,.login-form__input::placeholder{
		color:#333;
		font-size:1.2em;
		font-weight:normal;
	}

	.login-form__botonera{
		text-align:center;
		padding-top: 3em;
	}

	.login-form__btn-entrar{
		background-color: transparent;
		padding: 0.8em 1.5em;
		text-transform: uppercase;
		color: #FFF;
		font-size: 1.3em;
		position:relative;
		cursor:pointer;
		cursor:hand;
		transition: all .18s ease-out;
		border:2px solid #FFF;
		-moz-border-radius:50px;
		-webkit-border-radius:50px;
		-o-border-radius:50px;
		border-radius:50px;
		min-width:150px;
		outline: 0;
	}

	.login-form__btn-entrar:hover{
		font-weight:bold;
		letter-spacing: 7px;
	}

	.login-form__btn-entrar::after{
		content: "";
		position:absolute;
		height:0;
		width:100%;
		bottom:0;
		left:0;
		transition: all .18s ease-out;
		z-index: -1;
		-moz-border-radius:50px;
		-webkit-border-radius:50px;
		-o-border-radius:50px;
		border-radius:50px;

	}

	.login-form__btn-entrar:hover::after{
		content: "";
		height:100%;
		background-color:#FF8F35;
	}


	.login-form__checkbox{
		visibility:hidden;
	}

	.login-form__checkbox__label{
		position:relative;
		padding-top:0.3rem;
		font-size: 1.2em;
		margin-left:0.7em;
		padding-left:0.4em;
	}
	.login-form__checkbox__label::after{

		content: '';
		  width: 0.8em;
		  height: 0.4em;
		  position: absolute;
		  top: 0.3em;
		  left: -1.6em;
		  border: 3px solid #fcfff4;
		  border-top: none;
		  border-right: none;
		  background: transparent;
		  opacity: 0;
		  -webkit-transform: rotate(-45deg);
		          transform: rotate(-45deg);

	}

	.login-form__checkbox__label::before{
		content: '';
		  width: 1.7em;
		  height: 1.7em;
		  position: absolute;
		  top: 0;
		  left: -2em;
		  background-color:#444;
		 -moz-border-radius:4px;
		 -webkit-border-radius:4px;
		  -o-border-radius:4px;
		  border-radius:4px;

	}

	.login-form__checkbox:checked + label:after {
  		opacity: 1;
	}

	.alert{
		padding: 10px;
		text-align: center;
		margin-bottom:10px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		-o-border-radius:4px;
		border-radius:4px;
	}
	.alert p{
		font-size:1.3em;
	}
	.alert-danger{
		border:2px solid red;
		background-color: #FF3939;
		color: white;
	}

@media screen and (max-width: 1024px){
	.login-box{ width:70vw; }
	.login-box{padding-bottom:0;}
	.login-box__cabecera{margin-bottom:2.5rem;}
	.login-box__titulo{
		text-align:center;
		padding-bottom:1rem;
	}
}
@media screen and (max-width: 450px){
	.login-box{
		width:98vw;
		margin-top: 0vh;
	}
	.header-login{ text-align:center; }
	.login-box__cabecera__logo{ width:70vw; }
	.login-box__titulo{margin-bottom:0;}
}
