/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}ul,li{list-style-type:none}*{box-sizing:border-box}

html, body {
	width: 100%;
	height: 100%;
	margin: 0; padding: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #CCC;
	background-image: url(../media/noise.png);
	background-repeat: repeat;
	background-size: auto;
}

section {
	position: relative;
}

.content {
	position: relative;
	text-shadow: 0 0 1px rgba(50,50,50,.2);
}

.fullscreen {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100vh;
}

.three-clmns {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-justify-content: center;
	justify-content:center;
	height: 100%;
	margin: 0; padding: 0;
}

.clmn {
	position: relative;
	height: 200%;
	-webkit-flex: 1 1 33.333%;
	flex: 1 1 33.333%;
}

.clmn-wrapper {
	position: absolute;
	width: 100%; height: 100%;
	overflow: hidden;
	background-image: url(../media/noise.png);
	background-repeat: repeat;
	-webkit-backface-visibility: hidden;
}

.clmn-container {
	position: absolute;
	width: 100%; height: 50%;
	-webkit-backface-visibility: hidden;
}

.clmn-content {
	position: absolute;
	top: 50%;
	width: 100%; height: auto;
	text-align: center;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

.content .clmn-content {
	padding: 0 10%;
}

.sticky-clmn-content {
	position: absolute;
	-webkit-backface-visibility: hidden;	
}

.illustration {
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-attachment: fixed, scroll;
	background-size: 25vw, auto;
}

/* ===== FONT SIZE ===== */

h1,h2,h3 {
	font-family: 'Montserrat', sans-serif;
	margin: 0; padding: 0;
}

h1 {
	font-size: 2em;
	line-height: 2;
}

h2 {
	font-size: 1.75em;
	line-height: 2;
	border-radius: 5px;
	letter-spacing: -0.01em;
	word-spacing: 0.1em;
	text-align: left;
}

.content h2 {
	display: block;
	line-height: 1.2;
}

h3 {
	display: inline-block;
	margin: 5px 0;
	font-size: 0.95em;
	line-height: 1;
	color: #555;
	background: #fff;
	border: 6px solid #fff;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(50,50,50,.1)
}

p {
	font-size: 1em;
	line-height: 1.5;
	text-align: left;
}

.timestamp {
	position: absolute;
	top: 25px;
	margin: 25px 0; padding: 5px 15px;
	font-size: 1.75em;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.number {
	display: inline-block;
	width: 1.5em; height: 1.5em;
	color: #555;
	text-align: center;
	line-height: 1;
	background: rgb(255, 255, 255) none repeat scroll 0% 0%;
	border-radius: 50%;
	border: 5px solid rgb(255, 255, 255);
}

label {
	font-weight: 600;
	text-shadow: 0 0 1px rgba(50,50,50,.2);
}

blockquote {
	font-variant: small-caps;
	border-left: 3px solid;
	text-align: left;
	padding: 0px 10px;
	margin: 25px 15px;
}


@media screen and (max-width: 1400px) {
	h2 {
		font-size: 1.3em;
	}
	
	p,
	blockquote {
		font-size: 0.875em;
	}
	
	blockquote {
		margin: 15px;
	}
}

/* ===== INPUT & ELEMENTS ===== */

#scroll_top {
	position: fixed;
	bottom: -50px; right: 50px;
	display: inline-block;
	width: 50px; height: 50px;
	background: rgba(0,0,0,.3);
	border: 0px solid rgba(50,50,50,.2);	
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

#scroll_top.show {
	bottom: 50px;
	opacity: 1;
	visibility: visible
}

#scroll_top:hover {
	border: 25px solid rgba(50,50,50,.5);	
}

.chevron-top {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%)
}

.chevron-top:before {
	position: relative;	
	content: '';
	top: 2px;
	display: inline-block;
	border-style: solid;
	border-color: #fff;
	border-width: 5px 5px 0 0;
	width: 10px; height: 10px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

fieldset {
	position: relative;
	padding: 0;
	border: none;
}

.fieldset {
	width: 80%;
	margin: 0 auto;
}

.fieldset-clmns {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.field-clmn {
	-webkit-flex: 1 0 calc(33.333% - 20px);
	flex: 1 0 calc(33.333% - 20px);
	padding: 0 10px;
	text-align: left;
}

fieldset.block {
	display: inline-block;
	text-align: left;
}

.preview {
	-webkit-appearance: none;
	-moz-appearance: none;		outline: none;
	display: block;
	width: 100%; height: 250px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
	overflow-Y: auto;
	background: rgba(50,50,50,.2);
	border: 1px solid rgba(50,50,50,.5);
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.2) inset, 0 -150px 100px -50px rgba(0,0,0,.2) inset, 1px 1px 0 0 rgba(255,255,255,.1);
}

div.preview {
	width: 80%;
}

.form-wrapper {
	width: 100% !important;
	height: auto;
	padding: 15px;
	background: rgba(50,50,50,.05);
}

input[type=checkbox],
input[type=radio] {
	display: none;
}

input[type=checkbox] + label,
input[type=radio] + label {
	position: relative;
	display: inline-block;
	min-height: 25px;
	line-height: 1;
	padding: 10px 0 5px 25px;
	cursor: pointer;
}

input[type=checkbox] + label:before,
input[type=radio] + label:before {
	content:"";
	position: absolute;
	left: 0; top: 9px;
	display: inline-block;
	width: 15px; height: 15px;
  background: #fff;
	box-shadow: 0 0 0 5px rgba(50,50,50,.3);
	border: none;
  border-radius: 50%;	
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

input[type=checkbox] + label:before {
	border-radius: 3px;
}

input[type=checkbox] + label:hover:before,
input[type=radio] + label:hover:before {
	box-shadow: 0 0 0 7px rgba(50,50,50,.3);	
}

input[type=checkbox] + label:after,
input[type=radio] + label:after {
	content:"";
	position: absolute;
	left: 2px; top: 11px;
	display: inline-block;
	width: 0px; height: 0px;
  background: rgb(50,50,50);
  border-radius: 50%;	
}

input[type=checkbox] + label:after {
	border-radius: 3px;
}

input[type=checkbox]:checked + label:after,
input[type=radio]:checked + label:after {
	width: 11px; height: 11px;
}

input[type=range]{
	-webkit-appearance: none;
	-moz-appearance: none;	 	outline: 0;
	display: block;
  width: 75%; height: 24px;
	margin: 0 auto 10px auto;
	border: none; 
	background: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;	height: 1px;
	background: #fff;
	border: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
	margin-top: -5px;
  background: #fff;
	box-shadow: 0 0 0 7px rgba(50,50,50,.3);
	border: none;
  border-radius: 50%;	
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

input[type=range]:hover::-webkit-slider-thumb {
	box-shadow: 0 0 0 10px rgba(50,50,50,.3);
}

input[type=range]::-moz-range-track {
  width: 100%;	height: 1px;
	background: rgba(255,255,255,.5);
	border: none;
}

input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px;
  background: #fff;
	box-shadow: 0 0 0 7px rgba(50,50,50,.3);
	border: none;
  border-radius: 50%;	
	-webkit-transition: 2s ease;
	transition: .2s ease;
}

input[type=range]:hover::-moz-range-thumb {
	box-shadow: 0 0 0 10px rgba(50,50,50,.3);
}

.select {
	position: relative;
	display: inline-block;
	color: rgb(50,50,50);
  background-color: #eaeaea;
	background-image: none;
	box-shadow: 0 0 0 5px rgba(50,50,50,.3);
	border: none;
  border-radius: 3px;	
}

select {
	position: relative;
	z-index: 2;
	display: inline-block;
	border: none;
	padding: 5px 5px 20px 5px;
	background: none;
	border-radius: 3px;	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;	
}

select::-ms-expand {
  display:none;
}

.select:before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: calc(1em + 15px);
	background: #fff;
	border-radius: 3px;
}

.select:after {
	content: "";
	position: absolute;
	left: 50%; bottom: 2px;
	width: 5px; height: 5px;
	border-style: solid;
	border-color: rgb(50,50,50);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg) translateX(-50%);
	transform: rotate(45deg) translateX(-50%);
}

select:focus {
  outline: none;
}

hr {
	border-style: solid none;
	border-color: rgba(50, 50, 50, 0.3) transparent rgba(255, 255, 255, 0.3);
	border-width: 1px 0;
}

.preview-slider {
	position: relative;
	top: -12px;
}

.size-output {
	background: #fff;
	box-shadow: 0 0 0 1px rgba(50,50,50,.1)
}

.size-output {
	position: relative;
	display: inline-block;
	min-width: 100px;
	padding: 10px;
	color: #555;
	font-size: 1em;
	font-weight: 600;
	background: #fff;
}

.size-output:before {
	content: "";	
	position: absolute;
	width: 0; height: 0;
	bottom: 100%;	left: 50%;
	margin: 0 0 -1px -15px;
	border: solid transparent;
	border-bottom-color: #fff;
	border-width: 15px;
}

/* ===== START ===== */

#start_content {
	position: absolute;
	top: 50%; left: 0; right: 0;
	width: 80%;
	text-align: center;
	margin: 0 auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#start_content h1 {
	text-align: left;
}

#id {
	position: absolute;
	top: 50%; left: 50%;
	display: inline-block;
}

#color_banner {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-justify-content: center;
	justify-content:center;
	width: 100%;height: 5vh;
	margin: 50px 0; padding: 0;
}

.color-clmn {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* ===== Bitmap Section ===== */

@font-face {
	font-family: 'Helvetica Pixel';
	font-weight: normal;
	font-style: normal;
  src: url('../fonts/helvetica-pixel/helveticapixel.ttf') format('truetype');
}

#bitmap {
}

#bitmap_preview {
	font-family: 'Helvetica Pixel', sans-serif;
}

.range {
	width: 25vw
}

/* ===== Outline Section ===== */

#outline_preview {
	position: relative;
}

.hinting {
	position: absolute;
	width: 100%; height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#outline_outline {
	background-image: url(../media/outline-outline.png);
	background-color: transparent;
}

#outline_unhinted {
	background-image: url(../media/outline-unhinted.png);
	background-color: transparent;
}

#outline_hinted {
	background-image: url(../media/outline-hinted.png);
	background-color: transparent;
}

#outline_anti_aliased {
	background-image: url(../media/outline-anti-aliased.png);
	background-color: transparent;
}

/* ===== Font Tag Section ===== */

#font_tag_preview {
	padding: 15px;
	font-size: 0.875em;
	line-height: 1.5em;
	text-align: left;
}

#font_tag_title,
#font_tag_content {
	background: rgba(50,50,50,0);
	-webkit-transition: .5s ease;
	transition: .5s ease;
}

#font_tag_title.highlight,
#font_tag_content.highlight {
	background: rgba(50,50,50,.9);
	-webkit-transition: 0s ease;
	transition: 0s ease;
}

.browser {
	box-shadow: 0 25px 40px -15px rgba(50,50,50,.8)
}

#internet_explorer_content,
#safari_content {
	position: absolute;
	top: 25%;	left: 10%; right: 10%; bottom: 5%;
	color: #000;
	text-align: left;
	font-family: "Times New Roman", Times, serif;
	font-size: 0.875em;
	overflow: hidden;
}

#font_tag_content_preview[data-size="1"] {
	font-size: 0.63em;
}

#font_tag_content_preview[data-size="2"] {
	font-size: 0.82em;
}

#font_tag_content_preview[data-size="3"] {
	font-size: 1em;
}

#font_tag_content_preview[data-size="4"] {
	font-size: 1.13em;
}

#font_tag_content_preview[data-size="5"] {
	font-size: 1.5em;
}

#font_tag_content_preview[data-size="6"] {
	font-size: 2em;
}

#font_tag_content_preview[data-size="7"] {
	font-size: 3em;
}

#font_tag_content_preview {
	font-size: 1em;
}

/* ===== Pixel Density Section ===== */

#safari_content {
	font-size: 0.656em
}

@-webkit-keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 25%;
		-webkit-animate-timing-function: ease-in-out;	
  }
  15% {
    opacity: 1;
    top: 40%;
		-webkit-animate-timing-function: ease-in-out;	
  }
  50% {
    opacity: 0;
    top: 40%;
		-webkit-animate-timing-function: ease-in-out;	
  }
  100% {
    opacity: 0;
    top: 25%;
		-webkit-animate-timing-function: ease-in-out;	
  }
}

@keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 25%;
  }
  15% {
    opacity: 1;
    top: 40%;
  }
  50% {
    opacity: 0;
    top: 40%;
  }
  100% {
    opacity: 0;
    top: 25%;
  }
}

.mouse-scroll {
	display: inline-block;
	margin: 0 auto 0 -20px;
}

.mouse {
	position: relative;
    display: block;
    width: 50px;
    height: 75px;
    margin: 0 auto;
    border: 3px solid #fff;
    border-radius: 50px;
		box-shadow: 0 0 0 5px rgba(50,50,50,.1);
}

.mouse-middle {
	position: absolute;
	display: inline-block;
	top: 25%;
	left: 50%;
	width: 5px;
	height: 25%;
	margin: -2px 0 0 -2.5px;
	background: rgba(255,255,255,.3);
	border-radius: 5px;	
	box-shadow: 0 0 0 5px rgba(50,50,50,.1);
}

.mouse-movement { 
	position: absolute;
	display: inline-block;
	top: 25%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2px 0 0 -2.5px;
	background: #fff;
	border-radius: 50%;
	-webkit-animation-name: scroll-ani;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation: scroll-ani 2s ease-in-out infinite;
}

.mouse-movement.reverse {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

/* ===== Relative Sizing ===== */

#pixel_preview,
#em_preview {
	font-family: 'Helvetica', sans-serif;
}

/* ===== Testbox ===== */

#testbox_wrapper,
.style-element {
	margin: 0; padding: 0;
}

#testbox_input,
#testbox_output {
	padding: 25px;
	max-height: 100%;
	vertical-align: top;
}

#testbox_input,
#testbox_output,
.style-description,
.style-input {
	display: inline-block;
	width: 50%;
	margin: 0;
}

#testbox_code {
	height: 90vh;
	padding: 15px;
	text-align: left;
}

#testbox_code h1 {
	font-family: "Times New Roman", Times, serif;
	line-height: 0.5em;
	text-decoration: underline;
}

#testbox_code p {
	font-family: "Comic Sans MS", cursive;
	font-weight: 600;
	font-style: italic;
	text-align: justify;
	line-height: 0.8;
	word-spacing: 2;
}

.choose-attribute {
	cursor: pointer;
}

.choose-attribute h3 {
	margin: 5px;
	box-shadow: inherit;
	opacity: .5;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.choose-attribute:hover h3 {
	opacity: 1;
}

.choose-attribute.active h3 {
	opacity: 1;
	box-shadow: 0 0 0 5px rgba(50,50,50,.3);
}

.style-element {
	padding: 10px 0;
}

.style-element:nth-child(2n+1) {
	background: rgba(50,50,50,.3);
}

.style-description,
.style-input {
	padding: 5px 0;
}

.style-description {
	width: 25%;
	text-align: left;
	vertical-align: top;
}

.style-input {
	width: 100%;
}

.style-input .select,
.style-input select,
.style-input input[type=range] {
	width: 100%;
}

.sp-replacer,
.sp-container {
	padding: 5px;
  background: #fff;
	box-shadow: 0 0 0 5px rgba(50,50,50,.3);
	border: none;
  border-radius: 3px;	
}

.sp-replacer {
	display: inline-block;
	width: 100%; height: 30px;
}

.sp-container {
	position: relative;
	top: 5px;
}

.sp-preview {
	width: 100%;
}

.sp-dd {
	display: none;
}