html{
	height:100%;
}
body{
	
}

.bg-login{
	background-image:url("../images/fondos/bg_login.png");
	background-repeat:no-repeat;
	background-size:container;
	background-position:bottom;
	height:100%;
}

.content-login{
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    padding: 2em;
    box-shadow: 1px 1px 10px #eee;
}

.label-loguin{
	font-size:  12.5px; 
	color:  #000;
	opacity:  .8;
	font-weight:  400; 
}

.input-login {
	 font-size: 16px;
	 padding: 20px 0px;
	 height: 56px;
	 border: none;
	 border-bottom: solid 1px rgba(0, 0, 0, .1);
	 background: #fff;
	 width: 280px;
	 box-sizing: border-box;
	 transition: all 0.3s linear;
	 color: #000;
	 font-weight: 400;
	 -webkit-appearance: none;
}
.input-login:focus {
	 border-bottom: solid 1px #b69de6;
	 outline: 0;
	 box-shadow: 0 2px 6px -8px rgba(182, 157, 230, .45);
}
 .floating-label {
	 position: relative;
	 margin-bottom: 10px;
	 width: 100%;
}
 .floating-label label {
	 position: absolute;
	 top: calc(50% - 17px);
	 left: 0;
	 opacity: 0;
	 transition: all 0.3s ease;
	 padding-left: 60px;
}
 .floating-label input {
	 width: calc(100% - 44px);
	 margin-left: auto;
	 display: flex;
}
 .floating-label .icon {
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 60px;
	 width: 44px;
	 display: flex;
}
 .floating-label .icon i {
	 height: 30px;
	 width: 30px;
	 margin: auto;
	 opacity: 0.15;
	 transition: all 0.3s ease;
	 font-size: 1.4em;
}
.floating-label .icon i {
	 transition: all 0.3s ease;
}
 .floating-label input:not(:placeholder-shown) {
	 padding: 20px;
}
 .floating-label input:not(:placeholder-shown) + label {
	 transform: translateY(-10px);
	 opacity: 0.7;
}
 .floating-label input:valid:not(:placeholder-shown) + label + .icon i {
	 opacity: 1;
}
 .floating-label input:valid:not(:placeholder-shown) + label + .icon i {
	 fill: #b69de6;
}
 .floating-label input:not(:valid):not(:focus) + label + .icon {
	 animation-name: shake-shake;
	 animation-duration: 0.3s;
}
 @keyframes shake-shake {
	 0% {
		 transform: translateX(-3px);
	}
	 20% {
		 transform: translateX(3px);
	}
	 40% {
		 transform: translateX(-3px);
	}
	 60% {
		 transform: translateX(3px);
	}
	 80% {
		 transform: translateX(-3px);
	}
	 100% {
		 transform: translateX(0px);
	}
}

.forgot{
	color:#383737;
	font-weight:bold;
}

.forgot:hover,.forgot:active,.forgot:focus{
	color:#383737;
	text-decoration:none;
}

.btn-login{
	background-color:#ee2128;
	opacity:1;
	font-weight:bold;
	color:#fff;
	width:100%;
	border:0;
}

.btn-login:hover,.btn-login:active,.btn-login:focus{
	color:#fff;
	opacity:0.8;
	background-color:#ee2128;
}

.btn-regresar{
	background-color:#696e74;
	opacity:1;
	font-weight:bold;
	color:#fff;
	width:100%;
	border:0;
}

.btn-regresar:hover,.btn-regresar:active,.btn-regresar:focus{
	color:#fff;
	opacity:0.8;
	background-color:#696e74;
}

.title-login{
	color: #000;
    font-size: 2rem;
}

.text-login{
	color: #000;
    font-size: 1rem;
}

.separador{
    width:650px;
    max-width:90%;
    margin:25px auto 0;
    position:relative;
    height:20px;
}

.separador::before,
.separador::after{
    content:"";
    position:absolute;
    top:50%;
    width:calc(50% - 18px);
    height:2px;
    background:#bfbfbf;
}

.separador::before{
    left:0;
}

.separador::after{
    right:0;
}

.separador span{
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:12px;
    background:#E30613;
    border-radius:50%;
    transform:translate(-50%, -50%);
}

.text-recuperar{
	color: #E30613;
    font-size: 1rem;
	text-decoration:none;
}

.text-recuperar:hover,.text-recuperar:active,.text-recuperar:focus{
	color:#E30613;
	text-decoration:none;
}

@media (max-width: 1399.98px) {	

}

@media (max-width: 1300px) {	

}

@media (max-width: 1199.98px) {

}

@media (max-width: 991.98px) {

}

@media (max-width: 767.98px) {

}

@media (max-width: 575.98px) {
	.img-flor{
		width:10rem;
		height:auto;
	}
	
	.img-hoja{
		width:5rem;
		height:auto;
	}

}

@media (max-width: 400px) {

}

@media (max-width: 360px) {
	
}