@media (min-width: 320px) {
	.container .jumbotron, 
	.container-fluid .jumbotron {
		padding-left: 20px;
		padding-right: 20px;
	}
	.circle {
		width: 65px;
		height: 65px;
	}
	.circleBox img {
		width: 65px;
		height: 65px;
	}
	.circleBox .circleText {
		font-size: 75%;
	}
	.heroAbilities img {
		padding: 0px 6px 0px;
	}
	.abilitiesTable tbody tr td {
		font-size: 80%
	}
	span.abilityTableTitle {
		font-size: 28px;
		position: relative;
		top: 8px;
	}
}

@media (min-width: 480px) {
	.container .jumbotron, 
	.container-fluid .jumbotron {
		padding-left: 20px;
		padding-right: 20px;
	}
	.circle {
		width: 80px;
		height: 80px;
	}
	.circleBox img {
		width: 80px;
		height: 80px;
	}
	.circleBox .circleText {
		font-size: 80%;
	}
	.heroAbilities img {
		padding: 0px 12px 0px;
	}
	.abilitiesTable tbody tr td {
		font-size: 90%
	}
	span.abilityTableTitle {
		font-size: 34px;
		position: relative;
		top: 10px;
	}
}

@media (min-width: 768px) {
	.container .jumbotron, 
	.container-fluid .jumbotron {
		padding-left: 20px;
		padding-right: 20px;
	}
	.circleBox .circleText {
		font-size: 80%;
	}
	.heroAbilities img {
		padding: 0px 12px 0px;
	}
	.abilitiesTable tbody tr td {
		font-size: 100%
	}
	span.abilityTableTitle {
		font-size: 36px;
		position: relative;
		top: 10px;
	}
}