/* Do it to it */

html, body {
	height: 100%;
}

body {
	background: black;
	color: white;
	font-family: "Weathersbee Sans", sans-serif;
	font-size: 1.25rem;
	line-height: 1.35;
	margin: 0;
	padding: 0;
	/*letter-spacing: .0625rem;*/
}

sidebar ul, sidebar h2, footer h2, .logo, #marks ul li a {
	font-family: "WT-Morris-Roman", Georgia;
}

a {
	color: inherit;
	text-decoration: none;
}

strong {
	font-variant: small-caps;
	font-family: "Weathersbee Sans", sans-serif;
}

img {
	display: block;
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

* {
	box-sizing: border-box;
}

.code {
	background: #222;
}

.credit {
	display: block;
	margin: 0 0 1.5rem;
}

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

p {
	margin: 0 0 1.5rem;
}

h1 {
	font-size: 3.75rem;
	line-height: 1.2;
	font-weight: 300;
	margin: 0 0 1rem;
	font-feature-settings: "salt";
}

h2 {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: #9ecc4c;
	font-weight: 400;
	line-height: 1.2;
}

h3 {
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 300;
	margin: 0 0 .5rem;
}

.leadin {
	font-style: italic;
}

.button {
	padding: 1rem 1.5rem;
	display: inline-block;
	border-radius: .25rem;
	background: white;
	color: black;
	font: inherit;
	border: none;
}

.button.small {
	padding: .5rem 1rem;
}

.block, content, sidebar {
	display: block;
}

main {
	
}

content {
	padding-left: 1rem!important;
}

.featured img {
	width: 75%;
	height: auto;
	margin: 2rem auto;
	
}

.inner {
	display: flex;
	justify-content: space-between;
	width: 75rem; /* 1296rem; */
	margin: 0 auto;
}

header {
	background: #720675;
	color: white;
	padding: 1.5rem 0;
}

nav {
	display: flex;
	justify-content: space-between;
	width: 75rem;
	margin: 0 auto;
	align-items: center;
}

nav ul {
	display: flex;
}

nav ul li {
	
}

nav ul li a {
	font: inherit;
	color: inherit;
	padding: 1.25rem;
}

.logo {
	height: 7.75rem;
	display: flex;
	align-items: center;
	font-size: 2rem;
	line-height: 1.1;
}

.logo img {
	height: 100%;
	width: auto;
}

.logo .text {
	border-left: 1px solid white;
	padding-left: 1rem;
}

content, .footer-content {
	width: 60%;
	padding: 2rem 0;
}

sidebar {
		padding: 2rem 0 2rem 2rem;
	border-right: 1px solid #222;
}

sidebar, .footer-forms {
	width: 30%;
	background: #222222;
}

sidebar h2 {
	font-variant: small-caps;
	font-weight: 300;
}

content h2 {
	font-size: 2.25rem;
	font-variant: small-caps;
}


sidebar ul li {
	margin: 0 0 .5rem;
}


footer {
	background: #9ecc4c;
	color: #2a3d01;
	padding: 2rem;
}

footer .inner {
	align-items: flex-start;
}

footer h2 {
	color: #720675;
	font-size: 2.25rem;
}

subfooter {
	display: block;
	background: white!important;
	color: black!important;
	text-align: center;
	padding: 1.5rem;
}

subfooter a {
	text-decoration: underline!important;
}

#marks ul {

}

#marks ul li {
	border-bottom: 1px solid white;
	position: relative;
	padding: 1rem 0;
}

#marks .code ul li {
	border-bottom: 1px solid #666;
	padding: 0 0 .5rem;
	margin: 0 0 .5rem;
}

#marks ul li:last-child {
	border: none;
}



.flex {
	display: flex;
	align-items: center;	
}

#marks ul li .mark {
	width: 15%;
	
}



#marks ul li img {
	height: 3.75rem;
	width: auto;
	margin: 0 auto;
}

#marks ul li .flex a {
	display: block;
	padding: 1rem 0;
	width: 85%;
	font-size: 3.75rem;
	line-height: 1;
		background: url("images/arrow-down.svg") right center no-repeat;
	background-size: 2rem 1rem;
}

#marks ul li a {

}

.mark-content {
	padding: 0 0 0 15%;
	display: block;
}



li.inactive .mark-content {
	display: none;
}

.code {
	padding: 1rem;
	margin: 0 0 2rem;
	font-family: "Weathersbee Sans Punctual";
	font-feature-settings: "dlig";
}

#usage .code {
	font-family: "Monomono", monospace;
	font-size: 1rem;
}

#usage ul {
	color: #9ecc4c;
}

#usage ul li {
	margin: 0 0 .5rem;
}

#usage ul li::before {
	content: "+";
	width: 1.5rem;
	display: inline-block;
	font-size: 1.25rem;
}

content section {
	padding: 0 0 2rem;
	border-bottom: 6px solid #333333;
	margin: 0 0 2rem;
}

sidebar section {
	padding: 0 0 1.25rem;
	margin: 0 0 1.25rem;
	border-bottom: 4px solid white;
}

sidebar section:last-child, content section:last-child {
	border: none;
}

.signature {
	width: 15rem;
}

.menu-toggle {
	display: none;
}

@keyframes widthExpand {
	 0% {width: 0%;}
    100% {width: 9rem;}
}

.arrow-link {
	/*width: 9rem;*/
	width: 0;
	line-height: 1;
	display: inline-block;
	padding: 0 1rem;
	background: url("images/arrow.svg") right center no-repeat;
	text-indent: -9999px;
}

/* animations //////////*/


.arrow-link.in-view {
animation-name: widthExpand;
animation-duration: 1.5s;
animation-delay: .1s;
animation-fill-mode: forwards;}

/* /animations //////////*/


.mods {
	color: lime;
}

.pro-tip {
	font-size: 75%;
	background: white;
	color: black;
	padding: .75rem;
	margin: 0 0 1.5rem;
}