@charset "utf-8";
/* CSS Document */

/***************
 * fuentes
 ****************/

@font-face {
  font-family: 'MetaThin';  
  src: url('./interfaz/tema/fuentes/Meta-Thin.woff2') format('woff2'), /* Super Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Thin.woff') format('woff'), /* Pretty Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'MetaNormal';
  src: url('./interfaz/tema/fuentes/Meta-Normal.woff2') format('woff2'), /* Super Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Normal.woff') format('woff'), /* Pretty Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Normal.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'MetaBold';
  src: url('./interfaz/tema/fuentes/Meta-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('./interfaz/tema/fuentes/Meta-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}





body{
	font-family:'MetaNormal', Arial, Helvetica, sans-serif;
}




	#porcentajeCargador{
		font-size: 14px;
		color: #313131;
		position: absolute;
		top: 40%;
		left: 0;
		right: 0;
		text-align: center;
	}
	
	@media(min-width:480px){
		#porcentajeCargador{
			font-size: 16px;
		}
	}
	
	.fondoPortada, .fondoBotonera, .fondoTitulos{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 0;
		box-shadow: 0 0 5px #000;
	}
	
	.fondoPortada {
		background-color: #d4d4d4;
		height: 100%;
		display: none;
	}
	
	.fondoBotonera{		
		background: #ac0404;	
	}
	
	.contenedorBotones{
		display: block;
		position: absolute;
		bottom: 5%;
		text-align: center;
		width: 100%;
	}
	
	.fondoTitulos{
		background: #faf3fa;
	}
	
	.portadaInfo{
		width: 100%;
		margin: 20% auto 20px;
		display: block;
		text-align: center;
	}
	
	.logoCliente{
		margin: 0 auto 20px;		
	}
	
	.logoCliente img{
		width: 60%;
		opacity: 0;
	}
	
	.tituloPortada, .subtituloPortada{
		margin-bottom:10px;
		display: none;
	}
	
	.tituloPortada{
		font-family: 'MetaNormal';
		font-size: 32px;
		color: #ac0404;
	}
	
	.subtituloPortada{
		font-family: 'MetaThin';
		font-size: 20px;
		color:#600303;
		margin-bottom:20px;
	}
	
	.textoCargador{
		text-align: center;
		font-style: italic;
		font-size: 14px;
	}

	.circulocargador{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.circulocargador img{
		width: 100%;
		height: 100%;		
	}
	
	@media(min-width:480px){
		.textoCargador{
			font-size: 16px;
		}
	}
	


.btnComenzar, .btnContinuar{
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position: relative;
	padding: 10px 20px 5px;
	line-height: 32px;
	cursor: pointer;
	font-size: 20px;
	color: #313131;
	font-family: 'MetaThin';
	display: inline-block;
	opacity: 0;
}
	
	@media(min-width:480px){
		.btnComenzar, .btnContinuar{
			padding: 15px 20px 10px;
			font-size: 32px;
		}
	}

.btnComenzar.inactivo, .btnContinuar.inactivo{
	background-color:#999999;
	cursor:not-allowed;
}
	
	

/************
 * SPINNER  *
 ************/
	
.showbox {
	left: 0;
	right: 0;
	padding: 0;
	display: none;
}

.loader {
  position: relative;
  margin: 0 auto 10px;
  width: 80px;
}
	
@media(min-width:480px){

	.loader {
		width: 100px;
	}
}
	
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}


	
	@media(min-width:480px){
		.logoCliente img{
			width: 50%;
			opacity: 0;
		}
		
		.tituloPortada{
			font-size: 46px;
		}
		
		.subtituloPortada{
			font-size: 30px;
		}
		
		.portadaInfo{
			margin: 15% auto 20px;
		}
	}
	
	@media(min-width:768px){
		.logoCliente img{
			width: 40%;
		}
		
		.tituloPortada{
			font-size: 64px;
		}

		.subtituloPortada{
			font-size: 42px;
		}
		
		.portadaInfo{
			margin: 8% auto 20px;
		}
	}
	
	@media(min-width:1024px){
		.logoCliente img{
			width: auto;
		}
		
		.tituloPortada{
			font-size: 96px;
		}

		.subtituloPortada{
			font-size: 64px;
		}
		
	}


		#portadaLoader{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: #FFFFFF;
			z-index: 9999;
		}



	#preloader{
		position: fixed;
		left:0;
		right: 0;
		top:0;
		bottom:0;
		background: #FFFFFF;
		z-index: 99999;
	}
	
	.contenedorPreloader{
		position: fixed;
		text-align: center;
		width: 40%;
		left: 30%;
		right: 30%;
		height: 40%;
		top: 30%;
		bottom:30%;
		vertical-align: middle;
	}

	.contenedorPreloader img{
		max-width: 100%;
	}
	
	.tituloPreloader{
		font-family: 'MetaThin';
		font-size: 32px;
	}