html,
body {
	height: 100%;
	font-family: 'Patua One', cursive;
}
body {
	background: #fefefe;
	-webkit-transition: background .5s ease;
	-moz-transition: background .5s ease;
	transition: background .5s ease;
	margin: 0;
}
a {
	text-decoration:none;
	color: #69c;
	-webkit-transition: color .5s ease;
	-moz-transition: color .5s ease;
	transition: color .5s ease;
}
a:hover, a:focus {
	 color: #111;
}

label {
	display: inline-block;
	width: 135px;
}

textarea {
	width: 100%;
}

.logo {
	width: 22em;
	height: 21em;
	max-height: none;
	overflow: hidden;
	margin: 2em auto 0;
	font-size: 1.2em;
	position: relative;
	-webkit-animation: logoin 5s 1;
	-moz-animation: logoin 5s 1;
	-ms-animation: logoin 5s 1;
	-o-animation: logoin 5s 1;
	animation: logoin 5s 1;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@-moz-keyframes logoin {
	0% {
 left: -60%;  }
	100% {
 left: 0;   }
}
@-o-keyframes logoin {
	0% {
 left: -60%;  }
	100% {
 left: 0;   }
}
@-webkit-keyframes logoin {
	0% {
 left: -60%;  }
	100% {
 left: 0;   }
}
@-ms-keyframes logoin {
	0% {
 left: -60%;  }
	100% {
 left: 0;   }
}
@keyframes logoin {
	0% {
 left: -60%;  }
	100% {
 left: 0;   }
}
@-moz-keyframes fadein {
	0%,80% {
 opacity: 0;  }
	100% {
opacity: 1;  }
}
@-o-keyframes fadein {
	0%,80% {
 opacity: 0;  }
	100% {
opacity: 1;  }
}
@-webkit-keyframes fadein {
	0%,80% {
 opacity: 0;  }
	100% {
opacity: 1;  }
}
@-ms-keyframes fadein {
	0%,80% {
 opacity: 0;  }
	100% {
opacity: 1;  }
}
@keyframes fadein {
	0%,80% {
 opacity: 0;  }
	100% {
opacity: 1;  }
}

.non-essential-bs {
	opacity: 1;
	-webkit-animation: fadein 6s;
	-moz-animation: fadein 6s ;
	-ms-animation: fadein 6s;
	-o-animation: fadein 6s;
	animation: fadein 6s;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.hup {
	display: block;
	-webkit-animation: marchhup .5s 10;
	-moz-animation: marchhup .5s  10;
	-ms-animation: marchhup .5s 10;
	-o-animation: marchhup .5s 10;
	animation: marchhup .5s 10;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.annnnd {
	position: absolute;
	top:.5em;
	opacity: 0;
	-webkit-animation: marchaaand .5s 10;
	-moz-animation: marchaaand .5s 10;
	-ms-animation: marchaaand .5s 10;
	-o-animation: marchaaand .5s 10;
	animation: marchaaand .5s 10;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@-moz-keyframes marchhup {
 0%,49.9% {
	 opacity: 1;
	}
	50%,100% {
	 opacity: 0;
	}
}
@-o-keyframes marchhup {
 0%,49.9% {
	 opacity: 1;
	}
	50%,100% {
	 opacity: 0;
	}
}
@-webkit-keyframes marchhup {
 0%,49.9% {
	 opacity: 1;
	}
	50%,100% {
	 opacity: 0;
	}
}
@-ms-keyframes marchhup {
 0%,49.9% {
	 opacity: 1;
	}
	50%,100% {
	 opacity: 0;
	}
}
@keyframes marchhup {
 0%,49.9% {
	 opacity: 1;
	}
	50%,100% {
	 opacity: 0;
	}
}




@-moz-keyframes marchaaand {
 0%,49.9% {
	 opacity: 0;
	}
	50%,100% {
	 opacity: 1;
	}
}
@-o-keyframes marchaaand {
 0%,49.9% {
	 opacity: 0;
	}
	50%,100% {
	 opacity: 1;
	}
}
@-webkit-keyframes marchaaand {
 0%,49.9% {
	 opacity: 0;
	}
	50%,100% {
	 opacity: 1;
	}
}
@-ms-keyframes marchaaand {
 0%,49.9% {
	 opacity: 0;
	}
	50%,100% {
	 opacity: 1;
	}
}
@keyframes marchaaand {
 0%,49.9% {
	 opacity: 0;
	}
	50%,100% {
	 opacity: 1;
	}
}






.logo>i {
	font-size: 1.4em;
	position: absolute;
	top: 6.8em;
	width: 4em;
	height: 4em;
	border-radius: 100%;
	background: black;
	left: 4.5em;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.logo>i>i {
	font-size: 1em;
	position: absolute;
	top: .5em;
	width: 3em;
	height: 3em;
	border-radius: 100%;
	background: blue;
	left: .5em;
}
.logo>i>i>i {
	position: absolute;
	top: .5em;
	width: 1em;
	height: 1em;
	border-radius: 100%;
	background: yellow;
	left: .5em;
	border: solid .5em red;
}


@-moz-keyframes blinkout {
	0% {
	opacity: 1;
	}
	1%,2% {
	opacity: 0;
	position: absolute;
	left: -999px;
	display: none;
	}
	3% {
	opacity: 1;
	}
}
@-o-keyframes blinkout {
	0% {
	opacity: 1;
	}
	1%,2% {
	opacity: 0;

	}
	3% {
	opacity: 1;
	}
}
@-webkit-keyframes blinkout {
	0% {
	opacity: 1;
	}
	1%,2% {
	opacity: 0;

	}
	3% {
	opacity: 1;
	}
}
@-ms-keyframes blinkout {
	0% {
	opacity: 1;
	}
	1%,2% {
	opacity: 0;

	}
	3% {
	opacity: 1;
	}
}
@keyframes blinkout {
	0% {
	opacity: 1;
	}
	1%,2% {
	opacity: 0;

	}
	3% {
	opacity: 1;
	}
}
.logo .one,
.logo .two ,
.logo .three  {
	position: absolute;
}
.logo .one,
.logo .three {
	position: absolute;
	top: 6.5625em;
}
.logo .one {
	-webkit-animation: blinkout 5s infinite;
	-moz-animation: blinkout 5s infinite;
	-ms-animation: blinkout 5s infinite;
	-o-animation: blinkout 5s infinite;
	animation: blinkout 5s infinite;
}


@-moz-keyframes blinkin {
	0% {
 opacity: 0;  }
	1%,2% {
 opacity: 1;  }
	3% {
 opacity: 0; }
}
@-o-keyframes blinkin {
	0% {
 opacity: 0;  }
	1%,2% {
 opacity: 1;  }
	3% {
 opacity: 0;  }
}
@-webkit-keyframes blinkin {
	0% {
 opacity: 0; }
	1%,2% {
 opacity: 1;  }
	3% {
 opacity: 0; }
}
@-ms-keyframes blinkin {
	0% {
 opacity: 0;  }
	1%,2% {
 opacity: 1;   }
	3% {
 opacity: 0; }
}
@keyframes blinkin {
	0% {
 opacity: 0;  }
	1%,2% {
 opacity: 1; }
	3% {
 opacity: 0;
	}
}
.logo .three {
	opacity: 0;
	margin-top: .2em;
	-webkit-animation: blinkin 5s infinite;
	-moz-animation: blinkin 5s infinite;
	-ms-animation: blinkin 5s infinite;
	-o-animation: blinkin 5s infinite;
	animation: blinkin 5s infinite;
}
.instructions {
	text-align: center;
	font-size: 1.8em;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246.753px%22%20height%3D%2266.234px%22%20viewBox%3D%220%200%2046.753%2066.234%22%20enable-background%3D%22new%200%200%2046.753%2066.234%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M37.1%2C57.272%0D%0A%09c-1.077-21.275-16.541-34.158-24.017-46.09%22/%3E%0D%0A%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M22.253%2C9.475c-2.547%2C0-10.835-2.749-12.808-0.005%0D%0A%09C7.225%2C12.561%2C8.28%2C22.578%2C8.28%2C28.252%22/%3E%0D%0A%3C/svg%3E%0D%0A');
	background-position: right top;
	background-repeat: no-repeat;
	padding-right: 1em;
	width: 60%;
	margin: 0 auto;
	padding-top: 1em;
	overflow: visible;
}
.click-2-upload {
	display: block;
	font-size: 85%;
	text-align: center;
}
.by {
	font-family: arial, san-serif;
	font-size: .8em;
	color: #ccc;
	padding:1.5em 0;
	background-color: #888;
	margin-top: 9em;
	text-align: center;
	margin-left:-1em;
}
.fg a {
	display: block;
	margin: .5em 0 0;
}
.fg a img {
	margin: 0;
	height:30px;
}
.witheric {
	color: #eee;
	display: block;
	margin-top:.8em;
}
.dragover { background: rgba(0,0,0,.1) }
.drop-note {
	display:none;
}
.wat,
.issues {
	position: absolute;
	top: 0;
	font-family: 'Patua One', cursive;
}
.wat {
	left: 2em;
}
.issues {
	right: 2em;
}
.wat-it-is {
	background: #e9e9e9;;
	display: none;
	color: #444;
	margin: 1em 0;
	padding: 1em 0 1em 0;
	border: solid #ddd 1px;
	line-height: 1.4em;
	border-radius: 2px;
}
.wat-it-is p {
	padding: .5em 1.25em .5em 1.25em;
	margin: 0;
}
.wat-it-is .close, #prefs .close {
	float: right;
	margin-top: -1em;
	padding-right: 1em;
}
.see-previews {
	text-align: right;
}
.dragover .drop-note {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	background-color:rgba(0,0,0,.7);
	color:#fefefe;
	font-size:1.2em;
	text-align:center;
	padding:.1em;
}
.dragover .drop-note h3 {
	margin:.2em;
	font-weight:normal;
}

.from-storage {
	padding: 0.5em;
	background: #ff9;
	border-radius: 2px;
	color: #660;
	border: 1px solid #dd8;
}

.new {
	color: #f763ec;
}

#file-previews,
#results,
#download-btn,
#prefs { display: none }

pre {
	max-height: 20em;
	overflow-y: scroll;
}
.page-header {
	background-color: #f7f8f8;
	padding:.6em;
	margin:0 0 1em 0;
	color:#6DA242;
}
.page-header .fg {
	float:right;
	font-size:.4em;
	color:#aaa;
	font-weight:normal;
}
.page-header .fg img {
	height:30px;
	margin:3px 0 0 5px;
}

#upload {
	margin-bottom:0;
}
#upload .container {
	padding: 1em 0;
	color:#bbb;
}

#upload h3 {
	text-align: center;
	border-radius: 5px;
	padding: 1.5em;
	margin-top:.5em;
	-moz-box-shadow:    inset 0 0 20px rgba(0,0,0,.18);
	-webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.18);
	box-shadow:         inset 0 0 20px rgba(0,0,0,.12);
	-webkit-transition: border-color .5s ease;
	-moz-transition: border-color .5s ease;
	transition: border-color .5s ease;
	color:#ccc;
}

.dragover #upload h3 { border-color: #06c }

.draganddrop.blobconstructor.filereader #supported { display: none }

.invalid {
	text-decoration: line-through;
	color: #666;
}

/* Thanks Dan Cederholm http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/ */
#download-btn {
	margin: 2em auto;
	text-align: center;
}
.get-it {
	display: inline-block;
	padding:0;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow:
		0 8px 0 #1a74a1,
		0 15px 1px rgba(0,0,0,.15);
	-moz-box-shadow:
		0 8px 0 #1a74a1,
		0 15px 1px rgba(0,0,0,.15);
	box-shadow:
		0 8px 0 #e036d4,
		0 15px 1px rgba(0,0,0,.1);
	-webkit-transition: -webkit-box-shadow .2s ease-in-out;
	-moz-transition: -moz-box-shadow .2s ease-in-out;
	-o-transition: -o-box-shadow .2s ease-in-out;
	transition: box-shadow .2s ease-in-out;
	}
.get-it span {
	display: inline-block;
	color:#fff;
	padding: .5em 2em;
	font-family: 'Patua One', cursive;
	font-weight:normal;
	font-size:2em;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(0,0,0,.3);
	background: #f763ec;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
	-webkit-transition: -webkit-transform .15s ease-in-out;
	-moz-transition: -moz-transform .15s ease-in-out;
	-o-transition: -o-transform .15s ease-in-out;
	transition: transform .15s ease-in-out;
	}
.get-it:hover {
	-webkit-box-shadow:
		0 9px 0 #e036d4,
		0 14px 0 rgba(0,0,0,.3);
	-moz-box-shadow:
		0 8px 0 #e036d4,
		0 14px 0 rgba(0,0,0,.3);
	box-shadow:
		0 8px 0 #e036d4,
		0 14px 0 rgba(0,0,0,.1);
	}
.get-it:hover span {
	-webkit-transform: translate(0, 2px);
	-moz-transform: translate(0, 2px);
	-o-transform: translate(0, 2px);
	transform: translate(0, 2px);
	}

.get-it:active {
	-webkit-box-shadow:
		0 7px 0 #e036d4,
		0 8px 0 rgba(0,0,0,.3);
	-moz-box-shadow:
		0 7px 0 #e036d4,
		0 8px 0 rgba(0,0,0,.3);
	box-shadow:
		0 7px 0 #e036d4,
		0 8px 0 rgba(0,0,0,.1);
}
.get-it:active span {
	-webkit-transform: translate(0, 6px);
	-moz-transform: translate(0, 6px);
	-o-transform: translate(0, 6px);
	transform: translate(0, 6px);
}


#results {
	margin: -3em auto 0;
}

h3 {
/*	margin-top: 2.5em;
	margin-bottom:1em;*/
}

#results-count {
	margin-top:5em;
}
#svg-icons-results {
	margin-bottom:2em;
	margin-top:1em;
}
#svg-icons-results>div {
	background-color:#e9e9e9;
	border: solid #ddd 1px;
	padding: .6em 1.25em .6em 1.25em;
	margin:0 0 2px 0;
	border-radius: 2px;
	-webkit-transition: background-color .5s ease;
	-moz-transition: background-color .5s ease;
	transition: background-color .5s ease;
}
#svg-icons-results>div:hover {
	background-color: #dedede;
}
#svg-icons-results .meta {
	display: inline-block;
	margin:0;
	width:30%;
	padding:0;
	vertical-align:top;
	font-size: 1.2em;
}
#svg-icons-results .meta h5 {
	margin:0;
	font-weight:normal;
}
#svg-icons-results .meta p {
	margin: .1em 0 .5em 0;
	color: #888;
	font-size:.7em;
}
#svg-icons-results .close {
	float: right;
	font-size: 1em;
	margin-top: .35em;
	padding-right: 1em;
	color: #bbb;
	font-weight:normal;
}
#svg-icons-results img {
	display: inline-block;
	vertical-align:top;
}

#file-previews, #prefs {
	background-color:#e9e9e9;
	border: solid #ddd 1px;
	padding: .6em 1.25em .6em 1.25em;
	margin:0 0 2px 0;
	border-radius: 2px;
}

#file-previews > pre {
	border: solid #ddd 1px;
	padding: 1.75em;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#file-previews > pre:hover {
	color: #f763ec;
}

.input-box {
	width: 50%;
	float: left;
}


/* min-width:40em */
@media(min-width:40em) {
	.wat-it-is {
		margin: 2em auto;
		max-width: 65%;
	}
	.row {
		max-width: 65%;
		margin: 0 auto;
	}

}
