body{
	color: var(--jc-grey-90);
	font-weight: 400;
    font-size: 100%;
}


h1, h2, h3, h4, h5, h6{
	padding: var(--jc-unit) 0;
	margin:  var(--jc-unit)  0;
	font-weight: 900;
	color: var(--jc-grey-100);
}

h1{
	font-size: calc(var(--jc-unit) * 2.875);
	line-height: var(--jc-unit-triple);
	letter-spacing: calc(var(--jc-unit-eighth) * -1);
}
h2{
	font-size: calc(var(--jc-unit) * 2.25);
	line-height: var(--jc-unit-double);
	letter-spacing: calc(var(--jc-unit-eighth) * -1);
}
h3{
	font-size: calc(var(--jc-unit) * 1.75);
	line-height: 24px;
	letter-spacing: calc(var(--jc-unit-sixteenth) * -1);
}
h4{
	font-size: calc(var(--jc-unit) * 1.75);
	line-height: 24px;
	letter-spacing: calc(var(--jc-unit-sixteenth) * -1);
}
h5{
	font-size: calc(var(--jc-unit) * 1.375);
	line-height: 24px;
	letter-spacing: calc(var(--jc-unit-sixteenth) * -1);
}
h6{
	font-size: calc(var(--jc-unit) * 1);
	line-height: 24px;
	letter-spacing: calc(var(--jc-unit-sixteenth) * -1);
}

p{
    margin: var(--jc-unit) 0;
    padding-bottom: var(--jc-unit);
    font-size: var(--jc-unit);
	color: var(--jc-grey-90)
}

table {
	border: 1px solid var(--jc-grey-20);
	width: 100%;
	margin: var(--jc-unit-double) 0;
	border-spacing: 0;
	border-collapse: separate;
}

thead th, tfoot th{
	background-color: var(--jc-grey-5);
	padding: var(--jc-unit-half);
	margin: 0;
	text-align: left;
	font-weight: bold;
	border: 1px solid var(--jc-grey-20);
}

thead td, tfoot td{
	background-color: var(--jc-grey-5);
	padding: var(--jc-unit-half);
	margin: 0;
	text-align: left;
	font-style: italic;
	color: var(--jc-black-60);
}

tbody td{
	padding: var(--jc-unit-half);
	margin: 0;
	text-align: left;
	border: 1px solid var(--jc-grey-10);
	line-height: var(--jc-unit-double);
}
tbody th{
	background-color: var(--jc-grey-5);
	padding: var(--jc-unit-half);
	margin: 0;
	line-height: var(--jc-unit-double);
	text-align: left;
	font-weight: bold;
}


blockquote {
	border-left: var(--jc-unit-half) solid var(--jc-grey-20);
	padding: var(--jc-unit-double);
	margin: 0;
}

blockquote p{
	font-size: 22px;
	line-height: 36px;
	font-family: var(--jc-font-serif);
}

blockquote footer{
	margin-top: 36px;
}

i, em{
	font-style: italic;
    font-weight: 400;
    font-family: var(--jc-font-serif);
}

b, strong, cite{
	font-weight: 900;
}

q{
	font-family: var(--jc-font-serif);
}

del, ins, var, q, mark, samp, abbr, kbd, a{
	padding: 0 var(--jc-unit-quarter);
}

del{
	background-color: var(--jc-coral-40);
	color: var(--jc-grey-60);
	font-style: italic;
	border-bottom: 2px solid var(--jc-coral-60);
}
ins{
	background-color: var(--jc-green-40);
	border-bottom: 2px solid var(--jc-green-60);
	text-decoration: none;
}


pre{
	background-color: var(--jc-grey-20);
	padding: var(--jc-unit-half);
	overflow-x: auto;
}

sub, sup{
	font-style: italic;
	font-size: 12px;
	line-height: 16px;
}

dfn{
	font-weight: bold;
	font-style: italic;
}

var, samp, kbd{
	font-family: var(--jc-font-monospace);
	font-size: calc(var(--jc-unit-quarter) * 1.125);
	line-height: var(--jc-unit);
	padding: var(--jc-unit-eighth) var(--jc-unit-quarter);
	font-weight: 600;
}

var, samp{
	background-color: var(--jc-grey-20);
}
samp::before{
	content: ' >> ';
}
kbd{
	background-color: var(--jc-grey-20);
	border: 2px solid var(--jc-grey-40);
}

mark{
	background-color: var(--jc-yellow-60);
}

abbr {
	border-bottom: 2px dotted var(--jc-grey-60);
}

small{
	line-height: 1var(--jc-unit-half);
	font-size: 12px;
}

a{
	color: var(--jc-orange-100);
}


hr{
	border: 0;
	border-top: var(--jc-unit-quarter) solid var(--jc-grey-40);
	margin: var(--jc-unit-double) 0;
}

dl {
	margin: var(--jc-unit-double);
}

dt{
	font-weight: 900;
}
dd{
	margin: 16px;
}



form fieldset{
	display: flex;
	padding: var(--jc-unit);
	border: 0 none;
	justify-content: space-between;
}
form fieldset p.form-error{
	text-align: center;
	color: var(--jc-coral-100);
	background-color: var(--jc-coral-40);
	border-radius: var(--jc-unit-quarter);
	font-weight: bold;
	text-transform: uppercase;
	font-size: calc(var(--jc-unit) * 0.75);
}

.form-error label p.form-error{
	border-radius: 0;
	text-align: left;
	background-color: transparent;
}

fieldset > div {
	col: 1;
	width: 100%;
}

form div{
	padding: 8px;
}

form label{
	display: block;
	margin: var(--jc-unit) 0 0 0;
	text-transform: uppercase;
	font-size: calc(var(--jc-unit) * 0.75);
	color: var(--jc-grey-80);
}

input[type="text"],
input[type="password"],
textarea {
	border: var(--jc-unit-eighth) solid var(--jc-grey-60);
	border-radius: var(--jc-unit-eighth);
	padding: var(--jc-unit-half);
	width: 100%;
	font-family: var(--jc-font-monospace);
	font-size: var(--jc-unit);
	transition: border 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus{
	 border: 2px solid var(--jc-grey-100);
}

button{
	color: var(--jc-grey-60);
	text-transform: uppercase;
	font-size: calc(var(--jc-unit) * 0.75);
	border: 2px solid var(--jc-grey-60);
	border-radius:  var(--jc-unit-quarter);
	background-color: var(--jc-white-100);
	padding: var(--jc-unit-half) var(--jc-unit);
	cursor: pointer;
	transition: background-color 0.5s, border 0.3s;
}

button:hover{
	border-color: var(--jc-grey-100);
	background-color: var(--jc-grey-100);
	color: var(--jc-white-100);
 }