/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */


/* Document
   ========================================================================== */

html {
	font-family: sans-serif;
	/* 1 */
	line-height: 1.15;
	/* 2 */
	-ms-text-size-adjust: 100%;
	/* 3 */
	-webkit-text-size-adjust: 100%;
	/* 3 */
}


/* Sections
   ========================================================================== */


/**
 * Remove the margin in all browsers (opinionated).
 */

body {
	margin: 0;
}


/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
	display: block;
}


/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}


/* Grouping content
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main {
	/* 1 */
	display: block;
}


/**
 * Add the correct margin in IE 8.
 */

figure {
	margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
	/* 2 */
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
	background-color: transparent;
	/* 1 */
	-webkit-text-decoration-skip: objects;
	/* 2 */
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
	outline-width: 0;
}


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	text-decoration: underline dotted;
	/* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
	font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
	font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
	background-color: #ff0;
	color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 */

audio,
video {
	display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
	display: none;
	height: 0;
}


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
	border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
	overflow: hidden;
}


/* Forms
   ========================================================================== */


/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: sans-serif;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
	/* 1 */
	overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
	/* 1 */
	text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],

/* 1 */

[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	/* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box;
	/* 1 */
	color: inherit;
	/* 2 */
	display: table;
	/* 1 */
	max-width: 100%;
	/* 1 */
	padding: 0;
	/* 3 */
	white-space: normal;
	/* 1 */
}


/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	display: inline-block;
	/* 1 */
	vertical-align: baseline;
	/* 2 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
	overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
}


/* Interactive
   ========================================================================== */


/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details,

/* 1 */

menu {
	display: block;
}


/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}


/* Scripting
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 */

canvas {
	display: inline-block;
}


/**
 * Add the correct display in IE.
 */

template {
	display: none;
}


/* Hidden
   ========================================================================== */


/**
 * Add the correct display in IE 10-.
 */

[hidden] {
	display: none;
}

@charset "UTF-8";

/* argument
------------------------- */

.argument {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

.argument__type {
	color: #777;
}

.argument__type,
.argument__description {
	margin-left: 0.4rem;
}

.argument__type:before,
.argument__description:before {
	content: '·';
	padding-right: 0.4rem;
	display: inline-block;
}


/* button
------------------------- */

.button {
	display: inline-block;
	padding: 5px 15px;
	margin-bottom: 10px;
	background-color: #F8F8F8;
	background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.1));
	border: 1px solid #CCC;
	border-radius: 5px;
}

.button:enabled {
	cursor: pointer;
}

.button:enabled:hover {
	background-color: #8CF;
}

.button.is-checked,
.button.is-selected {
	background-color: #19F;
	color: white;
}

.button:active {
	color: white;
	background-color: #59F;
	box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}


/* hide radio inputs */

.button input[type="radio"] {
	display: none;
}


/* ---- button-group ---- */

.button-group:after {
	content: '';
	display: block;
	clear: both;
}

.button-group .button {
	float: left;
	border-radius: 0;
	margin-left: -1px;
}

.button-group .button:first-child {
	border-radius: 5px 0 0 5px;
}

.button-group .button:last-child {
	border-radius: 0 5px 5px 0;
}


/* buy-button
------------------------- */

.buy-button {
	display: block;
	margin-bottom: 10px;
	line-height: 1.3rem;
	border-radius: 8px;
	padding: 10px 100px 10px 10px;
	position: relative;
	text-align: center;
}

.buy-button__project,
.buy-button__title,
.buy-button__license {}

.buy-button__title {
	font-weight: bold;
}

.buy-button__for {
	display: block;
	font-style: italic;
}

.buy-button__price {
	font-size: 1.6rem;
	background: #888;
	color: white;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 80px;
	border-radius: 0 8px 8px 0;
	text-align: center;
	line-height: 64px;
}

.buy-button__price__dollar {
	font-size: 1.4rem;
	margin-right: 3px;
	vertical-align: top;
}

@media screen and (min-width: 768px) {
	/* ---- buy-button-trio ---- */
	.buy-button-trio {
		margin-top: 40px;
		margin-bottom: 50px;
	}
	.buy-button-trio:after {
		content: '';
		display: block;
		clear: both;
	}
	/* ---- buy-button-trio buy-button ---- */
	.buy-button-trio .buy-button {
		float: left;
		width: 31.33%;
		margin-right: 3%;
	}
	.buy-button-trio .buy-button:nth-child(3) {
		margin-right: 0;
	}
	.buy-button-trio .buy-button {
		transition: transform 0.2s;
		padding: 20px 0 0;
	}
	.buy-button-trio .buy-button>span {
		display: block;
		padding-left: 10px;
		padding-right: 10px;
	}
	.buy-button-trio .buy-button__project,
	.buy-button-trio .buy-button__license {
		font-size: 1.1rem;
	}
	.buy-button-trio .buy-button__title {
		font-size: 1.9rem;
		line-height: 1.2;
	}
	.buy-button-trio .buy-button__license {
		margin-bottom: 15px;
	}
	.buy-button-trio .buy-button__for {
		margin-bottom: 20px;
		font-size: 1.1rem;
	}
	.buy-button-trio .buy-button__price {
		position: relative;
		width: auto;
		font-size: 2.4rem;
		line-height: 1.3;
		padding-top: 15px;
		padding-bottom: 10px;
		border-radius: 0 0 8px 8px;
	}
	.buy-button-trio .buy-button__was-price {
		display: block;
		padding-bottom: 10px;
	}
	.buy-button-trio .buy-button__price__dollar {
		position: relative;
		top: 8px;
	}
	.buy-button-trio .buy-button:hover {
		transform: translateY(-5px);
	}
}


/* call out
------------------------- */

.call-out {
	border-top: 2px solid #ED2;
	border-bottom: 2px solid #ED2;
	padding-left: 40px;
	position: relative;
	margin: 20px 0;
}


/* (i) */

.call-out:before {
	content: 'i';
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 5px;
	top: 20px;
	background: #ED2;
	border-radius: 50%;
	text-align: center;
	color: white;
	font-family: Consolas, Georgia, serif;
	font-style: italic;
}

.call-out h2 {
	margin-top: 0;
	padding-top: 10px;
	border-top: none;
}

.call-out--chill {
	border-color: #8C8;
}

.call-out--chill:before {
	background: #8C8;
}


/* ---- call-out--big-copy ---- */

.call-out--big-copy p,
.call-out--big-copy li,
.call-out--big-copy li:before {
	font-size: 1.2rem;
	line-height: 1.2;
}


/* ---- quick-start-list ---- */

.call-out--big-copy ol {
	list-style: none;
}

.quick-start-list li {
	position: relative;
	counter-increment: call-out-big-copy-item;
}

.quick-start-list li:before {
	content: counter(call-out-big-copy-item) ".";
	position: absolute;
	left: -1.2rem;
	font-size: 1.2rem;
	font-weight: bold;
}

.quick-start-list {
	list-style: none;
}

@media screen and (min-width: 768px) {
	.call-out {
		border: 2px solid #ED2;
		padding: 10px 20px 10px 80px;
		border-radius: 6px;
		position: relative;
		margin: 20px 0;
	}
	.call-out--chill {
		border-color: #8C8;
	}
	.call-out:before {
		width: 40px;
		height: 40px;
		left: 20px;
		top: 30px;
		font-size: 1.9rem;
		line-height: 46px;
	}
}


/* chunky-buttons
------------------------- */

.chunky-button {
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	text-decoration: none;
	line-height: 1.0;
}

.chunky-button:hover {
	text-decoration: none;
}

.chunky-button--fill {
	background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15));
}

.chunky-button__icon {
	margin-right: 10px;
}

.chunky-button__icon svg {
	width: 48px;
	height: 48px;
	vertical-align: bottom;
}

.chunky-button__text {
	display: inline-block;
}

.chunky-button__text__plain {
	display: block;
}

.chunky-button__text__strong {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
}

.chunky-button--outline {
	padding-top: 8px;
	padding-bottom: 8px;
	border: 2px solid;
}


/* commercial-license-agreement
------------------------- */

.commercial-license-agreement h3 {
	counter-increment: cla-h3;
	counter-reset: cla-part;
}

.commercial-license-agreement h3:before {
	content: counter(cla-h3) '.';
	margin-right: 0.25rem;
	color: #888;
	font-family: 'Texta', sans-serif;
}

.cla__part {
	counter-increment: cla-part;
}

.cla__part:before,
.cla__definitions-list li:before {
	content: counter(cla-h3) '.' counter(cla-part) '.';
	color: #888;
	margin-right: 0.25rem;
}

.cla__definitions-list {
	list-style: none;
	padding-left: 2.6rem;
}

.cla__definitions-list li {
	text-indent: -1.5rem;
	margin-bottom: 0.5rem;
	counter-increment: cla-definitions-item;
}

.cla__definitions-list li:before {
	content: counter(cla-h3) '.' counter(cla-definitions-item) '.';
}


/* duo
two columns for large devices
------------------------- */

.duo:after {
	content: '';
	display: block;
	clear: both;
}

.duo__cell {
	margin-bottom: 10px;
}


/* --- duo--legal --- */

.duo--legal__plain {
	padding: 0 0.8rem;
	background: #FAFAFA;
	color: #888;
}

.duo--legal--first .duo--legal__official:before,
.duo--legal--first .duo--legal__plain:before {
	display: block;
	padding-top: 0.5rem;
	font-size: 0.88rem;
	color: #888;
}

.duo--legal--first .duo--legal__official:before {
	content: 'Official legal copy'
}

.duo--legal--first .duo--legal__plain:before {
	content: 'Plain English'
}

@media screen and ( min-width: 768px) {
	.duo__cell {
		float: left;
		width: 48.5%;
	}
	.duo__cell:first-child {
		margin-right: 3%;
	}
	.duo__cell--license-option p {
		margin-top: 0;
	}
}


/* edit-demo
------------------------- */

.edit-demo {
	clear: both;
	font-size: 0.92rem;
}


/* example
------------------------- */

.example {
	margin: 40px 0;
}

.example__code pre {
	margin: 0 0 20px;
}


/* gh-button
------------------------- */

.gh-button {
	display: inline-block;
	background: none;
	border: none;
	color: #333;
	font-size: 1.1rem;
}

.gh-button__title,
.gh-button__stat {
	float: left;
	font-weight: bold;
	line-height: 20px;
	padding: 5px 10px;
	border: 1px solid #d5d5d5;
}

.gh-button__icon,
.gh-button .github-logo {
	height: 21px;
	fill: #333;
	display: inline-block;
	vertical-align: bottom;
}

.gh-button__title {
	background-color: #eee;
	background-image: linear-gradient(#fcfcfc, #eee);
	border-radius: 4px 0 0 4px;
}

.gh-button .github-logo {
	margin-right: 0.2em;
}

.gh-button__stat {
	border-left: 0;
	border-radius: 0 4px 4px 0;
	background: white;
}

.gh-button:hover {
	color: #333;
}

.gh-button:hover .gh-button__title {
	background-color: #ddd;
	background-image: linear-gradient(#eee, #ddd);
}

.gh-button:hover .gh-button__stat {
	color: #4078c0;
}

.gh-button:hover .gh-button__icon--star {
	fill: #4078c0;
}


/* shirt-promo
------------------------- */

.shirt-promo {
	margin: 40px 0;
}

.shirt-promo__title {
	font-size: 1.6rem;
}

.shirt-promo__image {
	display: block;
	max-width: 100%;
	margin-bottom: 10px;
}


/* showcase-item
------------------------- */

.showcase-item__link {
	display: block;
	padding: 10px;
	background: white;
	margin-bottom: 20px;
	border-radius: 8px;
	background: #DDD;
}

.showcase-item__link:after {
	content: '';
	display: block;
	clear: both;
}

.showcase-item__image {
	width: 80px;
	float: left;
	display: block;
}

.showcase-item__image svg {
	display: block;
	border-radius: 5px;
	width: 100%;
	height: auto;
}

.showcase-item__text {
	float: left;
	width: calc( 100% - 120px);
	padding-left: 10px;
}

.showcase-item__title {
	margin: 0;
	font-size: 1.4rem;
}

.showcase-item__description {
	margin: 0;
}

@media screen and ( min-width: 768px) {
	.showcase-item {
		float: left;
		width: 48.5%;
	}
	.showcase-item:nth-child(2n+1) {
		margin-right: 3%;
	}
	.showcase-item__image {
		width: 120px;
	}
	.showcase-item__text {
		padding-left: 20px;
	}
	.showcase-item__title {
		font-size: 2.0rem;
	}
	.showcase-item__description {
		font-size: 1.2rem;
		line-height: 1.2;
	}
}


/* showcase
------------------------- */

.showcase-item-list {
	padding: 0;
	list-style: none;
}

.showcase-item-list:after {
	content: '';
	display: block;
	clear: both;
}

.showcase-item .infinite-scroll-illo {
	padding: 5px;
}

.showcase__banner__image {
	display: block;
	max-width: 100%;
	margin-top: 10px;
	border-radius: 5px;
}


/* site-footer
------------------------- */

.site-footer {
	padding: 40px 0;
	margin-top: 60px;
}

.site-footer__copy {
	font-size: 1.2rem;
}

.site-footer .twitter-logo {
	width: 1.3rem;
	height: 1.3rem;
	vertical-align: middle;
}


/* socks-promo
------------------------- */

.socks-promo {
	margin: 40px 0;
}

.socks-promo__image {
	display: block;
	max-width: 100%;
	border-radius: 5px;
}

.socks-promo .duo__cell {
	margin-bottom: 0;
}


/* flickity-illo
------------------------- */

.flickity-illo {
	background: #ED0;
}


/* infinite-scroll-illo
------------------------- */

.infinite-scroll-illo__page {
	stroke: #333;
	stroke-width: 20;
	stroke-miterlimit: 10;
}

.infinite-scroll-illo__page--back {
	fill: white;
}

.infinite-scroll-illo__page--front1 {
	fill: #C25;
}

.infinite-scroll-illo__page--front2 {
	fill: #E62;
}

.infinite-scroll-illo__page--front3 {
	fill: #EA0;
}


/* isotope-illo
------------------------- */

.isotope-illo {
	background: #222;
}


/* colors

light gray #D8D5D2
dark gray #333
purple #A2C
red #D26
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* font-size on html for rem*/

html {
	font-size: 17px;
	line-height: 1.5;
}

html.export {
	font-family: sans-serif;
	font-size: 15px;
}

body {
	color: #333;
}

body,
input,
button {
	font-family: Texta, Avenir Next, sans-serif;
}


/* ---- links ---- */

a,
a code {
	color: #A2C;
	text-decoration: none;
}

a:hover,
a:hover code {
	color: #D26;
}


/* ---- headers ---- */

h1,
h2,
h3,
h4 {
	line-height: 1.25;
}


/* ---- lists ---- */

ul,
ol {
	padding-left: 1.8em;
}


/* ---- code ---- */

pre,
code {
	font-family: Consolas, Menlo, monospace;
	font-size: 14px;
}

@media screen and ( min-width: 768px) {
	html {
		font-size: 19px;
	}
	html.export {
		font-size: 16px;
	}
	pre,
	code,
	kbd {
		font-size: 15px;
	}
}


/* Code
------------------------- */

pre,
code {
	background: #222;
	color: white;
}

pre {
	padding: 0.8em;
	border-radius: 5px;
	white-space: pre-wrap;
}

code {
	padding: 0.2em 0.3em;
	line-height: 1.2;
	border-radius: 3px;
}

pre code {
	padding: 0;
	line-height: 1.5;
	background: none;
}

a code {
	background: #A2C;
	color: white;
}

a:hover code {
	color: white;
	background: #D26;
}

code .string,
code .tag .value {
	color: #0C4;
}

code .number,

/* integer */

code .cp,

/* doctype */

code .literal {
	color: #38F;
}


/*boolean*/

code .keyword {
	color: #F73;
}


/* keyword */

code .kd,

/* storage */

code .attribute {
	color: #DC8;
}


/* markup attribute */

code .title {
	color: #9CF;
}

code .params {
	color: #98D;
}

code .p {
	color: #EDB;
}


/* punctuation */

code .o {
	color: #F63;
}


/* operator */

code .nb {
	color: #AA97AC;
}


/* support */


/* comment */

code .comment {
	color: #999;
	font-style: italic;
}

code .tag {
	color: #6CF;
}


/* Markup open tag */

code .id {
	color: #ABC;
}


/* css id */

code .class {
	color: #A63;
}


/* CSS class */

code .rules {
	color: #FED;
}

code .m {
	color: #DE8E50;
}


/* CSS value */

code .nd {
	color: #9FAD7E;
}


/* CSS pseudo selector */

code .hexcolor {
	color: #F63;
}

code .at_rule {
	color: #088;
}


/* masonry keywords */

code .masonry_var {
	color: #F3F;
}

code .jquery_var {
	color: #DF8;
}

code .masonry_keyword {
	color: #0FF;
	text-decoration: underline;
}


/* content
------------------------- */

.content {
	padding-top: 20px;
	padding-bottom: 20px;
}


/* ---- typography ---- */

.content h1 {
	font-size: 3.4rem;
}

.content h2 {
	font-size: 2.0rem;
	font-weight: 400;
	padding: 30px 0;
	border-top: 2px solid white;
	margin-top: 50px;
}

.content h2:target {
	padding-left: 0.5em;
	background: #D26;
	color: white;
}

.content h3 {
	font-size: 1.6rem;
	border-top: 1px solid white;
	padding-top: 20px;
	margin-top: 50px;
	margin-bottom: 30px;
}

@media screen and ( min-width: 768px) {
	.content>* {
		max-width: 900px;
	}
	/* stuff that can go wide */
	.content>.example {
		max-width: none;
	}
}


/* ---- demos ---- */

.demo .masonry,
.demo.masonry {
	background: white;
	border-radius: 5px;
}

.demo .button {
	margin-bottom: 0.8em;
}


/* ---- fit width ---- */

#fit-width {
	border: 2px solid white;
	border-radius: 6px;
}

#fit-width .masonry {
	margin: 10px auto;
}


/* ---- counting ---- */

.masonry.counting {
	counter-reset: item;
}

.masonry.counting .item:before {
	counter-increment: item;
	content: counter(item);
	display: block;
	color: white;
	padding-top: 0.2em;
	text-align: center;
	font-size: 18px;
}


/* ---- measurement demos ---- */

#gutter-opt-demo2 .item {
	margin-bottom: 10px;
}


/* responive column width */

.masonry.masonry--percent-width .grid-sizer {
	width: 20%;
}

.masonry.masonry--percent-width .item {
	width: 20%;
}

.masonry.masonry--percent-width .item.w2,
.masonry.masonry--percent-width .item.w3 {
	width: 40%;
}

#row-height-demo2 .grid-sizer {
	height: 60px;
}

#gutter-opt-demo3 .gutter-sizer {
	width: 3%;
}


/* ---- stamp ---- */

.has-stamp {
	position: relative;
}

#stamp-demo .stamp {
	right: 10%;
	top: 10px;
	width: 35%;
	height: 70px;
}

#stamp-demo .item {
	opacity: 0.8;
}


/* ---- animate-item-size ---- */


/* item is invisible, but used for layout */

.masonry.animate-item-size-demo .item,
.masonry.animate-item-size-demo .item-content {
	width: 60px;
	height: 60px;
}

.masonry.animate-item-size-demo .item {
	border: none;
	background: transparent;
}


/* item-content is visible, and transitions size */

.animate-item-size-demo .item-content {
	width: 60px;
	height: 60px;
	background: #D26;
	border: 2px solid #333;
	border-color: hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
	-webkit-transition: width 0.4s, height 0.4s;
	-moz-transition: width 0.4s, height 0.4s;
	-o-transition: width 0.4s, height 0.4s;
	transition: width 0.4s, height 0.4s;
}

.animate-item-size-demo .item:hover .item-content {
	border-color: white;
	background: #A2C;
}


/* both item and item content change size */

.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
	width: 180px;
	height: 120px;
}

.animate-item-size-demo .item.is-expanded {
	z-index: 2;
}

.animate-item-size-demo .item.is-expanded .item-content {
	background: #F90;
}


/* ---- animate item size responsive ---- */

#animate-item-size-responsive .item,
#animate-item-size-responsive .grid-sizer {
	width: 20%;
}

#animate-item-size-responsive .item-content {
	width: 100%;
	height: 100%;
}


/* item has expanded size */

#animate-item-size-responsive .item.is-expanded {
	width: 60%;
}


/* web fonts
------------------------- */


/*@import url("//hello.myfonts.net/count/2d333f");*/


/*
  Just use WOFF2 and WOFF for webfonts
  https://css-tricks.com/snippets/css/using-font-face/ */


/* Texta Heavy */

@font-face {
	font-family: 'Texta';
	font-weight: bold;
	font-style: normal;
	src: url('../fonts/2D333F_0_0.woff2') format('woff2'), url('../fonts/2D333F_0_0.woff') format('woff');
}


/* Texta Italic */

@font-face {
	font-family: 'Texta';
	font-weight: normal;
	font-style: italic;
	src: url('../fonts/2D333F_1_0.woff2') format('woff2'), url('../fonts/2D333F_1_0.woff') format('woff');
}


/* Texta Regular */

@font-face {
	font-family: 'Texta';
	src: url('../fonts/2D333F_2_0.woff2') format('woff2'), url('../fonts/2D333F_2_0.woff') format('woff');
}


/* ---- desktop  ---- */

@media screen and ( min-width: 960px) {
	/* first primary content not used on homepage */
	.index-page #content>.primary-content:first-child {
		border-top: none;
		padding-top: 0;
	}
}


/* ---- #content ---- */


/* ---- row ---- */

.row .cell {
	margin-bottom: 0.8em;
}


/* clearfix */

.row:after {
	content: ' ';
	display: block;
	clear: both;
}

.row4 .cell {
	float: left;
	width: 48%;
	margin-right: 2%;
}


/* tablet-ish */

@media screen and ( min-width: 800px) {
	.row {
		margin-bottom: 0.8em;
	}
	/* two column by default*/
	.row .cell {
		float: left;
		width: 48.75%;
		margin-right: 2.5%;
		margin-bottom: 0;
	}
	/* IE8 doesn't support :last-child */
	.lt-ie9 .row .cell {
		margin-right: 1.5%;
	}
	/* no margin */
	/*  .example.row .cell {
    width: 50%;
    margin-right: 0;
  }*/
	/* three column */
	.row3 .cell {
		width: 31.6%;
	}
	/* four column */
	.row4 .cell {
		width: 23.1%;
	}
	.row .cell:last-child {
		margin-right: 0;
	}
}


/* ---- instruction ---- */

.instruction {
	font-size: 18px;
	margin-bottom: 0.2em;
	color: #888;
}


/* ---- notification ---- */

#notification {
	display: none;
	/* hide by default */
	position: fixed;
	z-index: 20;
	/* above most stuff */
	bottom: 0px;
	right: 0px;
	background: #A2C;
	padding: 0.5em;
	color: white;
	font-size: 20px;
	pointer-events: none;
}


/* animate-item-size-item
------------------------- */

.animate-item-size-item {
	float: left;
}


/* animate-item-size-item is invisible, but used for layout */

.animate-item-size-item,
.animate-item-size-item__content {
	width: 60px;
	height: 60px;
}


/* animate-item-size-item__content is visible, and transitions size */

.animate-item-size-item__content {
	background: #D26;
	border: 2px solid #333;
	border-color: hsla(0, 0%, 0%, 0.7);
	border-radius: 5px;
	-webkit-transition: width 0.4s, height 0.4s;
	transition: width 0.4s, height 0.4s;
}

.animate-item-size-item:hover .animate-item-size-item__content {
	border-color: white;
	background: #A2C;
	cursor: pointer;
}


/* both animate-item-size-item and animate-item-size-item content change size */

.animate-item-size-item.is-expanded,
.animate-item-size-item.is-expanded .animate-item-size-item__content {
	width: 180px;
	height: 120px;
}

.animate-item-size-item.is-expanded {
	z-index: 2;
}

.animate-item-size-item.is-expanded .animate-item-size-item__content {
	background: #F90;
}


/* ---- responsive ---- */

.grid--animate-item-size-responsive .animate-item-size-item,
.grid--animate-item-size-responsive .grid-sizer {
	width: 20%;
}

.grid--animate-item-size-responsive .animate-item-size-item__content,
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded .animate-item-size-item__content {
	width: 100%;
	height: 100%;
}


/* item has expanded size */

.grid--animate-item-size-responsive .animate-item-size-item.is-expanded {
	width: 60%;
}


/* bootstrap 3
------------------------- */

.bootstrap-3__container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.bootstrap-3__col-xs-4,
.bootstrap-3__col-xs-6,
.bootstrap-3__col-xs-8,
.bootstrap-3__col-xs-12 {
	padding-right: 15px;
	padding-left: 15px;
}

.bootstrap-3__col-xs-4 {
	width: 33.333%;
}

.bootstrap-3__col-xs-6 {
	width: 50%;
}

.bootstrap-3__col-xs-8 {
	width: 66.666%;
}

.bootstrap-3__grid-item-content {
	height: 100px;
	background: #D26;
	border: 2px solid hsla(0, 0%, 0%, 0.5);
	border-radius: 5px;
}

.bootstrap-3__grid-item-content--height2 {
	height: 200px;
}


/* sm */

@media (min-width: 768px) {
	.bootstrap-3__col-sm-4 {
		width: 33.333%;
	}
	.bootstrap-3__col-sm-8 {
		width: 66.666%;
	}
}


/* md */

@media (min-width: 992px) {
	.bootstrap-3__col-md-3 {
		width: 25%;
	}
	.bootstrap-3__col-md-6 {
		width: 50%;
	}
}


/* stamp
------------------------- */

.stamp {
	position: absolute;
	width: 30%;
	height: 60px;
	background: orange;
	border: 4px dotted black;
}

.stamp--static-stamp1 {
	left: 30%;
	top: 10px;
	width: 20%;
	height: 100px;
}

.stamp--static-stamp2 {
	right: 10%;
	top: 20px;
	width: 70%;
	height: 30px;
}


/* stamp-methods-demo
------------------------- */

.grid--stamp-methods-demo .grid-item {
	opacity: 0.8;
}

.stamp--stamp-methods-demo {
	left: 10px;
	top: 10px;
}


/* call out
------------------------- */

.call-out {
	border-top: 2px solid #F90;
	border-bottom: 2px solid #F90;
	padding-left: 40px;
	position: relative;
	margin: 20px 0;
}


/* (i) */

.call-out:before {
	content: 'i';
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 5px;
	top: 20px;
	background: #F90;
	border-radius: 50%;
	text-align: center;
	color: white;
	font-family: Consolas, Georgia, serif;
	font-style: italic;
}

.call-out h2 {
	margin-top: 0;
	padding-top: 10px;
	border-top: none;
}

.call-out--chill {
	border-color: #1FB;
}

.call-out--chill:before {
	background: #1FB;
}

@media screen and (min-width: 768px) {
	.call-out {
		border: 2px solid #F90;
		padding: 10px 20px 10px 80px;
		border-radius: 6px;
		position: relative;
		margin: 20px 0;
	}
	.call-out--chill {
		border-color: #1FB;
	}
	.call-out:before {
		width: 40px;
		height: 40px;
		left: 20px;
		top: 30px;
		font-size: 1.9em;
		line-height: 46px;
	}
}


/* container
------------------------- */

.container {
	margin-left: 10px;
	margin-right: 10px;
	max-width: 1200px;
}

@media screen and ( min-width: 1100px) {
	.container {
		margin-left: 6%;
		margin-right: 200px;
	}
}


/* example
------------------------- */

.example pre {
	margin-top: 0;
}

.example__demo--fit-width {
	border: 2px solid white;
	border-radius: 5px;
}


/* duo
------------------------- */

.duo__cell {
	margin-bottom: 10px;
}


/* showcase
------------------------- */

.showcase-item__link {
	background: #E8E5E2;
	color: #D26;
}

.showcase-item__link:hover {
	background: white;
	color: #A2C;
}


/* grid
------------------------- */

.grid {
	margin: -10px;
}


/* clearfix */

.grid:after {
	content: '';
	display: block;
	clear: both;
}


/* ---- banner ---- */

.grid--has-banner {
	position: relative;
}

.static-banner {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 5px 15px;
	color: white;
	background: #A2C;
	z-index: 2;
	/* above items */
}


/* ---- centered ---- */

.grid--centered {
	margin: 10px auto;
}


/* ---- counting ---- */

.grid--counting {
	counter-reset: grid-item;
}

.grid--counting .grid-item:before {
	counter-increment: grid-item;
	content: counter(grid-item);
	display: block;
	color: white;
	padding-top: 0.2em;
	text-align: center;
	font-size: 1.1rem;
}


/* ---- stamp ---- */

.grid--has-stamp {
	position: relative;
}


/* ---- grid--fixed-width ---- */

.grid--fixed-width {
	width: 320px;
}


/* grid-image-item
------------------------- */

.grid-image-item,
.grid--images .grid-sizer {
	width: 33.33%;
}

.grid-image-item {
	float: left;
}

.grid-image-item img {
	display: block;
	max-width: 100%;
}


/* grid-item
------------------------- */

.gutter-sizer {
	width: 4%;
}

.grid-item {
	box-sizing: border-box;
	float: left;
	width: 25%;
	height: auto;
	padding: 10px;
}

@media only screen and (max-width: 1366px) {
	.grid-item {
		width: 25%;
	}
}

@media only screen and (max-width: 1200px) {
	.grid-item {
		width: 33.3%;
	}
}

@media only screen and (max-width: 1024px) {
	.grid-item {
		width: 50%;
	}
}

@media only screen and (max-width: 700px) {
	.grid-item {
		width: 100%;
	}
}

.grid-item--width2 {
	width: 160px;
}

.grid-item--width3 {
	width: 240px;
}

.grid-item--height2 {
	height: 100px;
}

.grid-item--height3 {
	height: 140px;
}

.grid-item--height4 {
	height: 180px;
}

.grid-item--gigante {
	width: 240px;
	height: 180px;
	background: #F90;
	z-index: 2;
	/* keep it above other items */
}


/* ---- clickable ---- */

.grid--clickable .grid-item:hover {
	border-color: white;
	background: #A2C;
	cursor: pointer;
}


/* ---- fluid-5-col ---- */

.grid--fluid-5-col .grid-sizer,
.grid--fluid-5-col .grid-item {
	width: 20%;
}

.grid--fluid-5-col .grid-item--width2,
.grid--fluid-5-col .grid-item--width3 {
	width: 40%;
}


/* ---- gutter ---- */

.grid--gutter .grid-item--width2 {
	width: 170px;
}

.grid--gutter .grid-item--width3 {
	width: 260px;
}

.grid--gutter-bottom .grid-item {
	margin-bottom: 10px;
}


/* ---- grid--fluid-gutter ---- */

.grid--fluid-gutter .grid-item,
.grid--fluid-gutter .grid-sizer {
	width: 22%;
}

.grid--fluid-gutter .gutter-sizer {
	width: 4%;
}

.grid--fluid-gutter .grid-item--width2,
.grid--fluid-gutter .grid-item--width3 {
	width: 48%;
}


/* hero
------------------------- */

.hero-grid {
	padding: 10px 1%;
	margin: 20px 0;
	background: white;
	border-radius: 10px;
}


/* necessary for proper sizing with margins */

.hero-grid__grid-sizer {
	position: absolute;
}

.hero-grid__item,
.hero-grid__grid-sizer {
	width: 47%;
	margin: 0 1% 20px 1%;
}

.hero-grid__gutter-sizer {
	width: 2%;
}

.hero-grid__item {
	float: left;
	border-radius: 8px;
	background: #D8D6D2;
	margin-bottom: 20px;
}


/* ----  ---- */

.hero__title {
	margin: 0;
	line-height: 1.2;
	font-size: 3rem;
	color: #D26;
}

.hero__tagline {
	font-size: 1.4rem;
	margin: 0 0 10px;
}


/* ---- texty ---- */

.hero-grid__item--texty {
	padding: 10px;
}

.hero-grid__item--width2,
.hero-grid__item--width3 {
	width: 96%;
}


/* ---- ---- */

.hero-grid__big-button {
	position: relative;
	display: block;
	padding: 10px;
	background: #D26;
	color: white;
	border-radius: 8px;
	font-size: 1.1rem;
	line-height: 1.2;
}

.hero-grid__big-button:hover {
	background: #A2C;
	color: white;
}

.hero-grid__big-button svg {
	width: 24px;
	height: 24px;
	fill: white;
}

.hero-grid__big-button svg path {
	fill: white;
}


/* ----  ---- */

.hero__what-is-title {
	margin: 0 0 10px;
}

.hero__what-is-description {
	margin: 0;
}


/* ---- .hero-grid__example-link ---- */

.hero__example-link {
	display: block;
	background: #D26;
	border-radius: 8px;
	color: white;
}

.hero__example-link:hover {
	background: #A2C;
	color: white;
}

.hero__example-link__img {
	display: block;
	width: 100%;
	margin: 0;
}

.hero__example-link__title {
	margin: 0;
	padding: 10px;
	font-size: 0.9rem;
}


/* enough width for 4 columns */

@media screen and ( min-width: 768px) {
	.hero-grid__grid-sizer,
	.hero-grid__item {
		width: 22.5%;
	}
	.hero-grid__item--width2 {
		width: 47%;
	}
	.hero-grid__item--width3 {
		width: 71.5%;
	}
	.hero__title {
		font-size: 6rem;
	}
	.hero__tagline {
		font-size: 2rem;
	}
	.hero__what-is-title {
		font-size: 2rem;
	}
	.hero__what-is-description {
		font-size: 1.1rem;
	}
	.hero-grid__big-button {
		padding-left: 60px;
		min-height: 60px;
	}
	.hero-grid__big-button svg {
		display: block;
		position: absolute;
		left: 10px;
		top: 10px;
		width: 40px;
		height: 40px;
	}
}

@charset "UTF-8";

/* page-nav
------------------------- */

.page-nav {
	padding: 1.0em 0;
	font-size: 0.8rem;
	z-index: 2;
	/* above packeries */
}

.page-nav__item {
	display: inline-block;
}

.page-nav__item:after {
	content: ' •';
	margin: 0 10px;
	opacity: 0.5;
}

.page-nav__item:last-child:after {
	content: none;
}


/* desktop */

@media screen and ( min-width: 1100px) {
	.page-nav {
		position: absolute;
		right: 0;
		top: 60px;
		width: 200px;
		list-style: none;
		padding: 0;
		padding: 10px;
	}
	.page-nav__item {
		display: block;
		margin-bottom: 4px;
		margin-left: 0;
	}
	.page-nav__item:after {
		content: none;
	}
	.page-nav__item a {
		display: block;
	}
	.page-nav__item--h3 a {
		padding-left: 10px;
	}
}


/* fix .page-nav only if we have enough height */

@media screen and ( min-width: 1100px) and ( min-height: 540px) {
	.page-nav {
		position: fixed;
	}
}


/* site-footer
------------------------- */

.site-footer {
	color: #888;
	background: #F8F5F2;
	padding: 40px 0;
	position: relative;
	z-index: 10;
	/* above page-nav */
}


/* site nav
------------------------- */

.site-nav .container {
	border-bottom: 2px solid white;
}


/* bottom nav */

.content~.site-nav .container {
	position: relative;
	margin-top: 80px;
	border-top: 2px solid white;
	border-bottom: none;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list:after {
	content: '';
	clear: both;
	display: block;
}

.site-nav__item {
	width: 33.333%;
	float: left;
	line-height: 28px;
}

.site-nav__item a {
	display: block;
	padding: 5px
}

.site-nav__item--homepage {
	font-size: 1.15rem;
	font-weight: bold;
}

.site-nav__item--homepage a {
	color: #D26;
}

.site-nav__item a:hover {
	background: #D26;
	color: white;
}

.site-nav__item a:active {
	background: white;
	color: #D26;
}


/* selected */

.page--options .site-nav__item--options a,
.page--methods .site-nav__item--methods a,
.page--events .site-nav__item--events a,
.page--extras .site-nav__item--extras a,
.page--faq .site-nav__item--faq a {
	color: white;
}

.page--index .site-nav__item--homepage {
	visibility: hidden;
}


/* size at which it can fit */

@media screen and ( min-width: 768px) {
	.site-nav__item {
		width: auto;
		font-size: 1.15rem;
		line-height: 70px;
	}
	.site-nav__item a {
		padding: 0px 25px;
	}
	.site-nav__item--homepage {
		font-size: 1.5rem;
	}
}