html,
body {
	font-size: 14px !important;
}
h1 {
	font-size: 1.602em;
}
h2 {
	font-size: 1.424em;
}
h3 {
	font-size: 1.266em;
}
h4 {
	font-size: 1.125em;
}
h5 {
	font-size: 0.889em;
}
h6 {
	font-size: 0.79em;
}
.display-1 {
	font-size: 3.906em;
}
.display-2 {
	font-size: 3.125em;
}
.display-3 {
	font-size: 2.5em;
}
.display-4 {
	font-size: 2em;
}

// Medium devices (tablets, 48em and up)
// 
// At this point you have overridden Bootstraps rem's and are
// into module based font sizes should you require it. 
//
// I took a while over this change because I felt that there
// is no reason why I cant use a modified scale on another 
// device size. So I did, the headings have now taken on
// "Perfect Fourth" and the dislpay-* has been put to the
// Bootstrap defaults.
//
//------------------------------------------------------------//
@media (min-width: 48em) {
	h1 {
	  font-size: 2.441em;
	}
	h2 {
		font-size: 1.953em;
	}
	h3 {
		font-size: 1.563em;
	}
	h4 {
		font-size: 1.25em;
	}
	.display-1 {
		font-size: 6em;
	}
	.display-2 {
		font-size: 5.5em;
	}
	.display-3 {
		font-size: 4.5em;
	}
	.display-4 {
		font-size: 3.5em;
	}
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) {
	html,
	body {
		font-size: 16px !important;
	}
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) {
	html,
	body {
		font-size: 18px !important;
	}
}

// Pen Specific Styles
.jumbotron {
	font-size: 16px;
	@media (min-width: 62em) {
		font-size: 20px;
	}
	h1 {
		border-bottom: 4px solid #0275d8;
	}
	p.lead {
		border-radius: 4px;
	}
}