@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/


/* Diseño móvil: 480 px e inferior. */
@media only screen and (max-width: 480px) {
	.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#slogan {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		color:#212d58;
		text-align: justify;
        text-justify: inter-word;
	}
	#ayuda {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#izq{
		clear: none;
		float: left;		
		width: 50%;	
		text-align:center;		
		}		
	#der{
		clear: none;
		float: right;		
		width: 50%;			
		text-align: left;		
	}
	#der img{
		float:right;	
	}
	#login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
		background-color:#ef7b41;
		color:white;
	}
	
	#titulo{
		clear: both;
		float: left;		
		width: 100%;
		display: block;
		padding-top:30px;
		padding-bottom:30px;
	}
	#titulo p {
  padding-left: 10%;
	}
	#login-form{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	
	#login-form label{
		padding-left: 10%;
	}
	#login-form input{
		margin-left: 10%;
		border:0;
		background-color: #ef7b41;
		border-bottom:1px solid #fff;		
	}
	#login-form input{
		width:70%;	
	}
	.btn-login{
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
	}
	.btn-pass {
		background-color: #19295A;
		color: white;
		margin-top: 10%;
		border-radius: 5px;
		border: none;
		white-space: nowrap;
	}
	#frm-login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#frm-links a{
		color:white;
	}

	
	#frm-links{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	p a{
		padding-left: 80px;	
	}
	#frm-btn{
		text-align:right;
		padding-right:85px;
		clear: both;
		float: right;
		margin-right: 0;
		width: 50%;
		display: block;
	}	
	#imglogo{
		width:80%;
		height:120px;
		margin: auto;
		display: block;
	}
	#imgsat{
		width:50px;
		height:80px;
	}	
	.tp-help{
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
	}
	#footer{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#ftr-tp{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		text-align:right;
	}
	#ftr-space{
		height:150px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	.dv-slide{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		
	}
	#dv-login{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-1{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-2{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-1-space{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-1-space-top{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#tp-sape{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
}
/*

***********HASTA ESTA LINEA Y EL CODIGO DE ARRIBA CORRESPONDE
A CSS PARA CELULAR DE 480 * 800 PX


*/	
	
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 481px) {
	.gridContainer {
		width: 88.2%;
		max-width: 1024px;
		padding-left: 0.9%;
		padding-right: 0.9%;
		margin: auto;
		background-color:white;
	}
	#logo {
		clear: both;		
		float: left;
		margin:auto;
		width: 100%;		
		display: block;
		background-color:white;
		
	}
	#slogan {
		clear: both;		
		float: left;			
		width: 100%;		
		display: block;	
		text-align: justify;
        text-justify: inter-word;	
	}
	#ayuda {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
		background-color:#ef7b41;
	}
	#imglogo{
		width:80%;
		height:140px;
		margin: auto;
		display: block;
	}
	#imgsat{
		width:50px;
		height:80px;
	}
	
	.tp-help{
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
	}

	#izq{
		
		clear: none;
		float: left;		
		width: 50%;		
	}

	#der{
		clear: none;
		float: right;		
		width: 50%;			
	}

	#titulo{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#titulo p {
	  padding-left: 15%;
	  color:white;
	}
	#login-form{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	
	#login-form label{
		padding-left: 15%;
	}
	#login-form input{
		margin-left: 15%;
		border:0;
		background-color: #ef7b41;
		border-bottom:1px solid #fff;		
	}
	
	#login-form input{
		width:70%;	
	}

	#frm-login{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#frm-links{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	p a{
		color:white;
		padding-left: 30%;	
	}

	#frm-btn{
		text-align:right;
		padding-right:175px;
		clear: both;
		float: right;
		margin-right: 0;
		width: 50%;
		display: block;
	}	

	#footer{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#ftr-tp{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#ftr-space{
		height:250px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	.dv-slide{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;		
	}

	#dv-login{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#sec-1{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#sec-2{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#sec-1-space{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#sec-1-space-top{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	#tp-sape{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	
}

/*

***********HASTA ESTA LINEA Y EL CODIGO DE ARRIBA CORRESPONDE
A CSS PARA TABLET DE 481 * 168 PX


*/	

/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 1024px) {
	.gridContainer {
		width: 88.2%;
		max-width: 1260px;
		padding-left: 0.9%;
		padding-right: 0.9%;
		margin: auto;
		background-color:white;
	}
	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:white;
	}
	#slogan {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:white;
	}
	#ayuda {
		clear: both;		
		width: 100%;
		display: block;
	}
	#izq{
		clear: none;
		float: left;
		margin-left: 0;
		width: 50%;
		display: block;
	}	
	.tp-help{
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
	}
	#der{
		clear: none;
		float: right;
		margin-right: 0;
		width: 50%;
		display: block;
	}
	#login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;		
	}
	#imglogo{
		width:90%;
		height:140px;
		margin: auto;
		display: block;
	}
	#imgsat{
		width:50px;
		height:80px;
	}	
	#titulo{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#titulo p {
	  padding-left: 10%;
	}
	p a{
		padding-left: 10%;	
	}
	.btn-login{
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
		padding-left: 10px;
	}
	.btn-pass {
		background-color: #19295A;
		color: white;
		margin-top: 10%;
		border-radius: 5px;
		border: none;
		white-space: nowrap;
		padding-left: 10px;
	}
	#login-form{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#login-form label{
		padding-left: 10%;
	}
	
	p label{
		padding-left: 10%;
	}
	
	#login-form input{
		margin-left: 10%;
		border:0;
		background-color: #ef7b41;
		border-bottom:1px solid #fff;		
	}
	#login-form input{
		width:70%;	
	}
	input:focus{
    outline: none;
	}
	#frm-login{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#frm-btn button{
		margin-left: 10%;
	}
	#frm-links{
		clear: none;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#frm-btn{
		clear: none;
		float: left;
		margin-left: 0;
		width: 50%;
		display: block;
	}
	#footer{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#ftr-tp{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#ftr-space{
		height:10%;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#dv-pc{
		clear: both;
		width: 100%;
		display:block;
	}
	#dv-login{
		clear: none;
		float: left;
		margin-left: 0;
		width: 50%;
		height:100%;
		display: block;
	}
	.dv-slide{
		color:black;
		clear: none;
		float: right;
		margin-right: 0;
		width: 50%;
		height:100%;
	}
	
	#dv-slide img{
		width:100%;
		height:100%;	
	}
	
	
	#sec-1{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
	}
	#sec-2{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
	}
	#sec-1-space{
		height:40px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-1-space-top{
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height:15px;
		display: block;
	}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1261px) {
	.gridContainer {
		width: 100%;			
		max-width:100%;
		height:100% !important;
		padding-left: 0.9%;
		padding-right: 0.9%;
		margin: auto;
		background-color:white;
	}
	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:white;
	}
	#slogan {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		background-color:white;
	}
	#ayuda {
		clear: both;		
		width: 100%;
		display: block;
	}
	#izq {
		clear: none;
		float: left;
		margin-left: 5%;
		width: 50%;
		display: block;
	}	
	.tp-help {
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
		height:30px;
	}
	#der {
		clear: none;
		float: right;
		margin-right: 0;
		width: 50%;
		display: block;
	}
	#login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;	
		height:90%;
	}
	#imglogo {
		width:100%;
		height:160px;
		margin-top:15px;
		display: block;
	}
	#imgsat {
		width:50px;
		height:80px;
	}	
	#titulo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
		#titulo p {
			color: white;
			padding-top:10%;
			padding-bottom:10%;
			padding-left: 10%;
		}
		#tituloCC p {
			color: white;
			padding-top: 2%;
			padding-bottom: 2%;
			padding-left: 10%;
		}
	p a {
		color:white !important;
		padding-left: 10%;	
	}

	p a :hover{
		color:white !important;
	}

	.btn-login {
		background-color:#e94b2a;
		color:white;
		margin-top:10%;	
		border-radius: 5px;
		border:none;
		white-space: nowrap;
		padding-left: 10px;
	}
	.btn-pass {
		background-color:#19295A;
		color: white;
		margin-top: 10%;
		border-radius: 5px;
		border: none;
		white-space: nowrap;
		padding-left: 10px;
	}
	#login-form {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#login-form label {
		padding-left: 10%;
	}
	
	p label {
		padding-left: 10%;
	}
	
	#login-form input {
		margin-left: 10%;
		border:0;
		background-color: #ef7b41;
		border-bottom:1px solid #fff;		
	}
	#login-form input {
		width:70%;	
	}
	input:focus {
    outline: none;
	}
	#frm-login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#frm-btn button {
		margin-left: 10%;
	}
	#frm-links {
		clear: none;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		padding-top:5%;
	}
	#frm-btn {
		clear: none;
		float: left;
		margin-left: 60%;
		width: 50%;
		display: block;
	}
	#footer {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#ftr-tp {
		clear: both;
		float: left;
		margin-left: 40%;
		width: 100%;
		display: block;
		color:white;
	}
	#ftr-space {
		height:20px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#dv-pc {
		clear: both;
		width: 100%;
		height:1030px;
		display:block;		
	}
	#dv-login {
		clear: none;
		float: left;
		margin-left: 0;
		width: 50%;
		display: block;
	}
	

	nav > ul >li > a{
		color:white !important;
	}
	
	
	#sec-1 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
	}
	#sec-2 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:50%;
	}
	#sec-1-space {
		height:67px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#sec-1-space-top { 
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height:15px;
		display: block;
	}
	ul li a:hover {
		color: #E94B2A !important;
	}

	.collapse .navbar-collapse {
		border: 0;
	}
	.navbar .navbar-default {
		border: 0;
	}

	#marco {
		float:right;
		text-align:center;
		width: 90px;
		height: 90px;
		border-radius: 50%;
		border: 2px solid #212d58;
		margin:0 auto;
	}

	#slogan h1 b {
		color: #212d58 !important;
	}

	#slogan h3 b {
		color:#E94B2A !important;
	}

	.glyphicon {
		font-size:30px;
	}
	p a .myactionlink {
		color: white !important;
	}
		p a .myactionlink :hover {
			color: white !important;
		}

	.msgErrorReq{
		color:white;
		font-size:20px;
		text-decoration:underline white;
	}
}

@media screen and (max-width:1600px) {
	.dv-slide {
		clear:none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 900px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#sec-1-space {
		height: 56px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#login {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		height:90%;
	}
	#imglogo {
		width: 90%;
		height: 120px;
		margin-top: 15px;
		display: block;
	}

	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height: 130px;
		display: block;
	}
	#ftr-tp {
		
		font-size:10px;
		padding:5px;
	}
}

@media screen and (max-width:1366px) {
	.dv-slide {
		clear: none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 975px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#sec-1-space {
		height: 66px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#imglogo {
		width: 100%;
		height: 140px;
		margin-top: 15px;
		display: block;
	}
	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height:170px;
		display: block;
	}
}

@media screen and (max-width:1280px) {
	.dv-slide {
		clear: none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 968px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#imglogo {
		width: 100%;
		height: 130px;
		margin-top: 15px;
		display: block;
	}

	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height: 170px;
		display: block;
	}
	#ftr-tp {
		font-size: 8px;
		padding: 5px;
	}
}

@media screen and (min-width:1680px) {
	.dv-slide {
		clear: none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 1010px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#sec-1-space {
		height: 56px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#imglogo {
		width: 100%;
		height: 140px;
		margin-top: 15px;
		display: block;
	}

	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height: 150px;
		display: block;
	}
}

@media screen and (min-width:1440px) {
	.dv-slide {
		clear: none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 986px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#sec-1-space {
		height: 64px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#imglogo {
		width: 100%;
		height: 140px;
		margin-top: 15px;
		display: block;
	}

	#logo {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		height: 178px;
		display: block;
	}
}

@media screen and (min-width:1920px) {
	.dv-slide {
		clear: none;
		float: right;
		margin-right: 0;
		width: 100%;
		height: 1030px;
		background-position: center;
		background-image: linear-gradient(rgba(5,7,12,0.75),rgba(5,7,12,0.75)), url('../img/asset2.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}
	#sec-1-space-1 {
		height: 30px;
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	#ftr-tp {
		font-size: 12px;
	}
}