/* Layout */
* {	
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	padding: 0;
	text-align: left;
}
body * { position: relative; }

.width-1 { width: calc(60rem / 12 * 1); }
.width-2 { width: calc(60rem / 12 * 2); }
.width-3 { width: calc(60rem / 12 * 3); }
.width-4 { width: calc(60rem / 12 * 4); }
.width-5 { width: calc(60rem / 12 * 5); }
.width-6 { width: calc(60rem / 12 * 6); }
.width-7 { width: calc(60rem / 12 * 7); }
.width-8 { width: calc(60rem / 12 * 8); }
.width-9 { width: calc(60rem / 12 * 9); }
.width-10 { width: calc(60rem / 12 * 10); }
.width-11 { width: calc(60rem / 12 * 11); }
.width-12 { width: calc(60rem / 12 * 12); }

.max-width-1 { max-width: calc(60rem / 12 * 1); }
.max-width-2 { max-width: calc(60rem / 12 * 2); }
.max-width-3 { max-width: calc(60rem / 12 * 3); }
.max-width-4 { max-width: calc(60rem / 12 * 4); }
.max-width-5 { max-width: calc(60rem / 12 * 5); }
.max-width-6 { max-width: calc(60rem / 12 * 6); }
.max-width-7 { max-width: calc(60rem / 12 * 7); }
.max-width-8 { max-width: calc(60rem / 12 * 8); }
.max-width-9 { max-width: calc(60rem / 12 * 9); }
.max-width-10 { max-width: calc(60rem / 12 * 10); }
.max-width-11 { max-width: calc(60rem / 12 * 11); }
.max-width-12 { max-width: calc(60rem / 12 * 12); }

.basis-1 { flex-basis: calc(60rem / 12 * 1); }
.basis-2 { flex-basis: calc(60rem / 12 * 2); }
.basis-3 { flex-basis: calc(60rem / 12 * 3); }
.basis-4 { flex-basis: calc(60rem / 12 * 4); }
.basis-5 { flex-basis: calc(60rem / 12 * 5); }
.basis-6 { flex-basis: calc(60rem / 12 * 6); }
.basis-7 { flex-basis: calc(60rem / 12 * 7); }
.basis-8 { flex-basis: calc(60rem / 12 * 8); }
.basis-9 { flex-basis: calc(60rem / 12 * 9); }
.basis-10 { flex-basis: calc(60rem / 12 * 10); }
.basis-11 { flex-basis: calc(60rem / 12 * 11); }
.basis-12 { flex-basis: calc(60rem / 12 * 12); }

[class*="flex"] { display: flex; }
[class*="flex"][class*="-wrap"] { flex-wrap: wrap; }
[class*="flex"][class*="-wrap-reverse"] { flex-wrap: wrap-reverse; }
[class*="flex"][class*="-row"] { flex-direction: row; }
[class*="flex"][class*="-row-reverse"] { flex-direction: row-reverse; }
[class*="flex"][class*="-column"] { flex-direction: column; }
[class*="flex"][class*="-column-reverse"] { flex-direction: column-reverse; }
[class*="flex"][class*="-x-between"] { justify-content: space-between; }
[class*="flex"][class*="-x-around"] { justify-content: space-around; }
[class*="flex"][class*="-xi-start"] { justify-items: flex-start; }
[class*="flex"][class*="-xi-center"] { justify-items: center; }
[class*="flex"][class*="-xi-end"] { justify-items: flex-end; }
[class*="flex"][class*="-xi-stretch"] { justify-items: stretch; }
[class*="flex"][class*="-xc-start"] { justify-content: flex-start; }
[class*="flex"][class*="-xc-center"] { justify-content: center; }
[class*="flex"][class*="-xc-end"] { justify-content: flex-end; }
[class*="flex"][class*="-xc-stretch"] { justify-content: stretch; }
[class*="flex"][class*="-y-between"] { align-content: space-between; }
[class*="flex"][class*="-y-around"] { align-content: space-around; }
[class*="flex"][class*="-yi-start"] { align-items: flex-start; }
[class*="flex"][class*="-yi-center"] { align-items: center; }
[class*="flex"][class*="-yi-end"] { align-items: flex-end; }
[class*="flex"][class*="-yi-stretch"] { align-items: stretch; }
[class*="flex"][class*="-yc-start"] { align-content: flex-start; }
[class*="flex"][class*="-yc-center"] { align-content: center; }
[class*="flex"][class*="-yc-end"] { align-content: flex-end; }
[class*="flex"][class*="-yc-stretch"] { align-content: stretch; }
[class*="flex"] > *{
	min-width: 0;
	min-height: 0;
}

.align-start { align-self: flex-start; }
.align-center { align-self: center; }
.align-end { align-self: flex-end; }
.align-stretch { align-self: stretch; }

.width-full { width: 100%; }
.width-none { width: 0; }
.width-full-margin { width: calc(100% - 1rem); }

.grow-full { flex-grow: 1; }
.grow-none { flex-grow: 0; }

.shrink-full { flex-shrink: 1; }
.shrink-none { flex-shrink: 0; }

/* Content Layout */
.relative { position: relative; }
.absolute { position: absolute; }

.left { left: 0; }
.top { top: 0; }
.right { right: 0; }
.bottom { bottom: 0; }

.visible { visibility: visible }
.hidden { visibility: hidden; }
.display-none { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block {
	display: inline-block;
	vertical-align: top;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.vertical-top { vertical-align: top; }
.vertical-middle { vertical-align: middle; }
.vertical-bottom { vertical-align: bottom; }

.float-left {
	float: left;
	margin-left: 0;
	margin-right: .5rem;
}
.float-right {
	float: right;
	margin-left: .5rem;
	margin-right: 0;
}

.margin { margin: calc(1rem / 2); }
.margin-none { margin: 0; }
.margin-left-none,.margin-x-none { margin-left: 0; }
.margin-right-none,.margin-x-none { margin-right: 0; }
.margin-top-none,.margin-y-none { margin-top: 0; }
.margin-bottom-none,.margin-y-none { margin-bottom: 0; }
.margin-left-auto { margin-left: auto; }
.margin-right-auto { margin-right: auto; }
.margin-x-auto { margin-left: auto; }
.margin-x-auto { margin-right: auto; }
.margin-left,.margin-x { margin-left: calc(1rem / 2); }
.margin-right,.margin-x { margin-right: calc(1rem / 2); }
.margin-top,.margin-y { margin-top: calc(1rem / 2); }
.margin-bottom,.margin-y { margin-bottom: calc(1rem / 2); }

.padding { padding: calc(1rem / 2); }
.padding-none { padding: 0; }
.padding-left-none,.padding-x-none { padding-left: 0; }
.padding-right-none,.padding-x-none { padding-right: 0; }
.padding-top-none,.padding-y-none { padding-top: 0; }
.padding-bottom-none,.padding-y-none { padding-bottom: 0; }
.padding-left-auto { padding-left: auto; }
.padding-right-auto { padding-right: auto; }
.padding-x-auto { padding-left: auto; }
.padding-x-auto { padding-right: auto; }
.padding-left,.padding-x { padding-left: calc(1rem / 2); }
.padding-right,.padding-x { padding-right: calc(1rem / 2); }
.padding-top,.padding-y { padding-top: calc(1rem / 2); }
.padding-bottom,.padding-y { padding-bottom: calc(1rem / 2); }

.scroll-x-scroll { overflow-x: scroll; }
.scroll-y-scroll { overflow-y: scroll; }
.scroll-scroll { overflow: scroll; }
.scroll-x-hidden { overflow-x: hidden; }
.scroll-y-hidden { overflow-y: hidden; }
.scroll-hidden { overflow: hidden; }
.scroll-x-auto { overflow-x: auto; }
.scroll-y-auto { overflow-y: auto; }
.scroll-auto { overflow: auto; }

.nowrap { white-space: nowrap; }

h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,label,figure {
	display: block;
	padding: calc(1rem / 2);
}
@supports (-ms-accelerator:true) { label { display: table; } }
output {
	display: block;
	line-height: 1.5rem;
	min-height: 2.625rem;
}

hr,input,select,textarea,output,button,table { margin: calc(1rem / 2); }
input:not([type=checkbox]):not([type=radio]),textarea,select,output { padding: .5rem; }
input:not([type=checkbox]):not([type=radio]):not([size]),textarea,select,output {
	display: block; /* Edge Bug */
	width: calc(100% - 1rem);
}

label input,label select,label textarea,label output { margin: 0; }
label input:not([type=checkbox]):not([type=radio]):not([size]),label select,label textarea,label output { width: 100%;	}

input[type=checkbox],input[type=radio] {
	width: 1rem;
	height: 1rem;
	vertical-align: bottom;
}
label input[type=checkbox],label input[type=radio] { margin-right: .5rem; }

textarea { height: 5rem; }

button { padding: calc(.5rem + .75rem / 2) 1.5rem calc(.5rem + .75rem / 2) 1.5rem; }

nav a {
	display: inline-block;
	margin: .5rem;
}

/* Styling */
* {
	background: none;
	font-family: inherit;
	color: inherit;
	border: solid 0;
	border-color: inherit;
}
*[onclick] { cursor: pointer; }
body {
	font-family: Arial;
	color: #000;
	background: #FFF;
	border-color: #000;
}
h1, h2, h3,
h4, h5, h6 {
	line-height: 1.1em;
	font-weight: bold;
}
h1 { font-size: 2.3333333333333333333333333333333em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6666666666666666666666666666667em; }
h4 { font-size: 1.3333333333333333333333333333333em; }
h5 { font-size: 1em; }
h6 { font-size: .66666666666666666666666666666667em; }

p { line-height: 1.61803398875em; }

li {
	margin-left: 1em;
	line-height: 1.61803398875em;
}

blockquote:before { content: "\201C"; }
blockquote:after { content: "\201D"; }

hr {
	height: 1px;
	margin-bottom: calc(.5em - 1px);
	background: inherit;	
}

label::first-line { font-size: .75em; }

output { font-weight: normal; }

input:not([type=checkbox]):not([type=radio]),select,textarea,output {
	font-size: 1em;
	border-width: 1px;
}
input:not([type=checkbox]):not([type=radio])::placeholder,select::placeholder,textarea::placeholder {
	font-style: italic;
	color: #d3d3d3;
}
input[type=checkbox],input[type=radio],select { cursor: pointer; }

button {
	border-width: 1px;
    font-size: .75em;
	cursor: pointer;
}
button:hover { box-shadow: inset 0 0 100rem #fff; }
button:active {
	box-shadow: none;
	background-color: #000;
	color: #fff;
}

img, .img {
	vertical-align: middle;
	background-position:center center;
	background-size: cover;
	background-repeat: no-repeat;
}

a {
	color: #17A8E3;
	text-decoration: underline;
}

table {
	border-collapse: collapse;
	border-bottom-width: 1px;
}
tr { border-top-width: 1px; }
td,th { padding: .5rem; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { font-decoration: underline; }
.strike { font-decoration: line-through; }
.capitalise { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
big { font-size: 1.5em;  }
small { font-size: .75em;  }
.line-height { line-height: 1em; }

.border-top { border-top-width: 1px; }
.border-right { border-right-width: 1px; }
.border-left { border-left-width: 1px; }
.border-bottom { border-bottom-width: 1px; }

.indent p {
	padding-top: 0;
	padding-bottom: 0;
}
.indent p:not(:first-of-type) { text-indent: 1.5em; }
.smallcap {
	font-variant: small-caps;
	font-weight: bold;
}
.dropcap::first-letter {
	float: left;
    font-size: 3em;
    margin-right: .0625em;
    line-height: 1em;
}
.dropcap p { clear: both; }