/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
html, 
body {
	height: 100%;
}

body,
button,
input,
select,
textarea {
	background: $color-white;
	color: $color-text-body;
	font-family: $font-sans;
	font-size: rem(18);
	font-weight: 300;
	line-height: $line-height-body;
}

// Headers

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

h1 {
	font-family: $font-serif;
	font-size: rem(30);
	color: $brand-color;
	font-weight: 300;
	margin: 0;
	padding: 0 0 rem(20);
	text-transform: uppercase;
	line-height: rem(21);
}

h2 {
	font-family: $font-serif;
	font-weight: 300;
	color: #4c4c4c;
	font-size: 26px;
	line-height: 1.31;
}

h3 {
	margin: 0 0 rem16;
	font-size: rem(24);
	line-height: rem(32);
}

h4 {
	margin: 0 0 rem(17);
	font-size: rem(22);
	line-height: rem(26);
}

h5 {
	margin: 0 0 rem(21);
	font-size: rem(18);
	line-height: rem(21);
}

h6 {
	margin: 0 0 rem(24);
	font-size: rem(16);
	line-height: rem(24);
}

// Copy

p {
	margin: 0 0 rem(20);
}

b,
strong {
	font-weight: 700;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote,
q {
	margin: 0 rem(24);
	quotes: "" "";

	&:before,
	&:after {
		content: "";
	}
}

blockquote {
	font-size: rem(22);
	padding-left: rem(24);
	margin: 0 auto;
	border-left: rem(2)  solid $color-lighter-gray;
	font-family: $font-serif;
}

address {
	margin: 0 0 rem(24) 0;
}

pre {
	background: $color-background-pre;
	font-family: $font-pre;
	font-size: rem(15);
	line-height: $line-height-pre;
	margin: 0 0 rem(24);
	max-width: 100%;
	overflow: auto;
	padding: rem(24);
}

code,
kbd,
tt,
var {
	font-family: $font-code;
	font-size: rem(15);
}

abbr,
acronym {
	border-bottom: 1px dotted $color-border-abbr;
	cursor: help;
}

mark,
ins {
	background: $color-background-ins;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}