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

body {
	color:#FFFFFF;
	font-family: 'Open Sans', sans-serif;
	/*font-size:18px;*/
}

.BGHome {
	background-image:url(../../Images/QR/BGHome.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#fe2722;
	-webkit-text-size-adjust: none;
}

.BGAzul {
	background-image:url(../../Images/QR/BGAzul.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#0098d5;
	-webkit-text-size-adjust: none;
}

.BGNaranja {
	background-image:url(../../Images/QR/BGNaranja.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#ee6f1e;
	-webkit-text-size-adjust: none;
}

.BGRojo {
	background-image:url(../../Images/QR/BGRojo.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#ec0d28;
	-webkit-text-size-adjust: none;
}

.BGVerde {
	background-image:url(../../Images/QR/BGVerde.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#84c846;
	-webkit-text-size-adjust: none;
}

.BGAcqua {
	background-image:url(../../Images/QR/BGAcqua.jpg);
	background-repeat:no-repeat;
	background-size:210%;
	background-position:top center;
	width:100%;
	margin:0 auto;
	background-color:#008f7d;
	-webkit-text-size-adjust: none;
}



html {
	margin:0 auto;
	overflow-x:hidden;
}

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.3);
    overflow-y: hidden;
    transition: 0.2s;
}

.loader {
  left: 50%;
  top: 50%;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); 
}

.loader #spinner {
    box-sizing: border-box;
    
    stroke-width: 3px;
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
            animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; 
}

.semibold {font-weight:600;text-decoration:none;}
.bold { font-weight:700}

.catorce {font-size:14px}
.dieciocho {font-size:18px}

.icoSocial {font-size:18px;color:#fff;text-decoration:none;}

.txtCenter {text-align:center;}

.clear {clear:both}

.lgSegAtlas {
	background-image: url(../../Images/QR/LogoBlanco.png);
	background-repeat:no-repeat;
	width:auto;
	height:106px;
	margin:60px auto 20px auto;
	background-size:contain;
	background-position:center;
	display:block;
}

.wrapperBoxes {
	max-width:1024px;
	min-width:320px;
	margin:0px auto 18px auto;
}

/* Tabs pantalla inicio */
.btnTab {
    background:#fff;
    padding:10px;
    color:#706259;
	border:#706259 solid 1px;
	border-radius:5px 5px 0px 0px;
	background-image:url(../../Images/General/icoTabClose.png);
	background-position:right;
	background-repeat:no-repeat;
	position:relative;
	height:auto;
	display:block;
}

.btnTabSelected {
    background:#fff;
    padding:10px;
    color:#706259;
	border:#706259 solid 1px;
	background-image:url(../../Images/General/icoTabOpen.png);
	background-position:right;
	background-repeat:no-repeat;
}

.TabCon {
	color:#706259;
	background:#e4e3df;
}

/* NUEVAS CLASES PANTALLA QR INICIO */
.wrapperTipoPolizas {
	color:#706259;
	border:#706259 solid 1px;
	background-color:#fff;
	display:block;
	padding:10px;
	border-radius:5px 5px 0px 0px;
	position:relative;
}

.ttTipoPolizas {
	font-family: 'Open Sans', sans-serif;
	color:#e11937;
	display:inline-block;
	font-weight:700;
} 

.cantidadPolizas {
	display:inline-block;
	position:absolute; /* Relativa a wrapperTipoPolizas */
	top:10px;
	right:40px;
}

.wrapperRowPolizas {
	display:block;
	padding:10px;
	border-top:0px;
	border-right:#706259 solid 1px;
	border-bottom:#706259 solid 1px;
	border-left:#706259 solid 1px;
	position:relative;
}

.idPoliza {
	font-family: 'Open Sans', sans-serif;
	display:inline-block;
	font-weight:700;
	color:#706259;
}

.idPoliza a {
	text-decoration:none;
	color:#706259;
}

.idPoliza a:hover {
	text-decoration:underline;
}

.icoVerMas {font-size:18px;color:#706259;text-decoration:none;
	display:inline-block;
	position:absolute; /* Relativa a wrapperRowPolizas */
	right:10px;
}

/* TERMINAN NUEVAS CLASES PANTALLA QR INICIO */

/* COMIENZAN NUEVAS CLASES PANTALLA VIAJES */
	.wrapperRowAsegurados {
		display:block;
		position:relative;
		border-right:#f16421 solid 1px;
	}
	
	.colAsegurado {
		display:inline-block;
	}
	
	.colFechaNacimiento {
		display:inline-block;
		position:absolute; /* Relativa a wrapperRowAsegurados*/
		right:14px;
	}
	
	.wrapperBeneficiario {
		margin-bottom: 22px;
	}
	
/* TERMINAN NUEVAS CLASES PANTALLA VIAJES */

.boxTt {
	color:#FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	border:#FFFFFF solid 1px;
	padding:4px;
	display:block;
	margin:0px 20px 20px 20px;
	text-align:center;
	background: rgb(116, 182, 223); /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 255, 255, .3);
}

.boxDatosAzules {
	color:#4d4d4f;
	font-family: 'Open Sans Condensed', sans-serif;
	background-color:#FFFFFF;
	border-top:#1367b2 solid 1px;	
	/*margin:0px 20px;*/
	padding-top:10px;
	/*padding-left:10px;*/
}

.boxDatosNaranjas {
	color:#4d4d4f;
	font-family: 'Open Sans Condensed', sans-serif;
	background-color:#FFFFFF;
	border-top:#f16421 solid 1px;
	/*margin:0px 20px;*/
	padding-top:10px;
	/*padding-left:10px;*/
} /* NUEVO */

  .boxDatosAcquas {
	color:#4d4d4f;
	font-family: 'Open Sans Condensed', sans-serif;
	background-color:#FFFFFF;
	border-top:#008f7d solid 1px;
	/*margin:0px 20px;*/
	padding-top:10px;
	/*padding-left:10px;*/
} 

.txtEtiqueta {
	color:#4d4d4f;
}

.txtEtiquetaAzul {
	color:#1367b2;
}

.txtEtiquetaNaranja {
	color:#f16421;
}

.txtEtiquetaAcqua {
	color:#008f7d;
}

.HideLabelLeft {
	display:none;
}

.boxTxtQR {
	text-align:center;
	margin:0px auto;
	color:#4d4d4f;
	font-weight:600;
}

.justificar {
	margin-top:6px;
	text-align:left;
	font-size:12px;
}

/* Características Generales de las columnas */

.animate { /* Makes columns animate when @media css changes */
	-webkit-transition: width 0.2s ease, height 0.2s ease;
	-moz-transition: width 0.2s ease, height 0.2s ease;
	-o-transition: width 0.2s ease, height 0.2s ease;
	-ms-transition: width 0.2s ease, height 0.2s ease;
	transition: width 0.2s ease, height 0.2s ease;
}

.c1,
.c2,
.c3,
.c4,
.c5,
.c6,
.c7,
.c8
{	/*font-weight:normal;*/
	margin:0 auto;
	text-align:left;
	/*line-height:60px;*/ /* This creates the height of the columns, and padding top and bottom. Deleting this will remove the column height and padding */
	clear:both;
}


/*
	Make all divs have a grey background, so they are visible.
*/

.c1 .uno {
	/*background-color:#999;*/
}

.c2 .uno,
.c2 .dos {
	/*background-color:#999;*/
}

.c3 .uno,
.c3 .uno-dos,
.c3 .dos,
.c3 .dos-tres,
.c3 .tres {
	/*background-color:#999;*/
}

.c4 .uno,
.c4 .uno-dos,
.c4 .uno-tres,
.c4 .dos,
.c4 .dos-tres,
.c4 .dos-cuatro,
.c4 .tres,
.c4 .tres-cuatro,
.c4 .cuatro {
	/*background-color:#999;*/ 
}


.animate { /* Makes columns animate when @media css changes */
	-webkit-transition: width 0.2s ease, height 0.2s ease;
	-moz-transition: width 0.2s ease, height 0.2s ease;
	-o-transition: width 0.2s ease, height 0.2s ease;
	-ms-transition: width 0.2s ease, height 0.2s ease;
	transition: width 0.2s ease, height 0.2s ease;
}

/* Terminan Características Generales de las columnas */


/* Mezclado de columnas (c) */

.c1, /* set margins below all boxes, just for display purposes */
.c2,
.c3,
.c4,
.c5 {
	padding-bottom:14px;
}
.c6 {
	padding-bottom:10px;
}
.c7 {
	padding-bottom:8px;
}
.c8 {
	padding-bottom:6px;
}


.c1, /* wrapper width */
.c2,
.c3,
.c4,
.c5,
.c6,
.c7,
.c8 {
	width:986px;
}

/* Termina Mezclado de columnas (c) */


.c1 .uno {
	width:100%;
}

.c2 .uno {
	width:486px;
	float:left;
}
.c2 .dos {
	width:486px;
	/*
	To set the correct position for the last column, add up all columns to the left and add on the padding.
	In this case: 486 + 14 = 500
	*/
	margin-left:500px;
}

.c3 .uno {
	width:318px;
	float:left;
}

.c3 .dos {
	width:318px;
	margin-left:16px;
	float:left;
}

.c3 .tres {
	width:318px;
	margin-left:668px;
}

.c3 .uno-dos {
    width: 652px;
    margin-left: 0px;
    float: left;
} /* NUEVO */


.c4 .uno {
	width:236px;
	float:left;
}
.c4 .uno-dos {
	width:486px;
	float:left;
}

.c4 .dos {
	width:236px;
	margin-left:14px;
	float:left;
}

.c4 .tres {
	width:236px;
	margin-left:14px;
	float:left;
}
.c4 .tres-cuatro {
	width:486px;
	margin-left:500px;
}
.c4 .cuatro {
	width:236px;
	margin-left:750px;
}



/* --------------------------------------------------------------------- */
/* CARACTERÍSTICAS DE LOS ELEMENTOS PARA LAS RESOLUCIONES <1023px */
/* SEGUNDO COMPORTAMIENTO iPad Landscape */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	
	.HideLabelLeft {
		display:none;
	}
	
	/* Mezclado de columnas (c) */

	.c1, /* set margins below all boxes, just for display purposes */
	.c2,
	.c3,
	.c4
	{
		padding-bottom:14px;
	}
	.c5 {
		padding-bottom:10px;
	}
	.c6 {
		padding-bottom:8px;
	}
	.c7 {
		padding-bottom:5px;
	}
	.c8 {
		padding-bottom:6px;
	}
	
	
	.c1, /* wrapper width */
	.c2,
	.c3,
	.c4,
	.c5,
	.c6,
	.c7,
	.c8 {
		width:730px;
	}
	/* Termina Mezclado de columnas (c) */
	
	
	.c1 .uno {
		width:100%;
	}
	
	.c2 .uno {
		width:358px;
		float:left;
	}
	.c2 .dos {
		width:358px;
		margin-left:372px;
	}
	
	
	.c3 .uno {
		width:234px;
		float:left;
	}
	
	.c3 .dos {
		width:234px;
		margin-left:14px;
		float:left;
	}
	
	.c3 .tres {
		width:234px;
		margin-left:496px;
	}
	
	.c3 .uno-dos {
    	width: 482px;
    	margin-left: 0px;
    	float: left;
	}
	
	
	.c4 .uno {
		width:172px;
		float:left;
	}
	.c4 .uno-dos {
		width:358px;
		float:left;
	}
	
	.c4 .dos {
		width:172px;
		margin-left:14px;
		float:left;
	}
	
	.c4 .tres {
		width:172px;
		margin-left:14px;
		float:left;
	}
	.c4 .tres-cuatro {
		width:358px;
		margin-left:372px;
	}
	.c4 .cuatro {
		width:172px;
		margin-left:558px;
	}

}

/* --------------------------------------------------------------------------------------- */
/* CARACTERÍSTICAS DE ELEMENTOS EN RESOLUCIONES <767px */
/* TERCER COMPORTAMIENTO Smartphones Landscape */
@media screen and (min-width: 479px) and (max-width: 767px) {
	
	.HideLabelLeft {
		display:none;
	}
	
	/* Mezclado de columnas (c)*/

	.c1, /* set margins below all boxes, just for display purposes */
	.c2,
	.c4
	{
		padding-bottom:10px;
	}
	.c3
	{
		padding-bottom:9px;
	}
	.c5 {
		padding-bottom:8px;
	}
	.c6 {
		padding-bottom:6px;
	}
	.c7 {
		padding-bottom:7px;
	}
	.c8 {
		padding-bottom:2px;
	}
	
	
	.c1, /* wrapper width */
	.c2,
	.c3,
	.c4,
	.c5,
	.c6,
	.c7,
	.c8 {
		width:462px;
	}
	/* Termina Mezclado de columnas (c)*/
	
	.c1 .uno {
	width:100%;
	}
	
	.c2 .uno {
		width:226px;
		float:left;
	}
	.c2 .dos {
		width:226px;
		margin-left:236px;
	}
	

	.c3 .uno {
		width:148px;
		float:left;
	}
	
	.c3 .dos {
		width:148px;
		margin-left:9px;
		float:left;
	}
	
	.c3 .tres {
		width:148px;
		margin-left:314px;
	}
	
	.c3 .uno-dos {
    	width: 305px;
    	margin-left: 0px;
    	float: left;
	}
	
	
	.c4 .uno {
		width:108px;
		float:left;
	}
	.c4 .uno-dos {
		width:226px;
		float:left;
	}
	
	.c4 .dos {
		width:108px;
		margin-left:10px;
		float:left;
	}
	
	.c4 .tres {
		width:108px;
		margin-left:10px;
		float:left;
	}
	.c4 .tres-cuatro {
		width:226px;
		margin-left:236px;
	}
	.c4 .cuatro {
		width:108px;
		margin-left:354px;
	}
	
}

/*-------------------------------------------------------------------------------*/
/* CARACTERÍSTICAS DE ELEMENTOS EN RESOLUCIONES <478px */
/* CUARTO y ÚLTIMO COMPORTAMIENTO - Smartphones Portrait */
@media screen and (min-width: 0px) and (max-width: 478px) {
	.justificar {
		text-align:center;
	}
	
	.wrapperRowAsegurados {
		border-right:none;
	}
	
	.HideLabelTop {
		display:none;
	}
	
	.HideLabelLeft {
		display:inline;
	}
		
	/* Mezclado de columnas (c)*/

	.c1 /* set margins below all boxes, just for display purposes */
	{
		padding-bottom:10px;
	}
	.c2,
	.c3
	{
		padding-bottom:7px;
	}
	.c4
	{
		padding-bottom:6px;
	}
	.c5 {
		padding-bottom:3px;
	}
	.c6 {
		padding-bottom:4px;
	}
	.c7 {
		padding-bottom:6px;
	}
	.c8 {
		padding-bottom:2px;
	}
	
	
	.c1, /* wrapper width */
	.c2,
	.c3,
	.c4,
	.c5,
	.c6,
	.c7,
	.c8 {
		width:302px;
	}
	/* Termina Mezclado de columnas (c)*/
	
	
	.c1 .uno {
		width:100%;
	}
	
	.c2 .uno {
		width:146px;
		float:left;
	}
	.c2 .dos {
		width:146px;
		margin-left:156px;
	}
	
	
	.c3 .uno {
		width:96px;
		float:left;
	}
	.c3 .dos {
		width:96px;
		margin-left:7px;
		float:left;
	}
	.c3 .tres {
		width:96px;
		/*
		To set the correct position for the last column, add up all columns to the left and add on the padding.
		In this case: 96 x 2 + 7 + 7 = 206
		*/
		margin-left:206px;
	}
	
	
	.c4 .uno {
		width:71px;
		float:left;
	}
	.c4 .uno-dos {
		width:148px;
		float:left;
	}
	.c4 .dos {
		width:71px;
		margin-left:6px;
		float:left;
	}
	.c4 .tres {
		width:71px;
		margin-left:6px;
		float:left;
	}
	.c4 .tres-cuatro {
		width:148px;
		margin-left:154px;
	}
	.c4 .cuatro {
		width:71px;
		margin-left:231px;
	}
	
	
	/* Columnas apiladas (.stack) */
	
	.c1 /* set margins below all boxes, just for display purposes */
	{
		padding-bottom:10px;
	}
	.c2,
	.c3
	{
		padding-bottom:7px;
	}
	.c4
	{
		padding-bottom:6px;
	}
	.c5 {
		padding-bottom:3px;
	}
	.c6 {
		padding-bottom:4px;
	}
	.c7 {
		padding-bottom:6px;
	}
	.c8 {
		padding-bottom:2px;
	}
	
	
	
	.c1.stack .uno {
		width:100%;
	}
	
	
	.c2.stack .uno,
	.p2.stack .uno {
		width:100%;
		float:none;
		/*margin-bottom:8px;*/
	}
	.c2.stack .dos,
	.p2.stack .dos {
		width:100%;
		margin-left:0px;
		margin-bottom:8px;
	}
	
	
	.c3.stack .uno,
	.p3.stack .uno {
		width:100%;
		float:none;
		/*margin-bottom:8px;*/
	}
	.c3.stack .uno-dos,
	.p3.stack .uno-dos {
		margin-left:0px;
		width:100%;
		float:none;
		margin-bottom:8px;
	}
	.c3.stack .dos,
	.p3.stack .dos {
		width:100%;
		float:none;
		/*margin-bottom:8px;*/
		margin-left:0px;
	}
	.c3.stack .dos-tres,
	.p3.stack .dos-tres {
		width:100%;
		float:none;
		margin-left:0px;
		margin-bottom:8px;
	}
	.c3.stack .tres,
	.p3.stack .tres {
		width:100%;
		float:none;
		margin-left:0px;
		margin-bottom:8px;
	}
	
	
	.c4.stack .uno,
	.p4.stack .uno {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .uno-dos,
	.p4.stack .uno-dos {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .uno-tres,
	.p4.stack .uno-tres {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .dos,
	.p4.stack .dos {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .dos-tres,
	.p4.stack .dos-tres {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .dos-cuatro,
	.p4.stack .dos-cuatro {
		width:100%;
		float:none;
		margin-left:0px;
		margin-bottom:8px;
	}
	.c4.stack .tres,
	.p4.stack .tres {
		width:100%;
		float:none;
		margin-bottom:8px;
		margin-left:0px;
	}
	.c4.stack .tres-cuatro,
	.p4.stack .tres-cuatro {
		width:100%;
		float:none;
		margin-left:0px;
		margin-bottom:8px;
	}
	.c4.stack .cuatro,
	.p4.stack .cuatro {
		width:100%;
		float:none;
		margin-left:0px;
		margin-bottom:8px;
	}
	/* Terminan Columnas apiladas (.stack) */
	
}


/* Change images to higher res versions, if screen resolution is high, such as Retina on Apple devices. */
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) { 


}