/*
Project Name:  Banco de la republica 90 años
Author:  8manos S.A.S
Author URI:  http: //8manos.com/
Description: Expo Banrep
*/
@import url("normalize.css");
@import url("f/font_style.css");

html, 
body { 
	height: 100%;
}
*, *:before, *:after {
  	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
body {
	
	color: #1A1A1A;
	font: normal normal 14px 'Brown', Arial, Helvetica, sans-serif;
	overflow-y: hidden;
	line-height: 1;
}
a {
	color: #1A1A1A;
	text-decoration: none;
	-webkit-transition: 0.22s linear all;
	-moz-transition: 0.22s linear all;
	-o-transition: 0.22s linear all;
	-ms-transition: 0.22s linear all;
	transition: 0.22s linear all;
}
p {
	line-height: 1.8;
}
/**/
nav {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #292423;
	padding: 10px 0;
}
nav .container{
	min-width: 1200px;
	text-align: center;
}
nav ul {
	display: inline-block;
}
nav ul li {
	display: inline-block;
	margin: 0 7px;
}
nav li > ul {
	display: none;
	margin-left: 5px;
}
nav li > ul li {
	margin: 0 4px;
}
nav ul li.active ul {
	display: inline-block;
}
nav ul li.active {
	margin-right: 0;
} 
nav ul li a {
	display: inline-block;
	text-transform: uppercase;
	padding: 2px 8px 6px;
	background: #C5B171;
	font-size: 22px;
	font-weight: bold;
	color: #292423;
}
nav ul li.active a,
nav ul li a:hover {
	background: #968659;
}
nav li > ul li a {
	background: none !important;
	border: 2px solid #C5B171;
	color: #C5B171;
	font-size: 18px;
	padding-top: 2px;
	padding-bottom: 2px;
}
nav li > ul li a.active,
nav li > ul li a:hover {
	border-color: #968659;
	color: #968659;
}

/*---home---*/
.home header {
	width: 100%;
	height: 100%;
	background: url(i/bg_home.jpg);
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.home header.od {
	z-index: -1;
}
.banrep a{
	width: 144px;
	height: 0px;
	padding-top: 161px;
	overflow: hidden;
	position: absolute;
	top: 4%; 
	left: 5%;
	background: url(i/banrep90_s.png) no-repeat; 
}
.home header .banrep {
	width: 397px;
	height: 0px;
	padding-top: 445px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -199px -223px;
	background: url(i/banrep90.png) no-repeat;
	cursor: pointer; 
}
.home nav {
	display: none;
}
.home nav .container,
.nm nav .container {
	min-width: initial;
}
/**/
section.intro {
	display: none; 
}
section.col-text {
	width: 200%;
	height: 100%;
	background: #C5B171;
}
section.col-text .cont {
	padding: 10% 10% 0;
}
section {
	width: 100%;
	height: 100%;
	min-width: 1278px;
}
/*------- GENERALES --------*/
.container {
	min-width: 940px;
}
section article {
	/*max-width: 60%;*/
	text-transform: uppercase;	
}
section.col-text article{
	-webkit-column-width: 100%;
	-webkit-column-count: 2;
	-webkit-column-gap: inherit;
	-moz-column-width: 100%;
	-moz-column-count: 2;
	-moz-column-gap: inherit;
	column-width: 100%;
	column-count: 2;
	column-gap: inherit;	
}
section.col-text article p {
	width: 75%;
	text-align: justify;
}
section article .title-box {
	padding-bottom: 45px;
}
section article .title-box h1,
section article .title-box h2 {
	padding: 4px 12px 10px;
	text-transform: uppercase;
	font-size: 34px;
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
}
section article .title-box h1 {
	color: #B8A66C;
	background: #282423;
	padding: 7px 12px 13px;
}
section article .title-box h2 {
	color: #282423;
	border: 3px solid #282423;
	margin-left: 8px;
}
section.infografia{
	background: #C5B171;	
}
section.desplegar {
	white-space: nowrap;
}
section .cont {
	padding: 15% 20% 0;
	white-space: normal;
	white-space: initial;
}
section article {
	height: 100%;	
}
.arrow {
	display: block;
	width: 50px;/*25*/
	height: 139px;/*40*/
	position: absolute;
	top: 50%;
	right: 6%;
	cursor: pointer;
	background: url(i/mouse_scroll.gif);/*sprite_flechas.png) 0 -45px*/
}
.arrow:hover {
	right: 5.6%;
}
.cultura .arrow {
	background-position: 0 0;
}
/*HISTORIA*/
section.infografia .texto,
section.infografia .graficos {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	/*float: left;*/
	min-width: 940px;
}
section.infografia article p {
	margin-bottom: 40px;
	white-space: normal;
	white-space: initial;
}
.graficos.container {
	position: relative;
	height: 100%;
}
/**/
section.infografia .graficos .cont {
	padding: 8% 8% 0;
}
.indicador,
.detalle {
	width: 49%;
	/*float: left;*/
	display: inline-block;
	vertical-align: top;
}
.indicador h4 {
 	/*text-indent: -9999px;*/
 	width: 49%;
 	color: transparent;
 	display: inline-block;
 	font-size: 0;
 	cursor: pointer;
 	text-align: center;
}
.detalle {
	text-align: center;
	vertical-align: bottom;
}
.detalle > div {
	display: none;
}
.detalle > div.estatura {
	display: block;
}
section.infografia .detalle p {
	font-size: 11px;
	max-width: 70%;
	margin: 0 auto;
}
/**/
.datos-periodo {
	background: #38373A;
	color: #FFF;
	display: inline-block;
	vertical-align: top;
	height: 100%;
}
section.infografia  .datos-periodo .cont {
	padding: 65px 0 0;
	white-space: nowrap;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}
.categorias {
	text-align: center;
	max-width: 560px;
	padding-left: 94px;
	display: inline-block;
	vertical-align: middle;
	/*white-space: initial;*/
}
.categorias h3 {
	display: inline-block;
	padding: 1px 6px 3px;
	border-top: 3px solid #FFF;
	border-bottom: 3px solid #FFF;
	margin-bottom: 14px; 
	font-size: 32px;
} 
.categorias h3.t-cultura 	{ background-color: #C33D46;}
.categorias h3.t-economia	{ background-color: #B5A368; padding: 2px 6px;}
.categorias h3.t-edificios	{ background-color: #4E9AA6;}
.categorias p {
	text-transform: none;
	font-weight: 300;
	line-height: 1.5;
}
.hitos {
	display: inline-block;
	white-space: nowrap;
}
.hitos img { 
	vertical-align: middle;
	display: inline-block;
	padding-right: 108px;
}
.hitos img:first-child {
	padding-left: 208px;
}
/*ECONOMIA*/
.economia .economia-datos {
	/*width: 300%;*/
	white-space: nowrap;
} 
section.economia-datos {
	background: #C5B171;
}
.economia-datos .intro,
.economia-datos .texto,
.economia-datos .ilustraciones {
	display: inline-block;
	vertical-align: top;
	position: relative;
	/*float: left;*/
}
section.economia-datos article p {
	margin-bottom: 20px;
}
.economia-datos .intro,
.economia-datos .texto {
	min-width: 1140px;
	white-space: normal;
	white-space: initial;
}
.economia-datos .intro .cont {
	padding-right: 0;
	width: 50%;
	display: inline-block;
}
.economia-datos .inflacion-img {
	margin-left: 10%;
	width: 40%;
	max-width: 449px;
}
.titulo-inflacion {
	width: 361px;
	height: 317px;
	text-indent: -9999px;
	display: inline-block;
	background: url(i/inflacion_colombia-1922-2012.png);
	margin:0 160px 0 16px;
}
.economia-datos .ilustraciones {
	height: 100%;
	padding-right: 40px;
	background: #FFF; 
}
.economia-datos .ilustraciones .cont {
	padding: 4% 0 0;
	height: 100%;
	white-space: nowrap;
}
.ilustraciones .fraccion {
	vertical-align: middle;
}
.ilustraciones img.fraccion {
	height: 80%;
	max-height: 642px;
	width: auto;
}
.economia-datos .ilustraciones.grafica-inflacion {
	background-color: #C5B171;
	margin-left: -4px;
} 

.banco-emisor {
	width: 50%;
	max-width: 391px;
	max-height: 133px;
	margin: 0 auto;
	color: transparent;
	font-size: 0;
	margin-bottom: 35px;
}
.economia-datos .text-box {
	padding: 20px 0;
	border-top: 5px solid #292423;
	border-bottom: 5px solid #292423;
}
.economia-datos .text-box h2 {
	max-width: 458px;
	width: 39%;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	color: transparent;
	font-size: 0;
}
.banco-emisor img,
.economia-datos .text-box h2 img {
	width: 100%;
}
.economia-datos .text-box p {
	width: 60%;
	display: inline-block;
	padding-left: 2%;
	vertical-align: middle;
	margin-bottom: 0; 
}

.economia-datos .billetes .cont,
.economia-datos .monedas .cont {
	padding: 160px 0 0;
}
.billetes,
.monedas {
	background: #FFF;
}
.billetes img:first-child,
.monedas img:first-child {
	margin-left: 80px;
}
.billetes img,
.monedas img {
	margin-right: -4px;
}
/*CULTURA*/
section.cultura {
	background: #C5053D;
	color: #FFF;
}
section.cultura article .title-box h1 {
	color: #C5053D;
	background: #FFF;
}
section.cultura article .title-box h2 {
	color: #FFF;
	border-color: #FFF;
}
/*CULTURA*/
section.cultura {
	white-space: nowrap;
}
.cultura .texto,
.cultura .piezas {
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.cultura .texto {
	min-width: 1140px;
	white-space: normal;
	white-space: initial;
}
.cultura .piezas {
	padding-top: 8%;
	height: 100%;
	background: #C5053D;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -4px;
}
.cultura .piezas img {
	margin: 0 4px;
	height: 90%;
	max-height: 564px;
}
.cultura .piezas.blaa {
	padding-left: 20px;
	background: #FFF; 
}
.cultura .piezas.blaa img {
	margin: 0 -4px 0 0;
	max-height: 595px;
}
.cultura .piezas.blaa .texto-blaa {
	display: inline-block;
	max-width: 360px;
	color: #1A1A1A;
	white-space: normal;
	vertical-align: top;
	top: 20%;
	position: relative;
}
/*CONOCIMIENTO*/
section.conocimiento {
	background: #F29400;
}
.conocimiento .intro .cont {
	padding-right: 0;
	width: 50%;
	display: inline-block;
}
.conocimiento .intro .title-box {
	width: 130%;
}
section.conocimiento article .title-box h1 {
	color: #F29400;
}
.img-slid {
	width: 49%;
	padding: 15% 20% 0 0;
	display: inline-block;
	text-align: right;
	vertical-align: top;
}
.img-slid.bols {
	padding-top: 8%;
}
.img-slid.bols a {
	display: block;
	z-index: 100;
}
.img-slid img {
	max-width: 80%;
	max-height: 497px;
	display: none;
}
.img-slid img:first-child {
	display: inline-block;
}
.img-slid.bols img {
	cursor: pointer;
}
/*BANCO*/
.banco .cont {
	width: 50%;
	padding-right: 2%;
	display: inline-block;
	vertical-align: top;
}
.banco .container {
	-webkit-user-select: none; 
  	-moz-user-select: none;
  	-ms-user-select: none; 
}
.b-grafica {
	display: inline-block;
	background: url(i/grafica.png) no-repeat;
	width: 48%;
	max-width: 522px;
	height: 100%;
	max-height: 535px;
	margin-top: 2%;
	position: relative;
	overflow: hidden;
	background-size: contain;
}
.lupa {
	width: 37px;
	height:0;
	padding-top: 37px;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	background: url(i/lupa.png);
	cursor: pointer;
}
#grafica {
	width: 100%;
	height: 100%;
}
.textos-grafica {
	width: 28%;
	display: none;
	vertical-align: middle;
	margin-top: 8%;
	padding: 0 2%;
}
.textos-grafica p {
	display: none;
	font-size: 30px;
	line-height: 1.2;
}
.g-on .textos-grafica {	display: inline-block;}
.g-on .textos-grafica p:first-child { display: block;} 
.g-on .cont { display: none;}
.g-on .b-grafica { margin-left: 20%; vertical-align: middle;}
.g-on svg path { cursor: pointer;}
.g-on .lupa { display: none;} 

.textos-grafica p.p-a { color: #D2BE7D;}
.textos-grafica p.p-b { color: #F6A924;}
.textos-grafica p.p-c { color: #C4003C;} 
header, footer {
	/*overflow:hidden;*/
}
a.rel-link { padding-bottom: 3px; border-bottom: 1px solid #1A1A1A; }
a.rel-link:hover { opacity: 0.5;}
.cultura a.rel-link { color: #FFF; border-bottom-color: #FFF;}
@media screen and (max-width: 1640px) {
	section article .title-box h1, 
	section article .title-box h2 {
		font-size: 28px;
		padding-bottom: 9px;
	}
} 
@media screen and (min-width: 1440px) {
	.b-grafica { margin-top: 8%;}
	.textos-grafica p {
		font-size: 40px;
	}

}
@media screen and (max-width: 1440px) {
	section article .title-box { padding-bottom: 25px;}
	section.infografia article p { margin-bottom: 15px;}
	section .cont { padding-top: 10%;}
	.img-slid { padding-top: 8%;} 

	section article .title-box h1, 
	section article .title-box h2 {
		font-size: 26px;
		padding-bottom: 9px;
	}
	section article .title-box h2 { margin-left: 6px; padding-bottom: 7px;}
	.indicador h4 img { width: 100%; padding: 5%;}
}
@media screen and (min-width: 1190px) {
	nav { position: fixed;}
	svg path { cursor: pointer;}
	.b-grafica { height: 535px;}
}
@media screen and (max-width: 1320px) {
	nav ul li { margin: 0 4px;}
	nav ul li a { font-size: 18px;}
	nav li > ul li a { font-size: 16px;}
	.economia-datos .inflacion-img { width: 25%; margin-left: 5%; vertical-align: top; margin-top: 15%;}
}
@media screen and (min-width: 1260px) {
	.home section.col-text { width: 100%;}
	.home section.col-text article {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;	
	}
	section.col-text .cont {padding: 15% 20% 0;}
	section.col-text article p { width: 100%; margin-bottom: 20px;}
}
@media screen and (max-width: 1290px) {
	.banrep a { width: 124px; background-size: contain; top: 3%; left: 2%; }

	section.col-text .cont { padding-top: 8%;}

	section .cont { padding-top: 7%;}
	section.infografia .graficos .cont { padding: 4% 2% 0;}
	section article .title-box h1, 
	section article .title-box h2 { font-size: 24px;}
	section article .title-box h2 { margin-left: 4px;}
	.detalle img { max-height: 360px;}
	.detalle p { max-width: 52%; margin: 0 auto;}
	section.infografia .datos-periodo .cont { padding-top: 40px;}
	section article p { font-size: 12px;}
	.indicador h4 img { padding: 10%;}
	.hitos img { max-height: 500px;}

	.economia-datos .intro .cont { padding-top: 7%; width: 60%;}
	.economia-datos .inflacion-img { margin-top: 7%;}
	.economia-datos .ilustraciones .cont { padding-top: 60px;}
	.banco-emisor { width: 40%;}
	.textos-grafica p { font-size: 24px;}
	.cultura .piezas { padding-top: 0;}
	.cultura .piezas.blaa { padding-top: 60px;}
	
}
@media screen and (max-width: 1024px) {
	section .cont { padding-left: 180px; padding-top: 90px; }
	.detalle img { max-height: 280px; max-width: 380px;}
	.hitos img { max-height: 400px;}


	.economia section { min-width: 1144px;}
	.economia-datos .inflacion-img { margin-top: 7%;}

	.g-on .b-grafica { margin-left: 18%;} 
	#grafica { height: auto;}
	/*.banco .container { min-width: 1140px;}*/
}
@media screen and (max-width: 960px) {
	.home nav .container, .nm nav .container {min-width: 1284px;}
	nav {max-width: 324%;}
	nav:before {
		content: '';
		display: block;
		width: 100px;
		height: 100%;
		background: url(i/bg_nav.png) repeat-y;
		position: absolute;
		top: 0;
		right: -99px; 
	}
	.nav-o nav:before,
	.conocimiento nav:before,
	.elbanco nav:before,
	.cultura nav:before,
	.historia nav:before { display: none;}

	.indicador h4 img { padding: 2%;}
	.arrow { display: none;}
}
@media screen and (max-width: 960px) and (min-width: 600px) {
	section.col-text .cont {padding-top: 16%;}	
}
@media screen and (max-width: 820px) and (orientation : landscape) {
	section.col-text .cont {padding-top: 14%;}
}

@media screen and (max-width: 600px) {
	.hitos img:first-child { padding-left: 80px;}
	section article .title-box h2 { margin-left: 3px;}
	section.infografia .datos-periodo .cont { padding-top: 1em;}
	section article p { }
	.indicador h4 img { padding: 0;}
	.lupa, #grafica { display: none;}
	
}
@media screen and (max-height: 640px) and (orientation : landscape) {
	.home header .banrep { display: none;}
	.banrep a { left: 5%;}
	nav { padding: 4px 0; max-width: 590%;}
	nav ul { }
	nav ul li a { font-size: 15px; padding-bottom: 2px;}
	nav li > ul li a { font-size: 15px; padding-top: 0;}
	nav .container { text-align: left; padding-left: 35px;}

	section.col-text .cont { padding-top: 20px; padding-left: 210px;}
	section.col-text article p { font-size: 9px;}
	section .cont { padding-top: 20px;}
	section article p { font-size: 9px;}
	section article .title-box h1, 
	section article .title-box h2 {font-size: 18px; padding: 2px 8px 4px;}
	section article .title-box h1 { padding-top: 4px; padding-bottom: 8px;}
	section article .title-box {padding-bottom: 7px;}

	section #inicio .cont{
	padding-right: 2%;
	-webkit-column-width: 100%;
	-webkit-column-count: 2;
	-webkit-column-gap: inherit;
	-moz-column-width: 100%;
	-moz-column-count: 2;
	-moz-column-gap: inherit;
	column-width: 100%;
	column-count: 2;
	column-gap: inherit;
	}

	.historia nav {max-width: 333%;}

	section.infografia article p { margin-bottom: 6px; font-size: 9px;}
	section.infografia .graficos .cont { padding-top: 2%;}
	.indicador h4 { margin-bottom: 4%;}
	.indicador h4 img {  max-height: 90px; width: auto; max-width: 100%;}
	.detalle { text-align: left; position: relative;}
	.detalle img { width: auto; max-height: 170px; max-width: 200px; padding-left: 50px;}
	.detalle p { max-width: initial; position: absolute; right: 5%; top: 20px; width: 46% !important; font-size: 9px !important; }
	
	.categorias { padding-left: 24px; vertical-align: top; white-space: normal; white-space: initial;}
	.categorias p { width: 65%; display: inline-block; text-align: justify; margin-bottom: 3em !important;}
	.categorias h3 { font-size: 26px; text-align: center; display: inline-block; vertical-align: top; width: 150px; margin-right: 8px;}
	.hitos { position: absolute; height: 100%;}
	.hitos img { max-height: 90%; padding-right: 0; margin-right: 40px; max-width: initial; width: auto;}

	.economia nav { max-width: 202%;}
	.economia-datos .inflacion-img { margin-top: 8px; max-height: 82%; width: auto; max-width: 24%;}
	@-moz-document url-prefix() {
		.economia-datos .inflacion-img { max-width: 18%; }
	}
	section.economia-datos article p { margin-bottom: 6px;}
	.titulo-inflacion { height: 187px; background-size: contain; background-repeat: no-repeat; margin-right: 0; }

	.banco-emisor { max-width: 180px; margin: 0 0 18px;}
	.economia-datos .texto {min-width: 790px;}
	.economia-datos .text-box { position: relative; padding: 9px 0;}
	.economia-datos .text-box h2 { position: absolute; top: -80px; right: 0;}
	.economia-datos .text-box p { width: 100%;}
	.ilustraciones img.fraccion { height: 90%;}
	.economia-datos .ilustraciones .cont { padding-top: 20px;}
	.economia-datos .intro .cont { width: 65%; padding-top: 8px;}

	.cultura nav { max-width: 228%;}
	.cultura.blaa nav { max-width: 225%;}
	.cultura .piezas.blaa {padding-top: 20px;}
	.cultura .piezas img { height: 100%;}

	.img-slid, .img-slid.bols { padding-top: 20px;}
	.img-slid img { max-height: 75%;}

	/*.conocimiento nav,
	section { max-width: 994px;}*/

	.lupa { display: none;}
	#grafica { opacity: 0;}
	section.banco #inicio .cont{
	width: 54%; 
	padding-right: 0%;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	}
	.b-grafica { margin: 0; width: 42%; max-height: 80%;}
}
@media screen and (max-width : 500px) {
	/*.home header .banrep { display: none;}*/
	.home header .banrep {
	padding-top: 275px;
	width: 227px;
	/*
	padding-top: 346px;
	width: 298px;*/

	margin: -137px -113px;;
	background-size: contain;
	}
	body {text-rendering: optimizeSpeed;}
	
	.banrep a { left: 5%;}
	nav { padding: 4px 0; max-width: 590%;}
	nav ul { }
	nav ul li a { font-size: 15px; padding-bottom: 2px;}
	nav li > ul li a { font-size: 15px; padding-top: 0;}
	nav .container { text-align: left; padding-left: 35px;}

	section .cont { 
	padding-right: 2%;
	-webkit-column-width: 100%;
	-webkit-column-count: 2;
	-webkit-column-gap: inherit;
	-moz-column-width: 100%;
	-moz-column-count: 2;
	-moz-column-gap: inherit;
	column-width: 100%;
	column-count: 2;
	column-gap: inherit;
	}

	section article .title-box h1, 
	section article .title-box h2 {font-size: 18px; padding: 2px 8px 4px;}
	section article .title-box h1 { padding-top: 4px; padding-bottom: 8px;}
	section article .title-box {padding-bottom: 7px;}

	section article p,
	section.infografia .detalle p { font-size: 11px;}
	section.col-text .cont { padding-top: 3%; padding-left: 190px; padding-right: 0;}
	section.infografia .graficos .cont { padding-top: 20px; position: relative;}

	
	
	.detalle p { max-width: initial; position: absolute; right: 5%; top: 20px; width: 30% !important;}

	.categorias { padding-left: 24px; vertical-align: top;}
	section.infografia .categorias p { width: 100%; }
	.categorias h3 { font-size: 26px;}
	.hitos { height: 100%;}
	.hitos img { max-height: 360px; padding-right: 0; margin-right: 40px; max-width: initial; width: auto;}

	/*section.economia-datos { min-width: 1038px;}
	.economia-datos + nav { max-width: 450%;}*/
	.economia-datos .texto { min-width: 660px;}
	.economia-datos .inflacion-img { margin-top: 2%;}
	.economia nav {max-width: 358%;}
	section.economia-datos .cont,
	section.conocimiento .cont { 
	/*section.banco .cont*/
	padding-right: 2%;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	}
	.banco-emisor { margin: 0px 0 15px; max-width: 220px;}
	.economia-datos .text-box h2 { max-width: 216px; vertical-align: top;}

	.cultura nav {max-width: 358%;}
	.cultura .piezas.blaa { padding-top: 20px; }
	.cultura .piezas img { height: 100%;}

	section.conocimiento { max-width: 906px; min-width: 906px; overflow: hidden;}
	.conocimiento nav, .conocimiento + nav  {max-width: 283%; overflow: hidden;}

	.elbanco nav { max-width: 620px;}
	.elbanco .container { min-width: initial; width: auto !important; }
	.b-grafica { margin-top: 0; width: 30%; max-width: 300px; height: 270px;}
	section.banco article#inicio p { }
	.banco .cont { width: 70%;}
	.textos-grafica { margin-top: 2%; vertical-align: top;}
	.g-on .b-grafica { margin-left: 180px;}

	section.g-on article#inicio p {width: 100%;}

}
@media screen and (max-width : 500px) and (orientation : landscape) {
	nav {max-width: 394%;}
	section.col-text .cont { padding-top: 20px;} 
	section .cont, section.infografia .graficos .cont { padding-top: 6px;}
	section.infografia article p { width: 98%; margin-bottom: 6px;}
	section.infografia .texto p { font-size: 9px;}
	section.col-text article p { width: 100%; font-size: 9px;}

	section article#inicio p { width: 78%; max-width: none;}
	.historia nav { max-width: 390%;}
	.categorias { white-space: normal; white-space: initial; /*margin-top: -28px;*/ max-width: 687px; text-align: left;}
	.categorias h3 { display: inline-block; vertical-align: top; width: 150px; margin-right: 8px;}
	section.infografia .categorias p { width: 65%; display: inline-block; text-align: justify;}
	.detalle { position: initial; margin-top: 20px;}
	.detalle img { width: auto; max-height: 170px; max-width: 200px; padding-left: 50px;}
	.hitos img { max-height: 90%;}
	.indicador h4 { margin: 15px 0;}
	.indicador h4 img {  max-height: 90px;}

	.banco-emisor { max-width: 180px; margin: 0 0 8px;}
	.economia-datos .texto {min-width: 790px;}
	.economia-datos .text-box { position: relative;}
	.economia-datos .text-box h2 { position: absolute; top: -80px; right: 0;}
	.economia-datos .text-box p { width: 100%;}
	.ilustraciones img.fraccion { height: 90%;}
	.economia-datos .ilustraciones .cont { padding-top: 20px;}
	.economia-datos .intro .cont { width: 80%; padding-top: 5px;}

	section.economia-datos article p { margin-bottom: 8px; font-size: 9px; width: 49%; padding-right: 2%; text-align: justify; display: inline-block; vertical-align: top;}
	.economia-datos .inflacion-img { margin: 0; max-height: 83%; width: auto; max-width: 18%;}
	.titulo-inflacion { height: 187px; background-size: contain; background-repeat: no-repeat; margin-right: 0; }
	.economia nav,
	.cultura nav {max-width: 239%;}
	.cultura .piezas.blaa { padding-top: 8px; }
	.cultura .piezas img { height: 100%;}
	.economia-datos .text-box { padding: 8px 0;}

	section.conocimiento { max-width: 940px; min-width: 940px;}
	.conocimiento .intro .cont { width: 69%;}
	.img-slid, .img-slid.bols { width: 25%; padding-top: 1%; padding-right: 0;}
	.img-slid img { max-height: 70%;}
	.b-grafica { height: 90%;}

}
@media screen and (max-width: 380px) {
}
@media screen and (max-width: 380px) and (orientation : portrait) {
	nav { max-width: 399%; }
	.historia nav { max-width: 590%; }
	.indicador, .detalle { vertical-align: middle;}
	.indicador h4 { width: 62%; margin-bottom: 6%;}
	section .cont { padding-top: 35px;}

	section.col-text article p, 
	section article p, 
	section.infografia article p

	section article p, 
	section.infografia .detalle p {font-size: 11px;}

	section.col-text article p { width: 85%;}
	section.infografia article p { width: 72%; /*width: 54%;*/}
	section article#inicio p { width: 54%;}

	section.economia-datos article#inicio p {width: 28%;}
	.economia-datos .intro .cont { padding-top: 5%; width: 42%;}
	.economia-datos .inflacion-img { width: 27%;}
	.categorias {max-width: 300px; /*margin-top: -14px;*/}

	section.conocimiento article#inicio p { width: 42%;}

	section.banco .cont{
	width: 54%; 

	padding-right: 0%;
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
	}
	.detalle img { max-width: 222px;}
	.b-grafica { margin-top: 20px; width: 46%; max-width: 400px;}
}
@media screen and (max-height: 300px) and (orientation : landscape) {
	section.col-text article p, 
	section article p {
		font-size: 10px;
	}
	section.infografia article p,
	section.infografia .texto p, 
	section.economia-datos article p{ 
		font-size: 10px;
	}
	.detalle p,
	section p {
		font-size: 10px;
	}

	section.economia-datos article#inicio p {
		display: block;
	}
	.economia-datos .texto {min-width: 790px;}
	.economia-datos .text-box { position: relative;}
	.economia-datos .text-box h2 { position: absolute; top: -80px; right: 0;}
	.economia-datos .text-box p { width: 100%;}
	.economia-datos .inflacion-img  { max-width: 16%;}
	.b-grafica { height: 234px;}
	
}
@-ms-viewport { width: device-width; }

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 580px) and (orientation : landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 580px) and (orientation : landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 580px) and (orientation : landscape),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 580px) and (orientation : landscape),
only screen and (                min-resolution: 192dpi) and (max-width: 580px) and (orientation : landscape),
only screen and (                min-resolution: 2dppx)  and (max-width: 580px) and (orientation : landscape) { 

	.historia section .cont { padding-top: 14px;}
	section.col-text article p { font-size: 9px;}
	section article p { font-size: 9px;}
	section.infografia article p { font-size: 9px;}
	.detalle p { font-size: 9px !important;}
	section.infografia .texto p { font-size: 9px;}
	section.col-text article p { font-size: 9px;}
	section.economia-datos article p { font-size: 9px;}
	section.conocimiento #inicio .cont {
		width: 54%; 
		padding-right: 0%;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}

}