// @import url(http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,700,700italic);

*,
*:after,
*:before {
	box-sizing: border-box;
}

@-ms-viewport {
	width: device-width;
}

// basic
	article,
	aside,
	footer,
	header,
	nav,
	section {
		display: block;
	}

	audio {
		display: inline-block;
		max-width: 100%;
		vertical-align: baseline;
	}

	body {
		background-color: $white-bg-light;
		background-image: none;
		color: $black-text;
		font-family: $font-fam;
		font-size: $font-size;
		font-weight: $font-weight;
		line-height: $line-height;
		margin: 0;
		padding: 0;
		-webkit-font-smoothing: subpixel-antialiased;
	}

	html {
		font-family: sans-serif;
		font-size: 100%;
		min-height: 100%;
		position: relative;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-text-size-adjust: 100%;
		    -ms-text-size-adjust: 100%;
	}

	svg:not(:root) {
		overflow: hidden;
	}

	template,
	[hidden] {
		display: none;
	}

	video {
		display: block;
		max-width: 100%;
	}

// form
	button,
	input,
	optgroup,
	select,
	textarea {
		color: inherit;
		font: inherit;
		margin: 0;
	}

	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		cursor: pointer;
		-webkit-appearance: button;
	}

	button,
	select {
		text-transform: none;
	}

	button {
		overflow: visible;
	}

	button[disabled],
	input[disabled] {
		cursor: default;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	fieldset {
		border: 0;
		margin: 0;
		min-width: 0;
		padding: 0;
		& ~ fieldset {
			margin-top: $line-height;
		}
	}

	input {
		line-height: normal;
	}

	input[type="checkbox"],
	input[type="radio"] {
		line-height: normal;
		margin: 4px 0 0;
		margin-top: 1px \9;
		padding: 0;
	}

	input[type="color"] {
		min-width: $line-height;
		width: auto;
	}

	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"] {
		line-height: $line-height;
		line-height: 1 #{\0};
	}

	input[type="file"] {
		display: block;
		height: auto;
		line-height: 1;
		min-height: $input-height;
		padding-top: (($input-height - $line-height) / 2);
		padding-bottom: (($input-height - $line-height) / 2);
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		height: auto;
	}

	input[type="range"] {
		display: block;
		height: $input-height;
		width: 100%;
	}

	input[type="search"] {
		box-sizing: border-box;
		-webkit-appearance: none;
	}

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	label {
		display: inline-block;
		font-weight: $font-weight;
		margin: 0;
		max-width: 100%;
	}

	legend {
		border: 0;
		color: $black-text;
		display: block;
		font-size: $font-size-h3;
		font-weight: $font-weight;
		line-height: $line-height-h3;
		margin: 0 0 $line-height;
		padding: 0;
		width: 100%;
	}

	optgroup {
		font-weight: $font-weight-bold;
	}

	select[multiple],
	select[size] {
		height: auto;
	}

	textarea {
		overflow: auto;
	}

// text
	a {
		background-color: transparent;
		background-image: none;
		color: $link-color;
		text-decoration: none;
		&:focus,
		&:hover {
			color: $link-color-hover;
			outline: 0;
			text-decoration: underline;
		}
	}

	abbr {
		border-bottom: 1px dotted $black-hint;
		cursor: help;
	}

	address {
		font-size: $font-size;
		font-style: normal;
		font-weight: $font-weight;
		line-height: $line-height;
		margin: $line-height 0;
	}

	b,
	strong {
		font-weight: $font-weight-bold;
	}

	blockquote,
	q {
		font-size: $font-size-h4;
		font-style: italic;
		font-weight: $font-weight-light;
		line-height: $line-height-h4;
		margin: ($line-height * 1.5) 0;
		padding-right: ($grid-gutter * 2);
		padding-left: ($grid-gutter * 2);
		position: relative;
		&:after,
		&:before {
			color: $brand-color;
			display: block;
			font-size: $font-size-h1;
			font-weight: $font-weight-bold;
			line-height: 0;
			position: absolute;
				top: 0;
		}
		&:after {
			content: close-quote;
			// position
				right: 0;
		}
		&:before {
			border-right: 1px solid $brand-color-light;
			content: open-quote;
			// position
				bottom: 0;
				left: 0;
			width: ($grid-gutter / 2);
		}
	}

	dd,
	dt,
	li {
		line-height: $line-height;
	}

	dd {
		margin: 0;
	}

	dl {
		margin: $line-height 0;
	}

	dt {
		font-weight: $font-weight-bold;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 {
		color: inherit;
		font-family: $font-fam;
		font-weight: $font-weight-bold;
		margin-top: ($line-height * 2);
		margin-bottom: $line-height;
	}

	h1,
	.h1 {
		font-size: $font-size-h1;
		line-height: $line-height-h1;
	}

	h2,
	.h2 {
		font-size: $font-size-h2;
		line-height: $line-height-h2;
	}

	h3,
	.h3 {
		font-size: $font-size-h3;
		line-height: $line-height-h3;
	}

	h4,
	.h4 {
		font-size: $font-size-h4;
		line-height: $line-height-h4;
	}

	h5,
	.h5 {
		font-size: $font-size-h5;
		line-height: $line-height-h5;
	}

	h6,
	.h6 {
		font-size: $font-size-h6;
		line-height: $line-height-h6;
	}

	h1,
	h2,
	h3,
	h4,
	.h1,
	.h2,
	.h3,
	.h4 {
		small {
			font-size: $font-size;
			font-weight: $font-weight;
		}
	}

	hr,
	.hr {
		border: 0;
		border-top: 1px solid $black-hint;
		box-sizing: content-box;
		display: block;
		height: 0;
		margin-top: $line-height;
		margin-bottom: $line-height;
	}

	img {
		border: 0;
		vertical-align: middle;
	}

	ol,
	ul {
		margin: $line-height 0;
		padding: 0 0 0 ($grid-gutter * 2);
		ol,
		ul {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	p {
		margin: $line-height 0;
	}

	small {
		font-size: 75%;
		line-height: 1;
	}

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

	sub {
		// position
			bottom: -0.25em;
	}

	sup {
		// position
			top: -0.5em;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	td,
	th {
		padding: 0;
	}

	th {
		text-align: left;
	}