@charset "UTF-8";

@font-face {font-family: Mulish; font-style: normal; font-weight: 400; src: url(../menu-bps-en-cifras/fonts/Mulish-Regular.ttf);}
@font-face {font-family: Mulish; font-style: normal; font-weight: 500; src: url(../menu-bps-en-cifras/fonts/Mulish-Medium.ttf);}

:root {
	--header-height: 74px;
	--footer-height: 33px;
	--width-normal: 1126px;
	--color-header: rgba(33, 64, 84, 1);
	--color-footer: rgba(33, 64, 84, 1);
	--color-text-default: rgba(0, 0, 0, 1);
	--color-brand: rgba(0, 64, 120, 1); 
	--color-primario: rgba(0, 64, 120, 1); 
	--color-secundario: rgba(0, 81, 163, 1);
/*	--color-terciario: */
	--color-dark-gray: rgba(55, 55, 55, 1);
/*	--color-info: */
	--cat-width: 547px;
	--color-cat1: rgba(213, 67, 131, 1);
	--color-cat2: rgba(38, 159, 165, 1);
	--color-cat3: rgba(162, 115, 90, 1);
	--color-cat4: rgba(75, 122, 86, 1);
	--color-cat5: rgba(38, 120, 166, 1);
}

@media (max-width: 768px) {
	:root {
		--header-height: 49px;
		--cat-width: 100%;
		--footer-height: 56px;
	}
}

* { 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body {	
	width: 100%;
	height: 100vh;	
}
body {
	margin: 0px 0px 0px 0px;
  	background: #f9f9f9;
  	font-family: 'Mulish', sans-serif;
}
a {
	text-decoration: none;
	cursor: pointer;
}

/**************************** header **********************************/
header {
	width: 100%;
    height: var(--header-height);
    position: fixed;
    background: var(--color-header) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
header .logo {
    color: #fff;
    font-weight: 400!important;
    line-height: 1.1!important;
    font-style: italic;
    letter-spacing: .03rem;
    flex-grow: 1;
    text-align: center;
}
header .link-bps {
	position: absolute;
    right: 0px;
    height: 100%;
    top: 0px;
    display: flex;
    align-items: center;
}
header a {
	color: #fff;
    text-decoration: none;
    margin-right: 38px;
    font-size: 0.875rem
}
header .menu {
	margin-left: 10px;
}
@media (max-width: 768px) {
	header .link-bps {
		display: none;
	}
}

/**************************** main **********************************/
main {
    min-height: calc(100vh - var(--footer-height));
    padding-top: var(--header-height);
    padding-left: 0;
    transition: all .3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    flex: 1;
    margin-bottom: 32px;
}

/**************************** footer **********************************/
footer {
	width: 100%;
	height: var(--footer-height);
	background: var(--color-footer);
	padding: 0;
    color: #fff;
}
/**************************** Breadcrum & title **********************************/
.breadcrum {
	padding-top: 40px;
	font-weight: 500;
	font-size: 16px;
	line-height: 20.08px;
	margin: 0px;
}
.breadcrum,
.breadcrum a {
	color: rgba(42, 63, 84, 1);
}
.pagehead {
	padding-top: 32px;
	padding-bottom: 32px;
}
.pagetitle {
	font-weight: 500;
	font-size: 40px;
	line-height: 50.2px;
	padding: 0px 0px;
	color: var(--color-secundario);
	margin: 0px;
}
.pagedesc {
	margin-top: 20px;
	margin-bottom: 0px;
}

@media (max-width: 768px) {
	.pagetitle {
		font-size: 32px;
		padding: 24px 0px;
		line-height: 40px;
	}
	.breadcrum { 
		padding: 24px 0 0 0;
	}
	.header .link-bps {
		display: none;
	}
}
/**************************** Container **********************************/
.container {
	width: var(--width-normal);
	margin-left: auto;
	margin-right: auto;		
}

@media (max-width: 1200px) {
	.container {
		width: calc(100% - 32px);
		margin-left: 16px;
		margin-right: 16px;
	}	
}

/**************************** home **********************************/
.cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.cat {
	display: flex;
	flex-direction: row;	
	width: var(--cat-width);
	min-height: 178px;
	padding: 30px;
	background: white;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
	margin-bottom: 32px;
	border-radius: 4px;
	cursor: pointer;
}
.cat1 {
	border-top: solid 6px var(--color-cat1);
}
.cat2 {
	border-top: solid 6px var(--color-cat2);
}
.cat3 {
	border-top: solid 6px var(--color-cat3);
}
.cat4 {
	border-top: solid 6px var(--color-cat4);
}
.cat5 {
	border-top: solid 6px var(--color-cat5);
}
.cat-img {
	width: 56px;
	height: 56px;
	margin: 0 16px;
	background-repeat: no-repeat;
}
.cat1 .cat-img {
	background-image: url('../img/boletines.png');
}
.cat2 .cat-img {
	background-image: url('../img/indicadores.png');
}
.cat3 .cat-img {
	background-image: url('../img/comentarios.png');
}
.cat4 .cat-img {
	background-image: url('../img/encuestas.png');
}
.cat5 .cat-img {
	background-image: url('../img/proyeccion.png');
}
.cat-box {
	width: 405px;
}
.cat-title {
	color: var(--color-text-default);
	font-weight: 500;
	font-size: 28px;
	line-height: 35.15px;
	margin-bottom: 10px;
}
.cat-desc {
	color: var(--color-dark-gray);	
	font-size: 18px;
	line-height: 23px;
}

@media (max-width: 1200px) {
	
}

/**************************** Cuadros **********************************/
.cuadro {	
	padding: 40px 56px 40px 50px;
	border-radius: 0px 4px 4px 0px;
	border: 1px 1px 1px 0px;
	background: white;	
	border-style: solid;
	border-color: #0000002E;
	margin-bottom: 32px;
}
.cuadro-cat1 {
	border-left: solid 6px var(--color-cat1);
}
.cuadro-cat2 {
	border-left: solid 6px var(--color-cat2);
}
.cuadro-cat3 {
	border-left: solid 6px var(--color-cat3);
}
.cuadro-cat4 {
	border-left: solid 6px var(--color-cat4);
}
.cuadro-cat5 {
	border-left: solid 6px var(--color-cat5);
}

.cuadro-titulo {
	font-size: 32px;
	font-weight: 500;
	line-height: 40.16px;
	text-align: left;
	margin-bottom: 16px;	
}
.cuadro-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	text-align: left;
	color: var(--color-dark-gray);
	margin-bottom: 16px;	
}

.cuadro-body {
	margin-top: 32px;
}

.cuadro-download-all {
	margin-top: 32px;
	text-align: right;
	display: flex;
    justify-content: end;
    margin: 0 0 0 auto;
}

@media (max-width: 1200px) {
	.cuadro {		
		padding: 32px 24px 32px 24px;		
		border-radius: 0px 4px 4px 0px;
		border: 1px 1px 1px 0px;
		opacity: 0px;
	}
}

/**************************** Cuadro download modal **********************************/

.cuadro-download-modal {
	min-height: 295px;
	padding: 56px 72px 56px 72px;		
}
.cuadro-download-modal .pagetitle {	
	font-size: 40px;
	font-weight: 500;
	line-height: 50.2px;
	text-align: left;
	padding: 0;
}
.cuadro-download-modal .seleccionar {
	margin-top: 30px;
	padding: 0px 24px;
}

.cuadro-download-modal .seleccionar .row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: solid 1px #eee;	
	padding: 10px 0px;
}

.cuadro-download-modal .seleccionar .row .cell {
	margin: 9px 0px;
}

.cuadro-download-modal .seleccionar .row .cell:first-child {
	/*flex-grow: 1;*/
	width: 600px;
}

.cuadro-download-modal .seleccionar .row .cell:nth-child(2) span:before {
	content: url('../img/minpdf.png');
	margin-right: 5px;
}
.cuadro-download-modal .seleccionar .row .cell:nth-child(3) span:before {
	content: url('../img/minxls.png');
	margin-right: 5px;
}

.cuadro-download-modal .seleccionar .row .cell:not(:first-child) {
	width: 100px;
}

.cuadro-download-modal .seleccionar .row:not(:first-child) .cell:first-child {
	padding-left: 36px;
}

.cuadro-download-modal .seleccionar input {
	margin-right: 10px;
}

.cuadro-download-modal .cuadro-download-all {
	margin-top: 30px;
}

.main-cuadro-3 div.excel,
.main-cuadro-4 div.excel {
	display: none;
}


@media (max-width: 1200px) {
	.cuadro-download-modal {
		min-height: 295px;
		padding: 56px 32px;		
	}
	.cuadro-download-modal .pagetitle {	
		font-size: 28px;
		line-height: 31px;
	}
}

/**************************** Docs **********************************/
.doc {
	display: flex;
	flex-direction: row;
	margin: 24px;
}
.doc-img {
	width: 160px;
	height: 160px;
}
.doc-img img {
	
}
.doc-meta {
	flex-grow: 1;
    text-align: left;
    margin-left: 32px;
}
.doc-title {
	font-size: 24px;
	font-weight: 500;
	line-height: 30.12px;
	text-align: left;
	margin-bottom: 8px;
}
.doc-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	text-align: left;
	color: var(--color-dark-gray);
	margin-bottom: 8px;
}
.doc-date {
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	text-align: left;
	color: var(--color-dark-gray);
	margin-bottom: 16px;
}
.doc-download {
	
}
.doc-sep {
	width: 100%;
	height: 1px;
	background-color: #ccc;
	margin: 34px 0;
}

.doc-grupo {
	color: rgba(42, 63, 84, 1);
	font-size: 28px;
	font-weight: 500;
	line-height: 35.14px;
	text-align: left;
	padding: 32px 0;
}
.doc-grupo:first-child {
	padding: 0 0 32px 0;
}


@media (max-width: 1200px) {
	.doc {
		flex-direction: column;
		display: flex;
        align-items: center;
	}
	.doc div {
		margin: 8px 0px;
		text-align: center;
	}
	.doc-meta {
		display: flex;
    	flex-direction: column;
    	align-items: center;
    }
    .cuadro-download-all {
    	justify-content: center;
    }
    
}

/**************************** w3modal **********************************/
/*Extraido de https://www.w3schools.com/w3css/4/w3.css */

.w3-modal {
	z-index: 101;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4)
}

/*
.w3-container {
	padding: 0.01em 16px
}
*/

.w3-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 900px;
	max-width: 100%;
}

.w3-container:after, .w3-container:before {
	content: "";
	display: table;
	clear: both
}

.w3-button {
	border: none;
	display: inline-block;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap
}

.w3-display-topright {
	position: absolute;
	right: 0;
	top: 0
}

/**************************** Menú hamburguesa ***********************************/
header .menu {
	cursor: pointer;
}
#menu-overlay {
	top: var(--header-height);
}
#close-menu {
	display: none;
}
.tag-container {
	position: fixed;
	width: 480px;
	height: fit-content;
	background-color: white;
	top: var(--header-height);
	z-index: 102;
	display: none;
}
@media only screen and (max-width: 600px) {
	.tag-container {
		width: 100%;
	}
}

/**************************** Filtro **********************************/

.cuadro-filtros {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;	
	margin-bottom: 32px;
}

button.filtro {
	border: solid 1px #004078;
	border-radius: 40px;
	padding: 14px 24px;	
	background-color: var(--color-brand);	
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	height: 38px;
}

.field {
	margin-right: 16px;
}

.field-query {
	flex-grow: 2;
}

.field-box {
	max-width: 100%;
	height: 38px;
	padding: 5px 16px 5px 13px;
	border: 1px solid #C9D2DA;
	box-shadow: 0px 1px 4px 0px #00000029;
	background-color: white;
    border-radius: 24px;	
    display: flex;
}

.field-box img {
	width: 24px; 
	height: 24px; 
	margin-right: 16px;
}

.field-box input[type="text"] {
	width: 100%; 
	
	height: 24px; 
	margin-right: 16px;
	border: none;
} 

.field .select-selected {
	border: none;
	border: 1px solid #C9D2DA; 
} 

.filtro-mes-disabled {
	pointer-events: none;
} 
.filtro-mes-disabled .select-selected {
	color: #999;
}

@media (max-width: 1200px) {
	.cuadro-filtros {
		flex-direction: column;
	}
	.field {
		margin-bottom: 16px;
	}
}

/**************************** snippets **********************************/
button {
	display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
button.outline {
	color: var(--color-brand);
    border: 1px solid var(--color-brand);
    background-color: white;
    border-radius: 24px;
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
	
	
	padding: 7px 16px 7px 16px!important;
	height: 35px;
	/* 
	color: #004078; 
	border: solid 1px #004078;
	border-radius: 27px;
	font-size: 14px;
	*/
	font-weight: 400;
	line-height: 21px;
}
button.outline span {
	padding-left: 0.5rem;
}
button img {
	margin-right: 7px;
}
button.primary {
	border: solid 1px #004078;
	border-radius: 40px;
	padding: 14px 48px 14px 48px;
	height: 53px;
	background-color: var(--color-brand);	
	color: #fff;
	font-weight: 500;
	font-size: 20px;
	line-height: 25px;
}