.badge:before {

	/* One pixel soldi border around the badge */
	border: 1px solid white;

	/* If rotated 45deg it looks like a diamond... */
	-webkit-transform: rotate(45deg);

	/* ...or it could look like a circle if border-radius applied */
	/* border-radius: 50%; */

	/* do we want a slight glow around the badge? locked badges don't have that anyway */
	/* box-shadow: 0px 0px 5px white; */
}


/* each badge type has a color, if commented out - it will be transparent */
.dreamer:before {
	background-color: #ca7703;
}

.optimist:before {
	background-color: #415f87;
}

.visionary:before {
	background-color: #851f1f;
}

.badge:after {
	font-family: 'FuturaBold';
	font-size: 10px;
	
	letter-spacing: -0.04em;
	color: transparent;
	/* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
}

/* use the lock icon for achievements that are still locked */
.locked .badge:after {
	background-image: url(../assets/lock.svg);
}

.dreamer-2:after {
	/* this can be used to add a label to the badge */
	content: '2x';
	background-image: url(../assets/badges/sample.png);
}

.dreamer-3:after {
	content: '3x';
	background-image: url(../assets/badges/sample.png);
}

/* this way all badges can be implemented, following this pattern: */;

.optimist-10:after {
}

.visionary-200:after {
}