.frac {
text-indent:0;
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.001em;
text-align: center;
}
.frac > span {
display: block;
padding: 0.1em;
}
.frac span.bottom {
border-top: thin solid black;
}
.frac span.symbol {
display: none;
} 

@media (max-width: 576px) { 
	.green-border {
		border-top:1px solid #F16573;
		border-left:0px solid #F16573;
	}
}
@media (min-width: 576px) { 
	.green-border {
		border-top:1px solid #F16573;
		border-left:0px solid #F16573;
	}
}
@media (min-width: 768px) { 
	.green-border {
		border-top:0px solid #F16573;
		border-left:1px solid #F16573;
	}
}
@media (min-width: 992px) { 
	.green-border {
		border-top:0px solid #F16573;
		border-left:1px solid #F16573;
	}
}
@media (min-width: 1200px) {
	.green-border {
		border-top:0px solid #F16573;
		border-left:1px solid #F16573;
	}
}		

@media (max-width: 576px) { 
	.blue-border {
		border-top:1px solid #0099CD;
		border-left:0px solid #0099CD;
	}
}
@media (min-width: 576px) { 
	.blue-border {
		border-top:1px solid #0099CD;
		border-left:0px solid #0099CD;
	}
}
@media (min-width: 768px) { 
	.blue-border {
		border-top:0px solid #0099CD;
		border-left:1px solid #0099CD;
	}
}
@media (min-width: 992px) { 
	.blue-border {
		border-top:0px solid #0099CD;
		border-left:1px solid #0099CD;
	}
}
@media (min-width: 1200px) {
	.blue-border {
		border-top:0px solid #0099CD;
		border-left:1px solid #0099CD;
	}
}