.matchHolder {
	position: relative; 
	top: 150px; 
	height: auto;
	margin: 0 auto; 
	width: 820px;
	background-color: white;
	border-radius: 10px;
	padding: 10px;
	padding-bottom: 300px; 

}

.teamMetricRow, .playerMetricRow {
    display: flex;
    align-items: center;
    margin: 6px 0;
}

.playerMetricRow {
	margin: 0px;
}

.teamValue, .playerValue {
    width: 350px;
    position: relative;
}

.teamValue.home, .playerValue.home, .playerNameMatch.home{
    text-align: right;
}

.teamValue.away, .playerValue.away, .playerNameMatch.away {
    text-align: left;
}

.teamBar, .playerBar {
    border-radius: 10px;
    height: 25px;
    overflow: hidden;
    position: relative;
}

.teamBar-inner, .playerBar-inner {
    align-items: center;
    border-radius: 10px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-size: 12px;
    height: 100%;
    justify-content: flex-end;
    padding: 0 6px;
    transition: width 1000ms ease;
    white-space: nowrap;
    width: 0%;
}

.teamBar-inner span, .playerBar-inner span {
    margin: 0;
    position: static;
}

.teamValue.home .teamBar-inner, .playerValue.home .playerBar-inner{
	justify-content: flex-end;
    position: absolute;
    right: 0;          /* grow LEFT */
}

.teamValue.away .teamBar-inner, .playerValue.away .playerBar-inner {
    justify-content: flex-start;
    position: absolute;
    left: 0;           /* grow RIGHT */
}

.teamBar span, .playerBar span {
    font-size: 12px;
    color: #fff;
    padding: 0 6px;
    white-space: nowrap;
}

.teamBar-left .teamBar-inner, .playerBar-left .playerBar-inner {
    right: 0;   /* home */
    border-radius: 10px;
}

.teamBar-right .teamBar-inner, .playerBar-right .playerBar-inner {
    left: 0;    /* away */
    border-radius: 10px;
}

.teamMetric {
	text-align: center;
    width: 100px;
}

.playerNameMatch {
    width: 225px;
    font-size: 0.8em;
}

.jersey {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically */
    width: 40px;             /* circle diameter */
    height: 30px;
    text-align: center;
}

.jerseyNumber {
	margin-left: 0px;
	margin-top: 0px;
	transform: translate(0px);
}