@font-face {
    font-family: 'Graphit-Light';
    src: url('../fonts/Graphit/Graphit-Light.otf');
}

body{
	margin:0;
	background:url(../images/fondo.jpg) no-repeat center;
	background-size: cover;
	font-family: 'Graphit-Light';
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.container {
	display: flex;
    justify-content: center;
}

.img-fluid {
	max-width: 400px; 
	margin-top: 20px;
}

.login-wrap{
	width:100%;
	margin:auto;
	margin-top: 30px;
	margin-bottom: 30px;
	max-width:525px;
	min-height:532px;
	position:relative;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 15px;
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:30px 50px 30px 50px;
	border-radius: 15px;
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}

.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	display:inline-block;
	border-bottom:2px solid transparent;
}

.login-form{
	position:relative;
}

.login-form .group{
	margin-bottom:15px;
}

.login-form .group .input:focus {
	background: #fff;
	border: 2px solid #e4a645;
	outline: none;
  }

.login-form .group .label,
.login-form .group .input,
.login-form .group {
	width:100%;
	color:#e4a645;
	font-size: 18px;
	font-weight: bold; 
	display:block;
}

.button:hover img {
	opacity: 0.6;
}

.login-form .group .input{
	border:none;
	padding:10px 25px;
	border-radius:25px;
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#fff;
	font-size: 25px;

}
.login-form .group .button{
	background:#e4a645;
	border:none;
	border-radius:25px;
	margin-left: 35px;
	margin-right: 35px;
	background: none; 
	border: none; 
	cursor: pointer; 
	padding: 0;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255, 254, 254, 0.5);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}

.foot-lnk{
	text-align:center;
	color:#fff;
}
.foot-lnk a:hover {
    color: #e4a645;
    outline: none; 
}

html, body {
	margin: 0;
	padding: 0;
  }

.login-form .group .check:not(:checked) + label {
    color: #999; 
    font-size: 14px; 
}
.login-form .group .check:checked + label {
    color: #999;
    font-size: 14px;

}
.login-form .group .check:checked + label .icon {
    background: #e4a645;
}
.login-form .group .check:checked + label .icon:before {
    transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
    transform: scale(1) rotate(-45deg);
}

.login-form .group .check:checked + label{
	color:#fff;
}

@media (min-height: 800px) {
    .login-wrap {
        max-width: 90%; 
        padding: 0; 
		width: 100%;
		margin: auto;
		margin-top: 0; 
		min-height: 100vh;
		/* display: flex; */
		
    }

	.login-html{
		padding:30px 50px 30px 20px;
	}

    .login-form .group .button {
        margin-left: 0;
        margin-right: 0;
        width: 100%; 
    }

	.foot-lnk a{
		font-size: 20px;
	}
	.login-form .group .label {
		font-size: 21px;
	}
	.login-form .group .check:not(:checked) + label {
		font-size: 20px;
	}
	.login-form .group .check:checked + label {
		font-size: 20px;
	}

	.img-fluid {
		max-width: 300px;
	}

}