@charset "UTF-8";
/* CSS TEMPORAL */

@font-face {   
  font-family: "bbva";   
  src: url(library/fonts/BentonSans-Regular.ttf);   
}

canvas#canvas_principal {
    height: auto;
}
/* ==================== 
NAV
=======================*/
.boxes-footer.contenedor a {
	color: inherit!important;}
.boxes-footer a i {color: #009f9e!important;}

/* NEW NAV */



.nav-flechas-pension i {
    font-size: 28PX;
}
.nav-flechas-pension:hover i {
    font-size: 30PX;
}

.nav-flechas-pension {
    /*display: block;
    position: absolute;
    height: 100%;
	width: 100%;*/
}
#w-guia {position:relative}
.fle-right {
    position: absolute;
    display: block;
    z-index: 99;
    top: 45%;
	right:0;
	/* colores size */
	text-align: center;
    width: 33px;
    height: 40px;
	padding-top: 10px;
	color:#fff;
    /*background: rgba(221, 221, 221, 0.5);*/
	background: rgba(200, 200, 200, 0.7);
    /*border-radius: 33px;
	margin-right:10px;*/
}
.fle-left {
    position: absolute;
    display: block;
    z-index: 99;
    top: 45%;
	left:0;
	padding-top: 10px;
	/* colores size */
	text-align: center;
    width: 30px;
    height: 40px;
	color:#fff;
     /*background: rgba(221, 221, 221, 0.5);*/
	background: rgba(200, 200, 200, 0.7);
    /*border-radius: 33px;
	margin-left:10px;*/
}
.fle-left:hover, .fle-right:hover {
background:#ddd;
	color:#444;
}
/* NEW NAV*/

#limit-content .nav {
    display:none;
}
span.p-guia {
	width: 98.6%;}
/******* COOKIES ******/
div#epd {
    display: none;
}
body#main-body.on.cookies #main-header {
     top: 0px;
}
/******* COOKIES ******/

.nav-pensiones {
    padding-right: 10px;
	text-align:right;
	max-width:1161px;margin:auto;
}
.nav-pensiones span {
    background: #bfbfbf;
    color: #fff;
    width: 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 8px;
    /*border-radius: 10px 10px 0px 0px;*/
    display: inline-block;
}
span.p-guia {
    width: inherit;
    background: #009f9e!important;
}
.nav-pensiones span:hover {
    background: #666;
}

/*========================*/

canvas #canvas_jubilado, canvas#canvas_fabrica, canvas {
	    width: auto;
    max-width: 100%;
   height: 100%;
    margin: auto;
    display: block;
    justify-content: center!important;
    align-items: center!important;}

/* #limit-content {overflow:hidden!important;width:100vw;} */

#limit-content a i {color:#fff;}
#limit-content a i:hover {color:#444;}

#limit-content a {color:#fff;text-decoration: none;}
	
#limit-content .section {
	background:white;
}


#limit-content .medalla {
    margin-left: 14px;
    position: absolute;
    width: 0px;
	margin-top:-8px;
    height: 30px;
    border-left: 10px solid #5d85c0;
    border-right: 10px solid #5d85c0;
    border-bottom: 10px solid transparent;
}
.content-medalla-top {
    height: 7px;
    width: 100%;
    text-align: right;
    display: block;
}

.medalla-top {
    margin-right: 14px;
    width: 20px;
    height: 7px;
}
.mleft {margin-left:14px;}
.medalla-bottom {
   /* margin-left: 14px; */
    width: 0px;
    height: 20px;
    border-bottom: 10px solid transparent;
}

.contenedor-medalla {height:30px;}
.box-medalla {
    width: 20px;
    display: block;
    height: 30px;
    float: right;
    text-align: right;
    padding-right: 14px;
}



#limit-content .nav {
    font-size: 12px;
}

#limit-content .contenedor {
    margin: auto;
    max-width: 1161px;
}
#limit-content .col {
	min-height:480px;
	height:100vh; /* DEBE SER EXACTA*/
	max-height:700px;

} 
#w-principal .col {
	max-height: 598px!important;}

.col-1-1 {
	width:100%;
	display: block;
	float:right;
	padding-bottom: 20px;
}
.col-1-2 {display:block;float:left;width:50%;}
/* END TEMPORAL */

/*==========================================================
    COLORES 
 ===========================================================*/
.azul {background:#5d85c0!important;color:#fff;}
.azul-2 {background:#004980;color:#fff;}
.naranja {background:#d58644!important;color:#fff}
.naranja-2 {background:#a25440;color:#fff;}
.oro {background:#d8be75!important;color:#fff;}
.oro-2 {background:#c39749;color:#fff;}
.rosa {background:#f35e61!important;color:#fff;}
.rosa-2 {background:#da3851;color:#fff;}
.verde {background:#3fa459!important;color:#fff;}
.verde-2 {background:#1d824f;color:#fff;}
.green {background:#009f9e!important;color:#fff;}
.morado {background:#846fe2!important;color:#fff;}
.morado-2 {background:#6045ac;color:#fff;}
.amarillo {background:#f6c548!important;color:#fff;}
.amarillo-2 {background:#e99c34;color:#fff;}
.tierra {background:#f67e34!important;color:#fff;}
.tierra-2 {background:#bb473a;color:#fff;}
.cian {background:#00cbc0!important;color:#fff;}
.cian-2 {background:#009f9e;color:#fff;}
.lila {background:#dd98e5!important;color:#fff;}
.lila-2 {background:#b769e5;color:#fff;}

/* NARANJA */
.medalla-top.bnaranja {background:#d58644}
.medalla-bottom.bnaranja {border-left:10px solid #d58644;border-right:10px solid #d58644;}
/* AZUL */
.medalla-top.bazul {background:#5d85c0}
.medalla-bottom.bazul{border-left:10px solid #5d85c0;border-right:10px solid #5d85c0;}
/* ORO */
.medalla-top.boro {background:#d8be75}
.medalla-bottom.boro{border-left:10px solid #d8be75;border-right:10px solid #d8be75;}
/* ROSA */
.medalla-top.brosa {background:#f35e61}
.medalla-bottom.brosa{border-left:10px solid #f35e61;border-right:10px solid #f35e61;}
/* VERDE */
.medalla-top.bverde {background:#3fa459}
.medalla-bottom.bverde {border-left:10px solid #3fa459;border-right:10px solid #3fa459;}
/* MORADO */
.medalla-top.bmorado {background:#846fe2}
.medalla-bottom.bmorado {border-left:10px solid #846fe2;border-right:10px solid #846fe2;}
/* AMARILLO */
.medalla-top.bamarillo {background:#f6c548}
.medalla-bottom.bamarillo {border-left:10px solid #f6c548;border-right:10px solid #f6c548;}
/* TIERRA */
.medalla-top.btierra {background:#f67e34}
.medalla-bottom.btierra {border-left:10px solid #f67e34;border-right:10px solid #f67e34;}
/* CIAN */
.medalla-top.bcian {background:#00cbc0}
.medalla-bottom.bcian {border-left:10px solid #00cbc0;border-right:10px solid #00cbc0;}
/* LILA */
.medalla-top.blila {background:#dd98e5}
.medalla-bottom.blila {border-left:10px solid #dd98e5;border-right:10px solid #dd98e5;}


#limit-content h2 {
	color:#ffffff;
    margin-bottom: 40px;
    /*font-size: 2em;*/
	font-size:25px;
	}
	
.text-left {text-align:left;}
.text-right {text-align:right;}


/*  SECTIONS  */
#limit-content .section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.caja-resena {height:100%;}

/*  COLUMN SETUP  */
#limit-content .col {
	display: block;
	float:left;
	/*margin: 1% 0 1% 0%;*/
	padding: 0% 0 0% 0%;
}
#limit-content .col:first-child { margin-left: 0; }

/*  GROUPING  */
#limit-content .group:before,
#limit-content .group:after { content:""; display:table; }
#limit-content .group:after { clear:both;}
#limit-content .group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 50%;
}
.span_1_of_2 {
	width: 50%;
}

/* ========================================================= */
/* TEXTOS
/* ========================================================= */

#limit-content .right {float:right;}
#limit-content .left {float:left;}

.content-box-right span, .content-box-left span {
    /*line-height: 20px;*/
    font-weight: 100;
	/*font-size: 1.5em;*/
	font-size: 19px;
}

.content-box-right span {text-align:right;}

#limit-content .content-info p {
    padding: 3% 5% 5% 5%;
	font-weight:200;
	margin: 0;
	line-height: 22px;
}

@media screen and (min-width: 700px) and (max-width: 1500px) {
	#limit-content .content-info p {
		padding: 3% 4% 4% 4%;
		line-height: 110%;
		font-size: 15px;
	}
	
  }

.left-center {text-align:left;}
#limit-content .descargar {font-weight:200;font-size: 14px;}
.col-1-1 .descargar {padding-left:5%;}

#limit-content .boxes-footer .col-1-3 {transition: background 0.5s ease;}
#limit-content .boxes-footer .col-1-3:hover {background: #f2f2f2;}

/* ========================================================= */

#limit-content .number {
    max-width: 60px;
	width:100%;
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding-top: 50px;
    padding-bottom: 10px;
}
#limit-content .space {
	width:100%;
	max-width:580.5px;
	/*height:5px;*/
	background:#fff;

}

#limit-content .content-box-right {
    padding: 2% 10% 2% 0%;
    color: #fff;
    text-align: right;
    height: 88%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#limit-content .content-box-left {
    padding: 2% 0% 2% 10%;
    color: #fff;
    text-align: left;
    height: 88%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#limit-content .content-foot {
    color: #fff;
    text-align: center;
}


/*============ Caja 1 ==============*/
#limit-content .content-info {
    height: 26vh;
	max-height: 182px;
	font-size: 19px;
	/*IMPORTANTE*/
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}

#limit-content .content-canvas {
    height: 73%;
}

#limit-content .content-canvas-one {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#limit-content {
    margin-bottom: 40px;
}
/* ========================================================= */
/* FOOTER
/* ========================================================= */

#limit-content .footer {max-height:230px!important;min-height: 230px!important;}
#limit-content .content-footer {
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
	padding: 0 10% 0 10%;
}
#limit-content .content-box-footer {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#limit-content .boxes-footer {background:#fff;display:flex;padding:50px 0 50px 0;}
#limit-content .boxes-footer .col-1-3 {
	float:left;
	background:#fff;
	width:33.333%;
	display:block;
	text-align:center;
	/* margin:50px 0 50px 0; */
}
.boxes-footer .col-1-3:first-child {border-right:dotted #494f54;border-width: 4px;}
.boxes-footer .col-1-3:last-child {border-left:dotted #494f54;border-width: 4px;}
.boxes-footer .col-1-3 span {width:100%;text-align:center;}
.boxes-footer i {margin:10px;color:#009f9e;font-size:26px;}
.boxes-footer .img {width:110px;height:130px;text-align:center;margin:20px auto;}

.epub {background: url(icons/epub.png)}
.pdf {background: url(icons/pdf.png)}
.mobi {background: url(icons/mobi.png)}




@media only screen and (max-width: 900px) {
canvas #canvas_jubilado, canvas#canvas_fabrica, canvas {
	    width: 100%;
	height:auto;
    margin: auto;
    display: block;
    justify-content: center!important;
    align-items: center!important;}
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 700px) {
	/* ==================== 
NAV
=======================*/
	
	
/* new nav */
	.nav-flechas-pension {
    z-index: 999;
    position: inherit;
}
	#w-guia .fle-left {top:55%!important;}
	.fle-right, .fle-left {
    z-index: 99;
	position: fixed!important;
    top: 50%;
	offset: 200px;
}
	.fle-right {right:0;}
	.fle-left {left:0;}
/* new nav */
	
	
span.p-guia {
	width: 98.6%!important;}
.nav-pensiones span {
    width: 8px;
}	
	/* ==================== 
NAV end
=======================*/	
	#w-principal .content-box-left {padding:0px!important;}
	#w-principal .left-center {padding: 20px;}
	.span_2_of_2, .span_1_of_2 { width: 100%;}
	/*.span_2_of_2 {height: 540px!important;}*/
	
	#limit-content .invertir {
		display: flex;
    	flex-flow: row wrap;
	}
	#limit-content .invertir .col:first-child {
		order: 2;
        width: 100%;}
	#limit-content .invertir .col {
		order: 1;
        width: 100%;}
	
	.boxes-footer .col-1-3 {width:100%!important;border:0px!important;}
	.boxes-footer {display:block;}
	
	/*#col_0_principal, #col_1_canvas, #col_2_canvas, #col_3_canvas, #col_4_canvas, #col_5_canvas, #col_6_canvas, #col_7_canvas, #col_8_canvas, #col_9_canvas, #col_10_canvas {max-height:500px;}*/
	/*#limit-content .content-box-left {height:430px;}*/
	#limit-content .contenedor {display: inline;position:relative;}
	#limit-content .content-canvas {height:auto;}
	/*#limit-content .col {height:auto;min-height:auto;}*/
	
	
	#limit-content .col {max-height:900px!important;}
	#limit-content .content-box-right {height:88%!important;}
	
	.verde .content-box-right {padding: 2% 10% 6% 0%;}
	.content-box-footer {padding: 50px;}
	.content-footer {padding: 30px 10% 30px 10%!important;}
	.col-1-1 .descargar {padding-left: 0;text-align: center;padding: 10px;}
	#limit-content .content-foot {padding-bottom: 40px;}
	#w-1 .azul .content-foot {padding-bottom:40px;}
	.oro .content-foot, .verde .content-foot, .tierra .content-foot, .lila .content-foot, .azul .content-foot {padding-bottom:130px;}
	.rosa .content-foot { padding-bottom: 60px;padding-top: 50px;}
	#w-guia .footer {max-height: 230px!important;min-height: inherit!important;}
	#limit-content .content-info {height:auto;max-height:inherit;}
}

@media only screen and (max-width: 380px) {
	
	#limit-content .col {height: 826px!important;}
	.rosa .content-box-left .left-center {margin-top: 20px;}
	.oro .content-box-left .left-center {margin-top: 20px;}
	.azul .content-box-left {height:88%!important;}
}

@media only screen and (max-width: 320px) {
	#w-principal .col {height:400px!important;}
	#w-1 .col {height:400px!important;}
	#w-4 .col .span_1_of_2 .verde .sobretext {height:900px!important;}
	#limit-content #w-4 .content-box-right {margin-bottom: 20px!important;}
	#limit-content #w-6 .content-box-right {height: initial!important;margin-top: 20px!important;margin-bottom: 20px!important;}
	#limit-content #w-8 .content-box-right {margin-top: 20px!important;margin-bottom: 20px!important;}
	#limit-content #w-10 .content-box-right {height:500px!important;margin-top: 10px!important;margin-bottom: 10px!important;}
	#limit-content #w-2 .content-box-right {margin-top: 10px!important;margin-bottom: 10px!important;}
	#limit-content h2 {font-size: 1.8em;}
	#limit-content .col {
    min-height:inherit!important;
    height: auto!important; 
    max-height:none!important; }
	.content-box-left {margin-top: 40px;margin-bottom: 40px;}
	#limit-content .content-box-right { margin-top: 40px;margin-bottom: 40px;}

	/* ==================== 
NAV
=======================*/
/* new nav */
	.nav-pensiones .w_p {
    float:left;
	width: 32px;
	}
	.p-0 {
    height: 35px;
    padding-top: 23px!important;
		width:64px!important;
	}
	.nav-pensiones {
		padding-right: 0px;}
/* ==================== 
NAV end
=======================*/	
	
}