html,
	body{
		height:100%;
		margin:0;
		font-family:'Helvetica Neue',Arial,sans-serif;
	}
	
	.left-panel{
		position:relative;
		min-height:100vh;
		overflow:hidden;
	}
	
	.bg-photo{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
	
		background:url('../../img/acceso-de-seguridad.jpg')
		center center no-repeat;
		background-size:cover;
	}
	
	.bg-grad{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
	
		background:linear-gradient(
			to top,
			rgba(0,0,0,.95),
			rgba(0,0,0,.55),
			rgba(0,0,0,.15)
		);
	}
	
	.bg-tint{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
	
		background:radial-gradient(
		  ellipse at 30% 20%,
		  rgba(232,93,4,.18),
		  transparent 60%
		);
	}
	
	.logo-top{
		position:absolute;
		top:35px;
		left:40px;
		z-index:5;
		background: rgba(255,255,255,0.7);
		border-radius:10px;
		padding:10px;
	}
	
	.logo-name{
		color:#fff;
		font-size:28px;
		font-weight:800;
		vertical-align:middle;
		margin-left:10px;
	}
	
	.left-content{
		position:absolute;
		bottom:50px;
		left:50px;
		z-index:5;
		max-width:550px;
	}
	
	.pill{
		display:inline-block;
		padding:6px 14px;
		border-radius:30px;
		border:1px solid rgba(232,93,4,.4);
		background:rgba(232,93,4,.15);
		color:#fb923c;
		font-size:11px;
		font-weight:700;
		text-transform:uppercase;
		margin-bottom:20px;
	}
	
	.hero-title{
		color:#fff;
		font-size:48px;
		font-weight:900;
		line-height:1.1;
		margin-bottom:15px;
	}
	
	.hero-title span{
		color:#e85d04;
	}
	
	.hero-desc{
		color:rgba(255,255,255,.7);
		font-size:15px;
		line-height:1.6;
		margin-bottom:30px;
	}
	
	/* ===================================
	   FEATURES
	=================================== */
	
	.feature-box{
		background:rgba(255,255,255,.08);
		border:1px solid rgba(255,255,255,.15);
		border-radius:8px;
		padding:12px;
		margin-bottom:12px;
		color:#fff;
	}
	
	.feature-icon{
		width:36px;
		height:36px;
		line-height:36px;
		text-align:center;
		border-radius:8px;
		background:rgba(232,93,4,.15);
		color:#fb923c;
		margin-right:10px;
		float:left;
	}
	
	.feature-text{
		overflow:hidden;
	}
	
	.feature-text strong{
		display:block;
		font-size:13px;
	}
	
	.feature-text span{
		color:rgba(255,255,255,.6);
		font-size:11px;
	}
		
	/* ######################### */
	
	.right-panel{
		min-height:100vh;
		background:#eae6df;
		background-size:22px 22px;
	
		display:table;
	}
	
	.vertical-center{
		display:table-cell;
		vertical-align:middle;
		padding:30px;
	}
	
	.login-card{
		max-width:420px;
		margin:auto;
		background:#fff;
		border-radius:16px;
		padding:35px;
		box-shadow:0 8px 30px rgba(0,0,0,.1);
	}
	
	.card-title{
		font-size:26px;
		font-weight:800;
	}
	
	.card-subtitle{
		color:#999;
		margin-bottom:25px;
	}
	
	.form-control{
		height:46px;
		border-radius:8px;
	}
	
	.form-control:focus{
		border-color:#e85d04;
		box-shadow:0 0 0 3px rgba(232,93,4,.12);
	}
	
	.password-wrap{
		position:relative;
	}
	
	.eye-btn{
		position:absolute;
		right:12px;
		top:50%;
		transform:translateY(-50%);
		background:none;
		border:none;
		color:#999;
	}
	
	.btn-login{
		width:100%;
		height:50px;
		border:none;
		border-radius:8px;
		background:#1a1a1a;
		color:#fff;
		font-weight:700;
		margin-top:10px;
	}
	
	.btn-login:hover{
		background:#e85d04;
	}
	
	.security{
		margin-top:18px;
		text-align:center;
		color:#aaa;
		font-size:12px;
	}