﻿@import url("https://fonts.googleapis.com/css?family=Inconsolata");

* {
	box-sizing: border-box
}

html {
	font-size: 62.5%
}

body {
	font-size: 1.5em
}

html, body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica", "Arial";
	color: #222
}

h1, h2, h3, h4, h5, h6, p, a, textarea, button, input, blockquote {
	margin: 0;
	padding: 0
}

p, a, ul, li, blockquote {
	font-size: 1.8rem;
	line-height: 1.75
}

p, a {
	display: inline
}

a {
	color: #222;
	transition: .2s
}

	a:hover {
		color: #2e7e99;
		text-decoration: underline
	}

img {
	max-width: 100%
}

blockquote {
	border-left: thick solid #f4f4f7
}

h1 {
	font-size: 5.0rem
}

h2 {
	font-size: 4.2rem
}

h3 {
	font-size: 3.6rem
}

h4 {
	font-size: 3.0rem
}

h5 {
	font-size: 2.4rem
}

h6 {
	font-size: 1.5rem
}

h4, h5, h6 {
	color: grey
}

code, pre {
	font-family: "Inconsolata"
}

p + code {
	display: inline
}

code {
	display: inline;
	max-width: 100%;
	border: 1px solid silver;
	background-color: #f4f4f7;
	padding: 3px;
	opacity: 0.7;
	width: auto
}

button {
	border: 0;
	padding: 10px;
	background-color: #f4f4f7;
	max-width: 100%;
	transition: .2s
}

	button:hover {
		background-color: #e5e5ec;
		cursor: pointer
	}

textarea, input {
	border: 0;
	border-bottom: 2px solid #f4f4f7;
	padding: 10px
}

	textarea:focus, input:focus {
		border-bottom-color: #c8c8d7
	}

textarea {
	appearance: none
}

hr {
	width: 100%;
	border: none;
	border-bottom: 2px solid #f4f4f7
}

table:not(.highlight) {
	width: 100%;
	border-collapse: collapse
}

	table:not(.highlight) * {
		font-size: 1.8rem;
		line-height: 1.75
	}

	table:not(.highlight) th, table:not(.highlight) td {
		border-collapse: collapse;
		border-bottom: 1px solid #d6d6e2
	}

.container {
	width: 80vw;
	padding: 30px;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

@media only screen and (max-width: 720px) {
	.container {
		min-width: 95vw;
		padding: 10px !important
	}
}

.row {
	display: flex;
	flex-flow: row
}

	.row div:not(:only-of-type):first-child {
		margin-left: 0
	}

	.row div:not(:only-of-type):last-child {
		margin-right: 0
	}

.column {
	display: flex;
	flex-flow: column
}

	.container:after, .row:after, .column:after {
		content: "";
		display: table;
		clear: both
	}

.half {
	width: 50%
}

.third {
	width: 33.33333%
}

.two-thirds {
	width: 66.66666%
}

.full {
	width: 100%
}

.col-1 {
	width: 8.3333333333%
}

.col-2 {
	width: 16.6666666667%
}

.col-3 {
	width: 25%
}

.col-4 {
	width: 33.3333333333%
}

.col-5 {
	width: 41.6666666667%
}

.col-6 {
	width: 50%
}

.col-7 {
	width: 58.3333333333%
}

.col-8 {
	width: 66.6666666667%
}

.col-9 {
	width: 75%
}

.col-10 {
	width: 83.3333333333%
}

.col-11 {
	width: 91.6666666667%
}

.col-12 {
	width: 100%
}

@media only screen and (max-width: 720px) {
	.row {
		flex-wrap: wrap
	}

	.half:not(.nr), .third:not(.nr), .two-thirds:not(.nr), .half:not(.nr), .full:not(.nr) {
		min-width: 100%;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-1:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-2:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-3:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-4:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-5:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-6:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-7:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-8:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-9:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-10:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-11:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}

	.col-12:not(.nr) {
		min-width: 100%;
		margin: 0 0 15px 0;
		margin-bottom: 15px;
		margin-left: 0 !important;
		margin-right: 0 !important
	}
}

@media only screen and (min-width: 1200px) {
	.hod {
		display: none !important
	}
}

@media only screen and (max-width: 1200px) {
	.hol {
		display: none !important
	}
}

@media only screen and (max-width: 720px) {
	.hom {
		display: none !important
	}
}

.sod {
	display: none
}

@media only screen and (min-width: 1200px) {
	.sod {
		display: initial
	}
}

.sol {
	display: none
}

@media only screen and (max-width: 1200px) {
	.sol {
		display: initial
	}
}

.som {
	display: none
}

@media only screen and (max-width: 720px) {
	.som {
		display: initial
	}
}

.vcenter {
	display: flex;
	align-items: center
}

.hcenter {
	display: flex;
	justify-content: center
}

.s_round, button {
	border-radius: 2px
}

.m_round, code {
	border-radius: 4px
}

.l_round {
	border-radius: 8px
}

.s_shadow {
	box-shadow: 0 1px 3px rgba(0,0,0,0.02),0 1px 2px rgba(0,0,0,0.14)
}

.m_shadow {
	box-shadow: 0 3px 6px rgba(0,0,0,0.06),0 3px 6px rgba(0,0,0,0.13)
}

.l_shadow {
	box-shadow: 0 10px 20px rgba(0,0,0,0.09),0 6px 6px rgba(0,0,0,0.13)
}

.s_vs {
	margin-top: 10px;
	margin-bottom: 10px
}

.m_vs, blockquote, hr, .preview {
	margin-top: 15px;
	margin-bottom: 15px
}

.l_vs {
	margin-top: 30px;
	margin-bottom: 30px
}

.s_hs {
	margin-left: 10px;
	margin-right: 10px
}

.m_hs {
	margin-left: 15px;
	margin-right: 15px
}

.l_hs {
	margin-left: 30px;
	margin-right: 30px
}

.s_p, table:not(.highlight) * {
	padding: 10px
}

.m_p, blockquote, .preview {
	padding: 15px
}

.l_p {
	padding: 30px
}

.nm, table:not(.highlight) th, table:not(.highlight) td {
	margin: 0
}

.np {
	padding: 0
}

.fh {
	flex: 1
}

.bl {
	align-items: baseline
}

.mono {
	font-family: "Inconsolata"
}

.ib {
	display: inline-block
}

.circle {
	border-radius: 50%
}

.blur_container {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%
}

	.blur_container * {
		z-index: 1;
		position: relative
	}

.blur_content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform: scale(1.1);
	filter: blur(4px)
}

	.blur_content * {
		min-width: 100%
	}

.pull-left {
	align-self: flex-start;
	margin-right: auto
}

.pull-right {
	align-self: flex-end;
	margin-left: auto
}

.material-icons.s {
	font-size: 100%
}

.material-icons.m {
	font-size: 300%
}

.material-icons.l {
	font-size: 400%
}

.b, table:not(.highlight) thead * {
	font-weight: 800
}

.i {
	font-style: italic
}

.u {
	text-decoration: underline
}

.lt {
	text-decoration: line-through
}

.tac {
	text-align: center
}

.tal, table:not(.highlight) * {
	text-align: left
}

.tar {
	text-align: right
}

.preview {
	border-left: thick solid lightblue
}

.aw {
	width: auto
}

.pop-out {
	margin-left: -30px;
	margin-right: -30px
}

@media only screen and (max-width: 720px) {
	.pop-out {
		margin-left: -10px;
		margin-right: -10px
	}
}
/*# sourceMappingURL=elk.min.css.map */
