#main-portfolio {
	width: 100%;
	padding-top: 40px;
	min-height: 100vh;
	padding: 30px 0;
}

#top-portfolio {
	width: 95%;
	max-width: 1100px;
	margin: 20px auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#portfolio-title {
	font-size: 1.1em;
	width: 90%;
	margin: 20px auto;
	font-family: "Open Sans", sans-serif;
}

#titulo-plataforma {
	color: #bc2f26;
	font-size: 3em;
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-weight: bold;
}

#top-portfolio-text {
	width: 90%;
	max-width: 550px;
	margin: 55px auto;
	font-family: "Open Sans", sans-serif;
	font-size: 1.7em;
	line-height: 1.5;
	text-align: justify;
}

#purpose, #proposito {
height: 60px;
}

#kpi-container {
	width: 95%;
	max-width: 1100px;
	margin: 25px auto;
	font-family: "Open Sans", sans-serif;
	font-size: 1.6em;
	line-height: 1;
	padding: 0 20px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#wraper {
	width: 100%;
	max-width: 900px;
	display: flex;
	flex-direction: row;
	margin-top: 20px;
	margin-bottom: 50px;
	justify-content: center;
}

#kpi-text-container {
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#kpi-box {
	width: 70%;
	min-width: 300px;
	max-width: 450px;
	display: flex;
	flex-direction: row;
}

#pkpi1 {
	width: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 2.5em;
	color: #2d2f2f;
	margin: 0;
	padding-right: 8px;
}

#pp {
	cursor: pointer;
}

#kpi-wrapper1 {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#kpi-wrapper2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#pkpi2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.5em;
	font-size: 1.2em;
	font-weight: bold;
	color: #2d2f2f;
	margin: 0;
	padding-left: 4px;
}

#kpi-icon {
	width: 25%;
	min-width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	color: #2d2f2f;
	margin: 0;
}

#tree-map {
	width: 0%;
	height: 0%;
	margin: 0;
	padding: 0;
}

.treemap-text {
	font-family: "Open Sans", sans-serif;
	font-size: 0.7em;
}

#treemap-container {
	width: 100%;
	max-width: 1100px;
	min-width: 290px;
	height: 90px;
	padding: 0;
	margin: 0 auto 20px;
}

rect {
	stroke: #fdfcfc;
}

.tooltip {
	position: absolute;
	z-index: 999;
	background-color: rgba(109, 109, 109, 0.5);
	border: 1px solid rgba(109, 109, 109, 0.5);
	border-radius: 5px;
	color: white;
	padding: 10px;
	font-size: 11px;
	opacity: 0.2;
	pointer-events: none;
	font-weight: 100;
}

#quote-ikr {
	font-style: italic;
	text-align: right;
	margin: 0;
	font-size: 1em;
}

#middle-portfolio {
	width: 95%;
	max-width: 1100px;
	margin: 15px auto 100px;
	font-family: "Open Sans", sans-serif;
	font-size: 1.6em;
	line-height: 2;
	background-color: rgb(245, 245, 245);
	border-radius: 12px;
	text-align: justify;
	padding: 25px;
}

#middle-portfolio strong {
	color: #bc2f26;
}

#middle-portfolio ul li strong {
	list-style-type: disc;
	color: black;
}

#mandatos,
#expectativa,
#riesgo,
#estadio,
#impacto,
#estrategias,
#ods {
	width: 90%;
	margin: 25px auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	gap: 5%;
	font-size: 0.8em;
	/* border: solid 5px green; */
}

#mandatos1,
#expectativa1,
#riesgo1,
#estadio1,
#estrategias1 {
	width: 90%;
	margin: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 2%;
	text-align: center;
}

#estrategias1 {
	font-size: 0.96em;
}

#ods1 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #e9dfa5);
	width: 90%;
	text-align: center;
}

#impacto1 {
	width: 90%;
	display: flex;
	flex-direction: column;
	margin: 5px 0 5px 0;
}

#impact-title {
	align-self: flex-start;
	margin-top: 1px;
}

.mdivs1 {
	border-radius: 6px;
	background-image: linear-gradient(to right, #bc2f26, #bc2f26);
	width: 48%;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #ffffff;
}

.mdivs2 {
	border-radius: 6px;
	background-image: linear-gradient(to right, #bc2f26, #e9dfa5);
	width: 48%;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #ffffff;
}

.mdivs3 {
	border-radius: 6px;
	background-image: linear-gradient(to right, #e9dfa5, #e9dfa5);
	width: 48%;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#riesgo1 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #bc2f26);
}

#edivs1,
#edivs2,
#edivs3 {
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#edivs1 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #bc2f26, #bc2f26);
	width: 50%;
	text-align: left;
}

#edivs2 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #bc2f26);
	width: 14%;
}

#edivs3 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #e9dfa5);
	width: 32%;
}

#e1,
#e2,
#e3 {
	display: flex;
	flex-direction: row;
	width: 33%;
	justify-content: space-around;
	gap: 5%;
}

#imp1 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #bc2f26, #bc2f26);
	width: 100%;
	text-align: left;
	margin: 5x 0 5px 0;
}

#imp2 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #bc2f26);
	width: 75%;
	margin: 5px 0 5px 0;
	align-self: flex-end;
}

#imp3 {
	border-top: 15px solid;
	border-image-slice: 1;
	border-width: 8px;
	border-image-source: linear-gradient(to left, #e9dfa5, #e9dfa5);
	width: 50%;
	margin: 5px 0 5px 0;
	align-self: flex-end;
}

#bottom-portfolio {
	width: 95%;
	max-width: 1100px;
	margin: 15px auto 100px;
	font-family: "Open Sans", sans-serif;
	font-size: 1.7em;
	line-height: 2;
	text-align: justify;
	background-color: rgb(245, 245, 245);
	padding: 8px;
	border-radius: 12px;
	/* box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px; */
}

#bottom-portfolio ul {
	width: 95%;
	max-width: 720px;
	display: flex;
	flex-direction: row;
	list-style-type: none;
	justify-content: space-between;
	padding: 3px;
	margin: auto;
}

.pbibtn {
	margin: 0;
}

#bottom-portfolio ul li {
	color: #2d2f2f;
	font-size: 1em;
	margin: 8px;
padding: 10px;
	text-align: center;

}

#bottom-portfolio ul li:hover {
	color: #bc2f26;
	cursor: grab;
}

.selectedBtn {
	border: solid 2px #bc2f26;
	border-radius: 10px;
}

#vc,
#pe,
#f {
	width: 95%;
	text-align: justify;
	margin: auto;
	font-size: 1em;
}

.display {
	display: flex;
}

.display-none {
	display: none;
}

iframe {
	width: 100%;

	border-radius: 10px;
	margin: 30px auto 10px;
	padding: 0;
}

#ul-marco {
	width: 95%;
	display: flex;
	flex-direction: row;
	list-style-type: none;
	justify-content: space-around;
	max-width: 700px;
	padding: 0;
	margin: 30px auto;
}

#ul-marco li {
	color: #2d2f2f;
	font-size: 1em;
	padding: 8px;
	margin: 4px;
	font-weight: bold;
	text-align: center;
}

.mpbtn {
	text-align: center;
	margin: 0;
}

#pdf1,
#pdf2,
#pdf3,
#pdf4 {
	width: 100%;
	margin: auto;
	padding: 20px;
	border-radius: 10px;
	height: 100vh;
}

@media (max-width: 1005px) {
	#middle-portfolio {
		width: 95%;
		max-width: none;
	}

	#middle-portfolio h4 {
		font-size: 1em;
	}

	#kpi-container {
		width: 100%;
		max-width: 1100px;
	}

	#bottom-portfolio {
		width: 95%;
		max-width: none;
	}
}

@media (max-width: 850px) {
	#middle-portfolio {
		width: 95%;
		max-width: none;
	}

	#estrategias1 {
		flex-direction: row;
	}

	#e1,
	#e2,
	#e3 {
		display: flex;
		flex-direction: column;
		width: 33%;
		height: 100px;
		justify-content: space-around;
		gap: 5%;
	}

	.mdivs1,
	.mdivs2,
	.mdivs3 {
		width: 90%;
	}

	#bottom-portfolio {
		width: 95%;
		max-width: none;
	}
}

@media (max-width: 450px) {
	#titulo-plataforma {
		font-size: 2em;
	}
}

@media (max-width: 640px) {
	#titulo-plataforma {
		font-size: 2.4em;
	}

	#pkpi1 {
		width: 90px;
		font-size: 2.7em;
	}

	#pkpi2 {
		font-size: 1.2em;
	}

	#mandatos,
	#expectativa,
	#riesgo,
	#estadio,
	#impacto,
	#estrategias,
	#ods {
		width: 97%;
		margin: 5px auto;
		display: flex;
		flex-direction: column;
	}

	#impacto {
		margin-top: 18px;
	}

	#middle-portfolio h4 {
		width: 90%;
		text-align: left;
		margin-bottom: 4px;
	}

	#impact-title {
		width: 90%;
		text-align: left;
		margin-bottom: 0;
		margin-top: 0;
		align-self: initial;
	}



	#bottom-portfolio ul li {
		font-size: 0.8em;
		margin: 4px;
		padding: 8px;
	}

	.pbibtn {
		text-align: center;
	}

	#vc,
	#pe,
	#f {
		font-size: 0.9em;
	}
	#portfolio-title {
		font-size: 1em;
	}
	#middle-portfolio ul li {
		margin: 2px;
		padding: 5px;
	}

	.pbibtn {
		text-align: center;
	}

	#wraper {
		width: 90%;
		display: flex;
		flex-direction: column;
		vertical-align: middle;
		align-items: center;
		justify-content: space-between;
		height: 150px;
		margin-bottom: 40px;
	}

	#kpi-box {
		width: 100%;
	}

	#kpi-icon {
		font-size: 3.2em;
	}

	#kpi-wrapper1 {
		font-size: 1em;
	}

	#kpi-wrapper2 {
		font-size: 1em;
	}
}

@media (min-width: 320px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 240px;
	}
}

@media (min-width: 510px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 275px;
	}
}

@media (min-width: 710px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 430px;
	}
}

@media (min-width: 810px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 480px;
	}
}
@media (min-width: 1010px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 500px;
	}

	#kpi-icon {
		display: block;
	}
}
@media (min-width: 1410px) {
	#fDashboard,
	#peDashboard,
	#vcDashboard {
		height: 550px;
	}
}