.container {

	header {
		margin: calc(2rem * #{$lineHeight}) auto;
	}

	.content section,
	.content article {
		> * {
			margin-top: 0;
			margin-bottom: calc(1rem * #{$lineHeight});

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	///////////////////////////HEADERS///////////////////////////
	h1, h2, h3, h4, h5, h6 {
		color: rgba($primary, 0.8);
		font-weight: 400;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	h1 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h1;
		line-height: calc(3rem * #{$lineHeight});
	}

	h2 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h2;
		line-height: calc(3rem * #{$lineHeight});
	}

	h3 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h3;
		line-height: calc(2rem * #{$lineHeight});
	}

	h4 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h4;
		line-height: calc(2rem * #{$lineHeight});
	}

	h5 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h5;
		line-height: calc(2rem * #{$lineHeight});
	}

	h6 {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h6;
		line-height: calc(1rem * #{$lineHeight});
	}

	///////////////////////////BODY///////////////////////////
	p:not([class]),
	li {
		font-family: $font-secondary;
		font-weight: 400;
		font-size: $font-p;
		line-height: calc(1rem * #{$lineHeight});
		color: rgba($primary, 0.8);
	}

	small {
		display: inline-block;
		font-family: $font-primary;
		font-weight: 600;
		font-size: $font-small;
		line-height: calc(1rem * #{$lineHeight});
		color: rgba($primary, 0.4);
		margin-bottom: calc(1rem * #{$lineHeight});
		span {
			color: rgba($primary, 0.6);
		}
	}
	///////////////////////////LISTs///////////////////////////
	ul:not(.dropdown-menu):not(.radio-group):not(.checklist),
	ol:not(.dropdown-menu):not(.radio-group):not(.checklist) {
		list-style: none;
		padding: 0;
		margin-left: 2rem;
	}

	ul:not(.dropdown-menu):not(.radio-group):not(.checklist) li {
		position: relative;
	}

	ul:not(.dropdown-menu):not(.radio-group):not(.checklist) li:before {
		font-family: $font-primary;
		font-weight: 700;
		display: inline-block;
		content: '\2022';
		width: 2rem;
		position: absolute;
		left: -1.5rem;
	}

	ul.checklist {
		list-style: none;
		padding: 0;
		margin-left: 0;
	}

	ul.checklist li:before {
		color: $accent;
		content: "\E017";
		display: inline-block;
		font-family: "icon-16";
		font-size: 16px;
		left: 0;
		position: relative;
		top: 2px;
		width: 2rem;
	}

	ol li {
		counter-increment: list;
		position: relative;
	}

	ol li:before {
		font-family: $font-primary;
		font-weight: 700;
		color: inherit;
		display: inline-block;
		content: counter(list) ".";
		width: 2rem;
		text-align: left;
		position: absolute;
		left: -2rem;
	}
	///////////////////////////LINK///////////////////////////
	a:not([class]) {
		@include anim(color);
		font-family: inherit;
		font-size: inherit;
		border-bottom: 1px dashed rgba($primary, 0.4);
		color: $accent;

		&:hover,
		&:focus {
			border-color: $accent;
			color: rgba($accent, 0.6);
		}
	}
	///////////////////////////CODE///////////////////////////
	code {
		background: rgba($primary, 0.1);
		display: inline-block;
		font-family: $font-mono;
		font-size: $font-small;
		line-height: cacl(1rem * #{$lineHeight});
		padding: 0 4px;
		color: inherit;
	}
	///////////////////////////WORDs///////////////////////////
	strong {
		font-family: inherit;
		font-size: inherit;
		font-weight: 700;
	}

	em {
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		font-style: italic;
	}

	strike {
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		text-decoration: line-through;
	}
	///////////////////////////BLOCKQUOTE///////////////////////////
	blockquote,
	blockquote p:not([class]) {
		font-family: $font-primary;
		font-weight: 700;
		font-size: $font-h4;
		line-height: calc(2rem * #{$lineHeight});
		color: rgba($primary, 0.8);
		border: 0px;
		padding: 0;
	}

	blockquote p {
		padding: 0px;
	}

	blockquote::before {
		content: '\201C';
		color: rgba($primary, 0.4);
		display: block;
		width: 2.5rem;
		text-align: left;
	}

	blockquote::after {
		position: relative;
		content: '\201D';
		color: rgba($primary, 0.4);
		display: block;
		width: 2.5rem;
		text-align: left;
		top: 1rem;
	}

	///////////////////////////FIGURE///////////////////////////
	figure {
		width: 100%;
		text-align: center;
		padding: calc(0.5rem * #{$lineHeight}) 0;

		img {
			display: block;
			width: calc(100% + 5rem);
			position: relative;
			left: -2.5rem;
			border-radius: 0;
			@media (min-width: 600px) {
				border-radius: 4px;
			}

			&.original-size {
				width: auto;
				max-width: 100%;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		figcaption {
			color: rgba($primary, 0.4);
			font-family: $font-secondary;
			font-weight: 400;
			font-size: $font-small;
			line-height: calc(1rem * #{$lineHeight});
			text-align: center;
			margin-top: 0.5rem;
		}
	}

	///////////////////////////RADIO///////////////////////////
	ul.radio-group {
		list-style: none;
		padding: 0;
		margin-left: 0;
	}

	ul.radio-group * {
		position: relative;
	}

	ul.radio-group *:before {
		content: "";
	}

	ul.radio-group * label {
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		cursor: pointer;
		padding-left: 2rem;
		margin: 0;
		top: 0;
	}

	ul.radio-group * input[type="radio"] {
		display: none;
	}

	ul.radio-group * input[type="radio"] + label:before {
		@include anim(all);
		color: rgba($primary, 0.8);
		content: "\E059";
		font-family: 'icon-16';
		font-size: 16px;
		position: absolute;
		left: 0;
	}

	ul.radio-group * input[type="radio"]:checked + label:before {
		content: "\E058";
		color: $accent;
	}

	///////////////////////////CARD///////////////////////////
	.card {
		box-shadow: 0 2px 12px rgba($primary, 0.12);
		border-radius: 4px;
		max-width: calc(34rem + 5rem);
		padding: calc(2rem * #{$lineHeight});
		margin: 0 auto;
	}

	///////////////////////////ASIDE///////////////////////////
	.aside {
		padding: calc(1rem * #{$lineHeight});
		background: rgba($primary, 0.05);
		border-radius: 4px;

		> * {
			margin-top: 0;
			margin-bottom: calc(1rem * #{$lineHeight});

			&:last-child {
				margin-bottom: 0;
			}
		}

		p {
			font-size: $font-small;
		}

		h4 {
			font-size: $font-h5;
		}

		ul.radio-group li label {
			font-size: $font-small;
			padding-left: 2rem;
		}
	}
	///////////////////////////TABLE///////////////////////////
	.content .table {
		border-collapse: collapse;
	}

	.content .table.block {
		width: 100%;
	}

	.content .table.fixed {
		table-layout: fixed;
	}

	.content .table thead tr {
		background: rgba($primary, 0.05);
	}

	.content .table tbody tr {
		&:nth-child(odd) {
			background: rgba($primary, 0.02);
		}
		&:nth-child(even) {
			background: rgba($primary, 0.05);
		}
	}

	.content .table tr th,
	.content .table tr td {
		border-width: 0px;
		font-size: $font-small;
		line-height: calc(1rem * #{$lineHeight});
		padding: calc(0.5rem * #{$lineHeight}) calc(1rem * #{$lineHeight});
		vertical-align: top;
		height: calc(2rem * #{$lineHeight});
	}

	///////////////////////////BUTTON///////////////////////////
	.content .btn {
		@include anim(none);
		font-size: $font-small;
		padding: 0 calc(1rem * #{$lineHeight});
		margin-bottom: 1rem;
		margin-right: 1rem;
		height: calc(2rem * #{$lineHeight});
		line-height: calc(1rem * #{$lineHeight});

		&:last-child {
			margin-right: 0;
		}

		@media(min-width: 600px) {
			margin-bottom: 0;
		}
	}

	.content .btn.btn-inverse-accent {
		background: rgba($primary, 0.1);
		color: rgba($primary, 0.8);
		&:focus,
		&:hover {
			background: rgba($primary, 0.2);
		}
	}

}