#kpis {}
@media (min-width: 900px)	 { #kpis { margin-top: 30px; } }
@media (max-width: 899.99px) { #kpis { margin-top: 25px; } }

/*--------------------------------------------------------------------------------------*/

#kpis > .content-wrapper {}

/*--------------------------------------------------------------------------------------*/

#kpis > .content-wrapper > .cards {
    display: grid;
    grid-auto-rows: 1fr;
}
@media (min-width: 1000px)	 { #kpis > .content-wrapper > .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 999.99px) {
	@media (min-width: 600px)	 { #kpis > .content-wrapper > .cards { grid-template-columns: repeat(2, 1fr); } }
	@media (max-width: 599.99px) { #kpis > .content-wrapper > .cards { grid-template-columns: repeat(1, 1fr); } }
}
@media (min-width: 900px)	 { #kpis > .content-wrapper > .cards { gap: 30px; } }
@media (max-width: 899.99px) { #kpis > .content-wrapper > .cards { gap: 25px; } }
#kpis > .content-wrapper > .cards > .card {
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	
    text-align: center;
}

/*--------------------------------------------------------------------------------------*/

#kpis > .content-wrapper > .cards > .card.title {
	background-color: #FF640B;
	
	text-transform: uppercase;
	font-family: 'Stretch Pro';
	font-size: 20px;
	color: #FFF;
}

/*--------------------------------------------------------------------------------------*/

#kpis > .content-wrapper > .cards > .card.kpi {}
#kpis > .content-wrapper > .cards > .card.kpi > .icon {
	position: relative;
	width: 85px; height: 85px; overflow: hidden;
	margin: 0 auto 25px;
	
	background-color: #E2E2E2;
	border-radius: 50%;
}
#kpis > .content-wrapper > .cards > .card.kpi > .icon > img {
	height: 100%; width: 100%;
	padding: 20px;
	
	object-fit: contain;
	object-position: center;
}
#kpis > .content-wrapper > .cards > .card.kpi > .value {
	margin-bottom: 10px;
	
	text-transform: uppercase;
	font-family: 'Stretch Pro';
	font-weight: 700;
	font-style: italic;
}
#kpis > .content-wrapper > .cards > .card.kpi > .description {
	line-height: 20px;
	font-size: 14px;
}
@media (min-width: 900px)	 { #kpis > .content-wrapper > .cards > .card.kpi > .value { font-size: 30px; } }
@media (max-width: 899.99px) { #kpis > .content-wrapper > .cards > .card.kpi > .value { font-size: 20px; } }