body 
{
/*background:url(../img/bg.jpg) no-repeat;*/
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover; 
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
text-align:center;
margin-top:70px;
text-align:center;
margin-left : auto;
margin-right : auto;
}
#login
{
width:320px;
height:inherit;
padding:35px;
background:url(../img/bg_login.png)repeat;
padding-bottom:5px;
margin: 0px auto;
-moz-border-radius:3px;border-radius:3px;
margin-top:10px;
font-family: 'Open Sans', sans-serif; color: #FFF;
}
#titulo
{
margin-top:10px;
padding-bottom:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
color:#006699;
border-bottom:1px dashed #990000;
}
.box
{
margin-top:5px;
font-family: 'Open Sans', sans-serif;
font-size:13px;
border:1px solid #E9E9E9;
color:#666666;
padding:4%;
-moz-border-radius:2px;border-radius:2px;
width:92%;
}
.linea{ margin-top:5px; margin-bottom:5px; height:1px; border-bottom:1px solid #FFF;}
.by{font-size:10px; text-align:center;font-family: 'Open Sans', sans-serif; margin-bottom:20px; margin-top:15px; color: #fff;}
.boton
{
width:100%;
font-family: 'Open Sans', sans-serif;
font-size:16px;
background-color:#069;
color:#FFFFFF; padding:4%; margin-top:20px; border:0px; cursor:pointer; margin-bottom:20px;-moz-border-radius:2px;border-radius:2px;}
.boton:hover{ background-color:#002448;}
.img_responsive{max-width:100%!important;height:auto; margin-bottom:30px;}
.msj1{width:250px; padding:20px; color:#fff; position:absolute; top:90px; -moz-border-radius:3px;border-radius:3px; background:background:url(../img/icons/close.png) right top no-repeat  #006600;font-family: 'Open Sans',sans-serif; font-size:13px; font-weight:600; text-align:left; line-height:18px; left: 50%; margin-left:-140px; }
.msj2{width:250px; padding:20px; color:#fff; position:absolute;  top:90px; -moz-border-radius:3px;border-radius:3px; background:url(../img/icons/close.png) right top no-repeat #F90;font-family: 'Open Sans',sans-serif; font-size:13px; font-weight:600; text-align:left;line-height:18px; left: 50%; margin-left:-140px;}
.msj3{width:250px; padding:20px; color:#fff; position:absolute; top:90px; -moz-border-radius:3px;border-radius:3px; background:url(../img/icons/close.png) right top no-repeat  #CC0000;font-family: 'Open Sans',sans-serif; font-size:13px; font-weight:600; text-align:left;line-height:18px; left: 50%; margin-left:-140px;}
.msj_progress{ height:2px; background:#fff; width:0px; margin-top:10px;}
.titl{font-size: 18px; margin-top:5px;}
.txtlbl{font-size: 14px; margin-top:5px; line-height: 18px; margin-bottom: 10px;}
input:focus, textarea:focus, select:focus{
        outline: none;
    }

.progress-btn {
	position: relative;
	margin-top:20px;
	margin-bottom:20px;
	width:92.1%;
	padding:4%;
	height: 20px;
	-moz-border-radius:2px;border-radius:2px;
	display: inline-block;
	background: #069;
	color: #fff;
	font-weight: normal;
	font-size: 16px;
	transition: all 0.4s ease;
}
.progress-btn:not(.active) {
	cursor: pointer;
}

.progress-btn .btn {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	line-height: 50px;
	text-align: center;
	z-index: 10;
	opacity: 1;
}

.progress-btn .progress {
	width: 0%;
	z-index: 5;
	-moz-border-radius:2px;border-radius:2px;
	background: #002448;
	opacity: 0;
	transition: all 0.3s ease;
}
.progress-btn.active .progress {
	opacity: 1;
	animation: progress-anim 10s ease 0s;
}
.progress-btn[data-progress-style='indefinite'].active .progress {
	animation: progress-indefinite-anim 1s infinite linear 0s;
}
.progress-btn[data-progress-style='fill-bottom'].active .progress, .progress-btn[data-progress-style='fill-top'].active .progress {
	height: 5px;
}
.progress-btn[data-progress-style='indefinite-circle'].active .progress {
	animation: dash 2s ease infinite,
	           rotate 2s linear infinite;
}

.progress-btn[data-progress-style='indefinite-circle'].active {
	width: 50px;
}

.progress-btn[data-progress-style='fill-back'] .progress {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.progress-btn[data-progress-style='fill-bottom'] .progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
}
.progress-btn[data-progress-style='fill-top'] .progress {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
}
.progress-btn[data-progress-style='indefinite'] .progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'50'%20height%3D'100'%20viewBox%3D'0%200%205%2010'%3E%0A%09%3Crect%20width%3D'110%25'%20x%3D'-5%25'%20y%3D'-5%25'%20height%3D'110%25'%20fill%3D'transparent'%2F%3E%0A%09%3Cline%20x1%3D'-2'%20y1%3D'1'%20x2%3D'7'%20y2%3D'10'%20stroke%3D'%23D32F2F'%20stroke-width%3D'2'%2F%3E%0A%09%3Cline%20x1%3D'-2'%20y1%3D'6'%20x2%3D'7'%20y2%3D'15'%20stroke%3D'%23D32F2F'%20stroke-width%3D'2'%2F%3E%0A%09%3Cline%20x1%3D'-2'%20y1%3D'-4'%20x2%3D'7'%20y2%3D'5'%20stroke%3D'%23D32F2F'%20stroke-width%3D'2'%2F%3E%0A%3C%2Fsvg%3E");
}
.progress-btn[data-progress-style='indefinite-circle'] .progress {
	width: 40px;
	height: 40px;
	background: transparent;
	position: absolute;
	top: 5px;
	left: calc(50% - 20px);
}
.progress-btn[data-progress-style='indefinite-circle'].active .btn {
	opacity: 0;
}

.circle-loader {
	fill: transparent;
	stroke: #eee;
	stroke-width: 5;
}
.pass{ position: relative;}
.ojo1{ position: absolute; right: 10px; width: 23px; height: 15px; top: 20px; background: url("../img/icons/ojo1.png") no-repeat; cursor: pointer}
.ojo2{ position: absolute; right: 10px; width: 23px; height: 15px; top: 20px; background: url("../img/icons/ojo2.png") no-repeat; cursor: pointer}



@keyframes dash {
	0% {
		stroke-dasharray: 1,95;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -25;
	}
	100% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -93;
	}
}

@keyframes rotate {
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg); }
}

@keyframes progress-anim {
	0% {
		width: 0%;
	}
	5% {
		width: 0%;
	}
	10% {
		width: 15%;
	}
	30% {
		width: 40%;
	}
	50% {
		width: 55%;
	}
	80% {
		width: 100%;
	}
	95% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

@keyframes progress-indefinite-anim {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 0%;
	}
}



@media screen and (max-width:800px)
	{
	body{ background:#001037;}
	#login{ margin-top:20px; width:70%;}
	}