/* infographic styles for all designs */	
.infographic-comp {padding: 20px 20px;margin-bottom: 15px;margin-top:15px;text-align: center; border-radius: 10px;}	
.infographic-number.dollar::before {content: "\0024";}
.infographic-number.percent::after {content: "\0025";}
.infographic-number.minus::before {content: "\002D;";}
.infographic-number.plus::after {content: "\002B";}	
a.infoglink {color: #000;text-decoration: none; }
.infographic-comp > .infographic-headline {
    font-size: 21px;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 700;
    line-height: 25px;
}	
.infographic-comp > .countwrap {
	font-size: 45px;
	font-weight:800;
    font-family: 'Roboto', arial, sans-serif;
}		
.infographic-comp > .infographic-desc {
    margin-top: 5px;
}	
.infographic-comp.design1.middlepos, .infographic-comp.design2.middlepos, .infographic-comp.design3.middlepos, .infographic-comp.design4.middlepos, .infographic-comp.design5.middlepos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}			
/* ---------design1----------- */
.infographic-comp.design1 > .countwrap {
    /*color:#ffc423;*/
	color:#002a5c;
	text-shadow: none;
}										
.infographic-comp.design1 > .infographic-media i {
    color: #79bde9;
}						
/* ---------design3  Black----------- */
.infographic-comp.design3 {background-color: black;}	
			
.infographic-comp.design3 > .countwrap {
    color:#ffc423;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}						
.infographic-comp.design3 > .infographic-headline, .infographic-comp.design3 > .infographic-desc {
	color:white;
}					
.infographic-comp.design3 > .infographic-media i {
    color: #79bde9;
}			
/* ---------design4 Dark Blue----------- */
.infographic-comp.design4 {background-color: #002a5c;}	
			
.infographic-comp.design4 > .countwrap {
    color:#ffc423;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}						
.infographic-comp.design4 > .infographic-headline, .infographic-comp.design4 > .infographic-desc, .infographic-comp.design4 > .infographic-media i {
	color: #ffffff;
}												
/* ---------design2----------- */	
.infographic-comp.design2 {
    box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
}		
.infographic-comp.design2 > .countwrap {
    color:#002a5c;
	text-shadow: none;
}										
.infographic-comp.design2 > .infographic-media i {
    color: #79bde9;
}							
@media (max-width: 991px) {

.infographic-comp > .infographic-headline {
    font-size: 20px;}

.infographic-comp > .countwrap {
    font-size: 40px;}

.infographic-comp > .fa-5x {
    font-size: 4em;
}
}