body {
	margin: 0;
	background-color: #fff;
	font-family: Inconsolata, Monospace;
	font-size: 12pt;
	line-height: 1.5em;
	color: #555;
}

h1, h2, h3, h4 {
	font-weight: normal;
}

h1 {
	font-size: 18pt;
}

header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;

	line-height: 1em;
	padding: 20pt;
	margin-bottom: 20px;
}

header h1 {
	font-size: 25pt;
	line-height: 1em;
	max-width: 550px;
	margin: 10px;
}

header h2 {
	font-size: 13pt;
	line-height: 1em;
	max-width: 550px;
	margin: 10px;
}

header h3 {
	font-size: 13pt;
	line-height: 1.3em;
	max-width: 550px;
	margin: 10px;
}

hr {
	float: left;
	width: 100%;
	margin: 10pt 0;
	border: none;
	border-bottom: solid #fff 1px;
	height: 1px;
}

a {
	color: #f26;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.contentWrapper {
	text-align: center;
}

.content {
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
	padding: 20pt 40pt;
}

.footer {
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 40pt;
	padding: 40pt 0;

	font-weight: normal;
	line-height: 1em;
}

ul.fancy {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.fancy > li {
	background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 469.184 469.185" style="enable-background:new 0 0 469.184 469.185;" xml:space="preserve"><g>	<path d="M462.5,96.193l-21.726-21.726c-8.951-8.95-23.562-8.95-32.59,0L180.368,302.361l-119.34-119.34   c-8.95-8.951-23.562-8.951-32.589,0L6.712,204.747c-8.95,8.951-8.95,23.562,0,32.589L163.997,394.62   c4.514,4.514,10.327,6.809,16.218,6.809s11.781-2.295,16.219-6.809L462.27,128.783C471.45,119.68,471.45,105.145,462.5,96.193z" fill="#666"/></g></svg>');
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: 0px 4px;
	padding-left: 30px;
	margin-bottom: 10pt;
}

ul.fancy > li > .title {
	display: block;
	font-size: 15pt;
	
}

ul.options {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.options > li {
	background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56 56" style="enable-background:new 0 0 56 56;" xml:space="preserve" width="23px" height="23px"><g>	<path d="M28,0C12.561,0,0,12.561,0,28s12.561,28,28,28s28-12.561,28-28S43.439,0,28,0z M28,54C13.663,54,2,42.336,2,28   S13.663,2,28,2s26,11.664,26,26S42.337,54,28,54z" fill="#f26"/>	<path d="M40,16H16c-0.553,0-1,0.448-1,1s0.447,1,1,1h24c0.553,0,1-0.448,1-1S40.553,16,40,16z" fill="#f26"/>	<path d="M40,27H16c-0.553,0-1,0.448-1,1s0.447,1,1,1h24c0.553,0,1-0.448,1-1S40.553,27,40,27z" fill="#f26"/>	<path d="M40,38H16c-0.553,0-1,0.448-1,1s0.447,1,1,1h24c0.553,0,1-0.448,1-1S40.553,38,40,38z" fill="#f26"/></g></svg>');
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 0px 2px;
	padding-left: 30px;

	margin-bottom: 20pt;
}

ul.options > li > .name {
	display: block;
	font-size: 14pt;
	margin-bottom: 5pt;
	color: #f26;
	line-height: 24px;
}

ul.options > li > .description {
	margin-bottom: 5pt;
}

ul.options > li ul {
	margin: 10pt; 0;
}

ul.options > li ul > li b {
	font-weight: normal;
	color: #f26;
}

ul.options > li > .default {

}

ul.options > li > .default:before {
	content: 'default: ';
	color: #777;
}

.button {
	display: inline-block;
	font-family: 'Courier New', Courier;
	font-size: 10pt;
	color: #fff;
	background: #f26;
	padding: 2pt 8pt;
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	color: #fff;
	background: #f48;
	text-decoration: none;
}

code {
	display: block;
	background: #f4f4f4;
	padding: 20pt;
	font-family: 'Courier';
	font-size: 10pt;
	white-space: pre;
	color: #000000;
	overflow-x: auto;
}

code b {
	font-weight: normal;
	color: #f48;
}

code.isolated {
	margin: 20px 0;
}

code.html,
code .html {
	color: #666;
}

code.javascript,
code .javascript {
	color: #666;
}

code .ellipsis {
	color: rgba(0, 0, 0, 0.2);
}

.inlineCode {
	font-family: 'Courier';
	font-size: 10pt;
	background: #f4f4f4;
	outline: solid #f4f4f4 3px;
}

#exampleContent {
	padding-top: 50px;
}

#bar {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	height: 50px;
	background: #222;
	color: #fff;
	padding: 0 10pt;
	z-index: 10;
}

#bar > .title {
	line-height: 50px;
}

#bar > .buttons {
	float: right;
}

#bar > .buttons > .button {
	margin: 9px 0 0 9px;
}

#source {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 11;
}

#source > .background {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.8);
	z-index: 11;
}

#source > .close {
	position: absolute;
	bottom: 20px;
	left: calc(50% - 40px);
	z-index: 12;
}

#source > iframe {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background-color: #fff;
	z-index: 12;
}

.love {
	display: inline-block;
	width: .7em;
	height: .7em;
	background-size: .7em;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 57.947 57.947" style="enable-background:new 0 0 57.947 57.947;" xml:space="preserve"><g>	<path style="fill:#f26;" d="M28.947,56.486c15.685-11.277,23.532-21.592,27.222-29.46c4.311-9.193,0.561-20.589-8.845-24.413		C36.268-1.88,28.947,8.486,28.947,8.486S21.678-1.907,10.623,2.588C1.217,6.412-2.533,17.808,1.778,27.001		C5.468,34.868,13.262,45.21,28.947,56.486z"/></g></svg>');
}

.example_div {
	position: relative;
}

.example_div.stripe {
	background-color: #f26;
	background: repeating-linear-gradient(
	  -45deg,
	  rgba(0, 0, 0, 0.05),
	  rgba(0, 0, 0, 0.05) 10px,
	  transparent 10px,
	  transparent 20px
	);
}

.example_div > .number {
	position: absolute;

	left: 50%;
	top: 50%;

	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);

	color: #fff;
	font-family: 'Courier New';
	font-size: 40pt;
}

#moockupDemo {
	width: 100%;
	height: 60vh
}

.moockup.codeDemo {
	width: 100%;
	height: 300px;
}

.mosaic > .item.withImage.highRes:after {
	position: absolute;
	top: 10px;
	left: 10px;
	float: left;
	content: 'Using high res version';
	text-transform: uppercase;
	background: #f26;
	font-family: Courier;
	color: #fff;
	font-size: 12px;
	padding: 10px;
}

.mosaic {
	position: relative;
	overflow: visible !important;
}

.mosaic > .ribbon {
	position: absolute;
	padding: 40px 20px 25px 20px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	left: calc(50% - 80px);
	top: -20px;
	width: 175px;
	text-align: center;
	font-size: 18pt;
	font-family: Georgia, Sans-serif;
	line-height: 1.2em;
	color: #fff;

	background: rgb(255,142,208);
	background: -moz-linear-gradient(top, rgba(255,142,208,1) 0%, rgba(255,142,208,1) 10px, rgba(245,0,145,1) 40px);
	background: -webkit-linear-gradient(top, rgba(255,142,208,1) 0%, rgba(255,142,208,1) 10px, rgba(245,0,145,1) 40px);
	background: linear-gradient(to bottom, rgba(255,142,208,1) 0%, rgba(255,142,208,1) 10px, rgba(245,0,145,1) 40px);

	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
}

.mosaic > .ribbon > .curl {
	position: absolute;
	content: '';
	right: 100%;
	top: 0px;

	width: 20px;
	height: 20px;

	background-color: rgba(155,42,108,1);

	background: -moz-linear-gradient(top, rgba(155,42,108,1) 0%, rgba(75,0,25,1) 100%);
	background: -webkit-linear-gradient(top, rgba(155,42,108,1) 0%, rgba(75,0,25,1) 100%);
	background: linear-gradient(to bottom, rgba(155,42,108,1) 0%, rgba(75,0,25,1) 100%);

	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;

	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
	
}

.mosaic > .ribbon > .curl:before {
	position: absolute;
	content: '';
	top: 0px;
	right: 0px;
	width: 10px;
	height: 20px;
	background-color: rgba(255,142,208,1);
	z-index: -1;
}

.mosaic > .ribbon:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 0px;
	right: 0px;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 175px 0 0;
	border-color: #f50091 transparent transparent transparent;
}